更新模板

2025-11-28 08:57:36 +08:00
parent e4be2c1326
commit f071fa0cba
5 changed files with 134 additions and 134 deletions
--- 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<any>(`${prefix}list`, { params: data });
+    return requestClient.get<any>(`${prefix}list`, { params: data });
 }

 /**
@@ -21,7 +21,7 @@ export async function getupperCamelCaseOptionApi() {
 * @param id
 */
 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
 */
 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
 */
 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
 */
 export async function deleteupperCamelCaseApi(data: Record<string, any>) {
-  return requestClient.post<any>(`${prefix}delete`, data);
+    return requestClient.post<any>(`${prefix}delete`, data);
 }
--- 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<Record<string, any>>();
-      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<Record<string, any>>();
+            if (values) {
+                isUpdate.value = update;
+                formApi.setValues(values);
+            }
+        }
+    },
 });
 </script>
 <template>
-  <Modal :title="`${isUpdate === true ? '编辑' : '新增'}模板名称`" class="w-[30%]">
-    <Form />
-  </Modal>
+    <Modal :title="`${isUpdate === true ? '编辑' : '新增'}模板名称`" class="w-[30%]">
+        <Form />
+    </Modal>
 </template>
--- 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,
 };
--- 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,
 };
--- 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<RowType> = {
-  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,
 };