rt-sim-training-client/src/views/system/ibpDraw/ibpOperate/ibpElevator.vue

<template>
    <div>
        <el-form ref="form" :rules="rules" :model="form" label-width="120px">
            <el-form-item :label="this.$t('ibp.escalatorCode')" prop="code">
                <el-input :disabled="true" v-model="form.code">
                    <el-button slot="append" :disabled="isUpdate" type="primary" @click="generateCode">{{$t('ibp.generateCode')}}</el-button>
                </el-input>
            </el-form-item>
            <el-form-item :label="this.$t('ibp.escalatorWidth')" prop="elevatorWidth">
                <el-input-number v-model="form.elevatorWidth" controls-position="right" :min="1"></el-input-number>
            </el-form-item>
            <el-form-item :label="this.$t('ibp.escalatorHeight')" prop="elevatorHeight">
                <el-input-number v-model="form.elevatorHeight" controls-position="right" :min="1"></el-input-number>
            </el-form-item>
            <el-form-item :label="this.$t('ibp.escalatorColor')" prop="elevatorColor">
                <el-color-picker v-model="form.elevatorColor"></el-color-picker>
            </el-form-item>
            <el-form-item :label="this.$t('ibp.startingDirection')" prop="direction">
                <el-select v-model="form.direction" placeholder="请选择启动方向">
                    <el-option :label="this.$t('ibp.doNotStart')" value="none"></el-option>
                    <el-option :label="this.$t('ibp.startUp')" value="top"></el-option>
                    <el-option :label="this.$t('ibp.startDown')" value="bottom"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item :label="this.$t('ibp.xCoordinate')">
                <el-input-number v-model="form.x" controls-position="right" :min="1"></el-input-number>
            </el-form-item>
            <el-form-item :label="this.$t('ibp.yCoordinate')">
                <el-input-number v-model="form.y" controls-position="right" :min="1"></el-input-number>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
                <el-button v-show="showDeleteButton" @click="deleteDevice" type="danger">{{$t('global.delete')}}</el-button>
                <el-button v-show="showDeleteButton" @click="initPage">{{$t('global.cancel')}}</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
    export default {
        name: 'ElevatorDraft',
        components: {
        },
        data() {
            return {
                isUpdate: false,
                buttonText: this.$t('ibp.createNow'),
                showDeleteButton: false,
                form: {
                    code: '',
                    elevatorWidth: '',
                    elevatorHeight: '',
                    elevatorColor:'',
                    direction:'none',
                    x: 10,
                    y: 10
                },
                rules: {
                    code: [
                        { required: true, message: this.$t('ibp.enterTheElevatorCode'), trigger: 'blur' },
                    ],
                    elevatorWidth: [
                        { required: true, message: this.$t('ibp.enterTheElevatorWidth'), trigger: 'blur' },
                    ],
                    elevatorHeight: [
                        { required: true, message: this.$t('ibp.enterTheElevatorHeight'), trigger: 'blur' },
                    ],
                    elevatorColor: [
                        { required: true, message: this.$t('ibp.enterTheElevatorColor'), trigger: 'change' },
                    ],
                    direction: [
                        { required: true, message: this.$t('ibp.selectTheStartingDirection'), trigger: 'change' },
                    ],
                }
            };
        },
        computed: {

        },
        watch: {
            '$store.state.ibp.rightClickCount': function (val) {
                const model = this.$store.getters['ibp/updateDeviceData'];
                if (model._type === 'Elevator' ){
                    this.buttonText = this.$t('global.modify');
                    this.showDeleteButton = true;
                    this.isUpdate = true;
                    this.form.code = model.code;
                    this.form.elevatorWidth = model.width;
                    this.form.elevatorHeight = model.height;
                    this.form.elevatorColor = model.fillColor;
                    this.form.direction = model.direction;
                    this.form.x = model.point.x;
                    this.form.y = model.point.y;
                }
            }
        },
        mounted() {
        },
        methods: {
            onSubmit(form) {
                this.$refs[form].validate((valid) => {
                    if (valid){
                        const elevatorModel = {
                            point: {
                                x: this.form.x,
                                y: this.form.y
                            },
                            _type: 'Elevator',
                            code: this.form.code,
                            width: this.form.elevatorWidth,
                            height: this.form.elevatorHeight,
                            fillColor: this.form.elevatorColor,
                            direction: this.form.direction,
                        };
                        this.$emit('createElevator', elevatorModel);
                        this.initPage();
                    } else {
                        return false;
                    }
                });

            },
            deleteDevice() {
                const elevatorModel = {
                    point: {
                        x: this.form.x,
                        y: this.form.y
                    },
                    _type: 'Elevator',
                    code: this.form.code,
                    width: this.form.elevatorWidth,
                    height: this.form.elevatorHeight,
                    fillColor: this.form.elevatorColor,
                    direction: this.form.direction,
                };
                this.$emit('deleteDataModel',elevatorModel );
                this.initPage();
            },
            initPage() {
                this.isUpdate = false;
                this.buttonText = this.$t('ibp.createNow');
                this.showDeleteButton = false;
                this.form = {
                    code: '',
                    elevatorWidth: '',
                    elevatorHeight: '',
                    elevatorColor:'',
                    direction:'none',
                    x: 10,
                    y: 10
                };
            },
            generateCode() {
                const mydate = new Date();
                this.form.code =  "elevator_"+mydate.getDay()+ mydate.getHours()+ mydate.getMinutes()+mydate.getSeconds()+mydate.getMilliseconds()+ Math.round(Math.random() * 10000);
            }
        }
    };
</script>
<style rel="stylesheet/scss" lang="scss" scoped>

</style>