lq/lgp-admin-plus-api
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

更新模板

Browse Source
This commit is contained in:
年糕崽崽
2025-11-28 08:57:36 +08:00
parent e4be2c1326
commit f071fa0cba
5 changed files with 134 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
app/template/view/api/index.ts
View File

@@ -6,7 +6,7 @@ const prefix = 'dashCase/';
* @param data * @param data
*/ */
export async function getupperCamelCaseListApi(data: any) { export async function getupperCamelCaseListApi(data: any) {
return requestClient.get<any>(`${prefix}list`, { params: data }); return requestClient.get<any>(`${prefix}list`, { params: data });
} }
/** /**
@@ -21,7 +21,7 @@ export async function getupperCamelCaseOptionApi() {
* @param id * @param id
*/ */
export async function getupperCamelCaseInfoApi(id: number) { export async function getupperCamelCaseInfoApi(id: number) {
return requestClient.get<any>(`${prefix}detail`, { params: { id } }); return requestClient.get<any>(`${prefix}detail`, { params: { id } });
} }
/** /**
@@ -29,7 +29,7 @@ export async function getupperCamelCaseInfoApi(id: number) {
* @param data * @param data
*/ */
export async function createupperCamelCaseApi(data: Record<string, any>) { export async function createupperCamelCaseApi(data: Record<string, any>) {
return requestClient.post<any>(`${prefix}create`, data); return requestClient.post<any>(`${prefix}create`, data);
} }
/** /**
@@ -37,7 +37,7 @@ export async function createupperCamelCaseApi(data: Record<string, any>) {
* @param data * @param data
*/ */
export async function updateupperCamelCaseApi(data: Record<string, any>) { export async function updateupperCamelCaseApi(data: Record<string, any>) {
return requestClient.post<any>(`${prefix}update`, data); return requestClient.post<any>(`${prefix}update`, data);
} }
/** /**
@@ -45,5 +45,5 @@ export async function updateupperCamelCaseApi(data: Record<string, any>) {
* @param data * @param data
*/ */
export async function deleteupperCamelCaseApi(data: Record<string, any>) { export async function deleteupperCamelCaseApi(data: Record<string, any>) {
return requestClient.post<any>(`${prefix}delete`, data); return requestClient.post<any>(`${prefix}delete`, data);
} }

76
app/template/view/components/modal.vue
View File

@@ -10,7 +10,7 @@ import {createupperCamelCaseApi, updateupperCamelCaseApi} from '../api';
import { modalFormProps } from '../config/form'; import { modalFormProps } from '../config/form';
defineOptions({ defineOptions({
name: 'upperCamelCaseDemo', name: 'upperCamelCaseDemo',
}); });
const isUpdate = ref(false); const isUpdate = ref(false);
@@ -19,44 +19,44 @@ const gridApi = ref();
const [Form, formApi] = useVbenForm(modalFormProps); const [Form, formApi] = useVbenForm(modalFormProps);
const [Modal, modalApi] = useVbenModal({ const [Modal, modalApi] = useVbenModal({
fullscreenButton: false, fullscreenButton: false,
draggable: true, draggable: true,
onCancel() { onCancel() {
modalApi.close(); modalApi.close();
}, },
onConfirm: async () => { onConfirm: async () => {
formApi.validate().then(async (e: any) => { formApi.validate().then(async (e: any) => {
if (e.valid) { if (e.valid) {
const values = await formApi.getValues(); const values = await formApi.getValues();
modalApi.setState({ loading: true, confirmLoading: true }); modalApi.setState({ loading: true, confirmLoading: true });
const submitApi = isUpdate.value ? updateupperCamelCaseApi : createupperCamelCaseApi; const submitApi = isUpdate.value ? updateupperCamelCaseApi : createupperCamelCaseApi;
submitApi(values) submitApi(values)
.then(() => { .then(() => {
message.success('保存成功'); message.success('保存成功');
gridApi.value?.reload(); gridApi.value?.reload();
modalApi.close(); modalApi.close();
}) })
.finally(() => { .finally(() => {
modalApi.setState({ loading: false, confirmLoading: false }); modalApi.setState({ loading: false, confirmLoading: false });
}); });
} }
}); });
await formApi.validateAndSubmitForm(); await formApi.validateAndSubmitForm();
}, },
onOpenChange(isOpen: boolean) { onOpenChange(isOpen: boolean) {
gridApi.value = isOpen ? modalApi.getData()?.gridApi : null; gridApi.value = isOpen ? modalApi.getData()?.gridApi : null;
if (isOpen) { if (isOpen) {
const { values, update } = modalApi.getData<Record<string, any>>(); const { values, update } = modalApi.getData<Record<string, any>>();
if (values) { if (values) {
isUpdate.value = update; isUpdate.value = update;
formApi.setValues(values); formApi.setValues(values);
} }
} }
}, },
}); });
</script> </script>
<template> <template>
<Modal :title="`${isUpdate === true ? '编辑' : '新增'}模板名称`" class="w-[30%]"> <Modal :title="`${isUpdate === true ? '编辑' : '新增'}模板名称`" class="w-[30%]">
<Form /> <Form />
</Modal> </Modal>
</template> </template>

46
app/template/view/config/form.ts
View File

