| 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> | |
