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

<template>
  <div class="task-form bg-white border-radius-10">
    <a-form ref="formRef" :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="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>
        <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>
        <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">格式：jpg、jpeg、rar、zip</p>
        </a-upload-dragger>
      </a-form-item>

      <a-form-item class="text-right">
        <a-button type="primary" html-type="submit">上传会议资料</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

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

const store = useStore();
const formRef = ref(null);
const token = computed(() => store.getters['user/token']);
const headers = { Authorization: `Bearer ${token.value}` };
const action = uploadImg;
const fileList = ref([]);
const topicMeetFormData = ref({
  name: '',
  date: [],
  address: '',
  fileList: [],
});

const handleChange = info => {
  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;
  });

  fileList.value = arr.value;
};
</script>

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