new_huozhou_frontend/src/views/ProcessApprovalSubPage/planFileApproval.vue

<template>
  <!-- 自定义表单 -->
  <el-divider content-position="left"
    >项目阶段名称： {{ stageName
    }}<a-button type="link" @click="hdDetail">详情</a-button></el-divider
  >
  <el-divider content-position="left">项目名称： {{ dataTo.record.projectName }} </el-divider>
  <BasicForm @register="registerApprovalMoneyForm" v-if="taskName == '立项审批'" />
  <div v-if="showMoneyForm">
    <el-divider content-position="left">计划金额</el-divider>
    <ContractPay
      :projectid="pjid"
      :taskName="taskName"
      :isModify="false"
      :isEdit="false"
      :isJiHua="true"
      v-if="pjid"
      ref="contractRef1"
    />
    <el-divider content-position="left">实际金额</el-divider>
  </div>

  <BasicForm @register="registerContractMoneyForm" v-if="taskName == '合同签订'" />
  <div v-if="showMoneyForm || taskName == '合同签订'">
    <ContractPay
      :projectid="pjid"
      :taskName="taskName"
      :isModify="resButton.isEdit"
      :isEdit="resButton.isEdit"
      :isJiHua="taskName == '合同签订'?true:false"
      v-if="pjid"
      ref="contractRef"
    />
  </div>
  <el-divider content-position="left">项目计划详情</el-divider>
  <BasicTable @register="registerplaninfoTable"> </BasicTable>
  <el-divider content-position="left">项目计划资料详情</el-divider>
  <PlanFileDetail :planinfoid="planinfoid" :stage="1" :key="planFileDetailKey" />
  <el-divider content-position="left">项目计划审批文件列表</el-divider>
  <PlanFileDetail :planinfoid="planinfoid" :stage="2" />
  <ApprovalDetails :processInstanceId="processInstanceId" />
  <ApprovalFromPage
    :showApprovalForm="showApprovalForm"
    :buttons="resButton.buttons"
    ref="ApprovalFromPageRef"
    :rowData="dataTo.record"
    @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-form ref="importFormRef">
          <el-form-item
            v-for="(item, index) in tableDataFiles"
            :key="index"
            :label="item"
            label-width="auto"
          >
            <el-upload
              class="upload-demo"
              ref="upload"
              action
              :http-request="httpRequest"
              :before-upload="
                (file) => {
                  return beforeUpload(file, item);
                }
              "
              :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">只能上传{{ item }}且不超过500M</div>
            </el-upload>
          </el-form-item>
        </el-form>
      </div>

      <div
        v-if="taskName == '首付支付' && resButton.isEdit"
        style="display: flex; justify-content: center; align-items: center; height: 100px"
      >
        <el-form ref="importFormRef">
          <el-form-item v-for="(item, index) in tableDataFiles" :key="index" label-width="auto">
            <el-upload
              class="upload-demo"
              ref="upload"
              action
              :http-request="httpRequest"
              :before-upload="
                (file) => {
                  return beforeUpload(file, 'all');
                }
              "
              :on-exceed="handleExceed"
              :limit="50"
              :on-remove="removeFile"
            >
              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
              <div slot="tip" class="el-upload__tip">上传其他文件且不超过500M</div>
            </el-upload>
          </el-form-item>
        </el-form>
      </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="beforeAdviceUpload"
            :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>
    </div>
  </ApprovalFromPage>
  <BasicModal
    @register="registerProjectPlan"
    title="发起项目计划审批"
    width="1200px"
    :showOkBtn="false"
    :showCancelBtn="false"
  >
    <showtu :res="showtuList" />
  </BasicModal>
