Skip to content

Commit 97f9560

Browse files
YunaiVgitee-org
YunaiV
authored and
gitee-org
committed
!124 重构VUE3【站内信-模板管理】
Merge pull request !124 from ZanGe丶/dev
2 parents abf9b50 + 776eb3a commit 97f9560

File tree

4 files changed

+406
-272
lines changed

4 files changed

+406
-272
lines changed

‎src/api/system/notify/template/index.ts

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import request from '@/config/axios'
22

33
export interface NotifyTemplateVO {
4-
id: number
4+
id: number | null
55
name: string
6+
nickname: string
67
code: string
78
content: string
8-
type: number
9+
type: number | null
910
params: string
10-
status: number
11+
status: number | null
1112
remark: string
1213
}
1314

@@ -19,7 +20,7 @@ export interface NotifyTemplatePageReqVO extends PageParam {
1920
}
2021

2122
export interface NotifySendReqVO {
22-
userId: number
23+
userId: number | null
2324
templateCode: string
2425
templateParams: Map<String, Object>
2526
}

‎src/views/system/notify/template/NotifyTemplateForm.vue

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
<template>
2+
<Dialog :title="dialogTitle" v-model="dialogVisible">
3+
<el-form
4+
ref="formRef"
5+
:model="formData"
6+
:rules="formRules"
7+
label-width="140px"
8+
v-loading="formLoading"
9+
>
10+
<el-form-item label="模版编码" prop="code">
11+
<el-input v-model="formData.code" placeholder="请输入模版编码" />
12+
</el-form-item>
13+
<el-form-item label="模板名称" prop="name">
14+
<el-input v-model="formData.name" placeholder="请输入模版名称" />
15+
</el-form-item>
16+
<el-form-item label="发件人名称" prop="nickname">
17+
<el-input v-model="formData.nickname" placeholder="请输入发件人名称" />
18+
</el-form-item>
19+
<el-form-item label="模板内容" prop="content">
20+
<el-input type="textarea" v-model="formData.content" placeholder="请输入模板内容" />
21+
</el-form-item>
22+
<el-form-item label="类型" prop="type">
23+
<el-select v-model="formData.type" placeholder="请选择类型">
24+
<el-option
25+
v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE)"
26+
:key="dict.value"
27+
:label="dict.label"
28+
:value="parseInt(dict.value)"
29+
/>
30+
</el-select>
31+
</el-form-item>
32+
<el-form-item label="开启状态" prop="status">
33+
<el-radio-group v-model="formData.status">
34+
<el-radio
35+
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
36+
:key="dict.value"
37+
:label="parseInt(dict.value as string)"
38+
>
39+
{{ dict.label }}
40+
</el-radio>
41+
</el-radio-group>
42+
</el-form-item>
43+
<el-form-item label="备注" prop="remark">
44+
<el-input v-model="formData.remark" placeholder="请输入备注" />
45+
</el-form-item>
46+
</el-form>
47+
<template #footer>
48+
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
49+
<el-button @click="dialogVisible = false">取 消</el-button>
50+
</template>
51+
</Dialog>
52+
</template>
53+
<script setup lang="ts">
54+
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
55+
import * as NotifyTemplateApi from '@/api/system/notify/template'
56+
import { CommonStatusEnum } from '@/utils/constants'
57+
const message = useMessage() // 消息弹窗
58+
59+
const dialogVisible = ref(false) // 弹窗的是否展示
60+
const dialogTitle = ref('') // 弹窗的标题
61+
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
62+
const formType = ref('') // 表单的类型
63+
const formData = ref<NotifyTemplateApi.NotifyTemplateVO>({
64+
id: null,
65+
name: '',
66+
nickname: '',
67+
code: '',
68+
content: '',
69+
type: null,
70+
params: '',
71+
status: CommonStatusEnum.ENABLE,
72+
remark: ''
73+
})
74+
const formRules = reactive({
75+
type: [{ required: true, message: '消息类型不能为空', trigger: 'change' }],
76+
status: [{ required: true, message: '开启状态不能为空', trigger: 'blur' }],
77+
code: [{ required: true, message: '模板编码不能为空', trigger: 'blur' }],
78+
name: [{ required: true, message: '模板名称不能为空', trigger: 'blur' }],
79+
nickname: [{ required: true, message: '发件人姓名不能为空', trigger: 'blur' }],
80+
content: [{ required: true, message: '模板内容不能为空', trigger: 'blur' }]
81+
})
82+
const formRef = ref() // 表单 Ref
83+
84+
const open = async (type: string, id?: number) => {
85+
dialogVisible.value = true
86+
dialogTitle.value = type
87+
formType.value = type
88+
resetForm()
89+
// 修改时，设置数据
90+
if (id) {
91+
formLoading.value = true
92+
try {
93+
formData.value = await NotifyTemplateApi.getNotifyTemplateApi(id)
94+
} finally {
95+
formLoading.value = false
96+
}
97+
}
98+
}
99+
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
100+
101+
/** 提交表单 */
102+
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
103+
const submitForm = async () => {
104+
// 校验表单
105+
if (!formRef) return
106+
const valid = await formRef.value.validate()
107+
if (!valid) return
108+
formLoading.value = true
109+
try {
110+
const data = formData.value as NotifyTemplateApi.NotifyTemplateVO
111+
if (formType.value === 'create') {
112+
await NotifyTemplateApi.createNotifyTemplateApi(data)
113+
message.success('新增成功')
114+
} else {
115+
await NotifyTemplateApi.updateNotifyTemplateApi(data)
116+
message.success('修改成功')
117+
}
118+
dialogVisible.value = false
119+
// 发送操作成功的事件
120+
emit('success')
121+
} finally {
122+
formLoading.value = false
123+
}
124+
}
125+
/** 重置表单 */
126+
const resetForm = () => {
127+
formData.value = {
128+
id: null,
129+
name: '',
130+
nickname: '',
131+
code: '',
132+
content: '',
133+
type: null,
134+
params: '',
135+
status: CommonStatusEnum.ENABLE,
136+
remark: ''
137+
}
138+
formRef.value?.resetFields()
139+
}
140+
</script>

0 commit comments

Comments
 (0)