工业互联网平台前端 vue3版本
查看 | 历史 | 提交 | 提交对比
潘志宝
9 天以前 273cb85713ed1d194eb4cc245daf29cd33be89e7
提交 | 用户 | 时间
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="110px"
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="status">
14         <el-radio-group v-model="formData.status">
15           <el-radio
16             v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
17             :key="dict.value"
3e359e 18             :value="dict.value"
820397 19           >
H 20             {{ dict.label }}
21           </el-radio>
22         </el-radio-group>
23       </el-form-item>
24       <el-form-item label="类型" prop="type">
25         <el-select
26           v-model="formData.type"
27           placeholder="请选择类型"
28           @change="formData.event = undefined"
29         >
30           <el-option
31             v-for="dict in getStrDictOptions(DICT_TYPE.BPM_PROCESS_LISTENER_TYPE)"
32             :key="dict.value"
33             :label="dict.label"
34             :value="dict.value"
35           />
36         </el-select>
37       </el-form-item>
38       <el-form-item label="事件" prop="event">
39         <el-select v-model="formData.event" placeholder="请选择事件">
40           <el-option
41             v-for="event in formData.type == 'execution'
42               ? ['start', 'end']
43               : ['create', 'assignment', 'complete', 'delete', 'update', 'timeout']"
44             :label="event"
45             :value="event"
46             :key="event"
47           />
48         </el-select>
49       </el-form-item>
50       <el-form-item label="值类型" prop="valueType">
51         <el-select v-model="formData.valueType" placeholder="请选择值类型">
52           <el-option
53             v-for="dict in getStrDictOptions(DICT_TYPE.BPM_PROCESS_LISTENER_VALUE_TYPE)"
54             :key="dict.value"
55             :label="dict.label"
56             :value="dict.value"
57           />
58         </el-select>
59       </el-form-item>
60       <el-form-item label="类路径" prop="value" v-if="formData.type == 'class'">
61         <el-input v-model="formData.value" placeholder="请输入类路径" />
62       </el-form-item>
63       <el-form-item label="表达式" prop="value" v-else>
64         <el-input v-model="formData.value" placeholder="请输入表达式" />
65       </el-form-item>
66     </el-form>
67     <template #footer>
68       <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
69       <el-button @click="dialogVisible = false">取 消</el-button>
70     </template>
71   </Dialog>
72 </template>
73 <script setup lang="ts">
74 import { getIntDictOptions, getStrDictOptions, DICT_TYPE } from '@/utils/dict'
75 import { ProcessListenerApi, ProcessListenerVO } from '@/api/bpm/processListener'
76 import { CommonStatusEnum } from '@/utils/constants'
77
78 /** BPM 流程 表单 */
79 defineOptions({ name: 'ProcessListenerForm' })
80
81 const { t } = useI18n() // 国际化
82 const message = useMessage() // 消息弹窗
83
84 const dialogVisible = ref(false) // 弹窗的是否展示
85 const dialogTitle = ref('') // 弹窗的标题
86 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
87 const formType = ref('') // 表单的类型：create - 新增；update - 修改
88 const formData = ref({
89   id: undefined,
90   name: undefined,
91   type: undefined,
92   status: undefined,
93   event: undefined,
94   valueType: undefined,
95   value: undefined
96 })
97 const formRules = reactive({
98   name: [{ required: true, message: '名字不能为空', trigger: 'blur' }],
99   type: [{ required: true, message: '类型不能为空', trigger: 'change' }],
100   status: [{ required: true, message: '状态不能为空', trigger: 'blur' }],
101   event: [{ required: true, message: '监听事件不能为空', trigger: 'blur' }],
102   valueType: [{ required: true, message: '值类型不能为空', trigger: 'change' }],
103   value: [{ required: true, message: '值不能为空', trigger: 'blur' }]
104 })
105 const formRef = ref() // 表单 Ref
106
107 /** 打开弹窗 */
108 const open = async (type: string, id?: number) => {
109   dialogVisible.value = true
110   dialogTitle.value = t('action.' + type)
111   formType.value = type
112   resetForm()
113   // 修改时，设置数据
114   if (id) {
115     formLoading.value = true
116     try {
117       formData.value = await ProcessListenerApi.getProcessListener(id)
118     } finally {
119       formLoading.value = false
120     }
121   }
122 }
123 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
124
125 /** 提交表单 */
126 const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
127 const submitForm = async () => {
128   // 校验表单
129   await formRef.value.validate()
130   // 提交请求
131   formLoading.value = true
132   try {
133     const data = formData.value as unknown as ProcessListenerVO
134     if (formType.value === 'create') {
135       await ProcessListenerApi.createProcessListener(data)
136       message.success(t('common.createSuccess'))
137     } else {
138       await ProcessListenerApi.updateProcessListener(data)
139       message.success(t('common.updateSuccess'))
140     }
141     dialogVisible.value = false
142     // 发送操作成功的事件
143     emit('success')
144   } finally {
145     formLoading.value = false
146   }
147 }
148
149 /** 重置表单 */
150 const resetForm = () => {
151   formData.value = {
152     id: undefined,
153     name: undefined,
154     type: undefined,
155     status: CommonStatusEnum.ENABLE,
156     event: undefined,
157     valueType: undefined,
158     value: undefined
159   }
160   formRef.value?.resetFields()
161 }
162 </script>