Functional Requirements:
Batch query of the list requires the input value to be submitted for verification. There are three situations:
If some strings are incorrect, the font color of some strings needs to be changed as a prompt. , click Confirm again to perform batch query on part of the correct data
If all the data is wrong, change the font color as a prompt, click again to confirm the query is empty
If all the data is incorrect If the data is correct, batch query will be executed directly
There are three situations when it is necessary to change the font color as a prompt:
One is duplicate data
One is failed verification data a>
A type of data that neither passes verification nor is repeated
Knowledge points:
contenteditable: contenteditable is true to edit the element content
accomplish:
<el-button type="primary" :size="$formSize" @click="handleBatchQuery">批量查询</el-button>
<!--批量查询-->
<el-dialog title="批量查询" :visible.sync="batchQuery" width="600px">
<div v-if="batchQuery" id="editor" class="editor" ref="editor" contenteditable="true" @click="showInput=true">
<span v-if="!showInput" class="uninput">
手动输入多个ICCID或设备id，以换行符分隔，如：<br/>
94816c8ded8f<br/>
94816c8ded8f
</span>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="cancelQuery">取消</el-button>
<el-button type="primary" @click="submitQuery">确定</el-button>
</div>
</el-dialog>
import request from "@/utils/request";
export default {
data(){
return{
searchForm:{
}
batchQuery:false,
showInput:false,
queryInput:'',
oldQueryInput:[],
resultList:[],
once:false,
}
},
methods:{
//批量查询
handleBatchQuery(){
this.showInput=false
this.batchQuery=true
this.queryInput=undefined
this.searchForm.batchStr=undefined //查询条件
this.oldQueryInput=[]
this.once=false
},
//取消批量查询
cancelQuery(){
this.showInput=false
this.batchQuery=false
this.queryInput=undefined
this.searchForm.batchStr=undefined
this.oldQueryInput=[]
this.once=false
this.$refs.editor.innerHTML=''
},
//提交批量查询
submitQuery(){
//无填写内容有提示语时确认
if(this.$refs.editor.innerHTML.indexOf('手动输入多个ICCID或设备id')!=-1){
this.handleQuery()
this.batchQuery=false
return
}
this.queryInput=this.$refs.editor.innerText.split(/[(\r\n)\r\n]+/).filter(item=>item)
//填写内容超过100条时确认
if(this.queryInput.length>100){
this.$message.warning('批量查询数据数量不能超过100条')
this.batchQuery=true
this.once=false
return
}
//无填写内容无提示语时确认
if(this.queryInput.length===0){
this.handleQuery()
this.batchQuery=false
return
}
let batchList=this.queryInput
if(!this.once){
this.oldQueryInput=this.queryInput
}else{
this.oldQueryInput=Array.from(new Set(this.oldQueryInput.filter(item=>!this.resultList.includes(item))))
}
let batchStr=this.oldQueryInput.join(',');
//联调校验接口
request({
url: `接口路径`,
method: 'post',
data: {
batchStr:batchStr
},
}).then((res) => {
if (res.code === "200") {
this.resultList=res.data || []
this.once=true
if(this.resultList.length===0){
this.batchQuery=false
this.searchForm.batchStr=this.oldQueryInput.join(',');
this.handleQuery()
this.$refs.editor.innerHTML=''
this.showInput=false
}else{
this.batchQuery=true
let repeat=[]
for (let i = 0; i < batchList.length; i++) {
if (batchList.indexOf(batchList[i]) !== i) {
repeat.push(batchList[i]);
}
}
batchList=batchList.map(item=>{
if(repeat.includes(item)&&!this.resultList.includes(item)){
return item=`<div style="color:red">${
item+',数据重复'}</div>`
}else if(this.resultList.includes(item)&&!repeat.includes(item)){
return item=`<div style="color:red">${
item+',无结果'}</div>`
}else if(repeat.includes(item)&&this.resultList.includes(item)){
return item=item=`<div style="color:red">${
item+',无结果且数据重复'}</div>`
}else{
return item=`<div>${
item}</div>`;
}
})
this.$refs.editor.innerHTML=batchList.join('\n')
}
}
})
},
}
}
.editor{
width: 100%;
height: 150px;
overflow: auto;
border: 1px solid #dcdfe6;
}
.uninput{
color: #dcdfe6;
color: #c0c4cc;
line-height: 20px;
}
Effect:
When the text color changes, only the correct data (including duplicate data) will be queried after clicking Confirm again.