实现方式一
1、效果图
2、实现代码
组件弹框实现 样式自己调整 公式的数字与汉字元素、符号 建立元素表 动态获取
完整代码（calculate.vue）
<template>
<div id="formulaPage">
<div
ref="formulaView"
class="formulaView"
contentEditable="false"
@click="recordPosition"
@keyup="editEnter($event)"
@copy="copy($event)"
@paste="paste($event)"
/>
<div class="infomationContent">
<div class="infomationContent-leftFlexbox">
<div class="tab">
<ul style="width: 200px">
<li
v-for="(v, i) in Num"
:key="i"
class="numberClass"
:style="{ background: v.backgroundColor }"
@click="addItem($event, 2, v, false)"
>
{{ v.displayValue }}
</li>
</ul>
</div>
<div class="tab">
<ul style="width: 500px">
<li
v-for="(v, i) in customType"
:key="i"
class="typeClass"
:style="{ background: v.backgroundColor }"
:class="{ noclick: v.isFlag }"
@click="addItem($event, 2, v, v.isFlag)"
>
{{ v.displayValue }}
</li>
</ul>
</div>
<div class="tab">
<ul style="width: 200px">
<li
v-for="(v, i) in Symbol"
:key="i"
class="symbolClass"
:style="{ background: v.backgroundColor }"
@click="addItem($event, 2, v, false)"
>
{{ v.displayValue }}
</li>
</ul>
</div>
</div>
<div class="infomationContent-rightBtnbox">
<div class="imgboxinfo" style="margin-bottom: 32px">
<img src="@/assets/images/rolback.png" alt="" style="width: 40px; height: 40px" @click="deleteHumerText" />
</div>
<div class="imgboxinfo">
<img src="@/assets/images/calSave.png" alt="" style="width: 40px; height: 40px" @click="onSaveformulaEvent" />
</div>
</div>
</div>
<!-- <div class="footerComtent">
<el-button type="primary" style="width: 200px; height: 30px" @click="onSaveformulaEvent">保存</el-button>
</div> -->
<!-- <button @click="parsingFormula('(长+宽+高)*2')">反向解析公式</button> -->
<!-- <button @click="deleteHumerText()">删除</button> -->
</div>
</template>
<script>
export default {
name: 'FormulaPage',
props: {
content: { type: String, default: '' },
recoverdate: {
type: Array,
default: () => []
},
domflag: {
type: String,
default: ''
}
},
data() {
return {
// 权限分类 元素分类不可用集合
btnsRuleArray: {
offer: ['thickness', 'nailmouth', 'bellsocket', 'gramweight'], // 报价
weight: ['thickness', 'unitprice'], // 重量
areavolume: ['gramweight', 'unitprice'] // 体积、面积、纸宽、纸长
},
// 公式字符串
formulaStr: '',
// 公式编辑器最后光标位置
formulaLastRange: null,
Num: [{
"displayValue":"1",
"saveValue":"1"
},{
"displayValue":"2",
"saveValue":"2"
},{
"displayValue":"3",
"saveValue":"3"
},{
"displayValue":"4",
"saveValue":"4"
},{
"displayValue":"5",
"saveValue":"5"
},{
"displayValue":"6",
"saveValue":"6"
},{
"displayValue":"7",
"saveValue":"7"
},{
"displayValue":"8",
"saveValue":"8"
},{
"displayValue":"9",
"saveValue":"9"
},{
"displayValue":"0",
"saveValue":"0"
},{
"displayValue":".",
"saveValue":"."
}],
Symbol: [
{
"displayValue":"+",
"saveValue":"+"
},{
"displayValue":"-",
"saveValue":"-"
},{
"displayValue":"x",
"saveValue":"*"
},{
"displayValue":"÷",
"saveValue":"/"
},{
"displayValue":"(",
"saveValue":"("
},{
"displayValue":")",
"saveValue":")"
},{
"displayValue":"{",
"saveValue":"{"
},{
"displayValue":"}",
"saveValue":"}"
},
],
customType: [{
"displayValue":"上报产量",
"saveValue":"report_production"
},{
"displayValue":"实际产量",
"saveValue":"reality_production"
},{
"displayValue":"红矿",
"saveValue":"red_ore"
},{
"displayValue":"青堆",
"saveValue":"black_stack"
},{
"displayValue":"红堆",
"saveValue":"red_stack"
},{
"displayValue":"煤存",
"saveValue":"coal_storage"
},{
"displayValue":"槽存",
"saveValue":"slot_storage"
},{
"displayValue":"土耗",
"saveValue":"soil_used"
},{
"displayValue":"土存",
"saveValue":"soil_stock"
},{
"displayValue":"煤耗",
"saveValue":"coal_used"
},{
"displayValue":"产量",
"saveValue":"production"
},{
"displayValue":"用电量",
"saveValue":"meter_used"
}],
backFormulaStrArray: [] // 按键值存储编辑器数据
}
},
created() {
this.backFormulaStrArray = []
if (this.recoverdate) {
this.backFormulaStrArray = this.recoverdate
this.$nextTick(function () {
this.parsingFormulaCustom(this.recoverdate)
})
}
// this.getList()
},
methods: {
/** 查询所有公式元素 */
getList() {
listElement({ pageNum: 1, pageSize: 50 }).then(response => {
response.rows.forEach(item => {
item.isFlag = false
if (this.domflag) {
const newLegth = this.btnsRuleArray[this.domflag].filter(e => e == item.saveValue)
if (newLegth.length > 0) {
item.isFlag = true
}
}
})
const numberDate = response.rows
.filter(e => {
return e.elementType == 'number'
})
.sort((a, b) => {
return a.order - b.order
})
const formulaElementDate = response.rows
.filter(e => {
return e.elementType == 'formulaElement'
})
.sort((a, b) => {
return a.order - b.order
})
const symbolDate = response.rows
.filter(e => {
return e.elementType == 'symbol'
})
.sort((a, b) => {
return a.order - b.order
})
this.Num = numberDate
this.Symbol = symbolDate
this.customType = formulaElementDate
})
},
// 删除操作---从最后删除
deleteHumerText() {
if (this.backFormulaStrArray.length > 0) {
this.backFormulaStrArray.splice(-1, 1)
while (this.$refs.formulaView.firstChild) {
this.$refs.formulaView.removeChild(this.$refs.formulaView.firstChild)
}
this.backFormulaStrArray.forEach(item => {
const fd = document.createDocumentFragment()
const empty = document.createTextNode(' ')
const formulaEl = document.createTextNode(' ' + item.displayValue + ' ')
fd.appendChild(empty)
fd.appendChild(formulaEl)
fd.appendChild(empty)
this.$refs.formulaView.appendChild(fd)
// 创建新的光标对象
var range = document.createRange()
// 光标对象的范围界定
range.selectNodeContents(formulaEl)
// 光标位置定位
range.setStart(formulaEl, formulaEl.data.length - 1)
// 使光标开始和光标结束重叠
range.collapse(true)
// 清除选定对象的所有光标对象
window.getSelection().removeAllRanges()
// 插入新的光标对象
window.getSelection().addRange(range)
// 保存新光标
this.recordPosition()
})
}
},
// 保存数据 回调父组件
onSaveformulaEvent() {
const strParams = this.backFormulaStrArray.map(e => e.saveValue).join('')
const strParamsValue = this.backFormulaStrArray.map(e => e.displayValue).join('')
const newbackFormulaStrArray = []
this.backFormulaStrArray.forEach(item => {
const obj = {
displayValue: item.displayValue,
elementType: item.elementType,
saveValue: item.saveValue
}
newbackFormulaStrArray.push(obj)
})
this.parsingFormula('')
this.$emit('onChangeSuccess', strParams, strParamsValue, newbackFormulaStrArray)
this.backFormulaStrArray = []
console.log(strParams)
console.log(strParamsValue)
console.log(newbackFormulaStrArray)
// const ifLegal1 = [...strParamsValue].reduce((a, i) => (i === '(' ? a + 1 : a - 1), 0)
},
isValidate(str) {
const inArr = []
const arr = str.split('')
for (const s of arr) {
if (s === '{' || s === '[' || s === '(') {
// 入栈
inArr.push(s)
}
if (s === '}' || s === ']' || s === ')') {
let temp
switch (s) {
case '}':
temp = '{'
break
case ']':
temp = '['
break
case ')':
temp = '('
break
}
// 出栈
const out = inArr.pop()
if (temp !== out) {
return false
}
}
}
return true
},
// 获取公式
getFormula: function () {
var nodes = this.$refs.formulaView.childNodes
var str = ''
for (let i = 0; i < nodes.length; i++) {
var el = nodes[i]
if (el.nodeName == 'SPAN') {
// console.log(el);
str += '#' + el.innerHTML.trim() + '#'
} else {
// console.log(el.data);
str += el.data ? el.data.trim() : ''
}
}
// console.log(str);
this.formulaStr = str
},
// 点选时记录光标位置
recordPosition: function () {
// 保存最后光标点
this.formulaLastRange = window.getSelection().getRangeAt(0)
},
// 添加字段 type 1 字段 2 公式
addItem: function (e, type, itemRows, isusable) {
if (isusable) {
e.preventDefault()
return false
}
if (this.backFormulaStrArray.length > 0) {
if (itemRows.elementType == 'formulaElement' || itemRows.elementType == 'symbol') {
// 检验连续相同两个元素不能重复 符号/元素
if (this.backFormulaStrArray[this.backFormulaStrArray.length - 1].displayValue == itemRows.displayValue) {
e.preventDefault()
return false
}
// 检验不同元素连续两个不能是用一个类型
if (
this.backFormulaStrArray[this.backFormulaStrArray.length - 1].elementType == 'formulaElement' &&
itemRows.elementType == 'formulaElement'
) {
e.preventDefault()
return false
}
if (
this.backFormulaStrArray[this.backFormulaStrArray.length - 1].elementType == 'number' &&
itemRows.elementType == 'formulaElement'
) {
e.preventDefault()
return false
}
}
if (itemRows.elementType == 'number' && itemRows.saveValue == '.') {
if (this.backFormulaStrArray[this.backFormulaStrArray.length - 1].displayValue == itemRows.displayValue) {
e.preventDefault()
return false
}
}
// this.backFormulaStrArray.forEach(item => {
// console.log(item.displayValue,itemRows.displayValue)
// const reg = RegExp(`(${item.displayValue})\1`, 'g'))
// console.log(strParamsValue.match(reg))
// })
}
this.backFormulaStrArray.push(itemRows)
const isValiStr = this.backFormulaStrArray.map(e => e.displayValue).join('')
if (!this.isValidate(isValiStr)) {
this.backFormulaStrArray.splice(-1, 1)
e.preventDefault()
return false
}
// 当前元素所有子节点
var nodes = this.$refs.formulaView.childNodes
// 当前子元素偏移量
var offset = this.formulaLastRange && this.formulaLastRange.startOffset
// 当前光标后的元素
var nextEl = this.formulaLastRange && this.formulaLastRange.endContainer
// 创建节点片段
var fd = document.createDocumentFragment()
// 创建字段节点 空白间隔节点 公式节点
var spanEl = document.createElement('span')
spanEl.setAttribute('contentEditable', false)
// 标识为新添加元素 用于定位光标
spanEl.setAttribute('new-el', true)
spanEl.innerHTML = e.target.innerHTML
var empty = document.createTextNode(' ')
var formulaEl = document.createTextNode(' ' + e.target.innerHTML + ' ')
// 区分文本节点替换 还是父节点插入
if (nextEl && nextEl.className != 'formulaView') {
// 获取文本节点内容
var content = nextEl.data
// 添加前段文本
fd.appendChild(document.createTextNode(content.substr(0, offset) + ' '))
fd.appendChild(type == 1 ? spanEl : formulaEl)
// 添加后段文本
fd.appendChild(document.createTextNode(' ' + content.substr(offset)))
// 替换节点
this.$refs.formulaView.replaceChild(fd, nextEl)
} else {
// 添加前段文本
fd.appendChild(empty)
fd.appendChild(type == 1 ? spanEl : formulaEl)
fd.appendChild(empty)
// 如果有偏移元素且不是最后节点 中间插入节点 最后添加节点
if (nodes.length && nodes.length > offset) {
this.$refs.formulaView.insertBefore(fd, nextEl && nextEl.className != 'formulaView' ? nextEl : nodes[offset])
} else {
this.$refs.formulaView.appendChild(fd)
}
}
// 遍历光标偏移数据 删除标志
var elOffSet = 0
for (let i = 0; i < nodes.length; i++) {
const el = nodes[i]
// console.log(el,el.nodeName == 'SPAN'&&el.getAttribute('new-el'));
if (el.nodeName == 'SPAN' && el.getAttribute('new-el')) {
elOffSet = i
el.removeAttribute('new-el')
}
}
// 创建新的光标对象
var range = document.createRange()
// 光标对象的范围界定
range.selectNodeContents(type == 1 ? this.$refs.formulaView : formulaEl)
// 光标位置定位
range.setStart(
type == 1 ? this.$refs.formulaView : formulaEl,
type == 1 ? elOffSet + 1 : formulaEl.data.length - 1
)
// 使光标开始和光标结束重叠
range.collapse(true)
// 清除选定对象的所有光标对象
window.getSelection().removeAllRanges()
// 插入新的光标对象
window.getSelection().addRange(range)
// 保存新光标
this.recordPosition()
},
// 复制
copy: function (e) {
// 选中复制内容
e.preventDefault()
//
var selContent = document.getSelection().toString().split('\n')[0]
// 替换选中内容
e.clipboardData.setData('text/plain', selContent)
},
// 输入回车
editEnter: function (e) {
e.preventDefault()
if (e.keyCode == 13) {
// 获取标签内容 并把多个换行替换成1个
var content = this.$refs.formulaView.innerHTML.replace(/(<div><br><\/div>){2,2}/g, '<div><br></div>')
// 记录是否第一行回车
var divCount = this.$refs.formulaView.querySelectorAll('div')
// var tE = this.$refs.formulaView.querySelect('div');
// console.log(this.$refs.formulaView.childNodes);
// console.log(this.$refs.formulaView.querySelectorAll("div"));
// 获取当前元素内所有子节点
var childNodes = this.$refs.formulaView.childNodes
// 记录当前光标子节点位置
var rangeIndex = 0
for (let i = 0; i < childNodes.length; i++) {
var one = childNodes[i]
if (one.nodeName == 'DIV') {
rangeIndex = i
}
}
// 如果有替换则进行光标复位
if (divCount.length >= 1) {
// 替换回车插入的div标签
content = content.replace(/<div>|<\/div>/g, function (word) {
// console.log(word);
if (word == '<div>') {
// 如果是第一行不在替换br
return divCount.length > 1 ? ' ' : ' <br>'
} else if (word == '</div>') {
return ' '
}
})
// 更新替换内容，光标复位
this.$refs.formulaView.innerHTML = content
// 创建新的光标对象
var range = document.createRange()
// 光标对象的范围界定为新建的表情节点
range.selectNodeContents(this.$refs.formulaView)
// 光标位置定位在表情节点的最大长度
range.setStart(this.$refs.formulaView, rangeIndex + (divCount.length > 1 ? 0 : 1))
// 使光标开始和光标结束重叠
range.collapse(true)
// 清除选定对象的所有光标对象
window.getSelection().removeAllRanges()
// 插入新的光标对象
window.getSelection().addRange(range)
}
}
// 保存最后光标点
this.formulaLastRange = window.getSelection().getRangeAt(0)
},
// 获取粘贴事件
paste: function (e) {
e.preventDefault()
// var txt=e.clipboardData.getData();
// console.log(e, e.clipboardData.getData());
return ''
},
// 公式反向解析
parsingFormula: function (formulaStr) {
// 渲染视口
var view = this.$refs.formulaView
// 反向解析公式
var str = formulaStr.replace(/#(.+?)#/g, function (word, $1) {
// console.log(word,$1);
return "<span contentEditable='false'>" + $1 + '</span>'
})
// console.log(str,fd.innerHTML);
view.innerHTML = str
// this.$refs.formulaView.appendChild(fd);
// 创建新的光标对象
var range = document.createRange()
// 光标对象的范围界定为新建的表情节点
range.selectNodeContents(view)
// 光标位置定位在表情节点的最大长度
range.setStart(view, view.childNodes.length)
// 使光标开始和光标结束重叠
range.collapse(true)
// 清除选定对象的所有光标对象
window.getSelection().removeAllRanges()
// 插入新的光标对象
window.getSelection().addRange(range)
// 保存新光标
this.recordPosition()
},
parsingFormulaCustom(arrayDatelist) {
arrayDatelist.forEach(item => {
// 当前元素所有子节点
const nodes = this.$refs.formulaView.childNodes
// 当前子元素偏移量
const offset = this.formulaLastRange && this.formulaLastRange.startOffset
// 当前光标后的元素
const nextEl = this.formulaLastRange && this.formulaLastRange.endContainer
const fd = document.createDocumentFragment()
const empty = document.createTextNode(' ')
const formulaEl = document.createTextNode(' ' + item.displayValue + ' ')
if (nextEl && nextEl.className != 'formulaView') {
var content = nextEl.data
fd.appendChild(document.createTextNode(content.substr(0, offset) + ' '))
fd.appendChild(formulaEl)
fd.appendChild(document.createTextNode(' ' + content.substr(offset)))
this.$refs.formulaView.replaceChild(fd, nextEl)
} else {
fd.appendChild(empty)
fd.appendChild(formulaEl)
fd.appendChild(empty)
// 如果有偏移元素且不是最后节点 中间插入节点 最后添加节点
if (nodes.length && nodes.length > offset) {
this.$refs.formulaView.insertBefore(
fd,
nextEl && nextEl.className != 'formulaView' ? nextEl : nodes[offset]
)
} else {
this.$refs.formulaView.appendChild(fd)
}
}
// 创建新的光标对象
var range = document.createRange()
// 光标对象的范围界定
range.selectNodeContents(formulaEl)
// 光标位置定位
range.setStart(formulaEl, formulaEl.data.length - 1)
// 使光标开始和光标结束重叠
range.collapse(true)
// 清除选定对象的所有光标对象
window.getSelection().removeAllRanges()
// 插入新的光标对象
window.getSelection().addRange(range)
// 保存新光标
this.recordPosition()
})
}
}
}
</script>
<style lang="scss">
#formulaPage {
width: 100%;
height: 100%;
> .formulaView {
margin-bottom: 20px;
min-height: 130px;
width: 100%;
padding: 5px;
border: 5px solid rgb(198, 226, 255);
resize: both;
overflow: auto;
line-height: 25px;
font-size: 20px;
span {
user-select: none;
display: inline-block;
/* // margin: 0 3px; */
height: 20px;
line-height: 20px;
/* // letter-spacing: 2px; */
border-radius: 3px;
white-space: nowrap;
&:first-child {
margin-left: 0;
}
}
}
.footerComtent {
margin-top: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.infomationContent {
display: flex;
&-leftFlexbox {
flex: 1;
display: flex;
> .tab {
flex: 1;
> ul {
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
/* // justify-content: space-between; */
&:after {
content: '';
display: table;
clear: both;
}
> li {
/* // margin-right: 20px; */
margin: 5px 10px;
width: 65px;
text-align: center;
float: left;
padding: 0 10px;
height: 30px;
line-height: 30px;
border-radius: 5px;
font-weight: bold;
border: 1px solid #fff;
list-style-type: none;
cursor: pointer;
-moz-user-select: none; /* 火狐 */
-webkit-user-select: none; /* 谷歌、Safari */
-ms-user-select: none; /* IE10+ */
user-select: none;
user-drag: none;
box-shadow: 0px 0px 2px 2px rgba(55, 114, 203, 0.2), /*下面深蓝色立体阴影*/ 0px 0px 6px 1px #4379d0,
/*内部暗色阴影*/ 0 -15px 2px 2px rgba(55, 114, 203, 0.1) inset;
color: #333333;
}
> li:hover {
color: #fff;
/* // color: #409eff; */
border-color: #c6e2ff;
background-color: #ecf5ff;
}
> li:active {
color: #3a8ee6;
border-color: #3a8ee6;
outline: none;
}
.numberClass {
width: 40px;
}
.typeClass {
width: 100px
}
.symbolClass {
}
.noclick {
cursor: not-allowed !important;
background: #bcc0c4 !important;
color: #e4eaf1 !important;
border: none !important;
}
}
}
}
&-rightBtnbox {
width: 50px;
padding-top: 10px;
box-sizing: border-box;
.imgboxinfo {
width: 40px;
height: 40px;
img {
cursor: pointer;
}
}
}
}
}
</style>在父组件中引用即可
实现方式二
1、效果图
2、实现代码
<!-- 配置计算公式 -->
<el-dialog title="计算公式配置" :visible.sync="dragOpen" append-to-body :close-on-click-modal="false" width="1050px">
<el-form label-width="90px" size="medium">
<el-row>
<el-col :span="24">
<el-form-item label="调度指标：">
<div style="border: 1px solid #c2ddf8;padding: 5px;">
<draggable class="dragArea list-group" :list="indexLists" :group="{ name: 'people', pull: 'clone', put: false }" animation="300">
<el-tag v-for="tag in indexLists" :key="tag.id" effect="dark" class="fomula-tag" style="margin-right: 5px;" type="success">
{{tag.dictLabel}}
</el-tag>
</draggable>
</div>
</el-form-item>
</el-col>
<el-col :span="24"></el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="运算符号：">
<div style="border: 1px solid #c2ddf8;padding: 5px;">
<draggable class="dragArea list-group" :list="operatorOptions" :group="{ name: 'people', pull: 'clone', put: false }" animation="300">
<el-tag v-for="tag in operatorOptions" :key="tag.id" effect="dark" class="fomula-tag" @click="tagClick(tag)" style="margin-right: 5px;background-color: #7c9096;border: none;width: 40px;text-align: center">
{{tag.dictLabel}}
</el-tag>
</draggable>
</div>
</el-form-item>
</el-col>
<el-col :span="24"></el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="算数符号：">
<div style="border: 1px solid #c2ddf8;padding: 5px;">
<draggable class="dragArea list-group" :list="nums" :group="{ name: 'people', pull: 'clone', put: false }" animation="300">
<el-tag v-for="tag in nums" :key="tag.id" effect="dark" class="fomula-tag" @click="tagClick(tag)" style="margin-right: 5px;background-color: #2bcdff;border: none;width: 40px;text-align: center">
{{tag.dictLabel}}
</el-tag>
</draggable>
</div>
</el-form-item>
</el-col>
<el-col :span="24"></el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="结果集：">
<div style="border: 5px solid #c2ddf8;padding: 5px;position: relative;">
<draggable class="list-group" :list="resultR" group="people" animation="300" style="height:100px;" @change="log">
<el-tag v-for="tag in resultR" :key="tag.id" effect="dark" @click="tagClick(tag)" closable @close="handleClose(tag)" style="margin-right: 5px;">
{{tag.dictLabel}}
</el-tag>
</draggable>
<el-popover placement="left" title="公式：" trigger="hover" :content="previewFormula">
<i class="el-icon-view show-fomula" slot="reference"></i>
</el-popover>
</div>
</el-form-item>
</el-col>
<el-col :span="24">
<div class="explain">
{{explain}}
</div>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitDrag" v-if="this.confDisabled">保 存</el-button>
<el-button @click="cancelDrag">取 消</el-button>
</div>
</el-dialog>js方法
import draggable from 'vuedraggable'
watch: {
'resultR': {
handler: function () {
this.refreshFormula();
}
},
},
methods: {
log() {
this.refreshFormula();
},
refreshFormula() {
this.previewFormula = "";
if (this.resultR !== undefined && this.resultR !== null && this.resultR !== []) {
for (let i = 0; i < this.resultR.length; i++) {
this.previewFormula += this.resultR[i].dictLabel;
}
}
console.log("this.previewFormula")
console.log(this.previewFormula)
},
handleDrag(item) {
indexList({ "factory": item.factory }).then(resp => {
this.indexLists = resp.data;
this.resultFormula = this.form.indicatorFormula
if (typeof this.resultFormula !== 'undefined' && this.resultFormula.length > 0) {
const strArr = this.resultFormula.split(',')
this.resultR = [];
for (let i = 0; i < strArr.length; i++) {
let indexBoolean = false
for (let j = 0; j < this.indexLists.length; j++) {
if (this.indexLists[j].dictValue === strArr[i]) {
this.resultR.push(this.indexLists[j]);
indexBoolean = true
}
}
if (!indexBoolean) {
let opBoolean = false
for (let z = 0; z < this.operatorOptions.length; z++) {
if (this.operatorOptions[z].dictValue === strArr[i]) {
this.resultR.push(this.operatorOptions[z]);
opBoolean = true
}
}
if (!opBoolean) {
for (let c = 0; c < this.nums.length; c++) {
if (this.nums[c].dictValue === strArr[i]) {
this.resultR.push(this.nums[c]);
}
}
}
}
}
}
this.dragOpen = true;
})
},
submitDrag() {
console.log(this.resultR)
this.resultFormula = ''
for (let i = 0; i < this.resultR.length; i++) {
this.resultFormula = this.resultFormula + this.resultR[i].dictValue + ","
}
this.$set(this.form, 'indicatorFormula', this.resultFormula.substring(0, this.resultFormula.length - 1));
this.dragOpen = false;
this.resultR = [];
this.previewFormula = '';
},
cancelDrag() {
this.dragOpen = false;
this.previewFormula = '';
},
tagClick(item) {
},
handleClose(item) {
this.resultR.splice(this.resultR.findIndex(i => i.dictValue === item.dictValue), 1);
},
}css代码
<style>
.mpc-model-dialogue-box .el-dialog {
width: 29%;
height: auto;
}
.clearfix .el-checkbox__inner {
margin-bottom: 8px;
}
.clearfix .el-checkbox__label {
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 16px;
font-weight: bold;
color: #409EFF;
}
.cardClass .el-card__header {
padding: 10px 15px 0px;
}
.show-fomula {
position: absolute;
bottom: 10px;
right: 10px;
font-size: 20px;
color: #237aeb;
}
.show-fomula:hover {
opacity: 0.5;
transition: 1s;
transform: scale(1.3);
}
.fomula-tag:hover {
opacity: 0.5;
transform: scale(1.1);
background-color: #2d52f7 !important;
}
.edit-fomula:hover {
opacity: 0.5;
transition: 1s;
transform: scale(1.3);
color: #43bb0b;
}
.explain {
font-weight: bold;
color: red;
font-size: 12px;
float: right;
}
</style>
