manage_invoice_ui/src/views/platform/waybillmanagement/noinvoice.vue

<template>
  <div class="trueinvoice">
    <!-- 头部细节部分 -->
      <div class="title">
        <el-row>
          <el-col :span="24">
            <div class="top">
              <el-select v-model="companyName" filterable  placeholder="请选择公司名称">
                <el-option
                  v-for="item in companyList"
                  :key="item.companyName"
                  :label="item.companyName"
                  :value="item.companyName">
                </el-option>
              </el-select>
              <el-input  placeholder="运单编号" class="input-demo" v-model="billNum"></el-input>
              <el-input  placeholder="车牌号" class="input-demo" v-model="plateNumber"></el-input>
            </div>
          </el-col>
        </el-row>

<el-row>
          <el-col :span="24">
            <div class="top">
              <label style="margin-left: 1%;">是否历史运单:</label>
              <el-select v-model="hisFlag" placeholder="请选择">
                <el-option
                  v-for="item in optionone"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>

              <!-- <label style="margin-left: 1%;">运单状态:</label>
              <el-select v-model="status" placeholder="请选择"> -->
                <!-- <el-option></el-option> -->
            <!--     <el-option
                  v-for="item in option"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select> -->
            <!--   <el-input  placeholder="税号" class="theinput" v-model="taxPlayerCode"></el-input>
              <el-input  placeholder="运单状态" class="theinput" v-model="status"></el-input> -->
              <el-button type="success" style="margin-left: 1%;" @click="firstLoadData">查询</el-button>
              <el-button type="success" style="margin-left: 1%;" @click="makeInvoice" v-loading.fullscreen.lock="fullscreenLoading">开票</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="usertabletwo"
            :height="heightt"
            border
            tooltip-effect="dark"  @selection-change="handleSelectionChange">
            <el-table-column
              type="selection"
              width="55">
        </el-table-column>
          <el-table-column
            label="运单编号"
            prop="billNum"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="taxplayerCode"
            label="税号"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            label="车牌号码"
            prop="plateNum"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            label="车牌颜色"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="scope.row.plateColor == 0">蓝色</span>
              <span v-else-if="scope.row.plateColor == 1">黄色</span>
              <span v-else-if="scope.row.plateColor == 2">黑色</span>
              <span v-else-if="scope.row.plateColor == 3">白色</span>
              <span v-else-if="scope.row.plateColor == 4">渐变绿色</span>
              <span v-else-if="scope.row.plateColor == 5">黄绿渐变色</span>
              <span v-else-if="scope.row.plateColor == 6">蓝白渐变色</span>
              <span v-else-if="scope.row.plateColor == 9">未确定</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="startTime"
            label="运单开始时间"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="sourceAddr"
            label="运单开始地址"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="destAddr"
            label="运单目的地址"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="predictEndTime"
            label="运单预计完成时间"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="fee"
            label="运单费用(元)"
            show-overflow-tooltip>
            <template slot-scope="scope" show-overflow-tooltip>
                <span>{{scope.row.fee / 100}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="运单状态"
            show-overflow-tooltip>
            <template slot-scope="scope">
               <span v-if="scope.row.billwayStatus == 1" style="color: green">未结束</span>
              <span v-else-if="scope.row.billwayStatus == 2" style="color: green">开票中</span>
              <span v-else-if="scope.row.billwayStatus == 3" style="color: green">开票完成</span>
              <span v-else-if="scope.row.billwayStatus == 4" style="color: red">超时运单</span>
              </template>
          </el-table-column>
          </el-table>
        </template>

        <div class="blocks">
          <el-pagination
          @size-change="handleSize"
          @current-change="handleCurrent"
          :current-page="currenttwo"
          :page-sizes="[6, 8, 10]"
          :page-size="pagesizetwo"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totaltwo">
          </el-pagination>
        </div>


  </div>
</template>

<script>
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
export default{
  data() {
    return {

      loading: false,
      hisFlag: ``,
      billNum: ``,
      plateNumber: ``,
      batchNumber: ``,
      hightt: `0px`,
      billStartTime: ``,
      multipleSelection: [],
      billEndTime: ``,
      createStartTime: ``,
      createEndTime: ``,
      // taxPlayerCode: '',
      // status: '',
      currenttwo: 1,
      pagesizetwo: 8,
      totaltwo: 0,
      // batch: '',
      companyList: [],
      companyName: ``,
      usertabletwo: [],
      customerName: ``,
      optionone: [{
        value: `0`,
        label: `实时运单`
      }, {
        value: `1`,
        label: `历史运单`
      }]
    }
  },
  created() {
    this.heightt = tableHeight  // eslint-disable-line
    this.customerName = sessionStorage.getItem(`userName`)
    this.initCompanyList()
  },
  methods: {
    firstLoadData() {
      this.currenttwo = 1
      this.pagesizetwo = 8
      this.loadDataCar()
    },
    // 列表展示
    async loadDataCar() {
      const formData = new FormData()
      formData.append(`current`, this.currenttwo)
      formData.append(`size`, this.pagesizetwo)
      formData.append(`isSuccess`, 1)
      formData.append(`customerName`, this.customerName)
      formData.append(`companyName`, this.companyName)
      formData.append(`billNum`, this.billNum)
      formData.append(`billwayStatus`, 2)
      formData.append(`plateNumber`, this.plateNumber)
      formData.append(`hisFlag`, this.hisFlag)
      // formData.append('batchNumber', this.batchNumber);
      // formData.append('billStartTime', this.billStartTime);
      // formData.append('billEndTime', this.billEndTime);
      // formData.append('createStartTime', this.createStartTime);
      // formData.append('createEndTime', this.createEndTime);
      // formData.append('isSuccess', 1);
      const response = await this.$http.post(`noCar/findBillWay`, formData)
      if (response.data.code == 0) {
        this.loading = false
        this.usertabletwo = response.data.data.records
        this.totaltwo = response.data.data.total
      }
    },
    async initCompanyList() {
      const response = await this.$http.post(`lowerService/customeRecQueryList`, {'customerName': sessionStorage.getItem(`userName`)})
      if (response.data.code == 0) {
        this.companyList = response.data.data
      } if (this.companyList == null || typeof this.companyList == `undefined` || this.companyList == `` || this.companyList.length == 0) {
        this.companyList = [{'companyName': `.`}]
      }
      this.companyName = this.companyList[0][`companyName`]
      this.loadDataCar()
    },
    formartNum(wb) {
      var sheet = wb[`Sheets`][`Sheet1`]
      var replaceTemp = []

      for (var i in sheet) {
        if (sheet[i][`v`] == `运单费用(元)`) {
          replaceTemp.push(i.replace(/[0-9]/g, ``))
          continue
        }
        if (replaceTemp.includes(i.replace(/[0-9]/g, ``))) {
          sheet[i][`t`] = `n`
        }
      }
    },
    // 查看
    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 })
      this.formartNum(wb)
      /* 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
    },
    // 导出功能
    exportOut() {
      var url = `http://invoice.back.jkcredit.com/carFreeCarrierBill/billExport?&userId=${this.formUserList.userId}`

      window.location.href = url
    },
    handleSelectionChange(value) {
      this.multipleSelection = value
    },
    // 批量开票
    async makeInvoice() {
      const formData = new FormData()
      formData.append(`noCarWayBillStr`, JSON.stringify(this.multipleSelection))
      const response = await this.$http.post(`noCar/updateStatus`, formData)
      if (response.data.code == 0) {
        this.loadDataCar()
        this.$message({
          type: `success`,
          message: `更新成功`
        })
      } else {
        this.$message({
          type: `error`,
          message: `更新失败`
        })
      }
      // this.fullscreenLoading = true;
      // this.formList.userId = Number(this.formUserList.userId);
      // for(var i = 0; i < this.multipleSelection.length; i++) {
      //   this.formList.nums.push(this.multipleSelection[i].num);
      // }
      // const formData = new FormData();
      //   formData.append('userId', this.formList.userId);
      //   formData.append('nums', this.formList.nums);
      // const response = await this.$http.post(`numInvoice/nums`, formData);
      //   if (response.data.code == 0) {
      //     this.$message({
      //       type: 'success',
      //       message: '开票成功'
      //     })
      //     this.fullscreenLoading = false;
      //     this.loadDataCar();
      //     this.formList.nums = [];
      //   }else{
      //      this.fullscreenLoading = false;
      //     this.$message({
      //       type: 'error',
      //       message: '开票失败'
      //     })
      //   }
    },
    // 分页方法
    handleSize(val) {
      this.pagesizetwo = val
      this.loadDataCar()
    },
    handleCurrent(val) {
      this.currenttwo = val
      this.loadDataCar()
    }
  }
}
</script>

<style>
.trueinvoice {
  border: 1px solid #d9d9d9;
  border-radius: 10px;
}
.trueinvoice .upload-demo {
  display: inline-block;
}
.trueinvoice .title {
  font-size: 5px;
  margin-bottom: 20px;
}
.trueinvoice .top {
  padding-top: 20px;
  padding-left: 20px;
}
.trueinvoice .text {
  display: inline-block;
  color: #000;
  font-size: 16px ;
  margin-left: 1%;
}
.trueinvoice .tou {
  font-size: 20px;
  height: 30px;
  line-height: 30px;
  padding-top: 15px;
}
.trueinvoice .line {
  margin-top: 15px;
  margin-bottom: 15px;
  width: 100%;
  height: 2px;
  background-color: #d9d9d9;
}
.trueinvoice .theinput {
  display: inline-block;
  width: 20%;
}
.trueinvoice .styleType {
  margin-top: 20px;
  margin-bottom: 20px;
}
.trueinvoice .input-demo {
  display: inline-block;
  width: 20%;
  margin-left: 1%;
}
.trueinvoice .block {
  font-size: 5px;
  text-align: center;
  margin-top: 15px;
  margin-bottom: 20px;
}
.trueinvoice .blocks {
  font-size: 5px;
  text-align: center;
  margin-top: 20px;
  padding-bottom: 20px;
}

</style>