RoleMenuField.vue 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. <template>
  2. <div class="pccm-item" v-if="RoleMenuField.$state.length > 0">
  3. <div class="menu-form-alert">
  4. <el-button size="small" @click="handleSaveField">保存 </el-button>
  5. 配置数据列字段权限
  6. </div>
  7. <ul class="columns-list">
  8. <li class="columns-head">
  9. <div class="width-txt">
  10. <span>字段</span>
  11. </div>
  12. <div v-for="(head, hIndex) in RoleMenuFieldHeader.$state" :key="hIndex" class="width-check">
  13. <el-checkbox v-model="head.checked" @change="handleColumnChange($event, head.value, head.disabled)">
  14. <span>{{ head.label }}</span>
  15. </el-checkbox>
  16. </div>
  17. </li>
  18. <div class="columns-content">
  19. <li v-for="(c_item, c_index) in RoleMenuField.$state" :key="c_index" class="columns-item">
  20. <div class="width-txt">{{ c_item.title }}</div>
  21. <div v-for="(col, cIndex) in RoleMenuFieldHeader.$state" :key="cIndex" class="width-check">
  22. <el-checkbox v-model="c_item[col.value]" class="ci-checkout" :disabled="c_item[col.disabled]"></el-checkbox>
  23. </div>
  24. </li>
  25. </div>
  26. </ul>
  27. </div>
  28. </template>
  29. <script setup lang="ts">
  30. import { ElMessage } from 'element-plus';
  31. import { RoleDrawerStores } from '../stores/RoleDrawerStores';
  32. import { RoleMenuFieldStores, RoleMenuFieldHeaderStores } from '../stores/RoleMenuFieldStores';
  33. import { setRoleMenuField } from './api';
  34. const RoleMenuField = RoleMenuFieldStores();
  35. const RoleMenuFieldHeader = RoleMenuFieldHeaderStores();
  36. const RoleDrawer = RoleDrawerStores(); // 角色-抽屉
  37. /** 全选 */
  38. const handleColumnChange = (val: boolean, btnType: string, disabledType: string) => {
  39. for (const iterator of RoleMenuField.$state) {
  40. iterator[btnType] = iterator[disabledType] ? iterator[btnType] : val;
  41. }
  42. };
  43. const handleSaveField = async () => {
  44. const res = await setRoleMenuField(RoleDrawer.$state.roleId, RoleMenuField.$state);
  45. ElMessage({ message: res.msg, type: 'success' });
  46. };
  47. </script>
  48. <style lang="scss" scoped>
  49. .pccm-item {
  50. margin-bottom: 10px;
  51. .menu-form-alert {
  52. color: #fff;
  53. line-height: 24px;
  54. padding: 8px 16px;
  55. margin-bottom: 20px;
  56. border-radius: 4px;
  57. background-color: var(--el-color-primary);
  58. }
  59. .menu-form-btn {
  60. margin-left: 10px;
  61. height: 40px;
  62. padding: 8px 16px;
  63. margin-bottom: 20px;
  64. }
  65. .btn-item {
  66. display: flex;
  67. align-items: center;
  68. span {
  69. margin-left: 5px;
  70. }
  71. }
  72. .columns-list {
  73. .width-txt {
  74. width: 200px;
  75. }
  76. .width-check {
  77. width: 100px;
  78. }
  79. .width-icon {
  80. cursor: pointer;
  81. }
  82. .columns-head {
  83. display: flex;
  84. align-items: center;
  85. padding: 6px 0;
  86. border-bottom: 1px solid #ebeef5;
  87. box-sizing: border-box;
  88. span {
  89. font-weight: 900;
  90. }
  91. }
  92. .columns-content {
  93. max-height: calc(100vh - 240px); /* 视口高度 */
  94. overflow-y: auto; /* 当内容超出高度时显示垂直滚动条 */
  95. .columns-item {
  96. display: flex;
  97. align-items: center;
  98. padding: 6px 0;
  99. box-sizing: border-box;
  100. .ci-checkout {
  101. height: auto !important;
  102. }
  103. }
  104. }
  105. }
  106. }
  107. </style>