<template>
|
<!-- 第二层对话框,属性码段，公式编辑框弹窗 -->
|
<el-dialog
|
title="公式编辑框"
|
append-to-body
|
:visible.sync="isShowformulaEdit"
|
@close="closeFormulaEdit"
|
width="78%"
|
style="height: 150vh; margin-top: -13vh; overflow: hidden">
|
|
<div style="overflow-y: auto; height: 80vh">
|
<el-row>
|
<!-- 左侧公式内容 -->
|
<el-col :span="14" style="overflow: hidden">
|
<el-card
|
class="box-card"
|
style="height: 33vh; overflow-y: auto; overflow-x: auto">
|
<div slot="header" class="clearfix">
|
<span style="font-size: medium">公式内容</span>
|
<el-button
|
type="primary"
|
size="mini"
|
style="float: right"
|
@click="saveFormulaContent">
|
确定
|
</el-button>
|
<el-button
|
type="warning"
|
size="mini"
|
style="margin-right: 10px; float: right"
|
@click="resetFormulaContent">
|
清空内容
|
</el-button>
|
</div>
|
<div class="text item">
|
<el-input
|
type="textarea"
|
:rows="5"
|
style="width: 560px"
|
v-model="formulaContent"
|
></el-input>
|
</div>
|
</el-card>
|
</el-col>
|
<!-- 右侧运算符 -->
|
<el-col :span="10">
|
<el-card
|
class="box-card formula-box-card"
|
data-v-49729759
|
style="height: 35vh;">
|
<div slot="header" class="clearfix">
|
<span style="font-size: medium">运算符</span>
|
</div>
|
<div class="formula-editor-total">
|
<div class="formula-editor">
|
<div class="one">
|
<el-button type="primary"
|
class="formula-editor-btn-sm"
|
@click="dbClickAddContent({ formula: '7' })"
|
>
|
7
|
</el-button>
|
<el-button type="primary"
|
class="formula-editor-btn-sm"
|
@click="dbClickAddContent({ formula: '8' })"
|
>
|
8
|
</el-button>
|
<el-button type="primary"
|
class="formula-editor-btn-sm"
|
@click="dbClickAddContent({ formula: '9' })"
|
>
|
9
|
</el-button>
|
<el-button type="primary"
|
class="formula-editor-btn-sm"
|
@click="dbClickAddContent({ formula: '/' })"
|
>
|
/</el-button>
|
<br />
|
</div>
|
<div class="one">
|
<el-button type="primary"
|
class="formula-editor-btn-sm"
|
@click="dbClickAddContent({ formula: '4' })"
|
>
|
4
|
</el-button>
|
<el-button type="primary"
|
class="formula-editor-btn-sm"
|
@click="dbClickAddContent({ formula: '5' })"
|
>
|
5
|
</el-button>
|
<el-button type="primary"
|
class="formula-editor-btn-sm"
|
@click="dbClickAddContent({ formula: '6' })"
|
>
|
6
|
</el-button>
|
<el-button type="primary"
|
class="formula-editor-btn-sm"
|
@click="dbClickAddContent({ formula: '*' })"
|
>
|
*</el-button>
|
<br />
|
</div>
|
<div class="one">
|
<el-button type="primary"
|
class="formula-editor-btn-sm"
|
@click="dbClickAddContent({ formula: '1' })"
|
>
|
1
|
</el-button>
|
<el-button type="primary"
|
class="formula-editor-btn-sm"
|
@click="dbClickAddContent({ formula: '2' })"
|
>
|
2
|
</el-button>
|
<el-button type="primary"
|
class="formula-editor-btn-sm"
|
@click="dbClickAddContent({ formula: '3' })"
|
>
|
3
|
</el-button>
|
<el-button type="primary"
|
class="formula-editor-btn-sm"
|
@click="dbClickAddContent({ formula: '>' })"
|
>
|
-</el-button>
|
<br />
|
</div>
|
<div class="one">
|
<el-button type="primary"
|
class="formula-editor-btn-sm"
|
@click="dbClickAddContent({ formula: '0' })"
|
>
|
0
|
</el-button>
|
<el-button type="primary"
|
class="formula-editor-btn-sm"
|
@click="dbClickAddContent({ formula: '00' })"
|
>
|
00
|
</el-button>
|
<el-button type="primary"
|
class="formula-editor-btn-sm"
|
@click="dbClickAddContent({ formula: '.' })"
|
>
|
.
|
</el-button>
|
<el-button type="primary"
|
class="formula-editor-btn-sm"
|
@click="dbClickAddContent({ formula: '+' })"
|
>
|
+</el-button>
|
<br/>
|
</div>
|
<div class="one">
|
<el-button type="primary"
|
class="formula-editor-btn-sm"
|
@click="dbClickAddContent({ formula: '->' })"
|
>
|
->
|
</el-button>
|
<el-button type="primary"
|
class="formula-editor-btn-sm"
|
@click="dbClickAddContent({ formula: '==' })"
|
>
|
==
|
</el-button>
|
<el-button type="primary"
|
class="formula-editor-btn-sm"
|
@click="dbClickAddContent({ formula: '(' })"
|
>
|
(
|
</el-button>
|
<el-button type="primary"
|
class="formula-editor-btn-sm"
|
@click="dbClickAddContent({ formula: ')' })"
|
>
|
)</el-button>
|
<br />
|
</div>
|
<div class="one">
|
<el-button type="primary"
|
class="formula-editor-btn-sm"
|
@click="dbClickAddContent({ formula: '<' })"
|
>
|
<
|
</el-button>
|
<el-button type="primary"
|
class="formula-editor-btn-sm"
|
@click="dbClickAddContent({ formula: '>' })"
|
>
|
>
|
</el-button>
|
<el-button type="primary"
|
class="formula-editor-btn-sm"
|
@click="dbClickAddContent({ formula: '<=' })"
|
>
|
<=
|
</el-button>
|
<el-button type="primary"
|
class="formula-editor-btn-sm"
|
@click="dbClickAddContent({ formula: '>=' })"
|
>
|
>=
|
</el-button>
|
</div>
|
</div>
|
</div>
|
</el-card>
|
</el-col>
|
</el-row>
|
<el-row>
|
<!-- 左侧公式选择区域 -->
|
<el-col :span="14" style="overflow: hidden">
|
<el-card
|
class="box-card"
|
style="height: 40vh; overflow-y: auto; overflow-x: auto"
|
>
|
<div slot="header" class="clearfix">
|
<span style="font-size: medium">公式选择</span>
|
</div>
|
<div class="text item">
|
<el-tabs v-model="activeName">
|
<el-tab-pane label="常用" name="first">
|
<el-table
|
:data="commonFormulaTableData"
|
:show-header="false"
|
@row-dblclick="dbClickAddContent"
|
style="width: 100%"
|
>
|
<el-table-column prop="formula" width="300">
|
</el-table-column>
|
<el-table-column prop="desc" width="300"> </el-table-column>
|
</el-table>
|
</el-tab-pane>
|
|
<el-tab-pane label="财务" name="second">
|
<el-table
|
:data="financialFormulaTableData"
|
@row-dblclick="dbClickAddContent"
|
:show-header="false"
|
style="width: 100%"
|
>
|
<el-table-column prop="formula" width="300">
|
</el-table-column>
|
<el-table-column prop="desc" width="300"> </el-table-column>
|
</el-table>
|
</el-tab-pane>
|
|
<el-tab-pane label="日期" name="third">
|
<el-table
|
:data="dateFormulaTableData"
|
:show-header="false"
|
@row-dblclick="dbClickAddContent"
|
style="width: 100%"
|
>
|
<el-table-column prop="formula" width="300">
|
</el-table-column>
|
<el-table-column prop="desc" width="300"> </el-table-column>
|
</el-table>
|
</el-tab-pane>
|
|
<el-tab-pane label="数学" name="fourth">
|
<el-table
|
:data="mathFormulaTableData"
|
:show-header="false"
|
@row-dblclick="dbClickAddContent"
|
style="width: 100%"
|
>
|
<el-table-column prop="formula" width="300">
|
</el-table-column>
|
<el-table-column prop="desc" width="300"> </el-table-column>
|
</el-table>
|
</el-tab-pane>
|
|
<el-tab-pane label="其他" name="five">
|
<el-table
|
:data="otherFormulaTableData"
|
@row-dblclick="dbClickAddContent"
|
:show-header="false"
|
style="width: 100%"
|
>
|
<el-table-column prop="formula" width="300">
|
</el-table-column>
|
<el-table-column prop="desc" width="300"> </el-table-column>
|
</el-table>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</el-card>
|
</el-col>
|
<!-- 右侧变量选择区域 -->
|
<el-col :span="10" style="overflow: hidden">
|
<el-card
|
class="box-card"
|
style="height: 40vh; overflow-y: auto; overflow-x: auto"
|
>
|
<div slot="header" class="clearfix">
|
<span style="font-size: medium">变量</span>
|
</div>
|
<div class="text item">
|
<el-tabs v-model="activeNameAttr">
|
<el-tab-pane label="本场景变量" name="first">
|
<el-table
|
:data="thisSceneTableData"
|
@row-dblclick="dbClickAddContent"
|
:show-header="false"
|
style="width: 100%"
|
>
|
<el-table-column prop="formula" width="40">
|
</el-table-column>
|
<el-table-column prop="desc" width="100"> </el-table-column>
|
</el-table>
|
</el-tab-pane>
|
<el-tab-pane label="系统变量" name="second">
|
<el-table
|
:data="systemVariableTableData"
|
@row-dblclick="dbClickAddContent"
|
:show-header="false"
|
style="width: 100%"
|
>
|
<el-table-column prop="formula" width="150">
|
</el-table-column>
|
<el-table-column prop="desc" width="150"> </el-table-column>
|
</el-table>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</el-card>
|
</el-col>
|
</el-row>
|
</div>
|
|
</el-dialog>
|
</template>
|
|
<script>
|
export default {
|
name: "formulaEditor",
|
props: {
|
// 对话框显示隐藏控制
|
visible: {
|
type: "Boolean",
|
default: false,
|
},
|
//本场景变量
|
thisSceneTableData: {
|
type: Array,
|
},
|
//系统变量
|
systemVariableTableData: {
|
type: Array,
|
},
|
},
|
data() {
|
return {
|
isShowformulaEdit: this.visible, //公式编辑框对话框显示控制
|
formulaContent: '', //公式编辑框内容,方便值的回传
|
activeName: 'first', //当前活动的tab
|
activeNameAttr: 'first', //变量中的当前活动tab
|
//常用公式
|
commonFormulaTableData: [
|
{
|
formula: "if(compare,trueResult,falseResult)",
|
desc: "如果compare的表达式为true，则执行trueResult的表达式，否则执行flaseResult.例如if(3>2,2*(3+2),3/(2-4)),值等于10",
|
},
|
{
|
formula: "sum(douber1,douber2)",
|
desc: "两个格式为douber的参数求和",
|
},
|
{
|
formula: "sub(douber1,douber2)",
|
desc: "格式为douber的参数douber1减去格式为douber的参数douber2",
|
},
|
{
|
formula: "mul(douber1,douber2)",
|
desc: "两个格式为douber的参数相乘",
|
},
|
{
|
formula: "div(douber1,douber2)",
|
desc: "格式为douber的参数douber1除以格式为douber的参数douber2.当douber2等于0的时候，返回0;如果除不尽的时候保留10位小数",
|
},
|
{
|
formula: "mod(int,int)",
|
desc: "求余数",
|
},
|
{
|
formula: "toInt(string)",
|
desc: "转换为int格式",
|
},
|
{
|
formula: "doubleRound(string,count)",
|
desc: "处理douber的小数位数，count表示小数位数",
|
},
|
{
|
formula: "zeroIfNull(value)",
|
desc: '如果参数的值为null或者"",将返回0',
|
},
|
{
|
formula: "endsWith(string,str1)",
|
desc: "字符串string是不是以str1结尾",
|
},
|
{
|
formula: "startsWith(string,str1)",
|
desc: "字符串string是否以str1开头",
|
},
|
{
|
formula: "charAt(string,index)",
|
desc: "获取字符串string中第index位置的字符，如果长度小于index，则返回",
|
},
|
{
|
formula: "equalsIgnoreCase(str1,str2)",
|
desc: "字符串str1和字符串str2是否相等",
|
},
|
{
|
formula: "indexOf(str1,str2)",
|
desc: "字符串str2在字符串str1中首次出现的位置",
|
},
|
{
|
formula: "isEmpty(str1)",
|
desc: "参数str1是否为空，其中null这个字符串也表示为空",
|
},
|
{
|
formula: "lastIndexOf(str1,str2)",
|
desc: "字符串str2在字符串str1中最后出现的位置",
|
},
|
{
|
formula: "leftStr(str1,index)",
|
desc: "获取index位置左侧的所有字符",
|
},
|
{
|
formula: "rightStr(str1,str2)",
|
desc: "获取index位置右侧的所有字符",
|
},
|
{
|
formula: "length(str1)",
|
desc: "参数str1的长度",
|
},
|
{
|
formula: "mid(str1,start,end)",
|
desc: "获取str1的从start到end直接的字符串，出现异常时返回",
|
},
|
{
|
formula: "tolowercase(str1)",
|
desc: "将字符串str1转为小写",
|
},
|
{
|
formula: "touppercase(str1)",
|
desc: "将字符串str1转为大写",
|
},
|
{
|
formula: "trimzero(str1)",
|
desc: "去除字符串str1中的0",
|
},
|
{
|
formula: "MD5(str1)",
|
desc: "将字符串进行MD5加密",
|
},
|
],
|
//财务公式
|
financialFormulaTableData: [
|
{
|
formula: "toChinese(value)",
|
desc: "将阿拉伯数字转为为汉字大写方式",
|
},
|
{
|
formula: "getChineseCurrency(value)",
|
desc: "将阿拉伯数字转为为汉字金额大写方式，与tochiness的区别是这个会显示元、角、分",
|
},
|
{
|
formula: "setThmark(value)",
|
desc: "为参数value设置千分位",
|
},
|
],
|
//日期公式
|
dateFormulaTableData: [
|
{
|
formula: "compareDate(d1,d2)",
|
desc: "对比参数d1,d2的大小。d1,d2为yyyy-MM-dd格式的日期字符串",
|
},
|
{
|
formula: "nowDate()",
|
desc: "获取当前日期",
|
},
|
{
|
formula: "chinaDate(d1)",
|
desc: "将时间转换为农历，d1是yyyy-MM-dd格式的日期字符串",
|
},
|
{
|
formula: "dateAdd(d1,count)",
|
desc: "在d1的基础上添加count天,d1为yyyy-MM-dd HH:mm:ss格式的时间字符串",
|
},
|
{
|
formula: "dateBalanceYear(sourceDate,targetDate,false)",
|
desc: '计算相差的年份，比如计算年龄，targetDate为""表示当前时间，第三个参数为true表示有多余的月份或者天数时，就加1;',
|
},
|
{
|
formula: "dateBalanceDay(sourceDate,targetDate)",
|
desc: '计算相差的天数，targetDate为""表示当前时间',
|
},
|
{
|
formula: "dateformat(d1,format)<",
|
desc: "将当前的日期（时间）字符串转为指定的字符串，如果format的内容有空格，请使用&代替",
|
},
|
{
|
formula: "nowDatetime()",
|
desc: "获取当前日期和时间。格式为yyyy-MM-dd HH:mm:ss",
|
},
|
{
|
formula: "dayOf(d1)",
|
desc: "获取格式为yyyy-MM-dd的日期的天数",
|
},
|
{
|
formula: "nowMon()",
|
desc: "获取当前的月份，格式为MM",
|
},
|
{
|
formula: "monOf(d1)",
|
desc: "获取日期d1的月份数",
|
},
|
{
|
formula: "nowTime()",
|
desc: "获取当前时间，格式为HH:mm:ss",
|
},
|
{
|
formula: "nowYear()",
|
desc: "获取年份，格式为yyyy",
|
},
|
{
|
formula: "yearOf()",
|
desc: "获取时间d1的年份",
|
},
|
],
|
//数学公式
|
mathFormulaTableData: [
|
{
|
formula: "abs(value)",
|
desc: "求参数value的绝对值，value必须为数字格式",
|
},
|
{
|
formula: "acos(value)",
|
desc: "求参数value的反余弦，value必须为数字格式",
|
},
|
{
|
formula: "asin(value)",
|
desc: "求参数value的反正弦，value必须为数字格式",
|
},
|
{
|
formula: "atan(value)",
|
desc: "求参数value的反正切，value必须为数字格式",
|
},
|
{
|
formula: "cbrt(value)",
|
desc: "求参数value的立方根，value必须为数字格式",
|
},
|
{
|
formula: "ceil(value)",
|
desc: "返回不大于参数value的最小整数，例如ceil(1.7)就等于2，value必须为数字格式",
|
},
|
{
|
formula: "cos(value)",
|
desc: "求参数value的余弦值，value必须为数字格式",
|
},
|
{
|
formula: "cosh(value)",
|
desc: "求参数value的双曲余弦值，value必须为数字格式",
|
},
|
{
|
formula: "exp(n)",
|
desc: "欧拉数 e 的n次幂，n必须为数字格式",
|
},
|
{
|
formula: "floor(n)",
|
desc: "欧拉数 e 的n次幂减1，n必须为数字格式",
|
},
|
{
|
formula: "log(value)",
|
desc: "返回不小于参数value的最大整数，例如floor(1.7)等于1，n必须为数字格式",
|
},
|
{
|
formula: "log10(value)",
|
desc: "自然对数,value必须为数字格式",
|
},
|
{
|
formula: "log1p(value)",
|
desc: "计算底数为 10 的对数,value必须为数字格式",
|
},
|
{
|
formula: "random()",
|
desc: "返回参数与 1 之和的自然对数，value必须为数字格式",
|
},
|
{
|
formula: "rint(value)",
|
desc: "返回一个伪随机数，该值大于等于 0.0 且小于 1.0",
|
},
|
{
|
formula: "round(value)",
|
desc: "返回其值最接近参数并且是整数的 double 值。如果两个整数的 double 值都同样接近，那么结果取偶数。特殊情况是：如果参数值是整数，那么结果就是该参数。如果参数是 NaN 或无穷大或正零或负零，那么结果与参数相同",
|
},
|
{
|
formula: "signum(value)",
|
desc: "符号函数；如果参数为 0，则返回 0；如果参数大于 0， 则返回 1.0；如果参数小于 0，则返回 -1.0",
|
},
|
{
|
formula: "sin(value)",
|
desc: "求参数value的正弦值，value必须为数字格式",
|
},
|
{
|
formula: "sinh(value)",
|
desc: "求参数value的双曲正弦值，value必须为数字格式",
|
},
|
{
|
formula: "tan(value)",
|
desc: "求参数value的正切值，value必须为数字格式",
|
},
|
{
|
formula: "tanh(value)",
|
desc: "求参数value的双曲正切值，value必须为数字格式",
|
},
|
{
|
formula: "max(v1,v2)",
|
desc: "求两个数中的较大的值，v1,v2都必须为数字格式，例如max(3.2,3)就等于3.2",
|
},
|
{
|
formula: "min(v1,v2)",
|
desc: "求两个数中的较小的值，v1,v2都必须为数字格式，例如max(3.2,3)就等于3",
|
},
|
{
|
formula: "sqrt(value)",
|
desc: "求平方根",
|
},
|
],
|
//其他公式
|
otherFormulaTableData: [
|
{
|
formula: "getcolvalue(servername,tablename,fieldname,pkField,pkValue)",
|
desc: "查询servername中tablename数据库表中fieldname字段的值，pkfield表示主键的字段名称，pkValue表示主键的值，serverName现在默认为localServer",
|
},
|
],
|
};
|
},
|
watch: {
|
// 监听父组件传的窗口显示隐藏的值
|
visible (){
|
this.isShowformulaEdit = this.visible;
|
}
|
},
|
methods: {
|
|
//双击添加公式内容
|
dbClickAddContent(row){
|
//console.log(row.formula);
|
this.formulaContent = this.formulaContent + row.formula;
|
},
|
//清空公式内容
|
resetFormulaContent(){
|
this.formulaContent = '';
|
},
|
//关闭时清空上次公式内容
|
closeFormulaEdit(){
|
this.resetFormulaContent();
|
this.$emit('update:visible',false);
|
},
|
//编辑完成公式内容回显并关闭对话框
|
saveFormulaContent(){
|
//console.log(this.formulaContent);
|
if(this.formulaContent.trim == null || this.formulaContent.trim == ''){
|
this.$message.warning("公式内容不能为空！");
|
return;
|
}
|
//公式内容回显
|
// 触发update:data将子组件值传递给父组件
|
this.$emit('updateFormulaContent', this.formulaContent)
|
this.isShowformulaEdit = false;
|
},
|
|
},
|
};
|
</script>
|
|
<style scoped>
|
|
.formula-box-card >>> .el-card__body {
|
padding: 0px;
|
height: 85%;
|
width: 100%;
|
}
|
|
.formula-editor-total {
|
/* margin-top: 3px; */
|
height: 100%;
|
width: 100%;
|
}
|
|
.formula-editor{
|
/*设置弹性盒子*/
|
display: flex;
|
/*子元素以竖列排列，一共有6列*/
|
flex-direction:column;
|
width: 100%;
|
height: 100%;
|
/*左右均匀排列*/
|
justify-content: space-around;
|
/*上下均匀排列*/
|
align-items: center;
|
}
|
|
.one{
|
display: flex;
|
/*以行排列*/
|
flex-direction: row;
|
width: auto;
|
height: auto;
|
justify-content: space-between;
|
align-items: center;
|
}
|
|
.formula-editor-btn-sm {
|
width: 4.5vw;
|
height: 4vh;
|
margin-left: 10px;
|
text-align: center;
|
line-height: 0;
|
/* background: rgb(153, 214, 240); */
|
background: #87c2fc;
|
/* border-radius: 10%; */
|
}
|
|
</style>
|
|
