perf: 统一左侧分类树形

src/views/plugin/workflow/design/deployment.vue

@@ -2,9 +2,8 @@
   <basic-container>
     <el-container>
       <el-aside width="200px">
-        <avue-tree :option="treeOption"
+        <wf-category @node-click="nodeClick"
-                   :data="treeData"
+                     @list-change="findObject(option.column, 'category').dicData = $event"></wf-category>
-                   @node-click="nodeClick"></avue-tree>
       </el-aside>
       <el-main style="margin-left: 10px;">
         <avue-crud :option="option"
@@ -69,11 +68,13 @@
 
 <script>
 import { getList, changeStatus, changeCategory, remove } from "@/api/plugin/workflow/deployment";
-import { tree } from '@/api/plugin/workflow/category';
 
 import { mapGetters } from "vuex";
 
+import WfCategory from '../process/components/category.vue'
+
 export default {
+  components: { WfCategory },
   data() {
     return {
       form: {},
@@ -153,17 +154,7 @@ export default {
         ]
       },
       data: [],
-      row: '',
       categoryVisible: false,
-      treeData: [],
-      treeOption: {
-        size: 'mini',
-        addBtn: false,
-        props: {
-          label: 'name',
-          value: 'id'
-        }
-      }
     };
   },
   computed: {
@@ -184,9 +175,6 @@ export default {
       return ids.join(",");
     }
   },
