perf: 部门选择方式

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

@@ -469,9 +469,9 @@ export default {
         version: 'v2',
         userUrl: '/api/blade-user/search/user',
         roleUrl: '/api/blade-system/search/role',
-        deptUrl: '/api/blade-system/search/dept',
+        deptUrl: '/api/blade-system/dept/lazy-list',
         postUrl: '/api/blade-system/search/post',
-        customUrl: '/api/blade-workflow/design/condition/list'
+        customUrl: '/api/blade-workflow/design/condition/list',
       })
     },
     getConditionList() {

src/views/plugin/workflow/process/components/dept-select.vue

@@ -0,0 +1,212 @@
+<template>
+  <el-dialog ref="wf-dialog"
+             custom-class="wf-dialog"
+             :visible.sync="visible"
+             title="部门选择"
+             width="60%"
+             :before-close="handleClose"
+             append-to-body>
+    <avue-crud v-if="isInit"
+               :option="option"
+               :table-loading="loading"
+               :data="data"
+               v-model="form"
+               ref="crud"
+               @search-change="searchChange"
+               @search-reset="searchReset"
+               @selection-change="selectionList=$event"
+               @row-click="rowClick"
+               @on-load="onLoad"
+               @tree-load="treeLoad">
+    </avue-crud>
+    <span slot="footer"
+          class="dialog-footer">
+      <el-button @click="handleClose"
+                 size="mini">取消</el-button>
+      <el-button type="primary"
+                 @click="handleConfirm"
+                 size="mini">确定</el-button>
+    </span>
+  </el-dialog>
+</template>
+<script>
+export default {
+  props: {
+    defaultChecked: String,
+    url: String,
+    customOption: Object
+  },
+  watch: {
+    visible: {
+      handler(val) {
+        if (val) this.changeDefaultChecked()
+      },
+    }
+  },
+  computed: {
+    ids() {
+      let ids = [];
+      this.selectionList.forEach(ele => {
+        ids.push(ele[this.props.id]);
+      });
+      return ids.join(",");
+    },
+    names() {
+      let names = [];
+      this.selectionList.forEach(ele => {
+        names.push(ele[this.props.name]);
+      });
+      return names.join(",");
+    }
+  },
+  data() {
+    return {
+      isInit: false,
+      visible: false,
+      form: {},
+      query: {},
+      loading: false,
+      page: {
+        pageSize: 10,
+        currentPage: 1,
+        total: 0
+      },
+      selectionList: [],
+      data: [],
+      props: {
+        id: 'id',
+        name: 'deptName',
+        data: 'data.data',
+      },
+      option: {
+        size: 'mini',
+        searchSize: 'mini',
+        searchMenuSpan: 6,
+        menu: false,
+        addBtn: false,
+        header: false,
+        border: true,
+        tip: false,
+        tree: true,
+        lazy: true,
+        reserveSelection: true,
+        highlightCurrentRow: true,
+        gutter: 1,
+        selection: true,
+        column: [{
+          label: '部门名称',
+          prop: 'deptName',
+          overHidden: true,
+          search: true
+        }, {
+          label: '部门全称',
+          prop: 'fullName',
+          overHidden: true,
+          search: true
+        }, {
+          label: '部门分类',
+          prop: 'deptCategoryName',
+          overHidden: true,
+        }]
+      }
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    init() {
+      if (!this.isInit) {
+        if (this.customOption) {
+          const { deptColumn, deptProps } = this.customOption
+          if (deptColumn) this.$set(this.option, 'column', deptColumn)
+          if (deptProps) this.$set(this, 'props', deptProps)
+        }
+        this.isInit = true
+      }
+    },
+    handleConfirm() {
+      if (this.selectionList.length === 0) {
+        this.$message.warning("请至少选择一项")
+        return
+      }
+      this.$emit('confirm', this.ids, this.names)
+      this.handleClose()
+    },
+    handleClose(done) {
+      // this.selectionClear()
+      this.visible = false
+      if (done && typeof done == 'function') done()
+    },
+    searchReset() {
+      this.query = {}
+      this.onLoad(this.page)
+    },
+    searchChange(params, done) {
+      this.query = {
+        ...params,
+        parentId: ''
+      }
+      this.page.currentPage = 1
+      this.onLoad(this.page, params)
+      done()
+    },
+    selectionClear() {
+      this.selectionList = []
+      if (this.$refs.crud) this.$refs.crud.toggleSelection()
+    },
+    rowClick(row) {
+      this.$refs.crud.toggleSelection([row])
+    },
+    changeDefaultChecked() {
+      this.selectionClear()
+      if (this.defaultChecked) {
+        const checks = this.defaultChecked.split(",")
+        if (checks.length > 0) {
+          checks.forEach(c => {
+            const row = this.findRow(this.data, c)
+            if (row) this.$refs.crud.toggleRowSelection(row, true)
+          })
+        }
+      }
+    },
+    findRow(list, id) {
+      if (!list) return
+      for (let i = 0; i < list.length; i++) {
+        const data = list[i]
+        if (data.id == id) return data
+        else if (data.children) return this.findRow(data.children, id)
+      }
+    },
+    onLoad(page, params = {}) {
+      this.loading = true;
+      const param = {
+        parentId: 0,
+        ...Object.assign(params, this.query)
+      }
+      this.$axios.get(this.url, { params: param }).then(res => {
+        this.data = this.getAsVal(res, this.props.data) || []
+        this.loading = false
+      })
+    },
+    treeLoad(tree, treeNode, resolve) {
+      const parentId = tree.id;
+      this.$axios.get(this.url, { params: { parentId } }).then(res => {
+        resolve(this.getAsVal(res, this.props.data) || []);
+      })
+    },
+    getAsVal(obj, bind = '') {
+      let result = this.deepClone(obj)
+      if (this.validatenull(bind)) return result
+      bind.split('.').forEach(ele => {
+        if (!this.validatenull(result[ele])) {
+          result = result[ele]
+        } else {
+          result = ''
+        }
+      });
+      return result
+    }
+  }
+}
+</script>

src/views/plugin/workflow/process/components/user-option.vue

@@ -6,7 +6,8 @@
              width="60%"
              :before-close="handleClose"
              append-to-body>
-    <p v-if="all" style="padding: 0 20px;">不限制权限，所有人均可发起：<el-switch v-model="switchAll"></el-switch>（平台需单独配置）</p> 
+    <p v-if="all"
+       style="padding: 0 20px;">不限制权限，所有人均可发起：<el-switch v-model="switchAll"></el-switch>（平台需单独配置）</p>
     <el-table v-if="visible"
               class="avue-crud"
               :data="data"
@@ -77,17 +78,15 @@
             </avue-input-tree>
           </template>
           <template v-else-if="row.type == 'dept'">
-            <avue-input-tree :ref="`dept_${$index}`"
+            <el-input v-model="row.text"
-                             v-model="row.value"
+                      size="mini"
-                             size="mini"
+                      placeholder="部门"
-                             dataType="string"
+                      readonly
-                             multiple
+                      @click.native="handleSelect($index, 'dept-select')">
-                             clearable
+              <template #append>
-                             placeholder="部门"
+                <el-button icon="el-icon-plus"></el-button>
-                             :dic="deptList"
+              </template>
-                             :props="deptProps || {label: 'deptName', value: 'id'}"
+            </el-input>
-                             @change="handleChange($index, `dept_${$index}`)">
-            </avue-input-tree>
           </template>
           <template v-else-if="row.type == 'post'">
             <avue-input-tree :ref="`post_${$index}`"
@@ -131,10 +130,17 @@
                  :custom-option="customOption"
                  :default-checked="defaultChecked"
                  @onConfirm="handleSelectConfirm"></user-select>
+
+    <dept-select ref="dept-select"
+                 :url="deptUrl"
+                 :custom-option="customOption"
+                 :default-checked="defaultChecked"
+                 @confirm="handleSelectConfirm"></dept-select>
   </el-dialog>
 </template>
 <script>
 import UserSelect from './user-select.vue'
+import DeptSelect from './dept-select.vue'
 
 export default {
   props: {
@@ -145,7 +151,7 @@ export default {
     }
   },
   components: {
-    UserSelect,
+    UserSelect, DeptSelect
   },
   computed: {
     userUrl() {
@@ -180,7 +186,7 @@ export default {
     visible(val) {
       if (!this.init) {
         this.getRoleList()
-        this.getDeptList()
+        // this.getDeptList()
         this.getPostList()
         this.init = true
       }