tall4-pc/src/components/tall/task/Result.vue

<template>
  <div class="task-form bg-white border-radius-10">
    <a-form ref="formRef" :model="topicResultFormData">
      <a-form-item>
        <label class="color-3">项目名称</label>
        <a-input v-model:value="topicResultFormData.name" placeholder="项目名称" />
      </a-form-item>

      <a-form-item>
        <label class="color-3">验收人</label>
        <a-input v-model:value="topicResultFormData.receiver" placeholder="验收人" />
      </a-form-item>

      <a-form-item>
        <label class="color-3">验收证书</label>
        <a-upload-dragger
          v-model:fileList="fileList"
          name="files"
          :multiple="true"
          :action="action"
          :headers="headers"
          :accept="'.pdf'"
          @change="handleChange"
        >
          <p class="ant-upload-drag-icon">
            <inbox-outlined></inbox-outlined>
          </p>
          <p class="ant-upload-text color-3 font-14">点击或拖拽文件到区域内上传交付物</p>
          <p class="ant-upload-hint color-c">格式：pdf</p>
        </a-upload-dragger>
      </a-form-item>

      <a-form-item class="text-right">
        <a-button type="primary" html-type="submit" @click="onSubmit">上传验收证书</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup>
import { ref, computed, toRaw } from 'vue';
import { useStore } from 'vuex';
import { InboxOutlined } from '@ant-design/icons-vue';
import { uploadImg } from 'apis';

const store = useStore();
const formRef = ref(null);
const sessionProject = sessionStorage.getItem('project');
const projectId = computed(() => store.getters['projects/projectId']);
const token = computed(() => store.getters['user/token']);
const headers = { Authorization: `Bearer ${token.value}` };
const action = uploadImg;
const fileList = ref([]);

if (sessionProject) {
  const project = JSON.parse(sessionProject);
  store.commit('projects/setProject', project);
}

const topicResultFormData = ref({
  projectId: projectId.value,
  code: '',
  name: '',
  receiver: '',
  fileIdList: [],
});

const handleChange = info => {
  const resFileList = [...info.fileList];

  // 数组去重
  const arr = ref([]);
  resFileList.forEach(file => {
    let num = -1;

    arr.value.forEach((item, index) => {
      if (file.name === item.name) {
        num = index;
      }
    });
    if (num > -1) {
      arr.value.splice(num, 1);
    }

    arr.value.push(file);
  });

  // 更改上传文件路径
  arr.value = arr.value.map(file => {
    if (file.response) {
      file.url = file.response.data[0].visitUrl;
      file.id = file.response.data[0].id;
    }

    return file;
  });

  fileList.value = arr.value;
};

const onSubmit = () => {
  fileList.value.forEach(item => {
    // let obj = {
    //   fileId: item.id,
    //   fileName: item.name,
    //   filePathL: item.url
    // }

    // topicResultFormData.value.fileList.push(obj);
    topicResultFormData.value.fileIdList.push(item.id);
  });

  // const params = { param: topicResultFormData.value };

  // saveSubExperiment(params);
  console.log('submit!', toRaw(topicResultFormData.value));
};
</script>

<style scoped>
.task-detail {
  background-color: #fff;
}

.ant-col {
  margin-top: 10px;
}

.ant-col:nth-child(-n + 4) {
  margin-top: 2px;
}

.deliverables .ant-input,
.deliverables-son .ant-input {
  width: 23px;
  height: 14px;
  border-radius: 0;
  padding: 0;
  font-size: 12px;
  color: #1890ff;
  text-align: center;
  margin-left: 5px;
}

.deliverables-son {
  margin-top: 10px !important;
}
</style>