完善智能白板后台

.editorconfig

@@ -3,7 +3,7 @@ root = true
 
 [*]
 charset = utf-8
-indent_style = space
+indent_style = tab
 indent_size = 2
 end_of_line = lf
 insert_final_newline = true

.env.development

@@ -2,7 +2,7 @@
 ENV = 'development'
 
 # base api
-VUE_APP_BASE_API = '/dev-api'
+VUE_APP_BASE_API = 'https://whiteboard.ai160.com'
 
 # vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,
 # to control whether the babel-plugin-dynamic-import-node plugin is enabled.

src/api/admin.js

@@ -0,0 +1,57 @@
+import request from '@/utils/request'
+// 获取设备列表
+export function getDeviceList(params) {
+  return request({
+    url: '/sharedWhiteBoard/cms/device',
+    method: 'get',
+    params
+  })
+}
+// 获取安装维护人员列表
+export function getDeviceModifierList(params) {
+  return request({
+    url: '/sharedWhiteBoard/cms/deviceModifier',
+    method: 'get',
+    params
+  })
+}
+// 添加安装维护人员
+export function addDeviceModifier(data) {
+  return request({
+    url: '/sharedWhiteBoard/cms/deviceModifier',
+    method: 'post',
+    data
+  })
+}
+// 修改安装维护人员
+export function setDeviceModifier(data) {
+  return request({
+    url: '/sharedWhiteBoard/cms/deviceModifier',
+    method: 'put',
+    data
+  })
+}
+// 查询设备日志
+export function queryLogList(params) {
+  return request({
+    url: '/sharedWhiteBoard/cms/deviceLog',
+    method: 'get',
+    params
+  })
+}
+// 更新设备维护人员
+export function setDeviceAdmin(data) {
+  return request({
+    url: '/sharedWhiteBoard/cms/device',
+    method: 'put',
+    data
+  })
+}
+// 修改安装维护人员
+export function setDeviceStatus(data) {
+  return request({
+    url: '/sharedWhiteBoard/cms/deviceModifier',
+    method: 'put',
+    data
+  })
+}

src/api/install.js

@@ -0,0 +1,17 @@
+import request from '@/utils/request'
+// 获取设备列表
+export function addDeviceList(data) {
+  return request({
+    url: '/sharedWhiteBoard/cms/device',
+    method: 'post',
+    data
+  })
+}
+// 添加设备记录
+export function addDeviceLogList(data) {
+  return request({
+    url: '/sharedWhiteBoard/cms/deviceLog',
+    method: 'post',
+    data
+  })
+}

src/api/user.js

