Pārlūkot izejas kodu

添加按钮权限

yangg 1 dienu atpakaļ
vecāks
revīzija
af8cda10f0
1 mainītis faili ar 95 papildinājumiem un 3 dzēšanām
  1. 95 3
      src/components/PermissionConfig/index.vue

+ 95 - 3
src/components/PermissionConfig/index.vue

@@ -23,16 +23,38 @@
           <div class="checkbox-list">
             <a-checkbox-group v-model:value="selectedPermissions[group.key]">
               <div v-for="item in group.items" :key="item.value" class="checkbox-item">
-                <a-checkbox :value="item.value">
+                <a-checkbox :value="item.value" style="padding-right: 0;">
                   {{ item.label }}
-                  <span class="item-desc">{{ item.description }}</span>
                 </a-checkbox>
+                <a-button type="link" style="padding: 0;" size="small" @click="showButtonConfig(group)">
+
+                  <img src="../../assets/svg/setting.png" style="margin-top: 2px;" alt="">
+                </a-button>
               </div>
             </a-checkbox-group>
           </div>
         </div>
       </div>
-
+       <!-- 按钮权限配置弹窗 -->
+    <a-modal
+      v-model:visible="buttonModalVisible"
+      title="按钮权限配置"
+      @ok="handleButtonConfigSave"
+      @cancel="handleButtonConfigCancel"
+      width="600px"
+    >
+      <div class="button-config-list">
+        <div v-for="button in currentGroupButtons" :key="button.value" class="button-config-item">
+          <a-checkbox
+            v-model:checked="button.isCheck"
+            :value="button.value"
+          >
+            {{ button.label }}
+          </a-checkbox>
+          <span class="button-desc">{{ button.description }}</span>
+        </div>
+      </div>
+    </a-modal>
       <div class="action-buttons">
         <a-button type="primary" :loading="saving" @click="saveConfig">
           保存配置
@@ -49,6 +71,49 @@ import axios from 'axios';
 import upIcon from '@/assets/svg/ups.svg';
 import downIcon from '@/assets/svg/down.svg';
 
+
+// 按钮配置相关
+const buttonModalVisible = ref(false);
+const currentGroupButtons = ref([]);
+const currentGroup = ref(null);
+
+// 显示按钮配置弹窗
+const showButtonConfig = (group) => {
+  currentGroup.value = group;
+  // 这里可以根据实际需求从后端获取按钮权限列表
+  currentGroupButtons.value = [
+    { label: '新增', value: 'add', description: '新增数据权限', isCheck: false },
+    { label: '编辑', value: 'edit', description: '编辑数据权限', isCheck: false },
+    { label: '删除', value: 'delete', description: '删除数据权限', isCheck: false },
+    { label: '查询', value: 'query', description: '查询数据权限', isCheck: false },
+    // 可以根据需求添加更多按钮
+  ];
+  buttonModalVisible.value = true;
+};
+
+// 保存按钮配置
+const handleButtonConfigSave = () => {
+  // 这里可以添加保存按钮配置的逻辑
+  const buttonPermissions = currentGroupButtons.value
+    .filter(button => button.isCheck)
+    .map(button => button.value);
+
+  // 更新当前组的按钮权限
+  if (currentGroup.value) {
+    if (!selectedPermissions[`${currentGroup.value.key}_buttons`]) {
+      selectedPermissions[`${currentGroup.value.key}_buttons`] = [];
+    }
+    selectedPermissions[`${currentGroup.value.key}_buttons`] = buttonPermissions;
+  }
+
+  buttonModalVisible.value = false;
+  message.success('按钮权限配置已保存');
+};
+
+// 取消按钮配置
+const handleButtonConfigCancel = () => {
+  buttonModalVisible.value = false;
+};
 // 计算父级选中状态
 const getParentChecked = (group) => {
   if (!selectedPermissions[group.key] || !group.items || group.items.length === 0) {
@@ -259,6 +324,7 @@ margin-left: 14px;
 .checkbox-item {
   display: flex;
   align-items: flex-start;
+  padding-right: 0;
 }
 
 .item-desc {
@@ -285,4 +351,30 @@ margin-left: 14px;
 :deep(.ant-checkbox-wrapper + .ant-checkbox-wrapper) {
   margin-left: 0;
 }
+
+.group-header {
+  font-size: 13px;
+  color: var(--primary-text);
+  margin-bottom: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.button-config-list {
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.button-config-item {
+  margin-bottom: 12px;
+  display: flex;
+  align-items: center;
+}
+
+.button-desc {
+  margin-left: 12px;
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.45);
+}
 </style>