左侧导航栏element -2024/11/27 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <style>
/*<!--        调整页面背景颜色-->*/
        body{
            background-color: #eef1f6;
        }
        .el-row {
            display: flex;
            height: 100vh; /* 设置高度为视口高度 */
        }

        .el-col {
            display: flex;
            flex-direction: column;
        }

        .el-menu {
            flex-grow: 1;
        }
    </style>
</head>
<body>
<div id="app">
    <el-row>
<!--     导航页   -->
        <el-col :span="3">
            <el-menu
                    default-active="0"
                    class="el-menu-vertical-demo"
                    @select="handleSelect"
                    background-color="#303133"
                    text-color="#fff"
                    active-text-color="#ffd04b">
                <h3 style="text-align: center; background-color: yellow">酒店客房管理系统</h3>
                <el-menu-item index="0">首页</el-menu-item>
                <el-submenu index="1">
                    <template slot="title">
                        <span>系统管理</span>
                    </template>
                        <el-menu-item index="1-1">用户管理</el-menu-item>
                        <el-menu-item index="1-2">日志管理</el-menu-item>
                </el-submenu>
                <el-submenu index="2">
                    <template slot="title">
                        <span>报表管理</span>
                    </template>
                    <el-menu-item index="2-1">预定客人报表</el-menu-item>
                    <el-menu-item index="2-2">在线客人报表</el-menu-item>
                    <el-menu-item index="2-3">离店客人报表</el-menu-item>
                    <el-menu-item index="2-4">财务进账报表</el-menu-item>
                </el-submenu>
                <el-submenu index="3">
                    <template slot="title">
                        <span>房客管理</span>
                    </template>
                    <el-menu-item index="3-1">客房预定管理</el-menu-item>
                    <el-menu-item index="3-2">入住登记管理</el-menu-item>
                    <el-menu-item index="3-3">预定转入住</el-menu-item>
                    <el-menu-item index="3-4">换房管理</el-menu-item>
                    <el-menu-item index="3-5">结账管理</el-menu-item>
                </el-submenu>
                <el-submenu index="4">
                    <template slot="title">
                        <span>客房管理</span>
                    </template>
                    <el-menu-item index="4-1">客房信息管理</el-menu-item>
                </el-submenu>
                <el-submenu index="5">
                    <template slot="title">
                        <span>消费管理</span>
                    </template>
                    <el-menu-item index="5-1">附加消费入账</el-menu-item>
                </el-submenu>
                <el-submenu index="6">
                    <template slot="title">
                        <span>基础信息管理</span>
                    </template>
                    <el-menu-item index="6-1">客房类型管理</el-menu-item>
                    <el-menu-item index="6-2">楼层管理</el-menu-item>
                    <el-menu-item index="6-3">商品类别管理</el-menu-item>
                    <el-menu-item index="6-4">商品管理</el-menu-item>
                    <el-menu-item index="6-5">会员管理管理</el-menu-item>
                </el-submenu>
                <el-menu-item index="7">
                    <span><a href="login.html">退出登录</a></span>
                </el-menu-item>
            </el-menu>
        </el-col>
<!--    首页  -->
        <el-col :span="21" v-if="this.page == 0">
            <center><h1>欢迎使用酒店客房管理系统</h1></center>
            <h2>你是{{user.position}}</h2>
        </el-col>

        <el-col :span="21" v-if="this.page == '6-1'">
            <h1>客房管理</h1>
            <el-divider></el-divider>
            <el-button style="width: 150px" type="primary" @click="addRoomType()">新增客房类型</el-button>
            <el-table
                    :data="roomTypeTableData"
                    border
                    style="width: 100%">
                <el-table-column
                        type="index"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="type"
                        label="客房类型"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="capacity"
                        label="额定容量"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="note"
                        label="备注"
                        align="center">
                </el-table-column>
                <el-table-column label="操作" width="200" align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="editRoomType(scope.row)">编辑</el-button>
                        <el-button type="danger" size="mini" @click="deleteRoomType(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
    </el-row>

    <div id="dialog">
