257 lines
8.0 KiB
Vue
257 lines
8.0 KiB
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>
|