❤
npm
Sign UpSign In

ys-expression

2.0.82 • Public • Published

条件表达式

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的资源打包进来了

Dependents (0)

Package Sidebar

Install

npm i ys-expression

Weekly Downloads

3

Version

2.0.82

License

MIT

Unpacked Size

3.44 MB

Total Files

265

Last publish

Collaborators

  • yanyalong
  • liuhongbin
  • 13eliever
Try on RunKit
Report malware