更换新组件

2022-08-31 16:15:25 +08:00
parent 28968f7cbb
commit 06f02e3435
4 changed files with 6 additions and 171 deletions
--- a/packages/extra/AppWorkflowManage/AiProcess.vue
+++ b/packages/extra/AppWorkflowManage/AiProcess.vue
@@ -1,44 +0,0 @@
-<template>
-  <section class="AiProcess">
-    <ai-dialog-btn :text="label">
-      <ai-workflow v-model="process" readonly/>
-    </ai-dialog-btn>
-  </section>
-</template>
-
-<script>
-export default {
-  name: "AiProcess",
-  props: {
-    label: {default: "查看进度"},
-    bid: {default: "", required: true},
-    instance: Function
-  },
-  data() {
-    return {
-      detail: {},
-      process: {}
-    }
-  },
-  methods: {
-    getProcess() {
-      const {bid} = this.$props
-      bid && this.instance.post("", null, {
-        params: {bid}
-      }).then(res => {
-        if (res?.data) {
-          this.detail = res.data
-        }
-      })
-    }
-  },
-  created() {
-    this.getProcess()
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.AiProcess {
-}
-</style>
--- a/packages/extra/AppWorkflowManage/AiWorkflow.vue
+++ b/packages/extra/AppWorkflowManage/AiWorkflow.vue
@@ -1,116 +0,0 @@
-<template>
-  <section class="AiWorkflow">
-    <div ref="lfIns" :style="{height}"/>
-  </section>
-</template>
-
-<script>
-export default {
-  name: "AiWorkflow",
-  model: {
-    prop: "config",
-    event: "change"
-  },
-  props: {
-    config: Object,
-    height: {default: '400px'},
-    readonly: Boolean
-  },
-  computed: {
-    dndPanel: () => [
-      {
-        type: 'bpmn:startEvent',
-        text: '开始',
-        label: '开始',
-        icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAAH6ji2bAAAABGdBTUEAALGPC/xhBQAAAnBJREFUOBGdVL1rU1EcPfdGBddmaZLiEhdx1MHZQXApraCzQ7GKLgoRBxMfcRELuihWKcXFRcEWF8HBf0DdDCKYRZpnl7p0svLe9Zzbd29eQhTbC8nv+9zf130AT63jvooOGS8Vf9Nt5zxba7sXQwODfkWpkbjTQfCGUd9gIp3uuPP8bZ946g56dYQvnBg+b1HB8VIQmMFrazKcKSvFW2dQTxJnJdQ77urmXWOMBCmXM2Rke4S7UAW+/8ywwFoewmBps2tu7mbTdp8VMOkIRAkKfrVawalJTtIliclFbaOBqa0M2xImHeVIfd/nKAfVq/LGnPss5Kh00VEdSzfwnBXPUpmykNss4lUI9C1ga+8PNrBD5YeqRY2Zz8PhjooIbfJXjowvQJBqkmEkVnktWhwu2SM7SMx7Cj0N9IC0oQXRo8xwAGzQms+xrB/nNSUWVveI48ayrFGyC2+E2C+aWrZHXvOuz+CiV6iycWe1Rd1Q6+QUG07nb5SbPrL4426d+9E1axKjY3AoRrlEeSQo2Eu0T6BWAAr6COhTcWjRaYfKG5csnvytvUr/WY4rrPMB53Uo7jZRjXaG6/CFfNMaXEu75nG47X+oepU7PKJvvzGDY1YLSKHJrK7vFUwXKkaxwhCW3u+sDFMVrIju54RYYbFKpALZAo7sB6wcKyyrd+aBMryMT2gPyD6GsQoRFkGHr14TthZni9ck0z+Pnmee460mHXbRAypKNy3nuMdrWgVKj8YVV8E7PSzp1BZ9SJnJAsXdryw/h5ctboUVi4AFiCd+lQaYMw5z3LGTBKjLQOeUF35k89f58Vv/tGh+l+PE/wG0rgfIUbZK5AAAAABJRU5ErkJggg==',
-      },
-      {
-        type: 'bpmn:userTask',
-        label: '流程节点',
-        icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAEFVwZaAAAABGdBTUEAALGPC/xhBQAAAqlJREFUOBF9VM9rE0EUfrMJNUKLihGbpLGtaCOIR8VjQMGDePCgCCIiCNqzCAp2MyYUCXhUtF5E0D+g1t48qAd7CCLqQUQKEWkStcEfVGlLdp/fm3aW2QQdyLzf33zz5m2IsAZ9XhDpyaaIZkTS4ASzK41TFao88GuJ3hsr2pAbipHxuSYyKRugagICGANkfFnNh3HeE2N0b3nN2cgnpcictw5veJIzxmDamSlxxQZicq/mflxhbaH8BLRbuRwNtZp0JAhoplVRUdzmCe/vO27wFuuA3S5qXruGdboy5/PRGFsbFGKo/haRtQHIrM83bVeTrOgNhZReWaYGnE4aUQgTJNvijJFF4jQ8BxJE5xfKatZWmZcTQ+BVgh7s8SgPlCkcec4mGTmieTP4xd7PcpIEg1TX6gdeLW8rTVMVLVvb7ctXoH0Cydl2QOPJBG21STE5OsnbweVYzAnD3A7PVILuY0yiiyDwSm2g441r6rMSgp6iK42yqroI2QoXeJVeA+YeZSa47gZdXaZWQKTrG93rukk/l2Al6Kzh5AZEl7dDQy+JjgFahQjRopSxPbrbvK7GRe9ePWBo1wcU7sYrFZtavXALwGw/7Dnc50urrHJuTPSoO2IMV3gUQGNg87IbSOIY9BpiT9HV7FCZ94nPXb3MSnwHn/FFFE1vG6DTby+r31KAkUktB3Qf6ikUPWxW1BkXSPQeMHHiW0+HAd2GelJsZz1OJegCxqzl+CLVHa/IibuHeJ1HAKzhuDR+ymNaRFM+4jU6UWKXorRmbyqkq/D76FffevwdCp+jN3UAN/C9JRVTDuOxC/oh+EdMnqIOrlYteKSfadVRGLJFJPSB/ti/6K8f0CNymg/iH2gO/f0DwE0yjAFO6l8JaR5j0VPwPwfaYHqOqrCI319WzwhwzNW/aQAAAABJRU5ErkJggg==',
-        className: 'important-node'
-      },
-      {
-        type: 'bpmn:exclusiveGateway',
-        label: '条件判断',
-        icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAAHeEJUAAAAABGdBTUEAALGPC/xhBQAAAvVJREFUOBGNVEFrE0EU/mY3bQoiFlOkaUJrQUQoWMGePLX24EH0IIoHKQiCV0G8iE1covgLiqA/QTzVm1JPogc9tIJYFaQtlhQxqYjSpunu+L7JvmUTU3AgmTfvffPNN++9WSA1DO182f6xwILzD5btfAoQmwL5KJEwiQyVbSVZ0IgRyV6PTpIJ81E5ZvqfHQR0HUOBHW4L5Et2kQ6Zf7iAOhTFAA8s0pEP7AXO1uAA52SbqGk6h/6J45LaLhO64ByfcUzM39V7ZiAdS2yCePPEIQYvTUHqM/n7dgQNfBKWPjpF4ISk8q3J4nB11qw6X8l+FsF3EhlkEMfrjIer3wJTLwS2aCNcj4DbGxXTw00JmAuO+Ni6bBxVUCvS5d9aa04+so4pHW5jLTywuXAL7jJ+D06sl82Sgl2JuVBQn498zkc2bGKxULHjCnSMadBKYDYYHAtsby1EQ5lNGrQd4Y3v4Zo0XdGEmDno46yCM9Tk+RiJmUYHS/aXHPNTcjxcbTFna000PFJHIVZ5lFRqRpJWk9/+QtlOUYJj9HG5pVFEU7zqIYDVsw2s+AJaD8wTd2umgSCCyUxgGsS1Y6TBwXQQTFuZaHcd8gAGioE90hlsY+wMcs30RduYtxanjMGal8H5dMW67dmT1JFtYUEe8LiQLRsPZ6IIc7A4J5tqco3T0pnv/4u0kyzrYUq7gASuEyI8VXKvB9Odytv6jS/PNaZBln0nioJG/AVQRZvApOdhjj3Jt8QC8Im09SafwdBdvIpztpxWxpeKCC+EsFdS8DCyuCn2munFpL7ctHKp+Xc5cMybeIyMAN33SPL3ZR9QV1XVwLyzHm6Iv0/yeUuUb7PPlZC4D4HZkeu6dpF4v9j9MreGtMbxMMRLIcjJic9yHi7WQ3yVKzZVWUr5UrViJvn1FfUlwe/KYVfYyWRLSGNu16hR01U9IacajXPei0wx/5BqgInvJN+MMNtNme7ReU9SBbgntovn0kKHpFg7UogZvaZiOue/q1SBo9ktHzQAAAAASUVORK5CYII=',
-      },
-      {
-        type: 'bpmn:endEvent',
-        text: '结束',
-        label: '结束',
-        icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAAH6ji2bAAAABGdBTUEAALGPC/xhBQAAA1BJREFUOBFtVE1IVUEYPXOf+tq40Y3vPcmFIdSjIorWoRG0ERWUgnb5FwVhYQSl72oUoZAboxKNFtWiwKRN0M+jpfSzqJAQclHo001tKkjl3emc8V69igP3znzfnO/M9zcDcKT67azmjYWTwl9Vn7Vumeqzj1DVb6cleQY4oAVnIOPb+mKAGxQmKI5CWNJ2aLPatxWa3aB9K7/fB+/Z0jUF6TmMlFLQqrkECWQzOZxYGjTlOl8eeKaIY5yHnFn486xBustDjWT6dG7pmjHOJd+33t0iitTPkK6tEvjxq4h2MozQ6WFSX/LkDUGfFwfhEZj1Auz/U4pyAi5Sznd7uKzznXeVHlI/Aywmk6j7fsUsEuCGADrWARXXwjxWQsUbIupDHJI7kF5dRktg0eN81IbiZXiTESic50iwS+t1oJgL83jAiBupLDCQqwziaWSoAFSeIR3P5Xv5az00wyIn35QRYTwdSYbz8pH8fxUUAtxnFvYmEmgI0wYXUXcCCSpeEVpXlsRhBnCEATxWylL9+EKCAYhe1NGstUa6356kS9NVvt3DU2fd+Wtbm/+lSbylJqsqkSm9CRhvoJVlvKPvF1RKY/FcPn5j4UfIMLn8D4UYb54BNsilTDXKnF4CfTobA0FpoW/LSp306wkXM+XaOJhZaFkcNM82ASNAWMrhrUbRfmyeI1FvRBTpN06WKxa9BK0o2E4Pd3zfBBEwPsv9sQBnmLVbLEIZ/Xe9LYwJu/Er17W6HYVBc7vmuk0xUQ+pqxdom5Fnp55SiytXLPYoMXNM4u4SNSCFWnrVIzKG3EGyMXo6n/BQOe+bX3FClY4PwydVhthOZ9NnS+ntiLh0fxtlUJHAuGaFoVmttpVMeum0p3WEXbcll94l1wM/gZ0Ccczop77VvN2I7TlsZCsuXf1WHvWEhjO8DPtyOVg2/mvK9QqboEth+7pD6NUQC1HN/TwvydGBARi9MZSzLE4b8Ru3XhX2PBxf8E1er2A6516o0w4sIA+lwURhAON82Kwe2iDAC1Watq4XHaGQ7skLcFOtI5lDxuM2gZe6WFIotPAhbaeYlU4to5cuarF1QrcZ/lwrLaCJl66JBocYZnrNlvm2+MBCTmUymPrYZVbjdlr/BxlMjmNmNI3SAAAAAElFTkSuQmCC',
-      }],
-    currentNode: v => v.config?.nodes?.find(e => !!e.isSelected),
-    currentModel: v => v.flow.getNodeModelById(v.currentNode.id)
-  },
-  data() {
-    return {
-      flow: null,
-      configWatch: null
-    }
-  },
-  methods: {
-    loadLib() {
-      this.$injectCss("https://cdn.cunwuyun.cn/logicflow/index.css")
-      const load = url => new Promise(resolve => this.$injectLib(url, () => resolve()))
-      let libs = ["https://cdn.cunwuyun.cn/logicflow/logic-flow.js", "https://cdn.jsdelivr.net/npm/@logicflow/extension/lib/BpmnElement.js"]
-      if (!this.readonly) {
-        this.$injectCss("https://cdn.jsdelivr.net/npm/@logicflow/extension/lib/style/index.css")
-        libs = [
-          libs,
-          "https://cdn.jsdelivr.net/npm/@logicflow/extension/lib/Menu.js",
-          "https://cdn.jsdelivr.net/npm/@logicflow/extension/lib/DndPanel.js"
-        ].flat()
-      }
-      return Promise.all(libs.map(e => load(e)))
-    },
-    initFlow(count = 0) {
-      const {LogicFlow, Menu, DndPanel, BpmnElement} = window
-      let plugins = [BpmnElement, this.readonly ? [] : [Menu, DndPanel]].flat()
-      if (!!LogicFlow && this.$refs.lfIns && plugins.reduce((r, e) => r && !!e, true)) {
-        this.flow = new LogicFlow({
-          container: this.$refs.lfIns, plugins, isSilentMode: this.readonly,
-          style: {
-            outline: {
-              fill: 'transparent',
-              stroke: '#949494',
-              strokeDasharray: '3,3',
-              hover: {
-                stroke: '#949494',
-              },
-            },
-          }
-        })
-
-        this.flow.extension.dndPanel?.setPatternItems(this.dndPanel)
-        this.initValue()
-        this.flow.on('history:change', evt => {
-          this.configWatch?.()
-          const conf = this.$copy(evt.data?.undos || null).pop()
-          this.$emit("change", conf)
-        })
-      } else if (count < 10) {
-        setTimeout(() => this.initFlow(++count), 200)
-      } else console.error("logicFlow加载失败!")
-    },
-    initValue() {
-      this.configWatch = this.$watch('config', v => {
-        if (v?.nodes?.length > 0) {
-          this.flow?.render(v || {})
-          this.configWatch?.()
-        }
-      }, {immediate: true, deep: true})
-    }
-  },
-  mounted() {
-    this.$nextTick(() => this.loadLib().then(() => this.initFlow()))
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.AiWorkflow {
-  min-height: 404px;
-}
-</style>
--- a/packages/extra/AppWorkflowManage/add.vue
+++ b/packages/extra/AppWorkflowManage/add.vue
@@ -18,7 +18,7 @@
          </ai-card>
          <ai-card title="流程设计">
            <template #content>
-              <ai-workflow v-model="form.config"/>
+              <ai-flow :config.sync="form.config"/>
            </template>
          </ai-card>
        </el-form>
@@ -32,12 +32,10 @@
 </template>

 <script>
-import AiWorkflow from "./AiWorkflow";
 import {mapActions} from "vuex"

 export default {
  name: "add",
-  components: {AiWorkflow},
  props: {
    instance: Function,
    dict: Object,
--- a/packages/extra/AppWorkflowManage/workflowLogs.vue
+++ b/packages/extra/AppWorkflowManage/workflowLogs.vue
@@ -13,14 +13,14 @@
                  @getList="getTableData" :col-configs="colConfigs" :dict="dict">
          <el-table-column slot="options" label="操作" fixed="right" align="center" width="300">
            <template slot-scope="{row}">
-              <el-button type="text" @click="showProcess(row.workflowConfig)">查看进度</el-button>
+              <el-button type="text" @click="showProcess(row)">查看进度</el-button>
            </template>
          </el-table-column>
        </ai-table>
      </template>
    </ai-list>
    <ai-dialog :visible.sync="dialog" title="查看进度" @closed="process=null" customFooter>
-      <ai-workflow v-model="process" readonly/>
+      <ai-flow v-model="process.nowNodeId" readonly :config="process.workflowConfig"/>
      <template #footer>
        <el-button @click="dialog=false">关闭</el-button>
      </template>
@@ -29,11 +29,8 @@
 </template>

 <script>
-import AiWorkflow from "./AiWorkflow";
-
 export default {
  name: "workflowLogs",
-  components: {AiWorkflow},
  props: {
    instance: Function,
    dict: Object,
@@ -50,7 +47,7 @@ export default {
        {prop: "createUserName", label: "创建者"},
      ],
      dialog: false,
-      process: null
+      process: {}
    }
  },
  methods: {
@@ -67,8 +64,8 @@ export default {
    back() {
      this.$router.push({})
    },
-    showProcess(process) {
-      this.process = JSON.parse(process)
+    showProcess(row) {
+      this.process = {...row, workflowConfig: JSON.parse(row?.workflowConfig)}
      this.dialog = true
    }
  },