rt-sim-training-client/src/views/newMap/mapDraftPicture/createPicture.vue

<template>
  <el-dialog
    title="提示"
    :visible.sync="centerDialogVisible"
    width="350px"
    center
  >
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
      <el-form-item label="画面名称：" prop="name">
        <el-input v-model="ruleForm.name" />
      </el-form-item>
      <el-form-item label="画面类型：" prop="type">
        <el-select v-model="ruleForm.type" placeholder="请选择画面类型">
          <el-option label="站间透明" value="lucency" />
          <el-option label="连锁车站" value="chainStation" />
          <el-option label="大屏显示" value="bigScreen" />
          <el-option label="区域批量操作" value="regionBatchOperation" />
        </el-select>
      </el-form-item>
      <el-form-item v-if="ruleForm.type !== 'bigScreen'" label="所属车站：" prop="stationCode">
        <el-select v-model="ruleForm.stationCode" placeholder="请选择">
          <el-option
            v-for="item in stationList"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="显示风格：" prop="lineCode">
        <el-select v-model="ruleForm.lineCode" placeholder="请选择">
          <el-option v-for="item in skinCodeList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">创建</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import {mapGetters} from 'vuex';
import { saveMap } from '@/api/jmap/mapdraft';
import { getLineCodeList } from '@/api/management/mapline';
export default {
    name: 'CreatePicture',
    data() {
        return {
            centerDialogVisible: false,
            skinCodeList: [],
            ruleForm: { name: '', type: '', stationCode: '', lineCode: '' },
            rules: {
                name: [{ required: true, message: '请输入画面名称', trigger: 'blur' }],
                type: [{ required: true, message: '请选择画面类型', trigger: 'change' }],
                stationCode: [{ required: true, message: '请选择车站', trigger: 'change' }],
                lineCode: [{ required: true, message: '请选择线路', trigger: 'change' }]
            }
        };
    },
    computed: {
        ...mapGetters('map', [
            'stationList'
        ])
    },
    mounted() {
        this.skinCodeList = [];
        getLineCodeList().then(response => {
            this.skinCodeList = response.data.map(item => {
                const params = {};
                params.label = item.name;
                params.value = item.code;
                return params;
            });
        });
    },
    methods: {
        submitForm() {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    const map = this.$store.state.map.map;
                    if (map && map.pictureList && map.pictureList.length) {
                        map.pictureList.push({...this.ruleForm, deviceMap: {}, scaling: map.scaling || '1', origin: { x: map.origin ? map.origin.x : 0, y: map.origin ? map.origin.y : 0 }});
                    } else {
                        map.pictureList = [{...this.ruleForm, deviceMap: {}, scaling: map.scaling || '1', origin: { x: map.origin ? map.origin.x : 0, y: map.origin ? map.origin.y : 0 }}];
                    }
                    if (map && parseInt(this.$route.params.mapId)) {
                        saveMap(Object.assign(map, { mapId: this.$route.params.mapId })).then(() => {
                            this.$message.success('创建画面成功！');
                            this.doClose();
                        }).catch(() => {
                            this.$message.error('创建画面失败！');
                        });
                    }
                }
            });
        },
        doClose() {
            this.$refs.ruleForm.resetFields();
            this.centerDialogVisible = false;
        },
        doShow() {
            this.centerDialogVisible = true;
        }
    }
};
</script>

<style scoped>

</style>