版本2.0更新
This commit is contained in:
yunian
378
h5-enginex-manager/src/备用组件/只有关系和规则的复杂规则(最简版本 规则无级联).vue
Normal file
378
h5-enginex-manager/src/备用组件/只有关系和规则的复杂规则(最简版本 规则无级联).vue
Normal file
@@ -0,0 +1,378 @@
|
||||
<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-cascader v-model="item.fieldEn" filterable size="mini" :options="fieldUserObj" clearable @change="ruleCascaderChange(item)"
|
||||
:key="keyValue+(item.random?item.random:0)" :props="{ expandTrigger: 'hover' }" @visible-change="randomAdd(item,$event)">
|
||||
</el-cascader>
|
||||
|
||||
<ruleRelation v-model="item.operator" :value2.sync="item.fieldValue"
|
||||
:variableType.sync="item.variableType"
|
||||
:valueType="mixinGetValueTypeByJSONEn(item.fieldEn)" size="mini"></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"
|
||||
>
|
||||
</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
|
||||
},
|
||||
|
||||
},
|
||||
computed: {
|
||||
|
||||
fieldUserObj() {
|
||||
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: {
|
||||
|
||||
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,
|
||||
"fieldId": null,
|
||||
"operator": "",
|
||||
"fieldValue": "",
|
||||
"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>
|
||||
256
h5-enginex-manager/src/备用组件/简单的列表页.vue
Normal file
256
h5-enginex-manager/src/备用组件/简单的列表页.vue
Normal file
@@ -0,0 +1,256 @@
|
||||
<template>
|
||||
<div>
|
||||
<div style="padding-top: 20px;">
|
||||
<el-button type="primary" @click="add">添加引擎</el-button>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<el-table :data="list" border style="width: 100%;margin-top: 20px;" v-loading="loading">
|
||||
<el-table-column prop="id" label="引擎ID" align="center">
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="名称" align="center">
|
||||
</el-table-column>
|
||||
<el-table-column prop="description" label="描述" align="center">
|
||||
</el-table-column>
|
||||
|
||||
|
||||
<el-table-column prop="createDatetime" label="创建时间" align="center">
|
||||
<template slot-scope="scope">
|
||||
{{new Date(scope.row.createDatetime).format('yyyy-MM-dd hh:mm:ss')}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="" label="操作" align="center">
|
||||
<template slot-scope="scope">
|
||||
<div style="display: flex;justify-content: center;">
|
||||
|
||||
<el-button type="primary" icon="el-icon-edit" circle size="mini" @click="update(scope.row)">
|
||||
</el-button>
|
||||
<el-button type="danger" icon="el-icon-delete" circle size="mini"
|
||||
@click="deleteMq(scope.row.id)"></el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div style="display: flex;justify-content: flex-end;padding-top: 20px;padding-right: 20px;">
|
||||
<el-pagination background layout="prev, pager, next" :current-page.sync="pageNum" :total="total"
|
||||
@current-change="getList">
|
||||
</el-pagination>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<el-dialog title="添加/修改" :visible.sync="dialogVisible" width="30%" @close="close">
|
||||
<div v-loading="dialogLoading">
|
||||
<el-form ref="form" :model="form" label-width="120px" :rules="rules">
|
||||
<el-form-item label="引擎名称" prop="name">
|
||||
<el-input v-model="form.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="引擎描述" prop="description">
|
||||
<el-input v-model="form.description"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
<div style="display: flex;justify-content: flex-end;">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="dialogCallBack">确 定</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
engineGetList,
|
||||
engineAdd,
|
||||
engineUpdate,
|
||||
MqupdateStatus,
|
||||
} from '@/api/index.js'
|
||||
|
||||
const formOr = {
|
||||
id: '',
|
||||
name:'',
|
||||
description:''
|
||||
}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
pageNum: 1,
|
||||
total: 0,
|
||||
dialogVisible: false,
|
||||
loading: false,
|
||||
dialogLoading: false,
|
||||
typeList: [{
|
||||
label: 'kafka',
|
||||
value: 'kafka'
|
||||
}],
|
||||
|
||||
rules: {
|
||||
name: [{
|
||||
required: true,
|
||||
message: '请输入名称',
|
||||
trigger: 'blur'
|
||||
}, ],
|
||||
description: [{
|
||||
required: true,
|
||||
message: '请输入描述',
|
||||
trigger: 'blur'
|
||||
} ],
|
||||
|
||||
},
|
||||
form: JSON.parse(JSON.stringify(formOr)),
|
||||
dialogCallBack: () => {}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
deleteMq(id) {
|
||||
this.$confirm('确定删除？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'error'
|
||||
}).then(() => {
|
||||
MqupdateStatus({
|
||||
ids: id,
|
||||
status: -1
|
||||
}).then(res => {
|
||||
if (res.status == '1') {
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
}).catch(() => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: '已取消删除'
|
||||
});
|
||||
});
|
||||
},
|
||||
close() {
|
||||
this.form = JSON.parse(JSON.stringify(formOr))
|
||||
this.dialogCallBack = () => {}
|
||||
},
|
||||
update(item) {
|
||||
|
||||
this.form = {
|
||||
id: item.id,
|
||||
name: item.name,
|
||||
description: item.description,
|
||||
}
|
||||
this.dialogVisible = true
|
||||
|
||||
this.dialogCallBack = () => {
|
||||
if (this.verify()) {
|
||||
return
|
||||
}
|
||||
this.dialogLoading = true
|
||||
engineUpdate(this.form).then(res => {
|
||||
if (res.status == '1') {
|
||||
this.dialogVisible = false
|
||||
this.getList()
|
||||
}
|
||||
this.dialogLoading = false
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
add() {
|
||||
this.dialogVisible = true
|
||||
|
||||
this.dialogCallBack = () => {
|
||||
if (this.verify()) {
|
||||
return
|
||||
}
|
||||
delete this.form.id
|
||||
this.dialogLoading = true
|
||||
engineAdd(this.form).then(res => {
|
||||
if (res.status == '1') {
|
||||
this.dialogVisible = false
|
||||
this.getList()
|
||||
}
|
||||
this.dialogLoading = false
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
verify() {
|
||||
let is = {
|
||||
is: false,
|
||||
msg: ''
|
||||
}
|
||||
if (!this.form.name||this.form.name.trim() === '') {
|
||||
is.is = true
|
||||
is.msg = '请输入名称'
|
||||
}
|
||||
if (!this.form.description||this.form.description.trim() === '') {
|
||||
is.is = true
|
||||
is.msg = '请输入描述'
|
||||
}
|
||||
|
||||
if (is.is) {
|
||||
this.$message.error(is.msg)
|
||||
}
|
||||
return is.is
|
||||
},
|
||||
getList() {
|
||||
this.loading = true
|
||||
engineGetList({
|
||||
pageNum: this.pageNum,
|
||||
pageSize: 10,
|
||||
entity:{
|
||||
engineType:'data_flow_engine'
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.status == 1) {
|
||||
this.list = res.data.list
|
||||
this.total = res.data.total
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
<!-- <template>
|
||||
<div>
|
||||
1
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
engineGetList
|
||||
} from '@/api/index.js'
|
||||
export default{
|
||||
created() {
|
||||
engineGetList({
|
||||
pageNum:1,
|
||||
pageSize:10,
|
||||
entity:{
|
||||
engineType:'data_flow_engine'
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style> -->
|
||||
Reference in New Issue
Block a user