mirror of
https://github.com/vbenjs/gf-vben-admin.git
synced 2025-02-02 19:08:40 +08:00
后端路由的curd页面
This commit is contained in:
JinMao
parent
dc9ae5e438
commit
0cf9bd2913
@ -10,61 +10,66 @@
|
||||
<BasicForm @register="registerForm" />
|
||||
</BasicDrawer>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, computed, unref } from 'vue';
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed, unref } from 'vue';
|
||||
import { BasicForm, useForm } from '/@/components/Form/index';
|
||||
import { formSchema } from './menu.data';
|
||||
import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
|
||||
import { Curd } from '/@/api/Curd';
|
||||
|
||||
import { getMenuList } from '/@/api/demo/system';
|
||||
const emit = defineEmits(['success', 'register']);
|
||||
const isUpdate = ref(true);
|
||||
const id = ref(0);
|
||||
const [registerForm, { resetFields, setFieldsValue, updateSchema, validate }] = useForm({
|
||||
labelWidth: 100,
|
||||
schemas: formSchema,
|
||||
showActionButtonGroup: false,
|
||||
baseColProps: { lg: 12, md: 24 },
|
||||
});
|
||||
|
||||
export default defineComponent({
|
||||
name: 'MenuDrawer',
|
||||
components: { BasicDrawer, BasicForm },
|
||||
emits: ['success', 'register'],
|
||||
setup(_, { emit }) {
|
||||
const isUpdate = ref(true);
|
||||
const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
|
||||
resetFields();
|
||||
setDrawerProps({ confirmLoading: false });
|
||||
isUpdate.value = !!data?.isUpdate;
|
||||
const { record } = data;
|
||||
|
||||
const [registerForm, { resetFields, setFieldsValue, updateSchema, validate }] = useForm({
|
||||
labelWidth: 100,
|
||||
schemas: formSchema,
|
||||
showActionButtonGroup: false,
|
||||
baseColProps: { lg: 12, md: 24 },
|
||||
console.log(record);
|
||||
if (unref(isUpdate)) {
|
||||
id.value = record.id;
|
||||
setFieldsValue({
|
||||
...record,
|
||||
title: record.meta.title,
|
||||
});
|
||||
}
|
||||
|
||||
const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
|
||||
resetFields();
|
||||
setDrawerProps({ confirmLoading: false });
|
||||
isUpdate.value = !!data?.isUpdate;
|
||||
let treeData = [{ name: '无父级', value: 0, id: 0 }];
|
||||
const res = await Curd({ i: 'router', a: 'list' });
|
||||
treeData = treeData.concat(res.items);
|
||||
// console.log(treeData);
|
||||
updateSchema({
|
||||
field: 'parent',
|
||||
componentProps: { treeData },
|
||||
});
|
||||
});
|
||||
|
||||
if (unref(isUpdate)) {
|
||||
setFieldsValue({
|
||||
...data.record,
|
||||
});
|
||||
}
|
||||
const treeData = await getMenuList();
|
||||
updateSchema({
|
||||
field: 'parentMenu',
|
||||
componentProps: { treeData },
|
||||
});
|
||||
});
|
||||
const getTitle = computed(() => (!unref(isUpdate) ? '新增菜单' : '编辑菜单'));
|
||||
|
||||
const getTitle = computed(() => (!unref(isUpdate) ? '新增菜单' : '编辑菜单'));
|
||||
|
||||
async function handleSubmit() {
|
||||
try {
|
||||
const values = await validate();
|
||||
setDrawerProps({ confirmLoading: true });
|
||||
// TODO custom api
|
||||
console.log(values);
|
||||
closeDrawer();
|
||||
emit('success');
|
||||
} finally {
|
||||
setDrawerProps({ confirmLoading: false });
|
||||
}
|
||||
async function handleSubmit() {
|
||||
try {
|
||||
const values = await validate();
|
||||
setDrawerProps({ confirmLoading: true });
|
||||
// TODO custom api
|
||||
console.log(values);
|
||||
if (unref(isUpdate)) {
|
||||
await Curd({ i: 'router', a: 'edit', id: id.value, ...values });
|
||||
} else {
|
||||
await Curd({ i: 'router', a: 'add', ...values });
|
||||
}
|
||||
|
||||
return { registerDrawer, registerForm, getTitle, handleSubmit };
|
||||
},
|
||||
});
|
||||
closeDrawer();
|
||||
emit('success');
|
||||
} finally {
|
||||
setDrawerProps({ confirmLoading: false });
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -11,6 +11,12 @@ export const columns: BasicColumn[] = [
|
||||
width: 200,
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
title: '菜单标题',
|
||||
dataIndex: 'meta.title',
|
||||
width: 200,
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
title: '图标',
|
||||
dataIndex: 'icon',
|
||||
@ -30,7 +36,7 @@ export const columns: BasicColumn[] = [
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
dataIndex: 'orderNo',
|
||||
dataIndex: 'order_no',
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
@ -53,7 +59,7 @@ export const columns: BasicColumn[] = [
|
||||
];
|
||||
|
||||
const isDir = (type: string) => type === '0';
|
||||
const isMenu = (type: string) => type === '1';
|
||||
// const isMenu = (type: string) => type === '1';
|
||||
const isButton = (type: string) => type === '2';
|
||||
|
||||
export const searchFormSchema: FormSchema[] = [
|
||||
@ -78,34 +84,40 @@ export const searchFormSchema: FormSchema[] = [
|
||||
];
|
||||
|
||||
export const formSchema: FormSchema[] = [
|
||||
// {
|
||||
// field: 'type',
|
||||
// label: '菜单类型',
|
||||
// component: 'RadioButtonGroup',
|
||||
// defaultValue: '0',
|
||||
// componentProps: {
|
||||
// options: [
|
||||
// { label: '目录', value: '0' },
|
||||
// { label: '菜单', value: '1' },
|
||||
// { label: '按钮', value: '2' },
|
||||
// ],
|
||||
// },
|
||||
// colProps: { lg: 24, md: 24 },
|
||||
// },
|
||||
{
|
||||
field: 'type',
|
||||
label: '菜单类型',
|
||||
component: 'RadioButtonGroup',
|
||||
defaultValue: '0',
|
||||
componentProps: {
|
||||
options: [
|
||||
{ label: '目录', value: '0' },
|
||||
{ label: '菜单', value: '1' },
|
||||
{ label: '按钮', value: '2' },
|
||||
],
|
||||
},
|
||||
colProps: { lg: 24, md: 24 },
|
||||
field: 'name',
|
||||
label: '菜单名称',
|
||||
component: 'Input',
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
field: 'menuName',
|
||||
label: '菜单名称',
|
||||
field: 'title',
|
||||
label: '菜单标题',
|
||||
component: 'Input',
|
||||
required: true,
|
||||
},
|
||||
|
||||
{
|
||||
field: 'parentMenu',
|
||||
field: 'parent',
|
||||
label: '上级菜单',
|
||||
component: 'TreeSelect',
|
||||
componentProps: {
|
||||
replaceFields: {
|
||||
title: 'menuName',
|
||||
title: 'name',
|
||||
key: 'id',
|
||||
value: 'id',
|
||||
},
|
||||
@ -114,31 +126,36 @@ export const formSchema: FormSchema[] = [
|
||||
},
|
||||
|
||||
{
|
||||
field: 'orderNo',
|
||||
field: 'order_no',
|
||||
label: '排序',
|
||||
defaultValue: 0,
|
||||
component: 'InputNumber',
|
||||
componentProps: {
|
||||
min: 0,
|
||||
},
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
field: 'icon',
|
||||
label: '图标',
|
||||
component: 'IconPicker',
|
||||
required: true,
|
||||
show: ({ values }) => !isButton(values.type),
|
||||
},
|
||||
|
||||
{
|
||||
field: 'routePath',
|
||||
field: 'path',
|
||||
label: '路由地址',
|
||||
component: 'Input',
|
||||
required: true,
|
||||
show: ({ values }) => !isButton(values.type),
|
||||
// show: ({ values }) => !isButton(values.type),
|
||||
},
|
||||
|
||||
{
|
||||
field: 'component',
|
||||
label: '组件路径',
|
||||
component: 'Input',
|
||||
show: ({ values }) => isMenu(values.type),
|
||||
required: true,
|
||||
// show: ({ values }) => isMenu(values.type),
|
||||
},
|
||||
{
|
||||
field: 'permission',
|
||||
@ -146,57 +163,75 @@ export const formSchema: FormSchema[] = [
|
||||
component: 'Input',
|
||||
show: ({ values }) => !isDir(values.type),
|
||||
},
|
||||
// {
|
||||
// field: 'isRedirect',
|
||||
// label: '是否重定向',
|
||||
// component: 'RadioButtonGroup',
|
||||
// defaultValue: 0,
|
||||
// componentProps: {
|
||||
// options: [
|
||||
// { label: '是', value: 1 },
|
||||
// { label: '否', value: 0 },
|
||||
// ],
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// field: 'redirect',
|
||||
// label: '路由重定向',
|
||||
// component: 'Input',
|
||||
// show: ({ values }) => !!values.isRedirect,
|
||||
// },
|
||||
{
|
||||
field: 'status',
|
||||
label: '状态',
|
||||
component: 'RadioButtonGroup',
|
||||
defaultValue: '0',
|
||||
defaultValue: 1,
|
||||
componentProps: {
|
||||
options: [
|
||||
{ label: '启用', value: '0' },
|
||||
{ label: '禁用', value: '1' },
|
||||
{ label: '启用', value: 1 },
|
||||
{ label: '禁用', value: 0 },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'isExt',
|
||||
label: '是否外链',
|
||||
component: 'RadioButtonGroup',
|
||||
defaultValue: '0',
|
||||
componentProps: {
|
||||
options: [
|
||||
{ label: '否', value: '0' },
|
||||
{ label: '是', value: '1' },
|
||||
],
|
||||
},
|
||||
show: ({ values }) => !isButton(values.type),
|
||||
},
|
||||
// {
|
||||
// field: 'isExt',
|
||||
// label: '是否外链',
|
||||
// component: 'RadioButtonGroup',
|
||||
// defaultValue: '0',
|
||||
// componentProps: {
|
||||
// options: [
|
||||
// { label: '否', value: '0' },
|
||||
// { label: '是', value: '1' },
|
||||
// ],
|
||||
// },
|
||||
// show: ({ values }) => !isButton(values.type),
|
||||
// },
|
||||
|
||||
{
|
||||
field: 'keepalive',
|
||||
label: '是否缓存',
|
||||
component: 'RadioButtonGroup',
|
||||
defaultValue: '0',
|
||||
componentProps: {
|
||||
options: [
|
||||
{ label: '否', value: '0' },
|
||||
{ label: '是', value: '1' },
|
||||
],
|
||||
},
|
||||
show: ({ values }) => isMenu(values.type),
|
||||
},
|
||||
// {
|
||||
// field: 'keepalive',
|
||||
// label: '是否缓存',
|
||||
// component: 'RadioButtonGroup',
|
||||
// defaultValue: '0',
|
||||
// componentProps: {
|
||||
// options: [
|
||||
// { label: '否', value: '0' },
|
||||
// { label: '是', value: '1' },
|
||||
// ],
|
||||
// },
|
||||
// show: ({ values }) => isMenu(values.type),
|
||||
// },
|
||||
|
||||
{
|
||||
field: 'show',
|
||||
label: '是否显示',
|
||||
component: 'RadioButtonGroup',
|
||||
defaultValue: '0',
|
||||
componentProps: {
|
||||
options: [
|
||||
{ label: '是', value: '0' },
|
||||
{ label: '否', value: '1' },
|
||||
],
|
||||
},
|
||||
show: ({ values }) => !isButton(values.type),
|
||||
},
|
||||
// {
|
||||
// field: 'show',
|
||||
// label: '是否显示',
|
||||
// component: 'RadioButtonGroup',
|
||||
// defaultValue: '0',
|
||||
// componentProps: {
|
||||
// options: [
|
||||
// { label: '是', value: '0' },
|
||||
// { label: '否', value: '1' },
|
||||
// ],
|
||||
// },
|
||||
// show: ({ values }) => !isButton(values.type),
|
||||
// },
|
||||
];
|
||||
|
||||
Loading…
Reference in New Issue
Block a user