Kaynağa Gözat

完成接口请求封装

hzj18279462576@163.com 3 yıl önce
ebeveyn
işleme
9aa87be7dd

+ 10 - 2
admin/config/index.js

@@ -10,11 +10,19 @@ module.exports = {
     // Paths
     assetsSubDirectory: 'static',
     assetsPublicPath: '/',
-    proxyTable: {},
+    proxyTable: {
+      '/api': {
+        target: 'http://192.168.161.230:8089',
+        changeOrigin: true,
+        pathRewrite: {
+          '^/api': ''
+        }
+      }
+    },
 
     // Various Dev Server settings
     host: 'localhost', // can be overwritten by process.env.HOST
-    port: 8081, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
+    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     autoOpenBrowser: false,
     errorOverlay: true,
     notifyOnErrors: true,

+ 30 - 10
admin/package-lock.json

@@ -987,8 +987,7 @@
     "asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
-      "dev": true
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
     },
     "atob": {
       "version": "2.1.2",
@@ -1021,6 +1020,27 @@
       "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
       "dev": true
     },
+    "axios": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmmirror.com/axios/-/axios-0.27.2.tgz",
+      "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
+      "requires": {
+        "follow-redirects": "^1.14.9",
+        "form-data": "^4.0.0"
+      },
+      "dependencies": {
+        "form-data": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.0.tgz",
+          "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+          "requires": {
+            "asynckit": "^0.4.0",
+            "combined-stream": "^1.0.8",
+            "mime-types": "^2.1.12"
+          }
+        }
+      }
+    },
     "babel-code-frame": {
       "version": "6.26.0",
       "resolved": "https://registry.npmmirror.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
@@ -3013,7 +3033,6 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
       "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-      "dev": true,
       "requires": {
         "delayed-stream": "~1.0.0"
       }
@@ -4476,8 +4495,7 @@
     "delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
-      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
-      "dev": true
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
     },
     "delegates": {
       "version": "1.0.0",
@@ -5874,8 +5892,7 @@
     "follow-redirects": {
       "version": "1.15.1",
       "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.1.tgz",
-      "integrity": "sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA==",
-      "dev": true
+      "integrity": "sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA=="
     },
     "for-each": {
       "version": "0.3.3",
@@ -8316,6 +8333,11 @@
         "xml-name-validator": "^3.0.0"
       }
     },
