Skip to content

Commit 7cda6f5

Browse files
xiaoPOooxiaoPOoo
committed
[系统管理 -> 岗位管理] 使用 Element Plus 原生实现
1 parent aad49fd commit 7cda6f5

File tree

3 files changed

+258
-166
lines changed

3 files changed

+258
-166
lines changed

‎src/views/system/post/form.vue

Lines changed: 82 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,91 +1,120 @@
11
<template>
2-
<!-- 弹窗 -->
3-
<XModal :title="modelTitle" :loading="modelLoading" v-model="modelVisible">
4-
<!-- 表单：添加/修改 -->
5-
<Form
2+
<Dialog :title="modelTitle" v-model="modelVisible" width="800">
3+
<el-form
64
ref="formRef"
7-
v-if="['create', 'update'].includes(actionType)"
8-
:schema="allSchemas.formSchema"
9-
:rules="rules"
10-
/>
11-
<!-- 表单：详情 -->
12-
<Descriptions
13-
v-if="actionType === 'detail'"
14-
:schema="allSchemas.detailSchema"
15-
:data="detailData"
16-
/>
5+
:model="formData"
6+
:rules="formRules"
7+
label-width="80px"
8+
v-loading="formLoading"
9+
>
10+
<el-form-item label="岗位标题" prop="name">
11+
<el-input v-model="formData.name" placeholder="请输入岗位标题" />
12+
</el-form-item>
13+
<el-form-item label="岗位编码" prop="code">
14+
<el-input :model-value="formData.code" placeholder="请输入岗位编码" height="150px" />
15+
</el-form-item>
16+
<el-form-item label="状态" prop="status">
17+
<el-select v-model="formData.status" placeholder="请选择状态" clearable>
18+
<el-option
19+
v-for="dict in getDictOptions(DICT_TYPE.COMMON_STATUS)"
20+
:key="parseInt(dict.value)"
21+
:label="dict.label"
22+
:value="parseInt(dict.value)"
23+
/>
24+
</el-select>
25+
</el-form-item>
26+
<el-form-item label="备注" prop="remark">
27+
<el-input v-model="formData.remark" type="textarea" placeholder="请输备注" />
28+
</el-form-item>
29+
</el-form>
1730
<template #footer>
18-
<!-- 按钮：保存 -->
19-
<XButton
20-
v-if="['create', 'update'].includes(actionType)"
21-
type="primary"
22-
:title="t('action.save')"
23-
:loading="actionLoading"
24-
@click="submitForm()"
25-
/>
26-
<!-- 按钮：关闭 -->
27-
<XButton :loading="actionLoading" :title="t('dialog.close')" @click="modelVisible = false" />
31+
<div class="dialog-footer">
32+
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
33+
<el-button @click="modelVisible = false">取 消</el-button>
34+
</div>
2835
</template>
29-
</XModal>
36+
</Dialog>
3037
</template>
3138
<script setup lang="ts">
32-
import type { FormExpose } from '@/components/Form'
39+
import { DICT_TYPE, getDictOptions } from '@/utils/dict'
3340
import * as PostApi from '@/api/system/post'
34-
import { rules, allSchemas } from './post.data'
41+
3542
const { t } = useI18n() // 国际化
3643
const message = useMessage() // 消息弹窗
3744
38-
// 弹窗相关的变量
39-
const modelVisible = ref(false) // 是否显示弹出层
40-
const modelTitle = ref('') // 弹出层标题
41-
const modelLoading = ref(false) // 弹出层loading
42-
const actionType = ref('') // 操作按钮的类型
43-
const actionLoading = ref(false) // 按钮 Loading
44-
const formRef = ref<FormExpose>() // 表单 Ref
45-
const detailData = ref() // 详情 Ref
45+
const modelVisible = ref(false) // 弹窗的是否展示
46+
const modelTitle = ref('') // 弹窗的标题
47+
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
48+
const formType = ref('') // 表单的类型：create - 新增；update - 修改
49+
const formData = ref({
50+
id: undefined,
51+
name: '',
52+
code: '',
53+
status: undefined,
54+
remark: ''
55+
})
56+
const formRules = reactive({
57+
name: [{ required: true, message: '岗位标题不能为空', trigger: 'blur' }],
58+
code: [{ required: true, message: '岗位编码不能为空', trigger: 'change' }],
59+
status: [{ required: true, message: '岗位状态不能为空', trigger: 'change' }],
60+
remark: [{ required: false, message: '岗位内容不能为空', trigger: 'blur' }]
61+
})
62+
const formRef = ref() // 表单 Ref
4663
47-
// 打开弹窗
64+
/** 打开弹窗 */
4865
const openModal = async (type: string, id?: number) => {
4966
modelVisible.value = true
50-
modelLoading.value = true
5167
modelTitle.value = t('action.' + type)
52-
actionType.value = type
53-
// 设置数据
68+
formType.value = type
69+
resetForm()
70+
// 修改时，设置数据
5471
if (id) {
55-
const res = await PostApi.getPostApi(id)
56-
if (type === 'update') {
57-
unref(formRef)?.setValues(res)
58-
} else if (type === 'detail') {
59-
detailData.value = res
72+
formLoading.value = true
73+
try {
74+
formData.value = await PostApi.getPostApi(id)
75+
} finally {
76+
formLoading.value = false
6077
}
6178
}
62-
modelLoading.value = false
6379
}
6480
defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
6581
66-
// 提交新增/修改的表单
82+
/** 提交表单 */
6783
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
6884
const submitForm = async () => {
6985
// 校验表单
70-
const elForm = unref(formRef)?.getElFormRef()
71-
if (!elForm) return
72-
const valid = await elForm.validate()
86+
if (!formRef) return
87+
const valid = await formRef.value.validate()
7388
if (!valid) return
7489
// 提交请求
75-
actionLoading.value = true
90+
formLoading.value = true
7691
try {
77-
const data = unref(formRef)?.formModel as PostApi.PostVO
78-
if (actionType.value === 'create') {
92+
const data = formData.value as unknown as PostApi.PostVO
93+
if (formType.value === 'create') {
7994
await PostApi.createPostApi(data)
8095
message.success(t('common.createSuccess'))
8196
} else {
8297
await PostApi.updatePostApi(data)
8398
message.success(t('common.updateSuccess'))
8499
}
85100
modelVisible.value = false
101+
// 发送操作成功的事件
86102
emit('success')
87103
} finally {
88-
actionLoading.value = false
104+
formLoading.value = false
105+
}
106+
}
107+
108+
/** 重置表单 */
109+
const resetForm = () => {
110+
formData.value = {
111+
id: undefined,
112+
title: '',
113+
type: undefined,
114+
content: '',
115+
status: undefined,
116+
remark: ''
89117
}
118+
formRef.value?.resetFields()
90119
}
91120
</script>

0 commit comments

Comments
 (0)