update: 菜单管理-暂存
This commit is contained in:
easy
parent
419f5ff4a2
commit
66f77fbbd4
|
|
@ -4,13 +4,13 @@
|
|||
ref="tableRef"
|
||||
:columns="table.columns"
|
||||
model="TABLE"
|
||||
:dataSource="table.data"
|
||||
:dataSource="table.tableData"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<a-button
|
||||
type="primary"
|
||||
style="margin-right: 10px"
|
||||
@click="() => dialog.openDialog()"
|
||||
@click="() => dialog.openDialog('新增')"
|
||||
><plus-outlined />新增</a-button
|
||||
>
|
||||
</template>
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
<a-button
|
||||
style="padding: 0"
|
||||
type="link"
|
||||
@click="() => dialog.openDialog(slotProps)"
|
||||
@click="() => dialog.openDialog('编辑', slotProps)"
|
||||
>
|
||||
<edit-outlined />
|
||||
</a-button>
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
<a-button
|
||||
style="padding: 0"
|
||||
type="link"
|
||||
@click="() => dialog.openDialog(slotProps)"
|
||||
@click="() => dialog.openDialog('查看', slotProps)"
|
||||
>
|
||||
<edit-outlined />
|
||||
</a-button>
|
||||
|
|
@ -81,8 +81,8 @@ const routeParams = {
|
|||
const dialogRef = ref<any>(null);
|
||||
const dialog = {
|
||||
// 打开弹窗
|
||||
openDialog: (row?: object) => {
|
||||
dialogRef.value && dialogRef.value.openDialog(row);
|
||||
openDialog: (mode: string, row?: object) => {
|
||||
dialogRef.value && dialogRef.value.openDialog(mode, row);
|
||||
},
|
||||
confirm: () => {},
|
||||
};
|
||||
|
|
@ -114,11 +114,11 @@ const table = reactive({
|
|||
width: 240,
|
||||
},
|
||||
],
|
||||
data: [] as tableDataItem[],
|
||||
tableData: [] as tableDataItem[],
|
||||
getList: () => {
|
||||
routeParams.id &&
|
||||
getMenuInfo_api(routeParams.id).then((resp: any) => {
|
||||
table.data = resp.result.buttons as tableDataItem[];
|
||||
table.tableData = resp.result.buttons as tableDataItem[];
|
||||
});
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -17,6 +17,11 @@ const activeKey = ref('basic');
|
|||
|
||||
<style lang="less" scoped>
|
||||
.menu-detail-container {
|
||||
:deep(.ant-tabs-nav) {
|
||||
background-color: #fff;
|
||||
padding-left: 24px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.ant-tabs-tabpane {
|
||||
background-color: #f0f2f5;
|
||||
padding: 24px;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<a-modal
|
||||
v-model:visible="dialog.visible"
|
||||
title="新增"
|
||||
:title="form.mode"
|
||||
width="660px"
|
||||
@ok="dialog.handleOk"
|
||||
>
|
||||
|
|
@ -14,7 +14,10 @@
|
|||
{ max: 64, message: '最多可输入64个字符' },
|
||||
]"
|
||||
>
|
||||
<a-input v-model:value="form.data.id" />
|
||||
<a-input
|
||||
v-model:value="form.data.id"
|
||||
:disabled="form.mode !== '新增'"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="名称"
|
||||
|
|
@ -24,13 +27,20 @@
|
|||
{ max: 64, message: '最多可输入64个字符' },
|
||||
]"
|
||||
>
|
||||
<a-input v-model:value="form.data.name" />
|
||||
<a-input
|
||||
v-model:value="form.data.name"
|
||||
:disabled="form.mode === '查看'"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="权限">
|
||||
<a-form-item
|
||||
label="权限"
|
||||
:rules="[{ required: true, message: '请选择权限', validator: form.checkPermission, }]"
|
||||
>
|
||||
<PermissChoose
|
||||
:first-width="8"
|
||||
max-height="350px"
|
||||
v-model:value="form.data.permissions"
|
||||
:disabled="form.mode === '查看'"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="说明" name="describe">
|
||||
|
|
@ -38,6 +48,7 @@
|
|||
v-model:value="form.data.describe"
|
||||
:rows="4"
|
||||
placeholder="请输入说明"
|
||||
:disabled="form.mode === '查看'"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
|
|
@ -45,6 +56,7 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Rule } from 'ant-design-vue/es/form';
|
||||
import PermissChoose from '../components/PermissChoose.vue';
|
||||
|
||||
const emits = defineEmits(['confirm']);
|
||||
|
|
@ -53,9 +65,10 @@ const dialog = reactive({
|
|||
handleOk: () => {
|
||||
dialog.changeVisible();
|
||||
},
|
||||
changeVisible: (formValue?: formType, show?: boolean) => {
|
||||
dialog.visible = show === undefined ? !dialog.visible : show;
|
||||
changeVisible: (mode?: string, formValue?: formType) => {
|
||||
dialog.visible = !dialog.visible;
|
||||
form.data = formValue || { ...initForm };
|
||||
form.mode = mode || '';
|
||||
console.log(1111111111, form.data);
|
||||
},
|
||||
});
|
||||
|
|
@ -67,6 +80,11 @@ const initForm = {
|
|||
} as formType;
|
||||
const form = reactive({
|
||||
data: { ...initForm },
|
||||
mode: '',
|
||||
checkPermission:async (_rule: Rule, value: string[])=>{
|
||||
if(!value || value.length < 1) return Promise.reject('请选择权限')
|
||||
return Promise.resolve()
|
||||
}
|
||||
});
|
||||
|
||||
// 将打开弹窗的操作暴露给父组件
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
allowClear
|
||||
placeholder="请输入权限名称"
|
||||
@input="search.search"
|
||||
:disabled="props.disabled"
|
||||
/>
|
||||
|
||||
<div class="permission-table">
|
||||
|
|
@ -24,6 +25,7 @@
|
|||
v-model:checked="rowItem.checkAll"
|
||||
:indeterminate="rowItem.indeterminate"
|
||||
@change="() => permission.selectAllOpions(rowItem)"
|
||||
:disabled="props.disabled"
|
||||
>
|
||||
{{ rowItem.name }}
|
||||
</a-checkbox>
|
||||
|
|
@ -33,6 +35,7 @@
|
|||
v-model:value="rowItem.checkedList"
|
||||
:options="rowItem.options"
|
||||
@change="((checkValue:string[])=>permission.selectOption(rowItem, checkValue))"
|
||||
:disabled="props.disabled"
|
||||
/>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
|
@ -48,6 +51,7 @@ const props = defineProps<{
|
|||
value: any[];
|
||||
firstWidth: number;
|
||||
maxHeight: string;
|
||||
disabled: boolean;
|
||||
}>();
|
||||
const emits = defineEmits(['update:value']);
|
||||
const searchValue = ref<string>('');
|
||||
|
|
@ -128,7 +132,7 @@ const permission = reactive({
|
|||
},
|
||||
makeList: (checkedValue: any[], sourceList: any[]): permissionType[] => {
|
||||
console.log(checkedValue);
|
||||
|
||||
|
||||
const result = sourceList.map((item) => {
|
||||
const checked = checkedValue.find(
|
||||
(checkedItem) => checkedItem.permission === item.id,
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
:request="table.getList"
|
||||
model="TABLE"
|
||||
:params="query.params"
|
||||
|
||||
>
|
||||
<template #headerTitle>
|
||||
<a-button
|
||||
|
|
@ -252,4 +253,9 @@ const table = reactive({
|
|||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
<style lang="less" scoped>
|
||||
.menu-container {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue