new_huozhou_frontend/src/views/ProcessApprovalSubPage/uploadfileApproval.vue

<template>
    <!-- 自定义表单 -->
    <!-- <el-divider content-position="left">项目入库详情</el-divider>
    <BasicForm @register="registerProjectForm" /> -->
    <ProjectDetails :isEdit="false" :projectid="projectId" ref="ProjectDetailsRef" />
    <div>
        <el-divider content-position="left">项目资料详情</el-divider>
        <UploadfileDetail :projectid="projectId" :stage="1" />
    </div>
    <div>
        <el-divider content-position="left">意见文件</el-divider>
        <UploadfileDetail :projectid="projectId" :stage="2" />
    </div>
    <ApprovalDetails :processInstanceId="processInstanceId" />
    <!-- -->
    <ApprovalFromPage :showApprovalForm="showApprovalForm" :buttons="resButton.buttons" ref="ApprovalFromPageRef"
        @submit="handleSubmit" @exit="exit" >
        <div>
            <div v-if="procesType == '0' && !resButton.isEdit">
        <el-divider content-position="left">上传意见文件</el-divider>
        <div style="display: flex; justify-content: center; align-items: center; height: 100px;">
            <el-upload class="upload-demo" ref="upload" action :http-request="httpRequestadvice"
                :before-upload="beforeUpload" :on-exceed="handleExceed" :limit="5" :on-remove="removeFile">
                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                <div slot="tip" class="el-upload__tip">文件大小且不超过500M</div>
            </el-upload>
        </div>
    </div>
    <el-divider content-position="left" v-if="resButton.isEdit">重新上传项目资料</el-divider>
    <div v-if="resButton.isEdit" style="display: flex; justify-content: center; align-items: center; height: 100px;">
        <el-upload class="upload-demo" ref="upload" action :http-request="httpRequest" :before-upload="beforeUpload"
            :on-exceed="handleExceed" :limit="5" :on-remove="removeFile">
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <div slot="tip" class="el-upload__tip">文件大小且不超过500M</div>
        </el-upload>
    </div>
        </div>
    </ApprovalFromPage>

</template>
<script lang="ts" name="uploadfileApproval" setup>
import { onMounted, ref, reactive } from 'vue'
import { approveUploadFile, getActionParam } from '@/views/myWork/inComplete/inComplete.api';
import { ElMessage } from 'element-plus'
import ApprovalDetails from "@/views/ProcessApprovalSubPage/component/ApprovalDetails.vue";
import ProjectDetails from "@/views/ProcessApprovalSubPage/component/ProjectDetails.vue"
import ApprovalFromPage from "@/views/ProcessApprovalSubPage/component/ApprovalFromPage.vue"
import UploadfileDetail from "@/views/ProcessApprovalSubPage/component/UploadfileDetail.vue"

let dataTo = defineProps(["record"])
console.log("routerouterouteroute", dataTo.record)
let projectId = dataTo.record.projectId as string
let processInstanceId = dataTo.record.processInstanceId
let taskid = dataTo.record.taskId as string
let procesType = dataTo.record.procesType
const emit = defineEmits(['close']);
let showApprovalForm = ref()
let ApprovalFromPageRef = ref()
let resButton = reactive({
    showApprovalForm: false,
    isEdit: false,
    buttons: []
})
let fileList = reactive<Array<any>>([]);
let fileAdviceList = reactive<Array<any>>([]);
onMounted(async () => {
    resButton = await getActionParam({ processInstanceId: processInstanceId, taskId: taskid, procesType: dataTo.record.procesType })
    showApprovalForm.value = resButton.showApprovalForm
})


function removeFile(option) {
    for (let i = 0; i < fileList.length; i++) {
        if (fileList[i].file.name == option.name) {
            fileList.splice(i, 1)
        }
    }
    for (let i = 0; i < fileAdviceList.length; i++) {
        if (fileAdviceList[i].file.name == option.name) {
            fileAdviceList.splice(i, 1)
        }
    }

}
function httpRequest(option) {
    fileList.push(option)
}
function httpRequestadvice(option) {
    fileAdviceList.push(option)
}
// 上传前处理
function beforeUpload(file) {
    let fileSize = file.size
    const FIVE_M = 500 * 1024 * 1024;
    //大于5M，不允许上传
    if (fileSize > FIVE_M) {
        ElMessage.error("最大上传500M")
        return false
    }

    return true
}
// 文件数量过多时提醒
function handleExceed() {
    ElMessage.warning("最多只能上传五个文件")
}

async function handleSubmit() {
    let approvalform = await ApprovalFromPageRef.value.getFieldsValueApprovalForm();
    const params = new FormData()
    params.append("flag", approvalform.flag)
    params.append("projectid", projectId)
    params.append("comment", approvalform.comment)
    params.append("taskId", taskid)
    if (fileList.length > 0) {
        fileList.forEach((x) => {
            params.append("file", x.file)
        });
    }
    if (fileAdviceList.length > 0) {
        fileAdviceList.forEach((x) => {
            params.append("adviceFile", x.file)
        });
    }
    console.log("param", params, "approvalform", approvalform)
    if (await ApprovalFromPageRef.value.validateApprovalForm()) {

        let res = await approveUploadFile(params)
        console.log("提交成功！", res)
        emit("close")

    }
}
async function exit() {
    emit("close")

}
</script>
<style></style>