fz-index.vue 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719
  1. <template>
  2. <div class="app-container">
  3. <el-row class="roleBox">
  4. <el-col :span="24" class="roleCol">
  5. <div class="roleH"></div>
  6. <span>功能权限</span>
  7. </el-col>
  8. <el-col :span="24" class="roleBot">
  9. <el-row :gutter="10" class="mb8">
  10. <el-col :span="1.5">
  11. <el-button type="primary" style="background-color: #2AC1CA;color: #fff;border: none;" plain icon="el-icon-plus"
  12. @click="handleAdd" v-hasPermi="['system:role:add']">新增</el-button>
  13. </el-col>
  14. <el-col :span="1.5">
  15. <el-button type="primary" style="background-color: #FF9639;color: #fff;border: none;" plain icon="el-icon-refresh"
  16. @click="refreshFn" v-hasPermi="['system:role:list']">刷新</el-button>
  17. </el-col>
  18. <el-col :span="1.5">
  19. <el-button type="primary" style="background-color: #3C8DBC;color: #fff;border: none;" plain icon="el-icon-my-export"
  20. @click="handleAdd" v-hasPermi="['system:role:edit']">保存</el-button>
  21. </el-col>
  22. </el-row>
  23. </el-col>
  24. </el-row>
  25. <el-row class="roleCont" style="margin-top: 18px;">
  26. <el-col :span="5" class="searBoxs">
  27. <div class="searBox">
  28. <div class="searInput">
  29. <input type="text" v-model="queryParams.roleName" placeholder="请输入角色">
  30. </div>
  31. <div class="searBtn">
  32. <img src="@/assets/images/icon_sr_ss@2x.png" @click="handleQuery" alt="" class="icon">
  33. </div>
  34. </div>
  35. <div class="searList">
  36. <div class="searItem searItemLeft" element-loading-text="拼命加载中" v-loading.fullscreen.lock="fullscreenLoading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.4)" v-for="item in roleList" @click="searBtnFn(item)" :class="{'active': item.id == roleId}" :key="item.id">
  37. <span>
  38. {{item.roleName}}
  39. </span>
  40. <i class="el-icon-delete" @click.stop="handleDelete(item)" v-if="item.id == roleId"></i>
  41. </div>
  42. </div>
  43. <pagination sty v-show="total>0" :total="total" layout="prev, pager, next" :page.sync="queryParams.pageNum"
  44. :limit.sync="queryParams.pageSize" />
  45. </el-col>
  46. <el-col :span="19" class="roleContr">
  47. <div class="roleContrBox">
  48. <el-col :span="7">
  49. <div class="searContLeft">
  50. <el-tree class="tree-border" @node-click="qxList" :data="deptOptions" default-expand-all ref="dept" node-key="id" :props="defaultProps"></el-tree>
  51. </div>
  52. </el-col>
  53. <el-col :span="17">
  54. <div class="searContRight">
  55. <div class="searTitle">
  56. <div class="searName">
  57. 功能
  58. </div>
  59. <div class="searItem" v-for="item in menusList.heads">
  60. <el-checkbox :label="item.name"></el-checkbox>
  61. </div>
  62. </div>
  63. <div class="searCont" v-if="menusList.sysMenus.length" v-for="items in menusList.sysMenus" @click="searIndex = items.id" :class="{'active': searIndex == items.id}" :key="items.id">
  64. <div class="searName">
  65. {{items.menuName}}
  66. </div>
  67. <div class="searItem" v-for="(itemChild,indexChild) in items.containsHead" :key="indexChild">
  68. <!-- <el-checkbox-group v-model="checkedCities">
  69. <el-checkbox v-for="(item,index) in items.containsHead" :key="index"></el-checkbox>
  70. </el-checkbox-group> -->
  71. <el-checkbox></el-checkbox>
  72. </div>
  73. </div>
  74. </div>
  75. </el-col>
  76. </div>
  77. </el-col>
  78. </el-row>
  79. <!-- 添加或修改角色配置对话框 -->
  80. <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
  81. <el-form ref="form" :model="form" :rules="rules" label-width="80px">
  82. <el-form-item label="角色名称" prop="roleName">
  83. <el-input v-model="form.roleName" placeholder="请输入角色名称" />
  84. </el-form-item>
  85. <el-form-item label="权限字符" prop="roleKey">
  86. <el-input v-model="form.roleKey" placeholder="请输入权限字符" />
  87. </el-form-item>
  88. <el-form-item label="角色顺序" prop="roleSort">
  89. <el-input-number v-model="form.roleSort" controls-position="right" :min="0" />
  90. </el-form-item>
  91. <el-form-item label="备注">
  92. <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
  93. </el-form-item>
  94. </el-form>
  95. <div slot="footer" class="dialog-footer">
  96. <el-button type="primary" @click="submitForm">确 定</el-button>
  97. <el-button @click="cancel">取 消</el-button>
  98. </div>
  99. </el-dialog>
  100. </div>
  101. </template>
  102. <script>
  103. import {
  104. listRole,
  105. getRole,
  106. delRole,
  107. addRole,
  108. updateRole,
  109. exportRole,
  110. dataScope,
  111. changeRoleStatus
  112. } from "@/api/system/role";
  113. import {
  114. treeselect as menuTreeselect,
  115. listMenus,
  116. treeMenuNotAddLeafNode
  117. } from "@/api/system/menu";
  118. import {
  119. treeselect as deptTreeselect,
  120. roleDeptTreeselect
  121. } from "@/api/system/dept";
  122. export default {
  123. name: "Role",
  124. data() {
  125. return {
  126. fullscreenLoading: false,
  127. searIndex: '',
  128. data: [],
  129. defaultProps: {
  130. children: 'children',
  131. label: 'label'
  132. },
  133. indexs: 3,
  134. menusList: '',
  135. // 遮罩层
  136. loading: true,
  137. // 选中数组
  138. ids: [],
  139. // 非单个禁用
  140. single: true,
  141. // 非多个禁用
  142. multiple: true,
  143. // 显示搜索条件
  144. showSearch: true,
  145. // 总条数
  146. total: 0,
  147. // 角色表格数据
  148. roleList: [],
  149. // 弹出层标题
  150. title: "",
  151. // 是否显示弹出层
  152. open: false,
  153. // 是否显示弹出层(数据权限)
  154. openDataScope: false,
  155. menuExpand: false,
  156. menuNodeAll: false,
  157. deptExpand: true,
  158. deptNodeAll: false,
  159. // 日期范围
  160. dateRange: [],
  161. // 状态数据字典
  162. statusOptions: [],
  163. // 数据范围选项
  164. dataScopeOptions: [{
  165. value: "1",
  166. label: "全部数据权限"
  167. },
  168. {
  169. value: "2",
  170. label: "自定数据权限"
  171. },
  172. {
  173. value: "3",
  174. label: "本部门数据权限"
  175. },
  176. {
  177. value: "4",
  178. label: "本部门及以下数据权限"
  179. },
  180. {
  181. value: "5",
  182. label: "仅本人数据权限"
  183. }
  184. ],
  185. // 菜单列表
  186. menuOptions: [],
  187. // 部门列表
  188. deptOptions: [],
  189. // 查询参数
  190. queryParams: {
  191. pageNum: 1,
  192. pageSize: 10,
  193. roleName: undefined,
  194. roleKey: undefined,
  195. status: undefined
  196. },
  197. roleId: '',
  198. // 表单参数
  199. form: {},
  200. // 表单校验
  201. rules: {
  202. roleName: [{
  203. required: true,
  204. message: "角色名称不能为空",
  205. trigger: "blur"
  206. }],
  207. roleKey: [{
  208. required: true,
  209. message: "权限字符不能为空",
  210. trigger: "blur"
  211. }],
  212. roleSort: [{
  213. required: true,
  214. message: "角色顺序不能为空",
  215. trigger: "blur"
  216. }]
  217. }
  218. };
  219. },
  220. created() {
  221. this.getList();
  222. this.getDicts("sys_normal_disable").then(response => {
  223. this.statusOptions = response.data;
  224. });
  225. },
  226. methods: {
  227. qxList(e) {
  228. listMenus(e.id).then(res => {
  229. let data = res.data
  230. this.menusList = data
  231. })
  232. },
  233. refreshFn() {
  234. // this.getList()
  235. this.reload()
  236. // this.deptOptions = []
  237. },
  238. searBtnFn(item) {
  239. this.roleId = item.id
  240. this.handleUpdate()
  241. },
  242. handleNodeClick() {
  243. console.log(221)
  244. },
  245. /** 查询角色列表 */
  246. getList() {
  247. this.loading = true;
  248. listRole(this.addDateRange(this.queryParams, this.dateRange)).then(
  249. response => {
  250. this.roleList = response.rows;
  251. this.total = response.total;
  252. this.loading = false;
  253. }
  254. );
  255. },
  256. /** 查询菜单树结构 */
  257. getMenuTreeselect() {
  258. menuTreeselect().then(response => {
  259. this.menuOptions = response.data;
  260. });
  261. },
  262. /** 查询部门树结构 */
  263. getDeptTreeselect() {
  264. deptTreeselect().then(response => {
  265. this.deptOptions = response.data;
  266. });
  267. },
  268. // 所有菜单节点数据
  269. getMenuAllCheckedKeys() {
  270. // 目前被选中的菜单节点
  271. let checkedKeys = this.$refs.menu.getCheckedKeys();
  272. // 半选中的菜单节点
  273. let halfCheckedKeys = this.$refs.menu.getHalfCheckedKeys();
  274. checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
  275. return checkedKeys;
  276. },
  277. // 所有部门节点数据
  278. getDeptAllCheckedKeys() {
  279. // 目前被选中的部门节点
  280. let checkedKeys = this.$refs.dept.getCheckedKeys();
  281. // 半选中的部门节点
  282. let halfCheckedKeys = this.$refs.dept.getHalfCheckedKeys();
  283. checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
  284. return checkedKeys;
  285. },
  286. /** 根据角色ID查询菜单树结构 */
  287. getRoleMenuTreeselect(id) {
  288. return treeMenuNotAddLeafNode(id).then(response => {
  289. this.menuOptions = response.menus;
  290. return response;
  291. });
  292. },
  293. /** 根据角色ID查询部门树结构 */
  294. getRoleDeptTreeselect(id) {
  295. return roleDeptTreeselect(id).then(response => {
  296. this.deptOptions = response.depts;
  297. return response;
  298. });
  299. },
  300. // 角色状态修改
  301. handleStatusChange(row) {
  302. let text = row.status === "0" ? "启用" : "停用";
  303. this.$confirm('确认要"' + text + '""' + row.roleName + '"角色吗?', "警告", {
  304. confirmButtonText: "确定",
  305. cancelButtonText: "取消",
  306. type: "warning"
  307. }).then(function() {
  308. return changeRoleStatus(row.id, row.status);
  309. }).then(() => {
  310. this.msgSuccess(text + "成功");
  311. }).catch(function() {
  312. row.status = row.status === "0" ? "1" : "0";
  313. });
  314. },
  315. // 取消按钮
  316. cancel() {
  317. this.open = false;
  318. this.reset();
  319. },
  320. // 取消按钮(数据权限)
  321. cancelDataScope() {
  322. this.openDataScope = false;
  323. this.reset();
  324. },
  325. // 表单重置
  326. reset() {
  327. if (this.$refs.menu != undefined) {
  328. this.$refs.menu.setCheckedKeys([]);
  329. }
  330. this.menuExpand = false,
  331. this.menuNodeAll = false,
  332. this.deptExpand = true,
  333. this.deptNodeAll = false,
  334. this.form = {
  335. id: undefined,
  336. roleName: undefined,
  337. roleKey: undefined,
  338. roleSort: 0,
  339. status: "0",
  340. menuIds: [],
  341. deptIds: [],
  342. menuCheckStrictly: true,
  343. deptCheckStrictly: true,
  344. remark: undefined
  345. };
  346. this.resetForm("form");
  347. },
  348. /** 搜索按钮操作 */
  349. handleQuery() {
  350. this.queryParams.pageNum = 1;
  351. this.getList();
  352. },
  353. /** 重置按钮操作 */
  354. resetQuery() {
  355. this.dateRange = [];
  356. this.resetForm("queryForm");
  357. this.handleQuery();
  358. },
  359. // 多选框选中数据
  360. handleSelectionChange(selection) {
  361. this.ids = selection.map(item => item.id)
  362. this.single = selection.length != 1
  363. this.multiple = !selection.length
  364. },
  365. // 树权限(展开/折叠)
  366. handleCheckedTreeExpand(value, type) {
  367. if (type == 'menu') {
  368. let treeList = this.menuOptions;
  369. for (let i = 0; i < treeList.length; i++) {
  370. this.$refs.menu.store.nodesMap[treeList[i].id].expanded = value;
  371. }
  372. } else if (type == 'dept') {
  373. let treeList = this.deptOptions;
  374. for (let i = 0; i < treeList.length; i++) {
  375. this.$refs.dept.store.nodesMap[treeList[i].id].expanded = value;
  376. }
  377. }
  378. },
  379. // 树权限(全选/全不选)
  380. handleCheckedTreeNodeAll(value, type) {
  381. if (type == 'menu') {
  382. this.$refs.menu.setCheckedNodes(value ? this.menuOptions : []);
  383. } else if (type == 'dept') {
  384. this.$refs.dept.setCheckedNodes(value ? this.deptOptions : []);
  385. }
  386. },
  387. // 树权限(父子联动)
  388. handleCheckedTreeConnect(value, type) {
  389. if (type == 'menu') {
  390. this.form.menuCheckStrictly = value ? true : false;
  391. } else if (type == 'dept') {
  392. this.form.deptCheckStrictly = value ? true : false;
  393. }
  394. },
  395. /** 新增按钮操作 */
  396. handleAdd() {
  397. this.reset();
  398. this.getMenuTreeselect();
  399. this.open = true;
  400. this.title = "添加角色";
  401. },
  402. /** 修改按钮操作 */
  403. handleUpdate() {
  404. this.reset();
  405. this.fullscreenLoading = true
  406. const roleMenu = this.getRoleMenuTreeselect(this.roleId);
  407. roleMenu.then(res => {
  408. // let checkedKeys = res.checkedKeys
  409. this.deptOptions = res.menus
  410. this.fullscreenLoading = false
  411. });
  412. },
  413. /** 选择角色权限范围触发 */
  414. dataScopeSelectChange(value) {
  415. if (value !== '2') {
  416. this.$refs.dept.setCheckedKeys([]);
  417. }
  418. },
  419. /** 分配数据权限操作 */
  420. handleDataScope(row) {
  421. this.reset();
  422. const roleDeptTreeselect = this.getRoleDeptTreeselect(row.id);
  423. getRole(row.id).then(response => {
  424. this.form = response.data;
  425. this.openDataScope = true;
  426. this.$nextTick(() => {
  427. roleDeptTreeselect.then(res => {
  428. this.$refs.dept.setCheckedKeys(res.checkedKeys);
  429. });
  430. });
  431. this.title = "分配数据权限";
  432. });
  433. },
  434. /** 提交按钮 */
  435. submitForm: function() {
  436. this.$refs["form"].validate(valid => {
  437. if (valid) {
  438. if (this.form.id != undefined) {
  439. // this.form.menuIds = this.getMenuAllCheckedKeys();
  440. updateRole(this.form).then(response => {
  441. this.msgSuccess("修改成功");
  442. this.open = false;
  443. this.getList();
  444. });
  445. } else {
  446. // this.form.menuIds = this.getMenuAllCheckedKeys();
  447. addRole(this.form).then(response => {
  448. this.msgSuccess("新增成功");
  449. this.open = false;
  450. this.getList();
  451. });
  452. }
  453. }
  454. });
  455. },
  456. /** 提交按钮(数据权限) */
  457. submitDataScope: function() {
  458. if (this.form.id != undefined) {
  459. this.form.deptIds = this.getDeptAllCheckedKeys();
  460. dataScope(this.form).then(response => {
  461. this.msgSuccess("修改成功");
  462. this.openDataScope = false;
  463. this.getList();
  464. });
  465. }
  466. },
  467. /** 删除按钮操作 */
  468. handleDelete(row) {
  469. const ids = row.id || this.ids;
  470. this.$confirm('是否确认删除角色编号为"' + ids + '"的数据项?', "警告", {
  471. confirmButtonText: "确定",
  472. cancelButtonText: "取消",
  473. type: "warning",
  474. }).then(function() {
  475. return delRole(ids);
  476. }).then(() => {
  477. this.getList();
  478. this.deptOptions = []
  479. this.msgSuccess("删除成功");
  480. })
  481. },
  482. /** 导出按钮操作 */
  483. handleExport() {
  484. this.download('system/role/export', {
  485. ...this.queryParams
  486. }, `role_${new Date().getTime()}.xlsx`)
  487. }
  488. }
  489. };
  490. </script>
  491. <style lang="scss" scoped>
  492. .searItemLeft{
  493. display: flex;
  494. justify-content: space-between;
  495. align-items: center;
  496. }
  497. .roleContrBox {
  498. background-color: #fff;
  499. border-radius: 6px;
  500. overflow: hidden;
  501. padding: 23px 0;
  502. height: calc(100% - 183px);
  503. }
  504. .roleContr {
  505. padding-left: 17px;
  506. .searContLeft {
  507. max-height: calc(100vh - 353px);
  508. overflow-y: auto;
  509. box-sizing: border-box;
  510. padding: 23px 17px 23px 23px;
  511. border-right: 2px solid #E5E5E5;
  512. &::-webkit-scrollbar {
  513. display: none;
  514. }
  515. }
  516. .searContRight {
  517. padding-left: 18px;
  518. .searTitle {
  519. display: flex;
  520. padding-left: 11px;
  521. margin-bottom: 26px;
  522. .searName {
  523. color: #343434;
  524. font-size: 12px;
  525. width: 156px;
  526. }
  527. .searItem {
  528. flex: 1;
  529. font-size: 12px;
  530. }
  531. }
  532. .searCont {
  533. display: flex;
  534. height: 23px;
  535. padding-left: 11px;
  536. align-items: center;
  537. margin-bottom: 4px;
  538. cursor: pointer;
  539. .searName {
  540. color: #343434;
  541. font-size: 12px;
  542. width: 156px;
  543. }
  544. .searItem {
  545. flex: 1;
  546. font-size: 12px;
  547. }
  548. &:hover {
  549. background-color: rgba(0, 0, 0, .1);
  550. }
  551. }
  552. .active {
  553. background-color: #CADBE4;
  554. .searName {
  555. color: #fff;
  556. }
  557. }
  558. }
  559. }
  560. .searBoxs {
  561. background-color: #fff;
  562. border-radius: 6px;
  563. box-sizing: border-box;
  564. padding: 23px;
  565. .searBox {
  566. display: flex;
  567. .searInput {
  568. flex: 1;
  569. height: 32px;
  570. margin-right: 8px;
  571. box-sizing: border-box;
  572. }
  573. input {
  574. width: 100%;
  575. height: 100%;
  576. background-color: #F7F6F6;
  577. border: none;
  578. padding: 0 7px;
  579. outline: none;
  580. &::placeholder {
  581. color: #AAAAAA;
  582. font-size: 12px;
  583. }
  584. }
  585. .searBtn {
  586. width: 30px;
  587. height: 32px;
  588. display: flex;
  589. justify-content: center;
  590. align-items: center;
  591. background-color: #3C8DBC;
  592. cursor: pointer;
  593. .icon {
  594. width: 18px;
  595. height: 17px;
  596. }
  597. }
  598. }
  599. .searList {
  600. padding: 10px 0;
  601. .searItem {
  602. padding: 0 8px;
  603. line-height: 30px;
  604. font-size: 12px;
  605. color: #343434;
  606. cursor: pointer;
  607. }
  608. .active {
  609. background-color: #CADBE4;
  610. color: #3C8DBC;
  611. }
  612. }
  613. }
  614. .app-container {
  615. background-color: #EFF0FF;
  616. height: calc(100vh - 84px);
  617. box-sizing: border-box;
  618. }
  619. .roleBox {
  620. padding: 0 23px;
  621. background: #fff;
  622. border-radius: 6px;
  623. .roleCol {
  624. padding: 20px 0;
  625. border-bottom: 1px solid #E5E5E5;
  626. .roleH {
  627. width: 18px;
  628. height: 8px;
  629. border-radius: 4px;
  630. background-color: #3C8DBC;
  631. margin-bottom: 8px;
  632. }
  633. span {
  634. font-size: 15px;
  635. color: #3C8DBC;
  636. }
  637. }
  638. .roleBot {
  639. padding: 22px 0;
  640. .roleBtn {
  641. height: 32px;
  642. display: flex;
  643. border-radius: 3px;
  644. justify-content: center;
  645. align-items: center;
  646. width: 83px;
  647. margin-right: 18px;
  648. .icon {
  649. width: 14px;
  650. height: 14px;
  651. margin-right: 7px;
  652. }
  653. span {
  654. color: #fff;
  655. font-size: 12px;
  656. }
  657. }
  658. }
  659. }
  660. </style>
  661. <style>
  662. .el-icon-my-export {
  663. background: url('~@/assets/images/icon_btn_bc@2x.png') center no-repeat;
  664. background-size: 13px 13px;
  665. /* background-size: cover;*/
  666. }
  667. .el-icon-my-export:before {
  668. content: "替";
  669. font-size: 16px;
  670. visibility: hidden;
  671. }
  672. .el-icon-my-export {
  673. font-size: 16px;
  674. }
  675. .el-icon-my-export:before {
  676. content: "\e611";
  677. }
  678. </style>