hhyykk/ipms-sjy-ui
1
1
Fork 0
mirror of https://gitee.com/hhyykk/ipms-sjy-ui.git synced 2025-07-15 19:35:07 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Vue3 重构：Review 字典数据界面

Browse Source
This commit is contained in:
YunaiV
2023-03-19 22:14:55 +08:00
parent 2b52683e3c
commit 40bd2c57f8
9 changed files with 128 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/views/system/dict/data.form.vue
View File

@ -17,7 +17,6 @@
<el-form-item label="数据标签" prop="label">
<el-input v-model="formData.label" placeholder="请输入数据标签" />
</el-form-item>
<el-form-item label="数据键值" prop="value">
<el-input v-model="formData.value" placeholder="请输入数据键值" />
</el-form-item>
@ -61,9 +60,8 @@
</template>
<script setup lang="ts">
import { DICT_TYPE, getDictOptions } from '@/utils/dict'
import * as DictDataApi from '@/api/system/dict/dict.data'
import { DictDataVO } from '@/api/system/dict/types'
import { CommonStatusEnum } from '@/utils/constants'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
@ -73,15 +71,14 @@ const formLoading = ref(false) // 表单的加载中：1）修改时的数据加
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
id: undefined,
sort: 0,
sort: undefined,
label: '',
value: '',
dictType: '',
status: 0,
status: CommonStatusEnum.ENABLE,
colorType: '',
cssClass: '',
remark: '',
createTime: undefined
remark: ''
})
const formRules = reactive({
label: [{ required: true, message: '数据标签不能为空', trigger: 'blur' }],
@ -91,7 +88,6 @@ const formRules = reactive({
const formRef = ref() // 表单 Ref
// 数据标签回显样式
const colorTypeOptions = readonly([
{
value: 'default',
@ -129,7 +125,7 @@ const openModal = async (type: string, id?: number) => {
if (id) {
formLoading.value = true
try {
formData.value = await DictDataApi.getDictDataApi(id)
formData.value = await DictDataApi.getDictData(id)
} finally {
formLoading.value = false
}
@ -147,12 +143,12 @@ const submitForm = async () => {
// 提交请求
formLoading.value = true
try {
const data = formData.value as DictDataVO
const data = formData.value as DictDataApi.DictDataVO
if (formType.value === 'create') {
await DictDataApi.createDictDataApi(data)
await DictDataApi.createDictData(data)
message.success(t('common.createSuccess'))
} else {
await DictDataApi.updateDictDataApi(data)
await DictDataApi.updateDictData(data)
message.success(t('common.updateSuccess'))
}
modelVisible.value = false
@ -171,11 +167,10 @@ const resetForm = () => {
label: '',
value: '',
dictType: '',
status: 0,
status: CommonStatusEnum.ENABLE,
colorType: '',
cssClass: '',
remark: '',
createTime: undefined
remark: ''
}
formRef.value?.resetFields()
}

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

@ -1,6 +1,12 @@
<template>
<content-wrap>
<el-form :model="queryParams" ref="queryFormRef" size="small" :inline="true" label-width="68px">
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="68px"
>
<el-form-item label="字典名称" prop="dictType">
<el-select v-model="queryParams.dictType">
<el-option
@ -46,7 +52,10 @@
</el-button>
</el-form-item>
</el-form>
<!-- 列表 -->
</content-wrap>
<!-- 列表 -->
<content-wrap>
<el-table v-loading="loading" :data="list">
<el-table-column label="字典编码" align="center" prop="id" />
<el-table-column label="字典标签" align="center" prop="label" />
@ -59,12 +68,7 @@
</el-table-column>
<el-table-column label="颜色类型" align="center" prop="colorType" />
<el-table-column label="CSS Class" align="center" prop="cssClass" />
<el-table-column
label="备注"
align="center"
prop="remark"
:show-overflow-tooltip="tableTooltipConfig"
/>
<el-table-column label="备注" align="center" prop="remark" show-overflow-tooltip />
<el-table-column
label="创建时间"
align="center"
@ -72,21 +76,28 @@
width="180"
:formatter="dateFormatter"
/>
<el-table-column label="操作" align="center">
<template #default="scope">
<el-button
link
type="primary"
@click="openModal('update', scope.row.id)"
v-hasPermi="['system:dict:update']"
><Icon icon="ic:outline-mode" class="mr-5px" />修改</el-button
>
<el-button link @click="handleDelete(scope.row.id)" v-hasPermi="['system:dict:delete']"
><Icon icon="material-symbols:delete-forever-sharp" class="mr-5px" />删除</el-button
修改
</el-button>
<el-button
link
type="danger"
@click="handleDelete(scope.row.id)"
v-hasPermi="['system:dict:delete']"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
@ -94,30 +105,24 @@
@pagination="getList"
/>
</content-wrap>
<!-- 表单弹窗：添加/修改 -->
<data-form ref="modalRef" @success="getList" />
</template>
<script setup lang="ts" name="Data">
import * as DictDataApi from '@/api/system/dict/dict.data'
import { listSimpleDictTypeApi } from '@/api/system/dict/dict.type'
import * as DictTypeApi from '@/api/system/dict/dict.data'
import { getDictOptions, DICT_TYPE } from '@/utils/dict'
import download from '@/utils/download'
import { dateFormatter } from '@/utils/formatTime'
import DataForm from './data.form.vue'
import { DictTypeVO } from '@/api/system/dict/types'
import { useRoute } from 'vue-router'
import type { DictTypeVO } from '@/api/system/dict/dict.type'
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const route = useRoute()
const route = useRoute() // 路由
const simpleDictList = ref<DictTypeVO[]>()
const tableTooltipConfig = readonly({
appendTo: 'body'
})
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
@ -135,18 +140,13 @@ const exportLoading = ref(false) // 导出的加载中
const getList = async () => {
loading.value = true
try {
const data = await DictDataApi.getDictDataPageApi(queryParams)
const data = await DictDataApi.getDictDataPage(queryParams)
list.value = data.list
total.value = data.total
} finally {
loading.value = false
}
}
// 查询字典（精简)列表
const getSimpleDictList = async () => {
const data = await listSimpleDictTypeApi()
simpleDictList.value = data
}
/** 搜索按钮操作 */
const handleQuery = () => {
@ -172,7 +172,7 @@ const handleDelete = async (id: number) => {
// 删除的二次确认
await message.delConfirm()
// 发起删除
await DictDataApi.deleteDictDataApi(id)
await DictDataApi.deleteDictData(id)
message.success(t('common.delSuccess'))
// 刷新列表
await getList()
@ -194,10 +194,15 @@ const handleExport = async () => {
}
}
/** 查询字典（精简)列表 */
const getSimpleDictList = async () => {
simpleDictList.value = await DictTypeApi.listSimpleDictData()
}
/** 初始化 **/
onMounted(() => {
getList()
// 查询字典（精简)列表
getSimpleDictList()
})
// 查询字典（精简)列表
getSimpleDictList()
</script>

15
src/views/system/dict/form.vue
View File

@ -43,7 +43,8 @@
<script setup lang="ts">
import { DICT_TYPE, getDictOptions } from '@/utils/dict'
import * as DictTypeApi from '@/api/system/dict/dict.type'
import { DictTypeVO } from '@/api/system/dict/types'
import { CommonStatusEnum } from '@/utils/constants'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
@ -55,7 +56,7 @@ const formData = ref({
id: undefined,
name: '',
type: '',
status: 0,
status: CommonStatusEnum.ENABLE,
remark: ''
})
const formRules = reactive({
@ -74,7 +75,7 @@ const openModal = async (type: string, id?: number) => {
if (id) {
formLoading.value = true
try {
formData.value = await DictTypeApi.getDictTypeApi(id)
formData.value = await DictTypeApi.getDictType(id)
} finally {
formLoading.value = false
}
@ -92,12 +93,12 @@ const submitForm = async () => {
// 提交请求
formLoading.value = true
try {
const data = formData.value as DictTypeVO
const data = formData.value as DictTypeApi.DictTypeVO
if (formType.value === 'create') {
await DictTypeApi.createDictTypeApi(data)
await DictTypeApi.createDictType(data)
message.success(t('common.createSuccess'))
} else {
await DictTypeApi.updateDictTypeApi(data)
await DictTypeApi.updateDictType(data)
message.success(t('common.updateSuccess'))
}
modelVisible.value = false
@ -114,7 +115,7 @@ const resetForm = () => {
id: undefined,
type: '',
name: '',
status: undefined,
status: CommonStatusEnum.ENABLE,
remark: ''
}
formRef.value?.resetFields()

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

@ -1,6 +1,13 @@
<template>
<!-- 搜索工作栏 -->
<content-wrap>
<el-form :model="queryParams" ref="queryFormRef" size="small" :inline="true" label-width="68px">
<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"
@ -63,20 +70,14 @@
</el-button>
</el-form-item>
</el-form>
</content-wrap>
<!-- 列表 -->
<!-- 列表 -->
<content-wrap>
<el-table v-loading="loading" :data="list">
<el-table-column label="字典编号" align="center" prop="id" />
<el-table-column label="字典名称" align="center" prop="name" show-overflow-tooltip />
<el-table-column label="字典类型" align="center" show-overflow-tooltip>
<template #default="scope">
<div>
<router-link :to="'/dict/type/data/' + scope.row.type">
<span>{{ scope.row.type }}</span>
</router-link>
</div>
</template>
</el-table-column>
<el-table-column label="字典类型" align="center" prop="type" width="300" />
<el-table-column label="状态" align="center" prop="status">
<template #default="scope">
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
@ -90,22 +91,31 @@
prop="createTime"
width="180"
/>
<el-table-column label="操作" align="center">
<template #default="scope">
<el-button
link
type="primary"
@click="openModal('update', scope.row.id)"
v-hasPermi="['system:dict:update']"
><Icon icon="ic:outline-mode" class="mr-5px" />修改</el-button
>
<el-button link @click="handleDelete(scope.row.id)" v-hasPermi="['system:dict:delete']"
><Icon icon="material-symbols:delete-forever-sharp" class="mr-5px" />删除</el-button
修改
</el-button>
<router-link :to="'/dict/type/data/' + scope.row.type">
<el-button link type="primary">数据</el-button>
</router-link>
<el-button
link
type="danger"
@click="handleDelete(scope.row.id)"
v-hasPermi="['system:dict:delete']"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
@ -113,25 +123,24 @@
@pagination="getList"
/>
</content-wrap>
<!-- 表单弹窗：添加/修改 -->
<dict-type-form ref="modalRef" @success="getList" />
</template>
<script setup lang="ts" name="Dict">
import * as DictTypeApi from '@/api/system/dict/dict.type'
import { getDictOptions, DICT_TYPE } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'
import * as DictTypeApi from '@/api/system/dict/dict.type'
import DictTypeForm from './form.vue'
import { DictTypePageReqVO } from '@/api/system/dict/types'
import download from '@/utils/download'
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 字典表格数据
const queryParams = reactive<DictTypePageReqVO>({
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
name: '',
@ -146,7 +155,7 @@ const exportLoading = ref(false) // 导出的加载中
const getList = async () => {
loading.value = true
try {
const data = await DictTypeApi.getDictTypePageApi(queryParams)
const data = await DictTypeApi.getDictTypePage(queryParams)
list.value = data.list
total.value = data.total
} finally {
@ -178,7 +187,7 @@ const handleDelete = async (id: number) => {
// 删除的二次确认
await message.delConfirm()
// 发起删除
await DictTypeApi.deleteDictTypeApi(id)
await DictTypeApi.deleteDictType(id)
message.success(t('common.delSuccess'))
// 刷新列表
await getList()
@ -192,7 +201,7 @@ const handleExport = async () => {
await message.exportConfirm()
// 发起导出
exportLoading.value = true
const data = await DictTypeApi.exportDictTypeApi(queryParams)
const data = await DictTypeApi.exportDictType(queryParams)
download.excel(data, '字典类型.xls')
} catch {
} finally {