Skip to content

Commit 2b52683

Browse files
YunaiVgitee-org
YunaiV
authored and
gitee-org
committed
!38 完成字典模块
Merge pull request !38 from Theo/master
2 parents cf95959 + 5d062d5 commit 2b52683

File tree

8 files changed

+727
-410
lines changed

8 files changed

+727
-410
lines changed

‎src/api/system/dict/types.ts

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,18 @@
11
export type DictTypeVO = {
2-
id: number
2+
id: number | undefined
33
name: string
44
type: string
5-
status: number
5+
status: number | undefined
66
remark: string
77
createTime: Date
88
}
99

1010
export type DictTypePageReqVO = {
11+
pageNo: number
12+
pageSize: number
1113
name: string
1214
type: string
13-
status: number
15+
status: number | undefined
1416
createTime: Date[]
1517
}
1618

@@ -22,21 +24,23 @@ export type DictTypeExportReqVO = {
2224
}
2325

2426
export type DictDataVO = {
25-
id: number
26-
sort: number
27+
id: number | undefined
28+
sort: number | undefined
2729
label: string
2830
value: string
2931
dictType: string
3032
status: number
3133
colorType: string
3234
cssClass: string
3335
remark: string
34-
createTime: Date
36+
createTime: Date | undefined
3537
}
3638
export type DictDataPageReqVO = {
39+
pageNo: number
40+
pageSize: number
3741
label: string
3842
dictType: string
39-
status: number
43+
status: number | undefined
4044
}
4145

