new_huozhou_frontend/src/views/ProcessApprovalSubPage/uploadURTfileApproval.vue

<template>
  <div>
    <el-divider content-position="left">联合技术审查文件详情</el-divider>
    <PlanFileDetail :planinfoid="projectId" :stage="1" />
  </div>
  <div>
    <el-divider content-position="left">联合技术审查审批文件详情</el-divider>
    <PlanFileDetail :planinfoid="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="10"
            :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 { approveURTFile, getActionParam } from '@/views/myWork/inComplete/inComplete.api';
  import { ElMessage } from 'element-plus';
  import ApprovalDetails from '@/views/ProcessApprovalSubPage/component/ApprovalDetails.vue';
  import ApprovalFromPage from '@/views/ProcessApprovalSubPage/component/ApprovalFromPage.vue';
  import PlanFileDetail from "@/views/ProcessApprovalSubPage/component/PlanFileDetail.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 approveURTFile(params);
      console.log('提交成功！', res);
      emit('close');
    }
  }
  async function exit() {
    emit('close');
  }
</script>
<style></style>