123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160 |
- <template>
- <ContentWrap>
- <!-- 列表 -->
- <XTable @register="registerTable">
- <template #toolbar_buttons>
- <!-- 操作:新增 -->
- <XButton
- type="primary"
- preIcon="ep:zoom-in"
- :title="t('action.add')"
- v-hasPermi="['${permissionPrefix}:create']"
- @click="handleCreate()"
- />
- <!-- 操作:导出 -->
- <XButton
- type="warning"
- preIcon="ep:download"
- :title="t('action.export')"
- v-hasPermi="['${permissionPrefix}:export']"
- @click="exportList('${table.classComment}.xls')"
- />
- </template>
- <template #actionbtns_default="{ row }">
- <!-- 操作:修改 -->
- <XTextButton
- preIcon="ep:edit"
- :title="t('action.edit')"
- v-hasPermi="['${permissionPrefix}:update']"
- @click="handleUpdate(row.id)"
- />
- <!-- 操作:详情 -->
- <XTextButton
- preIcon="ep:view"
- :title="t('action.detail')"
- v-hasPermi="['${permissionPrefix}:query']"
- @click="handleDetail(row.id)"
- />
- <!-- 操作:删除 -->
- <XTextButton
- preIcon="ep:delete"
- :title="t('action.del')"
- v-hasPermi="['${permissionPrefix}:delete']"
- @click="deleteData(row.id)"
- />
- </template>
- </XTable>
- </ContentWrap>
- <!-- 弹窗 -->
- <XModal id="${classNameVar}Model" :loading="modelLoading" v-model="modelVisible" :title="modelTitle">
- <!-- 表单:添加/修改 -->
- <Form
- ref="formRef"
- v-if="['create', 'update'].includes(actionType)"
- :schema="allSchemas.formSchema"
- :rules="rules"
- />
- <!-- 表单:详情 -->
- <Descriptions
- v-if="actionType === 'detail'"
- :schema="allSchemas.detailSchema"
- :data="detailData"
- />
- <template #footer>
- <!-- 按钮:保存 -->
- <XButton
- v-if="['create', 'update'].includes(actionType)"
- type="primary"
- :title="t('action.save')"
- :loading="actionLoading"
- @click="submitForm()"
- />
- <!-- 按钮:关闭 -->
- <XButton :loading="actionLoading" :title="t('dialog.close')" @click="modelVisible = false" />
- </template>
- </XModal>
- </template>
- <script setup lang="ts" name="${simpleClassName}">
- import { FormExpose } from '@/components/Form'
- // 业务相关的 import
- import { rules, allSchemas } from './${classNameVar}.data'
- import * as ${simpleClassName}Api from '@/api/${table.moduleName}/${classNameVar}'
- const { t } = useI18n() // 国际化
- const message = useMessage() // 消息弹窗
- // 列表相关的变量
- const [registerTable, { reload, deleteData, exportList }] = useXTable({
- allSchemas: allSchemas,
- getListApi: ${simpleClassName}Api.get${simpleClassName}PageApi,
- deleteApi: ${simpleClassName}Api.delete${simpleClassName}Api,
- exportListApi: ${simpleClassName}Api.export${simpleClassName}Api
- })
- // 弹窗相关的变量
- const modelVisible = ref(false) // 是否显示弹出层
- const modelTitle = ref('edit') // 弹出层标题
- const modelLoading = ref(false) // 弹出层loading
- const actionType = ref('') // 操作按钮的类型
- const actionLoading = ref(false) // 按钮 Loading
- const formRef = ref<FormExpose>() // 表单 Ref
- const detailData = ref() // 详情 Ref
- // 设置标题
- const setDialogTile = (type: string) => {
- modelLoading.value = true
- modelTitle.value = t('action.' + type)
- actionType.value = type
- modelVisible.value = true
- }
- // 新增操作
- const handleCreate = () => {
- setDialogTile('create')
- modelLoading.value = false
- }
- // 修改操作
- const handleUpdate = async (rowId: number) => {
- setDialogTile('update')
- // 设置数据
- const res = await ${simpleClassName}Api.get${simpleClassName}Api(rowId)
- unref(formRef)?.setValues(res)
- modelLoading.value = false
- }
- // 详情操作
- const handleDetail = async (rowId: number) => {
- setDialogTile('detail')
- const res = await ${simpleClassName}Api.get${simpleClassName}Api(rowId)
- detailData.value = res
- modelLoading.value = false
- }
- // 提交按钮
- const submitForm = async () => {
- const elForm = unref(formRef)?.getElFormRef()
- if (!elForm) return
- elForm.validate(async (valid) => {
- if (valid) {
- actionLoading.value = true
- // 提交请求
- try {
- const data = unref(formRef)?.formModel as ${simpleClassName}Api.${simpleClassName}VO
- if (actionType.value === 'create') {
- await ${simpleClassName}Api.create${simpleClassName}Api(data)
- message.success(t('common.createSuccess'))
- } else {
- await ${simpleClassName}Api.update${simpleClassName}Api(data)
- message.success(t('common.updateSuccess'))
- }
- modelVisible.value = false
- } finally {
- actionLoading.value = false
- // 刷新列表
- await reload()
- }
- }
- })
- }
- </script>
|