页面模板

<template>
  <el-card shadow="always" class="good-wrapper">
    <el-form :inline="true" :model="queryObj" label-width="80px">
      <el-row :gutter="20">
        <el-col span="8">
          <el-form-item label="配送员:">
            <el-input v-model="queryObj.bcbh" placeholder="请输入班次编号" />
          </el-form-item>
        </el-col>
        <el-col span="8">
          <el-form-item label="配送门店:">
            <el-select v-model="queryObj.region" placeholder="请选择活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col span="8">
          <el-form-item label="结清状态:">
            <el-select v-model="queryObj.region" placeholder="请选择活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col span="8">
          <el-form-item label="月份:">
            <el-input v-model="queryObj.bcbh" placeholder="请输入班次编号" />
          </el-form-item>
        </el-col>
        <el-col span="8">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" :loading="queryLoading" @click="inquiry">查询</el-button>
            <el-button class="cancel" icon="el-icon-refresh-right" :loading="resetLoading" @click="reset">重 置</el-button>
          </el-form-item>
        </el-col>
        <el-col span="8"></el-col>
      </el-row>

      <el-row type="flex" class="row-bg">
        <el-button size="small">导出</el-button>
        <el-button size="small" type="primary">结清</el-button>
        <el-button size="small" type="primary">撤销</el-button>
      </el-row>
    </el-form>

    <Paging :current-page="queryObj.pageNum" :page-size="queryObj.pageSize" :total="total" :total-page="totalPage" :page-sizes="pageSizes" @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange"></Paging>
  </el-card>
</template>

<script>
import { filterInquiryEmpty } from "@/utils/util"
import { commissionSettle } from "@/api/dataReport"
export default {
  data () {
    return {
      total: 0,
      totalPage: 0,
      pageSizes: [10, 20, 30, 40],
      tableLoading: false,
      queryLoading: false,
      resetLoading: false,
      tableData: [],
      queryObj: {
        employeeName: '',
        statisticsMonth: '',
        status: '',
        storeId: '',
        merchantIds: '',
        pageNum: 1,
        pageSize: 10
      },
    }
  },
  created () {
    this.getCommissionSettleList()
  },
  methods: {
    handleSizeChange (val) {
      this.queryObj.pageSize = val
      this.getCommissionSettleList()
    },
    handleCurrentChange (val) {
      this.queryObj.pageNum = val
      this.getCommissionSettleList()
    },
    async getCommissionSettleList () {
      try {
        const subObj = filterInquiryEmpty(this.queryObj)
        const res = await commissionSettle(subObj)
        if (res.code === 200) {
          let { list, total, totalPage } = res.data || {}
          this.total = total
          this.totalPage = totalPage
          this.tableData = list
        } else {
          this.$message.error(res.message)
        }
      } catch (error) {
        console.log(error)
      }
      this.closeLoading()
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    closeLoading () {
      this.queryLoading = false
      this.resetLoading = false
      this.tableLoading = false
    },
  },
};
</script>

<style lang="scss" scoped>
.el-form-item {
  margin-bottom: 22px;
  display: flex;
}
::v-deep .el-form--inline .el-form-item__content {
  flex: 1;
}
.el-select {
  width: 100%;
}
.row-bg {
  margin-left: 80px;
  .el-button {
    margin-right: 8px;
  }
}
</style>