前端代码合并提交

src/views/platform/waybill/waybillFile.vue

@@ -0,0 +1,316 @@
+<template>
+  <div class="waybill">
+    <!-- 头部细节部分 -->
+      <div class="title">
+        <el-row>
+          <el-col :span="24">
+            <div class="top">
+               <span style="margin-top: 10px;" >导入文件：</span>
+              <el-upload
+                class="upload-demo"
+                ref="upload"
+                action="http://invoice.back.jkcredit.com/dishonestuser/upload"
+                :on-preview="handlePreview"
+                :on-remove="handleRemove"
+                :on-change="handleSuccess"
+                :auto-upload="false">
+                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
+                <el-button style="margin-left: 10px;" size="small" type="success" @click="batchUpload" v-loading.fullscreen.lock="fullscreenLoading">提交</el-button>
+              </el-upload>
+
+            </div>
+          </el-col>
+        </el-row>
+
+        <el-row>
+          <el-col :span="24">
+            <div class="top">
+              <el-input  placeholder="批次号" class="input-demo" v-model="batchNum"></el-input>
+               <el-input  placeholder="运单号" class="input-demo" v-model="wayBillNum"></el-input>
+              <el-button type="success" style="margin-left: 1%;" @click="firstLoadData">查询</el-button>
+              <!-- <el-button type="info" style="margin-left: 1%;">重置</el-button> -->
+            </div>
+          </el-col>
+        </el-row>
+
+      </div>
+    <!-- 头部细节部分结束 -->
+    <!-- 表格部分 -->
+      <template>
+        <el-table
+         class="table"
+          v-loading="loading"
+          ref="multipleTable"
+          :data="usertable"
+          :height="heightt"
+          border
+          tooltip-effect="dark">
+          <el-table-column
+            prop="batchNum"
+            label="批次号"
+            show-overflow-tooltip>
+          </el-table-column>
+           <el-table-column
+            prop="wayBillNum"
+            label="文件名称"
+            show-overflow-tooltip>
+          </el-table-column>
+          <el-table-column
+            label="创建时间"
+            show-overflow-tooltip>
+            <template slot-scope="scope" show-overflow-tooltip>
+              <span>{{scope.row.updateTime | fmtDate}}</span>
+            </template>
+          </el-table-column>
+        </el-table>
+      </template>
+
+    <!-- 分页 -->
+      <div class="block">
+        <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="current"
+        :page-sizes="[6, 8, 10]"
+        :page-size="pagesize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total">
+        </el-pagination>
+      </div>
+
+  </div>
+</template>
+
+<script>
+import FileSaver from 'file-saver'
+import XLSX from 'xlsx'
+export default{
+  data() {
+    return {
+      loading: false,
+      fullscreenLoading: false,
+      customerName: ``,
+      companyName: ``,
+      file: '',
+      batchNum: '',
+      wayBillNum: ``,
+      hightt: `0px`,
+      status: ``,
+      addList: false,
+      success: ``,
+      current: 1,
+      pagesize: 8,
+      total: 0,
+      currenttwo: 1,
+      pagesizetwo: 8,
+      totaltwo: 0
+    }
+  },
+  created() {
+    this.heightt = tableHeight // eslint-disable-line
+    this.customerName = sessionStorage.getItem(`userName`)
+    this.loadData()
+  },
+  methods: {
+    firstLoadData() {
+      this.current = 1
+      this.pagesize = 8
+      this.loadData()
+    },
+    // 列表展示
+    async loadData() {
+      const formData = new FormData()
+      formData.append(`current`, this.current)
+      formData.append(`size`, this.pagesize)
+      formData.append(`customerId`, this.customerName)
+      formData.append(`batchNum`, this.batchNum)
+      formData.append('wayBillNum', this.wayBillNum)
+      const response = await this.$http.post(`noCar/findBatchFileList`, formData)
+      if (response.data.code == 0) {
+        this.loading = false
+        this.usertable = response.data.data.records
+        this.total = response.data.data.total
+      }else{
+         this.$message.error(response.data.msg)
+      }
+    },
+    // 批量上传模板信息
+    async batchUpload() {
+      const isLt50M = this.file.size / 1024 / 1024 < 500
+      let extName = this.file.name.substring(this.file.name.lastIndexOf(`.`)).toLowerCase()
+      let AllUpExt = `.zip`
+      if (extName != AllUpExt) {
+        this.$message.error(`格式错误！当前只支持zip压缩文件`)
+        return false
+      }
+
+      if (!isLt50M) {
+        this.$message.error(`上传文件大小不能超过500MB!`)
+        return false
+      }
+      const loading = this.$loading({
+        lock: true,
+        text: `系统正在努力接收中，过程大概需要几分钟的时间，请您耐心等待...`,
+        spinner: `el-icon-loading`,
+        background: `rgba(0, 0, 0, 0.7)`
+      })
+      const formData = new FormData()
+      formData.append(`customerName`, this.customerName)
+      formData.append(`file`, this.file)
+      const response = await this.$http.post(`noCar/batchImprotBillWayFile`, formData)
+      var {data: { code, msg, data }} = response
+      if (code == 0 && msg == `success`) {
+        this.loadData()
+        loading.close()
+        this.$message.success(`上传成功`)
+      } else if (code == 1 && msg == null && data == null) {
+        loading.close()
+        this.$message.error(`数据存在错误`)
+      } else {
+        loading.close()
+        this.$message.error(msg)
+      }
+    },
+    // 查看批次数据
+    async checkLook(id) {
+      this.addList = true
+      this.batchNumberQ = id
+      this.loadDataCar()
+    },
+    handleEditDialogClose() {
+      this.addList = false
+    },
+    twoLoadData() {
+      this.currenttwo = 1
+      this.pagesizetwo = 8
+      this.loadDataCar()
+    },
+    async exportExcel() {
+      const loading = this.$loading({
+        lock: true,
+        text: `系统正在努力接收中，过程大概需要几分钟的时间，请您耐心等待...`,
+        spinner: `el-icon-loading`,
+        background: `rgba(0, 0, 0, 0.7)`
+      })
+      let curr = this.currenttwo
+      let pagesize1 = this.pagesizetwo
+      this.currenttwo = 1
+      this.pagesizetwo = this.totaltwo
+      await this.loadDataCar()
+      // 设置当前日期
+      let time = new Date()
+      let year = time.getFullYear()
+      let month = time.getMonth() + 1
+      let day = time.getDate()
+      let name = `实时运单上传列表_` + year + `` + month + `` + day
+      /* generate workbook object from table */
+      //  .table要导出的是哪一个表格
+      var wb = XLSX.utils.table_to_book(document.querySelector(`.ttt`), { raw: true })
+      /* get binary string as output */
+      var wbout = XLSX.write(wb, {
+        bookType: `xlsx`,
+        bookSST: true,
+        type: `array`
+      })
+      try {
+        //  name+'.xlsx'表示导出的excel表格名字
+        FileSaver.saveAs(
+          new Blob([wbout], { type: `application/octet-stream` }),
+          name + `.xlsx`
+        )
+      } catch (e) {
+      }
+      this.currenttwo = curr
+      this.pagesizetwo = pagesize1
+      this.loadDataCar()
+      loading.close()
+      return wbout
+    },
+    handleRemove(file, fileList) {
+    },
+
+    handlePreview(file) {
+    },
+    handleSuccess(a) {
+      this.file = a.raw
+    },
+    // 分页方法
+    handleSizeChange(val) {
+      this.pagesize = val
+      this.loadData()
+    },
+    handleCurrentChange(val) {
+      this.current = val
+      this.loadData()
+    }
+  }
+}
+</script>
+
+<style>
+.waybill {
+  border: 1px solid #d9d9d9;
+  border-radius: 10px;
+}
+.waybill .upload-demo {
+  display: inline-block;
+}
+.waybill .title {
+  font-size: 5px;
+  margin-bottom: 20px;
+}
+.waybill .top {
+  padding-top: 20px;
+  padding-left: 20px;
+}
+.waybill .text {
+  display: inline-block;
+  color: #000;
+  font-size: 16px ;
+  margin-left: 1%;
+}
+.waybill .tou {
+  font-size: 20px;
+  height: 30px;
+  line-height: 30px;
+  padding-top: 15px;
+}
+.waybill .line {
+  margin-top: 15px;
+  margin-bottom: 15px;
+  width: 100%;
+  height: 2px;
+  background-color: #d9d9d9;
+}
+.waybill .theinput {
+  display: inline-block;
+  width: 20%;
+}
+.waybill .styleType {
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+.waybill .input-demo {
+  display: inline-block;
+  width: 20%;
+  margin-left: 1%;
+}
+.waybill .block {
+  font-size: 5px;
+  text-align: center;
+  margin-top: 15px;
+  margin-bottom: 20px;
+}
+.waybill .blocks {
+  font-size: 5px;
+  text-align: center;
+  margin-top: 20px;
+  padding-bottom: 20px;
+}
+.waybill .el-dialog {
+  width: 90%;
+}
+.waybill .el-dialog__header, .el-dialog__body {
+  padding: 0 20px;
+}
+</style>