权限配置
This commit is contained in:
andy
parent
828cf4ad09
commit
73828f64d9
@ -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: '',
|
||||
value: '123'
|
||||
roleId: '',
|
||||
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:"",
|
||||
value: null // select绑定的业务字段，不要和key混淆
|
||||
roleId:"",
|
||||
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=''
|
||||
methodOptions.value = opt.childList;
|
||||
|
||||
watch(() => formData.mapperKey, () => {
|
||||
|
||||
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 {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user