佛山市外贸网站建设价格,大理微网站建设,建设网站服务器 知乎,做网络推广的团队功能需求#xff1a; 列表进行批量查询#xff0c;需要对输入的值做提交校验#xff0c;分三种情况#xff1a; 若部分字符串有误#xff0c;部分字符串需要变更字体颜色做提示#xff0c;再次点击确认则对部分正确数据执行批量查询 若全部数据有误则变更字体颜色做提示 列表进行批量查询需要对输入的值做提交校验分三种情况 若部分字符串有误部分字符串需要变更字体颜色做提示再次点击确认则对部分正确数据执行批量查询 若全部数据有误则变更字体颜色做提示再次点击确认查询为空 若全部数据正确则直接执行批量查询 需要变更字体颜色做提示的情况分三种 一种为重复数据 一种为未通过校验数据 一种为既没有通过校验又重复的数据 知识点 contenteditablecontenteditable为true可编辑元素内容 实现
el-button typeprimary :size$formSize clickhandleBatchQuery批量查询/el-button!--批量查询--
el-dialog title批量查询 :visible.syncbatchQuery width600pxdiv v-ifbatchQuery ideditor classeditor refeditor contenteditabletrue clickshowInputtruespan v-if!showInput classuninput手动输入多个ICCID或设备id以换行符分隔如br/94816c8ded8fbr/94816c8ded8f/span/divdiv slotfooter classdialog-footerel-button clickcancelQuery取消/el-buttonel-button typeprimary clicksubmitQuery确定/el-button/div
/el-dialogimport request from /utils/request;
export default {data(){return{searchForm:{}batchQuery:false,showInput:false,queryInput:,oldQueryInput:[],resultList:[],once:false,}},methods:{//批量查询handleBatchQuery(){this.showInputfalsethis.batchQuerytruethis.queryInputundefinedthis.searchForm.batchStrundefined //查询条件this.oldQueryInput[]this.oncefalse},//取消批量查询cancelQuery(){this.showInputfalsethis.batchQueryfalsethis.queryInputundefinedthis.searchForm.batchStrundefinedthis.oldQueryInput[]this.oncefalsethis.$refs.editor.innerHTML},//提交批量查询submitQuery(){//无填写内容有提示语时确认if(this.$refs.editor.innerHTML.indexOf(手动输入多个ICCID或设备id)!-1){this.handleQuery()this.batchQueryfalsereturn}this.queryInputthis.$refs.editor.innerText.split(/[(\r\n)\r\n]/).filter(itemitem)//填写内容超过100条时确认if(this.queryInput.length100){this.$message.warning(批量查询数据数量不能超过100条)this.batchQuerytruethis.oncefalsereturn}//无填写内容无提示语时确认if(this.queryInput.length0){this.handleQuery()this.batchQueryfalsereturn}let batchListthis.queryInputif(!this.once){this.oldQueryInputthis.queryInput}else{this.oldQueryInputArray.from(new Set(this.oldQueryInput.filter(item!this.resultList.includes(item))))}let batchStrthis.oldQueryInput.join(,);//联调校验接口request({url: 接口路径,method: post,data: {batchStr:batchStr},}).then((res) {if (res.code 200) {this.resultListres.data || []this.oncetrueif(this.resultList.length0){this.batchQueryfalsethis.searchForm.batchStrthis.oldQueryInput.join(,);this.handleQuery()this.$refs.editor.innerHTMLthis.showInputfalse}else{this.batchQuerytruelet repeat[]for (let i 0; i batchList.length; i) {if (batchList.indexOf(batchList[i]) ! i) {repeat.push(batchList[i]);}}batchListbatchList.map(item{if(repeat.includes(item)!this.resultList.includes(item)){return itemdiv stylecolor:red${item,数据重复}/div}else if(this.resultList.includes(item)!repeat.includes(item)){return itemdiv stylecolor:red${item,无结果}/div}else if(repeat.includes(item)this.resultList.includes(item)){return itemitemdiv stylecolor:red${item,无结果且数据重复}/div}else{return itemdiv${item}/div;}})this.$refs.editor.innerHTMLbatchList.join(\n)}}})},}
}.editor{width: 100%;height: 150px;overflow: auto;border: 1px solid #dcdfe6;
}
.uninput{color: #dcdfe6;color: #c0c4cc;line-height: 20px;
}效果 当文字颜色变更提示后再次点击确认后只会查询正确的包含数据重复的数据
