合并【10500,10494,10499】重构组织选择组件（orgLazyLoadSelect）

applications/architecture-dee/src/commonComponents/components/orgLazyLoadSelect/IndependentList.vue

-/**
-* @Description:
-* @author cxg
-* @date 2022/12/21
-*/
-<template>
-  <div class="IndependentList-com">
-    <div v-for="(item,index) in orgList" :key="index" class="IndependentList-item dee-row-item" @click="selectFun(item)">
-      {{ labelTemplate ? $utils.attachTemplateDoubleToData(labelTemplate,item):item.name }}
-    </div>
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import http from '@/utils/http'
-export default {
-  components: {},
-  props: {
-    selectScope: {
-      type: String,
-      default: 'all'
-    },
-    labelTemplate: {
-      type: String,
-      default: ''
-    },
-    specifiedOrg: {
-      type: Array,
-      default: () => []
-    }
-  },
-  data() {
-    return {
-      orgList: []
-    }
-  },
-
-  computed: {
-    ...mapGetters(['userInfo'])
-  },
-  mounted() {
-    this.loadMoreNode()
-  },
-  methods: {
-    selectFun(data) {
-      this.$emit('nodeClick', { data })
-    },
-    loadMoreNode() {
-      if (this.selectScope === 'currentUser') {
-        http.get('/DxOrganization/getUserOrganizations?userId=' + this.userInfo.id).then(res => {
-          this.orgList = res.items
-        })
-      } else if (this.selectScope === 'specified') {
-        this.pageFrom = 1
-        this.isLoadMore = true
-        const params = {
-          'searchItems': {
-            'items': [
-              {
-                'fieldName': 'id',
-                'operator': 'IN',
-                'value': this.specifiedOrg
-              },
-              {
-                'fieldName': 'independentManageFlag',
-                'operator': 'EQ',
-                'value': true
-              }
-            ]
-          }
-        }
-        this.$api.searchApi('DxOrganization', params).then(res => {
-          if (res.items.last) {
-            this.isLoadMore = false
-          }
-          this.orgList = res.items.content
-        })
-      } else {
-        this.pageFrom = 1
-        this.isLoadMore = true
-        const params = {
-          'searchItems': {
-            'items': [
-              {
-                'fieldName': 'independentManageFlag',
-                'operator': 'EQ',
-                'value': true
-              }
-            ]
-          }
-        }
-        this.$api.searchApi('DxOrganization', params).then(res => {
-          if (res.items.last) {
-            this.isLoadMore = false
-          }
-          this.orgList = res.items.content
-        })
-      }
-    }
-  }
-}
-
-</script>
-<style lang='scss'>
-.IndependentList-com{
-    padding: 4px;
-    height: 400px;
-    overflow: auto;
-    .IndependentList-item{
-        cursor: pointer;
-        padding:8px;
-        margin: 8px 0;
-        border:1px solid #EBEEF5;
-
-    }
-}
-</style>

applications/architecture-dee/src/commonComponents/components/orgLazyLoadSelect/IndependentOrgTree.vue

