From ddd17a7643ca777f70389ae9eacb75b8dba6beab Mon Sep 17 00:00:00 2001 From: 田源 <lastanimals@163.com> Date: 星期一, 19 六月 2023 18:07:03 +0800 Subject: [PATCH] 联调物品主数据剩余功能,处理相似项查询 --- Source/UBCS-WEB/src/views/modeling/cycle.vue | 243 +++++++++++++++++++++++++++++++++++++----------- 1 files changed, 188 insertions(+), 55 deletions(-) diff --git a/Source/UBCS-WEB/src/views/modeling/cycle.vue b/Source/UBCS-WEB/src/views/modeling/cycle.vue index 4e3a4d6..ef721e2 100644 --- a/Source/UBCS-WEB/src/views/modeling/cycle.vue +++ b/Source/UBCS-WEB/src/views/modeling/cycle.vue @@ -1,66 +1,199 @@ <template> - <div> - <p>鐢熷懡鍛ㄦ湡妯″瀷</p> - <el-button @click="tabs=!tabs">杞寲</el-button><br /><br /> - <avue-form @tab-click="handleTabClick" :option="option" v-model="form" @submit="handleSubmit"> - <template slot="group1Header"> - <h4>鑷畾涔夎〃澶�</h4> - </template> - </avue-form> - </div> + <basic-container class=""> + <avue-crud :data="data" :option="option" @refresh-change="gettableList" :table-loading="loading"> + <template slot-scope="scope" slot="menuLeft"> + <el-button + type="primary" + icon="el-icon-plus" + size="small" + @click="openDialog('add', {})" + >鏂板</el-button + > + </template> + <template slot-scope="{ row, index }" slot="menu"> + <el-button + type="text" + icon="el-icon-edit" + size="mini" + @click="openDialog('edit', row)" + >缂栬緫</el-button + > + <el-button + type="text" + icon="el-icon-view" + size="mini" + @click="openDialog('detail', row)" + >棰勮</el-button + > + </template></avue-crud + > + <el-dialog + :visible="visible" + :width="dialogWidth" + :title="title" + append-to-body + :before-close="() => {visible = false}" + top="10vh" + > + <CycleFlow + v-if="visible" + class="cycle_flow" + :type="type" + :chart-data="rowData.data || {}" + :chart-data-node-items="flowChartNodeItems" + :rowData="rowData" + ref="vueFlowchartEditor" + @save-data="save" + /> + <template #footer v-if="type !== 'detail'"> + <el-button type="primary" size="mini" @click="submit">淇濆瓨</el-button> + <el-button type="" size="mini" @click="visible = false">鍙栨秷</el-button> + </template> + </el-dialog> + </basic-container> </template> <script> +import CycleFlow from "@/components/flow-cycle/flowchartEditor.vue"; export default { name: "cycle.vue", - data(){ - return{ - tabs:true, - form:{ - text:'鏂囨湰', - text1:'鏂囨湰1', - text2:'鏂囨湰2', - text3:'鏂囨湰3', - }, - } - }, - computed:{ - option(){ - return{ - tabs:this.tabs, - tabsActive:2, - column: [{ - label: '鍐呭1', - prop: 'text1', - }], - group:[ + components: { CycleFlow }, + data() { + return { + option: { + border: true, + align: "center", + menuAlign: "center", + menu: true, + delBtn: false, + editBtn: false, + addBtn: false, + column: [ { - icon:'el-icon-info', - label: '鍒嗙粍1', - prop: 'group1', - column: [{ - label: '鍐呭1', - prop: 'text1', - }] - },{ - icon:'el-icon-info', - label: '鍒嗙粍2', - prop: 'group2', - column: [{ - label: '閫夐」鍗�2', - prop: 'text2', - }, { - label: '閫夐」鍗�3', - prop: 'text3', - }] - } - ] + label: "鍚嶇О", + prop: "name", + }, + { + label: "鏍囩", + prop: "label", + }, + { + label: "璧峰鐘舵��", + prop: "startState", + }, + { + label: "鎻忚堪", + prop: "remark", + }, + ], + }, + data: [ + { + name: "鎴戞槸name", + label: "鎴戞槸label", + startState: "鎴戞槸startState", + remark: "鎴戞槸remark", + data: { + nodes: [ + { + type: "node", + size: "80*48", + shape: "flow-rect", + color: "#1890FF", + label: "Auditing", + x: 110.50303650877106, + y: 59.22389408123915, + id: "Auditing", + index: 0, + }, + { + type: "node", + size: "80*48", + shape: "flow-rect", + color: "#1890FF", + label: "Editing", + x: 120.87992069414531, + y: 156.76660542375714, + id: "Editing", + index: 1, + }, + { + type: "node", + size: "80*48", + shape: "flow-rect", + color: "#1890FF", + label: "Released", + x: 100.12615232339681, + y: 252.2339399292003, + id: "Released", + index: 2, + }, + ], + edges: [ + { + source: "Auditing", + sourceAnchor: 1, + target: "Released", + targetAnchor: 1, + }, + { + source: "Editing", + sourceAnchor: 3, + target: "Auditing", + targetAnchor: 3, + }, + ], + }, + }, + ], + title: "棰勮鐢熷懡鍛ㄦ湡娴佺▼鍥�", + visible: false, + flowChartNodeItems: [], + rowData: {}, + dialogWidth: "50%", + type: "detail", + }; + }, + methods: { + gettableList() { + this.loading = true + }, + openDialog(type, row) { + if (type === "detail") { + this.title = "棰勮鐢熷懡鍛ㄦ湡娴佺▼鍥�"; + this.dialogWidth = "50%"; + } else if (type === "edit") { + this.title = "缂栬緫鐢熷懡鍛ㄦ湡娴佺▼鍥�"; + this.dialogWidth = "95%"; + } else if (type === "add") { + this.title = "鏂板鐢熷懡鍛ㄦ湡娴佺▼鍥�"; + this.dialogWidth = "95%"; } - } - } -} + this.type = type; + this.rowData = row; + this.visible = true; + }, + async submit() { + const newRowData = await this.$refs.vueFlowchartEditor.getNewRowData(); + if (!newRowData) { + return; + } + const flowData = this.$refs.vueFlowchartEditor.getFlowData(); + console.log(JSON.stringify(flowData)); + }, + }, +}; </script> -<style scoped> - +<style lang="scss" scoped> +/deep/ .el-dialog__body { + padding: 0 20px; +} +.cycle_flow { + height: 600px !important; + display: flex; + flex-direction: column; + margin: 0; + padding: 0; +} </style> -- Gitblit v1.9.3