|
@@ -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>
|