RoleMenuBtn.vue 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
  1. <template>
  2. <div class="pccm-item" v-if="RoleMenuBtn.$state.length > 0">
  3. <div class="menu-form-alert">配置操作功能接口权限,配置数据权限点击小齿轮</div>
  4. <el-checkbox v-for="btn in RoleMenuBtn.$state" :key="btn.id" v-model="btn.isCheck" @change="handleCheckChange(btn)">
  5. <div class="btn-item">
  6. {{ btn.data_range !== null ? `${btn.name}(${formatDataRange(btn.data_range)})` : btn.name }}
  7. <span v-show="btn.isCheck" @click.stop.prevent="handleSettingClick(btn)">
  8. <el-icon>
  9. <Setting />
  10. </el-icon>
  11. </span>
  12. </div>
  13. </el-checkbox>
  14. </div>
  15. <el-dialog v-model="dialogVisible" title="数据权限配置" width="400px" :close-on-click-modal="false" :before-close="handleDialogClose">
  16. <div class="pc-dialog">
  17. <el-select v-model="selectBtn.data_range" @change="handlePermissionRangeChange" placeholder="请选择">
  18. <el-option v-for="item in dataPermissionRange" :key="item.value" :label="item.label" :value="item.value" />
  19. </el-select>
  20. <el-tree-select
  21. v-show="selectBtn.data_range === 4"
  22. node-key="id"
  23. v-model="selectBtn.dept"
  24. :props="defaultTreeProps"
  25. :data="deptData"
  26. multiple
  27. check-strictly
  28. :render-after-expand="false"
  29. show-checkbox
  30. class="dialog-tree"
  31. />
  32. </div>
  33. <template #footer>
  34. <div>
  35. <el-button type="primary" @click="handleDialogConfirm"> 确定</el-button>
  36. <el-button @click="handleDialogClose"> 取消</el-button>
  37. </div>
  38. </template>
  39. </el-dialog>
  40. </template>
  41. <script setup lang="ts">
  42. import { computed, onMounted, ref } from 'vue';
  43. import { RoleDrawerStores } from '../stores/RoleDrawerStores';
  44. import { RoleMenuBtnStores } from '../stores/RoleMenuBtnStores';
  45. import { RoleMenuTreeStores } from '../stores/RoleMenuTreeStores';
  46. import { RoleMenuBtnType } from '../types';
  47. import { getRoleToDeptAll, setRoleMenuBtn, setRoleMenuBtnDataRange } from './api';
  48. import XEUtils from 'xe-utils';
  49. import { ElMessage } from 'element-plus';
  50. const RoleDrawer = RoleDrawerStores(); // 角色-菜单
  51. const RoleMenuTree = RoleMenuTreeStores(); // 角色-菜单
  52. const RoleMenuBtn = RoleMenuBtnStores(); // 角色-菜单-按钮
  53. const dialogVisible = ref(false);
  54. // 选中的按钮
  55. const selectBtn = ref<RoleMenuBtnType>({
  56. id: 0,
  57. menu_btn_pre_id: 0,
  58. /** 是否选中 */
  59. isCheck: false,
  60. /** 按钮名称 */
  61. name: '',
  62. /** 数据权限范围 */
  63. data_range: 0,
  64. dept: [],
  65. });
  66. /**
  67. * 数据权限范围
  68. */
  69. const dataPermissionRange = ref([
  70. { label: '仅本人数据权限', value: 0 },
  71. { label: '本部门及以下数据权限', value: 1 },
  72. { label: '本部门数据权限', value: 2 },
  73. { label: '全部数据权限', value: 3 },
  74. { label: '自定数据权限', value: 4 },
  75. ]);
  76. /**
  77. * 自定义数据权限的部门树配置
  78. */
  79. const defaultTreeProps = {
  80. children: 'children',
  81. label: 'name',
  82. value: 'id',
  83. };
  84. /**
  85. * 自定数据权限下拉选择事件
  86. */
  87. const handlePermissionRangeChange = async (val: number) => {
  88. if (val < 4) {
  89. selectBtn.value.dept = [];
  90. }
  91. };
  92. /**
  93. * 格式化按钮数据范围
  94. */
  95. const formatDataRange = computed(() => {
  96. return function (datarange: number) {
  97. const datarangeitem = XEUtils.find(dataPermissionRange.value, (item: any) => {
  98. if (item.value === datarange) {
  99. return item.label;
  100. }
  101. });
  102. return datarangeitem.label;
  103. };
  104. });
  105. /**
  106. * 勾选按钮
  107. */
  108. const handleCheckChange = async (btn: RoleMenuBtnType) => {
  109. const put_data = {
  110. isCheck: btn.isCheck,
  111. roleId: RoleDrawer.roleId,
  112. menuId: RoleMenuTree.id,
  113. btnId: btn.id,
  114. };
  115. const { data, msg } = await setRoleMenuBtn(put_data);
  116. RoleMenuBtn.updateState(data);
  117. ElMessage({ message: msg, type: 'success' });
  118. };
  119. /**
  120. * 按钮-数据范围确定
  121. */
  122. const handleDialogConfirm = async () => {
  123. const { data, msg } = await setRoleMenuBtnDataRange(selectBtn.value);
  124. selectBtn.value = data;
  125. dialogVisible.value = false;
  126. ElMessage({ message: msg, type: 'success' });
  127. };
  128. /**
  129. * 数据范围关闭
  130. */
  131. const handleDialogClose = () => {
  132. dialogVisible.value = false;
  133. };
  134. /**
  135. * 齿轮点击
  136. */
  137. const handleSettingClick = async (btn: RoleMenuBtnType) => {
  138. selectBtn.value = btn;
  139. dialogVisible.value = true;
  140. };
  141. /**
  142. * 部门数据
  143. *
  144. */
  145. const deptData = ref<number[]>([]);
  146. // 页面打开后获取列表数据
  147. onMounted(async () => {
  148. const res = await getRoleToDeptAll({ role: RoleDrawer.roleId, menu_button: selectBtn.value.id });
  149. const depts = XEUtils.toArrayTree(res.data, { parentKey: 'parent', strict: false });
  150. deptData.value = depts;
  151. });
  152. </script>
  153. <style lang="scss" scoped>
  154. .pccm-item {
  155. margin-bottom: 10px;
  156. .menu-form-alert {
  157. color: #fff;
  158. line-height: 24px;
  159. padding: 8px 16px;
  160. margin-bottom: 20px;
  161. border-radius: 4px;
  162. background-color: var(--el-color-primary);
  163. }
  164. }
  165. // .el-checkbox {
  166. // width: 200px;
  167. // }
  168. .btn-item {
  169. display: flex;
  170. align-items: center;
  171. justify-content: center; /* 水平居中 */
  172. .el-icon {
  173. margin-left: 5px;
  174. }
  175. }
  176. .dialog-tree {
  177. width: 100%;
  178. margin-top: 20px;
  179. }
  180. </style>