perf: 优化权限管理
kailong321200875
2 years ago
parent
92d436b8bb
commit
efc1c25db8
@ -0,0 +1,67 @@
|
||||
<script setup lang="ts">
|
||||
import { FormSchema, Form } from '@/components/Form'
|
||||
import { ElDrawer, ElButton } from 'element-plus'
|
||||
import { reactive } from 'vue'
|
||||
import { useForm } from '@/hooks/web/useForm'
|
||||
import { useValidator } from '@/hooks/web/useValidator'
|
||||
|
||||
const modelValue = defineModel<boolean>()
|
||||
|
||||
const { required } = useValidator()
|
||||
|
||||
const formSchema = reactive<FormSchema[]>([
|
||||
{
|
||||
field: 'label',
|
||||
label: 'label',
|
||||
component: 'Input',
|
||||
colProps: {
|
||||
span: 24
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'value',
|
||||
label: 'value',
|
||||
component: 'Input',
|
||||
colProps: {
|
||||
span: 24
|
||||
}
|
||||
}
|
||||
])
|
||||
|
||||
const { formRegister, formMethods } = useForm()
|
||||
const { getFormData, getElFormExpose } = formMethods
|
||||
|
||||
const emit = defineEmits(['confirm'])
|
||||
|
||||
const rules = reactive({
|
||||
label: [required()],
|
||||
value: [required()]
|
||||
})
|
||||
|
||||
const confirm = async () => {
|
||||
const elFormExpose = await getElFormExpose()
|
||||
if (!elFormExpose) return
|
||||
const valid = await elFormExpose?.validate().catch((err) => {
|
||||
console.log(err)
|
||||
})
|
||||
if (valid) {
|
||||
const formData = await getFormData()
|
||||
emit('confirm', formData)
|
||||
modelValue.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ElDrawer v-model="modelValue" title="新增按钮权限">
|
||||
<template #default>
|
||||
<Form :rules="rules" @register="formRegister" :schema="formSchema" />
|
||||
</template>
|
||||
<template #footer>
|
||||
<div>
|
||||
<ElButton @click="() => (modelValue = false)">取消</ElButton>
|
||||
<ElButton type="primary" @click="confirm">确认</ElButton>
|
||||
</div>
|
||||
</template>
|
||||
</ElDrawer>
|
||||
</template>
|
||||
@ -0,0 +1,106 @@
|
||||
<script setup lang="tsx">
|
||||
import { PropType, ref, unref, nextTick } from 'vue'
|
||||
import { Descriptions, DescriptionsSchema } from '@/components/Descriptions'
|
||||
import { ElTag, ElTree } from 'element-plus'
|
||||
import { findIndex } from '@/utils'
|
||||
import { getMenuListApi } from '@/api/menu'
|
||||
|
||||
defineProps({
|
||||
currentRow: {
|
||||
type: Object as PropType<any>,
|
||||
default: () => undefined
|
||||
}
|
||||
})
|
||||
|
||||
const filterPermissionName = (value: string) => {
|
||||
const index = findIndex(unref(currentTreeData)?.permissionList || [], (item) => {
|
||||
return item.value === value
|
||||
})
|
||||
return (unref(currentTreeData)?.permissionList || [])[index].label ?? ''
|
||||
}
|
||||
|
||||
const renderTag = (enable?: boolean) => {
|
||||
return <ElTag type={!enable ? 'danger' : 'success'}>{enable ? '启用' : '禁用'}</ElTag>
|
||||
}
|
||||
|
||||
const treeRef = ref<typeof ElTree>()
|
||||
|
||||
const currentTreeData = ref()
|
||||
const nodeClick = (treeData: any) => {
|
||||
currentTreeData.value = treeData
|
||||
}
|
||||
|
||||
const treeData = ref<any[]>([])
|
||||
const getMenuList = async () => {
|
||||
const res = await getMenuListApi()
|
||||
if (res) {
|
||||
treeData.value = res.data.list
|
||||
await nextTick()
|
||||
}
|
||||
}
|
||||
getMenuList()
|
||||
|
||||
const detailSchema = ref<DescriptionsSchema[]>([
|
||||
{
|
||||
field: 'roleName',
|
||||
label: '角色名称'
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
label: '状态',
|
||||
slots: {
|
||||
default: (data: any) => {
|
||||
return renderTag(data.status)
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'remark',
|
||||
label: '备注',
|
||||
span: 24
|
||||
},
|
||||
{
|
||||
field: 'permissionList',
|
||||
label: '菜单分配',
|
||||
span: 24,
|
||||
slots: {
|
||||
default: () => {
|
||||
return (
|
||||
<>
|
||||
<div class="flex w-full">
|
||||
<div class="flex-1">
|
||||
<ElTree
|
||||
ref={treeRef}
|
||||
node-key="id"
|
||||
props={{ children: 'children', label: 'title' }}
|
||||
highlight-current
|
||||
expand-on-click-node={false}
|
||||
data={treeData.value}
|
||||
onNode-click={nodeClick}
|
||||
>
|
||||
{{
|
||||
default: (data) => {
|
||||
return <span>{data?.data?.title}</span>
|
||||
}
|
||||
}}
|
||||
</ElTree>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
{unref(currentTreeData)
|
||||
? unref(currentTreeData)?.meta?.permission?.map((v: string) => {
|
||||
return <ElTag class="ml-2 mt-2">{filterPermissionName(v)}</ElTag>
|
||||
})
|
||||
: null}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Descriptions :schema="detailSchema" :data="currentRow || {}" />
|
||||
</template>
|
||||
Loading…
Reference in New Issue