读取导入的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;}
}