root/ludu-admin-vue3
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Vue3 重构：统一 form 的样式

Browse Source
This commit is contained in:
YunaiV 2023-03-20 00:20:24 +08:00
parent 40bd2c57f8
commit c40de03302
6 changed files with 82 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/views/infra/config/index.vue
View File

@ -1,13 +1,20 @@
<template>
<!-- 搜索 -->
<content-wrap>
<el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true">
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="68px"
>
<el-form-item label="参数名称" prop="name">
<el-input
v-model="queryParams.name"
placeholder="请输入参数名称"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="参数键名" prop="key">
@ -16,10 +23,16 @@
placeholder="请输入参数键名"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="系统内置" prop="type">
<el-select v-model="queryParams.type" placeholder="请选择系统内置" clearable>
<el-select
v-model="queryParams.type"
placeholder="请选择系统内置"
clearable
class="!w-240px"
>
<el-option
v-for="dict in getDictOptions(DICT_TYPE.INFRA_CONFIG_TYPE)"
:key="parseInt(dict.value)"
@ -36,6 +49,7 @@
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
class="!w-240px"
/>
</el-form-item>
<el-form-item>

24
src/views/system/dict/data.vue
View File

@ -8,13 +8,8 @@
label-width="68px"
>
<el-form-item label="字典名称" prop="dictType">
<el-select v-model="queryParams.dictType">
<el-option
v-for="item in simpleDictList"
:key="item.id"
:label="item.name"
:value="item.type"
/>
<el-select v-model="queryParams.dictType" class="!w-240px">
<el-option v-for="item in dicts" :key="item.type" :label="item.name" :value="item.type" />
</el-select>
</el-form-item>
<el-form-item label="字典标签" prop="label">
@ -23,10 +18,11 @@
placeholder="请输入字典标签"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select v-model="queryParams.status" placeholder="数据状态" clearable>
<el-select v-model="queryParams.status" placeholder="数据状态" clearable class="!w-240px">
<el-option
v-for="dict in getDictOptions(DICT_TYPE.COMMON_STATUS)"
:key="dict.value"
@ -111,18 +107,15 @@
</template>
<script setup lang="ts" name="Data">
import * as DictDataApi from '@/api/system/dict/dict.data'
import * as DictTypeApi from '@/api/system/dict/dict.data'
import * as DictTypeApi from '@/api/system/dict/dict.type'
import { getDictOptions, DICT_TYPE } from '@/utils/dict'
import download from '@/utils/download'
import { dateFormatter } from '@/utils/formatTime'
import DataForm from './data.form.vue'
import type { DictTypeVO } from '@/api/system/dict/dict.type'
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const route = useRoute() // 路由
const simpleDictList = ref<DictTypeVO[]>()
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
@ -135,6 +128,7 @@ const queryParams = reactive({
})
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中
const dicts = ref<DictTypeApi.DictTypeVO[]>() // 字典类型的列表
/** 查询参数列表 */
const getList = async () => {
@ -195,14 +189,14 @@ const handleExport = async () => {
}
/** 查询字典（精简)列表 */
const getSimpleDictList = async () => {
simpleDictList.value = await DictTypeApi.listSimpleDictData()
const getDictList = async () => {
dicts.value = await DictTypeApi.listSimpleDictType()
}
/** 初始化 **/
onMounted(() => {
getList()
// 查询字典（精简)列表
getSimpleDictList()
getDictList()
})
</script>

13
src/views/system/dict/index.vue
View File

@ -13,8 +13,8 @@
v-model="queryParams.name"
placeholder="请输入字典名称"
clearable
style="width: 240px"
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="字典类型" prop="type">
@ -22,17 +22,12 @@
v-model="queryParams.type"
placeholder="请输入字典类型"
clearable
style="width: 240px"
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select
v-model="queryParams.status"
placeholder="字典状态"
clearable
style="width: 240px"
>
<el-select v-model="queryParams.status" placeholder="字典状态" clearable class="!w-240px">
<el-option
v-for="dict in getDictOptions(DICT_TYPE.COMMON_STATUS)"
:key="parseInt(dict.value)"
@ -44,13 +39,13 @@
<el-form-item label="创建时间" prop="createTime">
<el-date-picker
v-model="queryParams.createTime"
style="width: 240px"
value-format="yyyy-MM-dd HH:mm:ss"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
class="!w-240px"
/>
</el-form-item>
<el-form-item>

16
src/views/system/notice/index.vue
View File

@ -1,17 +1,29 @@
<template>
<content-wrap>
<!-- 搜索工作栏 -->
<el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true">
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="68px"
>
<el-form-item label="公告标题" prop="title">
<el-input
v-model="queryParams.title"
placeholder="请输入公告标题"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="公告状态" prop="status">
<el-select v-model="queryParams.status" placeholder="请选择公告状态" clearable>
<el-select
v-model="queryParams.status"
placeholder="请选择公告状态"
clearable
class="!w-240px"
>
<el-option
v-for="dict in getDictOptions(DICT_TYPE.COMMON_STATUS)"
:key="parseInt(dict.value)"

17
src/views/system/oauth2/token/index.vue
View File

@ -1,17 +1,29 @@
<template>
<content-wrap>
<!-- 搜索工作栏 -->
<el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true">
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="90px"
>
<el-form-item label="用户编号" prop="userId">
<el-input
v-model="queryParams.userId"
placeholder="请输入用户编号"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="用户类型" prop="userType">
<el-select v-model="queryParams.userType" placeholder="请选择用户类型" clearable>
<el-select
v-model="queryParams.userType"
placeholder="请选择用户类型"
clearable
class="!w-240px"
>
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.USER_TYPE)"
:key="dict.value"
@ -26,6 +38,7 @@
placeholder="请输入客户端编号"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item>

29
src/views/system/operatelog/index.vue
View File

@ -1,13 +1,20 @@
<template>
<content-wrap>
<!-- 搜索工作栏 -->
<el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true">
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="68px"
>
<el-form-item label="系统模块" prop="module">
<el-input
v-model="queryParams.module"
placeholder="请输入系统模块"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="操作人员" prop="userNickname">
@ -16,10 +23,16 @@
placeholder="请输入操作人员"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="类型" prop="type">
<el-select v-model="queryParams.type" placeholder="操作类型" clearable>
<el-form-item label="操作类型" prop="type">
<el-select
v-model="queryParams.type"
placeholder="请选择操作类型"
clearable
class="!w-240px"
>
<el-option
v-for="dict in getDictOptions(DICT_TYPE.SYSTEM_OPERATE_TYPE)"
:key="parseInt(dict.value)"
@ -28,8 +41,13 @@
/>
</el-select>
</el-form-item>
<el-form-item label="状态" prop="success">
<el-select v-model="queryParams.success" placeholder="操作状态" clearable>
<el-form-item label="操作状态" prop="success">
<el-select
v-model="queryParams.success"
placeholder="请选择操作状态"
clearable
class="!w-240px"
>
<el-option :key="true" label="成功" :value="true" />
<el-option :key="false" label="失败" :value="false" />
</el-select>
@ -42,6 +60,7 @@
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
class="!w-240px"
/>
</el-form-item>
<el-form-item>