From 557912138f27279bc53db2ca90fd4eaebb858a7b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8C=83=E5=BC=BA=E5=BC=BA?= <787203167>
Date: Fri, 21 Apr 2023 18:00:52 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BA=BA=E5=91=98=E9=80=89=E6=8B=A9=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/PersonnelSelection/index.vue   | 594 +++---------------
 1 file changed, 91 insertions(+), 503 deletions(-)

diff --git a/jero-web/src/components/PersonnelSelection/index.vue b/jero-web/src/components/PersonnelSelection/index.vue
index 624287933..0286d1e23 100644
--- a/jero-web/src/components/PersonnelSelection/index.vue
+++ b/jero-web/src/components/PersonnelSelection/index.vue
@@ -2,98 +2,39 @@
   <div>
     <div class="itemModelStand-select" v-if="!isInput">
       <a-select
+        :mode="isSingleChoice?'':'multiple'"
         class="itemModelStand-input"
-        :value="valueSelect"
-        @change="onChange"
-        mode="multiple"
-        :disabled="disabled"
+        show-search
+        :label-in-value="isSingleChoice ? false:true"
+        :value="selectValue"
         :placeholder="$t('PleaseSelect')+query.db_field_txt"
-        :getPopupContainer="triggerNode=> triggerNode.parentNode">
-        <a-select-option
-          v-for="(item,index) in dictOptions"
-          :key="index"
-          :value="item.value">
-                        <span class="itemOption" :title="item.title">
-                          {{ item.title }}
-                        </span>
+        style="width: 100%"
+        :disabled="disabled"
+        :default-active-first-option="false"
+        :filter-option="false"
+        @search="fetchUser"
+        @change="handleChange"
+      >
+        <a-spin v-if="fetching" slot="notFoundContent" size="small"/>
+        <a-select-option v-for="d in selectData" :key="d.id">
+          {{ d.username }}
         </a-select-option>
       </a-select>
-      <!--      <a-input class="box-input" :value="value" @input="indexclick($event)"-->
-      <!--               :disabled="true"-->
-      <!--               :title="value"-->
-      <!--               :placeholder="$t('PleaseSelect')+query.db_field_txt"/>-->
-      <a-button type="primary" class="button-box" :disabled="disabled" @click="standardClick">
-        {{this.$t('PersonnelSelection')}}
-      </a-button>
-      <!--      <a-button type="primary" v-if='isDelete' class="button-box" @click="standardDelete">-->
-      <!--        {{this.$t('delete')}}-->
-      <!--      </a-button>-->
     </div>
