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
          v-model:file-list="fileList"
          name="param"
          :multiple="true"
          :action="action"
          :headers="headers"
          @change="handleChange"
          :accept="'.pdf'"
        >
          <a-button>
            <upload-outlined></upload-outlined>
            Click to Upload
          </a-button>
        </a-upload>
      </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 { UploadOutlined } from '@ant-design/icons-vue';
import { uploadImg } from 'apis';

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

const action = uploadImg;

const handleChange = info => {
  if (info.file.status !== 'uploading') {
    console.log(info.file, info.fileList);
  }

  if (info.file.status === 'done') {
    message.success(`${info.file.name} file uploaded successfully`);
  } else if (info.file.status === 'error') {
    message.error(`${info.file.name} file upload failed.`);
  }
};
</script>

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