rt-sim-training-client/src/views/newMap/newMapdraft/mapoperate/outFrameControl.vue

<template>
  <el-tabs v-model="activeName" class="card">
    <el-tab-pane class="view-control" :label="$t('map.property')" name="first" :lazy="lazy">
      <operate-property
        ref="dataform"
        :form="form"
        :edit-model="editModel"
        :rules="rules"
        type="OutFrame"
        @updateMapModel="updateMapModel"
        @clearDeviceSelect="clearDeviceSelect"
      />
    </el-tab-pane>
    <el-tab-pane class="view-control" :label="$t('map.newConstruction')" name="second" :lazy="lazy">
      <create-operate
        ref="createForm"
        :create-form="form"
        :add-model="addModel"
        :create-rules="rules"
        @create="create"
      />
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import ConstConfig from '@/scripts/ConstConfig';
import Cookies from 'js-cookie';
import { mapGetters } from 'vuex';
import CreateOperate from './components/createOperate';
import { getUID } from '@/jmapNew/utils/Uid';
import OperateProperty from './components/operateProperty';
import { deepAssign } from '@/utils/index';

export default {
    name: 'StationStandDraft',
    components: {
        OperateProperty,
        CreateOperate
    },
    props: {
        selected: {
            type: Object,
            default: function () {
                return null;
            }
        }
    },
    data() {
        return {
            activeName: 'first',
            lazy: true,
            LineTypeList: [],
            centralizedStationList: [],
            editModel: {
                code: '',
                width: 1,
                height: 1,
                showConditions: '01',
                position: {
                    x: 0,
                    y: 0
                },
                stationCode: ''
            },
            addModel: {
                code: '',
                width: 200,
                height: 100,
                showConditions: '01',
                position: {
                    x: 0,
                    y: 0
                }
            },
            rules: {
                code: [
                    { required: true, message: this.$t('rules.pleaseSelectLine'), trigger: 'blur' }
                ],
                type: [
                    { required: true, message: this.$t('rules.pleaseSelectLineType'), trigger: 'blur' }
                ],
                width: [
                    { required: true, message: this.$t('rules.pleaseSelectLineWidth'), trigger: 'blur' }
                ]
            }
        };
    },
    computed: {
        ...mapGetters('map', [
            'outerFrameList',
            'stationList'
        ]),
        showConditionsList() {
            const showConditionsList = ConstConfig.ConstSelect.showConditionsList;
            return Cookies.get('user_lang') == 'en'
                ? showConditionsList.map(elem => { return { value: elem.value, label: elem.enlabel }; })
                : showConditionsList.map(elem => { return { value: elem.value, label: elem.label }; });
        },
        form() {
            const form = {
                labelWidth: '120px',
                items: {
                    draw: {
                        name: this.activeName == 'first' ? this.$t('map.drawData') : '',
                        item: [
                            { prop: 'code', label: this.$t('map.lineCoding'), type: 'select', optionLabel: 'code', optionValue: 'code', options: this.outerFrameList, deviceChange: this.deviceChange, isHidden:this.activeName == 'second' },
                            { prop: 'width', label: '宽度:', type: 'number', min: 1, placeholder: 'px' },
                            { prop: 'height', label: '高度:', type: 'number', min: 1, placeholder: 'px' },
                            { prop: 'showConditions', label: this.$t('map.showConditions'), type: 'radio', optionLabel: 'label', optionValue:'value', radioList: this.showConditionsList},
                            { prop: 'position', label: '坐标:', type: 'coordinate', width: '140px', children: [
                                { prop: 'position.x', firstLevel: 'position', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '20px' },
                                { prop: 'position.y', firstLevel: 'position', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '20px' }
                            ] },
                            { prop: 'stationCode', label: this.$t('map.equipmentStation') + ':', type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.centralizedStationList }
                        ]
                    }
                }
            };
            return form;
        },
        isPointsShow() {
            return this.editModel.points.length > 0;
        }
    },
    mounted() {
        this.$Dictionary.lineType().then(list => {
            this.LineTypeList = list;
        });
    },
    methods: {
        handleInit() {
            if (this.stationList && this.stationList.length) {
                this.centralizedStationList = this.stationList.filter(station=> station.centralized);
            }
        },
        deviceChange(code) {
            this.$emit('setCenter', code);
            this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
        },
        deviceSelect(selected) {
            this.handleInit();
            this.$refs.createForm && this.$refs.createForm.resetFields();
            if (selected && selected._type.toUpperCase() === 'OutFrame'.toUpperCase()) {
                this.activeName = 'first';
                this.$nextTick(()=>{
                    this.$refs.dataform && this.$refs.dataform.resetFields();
                    this.editModel = deepAssign(this.editModel, selected);
                });
            }
        },
        clearDeviceSelect() {
            this.$emit('deviceSelect', '');
        },
        addPoint(index) {
            const data = { x: 0, y: 0 };
            this.editModel.points.splice(index + 1, 0, data);
        },
        delPoint(index) {
            this.editModel.points.splice(index + 1, 0);
        },
        create() {
            const model = {
                _type: 'OutFrame',
                code: getUID('OutFrame', this.outerFrameList),
                width: this.addModel.width,
                height: this.addModel.height,
                position: this.addModel.position,
                showConditions:this.addModel.showConditions
            };
            this.$emit('updateMapModel', model);
        },
        updateMapModel(data) {
            this.$emit('updateMapModel', data);
        },
        deleteObj() {
            this.$refs.dataform.deleteObj();
        },
        // 修改对象
        edit() {
            this.$refs.dataform.edit();
        }
    }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";
	.card {
		height: 100%;
	}

    .coordinate {
        overflow: hidden;

        .title {
            text-align: right;
            font-size: 14px;
            color: #606266;
            line-height: 40px;
            padding: 0 12px 0 0;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            line-height: 28px;
            width: 120px;
            font-weight: bold;
            display: block;
            float: left;
        }
    }

    .point-section {
        float: left;
        width: calc(100% - 120px);
    }

    .point-button {
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        float: left;

        /deep/ {
            .el-icon-plus,
            .el-icon-minus {
                transform: translateY(-5px);
            }
        }
    }

    .el-input-number--mini {
        width: 110px;
    }
</style>