mirror of
				https://gitee.com/hhyykk/ipms-sjy.git
				synced 2025-10-31 18:28:43 +08:00 
			
		
		
		
	vue3:测试 client、token、errorCode 模块,导出需要优化
This commit is contained in:
		| @@ -4,12 +4,14 @@ import { useI18n } from '@/hooks/web/useI18n' | |||||||
| import { DICT_TYPE } from '@/utils/dict' | import { DICT_TYPE } from '@/utils/dict' | ||||||
| import { VxeCrudSchema, useVxeCrudSchemas } from '@/hooks/web/useVxeCrudSchemas' | import { VxeCrudSchema, useVxeCrudSchemas } from '@/hooks/web/useVxeCrudSchemas' | ||||||
| const { t } = useI18n() // 国际化 | const { t } = useI18n() // 国际化 | ||||||
|  |  | ||||||
| // 表单校验 | // 表单校验 | ||||||
| export const rules = reactive({ | export const rules = reactive({ | ||||||
|   applicationName: [required], |   applicationName: [required], | ||||||
|   code: [required], |   code: [required], | ||||||
|   message: [required] |   message: [required] | ||||||
| }) | }) | ||||||
|  |  | ||||||
| // 新增 + 修改 | // 新增 + 修改 | ||||||
| const crudSchemas = reactive<VxeCrudSchema>({ | const crudSchemas = reactive<VxeCrudSchema>({ | ||||||
|   primaryKey: 'id', |   primaryKey: 'id', | ||||||
|   | |||||||
| @@ -1,6 +1,8 @@ | |||||||
| <template> | <template> | ||||||
|   <ContentWrap> |   <ContentWrap> | ||||||
|  |     <!-- 列表 --> | ||||||
|     <vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar"> |     <vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar"> | ||||||
|  |       <!-- 操作:新增 --> | ||||||
|       <template #toolbar_buttons> |       <template #toolbar_buttons> | ||||||
|         <XButton |         <XButton | ||||||
|           type="primary" |           type="primary" | ||||||
| @@ -11,18 +13,21 @@ | |||||||
|         /> |         /> | ||||||
|       </template> |       </template> | ||||||
|       <template #actionbtns_default="{ row }"> |       <template #actionbtns_default="{ row }"> | ||||||
|  |         <!-- 操作:修改 --> | ||||||
|         <XTextButton |         <XTextButton | ||||||
|           preIcon="ep:edit" |           preIcon="ep:edit" | ||||||
|           :title="t('action.edit')" |           :title="t('action.edit')" | ||||||
|           v-hasPermi="['system:error-code:update']" |           v-hasPermi="['system:error-code:update']" | ||||||
|           @click="handleUpdate(row.id)" |           @click="handleUpdate(row.id)" | ||||||
|         /> |         /> | ||||||
|  |         <!-- 操作:详情 --> | ||||||
|         <XTextButton |         <XTextButton | ||||||
|           preIcon="ep:view" |           preIcon="ep:view" | ||||||
|           :title="t('action.detail')" |           :title="t('action.detail')" | ||||||
|           v-hasPermi="['system:error-code:update']" |           v-hasPermi="['system:error-code:update']" | ||||||
|           @click="handleDetail(row.id)" |           @click="handleDetail(row.id)" | ||||||
|         /> |         /> | ||||||
|  |         <!-- 操作:删除 --> | ||||||
|         <XTextButton |         <XTextButton | ||||||
|           preIcon="ep:delete" |           preIcon="ep:delete" | ||||||
|           :title="t('action.del')" |           :title="t('action.del')" | ||||||
| @@ -32,6 +37,7 @@ | |||||||
|       </template> |       </template> | ||||||
|     </vxe-grid> |     </vxe-grid> | ||||||
|   </ContentWrap> |   </ContentWrap> | ||||||
|  |   <!-- 弹窗 --> | ||||||
|   <XModal id="errorCodeModel" v-model="dialogVisible" :title="dialogTitle"> |   <XModal id="errorCodeModel" v-model="dialogVisible" :title="dialogTitle"> | ||||||
|     <template #default> |     <template #default> | ||||||
|       <!-- 对话框(添加 / 修改) --> |       <!-- 对话框(添加 / 修改) --> | ||||||
| @@ -48,8 +54,8 @@ | |||||||
|         :data="detailRef" |         :data="detailRef" | ||||||
|       /> |       /> | ||||||
|     </template> |     </template> | ||||||
|     <!-- 操作按钮 --> |  | ||||||
|     <template #footer> |     <template #footer> | ||||||
|  |       <!-- 按钮:保存 --> | ||||||
|       <XButton |       <XButton | ||||||
|         v-if="['create', 'update'].includes(actionType)" |         v-if="['create', 'update'].includes(actionType)" | ||||||
|         type="primary" |         type="primary" | ||||||
| @@ -57,35 +63,40 @@ | |||||||
|         :loading="actionLoading" |         :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" /> | ||||||
|     </template> |     </template> | ||||||
|   </XModal> |   </XModal> | ||||||
| </template> | </template> | ||||||
|  |  | ||||||
| <script setup lang="ts"> | <script setup lang="ts"> | ||||||
|  | // 全局相关的 import | ||||||
| import { ref, unref } from 'vue' | import { ref, unref } from 'vue' | ||||||
| import { rules, allSchemas } from './errorCode.data' |  | ||||||
| import * as ErrorCodeApi from '@/api/system/errorCode' |  | ||||||
| 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 { VxeGridInstance } from 'vxe-table' | import { VxeGridInstance } from 'vxe-table' | ||||||
| import { FormExpose } from '@/components/Form' | import { FormExpose } from '@/components/Form' | ||||||
|  | // 业务相关的 import | ||||||
|  | import { rules, allSchemas } from './errorCode.data' | ||||||
|  | import * as ErrorCodeApi from '@/api/system/errorCode' | ||||||
|  |  | ||||||
| const { t } = useI18n() // 国际化 | const { t } = useI18n() // 国际化 | ||||||
| const message = useMessage() // 消息弹窗 | 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 xGrid = ref<VxeGridInstance>() // grid Ref | ||||||
| const formRef = ref<FormExpose>() // 表单 Ref |  | ||||||
| const detailRef = ref() // 详情 Ref |  | ||||||
|  |  | ||||||
| const { gridOptions } = useVxeGrid<ErrorCodeApi.ErrorCodeVO>({ | const { gridOptions } = useVxeGrid<ErrorCodeApi.ErrorCodeVO>({ | ||||||
|   allSchemas: allSchemas, |   allSchemas: allSchemas, | ||||||
|   getListApi: ErrorCodeApi.getErrorCodePageApi |   getListApi: ErrorCodeApi.getErrorCodePageApi | ||||||
| }) | }) | ||||||
|  | // 弹窗相关的变量 | ||||||
|  | const dialogVisible = ref(false) // 是否显示弹出层 | ||||||
|  | const dialogTitle = ref('edit') // 弹出层标题 | ||||||
|  | const actionType = ref('') // 操作按钮的类型 | ||||||
|  | const actionLoading = ref(false) // 按钮 Loading | ||||||
|  | const formRef = ref<FormExpose>() // 表单 Ref | ||||||
|  | const detailRef = ref() // 详情 Ref | ||||||
|  |  | ||||||
| // 设置标题 | // 设置标题 | ||||||
| const setDialogTile = (type: string) => { | const setDialogTile = (type: string) => { | ||||||
|   dialogTitle.value = t('action.' + type) |   dialogTitle.value = t('action.' + type) | ||||||
| @@ -125,11 +136,12 @@ const handleDelete = async (rowId: number) => { | |||||||
|       message.success(t('common.delSuccess')) |       message.success(t('common.delSuccess')) | ||||||
|     }) |     }) | ||||||
|     .finally(() => { |     .finally(() => { | ||||||
|  |       // 刷新列表 | ||||||
|       xGrid.value?.commitProxy('query') |       xGrid.value?.commitProxy('query') | ||||||
|     }) |     }) | ||||||
| } | } | ||||||
|  |  | ||||||
| // 提交按钮 | // 提交新增/修改的表单 | ||||||
| const submitForm = async () => { | const submitForm = async () => { | ||||||
|   const elForm = unref(formRef)?.getElFormRef() |   const elForm = unref(formRef)?.getElFormRef() | ||||||
|   if (!elForm) return |   if (!elForm) return | ||||||
| @@ -149,6 +161,7 @@ const submitForm = async () => { | |||||||
|         dialogVisible.value = false |         dialogVisible.value = false | ||||||
|       } finally { |       } finally { | ||||||
|         actionLoading.value = false |         actionLoading.value = false | ||||||
|  |         // 刷新列表 | ||||||
|         xGrid.value?.commitProxy('query') |         xGrid.value?.commitProxy('query') | ||||||
|       } |       } | ||||||
|     } |     } | ||||||
|   | |||||||
| @@ -40,38 +40,38 @@ const crudSchemas = reactive<VxeCrudSchema>({ | |||||||
|     { |     { | ||||||
|       title: t('common.status'), |       title: t('common.status'), | ||||||
|       field: 'status', |       field: 'status', | ||||||
|       dictType: DICT_TYPE.COMMON_STATUS, |       dictType: DICT_TYPE.COMMON_STATUS, // TODO @星语:编辑时,status 展示为 0 或者 1 了 | ||||||
|       isSearch: true |       isSearch: true | ||||||
|     }, |     }, | ||||||
|     { |     { | ||||||
|       title: '访问令牌的有效期', |       title: '访问令牌的有效期', | ||||||
|       field: 'accessTokenValiditySeconds' |       field: 'accessTokenValiditySeconds' // TODO @星语:数字输入框 | ||||||
|     }, |     }, | ||||||
|     { |     { | ||||||
|       title: '刷新令牌的有效期', |       title: '刷新令牌的有效期', | ||||||
|       field: 'refreshTokenValiditySeconds' |       field: 'refreshTokenValiditySeconds' // TODO @星语:数字输入框 | ||||||
|     }, |     }, | ||||||
|     { |     { | ||||||
|       title: '授权类型', |       title: '授权类型', | ||||||
|       field: 'authorizedGrantTypes', |       field: 'authorizedGrantTypes', | ||||||
|       dictType: DICT_TYPE.SYSTEM_OAUTH2_GRANT_TYPE, |       dictType: DICT_TYPE.SYSTEM_OAUTH2_GRANT_TYPE, | ||||||
|       form: { |       form: { | ||||||
|         component: 'Select' |         component: 'Select' // TODO @星语:多选 | ||||||
|       } |       } | ||||||
|     }, |     }, | ||||||
|     { |     { | ||||||
|       title: '授权范围', |       title: '授权范围', | ||||||
|       field: 'scopes', |       field: 'scopes', // TODO @星语:带输入的 SELECT | ||||||
|       isTable: false |       isTable: false | ||||||
|     }, |     }, | ||||||
|     { |     { | ||||||
|       title: '自动授权范围', |       title: '自动授权范围', | ||||||
|       field: 'autoApproveScopes', |       field: 'autoApproveScopes', // TODO @星语:带输入的 SELECT | ||||||
|       isTable: false |       isTable: false | ||||||
|     }, |     }, | ||||||
|     { |     { | ||||||
|       title: '可重定向的 URI 地址', |       title: '可重定向的 URI 地址', | ||||||
|       field: 'redirectUris', |       field: 'redirectUris', // TODO @星语:带输入的 SELECT | ||||||
|       isTable: false |       isTable: false | ||||||
|     }, |     }, | ||||||
|     { |     { | ||||||
| @@ -102,7 +102,7 @@ const crudSchemas = reactive<VxeCrudSchema>({ | |||||||
|     { |     { | ||||||
|       title: t('common.createTime'), |       title: t('common.createTime'), | ||||||
|       field: 'createTime', |       field: 'createTime', | ||||||
|       formatter: 'formatDate', |       formatter: 'formatDate', // TODO @星语:宽度,保证时间可以展示出来 | ||||||
|       isForm: false |       isForm: false | ||||||
|     } |     } | ||||||
|   ] |   ] | ||||||
|   | |||||||
| @@ -58,6 +58,7 @@ | |||||||
|         :rules="rules" |         :rules="rules" | ||||||
|       /> |       /> | ||||||
|       <!-- 表单:详情 --> |       <!-- 表单:详情 --> | ||||||
|  |       <!-- TODO @星语:展示详情时,有点小丑,可额能得看看 --> | ||||||
|       <Descriptions |       <Descriptions | ||||||
|         v-if="actionType === 'detail'" |         v-if="actionType === 'detail'" | ||||||
|         :schema="allSchemas.detailSchema" |         :schema="allSchemas.detailSchema" | ||||||
|   | |||||||
| @@ -61,7 +61,7 @@ const handleForceLogout = (rowId: number) => { | |||||||
|     .delConfirm() |     .delConfirm() | ||||||
|     .then(async () => { |     .then(async () => { | ||||||
|       await TokenApi.deleteAccessTokenApi(rowId) |       await TokenApi.deleteAccessTokenApi(rowId) | ||||||
|       message.success(t('common.delSuccess')) |       message.success(t('common.delSuccess')) // TODO 星语:提示内容不对 | ||||||
|     }) |     }) | ||||||
|     .finally(() => { |     .finally(() => { | ||||||
|       // 刷新列表 |       // 刷新列表 | ||||||
|   | |||||||
		Reference in New Issue
	
	Block a user
	 YunaiV
					YunaiV