+<template>
+  <div class="IndependentOrgTreeCmp">
+    <el-input v-model="orgName" class="tree-input" placeholder="请输入组织名称" @keyup.enter.native="onQuery">
+      <el-button slot="append" icon="el-icon-search" class="search-btn" @click.stop="onQuery" />
+    </el-input>
+    <div class="tree-wrap">
+      <el-tree
+        ref="tree"
+        node-key="id"
+        show-checkbox
+        :data="treeData"
+        :highlight-current="true"
+        :check-on-click-node="true"
+        :check-strictly="true"
+        @check="onCheck"
+      >
+        <span slot-scope="{ data }" class="custom-tree-node">
+          {{ labelTemplate ? $utils.attachTemplateDoubleToData(labelTemplate,data) : data.fullPath }}
+        </span>
+      </el-tree>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import http from '@/utils/http'
+
+export default {
+  name: 'IndependentOrgTree',
+  props: {
+    selectScope: {
+      type: String,
+      default: 'all'
+    },
+    labelTemplate: {
+      type: String,
+      default: ''
+    },
+    specifiedOrg: {
+      type: Array,
+      default: () => []
+    },
+    // 多选
+    isMulti: {
+      type: Boolean,
+      default: false
+    },
+    // 选中的数据
+    checkedData: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      orgName: '',
+      orgNameCopy: '',
+      treeData: [],
+      checkedKeys: [1]
+    }
+  },
+  computed: {
+    ...mapGetters(['userInfo'])
+  },
+  mounted() {
+    this.loadTreeData()
+  },
+  methods: {
+    loadTreeData() {
+      let handler = null
+      if (this.selectScope === 'currentUser') {
+        handler = http.get('/DxOrganization/getUserOrganizations?userId=' + this.userInfo.id)
+          .then(res => res.items)
+      } else if (this.selectScope === 'specified') {
+        const params = {
+          'searchItems': {
+            'items': [
+              {
+                'fieldName': 'id',
+                'operator': 'IN',
+                'value': this.specifiedOrg
+              },
+              {
+                'fieldName': 'independentManageFlag',
+                'operator': 'EQ',
+                'value': true
+              }
+            ]
+          }
+        }
+        if (this.orgNameCopy) {
+          params.searchItems.items.push({
+            'fieldName': 'name',
+            'operator': 'LIKE',
+            'value': this.orgNameCopy
+          })
+        }
+        handler = this.$api.searchApi('DxOrganization', params)
+          .then(res => res.items.content)
+      } else {
+        const params = {
+          'searchItems': {
+            'items': [
+              {
+                'fieldName': 'independentManageFlag',
+                'operator': 'EQ',
+                'value': true
+              }
+            ]
+          }
+        }
+        if (this.orgNameCopy) {
+          params.searchItems.items.push({
+            'fieldName': 'name',
+            'operator': 'LIKE',
+            'value': this.orgNameCopy
+          })
+        }
+        handler = this.$api.searchApi('DxOrganization', params)
+          .then(res => res.items.content)
+      }
+      handler.then(items => {
+        this.treeData = this.setNodeFullPath(items)
+        this.setCheckedData()
+      })
+    },
+    onQuery() {
+      const orgName = (this.orgName || '').trim()
+      if (this.orgNameCopy !== orgName) {
+        this.orgNameCopy = orgName
+        this.loadTreeData()
+      }
+    },
+    onCheck(data, checked) {
+      clearTimeout(this.onCheck.timmer)
+      const treeRef = this.$refs.tree
+      if (checked) {
+        if (!this.isMulti) {
+          treeRef.getCheckedKeys().forEach(id => {
+            if (id !== data.id) {
+              treeRef.setChecked(id, false)
+            }
+          })
+        }
+      }
+      this.onCheck.timmer = setTimeout(() => {
+        this.updateCheckedData()
+      }, 200)
+    },
+    updateCheckedData() {
+      const checkedData = this.$refs.tree.getCheckedNodes()
+      this.$emit('checked', checkedData)
+    },
+    // 取消勾选方法
+    uncheck(items) {
+      items.forEach(item => {
+        this.$refs.tree.setChecked(item.id, false)
+      })
+      this.$nextTick(() => {
+        this.updateCheckedData()
+      })
+    },
+    // 设置节点全路径
+    setNodeFullPath(children, parent) {
+      let parentPath = this.$utils._get(parent, 'fullPath') || ''
+      if (parentPath) {
+        parentPath += '/'
+      }
+      children.forEach(data => {
+        data.fullPath = parentPath + (data.name || '')
+      })
+      return children
+    },
+    // 回显已勾选数据
+    setCheckedData() {
+      if (!(Array.isArray(this.checkedData) && this.checkedData.length > 0)) return
+      this.$nextTick(() => {
+        const treeRef = this.$refs.tree
+        const keys = treeRef.getCheckedKeys()
+        const ids = this.checkedData.map(m => m.id).filter(m => !keys.includes(m))
+        if (ids.length > 0) {
+          ids.forEach(id => treeRef.setChecked(id, true))
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.IndependentOrgTreeCmp {
+  height: 100%;
+  .tree-input {
+    margin: 5px;
+    width: calc(100% - 5px);
+    .search-btn {
+      padding-left: 0;
+      padding-right: 0;
+      width: 50px;
+    }
+  }
+  .tree-wrap {
+    height: calc(100% - 42px);
+    overflow-y: auto;
+  }
+}
+</style>

applications/architecture-dee/src/commonComponents/components/orgLazyLoadSelect/config.js

@@ -125,7 +125,7 @@ export default {
           component: {
             obscure: `!this.form.component.isMulti`,
             name: 'el-select',
-            defaultValue: 'object',
+            defaultValue: 'String',
             options: [
               {
                 'label': '数组', 'value': 'Array'
@@ -150,20 +150,6 @@ export default {
         }
       ]
     }
-  ],
-  data() {
-    return {
-      // secretOptions: []
-    }
-  },
-  created() {
-  },
-  mounted() {},
-  computed: {
-
-  },
-  methods: {
-
-  }
+  ]
 }
 

applications/architecture-dee/src/commonComponents/components/orgLazyLoadSelect/props.js

+export default {
+  props: {
+    value: {
+      type: [String, Number, Object, Array],
+      default: null
+    },
+    bindType: {
+      type: [String, Number, Object],
+      default: ''
+    },
+    isActiveUserDefaultValue: {
+      type: Boolean,
+      default: false
+    },
+    isActiveUserIndependentDefaultValue: {
+      type: Boolean,
+      default: false
+    },
+    valueType: {
+      type: String,
+      default: 'String'
+    },
+    initBindKey: {
+      type: String,
+      default: 'id'
+    },
+    labelTemplate: {
+      type: String,
+      default: ''
+    },
+    selectOrgType: {
+      type: String,
+      default: 'normal'
+    },
+    selectScope: {
+      type: String,
+      default: 'all'
+    },
+    specifiedOrg: {
+      type: Array,
+      default: () => []
+    },
+    isMulti: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    item: {
+      type: Object,
+      default: () => { return {} }
+    },
+    // 返回一个对象
+    returnObj: {
+      type: Boolean,
+      default: true
+    },
+    parentId: {
+      type: [Number, String],
+      default: ''
+    }
+  }
+}

applications/architecture-dee/src/commonComponents/components/orgLazyLoadSelect/selectedOrgTable.vue

+<template>
+  <dee-up-table
+    :data="data"
+    :columns="columns"
+    :index-row="indexRow"
+  >
+    <div slot="header" class="tools-wrap">
+      <span class="counts">已选组织：{{ data.length }}</span>
+      <dee-tools :tools="tools" mode="normal" />
+    </div>
+  </dee-up-table>
+</template>
+
+<script>
+export default {
+  name: 'SelectedOrgTable',
+  props: {
+    data: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    indexRow() {
+      return {
+        title: '序号',
+        align: 'center',
+        width: '70'
+      }
+    },
+    columns() {
+      return [
+        {
+          title: '操作',
+          key: 'operate',
+          hideTip: true,
+          minWidth: '50',
+          align: 'center',
+          component: {
+            show: true,
+            name: 'EditTableRow',
+            props: {
+              btns: [
+                {
+                  operation: '删除',
+                  icon: '/icons/c-creatbackups.png',
+                  handleClick: (row, index) => {
+                    this.remove([row])
+                  }
+                }
+              ]
+            }
+          }
+        },
+        { title: '组织', key: 'name', align: 'left' },
+        { title: '组织全路径', key: 'fullPath', align: 'left' }
+      ]
+    },
+    tools() {
+      return [
+        {
+          name: '一键清空',
+          icon: '/icons/c-remove.png',
+          handler: {
+            click: () => {
+              this.remove(this.data)
+            }
+          }
+        }
+      ]
+    }
+  },
+  methods: {
+    remove(items) {
+      if (Array.isArray(items) && items.length > 0) {
+        this.$emit('uncheck', items)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.tools-wrap {
+    display: flex;
+    align-items: center;
+    .counts {
+        margin-right: 20px;
+    }
+}
+</style>