条件表达式

src/scripts/ConstConfig.js

@@ -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' }

src/views/trainingManage/demonMenu.vue

@@ -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);
         },

src/views/trainingManage/editCondition.vue

@@ -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>
+              <div v-if="!scope.row.valuables[0]" class="nullDiv" @click.stop="editValue(scope.row, '0')">空</div>
-          </template>
+              <div v-else>
-        </el-table-column>
+                <ExpressionValue ref="ExpressionValue" :value-obj="scope.row" :index-path="scope.$index + ''" :active-index-path="activeIndexPath" @editValue="editValue" />
-        <el-table-column label="运算符" width="100px">
+              </div>
-          <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>
             </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: {
+            activeIndexPath: '',
-                children: 'valuables',
-                label: 't'
-            },
             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() {
+        deleteDisabled() {
-            return this.$route.query.group;
+            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 (data && notCompleteData(data)) {
-            if (arr.includes(operator)) {
                 s = false;
             }
             return s;
         },
-        editExpression(data, index, valueIndex) {
+        hasNotIs(operator) {
-            let tData = this.tableData;
+            let s = false;
-            if (tData[index]) {
+            const arr = ['NOT', 'IS'];
-                tData = tData[index].valuables;
+            if (arr.includes(operator)) {
+                s = true;
             }
-            tData.splice(valueIndex, 1, data);
+            return s;
-            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();
         },
         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>

src/views/trainingManage/editDetails.vue

@@ -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;

src/views/trainingManage/expression.vue

@@ -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'}">
+  <div @click.stop>
-    <el-form ref="formModel" :model="formModel" :rules="rules" label-width="100px">
+    <el-form ref="formModel" :model="formModel" :rules="rules" label-width="110px">
-      <el-form-item label="条件类型" prop="t">
+      <el-form-item label="运算符" prop="operator">
-        <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">
         <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">
+      <div class="rowConditionList">
-        <el-select v-model="deviceType" clearable placeholder="请选择设备类型" size="mini">
+        <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">
+      </div>
-        <el-input v-model="formModel.v" size="mini" />
+      <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">
+  </div>
-      <el-button size="small" type="primary" @click="doSave">确定</el-button>
-      <el-button size="small" @click="doClose">取消</el-button>
-    </span>
-  </el-dialog>
 </template>
 
 <script>
@@ -77,14 +90,39 @@ export default {
     },
     data() {
         return {
-            dialogWidth: '400px',
+            indexPath: '',
-            dialogVisible: false,
+            field: '',
-            rowIndex: '',
+            optionObj: {
-            valueIndex: 0,
+                boolean: [
-            deviceTypeList: [],
+                    { label: '是', value: true },
-            deviceType: '',
+                    { 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') {
+            const typeObj = {};
-                return this.getRouteList;
+            this.ConstSelect.operationDeviceList.forEach(ii => {
-            }
+                typeObj[ii.value] = ii.label;
-            return Object.values(this.mapDevice).filter(item => {
-                return item._type == this.deviceType;
             });
+            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() {
+        showConditionList2() {
-            let s = false;
+            let s = true;
-            if (this.formModel.t == 'V') {
+            const arr = ['NOT', 'IS'];
-                s = true;
+            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: {},
+    watch: {
-    created() {
+        '$store.state.menuOperation.selectedCount': function(val) {
-        this.getDeviceTypeList();
+            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 = [{
+                    let objV1 = {
-                    t: 'V',
+                        valuables: this.formModel.valuables1.valuables || [],
-                    v: ''
+                        operator: this.formModel.valuables1.operator || 'EQ',
-                }];
+                        t: this.formModel.valuables1.t || 'E'
-                const arr = ['NOT', 'IS'];
+                    };
-                if (!arr.includes(this.formModel.operator)) {
+                    let objV2 = {
-                    list.splice(1, 1, {
+                        valuables: this.formModel.valuables2.valuables || [],
-                        t: 'V',
+                        operator: this.formModel.valuables2.operator || 'EQ',
-                        v: ''
+                        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) {
+        setFormData(data, indexPath) {
-            this.dialogVisible = true;
+            this.indexPath = indexPath;
-            this.rowIndex = index;
+            this.clearFromData();
-            this.valueIndex = valueIndex;
             if (data) {
-                const cpData = Object.assign({}, data);
+                const valuables = data.valuables || [];
-                this.formModel = cpData;
+                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.formModel.elementCode = '';
-                    this.$refs.formModel.resetFields();
+                    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() {
+        clearFromData() {
-            this.dialogVisible = false;
+            this.$refs.formModel.resetFields();
-        },
-        getDeviceTypeList() {
-            this.ConstSelect.operationDeviceList.forEach(elem => {
-                this.deviceTypeList.push(elem);
-            });
         }
     }
 };
 </script>
 <style lang="scss" scoped>
-/deep/ .el-dialog__wrapper {
+	.rowConditionList {
-	width: 1px;
+		display: flex;
-	height: 1px;
+	}
-	top: auto;
+	/deep/ .el-form-item__label {
-	right: auto;
+		line-height: 28px;
-	bottom: auto;
+	}
-	left: auto;
+	/deep/ .el-form-item__content {
-	overflow: visible !important;
+		line-height: 28px;
-}
+	}
 </style>

src/views/trainingManage/expressionValue.vue

@@ -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>&nbsp;</span>
+      <span v-if="hasSunExp(valueObj) && indexPath != '0'">&nbsp;(&nbsp;</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)">&nbsp;{{ getOperatorName(valueObj.operator) }}&nbsp;</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'">&nbsp;)&nbsp;</span>
+      <span>&nbsp;</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>