!295 fix: vue3 bugs

Merge pull request !295 from xingyu/feature/vue3
This commit is contained in:
芋道源码 2022-11-12 01:12:43 +00:00 committed by Gitee
commit 356a8ec94d
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
10 changed files with 218 additions and 220 deletions

View File

@ -31,7 +31,7 @@
"@wangeditor/editor-for-vue": "^5.1.10", "@wangeditor/editor-for-vue": "^5.1.10",
"@zxcvbn-ts/core": "^2.1.0", "@zxcvbn-ts/core": "^2.1.0",
"animate.css": "^4.1.1", "animate.css": "^4.1.1",
"axios": "^1.1.3", "axios": "^0.27.2",
"crypto-js": "^4.1.1", "crypto-js": "^4.1.1",
"dayjs": "^1.11.6", "dayjs": "^1.11.6",
"echarts": "^5.4.0", "echarts": "^5.4.0",

View File

@ -23,7 +23,7 @@ specifiers:
'@zxcvbn-ts/core': ^2.1.0 '@zxcvbn-ts/core': ^2.1.0
animate.css: ^4.1.1 animate.css: ^4.1.1
autoprefixer: ^10.4.13 autoprefixer: ^10.4.13
axios: ^1.1.3 axios: ^0.27.2
crypto-js: ^4.1.1 crypto-js: ^4.1.1
dayjs: ^1.11.6 dayjs: ^1.11.6
echarts: ^5.4.0 echarts: ^5.4.0
@ -87,7 +87,7 @@ dependencies:
'@wangeditor/editor-for-vue': 5.1.12_95363b7c2c964a937bf2a01c911df30e '@wangeditor/editor-for-vue': 5.1.12_95363b7c2c964a937bf2a01c911df30e
'@zxcvbn-ts/core': 2.1.0 '@zxcvbn-ts/core': 2.1.0
animate.css: 4.1.1 animate.css: 4.1.1
axios: 1.1.3 axios: 0.27.2
crypto-js: 4.1.1 crypto-js: 4.1.1
dayjs: 1.11.6 dayjs: 1.11.6
echarts: 5.4.0 echarts: 5.4.0
@ -2175,12 +2175,11 @@ packages:
- debug - debug
dev: true dev: true
/axios/1.1.3: /axios/0.27.2:
resolution: {integrity: sha512-00tXVRwKx/FZr/IDVFt4C+f9FYairX517WoGCL6dpOntqLkZofjhu43F/Xl44UOpqa+9sLFDrG/XAnFsUYgkDA==} resolution: {integrity: sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==}
dependencies: dependencies:
follow-redirects: 1.15.2 follow-redirects: 1.15.2
form-data: 4.0.0 form-data: 4.0.0
proxy-from-env: 1.1.0
transitivePeerDependencies: transitivePeerDependencies:
- debug - debug
dev: false dev: false
@ -5790,10 +5789,6 @@ packages:
engines: {node: '>=6'} engines: {node: '>=6'}
dev: false dev: false
/proxy-from-env/1.1.0:
resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
dev: false
/prr/1.0.1: /prr/1.0.1:
resolution: {integrity: sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==} resolution: {integrity: sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==}
dev: true dev: true

View File

