rt-sim-training-client/src/views/trainingManage/expression.vue

<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">
        <el-select v-model="formModel.operator" placeholder="请选择运算符" size="mini">
          <el-option
            v-for="option in ConstSelect.operationList"
            :key="option.value"
            :label="option.label"
            :value="option.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-if="showDevice" label="设备类型" prop="elementCode">
        <el-select v-model="deviceType" clearable placeholder="请选择设备类型" size="mini">
          <el-option
            v-for="option in deviceTypeList"
            :key="option.value"
            :label="option.label"
            :value="option.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-if="showDevice" label="设备" prop="elementCode">
        <el-select v-model="formModel.elementCode" clearable placeholder="请选择设备" size="mini">
          <el-option
            v-for="option in getDeviceList"
            :key="option.code"
            :label="option.name"
            :value="option.code"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-if="showDevice" label="设备属性" prop="filedName">
        <el-select v-model="formModel.filedName" clearable placeholder="请选择设备属性" size="mini">
          <el-option
            v-for="option in getAttributeList"
            :key="option.name"
            :label="option.desc"
            :value="option.name"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-if="showValue" label="值" prop="v">
        <el-input v-model="formModel.v" size="mini" />
      </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>
</template>

<script>
import ConstConfig from '@/scripts/ConstConfig';
export default {
    name: 'Expression',
    components:{},
    props: {
        materialsList: {
            type: Array,
            default() {
                return [];
            }
        }
    },
    data() {
        return {
            dialogWidth: '400px',
            dialogVisible: false,
            rowIndex: '',
            valueIndex: 0,
            deviceTypeList: [],
            deviceType: '',
            formModel: {
                t: 'S',
                operator: 'EQ',
                elementCode: '',
                filedName: '',
                v: ''
            }
        };
    },
    computed: {
        ConstSelect() {
            return ConstConfig.ConstSelect;
        },
        conditionList() {
            return this.ConstSelect.conditionList.filter(item => {
                return item.value !== 'E';
            });
        },
        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;
            });
        },
        routeData() {
            return this.$store.state.map.routeData;
        },
        getRouteList() {
            return Object.values(this.routeData);
        },
        getAttributeList() {
            let attr = [];
            if (this.deviceType) {
                const obj = this.materialsList.find(item => {
                    return item.srcName == this.deviceType;
                });
                if (obj) {
                    attr = obj.materials;
                }
                console.log(attr, '========ppp');
            }
            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' }
                ],
                operator: [
                    { required: true, message: '请选择运算符', trigger: 'blur' }
                ],
                elementCode: [
                    { required: true, message: '请选择设备', trigger: 'blur' }
                ],
                filedName: [
                    { required: true, message: '请选择设备属性', trigger: 'blur' }
                ],
                v: [
                    { required: true, message: '请输入值', trigger: 'blur' }
                ]
            };
            return crules;
        },
        showExpression() {
            let s = false;
            if (this.formModel.t == 'E') {
                s = true;
            }
            return s;
        },
        showDevice() {
            let s = false;
            if (this.formModel.t == 'S') {
                s = true;
            }
            return s;
        },
        showValue() {
            let s = false;
            if (this.formModel.t == 'V') {
                s = true;
            }
            return s;
        }
    },
    watch: {},
    created() {
        this.getDeviceTypeList();
    },
    methods: {
        doSave() {
            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: ''
                    });
                }
                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;
            if (data) {
                const cpData = Object.assign({}, data);
                this.formModel = cpData;
            } else {
                this.$nextTick(() => {
                    this.$refs.formModel.resetFields();
                });
            }
            console.log(data, index, valueIndex, '---data, index, valueIndex---');
        },
        doClose() {
            this.dialogVisible = false;
        },
        getDeviceTypeList() {
            this.ConstSelect.operationDeviceList.forEach(elem => {
                this.deviceTypeList.push(elem);
            });
        }
    }
};
</script>
<style lang="scss" scoped>
/deep/ .el-dialog__wrapper {
	width: 1px;
	height: 1px;
	top: auto;
	right: auto;
	bottom: auto;
	left: auto;
	overflow: visible !important;
}
</style>