工业互联网平台前端 vue3版本
查看 | 历史 | 提交 | 提交对比
houzhongjian
2024-08-08 820397e43a0b64d35c6d31d2a55475061438593b
提交 | 用户 | 时间
820397 1 <template>
H 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="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="dict.value"
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 lang="ts" setup>
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: undefined,
65   name: '',
66   nickname: '',
67   code: '',
68   content: '',
69   type: undefined,
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 /** 打开弹窗 */
85 const open = async (type: string, id?: number) => {
86   dialogVisible.value = true
87   dialogTitle.value = type
88   formType.value = type
89   resetForm()
90   // 修改时，设置数据
91   if (id) {
92     formLoading.value = true
93     try {
94       formData.value = await NotifyTemplateApi.getNotifyTemplate(id)
95     } finally {
96       formLoading.value = false
97     }
98   }
99 }
100 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
101
102 /** 提交表单 */
103 const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
104 const submitForm = async () => {
105   // 校验表单
106   if (!formRef) return
107   const valid = await formRef.value.validate()
108   if (!valid) return
109   formLoading.value = true
110   try {
111     const data = formData.value as unknown as NotifyTemplateApi.NotifyTemplateVO
112     if (formType.value === 'create') {
113       await NotifyTemplateApi.createNotifyTemplate(data)
114       message.success('新增成功')
115     } else {
116       await NotifyTemplateApi.updateNotifyTemplate(data)
117       message.success('修改成功')
118     }
119     dialogVisible.value = false
120     // 发送操作成功的事件
121     emit('success')
122   } finally {
123     formLoading.value = false
124   }
125 }
126 /** 重置表单 */
127 const resetForm = () => {
128   formData.value = {
129     id: undefined,
130     name: '',
131     nickname: '',
132     code: '',
133     content: '',
134     type: undefined,
135     params: '',
136     status: CommonStatusEnum.ENABLE,
137     remark: ''
138   }
139   formRef.value?.resetFields()
140 }
141 </script>