管理人员管理账户、添加账户、酒店管理人员查看订单、用户个人信息、订单

front_end/src/api/admin.js

@@ -1 +1,14 @@
 import { axios } from '@/utils/request'
+export function getUserListAPI(){
+    return axios({
+        url: '',
+        method: 'GET'
+    })
+}
+export function addUserAPI(data) {
+    return axios({
+        url: '',
+        method: 'POST',
+        data
+    })
+}

front_end/src/store/getters.js

@@ -8,7 +8,11 @@ const getters = {
   currentHotelInfo: state => state.hotel.currentHotelInfo,
   currentHotelId: state => state.hotel.currentHotelId,
   orderModalVisible: state => state.hotel.orderModalVisible,
-  currentOrderRoom: state => state.hotel.currentOrderRoom
+  currentOrderRoom: state => state.hotel.currentOrderRoom,
+  //admin
+  userList: state => state.admin.userList,
+  addUserModalVisible: state => state.admin.addUserModalVisible,
+  addUserParams: state => state.admin.addUserParams
   }
   
   export default getters

front_end/src/store/index.js

@@ -2,6 +2,8 @@ import Vue from 'vue'
 import Vuex from 'vuex'
 import user from './modules/user'
 import hotel from './modules/hotel'
+import hotelManager from './modules/hotelManager'
+import admin from './modules/admin'
 import getters from './getters'
 Vue.use(Vuex)
 
@@ -9,6 +11,8 @@ export default new Vuex.Store({
   modules: {
     hotel,
     user,
+    hotelManager,
+    admin,
   },
   state: {
   },

front_end/src/store/modules/admin.js

@@ -0,0 +1,46 @@
+import {
+    getUserListAPI,
+    addUserAPI,
+} from '@/api/admin'
+
+const admin = {
+    state: {
+        userList: [
+
+        ],
+        addUserModalVisible: false,
+        addUserParams: {
+            email:'',
+            password:''
+        }
+    },
+    mutations: {
+        set_userList: function(state, data) {
+            state.userList = data
+        },
+        set_addUserModalVisible: function(state, data) {
+            state.addUserModalVisible = data
+        },
+        set_addUserParams: function(state, data) {
+            state.addUserParams = {
+                ...state.addUserParams,
+                ...data,
+            }
+        }
+    },
+    actions: {
+        getUserList: async({ commit }) => {
+            const res = await getUserListAPI()
+            if(res){
+                commit('set_userList', res.data)
+            }
+        },
+        addUser: async({ state, commit, dispatch }) => {
+            const res = await addUserAPI(state.addUserParams)
+            if(res) {
+                dispatch('getUserList')
+            }
+        }
+    }
+}
+export default admin

front_end/src/store/modules/hotelManager.js

@@ -0,0 +1,12 @@
+const hotelManager = {
+    stata: {
+
+    },
+    mutations: {
+
+    },
+    actions: {
+
+    }
+}
+export default hotelManager

front_end/src/views/admin/components/addUserModal.vue

@@ -0,0 +1,79 @@
+<template>
+    <a-modal
+        :visible="addUserModalVisible"
+        title="添加用户"
+        cancelText="取消"
+        okText="确定"
+        @cancel="cancel"
+        @ok="handleSubmit"
+    >
+    <a-Form :form="form">
+        <a-form-item v-bind="formItemLayout" label="用户邮箱">
+                <a-input
+                    v-decorator="[
+                        'email',
+                        { rules: [{required: true, message: '请输入用户邮箱', }] }
+                    ]"
+                />
+            </a-form-item>
+            <a-form-item v-bind="formItemLayout" label="密码">
+                <a-input
+                    v-decorator="[
+                        'password',
+                        { rules: [{required: true, message: '请输入密码', }] }
+                    ]"
+                />
+            </a-form-item >
+    </a-Form>
+    </a-modal>
+</template>
+<script>
+import { mapGetters, mapMutations, mapActions } from 'vuex'
+export default {
+    name: 'addUserModal',
+    data() {
+        return {
+            formItemLayout: {
+                labelCol: {
+                    xs: { span: 12 },
+                    sm: { span: 6 },
+                },
+                wrapperCol: {
+                    xs: { span: 24 },
+                    sm: { span: 16 },
+                },
+            },
+        }
+    },
+    computed: {
+        ...mapGetters([
+            'addUserModalVisible'
+        ])
+    },
+    beforeCreate() {
+        this.form = this.$form.createForm(this, { name: 'addUserModal' });
+    },
+    mounted() {
+
+    },
+    methods: {
+        ...mapMutations([
+            'set_addUserModalVisible'
+        ]),
+        ...mapActions([
+
+        ]),
+        cancel() {
+            this.set_addUserModalVisible(false)
+        },
+        handleSubmit(e) {
+            e.preventDefault();
+            this.form.validateFieldsAndScroll((err, values) => {
+                if (!err) {
+                    console.log('Received values of form: ', values);
+                }
+            });
+        },
+    }
+}
+</script>

