feat: config axios & debug user & manager

ittpc/src/request/axios.js

@@ -1,7 +1,6 @@
 import axios from 'axios'
-import { Message } from 'element-ui';
-import Vue from 'vue'
-
+import { Message, MessageBox } from 'element-ui';
+import Router from 'vue-router'
 const service = axios.create({
   timeout: 10000
 });
@@ -20,14 +19,31 @@ const service = axios.create({
  * 响应拦截
  */
  service.interceptors.response.use(response => {
-  console.log(response);
   if (response.status !== 200) {
     Message.error('请求失败')
     return Promise.reject('请求失败: status code !== 200')
   } else {
     if (response.data.code !== '200') {
-      Message.error(response.data.msg || '请求失败')
-      return Promise.reject(response.data.msg || '请求失败')
+      if (response.data.subCode == '101') {
+        MessageBox.alert(response.data.subMsg || '请求失败', '提示',{
+          type: 'error',
+          confirmButtonText: '重新登录',
+          closeOnClickModal: false,
+          closeOnPressEscape: false,
+          beforeClose: function (action, instance, done) {
+            if (action == 'confirm') {
+              sessionStorage.clear()
+              Router.replace({
+                path: '/login'
+              })
+            }
+          }
+        })
+        return Promise.reject(response.data.subMsg || '登录失效')
+      } else {
+        Message.error(response.data.msg || '请求失败')
+        return Promise.reject(response.data.msg || '请求失败')
+      }
     } else {
       return  Promise.resolve(response.data)
     }

ittpc/src/router/index.js

@@ -4,6 +4,8 @@ import Error from '@/views/error/error'
 import Login from '@/views/login/login'
 import Main from '@/views/modules/main'
 import User from '@/views/modules/user/user'
+import Staff from '@/views/modules/staff/staff'
+import Manager from './../views/modules/manager/manager'
 import Appointment from '@/views/modules/appointment/appointment'
 import Config from '@/views/modules/config/config'
 
@@ -28,6 +30,16 @@ const router = new Router({
           name: 'user',
           component: User
         },
+        {
+          path: 'staff',
+          name: 'staff',
+          component: Staff
+        },
+        {
+          path: 'manager',
+          name: 'manager',
+          component: Manager
+        },
         {
           path: 'appointment',
           name: 'appointment',

ittpc/src/views/modules/main.vue

@@ -7,18 +7,26 @@
           <h3>ITT运营后台</h3>
         </div>
         <div class="header-right userinfo">
-          <div class="headimg"></div>
-          <div class="username">管理员</div>
+          <!-- <div class="headimg"></div> -->
+          <div class="username">{{userName}}</div>
           <el-button type="text" @click="handleLogout">退出</el-button>
         </div>
       </el-header>
       <el-container>
         <el-aside style="width: 200px;">
-          <el-menu style="border:0;" :default-active="defaultActive" class="el-menu-vertical-demo" router @select="menuSelect">
+          <el-menu style="border:0;text-align:left;" :default-active="defaultActive" class="el-menu-vertical-demo" router @select="menuSelect">
             <el-menu-item index="/main/user">
               <i class="el-icon-user-solid"></i>
-              <span slot="title">用户管理</span>
+              <span slot="title">用户列表</span>
             </el-menu-item> 
+            <el-menu-item index="/main/manager">
+              <i class="el-icon-s-management"></i>
+              <span slot="title">管理人员列表</span>
+            </el-menu-item> 
+            <el-menu-item index="/main/staff">
+              <i class="el-icon-s-platform"></i>
+              <span slot="title">工作人员管理</span>
+            </el-menu-item>
             <el-menu-item index="/main/appointment">
               <i class="el-icon-message-solid"></i>
               <span slot="title">预约管理</span>
@@ -46,11 +54,14 @@ export default {
   name: 'Main',
   data() {
     return {
-      defaultActive: '/main/user'
+      defaultActive: '/main/user',
+      userName: ''
     };
   },
   mounted() {
     const currentPath = sessionStorage.getItem('currentPath')
+    const userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
+    this.userName = userInfo.userName
     if (currentPath) {
       this.defaultActive = currentPath
     }
@@ -105,6 +116,7 @@ export default {
       background-color: #45A6B5;
     }
     .username {
+      font-weight: bolder;
       margin: 0 20px;
     }
   }

ittpc/src/views/modules/manager/manager.vue

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    manager
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'manager',
+  data() {
+    return {
+
+    };
+  },
+  mounted() {
+
+  },
+  methods: {
+
+  },
+};
+</script>
+
+<style scoped>
+
+</style>

ittpc/src/views/modules/user/query.vue → ittpc/src/views/modules/staff/query.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="user-page-query" v-loading="loading" element-loading-text="加载中" element-loading-spinner="el-icon-loading">
+  <div class="staff-page-query" v-loading="loading" element-loading-text="加载中" element-loading-spinner="el-icon-loading">
     <el-row>
       <el-col :span="24" class="padding20">
         <el-form :inline="true" :model="searchForm" class="demo-form-inline" size="small">
@@ -104,7 +104,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.user-page-query {
+.staff-page-query {
   width: 100%;
   height: 100%;
   .padding20 {

ittpc/src/views/modules/staff/staff.vue

@@ -1,25 +1,46 @@
 <template>
-    <div>
-Staff account
-    </div>
+  <div class="user-page">
+    <transition name="el-fade-in-linear">
+      <Query v-show="userModulesView == 0"></Query>
+    </transition>
+    <transition name="el-fade-in-linear">
+      <Record v-show="userModulesView == 1"></Record>
+    </transition>
+  </div>
 </template>
 
 <script>
+import Query from './query'
+import Record from './recoed'
+import { mapState } from 'vuex'
 export default {
-    data() {
-        return {
-
-        };
-    },
-    mounted() {
-
-    },
-    methods: {
-
-    },
+  name: 'staff',
+  data() {
+    return {
+      
+    };
+  },
+  computed: {
+    ...mapState({
+      userModulesView: s => s.userModulesView
+    })
+  },
+  components: {
+    Query,
+    Record
+  },
+  mounted() {
+    console.log('user mounted', this.userModulesView, this.$store);
+  },
+  methods: {
+    
+  },
 };
 </script>
 
-<style scoped>
-
+<style scoped lang="scss">
+.user-page {
+  width: 100%;
+  height: 100%;
+}
 </style>

ittpc/src/views/modules/user/user.vue

@@ -1,39 +1,108 @@
 <template>
   <div class="user-page">
-    <transition name="el-fade-in-linear">
-      <Query v-show="userModulesView == 0"></Query>
-    </transition>
-    <transition name="el-fade-in-linear">
-      <Record v-show="userModulesView == 1"></Record>
-    </transition>
+    <el-row>
+      <el-col :span="24" class="padding20">
+        <el-form :inline="true" :model="searchForm" class="demo-form-inline" size="small">
+          <el-form-item label="用户昵称">
+            <el-input v-model="searchForm.nickname" placeholder="请输入用户昵称"></el-input>
+          </el-form-item>
+          <el-form-item label="手机号">
+            <el-input v-model="searchForm.phone" placeholder="请输入手机号"></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="handleQuery">查询</el-button>
+            <el-button @click="handleReset">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="24" class="padding20">
+        <el-table :data="tableData" border stripe style="width: 100%" size="small" height="700" v-loading="loading" element-loading-text="加载中" element-loading-spinner="el-icon-loading">
+          <el-table-column type="index" align="center" label="序号"></el-table-column>
+          <el-table-column prop="userId" align="center" label="用户ID"></el-table-column>
+          <el-table-column prop="headImg" align="center" label="头像">
+            <template slot-scope="scope">
+              <el-avatar :size="40" :src="scope.row.headImg">
+                <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
+              </el-avatar>
+            </template>
+          </el-table-column>
+          <el-table-column prop="nickname" align="center" label="昵称"></el-table-column>
+          <el-table-column prop="phone" align="center" label="手机号"></el-table-column>
+          <el-table-column prop="addTime" align="center" label="注册时间"></el-table-column>
+          <el-table-column prop="documentNum" align="center" label="文档数"></el-table-column>
+          <el-table-column prop="examinationNum" align="center" label="体验次数"></el-table-column>
+        </el-table>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="24" class="padding20 flexend" >
+        <el-pagination
+          @current-change="handleCurrentChange"
+          :current-page="currentPage"
+          :page-size="pageSize"
+          layout="total, prev, pager, next"
+          :total="total"
+          size="small"
+          >
+        </el-pagination>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script>
-import Query from './query'
-import Record from './recoed'
-import { mapState } from 'vuex'
+import { getUserList } from '../../../request/request'
 export default {
   name: 'user',
   data() {
     return {
-      
+      loading: false,
+      searchForm: {
+        nickname: '',
+        phone: ''
+      },
+      tableData: [],
+      currentPage: 1,
+      pageSize: 20,
+      total: 0
     };
   },
-  computed: {
-    ...mapState({
-      userModulesView: s => s.userModulesView
-    })
-  },
-  components: {
-    Query,
-    Record
-  },
   mounted() {
-    console.log('user mounted', this.userModulesView, this.$store);
+    this.handleQuery()
   },
   methods: {
-    
+    handleReset () {
+      this.searchForm.nickname = ''
+      this.searchForm.phone = ''
+    },
+    handleQuery () {
+      this.currentPage = 1
+      this.getUserListFn()
+    },
+    getUserListFn () {
+      let data = {
+        currentPage: this.currentPage,
+        nickname: this.searchForm.nickname,
+        phone: this.searchForm.phone
+      }
+      this.loading = true
+      getUserList(data).then(res => {
+        this.loading = false
+        this.total = res.data.total
+        this.pageSize = res.data.pageSize
+        this.tableData = res.data.vos || []
+      }).catch(e => {
+        this.loading = false
+        this.tableData = []
+        console.log(e);
+      })
+    },
+    handleCurrentChange (currentPage) {
+      this.currentPage = currentPage
+      this.getUserListFn()
+    }
   },
 };
 </script>
@@ -42,5 +111,12 @@ export default {
 .user-page {
   width: 100%;
   height: 100%;
+  .padding20 {
+    padding: 20px;
+  }
+  .flexend {
+    display: flex;
+    justify-content: flex-end;
+  }
 }
 </style>