需求：
1.通過點(diǎn)擊按鈕和運(yùn)算符將按鈕和運(yùn)算符的文字賦值到input框中，input框不能輸入，但是可以刪除，以及光標(biāo)插入。
2.刪除時(shí)，運(yùn)算符直接刪，但是文字按鈕需要整體刪除。（如，在"社保個(gè)人"光標(biāo)在"人"后點(diǎn)擊刪除時(shí)，直接刪除"社保個(gè)人"這幾個(gè)字）
3.保存時(shí)需要對input的內(nèi)容進(jìn)行校驗(yàn)，判斷是否是一個(gè)正常的公式。
截圖：
截屏2021-09-17 下午5.33.14.png
<!-- 科目公式配置 -->
<template>
<div>
<el-form ref="elForm" size="medium" label-width="100px">
<el-form-item label="績效工資=">
<el-input id="inputRef" type="textarea" placeholder="請選擇" :value="salary" @input="inputChange"
:autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
</el-form-item>
<div style="text-align: center;">
<el-tag v-for="(item,index) in symbolList" :key="index" style="margin: 5px;" @click="add(item)">{{item}}</el-tag>
</div>
</el-form>
<el-tabs type="border-card" style="margin-top: 30px;">
<el-tab-pane v-for="(item,index) in allData" :key="index" :label="item.title">
<el-tag v-for="(item1,idx) in item.list" :key="idx" style="margin: 5px;"@click="add(item1.name)">{{item1.name}}</el-tag>
</el-tab-pane>
</el-tabs>
<div style=" margin-top: 65px; text-align: right;">
<el-button type="primary" style="margin-left: 10px;" @click.native="submitForm">保 存</el-button>
<el-button @click.native="closeBtn">取 消</el-button>
</div>
</div>
</template>
<script>
import { insertInputTxt } from "@/utils/ruoyi";
export default {
data() {
return {
salary:"",
symbolList:['+','-','*','/','(',')','%'], //符號數(shù)組
allData:[],
}
},
methods: {
open(data) {
var allData = [
{title:'薪酬數(shù)據(jù)',list:[{id:'101',name:'基本工資'},{id:'102',name:'崗位工資'}]},
{title:'考勤數(shù)據(jù)',list:[{id:'103',name:'應(yīng)到天數(shù)'},{id:'104',name:'實(shí)到天數(shù)'},{id:'105',name:'請假天數(shù)'}]},
{title:'變動項(xiàng)目',list:[{id:'106',name:'社保個(gè)人'},{id:'107',name:'公積金個(gè)人'},{id:'108',name:'變動項(xiàng)目合計(jì)'}]},
{title:'自定義科目',list:[{id:'109',name:'自定義科目1'},{id:'110',name:'績效比例數(shù)'}]},
]
var all = {title:'全部',list:[]}
var li = []
allData.forEach((item,index) =>{
li = li.concat(item.list)
})
this.$set(all,'list',li)
allData.unshift(all) //添加all數(shù)據(jù)到allData數(shù)組的第一位
// console.log(allData)
this.allData = allData
if(data){//修改賦值
this.salary = data
}else{ //新增清空上次的值，
this.salary = ''
}
},
add(text){
this.salary = insertInputTxt('inputRef',text)
},
inputChange(val){
//1.只允許按鈕插入，不允許手動輸入，允許手動刪除
if(this.salary.length > val.length){
this.salary = val
}
//2.刪除時(shí)獲取光標(biāo)前后的文字
var elInput = document.getElementById('inputRef');
var startPos = elInput.selectionStart;
var endPos = elInput.selectionEnd;
if (startPos === undefined || endPos === undefined) return
var txt = elInput.value;
var q = txt.substring(0, startPos) //光標(biāo)前面的文字
var h = txt.substring(endPos) //光標(biāo)后面的文字
// console.log( "光標(biāo)前面的文字:" + q)
//3.刪除的邏輯處理：獲取光標(biāo)前的最后一項(xiàng)文字（不算運(yùn)算符）
var arr = q.split(/[\+\-\*\/\(\)\%]/).filter(Boolean) //按字符集分割字符串，然后去掉空的元素
var lastStr = arr.pop() //刪除數(shù)組的最后一項(xiàng),返回的是數(shù)組的最后一項(xiàng)
// console.log("最后一項(xiàng)：" + lastStr)
if(lastStr){
//判斷光標(biāo)前的最后一項(xiàng)文字是否是完整的科目(在全部數(shù)據(jù)中存在)
var qbData = this.allData[0].list
var isWZ = false //是否完整科目
qbData.forEach(item =>{
if(item.name === lastStr){
isWZ = true //是完整科目
}
})
if(!isWZ){ //如果不是完整科目，就在光標(biāo)前的文字中刪除該不完整的科目
q = q.substr(0, q.length - lastStr.length); //在q中刪除lastStr
}
//如果是完整科目，那就意味著光標(biāo)刪除的只是一個(gè)運(yùn)算符，不用做額外處理
this.salary = q + h //拼接光標(biāo)前后字段即可
setTimeout(() => { //刪除文字后，讓光標(biāo)定位到刪除的地方，需要加個(gè)延時(shí)，不然代碼會失效
elInput.focus()
elInput.selectionStart = elInput.selectionEnd = q.length
}, 50); //延時(shí)盡量小，不然容易誤刪最后面的文字
}
},
checkFormulaText(){//分割字符串
var resultStr = this.salary
var errorMsg = ""
//攔截1：判斷公式中 基本工資崗位工資 中間沒有運(yùn)算符
var arr = resultStr.split(/[\+\-\*\/\(\)\%]/).filter(Boolean) //按字符集分割字符串，然后去掉空的元素
var qbData = this.allData[0].list
var qbList = []
qbData.forEach(item =>{
qbList.push(item.name)
})
var isSuccess = true
arr.forEach(name =>{
if(!qbList.includes(name)){ //數(shù)組中沒有這條數(shù)據(jù)
errorMsg = "公式配置錯(cuò)誤，請檢查：" + name
isSuccess = false
}
})
//攔截2：公式中有以下錯(cuò)誤的運(yùn)算符
var errorList = [
"++","+-","+*","+/","+%",
"-+","--","-*","-/","-%",
"*+","*-","**","*/","*%",
"/+","/-","/*","http://","/%",
"%+","%-","%*","%/","%%",
"(+","(-","(*","(/","(%",
"+)","-)","*)","/)","%)",
"()",")("
]
errorList.forEach(item =>{
if(resultStr.indexOf(item) != -1){ //字符串包含
errorMsg = "公式配置錯(cuò)誤，請檢查：" + item
isSuccess = false
}
});
//攔截3：公式中(的個(gè)數(shù)與)的個(gè)數(shù)不相同
var sub1 = (resultStr.match(/\(/g)||[]).length
var sub2 = (resultStr.match(/\)/g)||[]).length
if(sub1 !== sub2){
errorMsg = "公式配置錯(cuò)誤，請檢查()是否匹配"
isSuccess = false
}
//攔截4：公式中（）的位置是否反了 社保個(gè)人)+(崗位工資
var sub1F = resultStr.indexOf('\(')
var sub2F = resultStr.indexOf('\)')
var sub1E = resultStr.lastIndexOf('\(')
var sub2E = resultStr.lastIndexOf('\)')
if(sub2F < sub1F || sub2E < sub1E ){ // ）首次出現(xiàn)的位置 小于 ( 首次出現(xiàn)的位置; 或者 ) 最后出現(xiàn)的位置 小于 (最后出現(xiàn)的位置
errorMsg = "公式配置錯(cuò)誤，請檢查()是否匹配"
isSuccess = false
}
//攔截5: 公式中，公積金個(gè)人(自定義科目1)實(shí)到天數(shù)
if(sub1F !== 0){ //如果(不是第一位，獲取每個(gè)(前面的一個(gè)字符，看看是不是符號，不是符號，就報(bào)錯(cuò)
var idxList = this.getStrPositions(resultStr,'(')
var isE = false
idxList.forEach(item =>{
var dd = resultStr.substr(item-1,1) //獲取(前面一個(gè)字符
if(!this.symbolList.includes(dd)){ //不是符號，報(bào)錯(cuò)
isE = true
}
})
if(isE){
errorMsg = "公式配置錯(cuò)誤，請檢查(運(yùn)算符"
isSuccess = false
}
}
if(sub2E !== resultStr.length-1){ //如果)不是最后一位，獲取每一個(gè)）后面的一個(gè)字符，看看是不是符號，不是符號，就報(bào)錯(cuò)
var idxList = this.getStrPositions(resultStr,')')
var isE = false
idxList.forEach(item =>{
var dd = resultStr.substr(item+1,1) //獲取)后面的一個(gè)字符
if(!this.symbolList.includes(dd)){ //不是符號，報(bào)錯(cuò)
isE = true
}
})
if(isE){
errorMsg ="公式配置錯(cuò)誤，請檢查)運(yùn)算符"
isSuccess = false
}
}
//攔截6：公式的開頭和結(jié)尾有非法運(yùn)算符
if(resultStr.length > 0){
var firstChart = resultStr.substr(0,1) //第一個(gè)字符
var firstErrorList = ["+","-","*","/","%",")"]
firstErrorList.forEach(item =>{
if(firstChart === item){
errorMsg = "公式配置錯(cuò)誤，開頭不能是:" + item
isSuccess = false
}
});
var endChart = resultStr.substr(-1) //最后一個(gè)字符
var endErrorList = ["+","-","*","/","%","("]
endErrorList.forEach(item =>{
if(endChart === item){
errorMsg = "公式配置錯(cuò)誤，結(jié)尾不能是:" + item
isSuccess = false
}
});
}else{
errorMsg ="請配置公式"
isSuccess = false
}
if(!isSuccess){
this.msgError(errorMsg)
}
return isSuccess
},
getStrPositions(str,subStr){
var indexs=[];
var string=str;
while(true){
var index=string.lastIndexOf(subStr);
if(index!=-1){
string=string.substr(0,index)+string.substr(index+subStr.length,string.length);
indexs.push(index);
}else{
break;
}
}
return indexs;
},
submitForm() {
if(this.checkFormulaText()){
this.$emit('closeConfigFormula',{msg:this.salary}); //通知父組件改變
}
},
closeBtn(){
this.$emit('closeConfigFormula',{msg:''}); //通知父組件改變
}
}
}
</script>
/** input在光標(biāo)前插入文字
* id：input綁定的id
* insertTxt：要插入的文本
* 返回：插入后的所有文本
*/
export function insertInputTxt(id,insertTxt) {
var elInput = document.getElementById(id);
var startPos = elInput.selectionStart;
var endPos = elInput.selectionEnd;
if (startPos === undefined || endPos === undefined) return
var txt = elInput.value;
var result = txt.substring(0, startPos) + insertTxt + txt.substring(endPos)
elInput.value = result;
elInput.focus();
elInput.selectionStart = startPos + insertTxt.length;
elInput.selectionEnd = startPos + insertTxt.length;
return result;
}