-    <div class="box-title-text" v-if="isInput">
-      <a-input :class="{'box-input':!isClass}" :value="value"
-               readonly
-               :title="value"
-               @click.native="standardClick"
-               :placeholder="$t('PleaseSelect')+query.db_field_txt"/>
-    </div>
-    <a-drawer
-      :title="$t('PersonnelSelection')"
-      :maskClosable="false"
-      :width="600"
-      placement="right"
-      :closable="true"
-      @close="handleCancel"
-      :visible="visible"
-      style="height: 100%;overflow: auto;padding-bottom: 53px;">
-      <a-input-search style="margin-bottom: 8px" :placeholder="$t('NodeQuickLookup')"
-                      v-model="searchModel" @search="onSearch"/>
-      <div class="drawer-content">
-        <JLoading :loading="loading">{{$t('dataLoading')}}</JLoading>
-        <!--        <virtualNodeTree-->
-        <!--          v-if="treeVisible"-->
-        <!--          ref="virtualNodeTreeRef"-->
-        <!--          :keeps="40"-->
-        <!--          show-checkbox-->
-        <!--          v-model="checkboxList"-->
-        <!--          class="treeWrap"-->
-        <!--          :defaultCheckedKeys="defaultCheckedKeys"-->
-        <!--          :defaultExpandAll="defaultExpandAll"-->
-        <!--          :check-strictly="false"-->
-        <!--          node-key="id"-->
-        <!--          @check="handleCheckChange"-->
-        <!--          @check-change="checkChange"-->
-        <!--          :data.sync="gData">-->
-        <!--                           <span slot-scope="{ data }">-->
-        <!--                            <span :class="{'active':data.color ? true:false}">-->
-        <!--                              {{ data.title }}-->
-        <!--                            </span>-->
-        <!--                           </span>-->
-        <!--        </virtualNodeTree>-->
-        <a-tree
-          style="margin-bottom: 60px;height: 600px"
-          v-if="treeVisible"
-          checkable
-          checkStrictly
-          :loading="loading"
-          :tree-data="gData"
-          @check="onCheck"
-          @expand="onExpand"
-          v-model:checkedKeys="defaultCheckedKeys"
-          :defaultExpandedKeys="defaultExpandedKeys"
-        >
-        </a-tree>
-      </div>
-      <div class="drawer-bootom-button">
-        <a-button @click="handleCancel" style="margin-right: 16px">{{$t('cancel')}}</a-button>
-        <a-button @click="handleSubmit" type="primary">{{$t('submit')}}</a-button>
-      </div>
-    </a-drawer>
+    <!--    <div class="box-title-text" v-if="isInput">-->
+    <!--      <a-input :class="{'box-input':!isClass}" :value="value"-->
+    <!--               readonly-->
+    <!--               :title="value"-->
+    <!--               @click.native="standardClick"-->
+    <!--               :placeholder="$t('PleaseSelect')+query.db_field_txt"/>-->
+    <!--    </div>-->
   </div>
 </template>
 
 <script>
   import { getAction, postAction } from '@/api/manage'
   import virtualNodeTree from '@/components/virtualNodeTree/tree'
+  import debounce from 'lodash/debounce'
   import XEUtils from 'xe-utils'
   import VXETable from 'vxe-table'
 
