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>ID：</span>
            <el-input v-model="search.id" style="width: 120px;" placeholder="请输入内容"></el-input>
            <span>名称：</span>
            <el-input v-model="search.plan_name" style="width: 120px;" placeholder="请输入内容"></el-input>
            <span>酒店</span>
            <el-select v-model="search.hotel_id" placeholder="请选择" style="width: 120px;" clearable>
                <el-option
                        v-for="item in hotelList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                </el-option>
            </el-select>
            <span>房型</span>
            <el-select v-model="search.room_id" placeholder="请选择" style="width: 120px;" clearable>
                <el-option
                        v-for="item in roomList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                </el-option>
            </el-select>
            <span>采购负责人</span>
            <el-select v-model="search.purchase_user_id" placeholder="请选择" style="width: 120px;" clearable>
                <el-option
                        v-for="item in userList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                </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="plan_name" label="名称"  min-width="120"></el-table-column>
            <el-table-column label="酒店" :formatter="getHotelName" min-width="180"></el-table-column>
            <el-table-column  label="房型"  :formatter="getRoomName" min-width="180"></el-table-column>
            <el-table-column prop="breakfast_num" label="早餐数量"  min-width="60"></el-table-column>
            <el-table-column prop="book_end_day" label="提前几天预定"  min-width="60"></el-table-column>
            <el-table-column prop="book_end_hour" label="几点前预定"  min-width="60"></el-table-column>
            <el-table-column prop="continuity_type" label="入住类型" :formatter="getTypeName"  min-width="60"></el-table-column>
            <el-table-column prop="coutinuity_day" label="连续入住天数"  min-width="60"></el-table-column>
            <el-table-column prop="plan_memo" label="方案说明"  min-width="60">
                <template slot-scope="scope">
                    <el-popover
                            placement="top-start"
                            title=""
                            width="200"
                            trigger="hover"
                            :content="scope.row.plan_memo">
                        <div slot="reference" v-html="scope.row.plan_memo" style="overflow:hidden;white-space: nowrap;"></div>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column prop="purchase_user_id" label="采购负责人" :formatter="getPurchaseName" min-width="90"></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="140px" style="width: 100%;padding-bottom: 20px">
                <el-form-item v-if="editType" label="ID："  style="width: 100%">
                    <div v-html="editData.id"></div>
                </el-form-item>
                <el-form-item  label="名称：" style="width: 100%">
                    <el-input v-model="editData.plan_name" style="width: 280px;" placeholder="请输入内容"></el-input>
                </el-form-item>
                <el-form-item  label="酒店：" style="width: 100%">
                    <el-select v-model="editData.hotel_id" placeholder="请选择" style="width: 120px;" clearable>
                        <el-option
                                v-for="item in hotelList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item  label="房型：" style="width: 100%">
                    <el-select v-model="editData.room_id" placeholder="请选择" style="width: 120px;" clearable>
                        <el-option
                                v-for="item in editRoomList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item  label="早餐数量：" style="width: 100%">
                    <el-input v-model="editData.breakfast_num" style="width: 280px;" placeholder="请输入内容"></el-input>
                </el-form-item>
                <el-form-item  label="提前预定天数：" style="width: 100%">
                    <el-input v-model="editData.book_end_day" style="width: 280px;" placeholder="请输入内容"></el-input>
                </el-form-item>
                <el-form-item  label="几点前预定：" style="width: 100%">
                    <el-input v-model="editData.book_end_hour" style="width: 280px;" placeholder="请输入内容"></el-input>
                </el-form-item>
                <el-form-item  label="连续入住类型：" style="width: 100%">
                    <el-radio-group v-model="editData.continuity_type" size="small">
                        <el-radio-button :label="0">无限制</el-radio-button>
                        <el-radio-button :label="1">连住几晚</el-radio-button>
                        <el-radio-button :label="2">连住几晚及以上</el-radio-button>
                        <el-radio-button :label="3">连住几晚及其倍数</el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <el-form-item v-if="editData.continuity_type != 0"  label="连续入住天数：" style="width: 100%">
                    <el-input v-model="editData.coutinuity_day" style="width: 280px;" placeholder="请输入内容"></el-input>
                </el-form-item>
                <el-form-item  label="采购负责人：" style="width: 100%">
                    <el-select v-model="editData.purchase_user_id" placeholder="请选择" style="width: 120px;" clearable>
                        <el-option
                                v-for="item in userList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item  label="方案说明：" style="width: 100%">
                    <el-input
                            type="textarea"
                            :rows="4"
                            placeholder="请输入内容"
                            v-model="editData.plan_memo">
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary"  @click="editDoing()" style="margin: 10px" > 保 存 </el-button>
                </el-form-item>
            </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: {
                    id:"",
                    hotel_id: "",
                    room_id: "",
                    purchase_user_id:"",
                    plan_name:"",
                    pageSize:10,
                    pageNum: 1
                },
                total: 0,
                tableData: [],
                editShow: false,
                editType: false,
                editData: {
                },
                hotelList:[],
                roomList:[],
                editRoomList:[],
                roomAllList:[],
                userList: [],
                //连续入住类型 0无限制 1连住几晚 2连住几晚及以上 3连住几晚及其倍数
                typeList:[
                    {id:0,name:"无限制"},
                    {id:1,name:"连住几晚"},
                    {id:2,name:"连住几晚及以上"},
                    {id:3,name:"连住几晚及其倍数"}
                ],
                edit_city_set:2
            }
        },
        created() {
            this.getHotelList();
            this.getRoomAllList();
            this.getAdminUser();
            this.getData(1)
        },
        watch: {
            "search.hotel_id" : function (newVal,oldVal){
                this.roomList = []
                axios.post("/hotel.php/cf_room_info/getRoomList?hotelId="+newVal, {}).then((response) => {
                    let data = response.data;
                    this.roomList = data.list;
                }).catch(function (error) {
                    console.log(error);
                });
            },
            "editData.hotel_id" : function (newVal,oldVal){
                if (this.edit_city_set==2) {
                    this.editRoomList = []
                    this.editData.room_id = ""
                }
                if (newVal == "") {
                    return false
                }
                axios.post("/hotel.php/cf_room_info/getRoomList?hotelId="+newVal, {}).then((response) => {
                    let data = response.data;
                    this.editRoomList = data.list;
                    this.edit_city_set++
                }).catch(function (error) {
                    console.log(error);
                });
            },
            "editData.continuity_type" : function (newVal,oldVal) {
                if (newVal == 0) {
                    this.editData.coutinuity_day = 0;
                }
            }
        },
        methods: {
            getPurchaseName(info) {
                for (let i = 0; i < this.userList.length; i++) {
                    if (this.userList[i].id == info.purchase_user_id) {
                        return this.userList[i].name
                    }
                }
                return "-"
            },
            getTypeName(info) {
                for (let i = 0; i < this.typeList.length; i++) {
                    if (this.typeList[i].id == info.continuity_type) {
                        return this.typeList[i].name
                    }
                }
                return "-"
            },
            getHotelName(info) {
                for (let i = 0; i < this.hotelList.length; i++) {
                    if (this.hotelList[i].id == info.hotel_id) {
                        return this.hotelList[i].name
                    }
                }
                return "-"
            },
            getRoomName(info) {
                for (let i = 0; i < this.roomAllList.length; i++) {
                    if (this.roomAllList[i].id == info.room_id) {
                        return this.roomAllList[i].name
                    }
                }
                return "-"
            },
            getRoomAllList(){
                axios.post("/hotel.php/cf_room_info/getList", this.search).then((response) => {
                    this.roomAllList = response.data.list;
                }).catch(function (error) {
                    console.log(error);
                });
            },
            getAdminUser() {
                axios.post("/hotel.php/auth/admin/getList", this.search).then((response) => {
                    this.userList = response.data.list;
                }).catch(function (error) {
                    console.log(error);
                });
            },
            getHotelList(){
                axios.post("/hotel.php/cf_hotel_info/getHotelList", {}).then((response) => {
                    let data = response.data;
                    this.hotelList = data.list;
                }).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_room_plan/list", 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_id:"",
                        room_id:"",
                        plan_name:"",
                        breakfast_num:0,
                        book_end_day:0,
                        book_end_hour:0,
                        continuity_type:0,
                        coutinuity_day:0,
                        plan_memo:"",
                        purchase_user_id:"",
                    }
                } else {
                    this.edit_city_set = 1;
                    this.editType = true;
                    this.editData = {
                        id:info.id,
                        hotel_id:info.hotel_id,
                        room_id:info.room_id,
                        plan_name:info.plan_name,
                        breakfast_num:info.breakfast_num,
                        book_end_day:info.book_end_day,
                        book_end_hour:info.book_end_hour,
                        continuity_type:info.continuity_type,
                        coutinuity_day:info.coutinuity_day,
                        plan_memo:info.plan_memo,
                        purchase_user_id:info.purchase_user_id,
                    }
                }
                this.editShow = true;
            },
            editDoing(){
                if (this.editData.hotel_id==''){
                    this.$message.error("请选择酒店");return false;
                }
                if (this.editData.room_id==''){
                    this.$message.error("请选择房型");return false;
                }
                if (this.editData.plan_name==''){
                    this.$message.error("名称不能为空");return false;
                }
                if (this.editData.breakfast_num===''){
                    this.$message.error("早餐数量不能为空");return false;
                }
                if (this.editData.book_end_day===''){
                    this.$message.error("提前几天预定不能为空");return false;
                }
                if (this.editData.book_end_hour===''){
                    this.$message.error("几点前预定不能为空");return false;
                }
                if (this.editData.coutinuity_day===''){
                    this.$message.error("连续入住天数不能为空");return false;
                }
                if (this.editData.purchase_user_id==''){
                    this.$message.error("请选择采购负责人");return false;
                }
                axios.post("/hotel.php/cf_room_plan/save", this.editData).then( (response)=> {
                    let data = response.data;
                    console.log(this.tableData);
                    if (data.flag) {
                        this.$message.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_room_plan/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.info("已取消");
                    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>