<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app" class="table">
<div>
<div class="header-search">
<span>名称：</span>
<el-input v-model="search.hotel_name" style="width: 120px;" placeholder="请输入内容"></el-input>
<span>手机号：</span>
<el-input v-model="search.hotel_phone" style="width: 120px;" placeholder="请输入内容"></el-input>
<span>省份</span>
<el-select v-model="search.province" placeholder="请选择" style="width: 120px;" clearable>
<el-option
v-for="item in province"
:key="item.value"
:label="item.name"
:value="item.value">
</el-option>
</el-select>
<span>市</span>
<el-select v-model="search.city" placeholder="请选择" style="width: 120px;" clearable>
<el-option
v-for="item in city"
:key="item.value"
:label="item.name"
:value="item.value">
</el-option>
</el-select>
<span>区</span>
<el-select v-model="search.area" placeholder="请选择" style="width: 120px;" clearable>
<el-option
v-for="item in area"
:key="item.value"
:label="item.name"
:value="item.value">
</el-option>
</el-select>
<el-button type="primary" icon="el-icon-search" @click="getData(1)">搜索</el-button>
<el-button type="primary" icon="el-icon-plus" @click="edit(null)">新增</el-button>
</div>
<el-table ref="multipleTable" :data="tableData" border tooltip-effect="dark"
style="font-size:12px;width: 100%;margin-top: 12px">
<el-table-column prop="id" label="酒店ID" min-width="50"></el-table-column>
<el-table-column prop="hotel_name" label="名称" min-width="180"></el-table-column>
<el-table-column prop="hotel_phone" label="手机号" min-width="100"></el-table-column>
<el-table-column prop="province_name" label="省" min-width="90"></el-table-column>
<el-table-column prop="city_name" label="市" min-width="90"></el-table-column>
<el-table-column prop="area_name" label="区" min-width="90"></el-table-column>
<el-table-column prop="detail_address" label="详细地址" min-width="250"></el-table-column>
<el-table-column prop="create_time" label="创建时间" min-width="80"></el-table-column>
<el-table-column prop="update_time" label="更新时间" min-width="80"></el-table-column>
<el-table-column label="操作" min-width="180">
<template slot-scope="scope">
<el-button-group>
<el-button type="primary" size="mini" @click="edit(scope.row)" icon="el-icon-edit">编辑</el-button>
<el-button type="danger" size="mini" icon="el-icon-delete" @click="delAll(scope.row.id)">删除</el-button>
</el-button-group>
</template>
</el-table-column>
</el-table>
<el-pagination
:page-size="search.pageSize"
:pager-count="11"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
:current-page="search.pageNum"
:page-sizes="[10, 20, 30, 40, 50]"
@size-change="sizeChange"
@current-change="getData"
@prev-click="getData"
@next-click="getData"
></el-pagination>
</div>
<transition name="bounce" v-if="editShow">
<el-dialog title="付款单详情" :visible.sync="editShow" width="90%" top="15px">
<el-form ref="form" label-width="100px" style="width: 100%;padding-bottom: 20px">
<div style="display: flex;width: 100%">
<el-form-item v-if="editType" label="ID：" style="width: 80%">
<div v-html="editData.id"></div>
</el-form-item>
</div>
<div>
<el-form-item label="名称：" style="width: 80%">
<el-input v-model="editData.hotel_name" style="width: 280px;" placeholder="请输入内容"></el-input>
</el-form-item>
</div>
<div>
<el-form-item label="手机号：" style="width: 80%">
<el-input v-model="editData.hotel_phone" style="width: 120px;" placeholder="请输入内容"></el-input>
</el-form-item>
</div>
<div style="display: flex">
<el-form-item label="省：" >
<el-select v-model="editData.province" placeholder="请选择" style="width: 120px;" clearable>
<el-option v-for="item in province" :key="item.value" :label="item.name" :value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="市：" >
<el-select v-model="editData.city" placeholder="请选择" style="width: 120px;" clearable>
<el-option v-for="item in edit_city" :key="item.value" :label="item.name" :value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="区：" >
<el-select v-model="editData.area" placeholder="请选择" style="width: 120px;" clearable>
<el-option v-for="item in edit_area" :key="item.value" :label="item.name" :value="item.value"></el-option>
</el-select>
</el-form-item>
</div>
<div>
<el-form-item label="详细地址：" style="width: 80%">
<el-input v-model="editData.detail_address" style="width: 580px;" placeholder="请输入内容"></el-input>
</el-form-item>
</div>
<div>
<el-button type="primary" @click="editDoing()" >保存</el-button>
</div>
</el-form>
</el-dialog>
</transition>
</div>
</body>
<!-- import Vue before Element -->
<script src="/assets/js/vue/vue.js"></script>
<!-- import JavaScript -->
<script src="/assets/js/vue/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
new Vue({
el: '#app',
data: function () {
return {
search: {
hotel_name: "",
hotel_phone: "",
province:"",
city:"",
area: "",
pageSize:10,
pageNum: 1
},
total: 0,
tableData: [],
editShow: false,
editType: false,
editData: {
},
province: [],
city: [],
area:[],
edit_city_set:3,
edit_city: [],
edit_area:[],
}
},
created() {
this.getProvince();
this.getData(1)
},
watch: {
"search.province" : function (newVal,oldVal){
this.city = []
this.area = []
this.search.city=""
this.search.area=""
if (newVal==''){
return false;
}
let row = {
"province":newVal
}
axios.post("/hotel.php/ajax/areaList", row).then((response) => {
let data = response.data;
if (data.flag) {
this.city = data.data;
} else {
this.$message.error(data.msg);
}
}).catch(function (error) {
console.log(error);
});
},
"search.city" : function (newVal,oldVal){
this.area = []
this.search.area=""
if (newVal == "") {
return false;
}
let row = {
province:this.search.province,
city:newVal
}
axios.post("/hotel.php/ajax/areaList", row).then((response) => {
let data = response.data;
if (data.flag) {
this.area = data.data;
} else {
this.$message.error(data.msg);
}
}).catch(function (error) {
console.log(error);
});
},
"editData.province" : function (newVal,oldVal){
if (this.edit_city_set==3) {
this.edit_city = []
this.edit_area = []
this.editData.city=""
this.editData.area=""
}
if (newVal==''){
return false;
}
let row = {
"province":newVal
}
axios.post("/hotel.php/ajax/areaList", row).then((response) => {
let data = response.data;
if (data.flag) {
this.edit_city = data.data;
this.edit_city_set++;
} else {
this.$message.error(data.msg);
}
}).catch(function (error) {
console.log(error);
});
},
"editData.city" : function (newVal,oldVal){
if (this.edit_city_set==3) {
this.edit_area = []
this.editData.area=""
}
if (newVal == "") {
return false;
}
let row = {
province:this.editData.province,
city:newVal
}
axios.post("/hotel.php/ajax/areaList", row).then((response) => {
let data = response.data;
if (data.flag) {
this.edit_area = data.data;
this.edit_city_set++;
} else {
this.$message.error(data.msg);
}
}).catch(function (error) {
console.log(error);
});
}
},
methods: {
getProvince(){
axios.post("/hotel.php/ajax/areaList", {}).then((response) => {
let data = response.data;
if (data.flag) {
this.province = data.data;
} else {
this.$message.error(data.msg);
}
}).catch(function (error) {
console.log(error);
});
},
sizeChange(pageSize) {
this.search.pageSize = pageSize;
this.getData(this.search.pageNum)
},
//獲取列表
getData(page) {
this.search.pageNum = page;
axios.post("/hotel.php/cf_hotel_info/getList", this.search).then((response) => {
let data = response.data;
if (data.flag) {
this.tableData = data.data.list;
this.total = data.data.total;
} else {
this.$message.error(response.msg);
}
}).catch(function (error) {
console.log(error);
});
},
edit(info) {
if (info == null) {
this.editType = false;
this.editData = {
hotel_name: "",
hotel_phone: "",
province:"",
city:"",
area: "",
detail_address:""
}
} else {
this.edit_city_set = 1;
this.editType = true;
this.editData = {
id:info.id,
hotel_name: info.hotel_name,
hotel_phone: info.hotel_phone,
province:info.province,
province_name:info.province_name,
city:info.city,
city_name:info.city_name,
area: info.area,
area_name:info.area_name,
detail_address:info.detail_address
}
}
this.editShow = true;
},
setAreaName(){
for (let i = 0; i < this.province.length; i++) {
if (this.province[i].value == this.editData.province) {
this.editData.province_name = this.province[i].name;
break
}
}
for (let i = 0; i < this.edit_city.length; i++) {
if (this.edit_city[i].value == this.editData.city) {
this.editData.city_name = this.edit_city[i].name;
break
}
}
for (let i = 0; i < this.edit_area.length; i++) {
if (this.edit_area[i].value == this.editData.area) {
this.editData.area_name = this.edit_area[i].name;
break;
}
}
},
editDoing(){
if (this.editData.hotel_name==''){
this.$message.error("名称不能为空");return false;
}
if (this.editData.hotel_phone==''){
this.$message.error("手机号不能为空");return false;
}
if (this.editData.province==''){
this.$message.error("省不能为空");return false;
}
if (this.editData.city==''){
this.$message.error("市不能为空");return false;
}
if (this.editData.area==''){
this.$message.error("区不能为空");return false;
}
this.setAreaName();
axios.post("/hotel.php/cf_hotel_info/save", this.editData).then( (response)=> {
let data = response.data;
console.log(this.tableData);
if (data.flag) {
this.$message({
message: '保存成功！',
type: 'success'
});
this.editShow = false;
this.getData(1);
} else {
this.$message.error(data.msg);
}
}).catch(function (error) {
this.$message.error("保存失败");
console.log(error);
});
},
delAll(id){
this.$confirm('确定删除酒店?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let param = {
id: id
}
axios.post("/hotel.php/cf_hotel_info/delAll", param).then((response) => {
let data = response.data;
if (data.flag) {
this.getData(this.search.pageNum)
this.$message.success("保存成功");
} else {
this.$message.error(response.msg);
}
}).catch(function (error) {
console.log(error);
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消'
});
this.getData(this.search.pageNum)
})
}
}
})
</script>
<style lang="scss" scoped>
.el-table thead {
background-color: #5a5e66 !important;
}
.header-search {
font-size: 14px;
font-weight: 900;
}
body {
background-color: white;
}
.table {
width: 100%;
font-size: 12px;
margin-top: 12px;
background-color: white;
}
.el-form-item{
margin-bottom: 5px !important;
}
</style>
</html>