流程台账界面完成

packages/extra/AppWorkflowManage/AiWorkflow.vue

@@ -52,26 +52,23 @@ export default {
     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"]
+      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",
+          "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) {
+      let plugins = [BpmnElement, this.readonly ? [] : [Menu, DndPanel]].flat()
-        this.flow = new LogicFlow({
+      if (!!LogicFlow && this.$refs.lfIns && plugins.reduce((r, e) => r && !!e, true)) {
-          container: this.$refs.lfIns,
+        this.flow = new LogicFlow({container: this.$refs.lfIns, plugins})
-          plugins: [Menu, DndPanel, BpmnElement]
+        this.flow.extension.dndPanel?.setPatternItems(this.dndPanel)
-        })
-        this.flow.extension.dndPanel.setPatternItems(this.dndPanel)
         this.initValue()
         this.flow.on('history:change', evt => {
           this.configWatch?.()

packages/extra/AppWorkflowManage/AppWorkflowManage.vue

@@ -7,10 +7,11 @@
 <script>
 import List from "./list";
 import Add from "./add";
+import WorkflowLogs from "./workflowLogs";
 
 export default {
   name: "AppWorkflowManage",
-  components: {Add, List},
+  components: {WorkflowLogs, Add, List},
   label: "工作流管理",
   props: {
     instance: Function,
@@ -20,7 +21,8 @@ export default {
   computed: {
     currentPage() {
       let {hash} = this.$route
-      return hash == "#add" ? Add : List
+      return hash == "#add" ? Add :
+          hash == "#logs" ? WorkflowLogs : List
     }
   },
   created() {

packages/extra/AppWorkflowManage/list.vue

@@ -17,7 +17,9 @@
                   @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>
+              <el-button type="text" @click="handleAdd(row.id)">编辑</el-button>
+              <el-button type="text" @click="handleLogs(row.id)">台账</el-button>
+              <el-button type="text" @click="handleDelete(row.id)">删除</el-button>
             </template>
           </el-table-column>
         </ai-table>
@@ -39,7 +41,10 @@ export default {
       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}],
+      colConfigs: [
+        {prop: "name", label: "流程名称"},
+        {prop: "app", label: "对应应用"}
+      ],
     }
   },
   methods: {
@@ -56,6 +61,9 @@ export default {
     handleAdd(id) {
       this.$router.push({hash: "#add", query: {id}})
     },
+    handleLogs(id) {
+      this.$router.push({hash: "#logs", query: {id}})
+    },
     handleDelete(ids) {
       this.$confirm("是否要删除?").then(() => {
         this.instance.post("/app/appworkflowmanage/delete", null, {

packages/extra/AppWorkflowManage/workflowLogs.vue

@@ -0,0 +1,84 @@
+<template>
+  <section class="workflowLogs">
+    <ai-list>
+      <ai-title slot="title" title="流程台账" isShowBottomBorder isShowBack @back="back"/>
+      <template #content>
+        <ai-search-bar>
+          <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="showProcess(row.config)">查看进度</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/>
+      <template #footer>
+        <el-button @click="dialog=false">关闭</el-button>
+      </template>
+    </ai-dialog>
+  </section>
+</template>
+
+<script>
+import AiWorkflow from "./AiWorkflow";
+
+export default {
+  name: "workflowLogs",
+  components: {AiWorkflow},
+  props: {
+    instance: Function,
+    dict: Object,
+    permissions: Function
+  },
+  data() {
+    return {
+      search: {name: ""},
+      page: {current: 1, size: 10, total: 0},
+      tableData: [],
+      colConfigs: [
+        {prop: "name", label: "流程名称"},
+        {prop: "app", label: "对应应用"}
+      ],
+      dialog: false,
+      process: null
+    }
+  },
+  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
+        }
+      })
+    },
+    back() {
+      this.$router.push({})
+    },
+    showProcess(process) {
+      this.process = JSON.parse(process)
+      this.dialog = true
+    }
+  },
+  created() {
+    this.getTableData()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.workflowLogs {
+}
+</style>