审批提交添加loading

This commit is contained in:
weiwei committed 2025-02-26 20:24:09 +08:00
1 parent d618aca278
commit 013afdf16e
4 files changed
+165 -123

No files matched your search

+70 -55
View File
@@ -1,81 +1,96 @@
<script setup lang="ts">
import { ref } from 'vue'
import { completeTask } from '/@/api/flow/task'
import type { FlowFormItem, TaskData, TaskSubmitParam } from './types'
import { ref } from "vue"
import { completeTask } from "/@/api/flow/task"
import type { FlowFormItem, TaskData, TaskSubmitParam } from "./types"
import { useMessage } from "/@/hooks/message"
const dialogVisible = ref(false)
const submitDesc = ref('')
const submitDesc = ref("")
const currentData = ref<TaskData>()
const currentOpenFlowForm = ref<FlowFormItem[]>()
const loading = ref(false)
const handle = (row: TaskData, formData: FlowFormItem[]) => {
submitDesc.value = ''
currentData.value = row
currentOpenFlowForm.value = formData
dialogVisible.value = true
submitDesc.value = ""
currentData.value = row
currentOpenFlowForm.value = formData
dialogVisible.value = true
}
defineExpose({ handle })
const emit = defineEmits<{
(e: 'taskSubmitEvent'): void
(e: "taskSubmitEvent"): void
}>()
const submit = async () => {
if (!currentData.value || !currentOpenFlowForm.value) return
if (!currentData.value || !currentOpenFlowForm.value) return
const formData: Record<string, any> = {}
const formData: Record<string, any> = {}
for (const item of currentOpenFlowForm.value) {
formData[item.id] = item.props.value
for (const item of currentOpenFlowForm.value) {
formData[item.id] = item.props.value
if (item.type === 'Layout') {
const subList = item.props.value as FlowFormItem[][]
const processedData = subList.map(array =>
array.reduce((acc, subItem) => ({
...acc,
[subItem.id]: subItem.props.value
}), {})
)
formData[item.id] = processedData
}
}
if (item.type === "Layout") {
const subList = item.props.value as FlowFormItem[][]
const processedData = subList.map((array) =>
array.reduce(
(acc, subItem) => ({
...acc,
[subItem.id]: subItem.props.value,
}),
{},
),
)
formData[item.id] = processedData
}
}
formData[`${currentData.value.nodeId}_approve_condition`] = true
formData[`${currentData.value.nodeId}_approve_condition`] = true
const param: TaskSubmitParam = {
paramMap: formData,
taskId: currentData.value.taskId,
taskLocalParamMap: {
approveDesc: submitDesc.value,
},
}
const param: TaskSubmitParam = {
paramMap: formData,
taskId: currentData.value.taskId,
taskLocalParamMap: {
approveDesc: submitDesc.value,
},
}
try {
await completeTask(param)
dialogVisible.value = false
emit('taskSubmitEvent')
} catch (error) {
console.error('Failed to complete task:', error)
}
try {
loading.value = true
const res = await completeTask(param).finally(() => (loading.value = false))
if (res.code === 0) {
dialogVisible.value = false
emit("taskSubmitEvent")
useMessage().success("通过成功")
return
}
useMessage().error("通过失败")
} catch (error) {
loading.value = false
useMessage().error("错误")
}
}
</script>
<template>
<div>
<el-dialog v-model="dialogVisible" title="提交审核" :width="400" class="rounded-lg shadow-xl">
<div class="p-4 space-y-4">
<el-input v-model="submitDesc" type="textarea" maxlength="100" :rows="5" placeholder="请输入审核意见..."
show-word-limit class="w-full transition-all duration-300 focus:ring-2 focus:ring-primary" />
<div>
<el-dialog v-model="dialogVisible" title="提交审核" :width="400" class="rounded-lg shadow-xl">
<div class="p-4 space-y-4" v-loading="loading">
<el-input
v-model="submitDesc"
type="textarea"
maxlength="100"
:rows="5"
placeholder="请输入审核意见..."
show-word-limit
class="w-full transition-all duration-300 focus:ring-2 focus:ring-primary"
/>
<div class="flex justify-end pt-4 space-x-3">
<el-button @click="dialogVisible = false" class="hover:bg-gray-100 dark:hover:bg-gray-700">
取消
</el-button>
<el-button type="primary" @click="submit" class="bg-primary hover:bg-primary-focus">
确定
</el-button>
</div>
</div>
</el-dialog>
</div>
<div class="flex justify-end pt-4 space-x-3">
<el-button @click="dialogVisible = false" class="hover:bg-gray-100 dark:hover:bg-gray-700" :disabled="loading"> 取消 </el-button>
<el-button type="primary" @click="submit" class="bg-primary hover:bg-primary-focus" :disabled="loading"> 确定 </el-button>
</div>
</div>
</el-dialog>
</div>
</template>
+3 -3
View File
@@ -27,9 +27,9 @@
</template>
<template #footer>
<div style="flex: auto">
<el-button size="large" type="danger" icon="Close" @click="refuseTask">拒绝</el-button>
<el-button size="large" type="primary" icon="Check" @click="submitTask">提交</el-button>
<el-button size="large" type="info" icon="Share" @click="transferTask">转办</el-button>
<el-button size="large" type="danger" icon="Close" @click="refuseTask" :disabled="loading">拒绝</el-button>
<el-button size="large" type="primary" icon="Check" @click="submitTask" :disabled="loading">提交</el-button>
<el-button size="large" type="info" icon="Share" @click="transferTask" :disabled="loading">转办</el-button>
</div>
</template>
</el-drawer>
+20 -11
View File
@@ -1,13 +1,13 @@
<script setup lang="ts">
import { defineExpose } from "vue"
import { completeTask } from "/@/api/flow/task"
import { useMessage } from "/@/hooks/message"
const dialogVisible = ref(false)
const submitDesc = ref("")
const currentData = ref()
const currentOpenFlowForm = ref()
const loading = ref(false)
const handle = (row, formData) => {
submitDesc.value = ""
@@ -20,7 +20,7 @@ const handle = (row, formData) => {
defineExpose({ handle })
const emit = defineEmits(["taskSubmitEvent"])
const submit = () => {
const submit = async () => {
let value = currentOpenFlowForm.value
var formData = {}
@@ -52,22 +52,31 @@ const submit = () => {
approveDesc: "拒绝原因:" + submitDesc.value,
},
}
completeTask(param).then((res) => {
dialogVisible.value = false
emit("taskSubmitEvent")
})
try {
loading.value = true
const res = await completeTask(param).finally(() => (loading.value = false))
if (res.code === 0) {
useMessage().success("拒绝成功")
dialogVisible.value = false
emit("taskSubmitEvent")
return
}
useMessage().error("拒绝失败")
} catch (error) {
useMessage().error("错误")
loading.value = false
}
}
</script>
<template>
<div>
<el-dialog v-model="dialogVisible" title="拒绝审核" width="400px">
<el-input v-model="submitDesc" type="textarea" maxlength="100" :rows="5" placeholder="审核意见" show-word-limit />
<el-input v-loading="loading" v-model="submitDesc" type="textarea" maxlength="100" :rows="5" placeholder="审核意见" show-word-limit />
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="submit"> 确定 </el-button>
<el-button @click="dialogVisible = false" :disabled="loading">取消</el-button>
<el-button type="primary" @click="submit" :disabled="loading">确定</el-button>
</span>
</template>
</el-dialog>
+72 -54
View File
@@ -1,84 +1,85 @@
<script setup lang="ts">
import { defineExpose, ref } from 'vue';
import { transferTask } from '/@/api/flow/task';
import selectShow from '/@/components/OrgSelector/index.vue';
import { ElMessage } from 'element-plus';
import { defineExpose, ref } from "vue"
import { transferTask } from "/@/api/flow/task"
import selectShow from "/@/components/OrgSelector/index.vue"
import { ElMessage } from "element-plus"
interface FlowFormItem {
id: string;
type: string;
id: string
type: string
props: {
value: any;
label?: string;
};
value: any
label?: string
}
}
interface TaskData {
taskId: string;
nodeId: string;
taskId: string
nodeId: string
}
const dialogVisible = ref(false);
const submitDesc = ref('');
const userList = ref<Array<{ id: string }>>([]);
const currentData = ref<TaskData>();
const currentOpenFlowForm = ref<FlowFormItem[]>();
const dialogVisible = ref(false)
const submitDesc = ref("")
const userList = ref<Array<{ id: string }>>([])
const currentData = ref<TaskData>()
const currentOpenFlowForm = ref<FlowFormItem[]>()
const loading = ref(false)
const handle = (row: TaskData, formData: FlowFormItem[]) => {
submitDesc.value = '';
currentData.value = row;
currentOpenFlowForm.value = formData;
dialogVisible.value = true;
};
submitDesc.value = ""
currentData.value = row
currentOpenFlowForm.value = formData
dialogVisible.value = true
}
defineExpose({ handle });
const emit = defineEmits(['taskSubmitEvent']);
defineExpose({ handle })
const emit = defineEmits(["taskSubmitEvent"])
const validateForm = (): boolean => {
if (userList.value.length === 0) {
ElMessage.warning('请选择转办人员');
return false;
ElMessage.warning("请选择转办人员")
return false
}
if (!submitDesc.value.trim()) {
ElMessage.warning('请输入审核意见');
return false;
ElMessage.warning("请输入审核意见")
return false
}
if (submitDesc.value.trim().length < 2) {
ElMessage.warning('审核意见至少需要2个字符');
return false;
ElMessage.warning("审核意见至少需要2个字符")
return false
}
return true;
};
return true
}
const submit = async () => {
if (!currentOpenFlowForm.value || !currentData.value) return;
if (!currentOpenFlowForm.value || !currentData.value) return
// 表单校验
if (!validateForm()) return;
if (!validateForm()) return
try {
const formData: Record<string, any> = {};
const formData: Record<string, any> = {}
for (const item of currentOpenFlowForm.value) {
formData[item.id] = item.props.value;
formData[item.id] = item.props.value
if (item.type === 'Layout') {
const subList = item.props.value as Array<FlowFormItem[]>;
if (item.type === "Layout") {
const subList = item.props.value as Array<FlowFormItem[]>
const d = subList.map((array) => {
const v: Record<string, any> = {};
const v: Record<string, any> = {}
for (const subItem of array) {
v[subItem.id] = subItem.props.value;
v[subItem.id] = subItem.props.value
}
return v;
});
formData[item.id] = d;
return v
})
formData[item.id] = d
}
}
formData[`${currentData.value.nodeId}_approve_condition`] = true;
formData[`${currentData.value.nodeId}_approve_condition`] = true
const param = {
paramMap: formData,
@@ -87,22 +88,32 @@ const submit = async () => {
taskLocalParamMap: {
approveDesc: submitDesc.value.trim(),
},
};
}
await transferTask(param);
ElMessage.success('转办成功');
dialogVisible.value = false;
emit('taskSubmitEvent');
try {
loading.value = true
const res = await transferTask(param).finally(() => (loading.value = false))
if (res.code === 0) {
ElMessage.success("转办成功")
dialogVisible.value = false
emit("taskSubmitEvent")
return
}
ElMessage.error("转办失败")
} catch (error) {
loading.value = false
ElMessage.error("错误")
}
} catch (error) {
ElMessage.error('转办失败,请重试');
ElMessage.error("转办失败,请重试")
}
};
}
</script>
<template>
<div>
<el-dialog v-model="dialogVisible" width="400px" :close-on-click-modal="false" :close-on-press-escape="false" class="transfer-dialog">
<div class="space-y-4">
<div v-loading="loading" class="space-y-4">
<div class="w-full">
<label class="block pb-2">
<span class="text-base font-medium after:content-['*'] after:text-red-500 after:ml-1"> 选择转办人员 </span>
@@ -114,14 +125,21 @@ const submit = async () => {
<label class="block pb-2">
<span class="text-base font-medium after:content-['*'] after:text-red-500 after:ml-1"> 审核意见 </span>
</label>
<el-input v-model="submitDesc" type="textarea" maxlength="100" :rows="5" placeholder="请输入审核意见(2-100字)" show-word-limit />
<el-input
v-model="submitDesc"
type="textarea"
maxlength="100"
:rows="5"
placeholder="请输入审核意见(2-100字)"
show-word-limit
/>
</div>
</div>
<template #footer>
<span class="flex justify-end gap-2">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="submit">确定</el-button>
<el-button @click="dialogVisible = false" :disabled="loading">取消</el-button>
<el-button type="primary" @click="submit" :disabled="loading">确定</el-button>
</span>
</template>
</el-dialog>