权限配置

src/views/biz/permissionConfig/index.vue

@@ -67,12 +67,23 @@
       <n-form ref="formRef" :model="formData" :rules="formRules" label-placement="left" label-width="100px">
         <n-grid :cols="2" :x-gap="24">
           <n-form-item-gi label="mapper" path="mapperKey">
-            <n-select v-model:value="formData.mapperKey" placeholder="请选择mapper" :options="mapperOptions"  @update:value="mapperUpdate" />
+            <n-select v-model:value="formData.mapperKey" filterable  placeholder="请选择mapper" :options="mapperOptions" />
           </n-form-item-gi>
+          <!-- <n-form-item-gi label="控制方法" path="controlMethod">
+            <n-select v-model:value="selectedMethod" filterable  multiple placeholder="请选择控制方法" :options="methodOptions" />
+          </n-form-item-gi> -->
+        </n-grid>
+
+        <n-grid :cols="1" :x-gap="24">
         <n-form-item-gi label="控制方法" path="controlMethod">
-            <n-select v-model:value="formData.controlMethod" multiple placeholder="请选择控制方法" :options="methodOptions" />
+           <n-checkbox-group v-model:value="selectedMethod">
+            <n-space item-style="display: flex;">
+              <n-checkbox :value="item.value" :label="item.label" v-for="(item) in methodOptions" :key="item.value"/>
+            </n-space>
+          </n-checkbox-group>
         </n-form-item-gi>
         </n-grid>
+
         <n-grid :cols="1" :x-gap="24">
         <n-form-item-gi label="权限控制方案" path="permissionControl">
           <n-dynamic-input
@@ -86,13 +97,14 @@
               <template #default="{ value,index  }">
                 <n-space>
                   <n-select
-                    v-model:value="value.key"
+                    v-model:value="value.roleId"
                     :options="roleOptions"
                     placeholder="请选择角色"
                     style="width: 150px"
+                    @update:value="handleRoleClick"
                   />
                   <n-input
-                    v-model:value="value.value"
+                    v-model:value="value.rule"
                     placeholder="请输入权限内容"
                     readonly
                     style="width: 400px"
@@ -123,11 +135,12 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, h, onMounted } from 'vue'
+import { ref, reactive, h, onMounted, watch } from 'vue'
 import { NButton, NSpace, NIcon, NUpload, useMessage, useDialog, type DataTableColumns, type UploadCustomRequestOptions } from 'naive-ui'
 import { SearchOutline, RefreshOutline, AddOutline, TrashOutline, CreateOutline, CloudUploadOutline, DownloadOutline } from '@vicons/ionicons5'
 import { permissionConfigApi, type PermissionConfig } from '@/api/permissionConfig'
 import {  roleApi, SysRole } from '@/api/system'
+import { any, select } from 'three/tsl'
 
 const message = useMessage()
 const dialog = useDialog()
@@ -141,8 +154,8 @@ const searchForm = reactive({
 const permissionControl = ref([
   {
     sole:Date.now(),
-    key: '',
+    roleId: '',
-    value: '123'
+    rule: ''
   }
 ])
 
@@ -152,8 +165,8 @@ const roleOptions = ref<Array<{ label: string; value: number; disabled:false }>>
 const handleCreate = () => {
   return {
     sole: Date.now() + Math.random(), // key‑field使用的唯一主键
-    key:"",
+    roleId:"",
-    value: null // select绑定的业务字段，不要和key混淆
+    rule: null // select绑定的业务字段，不要和key混淆
   }
 }
 
@@ -182,6 +195,7 @@ const defaultFormData: PermissionConfig = {
   permissionControl: '',
 }
 const formData = reactive<PermissionConfig>({ ...defaultFormData })
+const selectedMethod = ref([])
 
 // 字典选项（下拉框/单选框/复选框关联字典时使用）
 
@@ -220,11 +234,11 @@ const updatePermissionModal = ref(false)
 
 function clickPermission(index:number){
   updatePermissionIndex.value = index
-  updatePermissionContent.value = permissionControl.value[index].value;
+  updatePermissionContent.value = permissionControl.value[index].rule;
   updatePermissionModal.value = true
 }
 function closePermission(){
-   permissionControl.value[updatePermissionIndex.value].value = updatePermissionContent.value;
+   permissionControl.value[updatePermissionIndex.value].rule = updatePermissionContent.value;
 }
 
 // 加载数据
@@ -280,13 +294,25 @@ function handleCheck(keys: Array<string | number>) {
 function handleAdd() {
   modalTitle.value = '新增数据权限配置'
   Object.assign(formData, defaultFormData)
+  selectedMethod.value = []
+  permissionControl.value = [{
+    sole:Date.now(),
+    roleId: '',
+    rule: ''
+  }]
+
   modalVisible.value = true
 }
-
+const isMonitor = ref(false);
 // 编辑
 function handleEdit(row: PermissionConfig) {
   modalTitle.value = '编辑数据权限配置'
+  isMonitor.value = false;
   Object.assign(formData, row)
+  handleMapperClick();
+  permissionControl.value = JSON.parse(formData.permissionControl)
+  selectedMethod.value = JSON.parse(row.controlMethod)
+  console.log('页面打开')
   modalVisible.value = true
 }
 
@@ -295,6 +321,8 @@ async function handleSubmit() {
   await formRef.value?.validate()
   try {
     const submitData = { ...formData } as PermissionConfig
+    submitData.permissionControl = JSON.stringify(permissionControl.value)
+    submitData.controlMethod = JSON.stringify(selectedMethod.value)
     if (submitData.id) {
       await permissionConfigApi.update(submitData)
       message.success('修改成功')
@@ -406,16 +434,51 @@ async function handleImportUpload({ file }: UploadCustomRequestOptions) {
 const mapperOptions = ref<{ label: string; value: any }[]>([])
 const methodSearchOptions = ref<{ label: string; value: any }[]>([])
 const methodOptions = ref<{ label: string; value: any }[]>([])
-function mapperUpdate(v:any,opt:any) {
+
-  formData.controlMethod=''
+watch(() => formData.mapperKey, () => {
-  methodOptions.value = opt.childList;
+
+  if(isMonitor.value){
+    handleMapperClick()
+  }else{
+    isMonitor.value = true;
+  }
+  
+})
+
+function handleMapperClick(){
+   selectedMethod.value=[]
+   mapperOptions.value.forEach((data:any) =>{
+    if(data.value === formData.mapperKey){
+      methodOptions.value = data.childList;
+    }
+   })
+    console.log('数据更新')
 }
 
+watch(() => permissionControl.value, () => handleRoleClick())
+
+
 function mapperSearchUpdate(v:any,opt:any) {
   searchForm.controlMethod=''
   methodSearchOptions.value = opt.childList;
 }
 
+function handleRoleClick() {
+  const selectedRoleList : string[] = [];
+  permissionControl.value.forEach((selectedRole:any) =>{
+    selectedRoleList.push(selectedRole.roleId);
+  })
+  roleOptions.value.forEach((data:any) =>{
+      if(selectedRoleList.includes(data.value)){
+        data.disabled = true
+      }else{
+        data.disabled = false
+      }
+    })
+}
+
+
+
 // 加载字典选项
 async function loadDictOptions() {
   try {