diff --git a/mock/menu/index.mock.ts b/mock/menu/index.mock.ts index b5d190b6..e43c4a3f 100644 --- a/mock/menu/index.mock.ts +++ b/mock/menu/index.mock.ts @@ -41,10 +41,12 @@ export default [ title: '分析页', permissionList: [ { + id: 1, label: '新增', value: 'add' }, { + id: 2, label: '编辑', value: 'edit' } @@ -66,14 +68,17 @@ export default [ title: '工作台', permissionList: [ { + id: 1, label: '新增', value: 'add' }, { + id: 2, label: '编辑', value: 'edit' }, { + id: 3, label: '删除', value: 'delete' } @@ -229,18 +234,22 @@ export default [ title: '综合示例-弹窗', permissionList: [ { + id: 1, label: '新增', value: 'add' }, { + id: 2, label: '编辑', value: 'edit' }, { + id: 3, label: '删除', value: 'delete' }, { + id: 4, label: '查看', value: 'view' } @@ -260,18 +269,22 @@ export default [ title: '综合示例-页面', permissionList: [ { + id: 1, label: '新增', value: 'edit' }, { + id: 2, label: '编辑', value: 'edit' }, { + id: 3, label: '删除', value: 'delete' }, { + id: 4, label: '查看', value: 'view' } diff --git a/src/views/Authorization/Menu/components/Write.vue b/src/views/Authorization/Menu/components/Write.vue index 140305bf..424b4d3d 100644 --- a/src/views/Authorization/Menu/components/Write.vue +++ b/src/views/Authorization/Menu/components/Write.vue @@ -4,7 +4,7 @@ import { useForm } from '@/hooks/web/useForm' import { type PropType, reactive, watch, ref, unref } from 'vue' import { useValidator } from '@/hooks/web/useValidator' import { getMenuListApi } from '@/api/menu' -import { ElTag } from 'element-plus' +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' @@ -26,7 +26,25 @@ const handleClose = async (tag: any) => { }) } +const handleEdit = async (row: any) => { + // 深拷贝当前行数据到编辑行 + permissionEditingRow.value = { ...row } +} + +const handleSave = async () => { + const formData = await getFormData() + const index = formData?.permissionList?.findIndex( + (x: any) => x.id === permissionEditingRow.value.id + ) + if (index !== -1) { + formData.permissionList[index] = { ...permissionEditingRow.value } + permissionEditingRow.value = null // 重置编辑状态 + } +} + const showDrawer = ref(false) +// 存储正在编辑的行的数据 +const permissionEditingRow = ref(null) const formSchema = reactive([ { @@ -193,16 +211,73 @@ const formSchema = reactive([ slots: { default: (data: any) => ( <> - {data?.permissionList?.map((v: any) => { - return ( - handleClose(v)}> - {v.label} - - ) - })} - (showDrawer.value = true)}> + (showDrawer.value = true)} + > 添加权限 + + + + permissionEditingRow.value && permissionEditingRow.value.id === row.id ? ( + + ) : ( + {row.value} + ) + }} + /> + + permissionEditingRow.value && permissionEditingRow.value.id === row.id ? ( + + ) : ( + + {row.label} + + ) + }} + /> + + permissionEditingRow.value && permissionEditingRow.value.id === row.id ? ( + + 确定 + + ) : ( + <> + handleEdit(row)}> + 编辑 + + handleClose(row)} + > + {{ + reference: () => ( + + 删除 + + ) + }} + + + ) + }} + /> + ) }