github_mirrors/gf-vben-admin
1
0
Fork 0
mirror of https://github.com/vbenjs/gf-vben-admin.git synced 2025-01-23 11:50:20 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

后端路由的curd页面

Browse Source
This commit is contained in:
JinMao 2021-08-29 19:53:46 +08:00
parent 294e8a35e3
commit e155cb2724
5 changed files with 201 additions and 178 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/api/Curd.ts
View File

@ -1,3 +1,3 @@
import { defHttp } from '/@/utils/http/axios';
export const Curd = (params) => defHttp.post({ url: '/curd', params });
export const Curd = (params) => defHttp.post({ url: '/curd', params, headers: {} });

1
src/utils/http/axios/checkStatus.ts
View File

@ -19,7 +19,6 @@ export function checkStatus(
const { t } = useI18n();
const userStore = useUserStoreWithOut();
let errMessage = '';
switch (status) {
case 400:
errMessage = `${msg}`;

95
src/views/menu/MenuDrawer.vue
View File

@ -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>

116
src/views/menu/index.vue
View File

@ -26,9 +26,7 @@
<MenuDrawer @register="registerDrawer" @success="handleSuccess" />
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
<script lang="ts" setup>
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { useDrawer } from '/@/components/Drawer';
@ -36,69 +34,55 @@
import { columns, searchFormSchema } from './menu.data';
import { Curd } from '/@/api/Curd';
export default defineComponent({
name: 'MenuManagement',
components: { BasicTable, MenuDrawer, TableAction },
setup() {
const [registerDrawer, { openDrawer }] = useDrawer();
const [registerTable, { reload }] = useTable({
title: '菜单列表',
api: Curd,
beforeFetch: (v) => {
v.i = 'router';
v.a = 'list';
return v;
},
columns,
formConfig: {
labelWidth: 120,
schemas: searchFormSchema,
},
pagination: false,
striped: false,
useSearchForm: true,
showTableSetting: true,
bordered: true,
showIndexColumn: false,
canResize: false,
actionColumn: {
width: 80,
title: '操作',
dataIndex: 'action',
slots: { customRender: 'action' },
fixed: undefined,
},
});
function handleCreate() {
openDrawer(true, {
isUpdate: false,
});
}
function handleEdit(record: Recordable) {
openDrawer(true, {
record,
isUpdate: true,
});
}
function handleDelete(record: Recordable) {
console.log(record);
}
function handleSuccess() {
reload();
}
return {
registerTable,
registerDrawer,
handleCreate,
handleEdit,
handleDelete,
handleSuccess,
};
const [registerDrawer, { openDrawer }] = useDrawer();
const [registerTable, { reload }] = useTable({
title: '菜单列表',
api: Curd,
beforeFetch: (v) => {
v.i = 'router';
v.a = 'list';
return v;
},
columns,
formConfig: {
labelWidth: 120,
schemas: searchFormSchema,
},
pagination: false,
striped: false,
useSearchForm: true,
showTableSetting: true,
bordered: true,
showIndexColumn: false,
canResize: false,
actionColumn: {
width: 80,
title: '操作',
dataIndex: 'action',
slots: { customRender: 'action' },
fixed: undefined,
},
});
function handleCreate() {
openDrawer(true, {
isUpdate: false,
});
}
function handleEdit(record: Recordable) {
openDrawer(true, {
record,
isUpdate: true,
});
}
async function handleDelete(record: Recordable) {
await Curd({ i: 'router', a: 'del', id: record.id });
reload();
}
function handleSuccess() {
reload();
}
</script>

165
src/views/menu/menu.data.ts
View File

@ -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),
// },
];