Initial commit
This commit is contained in:
409
promo-ui2/src/views/Authorization/Menu/components/Write.vue
Normal file
409
promo-ui2/src/views/Authorization/Menu/components/Write.vue
Normal file
@@ -0,0 +1,409 @@
|
||||
<script setup lang="tsx">
|
||||
import { Form, FormSchema } from '@/components/Form'
|
||||
import { useForm } from '@/hooks/web/useForm'
|
||||
import { PropType, reactive, watch, ref, unref } from 'vue'
|
||||
import { useValidator } from '@/hooks/web/useValidator'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import { getMenuListApi } from '@/api/menu'
|
||||
import { ElButton, ElInput, ElPopconfirm, ElTable, ElTableColumn, ElTag } from 'element-plus'
|
||||
import AddButtonPermission from './AddButtonPermission.vue'
|
||||
import { BaseButton } from '@/components/Button'
|
||||
import { cloneDeep } from 'lodash-es'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const { required } = useValidator()
|
||||
|
||||
const props = defineProps({
|
||||
currentRow: {
|
||||
type: Object as PropType<any>,
|
||||
default: () => null
|
||||
}
|
||||
})
|
||||
|
||||
const handleClose = async (tag: any) => {
|
||||
const formData = await getFormData()
|
||||
// 删除对应的权限
|
||||
setValues({
|
||||
permissionList: formData?.permissionList?.filter((v: any) => v.value !== tag.value)
|
||||
})
|
||||
}
|
||||
|
||||
const handleEdit = async (row: any) => {
|
||||
// 深拷贝当前行数据到编辑行
|
||||
permissionEditingRow.value = { ...row }
|
||||
}
|
||||
|
||||
const handleSave = async () => {
|
||||
const formData = await getFormData()
|
||||
const index = formData?.permissionList?.findIndex((x) => x.id === permissionEditingRow.value.id)
|
||||
if (index !== -1) {
|
||||
formData.permissionList[index] = { ...permissionEditingRow.value }
|
||||
permissionEditingRow.value = null // 重置编辑状态
|
||||
}
|
||||
}
|
||||
|
||||
const showDrawer = ref(false)
|
||||
// 存储正在编辑的行的数据
|
||||
const permissionEditingRow = ref<any>(null)
|
||||
|
||||
const formSchema = reactive<FormSchema[]>([
|
||||
{
|
||||
field: 'type',
|
||||
label: '菜单类型',
|
||||
component: 'RadioButton',
|
||||
value: 0,
|
||||
colProps: {
|
||||
span: 24
|
||||
},
|
||||
componentProps: {
|
||||
options: [
|
||||
{
|
||||
label: '目录',
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
label: '菜单',
|
||||
value: 1
|
||||
}
|
||||
],
|
||||
on: {
|
||||
change: async (val: number) => {
|
||||
const formData = await getFormData()
|
||||
if (val === 1) {
|
||||
setSchema([
|
||||
{
|
||||
field: 'component',
|
||||
path: 'componentProps.disabled',
|
||||
value: false
|
||||
}
|
||||
])
|
||||
setValues({
|
||||
component: unref(cacheComponent)
|
||||
})
|
||||
} else {
|
||||
setSchema([
|
||||
{
|
||||
field: 'component',
|
||||
path: 'componentProps.disabled',
|
||||
value: true
|
||||
}
|
||||
])
|
||||
|
||||
if (formData.parentId === void 0) {
|
||||
setValues({
|
||||
component: '#'
|
||||
})
|
||||
} else {
|
||||
setValues({
|
||||
component: '##'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'parentId',
|
||||
label: '父级菜单',
|
||||
component: 'TreeSelect',
|
||||
componentProps: {
|
||||
nodeKey: 'id',
|
||||
props: {
|
||||
label: 'title',
|
||||
value: 'id',
|
||||
children: 'children'
|
||||
},
|
||||
highlightCurrent: true,
|
||||
expandOnClickNode: false,
|
||||
checkStrictly: true,
|
||||
checkOnClickNode: true,
|
||||
clearable: true,
|
||||
on: {
|
||||
change: async (val: number) => {
|
||||
const formData = await getFormData()
|
||||
if (val && formData.type === 0) {
|
||||
setValues({
|
||||
component: '##'
|
||||
})
|
||||
} else if (!val && formData.type === 0) {
|
||||
setValues({
|
||||
component: '#'
|
||||
})
|
||||
} else if (formData.type === 1) {
|
||||
setValues({
|
||||
component: unref(cacheComponent) ?? ''
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
optionApi: async () => {
|
||||
const res = await getMenuListApi()
|
||||
return res.data.list || []
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'meta.title',
|
||||
label: t('menu.menuName'),
|
||||
component: 'Input'
|
||||
},
|
||||
{
|
||||
field: 'component',
|
||||
label: '组件',
|
||||
component: 'Input',
|
||||
value: '#',
|
||||
componentProps: {
|
||||
disabled: true,
|
||||
placeholder: '#为顶级目录，##为子目录',
|
||||
on: {
|
||||
change: (val: string) => {
|
||||
cacheComponent.value = val
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'name',
|
||||
label: t('menu.name'),
|
||||
component: 'Input'
|
||||
},
|
||||
{
|
||||
field: 'meta.icon',
|
||||
label: t('menu.icon'),
|
||||
component: 'Input'
|
||||
},
|
||||
{
|
||||
field: 'path',
|
||||
label: t('menu.path'),
|
||||
component: 'Input'
|
||||
},
|
||||
{
|
||||
field: 'meta.activeMenu',
|
||||
label: t('menu.activeMenu'),
|
||||
component: 'Input'
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
label: t('menu.status'),
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: [
|
||||
{
|
||||
label: t('userDemo.disable'),
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
label: t('userDemo.enable'),
|
||||
value: 1
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'permissionList',
|
||||
label: t('menu.permission'),
|
||||
component: 'CheckboxGroup',
|
||||
colProps: {
|
||||
span: 24
|
||||
},
|
||||
formItemProps: {
|
||||
slots: {
|
||||
default: (data: any) => (
|
||||
<>
|
||||
<BaseButton
|
||||
class="m-t-5px"
|
||||
type="primary"
|
||||
size="small"
|
||||
onClick={() => (showDrawer.value = true)}
|
||||
>
|
||||
添加权限
|
||||
</BaseButton>
|
||||
<ElTable data={data?.permissionList}>
|
||||
<ElTableColumn type="index" prop="id" />
|
||||
<ElTableColumn
|
||||
prop="value"
|
||||
label="Value"
|
||||
v-slots={{
|
||||
default: ({ row }: any) =>
|
||||
permissionEditingRow.value && permissionEditingRow.value.id === row.id ? (
|
||||
<ElInput v-model={permissionEditingRow.value.value} size="small" />
|
||||
) : (
|
||||
<span>{row.value}</span>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
<ElTableColumn
|
||||
prop="label"
|
||||
label="Label"
|
||||
v-slots={{
|
||||
default: ({ row }: any) =>
|
||||
permissionEditingRow.value && permissionEditingRow.value.id === row.id ? (
|
||||
<ElInput v-model={permissionEditingRow.value.label} size="small" />
|
||||
) : (
|
||||
<ElTag class="mr-1" key={row.value}>
|
||||
{row.label}
|
||||
</ElTag>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
<ElTableColumn
|
||||
label="Operations"
|
||||
width="180"
|
||||
v-slots={{
|
||||
default: ({ row }: any) =>
|
||||
permissionEditingRow.value && permissionEditingRow.value.id === row.id ? (
|
||||
<ElButton size="small" type="primary" onClick={handleSave}>
|
||||
确定
|
||||
</ElButton>
|
||||
) : (
|
||||
<>
|
||||
<ElButton size="small" type="primary" onClick={() => handleEdit(row)}>
|
||||
编辑
|
||||
</ElButton>
|
||||
<ElPopconfirm
|
||||
title="Are you sure to delete this?"
|
||||
onConfirm={() => handleClose(row)}
|
||||
>
|
||||
{{
|
||||
reference: () => (
|
||||
<ElButton size="small" type="danger">
|
||||
删除
|
||||
</ElButton>
|
||||
)
|
||||
}}
|
||||
</ElPopconfirm>
|
||||
</>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</ElTable>
|
||||
</>
|
||||
)
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'meta.hidden',
|
||||
label: t('menu.hidden'),
|
||||
component: 'Switch'
|
||||
},
|
||||
{
|
||||
field: 'meta.alwaysShow',
|
||||
label: t('menu.alwaysShow'),
|
||||
component: 'Switch'
|
||||
},
|
||||
{
|
||||
field: 'meta.noCache',
|
||||
label: t('menu.noCache'),
|
||||
component: 'Switch'
|
||||
},
|
||||
{
|
||||
field: 'meta.breadcrumb',
|
||||
label: t('menu.breadcrumb'),
|
||||
component: 'Switch'
|
||||
},
|
||||
{
|
||||
field: 'meta.affix',
|
||||
label: t('menu.affix'),
|
||||
component: 'Switch'
|
||||
},
|
||||
{
|
||||
field: 'meta.noTagsView',
|
||||
label: t('menu.noTagsView'),
|
||||
component: 'Switch'
|
||||
},
|
||||
{
|
||||
field: 'meta.canTo',
|
||||
label: t('menu.canTo'),
|
||||
component: 'Switch'
|
||||
}
|
||||
])
|
||||
|
||||
const rules = reactive({
|
||||
component: [required()],
|
||||
path: [required()],
|
||||
'meta.title': [required()]
|
||||
})
|
||||
|
||||
const { formRegister, formMethods } = useForm()
|
||||
const { setValues, getFormData, getElFormExpose, setSchema } = formMethods
|
||||
|
||||
const submit = async () => {
|
||||
const elForm = await getElFormExpose()
|
||||
const valid = await elForm?.validate().catch((err) => {
|
||||
console.log(err)
|
||||
})
|
||||
if (valid) {
|
||||
const formData = await getFormData()
|
||||
return formData
|
||||
}
|
||||
}
|
||||
|
||||
const cacheComponent = ref('')
|
||||
|
||||
watch(
|
||||
() => props.currentRow,
|
||||
(value) => {
|
||||
if (!value) return
|
||||
const currentRow = cloneDeep(value)
|
||||
cacheComponent.value = currentRow.type === 1 ? currentRow.component : ''
|
||||
if (currentRow.parentId === 0) {
|
||||
setSchema([
|
||||
{
|
||||
field: 'component',
|
||||
path: 'componentProps.disabled',
|
||||
value: true
|
||||
}
|
||||
])
|
||||
} else {
|
||||
setSchema([
|
||||
{
|
||||
field: 'component',
|
||||
path: 'componentProps.disabled',
|
||||
value: false
|
||||
}
|
||||
])
|
||||
}
|
||||
if (currentRow.type === 1) {
|
||||
setSchema([
|
||||
{
|
||||
field: 'component',
|
||||
path: 'componentProps.disabled',
|
||||
value: false
|
||||
}
|
||||
])
|
||||
} else {
|
||||
setSchema([
|
||||
{
|
||||
field: 'component',
|
||||
path: 'componentProps.disabled',
|
||||
value: true
|
||||
}
|
||||
])
|
||||
}
|
||||
setValues(currentRow)
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
)
|
||||
|
||||
defineExpose({
|
||||
submit
|
||||
})
|
||||
|
||||
const confirm = async (data: any) => {
|
||||
const formData = await getFormData()
|
||||
setValues({
|
||||
permissionList: [...(formData?.permissionList || []), data]
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Form :rules="rules" @register="formRegister" :schema="formSchema" />
|
||||
<AddButtonPermission v-model="showDrawer" @confirm="confirm" />
|
||||
</template>
|
||||
Reference in New Issue
Block a user