完善功能
This commit is contained in:
wangxiaowei
232
src/views/venue/scene/Add.vue
Normal file
232
src/views/venue/scene/Add.vue
Normal file
@ -0,0 +1,232 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user