crm_front_v3/src/views/custom_manage/custom/listMatch.vue

<script setup>
import { computed, ref } from "vue";
import { ElMessage } from 'element-plus';

const templateUrl = 'https://hzstatic.hzinsights.com/static/admin/excel/客户名单匹配模板.xlsx'
const importUrl = import.meta.env.VITE_APP_API_ROOT+'/custom/list/match/import';

const headerConfig = {
  Authorization:localStorage.getItem('auth')
}

const colList = [
    {
        label:'姓名',
        key:'UserName'
    },
    {
        label:'国际（区号）',
        key:'CountryCode'
    },
    {
        label:'手机号',
        key:'Mobile'
    },
    {
        label:'客户公司',
        key:'CompanyName'
    },
    {
        label:'系统客户',
        key:'SysCompanyName'
    },
    {
        label:'FICC状态',
        key:'FiccStatus'
    },
    {
        label:'FICC销售',
        key:'FiccSeller'
    },
    {
        label:'权益状态',
        key:'RaiStatus'
    },
    {
        label:'权益销售',
        key:'RaiSeller'
    }
]

// 校验文件和大小
function beforeUploadFile(file) {
  let extension = file.name.substring(file.name.lastIndexOf(".") + 1);
  let size = file.size / 1024 / 1024;//M
  if (extension !== "xlsx" && extension !== "xls") {
    ElMessage.warning("只能上传后缀是.xlsx和.xls的文件");
      return false;
  }
  if (size > 10) {
    ElMessage.warning("文件大小不得超过10M");
    return false
  }
}

const fileList = ref([])
const tableData = ref([]);
const code = ref('')
// 上传成功之后
function handleSuccess(result) {
    let res = this.$parseData(result);
    if(res.Ret===200){
        tableData.value=res.Data.List||[]
        code.value=res.Data.Code
    }else{
      ElMessage.warning(res.Msg)
    }
}


const downloadUrl = computed(() => {
    const url=import.meta.env.VITE_APP_API_ROOT+'/custom/list/match/download'
    return url+'?Code='+code.value+'&'+localStorage.getItem('auth')
})
function handleDownLoadList(){
      let link = document.createElement("a");
      link.href=downloadUrl.value
      link.setAttribute("download", '客户名单匹配');
      link.style.display = "none"; //a标签隐藏
      document.body.appendChild(link);
      link.click();
  }
</script>
<template>
  <div class="custome-list-match-page">
    <div class="top-warp" style="margin-bottom: 30px">
      <a style="width: 100%" :href="templateUrl" download="客户名单匹配模板"
        ><el-button type="primary" plain style="margin-right: 15px"
          >下载模板</el-button
        ></a
      >
      <el-upload
        style="display: inline-block"
        :before-upload="beforeUploadFile"
        :headers="headerConfig"
        :file-list="fileList"
        :on-success="handleSuccess"
        :action="importUrl"
        accept=".xlsx"
        name="File"
        :show-file-list="false"
      >
        <el-button type="primary">导入名单</el-button>
      </el-upload>
      <el-button
        type="primary"
        plain
        style="float: right"
        :disabled="!code"
        @click="handleDownLoadList"
        >下载名单</el-button
      >
      <!-- <a style="width: 100%" :href="downloadUrl+'?Code='+code" download></a> -->
    </div>
    <el-table :data="tableData" border style="width: 100%" max-height="800">
      <el-table-column
        :prop="col.key"
        :label="col.label"
        v-for="col in colList"
        :key="col.label"
        align="center"
      >
      </el-table-column>
    </el-table>
  </div>
</template>
<style scoped lang="scss">
.custome-list-match-page{
    background-color: #fff;
    border: 1px solid #ECECEC;
    padding: 30px;
    border-radius: 4px;
    min-height: 60vh;
}
</style>