66 lines
1.7 KiB
Vue
66 lines
1.7 KiB
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,
|
|
ruleForm: { picture: '' },
|
|
rules: {
|
|
picture: [{ required: true, message: '请选择画面', trigger: 'change' }]
|
|
}
|
|
};
|
|
},
|
|
computed: {
|
|
pictureList() {
|
|
return this.$store.state.map.map ? this.$store.state.map.map.pictureList : [];
|
|
}
|
|
},
|
|
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.centerDialogVisible = true;
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|