@ -5,7 +5,7 @@ import axios, {
AxiosResponse, AxiosResponse,
AxiosError AxiosError
} from 'axios' } from 'axios'
import { ElMessage, ElMessageBox, ElNotification } from 'element-plus' import { useMessage } from '@/hooks/web/useMessage'
import qs from 'qs' import qs from 'qs'
import { config } from '@/config/axios/config' import { config } from '@/config/axios/config'
import { getAccessToken, getRefreshToken, getTenantId, removeToken, setToken } from '@/utils/auth' import { getAccessToken, getRefreshToken, getTenantId, removeToken, setToken } from '@/utils/auth'
@ -17,6 +17,7 @@ import { useCache } from '@/hooks/web/useCache'
const tenantEnable = import.meta.env.VITE_APP_TENANT_ENABLE const tenantEnable = import.meta.env.VITE_APP_TENANT_ENABLE
const { result_code, base_url, request_timeout } = config const { result_code, base_url, request_timeout } = config
const message = useMessage()
// 需要忽略的提示。忽略后,自动 Promise.reject('error') // 需要忽略的提示。忽略后,自动 Promise.reject('error')
const ignoreMsgs = [ const ignoreMsgs = [
'无效的刷新令牌', // 刷新令牌被删除时,不用提示 '无效的刷新令牌', // 刷新令牌被删除时,不用提示
@ -46,9 +47,9 @@ service.interceptors.request.use(
;(config as Recordable).headers.Authorization = 'Bearer ' + getAccessToken() // 让每个请求携带自定义token ;(config as Recordable).headers.Authorization = 'Bearer ' + getAccessToken() // 让每个请求携带自定义token
} }
// 设置租户 // 设置租户
if (tenantEnable) { if (tenantEnable && tenantEnable === 'true') {
const tenantId = getTenantId() const tenantId = getTenantId()
if (tenantId) service.defaults.headers.common['tenant-id'] = tenantId if (tenantId) (config as Recordable).headers.common['tenant-id'] = tenantId
} }
const params = config.params || {} const params = config.params || {}
const data = config.data || false const data = config.data || false
@ -129,7 +130,6 @@ service.interceptors.response.use(
// 2.1 刷新成功,则回放队列的请求 + 当前请求 // 2.1 刷新成功,则回放队列的请求 + 当前请求
setToken((await refreshTokenRes).data.data) setToken((await refreshTokenRes).data.data)
config.headers!.Authorization = 'Bearer ' + getAccessToken() config.headers!.Authorization = 'Bearer ' + getAccessToken()
service.defaults.headers.Authorization = 'Bearer ' + getAccessToken()
requestList.forEach((cb: any) => { requestList.forEach((cb: any) => {
cb() cb()
}) })
@ -157,10 +157,10 @@ service.interceptors.response.use(
}) })
} }
} else if (code === 500) { } else if (code === 500) {
ElMessage.error(t('sys.api.errMsg500')) message.error(t('sys.api.errMsg500'))
return Promise.reject(new Error(msg)) return Promise.reject(new Error(msg))
} else if (code === 901) { } else if (code === 901) {
ElMessage.error( message.error(
'<div>' + '<div>' +
t('sys.api.errMsg901') + t('sys.api.errMsg901') +
'</div>' + '</div>' +
@ -175,9 +175,7 @@ service.interceptors.response.use(
// hard coding忽略这个提示直接登出 // hard coding忽略这个提示直接登出
console.log(msg) console.log(msg)
} else { } else {
ElNotification.error({ message.notifyError(msg)
title: msg
})
} }
return Promise.reject('error') return Promise.reject('error')
} else { } else {
@ -186,16 +184,16 @@ service.interceptors.response.use(
}, },
(error: AxiosError) => { (error: AxiosError) => {
console.log('err' + error) // for debug console.log('err' + error) // for debug
let { message } = error let { message: msg } = error
const { t } = useI18n() const { t } = useI18n()
if (message === 'Network Error') { if (msg === 'Network Error') {
message = t('sys.api.errorMessage') msg = t('sys.api.errorMessage')
} else if (message.includes('timeout')) { } else if (msg.includes('timeout')) {
message = t('sys.api.apiTimeoutMessage') msg = t('sys.api.apiTimeoutMessage')
} else if (message.includes('Request failed with status code')) { } else if (msg.includes('Request failed with status code')) {
message = t('sys.api.apiRequestFailed') + message.substr(message.length - 3) msg = t('sys.api.apiRequestFailed') + msg.substr(msg.length - 3)
} }
ElMessage.error(message) message.error(msg)
return Promise.reject(error) return Promise.reject(error)
} }
) )
@ -207,11 +205,8 @@ const handleAuthorized = () => {
const { t } = useI18n() const { t } = useI18n()
if (!isRelogin.show) { if (!isRelogin.show) {
isRelogin.show = true isRelogin.show = true
ElMessageBox.confirm(t('sys.api.timeoutMessage'), t('common.confirmTitle'), { message
confirmButtonText: t('login.relogin'), .confirm(t('sys.api.timeoutMessage'))
cancelButtonText: t('common.cancel'),
type: 'warning'
})
.then(() => { .then(() => {
const { wsCache } = useCache() const { wsCache } = useCache()
resetRouter() // 重置静态路由表 resetRouter() // 重置静态路由表

View File

@ -4,9 +4,9 @@
import WebStorageCache from 'web-storage-cache' import WebStorageCache from 'web-storage-cache'
type CacheType = 'sessionStorage' | 'localStorage' type CacheType = 'localStorage' | 'sessionStorage'
export const useCache = (type: CacheType = 'sessionStorage') => { export const useCache = (type: CacheType = 'localStorage') => {
const wsCache: WebStorageCache = new WebStorageCache({ const wsCache: WebStorageCache = new WebStorageCache({
storage: type storage: type
}) })

View File

@ -121,10 +121,10 @@ const filterSearchSchema = (crudSchema: VxeCrudSchema[]): VxeFormItemProps[] =>
props: { placeholder: t('common.selectText') } props: { placeholder: t('common.selectText') }
} }
} }
const searchSchemaItem = { const searchSchemaItem = {
// 默认为 input // 默认为 input
span: 6, span: 8,
folding: searchSchema.length > 2,
itemRender: itemRender, itemRender: itemRender,
...schemaItem.search, ...schemaItem.search,
field: schemaItem.field, field: schemaItem.field,
@ -140,7 +140,7 @@ const filterSearchSchema = (crudSchema: VxeCrudSchema[]): VxeFormItemProps[] =>
const buttons: VxeFormItemProps = { const buttons: VxeFormItemProps = {
span: 24, span: 24,
align: 'center', align: 'center',
collapseNode: true, collapseNode: searchSchema.length > 3,
itemRender: { itemRender: {
name: '$buttons', name: '$buttons',
children: [ children: [

View File

@ -1,5 +1,5 @@
import { computed, reactive } from 'vue' import { computed, reactive } from 'vue'
import { VxeGridProps } from 'vxe-table' import { SizeType, VxeGridProps } from 'vxe-table'
import { useAppStore } from '@/store/modules/app' import { useAppStore } from '@/store/modules/app'
import { VxeAllSchemas } from './useVxeCrudSchemas' import { VxeAllSchemas } from './useVxeCrudSchemas'
import { useI18n } from '@/hooks/web/useI18n' import { useI18n } from '@/hooks/web/useI18n'
@ -18,20 +18,27 @@ interface UseVxeGridConfig<T = any> {
const appStore = useAppStore() const appStore = useAppStore()
const currentSize = computed(() => { const currentSize = computed(() => {
if (appStore.getCurrentSize === 'small') { let resSize: SizeType = 'small'
return 'small' const appsize = appStore.getCurrentSize
} else if (appStore.getCurrentSize === 'large') { switch (appsize) {
return 'mini' case 'large':
} else { resSize = 'medium'
return 'medium' break
case 'default':
resSize = 'small'
break
case 'small':
resSize = 'mini'
break
} }
return resSize
}) })
export const useVxeGrid = <T = any>(config?: UseVxeGridConfig<T>) => { export const useVxeGrid = <T = any>(config?: UseVxeGridConfig<T>) => {
const gridOptions = reactive<VxeGridProps>({ const gridOptions = reactive<VxeGridProps>({
loading: true, loading: true,
size: currentSize.value, size: currentSize as any,
height: 800, height: 700,
rowConfig: { rowConfig: {
isCurrent: true, // 当鼠标点击行时,是否要高亮当前行 isCurrent: true, // 当鼠标点击行时,是否要高亮当前行
isHover: true // 当鼠标移到行时,是否要高亮当前行 isHover: true // 当鼠标移到行时,是否要高亮当前行
@ -90,10 +97,12 @@ export const useVxeGrid = <T = any>(config?: UseVxeGridConfig<T>) => {
} }
}) })
const delList = (ids: string | number | string[] | number[]) => { const delList = (ids: string | number | string[] | number[]) => {
return new Promise(async () => {
message.delConfirm().then(() => { message.delConfirm().then(() => {
config?.delListApi && config?.delListApi(ids) config?.delListApi && config?.delListApi(ids)
message.success(t('common.delSuccess')) message.success(t('common.delSuccess'))
}) })
})
} }
return { return {
gridOptions, gridOptions,

View File

@ -7,7 +7,6 @@ import enUS from 'vxe-table/lib/locale/lang/en-US'
import { import {
// 全局对象 // 全局对象
VXETable, VXETable,
// 表格功能 // 表格功能
Filter, Filter,
Edit, Edit,
@ -15,7 +14,6 @@ import {
Export, Export,
Keyboard, Keyboard,
Validator, Validator,
// 可选组件 // 可选组件
Icon, Icon,
Column, Column,
@ -42,7 +40,6 @@ import {
Modal, Modal,
List, List,
Pulldown, Pulldown,
// 表格 // 表格
Table Table
} from 'vxe-table' } from 'vxe-table'

View File

@ -1,3 +1,154 @@
<template>
<div class="flex">
<el-card class="w-1/2 dict" :gutter="12" shadow="always">
<template #header>
<div class="card-header">
<span>字典分类</span>
</div>
</template>
<Search
:schema="DictTypeSchemas.allSchemas.searchSchema"
@search="setTypeSearchParams"
@reset="setTypeSearchParams"
/>
<!-- 操作工具栏 -->
<div class="mb-10px">
<XButton
type="primary"
preIcon="ep:zoom-in"
:title="t('action.add')"
v-hasPermi="['system:dict:create']"
@click="handleTypeCreate()"
/>
</div>
<!-- 列表 -->
<Table
@row-click="onClickType"
:columns="DictTypeSchemas.allSchemas.tableColumns"
:selection="false"
:data="typeTableObject.tableList"
:loading="typeTableObject.loading"
:pagination="{
total: typeTableObject.total
}"
:highlight-current-row="true"
v-model:pageSize="typeTableObject.pageSize"
v-model:currentPage="typeTableObject.currentPage"
@register="typeRegister"
>
<template #status="{ row }">
<DictTag :type="DICT_TYPE.COMMON_STATUS" :value="row.status" />
</template>
<template #action="{ row }">
<XTextButton
preIcon="ep:edit"
:title="t('action.edit')"
v-hasPermi="['system:dict:update']"
@click="handleTypeUpdate(row)"
/>
<XTextButton
preIcon="ep:delete"
:title="t('action.del')"
v-hasPermi="['system:dict:delete']"
@click="delTypeList(row.id, false)"
/>
</template>
</Table>
</el-card>
<el-card class="w-1/2 dict" style="margin-left: 10px" :gutter="12" shadow="hover">
<template #header>
<div class="card-header">
<span>字典数据</span>
</div>
</template>
<!-- 列表 -->
<div v-if="!tableTypeSelect">
<span>请从左侧选择</span>
</div>
<div v-if="tableTypeSelect">
<Search
:schema="DictDataSchemas.allSchemas.searchSchema"
@search="setDataSearchParams"
@reset="setDataSearchParams"
/>
<!-- 操作工具栏 -->
<div class="mb-10px">
<XButton
type="primary"
preIcon="ep:zoom-in"
:title="t('action.add')"
v-hasPermi="['system:dict:create']"
@click="handleDataCreate()"
/>
</div>
<Table
:columns="DictDataSchemas.allSchemas.tableColumns"
:selection="false"
:data="dataTableObject.tableList"
:loading="dataTableObject.loading"
:pagination="{
total: dataTableObject.total
}"
v-model:pageSize="dataTableObject.pageSize"
v-model:currentPage="dataTableObject.currentPage"
@register="dataRegister"
>
<template #status="{ row }">
<DictTag :type="DICT_TYPE.COMMON_STATUS" :value="row.status" />
</template>
<template #action="{ row }">
<XTextButton
v-hasPermi="['system:dict:update']"
preIcon="ep:edit"
:title="t('action.edit')"
@click="handleDataUpdate(row)"
/>
<XTextButton
v-hasPermi="['system:dict:delete']"
preIcon="ep:delete"
:title="t('action.del')"
@click="delDataList(row.id, false)"
/>
</template>
</Table>
</div>
</el-card>
<XModal id="dictModel" v-model="dialogVisible" :title="dialogTitle">
<template #default>
<Form
v-if="['typeCreate', 'typeUpdate'].includes(actionType)"
:schema="DictTypeSchemas.allSchemas.formSchema"
:rules="DictTypeSchemas.dictTypeRules"
ref="typeFormRef"
/>
<Form
v-if="['dataCreate', 'dataUpdate'].includes(actionType)"
:schema="DictDataSchemas.allSchemas.formSchema"
:rules="DictDataSchemas.dictDataRules"
ref="dataFormRef"
/>
</template>
<!-- 操作按钮 -->
<template #footer>
<XButton
v-if="['typeCreate', 'typeUpdate'].includes(actionType)"
type="primary"
:title="t('action.save')"
:loading="actionLoading"
@click="submitTypeForm"
/>
<XButton
v-if="['dataCreate', 'dataUpdate'].includes(actionType)"
type="primary"
:title="t('action.save')"
:loading="actionLoading"
@click="submitDataForm"
/>
<XButton :title="t('dialog.close')" @click="dialogVisible = false" />
</template>
</XModal>
</div>
</template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, unref, onMounted } from 'vue' import { ref, unref, onMounted } from 'vue'
import { DICT_TYPE } from '@/utils/dict' import { DICT_TYPE } from '@/utils/dict'
@ -148,155 +299,3 @@ onMounted(async () => {
typeTableObject.tableList[0] && onClickType(typeTableObject.tableList[0]) typeTableObject.tableList[0] && onClickType(typeTableObject.tableList[0])
}) })
</script> </script>
<template>
<div class="flex">
<el-card class="w-1/2 dict" :gutter="12" shadow="always">
<template #header>
<div class="card-header">
<span>字典分类</span>
</div>
</template>
<Search
:schema="DictTypeSchemas.allSchemas.searchSchema"
@search="setTypeSearchParams"
@reset="setTypeSearchParams"
/>
<!-- 操作工具栏 -->
<div class="mb-10px">
<el-button type="primary" v-hasPermi="['system:dict:create']" @click="handleTypeCreate">
<Icon icon="ep:zoom-in" class="mr-5px" /> {{ t('action.add') }}
</el-button>
</div>
<!-- 列表 -->
<Table
@row-click="onClickType"
:columns="DictTypeSchemas.allSchemas.tableColumns"
:selection="false"
:data="typeTableObject.tableList"
:loading="typeTableObject.loading"
:pagination="{
total: typeTableObject.total
}"
:highlight-current-row="true"
v-model:pageSize="typeTableObject.pageSize"
v-model:currentPage="typeTableObject.currentPage"
@register="typeRegister"
>
<template #status="{ row }">
<DictTag :type="DICT_TYPE.COMMON_STATUS" :value="row.status" />
</template>
<template #action="{ row }">
<el-button
link
type="primary"
v-hasPermi="['system:dict:update']"
@click="handleTypeUpdate(row)"
>
<Icon icon="ep:edit" class="mr-1px" /> {{ t('action.edit') }}
</el-button>
<el-button
link
type="primary"
v-hasPermi="['system:dict:delete']"
@click="delTypeList(row.id, false)"
>
<Icon icon="ep:delete" class="mr-1px" /> {{ t('action.del') }}
</el-button>
</template>
</Table>
</el-card>
<el-card class="w-1/2 dict" style="margin-left: 10px" :gutter="12" shadow="hover">
<template #header>
<div class="card-header">
<span>字典数据</span>
</div>
</template>
<!-- 列表 -->
<div v-if="!tableTypeSelect">
<span>请从左侧选择</span>
</div>
<div v-if="tableTypeSelect">
<Search
:schema="DictDataSchemas.allSchemas.searchSchema"
@search="setDataSearchParams"
@reset="setDataSearchParams"
/>
<!-- 操作工具栏 -->
<div class="mb-10px">
<el-button type="primary" v-hasPermi="['system:dict:create']" @click="handleDataCreate">
<Icon icon="ep:zoom-in" class="mr-1px" /> {{ t('action.add') }}
</el-button>
</div>
<Table
:columns="DictDataSchemas.allSchemas.tableColumns"
:selection="false"
:data="dataTableObject.tableList"
:loading="dataTableObject.loading"
:pagination="{
total: dataTableObject.total
}"
v-model:pageSize="dataTableObject.pageSize"
v-model:currentPage="dataTableObject.currentPage"
@register="dataRegister"
>
<template #status="{ row }">
<DictTag :type="DICT_TYPE.COMMON_STATUS" :value="row.status" />
</template>
<template #action="{ row }">
<el-button
link
type="primary"
v-hasPermi="['system:dict:update']"
@click="handleDataUpdate(row)"
>
<Icon icon="ep:edit" class="mr-1px" /> {{ t('action.edit') }}
</el-button>
<el-button
link
type="primary"
v-hasPermi="['system:dict:delete']"
@click="delDataList(row.id, false)"
>
<Icon icon="ep:delete" class="mr-1px" /> {{ t('action.del') }}
</el-button>
</template>
</Table>
</div>
</el-card>
<Dialog v-model="dialogVisible" :title="dialogTitle">
<Form
v-if="['typeCreate', 'typeUpdate'].includes(actionType)"
:schema="DictTypeSchemas.allSchemas.formSchema"
:rules="DictTypeSchemas.dictTypeRules"
ref="typeFormRef"
/>
<Form
v-if="['dataCreate', 'dataUpdate'].includes(actionType)"
:schema="DictDataSchemas.allSchemas.formSchema"
:rules="DictDataSchemas.dictDataRules"
ref="dataFormRef"
/>
<!-- 操作按钮 -->
<template #footer>
<el-button
v-if="['typeCreate', 'typeUpdate'].includes(actionType)"
type="primary"
:loading="actionLoading"
@click="submitTypeForm"
>
{{ t('action.save') }}
</el-button>
<el-button
v-if="['dataCreate', 'dataUpdate'].includes(actionType)"
type="primary"
:loading="actionLoading"
@click="submitDataForm"
>
{{ t('action.save') }}
</el-button>
<el-button @click="dialogVisible = false">{{ t('dialog.close') }}</el-button>
</template>
</Dialog>
</div>
</template>

View File

@ -60,9 +60,9 @@
<template #footer> <template #footer>
<XButton <XButton
v-if="['create', 'update'].includes(actionType)" v-if="['create', 'update'].includes(actionType)"
:loading="actionLoading"
:title="t('action.save')"
type="primary" type="primary"
:title="t('action.save')"
:loading="actionLoading"
@click="submitForm" @click="submitForm"
/> />
<XButton :loading="actionLoading" :title="t('dialog.close')" @click="dialogVisible = false" /> <XButton :loading="actionLoading" :title="t('dialog.close')" @click="dialogVisible = false" />
@ -79,35 +79,31 @@ import { rules, allSchemas } from './post.data'
import { useI18n } from '@/hooks/web/useI18n' import { useI18n } from '@/hooks/web/useI18n'
import { useMessage } from '@/hooks/web/useMessage' import { useMessage } from '@/hooks/web/useMessage'
import { useVxeGrid } from '@/hooks/web/useVxeGrid' import { useVxeGrid } from '@/hooks/web/useVxeGrid'
import { VxeFormEvents, VxeGridInstance } from 'vxe-table' import { VxeGridInstance } from 'vxe-table'
import { FormExpose } from '@/components/Form' import { FormExpose } from '@/components/Form'
const { t } = useI18n() // const { t } = useI18n() //
const message = useMessage() // const message = useMessage() //
const xGrid = ref<VxeGridInstance>()
const formRef = ref<FormExpose>() // Ref
const dialogVisible = ref(false) // const dialogVisible = ref(false) //
const dialogTitle = ref('edit') // const dialogTitle = ref('edit') //
const actionType = ref('') // const actionType = ref('') //
const actionLoading = ref(false) // Loading const actionLoading = ref(false) // Loading
const xGrid = ref<VxeGridInstance>() // grid Ref
const formRef = ref<FormExpose>() // Ref
const detailRef = ref() // Ref
const { gridOptions } = useVxeGrid<PostVO>({ const { gridOptions } = useVxeGrid<PostVO>({
allSchemas: allSchemas, allSchemas: allSchemas,
getListApi: PostApi.getPostPageApi getListApi: PostApi.getPostPageApi
}) })
// //
const setDialogTile = (type: string) => { const setDialogTile = (type: string) => {
dialogTitle.value = t('action.' + type) dialogTitle.value = t('action.' + type)
actionType.value = type actionType.value = type
dialogVisible.value = true dialogVisible.value = true
} }
// ========== ==========
const detailRef = ref() // Ref
//
const handleDetail = (row: PostVO) => {
setDialogTile('detail')
detailRef.value = row
}
// //
const handleCreate = () => { const handleCreate = () => {
setDialogTile('create') setDialogTile('create')
@ -115,6 +111,12 @@ const handleCreate = () => {
unref(formRef)?.getElFormRef()?.resetFields() unref(formRef)?.getElFormRef()?.resetFields()
} }
//
const handleDetail = (row: PostVO) => {
setDialogTile('detail')
detailRef.value = row
}
// //
const handleUpdate = async (rowId: number) => { const handleUpdate = async (rowId: number) => {
setDialogTile('update') setDialogTile('update')
@ -122,6 +124,7 @@ const handleUpdate = async (rowId: number) => {
const res = await PostApi.getPostApi(rowId) const res = await PostApi.getPostApi(rowId)
unref(formRef)?.setValues(res) unref(formRef)?.setValues(res)
} }
// //
const handleDelete = async (rowId: number) => { const handleDelete = async (rowId: number) => {
message message
@ -134,8 +137,9 @@ const handleDelete = async (rowId: number) => {
xGrid.value?.commitProxy('query') xGrid.value?.commitProxy('query')
}) })
} }
// //
const submitForm: VxeFormEvents.Submit = async () => { const submitForm = async () => {
const elForm = unref(formRef)?.getElFormRef() const elForm = unref(formRef)?.getElFormRef()
if (!elForm) return if (!elForm) return
elForm.validate(async (valid) => { elForm.validate(async (valid) => {
@ -151,7 +155,6 @@ const submitForm: VxeFormEvents.Submit = async () => {
await PostApi.updatePostApi(data) await PostApi.updatePostApi(data)
message.success(t('common.updateSuccess')) message.success(t('common.updateSuccess'))
} }
//
dialogVisible.value = false dialogVisible.value = false
} finally { } finally {
actionLoading.value = false actionLoading.value = false

View File

@ -1,8 +1,8 @@
import { reactive } from 'vue' import { reactive } from 'vue'
import { useI18n } from '@/hooks/web/useI18n' import { useI18n } from '@/hooks/web/useI18n'
import { required } from '@/utils/formRules' import { required } from '@/utils/formRules'
import { VxeCrudSchema, useVxeCrudSchemas } from '@/hooks/web/useVxeCrudSchemas'
import { DICT_TYPE } from '@/utils/dict' import { DICT_TYPE } from '@/utils/dict'
import { VxeCrudSchema, useVxeCrudSchemas } from '@/hooks/web/useVxeCrudSchemas'
const { t } = useI18n() // 国际化 const { t } = useI18n() // 国际化
// 表单校验 // 表单校验
@ -17,7 +17,7 @@ const crudSchemas = reactive<VxeCrudSchema[]>([
{ {
title: t('common.index'), title: t('common.index'),
field: 'id', field: 'id',
type: 'index', type: 'seq',
form: { form: {
show: false show: false
}, },