+    "jsencrypt": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmmirror.com/jsencrypt/-/jsencrypt-3.2.1.tgz",
+      "integrity": "sha512-k1sD5QV0KPn+D8uG9AdGzTQuamt82QZ3A3l6f7TRwMU6Oi2Vg0BsL+wZIQBONcraO1pc78ExMdvmBBJ8WhNYUA=="
+    },
     "jsesc": {
       "version": "2.5.2",
       "resolved": "https://registry.npmmirror.com/jsesc/-/jsesc-2.5.2.tgz",
@@ -9036,14 +9058,12 @@
     "mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
-      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "dev": true
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="
     },
     "mime-types": {
       "version": "2.1.35",
       "resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dev": true,
       "requires": {
         "mime-db": "1.52.0"
       }

+ 2 - 0
admin/package.json

@@ -14,9 +14,11 @@
     "build": "node build/build.js"
   },
   "dependencies": {
+    "axios": "^0.27.2",
     "better-scroll": "^2.4.2",
     "element-ui": "^2.15.2",
     "file-saver": "^2.0.5",
+    "jsencrypt": "^3.2.1",
     "moment": "^2.29.4",
     "svg-sprite-loader": "^4.3.0",
     "vue": "^2.5.2",

+ 49 - 0
admin/src/api/api.js

@@ -0,0 +1,49 @@
+// import http from '../utils/http'
+import * as doorLock from './doorLock'
+import * as fileServes from './fileServes'
+import * as hotelOrder from './hotelOrder'
+import * as hotelStaff from './hotelStaff'
+import * as houseType from './houseType'
+import * as normalUser from './normalUser'
+import * as room from './room'
+import * as systemnotice from './systemnotice'
+import * as systemSetup from './systemSetup'
+// 
+/**
+ *  @parms resquest 请求地址 例如:http://197.82.15.15:8088/request/...
+ *  @param '/testIp'代表vue-cil中config,index.js中配置的代理
+ */
+// let resquest = "/api/ihotel"
+
+// get请求
+export function getListAPI(params) {
+    return http.get(`${resquest}/getList.json`, params)
+}
+
+// post请求
+export function postFormAPI(params) {
+    return http.post(`${resquest}/postForm.json`, params)
+}
+
+// put 请求
+export function putSomeAPI(params) {
+    return http.put(`${resquest}/putSome.json`, params)
+}
+// delete 请求
+export function deleteListAPI(params) {
+    return http.delete(`${resquest}/deleteList.json`, params)
+}
+
+export default {
+    doorLock,      // 门锁
+    fileServes,    // 文件服务
+    hotelOrder,    // 酒店订单
+    hotelStaff,    // 酒店员工
+    houseType,     // 房型
+    normalUser,    // 普通用户
+    room,          // 房间
+    systemnotice,  // 系统通知
+    systemSetup    // 系统设置
+};
+
+

+ 12 - 0
admin/src/api/doorLock.js

@@ -0,0 +1,12 @@
+import http from '../utils/http'
+let resquest = "/api/ihotel/roomDoorLock"
+
+// 根据房间id查询密码锁
+export function roomDoorLockRoomId(params) {
+    return http.get(`${resquest}/room/{roomId}`, params)
+}
+
+// 根据订单id查询密码锁
+export function roomDoorLockOrderId(params) {
+    return http.get(`${resquest}/order/{orderId}`, params)
+}

+ 7 - 0
admin/src/api/fileServes.js

@@ -0,0 +1,7 @@
+import http from '../utils/http'
+let resquest = "/api/ihotel"
+
+// 获取上传文件签名
+export function getListAPI(params) {
+    return http.get(`${resquest}/oss/aliyun/policy`, params)
+}

+ 65 - 0
admin/src/api/hotelOrder.js

@@ -0,0 +1,65 @@
+import http from '../utils/http'
+let resquest = "/api/ihotel/hotelOrder"
+
+//  获取请求令牌
+export function hotelOrderToken(params) {
+    return http.get(`${resquest}/user/submit/token`, params)
+}
+
+//  确认订单    
+export function hotelOrderConfirm(params) {
+    return http.get(`${resquest}/user/order/confirm`, params)
+}
+
+//  提交订单
+export function hotelOrderSubmit(params) {
+    return http.post(`${resquest}/user/order/submit`, params)
+}
+
+//  订单列表【用户端】  
+export function hotelOrderUserPage(params) {
+    return http.get(`${resquest}/user/order/page`, params)
+}
+
+//  订单列表【管理端】
+export function hotelOrderAdminPage(params) {
+    return http.get(`${resquest}/admin/order/page`, params)
+}
+
+//  订单详情 【用户端】
+export function hotelOrderUserOrderId(params) {
+    return http.get(`${resquest}/user/order/{orderId}`, params)
+}
+
+//   获取订单支付参数
+export function hotelOrderOrderPay(params) {
+    return http.get(`${resquest}/user/order/pay/{orderId}`, params)
+}
+
+
+
+//   获取订单支付参数
+export function hotelOrderOrderBill(params) {
+    return http.get(`${resquest}/user/order/bill/{orderId}`, params)
+}
+
+//  删除订单【用户端】
+export function hotelOrderUserDelete(params) {
+    return http.delete(`${resquest}/user/order/{orderId}`, params)
+}
+
+// 取消订单
+export function hotelOrdercancel(params) {
+    return http.put(`${resquest}/user/order/cancel/{orderId}`, params)
+}
+
+// 办理入住
+export function hotelOrderHold(params) {
+    return http.put(`${resquest}/user/order/hold/{orderId}`, params)
+}
+
+// 办理退房
+export function hotelOrderReturn(params) {
+    return http.put(`${resquest}/user/order/return/{orderId}`, params)
+}
+

+ 27 - 0
admin/src/api/hotelStaff.js

@@ -0,0 +1,27 @@
+import http from '../utils/http'
+let resquest = "/api/ihotel/hotelStaff"
+
+// 管理员登录
+export function hotelStaffLogin(params) {
+    return http.post(`${resquest}/login`, params)
+}
+
+// 管理员列表
+export function hotelStaffList(params) {
+    return http.get(`${resquest}/list`, params)
+}
+
+// 新增管理员
+export function hotelStaffAdd(params) {
+    return http.post(`${resquest}/add`, params)
+}
+
+// 修改管理员
+export function hotelStaffUpdate(params) {
+    return http.put(`${resquest}/update`, params)
+}
+
+// 删除管理员
+export function hotelStaffDelete(params) {
+    return http.delete(`${resquest}/delete`, params)
+}

+ 32 - 0
admin/src/api/houseType.js

@@ -0,0 +1,32 @@
+import http from '../utils/http'
+let resquest = "/api/ihotel/roomType"
+
+// 房型列表(客户端)
+export function roomTypeList(params) {
+    return http.get(`${resquest}/roomType/list`, params)
+}
+
+// 房型列表(管理端)
+export function roomTypePage(params) {
+    return http.get(`${resquest}/roomType/page`, params)
+}
+
+// 房型详细信息
+export function roomTypeInfo(params) {
+    return http.post(`${resquest}/info/{id}`, params)
+}
+
+// 新增房型
+export function roomTypeSave(params) {
+    return http.post(`${resquest}/save`, params)
+}
+
+// 修改房型
+export function roomTypeUpdate(params) {
+    return http.put(`${resquest}/update`, params)
+}
+
+// 删除房型
+export function roomTypeDelete(params) {
+    return http.delete(`${resquest}/delete`, params)
+}

+ 12 - 0
admin/src/api/normalUser.js

@@ -0,0 +1,12 @@
+import http from '../utils/http'
+let resquest = "/api/ihotel/hotelUser"
+
+// 微校授权回调地址
+export function hotelUserWX(params) {
+    return http.get(`${resquest}/weixiaoAuth`, params)
+}
+
+//  获取用户信息
+export function hotelUserInfo(params) {
+    return http.get(`${resquest}/userInfo`, params)
+}

+ 27 - 0
admin/src/api/room.js

@@ -0,0 +1,27 @@
+import http from '../utils/http'
+let resquest = "/api/ihotel/room"
+
+// 房间列表(分页)
+export function roomPage(params) {
+    return http.get(`${resquest}/page`, params)
+}
+
+// 房间列表(分页分组)
+export function roomPageGroup(params) {
+    return http.get(`${resquest}/page/group`, params)
+}
+
+// 新增房间
+export function roomSave(params) {
+    return http.post(`${resquest}/save`, params)
+}
+
+// 修改房间
+export function roomUpdate(params) {
+    return http.put(`${resquest}/update`, params)
+}
+
+// 删除房间
+export function roomDelete(params) {
+    return http.delete(`${resquest}/delete`, params)
+}

+ 13 - 0
admin/src/api/systemSetup.js

@@ -0,0 +1,13 @@
+import http from '../utils/http'
+let resquest = "/api/ihotel/systemSetting"
+
+// 获取系统设置
+export function systemSettingInfo(params) {
+    return http.get(`${resquest}/info`, params)
+}
+
+// 修改系统设置
+export function systemnoticeUpdate(params) {
+    return http.put(`${resquest}/update`, params)
+}
+

+ 17 - 0
admin/src/api/systemnotice.js

@@ -0,0 +1,17 @@
+import http from '../utils/http'
+let resquest = "/api/ihotel/ihotel/systemnotice"
+
+// 通知列表
+export function systemnoticeList(params) {
+    return http.get(`${resquest}/list`, params)
+}
+
+// 标记为已读
+export function systemnoticeRead(params) {
+    return http.put(`${resquest}/read`, params)
+}
+
+// 删除通知
+export function systemnoticeDelete(params) {
+    return http.delete(`${resquest}/delete`, params)
+}

+ 1 - 1
admin/src/layout/components/NavbarItem.vue

@@ -90,7 +90,7 @@ export default {
   computed: {
     ItemIndex: {
       get() {
-        console.log(this.$store.state.itemPath);
+        // console.log(this.$store.state.itemPath);
         return this.$store.state.itemPath;
       },
       set(val) {},

+ 4 - 5
admin/src/main.js

@@ -4,13 +4,12 @@ import Vue from 'vue'
 import App from './App'
 
 import router from './router'
-
-import store from './store'
-
+import axios from "axios";
+import store from './store';
+import API from './api/api'
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
-
-
+Vue.prototype.API = API
 Vue.component('IconSvg', require('./components/SvgIcon').default)
 
 Vue.config.productionTip = false

+ 3 - 5
admin/src/store/index.js

@@ -6,6 +6,9 @@ export default new Vuex.Store({
     state: {
         //当前的路由值
         itemPath: ''
+    },
+
+    getters: {
 
     },
 
@@ -14,10 +17,5 @@ export default new Vuex.Store({
         itemP(state, payload) {
             state.itemPath = payload
         }
-
     },
-
-    getters: {
-
-    }
 })

+ 55 - 0
admin/src/utils/http.js

@@ -0,0 +1,55 @@
+/****   http.js   ****/
+// 导入封装好的axios实例
+import request from './request'
+
+const http = {
+    /**
+     * methods: 请求
+     * @param url 请求地址 
+     * @param params 请求参数
+     */
+    get(url, params) {
+        const config = {
+            method: 'get',
+            url: url + params,
+            headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8' }
+        }
+        if (params) config.params = params
+        return request(config)
+    },
+    post(url, params) {
+        const config = {
+            method: 'post',
+            url: url,
+            headers: {
+                'Content-Type': 'application/json; charset=utf-8'
+            }
+        }
+        if (params) config.data = params
+        return request(config)
+    },
+    put(url, params) {
+        const config = {
+            method: 'put',
+            url: url,
+            headers: {
+                'Content-Type': 'application/json; charset=utf-8'
+            }
+        }
+        if (params) config.params = params
+        return request(config)
+    },
+    delete(url, params) {
+        const config = {
+            method: 'delete',
+            url: url,
+            headers: {
+                'Content-Type': 'application/json; charset=utf-8'
+            }
+        }
+        if (params) config.params = params
+        return request(config)
+    }
+}
+//导出
+export default http

+ 127 - 0
admin/src/utils/request.js

@@ -0,0 +1,127 @@
+/****   request.js   ****/
+// 导入axios
+import axios from 'axios'
+// 使用element-ui Message做消息提醒
+import { Message } from 'element-ui';
+//1. 创建新的axios实例,
+const service = axios.create({
+    // 公共接口--这里注意后面会讲
+    baseURL: process.env.BASE_API,
+    // 超时时间 单位是ms,这里设置了3s的超时时间
+    timeout: 3 * 1000
+})
+// 2.请求拦截器
+service.interceptors.request.use(config => {
+    //发请求前做的一些处理,数据转化,配置请求头,设置token,设置loading等,根据需求去添加
+    config.data = JSON.stringify(config.data); //数据转化,也可以使用qs转换
+    // config.headers = {
+    //     'Content-Type': 'application/json' //配置请求头
+    // }
+    console.log(config.headers['Content-Type']);
+    if (config.headers['Content-Type']) {
+    } else {
+        config.headers = { 'Content-Type': 'application/x-www-form-urlencoded' } //配置请求头
+    }
+    // config.headers = { 'Content-Type': 'application/x-www-form-urlencoded' } //配置请求头
+    //如有需要:注意使用token的时候需要引入cookie方法或者用本地localStorage等方法,推荐js-cookie
+    //const token = getCookie('cook');//这里取token之前,你肯定需要先拿到token,存一下
+    //if(token){
+    //config.params = {'token':token} //如果要求携带在参数中
+    //config.headers.token= token; //如果要求携带在请求头中
+    //}
+    return config
+}, error => {
+    Promise.reject(error)
+})
+
+// 3.响应拦截器
+service.interceptors.response.use(response => {
+    //接收到响应数据并成功后的一些共有的处理,关闭loading等
+
+    return response.data
+}, error => {
+    /***** 接收到异常响应的处理开始 *****/
+    if (error && error.response) {
+        // 1.公共错误处理
+        // 2.根据响应码具体处理
+        switch (error.response.status) {
+            case 10000:
+                error.message = '系统未知异常'
+                break;
+            case 10001:
+                error.message = '请求方法不支持'
+                break;
+            case 10002:
+                error.message = '缺少必要的请求头'
+                break;
+            case 10003:
+                error.message = '无效的token'
+                // window.location.href = "/NotFound"
+                break;
+            case 10004:
+                error.message = 'token为空'
+                break;
+            case 10005:
+                error.message = '管理员登录失败'
+                break;
+            case 10006:
+                error.message = '权限不足'
+                break;
+            case 11001:
+                error.message = '参数格式校验失败'
+                break;
+            case 11002:
+                error.message = 'body为空'
+                break;
+            case 11003:
+                error.message = '参数异常'
+                break;
+            case 11004:
+                error.message = '重复提交表单'
+                break;
+            case 11005:
+                error.message = '订单提交失败'
+                break;
+            case 11006:
+                error.message = '消费者消费异常'
+                break;
+            case 11007:
+                error.message = '第三方服务调用失败'
+                break;
+            case 11008:
+                error.message = '农商行订单状态查询失败'
+                break;
+            case 16000:
+                error.message = '数据已存在'
+                break;
+            case 16000:
+                error.message = '数据不存在'
+                break;
+            case 16006:
+                error.message = '临时文件不存在'
+                break;
+            case 16007:
+                error.message = '文件上传失败'
+                break;
+            case 16008:
+                error.message = '文件太大'
+                break;
+
+            default:
+                error.message = `连接错误${error.response.status}`
+        }
+    } else {
+        // 超时处理
+        if (JSON.stringify(error).includes('timeout')) {
+            Message.error('服务器响应超时,请刷新当前页')
+        }
+        error.message = '连接服务器失败'
+    }
+
+    Message.error(error.message)
+    /***** 处理结束 *****/
+    //如果不需要错误处理,以上的处理过程都可省略
+    return Promise.resolve(error.response)
+})
+//4.导入文件
+export default service

+ 104 - 10
admin/src/views/account/index.vue

@@ -71,7 +71,7 @@
             layout="prev, pager, next, jumper"
             :current-page.sync="currentPage"
             :page-size="pageSize"
-            :total="total"
+            :total="data.length"
             @current-change="handleCurrentChange"
           >
           </el-pagination>
@@ -81,6 +81,7 @@
       <!-- 添加账号弹窗区域 -->
       <el-dialog
         :title="popTitle"
+        :destroy-on-close="clean"
         width="30%"
         :visible.sync="dialogVisible"
         :close-on-click-modal="false"
@@ -116,8 +117,8 @@
 
           <el-form-item label="角色" prop="identity">
             <el-select v-model="ruleForm.identity" placeholder="请选择角色">
-              <el-option label="超级管理员" value="shanghai"></el-option>
-              <el-option label="管理员" value="beijing"></el-option>
+              <el-option label="超级管理员" value="超级管理员"></el-option>
+              <el-option label="管理员" value="管理员"></el-option>
             </el-select>
           </el-form-item>
           <el-form-item label="权限分配" prop="type">
@@ -152,6 +153,8 @@ export default {
       dialogVisible: false,
       // 添加账号弹窗标题
       popTitle: "添加账号",
+      // 表格显示多少条数据
+      data: [],
       // 表格数据
       tableData: [
         {
@@ -164,6 +167,76 @@ export default {
           name: "张三",
           identity: "管理员",
         },
+        {
+          number: "13645895689",
+          name: "王小虎",
+          identity: "超级管理员",
+        },
+        {
+          number: "13645898888",
+          name: "张三",
+          identity: "管理员",
+        },
+        {
+          number: "13645895689",
+          name: "王小虎",
+          identity: "超级管理员",
+        },
+        {
+          number: "13645898888",
+          name: "张三",
+          identity: "管理员",
+        },
+        {
+          number: "13645895689",
+          name: "王小虎",
+          identity: "超级管理员",
+        },
+        {
+          number: "13645898888",
+          name: "张三",
+          identity: "管理员",
+        },
+        {
+          number: "13645895689",
+          name: "王小虎",
+          identity: "超级管理员",
+        },
+        {
+          number: "13645898888",
+          name: "张三",
+          identity: "管理员",
+        },
+        {
+          number: "13645895689",
+          name: "王小虎",
+          identity: "超级管理员",
+        },
+        {
+          number: "13645898888",
+          name: "张三",
+          identity: "管理员",
+        },
+        {
+          number: "13645895689",
+          name: "王小虎",
+          identity: "超级管理员",
+        },
+        {
+          number: "13645898888",
+          name: "张三",
+          identity: "管理员",
+        },
+        {
+          number: "13645895689",
+          name: "王小虎",
+          identity: "超级管理员",
+        },
+        {
+          number: "13645895689",
+          name: "王小虎",
+          identity: "超级管理员",
+        },
       ],
       //  搜索框绑定数据
       searchValue: "",
@@ -180,6 +253,8 @@ export default {
         identity: "",
         type: [],
       },
+      // 弹窗表格绑定数据清空
+      clean: false,
       // 添加账号弹窗表格验证规则
       rules: {
         name: [{ required: true, message: "请输入员工姓名", trigger: "blur" }],
@@ -206,28 +281,30 @@ export default {
       },
     };
   },
+  mounted() {
+    this.data = this.tableData;
+    this.handleCurrentChange(this.currentPage);
+  },
   methods: {
     // 添加账号按钮回调
     handleAdd() {
-      this.ruleForm.name = "";
-      this.ruleForm.phone = "";
-      this.ruleForm.identity = "";
+      this.clean = true;
       this.ruleForm.type = [];
       this.dialogVisible = true;
       this.popTitle = "添加账号";
       this.$nextTick(() => {
         this.$refs.ruleForm.resetFields();
       });
+      this.clean = false;
     },
     // 编辑按钮回调
     handleEdit(row) {
-      console.log(row);
+      // console.log(row);
       this.ruleForm.phone = row.number;
       this.ruleForm.name = row.name;
       this.ruleForm.identity = row.identity;
       this.dialogVisible = true;
       this.popTitle = "编辑账号";
-      Object.assign(this.ruleForm, row);
     },
     // 删除按钮回调
     handleDelete(row) {
@@ -238,6 +315,14 @@ export default {
         type: "warning",
       })
         .then(() => {
+          this.data.forEach((item, index) => {
+            console.log(row.number == item.number);
+            if (row.number == item.number) {
+              this.data.splice(index, 1);
+            }
+          });
+          this.currentPage = Math.ceil(this.data.length / this.pageSize);
+          this.handleCurrentChange(this.currentPage);
           this.$message.success("删除成功");
         })
         .catch(() => {
@@ -246,8 +331,12 @@ export default {
     },
     // 分页器换页回调
     handleCurrentChange(value) {
-      console.log(value);
       this.currentPage = value;
+      if (this.data.length >= 8) {
+        this.tableData = this.data.slice((value - 1) * 8, value * 8);
+      } else {
+        this.tableData = this.data;
+      }
     },
     // 添加账号弹窗关闭弹窗回调
     handleClose(done) {
@@ -268,7 +357,9 @@ export default {
             identity: this.ruleForm.identity,
             type: this.ruleForm.type,
           };
-          this.tableData.push(arr);
+          this.data.push(arr);
+          this.currentPage = Math.ceil(this.data.length / this.pageSize);
+          this.handleCurrentChange(this.currentPage);
           this.dialogVisible = false;
         } else {
           console.log("error submit!!");
@@ -340,6 +431,9 @@ export default {
         }
         tr {
           height: 64px;
+          td {
+            border: none;
+          }
         }
         th {
           font-weight: 400;

+ 18 - 1
admin/src/views/login/index.vue

@@ -49,6 +49,11 @@
 </template>
 
 <script>
+import JSEncrypt from "jsencrypt";
+const entry = new JSEncrypt();
+const pubKey =
+  "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDMOcPB06u5yKyQsPjfVWiWgbEIrd14kiXNNihciaVKb6HnkQvq7zpQuZ80WEX94spnUMI3iOAl/GmIvHrpGwcbB4hJbznm+PajiwnUSPuCCXA68YJF640cJKb/8KeM7WVz69OFkIEPHhVxOy4FFF5QWe/kt6zOZ19HmE+ak+5x/QIDAQAB"; //可以直接找后端要,也可以请求接口获取
+entry.setPublicKey(pubKey);
 export default {
   name: "Login",
   data() {
@@ -118,11 +123,23 @@ export default {
         // 符合验证规则
         if (valid) {
           this.loading = true;
+          this.API.hotelStaff
+            .hotelStaffLogin({
+              username: this.loginForm.userName,
+              password: entry.encrypt(this.loginForm.password), //加密密码
+            })
+            .then((res) => {
+              if (res) {
+                console.log(res);
+              } else {
+                console.log("登录失败");
+              }
+            });
           // 从仓库调用login函数
           // this.$store
           //   .dispatch("user/login", this.loginForm)
           //   .then(() => {
-          this.$router.push({ path: this.redirect || "/home" });
+          // this.$router.push({ path: this.redirect || "/home" });
           this.loading = false;
           // })
           // .catch(() => {