index.vue 10.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382
  1. <template>
  2. <div class="permission-config">
  3. <!-- <div class="config-header" @click="togglePanel">
  4. <img src="../../assets/lock.png" alt="permission" class="config-icon" />
  5. <span>权限配置</span>
  6. <img
  7. :src="isPanelOpen ? upIcon : downIcon"
  8. alt="toggle"
  9. class="toggle-icon"
  10. />
  11. </div> -->
  12. <!-- v-show="isPanelOpen" :checked="getParentChecked(group)" -->
  13. <div class="config-panel">
  14. <div class="permission-list">
  15. <div class="permission-group" v-for="group in permissionGroups" :key="group.label">
  16. <div class="group-header">
  17. <a-checkbox :value="group.value"
  18. @change="(e) => handleParentChange(group, e)">
  19. {{ group.label }}
  20. </a-checkbox>
  21. <a-button type="link" style="padding: 0;" size="small" @click="showButtonConfig(group)">
  22. <img src="../../assets/svg/setting.png" style="margin-top: 2px;" alt="">
  23. </a-button>
  24. </div>
  25. <div class="checkbox-list">
  26. <a-checkbox-group v-model:value="selectedPermissions[group.key]">
  27. <div v-for="item in group.items" :key="item.value" class="checkbox-item">
  28. <a-checkbox :value="item.value" style="padding-right: 0;">
  29. {{ item.label }}
  30. </a-checkbox>
  31. <a-button type="link" style="padding: 0;" size="small" @click="showButtonConfig(group)">
  32. <img src="../../assets/svg/setting.png" style="margin-top: 2px;" alt="">
  33. </a-button>
  34. </div>
  35. </a-checkbox-group>
  36. </div>
  37. </div>
  38. </div>
  39. <!-- 按钮权限配置弹窗 -->
  40. <a-modal
  41. v-model:visible="buttonModalVisible"
  42. title="按钮权限配置"
  43. @ok="handleButtonConfigSave"
  44. @cancel="handleButtonConfigCancel"
  45. width="600px"
  46. >
  47. <div class="button-config-list">
  48. <div v-for="button in currentGroupButtons" :key="button.value" class="button-config-item">
  49. <a-checkbox
  50. v-model:checked="button.isCheck"
  51. :value="button.value"
  52. >
  53. {{ button.label }}
  54. </a-checkbox>
  55. <span class="button-desc">{{ button.description }}</span>
  56. </div>
  57. </div>
  58. </a-modal>
  59. <!-- <div class="action-buttons">
  60. <a-button type="primary" :loading="saving" @click="saveConfig">
  61. 保存配置
  62. </a-button>
  63. </div> -->
  64. </div>
  65. </div>
  66. </template>
  67. <script setup>
  68. import { ref, reactive, onMounted } from 'vue';
  69. import { message } from 'ant-design-vue';
  70. import axios from 'axios';
  71. import upIcon from '@/assets/svg/ups.svg';
  72. import downIcon from '@/assets/svg/down.svg';
  73. // 按钮配置相关
  74. const buttonModalVisible = ref(false);
  75. const currentGroupButtons = ref([]);
  76. const currentGroup = ref(null);
  77. // 显示按钮配置弹窗
  78. const showButtonConfig = (group) => {
  79. currentGroup.value = group;
  80. // 这里可以根据实际需求从后端获取按钮权限列表
  81. currentGroupButtons.value = [
  82. { label: '新增', value: 'add', description: '新增数据权限', isCheck: false },
  83. { label: '编辑', value: 'edit', description: '编辑数据权限', isCheck: false },
  84. { label: '删除', value: 'delete', description: '删除数据权限', isCheck: false },
  85. { label: '查询', value: 'query', description: '查询数据权限', isCheck: false },
  86. // 可以根据需求添加更多按钮
  87. ];
  88. buttonModalVisible.value = true;
  89. };
  90. // 保存按钮配置
  91. const handleButtonConfigSave = () => {
  92. // 这里可以添加保存按钮配置的逻辑
  93. const buttonPermissions = currentGroupButtons.value
  94. .filter(button => button.isCheck)
  95. .map(button => button.value);
  96. // 更新当前组的按钮权限
  97. if (currentGroup.value) {
  98. if (!selectedPermissions[`${currentGroup.value.key}_buttons`]) {
  99. selectedPermissions[`${currentGroup.value.key}_buttons`] = [];
  100. }
  101. selectedPermissions[`${currentGroup.value.key}_buttons`] = buttonPermissions;
  102. }
  103. buttonModalVisible.value = false;
  104. message.success('按钮权限配置已保存');
  105. };
  106. // 取消按钮配置
  107. const handleButtonConfigCancel = () => {
  108. buttonModalVisible.value = false;
  109. };
  110. // 计算父级选中状态
  111. const getParentChecked = (group) => {
  112. if (!selectedPermissions[group.key] || !group.items || group.items.length === 0) {
  113. return false;
  114. }
  115. // 检查父级是否被选中
  116. return selectedPermissions[group.key].includes(group.value);
  117. };
  118. // 处理父级选中状态变化
  119. const handleParentChange = (parent, e) => {
  120. const checked = e.target.checked;
  121. // 获取当前组的选中状态数组
  122. if (!selectedPermissions[parent.key]) {
  123. selectedPermissions[parent.key] = [];
  124. }
  125. // 如果父级被选中,将所有子项添加到选中数组
  126. if (checked) {
  127. selectedPermissions[parent.key] = [...parent.items.map(item => item.value), parent.value];
  128. } else {
  129. // 如果父级取消选中,清空该组的选中数组
  130. selectedPermissions[parent.key] = [];
  131. }
  132. };
  133. // 权限组数据
  134. const permissionGroups = ref([]);
  135. const isPanelOpen = ref(false);
  136. const saving = ref(false);
  137. // 用于存储每个权限组的选中状态
  138. const selectedPermissions = reactive({});
  139. const togglePanel = () => {
  140. isPanelOpen.value = !isPanelOpen.value;
  141. };
  142. const saveConfig = async () => {
  143. saving.value = true;
  144. try {
  145. // 保存配置到 localStorage
  146. localStorage.setItem('permissionConfig', JSON.stringify(selectedPermissions));
  147. message.success('权限配置保存成功');
  148. } catch (error) {
  149. message.error('权限配置保存失败');
  150. } finally {
  151. saving.value = false;
  152. }
  153. };
  154. // 初始化配置
  155. const initConfig = () => {
  156. const savedConfig = localStorage.getItem('permissionConfig');
  157. if (savedConfig) {
  158. const config = JSON.parse(savedConfig);
  159. Object.keys(config).forEach(key => {
  160. selectedPermissions[key] = config[key];
  161. });
  162. }
  163. };
  164. // 获取权限列表
  165. const fetchPermissionGroups = async () => {
  166. try {
  167. const response = await axios.get(`http://58.246.234.210:8085/api/system/role_menu_button_permission/get_role_menu/?roleId=9&merchant=1`,{
  168. headers: {
  169. 'authorization': `JWT eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNzU2MTczNjAwLCJpYXQiOjE3NTYwODcyMDAsImp0aSI6IjU0ZTBiZGJhODBjMTQ4MDBhZDFiNjVjZDBkYjBkM2U4IiwidXNlcl9pZCI6OX0.rUOnghQpH4Sd5ChrD_Pqam6kAoqKV8O6TvSQQQF76fg`
  170. }
  171. });
  172. console.log(response);
  173. // 构建权限树
  174. const buildPermissionTree = (permissions) => {
  175. // 创建一个映射表,用于快速查找权限项
  176. const permMap = {};
  177. permissions.forEach(perm => {
  178. permMap[perm.id] = {
  179. label: perm.name,
  180. value: perm.id,
  181. is_catalog: perm.is_catalog,
  182. isCheck: perm.isCheck,
  183. children: []
  184. };
  185. });
  186. // 构建树形结构
  187. const tree = [];
  188. permissions.forEach(perm => {
  189. const currentNode = permMap[perm.id];
  190. if (perm.parent === null) {
  191. // 如果没有父节点,则为根节点
  192. tree.push(currentNode);
  193. } else {
  194. // 如果有父节点,将当前节点添加到父节点的children中
  195. const parentNode = permMap[perm.parent];
  196. if (parentNode) {
  197. parentNode.children.push(currentNode);
  198. }
  199. }
  200. });
  201. return tree;
  202. };
  203. // 处理权限数据
  204. const permissionTree = buildPermissionTree(response.data.data);
  205. // 转换为组件所需的数据格式
  206. const groupsData = permissionTree.map(node => ({
  207. label: node.label,
  208. key: node.value,
  209. is_catalog: node.is_catalog,
  210. value: node.isCheck,
  211. items: node.children.map(child => ({
  212. label: child.label,
  213. value: child.value,
  214. is_catalog: child.is_catalog,
  215. isCheck: child.isCheck
  216. }))
  217. }));
  218. permissionGroups.value = groupsData;
  219. // 初始化选中状态对象
  220. permissionGroups.value.forEach(group => {
  221. if (!selectedPermissions[group.key]) {
  222. selectedPermissions[group.key] = [];
  223. }
  224. });
  225. } catch (error) {
  226. message.error('获取权限信息失败');
  227. console.error('获取权限信息失败:', error);
  228. }
  229. };
  230. // 组件挂载时获取数据
  231. onMounted(async () => {
  232. await fetchPermissionGroups();
  233. initConfig();
  234. });
  235. </script>
  236. <style scoped>
  237. .permission-config {
  238. background: var(--secondary-bg);
  239. color: var(--primary-text);
  240. }
  241. .config-header {
  242. padding: 12px 20px;
  243. display: flex;
  244. align-items: center;
  245. gap: 8px;
  246. cursor: pointer;
  247. transition: background-color 0.2s;
  248. }
  249. .config-header:hover {
  250. background: rgba(0, 0, 0, 0.02);
  251. }
  252. .config-icon {
  253. width: 16px;
  254. height: 16px;
  255. }
  256. .toggle-icon {
  257. width: 12px;
  258. height: 12px;
  259. margin-left: auto;
  260. }
  261. .config-panel {
  262. padding: 12px 20px;
  263. }
  264. .permission-list {
  265. margin-bottom: 16px;
  266. /* height: 100%;
  267. overflow: auto; */
  268. }
  269. .permission-group {
  270. /* margin-bottom: 16px; */
  271. }
  272. .permission-group:last-child {
  273. margin-bottom: 0;
  274. }
  275. .group-header {
  276. font-size: 13px;
  277. color: var(--primary-text);
  278. margin-bottom: 8px;
  279. }
  280. .checkbox-list {
  281. margin-left: 14px;
  282. display: flex;
  283. flex-direction: column;
  284. gap: 8px;
  285. }
  286. .checkbox-item {
  287. display: flex;
  288. align-items: flex-start;
  289. padding-right: 0;
  290. }
  291. .item-desc {
  292. margin-left: 8px;
  293. font-size: 12px;
  294. color: var(--primary-text);
  295. }
  296. .action-buttons {
  297. display: flex;
  298. justify-content: flex-end;
  299. margin-top: 16px;
  300. }
  301. :deep(.ant-checkbox-wrapper) {
  302. font-size: 14px;
  303. }
  304. :deep(.ant-checkbox-group) {
  305. width: 100%;
  306. flex-direction: column;
  307. }
  308. :deep(.ant-checkbox-wrapper + .ant-checkbox-wrapper) {
  309. margin-left: 0;
  310. }
  311. .group-header {
  312. font-size: 13px;
  313. color: var(--primary-text);
  314. margin-bottom: 8px;
  315. display: flex;
  316. align-items: center;
  317. /* justify-content: space-between; */
  318. }
  319. .button-config-list {
  320. max-height: 400px;
  321. overflow-y: auto;
  322. }
  323. .button-config-item {
  324. margin-bottom: 12px;
  325. display: flex;
  326. align-items: center;
  327. }
  328. .button-desc {
  329. margin-left: 12px;
  330. font-size: 12px;
  331. color: rgba(0, 0, 0, 0.45);
  332. }
  333. </style>