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

<template>
  <div class="task-form bg-white border-radius-10">
    <a-form>
      <div v-for="(item, index) in questionList" :key="index">
        <template v-if="item.type === 1">
          <a-form-item>
            <label class="color-3">{{ item.question }}</label>
            <a-input v-model:value="item.con" :placeholder="item.question" />
          </a-form-item>
        </template>

        <template v-if="item.type === 2">
          <a-form-item>
            <label class="color-3">{{ item.question }}</label>
            <a-textarea v-model:value="item.con" :placeholder="item.question" />
          </a-form-item>
        </template>

        <template v-if="item.type === 3"> </template>

        <template v-if="item.type === 4"> </template>

        <template v-if="item.type === 5"> </template>

        <template v-if="item.type === 6">
          <a-form-item>
            <label class="color-3">{{ item.question }}</label>
            <a-date-picker v-model:value="item.date" />
          </a-form-item>
        </template>

        <template v-if="item.type === 7">
          <a-form-item>
            <label class="color-3">{{ item.question }}</label>
            <a-upload-dragger
              v-model:fileList="item.files"
              name="param"
              :multiple="true"
              :action="action"
              :headers="headers"
              :accept="'.pdf'"
              :before-upload="beforeUpload(index)"
              @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>
        </template>
      </div>

      <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 } from 'vue';
import { useStore } from 'vuex';
import dayjs from 'dayjs';
import { InboxOutlined } from '@ant-design/icons-vue';
import { uploadImg } from 'apis';
// import { message } from 'ant-design-vue';

const store = useStore();

// 上传文件相关
const token = computed(() => store.getters['user/token']);
const headers = { Authorization: `Bearer ${token.value}` };
const action = uploadImg;
// 查找、提交相关
const projectId = computed(() => store.getters['projects/projectId']); // 项目ID
const code = computed(() => store.state.task.label); // code
const questionList = ref([]);
// 当前操作的问题下标
const currIndex = ref(null);

// 课题起止时间
// const subStartTime = computed(() => store.state.layout.subStartTime);
// const subEndTime = computed(() => store.state.layout.subEndTime);

getDataByCode();

const beforeUpload = index => {
  currIndex.value = index;
};

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.filePath;
      file.id = file.response.data.fileId;
    }

    return file;
  });

  questionList.value[currIndex.value].files = arr.value;
};

const onSubmit = async () => {
  const params = {
    param: {
      code: code.value,
      projectId: projectId.value,
      questionAndAnswerList: [],
    },
  };

  const arr = [];
  questionList.value.forEach(item => {
    const obj = {
      questionId: item.questionId,
      answerList: [],
    };

    if (item.type === 1 || item.type === 2) {
      obj.answerList.push(item.con);
    }

    if (item.type === 6 && item.date) {
      const time = dayjs(item.date).format('x');
      // if (time < subStartTime.value || time > subEndTime.value) {
      //   message.info('中期检查时间必须在子课题起止时间之内');
      //   return false;
      // }
      obj.answerList.push(time);
    }

    if (item.type === 7) {
      item.files.forEach(val => {
        const file = {
          id: val.id,
          name: val.name,
          url: val.url,
        };
        obj.answerList.push(JSON.stringify(file));
      });
    }
    arr.push(obj);
  });

  params.param.questionAndAnswerList = arr;
  await store.dispatch('task/submitAnswer', params);
  getDataByCode();
};

async function getDataByCode() {
  const params = {
    param: {
      code: code.value,
      projectId: projectId.value,
      intellectualId: null,
    },
  };
  const data = await store.dispatch('task/getByCode', params);

  data.forEach(item => {
    if (item.type === 1 || item.type === 2) {
      item.con = '';

      if (item.answerList.length > 0) {
        item.con = item.answerList[0].answer;
      }
    }

    if (item.type === 6) {
      item.date = null;

      if (item.answerList.length > 0) {
        if (item.answerList[0].answer) {
          item.date = dayjs(Number(item.answerList[0].answer)).format('YYYY-MM-DD');
          item.date = dayjs(item.date, 'YYYY-MM-DD');
        }
      }
    }

    if (item.type === 7) {
      item.files = [];

      if (item.answerList.length > 0) {
        item.answerList.forEach(val => {
          if (val.answer) val.answer = JSON.parse(val.answer);
          item.files.push(val.answer);
        });
      }
    }
  });
  questionList.value = data;
}
</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>