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