Skip to content

Commit c40de03

Browse files
YunaiVYunaiV
committed
Vue3 重构：统一 form 的样式
1 parent 40bd2c5 commit c40de03

File tree

6 files changed

+82
-35
lines changed

6 files changed

+82
-35
lines changed

‎src/views/infra/config/index.vue

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,20 @@
11
<template>
22
<!-- 搜索 -->
33
<content-wrap>
4-
<el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true">
4+
<el-form
5+
class="-mb-15px"
6+
:model="queryParams"
7+
ref="queryFormRef"
8+
:inline="true"
9+
label-width="68px"
10+
>
511
<el-form-item label="参数名称" prop="name">
612
<el-input
713
v-model="queryParams.name"
814
placeholder="请输入参数名称"
915
clearable
1016
@keyup.enter="handleQuery"
17+
class="!w-240px"
1118
/>
1219
</el-form-item>
1320
<el-form-item label="参数键名" prop="key">
@@ -16,10 +23,16 @@
1623
placeholder="请输入参数键名"
1724
clearable
1825
@keyup.enter="handleQuery"
26+
class="!w-240px"
1927
/>
2028
</el-form-item>
2129
<el-form-item label="系统内置" prop="type">
22-
<el-select v-model="queryParams.type" placeholder="请选择系统内置" clearable>
30+
<el-select
31+
v-model="queryParams.type"
32+
placeholder="请选择系统内置"
33+
clearable
34+
class="!w-240px"
35+
>
2336
<el-option
2437
v-for="dict in getDictOptions(DICT_TYPE.INFRA_CONFIG_TYPE)"
2538
:key="parseInt(dict.value)"
@@ -36,6 +49,7 @@
3649
start-placeholder="开始日期"
3750
end-placeholder="结束日期"
3851
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
52+
class="!w-240px"
3953
/>
4054
</el-form-item>
4155
<el-form-item>

‎src/views/system/dict/data.vue

