读取导入的excel表格内容，插入到表格，同时做去重，j前端通过js实现模糊查询

1.导入的excel模版

2.点击导入，显示excel导入弹窗

3.点击选择文件，会调用本地文件夹里面的excel文件


4.选中文件，点击 导入

html部分

      <a-button type="primary" @click="onImportXls">导入</a-button>
      <a-modal v-model:visible="excelVisible" title="Excel导入" :centered="true" :width="500" @cancel="excelCancel" :footer="null">
      <div style="padding: 10px; box-sizing: border-box; padding-bottom: 20px; min-height: 250px">
        <div style="display: flex; justify-content: space-between; width: 400px">
          <div style="width: 200px !important">
            <a-upload name="file" accept=".xls,.xlsx" :multiple="false" :fileList="fileList" :beforeUpload="beforeUpload" :remove="handleRemove">
              <a-button>选择文件</a-button>
              <span style="margin-left: 5px" v-if="fileList.length > 0">已选择 {{ fileList.length }} 个文件</span>
              <span style="margin-left: 5px" v-else>未选择任何文件</span>
            </a-upload>
          </div>
          <span @click="handleImport" style="cursor: pointer; color: #3e90ff">导入</span>
        </div>
      </div>
    </a-modal>

js部分

const formInfo2 = ref({
  matId: '',
  wlName: '',
});
const dataSource= ref([]);
const fileList = ref([]);
const excelVisible = ref(false); 

function onImportXls() {
  fileList.value = [];
  excelVisible.value = true;
}

function excelCancel() {
  excelVisible.value = false;
  fileList.value = [];
}

function handleImport() {
  dataSource.value = [];
  highlightColumnList.value = [];
  if (fileList.value.length > 0) {
    const reader = new FileReader();
    reader.readAsArrayBuffer(fileList.value[0]);
    reader.onload = function () {
      const buffer = reader.result;
      const bytes = new Uint8Array(buffer);
      const length = bytes.byteLength;
      let binary = '';
      for (let i = 0; i < length; i++) {
        binary += String.fromCharCode(bytes[i]);
      }
      const wb = XLSX.read(binary, {
        type: 'binary',
      });
      const outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
      let drr = [...outdata];
      let brr = [];
      for (let i = 0; i < drr.length; i++) {
        let ab = Object.entries(drr[i]);
        for (let j = 0; j < ab.length; j++) {
        	//excel表头含有换行符时
          // ab[j][0] = ab[j][0].replaceAll('↵', '');//不生效
          ab[j][0] = ab[j][0].replaceAll('\n', ''); //去除成功
        }
        brr.push(Object.fromEntries(ab));
      }
      let data = brr;
      let arr = dataSource.value;
      //将excel表头和table的表头做个比对，赋值
      data.map((v, i) => {
        if (v['数量'] == undefined) {
          v.qty = '';
        } else {
          v.qty = v['数量'];
        }
        if (v['供应商编码'] == undefined) {
          v.vendorCode = '';
        } else {
          v.vendorCode = v['供应商编码'];
        }
        if (v['产品名称'] == undefined) {
          v.productName = '';
        } else {
          v.productName = v['产品名称'];
        }
        if (v['物料编号'] == undefined) {
          v.productCode = '';
        } else {
          v.productCode = v['物料编号'];
        }
        if (v['产品上级名称'] == undefined) {
          v.productParent = '';
        } else {
          v.productParent = v['产品上级名称'];
        }
        if (v['产品上级图号'] == undefined) {
          v.productParentFig = '';
        } else {
          v.productParentFig = v['产品上级图号'];
        }
        if (v['产品下级'] == undefined) {
          v.productChild = '';
        } else {
          v.productChild = v['产品下级'];
        }
        if (v['产品状态'] == undefined) {
          v.productState = '';
        } else {
          v.productState = v['产品状态'];
        }
        if (v['材质'] == undefined) {
          v.material = '';
        } else {
          v.material = v['材质'];
        }
        if (v['表面处理'] == undefined) {
          v.surfaceDeal = '';
        } else {
          v.surfaceDeal = v['表面处理'];
        }
        if (v['热处理'] == undefined) {
          v.headDeal = '';
        } else {
          v.headDeal = v['热处理'];
        }
        if (v['技术编号'] == undefined) {
          v.techNo = '';
        } else {
          v.techNo = v['技术编号'];
        }
        if (v['备注'] == undefined) {
          v.remark = '';
        } else {
          v.remark = v['备注'];
        }
        v.restId = new Date().getTime() + i;//对导入数据赋值一个唯一值
      });
      //含有中文或空去掉
      for (let i = 0; i < data.length; i++) {
        if (/[\u4E00-\u9FA5]/g.test(data[i].productCode) || data[i].productCode == '' || data[i].productCode == undefined) {
          data.splice(i, 1);
        }
      }
      if (arr.length > 0) {
        arr = arr.concat(data);
      } else {
        arr = data;
      }
      arr = unipFunc(arr);//去重处理
      dataSource.value = reduce(arr, 'productCode');//去重处理，若是导入数据的物料编号有重复的，则以最后一次导入数据的为主，把之前含有相同物料编号的数据替换掉
      sessionStorage.setItem('inData', JSON.stringify(dataSource.value));//对导入的表格数据做个本地缓存，后面搜索会用到
      excelVisible.value = false;
      createMessage.success('导入成功');
    };
  } else {
    createMessage.warning('请选择上传文件');
  }
}

function unipFunc(arr) {
  var Arr = [];
  for (let i = 0; i < arr.length; i++) {
    for (let j = i + 1; j < arr.length; j++) {
      if (arr[i].productCode === arr[j].productCode && Arr.indexOf(arr[j].productCode) === -1) {
        arr[i] = arr[j];
      }
    }
  }
  return arr;
}

function reduce(person, key) {
  const obj = {};
  person = person.reduce((cur, next) => {
    obj[next[key]] ? '' : (obj[next[key]] = true && cur.push(next));
    return cur;
  }, []);
  return person;
}

//移除上传文件
function handleRemove(file) {
  const index = unref(fileList).indexOf(file);
  const newFileList = unref(fileList).slice();
  newFileList.splice(index, 1);
  fileList.value = newFileList;
}

//上传前处理
function beforeUpload(file) {
  fileList.value = [...unref(fileList), file];
}

5.前端使用js进行搜索，做了个模糊查询
html部分

<a-form :model="formInfo2" name="basic" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
        <a-row :gutter="20">
          <a-col :span="8">
            <a-form-item label="物料名称" name="matName2">
              <a-input v-model:value="formInfo2.wlName" allowClear></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-button type="primary" preIcon="ant-design:search-outlined" @click="handSearch" style="margin-right: 20px">搜索</a-button>
            <a-button type="primary" preIcon="ant-design:search-outlined" @click="advancedSearch">高级搜索</a-button>
          </a-col>
        </a-row>
      </a-form>

js部分

function handSearch() {
  console.log(formInfo2.value, '搜索内容');
  console.log(sessionStorage.getItem('inData'), '物料');
  let newArr = [];
  let inData = JSON.parse(sessionStorage.getItem('inData'));
  if (inData) {
    if (formInfo2.value.wlName) {
      for (let i = 0; i < inData.length; i++) {
        if (inData[i].productName.indexOf(formInfo2.value.wlName)!=-1) {
          newArr.push(inData[i]);
        }
      }
    } else {
      newArr = inData;
    }
    console.log(dataSource.value, '符合搜索条件的数据');
    dataSource.value = newArr;
  }
}