@@ -1,28 +1,28 @@
import type { VbenFormProps } from '#/adapter/form'; import type { VbenFormProps } from '#/adapter/form';
export const modalFormProps: VbenFormProps = { export const modalFormProps: VbenFormProps = {
wrapperClass: 'grid-cols-12', // 24栅格, wrapperClass: 'grid-cols-12', // 24栅格,
commonConfig: { commonConfig: {
formItemClass: 'col-span-12', formItemClass: 'col-span-12',
// 所有表单项 // 所有表单项
componentProps: { componentProps: {
class: 'w-full', class: 'w-full',
},
}, },
}, // handleSubmit: onSubmit,
// handleSubmit: onSubmit, layout: 'horizontal',
layout: 'horizontal', schema: [
schema: [ {
{ component: 'VbenInput',
component: 'VbenInput', fieldName: 'id',
fieldName: 'id', label: 'ID',
label: 'ID', formItemClass: 'col-span-6',
formItemClass: 'col-span-6', dependencies: {
dependencies: { show: false,
show: false, triggerFields: ['id'],
triggerFields: ['id'], },
}, },
}, // 生成的表单字段
// 生成的表单字段 ],
], showDefaultActions: false,
showDefaultActions: false,
}; };

28
app/template/view/config/search.ts
View File

@@ -3,18 +3,18 @@ import type { VbenFormProps } from '#/adapter/form';
// import dayjs from 'dayjs'; // import dayjs from 'dayjs';
export const formOptions: VbenFormProps = { export const formOptions: VbenFormProps = {
// 默认展开 // 默认展开
collapsed: false, collapsed: false,
schema: [ schema: [
// 生成的搜索字段 // 生成的搜索字段
], ],
// 控制表单是否显示折叠按钮 // 控制表单是否显示折叠按钮
showCollapseButton: true, showCollapseButton: true,
submitButtonOptions: { submitButtonOptions: {
content: '查询', content: '查询',
}, },
// 是否在字段值改变时提交表单 // 是否在字段值改变时提交表单
submitOnChange: true, submitOnChange: true,
// 按下回车时是否提交表单 // 按下回车时是否提交表单
submitOnEnter: false, submitOnEnter: false,
}; };

108
app/template/view/config/table.ts
View File

@@ -3,64 +3,64 @@ import type { VxeGridProps } from '#/adapter/vxe-table';
import { getupperCamelCaseListApi } from '../api'; import { getupperCamelCaseListApi } from '../api';
interface RowType { interface RowType {
id: string; id: string;
name: string; name: string;
logo: string; logo: string;
introduce: string; introduce: string;
created_at: string; created_at: string;
} }
export const gridOptions: VxeGridProps<RowType> = { export const gridOptions: VxeGridProps<RowType> = {
checkboxConfig: { checkboxConfig: {
highlight: true, highlight: true,
labelField: '', labelField: '',
},
columnConfig: {
useKey: true,
},
rowConfig: {
useKey: true,
},
columns: [
{ type: 'checkbox', width: 60 },
{ field: 'id', align: 'left', title: 'ID', width: 100 },
// 生成的列表字段
{ field: 'created_at', title: '创建时间' },
{ field: 'updated_at', title: '编辑时间' },
{ type: 'html', title: '操作', slots: { default: 'action' } },
],
keepSource: true,
pagerConfig: {},
proxyConfig: {
ajax: {
// 请求后端接口方法
query: async ({ page }, formValues) => {
return await getupperCamelCaseListApi({
page: page.currentPage,
pageSize: page.pageSize,
...formValues,
});
},
}, },
}, columnConfig: {
height: 'auto', useKey: true,
border: false,
toolbarConfig: {
// 是否显示搜索表单控制按钮
// @ts-ignore 正式环境时有完整的类型声明
search: true,
refresh: true, // 刷新
print: false, // 打印
export: false, // 导出
// custom: true, // 自定义列
zoom: true, // 最大化最小化
slots: {
buttons: 'toolbar-buttons',
}, },
custom: { rowConfig: {
// 自定义列-图标 useKey: true,
icon: 'vxe-icon-menu',
}, },
}, columns: [
showOverflow: false, { type: 'checkbox', width: 60 },
{ field: 'id', align: 'left', title: 'ID', width: 100 },
// 生成的列表字段
{ field: 'created_at', title: '创建时间' },
{ field: 'updated_at', title: '编辑时间' },
{ type: 'html', title: '操作', slots: { default: 'action' } },
],
keepSource: true,
pagerConfig: {},
proxyConfig: {
ajax: {
// 请求后端接口方法
query: async ({ page }, formValues) => {
return await getupperCamelCaseListApi({
page: page.currentPage,
pageSize: page.pageSize,
...formValues,
});
},
},
},
height: 'auto',
border: false,
toolbarConfig: {
// 是否显示搜索表单控制按钮
// @ts-ignore 正式环境时有完整的类型声明
search: true,
refresh: true, // 刷新
print: false, // 打印
export: false, // 导出
// custom: true, // 自定义列
zoom: true, // 最大化最小化
slots: {
buttons: 'toolbar-buttons',
},
custom: {
// 自定义列-图标
icon: 'vxe-icon-menu',
},
},
showOverflow: false,
}; };