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

<template>
  <div class="task-form bg-white border-radius-10">
    <a-form :model="topicMeetFormData">
      <a-form-item>
        <label class="color-3">会议名称</label>
        <a-input v-model:value="topicMeetFormData.name" placeholder="会议名称" />
      </a-form-item>

      <a-form-item>
        <label class="color-3">会议日期</label>
        <a-space direction="vertical" :size="12">
          <a-range-picker v-model:value="topicMeetFormData.date" />
        </a-space>
      </a-form-item>

      <a-form-item>
        <label class="color-3">会议地点</label>
        <a-input v-model:value="topicMeetFormData.address" placeholder="会议地点" />
      </a-form-item>

      <a-form-item>
        <label class="color-3">会议通知</label>
        <a-upload-dragger
          v-model:fileList="notificationList"
          name="files"
          :multiple="true"
          :action="action"
          :headers="headers"
          :accept="'.pdf'"
          @change="handleChange($event, 1)"
        >
          <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>
        <label class="color-3">会议纪要</label>
        <a-upload-dragger
          v-model:fileList="summaryList"
          name="files"
          :multiple="true"
          :action="action"
          :headers="headers"
          :accept="'.pdf'"
          @change="handleChange($event, 2)"
        >
          <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>
        <label class="color-3">照片附件/其他</label>
        <a-upload-dragger
          v-model:fileList="attachmentList"
          name="files"
          :multiple="true"
          :action="action"
          :headers="headers"
          :accept="'.pdf'"
          @change="handleChange($event, 3)"
        >
          <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">格式：jpg、jpeg、rar、zip</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, watch } from 'vue';
import { useStore } from 'vuex';
import { InboxOutlined } from '@ant-design/icons-vue';
import { uploadImg, saveMeeting, getMeetDetail } from 'apis';
import dayjs from 'dayjs';
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 notificationList = ref([]);
const summaryList = ref([]);
const attachmentList = ref([]);
const meetId = computed(() => store.state.task.meetId);
const projectId = computed(() => store.getters['projects/projectId']);

const topicMeetFormData = ref({
  projectId: projectId.value,
  id: '',
  name: '',
  date: [],
  startTime: '',
  endTime: '',
  address: '',
  notificationList: [],
  summaryList: [],
  attachmentList: [],
});

watch(meetId, async () => {
  if (meetId.value) {
    await getMeetingInfo();
  } else {
    topicMeetFormData.value = {
      projectId: projectId.value,
      id: '',
      name: '',
      date: [],
      startTime: '',
      endTime: '',
      address: '',
      notificationList: [],
      summaryList: [],
      attachmentList: [],
    };

    notificationList.value = [];
    summaryList.value = [];
    attachmentList.value = [];
  }
});

const handleChange = (info, index) => {
  const resFileList = [...info.fileList];

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

    arr.value.forEach(item => {
      if (file.name === item.name) {
        flag = true;
      }
    });
    if (!flag) {
      arr.value.push(file);
    }
  });

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

    return file;
  });

  if (index === 1) {
    notificationList.value = arr.value;
  } else if (index === 2) {
    summaryList.value = arr.value;
  } else if (index === 3) {
    attachmentList.value = arr.value;
  }
};

// 根据ID查询会议详情
async function getMeetingInfo() {
  try {
    const params = { param: { id: meetId.value } };
    const data = await getMeetDetail(params);
    if (data) {
      data.projectId = projectId.value;
      const start = dayjs(Number(data.startTime));
      const end = dayjs(Number(data.endTime));
      data.date = [start, end];
      topicMeetFormData.value = data;

      notificationList.value = [];
      summaryList.value = [];
      attachmentList.value = [];
      data.notificationList.forEach(item => {
        const obj = {
          id: item.fileId,
          name: item.fileName,
          url: item.filePath,
        };

        notificationList.value.push(obj);
      });

      data.summaryList.forEach(item => {
        const obj = {
          id: item.fileId,
          name: item.fileName,
          url: item.filePath,
        };

        summaryList.value.push(obj);
      });

      data.attachmentList.forEach(item => {
        const obj = {
          id: item.fileId,
          name: item.fileName,
          url: item.filePath,
        };

        attachmentList.value.push(obj);
      });
    } else {
      topicMeetFormData.value = {
        projectId: projectId.value,
        id: '',
        name: '',
        date: [],
        startTime: '',
        endTime: '',
        address: '',
        notificationList: [],
        summaryList: [],
        attachmentList: [],
      };
      notificationList.value = [];
      summaryList.value = [];
      attachmentList.value = [];
    }
  } catch (error) {
    message.info(error);
    throw new Error(error);
  }
}

const onSubmit = async () => {
  notificationList.value.forEach(item => {
    const obj = {
      fileId: item.id,
      fileName: item.name,
      filePath: item.url,
    };

    topicMeetFormData.value.notificationList.push(obj);
  });

  summaryList.value.forEach(item => {
    const obj = {
      fileId: item.id,
      fileName: item.name,
      filePath: item.url,
    };

    topicMeetFormData.value.summaryList.push(obj);
  });

  attachmentList.value.forEach(item => {
    const obj = {
      fileId: item.id,
      fileName: item.name,
      filePath: item.url,
    };

    topicMeetFormData.value.attachmentList.push(obj);
  });

  topicMeetFormData.value.date.forEach((item, index) => {
    if (index === 0) {
      topicMeetFormData.value.startTime = dayjs(item).format('x');
    } else {
      topicMeetFormData.value.endTime = dayjs(item).format('x');
    }
  });

  const params = { param: topicMeetFormData.value };
  await saveMeeting(params);
  getMeetingInfo();
};
</script>

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