From 96b44265601cc43ce08cbb64063dd2d63c387998 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AD=A3=E5=9C=A3=E5=8D=8E?= <752718920@qq.com>
Date: Sun, 7 Aug 2022 22:57:32 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8E=BB=E6=8E=89=E5=A4=9A=E4=BD=99=E7=9A=84ap?=
 =?UTF-8?q?i=E5=9C=B0=E5=9D=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../jeecgbiz/modal/JSelectDepartModal.vue     | 465 ++++++-------
 .../jeecgbiz/modal/JSelectUserByDepModal.vue  | 649 +++++++++---------
 2 files changed, 546 insertions(+), 568 deletions(-)

diff --git a/jshERP-web/src/components/jeecgbiz/modal/JSelectDepartModal.vue b/jshERP-web/src/components/jeecgbiz/modal/JSelectDepartModal.vue
index 495c5728..8469e932 100644
--- a/jshERP-web/src/components/jeecgbiz/modal/JSelectDepartModal.vue
+++ b/jshERP-web/src/components/jeecgbiz/modal/JSelectDepartModal.vue
@@ -1,241 +1,226 @@
-<template>
-  <a-modal
-    title="选择部门"
-    :width="modalWidth"
-    :visible="visible"
-    :confirmLoading="confirmLoading"
-    @ok="handleSubmit"
-    @cancel="handleCancel"
-    cancelText="关闭">
-    <a-spin tip="Loading..." :spinning="false">
-      <a-input-search style="margin-bottom: 1px" placeholder="请输入部门名称按回车进行搜索" @search="onSearch" />
-      <a-tree
-        checkable
-        :treeData="treeData"
-        :checkStrictly="true"
-        @check="onCheck"
-        @select="onSelect"
-        @expand="onExpand"
-        :autoExpandParent="autoExpandParent"
-        :expandedKeys="expandedKeys"
-        :checkedKeys="checkedKeys">
-
-        <template slot="title" slot-scope="{title}">
-          <span v-if="title.indexOf(searchValue) > -1">
-            {{title.substr(0, title.indexOf(searchValue))}}
-            <span style="color: #f50">{{searchValue}}</span>
-            {{title.substr(title.indexOf(searchValue) + searchValue.length)}}
-          </span>
-          <span v-else>{{title}}</span>
-        </template>
-      </a-tree>
-
-    </a-spin>
-  </a-modal>
-</template>
-
-<script>
-  import { queryDepartTreeList } from '@/api/api'
-  export default {
-    name: 'JSelectDepartModal',
-    props:['modalWidth','multi','rootOpened','departId'],
-    data(){
-      return {
-        visible:false,
-        confirmLoading:false,
-        treeData:[],
-        autoExpandParent:true,
-        expandedKeys:[],
-        dataList:[],
-        checkedKeys:[],
-        checkedRows:[],
-        searchValue:""
-      }
-    },
-    created(){
-      this.loadDepart();
-    },
-    watch:{
-      departId(){
-        this.initDepartComponent()
-      },
-      visible: {
-        handler() {
-          if (this.departId) {
-            this.checkedKeys = this.departId.split(",");
-            // console.log('this.departId', this.departId)
-          } else {
-            this.checkedKeys = [];
-          }
-        }
-      }
-    },
-    methods:{
-      show(){
-        this.visible=true
-        this.checkedRows=[]
-        this.checkedKeys=[]
-      },
-      loadDepart(){
-        queryDepartTreeList().then(res=>{
-          if(res.success){
-            let arr = [...res.result]
-            this.reWriterWithSlot(arr)
-            this.treeData = arr
-            this.initDepartComponent()
-            if(this.rootOpened){
-              this.initExpandedKeys(res.result)
-            }
-          }
-        })
-      },
-      initDepartComponent(){
-        let names = ''
-        if(this.departId){
-          let currDepartId = this.departId
-          for(let item of this.dataList){
-            if(currDepartId.indexOf(item.key)>=0){
-              names+=","+item.title
-            }
-          }
-          if(names){
-            names = names.substring(1)
-          }
-        }
-        this.$emit("initComp",names)
-      },
-      reWriterWithSlot(arr){
-        for(let item of arr){
-          if(item.children && item.children.length>0){
-            this.reWriterWithSlot(item.children)
-            let temp = Object.assign({},item)
-            temp.children = {}
-            this.dataList.push(temp)
-          }else{
-            this.dataList.push(item)
-            item.scopedSlots={ title: 'title' }
-          }
-        }
-      },
-      initExpandedKeys(arr){
-        if(arr && arr.length>0){
-          let keys = []
-          for(let item of arr){
-            if(item.children && item.children.length>0){
-              keys.push(item.id)
-            }
-          }
-          this.expandedKeys=[...keys]
-        }else{
-          this.expandedKeys=[]
-        }
-      },
-      onCheck (checkedKeys,info) {
-        if(!this.multi){
-          let arr = checkedKeys.checked.filter(item => this.checkedKeys.indexOf(item) < 0)
-          this.checkedKeys = [...arr]
-          this.checkedRows = (this.checkedKeys.length === 0) ? [] : [info.node.dataRef]
-        }else{
-          this.checkedKeys = checkedKeys.checked
-          this.checkedRows = this.getCheckedRows(this.checkedKeys)
-        }
-      },
-      onSelect(selectedKeys,info) {
-        let keys = []
-        keys.push(selectedKeys[0])
-        if(!this.checkedKeys || this.checkedKeys.length===0 || !this.multi){
-          this.checkedKeys = [...keys]
-          this.checkedRows=[info.node.dataRef]
-        }else{
-          let currKey = info.node.dataRef.key
-          if(this.checkedKeys.indexOf(currKey)>=0){
-            this.checkedKeys = this.checkedKeys.filter(item=> item !==currKey)
-          }else{
-            this.checkedKeys.push(...keys)
-          }
-        }
-        this.checkedRows = this.getCheckedRows(this.checkedKeys)
-      },
-      onExpand (expandedKeys) {
-        this.expandedKeys = expandedKeys
-        this.autoExpandParent = false
-      },
-      handleSubmit(){
-        if(!this.checkedKeys || this.checkedKeys.length==0){
-          this.$emit("ok",'')
-        }else{
-          this.$emit("ok",this.checkedRows,this.checkedKeys.join(","))
-        }
-        this.handleClear()
-      },
-      handleCancel(){
-        this.handleClear()
-      },
-      handleClear(){
-        this.visible=false
-        this.checkedKeys=[]
-      },
-      getParentKey(currKey,treeData){
-        let parentKey
-        for (let i = 0; i < treeData.length; i++) {
-          const node = treeData[i]
-          if (node.children) {
-            if (node.children.some(item => item.key === currKey)) {
-              parentKey = node.key
-            } else if (this.getParentKey(currKey, node.children)) {
-              parentKey = this.getParentKey(currKey, node.children)
-            }
-          }
-        }
-        return parentKey
-      },
-      onSearch(value){
-        const expandedKeys = this.dataList.map((item) => {
-          if (item.title.indexOf(value) > -1) {
-            return this.getParentKey(item.key,this.treeData)
-          }
-          return null
-        }).filter((item, i, self) => item && self.indexOf(item) === i)
-
-        Object.assign(this, {
-          expandedKeys,
-          searchValue: value,
-          autoExpandParent: true,
-        })
-
-
-      },
-      // 根据 checkedKeys 获取 rows
-      getCheckedRows(checkedKeys) {
-        const forChildren = (list, key) => {
-          for (let item of list) {
-            if (item.id === key) {
-              return item
-            }
-            if (item.children instanceof Array) {
-              let value = forChildren(item.children, key)
-              if (value != null) {
-                return value
-              }
-            }
-          }
-          return null
-        }
-
-        let rows = []
-        for (let key of checkedKeys) {
-          let row = forChildren(this.treeData, key)
-          if (row != null) {
-            rows.push(row)
-          }
-        }
-        return rows
-      }
-    }
-  }
-
-</script>
-
-<style scoped>
-
+<template>
+  <a-modal
+    title="选择部门"
+    :width="modalWidth"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    @ok="handleSubmit"
+    @cancel="handleCancel"
+    cancelText="关闭">
+    <a-spin tip="Loading..." :spinning="false">
+      <a-input-search style="margin-bottom: 1px" placeholder="请输入部门名称按回车进行搜索" @search="onSearch" />
+      <a-tree
+        checkable
+        :treeData="treeData"
+        :checkStrictly="true"
+        @check="onCheck"
+        @select="onSelect"
+        @expand="onExpand"
+        :autoExpandParent="autoExpandParent"
+        :expandedKeys="expandedKeys"
+        :checkedKeys="checkedKeys">
+
+        <template slot="title" slot-scope="{title}">
+          <span v-if="title.indexOf(searchValue) > -1">
+            {{title.substr(0, title.indexOf(searchValue))}}
+            <span style="color: #f50">{{searchValue}}</span>
+            {{title.substr(title.indexOf(searchValue) + searchValue.length)}}
+          </span>
+          <span v-else>{{title}}</span>
+        </template>
+      </a-tree>
+
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+  export default {
+    name: 'JSelectDepartModal',
+    props:['modalWidth','multi','rootOpened','departId'],
+    data(){
+      return {
+        visible:false,
+        confirmLoading:false,
+        treeData:[],
+        autoExpandParent:true,
+        expandedKeys:[],
+        dataList:[],
+        checkedKeys:[],
+        checkedRows:[],
+        searchValue:""
+      }
+    },
+    created(){
+    },
+    watch:{
+      departId(){
+        this.initDepartComponent()
+      },
+      visible: {
+        handler() {
+          if (this.departId) {
+            this.checkedKeys = this.departId.split(",");
+            // console.log('this.departId', this.departId)
+          } else {
+            this.checkedKeys = [];
+          }
+        }
+      }
+    },
+    methods:{
+      show(){
+        this.visible=true
+        this.checkedRows=[]
+        this.checkedKeys=[]
+      },
+      initDepartComponent(){
+        let names = ''
+        if(this.departId){
+          let currDepartId = this.departId
+          for(let item of this.dataList){
+            if(currDepartId.indexOf(item.key)>=0){
+              names+=","+item.title
+            }
+          }
+          if(names){
+            names = names.substring(1)
+          }
+        }
+        this.$emit("initComp",names)
+      },
+      reWriterWithSlot(arr){
+        for(let item of arr){
+          if(item.children && item.children.length>0){
+            this.reWriterWithSlot(item.children)
+            let temp = Object.assign({},item)
+            temp.children = {}
+            this.dataList.push(temp)
+          }else{
+            this.dataList.push(item)
+            item.scopedSlots={ title: 'title' }
+          }
+        }
+      },
+      initExpandedKeys(arr){
+        if(arr && arr.length>0){
+          let keys = []
+          for(let item of arr){
+            if(item.children && item.children.length>0){
+              keys.push(item.id)
+            }
+          }
+          this.expandedKeys=[...keys]
+        }else{
+          this.expandedKeys=[]
+        }
+      },
+      onCheck (checkedKeys,info) {
+        if(!this.multi){
+          let arr = checkedKeys.checked.filter(item => this.checkedKeys.indexOf(item) < 0)
+          this.checkedKeys = [...arr]
+          this.checkedRows = (this.checkedKeys.length === 0) ? [] : [info.node.dataRef]
+        }else{
+          this.checkedKeys = checkedKeys.checked
+          this.checkedRows = this.getCheckedRows(this.checkedKeys)
+        }
+      },
+      onSelect(selectedKeys,info) {
+        let keys = []
+        keys.push(selectedKeys[0])
+        if(!this.checkedKeys || this.checkedKeys.length===0 || !this.multi){
+          this.checkedKeys = [...keys]
+          this.checkedRows=[info.node.dataRef]
+        }else{
+          let currKey = info.node.dataRef.key
+          if(this.checkedKeys.indexOf(currKey)>=0){
+            this.checkedKeys = this.checkedKeys.filter(item=> item !==currKey)
+          }else{
+            this.checkedKeys.push(...keys)
+          }
+        }
+        this.checkedRows = this.getCheckedRows(this.checkedKeys)
+      },
+      onExpand (expandedKeys) {
+        this.expandedKeys = expandedKeys
+        this.autoExpandParent = false
+      },
+      handleSubmit(){
+        if(!this.checkedKeys || this.checkedKeys.length==0){
+          this.$emit("ok",'')
+        }else{
+          this.$emit("ok",this.checkedRows,this.checkedKeys.join(","))
+        }
+        this.handleClear()
+      },
+      handleCancel(){
+        this.handleClear()
+      },
+      handleClear(){
+        this.visible=false
+        this.checkedKeys=[]
+      },
+      getParentKey(currKey,treeData){
+        let parentKey
+        for (let i = 0; i < treeData.length; i++) {
+          const node = treeData[i]
+          if (node.children) {
+            if (node.children.some(item => item.key === currKey)) {
+              parentKey = node.key
+            } else if (this.getParentKey(currKey, node.children)) {
+              parentKey = this.getParentKey(currKey, node.children)
+            }
+          }
+        }
+        return parentKey
+      },
+      onSearch(value){
+        const expandedKeys = this.dataList.map((item) => {
+          if (item.title.indexOf(value) > -1) {
+            return this.getParentKey(item.key,this.treeData)
+          }
+          return null
+        }).filter((item, i, self) => item && self.indexOf(item) === i)
+
+        Object.assign(this, {
+          expandedKeys,
+          searchValue: value,
+          autoExpandParent: true,
+        })
+
+
+      },
+      // 根据 checkedKeys 获取 rows
+      getCheckedRows(checkedKeys) {
+        const forChildren = (list, key) => {
+          for (let item of list) {
+            if (item.id === key) {
+              return item
+            }
+            if (item.children instanceof Array) {
+              let value = forChildren(item.children, key)
+              if (value != null) {
+                return value
+              }
+            }
+          }
+          return null
+        }
+
+        let rows = []
+        for (let key of checkedKeys) {
+          let row = forChildren(this.treeData, key)
+          if (row != null) {
+            rows.push(row)
+          }
+        }
+        return rows
+      }
+    }
+  }
+
+</script>
+
+<style scoped>
+
 </style>
