rt-sim-training-client/src/views/newMap/newMapdraft/mapoperate/arrow.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="Arrow"
        @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"
        :add-model="addModel"
        :create-form="form"
        :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 getModel from './models.js';
import { getUID } from '@/jmapNew/utils/Uid';
import OperateProperty from './components/operateProperty';
import CreateOperate from './components/createOperate';
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,
            editModel:getModel('Arrow'),
            addModel: getModel('Arrow'),
            rules: {
                code: [
                    { required: true, message: this.$t('rules.pleaseSelectLine'), trigger: 'blur' }
                ],
                'position.x': [
                    { required: true, message: this.$t('rules.trainPositionX'), trigger: 'blur' }
                ],
                'position.y': [
                    { required: true, message: this.$t('rules.trainPositionY'), trigger: 'blur' }
                ]
            }
        };
    },
    computed: {
        ...mapGetters('map', [
            'arrowList'
        ]),
        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: '箭头编码', type: 'select', optionLabel: 'code', optionValue: 'code', options: this.arrowList, deviceChange: this.deviceChange, isHidden:this.activeName == 'second' },
                            { prop: 'position', label: '坐标:', type: 'coordinate', width: '120px', children: [
                                { prop: 'position.x', firstLevel: 'position', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px' },
                                { prop: 'position.y', firstLevel: 'position', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px' }
                            ] },
                            { prop: 'length', label: '长度:', type: 'number', min:1, placeholder: 'px'},
                            { prop: 'lineWidth', label: this.$t('map.lineWidth'), type: 'number', min: 1, placeholder: 'px' },
                            { prop: 'triangleLength', label: '三角长度:', type: 'number', min: 1, placeholder: 'px'},
                            { prop: 'triangleHeight', label: '三角高度:', type: 'number', min: 1, placeholder: 'px'},
                            { prop: 'color', label: '颜色:', type: 'color' },
                            { prop: 'showConditions', label: this.$t('map.showConditions'), type: 'radio', optionLabel: 'label', optionValue:'value', radioList: this.showConditionsList}
                        ]
                    }
                }
            };
            return form;
        }
    },
    methods: {
        deviceChange(code) {
            this.$emit('setCenter', code);
            this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
        },
        deviceSelect(selected) {
            this.$refs.createForm && this.$refs.createForm.resetFields();
            if (selected && selected._type.toUpperCase() === 'Arrow'.toUpperCase()) {
                this.activeName = 'first';
                this.$nextTick(()=>{
                    this.$refs.dataform && this.$refs.dataform.resetFields();
                    this.editModel = deepAssign(this.editModel, selected);
                });
            }
        },
        clear() {
            this.addModel = getModel('Arrow');
            this.$refs.createForm && this.$refs.createForm.resetFields();
        },
        clearDeviceSelect() {
            this.$emit('deviceSelect', '');
        },
        create() {
            const model = deepAssign(this.addModel, {code:getUID('Arrow', this.arrowList)});
            this.$emit('updateMapModel', model);
            this.clear();
        },
        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;*/
		position: absolute;
		left: 120px;
		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>