<!--
|
* @Description: 公式规则-编辑弹窗
|
-->
|
<template>
|
<el-row class="app-tinymce-formula">
|
<el-col :span="16" class="left">
|
<app-tinymce-instance
|
ref="contendEditRef"
|
v-model="formValues.expressionContent"
|
:operatorList="form.operatorList"
|
:functionList="form.functionList"
|
@change="contendEditChange"
|
:tag-start="props.tagStart"
|
:tag-end="props.tagEnd"
|
/>
|
<div class="tools">
|
<el-button
|
type="primary"
|
@click="subProperties"
|
>
|
引用字段
|
</el-button>
|
</div>
|
</el-col>
|
<el-col :span="8">
|
<el-row class="row" v-if="form.operatorList.length">
|
<h6>运算符</h6>
|
<div class="content">
|
<el-button v-for="(m, i) in form.operatorList" :key="i" class="item" @click="functionClick(m)">
|
{{ m.label }}
|
</el-button>
|
</div>
|
</el-row>
|
<el-row class="row" v-if="form.functionList.length">
|
<h6>常用函数</h6>
|
<div class="content">
|
<el-button v-for="(m, i) in form.functionList" :key="i" class="item" @click="functionClick(m)">
|
{{ m.label }}
|
</el-button>
|
</div>
|
</el-row>
|
<el-row class="row" v-if="form.constantList.length">
|
<h6>常量</h6>
|
<div class="content">
|
<el-button v-for="(m, i) in form.constantList" :key="i" class="item" @click="functionClick(m)">
|
{{ m.label }}
|
</el-button>
|
</div>
|
</el-row>
|
</el-col>
|
</el-row>
|
</template>
|
|
<script setup>
|
|
import {splitTextToTags} from '@/utils/tools.js';
|
|
import {useEntityStore} from "@/store/modules";
|
|
const entityStore = useEntityStore();
|
|
const props = defineProps({
|
subSubmit: {
|
type: Function,
|
default: () => {
|
}
|
},
|
subProperties: {
|
type: Function,
|
default: () => {
|
}
|
},
|
tagStart: {
|
type: String,
|
default: '@'
|
},
|
tagEnd: {
|
type: String,
|
default: '}'
|
},
|
operatorGroup:{
|
type: String,
|
default: 'all'
|
}
|
});
|
|
const dialogFormRef = ref();
|
|
const formValues = reactive({calcExpression: null, expressionContent: '', formulaContent: ''});
|
const contendEditRef = ref(null);
|
|
const form = reactive({
|
operatorList: [],
|
functionList: [],
|
constantList:[]
|
});
|
|
/**
|
* 字段数组
|
* @type {ComputedRef<*[]>}
|
*/
|
const selectDataList = computed(() => {
|
return [];
|
});
|
|
/**
|
* @description: 字段-点击插入
|
* @param {Object} row
|
* @return {*}
|
*/
|
const setField = (row) => {
|
contendEditRef.value.insertContent({value: row.name, type: 'field'});
|
};
|
|
/**
|
* @description: 函数-点击插入
|
* @param {Object} m
|
* @return {*}
|
*/
|
const functionClick = (m) => {
|
contendEditRef.value.insertContent({...m, type: 'function'});
|
};
|
|
/**
|
* @description: 公式编辑器回调
|
* @param {Arrary} l 公式类型数组
|
* @return {*}
|
*/
|
const contendEditChange = (l) => {
|
let expressionContent = '';
|
let calcExpression = '';
|
const calcList = [];
|
|
(l || []).forEach((o) => {
|
if (o.type === 'field') {
|
const text = o.value.replace(/#/g, '');
|
const row = selectDataList.value.find((v) => v.name === text);
|
if (row) {
|
calcExpression += row.code;
|
} else {
|
calcExpression += o.value;
|
}
|
calcList.push({
|
...o,
|
value: row ? row.code : o.value,
|
});
|
} else {
|
calcExpression += o.value;
|
calcList.push(o);
|
}
|
expressionContent += o.value;
|
});
|
formValues.expressionContent = expressionContent;
|
|
formValues.calcExpression = expressionContent.replace(/[\u200B-\u200D\uFEFF\s]/g, '');
|
|
formValues.calcList = calcList;
|
|
};
|
|
const setContext = async (text) => {
|
formValues.expressionContent = text;
|
|
formValues.calcExpression = text.replace(/[\u200B-\u200D\uFEFF\s]/g, '');
|
|
formValues.calcList = splitTextToTags(text, props.tagStart, props.tagEnd);
|
|
contendEditRef.value.setContent(text);
|
}
|
|
const getContext = () => {
|
return formValues.calcExpression;
|
}
|
|
|
onMounted(async () => {
|
const {data} = await entityStore.getEntitySet({
|
dataName: 'sys_formula_operator',
|
filter: `active = 'T' and group_code in ('all', '${props.operatorGroup}')`,
|
orderBy: 'order_no asc'
|
});
|
data.entityset.forEach(e => {
|
e.type === 'math' && form.operatorList.push({
|
label: e.title,
|
value: e.formula,
|
offsetIdx: e.cursor_index,
|
});
|
e.type === 'func' && form.functionList.push({
|
label: e.title,
|
value: e.formula,
|
offsetIdx: e.cursor_index,
|
});
|
e.type === 'constant' && form.constantList.push({
|
label: e.title,
|
value: e.formula,
|
offsetIdx: e.cursor_index,
|
});
|
});
|
});
|
|
defineExpose({
|
setField,
|
setContext,
|
getContext
|
});
|
</script>
|
<style lang="scss" scoped>
|
.app-tinymce-formula {
|
h6 {
|
font-size: 14px;
|
line-height: 14px;
|
display: block;
|
margin: 0 0 12px 0;
|
}
|
|
.left {
|
border-right: 1px solid #ccc;
|
padding: 10px;
|
|
.row {
|
max-height: 400px;
|
overflow-y: auto;
|
flex-wrap: nowrap;
|
}
|
|
.tools {
|
margin-top: 10px;
|
}
|
}
|
|
.row {
|
display: flex;
|
flex-direction: column;
|
padding: 12px;
|
|
.content {
|
display: flex;
|
flex-wrap: wrap;
|
|
.item {
|
flex: 0 0 calc((100% - 10px) / 7);
|
margin: 0 8px 8px 0;
|
}
|
}
|
}
|
}
|
</style>
|
