条件表达式
This commit is contained in:
dong
parent
b5c0c0051d
commit
627faced59
@ -287,7 +287,7 @@ export default {
|
||||
{ label: '区段', value: 'Section' },
|
||||
{ label: '道岔', value: 'Switch' },
|
||||
{ label: '信号机', value: 'Signal' },
|
||||
{ label: '站台', value: 'Stand' },
|
||||
{ label: '站台', value: 'StationStand' }, // Stand
|
||||
{ label: '车站', value: 'Station' },
|
||||
{label:'进路', value:'Route'},
|
||||
{ label: '列车', value: 'Train' }
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
</div>
|
||||
<TrainingList ref="trainingList" @updateDetails="updateDetails" @gradeRules="gradeRules" />
|
||||
<EditDetails ref="editDetails" :edit-data="editData" @openEditOperate="openEditOperate" @handleCondition="handleCondition" @publish="publish" @preview="preview" />
|
||||
<EditCondition ref="editCondition" v-dialogDrag :materials-list="materialsList" @editConditionFn="editConditionFn" />
|
||||
<EditCondition ref="editCondition" v-dialogDrag :materials-list="materialsList" @editConditionFn="editConditionFn" @backStep="backStep" />
|
||||
<edit-operate ref="editOperate" v-dialogDrag @backStepList="backStepList" />
|
||||
<grade-rules ref="gradeRules" />
|
||||
<members-manage ref="membersManage" :is-admin="isAdmin" @addSimulationMember="addSimulationMember" /> <!-- 成员管理 -->
|
||||
@ -76,6 +76,9 @@ export default {
|
||||
editConditionFn(data, index, key) {
|
||||
this.$refs.editDetails.editConditionFn(data, index, key);
|
||||
},
|
||||
backStep() {
|
||||
this.$refs.editDetails.backStep();
|
||||
},
|
||||
handleCondition(index, row, key) {
|
||||
this.$refs.editCondition.doShow(row[key], index, key);
|
||||
},
|
||||
|
||||
@ -6,61 +6,47 @@
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog :title="title" :visible.sync="dialogVisible" :width="dialogWidth" :modal="false" :close-on-click-modal="false" :before-close="doClose" center :style="{'margin-left': dialogMarginLeft + 'px'}">
|
||||
<div @click="editValue(null, '')">
|
||||
<div>
|
||||
<Expression ref="expression" :materials-list="materialsList" @editExpression="editExpression" />
|
||||
</div>
|
||||
<el-table
|
||||
:data="tableData"
|
||||
max-height="150"
|
||||
border
|
||||
>
|
||||
<el-table-column label="条件类型" width="100px">
|
||||
<el-table-column label="条件关系">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ getConditionName(scope.row.t) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="运算符" width="100px">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.operator" size="mini" placeholder="请选择运算符">
|
||||
<el-option
|
||||
v-for="option in ConstSelect.operationList"
|
||||
:key="option.value"
|
||||
:label="option.label"
|
||||
:value="option.value"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="值1">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ getValueName(scope.row.valuables, 0) }}</span>
|
||||
<el-button size="mini" style="margin-left: 10px" @click="editValue1(scope.$index, scope.row)">编辑</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="值2">
|
||||
<template slot-scope="scope">
|
||||
<span v-show="showCondition2(scope.row.operator)">{{ getValueName(scope.row.valuables, 1) }}</span>
|
||||
<el-button size="mini" style="margin-left: 10px" :disabled="!showCondition2(scope.row.operator)" @click="editValue2(scope.$index, scope.row)">编辑</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="80px">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
|
||||
<div v-if="!scope.row.valuables[0]" class="nullDiv" @click.stop="editValue(scope.row, '0')">空</div>
|
||||
<div v-else>
|
||||
<ExpressionValue ref="ExpressionValue" :value-obj="scope.row" :index-path="scope.$index + ''" :active-index-path="activeIndexPath" @editValue="editValue" />
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="conditionBtn">
|
||||
<el-button size="small" @click="addExp">新增条件关系</el-button>
|
||||
<el-button size="small" :disabled="deleteDisabled" @click="deleteExp">删除条件关系</el-button>
|
||||
<el-button size="small" :disabled="clearDisabled" @click="clearExp">清空条件关系</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button size="small" type="primary" @click="doSave">保存</el-button>
|
||||
<el-button size="small" @click="doClose">取消</el-button>
|
||||
<el-button size="small" @click="doBackStep">返回步骤列表</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
<Expression ref="expression" v-dialogDrag :materials-list="materialsList" @editExpression="editExpression" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ConstConfig from '@/scripts/ConstConfig';
|
||||
import Expression from './expression.vue';
|
||||
import ExpressionValue from './expressionValue.vue';
|
||||
|
||||
export default {
|
||||
name: 'EditCondition',
|
||||
components:{
|
||||
ExpressionValue,
|
||||
Expression
|
||||
},
|
||||
props: {
|
||||
@ -73,31 +59,16 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogWidth: '800px',
|
||||
dialogWidth: '1000px',
|
||||
tabVisible: false,
|
||||
dialogVisible: false,
|
||||
formModel: {
|
||||
t: 'E',
|
||||
operator: 'EQ',
|
||||
valuables: []
|
||||
},
|
||||
formModel2: {
|
||||
condition1: '',
|
||||
condition2: ''
|
||||
},
|
||||
tableData: [],
|
||||
defaultProps: {
|
||||
children: 'valuables',
|
||||
label: 't'
|
||||
},
|
||||
activeIndexPath: '',
|
||||
rowIndex: 0,
|
||||
conditionKey: ''
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
ConstSelect() {
|
||||
return ConstConfig.ConstSelect;
|
||||
},
|
||||
title() {
|
||||
const keyObj = {
|
||||
triggerCondition: '编辑触发条件',
|
||||
@ -112,83 +83,131 @@ export default {
|
||||
const ml = (w - parseInt(this.dialogWidth)) / 2;
|
||||
return ml;
|
||||
},
|
||||
group() {
|
||||
return this.$route.query.group;
|
||||
deleteDisabled() {
|
||||
let s = false;
|
||||
if (!this.tableData[0] || !this.tableData[0].valuables || !this.tableData[0].valuables[0] || !this.activeIndexPath) {
|
||||
s = true;
|
||||
}
|
||||
return s;
|
||||
},
|
||||
clearDisabled() {
|
||||
let s = false;
|
||||
if (!this.tableData[0] || !this.tableData[0].valuables || !this.tableData[0].valuables[0]) {
|
||||
s = true;
|
||||
}
|
||||
return s;
|
||||
}
|
||||
},
|
||||
watch: {},
|
||||
methods: {
|
||||
showCondition2(operator) {
|
||||
addExp() {
|
||||
const data = {
|
||||
t: 'E',
|
||||
operator: 'AND',
|
||||
valuables: [this.tableData[0], {t: 'E', operator: 'EQ', valuables: [] }]
|
||||
};
|
||||
this.tableData.splice(0, 1, data);
|
||||
},
|
||||
deleteExp() {
|
||||
const arrPath = this.activeIndexPath.split('-');
|
||||
if (arrPath.length < 2) {
|
||||
this.clearExp();
|
||||
} else {
|
||||
const lastIndex = arrPath[arrPath.length - 1] == 0 ? 1 : 0;
|
||||
arrPath.pop();
|
||||
let tData = this.tableData;
|
||||
let lData = this.tableData;
|
||||
arrPath.forEach((item, index) => {
|
||||
if (index != arrPath.length - 1) {
|
||||
lData = lData[item].valuables;
|
||||
}
|
||||
if (tData[item]) {
|
||||
tData = tData[item].valuables;
|
||||
}
|
||||
});
|
||||
const data = tData[lastIndex];
|
||||
lData.splice(0, 1, data);
|
||||
}
|
||||
},
|
||||
clearExp() {
|
||||
const data = {
|
||||
t: 'E',
|
||||
operator: 'EQ',
|
||||
valuables: []
|
||||
};
|
||||
this.tableData.splice(0, 1, data);
|
||||
},
|
||||
editValue(data, indexPath) {
|
||||
this.activeIndexPath = indexPath;
|
||||
this.$refs.expression.setFormData(data, indexPath);
|
||||
},
|
||||
editExpression(data, indexPath) {
|
||||
if (!indexPath) { return; }
|
||||
const arrPath = indexPath.split('-');
|
||||
const lastIndex = arrPath[arrPath.length - 1];
|
||||
arrPath.pop();
|
||||
let tData = this.tableData;
|
||||
arrPath.forEach(index => {
|
||||
if (tData[index]) {
|
||||
tData = tData[index].valuables;
|
||||
}
|
||||
});
|
||||
tData.splice(lastIndex, 1, data);
|
||||
console.log(this.tableData, indexPath, '----');
|
||||
},
|
||||
doSave() {
|
||||
console.log('保存', this.tableData);
|
||||
let data = this.tableData[0];
|
||||
if (this.clearDisabled) {
|
||||
data = null;
|
||||
}
|
||||
console.log(this.checkData(data), '校验结果');
|
||||
if (this.checkData(data)) {
|
||||
this.$emit('editConditionFn', data, this.rowIndex, this.conditionKey);
|
||||
this.doClose();
|
||||
} else {
|
||||
this.$message.info('请编辑完整的条件关系！');
|
||||
}
|
||||
},
|
||||
checkData(data) {
|
||||
const that = this;
|
||||
function notCompleteData(obj) {
|
||||
let s = false;
|
||||
if ( !s && obj.t == 'E' && (!obj.valuables || !obj.valuables[0])) {
|
||||
s = true;
|
||||
}
|
||||
if (!s && obj.t == 'E' && !that.hasNotIs(obj.operator) && (!obj.valuables || !obj.valuables[1])) {
|
||||
s = true;
|
||||
}
|
||||
if (!s && obj.valuables && obj.valuables[0]) {
|
||||
s = notCompleteData(obj.valuables[0]);
|
||||
}
|
||||
if (!s && obj.valuables && obj.valuables[1]) {
|
||||
s = notCompleteData(obj.valuables[1]);
|
||||
}
|
||||
return s;
|
||||
}
|
||||
let s = true;
|
||||
const arr = ['NOT', 'IS'];
|
||||
if (arr.includes(operator)) {
|
||||
if (data && notCompleteData(data)) {
|
||||
s = false;
|
||||
}
|
||||
return s;
|
||||
},
|
||||
editExpression(data, index, valueIndex) {
|
||||
let tData = this.tableData;
|
||||
if (tData[index]) {
|
||||
tData = tData[index].valuables;
|
||||
hasNotIs(operator) {
|
||||
let s = false;
|
||||
const arr = ['NOT', 'IS'];
|
||||
if (arr.includes(operator)) {
|
||||
s = true;
|
||||
}
|
||||
tData.splice(valueIndex, 1, data);
|
||||
console.log(this.tableData, '----');
|
||||
},
|
||||
getConditionName(t) {
|
||||
let n = '表达式';
|
||||
const findObj = ConstConfig.ConstSelect.conditionList.find(item => {
|
||||
return item.value == t;
|
||||
});
|
||||
if (findObj) {
|
||||
n = findObj.label;
|
||||
}
|
||||
return n;
|
||||
},
|
||||
getOperatorName(o) {
|
||||
let n = '等于';
|
||||
const findObj = ConstConfig.ConstSelect.operationList.find(item => {
|
||||
return item.value == o;
|
||||
});
|
||||
if (findObj) {
|
||||
n = findObj.label;
|
||||
}
|
||||
return n;
|
||||
},
|
||||
getValueName(list, index) {
|
||||
const row = list[index] || {};
|
||||
let n = '';
|
||||
switch (row.t) {
|
||||
case 'V':
|
||||
n = `值为${row.v}`;
|
||||
break;
|
||||
case 'S':
|
||||
n = `${row.elementCode}设备的${row.filedName}属性`;
|
||||
break;
|
||||
case 'E':
|
||||
n = '';
|
||||
break;
|
||||
}
|
||||
return n;
|
||||
},
|
||||
editValue1(index, row) {
|
||||
console.log(index, row);
|
||||
this.$refs.expression.doShow(row.valuables[0], index, 0);
|
||||
},
|
||||
editValue2(index, row) {
|
||||
console.log(index, row);
|
||||
this.$refs.expression.doShow(row.valuables[1], index, 1);
|
||||
},
|
||||
handleDelete(index, row) {
|
||||
console.log(index, row);
|
||||
},
|
||||
doSave() {
|
||||
console.log('保存', this.tableData);
|
||||
this.$emit('editConditionFn', this.tableData[0], this.rowIndex, this.conditionKey);
|
||||
this.doClose();
|
||||
return s;
|
||||
},
|
||||
minisize() {
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
doBackStep() {
|
||||
this.$emit('backStep');
|
||||
this.doClose();
|
||||
},
|
||||
doShow(data, rowIndex, conditionKey) {
|
||||
this.dialogVisible = true;
|
||||
this.tabVisible = true;
|
||||
@ -205,6 +224,9 @@ export default {
|
||||
}
|
||||
this.rowIndex = rowIndex;
|
||||
this.conditionKey = conditionKey;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.expression.clearFromData();
|
||||
});
|
||||
},
|
||||
doClose() {
|
||||
this.dialogVisible = false;
|
||||
@ -240,4 +262,14 @@ export default {
|
||||
cursor: pointer;
|
||||
top:-28px;
|
||||
}
|
||||
.nullDiv {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
color: #ccc;
|
||||
}
|
||||
.conditionBtn {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -279,6 +279,10 @@ export default {
|
||||
minisize() {
|
||||
this.dialogVisible = !this.dialogVisible;
|
||||
},
|
||||
backStep() {
|
||||
this.dialogVisible = true;
|
||||
this.activeName = 'stepList';
|
||||
},
|
||||
doShow(data) {
|
||||
this.getStepList(data);
|
||||
this.dialogVisible = true;
|
||||
|
||||
@ -1,17 +1,7 @@
|
||||
<template>
|
||||
<el-dialog :title="title" :visible.sync="dialogVisible" :width="dialogWidth" :modal="false" :close-on-click-modal="false" :before-close="doClose" center :style="{'margin-left': dialogMarginLeft + 'px'}">
|
||||
<el-form ref="formModel" :model="formModel" :rules="rules" label-width="100px">
|
||||
<el-form-item label="条件类型" prop="t">
|
||||
<el-select v-model="formModel.t" placeholder="请选择条件类型" size="mini">
|
||||
<el-option
|
||||
v-for="option in conditionList"
|
||||
:key="option.value"
|
||||
:label="option.label"
|
||||
:value="option.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="showExpression" label="运算符" prop="operator">
|
||||
<div @click.stop>
|
||||
<el-form ref="formModel" :model="formModel" :rules="rules" label-width="110px">
|
||||
<el-form-item label="运算符" prop="operator">
|
||||
<el-select v-model="formModel.operator" placeholder="请选择运算符" size="mini">
|
||||
<el-option
|
||||
v-for="option in ConstSelect.operationList"
|
||||
@ -21,17 +11,18 @@
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="showDevice" label="设备类型" prop="elementCode">
|
||||
<el-select v-model="deviceType" clearable placeholder="请选择设备类型" size="mini">
|
||||
<div class="rowConditionList">
|
||||
<el-form-item label="值1类型" prop="t1">
|
||||
<el-select v-model="formModel.t1" placeholder="请选择条件类型" size="mini">
|
||||
<el-option
|
||||
v-for="option in deviceTypeList"
|
||||
v-for="option in conditionList1"
|
||||
:key="option.value"
|
||||
:label="option.label"
|
||||
:value="option.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="showDevice" label="设备" prop="elementCode">
|
||||
<el-form-item v-if="showDevice" label="值1设备" prop="elementCode">
|
||||
<el-select v-model="formModel.elementCode" clearable placeholder="请选择设备" size="mini">
|
||||
<el-option
|
||||
v-for="option in getDeviceList"
|
||||
@ -40,8 +31,9 @@
|
||||
:value="option.code"
|
||||
/>
|
||||
</el-select>
|
||||
<el-button :type="field == 'elementCode' ? 'danger' : 'primary'" size="mini" @click="hover('elementCode')">激活</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="showDevice" label="设备属性" prop="filedName">
|
||||
<el-form-item v-if="showDevice" label="值1属性" prop="filedName">
|
||||
<el-select v-model="formModel.filedName" clearable placeholder="请选择设备属性" size="mini">
|
||||
<el-option
|
||||
v-for="option in getAttributeList"
|
||||
@ -51,15 +43,36 @@
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="showValue" label="值" prop="v">
|
||||
<el-input v-model="formModel.v" size="mini" />
|
||||
</div>
|
||||
<div class="rowConditionList">
|
||||
<el-form-item v-if="showConditionList2" label="值2类型" prop="t2">
|
||||
<el-select v-model="formModel.t2" placeholder="请选择条件类型" size="mini">
|
||||
<el-option
|
||||
v-for="option in conditionList2"
|
||||
:key="option.value"
|
||||
:label="option.label"
|
||||
:value="option.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="showValue2" label="值2" prop="v">
|
||||
<el-select v-if="optionObj[valueType]" v-model="formModel.v" placeholder="请选择值" size="mini">
|
||||
<el-option
|
||||
v-for="option in optionValueType"
|
||||
:key="option.value"
|
||||
:label="option.label"
|
||||
:value="option.value"
|
||||
/>
|
||||
</el-select>
|
||||
<el-input-number v-else-if="valueType=='int'" v-model="formModel.v" size="mini" style="width: 180px" />
|
||||
<el-input v-else v-model="formModel.v" size="mini" style="width: 180px" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<el-form-item class="dialog-footer">
|
||||
<el-button size="small" type="primary" :disabled="!indexPath" @click="doSave">修改</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button size="small" type="primary" @click="doSave">确定</el-button>
|
||||
<el-button size="small" @click="doClose">取消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -77,14 +90,39 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogWidth: '400px',
|
||||
dialogVisible: false,
|
||||
rowIndex: '',
|
||||
valueIndex: 0,
|
||||
deviceTypeList: [],
|
||||
deviceType: '',
|
||||
indexPath: '',
|
||||
field: '',
|
||||
optionObj: {
|
||||
boolean: [
|
||||
{ label: '是', value: true },
|
||||
{ label: '否', value: false }
|
||||
],
|
||||
RunLevel: [
|
||||
{ label: 'cbtc级别', value: 'CBTC' },
|
||||
{ label: '点式通信', value: 'ITC' },
|
||||
{ label: '联锁级', value: 'IL' }
|
||||
],
|
||||
SignalAspect: [
|
||||
{label:'红', value:1},
|
||||
{label:'绿', value:2},
|
||||
{label:'黄', value:3},
|
||||
{label:'黄红', value:4},
|
||||
{label:'绿绿', value:5},
|
||||
{label:'绿黄', value:6},
|
||||
{label:'黄黄', value:7},
|
||||
{label:'黄闪黄', value:8},
|
||||
{label:'白红', value:9},
|
||||
{label:'蓝', value:10},
|
||||
{label:'白', value:11},
|
||||
{label:'红闪', value:12}
|
||||
]
|
||||
},
|
||||
formModel: {
|
||||
t: 'S',
|
||||
t: 'E',
|
||||
t1: 'S',
|
||||
t2: 'V',
|
||||
valuables1: '',
|
||||
valuables2: '',
|
||||
operator: 'EQ',
|
||||
elementCode: '',
|
||||
filedName: '',
|
||||
@ -96,21 +134,65 @@ export default {
|
||||
ConstSelect() {
|
||||
return ConstConfig.ConstSelect;
|
||||
},
|
||||
conditionList() {
|
||||
conditionList1() {
|
||||
return this.ConstSelect.conditionList.filter(item => {
|
||||
return item.value !== 'E';
|
||||
return item.value == 'S';
|
||||
});
|
||||
},
|
||||
conditionList2() {
|
||||
return this.ConstSelect.conditionList.filter(item => {
|
||||
return item.value == 'V';
|
||||
});
|
||||
},
|
||||
deviceType() {
|
||||
let type = '';
|
||||
const findObj = this.getDeviceList.find(item => {
|
||||
return item.code == this.formModel.elementCode;
|
||||
});
|
||||
if (findObj) {
|
||||
type = findObj._type || '';
|
||||
}
|
||||
return type;
|
||||
},
|
||||
valueType() {
|
||||
let type = '';
|
||||
const findObj = this.getAttributeList.find(item => {
|
||||
return item.name == this.formModel.filedName;
|
||||
});
|
||||
if (findObj) {
|
||||
type = findObj.type || '';
|
||||
}
|
||||
return type;
|
||||
},
|
||||
optionValueType() {
|
||||
return this.optionObj[this.valueType] || [];
|
||||
},
|
||||
mapDevice() {
|
||||
return this.$store.state.map.mapDevice;
|
||||
},
|
||||
getDeviceList() {
|
||||
if (this.deviceType == 'Route') {
|
||||
return this.getRouteList;
|
||||
}
|
||||
return Object.values(this.mapDevice).filter(item => {
|
||||
return item._type == this.deviceType;
|
||||
const typeObj = {};
|
||||
this.ConstSelect.operationDeviceList.forEach(ii => {
|
||||
typeObj[ii.value] = ii.label;
|
||||
});
|
||||
const list = [];
|
||||
Object.values(this.mapDevice).forEach(item => {
|
||||
if (typeObj[item._type]) {
|
||||
list.push({
|
||||
code: item.code,
|
||||
name: `${item.groupNumber || item.name}(${typeObj[item._type]})`,
|
||||
_type: item._type
|
||||
});
|
||||
}
|
||||
});
|
||||
this.getRouteList.forEach(item => {
|
||||
list.push({
|
||||
code: item.code,
|
||||
name: `${item.name}(进路)`,
|
||||
_type: 'Route'
|
||||
});
|
||||
});
|
||||
return list;
|
||||
},
|
||||
routeData() {
|
||||
return this.$store.state.map.routeData;
|
||||
@ -131,23 +213,17 @@ export default {
|
||||
}
|
||||
return attr;
|
||||
},
|
||||
title() {
|
||||
const t = this.$t('trainingManage.editOperationCondition');
|
||||
return t;
|
||||
},
|
||||
dialogMarginLeft() {
|
||||
const w = this.$store.state.app.width;
|
||||
const ml = (w - parseInt(this.dialogWidth)) / 2;
|
||||
return ml;
|
||||
},
|
||||
group() {
|
||||
return this.$route.query.group;
|
||||
},
|
||||
rules() {
|
||||
const crules = {
|
||||
t: [
|
||||
{ required: true, message: '请选择条件类型', trigger: 'blur' }
|
||||
],
|
||||
t1: [
|
||||
{ required: true, message: '请选择条件类型', trigger: 'blur' }
|
||||
],
|
||||
t2: [
|
||||
{ required: true, message: '请选择条件类型', trigger: 'blur' }
|
||||
],
|
||||
operator: [
|
||||
{ required: true, message: '请选择运算符', trigger: 'blur' }
|
||||
],
|
||||
@ -163,94 +239,134 @@ export default {
|
||||
};
|
||||
return crules;
|
||||
},
|
||||
showExpression() {
|
||||
let s = false;
|
||||
if (this.formModel.t == 'E') {
|
||||
s = true;
|
||||
}
|
||||
return s;
|
||||
},
|
||||
showDevice() {
|
||||
let s = false;
|
||||
if (this.formModel.t == 'S') {
|
||||
if (this.formModel.t1 == 'S') {
|
||||
s = true;
|
||||
}
|
||||
return s;
|
||||
},
|
||||
showValue() {
|
||||
let s = false;
|
||||
if (this.formModel.t == 'V') {
|
||||
s = true;
|
||||
showConditionList2() {
|
||||
let s = true;
|
||||
const arr = ['NOT', 'IS'];
|
||||
if (arr.includes(this.formModel.operator)) {
|
||||
s = false;
|
||||
}
|
||||
return s;
|
||||
},
|
||||
showValue2() {
|
||||
let s = true;
|
||||
if (!this.showConditionList2 || this.formModel.t2 != 'V') {
|
||||
s = false;
|
||||
}
|
||||
return s;
|
||||
}
|
||||
},
|
||||
watch: {},
|
||||
created() {
|
||||
this.getDeviceTypeList();
|
||||
watch: {
|
||||
'$store.state.menuOperation.selectedCount': function(val) {
|
||||
if (this.field && this.showDevice) {
|
||||
const model = this.$store.state.menuOperation.selected;
|
||||
let code = model.code;
|
||||
if (model._type == 'SignalButton') {
|
||||
code = model.signalCode;
|
||||
}
|
||||
const findObj = this.getDeviceList.find(item => {
|
||||
return item.code == code;
|
||||
});
|
||||
if (findObj) {
|
||||
this.formModel[this.field] = findObj.code;
|
||||
}
|
||||
this.field = '';
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
hover(field) {
|
||||
this.field = field == this.field ? '' : field;
|
||||
this.$emit('hover', field);
|
||||
},
|
||||
doSave() {
|
||||
this.$refs.formModel.validate(valid => {
|
||||
if (valid) {
|
||||
const cpData = {};
|
||||
cpData.t = this.formModel.t;
|
||||
if (this.showValue) {
|
||||
cpData.v = this.formModel.v;
|
||||
}
|
||||
if (this.showDevice) {
|
||||
cpData.elementCode = this.formModel.elementCode;
|
||||
cpData.filedName = this.formModel.filedName;
|
||||
}
|
||||
if (this.showExpression) {
|
||||
cpData.operator = this.formModel.operator;
|
||||
const list = [{
|
||||
t: 'V',
|
||||
v: ''
|
||||
}];
|
||||
const arr = ['NOT', 'IS'];
|
||||
if (!arr.includes(this.formModel.operator)) {
|
||||
list.splice(1, 1, {
|
||||
t: 'V',
|
||||
v: ''
|
||||
let objV1 = {
|
||||
valuables: this.formModel.valuables1.valuables || [],
|
||||
operator: this.formModel.valuables1.operator || 'EQ',
|
||||
t: this.formModel.valuables1.t || 'E'
|
||||
};
|
||||
let objV2 = {
|
||||
valuables: this.formModel.valuables2.valuables || [],
|
||||
operator: this.formModel.valuables2.operator || 'EQ',
|
||||
t: this.formModel.valuables2.t || 'E'
|
||||
};
|
||||
if (this.formModel.t1 == 'S') {
|
||||
objV1 = {
|
||||
elementCode: this.formModel.elementCode,
|
||||
filedName: this.formModel.filedName,
|
||||
t: 'S'
|
||||
};
|
||||
}
|
||||
if (this.formModel.t2 == 'V') {
|
||||
objV2 = {
|
||||
v: this.formModel.v,
|
||||
t: 'V'
|
||||
};
|
||||
}
|
||||
cpData.valuables = [objV1];
|
||||
if (this.showConditionList2) {
|
||||
cpData.valuables[1] = objV2;
|
||||
}
|
||||
console.log('编辑表达式', cpData, this.indexPath);
|
||||
this.$emit('editExpression', cpData, this.indexPath);
|
||||
}
|
||||
});
|
||||
}
|
||||
cpData.valuables = list;
|
||||
}
|
||||
this.$emit('editExpression', cpData, this.rowIndex, this.valueIndex);
|
||||
this.doClose();
|
||||
},
|
||||
doShow(data, index, valueIndex) {
|
||||
this.dialogVisible = true;
|
||||
this.rowIndex = index;
|
||||
this.valueIndex = valueIndex;
|
||||
setFormData(data, indexPath) {
|
||||
this.indexPath = indexPath;
|
||||
this.clearFromData();
|
||||
if (data) {
|
||||
const cpData = Object.assign({}, data);
|
||||
this.formModel = cpData;
|
||||
const valuables = data.valuables || [];
|
||||
this.formModel.t = data.t || '';
|
||||
this.formModel.operator = data.operator || '';
|
||||
this.formModel.valuables1 = valuables[0] || '';
|
||||
this.formModel.valuables2 = valuables[1] || '';
|
||||
if (valuables[0]) {
|
||||
this.formModel.elementCode = valuables[0].elementCode || '';
|
||||
this.formModel.filedName = valuables[0].filedName || '';
|
||||
this.formModel.t1 = valuables[0].t || 'E';
|
||||
} else {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.formModel.resetFields();
|
||||
});
|
||||
this.formModel.elementCode = '';
|
||||
this.formModel.filedName = '';
|
||||
this.formModel.t1 = 'S';
|
||||
}
|
||||
console.log(data, index, valueIndex, '---data, index, valueIndex---');
|
||||
const arr = ['NOT', 'IS'];
|
||||
if (!arr.includes(data.operator) && valuables[1]) {
|
||||
this.formModel.v = valuables[1].v;
|
||||
this.formModel.t2 = valuables[1].t;
|
||||
} else {
|
||||
this.formModel.v = '';
|
||||
this.formModel.t2 = 'V';
|
||||
}
|
||||
}
|
||||
console.log(data, indexPath, '---data, indexPath---');
|
||||
},
|
||||
doClose() {
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
getDeviceTypeList() {
|
||||
this.ConstSelect.operationDeviceList.forEach(elem => {
|
||||
this.deviceTypeList.push(elem);
|
||||
});
|
||||
clearFromData() {
|
||||
this.$refs.formModel.resetFields();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
/deep/ .el-dialog__wrapper {
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
top: auto;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
overflow: visible !important;
|
||||
}
|
||||
.rowConditionList {
|
||||
display: flex;
|
||||
}
|
||||
/deep/ .el-form-item__label {
|
||||
line-height: 28px;
|
||||
}
|
||||
/deep/ .el-form-item__content {
|
||||
line-height: 28px;
|
||||
}
|
||||
</style>
|
||||
|
||||
133
src/views/trainingManage/expressionValue.vue
Normal file
133
src/views/trainingManage/expressionValue.vue
Normal file
@ -0,0 +1,133 @@
|
||||
<template>
|
||||
<div class="mainDiv" @click.stop>
|
||||
<span v-if="valueObj.t == 'V'">
|
||||
<span>{{ valueObj.v }}</span>
|
||||
</span>
|
||||
<span v-if="valueObj.t == 'S'">
|
||||
<span>设备{{ valueObj.elementCode }}</span>
|
||||
<span>的</span>
|
||||
<span>属性{{ valueObj.filedName }}</span>
|
||||
</span>
|
||||
<div v-if="valueObj.t == 'E'" :style="{background: activeIndexPath==indexPath ? '#32f807' : ''}">
|
||||
<span> </span>
|
||||
<span v-if="hasSunExp(valueObj) && indexPath != '0'"> ( </span>
|
||||
<span v-if="!valueObj.valuables[0]">
|
||||
<span>??</span>
|
||||
</span>
|
||||
<ExpressionValue :value-obj="valueObj.valuables[0]" :index-path="indexPath+'-0'" :active-index-path="activeIndexPath" @editValue="clickExpression" />
|
||||
<span v-if="isBigExp(valueObj)" class="bigExpressionDiv">
|
||||
<el-select v-model="valueObj.operator" placeholder="请选择" size="mini" style="width: 60px">
|
||||
<el-option
|
||||
v-for="option in operationList1"
|
||||
:key="option.value"
|
||||
:label="option.label"
|
||||
:value="option.value"
|
||||
/>
|
||||
</el-select>
|
||||
</span>
|
||||
<span v-else class="expressionDiv" @click.stop="clickExpression(valueObj, indexPath)"> {{ getOperatorName(valueObj.operator) }} </span>
|
||||
<ExpressionValue v-if="!hasNotIs(valueObj.operator)" :value-obj="valueObj.valuables[1]" :index-path="indexPath+'-1'" :active-index-path="activeIndexPath" @editValue="clickExpression" />
|
||||
<span v-if="!hasNotIs(valueObj.operator) && !valueObj.valuables[1]">
|
||||
<span>??</span>
|
||||
</span>
|
||||
<span v-if="hasSunExp(valueObj) && indexPath != '0'"> ) </span>
|
||||
<span> </span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ConstConfig from '@/scripts/ConstConfig';
|
||||
export default {
|
||||
name: 'ExpressionValue',
|
||||
components:{},
|
||||
props: {
|
||||
valueObj: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {};
|
||||
}
|
||||
},
|
||||
indexPath: {
|
||||
type: String,
|
||||
default() {
|
||||
return '0';
|
||||
}
|
||||
},
|
||||
activeIndexPath: {
|
||||
type: String,
|
||||
default() {
|
||||
return '';
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
ConstSelect() {
|
||||
return ConstConfig.ConstSelect;
|
||||
},
|
||||
operationList1() {
|
||||
const arr = ['AND', 'OR'];
|
||||
return this.ConstSelect.operationList.filter(item => {
|
||||
return arr.includes(item.value);
|
||||
});
|
||||
}
|
||||
},
|
||||
watch: {},
|
||||
created() {},
|
||||
methods: {
|
||||
hasSunExp(obj) {
|
||||
let s = false;
|
||||
if (obj.valuables[0] && obj.valuables[0].t == 'E') {
|
||||
if (this.hasNotIs(obj.operator) || (obj.valuables[1] && obj.valuables[1].t == 'E')) {
|
||||
s = true;
|
||||
}
|
||||
}
|
||||
return s;
|
||||
},
|
||||
isBigExp(obj) {
|
||||
let s = false;
|
||||
if (obj.valuables[0] && obj.valuables[0].t == 'E') {
|
||||
s = true;
|
||||
}
|
||||
return s;
|
||||
},
|
||||
clickExpression(obj, path) {
|
||||
const cpData = JSON.parse(JSON.stringify(obj));
|
||||
this.$emit('editValue', cpData, path);
|
||||
},
|
||||
hasNotIs(operator) {
|
||||
let s = false;
|
||||
const arr = ['NOT', 'IS'];
|
||||
if (arr.includes(operator)) {
|
||||
s = true;
|
||||
}
|
||||
return s;
|
||||
},
|
||||
getOperatorName(o) {
|
||||
let n = '等于';
|
||||
const findObj = ConstConfig.ConstSelect.operationList.find(item => {
|
||||
return item.value == o;
|
||||
});
|
||||
if (findObj) {
|
||||
n = findObj.label;
|
||||
}
|
||||
return n;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.mainDiv {
|
||||
display: inline-block;
|
||||
}
|
||||
.expressionDiv {
|
||||
color: #ff8000;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background: #32f807;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user