4246
export type DictDataExportReqVO = {

‎src/router/modules/remaining.ts

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,31 @@ const remainingRouter: AppRouteRecordRaw[] = [
104104
}
105105
]
106106
},
107+
108+
{
109+
path: '/dict',
110+
component: Layout,
111+
name: 'dict',
112+
meta: {
113+
hidden: true
114+
},
115+
children: [
116+
{
117+
path: 'type/data/:dictType',
118+
component: () => import('@/views/system/dict/data.vue'),
119+
name: 'data',
120+
meta: {
121+
title: '字典数据',
122+
noCache: true,
123+
hidden: true,
124+
canTo: true,
125+
icon: '',
126+
activeMenu: 'system/dict/data'
127+
}
128+
}
129+
]
130+
},
131+
107132
{
108133
path: '/codegen',
109134
component: Layout,

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

Lines changed: 182 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
1+
<template>
2+
<Dialog :title="modelTitle" v-model="modelVisible">
3+
<el-form
4+
ref="formRef"
5+
:model="formData"
6+
:rules="formRules"
7+
label-width="80px"
8+
v-loading="formLoading"
9+
>
10+
<el-form-item label="字典类型" prop="type">
11+
<el-input
12+
:disabled="typeof formData.id !== 'undefined'"
13+
v-model="formData.dictType"
14+
placeholder="请输入参数名称"
15+
/>
16+
</el-form-item>
17+
<el-form-item label="数据标签" prop="label">
18+
<el-input v-model="formData.label" placeholder="请输入数据标签" />
19+
</el-form-item>
20+
21+
<el-form-item label="数据键值" prop="value">
22+
<el-input v-model="formData.value" placeholder="请输入数据键值" />
23+
</el-form-item>
24+
<el-form-item label="显示排序" prop="sort">
25+
<el-input-number v-model="formData.sort" controls-position="right" :min="0" />
26+
</el-form-item>
27+
<el-form-item label="状态" prop="status">
28+
<el-radio-group v-model="formData.status">
29+
<el-radio
30+
v-for="dict in getDictOptions(DICT_TYPE.COMMON_STATUS)"
31+
:key="parseInt(dict.value)"
32+
:label="parseInt(dict.value)"
33+
>{{ dict.label }}</el-radio
34+
>
35+
</el-radio-group>
36+
</el-form-item>
37+
<el-form-item label="颜色类型" prop="colorType">
38+
<el-select v-model="formData.colorType">
39+
<el-option
40+
v-for="item in colorTypeOptions"
41+
:key="item.value"
42+
:label="item.label + '(' + item.value + ')'"
43+
:value="item.value"
44+
/>
45+
</el-select>
46+
</el-form-item>
47+
<el-form-item label="CSS Class" prop="cssClass">
48+
<el-input v-model="formData.cssClass" placeholder="请输入 CSS Class" />
49+
</el-form-item>
50+
<el-form-item label="备注" prop="remark">
51+
<el-input v-model="formData.remark" type="textarea" placeholder="请输入内容" />
52+
</el-form-item>
53+
</el-form>
54+
<template #footer>
55+
<div class="dialog-footer">
56+
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
57+
<el-button @click="modelVisible = false">取 消</el-button>
58+
</div>
59+
</template>
60+
</Dialog>
61+
</template>
62+
<script setup lang="ts">
63+
import { DICT_TYPE, getDictOptions } from '@/utils/dict'
64+
65+
import * as DictDataApi from '@/api/system/dict/dict.data'
66+
import { DictDataVO } from '@/api/system/dict/types'
67+
const { t } = useI18n() // 国际化
68+
const message = useMessage() // 消息弹窗
69+
70+
const modelVisible = ref(false) // 弹窗的是否展示
71+
const modelTitle = ref('') // 弹窗的标题
72+
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
73+
const formType = ref('') // 表单的类型：create - 新增；update - 修改
74+
const formData = ref({
75+
id: undefined,
76+
sort: 0,
77+
label: '',
78+
value: '',
79+
dictType: '',
80+
status: 0,
81+
colorType: '',
82+
cssClass: '',
83+
remark: '',
84+
createTime: undefined
85+
})
86+
const formRules = reactive({
87+
label: [{ required: true, message: '数据标签不能为空', trigger: 'blur' }],
88+
value: [{ required: true, message: '数据键值不能为空', trigger: 'blur' }],
89+
sort: [{ required: true, message: '数据顺序不能为空', trigger: 'blur' }]
90+
})
91+
const formRef = ref() // 表单 Ref
92+
93+
// 数据标签回显样式
94+
95+
const colorTypeOptions = readonly([
96+
{
97+
value: 'default',
98+
label: '默认'
99+
},
100+
{
101+
value: 'primary',
102+
label: '主要'
103+
},
104+
{
105+
value: 'success',
106+
label: '成功'
107+
},
108+
{
109+
value: 'info',
110+
label: '信息'
111+
},
112+
{
113+
value: 'warning',
114+
label: '警告'
115+
},
116+
{
117+
value: 'danger',
118+
label: '危险'
119+
}
120+
])
121+
122+
/** 打开弹窗 */
123+
const openModal = async (type: string, id?: number) => {
124+
modelVisible.value = true
125+
modelTitle.value = t('action.' + type)
126+
formType.value = type
127+
resetForm()
128+
// 修改时，设置数据
129+
if (id) {
130+
formLoading.value = true
131+
try {
132+
formData.value = await DictDataApi.getDictDataApi(id)
133+
} finally {
134+
formLoading.value = false
135+
}
136+
}
137+
}
138+
defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
139+
140+
/** 提交表单 */
141+
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
142+
const submitForm = async () => {
143+
// 校验表单
144+
if (!formRef) return
145+
const valid = await formRef.value.validate()
146+
if (!valid) return
147+
// 提交请求
148+
formLoading.value = true
149+
try {
150+
const data = formData.value as DictDataVO
151+
if (formType.value === 'create') {
152+
await DictDataApi.createDictDataApi(data)
153+
message.success(t('common.createSuccess'))
154+
} else {
155+
await DictDataApi.updateDictDataApi(data)
156+
message.success(t('common.updateSuccess'))
157+
}
158+
modelVisible.value = false
159+
// 发送操作成功的事件
160+
emit('success')
161+
} finally {
162+
formLoading.value = false
163+
}
164+
}
165+
166+
/** 重置表单 */
167+
const resetForm = () => {
168+
formData.value = {
169+
id: undefined,
170+
sort: undefined,
171+
label: '',
172+
value: '',
173+
dictType: '',
174+
status: 0,
175+
colorType: '',
176+
cssClass: '',
177+
remark: '',
178+
createTime: undefined
179+
}
180+
formRef.value?.resetFields()
181+
}
182+
</script>

0 commit comments

Comments
 (0)