Skip to content

Commit d50bbf0

Browse files
YunaiVYunaiV
committed
Merge branch 'dev' of https://gitee.com/txyyj/yudao-ui-admin-vue3 into dev
� Conflicts: � src/views/system/oauth2/client/index.vue
2 parents a319d09 + e0b57b8 commit d50bbf0

File tree

2 files changed

+162
-190
lines changed

2 files changed

+162
-190
lines changed

‎src/views/system/oauth2/client/form.vue

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
<el-input v-model="formData.name" placeholder="请输入应用名" />
1818
</el-form-item>
1919
<el-form-item label="应用图标">
20-
<UploadImg v-model="formData.logo" :limit="1" />
20+
<imageUpload v-model="formData.logo" :limit="1" />
2121
</el-form-item>
2222
<el-form-item label="应用描述">
2323
<el-input type="textarea" v-model="formData.description" placeholder="请输入应用名" />
@@ -147,7 +147,6 @@
147147
<script setup lang="ts">
148148
import { DICT_TYPE, getDictOptions } from '@/utils/dict'
149149
import * as ClientApi from '@/api/system/oauth2/client'
150-
import UploadImg from '@/components/UploadFile'
151150
const { t } = useI18n() // 国际化
152151
const message = useMessage() // 消息弹窗
153152

‎src/views/system/oauth2/client/index.vue

