inleft
2022-02-15 91dc6cdda0548ff7f6e473a81933fa206d912cef
commit | author | age
9bcb19 1 <template>
I 2   <a-row :gutter="24">
3     <a-col :md="5" :sm="24">
4       <a-card :bordered="false" :loading="treeLoading">
5         <div v-if="this.orgTree != ''">
6           <a-tree
7             :treeData="orgTree"
8             v-if="orgTree.length"
9             @select="handleClick"
10             :defaultExpandAll="true"
11             :defaultExpandedKeys="defaultExpandedKeys"
12             :replaceFields="replaceFields" />
13         </div>
14         <div v-else>
15           <a-empty :image="simpleImage" />
16         </div>
17       </a-card>
18     </a-col>
19     <a-col :md="19" :sm="24">
20       <x-card v-if="hasPerm('sysUser:page')">
21         <div slot="content" class="table-page-search-wrapper">
22           <a-form layout="inline">
23             <a-row :gutter="48">
24               <a-col :md="8" :sm="24">
25                 <a-form-item label="关键词" >
26                   <a-input v-model="queryParam.searchValue" allow-clear placeholder="请输入姓名或账号"/>
27                 </a-form-item>
28               </a-col>
29               <a-col :md="8" :sm="24">
30                 <a-form-item label="状态">
31                   <a-select v-model="queryParam.searchStatus" allow-clear placeholder="请选择状态" default-value="0">
32                     <a-select-option v-for="(item,index) in statusDictTypeDropDown" :key="index" :value="item.code" >{{ item.value }}</a-select-option>
33                   </a-select>
34                 </a-form-item>
35               </a-col>
36               <a-col :md="8" :sm="24">
37                 <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
38                 <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
39               </a-col>
40             </a-row>
41           </a-form>
42         </div>
43       </x-card>
44       <a-card :bordered="false">
45         <s-table
46           ref="table"
47           :columns="columns"
48           :data="loadData"
49           :alert="options.alert"
50           :rowKey="(record) => record.id"
51           :rowSelection="options.rowSelection"
52         >
53           <template slot="operator">
54             <a-button type="primary" v-if="hasPerm('sysUser:add')" icon="plus" @click="$refs.addForm.add()">新增用户</a-button>
55             <a-button type="danger" :disabled="selectedRowKeys.length < 1" v-if="hasPerm('sysUser:delete')" @click="batchDelete"><a-icon type="delete"/>批量删除</a-button>
56             <x-down
57               v-if="hasPerm('sysUser:export')"
58               ref="batchExport"
59               @batchExport="batchExport"
60             />
61           </template>
62           <span slot="sex" slot-scope="text">
63             {{ sexFilter(text) }}
64           </span>
65           <span slot="status" slot-scope="text,record" v-if="hasPerm('sysUser:changeStatus')">
66             <a-popconfirm placement="top" :title="text===0? '确定停用该用户?':'确定启用该用户?'" @confirm="() => editUserStatus(text,record)">
67               <a>{{ statusFilter(text) }}</a>
68             </a-popconfirm>
69           </span>
70           <span slot="status" v-else>
71             {{ statusFilter(text) }}
72           </span>
73           <span slot="action" slot-scope="text, record">
74             <a v-if="hasPerm('sysUser:edit')" @click="$refs.editForm.edit(record)">编辑</a>
75             <a-divider type="vertical" v-if="hasPerm('sysUser:edit')" />
76             <a-dropdown v-if="hasPerm('sysUser:resetPwd') || hasPerm('sysUser:grantRole') || hasPerm('sysUser:grantData') || hasPerm('sysUser:delete')">
77               <a class="ant-dropdown-link">
78                 更多 <a-icon type="down" />
79               </a>
80               <a-menu slot="overlay">
81                 <a-menu-item v-if="hasPerm('sysUser:resetPwd')">
82                   <a-popconfirm placement="topRight" title="确认重置密码?" @confirm="() => resetPwd(record)">
83                     <a>重置密码</a>
84                   </a-popconfirm>
85                 </a-menu-item>
86                 <a-menu-item v-if="hasPerm('sysUser:grantRole')">
87                   <a @click="$refs.userRoleForm.userRole(record)">授权角色</a>
88                 </a-menu-item>
89                 <a-menu-item v-if="hasPerm('sysUser:grantData')">
90                   <a @click="$refs.userOrgForm.userOrg(record)">授权数据</a>
91                 </a-menu-item>
92                 <a-menu-item v-if="hasPerm('sysUser:delete')">
93                   <a-popconfirm placement="topRight" title="确认删除?" @confirm="() => singleDelete(record)">
94                     <a>删除</a>
95                   </a-popconfirm>
96                 </a-menu-item>
97               </a-menu>
98             </a-dropdown>
99           </span>
100         </s-table>
101         <add-form ref="addForm" @ok="handleOk" />
102         <edit-form ref="editForm" @ok="handleOk" />
103         <user-role-form ref="userRoleForm" @ok="handleOk"/>
104         <user-org-form ref="userOrgForm" @ok="handleOk"/>
105       </a-card>
106     </a-col>
107   </a-row>
108 </template>
109 <script>
110   import { STable, XCard, XDown } from '@/components'
111   import { Empty } from 'ant-design-vue'
112   import { getOrgTree } from '@/api/modular/system/orgManage'
113   import { getUserPage, sysUserDelete, sysUserChangeStatus, sysUserResetPwd, sysUserExport } from '@/api/modular/system/userManage'
114   import { sysDictTypeDropDown } from '@/api/modular/system/dictManage'
115   import addForm from './addForm'
116   import editForm from './editForm'
117   import userRoleForm from './userRoleForm'
118   import userOrgForm from './userOrgForm'
119   export default {
120     components: {
121       XDown,
122       XCard,
123       STable,
124       addForm,
125       editForm,
126       userRoleForm,
127       userOrgForm
128     },
129     data () {
130       return {
131         // 查询参数
132         queryParam: {},
133         // 表头
134         columns: [
135           {
136             title: '账号',
137             dataIndex: 'account'
138           },
139           {
140             title: '姓名',
141             dataIndex: 'name'
142           },
143           {
144             title: '性别',
145             dataIndex: 'sex',
146             scopedSlots: { customRender: 'sex' }
147           }, {
148             title: '手机',
149             dataIndex: 'phone'
150           },
151           {
152             title: '状态',
153             dataIndex: 'status',
154             scopedSlots: { customRender: 'status' }
155           }
156         ],
157         // 加载数据方法 必须为 Promise 对象
158         loadData: parameter => {
159           return getUserPage(Object.assign(parameter, this.queryParam)).then((res) => {
160             return res.data
161           })
162         },
163         orgTree: [],
164         selectedRowKeys: [],
165         selectedRows: [],
166         defaultExpandedKeys: [],
167         sexDictTypeDropDown: [],
168         statusDictTypeDropDown: [],
169         treeLoading: true,
170         simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
171         replaceFields: {
172           key: 'id'
173         },
174         options: {
175           alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
176           rowSelection: {
177             selectedRowKeys: this.selectedRowKeys,
178             onChange: this.onSelectChange
179           }
180         }
181       }
182     },
183     created () {
184       /**
185        * 获取到机构树,展开顶级下树节点,考虑到后期数据量变大,不建议全部展开
186        */
187       getOrgTree(Object.assign(this.queryParam)).then(res => {
188         this.treeLoading = false
189         if (!res.success) {
190           return
191         }
192         this.orgTree = res.data
193         for (var item of res.data) {
194           // eslint-disable-next-line eqeqeq
195           if (item.parentId == 0) {
196             this.defaultExpandedKeys.push(item.id)
197           }
198         }
199       })
200       this.sysDictTypeDropDown()
201       if (this.hasPerm('sysUser:edit') || this.hasPerm('sysUser:resetPwd') || this.hasPerm('sysUser:grantRole') || this.hasPerm('sysUser:grantData') || this.hasPerm('sysUser:delete')) {
202         this.columns.push({
203           title: '操作',
204           width: '150px',
205           dataIndex: 'action',
206           scopedSlots: { customRender: 'action' }
207         })
208       }
209     },
210     methods: {
211       sexFilter (sex) {
212         // eslint-disable-next-line eqeqeq
213         const values = this.sexDictTypeDropDown.filter(item => item.code == sex)
214         if (values.length > 0) {
215           return values[0].value
216         }
217       },
218       statusFilter (status) {
219         // eslint-disable-next-line eqeqeq
220         const values = this.statusDictTypeDropDown.filter(item => item.code == status)
221         if (values.length > 0) {
222           return values[0].value
223         }
224       },
225       /**
226        * 获取字典数据
227        */
228       sysDictTypeDropDown (text) {
229          sysDictTypeDropDown({ code: 'sex' }).then((res) => {
230            this.sexDictTypeDropDown = res.data
231         })
232         sysDictTypeDropDown({ code: 'common_status' }).then((res) => {
233           this.statusDictTypeDropDown = res.data
234         })
235       },
236       /**
237        * 修改用户状态
238        */
239       editUserStatus (code, record) {
240         // eslint-disable-next-line no-unused-vars
241         const status = 0
242         // eslint-disable-next-line eqeqeq
243         if (code == 0) {
244           this.status = 1
245         // eslint-disable-next-line eqeqeq
246         } else if (code == 1) {
247           this.status = 0
248         }
249         sysUserChangeStatus({ id: record.id, status: this.status }).then(res => {
250           if (res.success) {
251             this.$message.success('操作成功')
252             this.$refs.table.refresh()
253           } else {
254             this.$message.error('操作失败:' + res.message)
255           }
256         })
257       },
258       /**
259        * 重置密码
260        */
261       resetPwd (record) {
262         sysUserResetPwd({ id: record.id }).then(res => {
263           if (res.success) {
264             this.$message.success('重置成功')
265             // this.$refs.table.refresh()
266           } else {
267             this.$message.error('重置失败:' + res.message)
268           }
269         })
270       },
271       /**
272        * 单个删除
273        */
274       singleDelete (record) {
275         const param = [{ 'id': record.id }]
276         this.sysUserDelete(param)
277       },
278       /**
279        * 批量删除
280        */
281       batchDelete () {
282         const paramIds = this.selectedRowKeys.map((d) => {
283           return { 'id': d }
284         })
285         this.sysUserDelete(paramIds)
286       },
287       /**
288        * 删除用户
289        */
290       sysUserDelete (param) {
291         sysUserDelete(param).then((res) => {
292           if (res.success) {
293             this.$message.success('删除成功')
294             this.$refs.table.refresh()
295           } else {
296             this.$message.error('删除失败:' + res.message)
297           }
298         }).catch((err) => {
299           this.$message.error('删除错误:' + err.message)
300         })
301       },
302       /**
303        * 批量导出
304        */
305       batchExport () {
306         sysUserExport().then((res) => {
307           this.$refs.batchExport.downloadfile(res)
308         })
309       },
310       /**
311        * 点击左侧机构树查询列表
312        */
313       handleClick (e) {
314         this.queryParam = {
315           'sysEmpParam.orgId': e.toString()
316         }
317         this.$refs.table.refresh(true)
318       },
319       handleOk () {
320         this.$refs.table.refresh()
321       },
322       onSelectChange (selectedRowKeys, selectedRows) {
323         this.selectedRowKeys = selectedRowKeys
324         this.selectedRows = selectedRows
325       }
326     }
327   }
328 </script>
329 <style lang="less">
330   .table-operator {
331     margin-bottom: 18px;
332   }
333   button {
334     margin-right: 8px;
335   }
336 </style>