xiuhu-backend-store/src/views/venue/scene/Add.vue

<template>
	<el-dialog title="添加场景" :visible.sync="dialogVisible" @close="dialogFormVisible" :close-on-click-modal="false"
		:close-on-press-escape="false">
		<el-form size="small" :model="form" :rules="formRules" ref="form">
			<el-form-item label="选择场地" prop="room_id" :label-width="formLabelWidth">
				<el-select v-model="form.room_id" @change="changeGround">
          			<el-option :value="item.id" :label="item.title" :key="item.id" v-for="item in veuneList"></el-option>
				</el-select>
			</el-form-item>

			<el-form-item label="选择日期" prop="times" :label-width="formLabelWidth">
				<div class="block">
					<span class="demonstration"></span>
					<el-date-picker size="small" v-model="form.times" type="daterange"
						value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期"
						end-placeholder="结束日期"></el-date-picker>
				</div>
			</el-form-item>
			
			<el-form-item label="选择星期" :label-width="formLabelWidth">
				<el-select v-model="form.week">
          			<el-option :value="item.id" :label="item.title" :key="item.id" v-for="item in week_arr"></el-option>
				</el-select>
			</el-form-item>

			<el-form-item label="时间段" prop="times_arr" :label-width="formLabelWidth">
				<el-select v-model="form.times_arr" multiple placeholder="请选择">
					<el-option
						v-for="item in options"
						:key="item.value"
						:label="item.label"
						:value="item.value">
					</el-option>
				</el-select>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="dialogFormVisible">取 消</el-button>
			<el-button type="primary" @click="addUser" :loading="loading">确 定</el-button>
		</div>
	</el-dialog>

</template>

<script>
import PorductApi from '@/api/product.js';
import Upload from '@/components/file/Upload';
import Uediter from '@/components/UE.vue';
import VenueApi from '@/api/venue.js';

export default {
	components: {
		Upload,
		Uediter,
	},
	data() {
		return {
			/*富文本框配置*/
			ueditor: {
				text: '',
				config: {
					initialFrameWidth: 400,
					initialFrameHeight: 500
				},
			},
			selectGroundType: null,
			form: {
				room_id: '',
				times: '',
				week: '',
				times_arr:[
					'06:00-07:00',
					'07:00-08:00',
					'08:00-09:00',
					'09:00-10:00',
					'10:00-11:00',
					'11:00-12:00',
					'12:00-13:00',
					'13:00-14:00',
					'14:00-15:00',
					'15:00-16:00',
					'16:00-17:00',
					'17:00-18:00',
					'18:00-19:00',
					'19:00-20:00',
					'20:00-21:00',
					'21:00-22:00',
				],
			},
			formRules: {
				room_id: [{
					required: true,
					message: '请选择场地',
					trigger: 'blur'
				}],
				times_arr: [{
					required: true,
					message: '请选择灯光使用时段',
					trigger: 'blur'
				}],	
			},
			options: [],
			/*左边长度*/
			formLabelWidth: '120px',
			/*是否显示*/
			dialogVisible: false,
			loading: false,
			/*是否上传图片*/
			isupload: false,
			veuneList: [],
			week_arr: [
				{ id: '1', title: '周一' },
				{ id: '2', title: '周二' },
				{ id: '3', title: '周三' },
				{ id: '4', title: '周四' },
				{ id: '5', title: '周五' },
				{ id: '6', title: '周六' },
				{ id: '7', title: '周日' },
			],
		};
	},
	props: ['open_add', 'addform'],
	created() {
		this.dialogVisible = this.open_add;
		// 生成 6:00-22:00 的时间段，格式为 { value: '06:00-07:00', label: '06:00 - 07:00' }
		const start = 6, end = 22;
		this.options = [];
		for (let i = start; i < end; i++) {
			const h1 = i < 10 ? `0${i}` : `${i}`;
			const h2 = i + 1 < 10 ? `0${i + 1}` : `${i + 1}`;
			this.options.push({
				value: `${h1}:00-${h2}:00`,
				label: `${h1}:00 - ${h2}:00`
			});
		}
		this.getVeuneList()
	},
	methods: {
		// 获取场地列表-不需要分页
		getVeuneList() {
			let self = this;
			VenueApi.noPageGroundRoomList({ground_id: 1}, true)
				.then(res => {
					self.veuneList = res.data;
				})
				.catch(error => {
					self.loading = false;
				});
		},

		/*添加场景*/
		addUser() {
			let self = this;
			// 复制表单数据
			let params = { ...self.form };
			self.$refs.form.validate((valid) => {
				if (valid) {
					self.loading = true;

					if (params.times) {
						params.times = params.times.join(',');
					}

					if (!params.times && !params.week) {
						self.$message({
							message: '日期范围和星期需选择其一',
							type: 'warning'
						});
						self.loading = false;
						return
					}
					params.times_arr = params.times_arr.join(',');

					VenueApi.addScene(params).then(data => {
						self.loading = false;
						self.$message({
							message: '添加成功',
							type: 'success'
						});
						self.dialogFormVisible(true);
					}).catch(error => {
						self.loading = false;
					});
				}
			});
		},

		/*获取富文本内容*/
		contentChangeFunc(e){
			this.form.textarea1 = e;
		},

		/*关闭弹窗*/
		dialogFormVisible(e) {
			if (e) {
				this.$emit('closeDialog', {
					type: 'success',
					openDialog: false
				})
			} else {
				this.$emit('closeDialog', {
					type: 'error',
					openDialog: false
				})
			}
		},
		/*上传*/
		openUpload(e) {
			this.type = e;
			this.isupload = true;
		},
		/*获取图片*/
		returnImgsFunc(e) {
			if (e != null && e.length > 0) {
				this.file_path = e[0].file_path;
				this.form.img = e[0].file_id;
			}
			this.isupload = false;
		},

		changeGround(e) {
			this.selectGroundType = this.veuneList.find(item => item.id === e).type_id
		}
	}
};
</script>

<style>
.img {
	margin-top: 10px;
}
</style>