front_end/src/views/admin/manageUser.vue

@@ -1,19 +1,108 @@
 <template>
-    <div>manageUser</div>
+    <div class="manageUser-wrapper">
+        <a-tabs>
+            <a-tab-pane tab="账户管理" key="1">
+                <div style="width: 100%; text-align: right; margin:20px 0">
+                    <a-button type="primary" @click="addUser"><a-icon type="plus" />添加用户</a-button>
+                </div>
+                <a-table
+                    :columns="columns"
+                    :dataSource="data"
+                    bordered
+                >
+                    <span slot="price" slot-scope="text">
+                        <span>￥{{ text }}</span>
+                    </span>
+                    <span slot="action" slot-scope="text, record">
+                        <a-button type="danger" @click="order(record)">删除用户</a-button>
+                    </span>
+                </a-table>
+            </a-tab-pane>
+        </a-tabs>
+        <AddUserModal></AddUserModal>
+    </div>
 </template>
 <script>
+import { mapGetters, mapMutations, mapActions } from 'vuex'
+import AddUserModal from './components/addUserModal'
+const columns = [
+    {  
+        title: '用户名',
+        dataIndex: 'username',
+    },
+    {
+        title: '用户密码',
+        dataIndex: 'password',
+    },
+    {
+        title: '用户手机号',
+        dataIndex: 'phoneNumber',
+    },
+    {
+        title: '会员等级',
+        dataIndex: 'leve',
+    },
+    {
+      title: '操作',
+      key: 'action',
+      scopedSlots: { customRender: 'action' },
+    },
+  ];
 export default {
-    name: 'manageUser',
-    data() {
-        return{
-            
+    name: 'manageHotel',
+    data(){
+        return {
+            formLayout: 'horizontal',
+            pagination: {},
+            columns,
+            data: [],
+            form: this.$form.createForm(this, { name: 'manageUser' }),
         }
     },
-    mounted(){
-
+    components: {
+        AddUserModal
+    },
+    computed: {
+        ...mapGetters([
+            'addUserModalVisible',
+            'userList'
+        ])
+    },
+    mounted() {
+      
+    },
+    methods: {
+        ...mapActions([
+            
+        ]),
+        ...mapMutations([
+            'set_addUserModalVisible'
+        ]),
+        addUser(){
+            this.set_addUserModalVisible(true)
+            console.log(this.addUserModalVisible)
+        }
     }
 }
 </script>
-<style scoped>
-
+<style scoped lang="less">
+    .manageUser-wrapper {
+        padding: 50px;
+        .chart {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-top: 20px
+        }
+    }
+</style>
+<style lang="less">
+    .manageUser-wrapper {
+        .ant-tabs-bar {
+            padding-left: 30px
+        }
+    }
+</style>
+<style lang="less">
+    
 </style>

front_end/src/views/hotel/components/orderModal.vue

@@ -89,7 +89,8 @@ export default {
                     sm: { span: 16 },
                 },
             },
-            totalPrice: ''
+            totalPrice: '',
+            form: '',
         }
     },
     computed: {

front_end/src/views/hotelManager/manageHotel.vue

@@ -1,19 +1,143 @@
 <template>
-    <div>manageHotel</div>
+    <div class="manageHotel-wrapper">
+        <a-tabs>
+            <a-tab-pane tab="录入客房" key="1">
+                <a-form :form="form" style="margin-top: 30px">
+                    
+                </a-form>
+            </a-tab-pane>
+            <a-tab-pane tab="订单管理" key="2">
+                <a-table
+                    :columns="columns"
+                    :dataSource="data"
+                    bordered
+                >
+                    <span slot="price" slot-scope="text">
+                        <span>￥{{ text }}</span>
+                    </span>
+                    <span slot="action" slot-scope="text, record">
+                        <a-button type="primary" @click="order(record)">订单详情</a-button>
+                        <a-divider type="vertical"></a-divider>
+                        <a-button type="danger" @click="order(record)">删除订单</a-button>
+                    </span>
+                </a-table>
+            </a-tab-pane>
+        </a-tabs>
+    </div>
 </template>
 <script>
+import { mapGetters, mapMutations, mapActions } from 'vuex'
+const columns = [
+    {  
+        title: '酒店名',
+        dataIndex: 'hotelName',
+    },
+    {
+        title: '入住时间',
+        dataIndex: 'InDate',
+    },
+    {
+        title: '离店时间',
+        dataIndex: 'outDate',
+    },
+    {
+        title: '入住人数',
+        dataIndex: 'peopleNum',
+    },
+    {
+        title: '房价',
+        dataIndex: 'price',
+    },
+    {
+        title: '状态',
+        dataIndex: 'status'
+    },
+    {
+      title: '操作',
+      key: 'action',
+      scopedSlots: { customRender: 'action' },
+    },
+  ];
 export default {
     name: 'manageHotel',
-    data() {
+    data(){
         return {
-            
+            formLayout: 'horizontal',
+            pagination: {},
+            columns,
+            data: [],
+            form: this.$form.createForm(this, { name: 'manageHotel' }),
         }
     },
-    mounted(){
+    components: {
+    },
+    computed: {
+        ...mapGetters([
+            
+        ])
+    },
+    mounted() {
 
+    },
+    methods: {
+        ...mapActions([
+            'updateUserInfoById',
+        ]),
+        saveModify() {
+            this.form.validateFields((err, values) => {
+                if (!err) {
+                    const data = {
+                        username: this.form.getFieldValue('username'),
+                        nickname: this.form.getFieldValue('nickname'),
+                        email: this.form.getFieldValue('email'),
+                        phoneNumber: this.form.getFieldValue('phoneNumber'),
+                        gender: this.form.getFieldValue('gender'),
+                        address: this.form.getFieldValue('address')
+                    }
+                    this.updateUserInfoById(data).then(()=>{
+                        this.modify = false
+                    })
+                }
+            });
+        },
+        modifyInfo() {
+            setTimeout(() => {
+                this.form.setFieldsValue({
+                    'username': this.userInfo.username,
+                    'nickname': this.userInfo.nickname,
+                    'email': this.userInfo.email,
+                    'phoneNumber': this.userInfo.phoneNumber,
+                    'gender': this.userInfo.gender,
+                    'address': this.userInfo.address
+                })
+            }, 0)
+            this.modify = true
+        },
+        cancelModify() {
+            this.modify = false
+        }
+        
     }
 }
 </script>
-<style scoped>
-
+<style scoped lang="less">
+    .manageHotel-wrapper {
+        padding: 50px;
+        .chart {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-top: 20px
+        }
+    }
+</style>
+<style lang="less">
+    .info-wrapper {
+        .ant-tabs-bar {
+            padding-left: 30px
+        }
+    }
+</style>
+<style lang="less">
+    
 </style>

front_end/src/views/user/info.vue

@@ -82,13 +82,57 @@
                 </a-form>
             </a-tab-pane>
             <a-tab-pane tab="我的订单" key="2">
-                
+                <a-table
+                    :columns="columns"
+                    :dataSource="data"
+                    bordered
+                >
+                    <span slot="price" slot-scope="text">
+                        <span>￥{{ text }}</span>
+                    </span>
+                    <span slot="action" slot-scope="text, record">
+                        <a-button type="primary" @click="order(record)">订单详情</a-button>
+                        <a-divider type="vertical"></a-divider>
+                        <a-button type="danger" @click="order(record)">删除订单</a-button>
+                    </span>
+                </a-table>
             </a-tab-pane>
         </a-tabs>
     </div>
 </template>
 <script>
 import { mapGetters, mapMutations, mapActions } from 'vuex'
+const columns = [
+    {  
+        title: '酒店名',
+        dataIndex: 'hotelName',
+    },
+    {
+        title: '入住时间',
+        dataIndex: 'InDate',
+    },
+    {
+        title: '离店时间',
+        dataIndex: 'outDate',
+    },
+    {
+        title: '入住人数',
+        dataIndex: 'peopleNum',
+    },
+    {
+        title: '房价',
+        dataIndex: 'price',
+    },
+    {
+        title: '状态',
+        dataIndex: 'status'
+    },
+    {
+      title: '操作',
+      key: 'action',
+      scopedSlots: { customRender: 'action' },
+    },
+  ];
 export default {
     name: 'info',
     data(){
@@ -96,6 +140,8 @@ export default {
             modify: false,
             formLayout: 'horizontal',
             pagination: {},
+            columns,
+            data: [],
             form: this.$form.createForm(this, { name: 'coordinated' }),
         }
     },
@@ -152,7 +198,7 @@ export default {
 </script>
 <style scoped lang="less">
     .info-wrapper {
-        padding: 50px 0 0;
+        padding: 50px;
         .chart {
             display: flex;
             align-items: center;