沙钢智慧能源系统前端代码
查看 | 历史 | 提交 | 提交对比
houzhongjian
2024-10-09 314507f8ddadd9c66e98d260c3b2a5dad1a04015
提交 | 用户 | 时间
314507 1 <template>
H 2   <Dialog v-model="dialogVisible" :title="dialogTitle">
3     <el-form
4       ref="formRef"
5       v-loading="formLoading"
6       :model="formData"
7       :rules="formRules"
8       label-width="140px"
9     >
10       <el-form-item label="短信渠道编号" prop="channelId">
11         <el-select v-model="formData.channelId" placeholder="请选择短信渠道编号">
12           <el-option
13             v-for="channel in channelList"
14             :key="channel.id"
15             :label="
16               channel.signature +
17               `【 ${getDictLabel(DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE, channel.code)}】`
18             "
19             :value="channel.id"
20           />
21         </el-select>
22       </el-form-item>
23       <el-form-item label="短信类型" prop="type">
24         <el-select v-model="formData.type" placeholder="请选择短信类型">
25           <el-option
26             v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE)"
27             :key="dict.value"
28             :label="dict.label"
29             :value="dict.value"
30           />
31         </el-select>
32       </el-form-item>
33       <el-form-item label="模板编号" prop="code">
34         <el-input v-model="formData.code" placeholder="请输入模板编号" />
35       </el-form-item>
36       <el-form-item label="模板名称" prop="name">
37         <el-input v-model="formData.name" placeholder="请输入模板名称" />
38       </el-form-item>
39       <el-form-item label="模板内容" prop="content">
40         <el-input v-model="formData.content" placeholder="请输入模板内容" type="textarea" />
41       </el-form-item>
42       <el-form-item label="开启状态" prop="status">
43         <el-radio-group v-model="formData.status">
44           <el-radio
45             v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
46             :key="dict.value"
47             :label="dict.value"
48           >
49             {{ dict.label }}
50           </el-radio>
51         </el-radio-group>
52       </el-form-item>
53       <el-form-item label="短信 API 模板编号" prop="apiTemplateId">
54         <el-input v-model="formData.apiTemplateId" placeholder="请输入短信 API 的模板编号" />
55       </el-form-item>
56       <el-form-item label="备注" prop="remark">
57         <el-input v-model="formData.remark" placeholder="请输入备注" />
58       </el-form-item>
59     </el-form>
60     <template #footer>
61       <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
62       <el-button @click="dialogVisible = false">取 消</el-button>
63     </template>
64   </Dialog>
65 </template>
66 <script lang="ts" setup>
67 import { DICT_TYPE, getDictLabel, getIntDictOptions } from '@/utils/dict'
68 import * as SmsTemplateApi from '@/api/system/sms/smsTemplate'
69 import * as SmsChannelApi from '@/api/system/sms/smsChannel'
70 import { CommonStatusEnum } from '@/utils/constants'
71
72 defineOptions({ name: 'SystemSmsTemplateForm' })
73
74 const { t } = useI18n() // 国际化
75 const message = useMessage() // 消息弹窗
76
77 const dialogVisible = ref(false) // 弹窗的是否展示
78 const dialogTitle = ref('') // 弹窗的标题
79 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
80 const formType = ref('') // 表单的类型
81 const formData = ref<SmsTemplateApi.SmsTemplateVO>({
82   id: undefined,
83   type: undefined,
84   status: CommonStatusEnum.ENABLE,
85   code: '',
86   name: '',
87   content: '',
88   remark: '',
89   apiTemplateId: '',
90   channelId: undefined
91 })
92 const formRules = reactive({
93   type: [{ required: true, message: '短信类型不能为空', trigger: 'change' }],
94   status: [{ required: true, message: '开启状态不能为空', trigger: 'blur' }],
95   code: [{ required: true, message: '模板编码不能为空', trigger: 'blur' }],
96   name: [{ required: true, message: '模板名称不能为空', trigger: 'blur' }],
97   content: [{ required: true, message: '模板内容不能为空', trigger: 'blur' }],
98   apiTemplateId: [{ required: true, message: '短信 API 的模板编号不能为空', trigger: 'blur' }],
99   channelId: [{ required: true, message: '短信渠道编号不能为空', trigger: 'change' }]
100 })
101 const formRef = ref() // 表单 Ref
102 const channelList = ref<SmsChannelApi.SmsChannelVO[]>([]) // 短信渠道列表
103
104 const open = async (type: string, id?: number) => {
105   dialogVisible.value = true
106   dialogTitle.value = t('action.' + type)
107   formType.value = type
108   resetForm()
109   // 修改时，设置数据
110   if (id) {
111     formLoading.value = true
112     try {
113       formData.value = await SmsTemplateApi.getSmsTemplate(id)
114     } finally {
115       formLoading.value = false
116     }
117   }
118   // 加载渠道列表
119   channelList.value = await SmsChannelApi.getSimpleSmsChannelList()
120 }
121 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
122
123 /** 提交表单 */
124 const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
125 const submitForm = async () => {
126   // 校验表单
127   if (!formRef) return
128   const valid = await formRef.value.validate()
129   if (!valid) return
130   formLoading.value = true
131   try {
132     const data = formData.value as SmsTemplateApi.SmsTemplateVO
133     if (formType.value === 'create') {
134       await SmsTemplateApi.createSmsTemplate(data)
135       message.success(t('common.createSuccess'))
136     } else {
137       await SmsTemplateApi.updateSmsTemplate(data)
138       message.success(t('common.updateSuccess'))
139     }
140     dialogVisible.value = false
141     // 发送操作成功的事件
142     emit('success')
143   } finally {
144     formLoading.value = false
145   }
146 }
147
148 /** 重置表单 */
149 const resetForm = () => {
150   formData.value = {
151     id: undefined,
152     type: undefined,
153     status: CommonStatusEnum.ENABLE,
154     code: '',
155     name: '',
156     content: '',
157     remark: '',
158     apiTemplateId: '',
159     channelId: undefined
160   }
161   formRef.value?.resetFields()
162 }
163 </script>