laisiao/src/components/tableImport/index.vue

<template>
  <a-tooltip v-if="props.type == 'icon'">
    <template #title>导入</template>
    <upload-outlined @click="openModal"/>
  </a-tooltip>
  <a-button  :disabled="props.disabled" @click="openModal" type="primary" v-else>
    导入
  </a-button>
  
  <a-modal v-model:open="open" title="数据导入" @ok="handleOk" @cancel="onCancel">
    <a-upload-dragger
      class="mt-10"
      name="file"
      :multiple="true"
      accept=".xls,.xlsx"
      :showUploadList="false"
      :customRequest="onUpload"
      :beforeUpload="beforeUpload">
      <p class="ant-upload-drag-icon">
        <inbox-outlined></inbox-outlined>
      </p>
      <p class="ant-upload-text">将文件拖到此处，或<em>点击点击导入</em></p>
    </a-upload-dragger>
    <ul style="padding-left:15px">
      <li class="mt-10"><span>为保证数据导入顺利，推荐您下载并使用<a :href="excelMode">《Excel标准模板》</a></span></li>
      <li>文件中数据不能超过5000行</li>
    </ul>
    <div v-for="item in filelist" :key="item.index" >
      <div class="flex-between">
        <span>{{item.name}}</span>
        <a-badge color="green" :text="item.percent == 100?'上传成功':'上传中...'" />
      </div>
      <a-progress :percent="Number(item.percent)" />
    </div>
    <a v-if="props.failedData" :href="props.failedData">下载导入失败的数据</a>
  </a-modal>
</template>

<script setup>
import { UploadOutlined } from '@ant-design/icons-vue';
import Api from '@/api/api'
import { ref,defineProps,defineEmits, onMounted,watch } from 'vue'
import Up from '@/api/upload'
import { InboxOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
/**
 * @bindData {ownerid:router.currentRoute.value.query.id,ownertable:'sa_order',usetype:'default'}
 */
const props = defineProps({
  modeParam:Object,
  id:String,
  bindData:Object,
  accept:String,
  disabled:Boolean,
  failedData:String,
  type:String
})
const emit = defineEmits(['uploadSuccess'])
const open = ref(false)
const handleOk = () => {
  open.value = false
  filelist.value = []
}
const onCancel =  () => {
  props.failedData = null
  open.value = false
  filelist.value = []
}
const openModal = () => {
  open.value = true
  querySite_Parameter()
  getExcelMode()
  
}
const onUpload = ()=>{

}
let filelist = ref([])
const beforeUpload = file=>{
  filelist.value.push({
    uid:file.uid,
    name:file.name,
    percent:0
  })
  let index = file.name.lastIndexOf(".");
  let type = file.name.substr(index + 1);
  props.beforeFunction ? props.beforeFunction():''
  getUploadUrl(file.name, type,file)
}

const getUploadUrl = async (filename,type,file)=>{
  const res = await Api.requested({
    "classname": "system.attachment.huawei.OBS",
    "method": "getFileName",
    "content": {
      "filename": filename,
      "filetype": type,
      "parentid": appfolderid.value//归属文件夹ID
    }
  })
  let url = res.data.uploadurl

  let obsfilename = res.data.serialfilename

  upoladFileToServer(url, file, type, obsfilename)
}
const setProgress = (percent)=>{
  return {
    strokeColor: {
      '0%': '#108ee9',
      '100%': '#87d068',
    },
    strokeWidth: 3,
    format: percent => `${parseFloat(percent.toFixed(2))}%`,
    class: 'test',
  };
}
const upoladFileToServer = async (url, file, ext, obsfilename)=> {
  let config = {
    headers: ext === 'pdf' ? { 'Content-Type': 'application/pdf' } : ext === 'svg'?{ 'Content-Type': 'image/svg+xml' } : { 'Content-Type': 'application/octet-stream' },
    onUploadProgress: function (progressEvent) {
      let percent = progressEvent.loaded / progressEvent.total * 100
      filelist.value = filelist.value.map((e,index) => {
        if (e.uid === file.uid) {
          e = { ...e, percent: percent.toFixed(0) }
        }
        return e
      })
    },
  }
  await Up.upload(url, file, config)
  createFileRecord(obsfilename)
}
// 上传成功以后生成附件记录
const createFileRecord = async (obsfilename)=> {
  let obj = {
    "serialfilename": obsfilename
  }
  obj = Object.assign({},obj,props.bindData)
  let param = {
    "classname": "system.attachment.huawei.OBS",
    "method": "uploadSuccess",
    "content":obj
  }
  const res = await Api.requested(param)
  console.log(res.data)
  if (res.code ===  1) {
    emit('uploadSuccess',res)
  }
}


const appfolderid = ref('')
const salematerialfolderid = ref('')
const querySite_Parameter = async ()=> {
  const res = await Api.requested({
    "classname": "webmanage.site.site",
    "method": "querySite_Parameter",
    "content": {}
  })
  appfolderid.value = res.data.appfolderid, // 应用附件文件夹ID
  salematerialfolderid.value = res.data.salematerialfolderid // 营销物文件夹ID
}
/**
 * 获取excel模式
 */
const excelMode = ref('')
const getExcelMode = async () => {
  const res = await Api.requested(props.modeParam)
  excelMode.value = res.data
}
watch(() => props.failedData, value => {
  value ? message.error({content:'部分数据未导入成功，请下载导入失败的数据查看!',key:1}) :""
})
onMounted(() => {
})
</script>

<style scoped>
.flex-between{
  display: flex;
  justify-content: space-between;
  padding: 20px 15px 0 0;
}
</style>