工业互联网平台前端 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="100px"
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="expression">
25         <el-input type="textarea" v-model="formData.expression" placeholder="请输入表达式" />
26       </el-form-item>
27     </el-form>
28     <template #footer>
29       <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
30       <el-button @click="dialogVisible = false">取 消</el-button>
31     </template>
32   </Dialog>
33 </template>
34 <script setup lang="ts">
35 import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
36 import { ProcessExpressionApi, ProcessExpressionVO } from '@/api/bpm/processExpression'
37 import { CommonStatusEnum } from '@/utils/constants'
38
39 /** BPM 流程 表单 */
40 defineOptions({ name: 'ProcessExpressionForm' })
41
42 const { t } = useI18n() // 国际化
43 const message = useMessage() // 消息弹窗
44
45 const dialogVisible = ref(false) // 弹窗的是否展示
46 const dialogTitle = ref('') // 弹窗的标题
47 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
48 const formType = ref('') // 表单的类型：create - 新增；update - 修改
49 const formData = ref({
50   id: undefined,
51   name: undefined,
52   status: undefined,
53   expression: undefined
54 })
55 const formRules = reactive({
56   name: [{ required: true, message: '名字不能为空', trigger: 'blur' }],
57   status: [{ required: true, message: '状态不能为空', trigger: 'blur' }],
58   expression: [{ required: true, message: '表达式不能为空', trigger: 'blur' }]
59 })
60 const formRef = ref() // 表单 Ref
61
62 /** 打开弹窗 */
63 const open = async (type: string, id?: number) => {
64   dialogVisible.value = true
65   dialogTitle.value = t('action.' + type)
66   formType.value = type
67   resetForm()
68   // 修改时，设置数据
69   if (id) {
70     formLoading.value = true
71     try {
72       formData.value = await ProcessExpressionApi.getProcessExpression(id)
73     } finally {
74       formLoading.value = false
75     }
76   }
77 }
78 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
79
80 /** 提交表单 */
81 const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
82 const submitForm = async () => {
83   // 校验表单
84   await formRef.value.validate()
85   // 提交请求
86   formLoading.value = true
87   try {
88     const data = formData.value as unknown as ProcessExpressionVO
89     if (formType.value === 'create') {
90       await ProcessExpressionApi.createProcessExpression(data)
91       message.success(t('common.createSuccess'))
92     } else {
93       await ProcessExpressionApi.updateProcessExpression(data)
94       message.success(t('common.updateSuccess'))
95     }
96     dialogVisible.value = false
97     // 发送操作成功的事件
98     emit('success')
99   } finally {
100     formLoading.value = false
101   }
102 }
103
104 /** 重置表单 */
105 const resetForm = () => {
106   formData.value = {
107     id: undefined,
108     name: undefined,
109     status: CommonStatusEnum.ENABLE,
110     expression: undefined
111   }
112   formRef.value?.resetFields()
113 }
114 </script>