Skip to content

phsl / admin

Go to a project
Commit 030ecd31 by zhangjl
Options

重构：错误码管理

parent 2cf384d7
Showing with 304 additions and 173 deletions
src/api/system/errorCode/index.ts
import request from '@/config/axios' import request from '@/config/axios'
export interface ErrorCodeVO { export interface ErrorCodeVO {
id: number id: number | undefined
type: number type: number
applicationName: string applicationName: string
code: number code: number | undefined
message: string message: string
memo: string memo: string
createTime: Date createTime: Date
......
src/views/system/errorCode/errorCode.data.ts deleted 100644 → 0
import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
const { t } = useI18n() // 国际化
// 表单校验
export const rules = reactive({
applicationName: [required],
code: [required],
message: [required]
})
// 新增 + 修改
const crudSchemas = reactive<VxeCrudSchema>({
primaryKey: 'id',
primaryType: 'id',
primaryTitle: '编号',
action: true,
columns: [
{
title: '错误码类型',
field: 'type',
dictType: DICT_TYPE.SYSTEM_ERROR_CODE_TYPE,
dictClass: 'number',
isSearch: true
},
{
title: '应用名',
field: 'applicationName',
isSearch: true
},
{
title: '错误码编码',
field: 'code',
isSearch: true
},
{
title: '错误码错误提示',
field: 'message',
isSearch: true
},
{
title: t('common.createTime'),
field: 'createTime',
formatter: 'formatDate',
isForm: false,
search: {
show: true,
itemRender: {
name: 'XDataTimePicker'
}
}
}
]
})
export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
src/views/system/errorCode/form.vue 0 → 100644
<template>
<Dialog :title="modelTitle" v-model="modelVisible">
<el-form
ref="formRef"
:model="formData"
:rules="formRules"
label-width="100px"
v-loading="formLoading"
>
<el-form-item label="应用名" prop="applicationName">
<el-input v-model="formData.applicationName" placeholder="请输入应用名" clearable />
</el-form-item>
<el-form-item label="错误码编码" prop="code">
<el-input v-model="formData.code" placeholder="请输入错误码编码" clearable />
</el-form-item>
<el-form-item label="错误码提示" prop="message">
<el-input v-model="formData.message" placeholder="请输入错误码提示" clearable />
</el-form-item>
<el-form-item label="备注" prop="memo">
<el-input v-model="formData.memo" placeholder="请输入备注" clearable />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
<el-button @click="modelVisible = false">取 消</el-button>
</div>
</template>
</Dialog>
</template>
<script setup lang="ts">
import * as ErrorCodeApi from '@/api/system/errorCode'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const modelVisible = ref(false) // 弹窗的是否展示
const modelTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
// 表单参数
const formData = ref({
id: undefined,
code: undefined,
applicationName: '',
message: '',
memo: ''
})
// 表单校验
const formRules = reactive({
applicationName: [{ required: true, message: '应用名不能为空', trigger: 'blur' }],
code: [{ required: true, message: '错误码编码不能为空', trigger: 'blur' }],
message: [{ required: true, message: '错误码提示不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref
/** 打开弹窗 */
const openModal = async (type: string, id?: number) => {
modelVisible.value = true
modelTitle.value = t('action.' + type)
formType.value = type
resetForm()
// 修改时，设置数据
if (id) {
formLoading.value = true
try {
formData.value = await ErrorCodeApi.getErrorCodeApi(id)
} finally {
formLoading.value = false
}
}
}
defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
/** 提交按钮 */
const submitForm = async () => {
// 校验表单
if (!formRef) return
const valid = await formRef.value.validate()
if (!valid) return
// 提交请求
formLoading.value = true
try {
const data = formData.value as ErrorCodeApi.ErrorCodeVO
if (formType.value === 'create') {
await ErrorCodeApi.createErrorCodeApi(data)
message.success(t('common.createSuccess'))
} else {
await ErrorCodeApi.updateErrorCodeApi(data)
message.success(t('common.updateSuccess'))
}
modelVisible.value = false
// 发送操作成功的事件
emit('success')
} finally {
formLoading.value = false
}
}
/** 表单重置 */
const resetForm = () => {
formData.value = {
id: undefined,
applicationName: '',
code: undefined,
message: '',
memo: ''
}
formRef.value?.resetFields()
}
</script>
src/views/system/errorCode/index.vue
<template> <template>
<ContentWrap> <!-- 搜索工作栏 -->
<!-- 列表 --> <content-wrap>
<XTable @register="registerTable"> <el-form :model="queryParams" ref="queryFormRef" class="-mb-15px" :inline="true">
<!-- 操作：新增 --> <el-form-item label="错误码类型" prop="type">
<template #toolbar_buttons> <el-select v-model="queryParams.type" placeholder="请选择错误码类型" clearable>
<XButton <el-option
type="primary" v-for="dict in getDictOptions(DICT_TYPE.SYSTEM_ERROR_CODE_TYPE)"
preIcon="ep:zoom-in" :key="dict.value"
:title="t('action.add')" :label="dict.label"
v-hasPermi="['system:error-code:create']" :value="dict.value"
@click="handleCreate()"
/>
</template>
<template #actionbtns_default="{ row }">
<!-- 操作：修改 -->
<XTextButton
preIcon="ep:edit"
:title="t('action.edit')"
v-hasPermi="['system:error-code:update']"
@click="handleUpdate(row.id)"
/> />
<!-- 操作：详情 --> </el-select>
<XTextButton </el-form-item>
preIcon="ep:view" <el-form-item label="应用名" prop="applicationName">
:title="t('action.detail')" <el-input
v-hasPermi="['system:error-code:query']" v-model="queryParams.applicationName"
@click="handleDetail(row.id)" placeholder="请输入应用名"
clearable
@keyup.enter="handleQuery"
/> />
<!-- 操作：删除 --> </el-form-item>
<XTextButton <el-form-item label="错误码编码" prop="code">
preIcon="ep:delete" <el-input
:title="t('action.del')" v-model="queryParams.code"
v-hasPermi="['system:error-code:delete']" placeholder="请输入错误码编码"
@click="deleteData(row.id)" clearable
@keyup.enter="handleQuery"
/> />
</template> </el-form-item>
</XTable> <el-form-item label="错误码提示" prop="message">
</ContentWrap> <el-input
<!-- 弹窗 --> v-model="queryParams.message"
<XModal id="errorCodeModel" v-model="dialogVisible" :title="dialogTitle"> placeholder="请输入错误码提示"
<!-- 对话框(添加 / 修改) --> clearable
<Form @keyup.enter="handleQuery"
v-if="['create', 'update'].includes(actionType)"
:schema="allSchemas.formSchema"
:rules="rules"
ref="formRef"
/> />
<!-- 对话框(详情) --> </el-form-item>
<Descriptions <el-form-item label="创建时间" prop="createTime">
v-if="actionType === 'detail'" <el-date-picker
:schema="allSchemas.detailSchema" v-model="queryParams.createTime"
:data="detailData" value-format="YYYY-MM-DD HH:mm:ss"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
/> />
<template #footer> </el-form-item>
<!-- 按钮：保存 --> <el-form-item>
<XButton <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
v-if="['create', 'update'].includes(actionType)" <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
<el-button
type="primary" type="primary"
:title="t('action.save')" @click="openModal('create')"
:loading="actionLoading" v-hasPermi="['system:error-code:create']"
@click="submitForm()" >
<Icon icon="ep:plus" class="mr-5px" /> 新增
</el-button>
<el-button
type="success"
plain
@click="handleExport"
:loading="exportLoading"
v-hasPermi="['system:error-code:export']"
>
<Icon icon="ep:download" class="mr-5px" /> 导出
</el-button>
</el-form-item>
</el-form>
</content-wrap>
<!-- 列表 -->
<content-wrap>
<el-table v-loading="loading" :data="list">
<el-table-column label="编号" align="center" prop="id" />
<el-table-column label="类型" align="center" prop="type" width="80">
<template #default="scope">
<dict-tag :type="DICT_TYPE.SYSTEM_ERROR_CODE_TYPE" :value="scope.row.type" />
</template>
</el-table-column>
<el-table-column label="应用名" align="center" prop="applicationName" width="200" />
<el-table-column label="错误码编码" align="center" prop="code" width="120" />
<el-table-column label="错误码提示" align="center" prop="message" width="300" />
<el-table-column label="备注" align="center" prop="memo" width="200" />
<el-table-column
label="创建时间"
align="center"
prop="createTime"
width="180"
:formatter="dateFormatter"
/> />
<!-- 按钮：关闭 --> <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<XButton :loading="actionLoading" :title="t('dialog.close')" @click="dialogVisible = false" /> <template #default="scope">
<el-button
link
type="primary"
@click="openModal('update', scope.row.id)"
v-hasPermi="['system:error-code:update']"
>
编辑
</el-button>
<el-button
link
type="danger"
@click="handleDelete(scope.row.id)"
v-hasPermi="['system:error-code:delete']"
>
删除
</el-button>
</template> </template>
</XModal> </el-table-column>
</el-table>
<!-- 分页组件 -->
<pagination
v-show="total > 0"
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</content-wrap>
<!-- 表单弹窗：添加/修改 -->
<error-code-form ref="modalRef" @success="getList" />
</template> </template>
<script setup lang="ts" name="ErrorCode"> <script setup lang="ts" name="ErrorCode">
import type { FormExpose } from '@/components/Form'
// 业务相关的 import
import { rules, allSchemas } from './errorCode.data'
import * as ErrorCodeApi from '@/api/system/errorCode' import * as ErrorCodeApi from '@/api/system/errorCode'
import { DICT_TYPE, getDictOptions } from '@/utils/dict'
const { t } = useI18n() // 国际化 import { dateFormatter } from '@/utils/formatTime'
import ErrorCodeForm from './form.vue'
import download from '@/utils/download'
const message = useMessage() // 消息弹窗 const message = useMessage() // 消息弹窗
// 列表相关的变量 const { t } = useI18n() // 国际化
const [registerTable, { reload, deleteData }] = useXTable({
allSchemas: allSchemas, // 遮罩层
getListApi: ErrorCodeApi.getErrorCodePageApi, const loading = ref(true)
deleteApi: ErrorCodeApi.deleteErrorCodeApi // 导出遮罩层
const exportLoading = ref(false)
// 总条数
const total = ref(0)
// 错误码列表
const list = ref([])
// 查询参数
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
type: undefined,
applicationName: undefined,
code: undefined,
message: undefined,
createTime: []
}) })
// 弹窗相关的变量 // 搜索的表单
const dialogVisible = ref(false) // 是否显示弹出层 const queryFormRef = ref()
const dialogTitle = ref('edit') // 弹出层标题
const actionType = ref('') // 操作按钮的类型
const actionLoading = ref(false) // 按钮 Loading
const formRef = ref<FormExpose>() // 表单 Ref
const detailData = ref() // 详情 Ref
// 设置标题 /** 查询列表 */
const setDialogTile = (type: string) => { const getList = async () => {
dialogTitle.value = t('action.' + type) loading.value = true
actionType.value = type // 执行查询
dialogVisible.value = true try {
const data = await ErrorCodeApi.getErrorCodePageApi(queryParams)
list.value = data.list
total.value = data.total
} finally {
loading.value = false
}
} }
// 新增操作 /** 搜索按钮操作 */
const handleCreate = () => { const handleQuery = () => {
setDialogTile('create') queryParams.pageNo = 1
getList()
} }
// 修改操作 /** 重置按钮操作 */
const handleUpdate = async (rowId: number) => { const resetQuery = () => {
setDialogTile('update') queryFormRef.value.resetFields()
// 设置数据 handleQuery()
const res = await ErrorCodeApi.getErrorCodeApi(rowId)
unref(formRef)?.setValues(res)
} }
// 详情操作 /** 添加/修改操作 */
const handleDetail = async (rowId: number) => { const modalRef = ref()
setDialogTile('detail') const openModal = (type: string, id?: number) => {
// 设置数据 modalRef.value.openModal(type, id)
const res = await ErrorCodeApi.getErrorCodeApi(rowId)
detailData.value = res
} }
// 提交新增/修改的表单 /** 删除按钮操作 */
const submitForm = async () => { const handleDelete = async (id: number) => {
const elForm = unref(formRef)?.getElFormRef()
if (!elForm) return
elForm.validate(async (valid) => {
if (valid) {
actionLoading.value = true
// 提交请求
try { try {
const data = unref(formRef)?.formModel as ErrorCodeApi.ErrorCodeVO // 删除的二次确认
if (actionType.value === 'create') { await message.delConfirm()
await ErrorCodeApi.createErrorCodeApi(data) await ErrorCodeApi.deleteErrorCodeApi(id)
message.success(t('common.createSuccess')) message.success(t('common.delSuccess'))
} else {
await ErrorCodeApi.updateErrorCodeApi(data)
message.success(t('common.updateSuccess'))
}
dialogVisible.value = false
} finally {
actionLoading.value = false
// 刷新列表 // 刷新列表
await reload() await getList()
} } catch {}
}
/** 导出按钮操作 */
const handleExport = async () => {
try {
// 导出的二次确认
await message.exportConfirm()
// 发起导出
exportLoading.value = true
const data = await ErrorCodeApi.excelErrorCodeApi(queryParams)
download.excel(data, '参数配置.xls')
} catch {
} finally {
exportLoading.value = false
} }
})
} }
/** 初始化 **/
onMounted(() => {
getList()
})
</script> </script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment