工作流配置完成

2022-08-10 16:58:52 +08:00
parent fbb9271966
commit c5b2b233b2
4 changed files with 319 additions and 0 deletions
--- a/packages/extra/AppWorkflowManage/AiWorkflow.vue
+++ b/packages/extra/AppWorkflowManage/AiWorkflow.vue
@@ -0,0 +1,103 @@
+<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',
+      }]
+  },
+  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"]
+      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",
+          "https://cdn.jsdelivr.net/npm/@logicflow/extension/lib/BpmnElement.js"
+        ].flat()
+      }
+      return Promise.all(libs.map(e => load(e)))
+    },
+    initFlow(count = 0) {
+      const {LogicFlow, Menu, DndPanel, BpmnElement} = window
+      if (!!LogicFlow && this.$refs.lfIns && !!Menu && !!DndPanel) {
+        this.flow = new LogicFlow({
+          container: this.$refs.lfIns,
+          plugins: [Menu, DndPanel, BpmnElement]
+        })
+        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 {
+}
+</style>
--- a/packages/extra/AppWorkflowManage/AppWorkflowManage.vue
+++ b/packages/extra/AppWorkflowManage/AppWorkflowManage.vue
@@ -0,0 +1,36 @@
+<template>
+  <section class="AppWorkflowManage">
+    <component :is="currentPage" v-bind="$props"/>
+  </section>
+</template>
+
+<script>
+import List from "./list";
+import Add from "./add";
+
+export default {
+  name: "AppWorkflowManage",
+  components: {Add, List},
+  label: "工作流管理",
+  props: {
+    instance: Function,
+    dict: Object,
+    permissions: Function
+  },
+  computed: {
+    currentPage() {
+      let {hash} = this.$route
+      return hash == "#add" ? Add : List
+    }
+  },
+  created() {
+    this.dict.load('yesOrNo')
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AppWorkflowManage {
+  height: 100%;
+}
+</style>
--- a/packages/extra/AppWorkflowManage/add.vue
+++ b/packages/extra/AppWorkflowManage/add.vue
@@ -0,0 +1,98 @@
+<template>
+  <section class="add">
+    <ai-detail>
+      <ai-title slot="title" :title="pageTitle" isShowBottomBorder/>
+      <template #content>
+        <el-form ref="AddForm" :model="form" size="small" label-width="120px" :rules="rules">
+          <ai-card title="基础设置">
+            <template #content>
+              <el-row type="flex">
+                <el-form-item label="流程名称" prop="name" class="fill">
+                  <el-input v-model="form.name" placeholder="请输入流程名称" clearable/>
+                </el-form-item>
+                <el-form-item label="对应应用" prop="app" class="fill">
+                  <el-input v-model="form.app" placeholder="请输入对应应用" clearable/>
+                </el-form-item>
+              </el-row>
+            </template>
+          </ai-card>
+          <ai-card title="流程设计">
+            <template #content>
+              <ai-workflow v-model="form.config"/>
+            </template>
+          </ai-card>
+        </el-form>
+      </template>
+      <template #footer>
+        <el-button @click="back">取消</el-button>
+        <el-button type="primary" @click="submit">提交</el-button>
+      </template>
+    </ai-detail>
+  </section>
+</template>
+
+<script>
+import AiWorkflow from "./AiWorkflow";
+
+export default {
+  name: "add",
+  components: {AiWorkflow},
+  props: {
+    instance: Function,
+    dict: Object,
+    permissions: Function
+  },
+  computed: {
+    isEdit: v => !!v.$route.query.id,
+    pageTitle: v => v.isEdit ? "编辑工作流管理" : "新增工作流管理"
+  },
+  data() {
+    return {
+      form: {},
+      rules: {
+        name: {required: true, message: "请输入"}, app: {required: true, message: "请输入"},
+      },
+    }
+  },
+  methods: {
+    getDetail() {
+      let {id} = this.$route.query
+      id && this.instance.post("/app/appworkflowmanage/queryDetailById", null, {
+        params: {id}
+      }).then(res => {
+        if (res?.data) {
+          const {config} = res.data
+          this.form = res.data
+          this.form.config = JSON.parse(config || null)
+        }
+      })
+    },
+    back() {
+      this.$router.push({})
+    },
+    submit() {
+      this.$refs.AddForm.validate(v => {
+        if (v) {
+          let {config} = this.form
+          config = JSON.stringify(config)
+          this.instance.post("/app/appworkflowmanage/addOrUpdate", {...this.form, config}).then(res => {
+            if (res?.code == 0) {
+              this.$message.success("提交成功!")
+              this.back()
+            }
+          })
+        }
+      })
+    },
+  },
+  created() {
+    this.getDetail()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.add {
+  height: 100%;
+}
+</style>
--- a/packages/extra/AppWorkflowManage/list.vue
+++ b/packages/extra/AppWorkflowManage/list.vue
@@ -0,0 +1,82 @@
+<template>
+  <section class="list">
+    <ai-list>
+      <ai-title slot="title" title="工作流管理" isShowBottomBorder/>
+      <template #content>
+        <ai-search-bar>
+          <template #left>
+            <el-button type="primary" icon="iconfont iconAdd" @click="handleAdd()">添加</el-button>
+          </template>
+          <template #right>
+            <el-input size="small" placeholder="搜索" v-model="search.name" clearable
+                      @change="page.current=1,getTableData()"/>
+          </template>
+        </ai-search-bar>
+
+        <ai-table :tableData="tableData" :total="page.total" :current.sync="page.current" :size.sync="page.size"
+                  @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="handleAdd(row.id)">编辑</el-button><el-button type="text" @click="handleDelete(row.id)">删除</el-button>
+            </template>
+          </el-table-column>
+        </ai-table>
+      </template>
+    </ai-list>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "list",
+  props: {
+    instance: Function,
+    dict: Object,
+    permissions: Function
+  },
+  data() {
+    return {
+      search: {name: ""},
+      page: {current: 1, size: 10, total: 0},
+      tableData: [],
+      colConfigs: [{"prop":"name","label":"流程名称","isTable":true,"isDetail":true},{"prop":"app","label":"对应应用","isTable":true,"isDetail":true}],
+    }
+  },
+  methods: {
+    getTableData() {
+      this.instance.post("/app/appworkflowmanage/list", null, {
+        params: {...this.page, ...this.search}
+      }).then(res => {
+        if (res?.data) {
+          this.tableData = res.data.records
+          this.page.total = res.data.total
+        }
+      })
+    },
+    handleAdd(id) {
+      this.$router.push({hash: "#add", query: {id}})
+    },
+    handleDelete(ids) {
+      this.$confirm("是否要删除?").then(() => {
+        this.instance.post("/app/appworkflowmanage/delete", null, {
+          params: {ids}
+        }).then(res => {
+          if (res?.code == 0) {
+            this.$message.success("删除成功")
+            this.getTableData()
+          }
+        })
+      }).catch(() => 0)
+    }
+  },
+  created() {
+    this.getTableData()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.list {
+  height: 100%;
+}
+</style>