Blame view

ant-design-vue-jeecg/src/components/jeecgbiz/modal/JSelectUserByDepModal.vue 10.2 KB
肖超群 authored
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<template>
  <j-modal
    :width="modalWidth"
    :visible="visible"
    :title="title"
    switchFullscreen
    wrapClassName="j-user-select-modal"
    @ok="handleSubmit"
    @cancel="close"
    style="top:50px"
    cancelText="关闭"
  >
    <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"
            @select="onDepSelect"
            :load-data="onLoadDepartment"
          />
        </a-card>
      </a-col>
      <a-col :md="18" :sm="24">
        <a-card :bordered="false">
          <a-form-model>
            <a-form-model-item label="用户账号" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-row type="flex" :gutter="8">
                <a-col :span="18">
                  <a-input-search
肖超群 authored
36
37
38
39
                    :style="{width:'100%'}"
                    placeholder="请输入账号"
                    v-model="queryParam.username"
                    @search="onSearch"
肖超群 authored
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
                  ></a-input-search>
                </a-col>
                <a-col :span="6">
                  <a-button @click="searchReset(1)" icon="redo">重置</a-button>
                </a-col>
              </a-row>
            </a-form-model-item>
          </a-form-model>
          <!--用户列表-->
          <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>
  </j-modal>
</template>

<script>
肖超群 authored
68
69
70
import {pushIfNotExist, filterObj} from '@/utils/util'
import {queryDepartTreeList, getUserList, queryUserByDepId, queryDepartTreeSync} from '@/api/api'
import {getAction} from '@/api/manage'
肖超群 authored
71
肖超群 authored
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
export default {
  name: 'JSelectUserByDepModal',
  components: {},
  props: ['modalWidth', 'multi', 'userIds', 'store', 'text'],
  data() {
    return {
      queryParam: {
        username: "",
      },
      columns: [
        {
          title: '用户账号',
          align: 'center',
          dataIndex: 'username'
        },
        {
          title: '用户姓名',
          align: 'center',
          dataIndex: 'realname'
肖超群 authored
91
        },
肖超群 authored
92
93
94
95
96
97
98
99
100
101
102
        {
          title: '性别',
          align: 'center',
          dataIndex: 'sex',
          customRender: function (text) {
            if (text === 1) {
              return '男'
            } else if (text === 2) {
              return '女'
            } else {
              return text
肖超群 authored
103
104
105
            }
          }
        },
肖超群 authored
106
107
108
109
        {
          title: '手机',
          align: 'center',
          dataIndex: 'phone'
肖超群 authored
110
        },
肖超群 authored
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
        {
          title: '部门',
          align: 'center',
          dataIndex: 'orgCodeTxt'
        }
      ],
      scrollTrigger: {},
      dataSource: [],
      selectionRows: [],
      selectedRowKeys: [],
      selectUserRows: [],
      selectUserIds: [],
      title: '根据部门选择用户',
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
肖超群 authored
130
        },
肖超群 authored
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      isorter: {
        column: 'createTime',
        order: 'desc'
      },
      selectedDepIds: [],
      departTree: [],
      visible: false,
      form: this.$form.createForm(this),
      loading: false,
      expandedKeys: [],
      labelCol: {
        xs: {span: 24},
        sm: {span: 4},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 10},
      },
    }
  },
  computed: {
    // 计算属性的 getter
    getType: function () {
      return this.multi == true ? 'checkbox' : 'radio';
    }
  },
  watch: {
    userIds: {
      immediate: true,
      handler() {
        this.initUserNames()
肖超群 authored
166
167
      }
    },
肖超群 authored
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
  },
  created() {
    // 该方法触发屏幕自适应
    this.resetScreenSize();
    this.loadData()
  },
  methods: {
    initUserNames() {
      if (this.userIds) {
        // 这里最后加一个 , 的原因是因为无论如何都要使用 in 查询,防止后台进行了模糊匹配,导致查询结果不准确
        let values = this.userIds.split(',') + ','
        let param = {[this.store]: values}
        getAction('/sys/user/getMultiUser', param).then((list) => {
          this.selectionRows = []
          let selectedRowKeys = []
          let textArray = []
          if (list && list.length > 0) {
            for (let user of list) {
              textArray.push(user[this.text])
              selectedRowKeys.push(user['id'])
              this.selectionRows.push(user)
            }
          }
          this.selectedRowKeys = selectedRowKeys
          this.$emit('initComp', textArray.join(','))
        })

      } else {
        // JSelectUserByDep组件bug issues/I16634
        this.$emit('initComp', '')
        // 前端用户选择单选无法置空的问题 #2610
        this.selectedRowKeys = []
肖超群 authored
200
201
      }
    },
肖超群 authored
202
203
204
205
206
207
208
209
210
211
    async loadData(arg) {
      if (arg === 1) {
        this.ipagination.current = 1;
      }
      let params = this.getQueryParams()//查询条件
      this.loading = true
      getAction('/sys/user/queryUserComponentData', params).then(res => {
        if (res.success) {
          this.dataSource = res.result.records
          this.ipagination.total = res.result.total
肖超群 authored
212
        }
肖超群 authored
213
214
215
      }).finally(() => {
        this.loading = false
      })
肖超群 authored
216
    },
肖超群 authored
217
218
219
220
221
222
223
224
    // 触发屏幕自适应
    resetScreenSize() {
      let screenWidth = document.body.clientWidth;
      if (screenWidth < 500) {
        this.scrollTrigger = {x: 800};
      } else {
        this.scrollTrigger = {};
      }
肖超群 authored
225
    },
肖超群 authored
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
    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;
      param.departId = this.selectedDepIds.join(',')
      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;
      that.selectedRowKeys = [];
      that.selectUserIds = [];
      that.selectedDepIds = [];
      if (num !== 0) {
        that.queryParam = {};
        that.loadData(1);
      }
    },
    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.searchReset(0)
      that.close();
    },
    //获取选择用户信息
    getSelectUserRows() {
      this.selectUserRows = []
      for (let row of this.selectionRows) {
        if (this.selectedRowKeys.includes(row.id)) {
          this.selectUserRows.push(row)
肖超群 authored
284
        }
肖超群 authored
285
286
287
288
289
290
291
292
      }
      this.selectUserIds = this.selectUserRows.map(row => row.username).join(',')
    },
    // 点击树节点,筛选出对应的用户
    onDepSelect(selectedDepIds) {
      if (selectedDepIds[0] != null) {
        if (this.selectedDepIds[0] !== selectedDepIds[0]) {
          this.selectedDepIds = [selectedDepIds[0]];
肖超群 authored
293
        }
肖超群 authored
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
        this.loadData(1);
      }
    },
    onSelectChange(selectedRowKeys, selectionRows) {
      this.selectedRowKeys = selectedRowKeys;
      selectionRows.forEach(row => pushIfNotExist(this.selectionRows, row, 'id'))
    },
    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;