</template>
<script lang="ts" name="planFileApproval" setup>
  import { onMounted, ref, reactive, h } from 'vue';
  import { useModal, BasicModal } from '@/components/Modal';
  import { BasicTable, ActionItem, TableAction, useTable } from '@/components/Table';
  import { approvePlanFile, getActionParam } from '../myWork/inComplete/inComplete.api';
  import {
    PlaninfoFiletableColumns,
    PlaninfoColumn,
  } from '@/views/projectLib/projectPlan/projectPlan.data';
  import {
    planFilePageList,
    getplaninfoByid,
  } from '@/views/projectLib/projectPlan/projectPlan.api';
  import { downloadFile } from '../../api/common/api';
  import { message } from 'ant-design-vue';
  import ContractPay from '@/views/projectLib/projectContract/ContractPay.vue';
  import ApprovalDetails from '../ProcessApprovalSubPage/component/ApprovalDetails.vue';
  import ApprovalFromPage from '../ProcessApprovalSubPage/component/ApprovalFromPage.vue';
  import PlanFileDetail from '@/views/ProcessApprovalSubPage/component/PlanFileDetail.vue';
  import { queryProjectInfoById } from '@/views/projectLib/projectInfo/projectInfo.api';
  import showtu from '@/views/projectLib/projectPlan/showtu.vue';
  import { useForm, BasicForm } from '@/components/Form';
  import {
    getProjectinfoMoneyInfo,
    queryPlanInfoMainTimeline,
    getContractinfoByTaskName,
  } from '@/views/projectLib/projectPlan/projectPlan.api';
  import {
    ApprovalMoneyFormSchemas,
    ContractMoneyFormSchemas,
  } from '@/views/projectLib/projectPlan/projectPlan.data';
  const [registerProjectPlan, { openModal: openProjectPlan }] = useModal(); //发起计划审批的

  const [
    registerApprovalMoneyForm,
    {
      setFieldsValue: setApprovalMoneyFieldsValue,
      setProps: setApprovalMoneyProps,
      validate: validateApprovalMoneyForm,
      getFieldsValue: getApprovalMoneyFieldsValue,
    },
  ] = useForm({
    //注册表单列
    schemas: ApprovalMoneyFormSchemas,
    showActionButtonGroup: false,
    //回车提交
    // autoSubmitOnEnter: true,
    // //不显示重置按钮
    // showResetButton: false,
    //自定义提交按钮文本和图标
    // submitButtonOptions: { text: '提交', preIcon: '' },
    //查询列占比 24代表一行 取值范围 0-24
    // actionColOptions: { span: 17 },
    // size: "small",
    // labelCol: { style: { width: '120px' } },
    disabled: true,
    wrapperCol: { style: { width: 'auto' } },
  });
  const [
    registerContractMoneyForm,
    {
      setProps: setContractMoneyProps,
      validate: validateContractMoneyForm,
      getFieldsValue: getContractMoneyFieldsValue,
      setFieldsValue: setContractMoneyFieldsValue,
      updateSchema: updateContractMoneySchema,
    },
  ] = useForm({
    //注册表单列
    schemas: ContractMoneyFormSchemas,
    showActionButtonGroup: false,
    //回车提交
    // autoSubmitOnEnter: true,
    // //不显示重置按钮
    // showResetButton: false,
    //自定义提交按钮文本和图标
    // submitButtonOptions: { text: '提交', preIcon: '' },
    //查询列占比 24代表一行 取值范围 0-24
    // actionColOptions: { span: 17 },
    // size: "small",
    // labelCol: { style: { width: '120px' } },
    disabled: true,
    wrapperCol: { style: { width: 'auto' } },
  });
  let dataTo = defineProps(['record']);
  const emit = defineEmits(['close']);
  console.log('routerouterouteroute', dataTo.record);
  let procesType = dataTo.record.procesType;
  let planinfoid = dataTo.record.projectId as string;
  let processInstanceId = dataTo.record.processInstanceId;
  let taskid = dataTo.record.taskId as string;
  let showApprovalForm = ref();
  let ApprovalFromPageRef = ref();
  let tableDataFiles = ref();
  let planFileDetailKey = ref(0);
  let stageName = ref('');
  let contractRef = ref();
  let showtuList = ref<Array<Object>>();
  let resButton = reactive({
    showApprovalForm: false,
    isEdit: false,
    buttons: [],
  });
  let fileList = reactive<Array<any>>([]);
  let fileAdviceList = reactive<Array<any>>([]);
  let taskName = ref('');
  let pjid = ref('');
  const showMoneyForm = ref(false);
  onMounted(async () => {
    resButton = await getActionParam({
      processInstanceId: processInstanceId,
      taskId: taskid,
      procesType: dataTo.record.procesType,
    });
    showApprovalForm.value = resButton.showApprovalForm;
    planFileDetailKey.value += 1;
    let resList = await getplaninfoByid({ planinfoid: planinfoid });
    let taskLevel = resList[0].taskLevel.split('.')[0];
    console.log('taskLevel', taskLevel, resList);
    let res2 = await queryPlanInfoMainTimeline({ projectid: resList[0].projectId });
    for (let i = 0; i < res2.length; i++) {
      if (res2[i].taskLevel == taskLevel) {
        stageName.value = res2[i].taskName;
      }
    }
    showtuList.value = res2;
  });

  const [registerplaninfoTable, { getDataSource }] = useTable({
    size: 'small', //紧凑型表格
    title: '项目计划详情',
    api: getplaninfoByid,
    columns: PlaninfoColumn,
    // showActionColumn: false,
    useSearchForm: false,
    beforeFetch(params) {
      params.planinfoid = planinfoid;
    },
    afterFetch: async function (data) {
      if (data[0].taskFile.indexOf('，') == -1) {
        tableDataFiles.value = data[0].taskFile.split(',');
      } else {
        tableDataFiles.value = data[0].taskFile.split('，');
      }
      if (data[0].taskName.indexOf('可研报告初稿编制') >= 0) {
        tableDataFiles.value.push('《项目建议书》');
      } else if (data[0].taskName.indexOf('可研报告送审稿编制') >= 0) {
        tableDataFiles.value.push('《项目建议书》');
        tableDataFiles.value.push('《补充说明》');
      }
      taskName.value = data[0].taskName;
      pjid.value = data[0].projectId;
      if (taskName.value == '立项审批') {
        let res = await getProjectinfoMoneyInfo({
          projectid: pjid.value,
        });
        setApprovalMoneyFieldsValue(res);
        setApprovalMoneyProps({ disabled: resButton.isEdit == true ? false : true });
      } else if (taskName.value == '合同签订') {
        let res = await getProjectinfoMoneyInfo({
          projectid: pjid.value,
        });
        setContractMoneyFieldsValue(res);
        setContractMoneyProps({ disabled: resButton.isEdit == true ? false : true });
      }
      let contract = await getContractinfoByTaskName({
        taskName: taskName.value,
        projectId: pjid.value,
      });
      if (contract.realList != null && contract.realList.length > 0) {
        showMoneyForm.value = true;
        setContractMoneyProps({ disabled: resButton.isEdit == true ? false : true });
      }
    },
  });

  //项目资料table
  const [registerResourceTable] = useTable({
    size: 'small', //紧凑型表格
    title: '项目计划资料详情',
    api: planFilePageList,
    columns: PlaninfoFiletableColumns,
    useSearchForm: false,
    actionColumn: {
      width: 140,
      title: '操作',
      dataIndex: 'action',
      slots: { customRender: 'action' },
    },
    beforeFetch(params) {
      params.planinfoid = planinfoid;
      params.stage = '1';
    },
  });
  function hdDetail() {
    openProjectPlan();
  }
  function getTableAction(record): ActionItem[] {
    return [
      {
        label: '下载',
        ifShow: true,
        onClick: handleDetailpage.bind(null, record),
      },
    ];
  }
  function handleDetailpage(record) {
    console.log('我这一行的数据是', record);
    let param = {
      path: record.documentPath,
      fileName: record.documentName,
    };
    //
    console.log('我这一行的数据是', param);

    downloadFile('/huzhouUploadfileinfo/downloadfile', record.documentName, param);
  }
  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);
  }

  // 上传前处理
  async function beforeUpload(file, item) {
    console.log('file,item', file, item);
    let fileSize = file.size;
    const FIVE_M = 500 * 1024 * 1024;
    //大于5M，不允许上传
    if (fileSize > FIVE_M) {
      message.error('最大上传500M');
      return false;
    }
    //不做检测'
    if (item == 'all') {
      return true;
    }
    let geShi = ['xlx', 'xlsx', 'docx', 'doc', 'pdf'] as Array<string>;
    if (geShi.indexOf(file.name.substring(file.name.lastIndexOf('.') + 1)) == -1) {
      message.error('文件格式错误！仅支持' + 'xlx,xlsx, docx, doc, pdf');
      console.log('文件格式错误！仅支持' + 'xlsx', 'docx', 'doc', 'pdf');
      return false;
    }
    let dataSource = await getDataSource();
    if (
      dataSource[0].taskName.indexOf('可研技术审查报告确认') == -1 &&
      dataSource[0].taskName.indexOf('造价评估报告确认') == -1
    ) {
      if (item.indexOf(file.name.substring(0, file.name.indexOf('.'))) == -1) {
        message.error('请上传文件:' + item);
        return false;
      }
    }

    console.log('文件上传成功');

    return true;
  }
  // 文件数量过多时提醒
  function handleExceed() {
    message.warning('最多只能上传一个文件');
  }
  function beforeAdviceUpload(file) {
    console.log('file,item', file);
    let fileSize = file.size;
    const FIVE_M = 500 * 1024 * 1024;
    //大于5M，不允许上传
    if (fileSize > FIVE_M) {
      message.error('最大上传500M');
      return false;
    }
    let geShi = ['xlx', 'xlsx', 'docx', 'doc', 'pdf'] as Array<string>;
    if (geShi.indexOf(file.name.substring(file.name.indexOf('.') + 1)) == -1) {
      message.error('文件格式错误！仅支持' + 'xlx,xlsx, docx, doc, pdf');
      console.log('文件格式错误！仅支持' + 'xlsx', 'docx', 'doc', 'pdf');
      return false;
    }
    console.log('文件上传成功');

    return true;
  }

  async function handleSubmit() {
    const params = new FormData();

    if (taskName.value == '立项审批') {
      if (await validateApprovalMoneyForm()) {
        const approvalMoneyFieldsValue = getApprovalMoneyFieldsValue();
        const {
          approvalTotalMoney,
          approvalCentralMoney,
          approvalProvincialMoney,
          approvalCityMoney,
          approvalCountyMoney,
          approvalSelfMoney,
        } = approvalMoneyFieldsValue;

        // 计算其他金额之和
        const sumOfOtherAmounts =
          approvalCentralMoney +
          approvalProvincialMoney +
          approvalCityMoney +
          approvalCountyMoney +
          approvalSelfMoney;
        // 校验总金额是否等于其他金额之和
        if (Math.abs(approvalTotalMoney - sumOfOtherAmounts) < Number.EPSILON) {
          approvalMoneyFieldsValue['id'] = pjid.value;
          params.append('approvalMoneyFieldsValue', JSON.stringify(approvalMoneyFieldsValue));
        } else {
          message.error('总金额与其他金额之和不相等，请重新输入！');
          return;
        }
      } else {
        return;
      }
    } else if (taskName.value == '合同签订') {
      if (await validateContractMoneyForm()) {
        const contractMoneyFieldsValue = getContractMoneyFieldsValue();
        const {
          contractTotalMoney,
          contractCentralMoney,
          contractProvincialMoney,
          contractCityMoney,
          contractCountyMoney,
          contractSelfMoney,
        } = contractMoneyFieldsValue;

        // 计算其他金额之和
        const sumOfOtherAmounts =
          contractCentralMoney +
          contractProvincialMoney +
          contractCityMoney +
          contractCountyMoney +
          contractSelfMoney;

        // 校验总金额是否等于其他金额之和，使用Number.EPSILON进行比较
        if (Math.abs(contractTotalMoney - sumOfOtherAmounts) < Number.EPSILON) {
          contractMoneyFieldsValue['id'] = pjid.value;
          params.append('contractMoneyFieldsValue', JSON.stringify(contractMoneyFieldsValue));
        } else {
          message.error('总金额与其他金额之和不相等，请重新输入！');
          return;
        }
      } else {
        return;
      }
      let fromdate = await contractRef.value.getFieldsValuetoRef();
      params.append('contractinfoList', JSON.stringify(fromdate));
    }else if(showMoneyForm.value){
      let fromdate = await contractRef.value.getFieldsValuetoRef();
      params.append('contractinfoList', JSON.stringify(fromdate));
    }
    if (resButton.isEdit) {
      if (fileList.length == 0) {
        message.error('未选择任何文件，无法上传！');
        return;
      }
      // type ==0新增，type ==1 是修改
      let dataSource = await getDataSource();
      if (
        dataSource[0].taskName.indexOf('可研技术审查报告确认') == -1 &&
        dataSource[0].taskName.indexOf('可研报告初稿编制') == -1 &&
        dataSource[0].taskName.indexOf('可研报告送审稿编制') == -1
      ) {
        if (fileList.length != tableDataFiles.value.length && taskName.value != '首付支付') {
          message.error('上传的文件数量与项目计划资料数量不一致，请检查');
          return;
        }
      }
    }

    let approvalform = await ApprovalFromPageRef.value.getFieldsValueApprovalForm();
    params.append('flag', approvalform.flag);
    params.append('planinfoid', planinfoid);
    params.append('comment', approvalform.comment);
    if (approvalform.modifyNum) {
      params.append('modifyNum', approvalform.modifyNum);
    }
    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 approvePlanFile(params);
      console.log('提交成功！', res);
      emit('close');
    }
  }
  async function exit() {
    emit('close');
  }
</script>
<style></style>