index.vue 9.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300
  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="app-container calendar-list-container">
  19. <basic-container>
  20. <avue-crud :option="tableOption"
  21. :data="list"
  22. ref="crud"
  23. :page="page"
  24. v-model="form"
  25. :table-loading="listLoading"
  26. :before-open="handleOpenBefore"
  27. @on-load="getList"
  28. @search-change="handleFilter"
  29. @refresh-change="handleRefreshChange"
  30. @row-update="update"
  31. @row-save="create">
  32. <template slot="menuLeft">
  33. <el-button v-if="roleManager_btn_add"
  34. class="filter-item"
  35. @click="handleCreate"
  36. size="small"
  37. type="primary"
  38. icon="el-icon-edit">添加
  39. </el-button>
  40. </template>
  41. <template slot="dsScopeForm" slot-scope="scope">
  42. <div v-if="form.dsType == 1">
  43. <el-tree class="filter-tree"
  44. :data="dsScopeData"
  45. :check-strictly="true"
  46. node-key="id"
  47. highlight-current
  48. :props="defaultProps"
  49. ref="scopeTree"
  50. :default-checked-keys="checkedDsScope"
  51. show-checkbox>
  52. </el-tree>
  53. </div>
  54. </template>
  55. <template slot="menu"
  56. slot-scope="scope">
  57. <el-button size="mini"
  58. type="text"
  59. icon="el-icon-edit"
  60. v-if="roleManager_btn_edit"
  61. @click="handleUpdate(scope.row,scope.index)">编辑
  62. </el-button>
  63. <el-button size="mini"
  64. type="text"
  65. icon="el-icon-delete"
  66. v-if="roleManager_btn_del"
  67. @click="handleDelete(scope.row,scope.index)">删除
  68. </el-button>
  69. <el-button size="mini"
  70. type="text"
  71. icon="el-icon-plus"
  72. plain
  73. @click="handlePermission(scope.row,scope.index)"
  74. v-if="roleManager_btn_perm">权限
  75. </el-button>
  76. </template>
  77. </avue-crud>
  78. </basic-container>
  79. <el-dialog title="分配权限"
  80. :visible.sync="dialogPermissionVisible">
  81. <el-tree class="filter-tree"
  82. :data="treeData"
  83. :default-checked-keys="checkedKeys"
  84. :check-strictly="false"
  85. node-key="id"
  86. highlight-current
  87. :props="defaultProps"
  88. show-checkbox
  89. ref="menuTree"
  90. :filter-node-method="filterNode"
  91. default-expand-all>
  92. </el-tree>
  93. <div slot="footer"
  94. class="dialog-footer">
  95. <el-button type="primary"
  96. @click="updatePermession(roleId, roleCode)">更 新
  97. </el-button>
  98. </div>
  99. </el-dialog>
  100. </div>
  101. </template>
  102. <script>
  103. import {addObj, delObj, fetchList, fetchRoleTree, getObj, permissionUpd, putObj} from '@/api/admin/role'
  104. import {tableOption} from '@/const/crud/admin/role'
  105. import {fetchTree} from '@/api/admin/dept'
  106. import {fetchMenuTree} from '@/api/admin/menu'
  107. import {mapGetters} from 'vuex'
  108. export default {
  109. name: 'table_role',
  110. data() {
  111. return {
  112. tableOption: tableOption,
  113. dsScopeData: [],
  114. treeData: [],
  115. checkedKeys: [],
  116. checkedDsScope: [],
  117. defaultProps: {
  118. label: "name",
  119. value: 'id'
  120. },
  121. page: {
  122. total: 0, // 总页数
  123. currentPage: 1, // 当前页数
  124. pageSize: 20 // 每页显示多少条
  125. },
  126. menuIds: '',
  127. list: [],
  128. listLoading: true,
  129. form: {},
  130. roleId: undefined,
  131. roleCode: undefined,
  132. rolesOptions: undefined,
  133. dialogPermissionVisible: false,
  134. roleManager_btn_add: false,
  135. roleManager_btn_edit: false,
  136. roleManager_btn_del: false,
  137. roleManager_btn_perm: false
  138. }
  139. },
  140. created() {
  141. this.roleManager_btn_add = this.permissions['sys_role_add']
  142. this.roleManager_btn_edit = this.permissions['sys_role_edit']
  143. this.roleManager_btn_del = this.permissions['sys_role_del']
  144. this.roleManager_btn_perm = this.permissions['sys_role_perm']
  145. },
  146. computed: {
  147. ...mapGetters(['elements', 'permissions'])
  148. },
  149. methods: {
  150. getList(page, params) {
  151. this.listLoading = true
  152. fetchList(Object.assign({
  153. current: page.currentPage,
  154. size: page.pageSize
  155. }, params)).then(response => {
  156. this.list = response.data.data.records
  157. this.page.total = response.data.data.total
  158. this.listLoading = false
  159. })
  160. },
  161. handleRefreshChange() {
  162. this.getList(this.page)
  163. },
  164. handleFilter(param) {
  165. this.page.page = 1;
  166. this.getList(this.page, param);
  167. },
  168. handleCreate() {
  169. this.$refs.crud.rowAdd();
  170. },
  171. handleOpenBefore(show, type) {
  172. fetchTree().then(response => {
  173. this.dsScopeData = response.data.data;
  174. if (this.form.dsScope) {
  175. this.checkedDsScope = (this.form.dsScope).split(",")
  176. } else {
  177. this.checkedDsScope = []
  178. }
  179. });
  180. show();
  181. },
  182. handleUpdate(row, index) {
  183. this.$refs.crud.rowEdit(row, index);
  184. },
  185. handlePermission(row) {
  186. fetchRoleTree(row.roleId)
  187. .then(response => {
  188. this.checkedKeys = response.data
  189. return fetchMenuTree()
  190. })
  191. .then(response => {
  192. this.treeData = response.data.data
  193. // 解析出所有的太监节点
  194. this.checkedKeys = this.resolveAllEunuchNodeId(this.treeData, this.checkedKeys, [])
  195. this.dialogStatus = 'permission'
  196. this.dialogPermissionVisible = true
  197. this.roleId = row.roleId
  198. this.roleCode = row.roleCode
  199. })
  200. },
  201. /**
  202. * 解析出所有的太监节点id
  203. * @param json 待解析的json串
  204. * @param idArr 原始节点数组
  205. * @param temp 临时存放节点id的数组
  206. * @return 太监节点id数组
  207. */
  208. resolveAllEunuchNodeId(json, idArr, temp) {
  209. for (let i = 0; i < json.length; i++) {
  210. const item = json[i]
  211. // 存在子节点,递归遍历;不存在子节点,将json的id添加到临时数组中
  212. if (item.children && item.children.length !== 0) {
  213. this.resolveAllEunuchNodeId(item.children, idArr, temp)
  214. } else {
  215. temp.push(idArr.filter(id => id === item.id))
  216. }
  217. }
  218. return temp
  219. },
  220. filterNode(value, data) {
  221. if (!value) return true
  222. return data.label.indexOf(value) !== -1
  223. },
  224. getNodeData(data, done) {
  225. done();
  226. },
  227. handleDelete(row, index) {
  228. delObj(row.roleId).then(response => {
  229. this.list.splice(index, 1);
  230. this.$notify({
  231. title: '成功',
  232. message: '删除成功',
  233. type: 'success',
  234. duration: 2000
  235. })
  236. })
  237. },
  238. create(row, done, loading) {
  239. if (this.form.dsType === 1){
  240. this.form.dsScope = this.$refs.scopeTree.getCheckedKeys().join(',')
  241. }
  242. addObj(this.form).then(() => {
  243. this.getList(this.page)
  244. done();
  245. this.$notify({
  246. title: '成功',
  247. message: '创建成功',
  248. type: 'success',
  249. duration: 2000
  250. })
  251. }).catch(() => {
  252. loading();
  253. });
  254. },
  255. update(row, index, done, loading) {
  256. if (this.form.dsType === 1){
  257. this.form.dsScope = this.$refs.scopeTree.getCheckedKeys().join(',')
  258. }
  259. putObj(this.form).then(() => {
  260. this.getList(this.page)
  261. done();
  262. this.$notify({
  263. title: '成功',
  264. message: '修改成功',
  265. type: 'success',
  266. duration: 2000
  267. })
  268. }).catch(() => {
  269. loading();
  270. });
  271. },
  272. updatePermession(roleId, roleCode) {
  273. this.menuIds = ''
  274. this.menuIds = this.$refs.menuTree.getCheckedKeys().join(',').concat(',').concat(this.$refs.menuTree.getHalfCheckedKeys().join(','))
  275. permissionUpd(roleId, this.menuIds).then(() => {
  276. this.dialogPermissionVisible = false
  277. fetchMenuTree()
  278. .then(response => {
  279. this.form = response.data.data
  280. return fetchRoleTree(roleId)
  281. })
  282. .then(response => {
  283. this.checkedKeys = response.data
  284. this.$notify({
  285. title: '成功',
  286. message: '修改成功',
  287. type: 'success',
  288. duration: 2000
  289. })
  290. })
  291. })
  292. }
  293. }
  294. }
  295. </script>