Lines changed: 161 additions & 188 deletions
Original file line numberDiff line numberDiff line change
@@ -1,206 +1,179 @@
11
<template>
2-
<ContentWrap>
3-
<!-- 列表 -->
4-
<XTable @register="registerTable">
5-
<template #toolbar_buttons>
6-
<!-- 操作：新增 -->
7-
<XButton
8-
type="primary"
9-
preIcon="ep:zoom-in"
10-
:title="t('action.add')"
11-
v-hasPermi="['system:oauth2-client:create']"
12-
@click="handleCreate()"
13-
/>
14-
</template>
15-
<template #accessTokenValiditySeconds_default="{ row }">
16-
{{ row.accessTokenValiditySeconds + '秒' }}
17-
</template>
18-
<template #refreshTokenValiditySeconds_default="{ row }">
19-
{{ row.refreshTokenValiditySeconds + '秒' }}
20-
</template>
21-
<template #authorizedGrantTypes_default="{ row }">
22-
<el-tag
23-
:disable-transitions="true"
24-
:key="index"
25-
v-for="(authorizedGrantType, index) in row.authorizedGrantTypes"
26-
:index="index"
27-
>
28-
{{ authorizedGrantType }}
29-
</el-tag>
30-
</template>
31-
<template #actionbtns_default="{ row }">
32-
<!-- 操作：修改 -->
33-
<XTextButton
34-
preIcon="ep:edit"
35-
:title="t('action.edit')"
36-
v-hasPermi="['system:oauth2-client:update']"
37-
@click="handleUpdate(row.id)"
38-
/>
39-
<!-- 操作：详情 -->
40-
<XTextButton
41-
preIcon="ep:view"
42-
:title="t('action.detail')"
43-
v-hasPermi="['system:oauth2-client:query']"
44-
@click="handleDetail(row.id)"
45-
/>
46-
<!-- 操作：删除 -->
47-
<XTextButton
48-
preIcon="ep:delete"
49-
:title="t('action.del')"
50-
v-hasPermi="['system:oauth2-client:delete']"
51-
@click="deleteData(row.id)"
52-
/>
53-
</template>
54-
</XTable>
55-
</ContentWrap>
56-
<!-- 弹窗 -->
57-
<XModal id="postModel" v-model="dialogVisible" :title="dialogTitle">
58-
<!-- 表单：添加/修改 -->
59-
<Form
60-
ref="formRef"
61-
v-if="['create', 'update'].includes(actionType)"
62-
:schema="allSchemas.formSchema"
63-
:rules="rules"
64-
/>
65-
<!-- 表单：详情 -->
66-
<Descriptions
67-
v-if="actionType === 'detail'"
68-
:schema="allSchemas.detailSchema"
69-
:data="detailData"
2+
<!-- 搜索 -->
3+
<content-wrap>
4+
<el-form
5+
class="-mb-15px"
6+
:model="queryParams"
7+
ref="queryFormRef"
8+
:inline="true"
9+
label-width="68px"
7010
>
71-
<template #accessTokenValiditySeconds="{ row }">
72-
{{ row.accessTokenValiditySeconds + '秒' }}
73-
</template>
74-
<template #refreshTokenValiditySeconds="{ row }">
75-
{{ row.refreshTokenValiditySeconds + '秒' }}
76-
</template>
77-
<template #authorizedGrantTypes="{ row }">
78-
<el-tag
79-
:disable-transitions="true"
80-
:key="index"
81-
v-for="(authorizedGrantType, index) in row.authorizedGrantTypes"
82-
:index="index"
83-
>
84-
{{ authorizedGrantType }}
85-
</el-tag>
86-
</template>
87-
<template #scopes="{ row }">
88-
<el-tag
89-
:disable-transitions="true"
90-
:key="index"
91-
v-for="(scopes, index) in row.scopes"
92-
:index="index"
93-
>
94-
{{ scopes }}
95-
</el-tag>
96-
</template>
97-
<template #autoApproveScopes="{ row }">
98-
<el-tag
99-
:disable-transitions="true"
100-
:key="index"
101-
v-for="(autoApproveScopes, index) in row.autoApproveScopes"
102-
:index="index"
103-
>
104-
{{ autoApproveScopes }}
105-
</el-tag>
106-
</template>
107-
<template #redirectUris="{ row }">
108-
<el-tag
109-
:disable-transitions="true"
110-
:key="index"
111-
v-for="(redirectUris, index) in row.redirectUris"
112-
:index="index"
113-
>
114-
{{ redirectUris }}
115-
</el-tag>
116-
</template>
117-
</Descriptions>
118-
<template #footer>
119-
<!-- 按钮：保存 -->
120-
<XButton
121-
v-if="['create', 'update'].includes(actionType)"
122-
type="primary"
123-
:title="t('action.save')"
124-
:loading="actionLoading"
125-
@click="submitForm()"
11+
<el-form-item label="应用名" prop="name">
12+
<el-input
13+
v-model="queryParams.name"
14+
placeholder="请输入应用名"
15+
clearable
16+
@keyup.enter="handleQuery"
17+
/>
18+
</el-form-item>
19+
<el-form-item label="状态" prop="status">
20+
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable size="small">
21+
<el-option
22+
v-for="dict in getDictOptions(DICT_TYPE.COMMON_STATUS)"
23+
:key="dict.value"
24+
:label="dict.label"
25+
:value="dict.value"
26+
/>
27+
</el-select>
28+
</el-form-item>
29+
<el-form-item>
30+
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
31+
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
32+
<el-button type="primary" @click="openModal('create')" v-hasPermi="['infra:config:create']">
33+
<Icon icon="ep:plus" class="mr-5px" /> 新增
34+
</el-button>
35+
</el-form-item>
36+
</el-form>
37+
</content-wrap>
38+
39+
<!-- 列表 -->
40+
<content-wrap>
41+
<el-table v-loading="loading" :data="list">
42+
<el-table-column label="客户端编号" align="center" prop="clientId" />
43+
<el-table-column label="客户端密钥" align="center" prop="secret" />
44+
<el-table-column label="应用名" align="center" prop="name" />
45+
<el-table-column label="应用图标" align="center" prop="logo">
46+
<template #default="scope">
47+
<img width="40px" height="40px" :src="scope.row.logo" />
48+
</template>
49+
</el-table-column>
50+
<el-table-column label="状态" align="center" prop="status">
51+
<template #default="scope">
52+
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
53+
</template>
54+
</el-table-column>
55+
<el-table-column label="访问令牌的有效期" align="center" prop="accessTokenValiditySeconds">
56+
<template #default="scope">{{ scope.row.accessTokenValiditySeconds }} 秒</template>
57+
</el-table-column>
58+
<el-table-column label="刷新令牌的有效期" align="center" prop="refreshTokenValiditySeconds">
59+
<template #default="scope">{{ scope.row.refreshTokenValiditySeconds }} 秒</template>
60+
</el-table-column>
61+
<el-table-column label="授权类型" align="center" prop="authorizedGrantTypes">
62+
<template #default="scope">
63+
<el-tag
64+
:disable-transitions="true"
65+
:key="index"
66+
v-for="(authorizedGrantType, index) in scope.row.authorizedGrantTypes"
67+
:index="index"
68+
>
69+
{{ authorizedGrantType }}
70+
</el-tag>
71+
</template>
72+
</el-table-column>
73+
<el-table-column
74+
label="创建时间"
75+
align="center"
76+
prop="createTime"
77+
width="180"
78+
:formatter="dateFormatter"
12679
/>
127-
<!-- 按钮：关闭 -->
128-
<XButton :loading="actionLoading" :title="t('dialog.close')" @click="dialogVisible = false" />
129-
</template>
130-
</XModal>
80+
<el-table-column label="操作" align="center">
81+
<template #default="scope">
82+
<el-button
83+
link
84+
type="primary"
85+
@click="openModal('update', scope.row.id)"
86+
v-hasPermi="['infra:config:update']"
87+
>
88+
编辑
89+
</el-button>
90+
<el-button
91+
link
92+
type="danger"
93+
@click="handleDelete(scope.row.id)"
94+
v-hasPermi="['infra:config:delete']"
95+
>
96+
删除
97+
</el-button>
98+
</template>
99+
</el-table-column>
100+
</el-table>
101+
<!-- 分页 -->
102+
<Pagination
103+
:total="total"
104+
v-model:page="queryParams.pageNo"
105+
v-model:limit="queryParams.pageSize"
106+
@pagination="getList"
107+
/>
108+
</content-wrap>
109+
110+
<!-- 表单弹窗：添加/修改 -->
111+
<ClientForm ref="modalRef" @success="getList" />
131112
</template>
132-
<script setup lang="ts" name="Client">
133-
import type { FormExpose } from '@/components/Form'
134-
// 业务相关的 import
113+
<script setup lang="ts">
114+
import { DICT_TYPE, getDictOptions } from '@/utils/dict'
115+
import { dateFormatter } from '@/utils/formatTime'
135116
import * as ClientApi from '@/api/system/oauth2/client'
136-
137-
const { t } = useI18n() // 国际化
117+
import ClientForm from './form.vue'
138118
const message = useMessage() // 消息弹窗
119+
const { t } = useI18n() // 国际化
139120
140-
// 列表相关的变量
141-
const [registerTable, { reload, deleteData }] = useXTable({
142-
allSchemas: allSchemas,
143-
getListApi: ClientApi.getOAuth2ClientPageApi,
144-
deleteApi: ClientApi.deleteOAuth2ClientApi
121+
const loading = ref(true) // 列表的加载中
122+
const total = ref(0) // 列表的总页数
123+
const list = ref([]) // 列表的数据
124+
const queryParams = reactive({
125+
pageNo: 1,
126+
pageSize: 10,
127+
name: null,
128+
status: null
145129
})
146-
// 弹窗相关的变量
147-
const dialogVisible = ref(false) // 是否显示弹出层
148-
const dialogTitle = ref('edit') // 弹出层标题
149-
const actionType = ref('') // 操作按钮的类型
150-
const actionLoading = ref(false) // 按钮 Loading
151-
const formRef = ref<FormExpose>() // 表单 Ref
152-
const detailData = ref() // 详情 Ref
153-
// 设置标题
154-
const setDialogTile = (type: string) => {
155-
dialogTitle.value = t('action.' + type)
156-
actionType.value = type
157-
dialogVisible.value = true
130+
const queryFormRef = ref() // 搜索的表单
131+
132+
/** 查询参数列表 */
133+
const getList = async () => {
134+
loading.value = true
135+
try {
136+
const data = await ClientApi.getOAuth2ClientPageApi(queryParams)
137+
list.value = data.list
138+
total.value = data.total
139+
} finally {
140+
loading.value = false
141+
}
158142
}
159143
160-
// 新增操作
161-
const handleCreate = () => {
162-
setDialogTile('create')
144+
/** 搜索按钮操作 */
145+
const handleQuery = () => {
146+
queryParams.pageNo = 1
147+
getList()
163148
}
164149
165-
// 修改操作
166-
const handleUpdate = async (rowId: number) => {
167-
setDialogTile('update')
168-
// 设置数据
169-
const res = await ClientApi.getOAuth2ClientApi(rowId)
170-
unref(formRef)?.setValues(res)
150+
/** 重置按钮操作 */
151+
const resetQuery = () => {
152+
queryFormRef.value.resetFields()
153+
handleQuery()
171154
}
172155
173-
// 详情操作
174-
const handleDetail = async (rowId: number) => {
175-
setDialogTile('detail')
176-
const res = await ClientApi.getOAuth2ClientApi(rowId)
177-
detailData.value = res
156+
/** 添加/修改操作 */
157+
const modalRef = ref()
158+
const openModal = (type: string, id?: number) => {
159+
modalRef.value.openModal(type, id)
178160
}
179161
180-
// 提交新增/修改的表单
181-
const submitForm = async () => {
182-
const elForm = unref(formRef)?.getElFormRef()
183-
if (!elForm) return
184-
elForm.validate(async (valid) => {
185-
if (valid) {
186-
actionLoading.value = true
187-
// 提交请求
188-
try {
189-
const data = unref(formRef)?.formModel as ClientApi.OAuth2ClientVO
190-
if (actionType.value === 'create') {
191-
await ClientApi.createOAuth2ClientApi(data)
192-
message.success(t('common.createSuccess'))
193-
} else {
194-
await ClientApi.updateOAuth2ClientApi(data)
195-
message.success(t('common.updateSuccess'))
196-
}
197-
dialogVisible.value = false
198-
} finally {
199-
actionLoading.value = false
200-
// 刷新列表
201-
await reload()
202-
}
203-
}
204-
})
162+
/** 删除按钮操作 */
163+
const handleDelete = async (id: number) => {
164+
try {
165+
// 删除的二次确认
166+
await message.delConfirm()
167+
// 发起删除
168+
await ClientApi.deleteOAuth2ClientApi(id)
169+
message.success(t('common.delSuccess'))
170+
// 刷新列表
171+
await getList()
172+
} catch {}
205173
}
174+
175+
/** 初始化 **/
176+
onMounted(() => {
177+
getList()
178+
})
206179
</script>

0 commit comments

Comments
 (0)