invoice-hub-vue/src/views/meter/waybill.vue

<template>
  <div class="waybill">
    <el-card>
    <!-- 头部细节部分 -->
    <div class="title">
      <el-row>
          <el-col :span="24">
            <div class="top">
              <el-input  placeholder="appKey" class="input-demo" v-model="appKey"></el-input>
              <el-input  placeholder="运单编号" class="input-demo" v-model="num"></el-input>
              <el-input  placeholder="车牌号" class="input-demo" v-model="plateNumber"></el-input>
              <label style="margin-left: 1%;">运单类型:</label>
              <el-select v-model="isHistory" placeholder="请选择">
                <el-option
                  v-for="item in optionone"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
          </el-col>
        </el-row>

         <el-row>
          <el-col :span="24">
            <div class="top">
              <label style="margin-left: 1%;">运单状态:</label>
              <el-select v-model="status" placeholder="请选择">
                <el-option
                  v-for="item in optiontwo"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>

              <el-button type="success" style="margin-left: 1%;" @click="queryLook">查询</el-button>
            </div>
          </el-col>
        </el-row>
    </div>
    <!-- 头部细节部分结束 -->
    <!-- 表格部分 -->
      <template>
        <el-table
          v-loading="loading"
          ref="multipleTable"
          :data="roletable"
          border
          tooltip-effect="dark"
          style="width: 100%">
          <el-table-column
            label="序号"
            type="index"
            width="40"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="num"
            label="运单编号"
            show-overflow-tooltip>
          </el-table-column>
           <el-table-column
            prop="plateNumber"
            label="车牌号"
            show-overflow-tooltip>
          </el-table-column>
           <el-table-column
            prop="status"
            label="运单状态"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="scope.row.status == 1">未结束</span>
              <span v-if="scope.row.status == 2">已结束运单</span>
              <span v-if="scope.row.status == 3">已开发票</span>
              <span v-if="scope.row.status == 4">开票中</span>
              <span v-if="scope.row.status == 9">状态错误</span>
            </template>
          </el-table-column>
           <el-table-column
            prop="isHistory"
            label="运单类型"
            show-overflow-tooltip>
          </el-table-column>

          <el-table-column
            label="开始运单创建时间"
            show-overflow-tooltip>
            <template slot-scope="scope" show-overflow-tooltip>
              <span>{{scope.row.startBillCreateTime | fmtDate}}</span>
            </template>
          </el-table-column>

          <el-table-column
            prop="realDestAddr"
            label="运单实际目的地"
            show-overflow-tooltip>
          </el-table-column>

          <el-table-column
            label="运单结束创建时间"
            show-overflow-tooltip>
            <template slot-scope="scope" show-overflow-tooltip>
              <span>{{scope.row.endBillCreateTime | fmtDate}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="appKey"
            label="appKey"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="company"
            label="公司名称"
            show-overflow-tooltip>
          </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>

    </el-card>
  </div>

</template>

<script type="text/javascript">
export default{
  data() {
    return {
      loading: true,
      appKey: '',
      num: '',
      status: '',
      isHistory: '',
      plateNumber: '',
      roletable: [],
      optionone: [{
          value: '1',
          label: '实时运单'
        }, {
          value: '2',
          label: '历史运单'
      }],
      optiontwo: [{
          value: '1',
          label: '未结束'
        }, {
          value: '2',
          label: '已结束运单'
        }, {
          value: '3',
          label: '已开发票'
        }, {
          value: '4',
          label: '开票中'
        }, {
          value: '9',
          label: '状态错误'
        }],
      formList: {
        "roleId": "",
        "permissionIds": []
      },
      current: 1,
      pagesize: 10,
      total: 0,
    }
  },
  created() {
    this.loadData();
  },
  methods: {
    // 请求查询数据
    async loadData() {
      const response = await this.$http.get(`app/billRecord?&current=${this.current}&size=${this.pagesize}`);
      if (response.data.code === 1) {
        this.loading = false;
        this.roletable = response.data.responseData.records;
        this.total = response.data.responseData.total;
      }
    },
    //查询
    async queryLook() {
      const response = await this.$http.get(`app/billRecord?&current=${this.current}&size=${this.pagesize}&appKey=${this.appKey}&num=${this.num}&status=${this.status}&isHistory=${this.isHistory}&plateNumber=${this.plateNumber}`);
      if (response.data.code === 1) {
        this.loading = false;
        this.roletable = response.data.data.records;
        this.total = response.data.data.total;
      }
    },
    // 分页方法
    handleSizeChange(val) {
      this.pagesize = val;
      if(this.appKey !== '' || this.num !== '' || this.status !== '' || this.isHistory !== '' || this.plateNumber !== '') {
        this.queryLook();
      }else{
        this.loadData();
      };
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.current = val;
      if(this.appKey !== '' || this.num !== '' || this.status !== '' || this.isHistory !== '' || this.plateNumber !== '') {
        this.queryLook();
      }else{
        this.loadData();
      };
      console.log(`当前页: ${val}`);
    },
  }
};
</script>

<style scoped>
.waybill {
  border: 1px solid #d9d9d9;
  border-radius: 10px;
}
.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 .input-demo {
  display: inline-block;
  width: 20%;
  margin-left: 1%;
}
.waybill .block {
  font-size: 5px;
  text-align: center;
  margin-top: 25px;
  margin-bottom: 25px;
}
.waybill .el-dialog {
  width: 60%;
}
.waybill .el-dialog__header, .el-dialog__body {
  padding: 0 20px;
}
.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 .xinxi {
  text-align: center;
  margin: 15px auto;
  font-size: 18px;
}
</style>