添加导入箱动态两个按钮

src/views/kaihe/containerNews/historyBoxNews/index.vue

@@ -78,6 +78,21 @@
     </el-form>
 
     <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-upload
+          :action="uploadUrl"
+          :auto-upload="true"
+          accept=".xls,.xlsx"
+          :on-success="(res, file) => { importBoxDynamics( res, file); }"
+          :headers="headers"
+          :show-file-list="false"
+        >
+          <el-button size="mini" type="primary" icon="el-icon-plus">导入箱动态</el-button>
+        </el-upload>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button size="mini" type="primary" icon="el-icon-download" @click="downloadBoxTemplate">下载箱动态模板</el-button>
+      </el-col>
       <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
       <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
       <div class="tabSetting">
@@ -315,6 +330,99 @@
       @pagination="getList"
     />
 
+<!--    导入箱动态弹窗-->
+    <el-dialog
+      title="导入箱动态"
+      :visible.sync="importDynamicsopen"
+      :show-close="false"
+      width="80%">
+      <el-table
+        :data="tableData"
+        style="width: 100%">
+        <el-table-column
+          prop="opctnstatusName"
+          label="箱动态"
+          :show-overflow-tooltip="true"
+          align="center">
+        </el-table-column>
+        <el-table-column
+          prop="fNo"
+          align="center"
+          :show-overflow-tooltip="true"
+          label="箱号">
+        </el-table-column>
+        <el-table-column
+          prop="updateEFName"
+          align="center"
+          :show-overflow-tooltip="true"
+          label="空重">
+        </el-table-column>
+        <el-table-column
+          prop="fUpdatetime"
+          align="center"
+          :show-overflow-tooltip="true"
+          label="动态日期">
+        </el-table-column>
+        <el-table-column
+          prop="fVsl"
+          align="center"
+          :show-overflow-tooltip="true"
+          label="船名">
+        </el-table-column>
+        <el-table-column
+          prop="fVoy"
+          align="center"
+          :show-overflow-tooltip="true"
+          label="航次">
+        </el-table-column>
+        <el-table-column
+          prop="fBoxWeight"
+          align="center"
+          :show-overflow-tooltip="true"
+          label="重量">
+        </el-table-column>
+        <el-table-column
+          prop="addressName"
+          align="center"
+          :show-overflow-tooltip="true"
+          label="堆放地点">
+        </el-table-column>
+        <el-table-column
+          prop="fMblno"
+          align="center"
+          :show-overflow-tooltip="true"
+          label="提单号">
+        </el-table-column>
+        <el-table-column
+          prop="fSealno"
+          align="center"
+          :show-overflow-tooltip="true"
+          label="铅封号">
+        </el-table-column>
+        <el-table-column
+          prop="cntrstatusName"
+          align="center"
+          :show-overflow-tooltip="true"
+          label="是否箱损">
+        </el-table-column>
+        <el-table-column
+          prop="remark"
+          align="center"
+          :show-overflow-tooltip="true"
+          label="箱损描述">
+        </el-table-column>
+        <el-table-column
+          prop="portName"
+          align="center"
+          :show-overflow-tooltip="true"
+          label="地点类型">
+        </el-table-column>
+      </el-table>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="importDynamicsopen = false">取 消</el-button>
+        <el-button type="primary" @click="confirmLeadingIn">确 定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
@@ -324,6 +432,9 @@ import Cookies from 'js-cookie'
 import { addSet, resetModule, select } from '@/api/system/set'
 import draggable from "vuedraggable";
 import Vue from 'vue'
+import { getToken } from '@/utils/auth'
+import {leadingIn,downloadBox} from '@/api/kaihe/containerNews/boxInformation'
+
 Vue.directive('dialogDrag', {
   bind(el, binding, vnode, oldVnode) {
     const dialogHeaderEl = el.querySelector('.el-dialog__header')
@@ -526,8 +637,14 @@ export default {
         fUpdateaddress:null,
         cLoadDate:null,
         fUpdateef:null,
-        fCntrstatus:null
+        fCntrstatus:null,
       },
+      uploadUrl: process.env.VUE_APP_BASE_API + '/shipping/cntrno/importAirForceStation', // 导入箱动态服务器地址
+      headers: {
+        Authorization: 'Bearer ' + getToken()
+      },
+      importDynamicsopen:false,
+      tableData: [],
     };
   },
   created() {
@@ -679,7 +796,9 @@ export default {
         fUpdateaddress:null,
         cLoadDate:null,
         fUpdateef:null,
-        fCntrstatus:null
+        fCntrstatus:null,
+        pageNum: 1,
+        pageSize: 10,
       },
         this.resetForm("queryForm");
       this.handleQuery();
@@ -690,7 +809,31 @@ export default {
       this.single = selection.length!==1
       this.multiple = !selection.length
     },
-
+    importBoxDynamics(file, fileList){
+      console.log(file)
+      if (file.code === 200){
+        this.importDynamicsopen = true
+        this.tableData = file.data
+      }else if (file.code === 500) {
+        this.$message.error(file.msg);
+      }
+    },
+    //确认导入箱动态
+    confirmLeadingIn(){
+      leadingIn({tCntrno:this.tableData}).then(res=>{
+        this.importDynamicsopen = false
+        this.$message({
+          type: 'success',
+          message: '操作成功!'
+        })
+      })
+    },
+    // 下载箱动态模板
+    downloadBoxTemplate(){
+      downloadBox().then(res=>{
+        this.download(res.msg)
+      })
+    },
   }
 };
 </script>