new_huozhou_frontend/src/views/projectLib/projectPlan/uploadURTfile.vue

<template>
  <!-- 自定义表单 -->
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    title="上传文件"
    width="1200px"
    :showOkBtn="false"
    :showCancelBtn="false"
  >
    <BasicForm @register="registerMoneyForm" />

    <el-divider content-position="left">上传《部门联审意见》</el-divider>

    <el-form ref="importFormRef">
      <el-form-item label="上传文件:">
        <el-upload
          class="upload-demo"
          ref="upload"
          action
          :http-request="httpRequest"
          :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>
      </el-form-item>
    </el-form>

    <el-divider content-position="left">上传最终稿</el-divider>

    <el-form ref="importFormRef">
      <el-form-item label="上传文件:">
        <el-upload
          class="upload-demo"
          ref="upload"
          action
          :http-request="httpRequest"
          :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>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitImportForm" :disabled="isSubmitting">开始导入</el-button>
        <el-button type="info" @click="dialogVisible">关闭窗口</el-button>
      </el-form-item>
    </el-form>
  </BasicModal>
</template>
<script lang="ts" name="setProjectWorkReport" setup>
  import { reactive, defineEmits, onMounted, ref } from 'vue';
  import { message } from 'ant-design-vue';

  import { useModalInner, BasicModal } from '@/components/Modal';
  import { uploadURTFile } from '@/views/projectLib/projectPlan/projectPlan.api';
  import { queryProjectInfoById } from '@/views/projectLib/projectInfo/projectInfo.api';
  import { EstimateAmountFormSchemas } from '@/views/projectLib/projectPlan/projectPlan.data';
  const [registerModal, { closeModal }] = useModalInner(init);
  import { useForm, BasicForm } from '@/components/Form';
  let projectid = ref('');
  const [
    registerMoneyForm,
    {
      validate: validateMoneyForm,
      getFieldsValue: getMoneyFieldsValue,
      setFieldsValue: setMoneyFieldsValue,
    },
  ] = useForm({
    //注册表单列
    schemas: EstimateAmountFormSchemas,
    showActionButtonGroup: false,
    //回车提交
    // autoSubmitOnEnter: true,
    // //不显示重置按钮
    // showResetButton: false,
    //自定义提交按钮文本和图标
    // submitButtonOptions: { text: '提交', preIcon: '' },
    //查询列占比 24代表一行 取值范围 0-24
    // actionColOptions: { span: 17 },
    // size: "small",
    // labelCol: { style: { width: '120px' } },
    wrapperCol: { style: { width: 'auto' } },
  });
  let fileList = reactive<Array<any>>([]);
  let planinfoid = ref('');
  let isSubmitting = ref(false);
  async function init(data) {
    console.log('datadatadata', data);
    planinfoid.value = data.planinfoid;
    projectid.value = data.projectid;
    let param: any = {
      projectid: projectid.value,
    };
    let res = await queryProjectInfoById(param);
    setMoneyFieldsValue(res);
  }

  const emit = defineEmits(['close']);
  //加载项目数据
  onMounted(async () => {});

  function httpRequest(option) {
    fileList.push(option);
    console.log(fileList, option);
  }
  function removeFile(option) {
    for (let i = 0; i < fileList.length; i++) {
      if (fileList[i].file.name == option.name) {
        fileList.splice(i, 1);
      }
    }
    console.log(fileList, option);
  }
  // 上传前处理
  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;
    }
    // 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;
    // }
    // if (item.indexOf(file.name.substring(0, file.name.indexOf('.'))) == -1) {
    //     message.error('请上传文件:' + item);
    //     return false;
    // }
    console.log('文件上传成功');

    return true;
  }
  // 文件数量过多时提醒
  function handleExceed() {
    message.warning('最多只能上传十个文件');
  }
  //导入Excel病种信息数据
  async function submitImportForm() {
    if (fileList.length == 0) {
      message.error('未选择任何文件，无法上传！');
      return;
    }
    let cunzai = false;
    fileList.forEach((x) => {
      console.log('xxxxxxxxxx', x, x.file);
      if (x.file.name.includes('部门联审意见')) {
        cunzai = true;
      }
    });
    if (!cunzai) {
      message.error('请上传《部门联审意见》');
      return;
    }
    if (fileList.length <=1) {
      message.error('请上传终稿');
      return;
    }
    if (await validateMoneyForm()) {
      let moneydata = await getMoneyFieldsValue();
      // // 使用form表单的数据格式
      const params = new FormData();
      // 将上传文件数组依次添加到参数paramsData中
      fileList.forEach((x) => {
        console.log('xxxxxxxxxx', x, x.file);
        params.append('file', x.file);
      });
      params.append('urtEstimatedAmount', moneydata.urtEstimatedAmount);
      params.append('planinfoid', planinfoid.value);
      isSubmitting.value = true;
      uploadURTFile(params).then(() => {
        emit('close');
      }).catch(() => {
        isSubmitting.value = false;
      });
    } else {
      message.error('请正确填写联合审查估算金额');
    }
  }
  function dialogVisible() {
    emit('close');
  }
</script>
<style></style>