代码下载接口

2025-05-13 13:16:59 +08:00
parent 636fc411d2
commit a764794a5f
8 changed files with 206 additions and 183 deletions
--- a/app/template/view/api/index.ts
+++ b/app/template/view/api/index.ts
@@ -2,10 +2,10 @@ import { requestClient } from '#/api/request';

 const prefix = 'dashCase/';
 /**
- * 分页查询用户列表
+ * 分页查询模板名称列表
 * @param data
 */
-export async function getupperCamelCaseList(data: any) {
+export async function getupperCamelCaseListApi(data: any) {
  return requestClient.get<any>(`${prefix}list`, { params: data });
 }

@@ -13,7 +13,7 @@ export async function getupperCamelCaseList(data: any) {
 * 获取模板名称详情
 * @param id
 */
-export async function getupperCamelCaseInfo(id: number) {
+export async function getupperCamelCaseInfoApi(id: number) {
  return requestClient.get<any>(`${prefix}detail`, { params: { id } });
 }

@@ -21,7 +21,7 @@ export async function getupperCamelCaseInfo(id: number) {
 * 新增模板名称
 * @param data
 */
-export async function createupperCamelCase(data: Record<string, any>) {
+export async function createupperCamelCaseApi(data: Record<string, any>) {
  return requestClient.post<any>(`${prefix}create`, data);
 }

@@ -29,7 +29,7 @@ export async function createupperCamelCase(data: Record<string, any>) {
 * 编辑模板名称
 * @param data
 */
-export async function updateupperCamelCase(data: Record<string, any>) {
+export async function updateupperCamelCaseApi(data: Record<string, any>) {
  return requestClient.post<any>(`${prefix}update`, data);
 }

@@ -37,6 +37,6 @@ export async function updateupperCamelCase(data: Record<string, any>) {
 * 删除模板名称
 * @param data
 */
-export async function deleteupperCamelCase(data: Record<string, any>) {
+export async function deleteupperCamelCaseApi(data: Record<string, any>) {
  return requestClient.post<any>(`${prefix}delete`, data);
 }
--- a/app/template/view/components/modal.vue
+++ b/app/template/view/components/modal.vue
@@ -6,7 +6,7 @@ import { useVbenModal } from '@vben/common-ui';
 import { message } from 'ant-design-vue';

 import { useVbenForm } from '#/adapter/form';
-import { createupperCamelCase, updateupperCamelCase } from '../api';
+import {createupperCamelCaseApi, updateupperCamelCaseApi} from '../api';
 import { modalFormProps } from '../config/form';

 defineOptions({
@@ -29,7 +29,7 @@ const [Modal, modalApi] = useVbenModal({
      if (e.valid) {
        const values = await formApi.getValues();
        modalApi.setState({ loading: true, confirmLoading: true });
-        const submitApi = isUpdate.value ? updateupperCamelCase : createupperCamelCase;
+        const submitApi = isUpdate.value ? updateupperCamelCaseApi : createupperCamelCaseApi;
        submitApi(values)
          .then(() => {
            message.success('保存成功');
--- a/app/template/view/config/table.ts
+++ b/app/template/view/config/table.ts
@@ -1,6 +1,6 @@
 import type { VxeGridProps } from '#/adapter/vxe-table';

-import { getupperCamelCaseList } from '../api';
+import { getupperCamelCaseListApi } from '../api';

 interface RowType {
  id: string;
@@ -35,7 +35,7 @@ export const gridOptions: VxeGridProps<RowType> = {
    ajax: {
      // 请求后端接口方法
      query: async ({ page }, formValues) => {
-        return await getupperCamelCaseList({
+        return await getupperCamelCaseListApi({
          page: page.currentPage,
          pageSize: page.pageSize,
          ...formValues,
--- a/app/template/view/index.vue
+++ b/app/template/view/index.vue
@@ -1,93 +1,74 @@
 <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';
+import { Button, Image, 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 { deleteupperCamelCaseApi } from './api';
+import FormModalDemo 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;
-  },
+    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,
+    formOptions,
+    gridOptions,
+    gridEvents,
 });

-// 使用 Vben 的 Modal Hook
 const [FormModal, formModalApi] = useVbenModal({
-  connectedComponent: upperCamelCase,
+    connectedComponent: FormModalDemo,
 });

-// 定义显示模态框的函数
 const showModal = (data = {}, isUpdate = false) => {
-  formModalApi.setData({
-    values: data,
-    update: isUpdate,
-    gridApi,
-  });
-  formModalApi.open();
+    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();
-  });
+const hasDelete = (row: any) => {
+    let ids = [];
+    if (row) {
+        ids.push(row);
+    } else {
+        ids = gridApi.grid.getCheckboxRecords().map((item) => item.id);
+    }
+    deleteupperCamelCaseApi({ ids }).then(() => {
+        message.success('删除成功!');
+        gridApi.reload();
+    });
 };
 </script>

 <template>
-  <!-- 使用 Page 组件包裹整个页面 -->
-  <Page auto-content-height title="模板名称管理">
-    <!-- 渲染表单模态框 -->
-    <FormModal />
-    <!-- 渲染表格 -->
-    <Grid>
-      <!-- 定义表格工具栏按钮 -->
-      <template #toolbar-buttons>
-        <TableAction
-          :actions="[
+    <Page auto-content-height title="模板名称管理">
+        <FormModal />
+        <Grid>
+            <template #toolbar-buttons>
+                <TableAction
+                    :actions="[
            {
              label: '新增',
              type: 'primary',
@@ -95,49 +76,55 @@ const deleteApi = (row: any) => {
              onClick: showModal.bind(null),
            },
          ]"
-          :drop-down-actions="[
+                    :drop-down-actions="[
            {
              label: '删除',
              icon: 'ant-design:delete-outlined',
              ifShow: hasTopTableDropDownActions,
              popConfirm: {
                title: '确定删除吗？',
-                confirm: deleteApi.bind(null, false),
+                confirm: hasDelete.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 #more>
+                        <Button style="margin-left: 16px">
+                            批量操作
+                        </Button>
+                    </template>
+                </TableAction>
+            </template>
+            <template #avatar="{ row }">
+                <Image :src="row.avatar" height="30" width="30" />
+            </template>
+            <template #toolbar-tools></template>
+            <template #action="{ row }">
+                <TableAction
+                    :actions="[
+                        {
+                          label: '编辑',
+                          type: 'link',
+                          icon: 'uil:edit',
+                          size: 'small',
+                          // auth: ['admin', 'sys:role:detail'],
+                          onClick: showModal.bind(null, row, true),
+                        },
+                        {
+                          label: '删除',
+                          type: 'link',
+                          icon: 'ant-design:delete-outlined',
+                          size: 'small',
+                          // auth: ['admin', 'sys:role:detail'],
+                          popConfirm: {
+                            title: '确定删除吗？',
+                            confirm: hasDelete.bind(null, row.id),
+                          },
+                        },
+                      ]"
+                    :drop-down-actions="[]"
+                />
+            </template>
+        </Grid>
+    </Page>
 </template>