427 lines
9.9 KiB
Vue
427 lines
9.9 KiB
Vue
<style>
|
|
.rule {
|
|
display: flex;
|
|
/* margin-left: 5px; */
|
|
position: relative;
|
|
}
|
|
|
|
.Rule_cont {
|
|
width: 30px;
|
|
border-top: 1px dashed #C7C6C8;
|
|
/* border-top: 1px dashed rgb(1,1,1); */
|
|
margin-top: 7px;
|
|
flex-grow: 0;
|
|
height: 1px;
|
|
/* background-color: #C7C6C8; */
|
|
margin: 12px 0px 0 0;
|
|
height: 0;
|
|
|
|
}
|
|
|
|
.RuleIcon {
|
|
background-color: #EBEBEB;
|
|
border: #DADADA 1px solid;
|
|
border-radius: 4px;
|
|
padding: 4px 6px 4px 2px;
|
|
}
|
|
|
|
.RuleSelcet .el-input__inner {
|
|
border-radius: 0 4px 4px 0;
|
|
}
|
|
|
|
|
|
|
|
.RuleCont_for_out {
|
|
border-left: 1px dashed #ccc;
|
|
border-bottom: 1px dashed #ccc;
|
|
border-right: 1px dashed #ccc;
|
|
padding-top: 5px;
|
|
position: relative;
|
|
}
|
|
</style>
|
|
|
|
<template>
|
|
<div class="rule" :style="{marginLeft:ZIndex==1?'20px':'0px'}" v-if="data">
|
|
<div :style="{position: 'absolute',top:'0px', left: '-20px',marginTop: top===0?'0':'8px'}" class="RuleIcon">
|
|
<el-dropdown trigger="click" @command="handleCommand">
|
|
<span class="el-dropdown-link">
|
|
<i class="el-icon-s-operation" :style="{color: color[ZIndex%5] ,fontSize: '16px'}"></i>
|
|
</span>
|
|
|
|
<el-dropdown-menu slot="dropdown">
|
|
<el-dropdown-item icon="el-icon-plus" command="addRule" v-if="data.conditionType!=3">添加规则
|
|
</el-dropdown-item>
|
|
<el-dropdown-item icon="el-icon-circle-plus-outline" command="addlogical">添加关系</el-dropdown-item>
|
|
<el-dropdown-item icon="el-icon-close" command="delect" v-if="ZIndex!=1&&data.conditionType!=4">
|
|
删除此节点</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</el-dropdown>
|
|
</div>
|
|
<div v-if="data.conditionType==1" class="RuleSelcet">
|
|
|
|
<div :style="{width: '80px',marginTop: top===0?'0':'8px'}">
|
|
<el-select v-model="data.logical" placeholder="请选择" size="mini">
|
|
<el-option :key="1" label="AND" value="&&"></el-option>
|
|
<el-option :key="2" label="OR" value="||"></el-option>
|
|
</el-select>
|
|
</div>
|
|
</div>
|
|
<div style="width: 10px;height: 0;border-top: 1px dashed #C7C6C8;margin-top: 19px;margin-left: 5px;">
|
|
</div>
|
|
<div>
|
|
<div
|
|
:style="{border: '1px dashed '+ color[ZIndex%5],borderRadius: '5px',paddingRight: '5px',paddingBottom: '5px',position:'relative',minWidth:'30px',minHeight:'40px'}">
|
|
|
|
<div
|
|
:style="{border:'',margin:'',padding:'',paddingLeft:'0px'}">
|
|
|
|
<div v-for="(item,index) in data.children" style="display: flex;margin-top: 7px;">
|
|
<div class="Rule_cont"
|
|
:style="{marginTop:item.conditionType===0?'12px':(index===0?'11px':'20px')}">
|
|
</div>
|
|
<!-- conditionType==2 规则部分 -->
|
|
<div v-if="item.conditionType==2" style="display: flex;">
|
|
<!-- {{fieldType}} -->
|
|
<div v-if="fieldType!='for'" style="display: flex;">
|
|
<!-- 普通规则部分 -->
|
|
|
|
<!-- 不为输出节点 则拉选 fielduser-->
|
|
<div style="display: flex;">
|
|
|
|
<!-- <el-select v-model="item.opType" placeholder="请选择" size="mini" style="width: 100px;" @change="emptyOpKey($event,item)">
|
|
<el-option :key="value.value" :label="value.label" :value="value.value" v-for="value in ruleList"></el-option>
|
|
</el-select> -->
|
|
|
|
<el-cascader v-model="item.opKey" filterable size="mini" :options="fieldUserObj" clearable @change="ruleCascaderChange(item)"
|
|
:key="keyValue+(item.random?item.random:0)" :props="{ expandTrigger: 'hover' }" @visible-change="randomAdd(item,$event)" style="width: 300px;flex-shrink: 0;">
|
|
</el-cascader>
|
|
<ruleRelation v-model="item.operator" :value2.sync="item.variableValue"
|
|
:variableType.sync="item.variableType"
|
|
:valueType="GetValueTypeByJSONEn(item.opKey)" size="mini" :variableDis="[2]"
|
|
:interceptCustom="true" @CustomCallback="$emit('CustomCallback',item)"
|
|
></ruleRelation>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<i class="el-icon-circle-close" style="color: #fa4949;margin-left: 5px;"
|
|
@click="deleteSon(index)"></i>
|
|
</div>
|
|
<!-- conditionType==1 关系节点 conditionType==3 for的输出的关系节点 节点部分 -->
|
|
<div v-if="item.conditionType==1">
|
|
<!-- {{fieldType}} -->
|
|
<rule :data="item" :top="index" :ZIndex="ZIndex+1"
|
|
:index="index" @delectLogical="delectLogical"
|
|
|
|
:customUserObj="customUserObj"
|
|
>
|
|
</rule>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import ruleRelation from '@/components/common/ruleRelation.vue'
|
|
import bigElCascader from '@/components/common/bigElCascader.vue'
|
|
export default {
|
|
components: {
|
|
ruleRelation,
|
|
bigElCascader
|
|
},
|
|
name: 'rule',
|
|
data() {
|
|
return {
|
|
color: ['#0D183E', '#409EFF', '#67C23A', '#F56C6C', '#FFCD43'],
|
|
|
|
keyValue: 1, //用于给级联选择框重新渲染
|
|
keyValueReady: false
|
|
}
|
|
},
|
|
created() {
|
|
|
|
},
|
|
mounted() {
|
|
if (this.data) {
|
|
if (Array.isArray(this.data.fieldEn)) {
|
|
if (this.data.fieldEn.length > 0) {
|
|
this.EnChange(this.data.fieldEn, false)
|
|
}
|
|
}
|
|
}
|
|
},
|
|
props: {
|
|
|
|
fieldType: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
ZIndex: {
|
|
type: Number,
|
|
default: -1
|
|
},
|
|
|
|
data: {
|
|
type: Object,
|
|
default () {
|
|
return {}
|
|
}
|
|
},
|
|
top: {
|
|
tyep: String,
|
|
default: '8px'
|
|
},
|
|
index: {
|
|
type: Number,
|
|
default: -1
|
|
},
|
|
// ruleList:{ //算子
|
|
// type:Array||null,
|
|
// default:null
|
|
// },
|
|
customUserObj:{ //自定义规则下拉
|
|
type:Array||null,
|
|
default:null
|
|
}
|
|
},
|
|
computed: {
|
|
|
|
fieldUserObj() {
|
|
|
|
if(this.customUserObj){
|
|
return this.customUserObj
|
|
}else{
|
|
return []
|
|
}
|
|
// if (this.$store.state.FieldUserObj) {
|
|
// return this.$store.state.FieldUserObj.data.fieldList
|
|
// } else {
|
|
// return []
|
|
// }
|
|
},
|
|
fielduserArr() {
|
|
let arr = []
|
|
// console.log(11,this.fielduser)
|
|
if (this.fielduser.length > 1) {
|
|
if (this.fieldType != "for") { // 如果元素不为 for 则 用fielduser里的 json 格式指标
|
|
arr = this.fielduser.filter((value) => {
|
|
return value.valueType == 6
|
|
})
|
|
|
|
arr = arr.map((value) => {
|
|
let obj = {
|
|
value: value.fieldEn,
|
|
label: value.fieldCn,
|
|
}
|
|
obj.children = this.getdeepArr(JSON.parse(value.jsonValue))
|
|
return obj
|
|
})
|
|
}
|
|
// console.log(arr)
|
|
return arr
|
|
|
|
} else {
|
|
return []
|
|
}
|
|
},
|
|
fielduser() {
|
|
if (this.$store.state.FieldUser) {
|
|
return this.$store.state.FieldUser.data.fieldList
|
|
} else {
|
|
return []
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
methods: {
|
|
emptyOpKey(e,item){
|
|
// console.log(e,item)
|
|
if(e=='count'){
|
|
item.opKey = []
|
|
}
|
|
},
|
|
GetValueTypeByJSONEn(en){
|
|
if(!en){
|
|
return
|
|
}
|
|
|
|
// console.log(en)
|
|
|
|
let obj
|
|
|
|
en.forEach((value,index)=>{
|
|
if(index==0){
|
|
obj = this.fieldUserObj.find(x=>x.value==value)
|
|
|
|
// console.log(this.fieldUserObj)
|
|
// console.log(obj)
|
|
// debugger
|
|
|
|
}else{
|
|
obj = obj.children.find(x=>x.value==value)
|
|
}
|
|
})
|
|
return obj&&obj.valueType
|
|
},
|
|
|
|
getvalueTypebyEn(e) { //通过en 获取 valueType
|
|
if (!Array.isArray(e)) {
|
|
return
|
|
}
|
|
if (e[0][0] !== '%') {
|
|
return this.mixinGetValueTypeByEn(e[0])
|
|
}
|
|
if (e[e.length - 1] == 'length') {
|
|
return 1
|
|
}
|
|
|
|
|
|
},
|
|
EnChange(e, clear = true) {
|
|
|
|
this.en = e.join('.')
|
|
if (!clear) return
|
|
this.deepClearEn(this.data)
|
|
},
|
|
deepClearEn(obj) { // 递归清除用到父级的 en
|
|
obj.children.forEach(value => {
|
|
if (Array.isArray(value.fieldEn)) {
|
|
if (value.fieldEn[0][0] == "%") {
|
|
value.fieldEn = ""
|
|
}
|
|
}
|
|
if (value.children.length > 0) {
|
|
this.deepClearEn(value)
|
|
}
|
|
})
|
|
|
|
},
|
|
|
|
getdeepArr(obj) {
|
|
if (Array.isArray(obj)) {
|
|
return false
|
|
} else if (typeof obj == 'object') {
|
|
let arr = []
|
|
for (let key in obj) {
|
|
if (obj.hasOwnProperty(key)) {
|
|
if (Array.isArray(obj[key])) {
|
|
arr.push({
|
|
value: key,
|
|
label: key
|
|
})
|
|
} else if (typeof obj[key] == 'object') {
|
|
arr.push({
|
|
value: key,
|
|
label: key,
|
|
children: this.getdeepArr(obj[key])
|
|
})
|
|
}
|
|
|
|
}
|
|
}
|
|
return arr
|
|
} else {
|
|
return []
|
|
}
|
|
|
|
|
|
},
|
|
|
|
delectLogical(index) {
|
|
this.data.children.splice(index, 1)
|
|
},
|
|
handleCommand(str) {
|
|
if (str == "addRule") { //添加规则
|
|
// console.log(this.data)
|
|
this.data.children.push({
|
|
"logical": null,
|
|
"opKey": '',
|
|
"operator": "",
|
|
"variableValue": "",
|
|
"conditionType": 2,
|
|
"variableType": 1,
|
|
"children": [],
|
|
|
|
})
|
|
|
|
|
|
} else if (str == "addlogical") { //添加链接符
|
|
let obj = {
|
|
"logical": '&&',
|
|
"fieldId": "",
|
|
"operator": "",
|
|
"fieldValue": "",
|
|
"conditionType": 1,
|
|
"children": [],
|
|
}
|
|
this.data.children.push(obj)
|
|
|
|
|
|
} else if (str == "delect") {
|
|
this.$confirm('确定删除?', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
this.$emit('delectLogical', this.index)
|
|
this.$message({
|
|
type: 'success',
|
|
message: '删除成功!'
|
|
});
|
|
}).catch(() => {
|
|
this.$message({
|
|
type: 'info',
|
|
message: '已取消删除'
|
|
});
|
|
});
|
|
|
|
|
|
}
|
|
},
|
|
deleteSon(index) {
|
|
|
|
this.$confirm('确定删除?', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
this.data.children.splice(index, 1)
|
|
this.$message({
|
|
type: 'success',
|
|
message: '删除成功!'
|
|
});
|
|
}).catch(() => {
|
|
this.$message({
|
|
type: 'info',
|
|
message: '已取消删除'
|
|
});
|
|
});
|
|
|
|
|
|
},
|
|
ruleCascaderChange(item) {
|
|
item.valueType = this.mixinGetValueTypeByJSONEn(item.fieldEn)
|
|
item.fieldValue = ""
|
|
item.operator = ""
|
|
},
|
|
|
|
},
|
|
watch: {
|
|
|
|
fielduserArr() {
|
|
if (this.keyValueReady) {
|
|
this.keyValue++
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
</script> |