index.vue 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329
  1. <!--
  2. - Copyright (c) 2018-2025, lengleng All rights reserved.
  3. -
  4. - Redistribution and use in source and binary forms, with or without
  5. - modification, are permitted provided that the following conditions are met:
  6. -
  7. - Redistributions of source code must retain the above copyright notice,
  8. - this list of conditions and the following disclaimer.
  9. - Redistributions in binary form must reproduce the above copyright
  10. - notice, this list of conditions and the following disclaimer in the
  11. - documentation and/or other materials provided with the distribution.
  12. - Neither the name of the pig4cloud.com developer nor the names of its
  13. - contributors may be used to endorse or promote products derived from
  14. - this software without specific prior written permission.
  15. - Author: lengleng (wangiegie@gmail.com)
  16. -->
  17. <template>
  18. <div class="user">
  19. <basic-container>
  20. <el-row :span="24">
  21. <el-col
  22. :xs="24"
  23. :sm="24"
  24. :md="5"
  25. class="user__tree">
  26. <avue-tree
  27. :option="treeOption"
  28. :data="treeData"
  29. @node-click="nodeClick"/>
  30. </el-col>
  31. <el-col
  32. :xs="24"
  33. :sm="24"
  34. :md="19"
  35. class="user__main">
  36. <avue-crud
  37. ref="crud"
  38. :option="option"
  39. v-model="form"
  40. :page="page"
  41. :table-loading="listLoading"
  42. :before-open="handleOpenBefore"
  43. :data="list"
  44. @on-load="getList"
  45. @search-change="handleFilter"
  46. @refresh-change="handleRefreshChange"
  47. @row-update="update"
  48. @row-save="create">
  49. <template slot="menuLeft">
  50. <el-button
  51. v-if="sys_user_add"
  52. class="filter-item"
  53. type="primary"
  54. size="mini"
  55. icon="el-icon-edit"
  56. @click="handleCreate">添加
  57. </el-button>
  58. </template>
  59. <template
  60. slot="username"
  61. slot-scope="scope">
  62. <span>{{ scope.row.username }}</span>
  63. </template>
  64. <template
  65. slot="role"
  66. slot-scope="scope">
  67. <span
  68. v-for="(role,index) in scope.row.roleList"
  69. :key="index">
  70. <el-tag>{{ role.roleName }} </el-tag>&nbsp;&nbsp;
  71. </span>
  72. </template>
  73. <template
  74. slot="deptId"
  75. slot-scope="scope">
  76. {{ scope.row.deptName }}
  77. </template>
  78. <template
  79. slot="lockFlag"
  80. slot-scope="scope">
  81. <el-tag>{{ scope.label }}</el-tag>
  82. </template>
  83. <template
  84. slot="menu"
  85. slot-scope="scope">
  86. <el-button
  87. v-if="sys_user_edit"
  88. type="text"
  89. size="mini"
  90. icon="el-icon-edit"
  91. @click="handleUpdate(scope.row,scope.index)">编辑
  92. </el-button>
  93. <el-button
  94. v-if="sys_user_del"
  95. type="text"
  96. size="mini"
  97. icon="el-icon-delete"
  98. @click="deletes(scope.row,scope.index)">删除
  99. </el-button>
  100. </template>
  101. <template
  102. slot="deptIdForm"
  103. slot-scope="scope">
  104. <avue-input
  105. v-model="form.deptId"
  106. :node-click="getNodeData"
  107. :dic="treeDeptData"
  108. :props="defaultProps"
  109. type="tree"
  110. placeholder="请选择所属部门"/>
  111. </template>
  112. <template
  113. slot="roleForm"
  114. slot-scope="scope">
  115. <avue-select
  116. v-model="role"
  117. :dic="rolesOptions"
  118. :props="roleProps"
  119. multiple
  120. placeholder="请选择角色"/>
  121. </template>
  122. </avue-crud>
  123. </el-col>
  124. </el-row>
  125. </basic-container>
  126. </div>
  127. </template>
  128. <script>
  129. import { addObj, delObj, fetchList, putObj } from '@/api/admin/user'
  130. import { deptRoleList } from '@/api/admin/role'
  131. import { fetchTree } from '@/api/admin/dept'
  132. import { tableOption } from '@/const/crud/admin/user'
  133. import { mapGetters } from 'vuex'
  134. export default {
  135. name: 'SysUser',
  136. data() {
  137. return {
  138. treeOption: {
  139. nodeKey: 'id',
  140. addBtn: false,
  141. menu: false,
  142. props: {
  143. label: 'name',
  144. value: 'id'
  145. }
  146. },
  147. treeData: [],
  148. option: tableOption,
  149. treeDeptData: [],
  150. checkedKeys: [],
  151. roleProps: {
  152. label: 'roleName',
  153. value: 'roleId'
  154. },
  155. defaultProps: {
  156. label: 'name',
  157. value: 'id'
  158. },
  159. page: {
  160. total: 0, // 总页数
  161. currentPage: 1, // 当前页数
  162. pageSize: 20, // 每页显示多少条,
  163. isAsc: false// 是否倒序
  164. },
  165. list: [],
  166. listLoading: true,
  167. role: [],
  168. form: {},
  169. rolesOptions: []
  170. }
  171. },
  172. computed: {
  173. ...mapGetters(['permissions'])
  174. },
  175. watch: {
  176. role() {
  177. this.form.role = this.role
  178. }
  179. },
  180. created() {
  181. this.sys_user_add = this.permissions['sys_user_add']
  182. this.sys_user_edit = this.permissions['sys_user_edit']
  183. this.sys_user_del = this.permissions['sys_user_del']
  184. this.init()
  185. },
  186. methods: {
  187. init() {
  188. fetchTree().then(response => {
  189. this.treeData = response.data.data
  190. })
  191. },
  192. nodeClick(data) {
  193. this.page.page = 1
  194. this.getList(this.page, { deptId: data.id })
  195. },
  196. getList(page, params) {
  197. this.listLoading = true
  198. fetchList(Object.assign({
  199. current: page.currentPage,
  200. size: page.pageSize
  201. }, params)).then(response => {
  202. this.list = response.data.data.records
  203. this.page.total = response.data.data.total
  204. this.listLoading = false
  205. })
  206. },
  207. getNodeData() {
  208. deptRoleList().then(response => {
  209. this.rolesOptions = response.data.data
  210. })
  211. },
  212. handleDept() {
  213. fetchTree().then(response => {
  214. this.treeDeptData = response.data.data
  215. })
  216. },
  217. handleFilter(param) {
  218. this.page.page = 1
  219. this.getList(this.page, param)
  220. },
  221. handleRefreshChange() {
  222. this.getList(this.page)
  223. },
  224. handleCreate() {
  225. this.$refs.crud.rowAdd()
  226. },
  227. handleOpenBefore(show, type) {
  228. window.boxType = type
  229. this.handleDept()
  230. if (['edit', 'views'].includes(type)) {
  231. this.role = []
  232. for (var i = 0; i < this.form.roleList.length; i++) {
  233. this.role[i] = this.form.roleList[i].roleId
  234. }
  235. deptRoleList().then(response => {
  236. this.rolesOptions = response.data.data
  237. })
  238. } else if (type === 'add') {
  239. this.role = []
  240. }
  241. show()
  242. },
  243. handleUpdate(row, index) {
  244. this.$refs.crud.rowEdit(row, index)
  245. this.form.password = undefined
  246. },
  247. create(row, done, loading) {
  248. addObj(this.form).then(() => {
  249. this.getList(this.page)
  250. done()
  251. this.$notify({
  252. title: '成功',
  253. message: '创建成功',
  254. type: 'success',
  255. duration: 2000
  256. })
  257. }).catch(() => {
  258. loading()
  259. })
  260. },
  261. update(row, index, done, loading) {
  262. putObj(this.form).then(() => {
  263. this.getList(this.page)
  264. done()
  265. this.$notify({
  266. title: '成功',
  267. message: '修改成功',
  268. type: 'success',
  269. duration: 2000
  270. })
  271. }).catch(() => {
  272. loading()
  273. })
  274. },
  275. deletes(row, index) {
  276. this.$confirm(
  277. '此操作将永久删除该用户(用户名:' + row.username + '), 是否继续?',
  278. '提示',
  279. {
  280. confirmButtonText: '确定',
  281. cancelButtonText: '取消',
  282. type: 'warning'
  283. }
  284. ).then(() => {
  285. delObj(row.userId)
  286. .then(() => {
  287. this.list.splice(index, 1)
  288. this.$notify({
  289. title: '成功',
  290. message: '删除成功',
  291. type: 'success',
  292. duration: 2000
  293. })
  294. })
  295. .cache(() => {
  296. this.$notify({
  297. title: '失败',
  298. message: '删除失败',
  299. type: 'error',
  300. duration: 2000
  301. })
  302. })
  303. })
  304. }
  305. }
  306. }
  307. </script>
  308. <style lang="scss">
  309. .user {
  310. height: 100%;
  311. &__tree {
  312. padding-top: 3px;
  313. padding-right: 20px;
  314. }
  315. &__main {
  316. .el-card__body {
  317. padding-top: 0;
  318. }
  319. }
  320. }
  321. </style>