前端模板

app/template/view/api/index.ts

@@ -0,0 +1,42 @@
+import { requestClient } from '#/api/request';
+
+const prefix = 'dashCase/';
+/**
+ * 分页查询用户列表
+ * @param data
+ */
+export async function getupperCamelCaseList(data: any) {
+  return requestClient.get<any>(`${prefix}list`, { params: data });
+}
+
+/**
+ * 获取模板名称详情
+ * @param id
+ */
+export async function getupperCamelCaseInfo(id: number) {
+  return requestClient.get<any>(`${prefix}detail`, { params: { id } });
+}
+
+/**
+ * 新增模板名称
+ * @param data
+ */
+export async function createupperCamelCase(data: Record<string, any>) {
+  return requestClient.post<any>(`${prefix}create`, data);
+}
+
+/**
+ * 编辑模板名称
+ * @param data
+ */
+export async function updateupperCamelCase(data: Record<string, any>) {
+  return requestClient.post<any>(`${prefix}update`, data);
+}
+
+/**
+ * 删除模板名称
+ * @param data
+ */
+export async function deleteupperCamelCase(data: Record<string, any>) {
+  return requestClient.post<any>(`${prefix}delete`, data);
+}

app/template/view/components/modal.vue

@@ -0,0 +1,62 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { createupperCamelCase, updateupperCamelCase } from '../api';
+import { modalFormProps } from '../config/form';
+
+defineOptions({
+  name: 'upperCamelCaseDemo',
+});
+
+const isUpdate = ref(false);
+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 ? updateupperCamelCase : createupperCamelCase;
+        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>
+</template>

app/template/view/config/form.ts

@@ -0,0 +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',
+    },
+  },
+  // handleSubmit: onSubmit,
+  layout: 'horizontal',
+  schema: [
+      {
+          component: 'VbenInput',
+          fieldName: 'id',
+          label: 'ID',
+          formItemClass: 'col-span-6',
+          dependencies: {
+              show: false,
+              triggerFields: ['id'],
+          },
+      },
+    // 生成的表单字段
+  ],
+  showDefaultActions: false,
+};

app/template/view/config/search.ts

@@ -0,0 +1,20 @@
+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,
+};

app/template/view/config/table.ts

@@ -0,0 +1,66 @@
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { getupperCamelCaseList } from '../api';
+
+interface RowType {
+  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 getupperCamelCaseList({
+          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,
+};

app/template/view/index.vue

@@ -0,0 +1,143 @@
+<script lang="ts" setup>
+// 导入 VxeGridListeners 类型用于定义表格事件监听器
+import type { VxeGridListeners } from '#/adapter/vxe-table';
+
+// 导入 Vue 的 ref 函数用于创建响应式数据
+import { ref } from 'vue';
+
+// 导入 Vben 的公共 UI 组件和 Hook
+import { Page, useVbenModal } from '@vben/common-ui';
+
+// 导入 Ant Design Vue 的组件和消息提示函数
+import { Button, message } from 'ant-design-vue';
+
+// 导入自定义的 VxeGrid Hook 和 TableAction 组件
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { TableAction } from '#/components/table-action';
+
+// 导入删除 API 函数和模态框组件
+import { deleteupperCamelCase } from './api';
+import upperCamelCase from './components/modal.vue';
+
+// 导入搜索表单和表格配置
+import { formOptions } from './config/search';
+import { gridOptions } from './config/table';
+
+// 定义是否显示顶部表格下拉操作的响应式数据
+const hasTopTableDropDownActions = ref(false);
+
+// 定义表格事件监听器
+const gridEvents: VxeGridListeners<any> = {
+  // 监听表格复选框变化事件
+  checkboxChange() {
+    const records = gridApi.grid.getCheckboxRecords();
+    hasTopTableDropDownActions.value = records.length > 0;
+  },
+  // 监听表格全选复选框变化事件
+  checkboxAll() {
+    const records = gridApi.grid.getCheckboxRecords();
+    hasTopTableDropDownActions.value = records.length > 0;
+  },
+};
+
+// 使用自定义的 VxeGrid Hook
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+  gridEvents,
+});
+
+// 使用 Vben 的 Modal Hook
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: upperCamelCase,
+});
+
+// 定义显示模态框的函数
+const showModal = (data = {}, isUpdate = false) => {
+  formModalApi.setData({
+    values: data,
+    update: isUpdate,
+    gridApi,
+  });
+  formModalApi.open();
+};
+
+// 定义删除操作的 API 函数
+const deleteApi = (row: any) => {
+  let ids = [];
+  if (row) {
+    ids.push(row);
+  } else {
+    ids = gridApi.grid.getCheckboxRecords().map((item) => item.id);
+  }
+  deleteupperCamelCase({ ids }).then(() => {
+    message.success('删除成功!');
+    gridApi.reload();
+  });
+};
+</script>
+
+<template>
+  <!-- 使用 Page 组件包裹整个页面 -->
+  <Page auto-content-height title="模板名称管理">
+    <!-- 渲染表单模态框 -->
+    <FormModal />
+    <!-- 渲染表格 -->
+    <Grid>
+      <!-- 定义表格工具栏按钮 -->
+      <template #toolbar-buttons>
+        <TableAction
+          :actions="[
+            {
+              label: '新增',
+              type: 'primary',
+              icon: 'ant-design:plus-outlined',
+              onClick: showModal.bind(null),
+            },
+          ]"
+          :drop-down-actions="[
+            {
+              label: '删除',
+              icon: 'ant-design:delete-outlined',
+              ifShow: hasTopTableDropDownActions,
+              popConfirm: {
+                title: '确定删除吗？',
+                confirm: deleteApi.bind(null, false),
+              },
+            },
+          ]"
+        >
+          <template #more>
+            <Button style="margin-left: 16px">
+              批量操作
+            </Button>
+          </template>
+        </TableAction>
+      </template>
+      <!-- 定义操作列的自定义模板 -->
+      <template #action="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '编辑',
+              type: 'link',
+              icon: 'uil:edit',
+              size: 'small',
+              onClick: showModal.bind(null, row, true),
+            },
+            {
+              label: '删除',
+              type: 'link',
+              icon: 'ant-design:delete-outlined',
+              size: 'small',
+              popConfirm: {
+                title: '确定删除吗？',
+                confirm: deleteApi.bind(null, row.id),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>