JSelectUserByDepModal.vue 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307
  1. <template>
  2. <a-modal
  3. :width="modalWidth"
  4. :visible="visible"
  5. :title="title"
  6. @ok="handleSubmit"
  7. @cancel="close"
  8. cancelText="关闭"
  9. style="margin-top: -70px"
  10. wrapClassName="ant-modal-cust-warp"
  11. >
  12. <a-row :gutter="10" style="background-color: #ececec; padding: 10px; margin: -10px">
  13. <a-col :md="6" :sm="24">
  14. <a-card :bordered="false">
  15. <!--组织机构-->
  16. <a-directory-tree
  17. selectable
  18. :selectedKeys="selectedKeys"
  19. :checkStrictly="true"
  20. @select="this.onSelect"
  21. :dropdownStyle="{maxHeight:'200px',overflow:'auto'}"
  22. :treeData="departTree"
  23. />
  24. </a-card>
  25. </a-col>
  26. <a-col :md="18" :sm="24">
  27. <a-card :bordered="false">
  28. 用户账号:
  29. <a-input-search
  30. :style="{width:'150px',marginBottom:'15px'}"
  31. placeholder="请输入用户账号"
  32. v-model="queryParam.username"
  33. @search="onSearch"
  34. ></a-input-search>
  35. <a-button @click="searchReset(1)" style="margin-left: 20px" icon="redo">重置</a-button>
  36. <!--用户列表-->
  37. <a-table
  38. ref="table"
  39. :scroll="scrollTrigger"
  40. size="middle"
  41. rowKey="id"
  42. :columns="columns"
  43. :dataSource="dataSource"
  44. :pagination="ipagination"
  45. :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange,type:'radio'}"
  46. @change="handleTableChange">
  47. </a-table>
  48. </a-card>
  49. </a-col>
  50. </a-row>
  51. </a-modal>
  52. </template>
  53. <script>
  54. import {filterObj} from '@/utils/util'
  55. import {queryDepartTreeList, getUserList, queryUserByDepId, queryUserRoleMap} from '@/api/api'
  56. export default {
  57. name: 'JSelectUserByDepModal',
  58. components: {},
  59. props: ['modalWidth'],
  60. data() {
  61. return {
  62. queryParam: {
  63. username: "",
  64. },
  65. columns: [
  66. {
  67. title: '用户账号',
  68. align: 'center',
  69. dataIndex: 'username'
  70. },
  71. {
  72. title: '真实姓名',
  73. align: 'center',
  74. dataIndex: 'realname'
  75. },
  76. {
  77. title: '角色名称',
  78. align: 'center',
  79. dataIndex: 'roleName'
  80. },
  81. {
  82. title: '性别',
  83. align: 'center',
  84. dataIndex: 'sex',
  85. customRender: function (text) {
  86. if (text === 1) {
  87. return '男'
  88. } else if (text === 2) {
  89. return '女'
  90. } else {
  91. return text
  92. }
  93. }
  94. },
  95. {
  96. title: '手机号码',
  97. align: 'center',
  98. dataIndex: 'phone'
  99. },
  100. {
  101. title: '邮箱',
  102. align: 'center',
  103. dataIndex: 'email'
  104. }
  105. ],
  106. scrollTrigger: {},
  107. dataSource: [],
  108. selectedKeys: [],
  109. userNameArr: [],
  110. departName: '',
  111. userRolesMap: {},
  112. title: '根据部门选择用户',
  113. ipagination: {
  114. current: 1,
  115. pageSize: 10,
  116. pageSizeOptions: ['10', '20', '30'],
  117. showTotal: (total, range) => {
  118. return range[0] + '-' + range[1] + ' 共' + total + '条'
  119. },
  120. showQuickJumper: true,
  121. showSizeChanger: true,
  122. total: 0
  123. },
  124. isorter: {
  125. column: 'createTime',
  126. order: 'desc'
  127. },
  128. selectedRowKeys: [],
  129. selectedRows: [],
  130. departTree: [],
  131. visible: false,
  132. form: this.$form.createForm(this)
  133. }
  134. },
  135. created() {
  136. // 该方法触发屏幕自适应
  137. this.resetScreenSize();
  138. this.queryUserRoleMap();
  139. },
  140. methods: {
  141. loadData(arg) {
  142. if (arg === 1) {
  143. this.ipagination.current = 1;
  144. }
  145. let params = this.getQueryParams();//查询条件
  146. getUserList(params).then((res) => {
  147. if (res.success) {
  148. this.dataSource = res.result.records;
  149. this.assignRoleName(this.dataSource);
  150. this.ipagination.total = res.result.total;
  151. }
  152. })
  153. },
  154. queryUserRoleMap() {
  155. queryUserRoleMap().then((res) => {
  156. if (res.success) {
  157. this.userRolesMap = res.result;
  158. this.loadData();
  159. }
  160. })
  161. },
  162. // 触发屏幕自适应
  163. resetScreenSize() {
  164. let screenWidth = document.body.clientWidth;
  165. if (screenWidth < 500) {
  166. this.scrollTrigger = {x: 800};
  167. } else {
  168. this.scrollTrigger = {};
  169. }
  170. },
  171. showModal() {
  172. this.visible = true;
  173. this.assignRoleName(this.dataSource);
  174. this.queryDepartTree();
  175. this.form.resetFields();
  176. },
  177. getQueryParams() {
  178. let param = Object.assign({}, this.queryParam, this.isorter);
  179. param.field = this.getQueryField();
  180. param.pageNo = this.ipagination.current;
  181. param.pageSize = this.ipagination.pageSize;
  182. return filterObj(param);
  183. },
  184. getQueryField() {
  185. let str = 'id,';
  186. for (let a = 0; a < this.columns.length; a++) {
  187. str += ',' + this.columns[a].dataIndex;
  188. }
  189. return str;
  190. },
  191. searchReset(num) {
  192. let that = this;
  193. if (num !== 0) {
  194. that.queryParam = {};
  195. that.loadData(1);
  196. }
  197. that.selectedRowKeys = [];
  198. that.userNameArr = [];
  199. that.selectedKeys = [];
  200. },
  201. close() {
  202. this.searchReset(0);
  203. this.visible = false;
  204. },
  205. handleTableChange(pagination, filters, sorter) {
  206. //TODO 筛选
  207. if (Object.keys(sorter).length > 0) {
  208. this.isorter.column = sorter.field;
  209. this.isorter.order = 'ascend' === sorter.order ? 'asc' : 'desc';
  210. }
  211. this.ipagination = pagination;
  212. this.loadData();
  213. },
  214. handleSubmit() {
  215. let that = this;
  216. for (let i = 0, len = this.selectedRowKeys.length; i < len; i++) {
  217. this.getUserNames(this.selectedRowKeys[i]);
  218. }
  219. that.$emit('ok', that.userNameArr.join(','));
  220. that.close();
  221. },
  222. // 遍历匹配,获取用户真实姓名
  223. getUserNames(rowId) {
  224. let dataSource = this.dataSource;
  225. for (let i = 0, len = dataSource.length; i < len; i++) {
  226. if (rowId === dataSource[i].id) {
  227. this.userNameArr.push(dataSource[i].realname);
  228. }
  229. }
  230. },
  231. // 点击树节点,筛选出对应的用户
  232. onSelect(selectedKeys) {
  233. if (selectedKeys[0] != null) {
  234. this.queryUserByDepId(selectedKeys); // 调用方法根据选选择的id查询用户信息
  235. if (this.selectedKeys[0] !== selectedKeys[0]) {
  236. this.selectedKeys = [selectedKeys[0]];
  237. }
  238. }
  239. },
  240. onSelectChange(selectedRowKeys, selectionRows) {
  241. this.selectedRowKeys = selectedRowKeys;
  242. this.selectionRows = selectionRows;
  243. },
  244. onSearch() {
  245. this.loadData(1);
  246. },
  247. // 根据选择的id来查询用户信息
  248. queryUserByDepId(selectedKeys) {
  249. queryUserByDepId({id: selectedKeys.toString()}).then((res) => {
  250. if (res.success) {
  251. this.dataSource = res.result;
  252. this.ipagination.total = res.result.length;
  253. this.assignRoleName(this.dataSource);
  254. }
  255. })
  256. },
  257. // 传入用户id,找到匹配的角色名称
  258. queryUserRole(userId) {
  259. let map = this.userRolesMap;
  260. let roleName = [];
  261. for (var key in map) {
  262. if (userId === key) {
  263. roleName.push(map[key]);
  264. }
  265. }
  266. return roleName.join(',');
  267. },
  268. queryDepartTree() {
  269. queryDepartTreeList().then((res) => {
  270. if (res.success) {
  271. this.departTree = res.result;
  272. }
  273. })
  274. },
  275. // 为角色名称赋值
  276. assignRoleName(data) {
  277. let userId = '';
  278. let role = '';
  279. for (let i = 0, length = data.length; i < length; i++) {
  280. userId = this.dataSource[i].id;
  281. role = this.queryUserRole(userId);
  282. this.dataSource[i].roleName = role;
  283. }
  284. },
  285. modalFormOk() {
  286. this.loadData();
  287. }
  288. }
  289. }
  290. </script>
  291. <style scoped>
  292. .ant-table-tbody .ant-table-row td {
  293. padding-top: 10px;
  294. padding-bottom: 10px;
  295. }
  296. #components-layout-demo-custom-trigger .trigger {
  297. font-size: 18px;
  298. line-height: 64px;
  299. padding: 0 24px;
  300. cursor: pointer;
  301. transition: color .3s;
  302. }
  303. </style>