@@ -2,7 +2,7 @@ import request from '@/utils/request'
 
 export function login(data) {
   return request({
-    url: '/user/login',
+    url: '/sharedWhiteBoard/cms/user',
     method: 'post',
     data
   })

src/components/Breadcrumb/index.vue

@@ -29,12 +29,12 @@ export default {
   methods: {
     getBreadcrumb() {
       // only show routes with meta.title
-      let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
-      const first = matched[0]
+      const matched = this.$route.matched.filter(item => item.meta && item.meta.title)
+      // const first = matched[0]
 
-      if (!this.isDashboard(first)) {
-        matched = [{ path: '/dashboard', meta: { title: 'Dashboard' }}].concat(matched)
-      }
+      // if (!this.isDashboard(first)) {
+      //   matched = [{ path: '/dashboard', meta: { title: 'Dashboard' }}].concat(matched)
+      // }
 
       this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
     },

src/layout/components/Navbar.vue

@@ -11,17 +11,6 @@
           <i class="el-icon-caret-bottom" />
         </div>
         <el-dropdown-menu slot="dropdown" class="user-dropdown">
-          <router-link to="/">
-            <el-dropdown-item>
-              Home
-            </el-dropdown-item>
-          </router-link>
-          <a target="_blank" href="https://github.com/PanJiaChen/vue-admin-template/">
-            <el-dropdown-item>Github</el-dropdown-item>
-          </a>
-          <a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/">
-            <el-dropdown-item>Docs</el-dropdown-item>
-          </a>
           <el-dropdown-item divided>
             <span style="display:block;" @click="logout">Log Out</span>
           </el-dropdown-item>

src/layout/components/Sidebar/index.vue

@@ -23,14 +23,41 @@ import { mapGetters } from 'vuex'
 import Logo from './Logo'
 import SidebarItem from './SidebarItem'
 import variables from '@/styles/variables.scss'
+import { getType } from '@/utils/auth'
 
 export default {
+  data() {
+    return {
+      type: getType()
+    }
+  },
   components: { SidebarItem, Logo },
   computed: {
     ...mapGetters([
       'sidebar'
     ]),
     routes() {
+      let sidebarArr = [];
+      console.log(this.type)
+      if(this.type === '0') {
+        sidebarArr = ['设备管理', '安装/维护人员管理', '维护人员分配设备管理', '设备安装']
+      }
+      if(this.type === '1') {
+        sidebarArr = ['设备安装']
+      }
+      if(this.type === '2') {
+        sidebarArr = ['设备管理']
+      }
+      this.$router.options.routes.forEach((item, index) => {
+        if (!!item.children) {
+          const title = item.children[0].meta.title
+          this.$router.options.routes[index].children[0].hidden = true
+          if (sidebarArr.indexOf(title) !== -1) {
+            console.log(index)
+            this.$router.options.routes[index].children[0].hidden = false
+          }
+        }
+      })
       return this.$router.options.routes
     },
     activeMenu() {

src/permission.js

@@ -19,7 +19,6 @@ router.beforeEach(async(to, from, next) => {
 
   // determine whether the user has logged in
   const hasToken = getToken()
-
   if (hasToken) {
     if (to.path === '/login') {
       // if is logged in, redirect to the home page
@@ -31,15 +30,12 @@ router.beforeEach(async(to, from, next) => {
         next()
       } else {
         try {
-          // get user info
-          await store.dispatch('user/getInfo')
-
           next()
         } catch (error) {
           // remove token and go to login page to re-login
           await store.dispatch('user/resetToken')
           Message.error(error || 'Has Error')
-          next(`/login?redirect=${to.path}`)
+          next(`/login`)
           NProgress.done()
         }
       }
@@ -52,7 +48,7 @@ router.beforeEach(async(to, from, next) => {
       next()
     } else {
       // other pages that do not have permission to access are redirected to the login page.
-      next(`/login?redirect=${to.path}`)
+      next(`/login`)
       NProgress.done()
     }
   }

src/router/index.js

@@ -36,13 +36,11 @@ export const constantRoutes = [
     component: () => import('@/views/login/index'),
     hidden: true
   },
-
   {
     path: '/404',
     component: () => import('@/views/404'),
     hidden: true
   },
-
   {
     path: '/',
     component: Layout,
@@ -50,50 +48,51 @@ export const constantRoutes = [
     children: [{
       path: 'device',
       name: 'Device',
-      component: () => import('@/views/device/index'),
-      meta: { title: '设备管理', icon: 'dashboard' }
+      component: () => import('@/views/admin/device/index'),
+      meta: { title: '设备管理', icon: 'dashboard' },
+      hidden: true
     }]
   },
-
   {
-    path: '/example',
+    path: '/installMaintain',
     component: Layout,
-    redirect: '/example/table',
-    name: 'Example',
-    meta: { title: 'Example', icon: 'example' },
     children: [
       {
-        path: 'table',
-        name: 'Table',
-        component: () => import('@/views/table/index'),
-        meta: { title: 'Table', icon: 'table' }
+        path: 'installMaintain',
+        name: 'InstallMaintain',
+        component: () => import('@/views/admin/installMaintain/index'),
+        meta: { title: '安装/维护人员管理', icon: 'dashboard' },
+        hidden: true
       }
     ]
   },
-
   {
-    path: '/form',
+    path: '/allocateDevice',
     component: Layout,
     children: [
       {
-        path: 'index',
-        name: 'Form',
-        component: () => import('@/views/form/index'),
-        meta: { title: 'Form', icon: 'form' }
+        path: 'allocateDevice',
+        name: 'AllocateDevice',
+        component: () => import('@/views/admin/allocateDevice/index'),
+        meta: { title: '维护人员分配设备管理', icon: 'dashboard' },
+        hidden: true
       }
     ]
   },
-  {// 安装人员进行安装
+  {
     path: '/install',
     component: Layout,
-    name: 'Install',
-    component: () => import('@/views/installer/index'),
-    meta: { title: '设备安装', icon: 'dashboard' }
+    children: [{
+      path: 'install',
+      name: 'Install',
+      component: () => import('@/views/installer/index'),
+      meta: { title: '设备安装', icon: 'dashboard' },
+      hidden: true
+    }]
   },
   // 404 page must be placed at the end !!!
   { path: '*', redirect: '/404', hidden: true }
 ]
-
 const createRouter = () => new Router({
   // mode: 'history', // require service support
   scrollBehavior: () => ({ y: 0 }),

src/store/getters.js

@@ -3,6 +3,9 @@ const getters = {
   device: state => state.app.device,
   token: state => state.user.token,
   avatar: state => state.user.avatar,
-  name: state => state.user.name
+  name: state => state.user.name,
+  deviceData: state => state.admin.deviceData,
+  modifierData: state => state.admin.modifierData,
+  logData: state => state.admin.logData
 }
 export default getters

src/store/index.js

@@ -4,6 +4,8 @@ import getters from './getters'
 import app from './modules/app'
 import settings from './modules/settings'
 import user from './modules/user'
+import admin from './modules/admin'
+import install from './modules/install'
 
 Vue.use(Vuex)
 
@@ -11,7 +13,9 @@ const store = new Vuex.Store({
   modules: {
     app,
     settings,
-    user
+    user,
+    admin,
+    install
   },
   getters
 })

src/store/modules/admin.js

@@ -0,0 +1,110 @@
+import { getDeviceList, getDeviceModifierList, addDeviceModifier, setDeviceModifier, queryLogList, setDeviceAdmin } from '@/api/admin'
+import { parseTime } from '@/utils/index'
+const state = {
+  deviceData: [],
+  modifierData: [],
+  logData: []
+}
+
+const mutations = {
+  GET_DEVICE: (state, data) => {
+    state.deviceData = data
+  },
+  GET_MODIFIER: (state, data) => {
+    state.modifierData = data
+  },
+  GET_Log: (state, data) => {
+    if (data.length > 0) {
+      data.forEach(item => {
+        item.deviceLog.gmtModified = (parseTime(item.deviceLog.gmtModified))
+        item.deviceLog.gmtCreated = (parseTime(item.deviceLog.gmtCreated))
+      })
+    }
+    state.logData = data
+  }
+}
+
+const actions = {
+  // user login
+  getDeviceData({ commit }, deviceParams) {
+    return new Promise((resolve, reject) => {
+      getDeviceList(deviceParams).then(response => {
+        const { data } = response
+        commit('GET_DEVICE', data.list)
+        resolve()
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  getDeviceModifierData({ commit }, modifierParams) {
+    return new Promise((resolve, reject) => {
+      getDeviceModifierList(modifierParams).then(response => {
+        const { data } = response
+        console.log(data)
+        commit('GET_MODIFIER', data.list)
+        resolve()
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  addDeviceModifierData({ dispatch }, data) {
+    return new Promise((resolve, reject) => {
+      addDeviceModifier(data).then(response => {
+        const { data } = response
+        console.log(data)
+        dispatch('getDeviceModifierData')
+        // commit('GET_MODIFIER', data.list)
+        resolve()
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  setDeviceModifierData({ dispatch }, data) {
+    return new Promise((resolve, reject) => {
+      setDeviceModifier(data).then(response => {
+        const { data } = response
+        console.log(data)
+        dispatch('getDeviceModifierData')
+        // commit('GET_MODIFIER', data.list)
+        resolve()
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  queryLogData({ commit }, logParams) {
+    return new Promise((resolve, reject) => {
+      queryLogList(logParams).then(response => {
+        const { data } = response
+        console.log(data)
+        commit('GET_Log', data.list)
+        resolve()
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  addDeviceAdminList({ commit }, data) {
+    return new Promise((resolve, reject) => {
+      setDeviceAdmin(data).then(response => {
+        const { data } = response
+        console.log(data)
+        // dispatch('getDeviceModifierData')
+        // commit('GET_MODIFIER', data.list)
+        resolve()
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}

src/store/modules/install.js

@@ -0,0 +1,45 @@
+import { addDeviceList, addDeviceLogList } from '@/api/install'
+const state = {
+  addDeviceData: []
+}
+
+const mutations = {
+  ADD_DEVICE: (state, data) => {
+    console.log(state, data)
+  }
+}
+
+const actions = {
+  // user login
+  addDeviceData({ commit }, data) {
+    return new Promise((resolve, reject) => {
+      addDeviceList(data).then(response => {
+        const { data } = response
+        console.log(data)
+        // commit('GET_DEVICE', data.list)
+        resolve(data)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  addDeviceLog({ commit }, data) {
+    return new Promise((resolve, reject) => {
+      addDeviceLogList(data).then(response => {
+        const { data } = response
+        console.log(data)
+        // commit('GET_DEVICE', data.list)
+        resolve()
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}

src/store/modules/user.js

@@ -1,5 +1,5 @@
 import { login, logout, getInfo } from '@/api/user'
-import { getToken, setToken, removeToken } from '@/utils/auth'
+import { getToken, setToken, removeToken, setType } from '@/utils/auth'
 import { resetRouter } from '@/router'
 
 const state = {
@@ -25,11 +25,12 @@ const actions = {
   login({ commit }, userInfo) {
     const { username, password } = userInfo
     return new Promise((resolve, reject) => {
-      login({ username: username.trim(), password: password }).then(response => {
+      login({ loginName: username.trim(), password: password }).then(response => {
         const { data } = response
-        commit('SET_TOKEN', data.token)
-        setToken(data.token)
-        resolve()
+        commit('SET_TOKEN', data.id)
+        setToken(data.id)
+        setType(data.type)
+        resolve(data)
       }).catch(error => {
         reject(error)
       })

src/utils/auth.js

@@ -1,6 +1,6 @@
 import Cookies from 'js-cookie'
 
-const TokenKey = 'vue_admin_template_token'
+const TokenKey = 'adminUid'
 
 export function getToken() {
   return Cookies.get(TokenKey)
@@ -10,6 +10,14 @@ export function setToken(token) {
   return Cookies.set(TokenKey, token)
 }
 
+export function setType(token) {
+  return Cookies.set('type', token)
+}
+
+export function getType() {
+  return Cookies.get('type')
+}
+
 export function removeToken() {
   return Cookies.remove(TokenKey)
 }

src/utils/request.js

@@ -19,7 +19,7 @@ service.interceptors.request.use(
       // let each request carry token
       // ['X-Token'] is a custom headers key
       // please modify it according to the actual situation
-      config.headers['X-Token'] = getToken()
+      config.headers['uid'] = getToken()
     }
     return config
   },
@@ -44,9 +44,8 @@ service.interceptors.response.use(
    */
   response => {
     const res = response.data
-
     // if the custom code is not 20000, it is judged as an error.
-    if (res.code !== 20000) {
+    if (res.code !== 200) {
       Message({
         message: res.message || 'Error',
         type: 'error',

src/utils/validate.js

@@ -15,6 +15,6 @@ export function isExternal(path) {
  * @returns {Boolean}
  */
 export function validUsername(str) {
-  const valid_map = ['admin', 'editor']
+  const valid_map = ['test', 'editor']
   return valid_map.indexOf(str.trim()) >= 0
 }

src/views/admin/allocateDevice/index.vue

@@ -0,0 +1,206 @@
+<template>
+  <div class="dashboard-container">
+    <el-table
+      :data="modifierData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
+      style="width: 100%"
+    >
+      <el-table-column
+        label="名字"
+        prop="name"
+      />
+      <el-table-column
+        label="手机号"
+        prop="mobile"
+      />
+      <el-table-column
+        label="人员"
+      >
+        <template slot-scope="scope">
+          {{ peopleType[scope.row.type] }}
+        </template>
+      </el-table-column>
+      <el-table-column
+        align="right"
+      >
+        <template slot="header">
+          <el-input
+            v-model="search"
+            size="mini"
+            placeholder="输入关键字搜索"
+          />
+        </template>
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            style="float: left; margin: 0 10px 0 0;"
+            @click="handleAdd(scope.$index, scope.row)"
+          >
+            增加
+          </el-button>
+          <el-button
+            size="mini"
+            style="float: left; margin: 0 10px 0 0;"
+            @click="handleSet(scope.$index, scope.row)"
+          >
+            转移
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-dialog :title="title" :visible.sync="dialogFormVisible">
+      <el-table
+        ref="multipleTable"
+        :data="deviceData"
+        tooltip-effect="dark"
+        style="width: 100%"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column
+          type="selection"
+          width="55"
+        />
+        <el-table-column
+          prop="deviceCode"
+          label="设备码"
+          width="120"
+        />
+        <el-table-column
+          prop="deviceSize"
+          label="设备尺寸"
+          show-overflow-tooltip
+        />
+        <el-table-column
+          label="设备型号"
+          prop="deviceType"
+        />
+      </el-table>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">取 消</el-button>
+        <el-button type="primary" @click="handleOk">{{ okBtn }}</el-button>
+      </div>
+    </el-dialog>
+    <el-dialog title="转移人员" :visible.sync="dialogFormMoveVisible">
+      <el-table
+        ref="multipleTable"
+        :data="modifierData"
+        style="width: 100%"
+        highlight-current-row
+        @current-change="handleSelectionMoveChange"
+      >
+        <el-table-column
+          label="名字"
+          prop="name"
+        />
+        <el-table-column
+          label="手机号"
+          prop="mobile"
+        />
+      </el-table>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormMoveVisible = false">取 消</el-button>
+        <el-button type="primary" @click="handleMoveOk">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+export default {
+  name: 'InstallMaintain',
+  data() {
+    return {
+      form: {
+        modifierId: '',
+        deviceIds: []
+      },
+      addInput: [],
+      search: '',
+      dialogFormVisible: false,
+      gridData: [],
+      gridTile: '',
+      handleType: '',
+      title: '',
+      peopleType: ['管理员', '安装员', '维护员'],
+      multipleSelection: [],
+      okBtn: '确 定',
+      dialogFormMoveVisible: false,
+      multipleMoveSelection: []
+    }
+  },
+  computed: {
+    ...mapGetters(['modifierData', 'deviceData'])
+  },
+  created() {
+    // this.$store.dispatch('admin/getDeviceData')
+    this.$store.dispatch('admin/getDeviceModifierData', { type: 2 })
+  },
+  methods: {
+    handleAdd(index, row) {
+      this.dialogFormVisible = true
+      this.$store.dispatch('admin/getDeviceData')
+      this.title = '添加设备'
+      this.okBtn = '确 定'
+      this.form.modifierId = row.id
+      this.handleType = 'add'
+    },
+    handleOk() {
+      if (this.handleType === 'add') {
+        console.log(this.multipleSelection)
+        this.multipleSelection.forEach((item) => {
+          this.form.deviceIds.push(item.id)
+        })
+        this.$store.dispatch('admin/addDeviceAdminList', this.form).then(() => {
+          this.form.deviceIds = []
+        })
+      }
+      this.dialogFormVisible = false
+      if (this.handleType === 'move') {
+        this.$store.dispatch('admin/getDeviceModifierData', { type: 2 })
+        this.dialogFormMoveVisible = true
+      }
+    },
+    handleMoveOk() {
+      console.log(this.multipleMoveSelection.id)
+      this.form.modifierId = this.multipleMoveSelection.id
+      this.multipleSelection.forEach((item) => {
+        this.form.deviceIds.push(item.id)
+      })
+      this.$store.dispatch('admin/addDeviceAdminList', this.form).then(() => {
+        this.form.deviceIds = []
+      })
+      this.dialogFormMoveVisible = false
+    },
+    handleSet(index, row) {
+      this.dialogFormVisible = true
+      this.$store.dispatch('admin/getDeviceData', {
+        modifier: row.id
+      })
+      this.title = '转移设备'
+      this.okBtn = '转 移'
+      // this.form.modifierId = row.id
+      this.handleType = 'move'
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val
+    },
+    handleSelectionMoveChange(val) {
+      this.multipleMoveSelection = val
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.dashboard {
+  &-container {
+    margin: 30px;
+  }
+  &-text {
+    font-size: 30px;
+    line-height: 46px;
+  }
+}
+</style>
+

src/views/admin/device/index.vue

@@ -1,70 +1,192 @@
 <template>
   <div class="dashboard-container">
-    <div class="dashboard-text">name: {{ name }}</div>
-    <el-form ref="form" :model="form" label-width="120px">
-      <el-form-item label="设备编号">
-        <el-select v-model="form.region" placeholder="请选择设备编号">
-          <el-option label="Zone one" value="shanghai" />
-          <el-option label="Zone two" value="beijing" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="设备型号">
-        <el-select v-model="form.region" placeholder="请选择设备型号">
-          <el-option label="Zone one" value="shanghai" />
-          <el-option label="Zone two" value="beijing" />
-        </el-select>
-      </el-form-item>
-
-      <el-form-item label="设备地区">
-        <el-select v-model="form.region" placeholder="请选择设备地区">
-          <el-option label="Zone one" value="shanghai" />
-          <el-option label="Zone two" value="beijing" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="设备地址">
-        <el-select v-model="form.region" placeholder="请选择设备地址">
-          <el-option label="Zone one" value="shanghai" />
-          <el-option label="Zone two" value="beijing" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="安装日期">
-        <el-col :span="11">
-          <el-date-picker
-            v-model="form.date1"
-            type="date"
-            placeholder="请选择安装日期"
-            style="width: 100%;"
+    <el-table
+      :data="deviceData.filter(data => !search || data.author.toLowerCase().includes(search.toLowerCase()))"
+      style="width: 100%"
+    >
+      <el-table-column
+        label="设备码"
+        prop="deviceCode"
+      />
+      <el-table-column
+        label="设备尺寸"
+        prop="deviceSize"
+      />
+      <el-table-column
+        label="设备型号"
+        prop="deviceType"
+      />
+      <el-table-column
+        align="right"
+      >
+        <template slot="header" slot-scope="scope">
+          <el-input
+            v-model="search"
+            size="mini"
+            placeholder="输入关键字搜索"
           />
-        </el-col>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" @click="onSubmit">搜索</el-button>
-      </el-form-item>
-    </el-form>
+        </template>
+        <template slot-scope="scope">
+          <el-button
+            v-show="type === '0'"
+            size="mini"
+            style="float: left; margin: 0 10px 0 0;"
+            @click="handleInstall(scope.$index, scope.row)"
+          >
+            安装信息
+          </el-button>
+          <el-button
+            size="mini"
+            style="float: left; margin: 0 10px 0 0;"
+            @click="handleMaintain(scope.$index, scope.row)"
+          >
+            维护信息
+          </el-button>
+          <el-button
+            v-show="type === '2'"
+            size="mini"
+            style="float: left; margin: 0 10px 0 0;"
+            @click="handleMaintain(scope.$index, scope.row)"
+          >
+            立即维护
+          </el-button>
+          <el-button
+            v-show="type === '0'"
+            size="mini"
+            style="float: left; margin: 0 10px 0 0;"
+            @click="handleUse(scope.$index, scope.row)"
+          >
+            使用日志
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-dialog :title="gridTile" :visible.sync="dialogTableVisible">
+      <el-table :data="gridData">
+        <el-table-column
+          v-for="item in information"
+          :key="item.label"
+          :label="item.label"
+          :prop="item.type"
+        />
+      </el-table>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
+import { getToken, getType } from '@/utils/auth'
 
 export default {
+  name: 'Device',
   data() {
     return {
-      form: {
-        name: '',
-        region: '',
-        date1: '',
-        date2: '',
-        delivery: false,
-        type: [],
-        resource: '',
-        desc: ''
-      }
+      search: '',
+      dialogTableVisible: false,
+      gridData: [],
+      gridTile: '',
+      type: getType(),
+      uid: getToken(),
+      information: []
     }
   },
-  name: 'Device',
   computed: {
-    ...mapGetters(['name'])
+    ...mapGetters(['deviceData'])
+  },
+  created() {
+    console.log(111, this.type)
+    if (this.type === '2') {
+      this.$store.dispatch('admin/getDeviceData', {
+        modifier: this.uid
+      })
+    } else {
+      this.$store.dispatch('admin/getDeviceData')
+    }
+  },
+  methods: {
+    onSubmit() {
+      this.$message('submit!')
+    },
+    handleInstall(index, row) {
+      this.$store.dispatch('admin/queryLogData', {
+        deviceId: row.id,
+        deviceCode: row.deviceCode,
+        opType: 'INSTALL'
+      }).then(() => {
+        this.gridData = this.$store.getters.logData
+        // this.gridData.push(row)
+        this.gridTile = '安装信息'
+        this.information = [{
+          label: '安装日期',
+          type: 'deviceLog[gmtCreated]'
+        }, {
+          label: '安装人员',
+          type: 'deviceModifier[name]'
+        }, {
+          label: '安装地区',
+          type: 'deviceLog[gmtCreated]'
+        }, {
+          label: '安装地址',
+          type: 'deviceLog[gmtCreated]'
+        }, {
+          label: '备注信息',
+          type: 'deviceLog[description]'
+        }]
+        this.dialogTableVisible = true
+      })
+    },
+    handleMaintain(index, row) {
+      this.$store.dispatch('admin/queryLogData', {
+        deviceId: row.id,
+        deviceCode: row.deviceCode,
+        opType: 'MODIFIED'
+      }).then(() => {
+        this.gridData = this.$store.getters.logData
+        this.gridTile = '维护信息'
+        this.information = [{
+          label: '报修日期',
+          type: 'deviceLog[gmtCreated]'
+        }, {
+          label: '维护人员',
+          type: 'deviceModifier[name]'
+        }, {
+          label: '申请人员',
+          type: 'deviceLog[gmtCreated]'
+        }, {
+          label: '解决日期',
+          type: 'deviceLog[gmtCreated]'
+        }, {
+          label: '解决方案',
+          type: 'deviceLog[description]'
+        }]
+        this.dialogTableVisible = true
+      })
+    },
+    handleUse(index, row) {
+      console.log(index, row)
+      this.$store.dispatch('admin/queryLogData', {
+        deviceId: row.id,
+        deviceCode: row.deviceCode,
+        opType: 'USE'
+      }).then(() => {
+        this.gridData = this.$store.getters.logData
+        // this.gridData.push(row)
+        this.gridTile = '使用日志'
+        this.information = [{
+          label: '设备连接时间',
+          type: 'deviceLog[gmtCreated]'
+        }, {
+          label: '设备连接日期',
+          type: 'deviceModifier[name]'
+        }]        
+        this.dialogTableVisible = true
+      })
+      // this.gridData = []
+      // this.gridData.push(row)
+      // this.gridTile = '使用日志'
+      // this.dialogTableVisible = true
+    }
   }
 }
 </script>

src/views/admin/installMaintain/index.vue

@@ -0,0 +1,245 @@
+<template>
+  <div class="dashboard-container">
+    <el-button type="primary" @click="handleAdd">
+      添加人员
+    </el-button>
+    <el-table
+      :data="modifierData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
+      style="width: 100%"
+    >
+      <el-table-column
+        label="名字"
+        prop="name"
+      />
+      <el-table-column
+        label="手机号"
+        prop="mobile"
+      />
+      <el-table-column
+        label="人员"
+      >
+        <template slot-scope="scope">
+          {{ peopleType[scope.row.type] }}
+        </template>
+      </el-table-column>
+      <el-table-column
+        align="right"
+      >
+        <template slot="header">
+          <el-input
+            v-model="search"
+            size="mini"
+            placeholder="输入关键字搜索"
+          />
+        </template>
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            style="float: left; margin: 0 10px 0 0;"
+            @click="handleSet(scope.$index, scope.row)"
+          >
+            编辑
+          </el-button>
+          <el-button
+            size="mini"
+            style="float: left; margin: 0 10px 0 0;"
+            @click="handleSetPassword(scope.$index, scope.row)"
+          >
+            修改密码
+          </el-button>
+          <el-button
+            size="mini"
+            style="float: left; margin: 0 10px 0 0;"
+            @click="handleSetStatus(scope.$index, scope.row)"
+          >
+            {{ scope.row.status === 'DEL' ? '启用' : '禁用' }}
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-dialog :title="title" :visible.sync="dialogFormVisible">
+      <el-form ref="form" :model="form" label-width="120px">
+        <el-form-item v-for="item in addInput" :key="item.type" :label="item.name" label-width="120px">
+          <el-select v-if="item.select" v-model="form[item.type]" :placeholder="item.select">
+            <el-option label="管理员" value="0" />
+            <el-option label="安装员" value="1" />
+            <el-option label="维护员" value="2" />
+          </el-select>
+          <el-input v-else v-model="form[item.type]" autocomplete="off" />
+        </el-form-item>
+        <!--
+        <el-form-item label="人员名称" label-width="120px">
+          <el-input v-model="form.name" autocomplete="off" />
+        </el-form-item>
+        <el-form-item label="人员手机" label-width="120px">
+          <el-input v-model="form.mobile" autocomplete="off" />
+        </el-form-item>
+        <el-form-item label="人员密码" label-width="120px">
+          <el-input v-model="form.password" autocomplete="off" />
+        </el-form-item>
+        <el-form-item label="人员登录名" label-width="120px">
+          <el-input v-model="form.loginName" autocomplete="off" />
+        </el-form-item>
+        <el-form-item label="人员类型">
+          <el-select v-model="form.personnelType" placeholder="请选择人员类型">
+            <el-option label="管理员" value="0" />
+            <el-option label="安装员" value="1" />
+            <el-option label="维护员" value="2" />
+          </el-select>
+        </el-form-item>
+        -->
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">取 消</el-button>
+        <el-button type="primary" @click="handleOk">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import { setDeviceStatus } from '@/api/admin'
+export default {
+  name: 'InstallMaintain',
+  data() {
+    return {
+      form: {},
+      addInput: [],
+      search: '',
+      dialogFormVisible: false,
+      gridData: [],
+      gridTile: '',
+      handleType: '',
+      title: '',
+      peopleType: ['管理员', '安装员', '维护员']
+    }
+  },
+  computed: {
+    ...mapGetters(['modifierData'])
+  },
+  created() {
+    // this.$store.dispatch('admin/getDeviceData')
+    this.$store.dispatch('admin/getDeviceModifierData')
+  },
+  methods: {
+    onSubmit() {
+      this.$message('submit!')
+    },
+    handleAdd() {
+      this.dialogFormVisible = true
+      this.addInput = [{
+        name: '人员名称',
+        type: 'name'
+      },
+      {
+        name: '人员手机',
+        type: 'mobile'
+      },
+      {
+        name: '人员密码',
+        type: 'password'
+      },
+      {
+        name: '人员登录名',
+        type: 'loginName'
+      },
+      {
+        name: '人员类型',
+        type: 'type',
+        select: '请选择人员类型'
+      }]
+      this.form = {
+        name: '',
+        mobile: '',
+        password: '',
+        loginName: '',
+        type: ''
+      }
+      this.title = '添加人员'
+      this.handleType = 'add'
+    },
+    handleOk() {
+      if (this.handleType === 'add') {
+        this.$store.dispatch('admin/addDeviceModifierData', this.form)
+      }
+      if (this.handleType === 'set') {
+        this.$store.dispatch('admin/setDeviceModifierData', this.form)
+      }
+      this.dialogFormVisible = false
+    },
+    handleSet(index, row) {
+      console.log(index, row)
+      this.dialogFormVisible = true
+      this.addInput = [{
+        name: '人员名称',
+        type: 'name'
+      },
+      {
+        name: '人员类型',
+        type: 'type',
+        select: '请选择人员类型'
+      }]
+      this.form = {
+        id: row.id,
+        name: row.name,
+        type: row.type
+      }
+      this.title = '修改人员'
+      this.handleType = 'set'
+    },
+    handleSetPassword(index, row) {
+      console.log(index, row)
+      this.dialogFormVisible = true
+      this.addInput = [{
+        name: '请输入新密码',
+        type: 'password'
+      }]
+      this.form = {
+        id: row.id,
+        password: ''
+      }
+      this.title = '修改密码'
+      this.handleType = 'set'
+    },
+    handleSetStatus(index, row) {
+      console.log(row)
+      if (row.status === 'NORMAL') {
+        setDeviceStatus({
+          id: row.id,
+          name: row.name,
+          type: row.type,
+          password: row.password,
+          status: 'DEL'
+        }).then((res) => {
+          console.log(res)
+        })
+      } else if (row.status === 'DEL') {
+        setDeviceStatus({
+          id: row.id,
+          name: row.name,
+          type: row.type,
+          password: row.password,
+          status: 'NORMAL'
+        }).then((res) => {
+          console.log(res)
+        })
+      }
+      this.$store.dispatch('admin/getDeviceModifierData')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.dashboard {
+  &-container {
+    margin: 30px;
+  }
+  &-text {
+    font-size: 30px;
+    line-height: 46px;
+  }
+}
+</style>
+

src/views/form/index.vue

@@ -1,85 +0,0 @@
-<template>
-  <div class="app-container">
-    <el-form ref="form" :model="form" label-width="120px">
-      <el-form-item label="Activity name">
-        <el-input v-model="form.name" />
-      </el-form-item>
-      <el-form-item label="Activity zone">
-        <el-select v-model="form.region" placeholder="please select your zone">
-          <el-option label="Zone one" value="shanghai" />
-          <el-option label="Zone two" value="beijing" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="Activity time">
-        <el-col :span="11">
-          <el-date-picker v-model="form.date1" type="date" placeholder="Pick a date" style="width: 100%;" />
-        </el-col>
-        <el-col :span="2" class="line">-</el-col>
-        <el-col :span="11">
-          <el-time-picker v-model="form.date2" type="fixed-time" placeholder="Pick a time" style="width: 100%;" />
-        </el-col>
-      </el-form-item>
-      <el-form-item label="Instant delivery">
-        <el-switch v-model="form.delivery" />
-      </el-form-item>
-      <el-form-item label="Activity type">
-        <el-checkbox-group v-model="form.type">
-          <el-checkbox label="Online activities" name="type" />
-          <el-checkbox label="Promotion activities" name="type" />
-          <el-checkbox label="Offline activities" name="type" />
-          <el-checkbox label="Simple brand exposure" name="type" />
-        </el-checkbox-group>
-      </el-form-item>
-      <el-form-item label="Resources">
-        <el-radio-group v-model="form.resource">
-          <el-radio label="Sponsor" />
-          <el-radio label="Venue" />
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item label="Activity form">
-        <el-input v-model="form.desc" type="textarea" />
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" @click="onSubmit">Create</el-button>
-        <el-button @click="onCancel">Cancel</el-button>
-      </el-form-item>
-    </el-form>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      form: {
-        name: '',
-        region: '',
-        date1: '',
-        date2: '',
-        delivery: false,
-        type: [],
-        resource: '',
-        desc: ''
-      }
-    }
-  },
-  methods: {
-    onSubmit() {
-      this.$message('submit!')
-    },
-    onCancel() {
-      this.$message({
-        message: 'cancel!',
-        type: 'warning'
-      })
-    }
-  }
-}
-</script>
-
-<style scoped>
-.line{
-  text-align: center;
-}
-</style>
-

src/views/installer/index.vue

@@ -1,41 +1,62 @@
 <template>
   <div class="dashboard-container">
-    <div class="dashboard-text">name: {{ name }}</div>
-    <el-form ref="form" :model="form" label-width="120px">
-      <el-form-item label="设备编号">
+    <el-steps :active="active" finish-status="success">
+      <el-step title="步骤 1" />
+      <el-step title="步骤 2" />
+      <el-step title="步骤 3" />
+    </el-steps>
+    <el-form v-show="active === 0" ref="form" :model="form" :rules="rules" label-width="120px" class="demo-ruleForm">
+      <el-form-item label="设备编号" prop="deviceCode">
         <el-input v-model="form.deviceCode" />
       </el-form-item>
-      <el-form-item label="设备型号">
-        <el-select v-model="form.deviceType" placeholder="请选择设备型号">
-          <el-option label="Zone one" value="shanghai" />
-          <el-option label="Zone two" value="beijing" />
-        </el-select>
+      <el-form-item label="设备型号" prop="deviceType">
+        <el-input v-model="form.deviceType" />
       </el-form-item>
-
-      <el-form-item label="设备地区">
-        <el-select v-model="form.region" placeholder="请选择设备地区">
-          <el-option label="Zone one" value="shanghai" />
-          <el-option label="Zone two" value="beijing" />
-        </el-select>
+      <el-form-item label="设备尺寸" prop="deviceSize">
+        <el-input v-model="form.deviceSize" />
       </el-form-item>
-      <el-form-item label="设备地址">
+      <el-form-item label="设备地区" prop="region">
+        <el-input v-model="form.region" />
+      </el-form-item>
+      <el-form-item label="设备地址" prop="address">
         <el-input v-model="form.address" />
       </el-form-item>
-      <el-form-item label="备注信息">
+      <el-form-item label="备注信息" prop="description">
         <el-input v-model="form.description" />
       </el-form-item>
-      <el-form-item label="安装日期">
+      <el-form-item label="安装人员" prop="setter">
+        <el-select v-model="form.setter" placeholder="请选择安装人员">
+          <el-option v-for="item in modifierData" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="安装日期" prop="activateTime">
         <el-col :span="11">
           <el-date-picker
             v-model="form.activateTime"
             type="date"
             placeholder="请选择安装日期"
+            value-format="yyyy-MM-dd"
             style="width: 100%;"
           />
         </el-col>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" @click="onSubmit">确定</el-button>
+        <el-button type="primary" @click="onSubmit('form')">下一步</el-button>
+      </el-form-item>
+    </el-form>
+    <div v-show="active === 1">
+      第二步
+      <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
+    </div>
+    <el-form v-show="active === 2" ref="formLog" :model="formLog" :rules="rulesLog" label-width="120px" class="demo-ruleForm">
+      <el-form-item label="设备编号" prop="deviceCode">
+        <el-input v-model="formLog.deviceCode" />
+      </el-form-item>
+      <el-form-item label="测试报告" prop="description">
+        <el-input v-model="formLog.description" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmitLog('formLog')">确定</el-button>
       </el-form-item>
     </el-form>
   </div>
@@ -45,21 +66,102 @@
 import { mapGetters } from 'vuex'
 
 export default {
+  name: 'Install',
   data() {
     return {
       form: {
         deviceCode: '',
         deviceType: '',
+        deviceSize: '',
         region: '',
         address: '',
-        description:'',
+        description: '',
+        setter: '',
         activateTime: ''
+      },
+      active: 0,
+      rules: {
+        deviceCode: [
+          { required: true, message: '请输入设备编号', trigger: 'blur' }
+          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+        ],
+        deviceType: [
+          { required: true, message: '请输入设备型号', trigger: 'blur' }
+        ],
+        deviceSize: [
+          { required: true, message: '请输入设备尺寸', trigger: 'blur' }
+        ],
+        region: [
+          { required: true, message: '请输入设备地区', trigger: 'blur' }
+        ],
+        address: [
+          { required: true, message: '请输入设备地址', trigger: 'blur' }
+        ],
+        description: [
+          { required: true, message: '请输入备注信息', trigger: 'blur' }
+        ],
+        setter: [
+          { required: true, message: '请选择安装人员', trigger: 'change' }
+        ],
+        activateTime: [
+          { required: true, message: '请选择日期', trigger: 'change' }
+        ]
+      },
+      formLog: {
+        deviceCode: '',
+        deviceId: '',
+        opType: 'INSTALL',
+        description: ''
+      },
+      rulesLog: {
+        deviceCode: [
+          { required: true, message: '请输入设备编号', trigger: 'blur' }
+          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+        ],
+        description: [
+          { required: true, message: '请输入备注信息', trigger: 'blur' }
+        ]
       }
     }
   },
-  name: 'Install',
   computed: {
-    ...mapGetters(['name'])
+    ...mapGetters(['modifierData'])
+  },
+  created() {
+    // this.$store.dispatch('admin/getDeviceData')
+    this.$store.dispatch('admin/getDeviceModifierData', { type: 1 })
+  },
+  methods: {
+    onSubmit(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.$store.dispatch('install/addDeviceData', this.form).then((data) => {
+            this.formLog.deviceId = data.id
+            this.formLog.deviceCode = data.deviceCode
+            this.formLog.description = data.description
+            this.active++
+          })
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    },
+    next() {
+      this.active++
+    },
+    onSubmitLog(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.$store.dispatch('install/addDeviceLog', this.form).then(() => {
+            this.active++
+          })
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    }
   }
 }
 </script>

src/views/login/index.vue

@@ -53,33 +53,18 @@
 </template>
 
 <script>
-import { validUsername } from '@/utils/validate'
 
 export default {
   name: 'Login',
   data() {
-    const validateUsername = (rule, value, callback) => {
-      if (!validUsername(value)) {
-        callback(new Error('Please enter the correct user name'))
-      } else {
-        callback()
-      }
-    }
-    const validatePassword = (rule, value, callback) => {
-      if (value.length < 6) {
-        callback(new Error('The password can not be less than 6 digits'))
-      } else {
-        callback()
-      }
-    }
     return {
       loginForm: {
-        username: 'admin',
-        password: '111111'
+        username: 'test',
+        password: '123456'
       },
       loginRules: {
-        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
-        password: [{ required: true, trigger: 'blur', validator: validatePassword }]
+        username: [{ required: true, trigger: 'blur', message: '请输入登录用户' }],
+        password: [{ required: true, trigger: 'blur', message: '请输入密码' }]
       },
       loading: false,
       passwordType: 'password',
@@ -109,8 +94,12 @@ export default {
       this.$refs.loginForm.validate(valid => {
         if (valid) {
           this.loading = true
-          this.$store.dispatch('user/login', this.loginForm).then(() => {
-            this.$router.push({ path: this.redirect || '/' })
+          this.$store.dispatch('user/login', this.loginForm).then((data) => {
+            if (data.type === '1') {
+              this.$router.push({ path: this.redirect || '/install/install' })
+            } else {
+              this.$router.push({ path: this.redirect || '/' })
+            }
             this.loading = false
           }).catch(() => {
             this.loading = false

src/views/table/index.vue

@@ -1,79 +0,0 @@
-<template>
-  <div class="app-container">
-    <el-table
-      v-loading="listLoading"
-      :data="list"
-      element-loading-text="Loading"
-      border
-      fit
-      highlight-current-row
-    >
-      <el-table-column align="center" label="ID" width="95">
-        <template slot-scope="scope">
-          {{ scope.$index }}
-        </template>
-      </el-table-column>
-      <el-table-column label="Title">
-        <template slot-scope="scope">
-          {{ scope.row.title }}
-        </template>
-      </el-table-column>
-      <el-table-column label="Author" width="110" align="center">
-        <template slot-scope="scope">
-          <span>{{ scope.row.author }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="Pageviews" width="110" align="center">
-        <template slot-scope="scope">
-          {{ scope.row.pageviews }}
-        </template>
-      </el-table-column>
-      <el-table-column class-name="status-col" label="Status" width="110" align="center">
-        <template slot-scope="scope">
-          <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column align="center" prop="created_at" label="Display_time" width="200">
-        <template slot-scope="scope">
-          <i class="el-icon-time" />
-          <span>{{ scope.row.display_time }}</span>
-        </template>
-      </el-table-column>
-    </el-table>
-  </div>
-</template>
-
-<script>
-import { getList } from '@/api/table'
-
-export default {
-  filters: {
-    statusFilter(status) {
-      const statusMap = {
-        published: 'success',
-        draft: 'gray',
-        deleted: 'danger'
-      }
-      return statusMap[status]
-    }
-  },
-  data() {
-    return {
-      list: null,
-      listLoading: true
-    }
-  },
-  created() {
-    this.fetchData()
-  },
-  methods: {
-    fetchData() {
-      this.listLoading = true
-      getList().then(response => {
-        this.list = response.data.items
-        this.listLoading = false
-      })
-    }
-  }
-}
-</script>