前端页面实现动态配置sql条件，将JSON结构给到后端，后端进行sql组装。
这里涉及的分组后端在组装时用括号将这块规则括起来就行，分组的sql连接符（并且/或者）取组里的第一个。
实现效果
组件完整代码
<!-- conditionGroup.vue -->
<template>
<div :class="{ marginClass: onlyOne }" v-if="reDraw">
<div class="condition-header" v-if="onlyOne">
<div class="group-button">
<el-tooltip content="分组">
<i
class="el-icon-folder-opened"
icon-class="group"
:style="{
width: groupBtnSize + 'px',
height: groupBtnSize + 'px',
color: '#1890ff',
cursor: 'pointer',
}"
@click.stop="_addGroup"
></i>
</el-tooltip>
</div>
</div>
<div
v-for="(item, index) in conditionList"
:style="{ 'flex-direction': 'column' }"
>
<div
:style="{
display: 'flex',
'flex-direction': 'row',
'align-items': 'center',
}"
v-if="!item.groups"
>
<div
:style="{
display: 'flex',
'flex-direction': 'row',
'align-items': 'center',
}"
>
<i
class="el-icon-circle-plus-outline color-success font-title-large"
style="cursor: pointer"
@click="_addItem(item)"
></i>
<i
class="el-icon-circle-close color-danger font-title-large"
style="cursor: pointer; margin-left: 5px"
@click="_delItem(item)"
></i>
<el-checkbox
style="padding: 0 10px 0 10px"
v-model="item.checked"
></el-checkbox>
<template v-if="floor > 1 && (!item.line || item.line.length == 0)">
<div
:style="{
width: gradWidth + leftWidth * (floor - item.floor - 1) + 'px',
height: '42px',
}"
></div>
</template>
<template v-else v-for="(n, li) in item.line">
<div
:style="{
width:
li == item.line.length - 1
? gradWidth + leftWidth * (floor - item.floor) + 'px'
: leftWidth + 'px',
height: '42px',
background: getFloorColor(li + 1),
}"
:class="{
'group-left': n.l == 2,
'group-top-left': n.l == 4,
'group-bottom-left': n.l == 5,
}"
>
<el-tooltip :content="'点击取消所在分组'" v-if="n.l == 4">
<i
class="el-icon-folder-opened"
icon-class="group"
:style="{
width: groupBtnSize + 'px',
height: groupBtnSize + 'px',
color: '#1890ff',
cursor: 'pointer',
}"
@click="_delGroup(item, n.p)"
></i>
</el-tooltip>
</div>
</template>
</div>
<div style="position: relative">
<div
v-if="item.header"
:style="{
position: 'absolute',
top: '-23px',
left: '0px',
display: 'flex',
'flex-direction': 'row',
width: '100%',
}"
>
<div class="condition-header" style="margin-left: 20px">
并且/或者
</div>
</div>
<el-select
v-model="item.operate"
style="width: 120px; padding: 5px 0 5px 1px"
size="small"
:disabled="item.header"
>
<el-option
v-for="ot in [
{ key: '并且', val: 'and' },
{ key: '或者', val: 'or' },
]"
:key="ot.val"
:label="ot.key"
:value="ot.val"
>
</el-option>
</el-select>
</div>
<div style="position: relative">
<div
v-if="item.header"
:style="{
position: 'absolute',
top: '-23px',
left: '0px',
display: 'flex',
'flex-direction': 'row',
width: '100%',
}"
>
<div class="condition-header" style="margin-left: 20px">字段</div>
</div>
<el-select
v-model="item.field"
style="width: 200px; margin-left: 10px; padding: 5px 0 5px 0px"
size="small"
@change="(item.value = ''), (item.condition = '')"
>
<el-option
v-for="ot in keyList"
:key="ot.val"
:label="ot.key"
:value="ot.val"
>
</el-option>
</el-select>
</div>
<div style="position: relative">
<div
v-if="item.header"
:style="{
position: 'absolute',
top: '-23px',
left: '0px',
display: 'flex',
'flex-direction': 'row',
width: '100%',
}"
>
<div class="condition-header" style="margin-left: 20px">运算符</div>
</div>
<el-select
v-model="item.condition"
v-if="conditionMap && conditionMap[item.field]"
style="width: 120px; margin-left: 10px; padding: 5px 0 5px 0px"
size="small"
>
<el-option
v-for="ot in conditionMap[item.field]"
:key="ot.val"
:label="ot.key"
:value="ot.val"
>
</el-option>
</el-select>
<el-select
v-model="item.condition"
v-else
style="width: 120px; margin-left: 10px; padding: 5px 0 5px 0px"
size="small"
>
<el-option
v-for="ot in conditionSelect"
:key="ot.val"
:label="ot.key"
:value="ot.val"
>
</el-option>
</el-select>
</div>
<div style="position: relative">
<div
v-if="item.header"
:style="{
position: 'absolute',
top: '-23px',
left: '0px',
display: 'flex',
'flex-direction': 'row',
width: '100%',
}"
>
<div class="condition-header" style="margin-left: 20px">值</div>
</div>
<!-- 值类型：下拉选项、日期、时间、小数、整数、文本框 -->
<el-select
v-model="item.value"
v-if="
valList &&
valList[item.field] &&
valList[item.field].dom == 'select'
"
style="width: 400px; margin-left: 10px; padding: 5px 0 5px 0px"
size="small"
placeholder="请选择"
>
<el-option
v-for="ot in valList[item.field].data"
:key="ot.dictValue"
:label="ot.dictLabel"
:value="ot.dictValue"
>
</el-option>
</el-select>
<el-date-picker
v-else-if="
valList &&
valList[item.field] &&
valList[item.field].dom == 'date'
"
size="small"
v-model="item.value"
type="date"
placeholder="请选择日期"
style="
width: 400px;
margin-left: 10px;
cursor: pointer;
padding: 5px 0 5px 0px;
"
:editable="false"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
>
</el-date-picker>
<el-date-picker
v-else-if="
valList &&
valList[item.field] &&
valList[item.field].dom == 'dateTime'
"
size="small"
v-model="item.value"
type="datetime"
placeholder="请选择时间"
style="
width: 400px;
margin-left: 10px;
cursor: pointer;
padding: 5px 0 5px 0px;
"
:editable="false"
format="yyyy-MM-dd HH:mm:ss"
value-format="yyyy-MM-dd HH:mm:ss"
>
</el-date-picker>
<el-input
v-else-if="
valList &&
valList[item.field] &&
valList[item.field].dom == 'decimals'
"
v-model="item.value"
style="width: 400px; margin-left: 10px; padding: 5px 0 5px 0px"
placeholder="请输入(支持小数)"
clearable
type="number"
size="small"
oninput="if(value < 0 || value == '' || value == null) value='';"
/>
<!-- if(!/^\d+(\.\d{1,2})?$/.test(value)) value=value.match(/[\d]+(\.\d{0,2})?/)?.[0]; 两位 -->
<el-input
v-else-if="
valList &&
valList[item.field] &&
valList[item.field].dom == 'integer'
"
v-model="item.value"
style="width: 400px; margin-left: 10px; padding: 5px 0 5px 0px"
placeholder="请输入(整数)"
clearable
type="number"
:min="1"
size="small"
oninput="if(value.includes('.')) value=value.replace(/\./g, ''); if(value < 0 || value == '' || value == null) value=''; if(!/^\d+$/.test(value)) value=value.replace(/\D/g,'');"
/>
<el-input
v-else
v-model="item.value"
style="width: 400px; margin-left: 10px; padding: 5px 0 5px 0px"
placeholder="请输入"
clearable
size="small"
/>
</div>
</div>
<conditionGroup
:conditionList="item.groups"
v-if="item.groups && item.groups.length > 0"
:only-one="false"
:parentData="parentData"
:floor="floor"
:borderColor="borderColor"
:key-list="keyList"
:val-list="valList"
:condition-map="conditionMap"
></conditionGroup>
</div>
<!-- <el-button
v-if="onlyOne"
size="small"
style="margin-top: 10px; cursor: pointer"
@click="_addChild"
>添加规则</el-button
> -->
</div>
</template>
<script>
const condition = {
id: 1,
index: 1,
condition: "",
operate: "and",
field: "",
value: "",
checked: false,
header: true,
pid: -1,
floor: 1,
};
const gradWidth = 20;
const leftWidth = 20;
const groupBtnSize = 20;
const alpha = 0.2;
const initData = [Object.assign({}, condition)];
export default {
name: "conditionGroup",
components: {},
props: {
onlyOne: {
type: Boolean,
default: () => true,
},
floor: {
type: Number,
default: () => 1,
},
conditionList: {
type: Array,
default: () => initData,
},
keyList: {
type: Array,
default: () => [],
},
conditionMap: {
type: Object,
default: () => {},
},
valList: {
type: Object,
default: () => {},
},
parentData: {
type: Object,
default: () => {},
},
gradWidth: {
type: Number,
default: () => gradWidth,
},
leftWidth: {
type: Number,
default: () => leftWidth,
},
groupBtnSize: {
type: Number,
default: () => groupBtnSize,
},
borderColor: {
type: Array,
default: () => ["rgba(24, 124, 255, " + alpha + ")"],
},
},
data() {
return {
plotList: [],
loading: false,
reDraw: true,
addGroupIndex: 0,
conditionSelect: [
{ key: "等于", val: "eq" },
{ key: "不等于", val: "notEq" },
{ key: "大于", val: "gt" },
{ key: "小于", val: "lt" },
{ key: "大于等于", val: "gtq" },
{ key: "小于等于", val: "ltq" },
{ key: "包含", val: "like" },
{ key: "不包含", val: "notLike" },
// { key: "加", val: "add" },
// { key: "减", val: "subtract" },
// { key: "乘", val: "multiply" },
// { key: "除", val: "divide" },
],
};
},
computed: {
sidebar() {
return this.$store.state.app.sidebar.opened;
},
},
watch: {
conditionList(val, oldVal) {
this.$emit("input", val);
while (this.borderColor.length < this.floor) {
var _color = this.randomHexColor();
while (this.borderColor.indexOf(_color) != -1) {
_color = this.randomHexColor();
}
this.borderColor.push(_color);
}
this.reDraw = false;
this.$nextTick(() => {
this.reDraw = true;
});
},
sidebar(val) {},
},
methods: {
findChecked(list, arrParam) {
var arr = arrParam || new Array();
for (var i = 0; i < list.length; i++) {
var o = list[i];
if (o.groups && o.groups.length > 0) {
this.findChecked(o.groups, arr);
} else {
if (o.checked) {
arr.push(o);
}
}
}
return arr;
},
removeNode(list, targetList) {
for (var i = 0; i < list.length; i++) {
var o = list[i];
for (var tid of targetList) {
if (o.id == tid) {
list.splice(i--, 1);
}
}
}
},
findParentGroups(list, pid, retParam) {
var ret = null || retParam;
for (var i = 0; i < list.length; i++) {
var o = list[i];
if (o.groups && o.groups.length > 0) {
if (o.id == pid) {
ret = o;
} else {
ret = this.findParentGroups(o.groups, pid, ret);
}
}
}
return ret;
},
_addGroup() {
this.addGroup(this.parentData.conditionList, this.parentData);
},
_delGroup(item, groupId) {
this.delGroup(groupId, this.parentData.conditionList, this.parentData);
},
_addChild() {
this.addChild(this.parentData.conditionList);
},
_delItem(item) {
this.delItem(
this.conditionList,
item,
this.parentData.conditionList,
this.parentData
);
},
_addItem(item) {
this.addItem(
this.conditionList,
item.index,
this.parentData.conditionList,
this.parentData
);
},
addItem(groups, index, conditionList, parentThis) {
var newItem = Object.assign({}, condition, {
id: new Date().getTime(),
index: index + 1,
floor: groups[0].floor,
pid: groups[0].pid,
});
groups.splice(index, 0, newItem);
parentThis.floor = this.refreshData(conditionList);
},
addChild(conditionList) {
var newItem = Object.assign({}, condition, {
id: new Date().getTime(),
index: conditionList.length + 1,
floor: 1,
pid: -1,
});
newItem.header = false;
conditionList.splice(conditionList.length, 0, newItem);
},
delItem(groups, item, conditionList, parentThis) {
var sum = this.countItem(conditionList);
if (sum <= 1) {
return;
}
groups.splice(item.index - 1, 1);
var currentGroups = this.findParentGroups(conditionList, groups[0].pid);
if (currentGroups) {
var parentGroups = this.findParentGroups(
conditionList,
currentGroups.pid
);
if (currentGroups.groups.length == 1) {
var ag = JSON.parse(JSON.stringify(currentGroups.groups[0]));
ag.index = currentGroups.index;
ag.id = currentGroups.id;
ag.pid = parentGroups ? parentGroups.id : -1;
ag.floor = currentGroups.floor;
if (ag.groups) {
ag.groups.forEach((o, index) => {
o.pid = ag.id;
o.floor = ag.floor + 1;
o.index = index + 1;
});
}
if (parentGroups) {
var _groups = this.findParentGroups(conditionList, parentGroups.id);
_groups.groups.splice(currentGroups.index - 1, 1, ag);
} else {
conditionList.splice(currentGroups.index - 1, 1, ag);
}
}
}
if (conditionList.length == 1 && conditionList[0].groups) {
var newList = JSON.parse(JSON.stringify(conditionList[0].groups));
conditionList.splice(0, 1);
for (var nl of newList) {
nl.pid = -1;
nl.floor = 1;
conditionList.push(nl);
}
}
parentThis.floor = this.refreshData(conditionList);
},
addGroup(conditionList, parentThis) {
var checkedList = this.findChecked(conditionList);
if (!checkedList || checkedList.length <= 1) {
this.$message({
message: "至少选择2个查询条目",
type: "warning",
duration: 1000,
});
return;
}
var checkNodes = [];
for (var item of checkedList) {
if (item.pid == -1) {
this.uniquePush(checkNodes, item);
} else {
var pNode = this.getRealParent(conditionList, item, checkedList);
if (pNode) {
this.uniquePush(checkNodes, pNode);
}
}
}
var _tmpRoot = [];
for (var ck of checkNodes) {
var _tmp = this.findParentGroups(conditionList, ck.pid);
if (_tmp) {
this.uniquePush(_tmpRoot, _tmp);
}
}
var allSelectCount = 0;
var floorCount = [];
for (var cn of checkNodes) {
if (cn.groups) {
allSelectCount += this.countItem(cn.groups);
} else {
allSelectCount++;
}
if (floorCount.indexOf(cn.floor) == -1) {
floorCount.push(cn.floor);
}
}
var rootGroup = this.findParentGroups(conditionList, checkNodes[0].pid);
if (_tmpRoot.length > 1) {
rootGroup = this.findParentGroups(conditionList, rootGroup.pid);
allSelectCount = 0;
for (var cn of _tmpRoot) {
if (cn.groups) {
allSelectCount += this.countItem(cn.groups);
} else {
allSelectCount++;
}
}
}
var rootArray = conditionList;
if (rootGroup) {
rootArray = rootGroup.groups;
}
var allCount = this.countItem(rootArray);
var currentSelectCount = checkedList.length;
if (allSelectCount != currentSelectCount || floorCount.length > 1) {
this.$message({
message: "不能交叉分组",
type: "warning",
duration: 1000,
});
return;
}
if (checkNodes.length == 1 || allCount == currentSelectCount) {
this.$message({
message: "无效分组",
type: "warning",
duration: 1000,
});
return;
}
var newCheckNode = JSON.parse(JSON.stringify(checkNodes));
newCheckNode.sort(function (a, b) {
return a.index - b.index;
});
var groupId = new Date().getTime();
var newGroup = {
groups: newCheckNode,
id: groupId,
index: newCheckNode[0].index,
pid: newCheckNode[0].pid,
floor: newCheckNode[0].floor,
};
var waitRemoveNode = [];
for (var o of newCheckNode) {
o.floor += 1;
o.pid = groupId;
if (!o.groups) {
o.checked = false;
}
waitRemoveNode.push(o.id);
}
if (!rootGroup) {
this.removeNode(conditionList, waitRemoveNode);
conditionList.splice(newCheckNode[0].index - 1, 0, newGroup);
} else {
var _groups = this.findParentGroups(conditionList, rootGroup.id);
this.removeNode(_groups.groups, waitRemoveNode);
_groups.groups.splice(newCheckNode[0].index - 1, 0, newGroup);
}
parentThis.floor = this.refreshData(conditionList);
},
delGroup(groupId, conditionList, parentThis) {
var parentGroups = this.findParentGroups(conditionList, groupId);
var rootGroups = this.findParentGroups(conditionList, parentGroups.pid);
var waitRemoveNode = [parentGroups.id];
var newList = JSON.parse(JSON.stringify(parentGroups.groups));
newList.forEach((o, index) => {
o.pid = parentGroups.pid;
o.floor = parentGroups.floor;
o.checked = false;
});
if (!rootGroups) {
this.removeNode(conditionList, waitRemoveNode);
newList.forEach((o, index) => {
conditionList.splice(parentGroups.index - 1 + index, 0, o);
});
} else {
var _groups = this.findParentGroups(conditionList, rootGroups.id);
this.removeNode(_groups.groups, waitRemoveNode);
newList.forEach((o, index) => {
_groups.groups.splice(parentGroups.index - 1 + index, 0, o);
});
}
parentThis.floor = this.refreshData(conditionList);
},
getRealParent(allItems, item, checkedList) {
var parentGroups = this.findParentGroups(allItems, item.pid);
var ret = parentGroups;
if (parentGroups) {
var childCount = this.countItem(parentGroups.groups);
var realChildCount = 0;
for (var cl of checkedList) {
if (cl.pid == parentGroups.id) {
realChildCount++;
} else {
var pg = this.findParentGroups(allItems, cl.pid);
if (pg) {
if (pg.pid == parentGroups.id) {
realChildCount++;
} else {
while (pg && pg.pid != parentGroups.id) {
pg = this.findParentGroups(allItems, pg.pid);
if (pg && pg.pid == parentGroups.id) {
realChildCount++;
}
}
}
}
}
}
if (childCount == realChildCount) {
var _tmp = this.getRealParent(allItems, parentGroups, checkedList);
if (_tmp) {
ret = _tmp;
}
} else {
ret = item;
}
}
return ret;
},
reIndex(list, i, arr) {
for (var index = 0; index < list.length; index++) {
var o = list[index];
if (arr.indexOf(i) == -1) {
arr.push(i);
}
if (o.groups && o.groups.length > 0) {
o.index = index + 1;
o.floor = i;
if (i == 1) {
o.pid = -1;
}
this.reIndex(o.groups, i + 1, arr);
} else {
o.index = index + 1;
o.floor = i;
o.checked = false;
if (i == 1) {
o.pid = -1;
}
}
}
},
drawLineGroup(list, currentFloor, retList) {
for (var index = 0; index < list.length; index++) {
var o = list[index];
if (o.groups && o.groups.length > 0) {
this.drawLineGroup(o.groups, currentFloor + 1, retList);
} else {
o.line = new Array(currentFloor - 1);
if (retList.length == 0) {
o.header = true;
} else {
o.header = false;
}
for (var _k = 0; _k < o.line.length; _k++) {
o.line[_k] = { l: 2, p: -1 };
}
retList.push(o);
}
}
},
refreshData(list) {
var floorCountArr = [];
this.reIndex(list, 1, floorCountArr);
var maxFloor = floorCountArr.length;
var ret = new Array();
this.drawLineGroup(list, 1, ret);
for (var item of ret) {
var parentGroup = this.findParentGroups(list, item.pid);
if (item.pid != -1) {
if (item.index == 1) {
var node = { l: 4, p: parentGroup.id };
item.line[item.line.length - 1] = node;
} else if (item.index == parentGroup.groups.length) {
var node = { l: 5, p: -1 };
item.line[item.line.length - 1] = node;
}
}
if (parentGroup) {
var parentIndex = parentGroup.index;
var parentLength = parentGroup.groups.length;
var i = 2;
var currentParentGroup = this.findParentGroups(list, parentGroup.pid);
while (currentParentGroup) {
if (i != 2) {
parentGroup = JSON.parse(JSON.stringify(currentParentGroup));
currentParentGroup = this.findParentGroups(list, parentGroup.pid);
}
if (currentParentGroup) {
if (
parentGroup.index == 1 &&
item.index == 1 &&
parentIndex == 1
) {
var node = { l: 4, p: currentParentGroup.id };
item.line[item.line.length - i] = node;
} else if (
parentGroup.index == currentParentGroup.groups.length &&
item.index == parentLength
) {
item.line[item.line.length - i] = { l: 5, p: -1 };
} else {
break;
}
i++;
}
}
}
}
return maxFloor;
},
countItem(list, i) {
var sum = i || 0;
for (var index = 0; index < list.length; index++) {
var o = list[index];
if (o.groups && o.groups.length > 0) {
sum += this.countItem(o.groups, i);
} else {
sum++;
}
}
return sum;
},
uniquePush(arr, item) {
var exist = false;
for (var o of arr) {
if (o.id == item.id) {
exist = true;
}
}
if (!exist) {
arr.push(item);
}
},
randomHexColor() {
// return '#' + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).substr(-6);
return this.randomColor(alpha);
},
randomColor(alpha) {
alpha =
alpha == undefined ? ((Math.random() * 10) / 10).toFixed(1) : alpha;
alpha = Number(alpha);
if (isNaN(alpha)) alpha = 1;
var col = "rgba(";
for (var i = 0; i < 3; i++) {
col += parseInt(Math.random() * 256) + ",";
}
col += alpha + ")";
return col;
},
getFloorColor(floor) {
return this.borderColor[floor - 1];
},
},
created() {
if (
typeof this.conditionList[0].field == "string" &&
typeof this.conditionList[0].header == "undefined"
) {
this.conditionList[0].header = true;
}
this.$nextTick(() => {});
},
};
</script>
<style type="text/css">
/* :root 是CSS中的一个伪类选择器，它代表文档的根元素。在HTML中，根元素通常是<html>标签。使用:root选择器允许开发者为整个文档定义全局样式变量
--borderWidth：这是一个自定义的CSS变量
使用var(--variableName)语法进行引用 */
:root {
--borderWidth: 1px;
--borderColor: rgba(158, 158, 158, 1);
}
table {
border-collapse: collapse;
}
.marginClass {
margin-bottom: 10px;
}
.condition-header {
font-weight: 600;
display: flex;
flex-direction: row;
}
.group-button {
margin-left: 47px;
display: flex;
flex-direction: row;
align-items: center;
}
.group-left {
border-left: var(--borderWidth) solid var(--borderColor);
}
.group-top-left {
border-top: var(--borderWidth) solid var(--borderColor);
border-left: var(--borderWidth) solid var(--borderColor);
}
.group-bottom-left {
border-bottom: var(--borderWidth) solid var(--borderColor);
border-left: var(--borderWidth) solid var(--borderColor);
}
</style>
父组件
<template>
<!-- :parentData="this"传递父组件实例，子组件使用属性或方法时this.parentData.属性/方法名 -->
<conditionGroup
:floor="floor"
:conditionList="conditionList"
:parentData="this"
:key-list="keyOptions"
:condition-map="conditionOptions"
:val-list="valueOptions"
>
</conditionGroup>
</template>
<sctipt>
export default {
data() {
conditionList: [Object.assign({}, condition)], // 默认页面显示一条空规则
floor: 1, // 树深度
keyOptions: [], // 字段选项
conditionOptions: {}, // 特殊运算符（像下拉框的只有 等于 运算符等）
valueOptions: {}, //下拉框类型的数据
},
// 一些关键方法
methods: {
// 递归找结构深度
getFloorth(groups) {
let deepestFloor = 0;
let deepestGroup = null;
function searchGroup(group) {
// 找到比当前deepestFloor值大，则重新赋值deepestFloor，并将当前对象记录
if (group.floor > deepestFloor) {
deepestFloor = group.floor;
deepestGroup = group;
}
if (group.groups && group.groups.length > 0) {
group.groups.forEach(searchGroup);
}
}
groups.forEach(searchGroup);
return deepestGroup ? deepestGroup.floor : 1;
},
// 提交时校验规则是否有未填/选项
traverse(data) {
for (let item of data) {
// 这里需要判空的参数field、condition、value，如果有为空则提示，不可保存
if (
!item.groups &&
(!item?.field || !item?.condition || !item?.value)
) {
this.$message.warning("请完善规则条件配置");
// 当校验失败时抛出错误，`中断当前执行的代码块`，并被上层catch语句捕获
throw new Error("字段验证失败");
} else if (item.groups) {
this.traverse(item.groups);
}
}
return true;
},
// 根据其他下拉框，查询动态字段项
selectChange(obj) {
let { name, val } = obj;
if (name === "equipType") {
this.keyOptions = [];
this.valueOptions = {};
this.conditionOptions = {};
let keyOptionsDict = val + "_column"; // keyOptionsDict 为val和_column拼接的字典名称去过滤对应字典项
let options = this.$options.filters["dictOption"]({
dictName: keyOptionsDict,
});
// 有过滤到字段项，给字段项字段push数据（字段key和val）
if (options.length) {
options.forEach((item) => {
// item.dictValue用#拼接的三个参数，如heat_status_code#select#heat_status（第一个为规则字段键、第二个为值类型、第三个为字典名）
let parts = item.dictValue.split("#");
this.keyOptions.push({
key: item.dictLabel,
val: parts[0],
});
if (parts[1] === "select") {
// 如果是select下拉框，则拼接下拉框值数据项（我们这块都是匹配的字典查询，可拓展为接口查询）
this.valueOptions[parts[0]] = {
dom: parts[1],
data: this.$options.filters["dictOption"]({
dictName: parts[2],
}),
};
// 若是下拉框，处理运算符
this.conditionOptions[parts[0]] = [{ key: "等于", val: "eq" }];
} else {
// 其他字段直接给dom属性
this.valueOptions[parts[0]] = { dom: parts[1] };
}
});
} else {
this.conditionList = [Object.assign({}, condition)];
this.keyOptions = [];
this.conditionOptions = {};
}
}
},
// 若需要前端组装给后端可使用下面方法（我这里是直接给的JSON，前端不进行组装）
generateConditionString(conditionList) {
let result = "";
if (conditionList.length === 0) return result;
const generateSubConditions = (conditions) => {
return conditions
.map((condition, index) => {
if (condition.groups && condition.groups.length > 0) {
let connectSym = condition.groups[0].operate;
return index === 0
? `(${generateSubConditions(condition.groups)})`
: ` ${connectSym} (${generateSubConditions(condition.groups)})`;
}
let value = condition.value;
if (typeof value === "string") {
if (
condition.condition === "like" ||
condition.condition === "notLike"
) {
value = `'%${value.replace(/'/g, "")}%'`;
} else {
value = `'${value.replace(/'/g, "''")}'`;
}
}
if (
!condition?.field ||
!condition?.condition ||
!condition?.value
) {
this.$message.warning("请完善规则条件配置");
return result;
}
const conditionString = `${condition.field} ${
this.operators[condition.condition]
} ${value}`;
const logicOperator = ` ${condition.operate} `;
return `${index === 0 ? "" : logicOperator}${conditionString}`;
})
.join("");
};
result = generateSubConditions(conditionList);
this.querystring = result;
return result;
},
}
}
</script>
7091
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
