diff --git a/app/template/view/api/index.ts b/app/template/view/api/index.ts index 15c4007f..ffcbdea0 100644 --- a/app/template/view/api/index.ts +++ b/app/template/view/api/index.ts @@ -6,7 +6,7 @@ const prefix = 'dashCase/'; * @param data */ export async function getupperCamelCaseListApi(data: any) { - return requestClient.get(`${prefix}list`, { params: data }); + return requestClient.get(`${prefix}list`, { params: data }); } /** @@ -21,7 +21,7 @@ export async function getupperCamelCaseOptionApi() { * @param id */ export async function getupperCamelCaseInfoApi(id: number) { - return requestClient.get(`${prefix}detail`, { params: { id } }); + return requestClient.get(`${prefix}detail`, { params: { id } }); } /** @@ -29,7 +29,7 @@ export async function getupperCamelCaseInfoApi(id: number) { * @param data */ export async function createupperCamelCaseApi(data: Record) { - return requestClient.post(`${prefix}create`, data); + return requestClient.post(`${prefix}create`, data); } /** @@ -37,7 +37,7 @@ export async function createupperCamelCaseApi(data: Record) { * @param data */ export async function updateupperCamelCaseApi(data: Record) { - return requestClient.post(`${prefix}update`, data); + return requestClient.post(`${prefix}update`, data); } /** @@ -45,5 +45,5 @@ export async function updateupperCamelCaseApi(data: Record) { * @param data */ export async function deleteupperCamelCaseApi(data: Record) { - return requestClient.post(`${prefix}delete`, data); + return requestClient.post(`${prefix}delete`, data); } diff --git a/app/template/view/components/modal.vue b/app/template/view/components/modal.vue index 58cdc4c8..55683f69 100644 --- a/app/template/view/components/modal.vue +++ b/app/template/view/components/modal.vue @@ -10,7 +10,7 @@ import {createupperCamelCaseApi, updateupperCamelCaseApi} from '../api'; import { modalFormProps } from '../config/form'; defineOptions({ - name: 'upperCamelCaseDemo', + name: 'upperCamelCaseDemo', }); const isUpdate = ref(false); @@ -19,44 +19,44 @@ const gridApi = ref(); const [Form, formApi] = useVbenForm(modalFormProps); const [Modal, modalApi] = useVbenModal({ - fullscreenButton: false, - draggable: true, - onCancel() { - modalApi.close(); - }, - onConfirm: async () => { - formApi.validate().then(async (e: any) => { - if (e.valid) { - const values = await formApi.getValues(); - modalApi.setState({ loading: true, confirmLoading: true }); - const submitApi = isUpdate.value ? updateupperCamelCaseApi : createupperCamelCaseApi; - submitApi(values) - .then(() => { - message.success('保存成功'); - gridApi.value?.reload(); - modalApi.close(); - }) - .finally(() => { - modalApi.setState({ loading: false, confirmLoading: false }); - }); - } - }); - await formApi.validateAndSubmitForm(); - }, - onOpenChange(isOpen: boolean) { - gridApi.value = isOpen ? modalApi.getData()?.gridApi : null; - if (isOpen) { - const { values, update } = modalApi.getData>(); - if (values) { - isUpdate.value = update; - formApi.setValues(values); - } - } - }, + fullscreenButton: false, + draggable: true, + onCancel() { + modalApi.close(); + }, + onConfirm: async () => { + formApi.validate().then(async (e: any) => { + if (e.valid) { + const values = await formApi.getValues(); + modalApi.setState({ loading: true, confirmLoading: true }); + const submitApi = isUpdate.value ? updateupperCamelCaseApi : createupperCamelCaseApi; + submitApi(values) + .then(() => { + message.success('保存成功'); + gridApi.value?.reload(); + modalApi.close(); + }) + .finally(() => { + modalApi.setState({ loading: false, confirmLoading: false }); + }); + } + }); + await formApi.validateAndSubmitForm(); + }, + onOpenChange(isOpen: boolean) { + gridApi.value = isOpen ? modalApi.getData()?.gridApi : null; + if (isOpen) { + const { values, update } = modalApi.getData>(); + if (values) { + isUpdate.value = update; + formApi.setValues(values); + } + } + }, }); diff --git a/app/template/view/config/form.ts b/app/template/view/config/form.ts index 50598741..54679303 100644 --- a/app/template/view/config/form.ts +++ b/app/template/view/config/form.ts @@ -1,28 +1,28 @@ import type { VbenFormProps } from '#/adapter/form'; export const modalFormProps: VbenFormProps = { - wrapperClass: 'grid-cols-12', // 24栅格, - commonConfig: { - formItemClass: 'col-span-12', - // 所有表单项 - componentProps: { - class: 'w-full', + wrapperClass: 'grid-cols-12', // 24栅格, + commonConfig: { + formItemClass: 'col-span-12', + // 所有表单项 + componentProps: { + class: 'w-full', + }, }, - }, - // handleSubmit: onSubmit, - layout: 'horizontal', - schema: [ - { - component: 'VbenInput', - fieldName: 'id', - label: 'ID', - formItemClass: 'col-span-6', - dependencies: { - show: false, - triggerFields: ['id'], - }, - }, - // 生成的表单字段 - ], - showDefaultActions: false, + // handleSubmit: onSubmit, + layout: 'horizontal', + schema: [ + { + component: 'VbenInput', + fieldName: 'id', + label: 'ID', + formItemClass: 'col-span-6', + dependencies: { + show: false, + triggerFields: ['id'], + }, + }, + // 生成的表单字段 + ], + showDefaultActions: false, }; diff --git a/app/template/view/config/search.ts b/app/template/view/config/search.ts index eb02cc33..9d80b46f 100644 --- a/app/template/view/config/search.ts +++ b/app/template/view/config/search.ts @@ -3,18 +3,18 @@ import type { VbenFormProps } from '#/adapter/form'; // import dayjs from 'dayjs'; export const formOptions: VbenFormProps = { - // 默认展开 - collapsed: false, - schema: [ - // 生成的搜索字段 - ], - // 控制表单是否显示折叠按钮 - showCollapseButton: true, - submitButtonOptions: { - content: '查询', - }, - // 是否在字段值改变时提交表单 - submitOnChange: true, - // 按下回车时是否提交表单 - submitOnEnter: false, + // 默认展开 + collapsed: false, + schema: [ + // 生成的搜索字段 + ], + // 控制表单是否显示折叠按钮 + showCollapseButton: true, + submitButtonOptions: { + content: '查询', + }, + // 是否在字段值改变时提交表单 + submitOnChange: true, + // 按下回车时是否提交表单 + submitOnEnter: false, }; diff --git a/app/template/view/config/table.ts b/app/template/view/config/table.ts index 5a41861c..3d6a074a 100644 --- a/app/template/view/config/table.ts +++ b/app/template/view/config/table.ts @@ -3,64 +3,64 @@ import type { VxeGridProps } from '#/adapter/vxe-table'; import { getupperCamelCaseListApi } from '../api'; interface RowType { - id: string; - name: string; - logo: string; - introduce: string; - created_at: string; + id: string; + name: string; + logo: string; + introduce: string; + created_at: string; } export const gridOptions: VxeGridProps = { - checkboxConfig: { - highlight: true, - 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, - }); - }, + checkboxConfig: { + highlight: true, + labelField: '', }, - }, - height: 'auto', - border: false, - toolbarConfig: { - // 是否显示搜索表单控制按钮 - // @ts-ignore 正式环境时有完整的类型声明 - search: true, - refresh: true, // 刷新 - print: false, // 打印 - export: false, // 导出 - // custom: true, // 自定义列 - zoom: true, // 最大化最小化 - slots: { - buttons: 'toolbar-buttons', + columnConfig: { + useKey: true, }, - custom: { - // 自定义列-图标 - icon: 'vxe-icon-menu', + rowConfig: { + useKey: true, }, - }, - showOverflow: false, + 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, + }); + }, + }, + }, + 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, };