-  mounted() {
-    this.getCategoryList()
-  },
   methods: {
     handleChangeCategory() {
       if (this.selectionList.length === 0) {
@@ -195,15 +183,6 @@ export default {
       }
       this.categoryVisible = true
     },
-    getCategoryList() {
-      tree().then(res => {
-        const data = res.data.data
-        this.findObject(this.option.column, 'category').dicData = this.deepClone(data)
-
-        this.treeData = data
-        this.treeData.unshift({ id: '', name: '全部' })
-      })
-    },
     nodeClick({ id }) {
       this.categoryId = id
       this.searchChange(this.query)

src/views/plugin/workflow/design/form-history.vue

@@ -2,9 +2,8 @@
   <basic-container>
     <el-container>
       <el-aside width="200px">
-        <avue-tree :option="treeOption"
+        <wf-category @node-click="nodeClick"
-                   :data="treeData"
+                     @list-change="findObject(option.column, 'categoryId').dicData = $event"></wf-category>
-                   @node-click="nodeClick"></avue-tree>
       </el-aside>
       <el-main style="margin-left: 10px;">
         <avue-crud :option="option"
@@ -62,11 +61,13 @@
 
 <script>
 import { getList, remove, setMainVersion } from "@/api/plugin/workflow/form-history";
-import { tree } from '@/api/plugin/workflow/category';
 
 import { mapGetters } from "vuex";
 
+import WfCategory from '../process/components/category.vue'
+
 export default {
+  components: { WfCategory },
   data() {
     return {
       formVisible: false,
@@ -167,19 +168,7 @@ export default {
       return ids.join(",");
     }
   },
-  mounted() {
-    this.getCategoryList()
-  },
   methods: {
-    getCategoryList() {
-      tree().then(res => {
-        const data = res.data.data
-        this.findObject(this.option.column, 'categoryId').dicData = this.deepClone(data)
-
-        this.treeData = data
-        this.treeData.unshift({ id: '', name: '全部' })
-      })
-    },
     nodeClick({ id }) {
       this.categoryId = id
       this.searchChange(this.query)

src/views/plugin/workflow/design/form.vue

@@ -2,9 +2,8 @@
   <basic-container>
     <el-container>
       <el-aside width="200px">
-        <avue-tree :option="treeOption"
+        <wf-category @node-click="nodeClick"
-                   :data="treeData"
+                     @list-change="findObject(option.column, 'categoryId').dicData = $event"></wf-category>
-                   @node-click="nodeClick"></avue-tree>
       </el-aside>
       <el-main style="margin-left: 10px;">
         <avue-crud ref="crud"
@@ -97,13 +96,14 @@
 
 <script>
 import { getList, add, update, remove, listType, changeCategory } from "@/api/plugin/workflow/form";
-import { tree } from '@/api/plugin/workflow/category';
 
 import { mapGetters } from "vuex";
 
 import customFields from '../mixins/custom-fields'
+import WfCategory from '../process/components/category.vue'
 
 export default {
+  components: { WfCategory },
   mixins: [customFields],
   data() {
     return {
@@ -264,15 +264,6 @@ export default {
       isCopy: false,
       copyVisible: false,
       categoryVisible: false,
-      treeData: [],
-      treeOption: {
-        size: 'mini',
-        addBtn: false,
-        props: {
-          label: 'name',
-          value: 'id'
-        }
-      },
       title: '表单设计'
     };
   },
@@ -296,7 +287,6 @@ export default {
   },
   mounted() {
     this.getDefaultValues()
-    this.getCategoryList()
   },
   methods: {
     handleChangeCategorySubmit(form, done) {
@@ -315,16 +305,6 @@ export default {
       }
       this.categoryVisible = true
     },
-    getCategoryList() {
-      tree().then(res => {
-        const data = res.data.data
-        this.findObject(this.option.column, 'categoryId').dicData = this.deepClone(data)
-        this.findObject(this.copyOption.column, 'categoryId').dicData = this.deepClone(data)
-
-        this.treeData = data
-        this.treeData.unshift({ id: '', name: '全部' })
-      })
-    },
     nodeClick({ id }) {
       this.categoryId = id
       this.searchChange(this.query)

src/views/plugin/workflow/design/model-history.vue

@@ -2,9 +2,8 @@
   <basic-container>
     <el-container>
       <el-aside width="200px">
-        <avue-tree :option="treeOption"
+        <wf-category @node-click="nodeClick"
-                   :data="treeData"
+                     @list-change="findObject(option.column, 'categoryId').dicData = $event"></wf-category>
-                   @node-click="nodeClick"></avue-tree>
       </el-aside>
       <el-main style="margin-left: 10px;">
         <avue-crud :option="option"
@@ -59,11 +58,13 @@
 
 <script>
 import { getList, remove, setMainVersion } from "@/api/plugin/workflow/model-history";
-import { tree } from '@/api/plugin/workflow/category';
 
 import { mapGetters } from "vuex";
 
+import WfCategory from '../process/components/category.vue'
+
 export default {
+  components: { WfCategory },
   data() {
     return {
       formVisible: false,
@@ -134,15 +135,6 @@ export default {
       data: [],
       viewVisible: false,
       viewOption: {},
-      treeData: [],
-      treeOption: {
-        size: 'mini',
-        addBtn: false,
-        props: {
-          label: 'name',
-          value: 'id'
-        }
-      }
     };
   },
   watch: {
@@ -164,19 +156,7 @@ export default {
       return ids.join(",");
     }
   },
-  mounted() {
-    this.getCategoryList()
-  },
   methods: {
-    getCategoryList() {
-      tree().then(res => {
-        const data = res.data.data
-        this.findObject(this.option.column, 'categoryId').dicData = this.deepClone(data)
-
-        this.treeData = data
-        this.treeData.unshift({ id: '', name: '全部' })
-      })
-    },
     nodeClick({ id }) {
       this.categoryId = id
       this.searchChange(this.query)

src/views/plugin/workflow/design/model.vue

@@ -2,9 +2,8 @@
   <basic-container>
     <el-container>
       <el-aside width="200px">
-        <avue-tree :option="treeOption"
+        <wf-category @node-click="nodeClick"
-                   :data="treeData"
+                     @list-change="findObject(option.column, 'categoryId').dicData = $event"></wf-category>
-                   @node-click="nodeClick"></avue-tree>
       </el-aside>
       <el-main style="margin-left: 10px;">
         <avue-crud :option="option"
@@ -116,14 +115,14 @@
 <script>
 import { getList, remove, deploy, changeCategory, getDetail, changeIcon } from "@/api/plugin/workflow/model";
 import { getList as scopeList, submit as scopeSubmit } from '@/api/plugin/workflow/model-scope'
-import { tree } from '@/api/plugin/workflow/category';
 
 import { mapGetters } from "vuex";
 
 import UserOption from '../process/components/user-option.vue'
+import WfCategory from '../process/components/category.vue'
 
 export default {
-  components: { UserOption },
+  components: { UserOption, WfCategory },
   data() {
     return {
       form: {},
@@ -206,15 +205,6 @@ export default {
         deptUrl: '/api/blade-system/search/dept',
         postUrl: '/api/blade-system/search/post',
       },
-      treeData: [],
-      treeOption: {
-        size: 'mini',
-        addBtn: false,
-        props: {
-          label: 'name',
-          value: 'id'
-        }
-      },
       iconVisible: false,
     };
   },
@@ -236,9 +226,6 @@ export default {
       return ids.join(",");
     }
   },
-  mounted() {
-    this.getCategoryList()
-  },
   methods: {
     handleIcon(row) {
       this.form = { id: row.id, icon: row.icon }
@@ -273,15 +260,6 @@ export default {
       this.categoryType = 'change'
       this.categoryVisible = true
     },
-    getCategoryList() {
-      tree().then(res => {
-        const data = res.data.data
-        this.findObject(this.option.column, 'categoryId').dicData = this.deepClone(data)
-
-        this.treeData = data
-        this.treeData.unshift({ id: '', name: '全部' })
-      })
-    },
     nodeClick({ id }) {
       this.categoryId = id
       this.searchChange(this.query)

src/views/plugin/workflow/process/components/category.vue

@@ -0,0 +1,47 @@
+<template>
+  <avue-tree :option="option"
+             :data="data"
+             @node-click="handleNodeClick"></avue-tree>
+</template>
+
+<script>
+import { tree } from '@/api/plugin/workflow/category';
+
+export default {
+  name: 'wf-category',
+  data() {
+    return {
+      data: [],
+      option: {
+        size: 'mini',
+        menu: false,
+        addBtn: false,
+        props: {
+          label: 'name',
+          value: 'id'
+        }
+      }
+    }
+  },
+  mounted() {
+    this.getCategoryList()
+  },
+  methods: {
+    handleNodeClick({ id }) {
+      this.$emit('node-click', { id })
+    },
+    getCategoryList() {
+      tree().then(res => {
+        const data = res.data.data
+        this.$emit('list-change', this.deepClone(data))
+
+        this.data = data
+        this.data.unshift({ id: '', name: '全部' })
+      })
+    },
+  }
+}
+</script>
+
+<style>
+</style>

src/views/plugin/workflow/process/start.vue

@@ -2,9 +2,8 @@
   <basic-container>
     <el-container>
       <el-aside width="200px">
-        <avue-tree :option="treeOption"
+        <wf-category @node-click="nodeClick"
-                   :data="treeData"
+                     @list-change="findObject(option.column, 'category').dicData = $event"></wf-category>
-                   @node-click="nodeClick"></avue-tree>
       </el-aside>
       <el-main style="margin-left: 10px;">
         <template v-if="mode == 'list'">
@@ -58,16 +57,16 @@
 
 <script>
 import { processList as getList } from "@/api/plugin/workflow/process";
-import { tree } from '@/api/plugin/workflow/category';
 
 import { mapGetters } from "vuex";
 
 import exForm from '../mixins/ex-form'
 import WfStartGrid from './components/start/grid.vue'
+import WfCategory from './components/category.vue'
 
 export default {
   mixins: [exForm],
-  components: { WfStartGrid },
+  components: { WfStartGrid, WfCategory },
   data() {
     return {
       mode: 'list',
@@ -143,17 +142,6 @@ export default {
         ]
       },
       data: [],
-      row: '',
-      categoryVisible: false,
-      treeData: [],
-      treeOption: {
-        size: 'mini',
-        addBtn: false,
-        props: {
-          label: 'name',
-          value: 'id'
-        }
-      }
     };
   },
   computed: {
@@ -177,9 +165,6 @@ export default {
       return process.env.NODE_ENV === "development"
     }
   },
-  mounted() {
-    this.getCategoryList()
-  },
   created() {
     this.handleChangeMode(localStorage.getItem("wf-start-mode") || 'list')
   },
@@ -191,15 +176,6 @@ export default {
       else this.page.pageSize = 10
       this.onLoad(this.page, this.query)
     },
-    getCategoryList() {
-      tree().then(res => {
-        const data = res.data.data
-        this.findObject(this.option.column, 'category').dicData = this.deepClone(data)
-
-        this.treeData = data
-        this.treeData.unshift({ id: '', name: '全部' })
-      })
-    },
     nodeClick({ id }) {
       this.categoryId = id
       this.searchChange(this.query)