role.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567
  1. <template>
  2. <basic-container>
  3. <avue-crud
  4. :option="option"
  5. :table-loading="loading"
  6. :data="data"
  7. ref="crud"
  8. v-model="form"
  9. :permission="permissionList"
  10. :before-open="beforeOpen"
  11. @row-del="rowDel"
  12. @row-update="rowUpdate"
  13. @row-save="rowSave"
  14. @search-change="searchChange"
  15. @search-reset="searchReset"
  16. @selection-change="selectionChange"
  17. @current-change="currentChange"
  18. @size-change="sizeChange"
  19. @refresh-change="refreshChange"
  20. @on-load="onLoad"
  21. >
  22. <template slot="menuLeft">
  23. <el-button
  24. type="danger"
  25. size="small"
  26. icon="el-icon-delete"
  27. v-if="permission.role_delete"
  28. plain
  29. @click="handleDelete"
  30. >删 除
  31. </el-button>
  32. <el-button
  33. size="small"
  34. icon="el-icon-setting"
  35. @click="handleRole"
  36. v-if="userInfo.role_name.includes('admin')"
  37. plain
  38. >权限设置
  39. </el-button>
  40. </template>
  41. </avue-crud>
  42. <el-dialog
  43. title="角色权限配置"
  44. append-to-body
  45. :visible.sync="box"
  46. width="610px"
  47. >
  48. <el-tabs type="border-card">
  49. <el-tab-pane label="后管菜单权限">
  50. <el-tree
  51. :data="menuGrantList"
  52. show-checkbox
  53. node-key="id"
  54. ref="treeMenu"
  55. :default-checked-keys="menuTreeObj"
  56. :props="props"
  57. >
  58. </el-tree>
  59. </el-tab-pane>
  60. <el-tab-pane label="客户端菜单权限">
  61. <el-tree
  62. :data="menuClientList"
  63. show-checkbox
  64. node-key="id"
  65. ref="treeClientMenu"
  66. :default-checked-keys="menuClientObj"
  67. :props="props"
  68. >
  69. </el-tree>
  70. </el-tab-pane>
  71. <el-tab-pane label="档案菜单权限">
  72. <el-tree
  73. :data="archivesMenuList"
  74. show-checkbox
  75. node-key="id"
  76. ref="treeArchivestMenu"
  77. :default-checked-keys="archivesmenuObj"
  78. :props="props"
  79. >
  80. </el-tree>
  81. </el-tab-pane>
  82. <el-tab-pane label="内控菜单权限">
  83. <el-tree
  84. :data="hacMenuList"
  85. show-checkbox
  86. node-key="id"
  87. ref="treeHacMenu"
  88. :default-checked-keys="hacmenuObj"
  89. :props="props"
  90. >
  91. </el-tree>
  92. </el-tab-pane>
  93. <el-tab-pane label="征拆菜单权限">
  94. <el-tree
  95. :data="larMenuList"
  96. show-checkbox
  97. node-key="id"
  98. ref="treelarMenu"
  99. :default-checked-keys="larmenuObj"
  100. :props="props"
  101. >
  102. </el-tree>
  103. </el-tab-pane>
  104. <el-tab-pane label="表单权限">
  105. <el-tree
  106. :data="tableOwnerList"
  107. show-checkbox
  108. node-key="id"
  109. ref="tableOwners"
  110. :default-checked-keys="tableOwnerObj"
  111. :props="props"
  112. >
  113. </el-tree>
  114. </el-tab-pane>
  115. <el-tab-pane label="数据权限">
  116. <el-tree
  117. :data="dataScopeGrantList"
  118. show-checkbox
  119. node-key="id"
  120. ref="treeDataScope"
  121. :default-checked-keys="dataScopeTreeObj"
  122. :props="props"
  123. >
  124. </el-tree>
  125. </el-tab-pane>
  126. <el-tab-pane label="接口权限">
  127. <el-tree
  128. :data="apiScopeGrantList"
  129. show-checkbox
  130. node-key="id"
  131. ref="treeApiScope"
  132. :default-checked-keys="apiScopeTreeObj"
  133. :props="props"
  134. >
  135. </el-tree>
  136. </el-tab-pane>
  137. </el-tabs>
  138. <span
  139. slot="footer"
  140. class="dialog-footer"
  141. >
  142. <el-button @click="box = false">取 消</el-button>
  143. <el-button
  144. type="primary"
  145. @click="submit"
  146. >确 定</el-button>
  147. </span>
  148. </el-dialog>
  149. </basic-container>
  150. </template>
  151. <script>
  152. import {add, getList, getRole, getRoleTreeById, grant, grantTree, remove, update} from "@/api/system/role";
  153. import {getPostList} from "@/api/system/post";
  154. import {mapGetters} from "vuex";
  155. import website from '@/config/website';
  156. export default {
  157. data() {
  158. return {
  159. form: {},
  160. box: false,
  161. props: {
  162. label: "title",
  163. value: "key"
  164. },
  165. menuGrantList: [],
  166. archivesMenuList:[],
  167. larMenuList:[],
  168. hacMenuList:[],
  169. dataScopeGrantList: [],
  170. menuClientList: [],
  171. apiScopeGrantList: [],
  172. tableOwnerList: [],
  173. apiGrantList: [],
  174. menuTreeObj: [],
  175. menuClientObj: [],
  176. archivesmenuObj:[],
  177. larmenuObj:[],
  178. hacmenuObj:[],
  179. tableOwnerObj: [],
  180. dataScopeTreeObj: [],
  181. apiScopeTreeObj: [],
  182. selectionList: [],
  183. query: {},
  184. loading: true,
  185. page: {
  186. pageSize: 10,
  187. currentPage: 1,
  188. total: 0
  189. },
  190. option: {
  191. tip: false,
  192. simplePage: true,
  193. searchShow: true,
  194. searchMenuSpan: 6,
  195. tree: true,
  196. border: true,
  197. index: true,
  198. selection: true,
  199. viewBtn: true,
  200. dialogWidth: 900,
  201. dialogClickModal: false,
  202. column: [
  203. {
  204. label: "角色名称",
  205. prop: "roleName",
  206. search: true,
  207. span: 24,
  208. rules: [
  209. {
  210. required: true,
  211. message: "请输入角色名称",
  212. trigger: "blur"
  213. }
  214. ]
  215. },
  216. {
  217. label: "所属租户",
  218. prop: "tenantId",
  219. type: "tree",
  220. dicUrl: "/api/blade-system/tenant/select",
  221. addDisplay: false,
  222. editDisplay: false,
  223. viewDisplay: website.tenantMode,
  224. span: 24,
  225. props: {
  226. label: "tenantName",
  227. value: "tenantId"
  228. },
  229. hide: !website.tenantMode,
  230. search: website.tenantMode,
  231. rules: [{
  232. required: true,
  233. message: "请输入所属租户",
  234. trigger: "click"
  235. }]
  236. },
  237. {
  238. label: "角色别名",
  239. prop: "roleAlias",
  240. search: true,
  241. span: 24,
  242. rules: [
  243. {
  244. required: true,
  245. message: "请输入角色别名",
  246. trigger: "blur"
  247. }
  248. ]
  249. },
  250. {
  251. label: "上级角色",
  252. prop: "parentId",
  253. dicData: [],
  254. type: "tree",
  255. hide: true,
  256. span: 24,
  257. props: {
  258. label: "title"
  259. },
  260. rules: [
  261. {
  262. required: false,
  263. message: "请选择上级角色",
  264. trigger: "click"
  265. }
  266. ]
  267. },
  268. {
  269. label: "角色排序",
  270. prop: "sort",
  271. type: "number",
  272. span: 24,
  273. rules: [
  274. {
  275. required: true,
  276. message: "请输入角色排序",
  277. trigger: "blur"
  278. }
  279. ]
  280. }
  281. ]
  282. },
  283. data: []
  284. };
  285. },
  286. computed: {
  287. ...mapGetters(["userInfo", "permission"]),
  288. permissionList() {
  289. return {
  290. addBtn: this.vaildData(this.permission.role_add, false),
  291. viewBtn: this.vaildData(this.permission.role_view, false),
  292. delBtn: this.vaildData(this.permission.role_delete, false),
  293. editBtn: this.vaildData(this.permission.role_edit, false)
  294. };
  295. },
  296. ids() {
  297. let ids = [];
  298. this.selectionList.forEach(ele => {
  299. ids.push(ele.id);
  300. });
  301. return ids.join(",");
  302. },
  303. idsArray() {
  304. let ids = [];
  305. this.selectionList.forEach(ele => {
  306. ids.push(ele.id);
  307. });
  308. return ids;
  309. }
  310. },
  311. methods: {
  312. initData(roleId) {
  313. getRoleTreeById(roleId).then(res => {
  314. const column = this.findObject(this.option.column, "parentId");
  315. column.dicData = res.data.data;
  316. });
  317. let tenantId = website.tenantId;
  318. getPostList(tenantId).then(res => {
  319. const column = this.findObject(this.option.column, "pId");
  320. column.dicData = res.data.data;
  321. });
  322. },
  323. submit() {
  324. const menuList = this.$refs.treeMenu.getCheckedKeys();
  325. const menuClientList = this.$refs.treeClientMenu.getCheckedKeys();
  326. const menuArchivesList = this.$refs.treeArchivestMenu.getCheckedKeys();
  327. const menuHacList=this.$refs.treeHacMenu.getCheckedKeys();
  328. const menuLarList= this.$refs.treelarMenu.getCheckedKeys();
  329. const menuListHanlf = this.$refs.treeMenu.getHalfCheckedKeys();
  330. const menuClientListHanlf = this.$refs.treeClientMenu.getHalfCheckedKeys();
  331. const menuArchivesListHalf = this.$refs.treeArchivestMenu.getHalfCheckedKeys();
  332. const menuLarsListHalf = this.$refs.treelarMenu.getHalfCheckedKeys();
  333. const menuHacListHalf = this.$refs.treeHacMenu.getHalfCheckedKeys();
  334. const dataScopeList = this.$refs.treeDataScope.getCheckedKeys();
  335. const apiScopeList = this.$refs.treeApiScope.getCheckedKeys();
  336. const tableOwnersList = this.$refs.tableOwners.getCheckedKeys();
  337. let menuAll = [];
  338. let menuClientAll = [];
  339. let menuArchivesAll = [];
  340. let menuHacAll = [];
  341. let menuLarAll = [];
  342. menuList.forEach((id)=>{
  343. menuAll.push(id+'---all')
  344. })
  345. menuListHanlf.forEach((id)=>{
  346. menuAll.push(id+'---hanlf')
  347. })
  348. menuClientList.forEach((id)=>{
  349. menuClientAll.push(id+'---all')
  350. })
  351. menuClientListHanlf.forEach((id)=>{
  352. menuClientAll.push(id+'---hanlf')
  353. })
  354. menuArchivesList.forEach((id)=>{
  355. menuArchivesAll.push(id+'---all')
  356. })
  357. menuArchivesListHalf.forEach((id)=>{
  358. menuArchivesAll.push(id+'---hanlf')
  359. })
  360. menuHacList.forEach((id)=>{
  361. menuHacAll.push(id+'---all')
  362. })
  363. menuHacListHalf.forEach((id)=>{
  364. menuHacAll.push(id+'---hanlf')
  365. })
  366. menuLarList.forEach((id)=>{
  367. menuLarAll.push(id+'---all')
  368. })
  369. menuLarsListHalf.forEach((id)=>{
  370. menuLarAll.push(id+'---hanlf')
  371. })
  372. grant(this.idsArray, menuAll, menuClientAll,menuArchivesAll,menuHacAll,menuLarAll, dataScopeList, apiScopeList, tableOwnersList).then(() => {
  373. this.box = false;
  374. this.$message({
  375. type: "success",
  376. message: "操作成功!"
  377. });
  378. this.onLoad(this.page);
  379. });
  380. },
  381. rowSave(row, done, loading) {
  382. add(row).then(() => {
  383. this.onLoad(this.page);
  384. this.$message({
  385. type: "success",
  386. message: "操作成功!"
  387. });
  388. done();
  389. }, error => {
  390. window.console.log(error);
  391. loading();
  392. });
  393. },
  394. rowUpdate(row, index, done, loading) {
  395. update(row).then(() => {
  396. this.onLoad(this.page);
  397. this.$message({
  398. type: "success",
  399. message: "操作成功!"
  400. });
  401. done();
  402. }, error => {
  403. window.console.log(error);
  404. loading();
  405. });
  406. },
  407. rowDel(row) {
  408. this.$confirm("确定将选择数据删除?", {
  409. confirmButtonText: "确定",
  410. cancelButtonText: "取消",
  411. type: "warning"
  412. })
  413. .then(() => {
  414. return remove(row.id);
  415. })
  416. .then(() => {
  417. this.onLoad(this.page);
  418. this.$message({
  419. type: "success",
  420. message: "操作成功!"
  421. });
  422. });
  423. },
  424. searchReset() {
  425. this.query = {};
  426. this.onLoad(this.page);
  427. },
  428. searchChange(params, done) {
  429. this.query = params;
  430. this.page.currentPage = 1;
  431. this.onLoad(this.page, params);
  432. done();
  433. },
  434. selectionChange(list) {
  435. this.selectionList = list;
  436. },
  437. selectionClear() {
  438. this.selectionList = [];
  439. this.$refs.crud.toggleSelection();
  440. },
  441. beforeOpen(done, type) {
  442. if (["add", "edit"].includes(type)) {
  443. this.initData(this.form.id);
  444. }
  445. done();
  446. },
  447. handleRole() {
  448. if (this.selectionList.length !== 1) {
  449. this.$message.warning("只能选择一条数据");
  450. return;
  451. }
  452. this.menuTreeObj = [];
  453. this.menuClientObj = [];
  454. this.archivesmenuObj=[];
  455. this.larmenuObj=[]
  456. this.hacmenuObj=[];
  457. this.dataScopeTreeObj = [];
  458. this.apiScopeTreeObj = [];
  459. this.tableOwnerObj = [];
  460. grantTree()
  461. .then(res => {
  462. this.menuGrantList = res.data.data.menu;
  463. this.archivesMenuList= res.data.data.archivesMenu;
  464. this.larMenuList= res.data.data.alarMenu;
  465. this.hacMenuList=res.data.data.hacMenu;
  466. this.menuClientList = res.data.data.usermenu;
  467. this.tableOwnerList = res.data.data.tableOwners;
  468. this.dataScopeGrantList = res.data.data.dataScope;
  469. this.apiScopeGrantList = res.data.data.apiScope;
  470. getRole(this.ids).then(res => {
  471. let menuTreeObj = [];
  472. res.data.data.menu.forEach((item)=>{
  473. let arr = item.split("---");
  474. if(arr[1] == 'all'){
  475. menuTreeObj.push(arr[0])
  476. }
  477. });
  478. this.menuTreeObj = menuTreeObj;
  479. let menuClientObj = [];
  480. let archivesmenuObj=[];
  481. let larmenuObj=[]
  482. let hacmenuObj=[]
  483. res.data.data.usermenu.forEach((item)=>{
  484. let arr = item.split("---");
  485. if(arr[1] == 'all'){
  486. menuClientObj.push(arr[0])
  487. archivesmenuObj.push(arr[0])
  488. hacmenuObj.push(arr[0])
  489. larmenuObj.push(arr[0])
  490. }
  491. });
  492. this.menuClientObj = menuClientObj;
  493. this.archivesmenuObj=archivesmenuObj
  494. this.hacmenuObj=hacmenuObj
  495. this.larmenuObj=larmenuObj
  496. this.tableOwnerObj = res.data.data.tableOwners;
  497. this.dataScopeTreeObj = res.data.data.dataScope;
  498. this.apiScopeTreeObj = res.data.data.apiScope;
  499. this.box = true;
  500. });
  501. });
  502. },
  503. handleDelete() {
  504. if (this.selectionList.length === 0) {
  505. this.$message.warning("请选择至少一条数据");
  506. return;
  507. }
  508. this.$confirm("确定将选择数据删除?", {
  509. confirmButtonText: "确定",
  510. cancelButtonText: "取消",
  511. type: "warning"
  512. })
  513. .then(() => {
  514. return remove(this.ids);
  515. })
  516. .then(() => {
  517. this.onLoad(this.page);
  518. this.$message({
  519. type: "success",
  520. message: "操作成功!"
  521. });
  522. this.$refs.crud.toggleSelection();
  523. });
  524. },
  525. currentChange(currentPage) {
  526. this.page.currentPage = currentPage;
  527. },
  528. sizeChange(pageSize) {
  529. this.page.pageSize = pageSize;
  530. },
  531. refreshChange() {
  532. this.onLoad(this.page, this.query);
  533. },
  534. onLoad(page, params = {}) {
  535. this.loading = true;
  536. getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
  537. this.data = res.data.data;
  538. this.loading = false;
  539. this.selectionClear();
  540. });
  541. }
  542. }
  543. };
  544. </script>