dengzedong
5 天以前 f9b459a3fefd5fab0ee8e19268adb9d9eadab2a7
提交 | 用户 | 时间
820397 1 <template>
H 2   <Dialog v-model="dialogVisible" title="减签" width="500">
3     <el-form
4       ref="formRef"
5       v-loading="formLoading"
6       :model="formData"
7       :rules="formRules"
8       label-width="110px"
9     >
10       <el-form-item label="减签任务" prop="id">
11         <el-radio-group v-model="formData.id">
3e359e 12           <el-radio-button v-for="item in childrenTaskList" :key="item.id" :value="item.id">
820397 13             {{ item.name }}
H 14             ({{ item.assigneeUser?.deptName || item.ownerUser?.deptName }} -
15             {{ item.assigneeUser?.nickname || item.ownerUser?.nickname }})
16           </el-radio-button>
17         </el-radio-group>
18       </el-form-item>
19       <el-form-item label="减签理由" prop="reason">
20         <el-input v-model="formData.reason" clearable placeholder="请输入减签理由" />
21       </el-form-item>
22     </el-form>
23     <template #footer>
24       <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
25       <el-button @click="dialogVisible = false">取 消</el-button>
26     </template>
27   </Dialog>
28 </template>
29 <script lang="ts" setup>
30 import * as TaskApi from '@/api/bpm/task'
31 import { isEmpty } from '@/utils/is'
32
33 defineOptions({ name: 'TaskSignDeleteForm' })
34
35 const message = useMessage() // 消息弹窗
36 const dialogVisible = ref(false) // 弹窗的是否展示
37 const formLoading = ref(false) // 表单的加载中
38 const formData = ref({
39   id: '',
40   reason: ''
41 })
42 const formRules = ref({
43   id: [{ required: true, message: '必须选择减签任务', trigger: 'change' }],
44   reason: [{ required: true, message: '减签理由不能为空', trigger: 'blur' }]
45 })
46
47 const formRef = ref() // 表单 Ref
48 const childrenTaskList = ref([])
49 /** 打开弹窗 */
50 const open = async (id: string) => {
51   childrenTaskList.value = await TaskApi.getChildrenTaskList(id)
52   if (isEmpty(childrenTaskList.value)) {
53     message.warning('当前没有可减签的任务')
54     return false
55   }
56   dialogVisible.value = true
57   resetForm()
58 }
59 defineExpose({ open }) // 提供 openModal 方法,用于打开弹窗
60
61 /** 提交表单 */
62 const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
63 const submitForm = async () => {
64   // 校验表单
65   if (!formRef) return
66   const valid = await formRef.value.validate()
67   if (!valid) return
68   // 提交请求
69   formLoading.value = true
70   try {
71     await TaskApi.signDeleteTask(formData.value)
72     message.success('减签成功')
73     dialogVisible.value = false
74     // 发送操作成功的事件
75     emit('success')
76   } finally {
77     formLoading.value = false
78   }
79 }
80
81 /** 重置表单 */
82 const resetForm = () => {
83   formData.value = {
84     id: '',
85     reason: ''
86   }
87   formRef.value?.resetFields()
88 }
89 </script>