projects/mes-test #133
@@ -8,6 +8,50 @@
|
||||
<template>
|
||||
<section class="process-bom">
|
||||
<SearchBar :formConfigs="searchBarFormConfig" ref="search-bar" />
|
||||
|
||||
<div
|
||||
class="btns"
|
||||
style="
|
||||
text-align: right;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
display: flex;
|
||||
">
|
||||
<el-button type="primary" plain class="btn-create" icon="el-icon-plus">
|
||||
分配设备
|
||||
</el-button>
|
||||
<el-input
|
||||
icon="el-icon-search"
|
||||
placeholder="搜索"
|
||||
style="margin-left: 20px">
|
||||
<i slot="prefix" class="el-input__icon el-icon-search"></i>
|
||||
</el-input>
|
||||
</div>
|
||||
|
||||
<!-- 列表 -->
|
||||
<base-table
|
||||
:table-props="tableProps"
|
||||
:page="queryParams.pageNo"
|
||||
:limit="queryParams.pageSize"
|
||||
:table-data="list"
|
||||
@emitFun="handleEmitFun">
|
||||
<method-btn
|
||||
v-if="tableBtn.length"
|
||||
slot="handleBtn"
|
||||
label="操作"
|
||||
:width="120"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleTableBtnClick" />
|
||||
</base-table>
|
||||
|
||||
<!-- 分页组件 -->
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNo"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList" />
|
||||
</section>
|
||||
</template>
|
||||
|
||||
@@ -19,15 +63,40 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
searchBarFormConfig: [{ label: '工序下设备' }],
|
||||
tableProps: [
|
||||
// {
|
||||
// prop: 'createTime',
|
||||
// label: '添加时间',
|
||||
// fixed: true,
|
||||
// width: 180,
|
||||
// filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
|
||||
// },
|
||||
{ prop: 'name', label: '设备名称' },
|
||||
{ prop: 'code', label: '物料BOM' },
|
||||
{ prop: 'remark', label: '参数BOM' },
|
||||
],
|
||||
list: [],
|
||||
total: 0,
|
||||
tableBtn: [],
|
||||
queryParams: {
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
methods: {},
|
||||
methods: {
|
||||
handleEmitFun() {},
|
||||
handleTableBtnClick() {},
|
||||
getList() {},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.process-bom {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
padding: 12px 20px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
|
||||
@@ -9,6 +9,23 @@
|
||||
<section class="process-graph">
|
||||
<SearchBar :formConfigs="searchBarFormConfig" ref="search-bar" />
|
||||
|
||||
<div
|
||||
class="btns"
|
||||
style="text-align: right; position: absolute; top: 20px; right: 20px">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
class="btn-create"
|
||||
icon="el-icon-plus"
|
||||
@click="createDet">
|
||||
新建工序
|
||||
</el-button>
|
||||
<el-button class="btn-serialize" @click="graphToJson">序列化</el-button>
|
||||
<el-button class="btn-antiserialize" @click="jsonToGraph">
|
||||
反序列化
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<div class="process-graph__panel" ref="panel"></div>
|
||||
</section>
|
||||
</template>
|
||||
@@ -25,6 +42,7 @@ export default {
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
graph: null,
|
||||
searchBarFormConfig: [{ label: '工序列表' }],
|
||||
};
|
||||
},
|
||||
@@ -48,6 +66,8 @@ export default {
|
||||
y: 30,
|
||||
processName: '工序00A',
|
||||
workshopName: '工段1',
|
||||
processDesc: 'test test test',
|
||||
processId: '1',
|
||||
});
|
||||
const pn2 = graph.addNode({
|
||||
shape: 'process-node',
|
||||
@@ -55,6 +75,8 @@ export default {
|
||||
y: 30,
|
||||
processName: '工序00B',
|
||||
workshopName: '工段1',
|
||||
processDesc: 'test test test',
|
||||
processId: '1',
|
||||
});
|
||||
|
||||
const pn3 = graph.addNode({
|
||||
@@ -63,6 +85,8 @@ export default {
|
||||
y: 30,
|
||||
processName: '工序00C',
|
||||
workshopName: '工段1',
|
||||
processDesc: 'test test test',
|
||||
processId: '1',
|
||||
});
|
||||
|
||||
const pn4 = graph.addNode({
|
||||
@@ -71,6 +95,8 @@ export default {
|
||||
y: 120,
|
||||
processName: '工序00D',
|
||||
workshopName: '工段1',
|
||||
processDesc: 'test test test',
|
||||
processId: '1',
|
||||
});
|
||||
|
||||
const pn5 = graph.addNode({
|
||||
@@ -79,6 +105,8 @@ export default {
|
||||
y: 30,
|
||||
processName: '工序00E',
|
||||
workshopName: '工段1',
|
||||
processDesc: 'test test test',
|
||||
processId: '1',
|
||||
});
|
||||
|
||||
graph.addEdge({
|
||||
@@ -156,9 +184,19 @@ export default {
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
this.graph = graph;
|
||||
},
|
||||
computed: {},
|
||||
methods: {},
|
||||
methods: {
|
||||
createDet() {},
|
||||
jsonToGraph() {},
|
||||
graphToJson() {
|
||||
if (this.graph) {
|
||||
console.log(JSON.stringify(this.graph.toJSON(), null, 2));
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -167,6 +205,7 @@ export default {
|
||||
padding: 12px 20px 20px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.process-graph__panel {
|
||||
|
||||
@@ -42,23 +42,27 @@ ProcessNode.config({
|
||||
},
|
||||
{
|
||||
tagName: 'text',
|
||||
textContent: '工序名称',
|
||||
selector: 'processName',
|
||||
attrs: {
|
||||
x: 20,
|
||||
y: 30,
|
||||
// fill: '#777',
|
||||
// fontSize: 14
|
||||
},
|
||||
},
|
||||
{
|
||||
tagName: 'text',
|
||||
textContent: '工段名称',
|
||||
selector: 'workshopName',
|
||||
attrs: {
|
||||
x: 115,
|
||||
y: 30,
|
||||
// fill: '#777',
|
||||
// fontSize: 14
|
||||
},
|
||||
},
|
||||
{
|
||||
tagName: 'text',
|
||||
selector: 'processName',
|
||||
selector: 'processDesc',
|
||||
// textContent: '工序00A',
|
||||
attrs: {
|
||||
x: 26,
|
||||
@@ -67,22 +71,49 @@ ProcessNode.config({
|
||||
fontSize: 14
|
||||
},
|
||||
},
|
||||
{
|
||||
tagName: 'text',
|
||||
selector: 'workshopName',
|
||||
// textContent: '工段1',
|
||||
attrs: {
|
||||
x: 128,
|
||||
y: 80,
|
||||
fill: '#777',
|
||||
fontSize: 14
|
||||
},
|
||||
},
|
||||
// {
|
||||
// tagName: 'text',
|
||||
// textContent: '工序名称',
|
||||
// attrs: {
|
||||
// x: 20,
|
||||
// y: 30,
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// tagName: 'text',
|
||||
// textContent: '工段名称',
|
||||
// attrs: {
|
||||
// x: 115,
|
||||
// y: 30,
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// tagName: 'text',
|
||||
// selector: 'processName',
|
||||
// // textContent: '工序00A',
|
||||
// attrs: {
|
||||
// x: 26,
|
||||
// y: 80,
|
||||
// fill: '#777',
|
||||
// fontSize: 14
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// tagName: 'text',
|
||||
// selector: 'workshopName',
|
||||
// // textContent: '工段1',
|
||||
// attrs: {
|
||||
// x: 128,
|
||||
// y: 80,
|
||||
// fill: '#777',
|
||||
// fontSize: 14
|
||||
// },
|
||||
// },
|
||||
],
|
||||
//
|
||||
propHooks(metadata) {
|
||||
const { processName, workshopName, ...others } = metadata;
|
||||
debugger;
|
||||
const { processName, workshopName, processDesc, processId, ...others } = metadata;
|
||||
// debugger;
|
||||
if (processName) {
|
||||
console.log("processName", processName)
|
||||
ObjectExt.setByPath(others, 'attrs/processName/text', processName);
|
||||
@@ -91,6 +122,14 @@ ProcessNode.config({
|
||||
console.log("workshopName", workshopName)
|
||||
ObjectExt.setByPath(others, 'attrs/workshopName/text', workshopName);
|
||||
}
|
||||
if (processDesc) {
|
||||
console.log("processDesc", processDesc)
|
||||
ObjectExt.setByPath(others, 'attrs/processDesc/text', processDesc);
|
||||
}
|
||||
if (processId) {
|
||||
console.log("processId", processId)
|
||||
ObjectExt.setByPath(others, 'processId', processId);
|
||||
}
|
||||
return others;
|
||||
}
|
||||
})
|
||||
@@ -38,5 +38,7 @@ export default {
|
||||
padding: 8px;
|
||||
flex: 1;
|
||||
background: #f2f4f9;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user