diff --git a/mock/menu/index.mock.ts b/mock/menu/index.mock.ts index fd3f732..07b7b29 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' + value: 'add' }, { + 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 65ea782..2da8b67 100644 --- a/src/views/Authorization/Menu/components/Write.vue +++ b/src/views/Authorization/Menu/components/Write.vue @@ -5,7 +5,7 @@ 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 { 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' @@ -29,7 +29,23 @@ 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) => 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([ { @@ -196,16 +212,73 @@ const formSchema = reactive([ slots: { default: (data: any) => ( <> - {data?.permissionList?.map((v) => { - 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: () => ( + + 删除 + + ) + }} + + + ) + }} + /> + ) }