| 提交 | 用户 | 时间 | ||
| e7c126 | 1 | <template> |
| H | 2 | <!-- 搜索工作栏 --> |
| 3 | <ContentWrap> | |
| 4 | <Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams"> | |
| 5 | <!-- 新增等操作按钮 --> | |
| 6 | <template #actionMore> | |
| 7 | <el-button | |
| 8 | type="primary" | |
| 9 | plain | |
| 10 | @click="openForm('create')" | |
| 11 | v-hasPermi="['${permissionPrefix}:create']" | |
| 12 | > | |
| 13 | <Icon icon="ep:plus" class="mr-5px" /> 新增 | |
| 14 | </el-button> | |
| 15 | </template> | |
| 16 | </Search> | |
| 17 | </ContentWrap> | |
| 18 | ||
| 19 | <!-- 列表 --> | |
| 20 | <ContentWrap> | |
| 21 | <Table | |
| 22 | :columns="allSchemas.tableColumns" | |
| 23 | :data="tableObject.tableList" | |
| 24 | :loading="tableObject.loading" | |
| 25 | :pagination="{ | |
| 26 | total: tableObject.total | |
| 27 | }" | |
| 28 | v-model:pageSize="tableObject.pageSize" | |
| 29 | v-model:currentPage="tableObject.currentPage" | |
| 30 | > | |
| 31 | <template #action="{ row }"> | |
| 32 | <el-button | |
| 33 | link | |
| 34 | type="primary" | |
| 35 | @click="openForm('update', row.id)" | |
| 36 | v-hasPermi="['${permissionPrefix}:update']" | |
| 37 | > | |
| 38 | 编辑 | |
| 39 | </el-button> | |
| 40 | <el-button | |
| 41 | link | |
| 42 | type="danger" | |
| 43 | v-hasPermi="['${permissionPrefix}:delete']" | |
| 44 | @click="handleDelete(row.id)" | |
| 45 | > | |
| 46 | 删除 | |
| 47 | </el-button> | |
| 48 | </template> | |
| 49 | </Table> | |
| 50 | </ContentWrap> | |
| 51 | ||
| 52 | <!-- 表单弹窗：添加/修改 --> | |
| 53 | <${simpleClassName}Form ref="formRef" @success="getList" /> | |
| 54 | </template> | |
| 55 | <script setup lang="ts" name="${table.className}"> | |
| 56 | import { allSchemas } from './${classNameVar}.data' | |
| 57 | import * as ${simpleClassName}Api from '@/api/${table.moduleName}/${table.businessName}' | |
| 58 | import ${simpleClassName}Form from './${simpleClassName}Form.vue' | |
| 59 | ||
| 60 | // tableObject：表格的属性对象，可获得分页大小、条数等属性 | |
| 61 | // tableMethods：表格的操作对象，可进行获得分页、删除记录等操作 | |
| 62 | // 详细可见：https://doc.iocoder.cn/vue3/crud-schema/ | |
| 63 | const { tableObject, tableMethods } = useTable({ | |
| 64 | getListApi: ${simpleClassName}Api.get${simpleClassName}Page, // 分页接口 | |
| 65 | delListApi: ${simpleClassName}Api.delete${simpleClassName} // 删除接口 | |
| 66 | }) | |
| 67 | // 获得表格的各种操作 | |
| 68 | const { getList, setSearchParams } = tableMethods | |
| 69 | ||
| 70 | /** 添加/修改操作 */ | |
| 71 | const formRef = ref() | |
| 72 | const openForm = (type: string, id?: number) => { | |
| 73 | formRef.value.open(type, id) | |
| 74 | } | |
| 75 | ||
| 76 | /** 删除按钮操作 */ | |
| 77 | const handleDelete = (id: number) => { | |
| 78 | tableMethods.delList(id, false) | |
| 79 | } | |
| 80 | ||
| 81 | /** 初始化 **/ | |
| 82 | onMounted(() => { | |
| 83 | getList() | |
| 84 | }) | |
| 85 | </script> | |
