<!--会所设置clubManagement.vue-->
<template>
<div>
<div class="smy-header" >
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/HelloWorld' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>会所管理</el-breadcrumb-item>
<el-breadcrumb-item>会所设置</el-breadcrumb-item>
</el-breadcrumb>
</div>
<!--1.新增会所/弹窗-->
<!--<el-button plain size="mini" @click="addNew">新增</el-button>-->
<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
<el-form >
<el-form-item>
<el-button plain size="mini" @click="addNew">新增会所</el-button>
<!--<el-button plain size="mini"@click="getAllClubs">刷新</el-button>-->
</el-form-item>
</el-form>
</el-col>
<el-dialog :visible.sync="dialogFormVisible" :close-on-click-modal="false" width="55%" >
<!--新增会所的对话框"-->
<add-club ref="addclubForm"></add-club>
<div slot="footer" class="dialog-footer">
<el-button @click="resetclubForm">取 消</el-button>
<el-button type="primary" @click="submitclubForm">提交</el-button>
</div>
</el-dialog>
<edit-club ref='editFormE' :message="clubInfo"></edit-club>
<!--
<el-dialog :visible.sync="dialogFormVisibleEdit" :close-on-click-modal="false" width="55%" >
<!--编辑会所的对话框"
<edit-club ref='editFormE'></edit-club>
<div slot="footer" class="dialog-footer">
<el-button @click='reseteditForm'>取 消</el-button>
<el-button type="primary" @click="submiteditForm">保存</el-button>
</div>
</el-dialog>
-->
<!--2.会所查询 表格显示区-->
<el-table :data="allClubs" border style="width: 100% ;" max-height="850" size="mini">
<el-table-column type="index"width="50"label="序号"></el-table-column>
<el-table-column prop="clubId" label="会所ID" align="left"></el-table-column>
<el-table-column prop="name" label="会所名称" align="left" ></el-table-column>
<el-table-column label="坐标(lat,lng)"align="left">
<el-table-column prop="latitude" label="latitude" align="left" ></el-table-column>
<el-table-column prop="longitude" label="longitude"align="left" ></el-table-column>
</el-table-column>
<el-table-column prop="address" label="地址" align="left"></el-table-column>
<el-table-column prop="profile" label="会所简介" align="left" width="600" ></el-table-column>
<el-table-column prop="telephone" label="联系电话" align="left"></el-table-column>
<el-table-column prop="status" label="状态" :formatter="formatterStatus" align="left" width="60"></el-table-column>
<el-table-column prop=""label="操作"align="left"width="245">
<template slot-scope="scope">
<el-button type="warning" plain size="mini" @click.native="modifyClub(scope.row)">编辑</el-button>
<el-button type="danger" plain size="mini" @click="delClub(scope.$index,scope.row)">删除</el-button>
<el-button type="info" plain size="mini" @click="toggleStatus(scope.$index,scope.row)">{{scope.row.status=='0'?'禁用':'恢复'}}</el-button>
<!---->
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import addClub from "./addEditForClub.vue"
import editClub from "./editForClub.vue"
export default{
name:'clubManagement',
components:{addClub,editClub},
data(){
return{
// editFormData:{
// clubId:'',
// name:'',
// photos:[],//
// // listObj: {},
// files: [],//整个上传的文件
// imgURL:[],//文件中本地照片的地址src
files:null,//8照
// // dialogImageUrl: '',//el-updown
// addressImage:null,//单张截图的
// characteristic:[],//经营特色
// maxPeople:0,
// address:'',
// longitude:0,
// latitude:0,
// area:'',
// profile:'',
// telephone:'',
// status:''
// },
// functionalZoneIdsE:[],
clubInfo:{
clubNameChuzhi:'',
clubId:''
},
allClubs:[],//读取会所数据
// childData:{
// title:'',
// oneClub:{},
// fatherForm:null,
// },//新增会所/修改会所
// dialogTableVisible: false,
dialogFormVisible: false,
// dialogFormVisibleEdit:false,
// form: {
// name: '',
// region: '',
// date1: '',
// date2: '',
// delivery: false,
// type: [],
// resource: '',
// desc: ''
// },
// formLabelWidth: '120px'
//
}
},
methods:{//http://192.168.10.15:8084/club/100/getAllClubs managerId=100 /club/${this.$root.managerId}/getAllClubs
getAllClubs(){
let that=this;
that.axios.get("/club/"+this.$root.managerId+"/getAllClubs").then((res)=>{
that.allClubs=res.data;
console.log(that.allClubs);
for(var i=0;i< that.allClubs.length;i++){//需要解决点击事件重复上次编辑的问题
that.allClubs[i].characteristic= that.allClubs[i].characteristic.split(',');
// for(var j=0;j<that.allClubs[i].functionalZoneSets.length;j++){
// that.allClubs[i].functionalZoneNames=that.allClubs[i].functionalZoneNames.push(that.allClubs[i].functionalZoneSets[j].functionalZoneName)
// }
// that.allClubs[i].files=[i];
// that.allClubs[i].imgURL=[i];
// if(that.allClubs[i].characteristic.constructor !== Array){
// that.allClubs.characteristic= that.allClubs.characteristic.split(',');}
}
}).catch((error)=>{console.log(error)})
},
//新增会所
addNew(){
let that = this;
// that.title="新增会所";
that.dialogFormVisible = true;
// that.form="";
// that.form.characteristic=that.form.characteristic.split(',');
},
//提交新增会所并关闭弹窗
submitclubForm(){
this.$refs.addclubForm.addNewClub('addclubForm',event);
// this.dialogFormVisible = false;
},
//取消新增会所并关闭
resetclubForm(){
this.$refs.addclubForm.resetForm('addclubForm');
this.dialogFormVisible = false;
this.getAllClubs();
},
// handleClose(done) {
// this.$confirm('确认关闭？')
// .then(_ => {
// done();
// })
// .catch(_ => {});
// }
//
//修改会所
modifyClub(row) {
this.$refs.editFormE.dialogFormVisibleEdit = true;
this.$set(row,"files",[]);
this.$set(row,"imgURL",[]);
this.$set(row,"functionalZoneIdsE",[]);
for(var i=0;i<row.functionalZoneSets.length;i++){
row.functionalZoneIdsE.push(row.functionalZoneSets[i].functionalZoneId)
}
console.log(row.functionalZoneIdsE)
// this.editFormData=row;
console.log(row);
this.$refs.editFormE.editForm=row;
this.clubInfo.clubNameChuzhi=row.name;
this.clubInfo.clubId=row.clubId;
// this.$refs.editFormE.$refs[editForm].resetFields();
// this.$refs.editFormE.editForm.files=[];
// this.$refs.editFormE.editForm.imgURL=[];
// this.$refs.editFormE.editForm.characteristic=this.$refs.editFormE.editForm.characteristic.split(',')
// for(var i=0;i< row.length;i++){
// row[i].characteristic=row[i].characteristic.split(',');
//
// }
console.log(this.editFormData)
// console.log(this.$refs.editFormE.editForm)
},
/*
submiteditForm(){
this.$refs.editFormE.editClub('editForm',event);
},
reseteditForm(){
// this.$refs.editForm.resetedit('editForm');
this.dialogFormVisibleEdit = false;
},
*/
delClub(index,row){
console.log(row);
let that=this;
let delClubId =row.clubId;
console.log(delClubId);
that.$confirm('确认删除该会所吗?', '提示', {
type: 'warning'
}).then(() => {
console.log("xibmian"+delClubId);
that.axios.delete('/club/100/deleteClub/'+delClubId).then((res) => {
that.$message({
message: '删除成功',
type: 'success'
});
that.getAllClubs();
});
}).catch(() => {
});
},
formatterStatus(row, column) {//后台为status：0 或1，转化成 显示为 汉字
console.log(66666666+row)
switch(row.status){
case "0":
return '正常';
break;
case "1":
return '禁用';
break;
}
},
toggleStatus(index,row) {///club/{managerId}/forbidClub/{clubId} status
let that=this;
let curClubId =row.clubId;
let status=row.status;
status=status=='0'? '1':'0';
that.$confirm('确认更改状态吗?', '提示', {
type: 'warning'
}).then(() => {
console.log("bmian"+status);
that.axios.get('/club/100/forbidClub/'+curClubId, {
params: {
status:status
}
}).then((res) => {
console.log("xibmian"+status);
that.$message({
message: '更改状态成功',
type: 'success'
});
that.getAllClubs();
});
}).catch(() => {
});
console.log(status);
},
},
created(){
let that=this;
that.getAllClubs();
},
mounted(){
},
watch:{}
}
</script>
<style scoped="scoped">
/*.el-table .cell {
-webkit-box-sizing: border-box;
box-sizing: border-box;
white-space: normal;
word-break: break-all;
height: 23px;
overflow: auto;
line-height: 23px;
}*/
</style>
<!--新增、编辑弹框使用addEditForClub.vue
functional-zone-controller : Functional Zone Controller
查询所有功能区GET /functionalZone/{managerId}/getAllFunctionalZone
-->
<template>
<div>
<!--ref="form" :model="form"-->
<div>新增会所</div>
<!--修改是得到一行对象 this.addormdo.oneClub --> <!-- before-close="handleClose"-->
<el-dialog
width="55%"
title="地图显示层"
:visible.sync="innerVisible"
append-to-body>
<div >
<ali-map v-on:saveMap="saveMapData" ></ali-map>
</div>
<!--<span slot="footer" class="dialog-footer">
<el-button @click="innerVisible=false">关闭</el-button>-->
<!--<el-button type="primary" @click="dialogVisible = false">确 定</el-button>-->
<!-- </span>-->
</el-dialog>
<!-- <ali-map v-on:saveMap="saveMapData" ref="aliM"></ali-map>-->
<el-form label-width="100px" size="mini" ref="addclubForm" :model="addclubForm" :rules="rules">
<el-form-item label="ID" prop="clubId" >
<el-input v-model="addclubForm.clubId" placeholder="只读：此处不需操作" readonly></el-input>
</el-form-item>
<el-form-item label="名称" prop="name">
<el-input v-model="addclubForm.name" ></el-input>
</el-form-item>
<!--这个地方 可能需要改v-model="form.files" 因为是formData格式-->
<el-form-item label="照片" prop="files">
<el-col style="margin :0px auto; width:800px;float: left;">
<div id="dd" style=" width:800px;float: left;">
<div style='float: left;margin-top: 10px;position:relative;' v-for="(item,index) in addclubForm.imgURL">
<img style= 'width:160px;height:130px;margin:5px;border-radius:5px;' :src="addclubForm.imgURL[index]" />
<el-button icon='el-icon-error' size='mini'style='position: absolute;right:10px;top:10px' @click='delpotho(index)'></el-button>
</div>
<div v-if="addclubForm.imgURL.length<8" href="javascript:;" class="a-upload">
<input type="file" multiple="multiple" ref='file1' enctype="multipart/form-data" id="input" name="files" @change="changeFile($event)" accept="image/*" />
<el-button icon="el-icon-plus" type="text" ></el-button>
</div>
</div>
</el-col>
<!-- <input type="file" id="file" ref='file1' multiple="multiple" @change="changeFile($event)"></input>-->
<!--<el-upload class="editor-slide-upload" action="http://192.168.10.15:8084/club/100/addClub" :limit='3' :multiple="true" :file-list="files" :show-file-list="true"
list-type="picture-card" :on-remove="handleRemove" :on-success="handleSuccess" :before-upload="beforeUpload">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
-->
</el-form-item>
<el-form-item label="经营特色" prop="characteristic">
<el-checkbox-group v-model="addclubForm.characteristic" >
<el-checkbox label="动感单车" name="characteristic"style="margin-left:0;margin-right: 5px;" border></el-checkbox>
<el-checkbox label="有氧器械"name="characteristic" style="margin-left:0;margin-right: 5px;"border></el-checkbox>
<el-checkbox label="阻力器械"name="characteristic" style="margin-left:0;margin-right: 5px;"border></el-checkbox>
<el-checkbox label="有氧操房" name="characteristic" style="margin-left:0;margin-right: 5px;"border></el-checkbox>
<el-checkbox label="瑜伽"name="characteristic"style="margin-left:0;margin-right: 5px;"border></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="功能区配置" prop="functionalZoneNames">
<el-checkbox-group v-model="addclubForm.functionalZoneNames" >
<el-checkbox v-for="(item,index) in functionalZoneNamesObj" :label="item" :key="index" name="functionalZoneNames"style="margin-left:0;margin-right: 5px;" border ></el-checkbox>
<!--<el-checkbox label="备选项1" name="functionalZoneNames" style="margin-left:0;margin-right: 5px;" border></el-checkbox>
<el-checkbox label="备选项2" name="functionalZoneNames" style="margin-left:0;margin-right: 5px;" border></el-checkbox>
<el-checkbox label="备选项1" name="functionalZoneNames" style="margin-left:0;margin-right: 5px;" border></el-checkbox>
<el-checkbox label="备选项2" name="functionalZoneNames" style="margin-left:0;margin-right: 5px;" border></el-checkbox>
<el-checkbox label="备选项1" name="functionalZoneNames" style="margin-left:0;margin-right: 5px;" border></el-checkbox>
<el-checkbox label="备选项2" name="functionalZoneNames" style="margin-left:0;margin-right: 5px;" border></el-checkbox>
<el-checkbox label="备选项1" name="functionalZoneNames" style="margin-left:0;margin-right: 5px;" border></el-checkbox>
<el-checkbox label="备选项2" name="functionalZoneNames" style="margin-left:0;margin-right: 5px;" border></el-checkbox>
<el-checkbox label="备选项1" name="functionalZoneNames" style="margin-left:0;margin-right: 5px;" border></el-checkbox>
<el-checkbox label="备选项2" name="functionalZoneNames" style="margin-left:0;margin-right: 5px;" border></el-checkbox>
<el-checkbox label="备选项1" name="functionalZoneNames" style="margin-left:0;margin-right: 5px;" border></el-checkbox>
<el-checkbox label="备选项2" name="functionalZoneNames" style="margin-left:0;margin-right: 5px;" border></el-checkbox>-->
</el-checkbox-group>
</el-form-item>
<!--这个地方需要处理数据格式为 正整数 -->
<el-form-item label="人数限制" prop="maxPeople">
<el-input v-model.number="addclubForm.maxPeople" ></el-input>
</el-form-item>
<!--传入后台需要拆分成longitude latitude -->
<el-form-item label="坐标">
<el-input type="text" v-model.number="addclubForm.longitude" prop="longitude" style="width:40%" placeholder="只读：此处不需操作" readonly></el-input>
<el-input type="text" v-model.number="addclubForm.latitude" prop="latitude" style="width:40%" placeholder="只读：此处不需操作" readonly></el-input>
<el-button size="mini" @click="openAli">地图</el-button>
</el-form-item>
<el-form-item label="地址" prop="address">
<el-input type="text" v-model="addclubForm.address" ></el-input>
</el-form-item>
<el-form-item label="所属区域" prop="area">
<el-input type="text" v-model="addclubForm.area"></el-input>
</el-form-item>
<!-- addressImage 的对象一张 -->
<el-form-item label="地图截图" prop="addressImage">
<input type="file" ref="file2" name="addressImage" @change="changeFile2($event)"></input>
<!--<el-card class="class-box " prop="addressImage">
<div style="text-align: center">
<el-input type="file" @chang="getFile2($event)"></el-input>
</div>
</el-card>-->
</el-form-item>
<el-form-item label="会所简介" prop="profile">
<el-input type="textarea" v-model="addclubForm.profile"></el-input>
</el-form-item>
<el-form-item label="联系电话" prop="telephone">
<el-input type="text" v-model="addclubForm.telephone"></el-input>
</el-form-item>
<el-form-item label="状态" prop="status">
<!-- <el-input type="text" v-model="form.status"></el-input>-->
<!--<el-switch v-model="form.status" active-text="正常" inactive-text="禁用">
</el-switch>-->
<el-select v-model="addclubForm.status" placeholder="请选择经营状态">
<el-option label="正常" value="0"></el-option>
<el-option label="禁用" value="1"></el-option>
</el-select>
</el-form-item>
<!--<el-form-item>
<el-button type="primary" @click="addNewClub('addclubForm',$event)" >提交</el-button>
<el-button @click="resetForm('addclubForm')">重置</el-button>
</el-form-item>-->
</el-form>
</div>
</template>
<script>
import aliMap from './aliMap.vue'
export default{
name:'addClub',
components:{aliMap},
data(){
//验证
var checkName=(rule,value,callback)=>{///club/{managerId}/getClubByName/{clubName}
if (!value) {
return callback(new Error('名称不能为空'));
}else {
this.getClubByName(value);
if(this.validclubname===false){
return callback(new Error('名称已存在，请重新编辑'));
}else{
callback();
}
callback();
}
};
// var checkFiles=(rule,value,callback)=>{
// if (!value) {
// return callback(new Error('照片不能为空，请选择1~8张照片'));
// }
//
// dd.innerHTML += "<div style='float: left;margin-top: 10px;' > <img id='img" + i + "' style= 'width:160px;height:130px;margin:5px;borderRadius:5px;' src='docObj.files[i]' /><el-button size="mini" type="default" icon="el-icon-remove"></el-button> </div>";
// };
var checkMaxPeople=(rule,value,callback)=>{
if (!value) {
return callback(new Error('人数限制不能为空'));
}
setTimeout(() => {
if (!Number.isInteger(value)) {
callback(new Error('请输入数字值'));
} else {
if (value < 1) {
callback(new Error('必须至少为1'));
} else if(value >20){
callback(new Error('必须小于20'));
}
else {
callback();
}
}
}, 1000);
// callback();
};
var checkProfile=(rule,value,callback)=>{
if (!value) {
return callback(new Error('会所简介不能为空'));
}
// setTimeout(() => {
if (value.length>=300) {
callback(new Error('请300字符以内'));
} else {
callback();
}
// }, 1000);
callback();
};
var checkTelephone=(rule,value,callback)=>{
//var mobile =/^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
var tel= /^0\d{2,3}-\d{7,8}$/;
if ((!tel.test(value))) {
return callback(new Error('请填写正确联系电话)'));
}else{
callback();
}
};
var checkCharacteristic=(rule,value,callback)=>{
if (value.length==0) {
return callback(new Error('请至少选择一个经营特色'));
}
callback();
};
return{
functionalZoneNamesObj:[],//功能区名称
innerVisible: false,
validclubname:'',//会所重名返回false
// ClubByName:{},//新增时通过会所名字查询的会所对象
addclubForm:{
clubId:'',
name:'',
// photos:[],
// listObj: {},
files: [],//整个上传的文件
imgURL:[],//文件中照片的地址src
// files:null,//8照
// dialogImageUrl: '',//el-updown
addressImage:null,//单张截图的
characteristic:[],//经营特色
functionalZoneNames:[],
maxPeople:0,
address:'',
longitude:0,
latitude:0,
area:'',
profile:'',
telephone:'',
status:''
},
//验证rules
rules:{
name:[{validator: checkName, trigger: 'blur change'}],
// files: [{validator: checkFiles, trigger: 'blur'}],
// characteristic:[{ type: 'array', message: '请至少选择一个经营特色', trigger: 'change'}],
characteristic:[{validator: checkCharacteristic, trigger: 'change'}],
maxPeople:[{validator: checkMaxPeople, trigger: 'blur'}],
profile:[{validator: checkProfile, trigger: 'change'}],
telephone:[{validator: checkTelephone, trigger: 'blur change'}],
},
dialogVisible: false,
//8张照片的
// dialogVisible: false
}
},
methods:{
// handleClose(done) {
// this.$confirm('确认关闭？')
// .then(_ => {
// done();
// })
// .catch(_ => {});
// },
//8张照片el-updown
// handleRemove(file, fileList) {
// console.log(file, fileList);
// this.files=fileList;
// },
// handlePictureCardPreview(file) {
// this.dialogImageUrl = file.url;
// this.dialogVisible = true;
// },
// handchange(file, fileList) {
// console.log(file, fileList);
// this.files=fileList;
// },
openAli(){
this.innerVisible = true;
},
//changeFile(event){
// this.addclubForm.files=event.target.files[0];
// console.log(this.addclubForm.files)
//},
changeFile(event){//这个需要定义files:[]
//var files = document.getElementById("input").files;
// console.log(files);
// console.log(input.files[0]);
var files=event.srcElement.files;
console.log(event.srcElement.files);
this.addclubForm.files.push(files[0]);
console.log("files"+this.addclubForm.files);
//for(var i=0;i<files.length;i++){
this.addclubForm.imgURL.push(window.URL.createObjectURL(files[0]));//}
console.log(this.addclubForm.imgURL);
},
delpotho(index){
debugger
this.addclubForm.files.splice(index,1);
this.addclubForm.imgURL.splice(index,1);
},
// checkAllSuccess() {
// return Object.keys(this.listObj).every(item => this.listObj[item].hasSuccess)
// },
// handleSubmit() {
// const arr = Object.keys(this.listObj).map(v => this.listObj[v])
// if (!this.checkAllSuccess()) {
// this.$message('请等待所有图片上传成功 或 出现了网络问题，请刷新页面重新上传！')
// return
// }
// console.log(arr)
// this.$emit('successCBK', arr)
// this.listObj = {}
// this.files = []
// this.dialogVisible = false
// },
// handleSuccess(response, file) {
// const uid = file.uid
// const objKeyArr = Object.keys(this.listObj)
// for (let i = 0, len = objKeyArr.length; i < len; i++) {
// if (this.listObj[objKeyArr[i]].uid === uid) {
// this.listObj[objKeyArr[i]].url = response.files.file
// this.listObj[objKeyArr[i]].hasSuccess = true
// return
// }
// }
// },
// handleRemove(file) {
// const uid = file.uid
// const objKeyArr = Object.keys(this.listObj)
// for (let i = 0, len = objKeyArr.length; i < len; i++) {
// if (this.listObj[objKeyArr[i]].uid === uid) {
// delete this.listObj[objKeyArr[i]]
// return
// }
// }
// },
// beforeUpload(file) {
// const _self = this
// const _URL = window.URL || window.webkitURL
// const fileName = file.uid
// this.listObj[fileName] = {}
// return new Promise((resolve, reject) => {
// const img = new Image()
// img.src = _URL.createObjectURL(file)
// img.onload = function() {
// _self.listObj[fileName] = { hasSuccess: false, uid: file.uid, width: this.width, height: this.height }
// }
// resolve(true)
// })
// },
//
changeFile2(event){
// event.cancelBubble = true;//高版本浏览器
this.addclubForm.addressImage=event.target.files[0];
console.log(this.addclubForm.addressImage);
// event.target.value="";
},
//从地图按钮 取的的地图数据
saveMapData(data){
let that=this;
that.addclubForm.address=data.input1;
that.addclubForm.longitude=data.input2;
that.addclubForm.latitude=data.input3;
that.addclubForm.area=data.input1.substring(0,data.input1.indexOf("区")+1);
that.innerVisible=data.innerVisible;
},
//提交表单
addNewClub(addclubForm,event) {///club/{managerId}/addClub 新增的 ///club/{managerId}/updateClub/{clubId} 修改的
//验证结果是否通过，通过即提交
var that =this;
that.$refs[addclubForm].validate((valid) => {
if (valid) {
let formData=new FormData();
for(var i=0;i<this.addclubForm.files.length;i++){
formData.append('files',this.addclubForm.files[i]);
}//照片
// formData.append('files',this.addclubForm.files);
// handleSubmit();
formData.append('addressImage',this.addclubForm.addressImage);//地图截图的
that.axios.post('club/100/addClub', formData,{
params: {
name:that.addclubForm.name,//会所名称
characteristic:that.addclubForm.characteristic.join(','),//经营特色
functionalZoneNames:that.addclubForm.functionalZoneNames.join(','),//[{"跑步机房"}],
maxPeople:that.addclubForm.maxPeople,//最大人数
address:that.addclubForm.address,//会所地址
longitude:that.addclubForm.longitude,//经纬度
latitude:that.addclubForm.latitude,//
area:that.addclubForm.area,//所在区域
profile:that.addclubForm.profile,//会所简介
telephone:that.addclubForm.telephone,//联系电话
status:that.addclubForm.status,//状态
}
})
.then((res)=>{
that.$message({
message: "添加会所成功！",
type: "success"
});
// that.addclubForm.name='';
// that.addclubForm.characteristic=[];
// that.addclubForm.maxPeople=0;
// that.addclubForm.address='';
// that.addclubForm.longitude=0;
// that.addclubForm.latitude=0;
// that.addclubForm.profile='';
// that.addclubForm.area='';
// that.addclubForm.telephone='';
// that.addclubForm.status='';
// formData=null;
// that.addclubForm.files=null;
// that.addclubForm.addressImage=null;
that.addclubForm.files=[];
that.addclubForm.imgURL=[];
that.$refs.file2.value="";
that.resetForm(addclubForm);
}).catch(function (error) {
console.log(error);
});
} else {
console.log('error submit!!');
return false;
}
});
// event.target.value="";
// that.axios.post('club/100/addClub', that.form, {
// headers: {
// 'Content-Type': 'application/x-www-form-urlencoded'
// }
// })
// .then(function (response) {
// console.log(response);
// })
// .catch(function (error) {
// console.log(error);
// });
// that.$parent.$parent.getAllClubs(); //还不能够刷新本页面？？？
},
//根据名字获取返回true或false GET /club/{managerId}/getClubByName/{clubName}
getClubByName(valueclub){
let that=this;
that.axios.get("/club/100/getClubByName/"+valueclub).then((res)=>{
that.validclubname=res.data;
}).catch((error)=>{console.log(error)});
},
resetForm(addclubForm) {
let that=this;
that.$refs[addclubForm].resetFields();
that.addclubForm.name='';
that.addclubForm.characteristic=[];
that.addclubForm.functionalZoneNames=[];
that.addclubForm.maxPeople=0;
that.addclubForm.address='';
that.addclubForm.longitude=0;
that.addclubForm.latitude=0;
that.addclubForm.profile='';
that.addclubForm.area='';
that.addclubForm.telephone='';
that.addclubForm.status='';
},
getAllFunctionalZone(){//查询所有功能区 /functionalZone/{managerId}/getAllFunctionalZone
this.axios.get('/functionalZone/100/getAllFunctionalZone').then((res)=>{
var functionalZoneObjs=res.data;
for(var i=0;i<functionalZoneObjs.length;i++){
this.functionalZoneNamesObj.push(functionalZoneObjs[i].functionalZoneName)
}
console.log(this.addclubForm.functionalZoneNames)
}).catch((error)=>{console.log(error)})
}
},
created(){
this.getAllFunctionalZone();
},
mounted(){
},
watch:{
// this.form={};
// this.form=this.addormdo.oneClub;
// console.log(this.form)
}
}
</script>
<style scoped>
.add-class.class-box.el-card {
display: flex;
height: 200px;
box-sizing: border-box;
width: 202px;
border-style: dashed;
border-color: #409eff;
}
.add-class /deep/ .el-card__body {
margin: auto;
}
.add-class /deep/ .el-icon-circle-plus-outline {
font-size: 40px;
}
.a-upload {
float: left;
padding: 4px 70px;
height: 123px;
line-height: 123px;
position: relative;
cursor: pointer;
color: white;
background: white;
border: 3px dotted #ddd;
border-radius: 4px;
overflow: hidden;
display: inline-block;
*display: inline;
margin: 15px;
*zoom: 1;
text-decoration: none;
}
.a-upload input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
filter: alpha(opacity=0);
cursor: pointer
}
.a-upload:hover {
color: white;
background:#CCCCCC;
border-color: #ccc;
text-decoration: none
}
</style>
<!--新增、编辑弹框使用editForClub.vue-->
<template>
<div>
<!--ref="form" :model="form"-->
<el-dialog :visible.sync="dialogFormVisibleEdit" :close-on-click-modal="false" width="55%" >
<div>修改会所</div>
<!--修改是得到一行对象 this.addormdo.oneClub --> <!-- before-close="handleClose"-->
<el-dialog
width="55%"
title="地图显示层"
:visible.sync="innerVisible"
append-to-body>
<div >
<ali-map v-on:saveMap="saveMapData"></ali-map>
</div>
<!--<span slot="footer" class="dialog-footer">
<el-button @click="innerVisible=false">关闭</el-button>-->
<!--<el-button type="primary" @click="dialogVisible = false">确 定</el-button>-->
<!-- </span>-->
</el-dialog>
<el-form label-width="100px" size="mini" ref="editForm" :model="editForm" :rules="rules">
<el-form-item label="ID" prop="clubId" >
<el-input v-model="editForm.clubId" placeholder="只读：此处不需操作" readonly></el-input>
</el-form-item>
<el-form-item label="名称" prop="name">
<el-input v-model="editForm.name"></el-input>
</el-form-item>
<el-form-item label="照片" style="display: inline-block;width:800px;">
<el-form-item >
<div style=" width:800px;">
<div style='float: left;margin-top: 10px;position:relative;' v-for="(item,index) in editForm.photos" :key="index">
<img style= 'width:160px;height:130px;margin:5px;border-radius:5px;' :src="item.url_s" />
<el-button icon='el-icon-error' size='mini'style='position: absolute;right:10px;top:10px' @click='delpotho(index)'></el-button>
</div>
<div style='float: left;margin-top: 10px;position:relative;' v-for="(item,index) in editForm.imgURL" :key="index">
<img style= 'width:160px;height:130px;margin:5px;border-radius:5px;' :src="editForm.imgURL[index]" />
<el-button icon='el-icon-error' size='mini'style='position: absolute;right:10px;top:10px' @click='removepotho(index)'></el-button>
</div>
<div v-if="(editForm.imgURL.length+editForm.photos.length)<8" href="javascript:;" class="a-upload">
<input type="file" multiple="multiple" ref='file1' enctype="multipart/form-data" id="input" name="files" @change="changeFile($event)" accept="image/*" />
<el-button icon="el-icon-plus" type="text" ></el-button>
</div>
</div>
</el-form-item>
</el-form-item>
<el-form-item label="经营特色" prop="characteristic">
<el-checkbox-group v-model="editForm.characteristic" >
<el-checkbox label="动感单车" name="characteristic"style="margin-left:0;margin-right: 5px;" border></el-checkbox>
<el-checkbox label="有氧器械"name="characteristic"style="margin-left:0;margin-right: 5px;" border></el-checkbox>
<el-checkbox label="阻力器械"name="characteristic"style="margin-left:0;margin-right: 5px;" border></el-checkbox>
<el-checkbox label="有氧操房" name="characteristic"style="margin-left:0;margin-right: 5px;" border></el-checkbox>
<el-checkbox label="瑜伽"name="characteristic"style="margin-left:0;margin-right: 5px;" border></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="功能区配置" prop="functionalZoneNames">
<el-checkbox-group v-model="editForm.functionalZoneIdsE" >
<el-checkbox v-for="(item,index) in functionalZoneNamesObj" :label="item.functionalZoneId" :key="index" name="functionalZoneIds"style="margin-left:0;margin-right: 5px;" border >{{item.functionalZoneName}}</el-checkbox>
</el-checkbox-group>
</el-form-item>
<!--这个地方需要处理数据格式为 正整数 -->
<el-form-item label="人数限制" prop="maxPeople">
<el-input v-model.number="editForm.maxPeople" ></el-input>
</el-form-item>
<!--传入后台需要拆分成longitude latitude -->
<el-form-item label="坐标">
<el-input type="text" v-model.number="editForm.longitude" prop="longitude" style="width:40%" placeholder="只读：此处不需操作" readonly></el-input>
<el-input type="text" v-model.number="editForm.latitude" prop="latitude" style="width:40%" placeholder="只读：此处不需操作" readonly></el-input>
<el-button size="mini" @click="innerVisible = true">地图</el-button>
</el-form-item>
<el-form-item label="地址" prop="address">
<el-input type="text" v-model="editForm.address" ></el-input>
</el-form-item>
<el-form-item label="所属区域" prop="area">
<el-input type="text" v-model="editForm.area"></el-input>
</el-form-item>
<!-- addressImage 的对象一张 -->
<el-form-item label="地图截图" prop="addressImage">
<input type="file" @change="getFile2($event)"></input>
<!--<el-card class="class-box " prop="addressImage">
<div style="text-align: center">
<el-input type="file" @chang="getFile2($event)"></el-input>
</div>
</el-card>-->
</el-form-item>
<el-form-item label="会所简介" prop="profile">
<el-input type="textarea" v-model="editForm.profile"></el-input>
</el-form-item>
<el-form-item label="联系电话" prop="telephone">
<el-input type="text" v-model="editForm.telephone"></el-input>
</el-form-item>
<el-form-item label="状态" prop="status">
<!-- <el-input type="text" v-model="form.status"></el-input>-->
<!--<el-switch v-model="form.status" active-text="正常" inactive-text="禁用">
</el-switch>-->
<el-select v-model="editForm.status" placeholder="请选择经营状态">
<el-option label="正常" value="0"></el-option>
<el-option label="禁用" value="1"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<!--<el-button type="primary" @click="eiditClub('editForm',$event)" >提交</el-button>
<el-button @click="resetForm('editForm')">重置</el-button>-->
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<!--<el-button @click='reseteditForm'>取 消</el-button>
<el-button type="primary" @click="submiteditForm">保存</el-button>-->
<el-button @click="resetedit('editForm')">取 消</el-button>
<el-button type="primary" @click="editClub('editForm',$event)">保存</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import aliMap from './aliMap.vue'
export default{
name:'editClub',
components:{aliMap},
props: ['message'],
data(){
//addormdo.oneClub
//验证
//验证
var checkName=(rule,value,callback)=>{///club/{managerId}/getClubByName/{clubName}
if (!value) {
return callback(new Error('名称不能为空'));
}
let nameConst=this.message.clubNameChuzhi;
console.log(nameConst);
if(value!=nameConst){
this.getClubByName(value);
if(this.validclubname===false){
return callback(new Error('名称已存在，请重新编辑'));
}else{
callback();
}
// callback();
}
callback();
};
// var checkFiles=(rule,value,callback)=>{
// if (!value) {
// return callback(new Error('照片不能为空，请选择1~8张照片'));
// }
//
//
// };
var checkMaxPeople=(rule,value,callback)=>{
if (!value) {
return callback(new Error('人数限制不能为空'));
}
// setTimeout(() => {
if (!Number.isInteger(value)) {
callback(new Error('请输入数字值'));
} else {
if (value < 1) {
callback(new Error('必须至少为1'));
} else if(value >20){
callback(new Error('必须小于20'));
}
else {
callback();
}
callback();
}
// }, 1000);
callback();
};
var checkProfile=(rule,value,callback)=>{
if (!value) {
return callback(new Error('会所简介不能为空'));
}
// setTimeout(() => {
if (value.length>=300) {
callback(new Error('请300字符以内'));
} else {
callback();
}
// }, 1000);
callback();
};
var checkTelephone=(rule,value,callback)=>{
if (!value) {
return callback(new Error('联系电话不能为空'));
}
callback();
};
var checkTelephone=(rule,value,callback)=>{
//var mobile =/^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
var tel= /^0\d{2,3}-\d{7,8}$/;
if ((!tel.test(value))) {
return callback(new Error('请填写正确联系电话)'));
}else{
callback();
}
};
var checkCharacteristic=(rule,value,callback)=>{
if (!value) {
return callback(new Error('请至少选择一个经营特色'));
}
callback();
};
return{
functionalZoneNamesObj:[],//功能区
innerVisible: false,
validclubname:'',
editForm:{
clubId:'',
name:'',
photos:[],//
files: [],//整个上传的文件
imgURL:[],//文件中本地照片的地址src
// files:null,//8照
// dialogImageUrl: '',//el-updown
addressImage:null,//单张截图的
characteristic:[],//经营特色
// functionalZoneNames:[],//功能区
functionalZoneIdsE:[],
maxPeople:0,
address:'',
longitude:0,
latitude:0,
area:'',
profile:'',
telephone:'',
status:''
},
dialogVisible: false,
dialogFormVisibleEdit:false,
//8张照片的
// dialogVisible: false
rules:{
name:[{validator: checkName, trigger: 'blur change'}],
// files: [{validator: checkFiles, trigger: 'blur'}],
// characteristic:[{ type: 'array', message: '请至少选择一个经营特色', trigger: 'change'}],
characteristic:[{validator: checkCharacteristic, trigger: 'change'}],
maxPeople:[{validator: checkMaxPeople, trigger: 'blur change'}],
profile:[{validator: checkProfile, trigger: 'blur change'}],
telephone:[{validator: checkTelephone, trigger: 'blur change'}],
},
}
},
// props:['editData'],
methods:{
//根据名字获取返回true或false GET /club/{managerId}/getClubByName/{clubName}
getClubByName(valueclub){
let that=this;
that.axios.get("/club/100/getClubByName/"+valueclub).then((res)=>{
that.validclubname=res.data;
}).catch((error)=>{console.log(error)});
},
changeFile(event){
//var files = document.getElementById("input").files;
// console.log(files);
// console.log(input.files[0]);
var files=event.srcElement.files;
console.log(event.srcElement.files);
this.editForm.files.push(files[0]) ;
//for(var i=0;i<files.length;i++){
this.editForm.imgURL.push(window.URL.createObjectURL(files[0]));//}
console.log(this.editForm.imgURL);
},
removepotho(index){
this.editForm.files.splice(index,1);
this.editForm.imgURL.splice(index,1);
},
delpotho(index){
//POST /club/{managerId}/deleteClubImages
var that=this;
var newDel=[];
var newDel_s=[];
var newOPhoNums = []; //剩下没有删除的地址集合
var newOPhoNums_s = [];
//删除oPhoNums里对应的地址
for (var i = 0; i < that.editForm.photos.length; i++) {
if (i!=index) {
newOPhoNums.push(that.editForm.photos[i].url);
newOPhoNums_s.push(that.editForm.photos[i].url_s);
newDel.push(that.editForm.photos[index].url);
newDel_s.push(that.editForm.photos[index].url_s)
}
// if (that.editForm.photos[i][url_s] != that.editForm.photos[index][url_s]) {
// newOPhoNums_s.push(that.editForm.photos[i][url_s]);
// }
}
that.$confirm('确认删除该张照片吗?', '提示', {
type: 'warning'
}).then(() => {
//debugger
that.axios.post('/club/100/deleteClubImages',{
clubId: that.editForm.clubId,
imageUrls: newOPhoNums,//剩余的照片地址
imageUrls_s: newOPhoNums_s,
deletedUrls: newDel,//删除的照片地址
deletedUrls_s: newDel_s,
}).then((res) => {
that.$message({
message: '删除成功',
type: 'success'
});
});
}).catch((error) => {
console.log(error);
});
that.editForm.photos.splice(index,1);
},
getFile2(event){
this.editForm.addressImage=event.target.files[0];
console.log(this.editForm.addressImage);
},
//从地图按钮 取的的地图数据
saveMapData(data){
let that=this;
that.editForm.address=data.input1;
that.editForm.longitude=data.input2;
that.editForm.latitude=data.input3;
that.editForm.area=data.input1.substring(0,data.input1.indexOf("区")+1);
that.innerVisible=data.innerVisible;
},
//提交表单
editClub(editForm,event) {///club/{managerId}/addClub 编辑 ///club/{managerId}/updateClub/{clubId} 修改的
let that =this;
that.$refs.editForm.validate((validateField) => {
if (validateField) {
// event.preventDefault();
let formData=new FormData();
if(this.editForm.files.length){
for(var i=0;i<this.editForm.files.length;i++){
formData.append('files',this.editForm.files[i]);}
}
//formData.append('files',that.editForm.files);
formData.append('addressImage',that.editForm.addressImage);
console.log(formData);
console.log("1111"+that.editForm.clubId)
that.axios.post('club/100/updateClub/'+ that.editForm.clubId,formData,{
params: {
name: that.editForm.name,
characteristic:that.editForm.characteristic.join(','),
functionalZoneIds:that.editForm.functionalZoneIdsE.join(','),
maxPeople:that.editForm.maxPeople,
address:that.editForm.address,
longitude:that.editForm.longitude,
latitude:that.editForm.latitude,
area:that.editForm.area,
profile:that.editForm.profile,
telephone:that.editForm.telephone,
status:that.editForm.status,
}
})
.then((response)=>{
that.$message({
message: "修改会所成功！",
type: "success"
});
that.dialogFormVisibleEdit = false;
that.$parent.getAllClubs();
}).catch(function (error) {
console.log(error);
});
that.$refs[editForm].resetFields();
} else {
console.log('error submit!!');
return false;
}
});
//还不能够刷新本页面？？？
},
resetedit(editForm){
let that=this;
that.dialogFormVisibleEdit = false;
that.$refs[editForm].resetFields();
},
getAllFunctionalZone(){//查询所有功能区 /functionalZone/{managerId}/getAllFunctionalZone
this.axios.get('/functionalZone/100/getAllFunctionalZone').then((res)=>{
// var functionalZoneObjsb=res.data;
this.functionalZoneNamesObj=res.data;
// for(var i=0;i<functionalZoneObjsb.length;i++){
// this.functionalZoneNamesObj.push(functionalZoneObjsb[i].functionalZoneName)
// }
//
console.log(this.functionalZoneNamesObj)
}).catch((error)=>{console.log(error)})
}
},
created(){
this.getAllFunctionalZone();
},
mounted(){
},
watch:{
// this.form={};
// this.form=this.addormdo.oneClub;
// console.log(this.form)
}
}
</script>
<style scoped>
.add-class.class-box.el-card {
display: flex;
height: 200px;
box-sizing: border-box;
width: 202px;
border-style: dashed;
border-color: #409eff;
}
.add-class /deep/ .el-card__body {
margin: auto;
}
.add-class /deep/ .el-icon-circle-plus-outline {
font-size: 40px;
}
/**{margin: 0px;padding: 0px;}*/
.a-upload {
float: left;
padding: 4px 70px;
height: 123px;
line-height: 123px;
position: relative;
cursor: pointer;
color: white;
background: white;
border: 3px dotted #ddd;
border-radius: 4px;
overflow: hidden;
display: inline-block;
*display: inline;
margin: 15px;
*zoom: 1;
text-decoration: none;
}
.a-upload input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
filter: alpha(opacity=0);
cursor: pointer
}
.a-upload:hover {
color: white;
background: #00b7ee;
background:#CCCCCC;
border-color: #ccc;
text-decoration: none
}
</style>
alimMap.vue
<template>
<!--<div style="width:100%">
<el-dialog
width="55%"
title="地图显示层"
:visible.sync="innerVisible"
append-to-body>-->
<el-card class="box-card">
<div slot="header" class="clearfix">
<div class ='panel'>
地址<el-input id = 'input1' v-model="mapData.input1" placeholder="点击地图显示地址/输入地址显示位置" style="width: 50%;"></el-input>
坐标<el-input id = 'input2' v-model="mapData.input2" placeholder="点击地图地图显示经纬度" style="width: 15%;"></el-input>
<el-input id = 'input3' v-model="mapData.input3" placeholder="点击地图地图显示经纬度" style="width: 15%;"></el-input>
<el-button @click="saveMap" >保存</el-button>
<div id = 'message'></div>
</div>
</div>
<div>
<div id="container" tabindex="0"></div>
</div>
</el-card>
<!--<span slot="footer" class="dialog-footer">
<el-button @click="innerVisible=false">关闭</el-button>
</span>
</el-dialog>
</div>-->
</template>
<script>
import AMap from 'AMap'
import AMapUI from 'AMapUI'
import Cropper from 'cropperjs'
export default{
data(){
return{
mapData:{
input1:'',
input2:'',
input3:'',
innerVisible:false,
}
}
},
methods:{
initMap(){
let that=this;
var map = new AMap.Map('container',{
resizeEnable: true,
zoom: 13,
// center: [116.39,39.9]
});
AMap.plugin('AMap.Geocoder',function(){
var geocoder = new AMap.Geocoder({
city:'深圳'
});
var marker = new AMap.Marker({
map:map,
bubble:true
})
var input1 = document.getElementById('input1');
var input2 = document.getElementById('input2');
var input3 = document.getElementById('input3');
var message = document.getElementById('message');
map.on('click',function(e){
marker.setPosition(e.lnglat);
that.mapData.input2=input2.value=e.lnglat.lng;//显示经纬度
that.mapData.input3=input3.value=e.lnglat.lat;
console.log('"altitude":10.054103,','"latitude":'+that.mapData.input2+',','"longitude":'+that.mapData.input3)
geocoder.getAddress(e.lnglat,function(status,result){
if(status=='complete'){
that.mapData.input1=input1.value = result.regeocode.formattedAddress
message.innerHTML = ''
}else{
message.innerHTML = '无法获取地址'
}
})
})
input1.onchange = function(e){
var address = input1.value;
geocoder.getLocation(address,function(status,result){
if(status=='complete'&&result.geocodes.length){
marker.setPosition(result.geocodes[0].location);
map.setCenter(marker.getPosition())
message.innerHTML = ''
}else{
message.innerHTML = '无法获取位置'
}
})
}
// setInput1:function(){
// console.log(this.input1);
// this.$emit("mapInputO",this.input1)
// },
// setInput2:function(){
// console.log(this.input2);
// this.$emit("mapInputT",this.input2)
// }
//
});
},
saveMap(){
console.log(this.mapData)
this.$emit('saveMap',this.mapData);
}
},
created(){
},
mounted(){
this.initMap();
},
}
</script>
<style scoped="scoped">
#container{
width:100%;
height: 600px;
margin: 0px;
border: 1px solid gray;
}
/*.panel {
background-color: #ddf;
color: #333;
border: 1px solid silver;
box-shadow: 3px 4px 3px 0px silver;
position: absolute;
top: 10px;
left: 10px;
border-radius: 5px;
overflow: hidden;
line-height:50px
}*/
#input{
width: 450px;
height: 25px;
border: 0;
}
#input2{
width: 150px;
height: 25px;
border: 0;
}
</style>
functionalAreasManagement.vue
<!--功能区管理
1.查询所有没有被添加到功能区的设备类型GET /deviceType/{managerId}/getNoFunctionalZoneDeviceTypes
2.functional-zone-controller : Functional Zone Controller
2.1设置功能区 POST /functionalZone/{managerId}/editFunctionalZone
body体传入对象
{
"functionalZoneId": 0,
"functionalZoneName": "综合区",
"sets": [
"奔跑吧"
]
}
3.查询所有功能区GET /functionalZone/{managerId}/getAllFunctionalZone
4.删除功能区DELETE /functionalZone/{managerId}/delFunctionalZone (http://192.168.10.15:8084/functionalZone/100/delFunctionalZone?functionalZoneId=106)
5.查询功能区名下所有的设备类型名称GET /functionalZone/{managerId}/getDeviceTypeByFunctionZone （http://192.168.10.15:8084/functionalZone/100/getDeviceTypeByFunctionZone?functionalZoneName=%E8%B7%91%E6%AD%A5%E6%9C%BA%E6%88%BF）
此处不用，在设备管理页使用
-->
<template>
<div>
<div class="smy-header" >
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/HelloWorld' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>功能区管理</el-breadcrumb-item>
<el-breadcrumb-item>功能区管理</el-breadcrumb-item>
</el-breadcrumb>
</div>
<!--新增功能区对话框-->
<el-dialog title="新增功能区" :visible.sync="dialogAddFunctionAreasVisible">
<el-form :model="addFunctionAreasForm" size="mini" label-width="120px">
<el-form-item label="功能区名称">
<el-input v-model="addFunctionAreasForm.functionalZoneName" placeholder="请输入功能区的名称" style="width:300px;"></el-input>
</el-form-item>
<el-form-item label="设备类型">
<el-checkbox-group v-model="addFunctionAreasForm.type" size="mini" >
<!--<el-checkbox label="备选项1" border></el-checkbox>-->
<el-checkbox v-for="item in NoFunctionalZoneDeviceTypesAdd" :label="item.deviceTypeId" :key="item.deviceTypeId" style="margin-left:0;margin-right: 5px;" border>{{item.deviceTypeName}}</el-checkbox>
</el-checkbox-group>
<!--<el-checkbox-group v-model="addFunctionAreasForm.type">
<el-checkbox label="心率墙" name="type"></el-checkbox>
<el-checkbox label="跑步机" name="type"></el-checkbox>
<el-checkbox label="动感单车" name="type"></el-checkbox>
<el-checkbox label="储物柜" name="type"></el-checkbox>
<el-checkbox label="人脸识别" name="type"></el-checkbox>
</el-checkbox-group>-->
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogAddFunctionAreasVisible=false">取 消</el-button>
<el-button type="primary" @click="submitEditAddFunctionAreas">创建</el-button>
</div>
</el-dialog>
<!--修改功能区对话框-->
<el-dialog title="修改功能区" :visible.sync="dialogEditFunctionAreasVisible">
<el-form :model="editFunctionAreasForm" size="mini" label-width="80px">
<el-form-item label="功能区ID" hidden>
<el-input v-model="editFunctionAreasForm.functionalZoneId" placeholder="请输入功能区的名称" ></el-input>
</el-form-item>
<el-form-item label="功能区名称">
<el-input v-model="editFunctionAreasForm.functionalZoneName" placeholder="请输入功能区的名称" ></el-input>
</el-form-item>
<el-form-item label="设备类型">
<el-checkbox-group v-model="editFunctionAreasForm.type" size="mini">
<el-checkbox v-for="item in FunctionalZoneDeviceTypesEditObj" :label="item.deviceTypeId" :key="item.deviceTypeId" style="margin-left:0;margin-right: 5px;" border>{{item.deviceTypeName}}</el-checkbox>
<el-checkbox v-for="item in NoFunctionalZoneDeviceTypesEdit" :label="item.deviceTypeId" :key="item.deviceTypeId" style="margin-left:0;margin-right: 5px;" border>{{item.deviceTypeName}}</el-checkbox>
</el-checkbox-group>
<!--<el-checkbox-group v-model="editFunctionAreasForm.type">
<el-checkbox label="心率墙" name="type"></el-checkbox>
<el-checkbox label="跑步机" name="type"></el-checkbox>
<el-checkbox label="动感单车" name="type"></el-checkbox>
<el-checkbox label="储物柜" name="type"></el-checkbox>
<el-checkbox label="人脸识别" name="type"></el-checkbox>
</el-checkbox-group>-->
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogEditFunctionAreasVisible=false">取 消</el-button>
<el-button type="primary" @click="submitEditFunctionAreas">修改</el-button>
</div>
</el-dialog>
<el-row justify="center" >
<el-card class="box-card" v-for="(item,index) in FunctionAreas" :key="index" style="position: relative;">
<div slot="header" class="clearfix centercard">
<h3>{{item.functionalZoneName}}</h3>
</div>
<div >
<div class="centercard">
<ul>
<li v-for="(itemT,index) in item.deviceTypeSets" :key="index">{{itemT.deviceTypeName}}</li>
</ul>
</div >
</div>
<div class="buttoncard centercard" style="position: absolute;bottom: 20px;left: 0;right:0;">
<el-button style="margin-right: 30%;" @click="updataFunctionAreas(item)" type="warning" plain size="medium">修改</el-button>
<el-button type="danger" plain size="medium"@click="delFunctionAreas(item)" >删除</el-button>
</div>
</el-card>
<el-card class="box-card">
<div slot="header" class="clearfix centercard">
<span>新增功能区</span>
</div>
<div class="centercard">
<el-button @click="openAddFunctionZone" type="info" plain icon='el-icon-plus' size="medium">新增功能区</el-button>
</div>
</el-card>
<!-- <el-card class="box-card">
<div slot="header" class="clearfix centercard">
<span>会所3</span>
</div>
<div >
<div class="centercard"><span>会所3</span></div >
<el-button style="float: left;margin-bottom: 10px;" type="warning" plain size="medium">修改</el-button>
<el-button style="float: right;margin-bottom: 10px;" type="danger" plain size="medium">删除</el-button>
</div>
</el-card>
<el-card class="box-card">
<div slot="header" class="clearfix centercard">
<span>会所4</span>
</div>
<div >
<div class="centercard"><span>会所4</span></div >
<el-button style="float: left;margin-bottom: 10px;"type="warning" plain size="medium">修改</el-button>
<el-button style="float: right;margin-bottom: 10px;" type="danger" plain size="medium">删除</el-button>
</div>
</el-card>-->
</el-row>
<!--<el-form size="mini">
<el-form-item >
<el-button plain @click="openAddFunctionZone">新增功能区</el-button>
<el-button @click="updataFunctionAreas" type="text" size="small">修改</el-button>
</el-form-item>
</el-form>-->
<!--<el-table :data="FunctionAreas" border >
<el-table-column prop="functionalZoneName" label="功能区名称"></el-table-column>
<el-table-column prop="deviceTypeNames" label="设备类型"></el-table-column>
<el-table-column prop=""label="操作">
<template slot-scope="scope">
<el-button @click="updataFunctionAreas(scope.row)" type="text" size="small">修改</el-button>
<el-button type="text" size="small" @click="delFunctionAreas(scope.$index,scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>-->
</div>
</template>
<script>
export default{
name:'functionalAreasManagement',
data(){
return{
dialogAddFunctionAreasVisible:false,
dialogEditFunctionAreasVisible:false,
DeviceTypes:[],//功能区名下所有设备类型名称
FunctionAreas:[],//
NoFunctionalZoneDeviceTypesAdd:[],
NoFunctionalZoneDeviceTypesEdit:[],
FunctionalZoneDeviceTypesEditObj:[
// {deviceTypeId:0,deviceTypeName:''}
],//row对象里面的设备类型数组
addFunctionAreasForm:{
functionalZoneName:'',
type:[]
},
editFunctionAreasForm:{
functionalZoneId:0,
functionalZoneName:'',
type:[]
},
FunctionAreas:[],
deviceTypeNames:'',
deviceTypeIds:''
}
},
methods:{
getAllFunctionalZone(){//查询所有功能区GET /functionalZone/{managerId}/getAllFunctionalZone
let managerId=this.$root.managerId;
this.axios.get('/functionalZone/'+managerId+'/getAllFunctionalZone').then((res)=>{
this.FunctionAreas=res.data;
// var FunctionAreasOld=res.data;
// var deviceTypeNamesArr=[],deviceTypeIdsArr=[];
//
// for (var i=0;i<FunctionAreasOld.length;i++){
FunctionAreasOld[i].functionalZoneName
FunctionAreasOld[i].functionalZoneId
// for(var j=0;j<FunctionAreasOld[i].deviceTypeSets.length;j++){
// deviceTypeIdsArr.push(FunctionAreasOld[i].deviceTypeSets[j].deviceTypeId);
// deviceTypeNamesArr.push(FunctionAreasOld[i].deviceTypeSets[j].deviceTypeName);
//
// }
// console.log(deviceTypeNamesArr);
// }
//
// console.log(res.data);
}).catch((error)=>{console.log(error)})
},
/*-----------新增-----------------*/
openAddFunctionZone(){
this.dialogAddFunctionAreasVisible=true;
this.getNoFunctionalZoneDeviceTypesAdd();
},
submitEditAddFunctionAreas(){//设置功能区POST /functionalZone/{managerId}/editFunctionalZone
let managerId=this.$root.managerId;
this.axios.post('/functionalZone/'+managerId+'/editFunctionalZone',{
functionalZoneId: 0,//新增不需设置
functionalZoneName: this.addFunctionAreasForm.functionalZoneName,
deviceTypeIds: this.addFunctionAreasForm.type
}).then((res)=>{
this.$message({
message:'设置功能区成功！',
type:'success'
});
this.addFunctionAreasForm.type=[];
this.addFunctionAreasForm.functionalZoneName='';
this.getNoFunctionalZoneDeviceTypesAdd();
this.getAllFunctionalZone();
}).catch((error)=>{console.log(error)})
},
/*-----------修改-----------------*/
updataFunctionAreas(row){
this.dialogEditFunctionAreasVisible=true;
//var deviceTypeIdSet=[],deviceTypeNameSet=[];
this.FunctionalZoneDeviceTypesEditObj=[];
console.log(row);
for(var i=0;i<row.deviceTypeSets.length;i++){
this.FunctionalZoneDeviceTypesEditObj.push({deviceTypeId:row.deviceTypeSets[i].deviceTypeId,deviceTypeName:row.deviceTypeSets[i].deviceTypeName})
// deviceTypeIdSet.push(row.deviceTypeSets[i].deviceTypeId);
// deviceTypeNameSet(row.deviceTypeSets[i].deviceTypeName);
}
console.log(this.FunctionalZoneDeviceTypesEditObj);
this.editFunctionAreasForm.functionalZoneId=row.functionalZoneId;
this.editFunctionAreasForm.functionalZoneName=row.functionalZoneName;
// this.editFunctionAreasForm.type=this.FunctionalZoneDeviceTypesEditObj;
this.editFunctionAreasForm.type=[];
for(var j=0;j<this.FunctionalZoneDeviceTypesEditObj.length;j++){
this.editFunctionAreasForm.type.push(this.FunctionalZoneDeviceTypesEditObj[j].deviceTypeId);
}
this.getNoFunctionalZoneDeviceTypesEdit();
// this.editFunctionAreasForm=row;
},
// updataFunctionAreas(){//调试用，
// this.dialogEditFunctionAreasVisible=true;
// this.editFunctionAreasForm.type=this.FunctionalZoneDeviceTypesEditObj;
// this.getNoFunctionalZoneDeviceTypesEdit();
// },
submitEditFunctionAreas(){//修改功能区POST /functionalZone/{managerId}/editFunctionalZone
let managerId=this.$root.managerId;
this.axios.post('/functionalZone/'+managerId+'/editFunctionalZone',{
functionalZoneId: this.editFunctionAreasForm.functionalZoneId,//修改需设置
functionalZoneName: this.editFunctionAreasForm.functionalZoneName,
deviceTypeIds: this.editFunctionAreasForm.type
}).then((res)=>{
this.$message({
message:'修改功能区成功！',
type:'success'
});
this.getAllFunctionalZone();
}).catch((error)=>{console.log(error)})
},
/*-----------删除-----------------*/
delFunctionAreas(row){//删除功能区DELETE /functionalZone/{managerId}/delFunctionalZone
let managerId=this.$root.managerId;
this.axios.delete('/functionalZone/'+managerId+'/delFunctionalZone?functionalZoneId='+row.functionalZoneId).then((res)=>{
this.$message({
message:'删除功能区成功！',
type:'success'
});
this.getAllFunctionalZone();
}).catch((error)=>{
this.$message({
message: "错误信息:"+error.response.data.cause.message,
type: 'error'
});
})
},
getNoFunctionalZoneDeviceTypesAdd(){//查询所有没有被添加到功能区的设备类型GET /deviceType/{managerId}/getNoFunctionalZoneDeviceTypes
let managerId=this.$root.managerId;
this.axios.get('/deviceType/'+managerId+'/getNoFunctionalZoneDeviceTypes').then((res)=>{
this.NoFunctionalZoneDeviceTypesAdd=res.data;
console.log(res.data)
}).catch((error)=>{console.log(error)})
},
getNoFunctionalZoneDeviceTypesEdit(){ //查询所有没有被添加到功能区的设备类型GET /deviceType/{managerId}/getNoFunctionalZoneDeviceTypes
let managerId=this.$root.managerId;
this.axios.get('/deviceType/'+managerId+'/getNoFunctionalZoneDeviceTypes').then((res)=>{
this.NoFunctionalZoneDeviceTypesEdit=res.data;
console.log(res.data)
}).catch((error)=>{console.log(error)})
},
getDeviceTypeByFunctionZoneAdd(){//查询功能区名下所有设备类型名称GET /functionalZone/{managerId}/getDeviceTypeByFunctionZone(修改功能区时使用接口)
let managerId=this.$root.managerId;
this.axios.get('/functionalZone/'+managerId+'/getDeviceTypeByFunctionZone').then((res)=>{
this.DeviceTypes=res.data.list;
console.log(this.DeviceTypes)
}).catch((error)=>{console.log(error)})
},
},
created(){
this.getAllFunctionalZone();
},
mounted(){
},
watch:{}
}
</script>
<style scoped="scoped">
.box-card {
width: 15.7%;
height: 300px;
border-radius: 20px;
float:left;
margin-right:0.8%;
margin-bottom: 20px;
background-color:rgb(251, 249, 249);
}
.centercard{
text-align: center;
}
ul li{
list-style-type:none ;
}
</style>
orderSet.vue
<template>
<div>
<div class="smy-header" >
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/HelloWorld' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>会所</el-breadcrumb-item>
<el-breadcrumb-item>预约设置</el-breadcrumb-item>
</el-breadcrumb>
</div>
<!--1.预约设置 查询区域-->
<el-row>
<el-col :span="15">
<!-- <el-card class="box-card">
<div slot="header" class="clearfix">
<p>预约查询</p>
<el-form :inline="true">
<el-form-item label="会所名称">
<el-select v-model="clubName" size="mini" filterable placeholder="请输入会所名称" @change="getClubSubDate">
<el-option v-for="item in clubNames":key="item.clubName":label="item.clubName":value="item.clubName"></el-option>
</el-select>
</el-form-item>
<el-form-item label="日期选择">
<el-date-picker
size="mini"
value-format="yyyy-MM-dd"
v-model="subscribeDate"
type="date"
@change="getClubSubDate"
placeholder="选择日期">
</el-date-picker>
</el-form-item >
</el-form>
</div>
<div class="grid-content bg-purple-dark">
<div class="grid-content bg-purple-dark">
<h3>会所名称 {{clubName}}</h3>
<p class="mtop10">营业日期 {{subscribeDate}}</p>
<p v-if="status==1" style="color:#409EFF" class="mtop6">休息日：祝您节假日快乐</p>
<p class="mtop6">营业时间 {{getClubScheduleByDayOne.businessHoursStart}}-{{getClubScheduleByDayOne.businessHoursStop}}</p>
<p class="mtop6">预约时段 </p>
<ul >
<li v-for="(item,index) in getClubScheduleByDays" :key="index" class="mtop10 mleft85">时段 {{item.period}}</li>
</ul>
</div>
</div>
</el-card>
</el-col>-->
<el-card class="box-card">
查询结果
<el-table :data="SchedulesByMonth.slice((currentPage-1)*pagesize,currentPage*pagesize)" border style="width: 100% ;" :row-style="tableRowStyle" max-height="850" size="mini">
<el-table-column type="index"width="50"label="序号"></el-table-column>
<el-table-column prop="clubName" label="会所" align="left"></el-table-column>
<el-table-column prop="subscribeDate" label="日期" align="left"></el-table-column>
<el-table-column prop="businessHoursStart" label="营业开始时间" align="left"></el-table-column>
<el-table-column prop="businessHoursStop" label="营业结束时间" align="left"></el-table-column>
<el-table-column prop="period" label="时段" align="left"></el-table-column>
<el-table-column prop="status" label="是否工作日" :formatter="formatterStatus" align="left"></el-table-column>
</el-table>
<el-pagination
small
@size-change="handleSizeChange"
:current-page="currentPage"
:page-sizes="[10, 15, 20, 30]"
:page-size="15"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@current-change="current_change">
</el-pagination>
</el-card>
</el-col>
<!--2.预约设置-->
<el-col :span="9">
<el-card class="box-card">
预约设置
<div class="grid-content bg-purple-dark">
<!--营业时间设置-->
<el-form ref="setForm" :model="setForm" :rules="ruleSetForm">
<!--<el-form-item label="会所名称" prop="setclubName">
<el-select v-model="setForm.setclubName" size="mini" filterable placeholder="请输入会所名称" label-width="80px">
<el-option v-for="item in clubNames":key="item.clubName":label="item.clubName":value="item.clubName"></el-option>
</el-select>
</el-form-item>-->
<el-form-item label="会所名称">
<el-select v-model="setForm.setclubName" size="mini" filterable placeholder="请输入会所名称" @change="getClubSubDate"style="width:275px;">
<el-option v-for="item in clubNames":key="item.id":label="item.name":value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="按日查询">
<el-date-picker
size="mini"
value-format="yyyy-MM-dd"
v-model="subscribeDate"
type="date"
@change="getClubSubDate"
placeholder="选择日期"
style="width:275px;">
</el-date-picker>
</el-form-item >
<el-form-item label="按月查询" prop="yue">
<!--<el-select v-model="setForm.yue" size="mini" filterable placeholder="请选择月份" @change="getClubSchedulesByMonth"style="width:275px;">
<el-option label="当月" value="2018-04"></el-option>
<el-option label="上月" value="2018-03"></el-option>
<el-option label="下月" value="2018-05"></el-option>
</el-select>-->
<el-date-picker v-model="setForm.yue"type="month" placeholder="选择月" value-format="yyyy-MM" @change="getClubSchedulesByMonth"style="width:275px;"size="mini"></el-date-picker>
<!--<el-radio-group v-model="setForm.yueFeng" >
<el-radio :label="0" size="mini" >当月</el-radio>
<el-radio :label="1" size="mini">上月</el-radio>
<el-radio :label="1" size="mini">下月</el-radio>
</el-radio-group>-->
</el-form-item>
<hr/>
<el-form-item label="日子状态" prop="setstatus" v-if="getClubSchedulesByMonth">
<el-radio-group v-model="setForm.setstatus" >
<el-radio :label="0" size="mini" >营业</el-radio>
<el-radio :label="1" size="mini">非营业</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="日期设置">
<!-- <el-date-picker v-model="setForm.setDate" value-format="yyyy-MM-dd" size="mini" type="daterange" range-separator="至" start-placeholder="开始日期"end-placeholder="结束日期"></el-date-picker>-->
<el-col :span="16">
<el-form-item prop="setDateStart" style="float:left;">
<el-date-picker v-model="setForm.setDateStart" type="date"placeholder="开始日期" value-format="yyyy-MM-dd" size="mini"style="width:130px;"></el-date-picker>至
</el-form-item >
<el-form-item prop="setDateStop" style="float:left;">
<el-date-picker v-model="setForm.setDateStop" type="date"placeholder="结束日期" value-format="yyyy-MM-dd" size="mini"style="width: 130px;"></el-date-picker>
</el-form-item >
</el-col>
</el-form-item>
<el-form-item v-if="setForm.setstatus==0" label="营业时间 " :inline="true" >
<el-col :span="12">
<el-form-item prop="setbusinessHoursStart" style="float:left;">
<el-time-select placeholder="起始时间"size="mini" v-model="setForm.setbusinessHoursStart"
:picker-options="{start: '00:00',step: '00:15', end: '24:00'}" style="width:131px;">
</el-time-select>至
</el-form-item >
<el-form-item prop="setbusinessHoursStop" style="float:left;">
<el-time-select placeholder="结束时间" size="mini" v-model="setForm.setbusinessHoursStop"
:picker-options="{start: '00:00',step: '00:15', end: '24:00', minTime:(((Number(setForm.setbusinessHoursStart.substring(0, 2))+1).toString()+':'+(Number((setForm.setbusinessHoursStart.substring(3, 5))-15).toString())))}"style="width:131px;">
</el-time-select>
</el-form-item >
</el-col>
</el-form-item>
<!--<el-form-item
v-if="setForm.setstatus==0"
v-for="(period, index) in setForm.setPeriods"
:label="'时段设置' + (index+1)"
:key="period.key"
:prop="'setPeriods.' + index+'.period'"
:rules="{
validator:(rule,value,callback)=>{
periodvalidator(rule,value,callback)
}, trigger: 'blur' }"
> -->
<!--<el-time-picker :label="letters[index]" :disabled="(setForm.setbusinessHoursStart&&setForm.setbusinessHoursStop)? false:true"
is-range v-model="period.period" @change="addperiodchange(index)" size="mini" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围"
format='HH:mm' value-format='HH:mm' style="width:240px;">
</el-time-picker>-->
<el-form-item
v-if="setForm.setstatus==0"
v-for="(item, index) in setForm.setPeriods"
:label="'时段设置' + (index+1)"
:key="index"
:prop="'setPeriods.' + index+'.period'"
:rules="{
validator:(rule,value,callback)=>{
periodvalidator(rule,value,callback)
}, trigger: 'blur' }"
>
<el-col :span="12" >
<!--<el-form-item style="float:left;">-->
<el-time-select placeholder="起始时间"size="mini" v-model="item.period[0]" @change="addperiodchange(index)"
:picker-options="{start: '00:00',step: '00:30', end: '24:00'}"
style="width:130px;" >
</el-time-select>至
<!-- </el-form-item >-->
<!-- <el-form-item style="float:left;"> -->
<el-time-select placeholder="结束时间" size="mini" v-model="item.period[1]" @change="addperiodchange(index)"
:picker-options="{start: '00:00',step: '00:30', end: '24:00', minTime:(((Number(item.period[0].substring(0, 2))+1).toString()+':'+(Number((item.period[0].substring(3, 5))-15).toString())))}" style="width:130px;">
</el-time-select>
<!--</el-form-item >-->
</el-col>
<el-button-group>
<el-button v-if="index==setForm.setPeriods.length-1 && setForm.setPeriods.length<letters.length" size="mini" type="default" icon="el-icon-plus" @click="addPeriod"></el-button>
<el-button v-if="setForm.setPeriods.length!=1"size="mini" type="default" icon="el-icon-minus" @click="deletePeriod(index)"></el-button>
</el-button-group>
</el-form-item>
<el-form-item >
<!-- <el-button type="info"size="mini" @click.native.prevent="setSubmitYz">当前设置</el-button>-->
<el-button type="info"size="mini" @click.native.prevent="setSubmitYs">快设时段</el-button>
<el-button type="primary"size="mini" @click.native.prevent="setSubmit('setForm')">提交</el-button>
<!--<el-button size="mini" @click="resetForm('setForm')">取消</el-button>-->
</el-form-item>
</el-form>
<!--<Form ref="setForm" :model="setForm" :rules="ruleSetForm">
<FormItem label="会所名称">
<Select v-model="setForm.setclubName" size="small" filterable placeholder="请输入会所名称" @change="getClubSubDate">
<Option v-for="item in clubNames":key="item.clubName":label="item.clubName":value="item.clubName"></Option>
</Select>
</FormItem>
<FormItem label="按日查询">
<DatePicker type="date" v-model="subscribeDate" placeholder="选择日期" @change="getClubSubDate" size="small"style="width: 200px"></DatePicker>
</FormItem >
<hr/>
<FormItem label="日子状态" prop="setstatus" v-if="getClubSchedulesByMonth">
<RadioGroup v-model="setForm.setstatus" >
<Radio :label="0" size="small" >设置为工作日</Radio>
<Radio :label="1" size="small">设置为休息日</Radio>
</RadioGroup>
</FormItem>
<FormItem label="日期设置" prop="setDate">
<DatePicker v-model="setForm.setDate" type="daterange"size="small" placement="bottom-end" placeholder="Select date" style="width: 200px"></DatePicker>
</FormItem>
<FormItem v-if="setForm.setstatus==0" label="营业时间" :inline="true" >
<el-col :span="16">
<FormItem prop="setbusinessHoursStart" style="float:left;">
<TimePicker v-model="setForm.setbusinessHoursStart" format="HH:mm" placeholder="开始时间" style="width: 112px"></TimePicker>至
</FormItem >
<FormItem prop="setbusinessHoursStop" style="float:left;">
<TimePicker v-model="setForm.setbusinessHoursStop" format="HH:mm" placeholder="结束时间" style="width: 112px"></TimePicker>
</FormItem >
</el-col>
</FormItem>
<FormItem
v-if="setForm.setstatus==0"
v-for="(period, index) in setForm.setPeriods"
:label="'时段设置' + (index+1)"
:key="period.key"
:prop="'setPeriods.' + index+'.period'"
:rules="{
validator:(rule,value,callback)=>{
periodvalidator(rule,value,callback)
}, trigger: 'blur' }"
>
<TimePicker v-model="period.period" @change="addperiodchange(index)" :label="letters[index]" :disabled="(setForm.setbusinessHoursStart&&setForm.setbusinessHoursStop)? false:true" format="HH:mm" type="timerange" placement="bottom-end" placeholder="Select time" style="width:240px;"></TimePicker>
<ButtonGroup>
<Button v-if="index==setForm.setPeriods.length-1 && setForm.setPeriods.length<letters.length" size="small" icon="plus" @click="addPeriod"></Button>
<Button v-if="setForm.setPeriods.length!=1"size="small" icon="minus" @click="deletePeriod(index)"type="primary"></Button>
</ButtonGroup>
</FormItem>
<FormItem >
<Button type="info" size="small" @click.native.prevent="setSubmitYs">快设时段</Button>
<Button type="primary"size="small" @click.native.prevent="setSubmit('setForm')">提交</Button>
</FormItem>
</Form> -->
</div>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
export default{
name:'orderSet',
data(){
//定义验证规则,时段已经绑定
//1.验证是否已经选择会所名称
var checksetclubName=(rule,value,callback)=>{
if (!value) {
return callback(new Error('请选择会所名称'));
}
callback();
}
//2.验证营业时间的逻辑,营业时间 的开始时间小于结束时间，且时间间隔最低为1小时
var checksetbusinessHoursStart=(rule,value,callback)=>{
if (!value) {
return callback(new Error('请选择营业开始时间'));
}
// setTimeout(()=>{
if (this.setForm.setbusinessHoursStop && this.setForm.setbusinessHoursStart){
var stopT= (Number(this.setForm.setbusinessHoursStop.substring(0, 2))*60)+ Number(this.setForm.setbusinessHoursStop.substring(3,5));
var startT=(Number(this.setForm.setbusinessHoursStart.substring(0, 2))*60)+Number(this.setForm.setbusinessHoursStart.substring(3, 5));
if(startT>=stopT){
return callback(new Error('开始时间必须小于结束时间'));
}
if (60 > stopT - startT) {
return callback(new Error('营业时间最低为1小时'));
}
}else{
callback();
}
// },1000)
callback();
}
var checksetbusinessHoursStop=(rule,value,callback)=>{
if (!value) {
return callback(new Error('请选择营业结束时间'));
}
callback();
}
//3.验证每个时段的逻辑 (由于数据结构的限制，可能需要修改为原生的界面以及做原生验证)
/*
<el-form-item v-for="(domain, index) in dynamicValidateForm.domains" :label="'域名' + index" :key="domain.key" :prop="'domains.' + index + '.value'" :rules="{
validator：(rule,value,callback) => {
valid(rule,value,callback)
},trigger:'blur'
}">
<el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button>
methods:
valid(rule,value,callback){
if(value===''){
callback(new Error('请输入密码'));
}else{
if(this.ruleForm2.checkPass!==''){
this.$refs.ruleForm2.validateField('checkPass');
}
callback();
}
},
*/
//4.验证是否选择 日期范围
var checksetDateStart=(rule,value,callback)=>{
if (!value) {
return callback(new Error('请选择需要设置的开始日期'));
}else{//开始的日期必须≥今日日期 必须≤结束日期
var _year=Number(new Date(value).getYear()),_tyear=Number(new Date().getYear());
var _month=Number(new Date(value).getMonth()),_tmonth=Number(new Date().getMonth());
var _day=Number(new Date(value).getDate()),_tday=Number(new Date().getDate());
if((_year<_tyear)||(_month<_tmonth)||((_year==_tyear)&&(_month==_tmonth)&&(_day<_tday))){
return callback(new Error('设置的开始日期须≥今日日期'));
}else if(value>this.setForm.setDateStop){
return callback(new Error('设置的开始日期须≤结束日期'));
}else{
callback();
}
}
}
var checksetDateStop=(rule,value,callback)=>{
if (!value) {
return callback(new Error('请选择需要设置的结束日期'));
}else{//开始的日期必须≥今日日期 必须≤结束日期
var _year=Number(new Date(value).getYear()),_tyear=Number(new Date().getYear());
var _month=Number(new Date(value).getMonth()),_tmonth=Number(new Date().getMonth());
var _day=Number(new Date(value).getDate()),_tday=Number(new Date().getDate());
if((_year<_tyear)||(_month<_tmonth)||((_year==_tyear)&&(_month==_tmonth)&&(_day<_tday))){
return callback(new Error('设置的结束日期须≥今日日期'));
}
if(value<this.setForm.setDateStart){//≥开始日期
return callback(new Error('设置的结束日期须≥开始日期'));
}else{
callback();
}
}
}
return{
total:0,//默认数据总数
pagesize:15,//每页的数据条数
currentPage:1,//默认开始页面
SchedulesByMonth:[],//查询的每月的数据
// clubNameByMonth:'',//按月查出的会所名
//---------查询需要的数据
letters:['一','二','三','四','五','六','七','八','九','十','十一','十二','十三','十四','十五','十六','十七','十八','十九','二十','二十一','二十二','二十三','二十四'],//,
//clubName:'深大体验店',//当前选择的名称
clubNames:[],//请求出来的名称
businessHoursStart:'',
businessHoursStop:'',
getClubScheduleByDays:[],//查询出会所预约的表格数组对象
getClubScheduleByDayOne:{},//查询出预约的第一个对象
subscribeDate:new Date().Format("yyyy-MM-dd"),//'2018-01-03'
status:0,
// yueFeng:['2018-3','2018-4','2018-5'],
// index:-1,
// startT:((Number(this.setForm.setbusinessHoursStart.substring(0, 2))*60)+Number(this.setForm.setbusinessHoursStart.substring(3, 5))),
//stopT:((Number(this.setForm.setbusinessHoursStop.substring(0, 2))*60)+ Number(this.setForm.setbusinessHoursStop.substring(3,5))),
// startD:0,//不能这样定义，因为这样比较的时候，值始终会是0
// stopD:0,
//--------设置需要的数据,{period:['06:00','08:00']},{period:['08:00', '09:00']},{period:['09:00', '10:00']},{period:['10:00', '11:00']},{period:['11:00', '12:00']}{period:['12:00', '13:00']},{period:['13:00', '14:00']},{period:['14:00', '15:00']},{period:['15:00', '16:00']},{period:['16:00', '17:00']},{period:['17:00', '18:00']},{period:['18:00', '19:00']},{period:['19:00', '20:00']},{period:['20:00', '21:00']},{period:['21:00', '22:00']},{period:['22:00', '23:00']},{period:['23:00', '24:00']}
setForm:{
setclubName:'10000',//设置时选择的名称
setstatus:0,//是否工作日，0默认工作日
setbusinessHoursStart:'00:00',//营业开始时间
setbusinessHoursStop:'24:00',//营业结束时间
setPeriods:[
{period:['00:00', '24:00']},
], //默认的第一个时段，注意后台需要['06:30-11:30','13:30-14:30','14:30-15:30']
// setPeriods:['00:00-01:00'],//后台需要['06:30-11:30','13:30-14:30','14:30-15:30']
// period[0]:'',
// period[1]:'',
// setDate:'',//设置选择日期
setDateStart:'',
setDateStop:'',
yue: new Date().Format('yyyy-MM'),
},
//验证
ruleSetForm:{
setclubName:[{validator: checksetclubName, trigger: 'change'}],
setbusinessHoursStart:[{validator: checksetbusinessHoursStart, trigger: 'change blur'}],
setbusinessHoursStop:[{validator: checksetbusinessHoursStop, trigger: 'change blur'}],
setDateStart:[{validator: checksetDateStart, trigger: 'change blur'}],
setDateStop:[{validator: checksetDateStop, trigger: 'change blur'}],
// period:
//setDate:[{validator: checksetDate, trigger: 'blur change'}],//------setDateStart / setDateStop
}
}
},
methods:{//接口 /club/{managerId}//club/{managerId}/getAllClubNames
// rowSpanMethod({ row, column, rowIndex, columnIndex }){
// if (columnIndex === 2) {
// if (rowIndex % 2 === 0) {
// return {
// rowspan: 2,
// colspan: 1
// };
// } else {
// return {
// rowspan: 0,
// colspan: 0
// };
// }
// }
// },
current_change:function(currentPage){
this.currentPage = currentPage;
},
handleSizeChange(val) {
this.pagesize=val;
},
// tableRowStyle({row, rowIndex}){//根据日期上色不可实现，日期个数为不固定，没有规律可循，尝试奇数/偶数划分失败
//数字静态值
// if (rowIndex===0) {
// tmpDate=subscribeDate
// return 'background-color:#ebeef5';
// }
// else if (rowIndex===4) {
//
// return 'background-color:#ebeef5';
// }else{return '';}
//方法一：
// if(this.SchedulesByMonth){
//
// for(var i=0;i<this.SchedulesByMonth.length;i++){
// (function(aa,i){
//
// if((Number(aa[i].subscribeDate.slice(8))%2)===1){
//
// console.log('a-'+i);
// rowIndex=i;
// if (rowIndex===i) {
// console.log('b-'+rowIndex);
// return 'background-color:#ebeef5';
// }
//
// } })(this.SchedulesByMonth,i);
//
// }
// return '';
// }
tableRowStyle({row, rowIndex}){//根据日期上色可实现，日期个数为不固定
if((Number(row.subscribeDate.slice(8))%2)===0){
return 'background-color:#ebeef5';
} else{ return '';}
//方法二：刚开始显示一个颜色，然后在DATA里面保留一个日期，下一行判断日期跟这个暂存的日期是否一致，如果是就不管，如果不是就显示另一个颜色，然后把日期又保存一下
//参照 function(row){ const show=(row.row.parent ? (row.row.parent._expanded&&row.row.parent._show):ture)
// row.row._show=show
// return show ? '':'background-color:#ebeef5'}
// if (rowIndex===0) {
//
//
// this.tmpDate=row.subscribeDate;
// return 'background-color:#ebeef5';}
// else{
// for(var i=1;i<this.SchedulesByMonth.length;i++){
// if(Number(this.SchedulesByMonth[i].subscribeDate.slice(8))===Number(this.tmpDate.subscribeDate.slice(8)){
// return 'background-color:#ebeef5';
// }else{
// this.tmpDate=row[i+1].subscribeDate;
// return '';
// }
// }
// }
},
periodvalidator(rule,value,callback){
if (!value) {
return callback(new Error('时段不能位空'));
}
// setTimeout(()=>{
if(this.index==undefined||(this.index>=this.setForm.setPeriods.length)){
return callback();
}else if (this.index!=undefined&&this.setForm.setPeriods&&(this.index<this.setForm.setPeriods.length)){
console.log(this.setForm.setPeriods);
// console.log(this.setForm.setPeriods[this.index].period[1]);
// console.log(this.setForm.setPeriods.length);
// console.log((Number(this.setForm.setPeriods[this.setForm.setPeriods.length-1].period[1].substring(0, 2))*60)+ Number(this.setForm.setPeriods[this.setForm.setPeriods.length-1].period[1].substring(3,5)));
var stopD = (Number(this.setForm.setPeriods[this.index].period[1].substring(0, 2))*60)+ Number(this.setForm.setPeriods[this.index].period[1].substring(3,5));
console.log(stopD);
var startD =(Number(this.setForm.setPeriods[this.index].period[0].substring(0, 2))*60)+Number(this.setForm.setPeriods[this.index].period[0].substring(3, 5));
console.log(startD);
if(startD<((Number(this.setForm.setbusinessHoursStart.substring(0, 2))*60)+Number(this.setForm.setbusinessHoursStart.substring(3, 5)))){
return callback(new Error('时段时间设置开始时间应在营业时间范围内'));
}
if(stopD>((Number(this.setForm.setbusinessHoursStop.substring(0, 2))*60)+ Number(this.setForm.setbusinessHoursStop.substring(3,5)))){
return callback(new Error('时段时间设置结束时间应在营业时间范围内'));
}
if(this.setForm.setPeriods.length>1){
var stopE=(Number(this.setForm.setPeriods[this.setForm.setPeriods.length-2].period[1].substring(0, 2))*60)+ Number(this.setForm.setPeriods[this.setForm.setPeriods.length-2].period[1].substring(3,5));
var startE=(Number(this.setForm.setPeriods[this.setForm.setPeriods.length-1].period[0].substring(0, 2))*60)+Number(this.setForm.setPeriods[this.setForm.setPeriods.length-1].period[0].substring(3, 5));
if(startE<stopE){
return callback(new Error('本次时段设置开始时间应该大于上次时段的结束时间'));
}
}
if(startD>=stopD){
return callback(new Error('请选择时段结束时间'));
}
if (60 > stopD - startD) {
return callback(new Error('时段时间间隔最低为1小时'));
}
}else {
callback();
}
// },1000)
callback();
},
formatterStatus(row, column) {//后台为status：0 或1，转化成 显示为 汉字
console.log(66666666+row)
switch(row.status){
case 0:
return '是';
break;
case 1:
return '否';
break;
}
},
setSubmitYs(){ //快设时段
this.setForm.setbusinessHoursStart='00:00',//营业开始时间
this.setForm.setbusinessHoursStop='24:00',//营业结束时间
this.$set(this.setForm,'setPeriods',[
{period:['00:00', '01:00']},{period:['01:00', '02:00']},{period:['02:00', '03:00']},
{period:['03:00', '04:00']},{period:['04:00', '05:00']},{period:['05:00', '06:00']},
{period:['06:00', '07:00']},{period:['07:00', '08:00']},{period:['08:00', '09:00']},
{period:['09:00', '10:00']},{period:['10:00', '11:00']},{period:['11:00', '12:00']},
{period:['12:00', '13:00']},{period:['13:00', '14:00']},{period:['14:00', '15:00']},
{period:['15:00', '16:00']},{period:['16:00', '17:00']},{period:['17:00', '18:00']},
{period:['18:00', '19:00']},{period:['19:00', '20:00']},{period:['20:00', '21:00']},
{period:['21:00', '22:00']},{period:['22:00', '23:00']},{period:['23:00', '24:00']}
]);
},
setSubmitYz(){//预装设置(即查询结果赋到控件上)
this.setForm.setclubName=this.setForm.setclubName;
this.setForm.setDateStart=this.subscribeDate;
this.setForm.setDateStop=this.subscribeDate;
this.getClubScheduleByDayOne==''? this.$set(this.setForm,'setbusinessHoursStart','00:00'):this.setForm.setbusinessHoursStart=this.getClubScheduleByDayOne.businessHoursStart;//营业开始时间businessHoursStart:'',
this.getClubScheduleByDayOne==''? this.$set(this.setForm,'setbusinessHoursStop','24:00'):this.setForm.setbusinessHoursStop=this.getClubScheduleByDayOne.businessHoursStop;//营业结束时间
this.getClubScheduleByDayOne==''?this.$set(this.setForm,'setstatus',0):this.setForm.setstatus=this.getClubScheduleByDayOne.status;
/* this.setForm.setPeriods=[];
for(var i=0;i<this.getClubScheduleByDays.length;i++){//注意这里的period是后台返回过来的，i是这个请求过来的数组长度，也就是多少个预约时段
this.setForm.setPeriods.push(this.getClubScheduleByDays[i].period);
}
console.log(this.setForm.setPeriods);
*/
var arr=[],objArr=[];
for(var i=0;i<this.getClubScheduleByDays.length;i++){//var arr=[['00:00','01:00'],['01:00','02:00'],['02:00','03:00'],['03:00','04:00']];变成
arr.push(this.getClubScheduleByDays[i].period.split('-'))
var obj={
period:arr[i]
}
objArr.push(obj)
}
this.getClubScheduleByDayOne==''? this.$set(this.setForm,'setPeriods',[{period:['', '']},]):this.$set(this.setForm,'setPeriods',objArr)
},
getAllClubNames(){
let that=this;
that.axios.get('/club/100/getAllClubNames').then((res)=>{
that.clubNames=res.data.list;
console.log(that.clubNames);
})
},
getClubScheduleByDay(aa,bb){//查询会所的设置/Subscribe/{managerId}/getClubScheduleByDay
let that=this;
if(aa==undefined||aa==''){return}
that.axios.get('/Subscribe/100/getClubScheduleByDay',{//通过会所名称，会所的日期（某天），查询出会所的时间段
params: {
// clubName:aa,
clubId:aa,
subscribeDate:bb
}}).then((res)=>{
console.log(res.data);
for(var i=0;i<res.data.length;i++){
if(res.data[i].businessHoursStart==null){
res.data[i].businessHoursStart="";
}else if(res.data[i].businessHoursStop==null){
res.data[i].businessHoursStop="";
}else{
res.data[i].businessHoursStart=res.data[i].businessHoursStart.slice(0,5);
res.data[i].businessHoursStop=res.data[i].businessHoursStop.slice(0,5);
}
}
that.getClubScheduleByDays=res.data;
that.SchedulesByMonth=res.data;
that.total=res.data.length;
that.getClubScheduleByDayOne=res.data[0]? res.data[0]:'';//防止没哟数据报错
if(that.getClubScheduleByDayOne.status==1){//如果为休息日，需要默认的设置
that.setForm.setstatus=1;
that.setForm.setDateStart=that.subscribeDate;
that.setForm.setDateStop=that.subscribeDate;
that.$set(that.setForm,'setbusinessHoursStart','00:00');
that.$set(that.setForm,'setbusinessHoursStop','24:00');
that.$set(that.setForm,'setPeriods',[{period:['', '']},])
}else{
console.log(that.getClubScheduleByDays);
if(that.getClubScheduleByDays==''){
that.status=0;//任何情况默认是 工作状态（假想用户可能需要设置）
that.$message({
message: that.clubName+"---该日期没有设置预约！",
});
}else{
that.status=res.data[0].status? res.data[0].status:0;
}
that.setSubmitYz();
console.log(that.getClubScheduleByDays);
}
}).catch((error)=>console.log(error))
},
//通过选定的名称和日期，显示
getClubSubDate(){//----------------记得改clubName为setclubName
let clubName=this.setForm.setclubName;//this.clubName;
let subscribeDate=this.subscribeDate;
this.getClubScheduleByDay(clubName,subscribeDate);
},
//按月查询预约/Subscribe/{managerId}/getClubSchedulesByMonth（一般按日查询显示，按月预留）
getClubSchedulesByMonth(){
let that=this;
console.log(that.setForm.yue);//?clubName=%E7%93%B60&month=2018-04
that.axios.get('/Subscribe/100/getClubSchedulesByMonth?clubId='+that.setForm.setclubName+'&month='+that.setForm.yue//{
// params: {
// clubName:that.setForm.setclubName,
// month:that.setForm.yue,
//
// }}
).then((res)=>{
this.SchedulesByMonth = res.data;
that.total=res.data.length;
/* var clubId;
for(var i=0;i<res.data.length;i++){
clubId=res.data[i].clubId;
}
this.axios.get('/club/100/getClub/'+clubId).then((response)=>{// GET /club/{managerId}/getClub/{clubId}通过会所的clubId查找会所
for(var i=0;i<this.SchedulesByMonth.length;i++){
//this.SchedulesByMonth[i].clubNameByMonth=response.data.name;
this.$set(this.SchedulesByMonth[i],'clubNameByMonth',response.data.name)
}
}).catch((error)=>console.log(error))*/
}).catch((error)=>console.log(error))
},
//设置新增时间段
addPeriod(){
//this.index=index;
this.setForm.setPeriods.push({
period:['',''],//this.period
key: Date.now()
});
},
//
addperiodchange(index){
this.index=index;
},
//删除当前行的时间段
deletePeriod(index){
this.setForm.setPeriods.splice(index,1)
},
setPeriodsFormat(setPeriods){//把periods转化成：periods2=[];for(var i=0;i<periods.length;i++){periods2.push(periods[i].join('-'))}
if(setPeriods&&setPeriods.length!=0){
var arr5=["06:30","07:30"];console.log(arr5);
var str5='你好';console.log(str5);
var str6='["06:30","07:30"]';console.log(str6);
var arr2=[];
var arr3=[];
var allarr=[];
var allArr=[];
console.log('setPeriods'+setPeriods);
for(var i=0;i<setPeriods.length;i++){
var str=JSON.stringify(setPeriods[i]);//把对象转化成'{"period":["06:30","11:30"]}' '{"period":["12:30","13:30"]}'
console.log('str1'+str);
str=str.substring((str.indexOf(':')+1),(str.length-1));//找个值‘["06:30","11:30"]’ ‘["12:30","13:30"]’
console.log('str2'+str);
arr3=str.split('"'); // [,06:30,,,11:30,]
console.log('arr3'+arr3);
arr2=[arr3[1],arr3[3]];//把arr3数组里面的两元素直接放入数组形成，[06:30,11:30]
console.log('arr2'+arr2);
allarr.push(arr2);//数组里面装数组allarr=[[06:30,11:30],[12:30,13:30]]
console.log('allarr'+allarr);
}
for(var j=0;j<allarr.length;j++){
var allstr=allarr[j].join('-');//"06:30-11:30" "12:30-13:30"
allArr.push(allstr)//["06:30-11:30","12:30-13:30"]
console.log('allArr'+allArr);
}
return allArr;
}
},
insert_flg(str,flg,sn){//字符串的插入
var newstr="";
for(var i=0;i<str.length;i+=sn){
var tmp=str.substring(i, i+sn);
newstr+=tmp+flg;
}
return newstr;
},
//提交表单
setSubmit(setForm){// 接口http://192.168.10.15:8084/Subscribe/100/editClubSchedule/that.setForm.setclubName
let that=this;
that.$refs[setForm].validate((valid)=>{
if(valid){
that.$confirm('验证成功,是否继续?', '温馨提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
console.log(that.setForm.setbusinessHoursStart);
console.log(typeof that.setForm.setbusinessHoursStart);
var setbusinessHoursStart=that.insert_flg(that.setForm.setbusinessHoursStart,":00",5);
console.log(typeof setbusinessHoursStart);
var setbusinessHoursStop=that.insert_flg(that.setForm.setbusinessHoursStop,":00",5);
that.axios.post('/Subscribe/100/editClubSchedule/',{//setPeriods:[{period:['08:30', '10:30']},{period:['10:30', '12:30']},{period:['13:30', '14:30']}]
// clubName:that.setForm.setclubName,
clubId:that.setForm.setclubName,
subscribeDates:[that.setForm.setDateStart,that.setForm.setDateStop],//that.setForm.setDater日期设置
businessHoursStart:setbusinessHoursStart,//营业时间开始
businessHoursStop:setbusinessHoursStop,//营业时间结束
periods:that.setPeriodsFormat(that.setForm.setPeriods),//需要转['08:30-10:30','10:30-12:30','13:30-14:30']
//periods:that.setForm.setPeriods,
status:that.setForm.setstatus,
}).then((res)=>{
that.$message({
message: "预约设置成功！",
type: "success"
});
if(that.setForm.setDateStart==that.setForm.setDateStop){
that.getClubSubDate();
}else{
that.getClubSchedulesByMonth();//刷新添加的设置
}
// that.setForm.setclubName='';
// that.setForm.setDate='';
// that.setForm.setbusinessHoursStart='';
// that.setForm.setbusinessHoursStop='';
// that.setForm.setPeriods=[{period:['', '']}];
// that.resetForm(setForm);//取消验证结果
}).catch((error)=>{console.log(error)})
}).catch(() => {
that.$message({
type: 'info',
message: '已取消设置预约'
});
// that.setForm.setclubName='';
// that.setForm.setDate='';
// that.setForm.setbusinessHoursStart='';
// that.setForm.setbusinessHoursStop='';
// that.setForm.setPeriods=[{period:['', '']}];
that.resetForm(setForm);//取消验证结果
});
}else{
that.$message({
message: "error submit",
type:'error'
});
return false;
}
})
},
resetForm(setForm) {//取消验证结果信息，清空表单内容
this.$refs[setForm].resetFields();
}
},
created(){
let that=this;
that.getAllClubNames();
that.getClubSubDate();//加载页面默认时数据调用
}
}
</script>
<style scoped="scoped" >
.mtop10{margin-top:10px;}
.mtop6{margin-top:6px;}
.mleft85{margin-left:85px;}
.mbot15{margin-bottom:15px;}
/*去掉li标签的.*/
ul li{list-style-type: none;}
.greenyellow{background-color:#CBECF4;}
</style>
94
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
