条件表达式
Install
安装方法：
npm安装：
npm: npm install ys-expression 或 npm i http://outergit.yonyou.com:8888/ys_public/ys-expression.git
yarn安装：
yarn add ys-expression 或 yarn add http://outergit.yonyou.com:8888/ys_public/ys-expression.git
使用 ys-expression.js：
ys-expression.js 文件文件在 http://outergit.yonyou.com:8888/ys_public/ys-expression/tree/develop/dist Quick Start
<template>
<YSExpress
ref="ysExpressionMain"
:lang="lang"
:active-item="activeItem"
:table-list="tableList"
:right-table-list="rightTableList"
:is-process-designer="isProcessDesigner"
:open-reference-dialog="openReferenceDialog"
// 下面这俩参数是点击左边表单的参照 然后再给 rightTableList 赋值 需要的 其他情况的不需要这个俩
:need-get-right-table-list="needGetRightTableList"
:get-right-table-list="getRightTableList"
:relation-list-by-type="relationListByType"
/>
</template>
import YSExpress from 'ys-expression'
...,
components: {YSExpress},Params
lang: 语言(zh-CN： 中文简体，en: 英语)
activeItem 数据回显的值，数据结构参考下面的 activeItem
tableList 左边的数据列表
rightTableList 右边的数据列表
isProcessDesigner 是否是流程设计器 流程设计器就不显示手工选择/输入的下拉框了
openReferenceDialog 这是一个Function 用于打开参照的弹框
needGetRightTableList 布尔类型，默认false , 需要点击左侧表单数据的时候传递 true 触发获取右边表单数据的获取 即给 rightTableList 赋值
getRightTableList 点击左边表单的表单字段，获取列表数据，赋值给 rightTableList
注意openReferenceDialog打开弹框的时候 需要把type.o 赋值给 this.referencerThis,用以保存组件的this, 点击弹框确定的时候 把结果对象(显示值是对象的value属性)赋值给this.referencerThis.selectRenfrenceCtnValue
relationListByType 如果需要自定义操作符类型 就传递这个数据， 不需要就不传, 跟是否是流程没关系
:fixed="isFixed" 如果是true的话 add 按钮就失效了，只有一条数据。
获取最后结果 this.$refs.ysExpressionMain.finalConfirm()
hide-first-line="hideFirstLine" 隐藏最左边的表单一列
activeItem: {
'relationList':
[
{"children":[{"id":"","name":"","formId":"", "field": {"type": {"name": "date"}},"left":"","right":"","type":"","relationType":"and","isLeaf":true,"children":[]}],"relationType":"and"}
]
}
vue中使用 ys-expression 示例：
<template>
<div>
<div @click="confirm" v-if="showDialog" class="dialogContainer">
我是弹框,点我
</div>
<Main
ref="ysExpressionMain"
:lang="lang"
:active-item="activeItem"
:table-list="tableList"
:right-table-list="rightTableList"
:is-process-designer="isProcessDesigner"
:open-reference-dialog="openReferenceDialog"
>
</Main>
<div class="finnlConfrim" @click="finalConfirm">确定</div>
</div>
</template>
<script>
import Main from 'ys-expression'
export default {
data () {
return {
lang: 'zh-CN',
referencerThis: '',
// activeItem.relationList 是显示值
activeItem: {
'relationList':
[
{"children":[{"id":"","name":"","formId":"", "field": {"type": {"name": "date"}},"left":"","right":"","type":"","relationType":"and","isLeaf":true,"children":[]}],"relationType":"and"}
]
},
tableList: [ {
"id" : "0e02e501472549399a622068ec198b42",
"name" : "档案11",
children: [
{
"field_code": "111", "field_name": "stringsasassa",
"type" : {"name" : "string"}
},
{
"field_code": "22", "field_name": "发起人部门",
"type" : {"name" : "reference" }
},
{
"field_code" : "33", "field_name" : "年月日",
"type" : {"name" : "date" , "format": "yyyy-MM-dd"}, "formId" : "processVariable","extendData" : null
},
{
"field_code" : "44", "field_name" : "时分秒",
"type" : {"name" : "date" , "format": "HH-mm-ss" }, "formId" : "processVariable","extendData" : null
},
{
"field_code" : "55", "field_name" : "啥也不是",
"type" : {"name" : "aaabbb" }, "formId" : "processVariable","extendData" : null
}
]
}, {
"id" : "processVariable",
"name" : "流程字段"
} ],
rightTableList: [ {
"id" : "1111",
"name" : "Y源表单",
children: [
{
"field_code": "1_aaa", "field_name": "sss三生三世",
"type" : {"name" : "string" }
},
{
"field_code": "2_aaa", "field_name": "发起人部门",
"type" : {"name" : "reference" }
},
{
"field_code" : "3_aaa", "field_name" : "发起人所属用户组",
"type" : {"name" : "string" }, "formId" : "processVariable","extendData" : null
}
]
}],
showDialog: false,
isProcessDesigner: false
}
},
components: {
Main
},
methods: {
openReferenceDialog(type){
this.referencerThis = type.o
this.showDialog = true
},
confirm() {
// showValue是显示值 trueValue是真实值
this.referencerThis.selectRenfrenceCtnValue = {"showValue": ['一', '二', '三'], "trueValue": ['1', '2', '3']}
this.showDialog = false
},
finalConfirm() {
// 显示值
console.log('显示值')
console.log(this.activeItem.relationList[0])
// 预览值
console.log('预览值')
console.log(this.$refs.ysExpressionMain.getConditionExpression(this.activeItem.relationList[0], 'children'))
// 真实值- 数组
let real = this.$refs.ysExpressionMain.getTrueCondition(this.activeItem.relationList[0], 'children')
console.log('真实值数组：')
if(this.isProcessDesigner) {
// 是流程设计器的时候 这个是真实值
console.log(real)
} else {
let newArr = []
for(let i = 0; i < real.length; i++) {
let newObj = {}
newObj['item_' + i] = real[i]
newArr.push(newObj)
}
// 不是流程设计器的时候 这个是真实值
console.log(newArr)
}
// 真实值字符串
console.log('真实值字符串：')
let real2 = "${" + this.$refs.ysExpressionMain.getTrueConditionStr(this.activeItem.relationList[0], 'children') + "}"
console.log(real2)
},
},
created(){
},
mounted(){
}
}
</script>
<style lang='scss' scoped>
.dialogContainer{
cursor: pointer;
position: fixed;
width: 200px;
height: 200px;
background: #ebe8ef;
z-index: 9;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.finnlConfrim{
cursor: pointer;
float: right;
width: 53px;
height: 30px;
text-align: center;
border: 1px solid #dcdfe6;
border-radius: 4px;
line-height: 30px;
font-size: 14px;
margin-top: 10px;
&:hover{
color: #409eff;
border-color: #c6e2ff;
background-color: #ecf5ff;
}
}
</style>
引用 ys-expression.js 的使用示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<div id="app">
<div @click="confirm" v-if="showDialog" class="dialogContainer">
我是弹框,点我
</div>
<ys-expression
ref="ysExpressionMain"
:lang="lang"
:active-item="activeItem"
:table-list="tableList"
:right-table-list="rightTableList"
:is-process-designer="isProcessDesigner"
:open-reference-dialog="openReferenceDialog">
</ys-expression>
<div class="finnlConfrim" @click="finalConfirm">确定</div>
</div>
<script src="./dist/ys-expression.js"></script>
<script>
window['ys-expression'].default.install();
new Vue({
el: '#app',
data () {
return {
lang: 'zh-CN',
referencerThis: '',
// relationList是显示值 condition是真实值 显示值不存在的时候 就使用真实值,流程设计器里面会有这种情况，其他情况下部需要传递 'condition'
activeItem: {
'condition': '',
'relationList':
[
{"children":[{"id":"","name":"","formId":"", "field": {"type": {"name": "date"}},"left":"","right":"","type":"","relationType":"and","isLeaf":true,"children":[]}],"relationType":"and"}
]
},
tableList: [ {
"id" : "0e02e501472549399a622068ec198b42",
"name" : "档案11",
children: [
{
"field_code": "111", "field_name": "stringsasassa",
"type" : {"name" : "string"}
},
{
"field_code": "22", "field_name": "发起人部门",
"type" : {"name" : "reference" }
},
{
"field_code" : "33", "field_name" : "年月日",
"type" : {"name" : "date" , "format": "yyyy-MM-dd"}, "formId" : "processVariable","extendData" : null
},
{
"field_code" : "44", "field_name" : "时分秒",
"type" : {"name" : "date" , "format": "HH-mm-ss" }, "formId" : "processVariable","extendData" : null
},
{
"field_code" : "55", "field_name" : "啥也不是",
"type" : {"name" : "aaabbb" }, "formId" : "processVariable","extendData" : null
}
]
}, {
"id" : "processVariable",
"name" : "流程字段"
} ],
rightTableList: [ {
"id" : "1111",
"name" : "Y源表单",
children: [
{
"field_code": "1_aaa", "field_name": "sss三生三世",
"type" : {"name" : "string" }
},
{
"field_code": "2_aaa", "field_name": "发起人部门",
"type" : {"name" : "reference" }
},
{
"field_code" : "3_aaa", "field_name" : "发起人所属用户组",
"type" : {"name" : "string" }, "formId" : "processVariable","extendData" : null
}
]
}],
showDialog: false,
isProcessDesigner: false
}
},
methods: {
openReferenceDialog(type){
console.log(type.type)
// type.referenceObjValue 是参照的数据，回显用的
this.referencerThis = type.o
this.showDialog = true //需要自行打开参照的弹框
},
confirm() {
// showValue是显示值 trueValue是真实值
// this.referencerThis.selectRenfrenceCtnValue = {"showValue": ['一', '二', '三'], "trueValue": ['1', '2', '3']}
this.referencerThis.selectRenfrenceCtnValue = [{"showValue": '111', "trueValue": 'ccc 1'}, {"showValue": '二', "trueValue": '2'}]
this.referencerThis.activeItem.referenceObjValue = [{"showValue": '111', "trueValue": 'ccc 1'}, {"showValue": '二', "trueValue": '2'}]
this.showDialog = false
},
finalConfirm() {
// 显示值
console.log('显示值')
console.log(this.activeItem.relationList[0])
// 预览值
console.log('预览值')
console.log(this.$refs.ysExpressionMain.getConditionExpression(this.activeItem.relationList[0], 'children'))
// 真实值- 数组
let real = this.$refs.ysExpressionMain.getTrueCondition(this.activeItem.relationList[0], 'children')
console.log('真实值数组：')
let newArr = []
for(let i = 0; i < real.length; i++) {
let newObj = {}
newObj['item_' + i] = real[i]
newArr.push(newObj)
}
// 不是流程设计器的时候 这个是真实值
console.log(newArr)
// 真实值字符串
console.log('真实值字符串：')
let real2 = "${" + this.$refs.ysExpressionMain.getTrueConditionStr(this.activeItem.relationList[0], 'children') + "}"
console.log(real2)
},
}
})
</script>
</body>
</html>
特殊说明，在非vue环境下，如果vue环境里面有element-ui， 那么该组件内部对于element-ui的引用就可以去掉，不用再次把element的资源打包进来了