添加电动车和配件录入等交互

src/layout/components/Sidebar/index.vue

@@ -33,21 +33,9 @@ export default {
     
     ...mapState("user", ['role']),
     routes() {
-      // let role = this.role
-      // let regx = /\//g
-      // let roles = role.filter(res => res.match(regx).length ===  1)
-      // let rolesChild = role.filter(res => res.match(regx).length !== 1)
-      // console.log(rolesChild,"rolesChildrolesChildrolesChildrolesChild");
-      // console.log(this.$router.options.routes,"rolesrolesrolesroles");
-      // let parent = [...this.$router.options.routes].filter(element => roles.includes(element.path));
-      // parent.forEach(element => {
-      //   element.children = element.children.filter(res => rolesChild.includes(element.path+'/'+res.path))
-      // });
-      
-      // console.log(parent,"asdsadsa");
-
-
-      let routes = this.$router.options.routes.copyWithin(0, 0)
+      let routes1 = this.$router.options.routes.copyWithin(0, 0)
+      let routestr = JSON.stringify(routes1)
+      let routes = JSON.parse(routestr)
       let role = this.role
       let regx = /\//g
       let roles = role.filter(res => res.match(regx).length ===  1)
@@ -56,12 +44,7 @@ export default {
       parent.forEach(element => {
         element.children = element.children.filter(res => rolesChild.includes(element.path+'/'+res.path))
       });
-      
-      console.log(parent, this.$router.options.routes);
       return parent
-
-
-      // return this.$router.options.routes
     },
     activeMenu() {
       const route = this.$route

src/permission.js

@@ -5,6 +5,9 @@ import NProgress from 'nprogress' // progress bar
 import 'nprogress/nprogress.css' // progress bar style
 import { getToken } from '@/utils/auth' // get token from cookie
 import getPageTitle from '@/utils/get-page-title'
+import { mapGetters, mapState, mapActions } from 'vuex'
+import { postJson, getSort } from '@/api/page'
+// import store from './store'
 
 NProgress.configure({ showSpinner: false }) // NProgress Configuration
 
@@ -33,7 +36,6 @@ router.beforeEach(async(to, from, next) => {
                 try {
                     // get user info
                     await store.dispatch('user/getInfo')
-
                     next()
                 } catch (error) {
                     // remove token and go to login page to re-login

src/router/index.js

@@ -85,14 +85,6 @@ export const constantRoutes = [{
                     import ('@/views/device/storage/index'),
                 meta: { title: '设备入库', icon: 'el-icon-sell' }
             },
-            // {
-            //     path: 'storage/create',
-            //     name: 'Create',
-            //     component: () =>
-            //         import ('@/views/device/storage/create'),
-            //     meta: { title: '电池新增', icon: 'el-icon-document' },
-            //     hidden: true
-            // },
             {
                 path: 'storage/batchWarehousing',
                 name: 'BatchWarehousing',
@@ -185,6 +177,22 @@ export const constantRoutes = [{
                     import ('@/views/device/configure/batteryCode'),
                 meta: { title: '电池编码管理', icon: 'el-icon-document' }
             },
+            {
+                path: 'configure/carCode',
+                name: 'CarCode',
+                hidden: true,
+                component: () =>
+                    import ('@/views/device/configure/carCode'),
+                meta: { title: '电动车编码管理', icon: 'el-icon-document' }
+            },
+            {
+                path: 'configure/partsCode',
+                name: 'PartsCode',
+                hidden: true,
+                component: () =>
+                    import ('@/views/device/configure/partsCode'),
+                meta: { title: '配件编码管理', icon: 'el-icon-document' }
+            },
             {
                 path: 'configure/accessoriesType',
                 name: 'AccessoriesType',

src/store/modules/user.js

@@ -1,6 +1,7 @@
 import { login, logout, getInfo } from '@/api/user'
 import { getToken, setToken, removeToken } from '@/utils/auth'
 import { resetRouter } from '@/router'
+import { postJson, getSort } from '@/api/page'
 
 const getDefaultState = () => {
     return {
@@ -48,7 +49,6 @@ const actions = {
     },
 
     setRole({ commit }, data) {
-        console.log(data, "dataddddddddddddd");
         commit('SET_ROLE', data)
     },
 
@@ -66,6 +66,11 @@ const actions = {
 
                 commit('SET_NAME', name)
                 commit('SET_AVATAR', avatar)
+                postJson('/api/v1/sys/role/tree', { id: 'admin' }).then(response => {
+                    if (response.code === 200) {
+                        commit('SET_ROLE', response.data.checked)
+                    }
+                })
                 resolve(data)
             }).catch(error => {
                 reject(error)

src/views/device/allocation/index.vue

@@ -1,118 +1,350 @@
 <template>
   <div class="app-container">
     <h1>设备调拨</h1>
-		<div class="top-info">
-			已出库设备 <span>1864</span>，可出库设备 <span>200</span>
-		</div>
-
-		<el-form :inline="true" :model="listQuery" @keyup.enter.native="searchHandle()">
-			<el-row>
-				<el-col :span="5">
-					<el-form-item label="设备SN">
-						<el-input v-model="listQuery.sn" placeholder="请输入设备SN" clearable></el-input>
-					</el-form-item>
-				</el-col>
-				<el-col :span="5">
-					<el-form-item label="调拨类型">
-						<el-select v-model="listQuery.type">
-              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
-            </el-select> 
-					</el-form-item>
-				</el-col>
-        <el-col :span="9">
-					<el-form-item label="调拨时间">
-						<el-date-picker
-              v-model="listQuery.time"
-              type="datetimerange"
-              range-separator="至"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期">
-            </el-date-picker>
-					</el-form-item>
-				</el-col>
-				<el-col :span="5">
-					<div style="float: right;">
-						<el-form-item>
-							<el-button type="primary" @click="searchHandle()">搜索</el-button>
-						</el-form-item>
-						<el-form-item>
-							<el-button @click="resetForm()">重置</el-button>
-						</el-form-item>
-					</div>
-				</el-col>
-			</el-row>
-			<el-row>
-				<el-form-item>
-					<el-button type="primary" @click="gotoAddHandle()">新增调拨</el-button>
-				</el-form-item>
-				<el-form-item>
-					<el-button type="primary" @click="gotoBackHandle()">调回平台</el-button>
-				</el-form-item>
-			</el-row>
-		</el-form>
-
-    <el-table
-      v-loading="loading"
-      :data="data"
-      element-loading-text="Loading"
-			:header-cell-style="{background:'rgba(242, 242, 242, 1)',borderColor:'rgba(242, 242, 242, 1);',textAlign:'center'}"
-			:cell-style="{'text-align':'center'}"
-      fit
-      highlight-current-row
-    >
-			<el-table-column label="调拨时间" sortable="custom">
-        <template slot-scope="scope">
-          {{ scope.row.add_time }}
-        </template>
-      </el-table-column>
-
-      <el-table-column label="调拨数量" prop="plateNumber">
-        <template slot-scope="scope">
-          {{ scope.row.total }}
-        </template>
-      </el-table-column>
-
-      <el-table-column label="调拨类型" prop="deptId">
-        <template slot-scope="scope">
-          {{ scope.row.tf_device_type}}
-        </template>
-      </el-table-column>
-
-      <el-table-column label="用途">
-        <template slot-scope="scope">
-          {{ scope.row.tf_used }}
-        </template>
-      </el-table-column>
-
-      <el-table-column label="客户">
-        <template slot-scope="scope">
-          {{ scope.row.customTitle }}
-        </template>
-      </el-table-column>
-
-			<el-table-column label="调拨人">
-        <template slot-scope="scope">
-          {{ scope.row.operator }}
-        </template>
-      </el-table-column>
-
-      <el-table-column label="备注">
-        <template slot-scope="scope">
-          {{ scope.row.remarks }}
-        </template>
-      </el-table-column>
-
-      <el-table-column align="center" label="操作" width="180">
-        <template slot-scope="scope">
-          <el-button @click="infoHandle(scope.row)" type="text">查看详情</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-
-		<el-pagination style="float: right; margin-top: 30px;" :current-page="listQuery.index" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.length" :total="total"
-			layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
-			@current-change="pageCurrentChangeHandle">
-		</el-pagination>
+    <el-tabs v-model="activeName" @tab-click="handleClick">
+      <el-tab-pane label="电池" name="first">
+        <div class="top-info">
+          已调拨设备 <span>1864</span>，可调拨设备 <span>200</span>
+        </div>
+
+        <el-form :inline="true" :model="listQuery" @keyup.enter.native="searchHandle()">
+          <el-row>
+            <el-col :span="5">
+              <el-form-item label="设备SN">
+                <el-input v-model="listQuery.sn" placeholder="请输入设备SN" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="5">
+              <el-form-item label="调拨类型">
+                <el-select v-model="listQuery.type">
+                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                </el-select> 
+              </el-form-item>
+            </el-col>
+            <el-col :span="9">
+              <el-form-item label="调拨时间">
+                <el-date-picker
+                  v-model="listQuery.time"
+                  type="datetimerange"
+                  range-separator="至"
+                  start-placeholder="开始日期"
+                  end-placeholder="结束日期">
+                </el-date-picker>
+              </el-form-item>
+            </el-col>
+            <el-col :span="5">
+              <div style="float: right;">
+                <el-form-item>
+                  <el-button type="primary" @click="searchHandle()">搜索</el-button>
+                </el-form-item>
+                <el-form-item>
+                  <el-button @click="resetForm()">重置</el-button>
+                </el-form-item>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-form-item>
+              <el-button type="primary" @click="gotoAddHandle()">新增调拨</el-button>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="gotoBackHandle()">调回平台</el-button>
+            </el-form-item>
+          </el-row>
+        </el-form>
+
+        <el-table
+          v-loading="loading"
+          :data="data"
+          element-loading-text="Loading"
+          :header-cell-style="{background:'rgba(242, 242, 242, 1)',borderColor:'rgba(242, 242, 242, 1);',textAlign:'center'}"
+          :cell-style="{'text-align':'center'}"
+          fit
+          highlight-current-row
+        >
+          <el-table-column label="调拨时间" sortable="custom">
+            <template slot-scope="scope">
+              {{ scope.row.add_time }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="调拨数量" prop="plateNumber">
+            <template slot-scope="scope">
+              {{ scope.row.total }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="调拨类型" prop="deptId">
+            <template slot-scope="scope">
+              {{ scope.row.tf_device_type}}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="用途">
+            <template slot-scope="scope">
+              {{ scope.row.tf_used }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="客户">
+            <template slot-scope="scope">
+              {{ scope.row.customTitle }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="调拨人">
+            <template slot-scope="scope">
+              {{ scope.row.operator }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="备注">
+            <template slot-scope="scope">
+              {{ scope.row.remarks }}
+            </template>
+          </el-table-column>
+
+          <el-table-column align="center" label="操作" width="180">
+            <template slot-scope="scope">
+              <el-button @click="infoHandle(scope.row)" type="text">查看详情</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <el-pagination style="float: right; margin-top: 30px;" :current-page="listQuery.index" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.length" :total="total"
+          layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
+          @current-change="pageCurrentChangeHandle">
+        </el-pagination>
+      </el-tab-pane>
+      <el-tab-pane label="电动车" name="second">
+        <div class="top-info">
+          已调拨设备 <span>1864</span>，可调拨设备 <span>200</span>
+        </div>
+
+        <el-form :inline="true" :model="listQuery" @keyup.enter.native="searchHandle()">
+          <el-row>
+            <el-col :span="5">
+              <el-form-item label="设备SN">
+                <el-input v-model="listQuery.sn" placeholder="请输入设备SN" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="5">
+              <el-form-item label="调拨类型">
+                <el-select v-model="listQuery.type">
+                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                </el-select> 
+              </el-form-item>
+            </el-col>
+            <el-col :span="9">
+              <el-form-item label="调拨时间">
+                <el-date-picker
+                  v-model="listQuery.time"
+                  type="datetimerange"
+                  range-separator="至"
+                  start-placeholder="开始日期"
+                  end-placeholder="结束日期">
+                </el-date-picker>
+              </el-form-item>
+            </el-col>
+            <el-col :span="5">
+              <div style="float: right;">
+                <el-form-item>
+                  <el-button type="primary" @click="searchHandle()">搜索</el-button>
+                </el-form-item>
+                <el-form-item>
+                  <el-button @click="resetForm()">重置</el-button>
+                </el-form-item>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-form-item>
+              <el-button type="primary" @click="gotoAddHandle()">新增调拨</el-button>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="gotoBackHandle()">调回平台</el-button>
+            </el-form-item>
+          </el-row>
+        </el-form>
+
+        <el-table
+          v-loading="loading"
+          :data="data"
+          element-loading-text="Loading"
+          :header-cell-style="{background:'rgba(242, 242, 242, 1)',borderColor:'rgba(242, 242, 242, 1);',textAlign:'center'}"
+          :cell-style="{'text-align':'center'}"
+          fit
+          highlight-current-row
+        >
+          <el-table-column label="调拨时间" sortable="custom">
+            <template slot-scope="scope">
+              {{ scope.row.add_time }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="调拨数量" prop="plateNumber">
+            <template slot-scope="scope">
+              {{ scope.row.total }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="调拨类型" prop="deptId">
+            <template slot-scope="scope">
+              {{ scope.row.tf_device_type}}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="用途">
+            <template slot-scope="scope">
+              {{ scope.row.tf_used }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="客户">
+            <template slot-scope="scope">
+              {{ scope.row.customTitle }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="调拨人">
+            <template slot-scope="scope">
+              {{ scope.row.operator }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="备注">
+            <template slot-scope="scope">
+              {{ scope.row.remarks }}
+            </template>
+          </el-table-column>
+
+          <el-table-column align="center" label="操作" width="180">
+            <template slot-scope="scope">
+              <el-button @click="infoHandle(scope.row)" type="text">查看详情</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <el-pagination style="float: right; margin-top: 30px;" :current-page="listQuery.index" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.length" :total="total"
+          layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
+          @current-change="pageCurrentChangeHandle">
+        </el-pagination>
+      </el-tab-pane>
+      <el-tab-pane label="配件" name="third">
+        <div class="top-info">
+          已调拨设备 <span>1864</span>，可调拨设备 <span>200</span>
+        </div>
+
+        <el-form :inline="true" :model="listQuery" @keyup.enter.native="searchHandle()">
+          <el-row>
+            <el-col :span="5">
+              <el-form-item label="设备SN">
+                <el-input v-model="listQuery.sn" placeholder="请输入设备SN" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="5">
+              <el-form-item label="调拨类型">
+                <el-select v-model="listQuery.type">
+                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                </el-select> 
+              </el-form-item>
+            </el-col>
+            <el-col :span="9">
+              <el-form-item label="调拨时间">
+                <el-date-picker
+                  v-model="listQuery.time"
+                  type="datetimerange"
+                  range-separator="至"
+                  start-placeholder="开始日期"
+                  end-placeholder="结束日期">
+                </el-date-picker>
+              </el-form-item>
+            </el-col>
+            <el-col :span="5">
+              <div style="float: right;">
+                <el-form-item>
+                  <el-button type="primary" @click="searchHandle()">搜索</el-button>
+                </el-form-item>
+                <el-form-item>
+                  <el-button @click="resetForm()">重置</el-button>
+                </el-form-item>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-form-item>
+              <el-button type="primary" @click="gotoAddHandle()">新增调拨</el-button>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="gotoBackHandle()">调回平台</el-button>
+            </el-form-item>
+          </el-row>
+        </el-form>
+
+        <el-table
+          v-loading="loading"
+          :data="data"
+          element-loading-text="Loading"
+          :header-cell-style="{background:'rgba(242, 242, 242, 1)',borderColor:'rgba(242, 242, 242, 1);',textAlign:'center'}"
+          :cell-style="{'text-align':'center'}"
+          fit
+          highlight-current-row
+        >
+          <el-table-column label="调拨时间" sortable="custom">
+            <template slot-scope="scope">
+              {{ scope.row.add_time }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="调拨数量" prop="plateNumber">
+            <template slot-scope="scope">
+              {{ scope.row.total }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="调拨类型" prop="deptId">
+            <template slot-scope="scope">
+              {{ scope.row.tf_device_type}}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="用途">
+            <template slot-scope="scope">
+              {{ scope.row.tf_used }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="客户">
+            <template slot-scope="scope">
+              {{ scope.row.customTitle }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="调拨人">
+            <template slot-scope="scope">
+              {{ scope.row.operator }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="备注">
+            <template slot-scope="scope">
+              {{ scope.row.remarks }}
+            </template>
+          </el-table-column>
+
+          <el-table-column align="center" label="操作" width="180">
+            <template slot-scope="scope">
+              <el-button @click="infoHandle(scope.row)" type="text">查看详情</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <el-pagination style="float: right; margin-top: 30px;" :current-page="listQuery.index" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.length" :total="total"
+          layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
+          @current-change="pageCurrentChangeHandle">
+        </el-pagination>
+      </el-tab-pane>
+    </el-tabs>
   </div>
 </template>
 
@@ -144,13 +376,18 @@ export default {
         {label: '商用', value: 1},
         {label: '测试', value: 2},
         {label: '试用', value: 3}
-      ]
+      ],
+      activeName: 'first'
     }
   },
   created() {
     this.getDataList()
   },
   methods: {
+    //切换tab页
+    handleClick(tab) {
+      this.activeName = tab.name
+    },
     //搜索
     searchHandle() {
       this.listQuery.index = 1

src/views/device/configure/carCode-add-or-update.vue

@@ -0,0 +1,183 @@
+<template>
+  <el-dialog :visible.sync="visible" :title="title" :close-on-click-modal="false" :close-on-press-escape="false">
+    <el-form v-if="activeName === 'first'" :model="dataForm" :rules="dataRule" :disabled="type === 1? true:false" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="'120px'">
+			<el-form-item label="产品类型" prop="snTypeDesc">
+					<el-input style="width: 500px;" :maxlength="20" show-word-limit v-model="dataForm.snTypeDesc" placeholder="请输入产品类型"></el-input>
+			</el-form-item>
+			<el-form-item prop="snTypeCode" label="代码" >
+					<el-input style="width: 500px;" :maxlength="1" show-word-limit v-model="dataForm.snTypeCode" placeholder="请输入1位大写英文字母"></el-input>
+			</el-form-item>
+    </el-form>
+		<el-form v-if="activeName === 'second'" :model="dataForm" :rules="dataRule" :disabled="type === 1? true:false" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="'120px'">
+			<el-form-item label="制造商全称" prop="snTypeDesc">
+					<el-input style="width: 500px;" :maxlength="20" show-word-limit v-model="dataForm.snTypeDesc" placeholder="请输入制造商全称"></el-input>
+			</el-form-item>
+			<el-form-item prop="snTypeCode" label="代码" >
+					<el-input style="width: 500px;" :maxlength="2" show-word-limit v-model="dataForm.snTypeCode" placeholder="请输入2位大写英文字母"></el-input>
+			</el-form-item>
+    </el-form>
+		<el-form v-if="activeName === 'third'" :model="dataForm" :rules="dataRule" :disabled="type === 1? true:false" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="'120px'">
+			<el-form-item label="电芯厂商全称" prop="snTypeDesc">
+					<el-input style="width: 500px;" :maxlength="20" show-word-limit v-model="dataForm.snTypeDesc" placeholder="请输入电芯厂商全称"></el-input>
+			</el-form-item>
+			<el-form-item prop="snTypeCode" label="代码" >
+					<el-input style="width: 500px;" :maxlength="2" show-word-limit v-model="dataForm.snTypeCode" placeholder="请输入2位大写英文字母"></el-input>
+			</el-form-item>
+    </el-form>
+		<el-form v-if="activeName === 'fourth'" :model="dataForm" :rules="dataRule" :disabled="type === 1? true:false" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="'120px'">
+			<el-form-item label="化学体系" prop="snTypeDesc">
+				<el-input style="width: 500px;" :maxlength="20" show-word-limit v-model="dataForm.snTypeDesc" placeholder="请输入化学体系"></el-input>
+			</el-form-item>
+      <el-form-item label="化学代码" prop="snTypeCode">
+				<el-input style="width: 500px;" :maxlength="1" show-word-limit v-model="dataForm.snTypeCode" placeholder="请输入以为大写字母"></el-input>
+			</el-form-item>
+    </el-form>
+    <template slot="footer">
+			<el-button type="primary" v-if="type !== 1" @click="dataFormSubmitHandle()">确认</el-button>
+      <el-button @click="visible = false">取消</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import debounce from 'lodash/debounce'
+import { isCn, isCapitalization, isNumber, isSigleNumber } from '@/utils/validate'
+import { addBatteryCode, getBatteryCodeInfo } from '@/api/device/configure'
+export default {
+  data () {
+    return {
+			/**是否显示弹窗 */
+      visible: false,
+			/**弹窗标题 */
+			title: '',
+			/**区分打开弹窗操作类型 null:新增，1：查看，2：修改 */
+			type: null,
+			/**区分弹窗交互类型 first：产品类型代码，second：PACK制造商简称，third：电芯厂家名称，fourth：产品规格代码，fifth：产品扩展代码 */
+			activeName: '',
+			/**提交表单对象 */
+      dataForm: {
+        id: '',
+				snTypeCode: '',
+				snTypeDesc: '',
+        snType: '',
+        addTime: '',
+        updateTime: '',
+        operator: '',
+        code: '',
+        cpi: ''
+      },
+      
+    }
+  },
+  computed: {
+    dataRule () {
+			var validateIsCapitalization = (rule, value, callback) => {
+        if(value && isCapitalization(value)) {
+          return callback(new Error('请输入大写字母'))
+        }
+        callback()
+      }
+
+      var validateIsNumber = (rule, value, callback) => {
+        if(value && !isNumber(value)) {
+          return callback(new Error('请输入数字'))
+        }
+        callback()
+      }
+
+      return {
+				snTypeDesc: [
+					{ required: true, message: '必填项不能为空', trigger: 'blur' },
+				],
+				snTypeCode: [
+					{ required: true, message: '必填项不能为空', trigger: 'blur' },
+					{ validator: validateIsCapitalization, trigger: 'blur' }
+				],
+        code: [
+					{ required: true, message: '必填项不能为空', trigger: 'change' },
+				],
+        cpi: [
+          { required: true, message: '必填项不能为空', trigger: 'blur' },
+          { validator: validateIsNumber, trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    init () {
+      this.visible = true
+      this.$nextTick(() => {
+				this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          this.getInfo()
+        }
+      })
+    },
+    // 获取信息
+    getInfo () {
+      getBatteryCodeInfo({id: this.dataForm.id}).then(res => {
+        if (res.code !== 200) {
+          return this.$message.error(res.msg)
+        } else {
+          if(res.data.snType === '电池平台') {
+            this.dataForm = {
+              id: res.data.id,
+              snTypeCode: res.data.snTypeCode,
+              snTypeDesc: res.data.snTypeDesc,
+              snType: res.data.snType,
+              addTime: res.data.addTime,
+              updateTime: res.data.updateTime,
+              operator: res.data.operator,
+              code: res.data.snTypeCode,
+            }
+          } else if (res.data.snType === '容量') {
+            this.dataForm = {
+              id: res.data.id,
+              snTypeCode: res.data.snTypeCode,
+              snTypeDesc: res.data.snTypeDesc,
+              snType: res.data.snType,
+              addTime: res.data.addTime,
+              updateTime: res.data.updateTime,
+              operator: res.data.operator,
+              cpi: res.data.snTypeCode,
+            }
+          } else {
+            this.dataForm = {
+              ...this.dataForm,
+              ...res.data
+            }
+          }
+        }
+      }).catch(() => {})
+    },
+    changeHandle(e) {
+      this.dataForm.snTypeCode = this.dataForm.code
+    },
+    inputHandle(e) {
+      this.dataForm.snTypeCode = this.dataForm.cpi
+    },
+    // 表单提交
+    dataFormSubmitHandle: debounce(function () {
+      this.$refs['dataForm'].validate((valid) => {
+        if (!valid) {
+          return false
+        }
+        addBatteryCode(this.dataForm).then(res => {
+          if (res.code !== 200) {
+            return this.$message.error(res.msg)
+          }
+          this.$message({
+            message: '操作成功',
+            type: 'success',
+            duration: 1000,
+            onClose: () => {
+              this.visible = false
+              this.$emit('refreshDataList')
+            }
+          })
+        }).catch(() => {})
+      })
+    }, 1000, { 'leading': true, 'trailing': false })
+  }
+}
+</script>

src/views/device/configure/carCode.vue

@@ -0,0 +1,408 @@
+<template>
+  <div class="app-container">
+    <h1><i class="el-icon-arrow-left" @click="goBack"></i>电动车编码管理</h1>
+		<div class="top-info">
+			示例：MYDXX602107050001,M(1位)=设备类型、YD(2-3位)=生产厂家、XX(4-5位)=车辆型号、60(6-7位)=适配电池、200705(8-13位)=生产日期、0001(14-17位)=序列号
+		</div>
+		<el-tabs v-model="activeName" @tab-click="handleClick">
+			<el-tab-pane label="设备类型" name="first">
+				<el-form :inline="true" @keyup.enter.native="handleFilter()">
+					<el-row>
+						<el-form-item style="float: right;">
+							<el-button type="primary" @click="cerateHandle()">新增</el-button>
+						</el-form-item>
+					</el-row>
+				</el-form>
+				<el-table
+					v-loading="loading"
+					:data="data"
+					element-loading-text="Loading"
+					:header-cell-style="{background:'rgba(242, 242, 242, 1)',borderColor:'rgba(242, 242, 242, 1);',textAlign:'center'}"
+					:cell-style="{'text-align':'center'}"
+					border
+					fit
+					highlight-current-row
+				>
+					<el-table-column label="序号" type="index" width="50"></el-table-column>
+
+					<el-table-column label="产品类型">
+						<template slot-scope="scope">
+							{{ scope.row.snTypeDesc }}
+						</template>
+					</el-table-column>
+
+					<el-table-column label="代码" prop="plateNumber">
+						<template slot-scope="scope">
+							{{ scope.row.snTypeCode	}}
+						</template>
+					</el-table-column>
+
+					<el-table-column label="添加时间" prop="deptId">
+						<template slot-scope="scope">
+							{{ scope.row.addTime}}
+						</template>
+					</el-table-column>
+
+					<el-table-column label="最后修改时间" prop="vin">
+						<template slot-scope="scope">
+							{{ scope.row.updateTime }}
+						</template>
+					</el-table-column>
+
+					<el-table-column align="center" label="操作" width="180">
+						<template slot-scope="scope">
+							<!-- <el-button @click="cerateHandle(scope.row.id, 1)" type="text">查看</el-button> -->
+							<el-button @click="cerateHandle(scope.row.id, 2)" type="text">修改</el-button>
+							<el-button v-if="scope.row.status === 1" @click="delHandle(scope.row)" type="text">停用</el-button>
+							<el-button v-else @click="delHandle(scope.row)" type="text">启用</el-button>
+						</template>
+					</el-table-column>
+				</el-table>
+
+				<el-pagination style="float: right; margin-top: 30px;" :current-page="listQuery.index" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.length" :total="total"
+					layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
+					@current-change="pageCurrentChangeHandle">
+				</el-pagination>
+			</el-tab-pane>
+			<el-tab-pane label="生产厂家" name="second">
+				<el-form :inline="true" @keyup.enter.native="handleFilter()">
+					<el-row>
+						<el-form-item style="float: right;">
+							<el-button type="primary" @click="cerateHandle()">新增</el-button>
+						</el-form-item>
+					</el-row>
+				</el-form>
+				<el-table
+					v-loading="loading"
+					:data="data"
+					element-loading-text="Loading"
+					:header-cell-style="{background:'rgba(242, 242, 242, 1)',borderColor:'rgba(242, 242, 242, 1);',textAlign:'center'}"
+					:cell-style="{'text-align':'center'}"
+					border
+					fit
+					highlight-current-row
+				>
+					<el-table-column label="序号" type="index" width="50"></el-table-column>
+
+					<el-table-column label="制造商全称">
+						<template slot-scope="scope">
+							{{ scope.row.snTypeDesc }}
+						</template>
+					</el-table-column>
+
+					<el-table-column label="代码" prop="plateNumber">
+						<template slot-scope="scope">
+							{{ scope.row.snTypeCode }}
+						</template>
+					</el-table-column>
+
+					<el-table-column label="添加时间" prop="deptId">
+						<template slot-scope="scope">
+							{{ scope.row.addTime}}
+						</template>
+					</el-table-column>
+
+					<el-table-column label="最后修改时间" prop="vin">
+						<template slot-scope="scope">
+							{{ scope.row.updateTime }}
+						</template>
+					</el-table-column>
+
+					<el-table-column align="center" label="操作" width="180">
+						<template slot-scope="scope">
+							<!-- <el-button @click="cerateHandle(scope.row.id, 1)" type="text">查看</el-button> -->
+							<el-button @click="cerateHandle(scope.row.id, 2)" type="text">修改</el-button>
+							<el-button v-if="scope.row.status === 1" @click="delHandle(scope.row)" type="text">停用</el-button>
+							<el-button v-else @click="delHandle(scope.row)" type="text">启用</el-button>
+						</template>
+					</el-table-column>
+				</el-table>
+
+				<el-pagination style="float: right; margin-top: 30px;" :current-page="listQuery.index" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.length" :total="total"
+					layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
+					@current-change="pageCurrentChangeHandle">
+				</el-pagination>
+			</el-tab-pane>
+			<el-tab-pane label="车辆型号" name="third">
+				<el-form :inline="true" @keyup.enter.native="handleFilter()">
+					<el-row>
+						<el-form-item style="float: right;">
+							<el-button type="primary" @click="cerateHandle()">新增</el-button>
+						</el-form-item>
+					</el-row>
+				</el-form>
+				<el-table
+					v-loading="loading"
+					:data="data"
+					element-loading-text="Loading"
+					:header-cell-style="{background:'rgba(242, 242, 242, 1)',borderColor:'rgba(242, 242, 242, 1);',textAlign:'center'}"
+					:cell-style="{'text-align':'center'}"
+					border
+					fit
+					highlight-current-row
+				>
+					<el-table-column label="序号" type="index" width="50"></el-table-column>
+
+					<el-table-column label="制造商全称">
+						<template slot-scope="scope">
+							{{ scope.row.snTypeDesc }}
+						</template>
+					</el-table-column>
+
+					<el-table-column label="代码" prop="plateNumber">
+						<template slot-scope="scope">
+							{{ scope.row.snTypeCode }}
+						</template>
+					</el-table-column>
+
+					<el-table-column label="添加时间" prop="deptId">
+						<template slot-scope="scope">
+							{{ scope.row.addTime}}
+						</template>
+					</el-table-column>
+
+					<el-table-column label="最后修改时间" prop="vin">
+						<template slot-scope="scope">
+							{{ scope.row.updateTime }}
+						</template>
+					</el-table-column>
+
+					<el-table-column align="center" label="操作" width="180">
+						<template slot-scope="scope">
+							<!-- <el-button @click="cerateHandle(scope.row.id, 1)" type="text">查看</el-button> -->
+							<el-button @click="cerateHandle(scope.row.id, 2)" type="text">修改</el-button>
+							<el-button v-if="scope.row.status === 1" @click="delHandle(scope.row)" type="text">停用</el-button>
+							<el-button v-else @click="delHandle(scope.row)" type="text">启用</el-button>
+						</template>
+					</el-table-column>
+				</el-table>
+
+				<el-pagination style="float: right; margin-top: 30px;" :current-page="listQuery.index" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.length" :total="total"
+					layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
+					@current-change="pageCurrentChangeHandle">
+				</el-pagination>
+			</el-tab-pane>
+			<el-tab-pane label="电压等级" name="fourth">
+				<el-form :inline="true" @keyup.enter.native="handleFilter()">
+					<el-row>
+						<el-form-item style="float: right;">
+							<el-button type="primary" @click="cerateHandle()">新增</el-button>
+						</el-form-item>
+					</el-row>
+				</el-form>
+				<el-table
+					v-loading="loading"
+					:data="data"
+					element-loading-text="Loading"
+					:header-cell-style="{background:'rgba(242, 242, 242, 1)',borderColor:'rgba(242, 242, 242, 1);',textAlign:'center'}"
+					:cell-style="{'text-align':'center'}"
+					border
+					fit
+					highlight-current-row
+				>
+					<el-table-column label="序号" type="index" width="50"></el-table-column>
+
+					<el-table-column label="化学体系">
+						<template slot-scope="scope">
+							{{ scope.row.snTypeDesc }}
+						</template>
+					</el-table-column>
+
+					<el-table-column label="化学代码" prop="plateNumber">
+						<template slot-scope="scope">
+							{{ scope.row.snTypeCode }}
+						</template>
+					</el-table-column>
+
+					<el-table-column label="添加时间" prop="deptId">
+						<template slot-scope="scope">
+							{{ scope.row.addTime}}
+						</template>
+					</el-table-column>
+
+					<el-table-column label="最后修改时间" prop="vin">
+						<template slot-scope="scope">
+							{{ scope.row.updateTime }}
+						</template>
+					</el-table-column>
+
+					<el-table-column align="center" label="操作" width="180">
+						<template slot-scope="scope">
+							<!-- <el-button @click="cerateHandle(scope.row.id, 1)" type="text">查看</el-button> -->
+							<el-button @click="cerateHandle(scope.row.id, 2)" type="text">修改</el-button>
+							<el-button v-if="scope.row.status === 1" @click="delHandle(scope.row)" type="text">停用</el-button>
+							<el-button v-else @click="delHandle(scope.row)" type="text">启用</el-button>
+						</template>
+					</el-table-column>
+				</el-table>
+
+				<el-pagination style="float: right; margin-top: 30px;" :current-page="listQuery.index" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.length" :total="total"
+					layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
+					@current-change="pageCurrentChangeHandle">
+				</el-pagination>
+			</el-tab-pane>
+		</el-tabs>
+    <add-or-update v-if="addVisible" ref="addOrUpdate" @refreshDataList="getDatalist"></add-or-update>
+  </div>
+</template>
+
+<script>
+import { batteryCodeList, deleteBatteryCode } from '@/api/device/configure'
+import AddOrUpdate from '@/views/device/configure/carCode-add-or-update.vue'
+
+export default {
+  components: { AddOrUpdate },
+  data() {
+    return {
+			/**默认tab */
+			activeName: 'first',
+			//加载动画
+			loading: false,
+			//列表数据
+			data: [],
+			//总条数
+			total: 0,
+			/**查询条件对象 */
+			listQuery: {
+        index: 1,
+        length: 20,
+        importance: undefined,
+        title: undefined,
+        type: '设备类型',
+        sort: ''
+      },
+			/**是否显示新增弹窗 */
+			addVisible: false,
+      /**是否显示批量导入弹窗 */
+      upVisible: false,
+    }
+  },
+  created() {
+    this.getDatalist()
+  },
+  methods: {
+		//返回上一页
+    goBack() {
+      this.$store.dispatch('tagsView/delView', this.$route)
+      this.$router.go(-1)
+    },
+		/**tab页切换 */
+		handleClick(tab, event) {
+			this.activeName = tab.name
+			this.data = []
+			this.total = 0
+			if(tab.name === 'first') {
+				this.listQuery.type = '设备类型' 
+			} else if(tab.name === 'second') {
+				this.listQuery.type = '生产厂家' 
+			} else if(tab.name === 'third') {
+				this.listQuery.type = '车辆型号' 
+			} else if(tab.name === 'fourth') {
+				this.listQuery.type = '电压等级' 
+			} 
+			this.getDatalist()
+		},
+		//获取列表数据
+		getDatalist() {
+			this.loading = true
+			batteryCodeList(this.listQuery).then(res => {
+				if (res.code === 200) {
+          this.data = res.data
+          this.total = res.total
+          this.loading = false
+        } else {
+          this.loading = false
+          return this.$message.error(res.message)
+        }
+			})
+		},
+		// 分页, 每页条数
+    pageSizeChangeHandle (val) {
+      this.listQuery.index = 1
+      this.listQuery.length = val
+      this.getDatalist()
+    },
+    // 分页, 当前页
+    pageCurrentChangeHandle (val) {
+      this.listQuery.index = val
+      this.getDatalist()
+    },
+
+		//打开新增弹窗
+		cerateHandle(id, type) {
+			this.addVisible = true
+			this.$nextTick(() => {
+				this.$refs.addOrUpdate.init()
+				this.$refs.addOrUpdate.dataForm.id = id
+				this.$refs.addOrUpdate.title = !type?'新增':(type === 1?'查看':'修改')
+				this.$refs.addOrUpdate.dataForm.snType = this.activeName==='first'?'设备类型':(this.activeName==='second'?'生产厂家':(this.activeName==='third'?'车辆型号':'电压等级'))
+				this.$refs.addOrUpdate.type = type
+				this.$refs.addOrUpdate.activeName = this.activeName
+			});
+		},
+
+    /**启用、停用 */
+    delHandle(row) {
+			let status = null
+			if(row.status === 1) {
+				status = 0
+			}  else {
+				status = 1
+			}
+			deleteBatteryCode({id: row.id, status: status}).then(res => {
+				if (res.code === 200) {
+          this.getDatalist()
+        } else {
+          this.loading = false
+          return this.$message.error(res.message)
+        }
+			})
+    },
+
+
+    fetchData() {
+      this.page.loading = false
+      postJson('/api/v1/carinfo/pageQuery', this.page.param).then(response => {
+        if (response.code === 200) {
+          this.page.data = response.data
+          this.page.total = response.total
+          this.page.loading = false
+        }
+      })
+    },
+
+    del(val) {
+      this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        postJson('/api/v1/carinfo/delete', { id: val }).then(response => {
+          if (response.code === 200) {
+            this.getDatalist()
+          }
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+	.top-info {
+		height: 53px;
+		line-height: 53px;
+		width: 100%;
+		background-color: rgba(242, 242, 242, 1);
+		box-shadow: none;
+		text-align: left;
+		color: #7F7F7F;
+		font-size: 12px;
+		padding-left: 20px;
+		margin-bottom: 20px;
+		>span {
+			color: #0000FF;
+			font-size: 13px;
+		}
+	}
+</style>

src/views/device/configure/index.vue

@@ -1,29 +1,72 @@
 <template>
 	<div class="app-container" style="padding-left: 60px;">
 		<h1>设备基础配置-典表管理</h1>
-		<div class="info">
-			<div class="code">
-				<div class="img">
-					<el-image class="content" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
-				</div>
-				<div class="title">电池编码管理</div>
-				<div class="update-time">最后修改时间: 2021-05-31</div>
-				<div class="button" @click="batteryCodeHandle">
-					查看
+		<el-tabs v-model="activeName" @tab-click="handleClick">
+      <el-tab-pane label="电池配置" name="first">
+				<div class="info">
+					<div class="code">
+						<div class="img">
+							<el-image class="content" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
+						</div>
+						<div class="title">电池编码管理</div>
+						<div class="update-time">最后修改时间: 2021-05-31</div>
+						<div class="button" @click="batteryCodeHandle">
+							查看
+						</div>
+					</div>
+
+					<div class="code">
+						<div class="img">
+							<el-image class="content" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
+						</div>
+						<div class="title">配件类型管理</div>
+						<div class="update-time">最后修改时间: 2021-05-31</div>
+						<div class="button" @click="accessoriesType">
+							查看
+						</div>
+					</div>
 				</div>
-			</div>
+      </el-tab-pane>
+			<el-tab-pane label="电动车配置" name="second">
+				<div class="info">
+					<div class="code">
+						<div class="img">
+							<el-image class="content" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
+						</div>
+						<div class="title">电动车编码管理</div>
+						<div class="update-time">最后修改时间: 2021-05-31</div>
+						<div class="button" @click="carCodeHandle">
+							查看
+						</div>
+					</div>
 
-			<div class="code">
-				<div class="img">
-					<el-image class="content" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
+					<div class="code">
+						<div class="img">
+							<el-image class="content" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
+						</div>
+						<div class="title">配件类型管理</div>
+						<div class="update-time">最后修改时间: 2021-05-31</div>
+						<div class="button" @click="accessoriesType">
+							查看
+						</div>
+					</div>
 				</div>
-				<div class="title">配件类型管理</div>
-				<div class="update-time">最后修改时间: 2021-05-31</div>
-				<div class="button" @click="accessoriesType">
-					查看
+      </el-tab-pane>
+			<el-tab-pane label="配件配置" name="third">
+				<div class="info">
+					<div class="code">
+						<div class="img">
+							<el-image class="content" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
+						</div>
+						<div class="title">配件编码管理</div>
+						<div class="update-time">最后修改时间: 2021-05-31</div>
+						<div class="button" @click="partsCodeHandle">
+							查看
+						</div>
+					</div>
 				</div>
-			</div>
-		</div>
+      </el-tab-pane>
+    </el-tabs>
 	</div>
 </template>
 
@@ -31,13 +74,17 @@
 export default {
   data() {
     return {
-
+			activeName: 'first'
     }
   },
   created() {
 
   },
   methods: {
+		//切换tab页
+		handleClick(tab, event) {
+			this.activeName = tab.name
+		},
 		/**跳转电池编码管理页面 */
 		batteryCodeHandle() {
 			this.$router.push('/device/configure/batteryCode')
@@ -45,6 +92,14 @@ export default {
 		/**跳转配件类型管理页面 */
 		accessoriesType() {
 			this.$router.push('/device/configure/accessoriesType')
+		},
+		//跳转电动车编码管理页面
+		carCodeHandle() {
+			this.$router.push('/device/configure/carCode')
+		},
+		//跳转配件编码管理页面
+		partsCodeHandle() {
+			this.$router.push('/device/configure/partsCode')
 		}
   }
 }

src/views/device/configure/partsCode.vue

@@ -0,0 +1,469 @@
+<template>
+  <div class="app-container">
+    <h1><i class="el-icon-arrow-left" @click="goBack"></i>电池编码管理</h1>
+		<div class="top-info">
+			示例：CQX7208JY21570001,C(1位)=设备类型、QX(2-3位)=归属方、72(4-5位)=电压等级、08(6-7位)=电流等级、JY(8-9位)=生产厂家、2157(10-13位)=生产日期、0001(14-17位)=序列号
+		</div>
+		<el-tabs v-model="activeName" @tab-click="handleClick">
+			<el-tab-pane label="设备类型" name="first">
+				<el-form :inline="true" @keyup.enter.native="handleFilter()">
+					<el-row>
+						<el-form-item style="float: right;">
+							<el-button type="primary" @click="cerateHandle()">新增</el-button>
+						</el-form-item>
+					</el-row>
+				</el-form>
+				<el-table
+					v-loading="loading"
+					:data="data"
+					element-loading-text="Loading"
+					:header-cell-style="{background:'rgba(242, 242, 242, 1)',borderColor:'rgba(242, 242, 242, 1);',textAlign:'center'}"
+					:cell-style="{'text-align':'center'}"
+					border
+					fit
+					highlight-current-row
+				>
+					<el-table-column label="序号" type="index" width="50"></el-table-column>
+
+					<el-table-column label="产品类型">
+						<template slot-scope="scope">
+							{{ scope.row.snTypeDesc }}
+						</template>
+					</el-table-column>
+
+					<el-table-column label="代码" prop="plateNumber">
+						<template slot-scope="scope">
+							{{ scope.row.snTypeCode	}}
+						</template>
+					</el-table-column>
+
+					<el-table-column label="添加时间" prop="deptId">
+						<template slot-scope="scope">
+							{{ scope.row.addTime}}
+						</template>
+					</el-table-column>
+
+					<el-table-column label="最后修改时间" prop="vin">
+						<template slot-scope="scope">
+							{{ scope.row.updateTime }}
+						</template>
+					</el-table-column>
+
+					<el-table-column align="center" label="操作" width="180">
+						<template slot-scope="scope">
+							<!-- <el-button @click="cerateHandle(scope.row.id, 1)" type="text">查看</el-button> -->
+							<el-button @click="cerateHandle(scope.row.id, 2)" type="text">修改</el-button>
+							<el-button v-if="scope.row.status === 1" @click="delHandle(scope.row)" type="text">停用</el-button>
+							<el-button v-else @click="delHandle(scope.row)" type="text">启用</el-button>
+						</template>
+					</el-table-column>
+				</el-table>
+
+				<el-pagination style="float: right; margin-top: 30px;" :current-page="listQuery.index" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.length" :total="total"
+					layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
+					@current-change="pageCurrentChangeHandle">
+				</el-pagination>
+			</el-tab-pane>
+			<el-tab-pane label="归属方" name="second">
+				<el-form :inline="true" @keyup.enter.native="handleFilter()">
+					<el-row>
+						<el-form-item style="float: right;">
+							<el-button type="primary" @click="cerateHandle()">新增</el-button>
+						</el-form-item>
+					</el-row>
+				</el-form>
+				<el-table
+					v-loading="loading"
+					:data="data"
+					element-loading-text="Loading"
+					:header-cell-style="{background:'rgba(242, 242, 242, 1)',borderColor:'rgba(242, 242, 242, 1);',textAlign:'center'}"
+					:cell-style="{'text-align':'center'}"
+					border
+					fit
+					highlight-current-row
+				>
+					<el-table-column label="序号" type="index" width="50"></el-table-column>
+
+					<el-table-column label="制造商全称">
+						<template slot-scope="scope">
+							{{ scope.row.snTypeDesc }}
+						</template>
+					</el-table-column>
+
+					<el-table-column label="代码" prop="plateNumber">
+						<template slot-scope="scope">
+							{{ scope.row.snTypeCode }}
+						</template>
+					</el-table-column>
+
+					<el-table-column label="添加时间" prop="deptId">
+						<template slot-scope="scope">
+							{{ scope.row.addTime}}
+						</template>
+					</el-table-column>
+
+					<el-table-column label="最后修改时间" prop="vin">
+						<template slot-scope="scope">
+							{{ scope.row.updateTime }}
+						</template>
+					</el-table-column>
+
+					<el-table-column align="center" label="操作" width="180">
+						<template slot-scope="scope">
+							<!-- <el-button @click="cerateHandle(scope.row.id, 1)" type="text">查看</el-button> -->
+							<el-button @click="cerateHandle(scope.row.id, 2)" type="text">修改</el-button>
+							<el-button v-if="scope.row.status === 1" @click="delHandle(scope.row)" type="text">停用</el-button>
+							<el-button v-else @click="delHandle(scope.row)" type="text">启用</el-button>
+						</template>
+					</el-table-column>
+				</el-table>
+
+				<el-pagination style="float: right; margin-top: 30px;" :current-page="listQuery.index" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.length" :total="total"
+					layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
+					@current-change="pageCurrentChangeHandle">
+				</el-pagination>
+			</el-tab-pane>
+			<el-tab-pane label="电压等级" name="third">
+				<el-form :inline="true" @keyup.enter.native="handleFilter()">
+					<el-row>
+						<el-form-item style="float: right;">
+							<el-button type="primary" @click="cerateHandle()">新增</el-button>
+						</el-form-item>
+					</el-row>
+				</el-form>
+				<el-table
+					v-loading="loading"
+					:data="data"
+					element-loading-text="Loading"
+					:header-cell-style="{background:'rgba(242, 242, 242, 1)',borderColor:'rgba(242, 242, 242, 1);',textAlign:'center'}"
+					:cell-style="{'text-align':'center'}"
+					border
+					fit
+					highlight-current-row
+				>
+					<el-table-column label="序号" type="index" width="50"></el-table-column>
+
+					<el-table-column label="制造商全称">
+						<template slot-scope="scope">
+							{{ scope.row.snTypeDesc }}
+						</template>
+					</el-table-column>
+
+					<el-table-column label="代码" prop="plateNumber">
+						<template slot-scope="scope">
+							{{ scope.row.snTypeCode }}
+						</template>
+					</el-table-column>
+
+					<el-table-column label="添加时间" prop="deptId">
+						<template slot-scope="scope">
+							{{ scope.row.addTime}}
+						</template>
+					</el-table-column>
+
+					<el-table-column label="最后修改时间" prop="vin">
+						<template slot-scope="scope">
+							{{ scope.row.updateTime }}
+						</template>
+					</el-table-column>
+
+					<el-table-column align="center" label="操作" width="180">
+						<template slot-scope="scope">
+							<!-- <el-button @click="cerateHandle(scope.row.id, 1)" type="text">查看</el-button> -->
+							<el-button @click="cerateHandle(scope.row.id, 2)" type="text">修改</el-button>
+							<el-button v-if="scope.row.status === 1" @click="delHandle(scope.row)" type="text">停用</el-button>
+							<el-button v-else @click="delHandle(scope.row)" type="text">启用</el-button>
+						</template>
+					</el-table-column>
+				</el-table>
+
+				<el-pagination style="float: right; margin-top: 30px;" :current-page="listQuery.index" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.length" :total="total"
+					layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
+					@current-change="pageCurrentChangeHandle">
+				</el-pagination>
+			</el-tab-pane>
+			<el-tab-pane label="电流等级" name="fourth">
+				<el-form :inline="true" @keyup.enter.native="handleFilter()">
+					<el-row>
+						<el-form-item style="float: right;">
+							<el-button type="primary" @click="cerateHandle()">新增</el-button>
+						</el-form-item>
+					</el-row>
+				</el-form>
+				<el-table
+					v-loading="loading"
+					:data="data"
+					element-loading-text="Loading"
+					:header-cell-style="{background:'rgba(242, 242, 242, 1)',borderColor:'rgba(242, 242, 242, 1);',textAlign:'center'}"
+					:cell-style="{'text-align':'center'}"
+					border
+					fit
+					highlight-current-row
+				>
+					<el-table-column label="序号" type="index" width="50"></el-table-column>
+
+					<el-table-column label="化学体系">
+						<template slot-scope="scope">
+							{{ scope.row.snTypeDesc }}
+						</template>
+					</el-table-column>
+
+					<el-table-column label="化学代码" prop="plateNumber">
+						<template slot-scope="scope">
+							{{ scope.row.snTypeCode }}
+						</template>
+					</el-table-column>
+
+					<el-table-column label="添加时间" prop="deptId">
+						<template slot-scope="scope">
+							{{ scope.row.addTime}}
+						</template>
+					</el-table-column>
+
+					<el-table-column label="最后修改时间" prop="vin">
+						<template slot-scope="scope">
+							{{ scope.row.updateTime }}
+						</template>
+					</el-table-column>
+
+					<el-table-column align="center" label="操作" width="180">
+						<template slot-scope="scope">
+							<!-- <el-button @click="cerateHandle(scope.row.id, 1)" type="text">查看</el-button> -->
+							<el-button @click="cerateHandle(scope.row.id, 2)" type="text">修改</el-button>
+							<el-button v-if="scope.row.status === 1" @click="delHandle(scope.row)" type="text">停用</el-button>
+							<el-button v-else @click="delHandle(scope.row)" type="text">启用</el-button>
+						</template>
+					</el-table-column>
+				</el-table>
+
+				<el-pagination style="float: right; margin-top: 30px;" :current-page="listQuery.index" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.length" :total="total"
+					layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
+					@current-change="pageCurrentChangeHandle">
+				</el-pagination>
+			</el-tab-pane>
+      <el-tab-pane label="生产厂家" name="fifth">
+				<el-form :inline="true" @keyup.enter.native="handleFilter()">
+					<el-row>
+						<el-form-item style="float: right;">
+							<el-button type="primary" @click="cerateHandle()">新增</el-button>
+						</el-form-item>
+					</el-row>
+				</el-form>
+				<el-table
+					v-loading="loading"
+					:data="data"
+					element-loading-text="Loading"
+					:header-cell-style="{background:'rgba(242, 242, 242, 1)',borderColor:'rgba(242, 242, 242, 1);',textAlign:'center'}"
+					:cell-style="{'text-align':'center'}"
+					border
+					fit
+					highlight-current-row
+				>
+					<el-table-column label="序号" type="index" width="50"></el-table-column>
+
+					<el-table-column label="化学体系">
+						<template slot-scope="scope">
+							{{ scope.row.snTypeDesc }}
+						</template>
+					</el-table-column>
+
+					<el-table-column label="化学代码" prop="plateNumber">
+						<template slot-scope="scope">
+							{{ scope.row.snTypeCode }}
+						</template>
+					</el-table-column>
+
+					<el-table-column label="添加时间" prop="deptId">
+						<template slot-scope="scope">
+							{{ scope.row.addTime}}
+						</template>
+					</el-table-column>
+
+					<el-table-column label="最后修改时间" prop="vin">
+						<template slot-scope="scope">
+							{{ scope.row.updateTime }}
+						</template>
+					</el-table-column>
+
+					<el-table-column align="center" label="操作" width="180">
+						<template slot-scope="scope">
+							<!-- <el-button @click="cerateHandle(scope.row.id, 1)" type="text">查看</el-button> -->
+							<el-button @click="cerateHandle(scope.row.id, 2)" type="text">修改</el-button>
+							<el-button v-if="scope.row.status === 1" @click="delHandle(scope.row)" type="text">停用</el-button>
+							<el-button v-else @click="delHandle(scope.row)" type="text">启用</el-button>
+						</template>
+					</el-table-column>
+				</el-table>
+
+				<el-pagination style="float: right; margin-top: 30px;" :current-page="listQuery.index" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.length" :total="total"
+					layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
+					@current-change="pageCurrentChangeHandle">
+				</el-pagination>
+			</el-tab-pane>
+		</el-tabs>
+    <add-or-update v-if="addVisible" ref="addOrUpdate" @refreshDataList="getDatalist"></add-or-update>
+  </div>
+</template>
+
+<script>
+import { batteryCodeList, deleteBatteryCode } from '@/api/device/configure'
+import AddOrUpdate from '@/views/device/configure/code-add-or-update.vue'
+
+export default {
+  components: { AddOrUpdate },
+  data() {
+    return {
+			/**默认tab */
+			activeName: 'first',
+			//加载动画
+			loading: false,
+			//列表数据
+			data: [],
+			//总条数
+			total: 0,
+			/**查询条件对象 */
+			listQuery: {
+        index: 1,
+        length: 20,
+        importance: undefined,
+        title: undefined,
+        type: '设备类型',
+        sort: ''
+      },
+			/**是否显示新增弹窗 */
+			addVisible: false,
+      /**是否显示批量导入弹窗 */
+      upVisible: false,
+    }
+  },
+  created() {
+    this.getDatalist()
+  },
+  methods: {
+		//返回上一页
+    goBack() {
+      this.$store.dispatch('tagsView/delView', this.$route)
+      this.$router.go(-1)
+    },
+		/**tab页切换 */
+		handleClick(tab, event) {
+			this.activeName = tab.name
+			this.data = []
+			this.total = 0
+			if(tab.name === 'first') {
+				this.listQuery.type = '设备类型' 
+			} else if(tab.name === 'second') {
+				this.listQuery.type = '归属方' 
+			} else if(tab.name === 'third') {
+				this.listQuery.type = '电压等级' 
+			} else if(tab.name === 'fourth') {
+				this.listQuery.type = '电流等级' 
+			} else if(tab.name === 'fifth') {
+        this.listQuery.type = '生产厂家'
+      }
+			this.getDatalist()
+		},
+		//获取列表数据
+		getDatalist() {
+			this.loading = true
+			batteryCodeList(this.listQuery).then(res => {
+				if (res.code === 200) {
+          this.data = res.data
+          this.total = res.total
+          this.loading = false
+        } else {
+          this.loading = false
+          return this.$message.error(res.message)
+        }
+			})
+		},
+		// 分页, 每页条数
+    pageSizeChangeHandle (val) {
+      this.listQuery.index = 1
+      this.listQuery.length = val
+      this.getDatalist()
+    },
+    // 分页, 当前页
+    pageCurrentChangeHandle (val) {
+      this.listQuery.index = val
+      this.getDatalist()
+    },
+
+		//打开新增弹窗
+		cerateHandle(id, type) {
+			this.addVisible = true
+			this.$nextTick(() => {
+				this.$refs.addOrUpdate.init()
+				this.$refs.addOrUpdate.dataForm.id = id
+				this.$refs.addOrUpdate.title = !type?'新增':(type === 1?'查看':'修改')
+				this.$refs.addOrUpdate.dataForm.snType = this.activeName==='first'?'设备类型':(this.activeName==='second'?'归属方':(this.activeName==='third'?'电压等级':(this.activeName==='fourth'?'电流等级':'生产厂家')))
+				this.$refs.addOrUpdate.type = type
+				this.$refs.addOrUpdate.activeName = this.activeName
+			});
+		},
+
+    /**启用、停用 */
+    delHandle(row) {
+			let status = null
+			if(row.status === 1) {
+				status = 0
+			}  else {
+				status = 1
+			}
+			deleteBatteryCode({id: row.id, status: status}).then(res => {
+				if (res.code === 200) {
+          this.getDatalist()
+        } else {
+          this.loading = false
+          return this.$message.error(res.message)
+        }
+			})
+    },
+
+
+    fetchData() {
+      this.page.loading = false
+      postJson('/api/v1/carinfo/pageQuery', this.page.param).then(response => {
+        if (response.code === 200) {
+          this.page.data = response.data
+          this.page.total = response.total
+          this.page.loading = false
+        }
+      })
+    },
+
+    del(val) {
+      this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        postJson('/api/v1/carinfo/delete', { id: val }).then(response => {
+          if (response.code === 200) {
+            this.getDatalist()
+          }
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+	.top-info {
+		height: 53px;
+		line-height: 53px;
+		width: 100%;
+		background-color: rgba(242, 242, 242, 1);
+		box-shadow: none;
+		text-align: left;
+		color: #7F7F7F;
+		font-size: 12px;
+		padding-left: 20px;
+		margin-bottom: 20px;
+		>span {
+			color: #0000FF;
+			font-size: 13px;
+		}
+	}
+</style>

src/views/device/delivery/index.vue

@@ -1,120 +1,357 @@
 <template>
   <div class="app-container">
     <h1>设备出库</h1>
-		<div class="top-info">
-			已出库设备 <span>1864</span>，可出库设备 <span>200</span>
-		</div>
-
-		<el-form :inline="true" :model="listQuery" @keyup.enter.native="searchHandle()">
-			<el-row>
-				<el-col :span="5">
-					<el-form-item label="设备SN">
-						<el-input v-model="listQuery.sn" placeholder="请输入设备SN" clearable></el-input>
-					</el-form-item>
-				</el-col>
-				
-				<el-col :span="5">
-					<el-form-item label="出库类型">
-						<el-select v-model="listQuery.type">
-              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
-            </el-select> 
-					</el-form-item>
-				</el-col>
-        <el-col :span="9">
-					<el-form-item label="出库时间">
-						<el-date-picker
-              v-model="listQuery.time"
-              type="datetimerange"
-              range-separator="至"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期">
-            </el-date-picker>
-					</el-form-item>
-				</el-col>
-				<el-col :span="5">
-					<div style="float: right;">
-						<el-form-item>
-							<el-button type="primary" @click="searchHandle()">搜索</el-button>
-						</el-form-item>
-						<el-form-item>
-							<el-button @click="resetForm()">重置</el-button>
-						</el-form-item>
-					</div>
-				</el-col>
-			</el-row>
-      <el-row>
-        
-      </el-row>
-			<el-row>
-				<el-form-item>
-					<el-button type="primary" @click="cerateHandle()">新增出库</el-button>
-				</el-form-item>
-				<el-form-item>
-					<el-button type="primary" @click="batchHandle()">批次出库</el-button>
-				</el-form-item>
-			</el-row>
-		</el-form>
-
-    <el-table
-      v-loading="loading"
-      :data="data"
-      element-loading-text="Loading"
-			:header-cell-style="{background:'rgba(242, 242, 242, 1)',borderColor:'rgba(242, 242, 242, 1);',textAlign:'center'}"
-			:cell-style="{'text-align':'center'}"
-      fit
-      highlight-current-row
-    >
-			<el-table-column label="出库时间">
-        <template slot-scope="scope">
-          {{ scope.row.update_time }}
-        </template>
-      </el-table-column>
-
-      <el-table-column label="设备数量">
-        <template slot-scope="scope">
-          {{ scope.row.total }}
-        </template>
-      </el-table-column>
-
-      <el-table-column label="出库类型">
-        <template slot-scope="scope">
-          {{ scope.row.out_type}}
-        </template>
-      </el-table-column>
-
-      <el-table-column label="客户">
-        骑享科技
-      </el-table-column>
-
-      <el-table-column label="接收人">
-        <template slot-scope="scope">
-          {{ scope.row.receiver_name }}
-        </template>
-      </el-table-column>
-
-      <el-table-column label="接收人电话">
-        <template slot-scope="scope">
-          {{ scope.row.receiver_phone }}
-        </template>
-      </el-table-column>
-
-			<el-table-column label="出库人">
-        <template slot-scope="scope">
-          {{ scope.row.operator }}
-        </template>
-      </el-table-column>
-
-      <el-table-column align="center" label="操作" width="180">
-        <template slot-scope="scope">
-          <el-button @click="gotoDetailHandle(scope.row.batch_num)" type="text">查看详情</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-
-		<el-pagination style="float: right; margin-top: 30px;" :current-page="listQuery.index" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.length" :total="total"
-			layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
-			@current-change="pageCurrentChangeHandle">
-		</el-pagination>
+    <el-tabs v-model="activeName" @tab-click="handleClick">
+      <el-tab-pane label="电池" name="first">
+        <div class="top-info">
+          已出库设备 <span>1864</span>，可出库设备 <span>200</span>
+        </div>
+
+        <el-form :inline="true" :model="listQuery" @keyup.enter.native="searchHandle()">
+          <el-row>
+            <el-col :span="5">
+              <el-form-item label="设备SN">
+                <el-input v-model="listQuery.sn" placeholder="请输入设备SN" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            
+            <el-col :span="5">
+              <el-form-item label="出库类型">
+                <el-select v-model="listQuery.type">
+                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                </el-select> 
+              </el-form-item>
+            </el-col>
+            <el-col :span="9">
+              <el-form-item label="出库时间">
+                <el-date-picker
+                  v-model="listQuery.time"
+                  type="datetimerange"
+                  range-separator="至"
+                  start-placeholder="开始日期"
+                  end-placeholder="结束日期">
+                </el-date-picker>
+              </el-form-item>
+            </el-col>
+            <el-col :span="5">
+              <div style="float: right;">
+                <el-form-item>
+                  <el-button type="primary" @click="searchHandle()">搜索</el-button>
+                </el-form-item>
+                <el-form-item>
+                  <el-button @click="resetForm()">重置</el-button>
+                </el-form-item>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            
+          </el-row>
+          <el-row>
+            <el-form-item>
+              <el-button type="primary" @click="cerateHandle()">新增出库</el-button>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="batchHandle()">批次出库</el-button>
+            </el-form-item>
+          </el-row>
+        </el-form>
+
+        <el-table
+          v-loading="loading"
+          :data="data"
+          element-loading-text="Loading"
+          :header-cell-style="{background:'rgba(242, 242, 242, 1)',borderColor:'rgba(242, 242, 242, 1);',textAlign:'center'}"
+          :cell-style="{'text-align':'center'}"
+          fit
+          highlight-current-row
+        >
+          <el-table-column label="出库时间">
+            <template slot-scope="scope">
+              {{ scope.row.update_time }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="设备数量">
+            <template slot-scope="scope">
+              {{ scope.row.total }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="出库类型">
+            <template slot-scope="scope">
+              {{ scope.row.out_type}}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="客户">
+            骑享科技
+          </el-table-column>
+
+          <el-table-column label="接收人">
+            <template slot-scope="scope">
+              {{ scope.row.receiver_name }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="接收人电话">
+            <template slot-scope="scope">
+              {{ scope.row.receiver_phone }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="出库人">
+            <template slot-scope="scope">
+              {{ scope.row.operator }}
+            </template>
+          </el-table-column>
+
+          <el-table-column align="center" label="操作" width="180">
+            <template slot-scope="scope">
+              <el-button @click="gotoDetailHandle(scope.row.batch_num)" type="text">查看详情</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <el-pagination style="float: right; margin-top: 30px;" :current-page="listQuery.index" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.length" :total="total"
+          layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
+          @current-change="pageCurrentChangeHandle">
+        </el-pagination>
+      </el-tab-pane>
+      <el-tab-pane label="电动车" name="second">
+        <div class="top-info">
+          已出库设备 <span>1864</span>，可出库设备 <span>200</span>
+        </div>
+
+        <el-form :inline="true" :model="listQuery" @keyup.enter.native="searchHandle()">
+          <el-row>
+            <el-col :span="5">
+              <el-form-item label="设备SN">
+                <el-input v-model="listQuery.sn" placeholder="请输入设备SN" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            
+            <el-col :span="5">
+              <el-form-item label="出库类型">
+                <el-select v-model="listQuery.type">
+                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                </el-select> 
+              </el-form-item>
+            </el-col>
+            <el-col :span="9">
+              <el-form-item label="出库时间">
+                <el-date-picker
+                  v-model="listQuery.time"
+                  type="datetimerange"
+                  range-separator="至"
+                  start-placeholder="开始日期"
+                  end-placeholder="结束日期">
+                </el-date-picker>
+              </el-form-item>
+            </el-col>
+            <el-col :span="5">
+              <div style="float: right;">
+                <el-form-item>
+                  <el-button type="primary" @click="searchHandle()">搜索</el-button>
+                </el-form-item>
+                <el-form-item>
+                  <el-button @click="resetForm()">重置</el-button>
+                </el-form-item>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            
+          </el-row>
+          <el-row>
+            <el-form-item>
+              <el-button type="primary" @click="cerateHandle()">新增出库</el-button>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="batchHandle()">批次出库</el-button>
+            </el-form-item>
+          </el-row>
+        </el-form>
+
+        <el-table
+          v-loading="loading"
+          :data="data"
+          element-loading-text="Loading"
+          :header-cell-style="{background:'rgba(242, 242, 242, 1)',borderColor:'rgba(242, 242, 242, 1);',textAlign:'center'}"
+          :cell-style="{'text-align':'center'}"
+          fit
+          highlight-current-row
+        >
+          <el-table-column label="出库时间">
+            <template slot-scope="scope">
+              {{ scope.row.update_time }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="设备数量">
+            <template slot-scope="scope">
+              {{ scope.row.total }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="出库类型">
+            <template slot-scope="scope">
+              {{ scope.row.out_type}}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="客户">
+            骑享科技
+          </el-table-column>
+
+          <el-table-column label="接收人">
+            <template slot-scope="scope">
+              {{ scope.row.receiver_name }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="接收人电话">
+            <template slot-scope="scope">
+              {{ scope.row.receiver_phone }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="出库人">
+            <template slot-scope="scope">
+              {{ scope.row.operator }}
+            </template>
+          </el-table-column>
+
+          <el-table-column align="center" label="操作" width="180">
+            <template slot-scope="scope">
+              <el-button @click="gotoDetailHandle(scope.row.batch_num)" type="text">查看详情</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <el-pagination style="float: right; margin-top: 30px;" :current-page="listQuery.index" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.length" :total="total"
+          layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
+          @current-change="pageCurrentChangeHandle">
+        </el-pagination>
+      </el-tab-pane>
+      <el-tab-pane label="配件" name="third">
+        <div class="top-info">
+          已出库设备 <span>1864</span>，可出库设备 <span>200</span>
+        </div>
+
+        <el-form :inline="true" :model="listQuery" @keyup.enter.native="searchHandle()">
+          <el-row>
+            <el-col :span="5">
+              <el-form-item label="设备SN">
+                <el-input v-model="listQuery.sn" placeholder="请输入设备SN" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            
+            <el-col :span="5">
+              <el-form-item label="出库类型">
+                <el-select v-model="listQuery.type">
+                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                </el-select> 
+              </el-form-item>
+            </el-col>
+            <el-col :span="9">
+              <el-form-item label="出库时间">
+                <el-date-picker
+                  v-model="listQuery.time"
+                  type="datetimerange"
+                  range-separator="至"
+                  start-placeholder="开始日期"
+                  end-placeholder="结束日期">
+                </el-date-picker>
+              </el-form-item>
+            </el-col>
+            <el-col :span="5">
+              <div style="float: right;">
+                <el-form-item>
+                  <el-button type="primary" @click="searchHandle()">搜索</el-button>
+                </el-form-item>
+                <el-form-item>
+                  <el-button @click="resetForm()">重置</el-button>
+                </el-form-item>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            
+          </el-row>
+          <el-row>
+            <el-form-item>
+              <el-button type="primary" @click="cerateHandle()">新增出库</el-button>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="batchHandle()">批次出库</el-button>
+            </el-form-item>
+          </el-row>
+        </el-form>
+
+        <el-table
+          v-loading="loading"
+          :data="data"
+          element-loading-text="Loading"
+          :header-cell-style="{background:'rgba(242, 242, 242, 1)',borderColor:'rgba(242, 242, 242, 1);',textAlign:'center'}"
+          :cell-style="{'text-align':'center'}"
+          fit
+          highlight-current-row
+        >
+          <el-table-column label="出库时间">
+            <template slot-scope="scope">
+              {{ scope.row.update_time }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="设备数量">
+            <template slot-scope="scope">
+              {{ scope.row.total }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="出库类型">
+            <template slot-scope="scope">
+              {{ scope.row.out_type}}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="客户">
+            骑享科技
+          </el-table-column>
+
+          <el-table-column label="接收人">
+            <template slot-scope="scope">
+              {{ scope.row.receiver_name }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="接收人电话">
+            <template slot-scope="scope">
+              {{ scope.row.receiver_phone }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="出库人">
+            <template slot-scope="scope">
+              {{ scope.row.operator }}
+            </template>
+          </el-table-column>
+
+          <el-table-column align="center" label="操作" width="180">
+            <template slot-scope="scope">
+              <el-button @click="gotoDetailHandle(scope.row.batch_num)" type="text">查看详情</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <el-pagination style="float: right; margin-top: 30px;" :current-page="listQuery.index" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.length" :total="total"
+          layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
+          @current-change="pageCurrentChangeHandle">
+        </el-pagination>
+      </el-tab-pane>
+    </el-tabs>
+		
 		<Create v-if="addVisible" ref="add" @refreshDataList="getDataList"></Create>
   </div>
 </template>
@@ -150,13 +387,18 @@ export default {
         {label: '商用', value: 1},
         {label: '测试', value: 2},
         {label: '试用', value: 3}
-      ]
+      ],
+      activeName: 'first'
     }
   },
   created() {
     this.getDataList()
   },
   methods: {
+    //切换tab页
+    handleClick(tab) {
+      this.activeName = tab.name
+    },
     //搜索
     searchHandle() {
       this.listQuery.index = 1

src/views/device/handle/index.vue

@@ -1,104 +1,275 @@
 <template>
   <div class="app-container">
-    <h1>电池设备处置</h1>
-		<div class="top-info">
-			历史处置电池 <span>1864</span>
-		</div>
-
-		<el-form :inline="true" :model="listQuery" @keyup.enter.native="handleFilter()">
-			<el-row>
-				<el-col :span="12">
-					<el-form-item label="设备SN">
-						<el-input v-model="listQuery.sn" placeholder="请输入设备SN" clearable></el-input>
-					</el-form-item>
-				</el-col>
-				<!-- <el-col :span="6">
-					<el-form-item label="处置时间">
-						<el-input v-model="listQuery.type" placeholder="请选择" clearable></el-input>
-					</el-form-item>
-				</el-col>
-				<el-col :span="6">
-					<el-form-item label="处置类型">
-						<el-input v-model="listQuery.type" placeholder="请选择" clearable></el-input>
-					</el-form-item>
-				</el-col> -->
-				<el-col :span="12">
-					<div style="float: right;">
-						<el-form-item>
-							<el-button type="primary" @click="handleFilter()">搜索</el-button>
-						</el-form-item>
-						<el-form-item>
-							<el-button @click="resetForm()">重置</el-button>
-						</el-form-item>
-					</div>
-				</el-col>
-			</el-row>
-			<el-row>
-				<el-form-item>
-					<el-button type="primary" @click="cerateHandle()">新增处置</el-button>
-				</el-form-item>
-			</el-row>
-		</el-form>
-
-    <el-table
-      v-loading="loading"
-      :data="data"
-      element-loading-text="Loading"
-			:header-cell-style="{background:'rgba(242, 242, 242, 1)',borderColor:'rgba(242, 242, 242, 1);',textAlign:'center'}"
-			:cell-style="{'text-align':'center'}"
-      fit
-      highlight-current-row
-    >
-			<el-table-column label="序号" type="index"></el-table-column>
-
-			<el-table-column label="设备IMEI">
-        <template slot-scope="scope">
-          {{ scope.row.sn }}
-        </template>
-      </el-table-column>
-
-      <el-table-column label="处置产品" prop="plateNumber">
-        <template slot-scope="scope">
-          {{ scope.row.code }}
-        </template>
-      </el-table-column>
-
-      <el-table-column label="处置类型" prop="deptId">
-        <template slot-scope="scope">
-          {{ scope.row.eventType}}
-        </template>
-      </el-table-column>
-
-      <el-table-column label="入库SN">
-        <template slot-scope="scope">
-          {{ scope.row.dt }}
-        </template>
-      </el-table-column>
-
-      <el-table-column label="录入时间" prop="model">
-        <template slot-scope="scope">
-          {{ scope.row.addTime }}
-        </template>
-      </el-table-column>
-
-      <el-table-column label="处置时间">
-        <template slot-scope="scope">
-          {{ scope.row.handleTime }}
-        </template>
-      </el-table-column>
-
-      <el-table-column align="center" label="历史SN" width="120">
-        <template slot-scope="scope">
-          <el-button @click="infoHandle(scope.row.id)" type="text">查看</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-
-		<el-pagination style="float: right; margin-top: 30px;" :current-page="listQuery.index" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.lenght" :total="total"
-			layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
-			@current-change="pageCurrentChangeHandle">
-		</el-pagination>
+    <h1>设备处置</h1>
+    <el-tabs v-model="activeName" @tab-click="handleClick">
+      <el-tab-pane label="电池" name="first">
+        <div class="top-info">
+          历史处置电池 <span>1864</span>
+        </div>
 
+        <el-form :inline="true" :model="listQuery" @keyup.enter.native="handleFilter()">
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="设备SN">
+                <el-input v-model="listQuery.sn" placeholder="请输入设备SN" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <div style="float: right;">
+                <el-form-item>
+                  <el-button type="primary" @click="handleFilter()">搜索</el-button>
+                </el-form-item>
+                <el-form-item>
+                  <el-button @click="resetForm()">重置</el-button>
+                </el-form-item>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-form-item>
+              <el-button type="primary" @click="cerateHandle()">新增处置</el-button>
+            </el-form-item>
+          </el-row>
+        </el-form>
+
+        <el-table
+          v-loading="loading"
+          :data="data"
+          element-loading-text="Loading"
+          :header-cell-style="{background:'rgba(242, 242, 242, 1)',borderColor:'rgba(242, 242, 242, 1);',textAlign:'center'}"
+          :cell-style="{'text-align':'center'}"
+          fit
+          highlight-current-row
+        >
+          <el-table-column label="序号" type="index"></el-table-column>
+
+          <el-table-column label="设备IMEI">
+            <template slot-scope="scope">
+              {{ scope.row.sn }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="处置产品" prop="plateNumber">
+            <template slot-scope="scope">
+              {{ scope.row.code }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="处置类型" prop="deptId">
+            <template slot-scope="scope">
+              {{ scope.row.eventType}}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="入库SN">
+            <template slot-scope="scope">
+              {{ scope.row.dt }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="录入时间" prop="model">
+            <template slot-scope="scope">
+              {{ scope.row.addTime }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="处置时间">
+            <template slot-scope="scope">
+              {{ scope.row.handleTime }}
+            </template>
+          </el-table-column>
+
+          <el-table-column align="center" label="历史SN" width="120">
+            <template slot-scope="scope">
+              <el-button @click="infoHandle(scope.row.id)" type="text">查看</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <el-pagination style="float: right; margin-top: 30px;" :current-page="listQuery.index" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.lenght" :total="total"
+          layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
+          @current-change="pageCurrentChangeHandle">
+        </el-pagination>
+      </el-tab-pane>
+      <el-tab-pane label="电动车" name="second">
+        <div class="top-info">
+          历史处置电动车 <span>1864</span>
+        </div>
+
+        <el-form :inline="true" :model="listQuery" @keyup.enter.native="handleFilter()">
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="设备SN">
+                <el-input v-model="listQuery.sn" placeholder="请输入设备SN" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <div style="float: right;">
+                <el-form-item>
+                  <el-button type="primary" @click="handleFilter()">搜索</el-button>
+                </el-form-item>
+                <el-form-item>
+                  <el-button @click="resetForm()">重置</el-button>
+                </el-form-item>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-form-item>
+              <el-button type="primary" @click="cerateHandle()">新增处置</el-button>
+            </el-form-item>
+          </el-row>
+        </el-form>
+
+        <el-table
+          v-loading="loading"
+          :data="data"
+          element-loading-text="Loading"
+          :header-cell-style="{background:'rgba(242, 242, 242, 1)',borderColor:'rgba(242, 242, 242, 1);',textAlign:'center'}"
+          :cell-style="{'text-align':'center'}"
+          fit
+          highlight-current-row
+        >
+          <el-table-column label="序号" type="index"></el-table-column>
+
+          <el-table-column label="设备IMEI">
+            <template slot-scope="scope">
+              {{ scope.row.sn }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="处置产品" prop="plateNumber">
+            <template slot-scope="scope">
+              {{ scope.row.code }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="处置类型" prop="deptId">
+            <template slot-scope="scope">
+              {{ scope.row.eventType}}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="入库SN">
+            <template slot-scope="scope">
+              {{ scope.row.dt }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="录入时间" prop="model">
+            <template slot-scope="scope">
+              {{ scope.row.addTime }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="处置时间">
+            <template slot-scope="scope">
+              {{ scope.row.handleTime }}
+            </template>
+          </el-table-column>
+
+          <el-table-column align="center" label="历史SN" width="120">
+            <template slot-scope="scope">
+              <el-button @click="infoHandle(scope.row.id)" type="text">查看</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <el-pagination style="float: right; margin-top: 30px;" :current-page="listQuery.index" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.lenght" :total="total"
+          layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
+          @current-change="pageCurrentChangeHandle">
+        </el-pagination>
+      </el-tab-pane>
+      <el-tab-pane label="配件" name="third">
+        <div class="top-info">
+          历史处置配件 <span>1864</span>
+        </div>
+
+        <el-form :inline="true" :model="listQuery" @keyup.enter.native="handleFilter()">
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="设备SN">
+                <el-input v-model="listQuery.sn" placeholder="请输入设备SN" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <div style="float: right;">
+                <el-form-item>
+                  <el-button type="primary" @click="handleFilter()">搜索</el-button>
+                </el-form-item>
+                <el-form-item>
+                  <el-button @click="resetForm()">重置</el-button>
+                </el-form-item>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-form-item>
+              <el-button type="primary" @click="cerateHandle()">新增处置</el-button>
+            </el-form-item>
+          </el-row>
+        </el-form>
+
+        <el-table
+          v-loading="loading"
+          :data="data"
+          element-loading-text="Loading"
+          :header-cell-style="{background:'rgba(242, 242, 242, 1)',borderColor:'rgba(242, 242, 242, 1);',textAlign:'center'}"
+          :cell-style="{'text-align':'center'}"
+          fit
+          highlight-current-row
+        >
+          <el-table-column label="序号" type="index"></el-table-column>
+
+          <el-table-column label="设备IMEI">
+            <template slot-scope="scope">
+              {{ scope.row.sn }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="处置产品" prop="plateNumber">
+            <template slot-scope="scope">
+              {{ scope.row.code }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="处置类型" prop="deptId">
+            <template slot-scope="scope">
+              {{ scope.row.eventType}}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="入库SN">
+            <template slot-scope="scope">
+              {{ scope.row.dt }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="录入时间" prop="model">
+            <template slot-scope="scope">
+              {{ scope.row.addTime }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="处置时间">
+            <template slot-scope="scope">
+              {{ scope.row.handleTime }}
+            </template>
+          </el-table-column>
+
+          <el-table-column align="center" label="历史SN" width="120">
+            <template slot-scope="scope">
+              <el-button @click="infoHandle(scope.row.id)" type="text">查看</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <el-pagination style="float: right; margin-top: 30px;" :current-page="listQuery.index" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.lenght" :total="total"
+          layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
+          @current-change="pageCurrentChangeHandle">
+        </el-pagination>
+      </el-tab-pane>
+    </el-tabs>
     <Create v-if="addVisible" ref="addOrUpdate" @refreshDataList="handleFilter"></Create>
     <Info v-if="infoVisiable" ref="info"></Info>
   </div>
@@ -110,7 +281,7 @@ import Create from '@/views/device/handle/handle-add.vue'
 import Info from '@/views/device/handle/handle-info.vue'
 
 export default {
-  components: { Create },
+  components: { Create, Info },
   data() {
     return {
       //加载动画
@@ -132,12 +303,17 @@ export default {
 			/**是否显示新增弹窗 */
 			addVisible: false,
       infoVisiable: false,
+      activeName: 'first'
     }
   },
   created() {
     this.getDataList()
   },
   methods: {
+    //切换tab页
+    handleClick(tab) {
+      this.activeName = tab.name
+    },
     //搜索
     handleFilter() {
       this.listQuery.index = 1

src/views/device/info/index.vue

@@ -1,129 +1,384 @@
 <template>
   <div class="app-container">
     <h1>设备录入</h1>
-		<div class="top-info">
-			已添加电池设备 <span>{{dataTotle.total}}</span>，未入库电池 <span>{{dataTotle.notInStorage}}</span>
-		</div>
-
-		<el-form :inline="true" :model="listQuery" @keyup.enter.native="handleFilter()">
-			<el-row>
-				<el-col :span="6">
-					<el-form-item label="批次号">
-						<el-input v-model="listQuery.batchNum" placeholder="请输入批次号" clearable></el-input>
-					</el-form-item>
-				</el-col>
-        <el-col :span="12">
-					<el-form-item label="录入时间">
-						<el-date-picker
-              v-model="listQuery.time"
-              type="datetimerange"
-              range-separator="至"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期">
-            </el-date-picker>
-					</el-form-item>
-				</el-col>
-				<el-col :span="6">
-					<div style="float: right;">
-						<el-form-item>
-							<el-button type="primary" @click="searchHandle()">搜索</el-button>
-						</el-form-item>
-						<el-form-item>
-							<el-button @click="resetForm()">重置</el-button>
-						</el-form-item>
-					</div>
-				</el-col>
-			</el-row>
-      <el-row>
-				
-			</el-row>
-			<el-row>
-				<el-form-item>
-					<el-button type="primary" @click="cerateHandle()">新增电池</el-button>
-				</el-form-item>
-				<el-form-item>
-					<el-button type="primary" @click="upLoadHandle()">批量新增电池</el-button>
-				</el-form-item>
-				<el-form-item>
-					<el-button type="primary" @click="excelTemplateHandle()">下载模板</el-button>
-				</el-form-item>
-			</el-row>
-		</el-form>
-
-    <el-table
-      v-loading="loading"
-      :data="data"
-      element-loading-text="Loading"
-			:header-cell-style="{background:'rgba(242, 242, 242, 1)',borderColor:'rgba(242, 242, 242, 1);',textAlign:'center'}"
-			:cell-style="{'text-align':'center'}"
-      fit
-      highlight-current-row
-    >
-			<el-table-column label="批次编号">
-        <template slot-scope="scope">
-          {{ scope.row.batch_num }}
-        </template>
-      </el-table-column>
-
-      <el-table-column label="设备数量" prop="plateNumber">
-        <template slot-scope="scope">
-          {{ scope.row.total }}
-        </template>
-      </el-table-column>
-
-      <el-table-column label="电池类型" prop="deptId">
-        <template slot-scope="scope">
-          {{ scope.row.type_title}}
-        </template>
-      </el-table-column>
-
-      <el-table-column label="PACK厂">
-        <template slot-scope="scope">
-          {{ scope.row.pack_title }}
-        </template>
-      </el-table-column>
-
-      <el-table-column label="已入库" width="80">
-        <template slot-scope="scope">
-          {{ scope.row.in_storage }}
-        </template>
-      </el-table-column>
-
-      <el-table-column label="操作人">
-        <template slot-scope="scope">
-          {{ scope.row.operator }}
-        </template>
-      </el-table-column>
-
-			<el-table-column label="发送地">
-        <template slot-scope="scope">
-          {{ scope.row.received_place }}
-        </template>
-      </el-table-column>
-
-      <el-table-column align="center" label="发货时间">
-        <template slot-scope="scope">
-          <span>{{ scope.row.deliver_time }}</span>
-        </template>
-      </el-table-column>
-
-      <el-table-column label="录入时间" prop="vin">
-        <template slot-scope="scope">
-          {{ scope.row.add_time }}
-        </template>
-      </el-table-column>
-
-      <el-table-column align="center" label="操作" width="180">
-        <template slot-scope="scope">
-          <el-button @click="detailHandle(scope.row)" type="text">查看详情</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-
-		<el-pagination style="float: right; margin-top: 30px;" :current-page="listQuery.index" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.length" :total="total"
-			layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
-			@current-change="pageCurrentChangeHandle">
-		</el-pagination>
+    <el-tabs v-model="activeName" @tab-click="handleClick">
+      <el-tab-pane label="电池" name="first">
+        <div class="top-info">
+          已添加电池设备 <span>{{dataTotle.total}}</span>，未入库电池 <span>{{dataTotle.notInStorage}}</span>
+        </div>
+
+        <el-form :inline="true" :model="listQuery" @keyup.enter.native="handleFilter()">
+          <el-row>
+            <el-col :span="6">
+              <el-form-item label="批次号">
+                <el-input v-model="listQuery.batchNum" placeholder="请输入批次号" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="录入时间">
+                <el-date-picker
+                  v-model="listQuery.time"
+                  type="datetimerange"
+                  range-separator="至"
+                  start-placeholder="开始日期"
+                  end-placeholder="结束日期">
+                </el-date-picker>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <div style="float: right;">
+                <el-form-item>
+                  <el-button type="primary" @click="searchHandle()">搜索</el-button>
+                </el-form-item>
+                <el-form-item>
+                  <el-button @click="resetForm()">重置</el-button>
+                </el-form-item>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            
+          </el-row>
+          <el-row>
+            <el-form-item>
+              <el-button type="primary" @click="cerateHandle()">新增电池</el-button>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="upLoadHandle()">批量新增电池</el-button>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="excelTemplateHandle()">下载模板</el-button>
+            </el-form-item>
+          </el-row>
+        </el-form>
+
+        <el-table
+          v-loading="loading"
+          :data="data"
+          element-loading-text="Loading"
+          :header-cell-style="{background:'rgba(242, 242, 242, 1)',borderColor:'rgba(242, 242, 242, 1);',textAlign:'center'}"
+          :cell-style="{'text-align':'center'}"
+          fit
+          highlight-current-row
+        >
+          <el-table-column label="批次编号">
+            <template slot-scope="scope">
+              {{ scope.row.batch_num }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="设备数量" prop="plateNumber">
+            <template slot-scope="scope">
+              {{ scope.row.total }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="电池类型" prop="deptId">
+            <template slot-scope="scope">
+              {{ scope.row.type_title}}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="PACK厂">
+            <template slot-scope="scope">
+              {{ scope.row.pack_title }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="已入库" width="80">
+            <template slot-scope="scope">
+              {{ scope.row.in_storage }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="操作人">
+            <template slot-scope="scope">
+              {{ scope.row.operator }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="发送地">
+            <template slot-scope="scope">
+              {{ scope.row.received_place }}
+            </template>
+          </el-table-column>
+
+          <el-table-column align="center" label="发货时间">
+            <template slot-scope="scope">
+              <span>{{ scope.row.deliver_time }}</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="录入时间" prop="vin">
+            <template slot-scope="scope">
+              {{ scope.row.add_time }}
+            </template>
+          </el-table-column>
+
+          <el-table-column align="center" label="操作" width="180">
+            <template slot-scope="scope">
+              <el-button @click="detailHandle(scope.row)" type="text">查看详情</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <el-pagination style="float: right; margin-top: 30px;" :current-page="listQuery.index" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.length" :total="total"
+          layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
+          @current-change="pageCurrentChangeHandle">
+        </el-pagination>
+      </el-tab-pane>
+      <el-tab-pane label="电动车" name="secend">
+        <div class="top-info">
+          已添加电动车设备 <span>{{dataTotle.total}}</span>，未入库电动车 <span>{{dataTotle.notInStorage}}</span>
+        </div>
+
+        <el-form :inline="true" :model="listQuery" @keyup.enter.native="handleFilter()">
+          <el-row>
+            <el-col :span="6">
+              <el-form-item label="批次号">
+                <el-input v-model="listQuery.batchNum" placeholder="请输入批次号" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="录入时间">
+                <el-date-picker
+                  v-model="listQuery.time"
+                  type="datetimerange"
+                  range-separator="至"
+                  start-placeholder="开始日期"
+                  end-placeholder="结束日期">
+                </el-date-picker>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <div style="float: right;">
+                <el-form-item>
+                  <el-button type="primary" @click="searchHandle()">搜索</el-button>
+                </el-form-item>
+                <el-form-item>
+                  <el-button @click="resetForm()">重置</el-button>
+                </el-form-item>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            
+          </el-row>
+          <el-row>
+            <el-form-item>
+              <el-button type="primary" @click="cerateHandle()">新增电动车</el-button>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="upLoadHandle()">批量新增电动车</el-button>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="excelTemplateHandle()">下载模板</el-button>
+            </el-form-item>
+          </el-row>
+        </el-form>
+
+        <el-table
+          v-loading="loading"
+          :data="data"
+          element-loading-text="Loading"
+          :header-cell-style="{background:'rgba(242, 242, 242, 1)',borderColor:'rgba(242, 242, 242, 1);',textAlign:'center'}"
+          :cell-style="{'text-align':'center'}"
+          fit
+          highlight-current-row
+        >
+          <el-table-column label="批次编号">
+            <template slot-scope="scope">
+              {{ scope.row.batch_num }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="设备数量" prop="plateNumber">
+            <template slot-scope="scope">
+              {{ scope.row.total }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="电池类型" prop="deptId">
+            <template slot-scope="scope">
+              {{ scope.row.type_title}}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="PACK厂">
+            <template slot-scope="scope">
+              {{ scope.row.pack_title }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="已入库" width="80">
+            <template slot-scope="scope">
+              {{ scope.row.in_storage }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="操作人">
+            <template slot-scope="scope">
+              {{ scope.row.operator }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="发送地">
+            <template slot-scope="scope">
+              {{ scope.row.received_place }}
+            </template>
+          </el-table-column>
+
+          <el-table-column align="center" label="发货时间">
+            <template slot-scope="scope">
+              <span>{{ scope.row.deliver_time }}</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="录入时间" prop="vin">
+            <template slot-scope="scope">
+              {{ scope.row.add_time }}
+            </template>
+          </el-table-column>
+
+          <el-table-column align="center" label="操作" width="180">
+            <template slot-scope="scope">
+              <el-button @click="detailHandle(scope.row)" type="text">查看详情</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <el-pagination style="float: right; margin-top: 30px;" :current-page="listQuery.index" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.length" :total="total"
+          layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
+          @current-change="pageCurrentChangeHandle">
+        </el-pagination>
+      </el-tab-pane>
+      <el-tab-pane label="配件" name="third">
+        <div class="top-info">
+          已添加配件 <span>{{dataTotle.total}}</span>，未入库配件 <span>{{dataTotle.notInStorage}}</span>
+        </div>
+
+        <el-form :inline="true" :model="listQuery" @keyup.enter.native="handleFilter()">
+          <el-row>
+            <el-col :span="6">
+              <el-form-item label="批次号">
+                <el-input v-model="listQuery.batchNum" placeholder="请输入批次号" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="录入时间">
+                <el-date-picker
+                  v-model="listQuery.time"
+                  type="datetimerange"
+                  range-separator="至"
+                  start-placeholder="开始日期"
+                  end-placeholder="结束日期">
+                </el-date-picker>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <div style="float: right;">
+                <el-form-item>
+                  <el-button type="primary" @click="searchHandle()">搜索</el-button>
+                </el-form-item>
+                <el-form-item>
+                  <el-button @click="resetForm()">重置</el-button>
+                </el-form-item>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            
+          </el-row>
+          <el-row>
+            <el-form-item>
+              <el-button type="primary" @click="cerateHandle()">新增配件</el-button>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="upLoadHandle()">批量新增配件</el-button>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="excelTemplateHandle()">下载模板</el-button>
+            </el-form-item>
+          </el-row>
+        </el-form>
+
+        <el-table
+          v-loading="loading"
+          :data="data"
+          element-loading-text="Loading"
+          :header-cell-style="{background:'rgba(242, 242, 242, 1)',borderColor:'rgba(242, 242, 242, 1);',textAlign:'center'}"
+          :cell-style="{'text-align':'center'}"
+          fit
+          highlight-current-row
+        >
+          <el-table-column label="批次编号">
+            <template slot-scope="scope">
+              {{ scope.row.batch_num }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="设备数量" prop="plateNumber">
+            <template slot-scope="scope">
+              {{ scope.row.total }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="电池类型" prop="deptId">
+            <template slot-scope="scope">
+              {{ scope.row.type_title}}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="PACK厂">
+            <template slot-scope="scope">
+              {{ scope.row.pack_title }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="已入库" width="80">
+            <template slot-scope="scope">
+              {{ scope.row.in_storage }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="操作人">
+            <template slot-scope="scope">
+              {{ scope.row.operator }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="发送地">
+            <template slot-scope="scope">
+              {{ scope.row.received_place }}
+            </template>
+          </el-table-column>
+
+          <el-table-column align="center" label="发货时间">
+            <template slot-scope="scope">
+              <span>{{ scope.row.deliver_time }}</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="录入时间" prop="vin">
+            <template slot-scope="scope">
+              {{ scope.row.add_time }}
+            </template>
+          </el-table-column>
+
+          <el-table-column align="center" label="操作" width="180">
+            <template slot-scope="scope">
+              <el-button @click="detailHandle(scope.row)" type="text">查看详情</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <el-pagination style="float: right; margin-top: 30px;" :current-page="listQuery.index" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.length" :total="total"
+          layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
+          @current-change="pageCurrentChangeHandle">
+        </el-pagination>
+      </el-tab-pane>
+    </el-tabs>  
+		
 
     <add-or-update v-if="addVisible" ref="addOrUpdate" @refreshDataList="searchHandle" ></add-or-update>
     <up-load v-if="upVisible" ref="upLoad" ></up-load>
@@ -164,7 +419,8 @@ export default {
       upVisible: false,
       url: 'http://47.111.243.220:8182',
       dataTotle: {},
-      noData: 0
+      noData: 0,
+      activeName: 'first'
     }
   },
   mounted() {
@@ -172,6 +428,10 @@ export default {
     this.getDataTotle()
   },
   methods: {
+    //切换tab页
+    handleClick(tab) {
+      this.activeName = tab.name
+    },
     //搜索
     searchHandle() {
       this.listQuery.index = 1

src/views/device/storage/index.vue

@@ -1,126 +1,371 @@
 <template>
   <div class="app-container">
     <h1>设备入库</h1>
-		<div class="top-info">
-			总录入电池 <span>1864</span>，已入库电池 <span>200</span>，未入库电池 <span style="color: #D9001B;">200</span>
-		</div>
-
-		<el-form :inline="true" :model="listQuery" @keyup.enter.native="searchHandle()">
-			<el-row>
-				<el-col :span="5">
-					<el-form-item label="设备SN">
-						<el-input v-model="listQuery.sn" placeholder="请输入设备SN" clearable></el-input>
-					</el-form-item>
-				</el-col>
-				<el-col :span="5">
-          <el-form-item label="自检">
-            <el-select v-model="listQuery.checkStatus">
-              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
-            </el-select>  
-					</el-form-item>
-				</el-col>
-        <el-col :span="9">
-          <el-form-item label="入库时间">
-						<el-date-picker
-              v-model="listQuery.time"
-              type="datetimerange"
-              range-separator="至"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期">
-            </el-date-picker>
-					</el-form-item>
-        </el-col>
-				<el-col :span="5">
-					<div style="float: right;">
-						<el-form-item>
-							<el-button type="primary" @click="searchHandle()">搜索</el-button>
-						</el-form-item>
-						<el-form-item>
-							<el-button @click="resetForm()">重置</el-button>
-						</el-form-item>
-					</div>
-				</el-col>
-			</el-row>
-			<el-row>
-				<el-form-item>
-					<el-button type="primary" @click="cerateHandle()">新增入库</el-button>
-				</el-form-item>
-				<el-form-item>
-					<el-button type="primary" @click="gotoHandle()">批次入库</el-button>
-				</el-form-item>
-			</el-row>
-		</el-form>
-
-    <el-table
-      v-loading="loading"
-      :data="data"
-      element-loading-text="Loading"
-			:header-cell-style="{background:'rgba(242, 242, 242, 1)',borderColor:'rgba(242, 242, 242, 1);',textAlign:'center'}"
-			:cell-style="{'text-align':'center'}"
-      fit
-      highlight-current-row
-    >
-			<el-table-column label="设备SN">
-        <template slot-scope="scope">
-          {{ scope.row.sn }}
-        </template>
-      </el-table-column>
-
-      <el-table-column label="入库时间">
-        <template slot-scope="scope">
-          {{ scope.row.updateTime }}
-        </template>
-      </el-table-column>
-
-      <el-table-column label="电池类型" prop="deptId">
-        <template slot-scope="scope">
-          {{ scope.row.typeTitle}}
-        </template>
-      </el-table-column>
-
-      <el-table-column label="PACK厂">
-        <template slot-scope="scope">
-          {{ scope.row.packTitle }}
-        </template>
-      </el-table-column>
-
-      <el-table-column label="批次编号">
-        <template slot-scope="scope">
-          {{ scope.row.batchNum }}
-        </template>
-      </el-table-column>
-
-      <el-table-column label="状态">
-        <template slot-scope="scope">
-          {{ scope.row.statusTitle }}
-        </template>
-      </el-table-column>
-
-			<el-table-column label="发送地">
-        <template slot-scope="scope">
-          {{ scope.row.receivedPlace }}
-        </template>
-      </el-table-column>
-
-      <el-table-column align="center" prop="updateTime" label="操作时间">
-        <template slot-scope="scope">
-          <span>{{ scope.row.updateTime }}</span>
-        </template>
-      </el-table-column>
-
-      <el-table-column align="center" label="操作" width="180">
-        <template slot-scope="scope">
-          <el-button v-if="scope.row.checkStatus === 1" @click="edit(scope.row.id)" type="text">已通过</el-button>
-          <el-button v-if="scope.row.checkStatus === 0" @click="edit(scope.row.id)" type="text">未通过</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-
-		<el-pagination style="float: right; margin-top: 30px;" :current-page="listQuery.index" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.length" :total="total"
-			layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
-			@current-change="pageCurrentChangeHandle">
-		</el-pagination>
+    <el-tabs v-model="activeName" @tab-click="handleClick">
+      <el-tab-pane label="电池" name="first">
+        <div class="top-info">
+          总录入电池 <span>1864</span>，已入库电池 <span>200</span>，未入库电池 <span style="color: #D9001B;">200</span>
+        </div>
 
+        <el-form :inline="true" :model="listQuery" @keyup.enter.native="searchHandle()">
+          <el-row>
+            <el-col :span="5">
+              <el-form-item label="设备SN">
+                <el-input v-model="listQuery.sn" placeholder="请输入设备SN" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="5">
+              <el-form-item label="自检">
+                <el-select v-model="listQuery.checkStatus">
+                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                </el-select>  
+              </el-form-item>
+            </el-col>
+            <el-col :span="9">
+              <el-form-item label="入库时间">
+                <el-date-picker
+                  v-model="listQuery.time"
+                  type="datetimerange"
+                  range-separator="至"
+                  start-placeholder="开始日期"
+                  end-placeholder="结束日期">
+                </el-date-picker>
+              </el-form-item>
+            </el-col>
+            <el-col :span="5">
+              <div style="float: right;">
+                <el-form-item>
+                  <el-button type="primary" @click="searchHandle()">搜索</el-button>
+                </el-form-item>
+                <el-form-item>
+                  <el-button @click="resetForm()">重置</el-button>
+                </el-form-item>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-form-item>
+              <el-button type="primary" @click="cerateHandle()">新增入库</el-button>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="gotoHandle()">批次入库</el-button>
+            </el-form-item>
+          </el-row>
+        </el-form>
+
+        <el-table
+          v-loading="loading"
+          :data="data"
+          element-loading-text="Loading"
+          :header-cell-style="{background:'rgba(242, 242, 242, 1)',borderColor:'rgba(242, 242, 242, 1);',textAlign:'center'}"
+          :cell-style="{'text-align':'center'}"
+          fit
+          highlight-current-row
+        >
+          <el-table-column label="设备SN">
+            <template slot-scope="scope">
+              {{ scope.row.sn }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="入库时间">
+            <template slot-scope="scope">
+              {{ scope.row.updateTime }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="电池类型" prop="deptId">
+            <template slot-scope="scope">
+              {{ scope.row.typeTitle}}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="PACK厂">
+            <template slot-scope="scope">
+              {{ scope.row.packTitle }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="批次编号">
+            <template slot-scope="scope">
+              {{ scope.row.batchNum }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="状态">
+            <template slot-scope="scope">
+              {{ scope.row.statusTitle }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="发送地">
+            <template slot-scope="scope">
+              {{ scope.row.receivedPlace }}
+            </template>
+          </el-table-column>
+
+          <el-table-column align="center" prop="updateTime" label="操作时间">
+            <template slot-scope="scope">
+              <span>{{ scope.row.updateTime }}</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column align="center" label="操作" width="180">
+            <template slot-scope="scope">
+              <el-button v-if="scope.row.checkStatus === 1" @click="edit(scope.row.id)" type="text">已通过</el-button>
+              <el-button v-if="scope.row.checkStatus === 0" @click="edit(scope.row.id)" type="text">未通过</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <el-pagination style="float: right; margin-top: 30px;" :current-page="listQuery.index" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.length" :total="total"
+          layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
+          @current-change="pageCurrentChangeHandle">
+        </el-pagination>
+      </el-tab-pane>
+      <el-tab-pane label="电动车" name="second">
+        <div class="top-info">
+          总录入电动车 <span>1864</span>，已入库电动车 <span>200</span>，未入库电动车 <span style="color: #D9001B;">200</span>
+        </div>
+
+        <el-form :inline="true" :model="listQuery" @keyup.enter.native="searchHandle()">
+          <el-row>
+            <el-col :span="5">
+              <el-form-item label="设备SN">
+                <el-input v-model="listQuery.sn" placeholder="请输入设备SN" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="5">
+              <el-form-item label="自检">
+                <el-select v-model="listQuery.checkStatus">
+                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                </el-select>  
+              </el-form-item>
+            </el-col>
+            <el-col :span="9">
+              <el-form-item label="入库时间">
+                <el-date-picker
+                  v-model="listQuery.time"
+                  type="datetimerange"
+                  range-separator="至"
+                  start-placeholder="开始日期"
+                  end-placeholder="结束日期">
+                </el-date-picker>
+              </el-form-item>
+            </el-col>
+            <el-col :span="5">
+              <div style="float: right;">
+                <el-form-item>
+                  <el-button type="primary" @click="searchHandle()">搜索</el-button>
+                </el-form-item>
+                <el-form-item>
+                  <el-button @click="resetForm()">重置</el-button>
+                </el-form-item>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-form-item>
+              <el-button type="primary" @click="cerateHandle()">新增入库</el-button>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="gotoHandle()">批次入库</el-button>
+            </el-form-item>
+          </el-row>
+        </el-form>
+
+        <el-table
+          v-loading="loading"
+          :data="data"
+          element-loading-text="Loading"
+          :header-cell-style="{background:'rgba(242, 242, 242, 1)',borderColor:'rgba(242, 242, 242, 1);',textAlign:'center'}"
+          :cell-style="{'text-align':'center'}"
+          fit
+          highlight-current-row
+        >
+          <el-table-column label="设备SN">
+            <template slot-scope="scope">
+              {{ scope.row.sn }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="入库时间">
+            <template slot-scope="scope">
+              {{ scope.row.updateTime }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="电池类型" prop="deptId">
+            <template slot-scope="scope">
+              {{ scope.row.typeTitle}}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="PACK厂">
+            <template slot-scope="scope">
+              {{ scope.row.packTitle }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="批次编号">
+            <template slot-scope="scope">
+              {{ scope.row.batchNum }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="状态">
+            <template slot-scope="scope">
+              {{ scope.row.statusTitle }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="发送地">
+            <template slot-scope="scope">
+              {{ scope.row.receivedPlace }}
+            </template>
+          </el-table-column>
+
+          <el-table-column align="center" prop="updateTime" label="操作时间">
+            <template slot-scope="scope">
+              <span>{{ scope.row.updateTime }}</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column align="center" label="操作" width="180">
+            <template slot-scope="scope">
+              <el-button v-if="scope.row.checkStatus === 1" @click="edit(scope.row.id)" type="text">已通过</el-button>
+              <el-button v-if="scope.row.checkStatus === 0" @click="edit(scope.row.id)" type="text">未通过</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <el-pagination style="float: right; margin-top: 30px;" :current-page="listQuery.index" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.length" :total="total"
+          layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
+          @current-change="pageCurrentChangeHandle">
+        </el-pagination>
+      </el-tab-pane>
+      <el-tab-pane label="配件" name="third">
+        <div class="top-info">
+          总录入配件 <span>1864</span>，已入库配件 <span>200</span>，未入库配件 <span style="color: #D9001B;">200</span>
+        </div>
+
+        <el-form :inline="true" :model="listQuery" @keyup.enter.native="searchHandle()">
+          <el-row>
+            <el-col :span="5">
+              <el-form-item label="设备SN">
+                <el-input v-model="listQuery.sn" placeholder="请输入设备SN" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="5">
+              <el-form-item label="自检">
+                <el-select v-model="listQuery.checkStatus">
+                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                </el-select>  
+              </el-form-item>
+            </el-col>
+            <el-col :span="9">
+              <el-form-item label="入库时间">
+                <el-date-picker
+                  v-model="listQuery.time"
+                  type="datetimerange"
+                  range-separator="至"
+                  start-placeholder="开始日期"
+                  end-placeholder="结束日期">
+                </el-date-picker>
+              </el-form-item>
+            </el-col>
+            <el-col :span="5">
+              <div style="float: right;">
+                <el-form-item>
+                  <el-button type="primary" @click="searchHandle()">搜索</el-button>
+                </el-form-item>
+                <el-form-item>
+                  <el-button @click="resetForm()">重置</el-button>
+                </el-form-item>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-form-item>
+              <el-button type="primary" @click="cerateHandle()">新增入库</el-button>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="gotoHandle()">批次入库</el-button>
+            </el-form-item>
+          </el-row>
+        </el-form>
+
+        <el-table
+          v-loading="loading"
+          :data="data"
+          element-loading-text="Loading"
+          :header-cell-style="{background:'rgba(242, 242, 242, 1)',borderColor:'rgba(242, 242, 242, 1);',textAlign:'center'}"
+          :cell-style="{'text-align':'center'}"
+          fit
+          highlight-current-row
+        >
+          <el-table-column label="设备SN">
+            <template slot-scope="scope">
+              {{ scope.row.sn }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="入库时间">
+            <template slot-scope="scope">
+              {{ scope.row.updateTime }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="电池类型" prop="deptId">
+            <template slot-scope="scope">
+              {{ scope.row.typeTitle}}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="PACK厂">
+            <template slot-scope="scope">
+              {{ scope.row.packTitle }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="批次编号">
+            <template slot-scope="scope">
+              {{ scope.row.batchNum }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="状态">
+            <template slot-scope="scope">
+              {{ scope.row.statusTitle }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="发送地">
+            <template slot-scope="scope">
+              {{ scope.row.receivedPlace }}
+            </template>
+          </el-table-column>
+
+          <el-table-column align="center" prop="updateTime" label="操作时间">
+            <template slot-scope="scope">
+              <span>{{ scope.row.updateTime }}</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column align="center" label="操作" width="180">
+            <template slot-scope="scope">
+              <el-button v-if="scope.row.checkStatus === 1" @click="edit(scope.row.id)" type="text">已通过</el-button>
+              <el-button v-if="scope.row.checkStatus === 0" @click="edit(scope.row.id)" type="text">未通过</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <el-pagination style="float: right; margin-top: 30px;" :current-page="listQuery.index" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.length" :total="total"
+          layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
+          @current-change="pageCurrentChangeHandle">
+        </el-pagination>
+      </el-tab-pane>
+    </el-tabs>  
 		<Create v-if="addVisible" ref="create" @refreshDataList="getDataList"></Create>
   </div>
 </template>
@@ -161,13 +406,18 @@ export default {
         {label: '全部', value: null},
         {label: '已通过', value: 1},
         {label: '未通过', value: 0}
-      ]
+      ],
+      activeName: 'first'
     }
   },
   created() {
     this.getDataList()
   },
   methods: {
+    //切换tab页
+    handleClick(tab) {
+      this.activeName = tab.name
+    },
     //搜索
     searchHandle() {
       this.listQuery.index = 1

src/views/sys/role/index.vue

@@ -250,6 +250,7 @@ export default {
           postJson('/api/v1/sys/role/save', this.Form).then(response => {
             if (response.code === 200) {
               that.fetchData()
+              that.visible = false
             }
           })
         }