更新
This commit is contained in:
parent
f09b3b18d9
commit
c0a5dbac2d
43
package-lock.json
generated
43
package-lock.json
generated
@ -4,6 +4,19 @@
|
|||||||
"lockfileVersion": 1,
|
"lockfileVersion": 1,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@antv/x6": {
|
||||||
|
"version": "1.33.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@antv/x6/-/x6-1.33.1.tgz",
|
||||||
|
"integrity": "sha512-NW3mUDW+Od9hqas0URoaeih0we4gLipqdNEC7ozM7wRFEzpi9CDzfPZerHmhdKasUMwjIyyrN56uJEHGVnrp4Q==",
|
||||||
|
"requires": {
|
||||||
|
"csstype": "^3.0.3",
|
||||||
|
"jquery": "^3.5.1",
|
||||||
|
"jquery-mousewheel": "^3.1.13",
|
||||||
|
"lodash-es": "^4.17.15",
|
||||||
|
"mousetrap": "^1.6.5",
|
||||||
|
"utility-types": "^3.10.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"@babel/code-frame": {
|
"@babel/code-frame": {
|
||||||
"version": "7.0.0-beta.44",
|
"version": "7.0.0-beta.44",
|
||||||
"resolved": "https://registry.npm.taobao.org/@babel/code-frame/download/@babel/code-frame-7.0.0-beta.44.tgz?cache=0&sync_timestamp=1593529659031&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40babel%2Fcode-frame%2Fdownload%2F%40babel%2Fcode-frame-7.0.0-beta.44.tgz",
|
"resolved": "https://registry.npm.taobao.org/@babel/code-frame/download/@babel/code-frame-7.0.0-beta.44.tgz?cache=0&sync_timestamp=1593529659031&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40babel%2Fcode-frame%2Fdownload%2F%40babel%2Fcode-frame-7.0.0-beta.44.tgz",
|
||||||
@ -6498,6 +6511,11 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"csstype": {
|
||||||
|
"version": "3.1.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz",
|
||||||
|
"integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA=="
|
||||||
|
},
|
||||||
"currently-unhandled": {
|
"currently-unhandled": {
|
||||||
"version": "0.4.1",
|
"version": "0.4.1",
|
||||||
"resolved": "https://registry.npm.taobao.org/currently-unhandled/download/currently-unhandled-0.4.1.tgz",
|
"resolved": "https://registry.npm.taobao.org/currently-unhandled/download/currently-unhandled-0.4.1.tgz",
|
||||||
@ -9956,6 +9974,16 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"jquery": {
|
||||||
|
"version": "3.6.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.1.tgz",
|
||||||
|
"integrity": "sha512-opJeO4nCucVnsjiXOE+/PcCgYw9Gwpvs/a6B1LL/lQhwWwpbVEVYDZ1FokFr8PRc7ghYlrFPuyHuiiDNTQxmcw=="
|
||||||
|
},
|
||||||
|
"jquery-mousewheel": {
|
||||||
|
"version": "3.1.13",
|
||||||
|
"resolved": "https://registry.npmjs.org/jquery-mousewheel/-/jquery-mousewheel-3.1.13.tgz",
|
||||||
|
"integrity": "sha512-GXhSjfOPyDemM005YCEHvzrEALhKDIswtxSHSR2e4K/suHVJKJxxRCGz3skPjNxjJjQa9AVSGGlYjv1M3VLIPg=="
|
||||||
|
},
|
||||||
"js-base64": {
|
"js-base64": {
|
||||||
"version": "2.6.3",
|
"version": "2.6.3",
|
||||||
"resolved": "https://registry.npm.taobao.org/js-base64/download/js-base64-2.6.3.tgz?cache=0&sync_timestamp=1595031171987&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fjs-base64%2Fdownload%2Fjs-base64-2.6.3.tgz",
|
"resolved": "https://registry.npm.taobao.org/js-base64/download/js-base64-2.6.3.tgz?cache=0&sync_timestamp=1595031171987&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fjs-base64%2Fdownload%2Fjs-base64-2.6.3.tgz",
|
||||||
@ -10205,6 +10233,11 @@
|
|||||||
"resolved": "https://registry.npm.taobao.org/lodash/download/lodash-4.17.19.tgz?cache=0&sync_timestamp=1594226905843&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Flodash%2Fdownload%2Flodash-4.17.19.tgz",
|
"resolved": "https://registry.npm.taobao.org/lodash/download/lodash-4.17.19.tgz?cache=0&sync_timestamp=1594226905843&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Flodash%2Fdownload%2Flodash-4.17.19.tgz",
|
||||||
"integrity": "sha1-5I3e2+MLMyF4PFtDAfvTU7weSks="
|
"integrity": "sha1-5I3e2+MLMyF4PFtDAfvTU7weSks="
|
||||||
},
|
},
|
||||||
|
"lodash-es": {
|
||||||
|
"version": "4.17.21",
|
||||||
|
"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
|
||||||
|
"integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
|
||||||
|
},
|
||||||
"lodash._basecopy": {
|
"lodash._basecopy": {
|
||||||
"version": "3.0.1",
|
"version": "3.0.1",
|
||||||
"resolved": "https://registry.npm.taobao.org/lodash._basecopy/download/lodash._basecopy-3.0.1.tgz",
|
"resolved": "https://registry.npm.taobao.org/lodash._basecopy/download/lodash._basecopy-3.0.1.tgz",
|
||||||
@ -10958,6 +10991,11 @@
|
|||||||
"minimist": "^1.2.5"
|
"minimist": "^1.2.5"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"mousetrap": {
|
||||||
|
"version": "1.6.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/mousetrap/-/mousetrap-1.6.5.tgz",
|
||||||
|
"integrity": "sha512-QNo4kEepaIBwiT8CDhP98umTetp+JNfQYBWvC1pc6/OAibuXtRcxZ58Qz8skvEHYvURne/7R8T5VoOI7rDsEUA=="
|
||||||
|
},
|
||||||
"move-concurrently": {
|
"move-concurrently": {
|
||||||
"version": "1.0.1",
|
"version": "1.0.1",
|
||||||
"resolved": "https://registry.npm.taobao.org/move-concurrently/download/move-concurrently-1.0.1.tgz",
|
"resolved": "https://registry.npm.taobao.org/move-concurrently/download/move-concurrently-1.0.1.tgz",
|
||||||
@ -16256,6 +16294,11 @@
|
|||||||
"resolved": "https://registry.npm.taobao.org/utila/download/utila-0.4.0.tgz",
|
"resolved": "https://registry.npm.taobao.org/utila/download/utila-0.4.0.tgz",
|
||||||
"integrity": "sha1-ihagXURWV6Oupe7MWxKk+lN5dyw="
|
"integrity": "sha1-ihagXURWV6Oupe7MWxKk+lN5dyw="
|
||||||
},
|
},
|
||||||
|
"utility-types": {
|
||||||
|
"version": "3.10.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/utility-types/-/utility-types-3.10.0.tgz",
|
||||||
|
"integrity": "sha512-O11mqxmi7wMKCo6HKFt5AhO4BwY3VV68YU07tgxfz8zJTIxr4BpsezN49Ffwy9j3ZpwwJp4fkRwjRzq3uWE6Rg=="
|
||||||
|
},
|
||||||
"utils-merge": {
|
"utils-merge": {
|
||||||
"version": "1.0.1",
|
"version": "1.0.1",
|
||||||
"resolved": "https://registry.npm.taobao.org/utils-merge/download/utils-merge-1.0.1.tgz",
|
"resolved": "https://registry.npm.taobao.org/utils-merge/download/utils-merge-1.0.1.tgz",
|
||||||
|
|||||||
@ -10,6 +10,7 @@
|
|||||||
"build:uat": "vue-cli-service build --mode production.uat"
|
"build:uat": "vue-cli-service build --mode production.uat"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@antv/x6": "^1.33.1",
|
||||||
"axios": "^0.19.2",
|
"axios": "^0.19.2",
|
||||||
"babel-eslint": "^8.0.1",
|
"babel-eslint": "^8.0.1",
|
||||||
"babel-plugin-component": "^1.1.1",
|
"babel-plugin-component": "^1.1.1",
|
||||||
|
|||||||
1
src/icons/svg/上箭头.svg
Normal file
1
src/icons/svg/上箭头.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1662347535232" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2275" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M573.056 272l308.8 404.608A76.8 76.8 0 0 1 820.736 800H203.232a76.8 76.8 0 0 1-61.056-123.392L450.976 272a76.8 76.8 0 0 1 122.08 0z" p-id="2276"></path></svg>
|
||||||
|
After Width: | Height: | Size: 491 B |
1
src/icons/svg/下箭头.svg
Normal file
1
src/icons/svg/下箭头.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1662347550082" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3183" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M573.056 752l308.8-404.608A76.8 76.8 0 0 0 820.736 224H203.232a76.8 76.8 0 0 0-61.056 123.392l308.8 404.608a76.8 76.8 0 0 0 122.08 0z" p-id="3184"></path></svg>
|
||||||
|
After Width: | Height: | Size: 493 B |
1
src/icons/svg/历史记录.svg
Normal file
1
src/icons/svg/历史记录.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1662537336660" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2319" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M798.5152 707.9936v-77.0048c0-12.288-9.8304-22.7328-22.1184-22.7328-13.9264 0-24.1664 11.4688-24.1664 25.3952V739.328c0 8.192 6.7584 14.9504 14.9504 14.9504h83.5584c13.1072 0 24.1664-10.6496 23.7568-23.7568-0.4096-13.7216-11.6736-22.528-25.3952-22.528h-50.5856z m-502.3744-119.1936c-16.384 0-29.2864 13.9264-27.8528 30.5152 1.2288 14.5408 13.9264 25.3952 28.672 25.3952h142.9504c14.5408 0 27.2384-10.8544 28.672-25.3952 1.4336-16.5888-11.4688-30.5152-27.8528-30.5152h-144.5888z m0-231.6288h309.4528c15.7696 0 28.4672-12.9024 28.0576-28.8768-0.4096-14.9504-13.7216-27.2384-28.672-27.2384H296.7552c-14.7456 0-27.8528 11.8784-28.672 26.624-0.4096 7.9872 2.6624 15.5648 8.192 21.2992 5.3248 5.12 12.288 8.192 19.8656 8.192z m241.4592 113.0496c0-15.36-12.4928-28.0576-28.0576-28.0576H296.7552c-14.5408 0-27.2384 10.8544-28.4672 25.3952-1.4336 16.5888 11.6736 30.5152 28.0576 30.5152h213.4016c15.36 0.4096 27.8528-12.288 27.8528-27.8528z m0 0" p-id="2320"></path><path d="M568.5248 846.4384H248.0128c-24.1664 0-44.032-19.8656-44.032-44.032V212.1728c0-24.1664 19.8656-44.032 44.032-44.032h461.0048c24.1664 0 44.032 19.8656 44.032 44.032v223.0272c0 15.5648 11.6736 28.8768 27.0336 30.3104 17.6128 1.6384 32.3584-12.288 32.3584-29.696V212.1728c0-57.1392-46.4896-103.6288-103.424-103.6288H248.0128c-55.296 0-100.5568 43.008-103.424 98.0992v601.4976c2.8672 54.8864 48.3328 97.8944 103.424 97.8944h319.8976c14.9504 0 28.0576-10.6496 30.1056-25.3952 2.6624-18.432-11.6736-34.2016-29.4912-34.2016z m0 0" p-id="2321"></path><path d="M782.7456 502.1696c-111.8208 0-202.752 91.3408-201.9328 203.5712 0.8192 109.7728 90.5216 199.4752 200.4992 200.4992 112.0256 0.8192 203.5712-90.112 203.5712-201.9328-0.2048-111.616-90.7264-202.1376-202.1376-202.1376z m146.432 201.9328c0 81.5104-66.7648 147.456-148.48 146.432-78.848-1.024-143.1552-65.3312-144.384-143.9744-1.2288-81.92 64.9216-148.8896 146.432-148.8896 80.6912 0 146.432 65.536 146.432 146.432z m0 0" p-id="2322"></path></svg>
|
||||||
|
After Width: | Height: | Size: 2.2 KiB |
@ -52,7 +52,7 @@
|
|||||||
<script>
|
<script>
|
||||||
import Cookies from 'js-cookie'
|
import Cookies from 'js-cookie'
|
||||||
import debounce from 'lodash/debounce'
|
import debounce from 'lodash/debounce'
|
||||||
import { getUUID } from '@/utils'
|
//import { getUUID } from '@/utils'
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
@ -60,7 +60,7 @@ export default {
|
|||||||
dataForm: {
|
dataForm: {
|
||||||
username: 'admin1',
|
username: 'admin1',
|
||||||
password: 'admin',
|
password: 'admin',
|
||||||
uuid: '',
|
uuid: 'string',
|
||||||
captcha: ''
|
captcha: ''
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -86,7 +86,6 @@ export default {
|
|||||||
methods: {
|
methods: {
|
||||||
// 获取验证码
|
// 获取验证码
|
||||||
getCaptcha () {
|
getCaptcha () {
|
||||||
this.dataForm.uuid = getUUID()
|
|
||||||
this.captchaPath = `${window.SITE_CONFIG['apiURL']}/captcha?uuid=${this.dataForm.uuid}`
|
this.captchaPath = `${window.SITE_CONFIG['apiURL']}/captcha?uuid=${this.dataForm.uuid}`
|
||||||
},
|
},
|
||||||
// 表单提交
|
// 表单提交
|
||||||
|
|||||||
103
src/views/spc-basic/components/flowMethods.js
Normal file
103
src/views/spc-basic/components/flowMethods.js
Normal file
@ -0,0 +1,103 @@
|
|||||||
|
import { Addon} from '@antv/x6';
|
||||||
|
// 拖拽生成四边形
|
||||||
|
export const startDragToGraph = (graph,data,e) =>{
|
||||||
|
const node =
|
||||||
|
graph.createNode({
|
||||||
|
width: 100, //节点的宽度
|
||||||
|
height: 60, //节点的高度
|
||||||
|
attrs: {
|
||||||
|
label: {
|
||||||
|
text: data.name,
|
||||||
|
workingProcedureId: data.id,
|
||||||
|
fill: 'white',
|
||||||
|
fontSize: 14,
|
||||||
|
textWrap: {
|
||||||
|
width: -10 ,
|
||||||
|
height: -10,
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
body: {
|
||||||
|
stroke: '#000000',
|
||||||
|
strokeWidth: 1,
|
||||||
|
fill: '#5bdeff',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
ports: ports
|
||||||
|
})
|
||||||
|
const dnd = new Addon.Dnd({target:graph})
|
||||||
|
dnd.start(node,e)
|
||||||
|
}
|
||||||
|
//下面是锚点的代码。 知道就行了 我就不一一写了。
|
||||||
|
export const ports = {
|
||||||
|
groups: {
|
||||||
|
// 输入链接桩群组定义
|
||||||
|
top: {
|
||||||
|
position: 'top',
|
||||||
|
attrs: {
|
||||||
|
circle: {
|
||||||
|
r: 4,
|
||||||
|
magnet: true,
|
||||||
|
stroke: '#2D8CF0',
|
||||||
|
strokeWidth: 2,
|
||||||
|
fill: '#fff',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// 输出链接桩群组定义
|
||||||
|
bottom: {
|
||||||
|
position: 'bottom',
|
||||||
|
attrs: {
|
||||||
|
circle: {
|
||||||
|
r: 4,
|
||||||
|
magnet: true,
|
||||||
|
stroke: '#2D8CF0',
|
||||||
|
strokeWidth: 2,
|
||||||
|
fill: '#fff',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
left: {
|
||||||
|
position: 'left',
|
||||||
|
attrs: {
|
||||||
|
circle: {
|
||||||
|
r: 4,
|
||||||
|
magnet: true,
|
||||||
|
stroke: '#2D8CF0',
|
||||||
|
strokeWidth: 2,
|
||||||
|
fill: '#fff',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
right: {
|
||||||
|
position: 'right',
|
||||||
|
attrs: {
|
||||||
|
circle: {
|
||||||
|
r: 4,
|
||||||
|
magnet: true,
|
||||||
|
stroke: '#2D8CF0',
|
||||||
|
strokeWidth: 2,
|
||||||
|
fill: '#fff',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
id: 'port1',
|
||||||
|
group: 'top',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'port2',
|
||||||
|
group: 'bottom',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'port3',
|
||||||
|
group: 'left',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'port4',
|
||||||
|
group: 'right',
|
||||||
|
}
|
||||||
|
],
|
||||||
|
}
|
||||||
@ -0,0 +1,370 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: zwq
|
||||||
|
* @Date: 2022-09-01 15:42:34
|
||||||
|
* @LastEditors: zwq
|
||||||
|
* @LastEditTime: 2022-09-09 13:42:48
|
||||||
|
* @Description:
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<el-col :span="3">
|
||||||
|
<el-card>
|
||||||
|
<div
|
||||||
|
v-for="(item, index) in processArr"
|
||||||
|
:key="index"
|
||||||
|
class="btn"
|
||||||
|
:title="item.name"
|
||||||
|
@mousedown="startDrag(item, $event)"
|
||||||
|
>
|
||||||
|
{{ item.name }}
|
||||||
|
</div>
|
||||||
|
<!-- <el-button type="primary">保存</el-button> -->
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="21">
|
||||||
|
<div id="containerChart"></div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { Graph, Shape, FunctionExt } from "@antv/x6";
|
||||||
|
import { startDragToGraph, ports } from "./flowMethods.js";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
productId: {
|
||||||
|
type: String,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
dataList: [],
|
||||||
|
processArr: [],
|
||||||
|
processId: "",
|
||||||
|
graph: "",
|
||||||
|
type: "grid",
|
||||||
|
selectCell: "",
|
||||||
|
connectEdgeType: {
|
||||||
|
//连线方式
|
||||||
|
connector: "normal",
|
||||||
|
router: {
|
||||||
|
name: "",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
// 网格设置
|
||||||
|
size: 20, // 网格大小 10px
|
||||||
|
visible: true, // 渲染网格背景
|
||||||
|
type: "mesh",
|
||||||
|
args: {
|
||||||
|
color: "#D0D0D0",
|
||||||
|
thickness: 1, // 网格线宽度/网格点大小
|
||||||
|
factor: 10,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
activated() {
|
||||||
|
this.init();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
init() {
|
||||||
|
this.getArr();
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.processId = "";
|
||||||
|
if (this.productId) {
|
||||||
|
this.getList();
|
||||||
|
} else {
|
||||||
|
this.dataList = [];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this.graph = new Graph({
|
||||||
|
container: document.getElementById("containerChart"),
|
||||||
|
height: 600,
|
||||||
|
selecting: true,
|
||||||
|
background: {
|
||||||
|
color: "#fffbe6", // 设置画布背景颜色
|
||||||
|
},
|
||||||
|
snapline: {
|
||||||
|
enabled: true,
|
||||||
|
sharp: true,
|
||||||
|
},
|
||||||
|
// scroller: {
|
||||||
|
// enabled: true,
|
||||||
|
// pageVisible: false,
|
||||||
|
// pageBreak: false,
|
||||||
|
// pannable: true,
|
||||||
|
// },
|
||||||
|
mousewheel: {
|
||||||
|
enabled: true,
|
||||||
|
modifiers: ["ctrl", "meta"],
|
||||||
|
},
|
||||||
|
grid: this.grid,
|
||||||
|
connecting: {
|
||||||
|
// 节点连接
|
||||||
|
anchor: "center",
|
||||||
|
connectionPoint: "anchor",
|
||||||
|
allowBlank: false,
|
||||||
|
snap: true,
|
||||||
|
},
|
||||||
|
createEdge() {
|
||||||
|
return new Shape.Edge({
|
||||||
|
attrs: {
|
||||||
|
line: {
|
||||||
|
stroke: "#1890ff",
|
||||||
|
strokeWidth: 1,
|
||||||
|
targetMarker: {
|
||||||
|
name: "classic",
|
||||||
|
size: 8,
|
||||||
|
},
|
||||||
|
strokeDasharray: 0, //虚线
|
||||||
|
style: {
|
||||||
|
animation: "ant-line 30s infinite linear",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
text: "",
|
||||||
|
},
|
||||||
|
connector: _that.connectEdgeType.connector,
|
||||||
|
router: {
|
||||||
|
name: _that.connectEdgeType.router.name || "",
|
||||||
|
},
|
||||||
|
zIndex: 0,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
// 鼠标移入移出节点
|
||||||
|
this.graph.on(
|
||||||
|
"node:mouseenter",
|
||||||
|
FunctionExt.debounce(() => {
|
||||||
|
const container = document.getElementById("containerChart");
|
||||||
|
const ports = container.querySelectorAll(".x6-port-body");
|
||||||
|
this.showPorts(ports, true);
|
||||||
|
}),
|
||||||
|
500
|
||||||
|
);
|
||||||
|
this.graph.on("node:mouseleave", (e) => {
|
||||||
|
const container = document.getElementById("containerChart");
|
||||||
|
const ports = container.querySelectorAll(".x6-port-body");
|
||||||
|
this.showPorts(ports, false);
|
||||||
|
});
|
||||||
|
//获取放置到画布上节点的位置
|
||||||
|
this.graph.on("node:added", ({ node }) => {
|
||||||
|
const { x, y } = node.position();
|
||||||
|
this.addProcess(node.attrs.label.workingProcedureId, x, y);
|
||||||
|
});
|
||||||
|
//这是鼠标抬起节点事件
|
||||||
|
this.graph.on("node:mouseup", ({ node }) => {
|
||||||
|
const { x, y } = node.position();
|
||||||
|
this.updataNode(node.attrs.label.id, x, y);
|
||||||
|
});
|
||||||
|
//这是点击节点事件
|
||||||
|
this.graph.on("node:click", () => {
|
||||||
|
const cell = this.graph.getSelectedCells();
|
||||||
|
console.log(cell);
|
||||||
|
});
|
||||||
|
//这是右键节点事件
|
||||||
|
this.graph.on("node:contextmenu", (e) => {
|
||||||
|
console.log(e);
|
||||||
|
});
|
||||||
|
this.graph.on("selection:changed", (args) => {
|
||||||
|
args.added.forEach((cell) => {
|
||||||
|
this.selectCell = cell;
|
||||||
|
if (cell.isEdge()) {
|
||||||
|
cell.isEdge() && cell.attr("line/strokeDasharray", 5); //虚线蚂蚁线
|
||||||
|
cell.addTools([
|
||||||
|
{
|
||||||
|
name: "vertices",
|
||||||
|
args: {
|
||||||
|
padding: 4,
|
||||||
|
attrs: {
|
||||||
|
strokeWidth: 0.1,
|
||||||
|
stroke: "#2d8cf0",
|
||||||
|
fill: "#ffffff",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
args.removed.forEach((cell) => {
|
||||||
|
cell.isEdge() && cell.attr("line/strokeDasharray", 0); //正常线
|
||||||
|
cell.removeTools();
|
||||||
|
});
|
||||||
|
console.log(this.graph.toJSON());
|
||||||
|
});
|
||||||
|
},
|
||||||
|
showPorts(ports, show) {
|
||||||
|
for (let i = 0, len = ports.length; i < len; i = i + 1) {
|
||||||
|
ports[i].style.visibility = show ? "visible" : "hidden";
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 拖拽生成正方形或者圆形
|
||||||
|
startDrag(data, e) {
|
||||||
|
startDragToGraph(this.graph, data, e);
|
||||||
|
},
|
||||||
|
getArr() {
|
||||||
|
this.$http
|
||||||
|
.get("/basic/workingProcedure/page", {
|
||||||
|
params: {
|
||||||
|
page: 1,
|
||||||
|
limit: 500,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
.then(({ data: res }) => {
|
||||||
|
if (res.code !== 0) {
|
||||||
|
return this.$message.error(res.msg);
|
||||||
|
}
|
||||||
|
this.processArr = res.data.list;
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
|
},
|
||||||
|
getList() {
|
||||||
|
this.$http
|
||||||
|
.get(
|
||||||
|
`/basic/productWorkingprocedureRelation/getWorkingprocedureByProductId/${this.productId}`
|
||||||
|
)
|
||||||
|
.then(({ data: res }) => {
|
||||||
|
if (res.code !== 0) {
|
||||||
|
this.dataList = [];
|
||||||
|
return this.$message.error(res.msg);
|
||||||
|
}
|
||||||
|
this.dataList = res.data;
|
||||||
|
this.setNode();
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
|
},
|
||||||
|
setNode() {
|
||||||
|
let nodes = [];
|
||||||
|
this.dataList.forEach((item) => {
|
||||||
|
let obj = {};
|
||||||
|
obj.x = item.x;
|
||||||
|
obj.y = item.y;
|
||||||
|
obj.width = 100;
|
||||||
|
obj.height = 60;
|
||||||
|
obj.attrs = {
|
||||||
|
label: {
|
||||||
|
text: item.workingProcedureName,
|
||||||
|
id: item.id,
|
||||||
|
fill: "white",
|
||||||
|
fontSize: 14,
|
||||||
|
textWrap: {
|
||||||
|
width: -10,
|
||||||
|
height: -10,
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
body: {
|
||||||
|
stroke: "#000000",
|
||||||
|
strokeWidth: 1,
|
||||||
|
fill: "#5bdeff",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
obj.ports = ports;
|
||||||
|
nodes.push(obj);
|
||||||
|
});
|
||||||
|
const data = {
|
||||||
|
nodes,
|
||||||
|
};
|
||||||
|
this.graph.fromJSON(data);
|
||||||
|
},
|
||||||
|
updataNode(id, x, y) {
|
||||||
|
const data = {
|
||||||
|
id: id,
|
||||||
|
x: x,
|
||||||
|
y: y,
|
||||||
|
};
|
||||||
|
this.$http
|
||||||
|
.put("/basic/productWorkingprocedureRelation", data)
|
||||||
|
.then(({ data: res }) => {
|
||||||
|
if (res.code !== 0) {
|
||||||
|
return this.$message.error(res.msg);
|
||||||
|
}
|
||||||
|
this.$message({
|
||||||
|
message: this.$t("prompt.success"),
|
||||||
|
type: "success",
|
||||||
|
duration: 500,
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
|
},
|
||||||
|
addProcess(workingProcedureId, x, y) {
|
||||||
|
this.$http
|
||||||
|
.post("/basic/productWorkingprocedureRelation/save", {
|
||||||
|
workingProcedureId: workingProcedureId,
|
||||||
|
productId: this.productId,
|
||||||
|
x,
|
||||||
|
y,
|
||||||
|
})
|
||||||
|
.then(({ data: res }) => {
|
||||||
|
if (res.code !== 0) {
|
||||||
|
this.getList();
|
||||||
|
return this.$message.error(res.msg);
|
||||||
|
}
|
||||||
|
this.$message({
|
||||||
|
message: this.$t("prompt.success"),
|
||||||
|
type: "success",
|
||||||
|
duration: 500,
|
||||||
|
onClose: () => {
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
|
},
|
||||||
|
// 删除
|
||||||
|
deleteHandle(id, name) {
|
||||||
|
this.$confirm(`确定对[名称=${name}]进行删除操作?`, "提示", {
|
||||||
|
confirmButtonText: "确定",
|
||||||
|
cancelButtonText: "取消",
|
||||||
|
type: "warning",
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
this.$http
|
||||||
|
.delete("/basic/productWorkingprocedureRelation", { data: [id] })
|
||||||
|
.then(({ data }) => {
|
||||||
|
if (data && data.code === 0) {
|
||||||
|
this.$message({
|
||||||
|
message: "操作成功",
|
||||||
|
type: "success",
|
||||||
|
duration: 1500,
|
||||||
|
onClose: () => {
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.$message.error(data.msg);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
|
}, //清空画布
|
||||||
|
deleteAll() {
|
||||||
|
this.graph.clearCells();
|
||||||
|
},
|
||||||
|
//销毁画布
|
||||||
|
GraphDelete() {
|
||||||
|
this.graph.dispose();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
destroyed() {
|
||||||
|
console.log("销毁画布");
|
||||||
|
this.graph.dispose();
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
#containerChart {
|
||||||
|
}
|
||||||
|
.btn {
|
||||||
|
background-color: #5bdeff;
|
||||||
|
text-align: center;
|
||||||
|
padding: 20px;
|
||||||
|
color: white;
|
||||||
|
cursor: move;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -2,14 +2,13 @@
|
|||||||
* @Author: zwq
|
* @Author: zwq
|
||||||
* @Date: 2021-11-18 14:16:25
|
* @Date: 2021-11-18 14:16:25
|
||||||
* @LastEditors: zwq
|
* @LastEditors: zwq
|
||||||
* @LastEditTime: 2022-08-31 10:22:30
|
* @LastEditTime: 2022-09-07 15:45:24
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<el-dialog
|
<el-dialog
|
||||||
:title="!productId ? '新增' : '修改'"
|
:title="!productId ? '新增' : '修改'"
|
||||||
:close-on-click-modal="false"
|
:fullscreen="true"
|
||||||
width="90%"
|
|
||||||
:visible.sync="visible"
|
:visible.sync="visible"
|
||||||
:before-close="cancle"
|
:before-close="cancle"
|
||||||
>
|
>
|
||||||
@ -26,7 +25,7 @@
|
|||||||
<one-step
|
<one-step
|
||||||
v-if="oneStepVisible"
|
v-if="oneStepVisible"
|
||||||
ref="oneStepRef"
|
ref="oneStepRef"
|
||||||
:product-id = "productId"
|
:product-id="productId"
|
||||||
@nextStep="nextStep"
|
@nextStep="nextStep"
|
||||||
@setPrductId="setPrductId"
|
@setPrductId="setPrductId"
|
||||||
@setInspectionStage="setInspectionStage"
|
@setInspectionStage="setInspectionStage"
|
||||||
@ -34,51 +33,46 @@
|
|||||||
<two-step
|
<two-step
|
||||||
v-if="twoStepVisible"
|
v-if="twoStepVisible"
|
||||||
ref="twoStepRef"
|
ref="twoStepRef"
|
||||||
:product-id = "productId"
|
:product-id="productId"
|
||||||
@nextStep="nextStep"
|
@nextStep="nextStep"
|
||||||
></two-step>
|
></two-step>
|
||||||
<three-step
|
<three-step
|
||||||
v-if="threeStepVisible"
|
v-if="threeStepVisible"
|
||||||
ref="threeStepRef"
|
ref="threeStepRef"
|
||||||
:product-id = "productId"
|
:product-id="productId"
|
||||||
@nextStep="nextStep"
|
@nextStep="nextStep"
|
||||||
></three-step>
|
></three-step>
|
||||||
<four-step
|
<four-step
|
||||||
v-if="fourStepVisible"
|
v-if="fourStepVisible"
|
||||||
ref="fourStepRef"
|
ref="fourStepRef"
|
||||||
:product-id = "productId"
|
:product-id="productId"
|
||||||
:inspection-stage-arr = "inspectionStageArr"
|
:inspection-stage-arr="inspectionStageArr"
|
||||||
@nextStep="nextStep"
|
@nextStep="nextStep"
|
||||||
></four-step>
|
></four-step>
|
||||||
</div>
|
</div>
|
||||||
</el-card>
|
</el-card>
|
||||||
<span slot="footer" class="dialog-footer">
|
<span slot="footer" class="dialog-footer">
|
||||||
<el-button @click="cancle">取消</el-button>
|
<el-button @click="cancle">取消</el-button>
|
||||||
<el-button @click="preStep" v-show="active > 0" :disabled="submitBtn"
|
<el-button @click="preStep" v-show="active > 0" :disabled="submitBtn">上一步</el-button>
|
||||||
>上一步</el-button
|
<el-button type="primary" @click="dataFormSubmit()" :loading="submitBtn">{{
|
||||||
>
|
active >= 3 ? "确定" : "下一步"
|
||||||
<el-button
|
}}</el-button>
|
||||||
type="primary"
|
|
||||||
@click="dataFormSubmit()"
|
|
||||||
:loading="submitBtn"
|
|
||||||
>{{ active >= 3 ? "确定" : "下一步" }}</el-button
|
|
||||||
>
|
|
||||||
</span>
|
</span>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import oneStep from './productList-one'
|
import oneStep from "./productList-one";
|
||||||
import twoStep from './productList-two'
|
import twoStep from "./productList-two";
|
||||||
import threeStep from './productList-three'
|
import threeStep from "./productList-three";
|
||||||
import fourStep from './productList-four'
|
import fourStep from "./productList-four";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data() {
|
||||||
return {
|
return {
|
||||||
visible: false,
|
visible: false,
|
||||||
active: 0,
|
active: 0,
|
||||||
productId: '',
|
productId: "",
|
||||||
dataForm: {},
|
dataForm: {},
|
||||||
inspectionStageArr: [], //检验阶段
|
inspectionStageArr: [], //检验阶段
|
||||||
submitBtn: false,
|
submitBtn: false,
|
||||||
@ -86,87 +80,74 @@ export default {
|
|||||||
twoStepVisible: false,
|
twoStepVisible: false,
|
||||||
threeStepVisible: false,
|
threeStepVisible: false,
|
||||||
fourStepVisible: false,
|
fourStepVisible: false,
|
||||||
stepShowObj: ['oneStepVisible', 'twoStepVisible', 'threeStepVisible', 'fourStepVisible'],
|
stepShowObj: ["oneStepVisible", "twoStepVisible", "threeStepVisible", "fourStepVisible"],
|
||||||
stepArr: ['oneStepRef', 'twoStepRef', 'threeStepRef', 'fourStepRef']
|
stepArr: ["oneStepRef", "twoStepRef", "threeStepRef", "fourStepRef"],
|
||||||
}
|
};
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
oneStep,
|
oneStep,
|
||||||
twoStep,
|
twoStep,
|
||||||
threeStep,
|
threeStep,
|
||||||
fourStep
|
fourStep,
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
init (id) {
|
init(id) {
|
||||||
this.productId = id || ''
|
this.productId = id || "";
|
||||||
this.active = 0
|
this.active = 0;
|
||||||
this.oneStepVisible = true
|
this.oneStepVisible = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.$refs.oneStepRef.init(id)
|
this.$refs.oneStepRef.init(id);
|
||||||
})
|
});
|
||||||
this.submitBtn = false
|
this.submitBtn = false;
|
||||||
this.visible = true
|
this.visible = true;
|
||||||
},
|
},
|
||||||
// 表单提交
|
// 表单提交
|
||||||
dataFormSubmit () {
|
dataFormSubmit() {
|
||||||
if (this.active >= 3) {
|
if (this.active >= 3) {
|
||||||
this.active += 1
|
this.active += 1;
|
||||||
this.submitBtn = true
|
this.submitBtn = true;
|
||||||
this.$http({
|
this[this.stepShowObj[0]] = false;
|
||||||
url: this.$http.adornUrl(
|
this[this.stepShowObj[1]] = false;
|
||||||
`/alarmBase/${!this.productId ? 'add' : 'update'}`
|
this[this.stepShowObj[2]] = false;
|
||||||
),
|
this[this.stepShowObj[3]] = false;
|
||||||
method: 'post',
|
this.visible = false;
|
||||||
data: this.$http.adornData(this.dataForm)
|
this.$emit("refreshDataList");
|
||||||
}).then(({ data }) => {
|
|
||||||
if (data && data.code === 0) {
|
|
||||||
this.$message({
|
|
||||||
message: '操作成功',
|
|
||||||
type: 'success',
|
|
||||||
duration: 1500,
|
|
||||||
onClose: () => {
|
|
||||||
this.submitBtn = false
|
|
||||||
this.visible = false
|
|
||||||
this.$emit('refreshDataList')
|
|
||||||
}
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
this.$message.error(data.msg)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
} else {
|
} else {
|
||||||
this.$refs[this.stepArr[this.active]].dataFormSubmit()
|
this.$refs[this.stepArr[this.active]].dataFormSubmit();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
nextStep () {
|
nextStep() {
|
||||||
this[this.stepShowObj[this.active]] = false
|
this[this.stepShowObj[this.active]] = false;
|
||||||
this.active += 1
|
this.active += 1;
|
||||||
this[this.stepShowObj[this.active]] = true
|
this[this.stepShowObj[this.active]] = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.$refs[this.stepArr[this.active]].init()
|
this.$refs[this.stepArr[this.active]].init();
|
||||||
})
|
});
|
||||||
},
|
},
|
||||||
preStep () {
|
preStep() {
|
||||||
this[this.stepShowObj[this.active]] = false
|
this[this.stepShowObj[this.active]] = false;
|
||||||
this.active -= 1
|
this.active -= 1;
|
||||||
this[this.stepShowObj[this.active]] = true
|
this[this.stepShowObj[this.active]] = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.$refs[this.stepArr[this.active]].init()
|
this.$refs[this.stepArr[this.active]].init();
|
||||||
})
|
});
|
||||||
},
|
},
|
||||||
cancle(){
|
cancle() {
|
||||||
this[this.stepShowObj[this.active]] = false
|
this[this.stepShowObj[0]] = false;
|
||||||
this.visible = false
|
this[this.stepShowObj[1]] = false;
|
||||||
this.$emit('refreshDataList')
|
this[this.stepShowObj[2]] = false;
|
||||||
|
this[this.stepShowObj[3]] = false;
|
||||||
|
this.visible = false;
|
||||||
|
this.$emit("refreshDataList");
|
||||||
},
|
},
|
||||||
setPrductId(id){
|
setPrductId(id) {
|
||||||
this.productId = id
|
this.productId = id;
|
||||||
},
|
},
|
||||||
setInspectionStage(arr){
|
setInspectionStage(arr) {
|
||||||
this.inspectionStageArr = arr
|
this.inspectionStageArr = arr;
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|||||||
@ -2,15 +2,11 @@
|
|||||||
* @Author: zwq
|
* @Author: zwq
|
||||||
* @Date: 2021-11-18 14:16:25
|
* @Date: 2021-11-18 14:16:25
|
||||||
* @LastEditors: zwq
|
* @LastEditors: zwq
|
||||||
* @LastEditTime: 2022-08-31 11:25:21
|
* @LastEditTime: 2022-09-07 10:49:27
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<el-dialog
|
<el-dialog :title="!fourDataForm.id ? '新增' : '修改'" append-to-body :visible.sync="fourVisible">
|
||||||
:title="!fourDataForm.id ? '新增' : '修改'"
|
|
||||||
append-to-body
|
|
||||||
:visible.sync="fourVisible"
|
|
||||||
>
|
|
||||||
<el-row :gutter="10">
|
<el-row :gutter="10">
|
||||||
<el-form
|
<el-form
|
||||||
:model="fourDataForm"
|
:model="fourDataForm"
|
||||||
@ -88,13 +84,28 @@
|
|||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="8">
|
<el-col :span="8">
|
||||||
<el-form-item label="分析图形" prop="controlGraphName">
|
<el-form-item label="分析图形" prop="controlGraphId">
|
||||||
<el-input v-model="fourDataForm.controlGraphName" placeholder="分析图形"></el-input>
|
<el-select
|
||||||
|
v-model="fourDataForm.controlGraphId"
|
||||||
|
placeholder="请选择分析图形"
|
||||||
|
clearable
|
||||||
|
:style="{ width: '100%' }"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="(item, index) in GraphName"
|
||||||
|
:key="index"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item.id"
|
||||||
|
></el-option>
|
||||||
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="8">
|
<el-col :span="8">
|
||||||
<el-form-item label="样本大小" prop="sampleSize">
|
<el-form-item label="样本大小" prop="sampleSize">
|
||||||
<el-input-number v-model="fourDataForm.sampleSize" placeholder="样本大小"></el-input-number>
|
<el-input-number
|
||||||
|
v-model="fourDataForm.sampleSize"
|
||||||
|
placeholder="样本大小"
|
||||||
|
></el-input-number>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="8">
|
<el-col :span="8">
|
||||||
@ -121,7 +132,10 @@
|
|||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="8">
|
<el-col :span="8">
|
||||||
<el-form-item label="小数位数" prop="decimalPlaces">
|
<el-form-item label="小数位数" prop="decimalPlaces">
|
||||||
<el-input-number v-model="fourDataForm.decimalPlaces" placeholder="小数位数"></el-input-number>
|
<el-input-number
|
||||||
|
v-model="fourDataForm.decimalPlaces"
|
||||||
|
placeholder="小数位数"
|
||||||
|
></el-input-number>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="8">
|
<el-col :span="8">
|
||||||
@ -146,12 +160,18 @@
|
|||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="8">
|
<el-col :span="8">
|
||||||
<el-form-item label="目标CPK" prop="targetCpk">
|
<el-form-item label="目标CPK" prop="targetCpk">
|
||||||
<el-input-number v-model="fourDataForm.targetCpk" placeholder="目标CPK"></el-input-number>
|
<el-input-number
|
||||||
|
v-model="fourDataForm.targetCpk"
|
||||||
|
placeholder="目标CPK"
|
||||||
|
></el-input-number>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="8">
|
<el-col :span="8">
|
||||||
<el-form-item label="目标PPK" prop="targetPpk">
|
<el-form-item label="目标PPK" prop="targetPpk">
|
||||||
<el-input-number v-model="fourDataForm.targetPpk" placeholder="目标PPK"></el-input-number>
|
<el-input-number
|
||||||
|
v-model="fourDataForm.targetPpk"
|
||||||
|
placeholder="目标PPK"
|
||||||
|
></el-input-number>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="8">
|
<el-col :span="8">
|
||||||
@ -181,19 +201,19 @@ export default {
|
|||||||
type: "",
|
type: "",
|
||||||
defectLevel: "",
|
defectLevel: "",
|
||||||
measureToolId: "",
|
measureToolId: "",
|
||||||
isSpc: '',
|
isSpc: "",
|
||||||
controlGraphName: '',
|
controlGraphId: "",
|
||||||
sampleSize: '',
|
sampleSize: "",
|
||||||
samplingFrequency: '',
|
samplingFrequency: "",
|
||||||
unitId: "",
|
unitId: "",
|
||||||
decimalPlaces: '',
|
decimalPlaces: "",
|
||||||
specifications: '',
|
specifications: "",
|
||||||
lsl: '',
|
lsl: "",
|
||||||
sl: '',
|
sl: "",
|
||||||
usl: '',
|
usl: "",
|
||||||
targetCpk: '',
|
targetCpk: "",
|
||||||
targetPpk: '',
|
targetPpk: "",
|
||||||
remark: ''
|
remark: "",
|
||||||
},
|
},
|
||||||
typeArr: [
|
typeArr: [
|
||||||
{
|
{
|
||||||
@ -220,6 +240,7 @@ export default {
|
|||||||
},
|
},
|
||||||
],
|
],
|
||||||
measureToolArr: [],
|
measureToolArr: [],
|
||||||
|
GraphName: [],
|
||||||
unitArr: [],
|
unitArr: [],
|
||||||
dataRule: {
|
dataRule: {
|
||||||
code: [{ required: true, message: "编码不能为空", trigger: "blur" }],
|
code: [{ required: true, message: "编码不能为空", trigger: "blur" }],
|
||||||
@ -279,6 +300,12 @@ export default {
|
|||||||
this.measureToolArr = res.data.list;
|
this.measureToolArr = res.data.list;
|
||||||
})
|
})
|
||||||
.catch(() => {});
|
.catch(() => {});
|
||||||
|
this.$http
|
||||||
|
.post("/qualityPlanning/controlGraph/list")
|
||||||
|
.then(({ data: res }) => {
|
||||||
|
this.GraphName = res;
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
},
|
},
|
||||||
// 表单提交
|
// 表单提交
|
||||||
dataFormSubmit() {
|
dataFormSubmit() {
|
||||||
|
|||||||
@ -2,108 +2,144 @@
|
|||||||
* @Author: zwq
|
* @Author: zwq
|
||||||
* @Date: 2021-11-18 14:16:25
|
* @Date: 2021-11-18 14:16:25
|
||||||
* @LastEditors: zwq
|
* @LastEditors: zwq
|
||||||
* @LastEditTime: 2022-08-31 11:22:26
|
* @LastEditTime: 2022-09-07 16:04:53
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<el-tabs @tab-click="tabClick">
|
<div v-if="workingProcedure.length && productFeaturesOptions.length">
|
||||||
<el-tab-pane label="控制矩阵">
|
<el-tabs @tab-click="tabClick">
|
||||||
<el-checkbox-group v-model="productFeaturesArr" @change="$forceUpdate()" size="medium">
|
<el-tab-pane label="控制矩阵">
|
||||||
<el-checkbox
|
<el-button style="float:right" size="small" type="primary" @click="deleteFeatures()">
|
||||||
v-for="(item, index) in productFeaturesOptions"
|
<svg class="icon-svg"><use xlink:href="#icon-新建"></use></svg>
|
||||||
:key="index"
|
保存
|
||||||
:label="item.id"
|
</el-button>
|
||||||
>{{ item.name }}</el-checkbox
|
<el-table
|
||||||
|
:data="productFeaturesList"
|
||||||
|
v-loading="dataListLoading"
|
||||||
|
border
|
||||||
|
style="width: 50%;"
|
||||||
>
|
>
|
||||||
</el-checkbox-group>
|
<el-table-column prop="name"> </el-table-column>
|
||||||
</el-tab-pane>
|
<el-table-column
|
||||||
<el-tab-pane label="特性列表">
|
v-for="(item, index) in workingProcedure"
|
||||||
<el-table
|
:key="item.id"
|
||||||
:data="dataList"
|
:label="item.workingProcedureName"
|
||||||
:stripe="true"
|
>
|
||||||
:header-cell-style="{
|
<template slot-scope="scope">
|
||||||
background: '#eef1f6',
|
<el-checkbox
|
||||||
color: '#606266',
|
@change="
|
||||||
height: '56px',
|
(checked) => CheckboxChange(checked, scope.row.id, item.workingProcedureId)
|
||||||
}"
|
"
|
||||||
style="width: 100%;"
|
:checked="scope.row['checked' + index]"
|
||||||
>
|
>
|
||||||
<el-table-column
|
</el-checkbox>
|
||||||
type="index"
|
</template>
|
||||||
header-align="center"
|
</el-table-column>
|
||||||
align="center"
|
</el-table>
|
||||||
label="序号"
|
</el-tab-pane>
|
||||||
width="50"
|
<el-tab-pane label="特性列表">
|
||||||
|
<el-table
|
||||||
|
:data="dataList"
|
||||||
|
:stripe="true"
|
||||||
|
:header-cell-style="{
|
||||||
|
background: '#eef1f6',
|
||||||
|
color: '#606266',
|
||||||
|
height: '56px',
|
||||||
|
}"
|
||||||
|
style="width: 100%;"
|
||||||
>
|
>
|
||||||
</el-table-column>
|
<el-table-column
|
||||||
<el-table-column prop="code" label="编号"> </el-table-column>
|
type="index"
|
||||||
<el-table-column prop="name" label="名称"></el-table-column>
|
header-align="center"
|
||||||
<el-table-column prop="type" label="特性类型">
|
align="center"
|
||||||
<template slot-scope="scope">
|
label="序号"
|
||||||
<span>{{ scope.row.type === 2 ? "计数" : "计量" }}</span>
|
width="50"
|
||||||
</template>
|
>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column prop="defectLevel" label="缺陷等级">
|
<el-table-column prop="code" label="编号"> </el-table-column>
|
||||||
<template slot-scope="scope">
|
<el-table-column prop="name" label="名称"></el-table-column>
|
||||||
<span>{{
|
<el-table-column prop="type" label="特性类型">
|
||||||
scope.row.defectLevel === 1
|
<template slot-scope="scope">
|
||||||
? "致命缺陷"
|
<span>{{ scope.row.type === 2 ? "计数" : "计量" }}</span>
|
||||||
: scope.row.defectLevel === 2
|
</template>
|
||||||
? "严重缺陷"
|
</el-table-column>
|
||||||
: "轻微缺陷"
|
<el-table-column prop="defectLevel" label="缺陷等级">
|
||||||
}}</span>
|
<template slot-scope="scope">
|
||||||
</template>
|
<span>{{
|
||||||
</el-table-column>
|
scope.row.defectLevel === 1
|
||||||
<el-table-column prop="measureToolName" label="量具"></el-table-column>
|
? "致命缺陷"
|
||||||
<el-table-column prop="isSpc" label="SPC">
|
: scope.row.defectLevel === 2
|
||||||
<template slot-scope="scope">
|
? "严重缺陷"
|
||||||
<span>{{ scope.row.isSpc === 1 ? "是" : "否" }}</span>
|
: "轻微缺陷"
|
||||||
</template>
|
}}</span>
|
||||||
</el-table-column>
|
</template>
|
||||||
<el-table-column prop="controlGraphName" label="分析图形"></el-table-column>
|
</el-table-column>
|
||||||
<el-table-column prop="sampleSize" label="样本大小"></el-table-column>
|
<el-table-column prop="measureToolName" label="量具"></el-table-column>
|
||||||
<el-table-column prop="samplingFrequency" label="抽样频率"></el-table-column>
|
<el-table-column prop="isSpc" label="SPC">
|
||||||
<el-table-column prop="unitName" label="单位"></el-table-column>
|
<template slot-scope="scope">
|
||||||
<el-table-column prop="decimalPlaces" label="小数位数"></el-table-column>
|
<span>{{ scope.row.isSpc === 1 ? "是" : "否" }}</span>
|
||||||
<el-table-column prop="specifications" label="规格"></el-table-column>
|
</template>
|
||||||
<el-table-column prop="lsl" label="LSL"></el-table-column>
|
</el-table-column>
|
||||||
<el-table-column prop="sl" label="SL"></el-table-column>
|
<el-table-column prop="controlGraphName" label="分析图形"></el-table-column>
|
||||||
<el-table-column prop="usl" label="USL"></el-table-column>
|
<el-table-column prop="sampleSize" label="样本大小"></el-table-column>
|
||||||
<el-table-column prop="targetCpk" label="目标CPK"></el-table-column>
|
<el-table-column prop="samplingFrequency" label="抽样频率"></el-table-column>
|
||||||
<el-table-column prop="targetPpk" label="目标PPK"></el-table-column>
|
<el-table-column prop="unitName" label="单位"></el-table-column>
|
||||||
<el-table-column prop="remark" label="OPC取值标签"></el-table-column>
|
<el-table-column prop="decimalPlaces" label="小数位数"></el-table-column>
|
||||||
<el-table-column prop="remark" label="备注"></el-table-column>
|
<el-table-column prop="specifications" label="规格"></el-table-column>
|
||||||
<el-table-column
|
<el-table-column prop="lsl" label="LSL"></el-table-column>
|
||||||
fixed="right"
|
<el-table-column prop="sl" label="SL"></el-table-column>
|
||||||
header-align="center"
|
<el-table-column prop="usl" label="USL"></el-table-column>
|
||||||
align="center"
|
<el-table-column prop="targetCpk" label="目标CPK"></el-table-column>
|
||||||
width="150"
|
<el-table-column prop="targetPpk" label="目标PPK"></el-table-column>
|
||||||
label="操作"
|
<el-table-column prop="remark" label="备注"></el-table-column>
|
||||||
>
|
<el-table-column
|
||||||
<template slot-scope="scope">
|
fixed="right"
|
||||||
<el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">
|
header-align="center"
|
||||||
<el-tooltip class="item" effect="dark" content="修改" placement="top">
|
align="center"
|
||||||
<svg class="icon-svg aui-sidebar__menu-icon">
|
width="150"
|
||||||
<use xlink:href="#icon-编辑"></use>
|
label="操作"
|
||||||
</svg>
|
>
|
||||||
</el-tooltip>
|
<template slot-scope="scope">
|
||||||
</el-button>
|
<el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">
|
||||||
</template>
|
<el-tooltip class="item" effect="dark" content="修改" placement="top">
|
||||||
</el-table-column>
|
<svg class="icon-svg aui-sidebar__menu-icon">
|
||||||
</el-table>
|
<use xlink:href="#icon-编辑"></use>
|
||||||
</el-tab-pane>
|
</svg>
|
||||||
</el-tabs>
|
</el-tooltip>
|
||||||
|
</el-button>
|
||||||
|
<el-button type="text" size="small" @click="productFeaturesHis(scope.row.id)">
|
||||||
|
<el-tooltip class="item" effect="dark" content="历史记录" placement="top">
|
||||||
|
<svg class="icon-svg aui-sidebar__menu-icon">
|
||||||
|
<use xlink:href="#历史记录"></use>
|
||||||
|
</svg>
|
||||||
|
</el-tooltip>
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
</div>
|
||||||
|
<el-empty
|
||||||
|
v-else
|
||||||
|
description="该产品没有配置产品特性或工序，暂时不能分配过程控制特性"
|
||||||
|
></el-empty>
|
||||||
<four-add-or-update
|
<four-add-or-update
|
||||||
v-if="fourAddOrUpdateVisible"
|
v-if="fourAddOrUpdateVisible"
|
||||||
ref="fourAddOrUpdate"
|
ref="fourAddOrUpdate"
|
||||||
@refreshFourDataList="getFourDataList"
|
@refreshFourDataList="getFourDataList"
|
||||||
></four-add-or-update>
|
></four-add-or-update>
|
||||||
|
<four-history
|
||||||
|
v-if="productFeaturesHisVisible"
|
||||||
|
ref="productFeaturesHisRef"
|
||||||
|
></four-history>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import fourAddOrUpdate from "./productList-four-add";
|
import fourAddOrUpdate from "./productList-four-add";
|
||||||
|
import fourHistory from "./productList-four-history";
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
productFeaturesOptions: {
|
productFeaturesOptions: {
|
||||||
@ -112,58 +148,153 @@ export default {
|
|||||||
return [];
|
return [];
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
workingProcedure: {
|
||||||
|
type: Array,
|
||||||
|
default: () => {
|
||||||
|
return [];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
productId: {
|
||||||
|
type: String,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
fourAddOrUpdateVisible: false,
|
fourAddOrUpdateVisible: false,
|
||||||
|
productFeaturesList: [],
|
||||||
dataList: [],
|
dataList: [],
|
||||||
Id: '',
|
setBatchInsert: [],
|
||||||
productFeaturesArr: [],
|
inspectionStage: 0,
|
||||||
|
dataListLoading: false,
|
||||||
|
productFeaturesHisVisible:false,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
fourAddOrUpdate,
|
fourAddOrUpdate,
|
||||||
|
fourHistory,
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
init(label, productId) {
|
init(index) {
|
||||||
console.log(label);
|
this.dataListLoading = false;
|
||||||
this.Id = productId;
|
this.inspectionStage = parseInt(index) + 1;
|
||||||
|
this.productFeaturesList.splice(0, this.productFeaturesList.length);
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
if (this.Id) {
|
this.getSelection();
|
||||||
|
if (this.productId) {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
getSelection() {
|
||||||
|
this.setBatchInsert.splice(0, this.setBatchInsert.length);
|
||||||
|
this.dataListLoading = true;
|
||||||
|
this.$http
|
||||||
|
.post(
|
||||||
|
`/basic/productFeatures/getFeaturesByStageProcedure?inspectionStage=${this.inspectionStage}&productId=${this.productId}`
|
||||||
|
)
|
||||||
|
.then(({ data: res }) => {
|
||||||
|
if (res.code !== 0) {
|
||||||
|
return this.$message.error(res.msg);
|
||||||
|
}
|
||||||
|
this.productFeaturesList = this.productFeaturesOptions.map((item) => {
|
||||||
|
const obj = Object.assign({}, item);
|
||||||
|
this.workingProcedure.forEach((item1, index) => {
|
||||||
|
res.data.forEach((item2) => {
|
||||||
|
if (item2.productFeaturesId === item.id) {
|
||||||
|
if (item2.workingProcedureId === item1.workingProcedureId) {
|
||||||
|
Object.assign(obj, { ["checked" + index]: true });
|
||||||
|
this.CheckboxChange(true, item2.productFeaturesId, item2.workingProcedureId);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
return obj;
|
||||||
|
});
|
||||||
|
this.dataListLoading = false;
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
console.log(e);
|
||||||
|
this.dataListLoading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
tabClick(val) {
|
tabClick(val) {
|
||||||
if (val.label === "特性列表") {
|
if (val.label === "特性列表") {
|
||||||
this.dataList = this.productFeaturesOptions.filter((item) => {
|
this.getFourDataList();
|
||||||
if (this.productFeaturesArr.indexOf(item.id) > -1) {
|
|
||||||
return item;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// 新增 / 修改
|
// 新增 / 修改
|
||||||
addOrUpdateHandle(id) {
|
addOrUpdateHandle(id) {
|
||||||
this.fourAddOrUpdateVisible = true;
|
this.fourAddOrUpdateVisible = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.$refs.fourAddOrUpdate.init(id, this.Id);
|
this.$refs.fourAddOrUpdate.init(id, this.productId);
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
deleteFeatures() {
|
||||||
|
this.workingProcedure.forEach((item, index) => {
|
||||||
|
this.$http
|
||||||
|
.delete(`/basic/featuresStageProcedureRelation/deleteByStageProcedure?inspectionStage=${this.inspectionStage}&productId=${this.productId}&workingProcedureId=${item.workingProcedureId}`)
|
||||||
|
.then(({ data: res }) => {
|
||||||
|
if (res.code !== 0) {
|
||||||
|
return this.$message.error(res.msg);
|
||||||
|
}
|
||||||
|
if (index === this.workingProcedure.length - 1) {
|
||||||
|
this.addFeatures();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
addFeatures() {
|
||||||
|
this.$http
|
||||||
|
.post("/basic/featuresStageProcedureRelation/batchInsert", [...this.setBatchInsert])
|
||||||
|
.then(({ data: res }) => {
|
||||||
|
if (res.code !== 0) {
|
||||||
|
return this.$message.error(res.msg);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
|
},
|
||||||
|
CheckboxChange(checked, productFeaturesId, workingProcedureId) {
|
||||||
|
this.setBatchInsert = [...this.setBatchInsert];
|
||||||
|
if (checked) {
|
||||||
|
const obj = {
|
||||||
|
inspectionStage: parseInt(this.inspectionStage),
|
||||||
|
productFeaturesId: productFeaturesId,
|
||||||
|
workingProcedureId: workingProcedureId,
|
||||||
|
};
|
||||||
|
this.setBatchInsert.push(obj);
|
||||||
|
} else {
|
||||||
|
const id1 = this.setBatchInsert.findIndex((item) => {
|
||||||
|
if (
|
||||||
|
item.productFeaturesId === productFeaturesId &&
|
||||||
|
item.workingProcedureId === workingProcedureId
|
||||||
|
) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this.setBatchInsert.splice(id1, 1);
|
||||||
|
}
|
||||||
|
},
|
||||||
getFourDataList() {
|
getFourDataList() {
|
||||||
this.$http
|
this.$http
|
||||||
.post("/basic/productFeatures/getProductFeaturesByProductId", {
|
.post(
|
||||||
id: this.Id,
|
`/basic/productFeatures/getFeaturesList?inspectionStage=${this.inspectionStage}&productId=${this.productId}`
|
||||||
})
|
)
|
||||||
.then(({ data: res }) => {
|
.then(({ data: res }) => {
|
||||||
if (res.code !== 0) {
|
if (res.code !== 0) {
|
||||||
this.productFeaturesOptions = [];
|
this.dataList = [];
|
||||||
return this.$message.error(res.msg);
|
return this.$message.error(res.msg);
|
||||||
}
|
}
|
||||||
this.productFeaturesOptions = res.data;
|
this.dataList = res.data;
|
||||||
this.tabClick()
|
this.tabClick();
|
||||||
})
|
})
|
||||||
.catch(() => {});
|
.catch(() => {});
|
||||||
},
|
},
|
||||||
|
productFeaturesHis(id){
|
||||||
|
this.productFeaturesHisVisible = true;
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs.productFeaturesHisRef.init(id);
|
||||||
|
});
|
||||||
|
},
|
||||||
// 表单提交
|
// 表单提交
|
||||||
dataFormSubmit() {},
|
dataFormSubmit() {},
|
||||||
},
|
},
|
||||||
|
|||||||
98
src/views/spc-basic/components/productList-four-history.vue
Normal file
98
src/views/spc-basic/components/productList-four-history.vue
Normal file
@ -0,0 +1,98 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: zwq
|
||||||
|
* @Date: 2021-11-18 14:16:25
|
||||||
|
* @LastEditors: zwq
|
||||||
|
* @LastEditTime: 2022-09-07 16:06:00
|
||||||
|
* @Description:
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<el-dialog title="历史记录" append-to-body :visible.sync="hisVisible">
|
||||||
|
<el-table
|
||||||
|
:data="dataList"
|
||||||
|
:stripe="true"
|
||||||
|
:header-cell-style="{
|
||||||
|
background: '#eef1f6',
|
||||||
|
color: '#606266',
|
||||||
|
height: '56px',
|
||||||
|
}"
|
||||||
|
style="width: 100%;"
|
||||||
|
>
|
||||||
|
<el-table-column type="index" header-align="center" align="center" label="序号" width="50">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="code" label="编号"> </el-table-column>
|
||||||
|
<el-table-column prop="name" label="名称"></el-table-column>
|
||||||
|
<el-table-column prop="type" label="特性类型">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span>{{ scope.row.type === 2 ? "计数" : "计量" }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="defectLevel" label="缺陷等级">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span>{{
|
||||||
|
scope.row.defectLevel === 1
|
||||||
|
? "致命缺陷"
|
||||||
|
: scope.row.defectLevel === 2
|
||||||
|
? "严重缺陷"
|
||||||
|
: "轻微缺陷"
|
||||||
|
}}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="measureToolName" label="量具"></el-table-column>
|
||||||
|
<el-table-column prop="isSpc" label="SPC">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span>{{ scope.row.isSpc === 1 ? "是" : "否" }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="controlGraphName" label="分析图形"></el-table-column>
|
||||||
|
<el-table-column prop="sampleSize" label="样本大小"></el-table-column>
|
||||||
|
<el-table-column prop="samplingFrequency" label="抽样频率"></el-table-column>
|
||||||
|
<el-table-column prop="unitName" label="单位"></el-table-column>
|
||||||
|
<el-table-column prop="decimalPlaces" label="小数位数"></el-table-column>
|
||||||
|
<el-table-column prop="specifications" label="规格"></el-table-column>
|
||||||
|
<el-table-column prop="lsl" label="LSL"></el-table-column>
|
||||||
|
<el-table-column prop="sl" label="SL"></el-table-column>
|
||||||
|
<el-table-column prop="usl" label="USL"></el-table-column>
|
||||||
|
<el-table-column prop="targetCpk" label="目标CPK"></el-table-column>
|
||||||
|
<el-table-column prop="targetPpk" label="目标PPK"></el-table-column>
|
||||||
|
<el-table-column prop="remark" label="备注"></el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<span slot="footer" class="dialog-footer">
|
||||||
|
<el-button @click="hisVisible = false">关闭</el-button>
|
||||||
|
</span>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
hisVisible: false,
|
||||||
|
dataList: [],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {},
|
||||||
|
methods: {
|
||||||
|
init(id) {
|
||||||
|
this.hisVisible = true;
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$http
|
||||||
|
.get("/basic/productFeaturesHis/page", {
|
||||||
|
params: {
|
||||||
|
id: id,
|
||||||
|
page: 1,
|
||||||
|
limit: 100,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
.then(({ data: res }) => {
|
||||||
|
if (res.code !== 0) {
|
||||||
|
this.dataList = [];
|
||||||
|
return this.$message.error(res.msg);
|
||||||
|
}
|
||||||
|
this.dataList = res.data.list;
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@ -2,7 +2,7 @@
|
|||||||
* @Author: zwq
|
* @Author: zwq
|
||||||
* @Date: 2021-11-18 14:16:25
|
* @Date: 2021-11-18 14:16:25
|
||||||
* @LastEditors: zwq
|
* @LastEditors: zwq
|
||||||
* @LastEditTime: 2022-09-01 10:22:48
|
* @LastEditTime: 2022-09-05 15:25:52
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
@ -13,13 +13,15 @@
|
|||||||
:key="index"
|
:key="index"
|
||||||
:label="inspectionStageOptions[item]"
|
:label="inspectionStageOptions[item]"
|
||||||
>
|
>
|
||||||
<four-content
|
<four-content
|
||||||
style="margin-left:10px"
|
style="margin-left:10px"
|
||||||
v-if="inspectionStageArr.length"
|
v-if="inspectionStageArr.length"
|
||||||
ref="fourContentRef"
|
ref="fourContentRef"
|
||||||
:product-features-options="dataList"
|
:product-id="productId"
|
||||||
></four-content>
|
:product-features-options="dataList"
|
||||||
</el-tab-pane>
|
:working-procedure="workingProcedure"
|
||||||
|
></four-content>
|
||||||
|
</el-tab-pane>
|
||||||
</el-tabs>
|
</el-tabs>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -41,6 +43,7 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
dataList: [],
|
dataList: [],
|
||||||
|
workingProcedure: [],
|
||||||
inspectionStageOptions: {
|
inspectionStageOptions: {
|
||||||
"1": "进货检验",
|
"1": "进货检验",
|
||||||
"2": "过程检验",
|
"2": "过程检验",
|
||||||
@ -54,7 +57,7 @@ export default {
|
|||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
init() {
|
init() {
|
||||||
this.inspectionStageArr.sort()
|
this.inspectionStageArr.sort();
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
if (this.productId) {
|
if (this.productId) {
|
||||||
this.getFourDataList();
|
this.getFourDataList();
|
||||||
@ -74,9 +77,22 @@ export default {
|
|||||||
this.dataList = res.data;
|
this.dataList = res.data;
|
||||||
})
|
})
|
||||||
.catch(() => {});
|
.catch(() => {});
|
||||||
|
this.$http
|
||||||
|
.get(
|
||||||
|
`/basic/productWorkingprocedureRelation/getWorkingprocedureByProductId/${this.productId}`
|
||||||
|
)
|
||||||
|
.then(({ data: res }) => {
|
||||||
|
if (res.code !== 0) {
|
||||||
|
this.workingProcedure = [];
|
||||||
|
return this.$message.error(res.msg);
|
||||||
|
}
|
||||||
|
this.workingProcedure = res.data;
|
||||||
|
this.$refs.fourContentRef[0].init(0);
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
},
|
},
|
||||||
tabClick(val){
|
tabClick(val) {
|
||||||
this.$refs.fourContentRef[val.index].init(val.label, this.productId);
|
this.$refs.fourContentRef[val.index].init(val.index);
|
||||||
},
|
},
|
||||||
// 表单提交
|
// 表单提交
|
||||||
dataFormSubmit() {
|
dataFormSubmit() {
|
||||||
|
|||||||
227
src/views/spc-basic/components/productList-two-table.vue
Normal file
227
src/views/spc-basic/components/productList-two-table.vue
Normal file
@ -0,0 +1,227 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: zwq
|
||||||
|
* @Date: 2021-11-18 14:16:25
|
||||||
|
* @LastEditors: zwq
|
||||||
|
* @LastEditTime: 2022-09-07 15:25:36
|
||||||
|
* @Description:
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div style="margin-bottom:20px">
|
||||||
|
<el-tooltip content="选择工序,新增到表格" placement="top">
|
||||||
|
<el-select
|
||||||
|
size="small"
|
||||||
|
v-model="processId"
|
||||||
|
@change="addProcess"
|
||||||
|
clearable
|
||||||
|
filterable
|
||||||
|
placeholder="请选择"
|
||||||
|
>
|
||||||
|
<el-option v-for="item in processArr" :key="item.id" :label="item.name" :value="item.id">
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-tooltip>
|
||||||
|
</div>
|
||||||
|
<el-table
|
||||||
|
:data="dataList"
|
||||||
|
:stripe="true"
|
||||||
|
:header-cell-style="{
|
||||||
|
background: '#eef1f6',
|
||||||
|
color: '#606266',
|
||||||
|
height: '56px',
|
||||||
|
}"
|
||||||
|
v-loading="dataListLoading"
|
||||||
|
style="width: 100%;"
|
||||||
|
>
|
||||||
|
<el-table-column type="index" header-align="center" align="center" label="序号" width="50">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="workingProcedureName" label="工序名称"> </el-table-column>
|
||||||
|
<el-table-column prop="workingProcedureCode" label="工序编码"> </el-table-column>
|
||||||
|
<el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-button
|
||||||
|
type="text"
|
||||||
|
style="color:red"
|
||||||
|
size="small"
|
||||||
|
@click="deleteHandle(scope.row.id, scope.row.workingProcedureName)"
|
||||||
|
>
|
||||||
|
<el-tooltip class="item" effect="dark" content="删除" placement="top">
|
||||||
|
<svg class="icon-svg aui-sidebar__menu-icon"><use xlink:href="#icon-删除"></use></svg>
|
||||||
|
</el-tooltip>
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
type="text"
|
||||||
|
style="color:#57e1ff"
|
||||||
|
:disabled="scope.$index === 0"
|
||||||
|
size="small"
|
||||||
|
@click="setSequence(scope.$index + 1, true)"
|
||||||
|
>
|
||||||
|
<el-tooltip class="item" effect="dark" content="上移" placement="top">
|
||||||
|
<svg class="icon-svg aui-sidebar__menu-icon"><use xlink:href="#上箭头"></use></svg>
|
||||||
|
</el-tooltip>
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
type="text"
|
||||||
|
style="color:#57e1ff"
|
||||||
|
size="small"
|
||||||
|
:disabled="scope.$index === dataList.length - 1"
|
||||||
|
@click="setSequence(scope.$index + 1, false)"
|
||||||
|
>
|
||||||
|
<el-tooltip class="item" effect="dark" content="下移" placement="top">
|
||||||
|
<svg class="icon-svg aui-sidebar__menu-icon"><use xlink:href="#下箭头"></use></svg>
|
||||||
|
</el-tooltip>
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
productId: {
|
||||||
|
type: String,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
dataListLoading: false,
|
||||||
|
dataList: [],
|
||||||
|
processArr: [],
|
||||||
|
processId: "",
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getArr() {
|
||||||
|
this.$http
|
||||||
|
.get("/basic/workingProcedure/page", {
|
||||||
|
params: {
|
||||||
|
page: 1,
|
||||||
|
limit: 500,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
.then(({ data: res }) => {
|
||||||
|
if (res.code !== 0) {
|
||||||
|
return this.$message.error(res.msg);
|
||||||
|
}
|
||||||
|
this.processArr = res.data.list;
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
|
},
|
||||||
|
getList() {
|
||||||
|
this.dataListLoading = true;
|
||||||
|
this.$http
|
||||||
|
.get(
|
||||||
|
`/basic/productWorkingprocedureRelation/getWorkingprocedureByProductId/${this.productId}`
|
||||||
|
)
|
||||||
|
.then(({ data: res }) => {
|
||||||
|
this.dataListLoading = false;
|
||||||
|
if (res.code !== 0) {
|
||||||
|
this.dataList = [];
|
||||||
|
return this.$message.error(res.msg);
|
||||||
|
}
|
||||||
|
this.dataList = res.data;
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
this.dataListLoading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
init() {
|
||||||
|
this.getArr();
|
||||||
|
this.dataListLoading = false;
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.processId = "";
|
||||||
|
if (this.productId) {
|
||||||
|
this.getList();
|
||||||
|
} else {
|
||||||
|
this.dataList = [];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
addProcess() {
|
||||||
|
if (this.processId) {
|
||||||
|
this.$confirm(`确定新增此工序?`, "提示", {
|
||||||
|
confirmButtonText: "确定",
|
||||||
|
cancelButtonText: "取消",
|
||||||
|
type: "warning",
|
||||||
|
}).then(() => {
|
||||||
|
this.$http
|
||||||
|
.post("/basic/productWorkingprocedureRelation/save", {
|
||||||
|
workingProcedureId: this.processId,
|
||||||
|
productId: this.productId,
|
||||||
|
})
|
||||||
|
.then(({ data: res }) => {
|
||||||
|
if (res.code !== 0) {
|
||||||
|
return this.$message.error(res.msg);
|
||||||
|
}
|
||||||
|
this.$message({
|
||||||
|
message: this.$t("prompt.success"),
|
||||||
|
type: "success",
|
||||||
|
duration: 500,
|
||||||
|
onClose: () => {
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
setSequence(index, isUp) {
|
||||||
|
var url = "";
|
||||||
|
if (isUp) {
|
||||||
|
url = "/basic/productWorkingprocedureRelation/sequenceUp";
|
||||||
|
} else {
|
||||||
|
url = "/basic/productWorkingprocedureRelation/sequenceDown";
|
||||||
|
}
|
||||||
|
this.$http
|
||||||
|
.put(url, {
|
||||||
|
index: index,
|
||||||
|
productId: this.productId,
|
||||||
|
})
|
||||||
|
.then(({ data: res }) => {
|
||||||
|
if (res.code !== 0) {
|
||||||
|
return this.$message.error(res.msg);
|
||||||
|
}
|
||||||
|
this.$message({
|
||||||
|
message: this.$t("prompt.success"),
|
||||||
|
type: "success",
|
||||||
|
duration: 500,
|
||||||
|
onClose: () => {
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
|
},
|
||||||
|
// 删除
|
||||||
|
deleteHandle(id, name) {
|
||||||
|
this.$confirm(`确定对[名称=${name}]进行删除操作?`, "提示", {
|
||||||
|
confirmButtonText: "确定",
|
||||||
|
cancelButtonText: "取消",
|
||||||
|
type: "warning",
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
this.$http
|
||||||
|
.delete("/basic/productWorkingprocedureRelation", { data: [id] })
|
||||||
|
.then(({ data }) => {
|
||||||
|
if (data && data.code === 0) {
|
||||||
|
this.$message({
|
||||||
|
message: "操作成功",
|
||||||
|
type: "success",
|
||||||
|
duration: 1500,
|
||||||
|
onClose: () => {
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.$message.error(data.msg);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@ -1,61 +1,33 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zwq
|
* @Author: zwq
|
||||||
* @Date: 2021-11-18 14:16:25
|
* @Date: 2022-08-22 15:53:16
|
||||||
* @LastEditors: zwq
|
* @LastEditors: zwq
|
||||||
* @LastEditTime: 2022-08-31 09:38:20
|
* @LastEditTime: 2022-09-08 14:28:56
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<el-tabs @tab-click="tabClick">
|
||||||
<div style="margin-bottom:20px">
|
<el-tab-pane label="表格模式">
|
||||||
<el-tooltip content="选择工序,新增到表格" placement="top">
|
<two-step-table
|
||||||
<el-select
|
v-show="twoStepVisible"
|
||||||
size="small"
|
ref="twoStepRef"
|
||||||
v-model="processId"
|
:product-id="productId"
|
||||||
@change="addProcess"
|
></two-step-table>
|
||||||
clearable
|
</el-tab-pane>
|
||||||
filterable
|
<el-tab-pane label="图形模式">
|
||||||
placeholder="请选择"
|
<process-flow-graph
|
||||||
>
|
v-show="graphVisible"
|
||||||
<el-option v-for="item in processArr" :key="item.id" :label="item.name" :value="item.id">
|
ref="graphRef"
|
||||||
</el-option>
|
:product-id="productId"
|
||||||
</el-select>
|
></process-flow-graph>
|
||||||
</el-tooltip>
|
</el-tab-pane>
|
||||||
</div>
|
</el-tabs>
|
||||||
<el-table
|
|
||||||
:data="dataList"
|
|
||||||
:stripe="true"
|
|
||||||
:header-cell-style="{
|
|
||||||
background: '#eef1f6',
|
|
||||||
color: '#606266',
|
|
||||||
height: '56px',
|
|
||||||
}"
|
|
||||||
v-loading="dataListLoading"
|
|
||||||
style="width: 100%;"
|
|
||||||
>
|
|
||||||
<el-table-column type="index" header-align="center" align="center" label="序号" width="50">
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column prop="workingProcedureName" label="工序名称"> </el-table-column>
|
|
||||||
<el-table-column prop="workingProcedureCode" label="工序编码"> </el-table-column>
|
|
||||||
<el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
<el-button
|
|
||||||
type="text"
|
|
||||||
style="color:red"
|
|
||||||
size="small"
|
|
||||||
@click="deleteHandle(scope.row.id, scope.row.workingProcedureName)"
|
|
||||||
>
|
|
||||||
<el-tooltip class="item" effect="dark" content="删除" placement="top">
|
|
||||||
<svg class="icon-svg aui-sidebar__menu-icon"><use xlink:href="#icon-删除"></use></svg>
|
|
||||||
</el-tooltip>
|
|
||||||
</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import processFlowGraph from "./processFlow-graph";
|
||||||
|
import twoStepTable from "./productList-two-table";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
productId: {
|
productId: {
|
||||||
@ -64,109 +36,45 @@ export default {
|
|||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
dataListLoading: false,
|
flowDataList: [],
|
||||||
dataList: [],
|
graphVisible: true,
|
||||||
processArr: [],
|
twoStepVisible: false,
|
||||||
processId: "",
|
dataForm: {
|
||||||
|
paramKey: "",
|
||||||
|
},
|
||||||
|
paneName: "图形模式",
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
components: {
|
||||||
|
processFlowGraph,
|
||||||
|
twoStepTable,
|
||||||
|
},
|
||||||
|
created() {},
|
||||||
methods: {
|
methods: {
|
||||||
getArr() {
|
|
||||||
this.$http
|
|
||||||
.get("/basic/workingProcedure/page", {
|
|
||||||
params: {
|
|
||||||
page: 1,
|
|
||||||
limit: 500,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
.then(({ data: res }) => {
|
|
||||||
if (res.code !== 0) {
|
|
||||||
return this.$message.error(res.msg);
|
|
||||||
}
|
|
||||||
this.processArr = res.data.list;
|
|
||||||
})
|
|
||||||
.catch(() => {});
|
|
||||||
},
|
|
||||||
getList() {
|
|
||||||
this.dataListLoading = true;
|
|
||||||
this.$http
|
|
||||||
.get(`/basic/productWorkingprocedureRelation/getWorkingprocedureByProductId/${this.productId}`)
|
|
||||||
.then(({ data: res }) => {
|
|
||||||
this.dataListLoading = false;
|
|
||||||
if (res.code !== 0) {
|
|
||||||
this.dataList = [];
|
|
||||||
return this.$message.error(res.msg);
|
|
||||||
}
|
|
||||||
this.dataList = res.data;
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
this.dataListLoading = false;
|
|
||||||
});
|
|
||||||
},
|
|
||||||
init() {
|
init() {
|
||||||
this.getArr();
|
this.graphVisible = false;
|
||||||
this.dataListLoading = false;
|
this.twoStepVisible = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.processId = "";
|
this.$refs.twoStepRef.init();
|
||||||
if (this.productId) {
|
|
||||||
this.getList();
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
addProcess() {
|
tabClick(val) {
|
||||||
if(this.processId){
|
this.paneName = val.label;
|
||||||
this.$confirm(`确定新增此工序?`, "提示", {
|
if (val.label === "图形模式") {
|
||||||
confirmButtonText: "确定",
|
this.twoStepVisible = false;
|
||||||
cancelButtonText: "取消",
|
this.graphVisible = true;
|
||||||
type: "warning",
|
this.$nextTick(() => {
|
||||||
}).then(() => {
|
this.$refs.graphRef.init();
|
||||||
this.$http
|
});
|
||||||
.post("/basic/productWorkingprocedureRelation/save", {
|
} else {
|
||||||
workingProcedureId: this.processId,
|
this.graphVisible = false;
|
||||||
productId: this.productId,
|
this.twoStepVisible = true;
|
||||||
})
|
this.$refs.graphRef.GraphDelete();
|
||||||
.then(({ data: res }) => {
|
this.$nextTick(() => {
|
||||||
if (res.code !== 0) {
|
this.$refs.twoStepRef.init();
|
||||||
return this.$message.error(res.msg);
|
});
|
||||||
}
|
|
||||||
this.$message({
|
|
||||||
message: this.$t("prompt.success"),
|
|
||||||
type: "success",
|
|
||||||
duration: 500,
|
|
||||||
onClose: () => {
|
|
||||||
this.getList();
|
|
||||||
},
|
|
||||||
});
|
|
||||||
})
|
|
||||||
.catch(() => {});
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// 删除
|
|
||||||
deleteHandle(id, name) {
|
|
||||||
this.$confirm(`确定对[名称=${name}]进行删除操作?`, "提示", {
|
|
||||||
confirmButtonText: "确定",
|
|
||||||
cancelButtonText: "取消",
|
|
||||||
type: "warning",
|
|
||||||
})
|
|
||||||
.then(() => {
|
|
||||||
this.$http.delete("/basic/productWorkingprocedureRelation", { data: [id] }).then(({ data }) => {
|
|
||||||
if (data && data.code === 0) {
|
|
||||||
this.$message({
|
|
||||||
message: "操作成功",
|
|
||||||
type: "success",
|
|
||||||
duration: 1500,
|
|
||||||
onClose: () => {
|
|
||||||
this.getList();
|
|
||||||
},
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
this.$message.error(data.msg);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
})
|
|
||||||
.catch(() => {});
|
|
||||||
},
|
|
||||||
// 表单提交
|
// 表单提交
|
||||||
dataFormSubmit() {
|
dataFormSubmit() {
|
||||||
this.$emit("nextStep");
|
this.$emit("nextStep");
|
||||||
|
|||||||
@ -2,7 +2,7 @@
|
|||||||
* @Author: zwq
|
* @Author: zwq
|
||||||
* @Date: 2022-08-22 15:53:16
|
* @Date: 2022-08-22 15:53:16
|
||||||
* @LastEditors: zwq
|
* @LastEditors: zwq
|
||||||
* @LastEditTime: 2022-09-01 15:45:42
|
* @LastEditTime: 2022-09-01 16:42:08
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
@ -52,35 +52,51 @@
|
|||||||
<el-table-column prop="code" label="编码" fixed="left"> </el-table-column>
|
<el-table-column prop="code" label="编码" fixed="left"> </el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="14">
|
<el-col :span="13" :offset="1">
|
||||||
<process-flow-graph
|
<el-tabs @tab-click="tabClick">
|
||||||
ref="graphRef"
|
<el-tab-pane label="图形模式">
|
||||||
@refreshDataList="getDataList"
|
<process-flow-graph
|
||||||
></process-flow-graph>
|
v-show="graphVisible"
|
||||||
|
ref="graphRef"
|
||||||
|
:product-id="productId"
|
||||||
|
@refreshDataList="getDataList"
|
||||||
|
></process-flow-graph>
|
||||||
|
</el-tab-pane>
|
||||||
|
<el-tab-pane label="表格模式">
|
||||||
|
<two-step v-show="twoStepVisible" ref="twoStepRef" :product-id="productId"></two-step>
|
||||||
|
</el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
</el-card>
|
</el-card>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import processFlowGraph from './components/processFlow-graph'
|
import processFlowGraph from "./components/processFlow-graph";
|
||||||
|
import twoStep from "./components/productList-two";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
dataListLoading: false,
|
dataListLoading: false,
|
||||||
dataList: [],
|
dataList: [],
|
||||||
|
flowDataList: [],
|
||||||
|
graphVisible: true,
|
||||||
|
twoStepVisible: false,
|
||||||
dataForm: {
|
dataForm: {
|
||||||
paramKey: "",
|
paramKey: "",
|
||||||
},
|
},
|
||||||
currentRow: "",
|
productId: "",
|
||||||
|
paneName: "图形模式",
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
processFlowGraph,
|
processFlowGraph,
|
||||||
|
twoStep,
|
||||||
},
|
},
|
||||||
activated() {
|
created() {
|
||||||
this.getDataList();
|
this.getDataList();
|
||||||
|
this.productId = ''
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getDataList() {
|
getDataList() {
|
||||||
@ -106,9 +122,30 @@ export default {
|
|||||||
this.dataListLoading = false;
|
this.dataListLoading = false;
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
tabClick(val) {
|
||||||
|
this.paneName = val.label;
|
||||||
|
if (val.label === "图形模式") {
|
||||||
|
this.twoStepVisible = false;
|
||||||
|
this.graphVisible = true;
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs.graphRef.init();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.graphVisible = false;
|
||||||
|
this.twoStepVisible = true;
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs.twoStepRef.init();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
handleCurrentChange(val) {
|
handleCurrentChange(val) {
|
||||||
console.log(val);
|
if (val) {
|
||||||
this.currentRow = val;
|
this.productId = val.id;
|
||||||
|
const obj = {
|
||||||
|
label: this.paneName,
|
||||||
|
};
|
||||||
|
this.tabClick(obj);
|
||||||
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user