球机IO表配置数据增（包含Excel文件导入）、删、改、查接口联调

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: '查询',

src/api/importExcel.js

@@ -0,0 +1 @@
+export const importExcelUrl = process.env.VUE_APP_API_URL + "/camera/config/import";

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;

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]);

src/plugins/axios/index.js

@@ -30,5 +30,4 @@ apiAll.keys().map((key) => {
     console.log('moduleApis ', moduleApis)
     return trans(moduleApis[name]);
 });
-
 export default moduleApis;

src/views/cameraManage/index.vue

@@ -147,7 +147,7 @@ export default {
             })
         },
         goIo(){
-            this.$router.push({ name: "ioTable" });
+            this.$router.push({ name: "ioTable"});
         }
     },
     components:{

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 => {
 

src/views/cameraManage/ioTable.vue

@@ -4,16 +4,26 @@
             <a-button type="primary" class="add" @click="showModel('add','')">
                 新增
             </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',
+        title: '序号',
-        dataIndex: 'name',
+        // 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,
+                    page:this.pageNum,
-                    pageSize:this.pageSize,
+                    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.$message.success('删除球机IO成功');
-                    this.handleGetCameraList()
+                    this.handleGetCameraIoList()
                 }
             }).catch(err => {
 

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'),