loumengning
/
hbp

<!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>