<!--     新增客房类型对话框   -->
        <el-dialog title="新增客房类型" :visible.sync="addRoomTypeFormVisible">
            <el-form :model="roomType">
                <el-form-item  label="类型名" label-width="120px" :rules="[{ required: true, message: '请输入客房类型名', trigger: 'blur' }]">
                    <el-input v-model="roomType.type"></el-input>
                </el-form-item>
                <el-form-item label="额定人数" label-width="120px" :rules="[{ required: true, message: '请输入额定人数', trigger: 'blur' }]">
                    <el-input v-model="roomType.capacity"></el-input>
                </el-form-item>
                <el-form-item label="备注" label-width="120px">
                    <el-input type="textarea" v-model="roomType.note"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addRoomTypeFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="summitRoomType">提 交</el-button>
            </div>
        </el-dialog>
        <el-dialog title="编辑客房类型" :visible.sync="editRoomTypeFormVisible">
            <el-form :model="roomType">
                <el-form-item  label="类型名" label-width="120px" >
                    <el-input v-model="roomType.type"></el-input>
                </el-form-item>
                <el-form-item label="额定人数" label-width="120px">
                    <el-input v-model="roomType.capacity"></el-input>
                </el-form-item>
                <el-form-item label="备注" label-width="120px">
                    <el-input type="textarea" v-model="roomType.note"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editRoomTypeFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateRoomType">确 定</el-button>
            </div>
        </el-dialog>

    </div>

</div>


<script src="js/vue.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                roomType:{
                    id:'',
                  type:'',
                  capacity:'',
                  note:''
                },
                // 新增客房类型表单显示
                addRoomTypeFormVisible: false,
                // 编辑客房类型表单显示
                editRoomTypeFormVisible: false,
                // 用户信息
                user:{
                    position:''
                },
                // 当前页面
                page:'0',
                // 客房类型表
                roomTypeTableData:[],
            }
        },
        methods: {
            // 更新客房类型
            updateRoomType(){
                axios({
                    method: 'post',
                    url: "http://localhost:8080/Hotel_1.0/roomType/update",
                    data: this.roomType
                }).then(res => {
                    if (res.data == 'success') {
                        this.$message.success('修改成功');
                        this.editRoomTypeFormVisible = false;
                        this.selectAll();
                    } else {
                        this.$message.error('修改失败');
                    }
                })
            },
            // 编辑客房类型
            editRoomType(index, row){
                console.log(row);
                this.editRoomTypeFormVisible = true;
                this.roomType = row;
            },
            deleteRoomType(row){
                this.$confirm('此操作将删除该客房类型, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios({
                        method: 'get',
                        url: "http://localhost:8080/Hotel_1.0/roomType/deleteById",
                        params: {
                            id:row.id
                        }
                    }).then(res => {
                        if (res.data == 'success') {
                            this.$message.success('删除成功');
                            this.selectAll();
                        } else {
                            this.$message.error('删除失败');
                        }
                    })
                    })
                .catch(() => {
                    this.$message.info('已取消删除');
                });
            },
            summitRoomType(){
                axios({
                    method: 'post',
                    url: "http://localhost:8080/Hotel_1.0/roomType/add",
                    data: this.roomType
                }).then(res => {
                    if (res.data == 'success') {
                        this.$message.success('添加成功');
                        this.addRoomTypeFormVisible = false;
                        this.selectAll();
                    } else {
                        this.$message.error('添加失败');
                    }
                });
            },
            // 新增客房类型
            addRoomType(){
                this.addRoomTypeFormVisible = true;
            },
            // 导航栏
            handleSelect(key,keyPath){
                this.page = key;
                if(key=='6-1'){
                    this.selectAll();
                }
            },
            selectAll(){
                axios({
                    method:'get',
                    url:"http://localhost:8080/Hotel_1.0/roomType/selectAll"
                }).then(res=>{
                    this.roomTypeTableData = res.data;
                })
            }
        },
        //表单验证

        mounted(){
            this.$message({
                message: '欢迎使用酒店管理系统',
                type: 'success'
            })
            this.user.position = sessionStorage.getItem("position");
        }
    })
</script>
</body>
</html>
posted @   XYu1230  阅读(19)  评论(0)  编辑  收藏  举报
点击右上角即可分享
微信分享提示