new_huozhou_frontend/src/views/ProcessApprovalSubPage/contractApproval.vue

<template>
  <!-- 自定义表单 -->
  <projectContract :projectid="projectId" :isModify="resButton.isEdit" :isEdit="resButton.isEdit" ref="projectContractRef"/>
  <el-divider content-position="left">合同文件</el-divider>
        <UploadfileDetail :projectid="projectId" :stage="4" />
  <ApprovalDetails :processInstanceId="processInstanceId" />

  <ApprovalFromPage :showApprovalForm="showApprovalForm" :buttons="resButton.buttons" ref="ApprovalFromPageRef"
    @submit="handleSubmit" @exit="exit">
    <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="1" :on-remove="removeFile">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <div slot="tip" class="el-upload__tip">文件大小且不超过5M</div>
        </el-upload>
      </div>
    </div>
  </ApprovalFromPage>
</template>
<script lang="ts" name="contractApproval" setup>
import { ref, onMounted, reactive } from 'vue'
import {  useModal } from '@/components/Modal';
import { getActionParam } from '../myWork/inComplete/inComplete.api';
import { approvalContractinfo } from '@/views/projectLib/projectContract/projectContract.api'
import { ElMessage } from 'element-plus'
import ApprovalDetails from "../ProcessApprovalSubPage/component/ApprovalDetails.vue";
import ApprovalFromPage from "../ProcessApprovalSubPage/component/ApprovalFromPage.vue"
import projectContract from '@/views/projectLib/projectContract/projectContract.vue';
import UploadfileDetail from "@/views/ProcessApprovalSubPage/component/UploadfileDetail.vue"


let dataTo = defineProps(["record"])
const emit = defineEmits(['close']);
let processInstanceId = dataTo.record.processInstanceId
let projectId = dataTo.record.projectId as string
let taskid = dataTo.record.taskId as string
let showApprovalForm = ref()
let ApprovalFromPageRef = ref()
let projectContractRef= ref()
let resButton = reactive({
  showApprovalForm: false,
  isEdit: false,
  buttons: []
})
let fileList = reactive<Array<any>>([]);

onMounted(async () => {
  resButton = await getActionParam({ processInstanceId: processInstanceId, taskId: taskid, procesType: dataTo.record.procesType })
  showApprovalForm.value = resButton.showApprovalForm
})

async function handleSubmit() {
  let approvalform = await ApprovalFromPageRef.value.getFieldsValueApprovalForm();
  // &&await projectContractRef.value.checkForm()
  if (await ApprovalFromPageRef.value.validateApprovalForm()) {
    let fromdate = await projectContractRef.value.getFieldsValuetoRef()

    const params = new FormData()
    params.append("flag", approvalform.flag)
    params.append("projectid", projectId)
    params.append("comment", approvalform.comment)
    params.append("taskId", taskid)
    params.append("isEdit", resButton.isEdit)
    params.append("contractinfoList", JSON.stringify(fromdate))

    if (fileList.length > 0) {
      params.append("file", fileList[0].file)
    }
    await approvalContractinfo(params)
    console.log("提交成功！", params)
    emit("close")
  }
}
async function exit() {
  emit("close")

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

}
function httpRequest(option) {
  fileList.push(option)
}

// 上传前处理
function beforeUpload(file) {
  let fileSize = file.size
  const FIVE_M = 5 * 1024 * 1024;
  const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);

  let whiteList = ["xls", "xlsx"];

  if (whiteList.indexOf(fileSuffix) === -1) {
    ElMessage.error('上传文件只能是xls、xlsx格式');
    return false;
  }
  //大于5M，不允许上传
  if (fileSize > FIVE_M) {
    ElMessage.error("最大上传5M")
    return false
  }

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


</script>
<style scoped>
.timeline {
  display: flex;
  width: 100%;
  margin-bottom: 100px;

  .lineitem {
    transform: translateX(50%);
    width: 25%;
  }
}

:deep(.el-timeline-item__tail) {
  border-left: none;
  border-top: 2px solid #e4e7ed;
  width: 100%;
  position: absolute;
  top: 9px;
}

:deep(.el-timeline-item__wrapper) {
  padding-left: 0;
  position: absolute;
  top: 20px;
  transform: translateX(-50%);
  text-align: center;
}

:deep(.el-timeline-item__timestamp) {
  font-size: 14px;

}
</style>