perf: vxe
xingyu4j
parent
94527ae9ae
commit
725cc4e41b
|
|
@ -5,7 +5,7 @@ import axios, {
|
|||
AxiosResponse,
|
||||
AxiosError
|
||||
} from 'axios'
|
||||
import { useMessage } from '@/hooks/web/useMessage'
|
||||
import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'
|
||||
import qs from 'qs'
|
||||
import { config } from '@/config/axios/config'
|
||||
import { getAccessToken, getRefreshToken, getTenantId, removeToken, setToken } from '@/utils/auth'
|
||||
|
|
@ -17,7 +17,6 @@ import { useCache } from '@/hooks/web/useCache'
|
|||
const tenantEnable = import.meta.env.VITE_APP_TENANT_ENABLE
|
||||
const { result_code, base_url, request_timeout } = config
|
||||
|
||||
const message = useMessage()
|
||||
// 需要忽略的提示。忽略后，自动 Promise.reject('error')
|
||||
const ignoreMsgs = [
|
||||
'无效的刷新令牌', // 刷新令牌被删除时，不用提示
|
||||
|
|
@ -30,6 +29,8 @@ export const isRelogin = { show: false }
|
|||
let requestList: any[] = []
|
||||
// 是否正在刷新中
|
||||
let isRefreshToken = false
|
||||
// 请求白名单，无须token的接口
|
||||
const whiteList: string[] = ['/login', '/refresh-token']
|
||||
|
||||
// 创建axios实例
|
||||
const service: AxiosInstance = axios.create({
|
||||
|
|
@ -42,14 +43,20 @@ const service: AxiosInstance = axios.create({
|
|||
service.interceptors.request.use(
|
||||
(config: AxiosRequestConfig) => {
|
||||
// 是否需要设置 token
|
||||
const isToken = (config!.headers || {}).isToken === false
|
||||
let isToken = (config!.headers || {}).isToken === false
|
||||
whiteList.some((v) => {
|
||||
if (config.url) {
|
||||
config.url.indexOf(v) > -1
|
||||
return (isToken = false)
|
||||
}
|
||||
})
|
||||
if (getAccessToken() && !isToken) {
|
||||
;(config as Recordable).headers.Authorization = 'Bearer ' + getAccessToken() // 让每个请求携带自定义token
|
||||
}
|
||||
// 设置租户
|
||||
if (tenantEnable && tenantEnable === 'true') {
|
||||
const tenantId = getTenantId()
|
||||
if (tenantId) (config as Recordable).headers.common['tenant-id'] = tenantId
|
||||
if (tenantId) (config as Recordable).headers['tenant-id'] = tenantId
|
||||
}
|
||||
const params = config.params || {}
|
||||
const data = config.data || false
|
||||
|
|
@ -157,10 +164,10 @@ service.interceptors.response.use(
|
|||
})
|
||||
}
|
||||
} else if (code === 500) {
|
||||
message.error(t('sys.api.errMsg500'))
|
||||
ElMessage.error(t('sys.api.errMsg500'))
|
||||
return Promise.reject(new Error(msg))
|
||||
} else if (code === 901) {
|
||||
message.error(
|
||||
ElMessage.error(
|
||||
'<div>' +
|
||||
t('sys.api.errMsg901') +
|
||||
'</div>' +
|
||||
|
|
@ -175,7 +182,7 @@ service.interceptors.response.use(
|
|||
// hard coding：忽略这个提示，直接登出
|
||||
console.log(msg)
|
||||
} else {
|
||||
message.notifyError(msg)
|
||||
ElNotification.error({ title: msg })
|
||||
}
|
||||
return Promise.reject('error')
|
||||
} else {
|
||||
|
|
@ -184,16 +191,16 @@ service.interceptors.response.use(
|
|||
},
|
||||
(error: AxiosError) => {
|
||||
console.log('err' + error) // for debug
|
||||
let { message: msg } = error
|
||||
let { message } = error
|
||||
const { t } = useI18n()
|
||||
if (msg === 'Network Error') {
|
||||
msg = t('sys.api.errorMessage')
|
||||
} else if (msg.includes('timeout')) {
|
||||
msg = t('sys.api.apiTimeoutMessage')
|
||||
} else if (msg.includes('Request failed with status code')) {
|
||||
msg = t('sys.api.apiRequestFailed') + msg.substr(msg.length - 3)
|
||||
if (message === 'Network Error') {
|
||||
message = t('sys.api.errorMessage')
|
||||
} else if (message.includes('timeout')) {
|
||||
message = t('sys.api.apiTimeoutMessage')
|
||||
} else if (message.includes('Request failed with status code')) {
|
||||
message = t('sys.api.apiRequestFailed') + message.substr(message.length - 3)
|
||||
}
|
||||
message.error(msg)
|
||||
ElMessage.error(message)
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
|
@ -205,8 +212,11 @@ const handleAuthorized = () => {
|
|||
const { t } = useI18n()
|
||||
if (!isRelogin.show) {
|
||||
isRelogin.show = true
|
||||
message
|
||||
.confirm(t('sys.api.timeoutMessage'))
|
||||
ElMessageBox.confirm(t('sys.api.timeoutMessage'), t('common.confirmTitle'), {
|
||||
confirmButtonText: t('login.relogin'),
|
||||
cancelButtonText: t('common.cancel'),
|
||||
type: 'warning'
|
||||
})
|
||||
.then(() => {
|
||||
const { wsCache } = useCache()
|
||||
resetRouter() // 重置静态路由表
|
||||
|
|
|
|||
|
|
@ -14,7 +14,15 @@ import { VxeTableColumn } from '@/types/table'
|
|||
import { FormSchema } from '@/types/form'
|
||||
import { ComponentOptions } from '@/types/components'
|
||||
|
||||
export type VxeCrudSchema = Omit<VxeTableColumn, 'children'> & {
|
||||
export type VxeCrudSchema = {
|
||||
// 主键ID
|
||||
primaryKey?: string
|
||||
primaryType?: VxeColumnPropTypes.Type
|
||||
// 是否开启操作栏插槽
|
||||
action?: boolean
|
||||
columns: VxeCrudColumns[]
|
||||
}
|
||||
type VxeCrudColumns = Omit<VxeTableColumn, 'children'> & {
|
||||
field: string
|
||||
title?: string
|
||||
formatter?: VxeColumnPropTypes.Formatter
|
||||
|
|
@ -23,7 +31,7 @@ export type VxeCrudSchema = Omit<VxeTableColumn, 'children'> & {
|
|||
form?: CrudFormParams
|
||||
detail?: CrudDescriptionsParams
|
||||
print?: CrudPrintParams
|
||||
children?: VxeCrudSchema[]
|
||||
children?: VxeCrudColumns[]
|
||||
dictType?: string
|
||||
}
|
||||
type CrudSearchParams = {
|
||||
|
|
@ -61,7 +69,7 @@ export type VxeAllSchemas = {
|
|||
|
||||
// 过滤所有结构
|
||||
export const useVxeCrudSchemas = (
|
||||
crudSchema: VxeCrudSchema[]
|
||||
crudSchema: VxeCrudSchema
|
||||
): {
|
||||
allSchemas: VxeAllSchemas
|
||||
} => {
|
||||
|
|
@ -95,10 +103,10 @@ export const useVxeCrudSchemas = (
|
|||
}
|
||||
|
||||
// 过滤 Search 结构
|
||||
const filterSearchSchema = (crudSchema: VxeCrudSchema[]): VxeFormItemProps[] => {
|
||||
const filterSearchSchema = (crudSchema: VxeCrudSchema): VxeFormItemProps[] => {
|
||||
const searchSchema: VxeFormItemProps[] = []
|
||||
const { t } = useI18n()
|
||||
eachTree(crudSchema, (schemaItem: VxeCrudSchema) => {
|
||||
eachTree(crudSchema.columns, (schemaItem: VxeCrudColumns) => {
|
||||
// 判断是否显示
|
||||
if (schemaItem?.search?.show) {
|
||||
let itemRenderName = schemaItem?.search?.itemRender?.name || '$input'
|
||||
|
|
@ -154,9 +162,20 @@ const filterSearchSchema = (crudSchema: VxeCrudSchema[]): VxeFormItemProps[] =>
|
|||
}
|
||||
|
||||
// 过滤 table 结构
|
||||
const filterTableSchema = (crudSchema: VxeCrudSchema[]): VxeGridPropTypes.Columns => {
|
||||
const filterTableSchema = (crudSchema: VxeCrudSchema): VxeGridPropTypes.Columns => {
|
||||
const { t } = useI18n()
|
||||
const tableSchema: VxeGridPropTypes.Columns = []
|
||||
eachTree(crudSchema, (schemaItem: VxeCrudSchema) => {
|
||||
// 主键ID
|
||||
if (crudSchema.primaryKey) {
|
||||
const tableSchemaItem = {
|
||||
title: t('common.index'),
|
||||
field: crudSchema.primaryKey,
|
||||
type: crudSchema.primaryType ? crudSchema.primaryType : 'seq',
|
||||
width: '50px'
|
||||
}
|
||||
tableSchema.push(tableSchemaItem)
|
||||
}
|
||||
eachTree(crudSchema.columns, (schemaItem: VxeCrudColumns) => {
|
||||
// 判断是否显示
|
||||
if (schemaItem?.table?.show !== false) {
|
||||
const tableSchemaItem = {
|
||||
|
|
@ -167,6 +186,12 @@ const filterTableSchema = (crudSchema: VxeCrudSchema[]): VxeGridPropTypes.Column
|
|||
if (schemaItem?.formatter) {
|
||||
tableSchemaItem.formatter = schemaItem.formatter
|
||||
}
|
||||
if (schemaItem?.dictType) {
|
||||
tableSchemaItem.cellRender = {
|
||||
name: 'XDict',
|
||||
content: schemaItem.dictType
|
||||
}
|
||||
}
|
||||
|
||||
// 删除不必要的字段
|
||||
delete tableSchemaItem.show
|
||||
|
|
@ -174,14 +199,26 @@ const filterTableSchema = (crudSchema: VxeCrudSchema[]): VxeGridPropTypes.Column
|
|||
tableSchema.push(tableSchemaItem)
|
||||
}
|
||||
})
|
||||
// 操作栏插槽
|
||||
if (crudSchema.action && crudSchema.action == true) {
|
||||
const tableSchemaItem = {
|
||||
title: t('table.action'),
|
||||
field: 'actionbtns',
|
||||
width: '240px',
|
||||
slots: {
|
||||
default: 'actionbtns_default'
|
||||
}
|
||||
}
|
||||
tableSchema.push(tableSchemaItem)
|
||||
}
|
||||
return tableSchema
|
||||
}
|
||||
|
||||
// 过滤 form 结构
|
||||
const filterFormSchema = (crudSchema: VxeCrudSchema[]): FormSchema[] => {
|
||||
const filterFormSchema = (crudSchema: VxeCrudSchema): FormSchema[] => {
|
||||
const formSchema: FormSchema[] = []
|
||||
|
||||
eachTree(crudSchema, (schemaItem: VxeCrudSchema) => {
|
||||
eachTree(crudSchema.columns, (schemaItem: VxeCrudColumns) => {
|
||||
// 判断是否显示
|
||||
if (schemaItem?.form?.show !== false) {
|
||||
let component = schemaItem?.form?.component || 'Input'
|
||||
|
|
@ -216,10 +253,10 @@ const filterFormSchema = (crudSchema: VxeCrudSchema[]): FormSchema[] => {
|
|||
}
|
||||
|
||||
// 过滤 descriptions 结构
|
||||
const filterDescriptionsSchema = (crudSchema: VxeCrudSchema[]): DescriptionsSchema[] => {
|
||||
const filterDescriptionsSchema = (crudSchema: VxeCrudSchema): DescriptionsSchema[] => {
|
||||
const descriptionsSchema: DescriptionsSchema[] = []
|
||||
|
||||
eachTree(crudSchema, (schemaItem: VxeCrudSchema) => {
|
||||
eachTree(crudSchema.columns, (schemaItem: VxeCrudColumns) => {
|
||||
// 判断是否显示
|
||||
if (schemaItem?.detail?.show !== false) {
|
||||
const descriptionsSchemaItem = {
|
||||
|
|
@ -239,10 +276,10 @@ const filterDescriptionsSchema = (crudSchema: VxeCrudSchema[]): DescriptionsSche
|
|||
}
|
||||
|
||||
// 过滤 打印 结构
|
||||
const filterPrintSchema = (crudSchema: VxeCrudSchema[]): any[] => {
|
||||
const filterPrintSchema = (crudSchema: VxeCrudSchema): any[] => {
|
||||
const printSchema: any[] = []
|
||||
|
||||
eachTree(crudSchema, (schemaItem: VxeCrudSchema) => {
|
||||
eachTree(crudSchema.columns, (schemaItem: VxeCrudColumns) => {
|
||||
// 判断是否显示
|
||||
if (schemaItem?.print?.show !== false) {
|
||||
const printSchemaItem = {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { App, unref } from 'vue'
|
||||
import 'xe-utils'
|
||||
import XEUtils from 'xe-utils'
|
||||
import './renderer'
|
||||
import { i18n } from '@/plugins/vueI18n'
|
||||
import zhCN from 'vxe-table/es/locale/lang/zh-CN'
|
||||
import enUS from 'vxe-table/lib/locale/lang/en-US'
|
||||
|
|
@ -138,6 +139,10 @@ VXETable.formats.mixin({
|
|||
formatDate({ cellValue }, format) {
|
||||
return XEUtils.toDateString(cellValue, format || 'yyyy-MM-dd HH:mm:ss')
|
||||
},
|
||||
// 格式字典
|
||||
formatDict() {
|
||||
return 'cellValue 123'
|
||||
},
|
||||
// 四舍五入金额，每隔3位逗号分隔，默认2位数
|
||||
formatAmount({ cellValue }, digits = 2) {
|
||||
return XEUtils.commafy(Number(cellValue), { digits })
|
||||
|
|
|
|||
|
|
@ -0,0 +1,12 @@
|
|||
import { DictTag } from '@/components/DictTag'
|
||||
import { VXETable } from 'vxe-table'
|
||||
|
||||
// 创建一个简单的超链接渲染
|
||||
VXETable.renderer.add('XDict', {
|
||||
// 默认显示模板
|
||||
renderDefault(renderOpts, params) {
|
||||
const { row, column } = params
|
||||
const { content } = renderOpts
|
||||
return <DictTag type={content as unknown as string} value={row[column.field]}></DictTag>
|
||||
}
|
||||
})
|
||||
|
|
@ -0,0 +1 @@
|
|||
import './dict'
|
||||
|
|
@ -2,9 +2,8 @@ import { reactive } from 'vue'
|
|||
import { required } from '@/utils/formRules'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import { DICT_TYPE } from '@/utils/dict'
|
||||
import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
|
||||
// 国际化
|
||||
const { t } = useI18n()
|
||||
import { VxeCrudSchema, useVxeCrudSchemas } from '@/hooks/web/useVxeCrudSchemas'
|
||||
const { t } = useI18n() // 国际化
|
||||
// 表单校验
|
||||
export const rules = reactive({
|
||||
applicationName: [required],
|
||||
|
|
@ -12,71 +11,45 @@ export const rules = reactive({
|
|||
message: [required]
|
||||
})
|
||||
// 新增 + 修改
|
||||
const crudSchemas = reactive<CrudSchema[]>([
|
||||
{
|
||||
label: t('common.index'),
|
||||
field: 'id',
|
||||
type: 'index',
|
||||
form: {
|
||||
show: false
|
||||
const crudSchemas = reactive<VxeCrudSchema>({
|
||||
primaryKey: 'id',
|
||||
primaryType: 'seq',
|
||||
action: true,
|
||||
columns: [
|
||||
{
|
||||
title: '错误码类型',
|
||||
field: 'type',
|
||||
dictType: DICT_TYPE.SYSTEM_ERROR_CODE_TYPE,
|
||||
search: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
detail: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '错误码类型',
|
||||
field: 'type',
|
||||
component: 'InputNumber',
|
||||
dictType: DICT_TYPE.SYSTEM_ERROR_CODE_TYPE,
|
||||
search: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '应用名',
|
||||
field: 'applicationName',
|
||||
search: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '错误码编码',
|
||||
field: 'code',
|
||||
search: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '错误码错误提示',
|
||||
field: 'message'
|
||||
},
|
||||
{
|
||||
label: t('common.createTime'),
|
||||
field: 'createTime',
|
||||
form: {
|
||||
show: false
|
||||
{
|
||||
title: '应用名',
|
||||
field: 'applicationName',
|
||||
search: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
search: {
|
||||
show: true,
|
||||
component: 'DatePicker',
|
||||
componentProps: {
|
||||
type: 'daterange',
|
||||
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||
defaultTime: [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)]
|
||||
{
|
||||
title: '错误码编码',
|
||||
field: 'code',
|
||||
search: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '错误码错误提示',
|
||||
field: 'message'
|
||||
},
|
||||
{
|
||||
title: t('common.createTime'),
|
||||
field: 'createTime',
|
||||
formatter: 'formatDate',
|
||||
form: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'action',
|
||||
width: '240px',
|
||||
label: t('table.action'),
|
||||
form: {
|
||||
show: false
|
||||
},
|
||||
detail: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
])
|
||||
export const { allSchemas } = useCrudSchemas(crudSchemas)
|
||||
]
|
||||
})
|
||||
export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
|
||||
|
|
|
|||
|
|
@ -1,30 +1,114 @@
|
|||
<template>
|
||||
<ContentWrap>
|
||||
<vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar">
|
||||
<template #toolbar_buttons>
|
||||
<XButton
|
||||
type="primary"
|
||||
preIcon="ep:zoom-in"
|
||||
:title="t('action.add')"
|
||||
v-hasPermi="['system:error-code:create']"
|
||||
@click="handleCreate()"
|
||||
/>
|
||||
</template>
|
||||
<template #createTime_item="{ data }">
|
||||
<el-date-picker
|
||||
v-model="data.createTime"
|
||||
type="datetimerange"
|
||||
range-separator="-"
|
||||
:start-placeholder="t('common.startTimeText')"
|
||||
:end-placeholder="t('common.endTimeText')"
|
||||
/>
|
||||
</template>
|
||||
<template #type_default="{ row }">
|
||||
<DictTag :type="DICT_TYPE.COMMON_STATUS" :value="row.status" />
|
||||
</template>
|
||||
<template #actionbtns_default="{ row }">
|
||||
<XTextButton
|
||||
preIcon="ep:edit"
|
||||
:title="t('action.edit')"
|
||||
v-hasPermi="['system:error-code:update']"
|
||||
@click="handleUpdate(row.id)"
|
||||
/>
|
||||
<XTextButton
|
||||
preIcon="ep:view"
|
||||
:title="t('action.detail')"
|
||||
v-hasPermi="['system:error-code:update']"
|
||||
@click="handleDetail(row)"
|
||||
/>
|
||||
<XTextButton
|
||||
preIcon="ep:delete"
|
||||
:title="t('action.del')"
|
||||
v-hasPermi="['system:error-code:delete']"
|
||||
@click="handleDelete(row.id)"
|
||||
/>
|
||||
</template>
|
||||
</vxe-grid>
|
||||
</ContentWrap>
|
||||
<XModal id="errorCodeModel" v-model="dialogVisible" :title="dialogTitle">
|
||||
<template #default>
|
||||
<!-- 对话框(添加 / 修改) -->
|
||||
<Form
|
||||
v-if="['create', 'update'].includes(actionType)"
|
||||
:schema="allSchemas.formSchema"
|
||||
:rules="rules"
|
||||
ref="formRef"
|
||||
/>
|
||||
<!-- 对话框(详情) -->
|
||||
<Descriptions
|
||||
v-if="actionType === 'detail'"
|
||||
:schema="allSchemas.detailSchema"
|
||||
:data="detailRef"
|
||||
>
|
||||
<template #type="{ row }">
|
||||
<DictTag :type="DICT_TYPE.SYSTEM_ERROR_CODE_TYPE" :value="row.type" />
|
||||
</template>
|
||||
<template #createTime="{ row }">
|
||||
<span>{{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
|
||||
</template>
|
||||
</Descriptions>
|
||||
</template>
|
||||
<!-- 操作按钮 -->
|
||||
<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="dialogVisible = false" />
|
||||
</template>
|
||||
</XModal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, unref } from 'vue'
|
||||
import dayjs from 'dayjs'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { DICT_TYPE } from '@/utils/dict'
|
||||
import { useTable } from '@/hooks/web/useTable'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import { FormExpose } from '@/components/Form'
|
||||
import type { ErrorCodeVO } from '@/api/system/errorCode/types'
|
||||
import { rules, allSchemas } from './errorCode.data'
|
||||
import * as ErrorCodeApi from '@/api/system/errorCode'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import { useMessage } from '@/hooks/web/useMessage'
|
||||
import { useVxeGrid } from '@/hooks/web/useVxeGrid'
|
||||
import { VxeGridInstance } from 'vxe-table'
|
||||
import { FormExpose } from '@/components/Form'
|
||||
import { ElDatePicker } from 'element-plus'
|
||||
|
||||
const { t } = useI18n() // 国际化
|
||||
|
||||
// ========== 列表相关 ==========
|
||||
const { register, tableObject, methods } = useTable<ErrorCodeVO>({
|
||||
getListApi: ErrorCodeApi.getErrorCodePageApi,
|
||||
delListApi: ErrorCodeApi.deleteErrorCodeApi
|
||||
})
|
||||
const { getList, setSearchParams, delList } = methods
|
||||
|
||||
// ========== CRUD 相关 ==========
|
||||
const loading = ref(false) // 遮罩层
|
||||
const actionType = ref('') // 操作按钮的类型
|
||||
const message = useMessage() // 消息弹窗
|
||||
const dialogVisible = ref(false) // 是否显示弹出层
|
||||
const dialogTitle = ref('edit') // 弹出层标题
|
||||
const actionType = ref('') // 操作按钮的类型
|
||||
const actionLoading = ref(false) // 按钮Loading
|
||||
const xGrid = ref<VxeGridInstance>() // grid Ref
|
||||
const formRef = ref<FormExpose>() // 表单 Ref
|
||||
const detailRef = ref() // 详情 Ref
|
||||
|
||||
const { gridOptions } = useVxeGrid<ErrorCodeVO>({
|
||||
allSchemas: allSchemas,
|
||||
getListApi: ErrorCodeApi.getErrorCodePageApi
|
||||
})
|
||||
// 设置标题
|
||||
const setDialogTile = (type: string) => {
|
||||
dialogTitle.value = t('action.' + type)
|
||||
|
|
@ -39,147 +123,57 @@ const handleCreate = () => {
|
|||
unref(formRef)?.getElFormRef()?.resetFields()
|
||||
}
|
||||
|
||||
// 详情操作
|
||||
const handleDetail = async (row: ErrorCodeVO) => {
|
||||
// 设置数据
|
||||
detailRef.value = row
|
||||
setDialogTile('detail')
|
||||
}
|
||||
|
||||
// 修改操作
|
||||
const handleUpdate = async (row: ErrorCodeVO) => {
|
||||
const handleUpdate = async (rowId: number) => {
|
||||
setDialogTile('update')
|
||||
// 设置数据
|
||||
const res = await ErrorCodeApi.getErrorCodeApi(row.id)
|
||||
const res = await ErrorCodeApi.getErrorCodeApi(rowId)
|
||||
unref(formRef)?.setValues(res)
|
||||
}
|
||||
|
||||
// 删除操作
|
||||
const handleDelete = async (rowId: number) => {
|
||||
message
|
||||
.delConfirm()
|
||||
.then(async () => {
|
||||
await ErrorCodeApi.deleteErrorCodeApi(rowId)
|
||||
message.success(t('common.delSuccess'))
|
||||
})
|
||||
.finally(() => {
|
||||
xGrid.value?.commitProxy('query')
|
||||
})
|
||||
}
|
||||
|
||||
// 提交按钮
|
||||
const submitForm = async () => {
|
||||
const elForm = unref(formRef)?.getElFormRef()
|
||||
if (!elForm) return
|
||||
elForm.validate(async (valid) => {
|
||||
if (valid) {
|
||||
loading.value = true
|
||||
actionLoading.value = true
|
||||
// 提交请求
|
||||
try {
|
||||
const data = unref(formRef)?.formModel as ErrorCodeVO
|
||||
if (actionType.value === 'create') {
|
||||
await ErrorCodeApi.createErrorCodeApi(data)
|
||||
ElMessage.success(t('common.createSuccess'))
|
||||
message.success(t('common.createSuccess'))
|
||||
} else {
|
||||
await ErrorCodeApi.updateErrorCodeApi(data)
|
||||
ElMessage.success(t('common.updateSuccess'))
|
||||
message.success(t('common.updateSuccess'))
|
||||
}
|
||||
// 操作成功，重新加载列表
|
||||
dialogVisible.value = false
|
||||
await getList()
|
||||
} finally {
|
||||
loading.value = false
|
||||
actionLoading.value = false
|
||||
xGrid.value?.commitProxy('query')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// ========== 详情相关 ==========
|
||||
const detailRef = ref() // 详情 Ref
|
||||
|
||||
// 详情操作
|
||||
const handleDetail = async (row: ErrorCodeVO) => {
|
||||
// 设置数据
|
||||
detailRef.value = row
|
||||
setDialogTile('detail')
|
||||
}
|
||||
|
||||
// ========== 初始化 ==========
|
||||
getList()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 搜索工作区 -->
|
||||
<ContentWrap>
|
||||
<Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams" />
|
||||
</ContentWrap>
|
||||
<ContentWrap>
|
||||
<!-- 操作工具栏 -->
|
||||
<div class="mb-10px">
|
||||
<el-button v-hasPermi="['system:error-code:create']" type="primary" @click="handleCreate">
|
||||
<Icon icon="ep:zoom-in" class="mr-5px" /> {{ t('action.add') }}
|
||||
</el-button>
|
||||
</div>
|
||||
<!-- 列表 -->
|
||||
<Table
|
||||
:columns="allSchemas.tableColumns"
|
||||
:selection="false"
|
||||
:data="tableObject.tableList"
|
||||
:loading="tableObject.loading"
|
||||
:pagination="{
|
||||
total: tableObject.total
|
||||
}"
|
||||
v-model:pageSize="tableObject.pageSize"
|
||||
v-model:currentPage="tableObject.currentPage"
|
||||
@register="register"
|
||||
>
|
||||
<template #type="{ row }">
|
||||
<DictTag :type="DICT_TYPE.SYSTEM_ERROR_CODE_TYPE" :value="row.type" />
|
||||
</template>
|
||||
<template #createTime="{ row }">
|
||||
<span>{{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
|
||||
</template>
|
||||
<template #action="{ row }">
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
v-hasPermi="['system:error-code:update']"
|
||||
@click="handleUpdate(row)"
|
||||
>
|
||||
<Icon icon="ep:edit" class="mr-1px" /> {{ t('action.edit') }}
|
||||
</el-button>
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
v-hasPermi="['system:error-code:update']"
|
||||
@click="handleDetail(row)"
|
||||
>
|
||||
<Icon icon="ep:view" class="mr-1px" /> {{ t('action.detail') }}
|
||||
</el-button>
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
v-hasPermi="['system:error-code:delete']"
|
||||
@click="delList(row.id, false)"
|
||||
>
|
||||
<Icon icon="ep:delete" class="mr-1px" /> {{ t('action.del') }}
|
||||
</el-button>
|
||||
</template>
|
||||
</Table>
|
||||
</ContentWrap>
|
||||
|
||||
<Dialog v-model="dialogVisible" :title="dialogTitle">
|
||||
<!-- 对话框(添加 / 修改) -->
|
||||
<Form
|
||||
v-if="['create', 'update'].includes(actionType)"
|
||||
:schema="allSchemas.formSchema"
|
||||
:rules="rules"
|
||||
ref="formRef"
|
||||
/>
|
||||
<!-- 对话框(详情) -->
|
||||
<Descriptions
|
||||
v-if="actionType === 'detail'"
|
||||
:schema="allSchemas.detailSchema"
|
||||
:data="detailRef"
|
||||
>
|
||||
<template #type="{ row }">
|
||||
<DictTag :type="DICT_TYPE.SYSTEM_ERROR_CODE_TYPE" :value="row.type" />
|
||||
</template>
|
||||
<template #createTime="{ row }">
|
||||
<span>{{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
|
||||
</template>
|
||||
</Descriptions>
|
||||
<!-- 操作按钮 -->
|
||||
<template #footer>
|
||||
<el-button
|
||||
v-if="['create', 'update'].includes(actionType)"
|
||||
type="primary"
|
||||
:loading="loading"
|
||||
@click="submitForm"
|
||||
>
|
||||
{{ t('action.save') }}
|
||||
</el-button>
|
||||
<el-button @click="dialogVisible = false">{{ t('dialog.close') }}</el-button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
<template #status_default="{ row }">
|
||||
<DictTag :type="DICT_TYPE.COMMON_STATUS" :value="row.status" />
|
||||
</template>
|
||||
<template #action_default="{ row }">
|
||||
<template #actionbtns_default="{ row }">
|
||||
<XTextButton
|
||||
preIcon="ep:edit"
|
||||
:title="t('action.edit')"
|
||||
|
|
|
|||
|
|
@ -13,79 +13,52 @@ export const rules = reactive({
|
|||
})
|
||||
|
||||
// CrudSchema
|
||||
const crudSchemas = reactive<VxeCrudSchema[]>([
|
||||
{
|
||||
title: t('common.index'),
|
||||
field: 'id',
|
||||
type: 'seq',
|
||||
form: {
|
||||
show: false
|
||||
},
|
||||
detail: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '岗位名称',
|
||||
field: 'name',
|
||||
search: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '岗位编码',
|
||||
field: 'code',
|
||||
search: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '岗位顺序',
|
||||
field: 'sort'
|
||||
},
|
||||
{
|
||||
title: t('common.status'),
|
||||
field: 'status',
|
||||
dictType: DICT_TYPE.COMMON_STATUS,
|
||||
table: {
|
||||
slots: {
|
||||
default: 'status_default'
|
||||
const crudSchemas = reactive<VxeCrudSchema>({
|
||||
primaryKey: 'id',
|
||||
primaryType: 'seq',
|
||||
action: true,
|
||||
columns: [
|
||||
{
|
||||
title: '岗位名称',
|
||||
field: 'name',
|
||||
search: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
search: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
field: 'remark',
|
||||
table: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
{
|
||||
title: t('common.createTime'),
|
||||
field: 'createTime',
|
||||
formatter: 'formatDate',
|
||||
form: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
{
|
||||
title: t('table.action'),
|
||||
field: 'action',
|
||||
table: {
|
||||
width: '240px',
|
||||
slots: {
|
||||
default: 'action_default'
|
||||
{
|
||||
title: '岗位编码',
|
||||
field: 'code',
|
||||
search: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
form: {
|
||||
show: false
|
||||
{
|
||||
title: '岗位顺序',
|
||||
field: 'sort'
|
||||
},
|
||||
detail: {
|
||||
show: false
|
||||
{
|
||||
title: t('common.status'),
|
||||
field: 'status',
|
||||
dictType: DICT_TYPE.COMMON_STATUS,
|
||||
search: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
field: 'remark',
|
||||
table: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
{
|
||||
title: t('common.createTime'),
|
||||
field: 'createTime',
|
||||
formatter: 'formatDate',
|
||||
form: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
}
|
||||
])
|
||||
]
|
||||
})
|
||||
export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
|
||||
|
|
|
|||
Loading…
Reference in New Issue