From 67642928b4604ac6e63644b1bd32b42fbceb0263 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E9=91=AB?= <zhangxin@zhehekeji.com>
Date: Mon, 4 Jan 2021 17:11:17 +0800
Subject: [PATCH] =?UTF-8?q?=E7=90=83=E6=9C=BAIO=E8=A1=A8=E9=85=8D=E7=BD=AE?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=A2=9E=EF=BC=88=E5=8C=85=E5=90=ABExcel?=
 =?UTF-8?q?=E6=96=87=E4=BB=B6=E5=AF=BC=E5=85=A5=EF=BC=89=E3=80=81=E5=88=A0?=
 =?UTF-8?q?=E3=80=81=E6=94=B9=E3=80=81=E6=9F=A5=E6=8E=A5=E5=8F=A3=E8=81=94?=
 =?UTF-8?q?=E8=B0=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/http/http-api.js           | 22 ++++++++++
 src/api/importExcel.js             |  1 +
 src/plugins/antd.js                |  6 ++-
 src/plugins/axios/axios.js         |  2 +
 src/plugins/axios/index.js         |  1 -
 src/views/cameraManage/index.vue   |  2 +-
 src/views/cameraManage/ioModel.vue |  8 ++--
 src/views/cameraManage/ioTable.vue | 70 ++++++++++++++++++++++--------
 src/views/cameraManage/model.vue   |  1 -
 9 files changed, 87 insertions(+), 26 deletions(-)
 create mode 100644 src/api/importExcel.js

