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