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

<template>
  <div class="waybill">
    <el-card>
    <!-- 头部细节部分 -->
    <div class="title">
      <el-row class="bottom">
        <el-col :span="24">
          <div class="grid-content bg-purple-dark">
            <!-- <el-button type="primary" @click="addRoleList = true">新增</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>
          </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,
      roletable: [],
      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;
      }
    },


    // 分页方法
    handleSizeChange(val) {
      this.pagesize = val;
      this.loadData();
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.current = val;
      this.loadData();
      console.log(`当前页: ${val}`);
    },
  }
};
</script>

<style scoped>
.waybill .title{
  font-size: 5px;
  margin-bottom: 20px;
}
.waybill .text {
  font-size: 14px;
  display: inline-block;
}
.waybill input {
  margin-left: 10px;
  margin-right: 10px;
  width: 150px;
}
.waybill select {
  border-radius: 3px;
  width: 150px;
}
.waybill .middle {
  margin-top: 20px;
  margin-bottom:20px;
}
.waybill .bottom {
  margin-bottom: 20px;
}
.waybill .el-button--primary {
  background-color: #5885f7 !important;
  border-color: #5885f7 !important;
}
.waybill .el-button {
  padding: 4px 20px !important;
}
.waybill .block {
  font-size: 5px;
  text-align: center;
  margin-top: 15px;
}
</style>