@@ -104,11 +45,12 @@
       virtualNodeTree
     },
     data() {
+      this.lastFetchId = 0
+      this.fetchUser = debounce(this.fetchUser, 800)
       return {
         loading: false,
         gData: [],
         valueSelect: [],
-        dictOptions: [],
         autoExpandParent: false,
         checkboxList: [],
         expandedKeys: [],
@@ -125,12 +67,14 @@
         content: [],
         dataList: [],
         defaultExpandAll: false,
-        searchData: ''
+        selectData: [],
+        fetching: false,
+        selectValue: this.isSingleChoice ? '' : []
       }
     },
     mounted() {
-      this.valueSelect = []
-      this.dictOptions = []
+      this.selectValue = []
+      this.selectData = []
       setTimeout(() => {
         if (this.value) {
           let contentName = []
@@ -149,439 +93,83 @@
           } else {
             contentId = []
           }
-          contentId.forEach((res, index) => {
-            this.dictOptions.push({
-              value: res,
-              title: contentName[index]
+          if (this.isSingleChoice) {
+            if (contentId && contentId.length > 0) {
+              this.selectValue = contentId[0]
+              contentId.forEach((res, index) => {
+                this.selectData.push({
+                  id: res,
+                  username: contentName[index]
+                })
+              })
+              this.selectData = [...this.selectData]
+            }
+          } else {
+            contentId.forEach((res, index) => {
+              this.selectValue.push({
+                key: res,
+                label: contentName[index]
+              })
+              this.selectData.push({
+                id: res,
+                username: contentName[index]
+              })
             })
-            this.valueSelect.push(res)
-          })
+          }
         }
       }, 600)
     },
     methods: {
-      // checkChange(val, checked, indeterminate) {
-      //   if (!checked && this.searchData) {
-      //     this.userName = this.userName.filter(res => {
-      //       return res != val.title
-      //     })
-      //     this.userIds = this.userIds.filter(res => {
-      //       return res != val.id
-      //     })
-      //     for (let i = 0; i < this.userIds.length; i++) {
-      //       if (this.userIds[i] == val.parentId) {
-      //         this.userIds.splice(i, 1)
-      //         this.userName.splice(i, 1)
-      //         i--
-      //       }
-      //     }
-      //   } else if (checked && this.searchData) {
-      //     this.userName.push(val.title)
-      //     this.userIds.push(val.id)
-      //   }
-      // },
-      // handleCheckChange(val, data, checked) {
-      //   if (!this.searchData) {
-      //     this.userName = []
-      //     this.userIds = []
-      //     if (data.checkedNodes && data.checkedNodes.length > 0) {
-      //       data.checkedNodes.forEach(res => {
-      //         this.userName.push(res.title)
-      //         this.userIds.push(res.id)
-      //       })
-      //     }
-      //   }
-      // },
-      standardClick() {
-        this.treeVisible = false
-        this.departId = ''
-        this.searchModel = ''
-        this.searchData = ''
-        this.userIds = []
-        this.userName = []
-        this.queryDepartUserTreeList(1)
-        this.visible = true
-        // let gData = localStorage.getItem('gData')
-        // if (gData) {
-        //   let dataList = JSON.parse(gData)
-        //   if (!this.selectDepartment) {
-        //     dataList.forEach(res => {
-        //       if (res.type == 'Depart') {
-        //         res.disabled = true
-        //       }
-        //     })
-        //   }
-        //   this.dataList = this.toTree(dataList)
-        // }
-        // setTimeout(() => {
-        //   if (gData) {
-        //     this.gData = this.dataList
-        //     this.gData = [...this.gData]
-        //     // this.treeVisible = true
-        //     if (this.personneQuery[this.query.db_field_name + 'Name']) {
-        //       this.userName = this.personneQuery[this.query.db_field_name + 'Name'].split(',')
-        //     } else if (this.personneQuery[this.query.db_field_name]) {
-        //       this.userName = this.personneQuery[this.query.db_field_name].split(',')
-        //     } else {
-        //       this.userName = []
-        //     }
-        //     if (this.personneQuery[this.query.db_field_name + '_id']) {
-        //       this.userIds = this.personneQuery[this.query.db_field_name + '_id'].split(',')
-        //     } else if (this.personneQuery[this.query.db_field_name]) {
-        //       this.userIds = this.personneQuery[this.query.db_field_name].split(',')
-        //     } else {
-        //       this.userIds = []
-        //     }
-        //     this.defaultCheckedKeys = this.userIds
-        //     this.defaultCheckedKeys = [...this.defaultCheckedKeys]
-        //     this.defaultExpandAll = false
-        //     this.treeVisible = true
-        //   } else {
-        //     this.queryDepartUserTreeList(1)
-        //   }
-        // }, 200)
+      fetchUser(value) {
+        this.lastFetchId += 1
+        const fetchId = this.lastFetchId
+        this.selectData = []
+        this.fetching = true
+        this.getUserAndDepart(value, (res) => {
+          this.selectData = res
+          this.fetching = false
+        })
       },
-      // deleteChildren(value, arr) {
-      //   let newarr = []
-      //   arr.forEach(element => {
-      //     if (element.title.indexOf(value) > -1) { // 判断条件
-      //       newarr.push(element)
-      //     } else {
-      //       if (element.children && element.children.length > 0) {
-      //         let redata = this.deleteChildren(value, element.children)
-      //         if (redata && redata.length > 0) {
-      //           let obj = {
-      //             ...element,
-      //             children: redata
-      //           }
-      //           newarr.push(obj)
-      //         }
-      //       }
-      //     }
-      //   })
-      //   return newarr
-      // },
-      //将数据拼成树形结构
-      // toTree(config, num) {
-      //   // 删除 所有 children,以防止多次调用
-      //   config.forEach(function(item) {
-      //     delete item.children
-      //   })
-      //   // 将数据存储为 以 id 为 KEY 的 map 索引数据列
-      //   let map = {}
-      //   config.forEach((item) => {
-      //     item.label = item.name
-      //     item.key = item.id
-      //
-      //     item.title = item.name + (item.itemName ? ' ' + item.itemName : '')
-      //     map[item.id] = item
-      //   })
-      //   let val = []
-      //   config.forEach((item) => {
-      //     // 以当前遍历项，的pid,去map对象中找到索引的id
-      //     let parent = map[item.parentId]
-      //
-      //     // 如果找到索引，那么说明此项不在顶级当中,那么需要把此项添加到，他对应的父级中
-      //     if (parent) {
-      //       (parent.children || (parent.children = [])).push(item)
-      //     } else {
-      //       //如果没有在map中找到对应的索引ID,那么直接把 当前的item添加到 val结果集中，作为顶级
-      //       val.push(item)
-      //     }
-      //   })
-      //   return val
-      // },
-      standardDelete() {
-        this.$emit('input', null)
-        this.$forceUpdate()
-        this.$emit('deleteData', this.query.db_field_name)
-      },
-      // onSelect(selectedKeys, info) {
-      //   console.log(selectedKeys)
-      //   this.selectedKey = selectedKeys
-      // },
-
-      onCheck(checkedKeys, info) {
-        this.userIds = checkedKeys.checked
+      handleChange(selectValue) {
         if (this.isSingleChoice) {
-          if (this.userIds.length > 1) {
-            this.userIds.shift()
-          }
-        }
-        this.userName = []
-        if (this.userIds.length > 0) {
-          for (let i = 0; i < this.userIds.length; i++) {
-            for (let j = 0; j < this.defaultCheckedKeysName.length; j++) {
-              if (this.userIds[i] == this.defaultCheckedKeysName[j].id) {
-                this.userName.push(this.defaultCheckedKeysName[j].name)
-              }
-            }
-          }
-        }
-        if (info.checkedNodes && info.checkedNodes.length > 0) {
-          info.checkedNodes.forEach(res => {
-            if (res.data.props.dataRef.key) {
-              this.content.push({
-                id: res.data.props.dataRef.key,
-                title: res.data.props.dataRef.title
-              })
-            } else {
-              this.content.push({
-                id: res.data.props.id,
-                title: res.data.props.title
-              })
-            }
+          this.selectValue = selectValue
+          let content = this.selectData.filter(res => {
+            return res.id === selectValue
           })
-        }
-        if (this.content && this.content.length > 0) {
-          for (let i = 0; i < this.content.length; i++) {
-            for (let j = i + 1; j < this.content.length; j++) {
-              if (this.content[i].id == this.content[j].id) {
-                this.content.splice(j, 1)
-                j--
-              }
-            }
-          }
-          this.userIds.forEach(res => {
-            this.content.forEach(val => {
-              if (res == val.id) {
-                this.userName.push(val.title)
-              }
+          this.$emit('input', content[0].username)
+          this.$emit('change', this.query.db_field_name, selectValue, this.query.subscript)
+        } else {
+          Object.assign(this, {
+            selectValue,
+            fetching: false
+          })
+          let id = []
+          let username = []
+          if (this.selectValue.length > 0) {
+            this.selectValue.forEach(res => {
+              id.push(res.key)
+              username.push(res.label)
             })
-          })
-        }
-        if (this.userName.length > 0) {
-          for (let i = 0; i < this.userName.length; i++) {
-            for (let j = i + 1; j < this.userName.length; j++) {
-              if (this.userName[i] == this.userName[j]) {
-                this.userName.splice(j, 1)
-                j--
-              }
-            }
           }
+          this.$emit('input', username.join(','))
+          this.$emit('change', this.query.db_field_name, id.join(','), this.query.subscript)
         }
       },
       handleCancel() {
         this.visible = false
         this.treeVisible = false
       },
-      onChange(value) {
-        this.valueSelect = value
-        console.log(this.valueSelect)
-        console.log(this.dictOptions)
-        this.userIds = []
-        this.userName = []
-        if (this.valueSelect && this.valueSelect.length > 0) {
-          value.forEach(res => {
-            this.dictOptions.forEach(val => {
-              if (res == val.value) {
-                this.userIds.push(val.value)
-                this.userName.push(val.title)
-              }
-            })
-          })
+      getUserAndDepart(value, callback) {
+        let query = {
+          current: 1,
+          pageSize: 10,
+          username: '*' + value + '*'
         }
-        let userIds = JSON.parse(JSON.stringify(this.userIds))
-        let userName = JSON.parse(JSON.stringify(this.userName))
-        console.log(userIds)
-        this.$emit('input', userName.join(','))
-        this.$emit('change', this.query.db_field_name, userIds.join(','), this.query.subscript)
-      },
-      handleSubmit() {
-        // if (this.userIds && this.userIds.length > 0) {
-        if (this.isSingleChoice) {
-          if (this.userIds.length > 1) {
-            this.$message.warning(this.$t('onlyOnePersonCanBeSelected'))
-            return
-          }
-        }
-        let userIds = JSON.parse(JSON.stringify(this.userIds))
-        let userName = JSON.parse(JSON.stringify(this.userName))
-        // userName = userName.filter(function(item, index) {
-        //   return userName.indexOf(item) === index  // 因为indexOf 只能查找到第一个
-        // })
-        // userIds = userIds.filter(function(item, index) {
-        //   return userIds.indexOf(item) === index  // 因为indexOf 只能查找到第一个
-        // })
-        if (!this.isInput) {
-          this.dictOptions = []
-          this.valueSelect = []
-          if (userIds && userIds.length > 0) {
-            userIds.forEach((res, index) => {
-              this.dictOptions.push({
-                title: userName[index],
-                value: res
-              })
-              this.valueSelect.push(res)
-            })
-          }
-        }
-        this.$emit('input', userName.join(','))
-        this.$emit('change', this.query.db_field_name, userIds.join(','), this.query.subscript)
-        this.visible = false
-        this.treeVisible = false
-        // } else {
-        //   this.$message.warning(this.$t('pleaseSelectPersonFirst'))
-        // }
-      },
-      indexclick(event) {
-        this.$emit('input', event.target.value)
-        this.departId = ''
-        this.searchModel = ''
-        this.userIds = []
-        this.userName = []
-        this.defaultCheckedKeys = []
-      },
-      onSearch(e) {
-        // this.treeVisible = false
-        // let p = new Promise((resolve, reject) => {
-        //   resolve()
-        // })
-        // p.then(() => {
-        //   this.searchData = e
-        //   let gData = localStorage.getItem('gData')
-        //   let content = []
-        //   if (gData) {
-        //     if (e) {
-        //       JSON.parse(gData).forEach(res => {
-        //         if (res.type == 'User') {
-        //           if (res.name.includes(e)) {
-        //             res.color = true
-        //             content.push(res)
-        //           }
-        //         }
-        //         // else if(res.type == 'Depart'){
-        //         //   content.push(res)
-        //         // }
-        //       })
-        //       let gDataAdmin = this.toTree(content)
-        //       this.gData = this.deleteChildren(e, gDataAdmin)
-        //       this.defaultExpandAll = true
-        //       this.treeVisible = true
-        //       this.defaultCheckedKeys = this.userIds
-        //       this.defaultCheckedKeys = [...this.defaultCheckedKeys]
-        //       this.loading = false
-        //     } else {
-        //       let content = JSON.parse(gData)
-        //       if (!this.selectDepartment) {
-        //         content.forEach(res => {
-        //           if (res.type == 'Depart') {
-        //             res.disabled = true
-        //           }
-        //         })
-        //       }
-        //       this.gData = this.toTree(content)
-        //       this.defaultExpandAll = false
-        //       this.defaultCheckedKeys = this.userIds
-        //       this.defaultCheckedKeys = [...this.defaultCheckedKeys]
-        //       this.treeVisible = true
-        //       this.loading = false
-        //     }
-        //   }
-        // })
-        this.gData = []
-        this.departId = ''
-        this.visibleTree = false
-        if (e) {
-          this.getUserAndDepart()
-        } else {
-          this.treeVisible = false
-          this.queryDepartUserTreeList(2)
-        }
-      },
-      getUserAndDepart() {
-        getAction('sys/user/getUserAndDepart', { name: this.searchModel }).then((res) => {
-          if (res) {
-            this.gData = res.filter(ele => ele.flag === 'DEPART')
-          } else {
-            this.gData = []
-          }
-          this.visibleTree = true
-        })
-      },
-      onExpand(selectedKeys, val) {
-        if (this.searchModel == '' || !this.searchModel) {
-          if (val.expanded) {
-            if (this.departId == val.node.value) {
-            } else {
-              this.departId = val.node.value
-              this.queryDepartUserTreeList(2)
-            }
-          }
-        }
-      },
-      queryDepartUserTreeList(num) {
-        let gData = JSON.parse(JSON.stringify(this.gData))
-        if (gData && gData.length > 0) {
-          gData = JSON.stringify(gData)
-        } else {
-          gData = ''
-        }
-        this.confirmLoading = true
-        this.loading = true
-        //queryDepartUserTreeList
-        //queryUserTreeList
-        postAction('sys/user/queryDepartUserTreeList', {
-          departId: this.departId,
-          json: gData,
-          flag: '1'
-        }).then((res) => {
-          this.confirmLoading = false
+        getAction('/sys/user/page', query).then((res) => {
           if (res.success) {
-            this.loading = false
-            // localStorage.setItem('gData', JSON.stringify(res.result))
-            // this.toTree(dataList)
-            // let content = JSON.parse(JSON.stringify(res.result))
-            // if (!this.selectDepartment) {
-            //   res.result.forEach(res => {
-            //     if (res.type == 'Depart') {
-            //       res.disabled = true
-            //     }
-            //   })
-            // }
-            // localStorage.removeItem('gData')
-            // localStorage.setItem('gData', JSON.stringify(content))
-            // this.gData = this.toTree(res.result)
-            this.gData = res.result
-            this.gData = [...this.gData]
-            // this.gData[0].isLeaf = false
-            this.defaultExpandedKeys = [this.departId]
-            if (num == 1) {
-              console.log(this.personneQuery)
-              if (this.userName && this.userName.length == 0) {
-                if (this.personneQuery[this.query.db_field_name + 'Name']) {
-                  this.userName = this.personneQuery[this.query.db_field_name + 'Name'].split(',')
-                } else if (this.personneQuery[this.query.db_field_name]) {
-                  this.userName = this.personneQuery[this.query.db_field_name].split(',')
-                } else {
-                  this.userName = []
-                }
-              }
-              if (this.userIds && this.userIds.length == 0) {
-                if (this.personneQuery[this.query.db_field_name + '_id']) {
-                  this.userIds = this.personneQuery[this.query.db_field_name + '_id'].split(',')
-                } else if (this.personneQuery[this.query.db_field_name]) {
-                  this.userIds = this.personneQuery[this.query.db_field_name].split(',')
-                } else {
-                  this.userIds = []
-                }
-              }
-              this.defaultCheckedKeys = this.userIds
-              this.defaultCheckedKeys = [...this.defaultCheckedKeys]
-              this.defaultCheckedKeysName = []
-              if (this.defaultCheckedKeys.length > 0) {
-                for (let i = 0; i < this.defaultCheckedKeys.length; i++) {
-                  this.defaultCheckedKeysName.push({
-                    id: this.defaultCheckedKeys[i],
-                    name: this.userName[i]
-                  })
-                }
-              }
-            }
-            this.defaultExpandAll = false
-            this.treeVisible = true
+            callback && callback(res.result.records || res.result)
           } else {
-            this.gData = []
+            callback && callback([])
           }
         })
       }
@@ -602,7 +190,7 @@
   }
 
   .itemModelStand-input {
-    width: calc(100% - 100px);
+    width: 100%;
     display: inline-block;
     height: 38px;
   }
@@ -695,7 +283,7 @@
   }
 </style>
 <style>
-  .itemModelStand-select .ant-select-dropdown--multiple {
-    display: none !important;
-  }
+  /*.itemModelStand-select .ant-select-dropdown--multiple {*/
+  /*  display: none !important;*/
+  /*}*/
 </style>
\ No newline at end of file