diff --git a/src/api/http/http-api.js b/src/api/http/http-api.js
index 2a99324..d60ad7b 100644
--- a/src/api/http/http-api.js
+++ b/src/api/http/http-api.js
@@ -29,6 +29,7 @@ export default  {
     //     url: "/street",
     //     name: "删除巷道"
     // },
+    //注释：所有用到删除的接口都需要拼接变量id，所以请求方式采用了挂载在原型链上的$axios进行请求，详细请看具体页面的$axios请求
     getCameraList: {
         method: "POST",
         url: "/camera/page",
@@ -49,6 +50,27 @@ export default  {
         url: "/lychee/stream/push",
         name: "获取channel字符集"
     },
+    getCameraIoList: {
+        method: "POST",
+        url: "/camera/config/page",
+        name: "球机IO配置分页列表"
+    },
+    addCameraIo: {
+        method: "POST",
+        url: "/camera/config",
+        name: "球机IO指令配置新增"
+    },
+    editCameraIo: {
+        method: "PUT",
+        url: "/camera/config",
+        name: "球机IO指令配置编辑"
+    },
+    // cameraIoImport: {
+    //     method: "POST",
+    //     url: "/camera/config/import",
+    //     name: "球机IO导入"
+    // },
+    //注释:导出接口路径已采用ant design vue的upload组件action属性动态定义
     queryList: {
         url: '/order/list',
         name: '查询',
diff --git a/src/api/importExcel.js b/src/api/importExcel.js
new file mode 100644
index 0000000..112bd85
--- /dev/null
+++ b/src/api/importExcel.js
@@ -0,0 +1 @@
+export const importExcelUrl = process.env.VUE_APP_API_URL + "/camera/config/import";
diff --git a/src/plugins/antd.js b/src/plugins/antd.js
index 96f26a2..424cd71 100644
--- a/src/plugins/antd.js
+++ b/src/plugins/antd.js
@@ -25,7 +25,8 @@ import {
     Tag,
     Drawer,
     Divider,
-    DatePicker
+    DatePicker,
+    Upload,
 } from "ant-design-vue";
 Vue.use(Layout);
 Vue.use(ConfigProvider);
@@ -51,7 +52,8 @@ Vue.use(Tooltip)
 Vue.use(Tag)
 Vue.use(Drawer)
 Vue.use(Divider)
-Vue.use(DatePicker )
+Vue.use(DatePicker)
+Vue.use(Upload)
 Vue.prototype.$message = message;
 Vue.prototype.$info = Modal.info;
 Vue.prototype.$success = Modal.success;
diff --git a/src/plugins/axios/axios.js b/src/plugins/axios/axios.js
index 9c7c175..aa5d17f 100644
--- a/src/plugins/axios/axios.js
+++ b/src/plugins/axios/axios.js
@@ -13,6 +13,8 @@ window.once = 0
 instance.interceptors.request.use((config) => {
     const reqObj = config;
     // 在发送请求之前做些什么   -- 路径参数拼接
+    console.log('xxxxxxxxxx')
+    console.log(reqObj)
     const reg = /\{(.+?)\}/g;
     if (reg.test(reqObj.url)) {
         reqObj.url = reqObj.url.replace(reg, Object.values(reqObj.path)[0]);
diff --git a/src/plugins/axios/index.js b/src/plugins/axios/index.js
index c107685..c438f74 100644
--- a/src/plugins/axios/index.js
+++ b/src/plugins/axios/index.js
@@ -30,5 +30,4 @@ apiAll.keys().map((key) => {
     console.log('moduleApis ', moduleApis)
     return trans(moduleApis[name]);
 });
-
 export default moduleApis;
diff --git a/src/views/cameraManage/index.vue b/src/views/cameraManage/index.vue
index 5f320de..ac4731a 100644
--- a/src/views/cameraManage/index.vue
+++ b/src/views/cameraManage/index.vue
@@ -147,7 +147,7 @@ export default {
             })
         },
         goIo(){
-            this.$router.push({ name: "ioTable" });
+            this.$router.push({ name: "ioTable"});
         }
     },
     components:{
diff --git a/src/views/cameraManage/ioModel.vue b/src/views/cameraManage/ioModel.vue
index 41f33ab..9294f59 100644
--- a/src/views/cameraManage/ioModel.vue
+++ b/src/views/cameraManage/ioModel.vue
@@ -90,24 +90,24 @@ export default {
                     if (!err) {
                         console.log(this.title)
                         if(this.type=='add'){
-                            this.$api.httpApi.addCamera({
+                            this.$api.httpApi.addCameraIo({
                                 data:values
                             }).then(res => {
                                 if(res.code==200){
                                     this.$emit('sure',false)
-                                    this.$message.success('新增球机成功');
+                                    this.$message.success('新增IO指令成功');
                                 }
                             }).catch(err => {
 
                             });
                         }else if(this.type=='edit'){
                             values.id = this.id
-                            this.$api.httpApi.editCamera({
+                            this.$api.httpApi.editCameraIo({
                                 data:values
                             }).then(res => {
                                 if(res.code==200){
                                     this.$emit('sure',false)
-                                    this.$message.success('编辑球机成功');
+                                    this.$message.success('编辑IO指令成功');
                                 }
                             }).catch(err => {
 
diff --git a/src/views/cameraManage/ioTable.vue b/src/views/cameraManage/ioTable.vue
index 57472dc..65ee7ba 100644
--- a/src/views/cameraManage/ioTable.vue
+++ b/src/views/cameraManage/ioTable.vue
@@ -4,16 +4,26 @@
             <a-button type="primary" class="add" @click="showModel('add','')">
                 新增
             </a-button>
-            <a-button type="primary" class="plc" @click="goIo">
-                导入
-            </a-button>
+            <a-upload
+                name="file"
+                :multiple="true"
+                accept=".xlsx"
+                :action="uploadProps.action"
+                :showUploadList = 'false'
+                @change="handleChange"
+                ref="table"
+            >
+                <a-button type="primary" class="plc" @click="goIo">
+                    导入
+                </a-button>
+            </a-upload>
         </div>
         <a-table
             :columns="columns"
             :row-key="record => record.id"
             :data-source="data"
             :pagination="pagination"
-            @change="handleGetCameraList"
+            @change="handleGetCameraIoList"
         >
           <span slot="action" slot-scope="text, record">
           <a-divider type="vertical"/>
@@ -42,14 +52,20 @@
 
 <script>
 import Model from "./ioModel.vue"
+import { importExcelUrl } from "@/api/importExcel";
 const columns = [
     {
-        title: 'ID',
-        dataIndex: 'name',
+        title: '序号',
+        // dataIndex: 'id',
+        customRender: (text, record, index) => {
+            return (
+                (record.pageNumber - 1) * 10 + index + 1
+            )
+        }
     },
     {
         title: 'IO指令',
-        dataIndex: 'ip',
+        dataIndex: 'name',
     },
     {
         title: '修改时间',
@@ -69,6 +85,7 @@ export default {
             data: [],
             pagination:{
                 total:0,
+                current:1,
                 defaultPageSize:10, // 默认每页显示数量
                 showTotal: total => `共 ${total} 条数据`, // 显示总数
                 showSizeChanger:true, // 显示可改变每页数量
@@ -79,14 +96,30 @@ export default {
             columns,
             visible:false,
             modelType:'',
-            modelData:[]
+            modelData:[],
         };
     },
+    computed:{
+        uploadProps() {
+            return {
+                action: importExcelUrl//上传Excel文件的路径
+            }
+        }
+    },
     mounted() {
-        this.handleGetCameraList()
+        this.handleGetCameraIoList()
     },
     methods: {
-        handleGetCameraList(pagination) {
+        handleChange(data) {
+            console.log(data)
+            if (data.file.status == "done") { // 导入表格之后成功的回调
+                this.$message.success(data.file.response.message)
+                this.handleGetCameraIoList();
+            } else if(data.file.status == 'error'){ // 导入表格之后失败的回调
+                this.$message.error(data.file.response.message)
+            }
+        },
+        handleGetCameraIoList(pagination) {
             console.log(pagination)
             if(pagination){
                 this.pagination.current = pagination.current;
@@ -97,16 +130,19 @@ export default {
             this.request();
         },
         request(){
-            this.$api.httpApi.getCameraList({
+            this.$api.httpApi.getCameraIoList({
                 data: {
-                    pageNum:this.pageNum,
-                    pageSize:this.pageSize,
+                    page:this.pageNum,
+                    size:this.pageSize,
                 }
             }).then(res => {
                 const pagination = { ...this.pagination };
                 pagination.total = res.data.total;
                 this.data = res.data.list;
                 this.pagination = pagination;
+                res.data.list.forEach((value,index) => {
+                    value.pageNumber = this.pagination.current
+                });
             }).catch(err => {
 
             });
@@ -119,7 +155,7 @@ export default {
         },
         submit(visible){
             this.visible = visible
-            this.handleGetCameraList()
+            this.handleGetCameraIoList()
         },
         closeModel(visible,data){
             this.visible = visible
@@ -128,12 +164,12 @@ export default {
         delDosage(data){
             console.log(data.id)
             var id=data.id
-            this.$axios.delete('/camera/'+id, {
+            this.$axios.delete('/camera/config/'+id, {
                 data: {}
             }).then(res => {
                 if(res.code==200){
-                    this.$message.success('删除球机成功');
-                    this.handleGetCameraList()
+                    this.$message.success('删除球机IO成功');
+                    this.handleGetCameraIoList()
                 }
             }).catch(err => {
 
diff --git a/src/views/cameraManage/model.vue b/src/views/cameraManage/model.vue
index 3fd0213..bee13a1 100644
--- a/src/views/cameraManage/model.vue
+++ b/src/views/cameraManage/model.vue
@@ -145,7 +145,6 @@ export default {
             id:'',
             mdata:[],
 
-
             zoomSubUrl:require('@/assets/sub-icon.png'),
             zoomAddUrl:require('@/assets/add-icon.png'),
             focusSubUrl:require('@/assets/sub-icon.png'),