rt-sim-training-client/src/views/newMap/mapDraftPicture/changePicture.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="picture">
        <el-select v-model="ruleForm.picture" placeholder="请选择">
          <el-option
            v-for="item in pictureList"
            :key="item.name"
            :label="item.name"
            :value="item.name"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="changeForm()">切换</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
export default {
    name: 'CreatePicture',
    data() {
        return {
            centerDialogVisible: false,
            pictureList: [],
            ruleForm: { picture: '' },
            rules: {
                picture: [{ required: true, message: '请选择画面', trigger: 'change' }]
            }
        };
    },
    computed: {},
    methods: {
        changeForm() {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    this.$emit('pictureChanged', this.ruleForm.picture);
                    this.doClose();
                }
            });
        },
        doClose() {
            this.$refs.ruleForm.resetFields();
            this.centerDialogVisible = false;
        },
        doShow() {
            this.pictureList = this.$store.state.map.map ? this.$store.state.map.map.pictureList : [];
            this.centerDialogVisible = true;
        }
    }
};
</script>

<style scoped>

</style>