肖超群 authored
311
        }
肖超群 authored
312
313
314
315
316
317
318
319
320
321
322
323
324
      }).finally(() => {
        this.loading = false
      })
    },
    queryDepartTree() {
      //update-begin-author:taoyan date:20211202 for: 异步加载部门树 https://github.com/jeecgboot/jeecg-boot/issues/3196
      this.expandedKeys = []
      this.departTree = []
      queryDepartTreeSync().then((res) => {
        if (res.success) {
          for (let i = 0; i < res.result.length; i++) {
            let temp = res.result[i]
            this.departTree.push(temp)
肖超群 authored
325
326
          }
        }
肖超群 authored
327
328
329
330
331
      })
    },
    onLoadDepartment(treeNode) {
      return new Promise(resolve => {
        queryDepartTreeSync({pid: treeNode.dataRef.id}).then((res) => {
肖超群 authored
332
          if (res.success) {
肖超群 authored
333
334
335
336
337
338
            //判断chidlren是否为空,并修改isLeaf属性值
            if (res.result.length == 0) {
              treeNode.dataRef['isLeaf'] = true
              return;
            } else {
              treeNode.dataRef['children'] = res.result;
肖超群 authored
339
340
341
            }
          }
        })
肖超群 authored
342
343
344
345
346
347
        resolve();
      });
    },
    //update-end-author:taoyan date:20211202 for: 异步加载部门树 https://github.com/jeecgboot/jeecg-boot/issues/3196
    modalFormOk() {
      this.loadData();
肖超群 authored
348
349
    }
  }
肖超群 authored
350
}
肖超群 authored
351
352
353
</script>

<style scoped>
肖超群 authored
354
355
356
357
.ant-table-tbody .ant-table-row td {
  padding-top: 10px;
  padding-bottom: 10px;
}
肖超群 authored
358
肖超群 authored
359
360
361
362
363
364
365
#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color .3s;
}
肖超群 authored
366
</style>