更新
This commit is contained in:
@@ -1,103 +1,149 @@
|
||||
import { Addon} from '@antv/x6';
|
||||
import { Addon } from '@antv/x6';
|
||||
// 拖拽生成四边形
|
||||
export const startDragToGraph = (graph,data,e) =>{
|
||||
const node =
|
||||
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,
|
||||
},
|
||||
label: '圆角矩形',
|
||||
data: {
|
||||
type: 'defaultYSquare'
|
||||
},
|
||||
body: {
|
||||
stroke: '#000000',
|
||||
strokeWidth: 1,
|
||||
fill: '#5bdeff',
|
||||
}
|
||||
},
|
||||
ports: ports
|
||||
})
|
||||
const dnd = new Addon.Dnd({target:graph})
|
||||
dnd.start(node,e)
|
||||
shape: 'rect',
|
||||
width: 100, //节点的宽度
|
||||
height: 60, //节点的高度
|
||||
attrs: {
|
||||
label: {
|
||||
text: data.name,
|
||||
workingProcedureId: data.id,
|
||||
fill: '#FFFFFF',
|
||||
fontSize: 14,
|
||||
textWrap: {
|
||||
width: -10,
|
||||
height: -10,
|
||||
ellipsis: true,
|
||||
},
|
||||
},
|
||||
body: {
|
||||
stroke: '#000000',
|
||||
strokeWidth: 1,
|
||||
fill: '#5bdeff',
|
||||
rx: 10,
|
||||
ry: 10,
|
||||
}
|
||||
},
|
||||
})
|
||||
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',
|
||||
},
|
||||
groups: {
|
||||
// 输入链接桩群组定义
|
||||
top: {
|
||||
position: 'top',
|
||||
attrs: {
|
||||
circle: {
|
||||
r: 4,
|
||||
magnet: true,
|
||||
stroke: '#2D8CF0',
|
||||
strokeWidth: 2,
|
||||
fill: '#fff',
|
||||
},
|
||||
},
|
||||
},
|
||||
items: [
|
||||
// 输出链接桩群组定义
|
||||
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',
|
||||
}
|
||||
],
|
||||
}
|
||||
|
||||
|
||||
// 连线 label 设置
|
||||
export const configEdgeLabel = (labelText, fontColor, fill, stroke) => {
|
||||
if (!labelText) return { attrs: { labelText: { text: '' }, labelBody: { fill: '', stroke: '' } } }
|
||||
return {
|
||||
markup: [
|
||||
{
|
||||
id: 'port1',
|
||||
group: 'top',
|
||||
tagName: 'rect',
|
||||
selector: 'labelBody',
|
||||
},
|
||||
{
|
||||
id: 'port2',
|
||||
group: 'bottom',
|
||||
tagName: 'text',
|
||||
selector: 'labelText',
|
||||
},
|
||||
{
|
||||
id: 'port3',
|
||||
group: 'left',
|
||||
},
|
||||
{
|
||||
id: 'port4',
|
||||
group: 'right',
|
||||
}
|
||||
],
|
||||
attrs: {
|
||||
labelText: {
|
||||
text: labelText || '',
|
||||
fill: fontColor || '#333',
|
||||
textAnchor: 'middle',
|
||||
textVerticalAnchor: 'middle',
|
||||
},
|
||||
labelBody: {
|
||||
ref: 'labelText',
|
||||
refX: -8,
|
||||
refY: -5,
|
||||
refWidth: '100%',
|
||||
refHeight: '100%',
|
||||
refWidth2: 16,
|
||||
refHeight2: 10,
|
||||
stroke: stroke || '#555',
|
||||
fill: fill || '#fff',
|
||||
strokeWidth: 2,
|
||||
rx: 5,
|
||||
ry: 5,
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -2,13 +2,16 @@
|
||||
* @Author: zwq
|
||||
* @Date: 2022-09-01 15:42:34
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2022-09-09 13:42:48
|
||||
* @LastEditTime: 2022-12-12 15:44:25
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="3">
|
||||
<el-card>
|
||||
<el-card class="cardHeader">
|
||||
<div slot="header" style="color:#409eff;text-align:center">
|
||||
工序列表
|
||||
</div>
|
||||
<div
|
||||
v-for="(item, index) in processArr"
|
||||
:key="index"
|
||||
@@ -18,19 +21,164 @@
|
||||
>
|
||||
{{ item.name }}
|
||||
</div>
|
||||
<!-- <el-button type="primary">保存</el-button> -->
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="21">
|
||||
<div id="containerChart"></div>
|
||||
<div v-if="editDrawer" class="edit-main">
|
||||
<div class="edit-main-title">
|
||||
<h3>{{ editTitle }}</h3>
|
||||
<i class="el-icon-close" @click="closeEditForm"></i>
|
||||
</div>
|
||||
<div v-if="editTitle === '编辑节点'" class="form-main">
|
||||
<el-form ref="nodeForm" :model="form" label-width="80px" size="mini">
|
||||
<el-form-item label="节点文本">
|
||||
<el-input
|
||||
v-model="form.labelText"
|
||||
size="small"
|
||||
readonly
|
||||
@input="changeNode('labelText', form.labelText)"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="字体大小">
|
||||
<el-input
|
||||
v-model="form.fontSize"
|
||||
size="small"
|
||||
@input="changeNode('fontSize', form.fontSize)"
|
||||
></el-input>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="字体颜色">
|
||||
<el-color-picker
|
||||
v-model="form.fontFill"
|
||||
@change="changeNode('fontFill', form.fontFill)"
|
||||
></el-color-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="节点背景">
|
||||
<el-color-picker
|
||||
v-model="form.fill"
|
||||
@change="changeNode('fill', form.fill)"
|
||||
></el-color-picker>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="边框颜色">
|
||||
<el-color-picker
|
||||
v-model="form.stroke"
|
||||
@change="changeNode('stroke', form.stroke)"
|
||||
></el-color-picker>
|
||||
</el-form-item> -->
|
||||
<div class="see-box">
|
||||
<h5>预览</h5>
|
||||
<div
|
||||
class="see-item"
|
||||
:style="{
|
||||
background: form.fill,
|
||||
color: form.fontFill,
|
||||
'border-color': form.stroke,
|
||||
'font-size': form.fontSize + 'px',
|
||||
}"
|
||||
>
|
||||
{{ form.labelText }}
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
<!-- <div v-if="editTitle === '编辑连线'" class="form-main">
|
||||
<el-form ref="edgeForm" :model="form" label-width="80px" size="mini">
|
||||
<el-form-item label="标签内容">
|
||||
<el-input
|
||||
v-model="form.label"
|
||||
size="small"
|
||||
placeholder="标签文字，空则没有"
|
||||
@input="
|
||||
changeEdgeLabel(form.label, labelForm.fontColor, labelForm.fill, labelForm.stroke)
|
||||
"
|
||||
></el-input>
|
||||
<div v-if="form.label" class="label-style">
|
||||
<p>
|
||||
字体颜色：<el-color-picker
|
||||
v-model="labelForm.fontColor"
|
||||
size="mini"
|
||||
@change="
|
||||
changeEdgeLabel(
|
||||
form.label,
|
||||
labelForm.fontColor,
|
||||
labelForm.fill,
|
||||
labelForm.stroke
|
||||
)
|
||||
"
|
||||
></el-color-picker>
|
||||
</p>
|
||||
<p>
|
||||
背景颜色：<el-color-picker
|
||||
v-model="labelForm.fill"
|
||||
size="mini"
|
||||
@change="
|
||||
changeEdgeLabel(
|
||||
form.label,
|
||||
labelForm.fontColor,
|
||||
labelForm.fill,
|
||||
labelForm.stroke
|
||||
)
|
||||
"
|
||||
></el-color-picker>
|
||||
</p>
|
||||
<p>
|
||||
描边颜色：<el-color-picker
|
||||
v-model="labelForm.stroke"
|
||||
size="mini"
|
||||
@change="
|
||||
changeEdgeLabel(
|
||||
form.label,
|
||||
labelForm.fontColor,
|
||||
labelForm.fill,
|
||||
labelForm.stroke
|
||||
)
|
||||
"
|
||||
></el-color-picker>
|
||||
</p>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="线条颜色">
|
||||
<el-color-picker
|
||||
v-model="form.stroke"
|
||||
size="small"
|
||||
@change="changeEdgeStroke"
|
||||
></el-color-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="线条宽度">
|
||||
<el-input-number
|
||||
v-model="form.strokeWidth"
|
||||
size="small"
|
||||
@change="changeEdgeStrokeWidth"
|
||||
:min="2"
|
||||
:step="2"
|
||||
:max="6"
|
||||
label="线条宽度"
|
||||
></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="双向箭头">
|
||||
<el-switch v-model="form.isArrows" @change="changeEdgeArrows"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="流动线条">
|
||||
<el-switch v-model="form.isAnit" @change="changeEdgeAnit"></el-switch>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div> -->
|
||||
<div class="edit-btn">
|
||||
<el-button type="primary" size="medium" @click="saveChange" style="width:100%"
|
||||
>保存</el-button
|
||||
>
|
||||
<el-button type="danger" size="medium" @click="handlerDel" style="width:100%"
|
||||
>删除此{{ editTitle === "编辑节点" ? "节点" : "连线" }}</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Graph, Shape, FunctionExt } from "@antv/x6";
|
||||
import { startDragToGraph, ports } from "./flowMethods.js";
|
||||
|
||||
import { startDragToGraph, configEdgeLabel } from "./flowMethods.js";
|
||||
export default {
|
||||
props: {
|
||||
productId: {
|
||||
@@ -45,6 +193,14 @@ export default {
|
||||
graph: "",
|
||||
type: "grid",
|
||||
selectCell: "",
|
||||
editDrawer: false,
|
||||
editTitle: "",
|
||||
form: {},
|
||||
labelForm: {
|
||||
fontColor: "#333",
|
||||
fill: "#FFF",
|
||||
stroke: "#555",
|
||||
},
|
||||
connectEdgeType: {
|
||||
//连线方式
|
||||
connector: "normal",
|
||||
@@ -68,6 +224,20 @@ export default {
|
||||
activated() {
|
||||
this.init();
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler: function() {
|
||||
if (this.graph) {
|
||||
this.selectCell = "";
|
||||
this.editDrawer = false;
|
||||
this.graph.dispose();
|
||||
this.init();
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.getArr();
|
||||
@@ -101,106 +271,50 @@ export default {
|
||||
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: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 }) => {
|
||||
this.graph.on("node:moved", ({ node }) => {
|
||||
const { x, y } = node.position();
|
||||
this.updataNode(node.attrs.label.id, x, y);
|
||||
this.updataNode(node.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());
|
||||
// 点击编辑
|
||||
this.graph.on("cell:click", ({ cell }) => {
|
||||
this.editForm(cell);
|
||||
});
|
||||
//链接边分离后触发
|
||||
// this.graph.on("edge:connected", ({ isNew, edge }) => {
|
||||
// if (isNew) {
|
||||
// const source = edge.getSourceCell();
|
||||
// const target = edge.getTargetCell();
|
||||
// }
|
||||
// });
|
||||
},
|
||||
showPorts(ports, show) {
|
||||
for (let i = 0, len = ports.length; i < len; i = i + 1) {
|
||||
ports[i].style.visibility = show ? "visible" : "hidden";
|
||||
}
|
||||
},
|
||||
// 是否展示节点
|
||||
// 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);
|
||||
@@ -233,6 +347,7 @@ export default {
|
||||
}
|
||||
this.dataList = res.data;
|
||||
this.setNode();
|
||||
this.setEdge();
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
@@ -240,15 +355,19 @@ export default {
|
||||
let nodes = [];
|
||||
this.dataList.forEach((item) => {
|
||||
let obj = {};
|
||||
obj.x = item.x;
|
||||
(obj.id = item.id), (obj.x = item.x);
|
||||
obj.y = item.y;
|
||||
obj.width = 100;
|
||||
obj.height = 60;
|
||||
obj.label = "圆角矩形";
|
||||
obj.data = {
|
||||
type: "defaultYSquare",
|
||||
};
|
||||
obj.shape = "rect";
|
||||
obj.attrs = {
|
||||
label: {
|
||||
text: item.workingProcedureName,
|
||||
id: item.id,
|
||||
fill: "white",
|
||||
fill: item.fontcolor || "#FFFFFF",
|
||||
fontSize: 14,
|
||||
textWrap: {
|
||||
width: -10,
|
||||
@@ -259,10 +378,11 @@ export default {
|
||||
body: {
|
||||
stroke: "#000000",
|
||||
strokeWidth: 1,
|
||||
fill: "#5bdeff",
|
||||
fill: item.backcolor || "#5bdeff",
|
||||
rx: 10,
|
||||
ry: 10,
|
||||
},
|
||||
};
|
||||
obj.ports = ports;
|
||||
nodes.push(obj);
|
||||
});
|
||||
const data = {
|
||||
@@ -270,6 +390,22 @@ export default {
|
||||
};
|
||||
this.graph.fromJSON(data);
|
||||
},
|
||||
setEdge() {
|
||||
let source, target;
|
||||
if (this.dataList.length >= 2) {
|
||||
this.dataList.forEach((item, index) => {
|
||||
if (index % 2 === 0) {
|
||||
source = item.id;
|
||||
} else {
|
||||
target = item.id;
|
||||
this.graph.addEdge({
|
||||
source: source,
|
||||
target: target,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
updataNode(id, x, y) {
|
||||
const data = {
|
||||
id: id,
|
||||
@@ -287,6 +423,7 @@ export default {
|
||||
type: "success",
|
||||
duration: 500,
|
||||
});
|
||||
this.getList();
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
@@ -314,33 +451,218 @@ export default {
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
// 删除
|
||||
deleteHandle(id, name) {
|
||||
this.$confirm(`确定对[名称=${name}]进行删除操作?`, "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
//编辑节点和线
|
||||
editForm(cell) {
|
||||
this.selectCell = cell;
|
||||
console.log(cell);
|
||||
// 编辑node节点
|
||||
if (cell.isNode() && cell.data.type && cell.data.type.includes("default")) {
|
||||
this.editTitle = "编辑节点";
|
||||
const body = cell.attrs.body || cell.attrs.rect || cell.attrs.polygon || cell.attrs.circle;
|
||||
this.form = {
|
||||
labelText: cell.attrs.label.text || "",
|
||||
fontSize: cell.attrs.label.fontSize || 14,
|
||||
fontFill: cell.attrs.label.fill || "",
|
||||
fill: body.fill || "",
|
||||
stroke: body.stroke || "",
|
||||
};
|
||||
return (this.editDrawer = true);
|
||||
}
|
||||
// // 编辑线
|
||||
// if (!cell.isNode() && cell.shape === "edge") {
|
||||
// this.editTitle = "编辑连线";
|
||||
// this.form = {
|
||||
// label: cell.labels && cell.labels[0] ? cell.labels[0].attrs.labelText.text : "",
|
||||
// stroke: cell.attrs.line.stroke || "",
|
||||
// strokeWidth: cell.attrs.line.strokeWidth || "",
|
||||
// isArrows: cell.attrs.line.sourceMarker ? true : false,
|
||||
// isAnit: cell.attrs.line.strokeDasharray ? true : false,
|
||||
// };
|
||||
// // 看是否有label
|
||||
// const edgeCellLabel = (cell.labels && cell.labels[0] && cell.labels[0].attrs) || false;
|
||||
// if (this.form.label && edgeCellLabel) {
|
||||
// this.labelForm = {
|
||||
// fontColor: edgeCellLabel.labelText.fill || "#333",
|
||||
// fill: edgeCellLabel.labelBody.fill || "#fff",
|
||||
// stroke: edgeCellLabel.labelBody.stroke || "#555",
|
||||
// };
|
||||
// } else {
|
||||
// this.labelForm = { fontColor: "#333", fill: "#FFF", stroke: "#555" };
|
||||
// }
|
||||
// return (this.editDrawer = true);
|
||||
// }
|
||||
},
|
||||
closeEditForm() {
|
||||
this.editDrawer = false;
|
||||
},
|
||||
// 修改一般节点
|
||||
changeNode(type, value) {
|
||||
switch (type) {
|
||||
case "labelText":
|
||||
this.selectCell.attr("label/text", value);
|
||||
break;
|
||||
case "fontSize":
|
||||
this.selectCell.attr("label/fontSize", value);
|
||||
break;
|
||||
case "fontFill":
|
||||
this.selectCell.attr("label/fill", value);
|
||||
break;
|
||||
case "fill":
|
||||
this.selectCell.attr("body/fill", value);
|
||||
break;
|
||||
case "stroke":
|
||||
this.selectCell.attr("body/stroke", value);
|
||||
break;
|
||||
}
|
||||
},
|
||||
// 修改边label属性
|
||||
changeEdgeLabel(label, fontColor, fill, stroke) {
|
||||
this.selectCell.setLabels([configEdgeLabel(label, fontColor, fill, stroke)]);
|
||||
if (!label) this.labelForm = { fontColor: "#333", fill: "#FFF", stroke: "#555" };
|
||||
},
|
||||
// 修改边的颜色
|
||||
changeEdgeStroke(val) {
|
||||
this.selectCell.attr("line/stroke", val);
|
||||
},
|
||||
// 边的宽度
|
||||
changeEdgeStrokeWidth(val) {
|
||||
if (this.form.isArrows) {
|
||||
this.selectCell.attr({
|
||||
line: {
|
||||
strokeWidth: val,
|
||||
sourceMarker: {
|
||||
width: 12 * (val / 2) || 12,
|
||||
height: 8 * (val / 2) || 8,
|
||||
},
|
||||
targetMarker: {
|
||||
width: 12 * (val / 2) || 12,
|
||||
height: 8 * (val / 2) || 8,
|
||||
},
|
||||
},
|
||||
});
|
||||
} else {
|
||||
this.selectCell.attr({
|
||||
line: {
|
||||
strokeWidth: val,
|
||||
targetMarker: {
|
||||
width: 12 * (val / 2) || 12,
|
||||
height: 8 * (val / 2) || 8,
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
},
|
||||
// 边的箭头
|
||||
changeEdgeArrows(val) {
|
||||
if (val) {
|
||||
this.selectCell.attr({
|
||||
line: {
|
||||
sourceMarker: {
|
||||
name: "block",
|
||||
width: 12 * (this.form.strokeWidth / 2) || 12,
|
||||
height: 8 * (this.form.strokeWidth / 2) || 8,
|
||||
},
|
||||
targetMarker: {
|
||||
name: "block",
|
||||
width: 12 * (this.form.strokeWidth / 2) || 12,
|
||||
height: 8 * (this.form.strokeWidth / 2) || 8,
|
||||
},
|
||||
},
|
||||
});
|
||||
} else {
|
||||
this.selectCell.attr({
|
||||
line: {
|
||||
sourceMarker: "",
|
||||
targetMarker: {
|
||||
name: "block",
|
||||
size: 10 * (this.form.strokeWidth / 2) || 10,
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
},
|
||||
// 边的添加蚂蚁线
|
||||
changeEdgeAnit(val) {
|
||||
if (val) {
|
||||
this.selectCell.attr({
|
||||
line: {
|
||||
strokeDasharray: 5,
|
||||
style: {
|
||||
animation: "ant-line 30s infinite linear",
|
||||
},
|
||||
},
|
||||
});
|
||||
} else {
|
||||
this.selectCell.attr({
|
||||
line: {
|
||||
strokeDasharray: 0,
|
||||
style: {
|
||||
animation: "",
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
},
|
||||
// 删除节点
|
||||
handlerDel() {
|
||||
this.$confirm(
|
||||
`此操作将永久删除此${this.editTitle === "编辑节点" ? "节点" : "连线"}, 是否继续?`,
|
||||
"提示",
|
||||
{
|
||||
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);
|
||||
}
|
||||
});
|
||||
const cells = this.graph.getSelectedCells();
|
||||
if (cells.length) {
|
||||
this.$http
|
||||
.delete("/basic/productWorkingprocedureRelation", { data: [cells[0].id] })
|
||||
.then(({ data }) => {
|
||||
if (data && data.code === 0) {
|
||||
this.graph.removeCells(cells);
|
||||
this.form = {};
|
||||
this.editDrawer = false;
|
||||
this.$message({
|
||||
message: "操作成功",
|
||||
type: "success",
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getList();
|
||||
},
|
||||
});
|
||||
} else {
|
||||
this.$message.error(data.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(() => {});
|
||||
}, //清空画布
|
||||
},
|
||||
saveChange() {
|
||||
const cells = this.graph.getSelectedCells();
|
||||
const data = {
|
||||
id: cells[0].id,
|
||||
backcolor: cells[0].attrs.body.fill,
|
||||
fontcolor: cells[0].attrs.label.fill,
|
||||
};
|
||||
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,
|
||||
});
|
||||
this.getList();
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
//清空画布
|
||||
deleteAll() {
|
||||
this.graph.clearCells();
|
||||
},
|
||||
@@ -349,16 +671,20 @@ export default {
|
||||
this.graph.dispose();
|
||||
},
|
||||
},
|
||||
destroyed() {
|
||||
console.log("销毁画布");
|
||||
beforeDestroy() {
|
||||
this.graph.dispose();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#containerChart {
|
||||
<style lang="scss">
|
||||
@keyframes ant-line {
|
||||
to {
|
||||
stroke-dashoffset: -1000;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.btn {
|
||||
background-color: #5bdeff;
|
||||
text-align: center;
|
||||
@@ -368,3 +694,68 @@ export default {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped="scoped">
|
||||
.edit-main {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 280px;
|
||||
border-left: 1px solid #f2f2f2;
|
||||
box-shadow: 0 -10px 10px rgba($color: #000000, $alpha: 0.3);
|
||||
padding: 20px;
|
||||
background: #fff;
|
||||
box-sizing: border-box;
|
||||
.edit-main-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
h3 {
|
||||
flex: 1;
|
||||
}
|
||||
i {
|
||||
cursor: pointer;
|
||||
font-size: 20px;
|
||||
opacity: 0.7;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.form-main {
|
||||
padding: 10px 0;
|
||||
.label-style {
|
||||
background: #f2f2f2;
|
||||
padding: 0 10px;
|
||||
p {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.edit-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.see-box {
|
||||
padding: 10px;
|
||||
background: #f2f2f2;
|
||||
h5 {
|
||||
}
|
||||
.see-item {
|
||||
line-height: 60px;
|
||||
text-align: center;
|
||||
width: 100px;
|
||||
height: 60px;
|
||||
border-radius: 5px;
|
||||
margin: auto;
|
||||
border: 2px solid #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-card ::v-deep .el-card__header {
|
||||
height: 60px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
* @Author: zwq
|
||||
* @Date: 2021-11-18 14:16:25
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2022-09-07 16:04:53
|
||||
* @LastEditTime: 2022-12-13 16:00:33
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
@@ -20,7 +20,7 @@
|
||||
border
|
||||
style="width: 50%;"
|
||||
>
|
||||
<el-table-column prop="name"> </el-table-column>
|
||||
<el-table-column prop="name" align="center"> </el-table-column>
|
||||
<el-table-column
|
||||
v-for="(item, index) in workingProcedure"
|
||||
:key="item.id"
|
||||
@@ -38,7 +38,7 @@
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="特性列表">
|
||||
<el-tab-pane label="特性列表" align="center">
|
||||
<el-table
|
||||
:data="dataList"
|
||||
:stripe="true"
|
||||
@@ -57,14 +57,14 @@
|
||||
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="特性类型">
|
||||
<el-table-column prop="code" align="center" label="编号"> </el-table-column>
|
||||
<el-table-column prop="name" align="center" label="名称"></el-table-column>
|
||||
<el-table-column prop="type" align="center" label="特性类型">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.type === 2 ? "计数" : "计量" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="defectLevel" label="缺陷等级">
|
||||
<el-table-column prop="defectLevel" align="center" label="缺陷等级">
|
||||
<template slot-scope="scope">
|
||||
<span>{{
|
||||
scope.row.defectLevel === 1
|
||||
@@ -75,24 +75,24 @@
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="measureToolName" label="量具"></el-table-column>
|
||||
<el-table-column prop="isSpc" label="SPC">
|
||||
<el-table-column prop="measureToolName" align="center" label="量具"></el-table-column>
|
||||
<el-table-column prop="isSpc" align="center" 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-column prop="controlGraphName" align="center" label="分析图形"></el-table-column>
|
||||
<el-table-column prop="sampleSize" align="center" label="样本大小"></el-table-column>
|
||||
<el-table-column prop="samplingFrequency" align="center" label="抽样频率"></el-table-column>
|
||||
<el-table-column prop="unitName" align="center" label="单位"></el-table-column>
|
||||
<el-table-column prop="decimalPlaces" align="center" label="小数位数"></el-table-column>
|
||||
<el-table-column prop="specifications" align="center" label="规格"></el-table-column>
|
||||
<el-table-column prop="lsl" align="center" label="LSL"></el-table-column>
|
||||
<el-table-column prop="sl" align="center" label="SL"></el-table-column>
|
||||
<el-table-column prop="usl" align="center" label="USL"></el-table-column>
|
||||
<el-table-column prop="targetCpk" align="center" label="目标CPK"></el-table-column>
|
||||
<el-table-column prop="targetPpk" align="center" label="目标PPK"></el-table-column>
|
||||
<el-table-column prop="remark" align="center" label="备注"></el-table-column>
|
||||
<el-table-column
|
||||
fixed="right"
|
||||
header-align="center"
|
||||
@@ -176,7 +176,7 @@ export default {
|
||||
methods: {
|
||||
init(index) {
|
||||
this.dataListLoading = false;
|
||||
this.inspectionStage = parseInt(index) + 1;
|
||||
this.inspectionStage = parseInt(index);
|
||||
this.productFeaturesList.splice(0, this.productFeaturesList.length);
|
||||
this.$nextTick(() => {
|
||||
this.getSelection();
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
* @Author: zwq
|
||||
* @Date: 2021-11-18 14:16:25
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2022-09-07 16:06:00
|
||||
* @LastEditTime: 2022-12-01 15:51:44
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
@@ -19,14 +19,14 @@
|
||||
>
|
||||
<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="特性类型">
|
||||
<el-table-column prop="code" align="center" label="编号"> </el-table-column>
|
||||
<el-table-column prop="name" align="center" label="名称"></el-table-column>
|
||||
<el-table-column prop="type" align="center" label="特性类型">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.type === 2 ? "计数" : "计量" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="defectLevel" label="缺陷等级">
|
||||
<el-table-column prop="defectLevel" align="center" label="缺陷等级">
|
||||
<template slot-scope="scope">
|
||||
<span>{{
|
||||
scope.row.defectLevel === 1
|
||||
@@ -37,24 +37,24 @@
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="measureToolName" label="量具"></el-table-column>
|
||||
<el-table-column prop="isSpc" label="SPC">
|
||||
<el-table-column prop="measureToolName" align="center" label="量具"></el-table-column>
|
||||
<el-table-column prop="isSpc" align="center" 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-column prop="controlGraphName" align="center" label="分析图形"></el-table-column>
|
||||
<el-table-column prop="sampleSize" align="center" label="样本大小"></el-table-column>
|
||||
<el-table-column prop="samplingFrequency" align="center" label="抽样频率"></el-table-column>
|
||||
<el-table-column prop="unitName" align="center" label="单位"></el-table-column>
|
||||
<el-table-column prop="decimalPlaces" align="center" label="小数位数"></el-table-column>
|
||||
<el-table-column prop="specifications" align="center" label="规格"></el-table-column>
|
||||
<el-table-column prop="lsl" align="center" label="LSL"></el-table-column>
|
||||
<el-table-column prop="sl" align="center" label="SL"></el-table-column>
|
||||
<el-table-column prop="usl" align="center" label="USL"></el-table-column>
|
||||
<el-table-column prop="targetCpk" align="center" label="目标CPK"></el-table-column>
|
||||
<el-table-column prop="targetPpk" align="center" label="目标PPK"></el-table-column>
|
||||
<el-table-column prop="remark" align="center" label="备注"></el-table-column>
|
||||
</el-table>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="hisVisible = false">关闭</el-button>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
* @Author: zwq
|
||||
* @Date: 2021-11-18 14:16:25
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2022-09-05 15:25:52
|
||||
* @LastEditTime: 2022-12-13 16:00:28
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
@@ -87,12 +87,12 @@ export default {
|
||||
return this.$message.error(res.msg);
|
||||
}
|
||||
this.workingProcedure = res.data;
|
||||
this.$refs.fourContentRef[0].init(0);
|
||||
this.$refs.fourContentRef[0].init(this.inspectionStageArr?.[0]);
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
tabClick(val) {
|
||||
this.$refs.fourContentRef[val.index].init(val.index);
|
||||
this.$refs.fourContentRef[val.index].init(this.inspectionStageArr?.[val.index]);
|
||||
},
|
||||
// 表单提交
|
||||
dataFormSubmit() {
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
* @Author: zwq
|
||||
* @Date: 2021-11-18 14:16:25
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2022-08-29 16:49:43
|
||||
* @LastEditTime: 2022-12-12 15:51:58
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
@@ -33,6 +33,7 @@
|
||||
<el-form-item label="特性类型" prop="type">
|
||||
<el-select
|
||||
v-model="threeDataForm.type"
|
||||
@change="numIsblack"
|
||||
:style="{ width: '100%' }"
|
||||
filterable
|
||||
placeholder="请选择特性类型"
|
||||
@@ -50,6 +51,7 @@
|
||||
<el-col :span="8">
|
||||
<el-form-item label="缺陷等级" prop="defectLevel">
|
||||
<el-select
|
||||
:disabled="threeDataForm.type === 2"
|
||||
v-model="threeDataForm.defectLevel"
|
||||
:style="{ width: '100%' }"
|
||||
filterable
|
||||
@@ -68,6 +70,7 @@
|
||||
<el-col :span="8">
|
||||
<el-form-item label="量具" prop="measureToolId">
|
||||
<el-select
|
||||
:disabled="threeDataForm.type === 2"
|
||||
v-model="threeDataForm.measureToolId"
|
||||
placeholder="请选择单位"
|
||||
clearable
|
||||
@@ -85,6 +88,7 @@
|
||||
<el-col :span="8">
|
||||
<el-form-item label="单位" prop="unitId">
|
||||
<el-select
|
||||
:disabled="threeDataForm.type === 2"
|
||||
v-model="threeDataForm.unitId"
|
||||
placeholder="请选择单位"
|
||||
clearable
|
||||
@@ -101,22 +105,38 @@
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="规格" prop="specifications">
|
||||
<el-input v-model="threeDataForm.specifications" placeholder="规格"></el-input>
|
||||
<el-input
|
||||
:disabled="threeDataForm.type === 2"
|
||||
v-model="threeDataForm.specifications"
|
||||
placeholder="规格"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="LSL" prop="lsl">
|
||||
<el-input-number v-model="threeDataForm.lsl" placeholder="LSL"></el-input-number>
|
||||
<el-input-number
|
||||
:disabled="threeDataForm.type === 2"
|
||||
v-model="threeDataForm.lsl"
|
||||
placeholder="LSL"
|
||||
></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="SL" prop="sl">
|
||||
<el-input-number v-model="threeDataForm.sl" placeholder="SL"></el-input-number>
|
||||
<el-input-number
|
||||
:disabled="threeDataForm.type === 2"
|
||||
v-model="threeDataForm.sl"
|
||||
placeholder="SL"
|
||||
></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="USL" prop="usl">
|
||||
<el-input-number v-model="threeDataForm.usl" placeholder="USL"></el-input-number>
|
||||
<el-input-number
|
||||
:disabled="threeDataForm.type === 2"
|
||||
v-model="threeDataForm.usl"
|
||||
placeholder="USL"
|
||||
></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
@@ -147,11 +167,11 @@ export default {
|
||||
defectLevel: "",
|
||||
measureToolId: "",
|
||||
unitId: "",
|
||||
specifications: '',
|
||||
lsl: '',
|
||||
sl: '',
|
||||
usl: '',
|
||||
remark: ''
|
||||
specifications: "",
|
||||
lsl: "",
|
||||
sl: "",
|
||||
usl: "",
|
||||
remark: "",
|
||||
},
|
||||
typeArr: [
|
||||
{
|
||||
@@ -238,6 +258,17 @@ export default {
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
numIsblack(val){
|
||||
if(val===2){
|
||||
this.threeDataForm.defectLevel= ""
|
||||
this.threeDataForm.measureToolId= ""
|
||||
this.threeDataForm.unitId= ""
|
||||
this.threeDataForm.specifications= ""
|
||||
this.threeDataForm.lsl= 0
|
||||
this.threeDataForm.sl= 0
|
||||
this.threeDataForm.usl= 0
|
||||
}
|
||||
},
|
||||
// 表单提交
|
||||
dataFormSubmit() {
|
||||
this.$refs["threeDataForm"].validate((valid) => {
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
* @Author: zwq
|
||||
* @Date: 2021-11-18 14:16:25
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2022-08-29 16:46:06
|
||||
* @LastEditTime: 2022-12-01 15:52:10
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
@@ -26,14 +26,14 @@
|
||||
>
|
||||
<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="特性类型">
|
||||
<el-table-column prop="code" align="center" label="编号"> </el-table-column>
|
||||
<el-table-column prop="name" align="center" label="名称"></el-table-column>
|
||||
<el-table-column prop="type" align="center" label="特性类型">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.type === 2 ? "计数" : "计量" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="defectLevel" label="缺陷等级">
|
||||
<el-table-column prop="defectLevel" align="center" label="缺陷等级">
|
||||
<template slot-scope="scope">
|
||||
<span>{{
|
||||
scope.row.defectLevel === 1
|
||||
@@ -44,13 +44,13 @@
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="measureToolName" label="量具"></el-table-column>
|
||||
<el-table-column prop="unitName" 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="remark" label="备注"></el-table-column>
|
||||
<el-table-column prop="measureToolName" align="center" label="量具"></el-table-column>
|
||||
<el-table-column prop="unitName" align="center" label="单位"></el-table-column>
|
||||
<el-table-column prop="specifications" align="center" label="规格"></el-table-column>
|
||||
<el-table-column prop="lsl" align="center" label="LSL"></el-table-column>
|
||||
<el-table-column prop="sl" align="center" label="SL"></el-table-column>
|
||||
<el-table-column prop="usl" align="center" label="USL"></el-table-column>
|
||||
<el-table-column prop="remark" align="center" 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" size="small" @click="addOrUpdateHandle(scope.row.id)">
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
* @Author: zwq
|
||||
* @Date: 2021-11-18 14:16:25
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2022-09-07 15:25:36
|
||||
* @LastEditTime: 2022-12-01 15:52:21
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
@@ -35,8 +35,8 @@
|
||||
>
|
||||
<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 prop="workingProcedureName" align="center" label="工序名称"> </el-table-column>
|
||||
<el-table-column prop="workingProcedureCode" align="center" label="工序编码"> </el-table-column>
|
||||
<el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
* @Author: zwq
|
||||
* @Date: 2021-11-18 14:16:25
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2022-08-24 15:06:08
|
||||
* @LastEditTime: 2022-12-01 15:52:40
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
@@ -30,12 +30,12 @@
|
||||
width="50"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="名称"> </el-table-column>
|
||||
<el-table-column prop="code" label="编码"> </el-table-column>
|
||||
<el-table-column prop="num" label="小数位数"> </el-table-column>
|
||||
<el-table-column prop="USL" label="USL"> </el-table-column>
|
||||
<el-table-column prop="SL" label="SL"> </el-table-column>
|
||||
<el-table-column prop="LSL" label="LSL"> </el-table-column>
|
||||
<el-table-column prop="name" align="center" label="名称"> </el-table-column>
|
||||
<el-table-column prop="code" align="center" label="编码"> </el-table-column>
|
||||
<el-table-column prop="num" align="center" label="小数位数"> </el-table-column>
|
||||
<el-table-column prop="USL" align="center" label="USL"> </el-table-column>
|
||||
<el-table-column prop="SL" align="center" label="SL"> </el-table-column>
|
||||
<el-table-column prop="LSL" align="center" label="LSL"> </el-table-column>
|
||||
<el-table-column
|
||||
fixed="right"
|
||||
header-align="center"
|
||||
|
||||
@@ -7,20 +7,34 @@
|
||||
@keyup.enter.native="getDataList()"
|
||||
>
|
||||
<el-form-item>
|
||||
<el-input
|
||||
<el-input size="small" v-model="dataForm.name" clearable placeholder="请输入名称查询" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input size="small" v-model="dataForm.code" clearable placeholder="请输入编码查询" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-select
|
||||
size="small"
|
||||
v-model="dataForm.paramKey"
|
||||
v-model="dataForm.type"
|
||||
placeholder="请选择类型"
|
||||
style="width:150px"
|
||||
clearable
|
||||
placeholder="请输入关键字查询"
|
||||
/>
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in typeArr"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button size="small" @click="getDataList()">
|
||||
<svg class="icon-svg"><use xlink:href="#icon-sousuo"></use></svg>
|
||||
<svg class="icon-svg"><use xlink:href="#icon-sousuo"></use></svg>
|
||||
查询
|
||||
</el-button>
|
||||
<el-button size="small" type="primary" @click="addOrUpdateHandle()">
|
||||
<svg class="icon-svg"><use xlink:href="#icon-新建"></use></svg>
|
||||
<svg class="icon-svg"><use xlink:href="#icon-新建"></use></svg>
|
||||
新增
|
||||
</el-button>
|
||||
<el-button size="small" type="primary" @click="exportHandle('工厂管理')">
|
||||
@@ -50,8 +64,8 @@
|
||||
width="50"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="名称"> </el-table-column>
|
||||
<el-table-column prop="code" label="编码"> </el-table-column>
|
||||
<el-table-column prop="name" align="center" label="名称"> </el-table-column>
|
||||
<el-table-column prop="code" align="center" label="编码"> </el-table-column>
|
||||
<el-table-column
|
||||
type="type"
|
||||
header-align="center"
|
||||
@@ -65,8 +79,8 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column prop="supplier" label="供应商"> </el-table-column> -->
|
||||
<el-table-column prop="address" label="联系地址"> </el-table-column>
|
||||
<el-table-column prop="descs" label="描述"> </el-table-column>
|
||||
<el-table-column prop="address" align="center" label="联系地址"> </el-table-column>
|
||||
<el-table-column prop="descs" align="center" label="描述"> </el-table-column>
|
||||
<el-table-column
|
||||
type="status"
|
||||
header-align="center"
|
||||
@@ -158,6 +172,16 @@ export default {
|
||||
statusUrl: '/basic/factory/status',
|
||||
exportUrl: '/basic/factory/export'
|
||||
},
|
||||
typeArr: [
|
||||
{
|
||||
label: "内部工厂",
|
||||
value: "1",
|
||||
},
|
||||
{
|
||||
label: "供应商",
|
||||
value: "2",
|
||||
}
|
||||
],
|
||||
};
|
||||
},
|
||||
components: {
|
||||
|
||||
@@ -1,36 +1,12 @@
|
||||
<template>
|
||||
<el-card shadow="never" class="aui-card--fill">
|
||||
<el-form
|
||||
style="display: flex; align-items: center; justify-content: right;"
|
||||
:inline="true"
|
||||
:model="dataForm"
|
||||
@keyup.enter.native="getDataList()"
|
||||
>
|
||||
<el-form-item>
|
||||
<el-input
|
||||
size="small"
|
||||
v-model="dataForm.paramKey"
|
||||
clearable
|
||||
placeholder="请输入关键字查询"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button size="small" @click="getDataList()">
|
||||
<svg class="icon-svg"><use xlink:href="#icon-sousuo"></use></svg>
|
||||
查询
|
||||
</el-button>
|
||||
<el-button size="small" type="primary" @click="addOrUpdateHandle()">
|
||||
<svg class="icon-svg"><use xlink:href="#icon-新建"></use></svg>
|
||||
新增
|
||||
</el-button>
|
||||
<el-button size="small" type="primary" @click="exportHandle('机台管理')">
|
||||
<svg class="icon-svg">
|
||||
<use xlink:href="#导出"></use>
|
||||
</svg>
|
||||
导出
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<query-form
|
||||
:page-name="'机台管理'"
|
||||
:data-form="dataForm"
|
||||
@getDataList="getDataList"
|
||||
@addOrUpdateHandle="addOrUpdateHandle"
|
||||
@exportHandle="exportHandle"
|
||||
/>
|
||||
<el-table
|
||||
:data="dataList"
|
||||
:stripe="true"
|
||||
@@ -50,10 +26,10 @@
|
||||
width="50"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="名称"> </el-table-column>
|
||||
<el-table-column prop="code" label="编码"> </el-table-column>
|
||||
<el-table-column prop="platformName" label="站点"> </el-table-column>
|
||||
<el-table-column prop="remark" label="描述"> </el-table-column>
|
||||
<el-table-column prop="name" align="center" label="名称"> </el-table-column>
|
||||
<el-table-column prop="code" align="center" label="编码"> </el-table-column>
|
||||
<el-table-column prop="platformName" align="center" label="站点"> </el-table-column>
|
||||
<el-table-column prop="remark" align="center" label="描述"> </el-table-column>
|
||||
<el-table-column
|
||||
type="status"
|
||||
header-align="center"
|
||||
@@ -140,6 +116,7 @@
|
||||
<script>
|
||||
import AddOrUpdate from './components/machineManage-add'
|
||||
import basicPage from '@/mixins/basic-page'
|
||||
import queryForm from './query-form'
|
||||
export default {
|
||||
mixins: [basicPage],
|
||||
data() {
|
||||
@@ -154,6 +131,7 @@ export default {
|
||||
},
|
||||
components: {
|
||||
AddOrUpdate,
|
||||
queryForm,
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
|
||||
@@ -1,36 +1,12 @@
|
||||
<template>
|
||||
<el-card shadow="never" class="aui-card--fill">
|
||||
<el-form
|
||||
style="display: flex; align-items: center; justify-content: right;"
|
||||
:inline="true"
|
||||
:model="dataForm"
|
||||
@keyup.enter.native="getDataList()"
|
||||
>
|
||||
<el-form-item>
|
||||
<el-input
|
||||
size="small"
|
||||
v-model="dataForm.paramKey"
|
||||
clearable
|
||||
placeholder="请输入关键字查询"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button size="small" @click="getDataList()">
|
||||
<svg class="icon-svg"><use xlink:href="#icon-sousuo"></use></svg>
|
||||
查询
|
||||
</el-button>
|
||||
<el-button size="small" type="primary" @click="addOrUpdateHandle()">
|
||||
<svg class="icon-svg"><use xlink:href="#icon-新建"></use></svg>
|
||||
新增
|
||||
</el-button>
|
||||
<el-button size="small" type="primary" @click="exportHandle('工序定义')">
|
||||
<svg class="icon-svg">
|
||||
<use xlink:href="#导出"></use>
|
||||
</svg>
|
||||
导出
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<query-form
|
||||
:page-name="'工序定义'"
|
||||
:data-form="dataForm"
|
||||
@getDataList="getDataList"
|
||||
@addOrUpdateHandle="addOrUpdateHandle"
|
||||
@exportHandle="exportHandle"
|
||||
/>
|
||||
<el-table
|
||||
:data="dataList"
|
||||
:stripe="true"
|
||||
@@ -50,10 +26,10 @@
|
||||
width="50"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="名称"> </el-table-column>
|
||||
<el-table-column prop="code" label="编码"> </el-table-column>
|
||||
<el-table-column prop="workingProcedureTypeName" label="类型"> </el-table-column>
|
||||
<el-table-column prop="machineName" label="机台">
|
||||
<el-table-column prop="name" align="center" label="名称"> </el-table-column>
|
||||
<el-table-column prop="code" align="center" label="编码"> </el-table-column>
|
||||
<el-table-column prop="workingProcedureTypeName" align="center" label="类型"> </el-table-column>
|
||||
<el-table-column prop="machineName" align="center" label="机台">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.machineName}}</span>
|
||||
</template>
|
||||
@@ -164,6 +140,7 @@
|
||||
import AddOrUpdate from './components/processDefine-add'
|
||||
import BindMachine from './components/processDefine-machine'
|
||||
import basicPage from '@/mixins/basic-page'
|
||||
import queryForm from './query-form'
|
||||
export default {
|
||||
mixins: [basicPage],
|
||||
data() {
|
||||
@@ -179,6 +156,7 @@ export default {
|
||||
},
|
||||
components: {
|
||||
AddOrUpdate,
|
||||
queryForm,
|
||||
BindMachine
|
||||
},
|
||||
methods: {
|
||||
|
||||
@@ -1,152 +1,781 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2022-08-22 15:53:16
|
||||
* @Date: 2022-09-01 15:42:34
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2022-09-01 16:42:08
|
||||
* @LastEditTime: 2022-09-13 11:34:30
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<el-card shadow="never" class="aui-card--fill">
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="10">
|
||||
<el-form
|
||||
style="background-color:#e6f7ff;padding:10px 20px"
|
||||
:inline="true"
|
||||
:model="dataForm"
|
||||
@keyup.enter.native="getDataList()"
|
||||
<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)"
|
||||
>
|
||||
<el-form-item>
|
||||
<el-input v-model="dataForm.paramKey" clearable placeholder="请输入关键字查询" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="getDataList()">
|
||||
<svg class="icon-svg"><use xlink:href="#icon-sousuo"></use></svg>
|
||||
查询
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table
|
||||
:data="dataList"
|
||||
height="650"
|
||||
highlight-current-row
|
||||
@current-change="handleCurrentChange"
|
||||
:header-cell-style="{
|
||||
background: '#eef1f6',
|
||||
color: '#606266',
|
||||
height: '56px',
|
||||
}"
|
||||
border
|
||||
v-loading="dataListLoading"
|
||||
style="width: 100%;"
|
||||
>
|
||||
<el-table-column
|
||||
fixed="left"
|
||||
type="index"
|
||||
header-align="center"
|
||||
align="center"
|
||||
label="序号"
|
||||
width="50"
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="21">
|
||||
<div id="containerChart"></div>
|
||||
<div v-if="editDrawer" class="edit-main">
|
||||
<div class="edit-main-title">
|
||||
<h3>{{ editTitle }}</h3>
|
||||
<i class="el-icon-close" @click="closeEditForm"></i>
|
||||
</div>
|
||||
<div v-if="editTitle === '编辑节点'" class="form-main">
|
||||
<el-form ref="nodeForm" :model="form" label-width="80px">
|
||||
<el-form-item label="节点文本">
|
||||
<el-input
|
||||
v-model="form.labelText"
|
||||
size="small"
|
||||
@input="changeNode('labelText', form.labelText)"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="字体大小">
|
||||
<el-input
|
||||
v-model="form.fontSize"
|
||||
size="small"
|
||||
@input="changeNode('fontSize', form.fontSize)"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="字体颜色">
|
||||
<el-color-picker
|
||||
v-model="form.fontFill"
|
||||
@change="changeNode('fontFill', form.fontFill)"
|
||||
></el-color-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="节点背景">
|
||||
<el-color-picker
|
||||
v-model="form.fill"
|
||||
@change="changeNode('fill', form.fill)"
|
||||
></el-color-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="边框颜色">
|
||||
<el-color-picker
|
||||
v-model="form.stroke"
|
||||
@change="changeNode('stroke', form.stroke)"
|
||||
></el-color-picker>
|
||||
</el-form-item>
|
||||
<div class="see-box">
|
||||
<h5>预览</h5>
|
||||
<div
|
||||
class="see-item"
|
||||
:style="{
|
||||
background: form.fill,
|
||||
color: form.fontFill,
|
||||
'border-color': form.stroke,
|
||||
'font-size': form.fontSize + 'px',
|
||||
}"
|
||||
>
|
||||
{{ form.labelText }}
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
<div v-if="editTitle === '编辑连线'" class="form-main">
|
||||
<el-form ref="edgeForm" :model="form" label-width="80px">
|
||||
<el-form-item label="标签内容">
|
||||
<el-input
|
||||
v-model="form.label"
|
||||
size="small"
|
||||
placeholder="标签文字，空则没有"
|
||||
@input="
|
||||
changeEdgeLabel(form.label, labelForm.fontColor, labelForm.fill, labelForm.stroke)
|
||||
"
|
||||
></el-input>
|
||||
<div v-if="form.label" class="label-style">
|
||||
<p>
|
||||
字体颜色：<el-color-picker
|
||||
v-model="labelForm.fontColor"
|
||||
size="mini"
|
||||
@change="
|
||||
changeEdgeLabel(
|
||||
form.label,
|
||||
labelForm.fontColor,
|
||||
labelForm.fill,
|
||||
labelForm.stroke
|
||||
)
|
||||
"
|
||||
></el-color-picker>
|
||||
</p>
|
||||
<p>
|
||||
背景颜色：<el-color-picker
|
||||
v-model="labelForm.fill"
|
||||
size="mini"
|
||||
@change="
|
||||
changeEdgeLabel(
|
||||
form.label,
|
||||
labelForm.fontColor,
|
||||
labelForm.fill,
|
||||
labelForm.stroke
|
||||
)
|
||||
"
|
||||
></el-color-picker>
|
||||
</p>
|
||||
<p>
|
||||
描边颜色：<el-color-picker
|
||||
v-model="labelForm.stroke"
|
||||
size="mini"
|
||||
@change="
|
||||
changeEdgeLabel(
|
||||
form.label,
|
||||
labelForm.fontColor,
|
||||
labelForm.fill,
|
||||
labelForm.stroke
|
||||
)
|
||||
"
|
||||
></el-color-picker>
|
||||
</p>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="线条颜色">
|
||||
<el-color-picker
|
||||
v-model="form.stroke"
|
||||
size="small"
|
||||
@change="changeEdgeStroke"
|
||||
></el-color-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="线条样式">
|
||||
<el-select
|
||||
v-model="form.connector"
|
||||
size="small"
|
||||
placeholder="请选择"
|
||||
@change="changeEdgeConnector"
|
||||
>
|
||||
<el-option label="直角" value="normal"></el-option>
|
||||
<el-option label="圆角" value="rounded"></el-option>
|
||||
<el-option label="平滑" value="smooth"></el-option>
|
||||
<el-option label="跳线(两线交叉)" value="jumpover"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="线条宽度">
|
||||
<el-input-number
|
||||
v-model="form.strokeWidth"
|
||||
size="small"
|
||||
@change="changeEdgeStrokeWidth"
|
||||
:min="2"
|
||||
:step="2"
|
||||
:max="6"
|
||||
label="线条宽度"
|
||||
></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="双向箭头">
|
||||
<el-switch v-model="form.isArrows" @change="changeEdgeArrows"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="流动线条">
|
||||
<el-switch v-model="form.isAnit" @change="changeEdgeAnit"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="调整线条">
|
||||
<el-switch v-model="form.isTools" @change="changeEdgeTools"></el-switch>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="edit-btn">
|
||||
<el-button type="danger" @click="handlerDel" style="width:100%"
|
||||
>删除此{{ editTitle === "编辑节点" ? "节点" : "连线" }}</el-button
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="名称" fixed="left"> </el-table-column>
|
||||
<el-table-column prop="code" label="编码" fixed="left"> </el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
<el-col :span="13" :offset="1">
|
||||
<el-tabs @tab-click="tabClick">
|
||||
<el-tab-pane label="图形模式">
|
||||
<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-row>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import processFlowGraph from "./components/processFlow-graph";
|
||||
import twoStep from "./components/productList-two";
|
||||
|
||||
import { Graph, Shape, FunctionExt } from "@antv/x6";
|
||||
import { startDragToGraph, ports, configEdgeLabel } from "../spc-basic/components/flowMethods.js";
|
||||
export default {
|
||||
props: {
|
||||
productId: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dataListLoading: false,
|
||||
dataList: [],
|
||||
flowDataList: [],
|
||||
graphVisible: true,
|
||||
twoStepVisible: false,
|
||||
dataForm: {
|
||||
paramKey: "",
|
||||
processArr: [],
|
||||
processId: "",
|
||||
graph: "",
|
||||
type: "grid",
|
||||
selectCell: "",
|
||||
editDrawer: false,
|
||||
editTitle: "",
|
||||
form: {},
|
||||
labelForm: {
|
||||
fontColor: "#333",
|
||||
fill: "#FFF",
|
||||
stroke: "#555",
|
||||
},
|
||||
connectEdgeType: {
|
||||
//连线方式
|
||||
connector: "normal",
|
||||
router: {
|
||||
name: "",
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
// 网格设置
|
||||
size: 20, // 网格大小 10px
|
||||
visible: true, // 渲染网格背景
|
||||
type: "mesh",
|
||||
args: {
|
||||
color: "#D0D0D0",
|
||||
thickness: 1, // 网格线宽度/网格点大小
|
||||
factor: 10,
|
||||
},
|
||||
},
|
||||
productId: "",
|
||||
paneName: "图形模式",
|
||||
};
|
||||
},
|
||||
components: {
|
||||
processFlowGraph,
|
||||
twoStep,
|
||||
activated() {
|
||||
this.init();
|
||||
},
|
||||
created() {
|
||||
this.getDataList();
|
||||
this.productId = ''
|
||||
watch: {
|
||||
value: {
|
||||
handler: function() {
|
||||
if (this.graph) {
|
||||
this.selectCell = "";
|
||||
this.editDrawer = false;
|
||||
this.graph.dispose();
|
||||
this.init();
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
getDataList() {
|
||||
this.dataListLoading = true;
|
||||
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('cell:click', ({ cell }) => {
|
||||
this.editForm(cell)
|
||||
})
|
||||
},
|
||||
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/product/page", {
|
||||
.get("/basic/workingProcedure/page", {
|
||||
params: {
|
||||
page: 1,
|
||||
limit: 500,
|
||||
code: this.dataForm.paramKey,
|
||||
name: this.dataForm.paramKey,
|
||||
},
|
||||
})
|
||||
.then(({ data: res }) => {
|
||||
this.dataListLoading = false;
|
||||
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.list;
|
||||
this.dataList = res.data;
|
||||
this.setNode();
|
||||
})
|
||||
.catch(() => {
|
||||
this.dataListLoading = false;
|
||||
});
|
||||
.catch(() => {});
|
||||
},
|
||||
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) {
|
||||
if (val) {
|
||||
this.productId = val.id;
|
||||
const obj = {
|
||||
label: this.paneName,
|
||||
setNode() {
|
||||
let nodes = [];
|
||||
this.dataList.forEach((item) => {
|
||||
let obj = {};
|
||||
obj.x = item.x;
|
||||
obj.y = item.y;
|
||||
obj.width = 100;
|
||||
obj.height = 60;
|
||||
obj.label= '圆角矩形',
|
||||
obj.data= {
|
||||
type: 'defaultYSquare'
|
||||
},
|
||||
obj.shape= 'rect',
|
||||
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",
|
||||
},
|
||||
};
|
||||
this.tabClick(obj);
|
||||
}
|
||||
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(() => {});
|
||||
},
|
||||
//编辑节点和线
|
||||
editForm(cell){
|
||||
if(this.selectCell) this.selectCell.removeTools() // 删除修改线的工具
|
||||
this.selectCell = cell
|
||||
// 编辑node节点
|
||||
console.log(cell.data)
|
||||
if(cell.isNode() && cell.data.type && cell.data.type.includes('default')){
|
||||
this.editTitle = '编辑节点'
|
||||
const body = cell.attrs.body || cell.attrs.rect || cell.attrs.polygon || cell.attrs.circle
|
||||
this.form = {
|
||||
labelText: cell.attrs.label.text || '',
|
||||
fontSize: cell.attrs.label.fontSize || 14,
|
||||
fontFill: cell.attrs.label.fill || '',
|
||||
fill: body.fill|| '',
|
||||
stroke: body.stroke || ''
|
||||
}
|
||||
return this.editDrawer = true
|
||||
}
|
||||
// 编辑线
|
||||
if(!cell.isNode() && cell.shape === 'edge'){
|
||||
this.editTitle = '编辑连线'
|
||||
this.form = {
|
||||
label: (cell.labels && cell.labels[0]) ? cell.labels[0].attrs.labelText.text : '',
|
||||
stroke: cell.attrs.line.stroke || '',
|
||||
connector: 'rounded',
|
||||
strokeWidth: cell.attrs.line.strokeWidth || '',
|
||||
isArrows: cell.attrs.line.sourceMarker ? true : false,
|
||||
isAnit: cell.attrs.line.strokeDasharray ? true : false,
|
||||
isTools: false
|
||||
}
|
||||
// 看是否有label
|
||||
const edgeCellLabel = cell.labels && cell.labels[0] && cell.labels[0].attrs || false
|
||||
if(this.form.label && edgeCellLabel){
|
||||
this.labelForm = {
|
||||
fontColor: edgeCellLabel.labelText.fill || '#333',
|
||||
fill: edgeCellLabel.labelBody.fill || '#fff',
|
||||
stroke: edgeCellLabel.labelBody.stroke || '#555'
|
||||
}
|
||||
} else {
|
||||
this.labelForm = { fontColor: '#333', fill: '#FFF', stroke: '#555' }
|
||||
}
|
||||
return this.editDrawer = true
|
||||
}
|
||||
},
|
||||
closeEditForm(){
|
||||
this.editDrawer = false
|
||||
if(this.selectCell) this.selectCell.removeTools()
|
||||
},
|
||||
// 修改一般节点
|
||||
changeNode(type, value){
|
||||
switch (type) {
|
||||
case 'labelText':
|
||||
this.selectCell.attr('label/text', value)
|
||||
break;
|
||||
case 'fontSize':
|
||||
this.selectCell.attr('label/fontSize', value)
|
||||
break;
|
||||
case 'fontFill':
|
||||
this.selectCell.attr('label/fill', value)
|
||||
break;
|
||||
case 'fill':
|
||||
this.selectCell.attr('body/fill', value)
|
||||
break;
|
||||
case 'stroke':
|
||||
this.selectCell.attr('body/stroke', value)
|
||||
break;
|
||||
}
|
||||
},
|
||||
// 修改边label属性
|
||||
changeEdgeLabel(label, fontColor, fill, stroke){
|
||||
this.selectCell.setLabels([configEdgeLabel(label, fontColor, fill, stroke)])
|
||||
if(!label) this.labelForm = { fontColor: '#333', fill: '#FFF', stroke: '#555' }
|
||||
},
|
||||
// 修改边的颜色
|
||||
changeEdgeStroke(val){
|
||||
this.selectCell.attr('line/stroke', val)
|
||||
},
|
||||
// 边的样式
|
||||
changeEdgeConnector(val){
|
||||
switch (val) {
|
||||
case 'normal':
|
||||
this.selectCell.setConnector(val)
|
||||
break;
|
||||
case 'smooth':
|
||||
this.selectCell.setConnector(val)
|
||||
break;
|
||||
case 'rounded':
|
||||
this.selectCell.setConnector(val, { radius: 20 })
|
||||
break;
|
||||
case 'jumpover':
|
||||
this.selectCell.setConnector(val, { radius: 20 })
|
||||
break;
|
||||
}
|
||||
},
|
||||
// 边的宽度
|
||||
changeEdgeStrokeWidth(val){
|
||||
if(this.form.isArrows){
|
||||
this.selectCell.attr({
|
||||
line: {
|
||||
strokeWidth: val,
|
||||
sourceMarker: {
|
||||
width: 12 * (val / 2) || 12,
|
||||
height: 8 * (val / 2) || 8
|
||||
},
|
||||
targetMarker: {
|
||||
width: 12 * (val / 2) || 12,
|
||||
height: 8 * (val / 2) || 8
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
} else {
|
||||
this.selectCell.attr({
|
||||
line: {
|
||||
strokeWidth: val,
|
||||
targetMarker: {
|
||||
width: 12 * (val / 2) || 12,
|
||||
height: 8 * (val / 2) || 8
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
// 边的箭头
|
||||
changeEdgeArrows(val){
|
||||
if(val){
|
||||
this.selectCell.attr({
|
||||
line: {
|
||||
sourceMarker: {
|
||||
name: 'block',
|
||||
width: 12 * (this.form.strokeWidth / 2) || 12,
|
||||
height: 8 * (this.form.strokeWidth / 2) || 8
|
||||
},
|
||||
targetMarker: {
|
||||
name: 'block',
|
||||
width: 12 * (this.form.strokeWidth / 2) || 12,
|
||||
height: 8 * (this.form.strokeWidth / 2) || 8
|
||||
},
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.selectCell.attr({
|
||||
line: {
|
||||
sourceMarker: '',
|
||||
targetMarker: {
|
||||
name: 'block',
|
||||
size: 10 * (this.form.strokeWidth / 2) || 10
|
||||
},
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
// 边的添加蚂蚁线
|
||||
changeEdgeAnit(val){
|
||||
if(val){
|
||||
this.selectCell.attr({
|
||||
line: {
|
||||
strokeDasharray: 5,
|
||||
style: {
|
||||
animation: 'ant-line 30s infinite linear',
|
||||
}
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.selectCell.attr({
|
||||
line: {
|
||||
strokeDasharray: 0,
|
||||
style: {
|
||||
animation: '',
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
// 给线添加调节工具
|
||||
changeEdgeTools(val){
|
||||
if(val) this.selectCell.addTools(['vertices', 'segments'])
|
||||
else this.selectCell.removeTools()
|
||||
},
|
||||
// 删除节点
|
||||
handlerDel(){
|
||||
this.$confirm(`此操作将永久删除此${this.editTitle === '编辑节点' ? '节点' : '连线'}, 是否继续?`, '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
const cells = this.graph.getSelectedCells()
|
||||
if (cells.length) {
|
||||
this.graph.removeCells(cells)
|
||||
this.form = {}
|
||||
this.editDrawer = false
|
||||
this.$message({type: 'success',message: '删除成功!'})
|
||||
}
|
||||
}).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();
|
||||
},
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.graph.dispose();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@keyframes ant-line {
|
||||
to {
|
||||
stroke-dashoffset: -1000
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.btn {
|
||||
background-color: #5bdeff;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
color: white;
|
||||
cursor: move;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped="scoped">
|
||||
.edit-main{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 280px;
|
||||
border-left: 1px solid #f2f2f2;
|
||||
box-shadow: 0 -10px 10px rgba($color: #000000, $alpha: 0.3);
|
||||
padding: 20px;
|
||||
background: #fff;
|
||||
box-sizing: border-box;
|
||||
.edit-main-title{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
h3{
|
||||
flex: 1;
|
||||
}
|
||||
i{
|
||||
cursor: pointer;
|
||||
font-size: 20px;
|
||||
opacity: 0.7;
|
||||
&:hover{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-main{
|
||||
padding: 20px 0;
|
||||
.label-style{
|
||||
background: #f2f2f2;
|
||||
padding: 0 10px;
|
||||
p{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.edit-btn{
|
||||
}
|
||||
.see-box{
|
||||
padding: 20px;
|
||||
background: #f2f2f2;
|
||||
h5{
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.see-item{
|
||||
padding: 10px 30px;
|
||||
border: 2px solid #333;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,36 +1,12 @@
|
||||
<template>
|
||||
<el-card shadow="never" class="aui-card--fill">
|
||||
<el-form
|
||||
style="display: flex; align-items: center; justify-content: right;"
|
||||
:inline="true"
|
||||
:model="dataForm"
|
||||
@keyup.enter.native="getDataList()"
|
||||
>
|
||||
<el-form-item>
|
||||
<el-input
|
||||
size="small"
|
||||
v-model="dataForm.paramKey"
|
||||
clearable
|
||||
placeholder="请输入关键字查询"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button size="small" @click="getDataList()">
|
||||
<svg class="icon-svg"><use xlink:href="#icon-sousuo"></use></svg>
|
||||
查询
|
||||
</el-button>
|
||||
<el-button size="small" type="primary" @click="addOrUpdateHandle()">
|
||||
<svg class="icon-svg"><use xlink:href="#icon-新建"></use></svg>
|
||||
新增
|
||||
</el-button>
|
||||
<el-button size="small" type="primary" @click="exportHandle('工序类型')">
|
||||
<svg class="icon-svg">
|
||||
<use xlink:href="#导出"></use>
|
||||
</svg>
|
||||
导出
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<query-form
|
||||
:page-name="'工序类型'"
|
||||
:data-form="dataForm"
|
||||
@getDataList="getDataList"
|
||||
@addOrUpdateHandle="addOrUpdateHandle"
|
||||
@exportHandle="exportHandle"
|
||||
/>
|
||||
<el-table
|
||||
:data="dataList"
|
||||
:stripe="true"
|
||||
@@ -50,8 +26,8 @@
|
||||
width="50"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="名称"> </el-table-column>
|
||||
<el-table-column prop="code" label="编码"> </el-table-column>
|
||||
<el-table-column prop="name" align="center" label="名称"> </el-table-column>
|
||||
<el-table-column prop="code" align="center" label="编码"> </el-table-column>
|
||||
<el-table-column
|
||||
type="status"
|
||||
header-align="center"
|
||||
@@ -133,6 +109,7 @@
|
||||
<script>
|
||||
import AddOrUpdate from './components/processType-add'
|
||||
import basicPage from '@/mixins/basic-page'
|
||||
import queryForm from './query-form'
|
||||
export default {
|
||||
mixins: [basicPage],
|
||||
data() {
|
||||
@@ -147,6 +124,7 @@ export default {
|
||||
},
|
||||
components: {
|
||||
AddOrUpdate,
|
||||
queryForm,
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
|
||||
@@ -7,20 +7,50 @@
|
||||
@keyup.enter.native="getDataList()"
|
||||
>
|
||||
<el-form-item>
|
||||
<el-input
|
||||
<el-input size="small" v-model="dataForm.name" clearable placeholder="请输入名称查询" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input size="small" v-model="dataForm.code" clearable placeholder="请输入编码查询" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-select
|
||||
size="small"
|
||||
v-model="dataForm.paramKey"
|
||||
v-model="dataForm.product_type_id"
|
||||
placeholder="请选择产品类型"
|
||||
style="width:150px"
|
||||
clearable
|
||||
placeholder="请输入关键字查询"
|
||||
/>
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in productTypeArr"
|
||||
:key="index"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-select
|
||||
size="small"
|
||||
v-model="dataForm.inspection_stage"
|
||||
placeholder="请选择检验阶段"
|
||||
style="width:150px"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in inspectionStageOptions"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button size="small" @click="getDataList()">
|
||||
<svg class="icon-svg"><use xlink:href="#icon-sousuo"></use></svg>
|
||||
<svg class="icon-svg"><use xlink:href="#icon-sousuo"></use></svg>
|
||||
查询
|
||||
</el-button>
|
||||
<el-button size="small" type="primary" @click="addOrUpdateHandle()">
|
||||
<svg class="icon-svg"><use xlink:href="#icon-新建"></use></svg>
|
||||
<svg class="icon-svg"><use xlink:href="#icon-新建"></use></svg>
|
||||
新增
|
||||
</el-button>
|
||||
<el-button size="small" type="primary" @click="exportHandle('产品列表')">
|
||||
@@ -37,7 +67,7 @@
|
||||
:header-cell-style="{
|
||||
background: '#eef1f6',
|
||||
color: '#606266',
|
||||
height: '56px'
|
||||
height: '56px',
|
||||
}"
|
||||
v-loading="dataListLoading"
|
||||
style="width: 100%;"
|
||||
@@ -51,33 +81,27 @@
|
||||
width="50"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="名称" fixed="left"> </el-table-column>
|
||||
<el-table-column prop="code" label="编码" fixed="left"> </el-table-column>
|
||||
<el-table-column prop="specifications" label="规格"> </el-table-column>
|
||||
<el-table-column prop="drawing" label="图纸"> </el-table-column>
|
||||
<el-table-column prop="productType" label="产品类型"> </el-table-column>
|
||||
<el-table-column prop="descs" label="描述"> </el-table-column>
|
||||
<el-table-column prop="remark" label="备注"> </el-table-column>
|
||||
<el-table-column prop="inspectionStandard" label="检验标准"> </el-table-column>
|
||||
<el-table-column prop="inspectionStage" label="检验阶段">
|
||||
<el-table-column prop="name" align="center" label="名称" fixed="left"> </el-table-column>
|
||||
<el-table-column prop="code" align="center" label="编码" fixed="left"> </el-table-column>
|
||||
<el-table-column prop="specifications" align="center" label="规格"> </el-table-column>
|
||||
<el-table-column prop="drawing" align="center" label="图纸"> </el-table-column>
|
||||
<el-table-column prop="productType" align="center" label="产品类型"> </el-table-column>
|
||||
<el-table-column prop="descs" align="center" label="描述"> </el-table-column>
|
||||
<el-table-column prop="remark" align="center" label="备注"> </el-table-column>
|
||||
<el-table-column prop="inspectionStandard" align="center" label="检验标准"> </el-table-column>
|
||||
<el-table-column prop="inspectionStage" align="center" label="检验阶段">
|
||||
<template slot-scope="scope">
|
||||
<div style="pointer-events: none;">
|
||||
<el-checkbox-group :value ="scope.row.inspectionStage.split(',')">
|
||||
<el-checkbox label="1">进货检验</el-checkbox>
|
||||
<el-checkbox label="2">过程检验</el-checkbox>
|
||||
<el-checkbox label="3">成品检验</el-checkbox>
|
||||
<el-checkbox label="4">出货检验</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
<el-checkbox-group :value="scope.row.inspectionStage.split(',')">
|
||||
<el-checkbox label="1">进货检验</el-checkbox>
|
||||
<el-checkbox label="2">过程检验</el-checkbox>
|
||||
<el-checkbox label="3">成品检验</el-checkbox>
|
||||
<el-checkbox label="4">出货检验</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
type="status"
|
||||
header-align="center"
|
||||
align="center"
|
||||
label="状态"
|
||||
width="80"
|
||||
>
|
||||
<el-table-column type="status" header-align="center" align="center" label="状态" width="80">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="scope.row.status === 0 ? 'danger' : 'success'">{{
|
||||
scope.row.status === 0 ? "不可用" : "可用"
|
||||
@@ -110,26 +134,11 @@
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
<el-table-column
|
||||
fixed="right"
|
||||
header-align="center"
|
||||
align="center"
|
||||
width="150"
|
||||
label="操作"
|
||||
>
|
||||
<el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="text"
|
||||
size="small"
|
||||
@click="addOrUpdateHandle(scope.row.id)"
|
||||
>
|
||||
<el-tooltip
|
||||
class="item"
|
||||
effect="dark"
|
||||
content="修改"
|
||||
placement="top"
|
||||
>
|
||||
<svg class="icon-svg aui-sidebar__menu-icon"><use xlink:href="#icon-编辑"></use></svg>
|
||||
<el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">
|
||||
<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-popover placement="top" width="160" trigger="click" :ref="`popover-${scope.row.id}`">
|
||||
@@ -181,24 +190,63 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AddOrUpdate from './components/productList-add'
|
||||
import basicPage from '@/mixins/basic-page'
|
||||
import AddOrUpdate from "./components/productList-add";
|
||||
import basicPage from "@/mixins/basic-page";
|
||||
export default {
|
||||
mixins: [basicPage],
|
||||
data() {
|
||||
return {
|
||||
urlOptions: {
|
||||
getDataListURL: '/basic/product/page',
|
||||
deleteURL: '/basic/product/delete',
|
||||
statusUrl: '/basic/product/status',
|
||||
exportUrl: '/basic/product/export'
|
||||
getDataListURL: "/basic/product/page",
|
||||
deleteURL: "/basic/product/delete",
|
||||
statusUrl: "/basic/product/status",
|
||||
exportUrl: "/basic/product/export",
|
||||
},
|
||||
productTypeArr: [],
|
||||
inspectionStageOptions: [
|
||||
{
|
||||
label: "进货检验",
|
||||
value: "1",
|
||||
},
|
||||
{
|
||||
label: "过程检验",
|
||||
value: "2",
|
||||
},
|
||||
{
|
||||
label: "成品检验",
|
||||
value: "3",
|
||||
},
|
||||
{
|
||||
label: "出货检验",
|
||||
value: "4",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
components: {
|
||||
AddOrUpdate,
|
||||
},
|
||||
created() {
|
||||
this.getArr();
|
||||
},
|
||||
methods: {
|
||||
getArr() {
|
||||
this.$http
|
||||
.get("/basic/productType/page", {
|
||||
params: {
|
||||
page: 1,
|
||||
limit: 500,
|
||||
},
|
||||
})
|
||||
.then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
this.productTypeArr = [];
|
||||
return this.$message.error(res.msg);
|
||||
}
|
||||
this.productTypeArr = res.data.list;
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@@ -1,36 +1,12 @@
|
||||
<template>
|
||||
<el-card shadow="never" class="aui-card--fill">
|
||||
<el-form
|
||||
style="display: flex; align-items: center; justify-content: right;"
|
||||
:inline="true"
|
||||
:model="dataForm"
|
||||
@keyup.enter.native="getDataList()"
|
||||
>
|
||||
<el-form-item>
|
||||
<el-input
|
||||
size="small"
|
||||
v-model="dataForm.paramKey"
|
||||
clearable
|
||||
placeholder="请输入关键字查询"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button size="small" @click="getDataList()">
|
||||
<svg class="icon-svg"><use xlink:href="#icon-sousuo"></use></svg>
|
||||
查询
|
||||
</el-button>
|
||||
<el-button size="small" type="primary" @click="addOrUpdateHandle()">
|
||||
<svg class="icon-svg"><use xlink:href="#icon-新建"></use></svg>
|
||||
新增
|
||||
</el-button>
|
||||
<el-button size="small" type="primary" @click="exportHandle('产品类型')">
|
||||
<svg class="icon-svg">
|
||||
<use xlink:href="#导出"></use>
|
||||
</svg>
|
||||
导出
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<query-form
|
||||
:page-name="'产品类型'"
|
||||
:data-form="dataForm"
|
||||
@getDataList="getDataList"
|
||||
@addOrUpdateHandle="addOrUpdateHandle"
|
||||
@exportHandle="exportHandle"
|
||||
/>
|
||||
<el-table
|
||||
:data="dataList"
|
||||
:stripe="true"
|
||||
@@ -44,9 +20,9 @@
|
||||
>
|
||||
<el-table-column type="index" header-align="center" align="center" label="序号" width="50">
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="名称"> </el-table-column>
|
||||
<el-table-column prop="code" label="编码"> </el-table-column>
|
||||
<el-table-column prop="descs" label="描述"> </el-table-column>
|
||||
<el-table-column prop="name" align="center" label="名称"> </el-table-column>
|
||||
<el-table-column prop="code" align="center" label="编码"> </el-table-column>
|
||||
<el-table-column prop="descs" align="center" label="描述"> </el-table-column>
|
||||
<el-table-column type="status" header-align="center" align="center" label="状态" width="80">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="scope.row.status === 0 ? 'danger' : 'success'">{{
|
||||
@@ -112,6 +88,7 @@
|
||||
<script>
|
||||
import AddOrUpdate from "./components/productType-add";
|
||||
import basicPage from '@/mixins/basic-page'
|
||||
import queryForm from './query-form'
|
||||
export default {
|
||||
mixins: [basicPage],
|
||||
data() {
|
||||
@@ -126,6 +103,7 @@ export default {
|
||||
},
|
||||
components: {
|
||||
AddOrUpdate,
|
||||
queryForm,
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
|
||||
73
src/views/spc-basic/query-form.vue
Normal file
73
src/views/spc-basic/query-form.vue
Normal file
@@ -0,0 +1,73 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2022-09-15 10:44:29
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2022-09-16 13:52:21
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<el-form
|
||||
style="display: flex; align-items: center; justify-content: right;"
|
||||
:inline="true"
|
||||
:model="dataForm"
|
||||
@keyup.enter.native="getDataList()"
|
||||
>
|
||||
<el-form-item>
|
||||
<el-input size="small" v-model="dataForm.name" clearable placeholder="请输入名称查询" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input size="small" v-model="dataForm.code" clearable placeholder="请输入编码查询" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button size="small" @click="getDataList()">
|
||||
<svg class="icon-svg"><use xlink:href="#icon-sousuo"></use></svg>
|
||||
查询
|
||||
</el-button>
|
||||
<el-button size="small" type="primary" @click="addOrUpdateHandle()">
|
||||
<svg class="icon-svg"><use xlink:href="#icon-新建"></use></svg>
|
||||
新增
|
||||
</el-button>
|
||||
<el-button size="small" type="primary" @click="exportHandle()">
|
||||
<svg class="icon-svg">
|
||||
<use xlink:href="#导出"></use>
|
||||
</svg>
|
||||
导出
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
pageName: {
|
||||
type: String,
|
||||
default: () => {
|
||||
return "";
|
||||
},
|
||||
},
|
||||
dataForm: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getDataList() {
|
||||
this.$emit("getDataList");
|
||||
},
|
||||
addOrUpdateHandle() {
|
||||
this.$emit("addOrUpdateHandle");
|
||||
},
|
||||
exportHandle() {
|
||||
this.$emit("exportHandle", this.pageName);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@@ -1,36 +1,12 @@
|
||||
<template>
|
||||
<el-card shadow="never" class="aui-card--fill">
|
||||
<el-form
|
||||
style="display: flex; align-items: center; justify-content: right;"
|
||||
:inline="true"
|
||||
:model="dataForm"
|
||||
@keyup.enter.native="getDataList()"
|
||||
>
|
||||
<el-form-item>
|
||||
<el-input
|
||||
size="small"
|
||||
v-model="dataForm.paramKey"
|
||||
clearable
|
||||
placeholder="请输入关键字查询"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button size="small" @click="getDataList()">
|
||||
<svg class="icon-svg"><use xlink:href="#icon-sousuo"></use></svg>
|
||||
查询
|
||||
</el-button>
|
||||
<el-button size="small" type="primary" @click="addOrUpdateHandle()">
|
||||
<svg class="icon-svg"><use xlink:href="#icon-新建"></use></svg>
|
||||
新增
|
||||
</el-button>
|
||||
<el-button size="small" type="primary" @click="exportHandle('站点管理')">
|
||||
<svg class="icon-svg">
|
||||
<use xlink:href="#导出"></use>
|
||||
</svg>
|
||||
导出
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<query-form
|
||||
:page-name="'站点管理'"
|
||||
:data-form="dataForm"
|
||||
@getDataList="getDataList"
|
||||
@addOrUpdateHandle="addOrUpdateHandle"
|
||||
@exportHandle="exportHandle"
|
||||
/>
|
||||
<el-table
|
||||
:data="dataList"
|
||||
:stripe="true"
|
||||
@@ -50,9 +26,9 @@
|
||||
width="50"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="名称"> </el-table-column>
|
||||
<el-table-column prop="code" label="编码"> </el-table-column>
|
||||
<el-table-column prop="platformGroup" label="站点分组"> </el-table-column>
|
||||
<el-table-column prop="name" align="center" label="名称"> </el-table-column>
|
||||
<el-table-column prop="code" align="center" label="编码"> </el-table-column>
|
||||
<el-table-column prop="platformGroup" align="center" label="站点分组"> </el-table-column>
|
||||
<el-table-column
|
||||
type="status"
|
||||
header-align="center"
|
||||
@@ -139,6 +115,7 @@
|
||||
<script>
|
||||
import AddOrUpdate from './components/siteManage-add'
|
||||
import basicPage from '@/mixins/basic-page'
|
||||
import queryForm from './query-form'
|
||||
export default {
|
||||
mixins: [basicPage],
|
||||
data() {
|
||||
@@ -153,6 +130,7 @@ export default {
|
||||
},
|
||||
components: {
|
||||
AddOrUpdate,
|
||||
queryForm,
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
|
||||
@@ -1,36 +1,12 @@
|
||||
<template>
|
||||
<el-card shadow="never" class="aui-card--fill">
|
||||
<el-form
|
||||
style="display: flex; align-items: center; justify-content: right;"
|
||||
:inline="true"
|
||||
:model="dataForm"
|
||||
@keyup.enter.native="getDataList()"
|
||||
>
|
||||
<el-form-item>
|
||||
<el-input
|
||||
size="small"
|
||||
v-model="dataForm.paramKey"
|
||||
clearable
|
||||
placeholder="请输入关键字查询"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button size="small" @click="getDataList()">
|
||||
<svg class="icon-svg"><use xlink:href="#icon-sousuo"></use></svg>
|
||||
查询
|
||||
</el-button>
|
||||
<el-button size="small" type="primary" @click="addOrUpdateHandle()">
|
||||
<svg class="icon-svg"><use xlink:href="#icon-新建"></use></svg>
|
||||
新增
|
||||
</el-button>
|
||||
<el-button size="small" type="primary" @click="exportHandle('量具管理')">
|
||||
<svg class="icon-svg">
|
||||
<use xlink:href="#导出"></use>
|
||||
</svg>
|
||||
导出
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<query-form
|
||||
:page-name="'量具管理'"
|
||||
:data-form="dataForm"
|
||||
@getDataList="getDataList"
|
||||
@addOrUpdateHandle="addOrUpdateHandle"
|
||||
@exportHandle="exportHandle"
|
||||
/>
|
||||
<el-table
|
||||
:data="dataList"
|
||||
:stripe="true"
|
||||
@@ -50,9 +26,9 @@
|
||||
width="50"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="名称"> </el-table-column>
|
||||
<el-table-column prop="code" label="编码"> </el-table-column>
|
||||
<el-table-column prop="type" label="测量类型">
|
||||
<el-table-column prop="name" align="center" label="名称"> </el-table-column>
|
||||
<el-table-column prop="code" align="center" label="编码"> </el-table-column>
|
||||
<el-table-column prop="type" align="center" label="测量类型">
|
||||
<template slot-scope="scope">
|
||||
<span>{{
|
||||
scope.row.type === '2' ? "计数" : "计量"
|
||||
@@ -167,6 +143,7 @@
|
||||
import AddOrUpdate from './components/toolsType-add'
|
||||
import Detail from './components/toolsType-detail'
|
||||
import basicPage from '@/mixins/basic-page'
|
||||
import queryForm from './query-form'
|
||||
export default {
|
||||
mixins: [basicPage],
|
||||
data() {
|
||||
@@ -182,6 +159,7 @@ export default {
|
||||
},
|
||||
components: {
|
||||
AddOrUpdate,
|
||||
queryForm,
|
||||
Detail
|
||||
},
|
||||
methods: {
|
||||
|
||||
@@ -1,36 +1,12 @@
|
||||
<template>
|
||||
<el-card shadow="never" class="aui-card--fill">
|
||||
<el-form
|
||||
style="display: flex; align-items: center; justify-content: right;"
|
||||
:inline="true"
|
||||
:model="dataForm"
|
||||
@keyup.enter.native="getDataList()"
|
||||
>
|
||||
<el-form-item>
|
||||
<el-input
|
||||
size="small"
|
||||
v-model="dataForm.paramKey"
|
||||
clearable
|
||||
placeholder="请输入关键字查询"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button size="small" @click="getDataList()">
|
||||
<svg class="icon-svg"><use xlink:href="#icon-sousuo"></use></svg>
|
||||
查询
|
||||
</el-button>
|
||||
<el-button size="small" type="primary" @click="addOrUpdateHandle()">
|
||||
<svg class="icon-svg"><use xlink:href="#icon-新建"></use></svg>
|
||||
新增
|
||||
</el-button>
|
||||
<el-button size="small" type="primary" @click="exportHandle('计量单位管理')">
|
||||
<svg class="icon-svg">
|
||||
<use xlink:href="#导出"></use>
|
||||
</svg>
|
||||
导出
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<query-form
|
||||
:page-name="'计量单位'"
|
||||
:data-form="dataForm"
|
||||
@getDataList="getDataList"
|
||||
@addOrUpdateHandle="addOrUpdateHandle"
|
||||
@exportHandle="exportHandle"
|
||||
/>
|
||||
<el-table
|
||||
:data="dataList"
|
||||
:stripe="true"
|
||||
@@ -50,9 +26,9 @@
|
||||
width="50"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="名称"> </el-table-column>
|
||||
<el-table-column prop="code" label="编码"> </el-table-column>
|
||||
<el-table-column prop="type" label="类型">
|
||||
<el-table-column prop="name" align="center" label="名称"> </el-table-column>
|
||||
<el-table-column prop="code" align="center" label="编码"> </el-table-column>
|
||||
<el-table-column prop="type" align="center" label="类型">
|
||||
<template slot-scope="scope">
|
||||
<span>{{
|
||||
scope.row.type === 2 ? "不可计数" : "可计数"
|
||||
@@ -144,6 +120,7 @@
|
||||
|
||||
<script>
|
||||
import AddOrUpdate from './components/unitList-add'
|
||||
import queryForm from './query-form'
|
||||
import basicPage from '@/mixins/basic-page'
|
||||
export default {
|
||||
mixins: [basicPage],
|
||||
@@ -159,6 +136,7 @@ export default {
|
||||
},
|
||||
components: {
|
||||
AddOrUpdate,
|
||||
queryForm,
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user