渔具网站建设策划书前言,网络推广计划书范文,涵江网站建设,教育网站建设需求文档1.导入的excel模版 2.点击导入#xff0c;显示excel导入弹窗 3.点击选择文件#xff0c;会调用本地文件夹里面的excel文件 4.选中文件#xff0c;点击 导入 html部分 a-button typeprimary clickonImportXls导入/a-button显示excel导入弹窗 3.点击选择文件会调用本地文件夹里面的excel文件 4.选中文件点击 导入 html部分 a-button typeprimary clickonImportXls导入/a-buttona-modal v-model:visibleexcelVisible titleExcel导入 :centeredtrue :width500 cancelexcelCancel :footernulldiv stylepadding: 10px; box-sizing: border-box; padding-bottom: 20px; min-height: 250pxdiv styledisplay: flex; justify-content: space-between; width: 400pxdiv stylewidth: 200px !importanta-upload namefile accept.xls,.xlsx :multiplefalse :fileListfileList :beforeUploadbeforeUpload :removehandleRemovea-button选择文件/a-buttonspan stylemargin-left: 5px v-iffileList.length 0已选择 {{ fileList.length }} 个文件/spanspan stylemargin-left: 5px v-else未选择任何文件/span/a-upload/divspan clickhandleImport stylecursor: pointer; color: #3e90ff导入/span/div/div/a-modaljs部分 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 :modelformInfo2 namebasic :label-col{ span: 6 } :wrapper-col{ span: 18 }a-row :gutter20a-col :span8a-form-item label物料名称 namematName2a-input v-model:valueformInfo2.wlName allowClear/a-input/a-form-item/a-cola-col :span8a-button typeprimary preIconant-design:search-outlined clickhandSearch stylemargin-right: 20px搜索/a-buttona-button typeprimary preIconant-design:search-outlined clickadvancedSearch高级搜索/a-button/a-col/a-row/a-formjs部分 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;} }