vue3:测试 client、token、errorCode 模块,导出需要优化

This commit is contained in:
YunaiV 2022-11-13 19:08:32 +08:00
parent b249b11753
commit e2dba57d8f
5 changed files with 36 additions and 20 deletions

View File

@ -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',

View File

@ -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')
} }
} }

View File

@ -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
} }
] ]

View File

@ -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"

View File

@ -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(() => {
// //