\ No newline at end of file
diff --git a/jshERP-web/src/components/jeecgbiz/modal/JSelectUserByDepModal.vue b/jshERP-web/src/components/jeecgbiz/modal/JSelectUserByDepModal.vue
index 0ff78f9b..cfb76cb0 100644
--- a/jshERP-web/src/components/jeecgbiz/modal/JSelectUserByDepModal.vue
+++ b/jshERP-web/src/components/jeecgbiz/modal/JSelectUserByDepModal.vue
@@ -1,329 +1,322 @@
-<template>
-  <a-modal
-    :width="modalWidth"
-    :visible="visible"
-    :title="title"
-    @ok="handleSubmit"
-    @cancel="close"
-    cancelText="关闭"
-    style="margin-top: -70px"
-    wrapClassName="ant-modal-cust-warp"
-  >
-    <a-row :gutter="10" style="background-color: #ececec; padding: 10px; margin: -10px">
-      <a-col :md="6" :sm="24">
-        <a-card :bordered="false">
-          <!--组织机构-->
-          <a-directory-tree
-            selectable
-            :selectedKeys="selectedDepIds"
-            :checkStrictly="true"
-            :dropdownStyle="{maxHeight:'200px',overflow:'auto'}"
-            :treeData="departTree"
-            :expandAction="false"
-            :expandedKeys.sync="expandedKeys"
-            @select="onDepSelect"
-          />
-        </a-card>
-      </a-col>
-      <a-col :md="18" :sm="24">
-        <a-card :bordered="false">
-          用户账号:
-          <a-input-search
-            :style="{width:'150px',marginBottom:'15px'}"
-            placeholder="请输入账号"
-            v-model="queryParam.username"
-            @search="onSearch"
-          ></a-input-search>
-          <a-button @click="searchReset(1)" style="margin-left: 20px" icon="redo">重置</a-button>
-          <!--用户列表-->
-          <a-table
-            ref="table"
-            :scroll="scrollTrigger"
-            size="middle"
-            rowKey="id"
-            :columns="columns"
-            :dataSource="dataSource"
-            :pagination="ipagination"
-            :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange,type: getType}"
-            :loading="loading"
-            @change="handleTableChange">
-          </a-table>
-        </a-card>
-      </a-col>
-    </a-row>
-  </a-modal>
-</template>
-
-<script>
-  import {filterObj} from '@/utils/util'
-  import {queryDepartTreeList, getUserList, queryUserByDepId} from '@/api/api'
-
-  export default {
-    name: 'JSelectUserByDepModal',
-    components: {},
-    props: ['modalWidth', 'multi', 'userIds'],
-    data() {
-      return {
-        queryParam: {
-          username: "",
-        },
-        columns: [
-          {
-            title: '用户账号',
-            align: 'center',
-            dataIndex: 'username'
-          },
-          {
-            title: '用户姓名',
-            align: 'center',
-            dataIndex: 'realname'
-          },
-          {
-            title: '性别',
-            align: 'center',
-            dataIndex: 'sex',
-            customRender: function (text) {
-              if (text === 1) {
-                return '男'
-              } else if (text === 2) {
-                return '女'
-              } else {
-                return text
-              }
-            }
-          },
-          {
-            title: '手机',
-            align: 'center',
-            dataIndex: 'phone'
-          },
-          {
-            title: '部门',
-            align: 'center',
-            dataIndex: 'orgCode'
-          }
-        ],
-        scrollTrigger: {},
-        dataSource: [],
-        selectedRowKeys: [],
-        selectUserRows: [],
-        selectUserIds: [],
-        title: '根据部门选择用户',
-        ipagination: {
-          current: 1,
-          pageSize: 10,
-          pageSizeOptions: ['10', '20', '30'],
-          showTotal: (total, range) => {
-            return range[0] + '-' + range[1] + ' 共' + total + '条'
-          },
-          showQuickJumper: true,
-          showSizeChanger: true,
-          total: 0
-        },
-        isorter: {
-          column: 'createTime',
-          order: 'desc'
-        },
-        selectedDepIds: [],
-        departTree: [],
-        visible: false,
-        form: this.$form.createForm(this),
-        loading: false,
-        expandedKeys: [],
-      }
-    },
-    computed: {
-      // 计算属性的 getter
-      getType: function () {
-        return this.multi == true ? 'checkbox' : 'radio';
-      }
-    },
-    watch: {
-      userIds: {
-        immediate: true,
-        handler() {
-          this.initUserNames()
-        }
-      },
-    },
-    created() {
-      // 该方法触发屏幕自适应
-      this.resetScreenSize();
-      this.loadData()
-    },
-    methods: {
-      initUserNames() {
-        if (this.userIds) {
-          // 这里最后加一个 , 的原因是因为无论如何都要使用 in 查询，防止后台进行了模糊匹配，导致查询结果不准确
-          let values = this.userIds.split(',') + ','
-          getUserList({
-            username: values,
-            pageNo: 1,
-            pageSize: values.length
-          }).then((res) => {
-            if (res.success) {
-              let selectedRowKeys = []
-              let realNames = []
-              res.result.records.forEach(user => {
-                realNames.push(user['realname'])
-                selectedRowKeys.push(user['id'])
-              })
-              this.selectedRowKeys = selectedRowKeys
-              this.$emit('initComp', realNames.join(','))
-            }
-          })
-        } else {
-          // JSelectUserByDep组件bug issues/I16634
-          this.$emit('initComp', '')
-        }
-      },
-      async loadData(arg) {
-        if (arg === 1) {
-          this.ipagination.current = 1;
-        }
-        if (this.selectedDepIds && this.selectedDepIds.length > 0) {
-          await this.initQueryUserByDepId(this.selectedDepIds)
-        } else {
-          this.loading = true
-          let params = this.getQueryParams()//查询条件
-          await getUserList(params).then((res) => {
-            if (res.success) {
-              this.dataSource = res.result.records
-              this.ipagination.total = res.result.total
-            }
-          }).finally(() => {
-            this.loading = false
-          })
-        }
-      },
-      // 触发屏幕自适应
-      resetScreenSize() {
-        let screenWidth = document.body.clientWidth;
-        if (screenWidth < 500) {
-          this.scrollTrigger = {x: 800};
-        } else {
-          this.scrollTrigger = {};
-        }
-      },
-      showModal() {
-        this.visible = true;
-        this.queryDepartTree();
-        this.initUserNames()
-        this.loadData();
-        this.form.resetFields();
-      },
-      getQueryParams() {
-        let param = Object.assign({}, this.queryParam, this.isorter);
-        param.field = this.getQueryField();
-        param.pageNo = this.ipagination.current;
-        param.pageSize = this.ipagination.pageSize;
-        return filterObj(param);
-      },
-      getQueryField() {
-        let str = 'id,';
-        for (let a = 0; a < this.columns.length; a++) {
-          str += ',' + this.columns[a].dataIndex;
-        }
-        return str;
-      },
-      searchReset(num) {
-        let that = this;
-        if (num !== 0) {
-          that.queryParam = {};
-          that.loadData(1);
-        }
-        that.selectedRowKeys = [];
-        that.selectUserIds = [];
-        that.selectedDepIds = [];
-      },
-      close() {
-        this.searchReset(0);
-        this.visible = false;
-      },
-      handleTableChange(pagination, filters, sorter) {
-        //TODO 筛选
-        if (Object.keys(sorter).length > 0) {
-          this.isorter.column = sorter.field;
-          this.isorter.order = 'ascend' === sorter.order ? 'asc' : 'desc';
-        }
-        this.ipagination = pagination;
-        this.loadData();
-      },
-      handleSubmit() {
-        let that = this;
-        this.getSelectUserRows();
-        that.$emit('ok', that.selectUserRows, that.selectUserIds);
-        that.searchReset(0)
-        that.close();
-      },
-      //获取选择用户信息
-      getSelectUserRows(rowId) {
-        let dataSource = this.dataSource;
-        let userIds = "";
-        this.selectUserRows = [];
-        for (let i = 0, len = dataSource.length; i < len; i++) {
-          if (this.selectedRowKeys.includes(dataSource[i].id)) {
-            this.selectUserRows.push(dataSource[i]);
-            userIds = userIds + "," + dataSource[i].username
-          }
-        }
-        this.selectUserIds = userIds.substring(1);
-      },
-      // 点击树节点,筛选出对应的用户
-      onDepSelect(selectedDepIds) {
-        if (selectedDepIds[0] != null) {
-          this.initQueryUserByDepId(selectedDepIds); // 调用方法根据选选择的id查询用户信息
-          if (this.selectedDepIds[0] !== selectedDepIds[0]) {
-            this.selectedDepIds = [selectedDepIds[0]];
-          }
-        }
-      },
-      onSelectChange(selectedRowKeys, selectionRows) {
-        this.selectedRowKeys = selectedRowKeys;
-        this.selectionRows = selectionRows;
-      },
-      onSearch() {
-        this.loadData(1);
-      },
-      // 根据选择的id来查询用户信息
-      initQueryUserByDepId(selectedDepIds) {
-        this.loading = true
-        return queryUserByDepId({id: selectedDepIds.toString()}).then((res) => {
-          if (res.success) {
-            this.dataSource = res.result;
-            this.ipagination.total = res.result.length;
-          }
-        }).finally(() => {
-          this.loading = false
-        })
-      },
-      queryDepartTree() {
-        queryDepartTreeList().then((res) => {
-          if (res.success) {
-            this.departTree = res.result;
-            // 默认展开父节点
-            this.expandedKeys = this.departTree.map(item => item.id)
-          }
-        })
-      },
-      modalFormOk() {
-        this.loadData();
-      }
-    }
-  }
-</script>
-
-<style scoped>
-  .ant-table-tbody .ant-table-row td {
-    padding-top: 10px;
-    padding-bottom: 10px;
-  }
-
-  #components-layout-demo-custom-trigger .trigger {
-    font-size: 18px;
-    line-height: 64px;
-    padding: 0 24px;
-    cursor: pointer;
-    transition: color .3s;
-  }
+<template>
+  <a-modal
+    :width="modalWidth"
+    :visible="visible"
+    :title="title"
+    @ok="handleSubmit"
+    @cancel="close"
+    cancelText="关闭"
+    style="margin-top: -70px"
+    wrapClassName="ant-modal-cust-warp"
+  >
+    <a-row :gutter="10" style="background-color: #ececec; padding: 10px; margin: -10px">
+      <a-col :md="6" :sm="24">
+        <a-card :bordered="false">
+          <!--组织机构-->
+          <a-directory-tree
+            selectable
+            :selectedKeys="selectedDepIds"
+            :checkStrictly="true"
+            :dropdownStyle="{maxHeight:'200px',overflow:'auto'}"
+            :treeData="departTree"
+            :expandAction="false"
+            :expandedKeys.sync="expandedKeys"
+            @select="onDepSelect"
+          />
+        </a-card>
+      </a-col>
+      <a-col :md="18" :sm="24">
+        <a-card :bordered="false">
+          用户账号:
+          <a-input-search
+            :style="{width:'150px',marginBottom:'15px'}"
+            placeholder="请输入账号"
+            v-model="queryParam.username"
+            @search="onSearch"
+          ></a-input-search>
+          <a-button @click="searchReset(1)" style="margin-left: 20px" icon="redo">重置</a-button>
+          <!--用户列表-->
+          <a-table
+            ref="table"
+            :scroll="scrollTrigger"
+            size="middle"
+            rowKey="id"
+            :columns="columns"
+            :dataSource="dataSource"
+            :pagination="ipagination"
+            :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange,type: getType}"
+            :loading="loading"
+            @change="handleTableChange">
+          </a-table>
+        </a-card>
+      </a-col>
+    </a-row>
+  </a-modal>
+</template>
+
+<script>
+  import {filterObj} from '@/utils/util'
+  import {getUserList, queryUserByDepId} from '@/api/api'
+
+  export default {
+    name: 'JSelectUserByDepModal',
+    components: {},
+    props: ['modalWidth', 'multi', 'userIds'],
+    data() {
+      return {
+        queryParam: {
+          username: "",
+        },
+        columns: [
+          {
+            title: '用户账号',
+            align: 'center',
+            dataIndex: 'username'
+          },
+          {
+            title: '用户姓名',
+            align: 'center',
+            dataIndex: 'realname'
+          },
+          {
+            title: '性别',
+            align: 'center',
+            dataIndex: 'sex',
+            customRender: function (text) {
+              if (text === 1) {
+                return '男'
+              } else if (text === 2) {
+                return '女'
+              } else {
+                return text
+              }
+            }
+          },
+          {
+            title: '手机',
+            align: 'center',
+            dataIndex: 'phone'
+          },
+          {
+            title: '部门',
+            align: 'center',
+            dataIndex: 'orgCode'
+          }
+        ],
+        scrollTrigger: {},
+        dataSource: [],
+        selectedRowKeys: [],
+        selectUserRows: [],
+        selectUserIds: [],
+        title: '根据部门选择用户',
+        ipagination: {
+          current: 1,
+          pageSize: 10,
+          pageSizeOptions: ['10', '20', '30'],
+          showTotal: (total, range) => {
+            return range[0] + '-' + range[1] + ' 共' + total + '条'
+          },
+          showQuickJumper: true,
+          showSizeChanger: true,
+          total: 0
+        },
+        isorter: {
+          column: 'createTime',
+          order: 'desc'
+        },
+        selectedDepIds: [],
+        departTree: [],
+        visible: false,
+        form: this.$form.createForm(this),
+        loading: false,
+        expandedKeys: [],
+      }
+    },
+    computed: {
+      // 计算属性的 getter
+      getType: function () {
+        return this.multi == true ? 'checkbox' : 'radio';
+      }
+    },
+    watch: {
+      userIds: {
+        immediate: true,
+        handler() {
+          this.initUserNames()
+        }
+      },
+    },
+    created() {
+      // 该方法触发屏幕自适应
+      this.resetScreenSize();
+      this.loadData()
+    },
+    methods: {
+      initUserNames() {
+        if (this.userIds) {
+          // 这里最后加一个 , 的原因是因为无论如何都要使用 in 查询，防止后台进行了模糊匹配，导致查询结果不准确
+          let values = this.userIds.split(',') + ','
+          getUserList({
+            username: values,
+            pageNo: 1,
+            pageSize: values.length
+          }).then((res) => {
+            if (res.success) {
+              let selectedRowKeys = []
+              let realNames = []
+              res.result.records.forEach(user => {
+                realNames.push(user['realname'])
+                selectedRowKeys.push(user['id'])
+              })
+              this.selectedRowKeys = selectedRowKeys
+              this.$emit('initComp', realNames.join(','))
+            }
+          })
+        } else {
+          // JSelectUserByDep组件bug issues/I16634
+          this.$emit('initComp', '')
+        }
+      },
+      async loadData(arg) {
+        if (arg === 1) {
+          this.ipagination.current = 1;
+        }
+        if (this.selectedDepIds && this.selectedDepIds.length > 0) {
+          await this.initQueryUserByDepId(this.selectedDepIds)
+        } else {
+          this.loading = true
+          let params = this.getQueryParams()//查询条件
+          await getUserList(params).then((res) => {
+            if (res.success) {
+              this.dataSource = res.result.records
+              this.ipagination.total = res.result.total
+            }
+          }).finally(() => {
+            this.loading = false
+          })
+        }
+      },
+      // 触发屏幕自适应
+      resetScreenSize() {
+        let screenWidth = document.body.clientWidth;
+        if (screenWidth < 500) {
+          this.scrollTrigger = {x: 800};
+        } else {
+          this.scrollTrigger = {};
+        }
+      },
+      showModal() {
+        this.visible = true;
+        this.queryDepartTree();
+        this.initUserNames()
+        this.loadData();
+        this.form.resetFields();
+      },
+      getQueryParams() {
+        let param = Object.assign({}, this.queryParam, this.isorter);
+        param.field = this.getQueryField();
+        param.pageNo = this.ipagination.current;
+        param.pageSize = this.ipagination.pageSize;
+        return filterObj(param);
+      },
+      getQueryField() {
+        let str = 'id,';
+        for (let a = 0; a < this.columns.length; a++) {
+          str += ',' + this.columns[a].dataIndex;
+        }
+        return str;
+      },
+      searchReset(num) {
+        let that = this;
+        if (num !== 0) {
+          that.queryParam = {};
+          that.loadData(1);
+        }
+        that.selectedRowKeys = [];
+        that.selectUserIds = [];
+        that.selectedDepIds = [];
+      },
+      close() {
+        this.searchReset(0);
+        this.visible = false;
+      },
+      handleTableChange(pagination, filters, sorter) {
+        //TODO 筛选
+        if (Object.keys(sorter).length > 0) {
+          this.isorter.column = sorter.field;
+          this.isorter.order = 'ascend' === sorter.order ? 'asc' : 'desc';
+        }
+        this.ipagination = pagination;
+        this.loadData();
+      },
+      handleSubmit() {
+        let that = this;
+        this.getSelectUserRows();
+        that.$emit('ok', that.selectUserRows, that.selectUserIds);
+        that.searchReset(0)
+        that.close();
+      },
+      //获取选择用户信息
+      getSelectUserRows(rowId) {
+        let dataSource = this.dataSource;
+        let userIds = "";
+        this.selectUserRows = [];
+        for (let i = 0, len = dataSource.length; i < len; i++) {
+          if (this.selectedRowKeys.includes(dataSource[i].id)) {
+            this.selectUserRows.push(dataSource[i]);
+            userIds = userIds + "," + dataSource[i].username
+          }
+        }
+        this.selectUserIds = userIds.substring(1);
+      },
+      // 点击树节点,筛选出对应的用户
+      onDepSelect(selectedDepIds) {
+        if (selectedDepIds[0] != null) {
+          this.initQueryUserByDepId(selectedDepIds); // 调用方法根据选选择的id查询用户信息
+          if (this.selectedDepIds[0] !== selectedDepIds[0]) {
+            this.selectedDepIds = [selectedDepIds[0]];
+          }
+        }
+      },
+      onSelectChange(selectedRowKeys, selectionRows) {
+        this.selectedRowKeys = selectedRowKeys;
+        this.selectionRows = selectionRows;
+      },
+      onSearch() {
+        this.loadData(1);
+      },
+      // 根据选择的id来查询用户信息
+      initQueryUserByDepId(selectedDepIds) {
+        this.loading = true
+        return queryUserByDepId({id: selectedDepIds.toString()}).then((res) => {
+          if (res.success) {
+            this.dataSource = res.result;
+            this.ipagination.total = res.result.length;
+          }
+        }).finally(() => {
+          this.loading = false
+        })
+      },
+      queryDepartTree() {
+      },
+      modalFormOk() {
+        this.loadData();
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .ant-table-tbody .ant-table-row td {
+    padding-top: 10px;
+    padding-bottom: 10px;
+  }
+
+  #components-layout-demo-custom-trigger .trigger {
+    font-size: 18px;
+    line-height: 64px;
+    padding: 0 24px;
+    cursor: pointer;
+    transition: color .3s;
+  }
 </style>
\ No newline at end of file