Lines changed: 9 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,8 @@
88
label-width="68px"
99
>
1010
<el-form-item label="字典名称" prop="dictType">
11-
<el-select v-model="queryParams.dictType">
12-
<el-option
13-
v-for="item in simpleDictList"
14-
:key="item.id"
15-
:label="item.name"
16-
:value="item.type"
17-
/>
11+
<el-select v-model="queryParams.dictType" class="!w-240px">
12+
<el-option v-for="item in dicts" :key="item.type" :label="item.name" :value="item.type" />
1813
</el-select>
1914
</el-form-item>
2015
<el-form-item label="字典标签" prop="label">
@@ -23,10 +18,11 @@
2318
placeholder="请输入字典标签"
2419
clearable
2520
@keyup.enter="handleQuery"
21+
class="!w-240px"
2622
/>
2723
</el-form-item>
2824
<el-form-item label="状态" prop="status">
29-
<el-select v-model="queryParams.status" placeholder="数据状态" clearable>
25+
<el-select v-model="queryParams.status" placeholder="数据状态" clearable class="!w-240px">
3026
<el-option
3127
v-for="dict in getDictOptions(DICT_TYPE.COMMON_STATUS)"
3228
:key="dict.value"
@@ -111,18 +107,15 @@
111107
</template>
112108
<script setup lang="ts" name="Data">
113109
import * as DictDataApi from '@/api/system/dict/dict.data'
114-
import * as DictTypeApi from '@/api/system/dict/dict.data'
110+
import * as DictTypeApi from '@/api/system/dict/dict.type'
115111
import { getDictOptions, DICT_TYPE } from '@/utils/dict'
116112
import download from '@/utils/download'
117113
import { dateFormatter } from '@/utils/formatTime'
118114
import DataForm from './data.form.vue'
119-
import type { DictTypeVO } from '@/api/system/dict/dict.type'
120115
const message = useMessage() // 消息弹窗
121116
const { t } = useI18n() // 国际化
122117
const route = useRoute() // 路由
123118
124-
const simpleDictList = ref<DictTypeVO[]>()
125-
126119
const loading = ref(true) // 列表的加载中
127120
const total = ref(0) // 列表的总页数
128121
const list = ref([]) // 列表的数据
@@ -135,6 +128,7 @@ const queryParams = reactive({
135128
})
136129
const queryFormRef = ref() // 搜索的表单
137130
const exportLoading = ref(false) // 导出的加载中
131+
const dicts = ref<DictTypeApi.DictTypeVO[]>() // 字典类型的列表
138132
139133
/** 查询参数列表 */
140134
const getList = async () => {
@@ -195,14 +189,14 @@ const handleExport = async () => {
195189
}
196190
197191
/** 查询字典（精简)列表 */
198-
const getSimpleDictList = async () => {
199-
simpleDictList.value = await DictTypeApi.listSimpleDictData()
192+
const getDictList = async () => {
193+
dicts.value = await DictTypeApi.listSimpleDictType()
200194
}
201195
202196
/** 初始化 **/
203197
onMounted(() => {
204198
getList()
205199
// 查询字典（精简)列表
206-
getSimpleDictList()
200+
getDictList()
207201
})
208202
</script>

‎src/views/system/dict/index.vue

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -13,26 +13,21 @@
1313
v-model="queryParams.name"
1414
placeholder="请输入字典名称"
1515
clearable
16-
style="width: 240px"
1716
@keyup.enter="handleQuery"
17+
class="!w-240px"
1818
/>
1919
</el-form-item>
2020
<el-form-item label="字典类型" prop="type">
2121
<el-input
2222
v-model="queryParams.type"
2323
placeholder="请输入字典类型"
2424
clearable
25-
style="width: 240px"
2625
@keyup.enter="handleQuery"
26+
class="!w-240px"
2727
/>
2828
</el-form-item>
2929
<el-form-item label="状态" prop="status">
30-
<el-select
31-
v-model="queryParams.status"
32-
placeholder="字典状态"
33-
clearable
34-
style="width: 240px"
35-
>
30+
<el-select v-model="queryParams.status" placeholder="字典状态" clearable class="!w-240px">
3631
<el-option
3732
v-for="dict in getDictOptions(DICT_TYPE.COMMON_STATUS)"
3833
:key="parseInt(dict.value)"
@@ -44,13 +39,13 @@
4439
<el-form-item label="创建时间" prop="createTime">
4540
<el-date-picker
4641
v-model="queryParams.createTime"
47-
style="width: 240px"
4842
value-format="yyyy-MM-dd HH:mm:ss"
4943
type="daterange"
5044
range-separator="-"
5145
start-placeholder="开始日期"
5246
end-placeholder="结束日期"
5347
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
48+
class="!w-240px"
5449
/>
5550
</el-form-item>
5651
<el-form-item>

‎src/views/system/notice/index.vue

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,29 @@
11
<template>
22
<content-wrap>
33
<!-- 搜索工作栏 -->
4-
<el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true">
4+
<el-form
5+
class="-mb-15px"
6+
:model="queryParams"
7+
ref="queryFormRef"
8+
:inline="true"
9+
label-width="68px"
10+
>
511
<el-form-item label="公告标题" prop="title">
612
<el-input
713
v-model="queryParams.title"
814
placeholder="请输入公告标题"
915
clearable
1016
@keyup.enter="handleQuery"
17+
class="!w-240px"
1118
/>
1219
</el-form-item>
1320
<el-form-item label="公告状态" prop="status">
14-
<el-select v-model="queryParams.status" placeholder="请选择公告状态" clearable>
21+
<el-select
22+
v-model="queryParams.status"
23+
placeholder="请选择公告状态"
24+
clearable
25+
class="!w-240px"
26+
>
1527
<el-option
1628
v-for="dict in getDictOptions(DICT_TYPE.COMMON_STATUS)"
1729
:key="parseInt(dict.value)"

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

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,29 @@
11
<template>
22
<content-wrap>
33
<!-- 搜索工作栏 -->
4-
<el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true">
4+
<el-form
5+
class="-mb-15px"
6+
:model="queryParams"
7+
ref="queryFormRef"
8+
:inline="true"
9+
label-width="90px"
10+
>
511
<el-form-item label="用户编号" prop="userId">
612
<el-input
713
v-model="queryParams.userId"
814
placeholder="请输入用户编号"
915
clearable
1016
@keyup.enter="handleQuery"
17+
class="!w-240px"
1118
/>
1219
</el-form-item>
1320
<el-form-item label="用户类型" prop="userType">
14-
<el-select v-model="queryParams.userType" placeholder="请选择用户类型" clearable>
21+
<el-select
22+
v-model="queryParams.userType"
23+
placeholder="请选择用户类型"
24+
clearable
25+
class="!w-240px"
26+
>
1527
<el-option
1628
v-for="dict in getIntDictOptions(DICT_TYPE.USER_TYPE)"
1729
:key="dict.value"
@@ -26,6 +38,7 @@
2638
placeholder="请输入客户端编号"
2739
clearable
2840
@keyup.enter="handleQuery"
41+
class="!w-240px"
2942
/>
3043
</el-form-item>
3144
<el-form-item>

‎src/views/system/operatelog/index.vue

Lines changed: 24 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,20 @@
11
<template>
22
<content-wrap>
33
<!-- 搜索工作栏 -->
4-
<el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true">
4+
<el-form
5+
class="-mb-15px"
6+
:model="queryParams"
7+
ref="queryFormRef"
8+
:inline="true"
9+
label-width="68px"
10+
>
511
<el-form-item label="系统模块" prop="module">
612
<el-input
713
v-model="queryParams.module"
814
placeholder="请输入系统模块"
915
clearable
1016
@keyup.enter="handleQuery"
17+
class="!w-240px"
1118
/>
1219
</el-form-item>
1320
<el-form-item label="操作人员" prop="userNickname">
@@ -16,10 +23,16 @@
1623
placeholder="请输入操作人员"
1724
clearable
1825
@keyup.enter="handleQuery"
26+
class="!w-240px"
1927
/>
2028
</el-form-item>
21-
<el-form-item label="类型" prop="type">
22-
<el-select v-model="queryParams.type" placeholder="操作类型" clearable>
29+
<el-form-item label="操作类型" prop="type">
30+
<el-select
31+
v-model="queryParams.type"
32+
placeholder="请选择操作类型"
33+
clearable
34+
class="!w-240px"
35+
>
2336
<el-option
2437
v-for="dict in getDictOptions(DICT_TYPE.SYSTEM_OPERATE_TYPE)"
2538
:key="parseInt(dict.value)"
@@ -28,8 +41,13 @@
2841
/>
2942
</el-select>
3043
</el-form-item>
31-
<el-form-item label="状态" prop="success">
32-
<el-select v-model="queryParams.success" placeholder="操作状态" clearable>
44+
<el-form-item label="操作状态" prop="success">
45+
<el-select
46+
v-model="queryParams.success"
47+
placeholder="请选择操作状态"
48+
clearable
49+
class="!w-240px"
50+
>
3351
<el-option :key="true" label="成功" :value="true" />
3452
<el-option :key="false" label="失败" :value="false" />
3553
</el-select>
@@ -42,6 +60,7 @@
4260
start-placeholder="开始日期"
4361
end-placeholder="结束日期"
4462
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
63+
class="!w-240px"
4564
/>
4665
</el-form-item>
4766
<el-form-item>

0 commit comments

Comments
 (0)