supervise/supervise-customer-ui/src/views/query/distributionCentre.vue

<template>
  <div class="app-container">
    <div style="margin-left:16px;">
      <div v-show="viewState == 1">
        <button-bar ref="btnbar" view-title="配送中心批发查询" :btndisabled="btndisabled" @btnhandle="btnHandle" />
        <div class="main-content">
          <div class="searchcon">
            <el-button size="small" class="searchbtn" @click="clicksearchShow">
              {{ searchxianshitit }}
            </el-button>
            <div v-show="isSearchShow" class="search">
              <el-form ref="queryParams" :model="queryParams" :inline="true" class="tab-header">
                <el-form-item label="商品编码">
                  <el-input v-model="queryParams.params.prodCode" placeholder="" clearable />
                </el-form-item>
                <el-form-item label="商品名称">
                  <el-input v-model="queryParams.params.prodName" placeholder="" clearable />
                </el-form-item>
                <el-form-item label="销售日期">
                  <el-date-picker v-model="queryParams.params.startDate" type="date" clearable value-format="yyyy-MM-dd"
                    placeholder="选择日期" />
                  <span style="padding: 0 8px">至</span>
                  <el-date-picker v-model="queryParams.params.endDate" type="date" clearable value-format="yyyy-MM-dd"
                    placeholder="选择日期" />
                </el-form-item>
              </el-form>
              <div class="btn" style="text-align: center;">
                <el-button type="primary" size="small" icon="el-icon-search" @click="dosearch">查询</el-button>
                <el-button type="primary" size="small" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
              </div>
            </div>
          </div>

          <!-- Start 项目列表头部 -->
          <div class="listtop"
            style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;">
            <div class="tit">配送中心批发列表</div>
            <!-- <div>

              <span style="padding-right: 20px">商品种类数量：{{pages.num}}个</span>
              <span style="padding-right: 20px">订单金额合计：{{pages.totalPrice}}元</span>
              <span style="padding-right: 20px">到货货值合计：{{pages.arrivalPrice}}元</span>
              <span style="padding-right: 20px">在途货值合计：{{pages.inTransitPrice}}元</span>

            </div> -->
          </div>

          <div style="margin-top: 30px;">
            <el-table v-loading="tableLoading" :data="dataList" border style="width: 100%">
              <el-table-column width="60" label="序号" type="index" :index="indexMethod" align="center" />
              <el-table-column prop="orderType" width="100" label="订单类型" align="center" />
              <el-table-column prop="prodCode" width="140" label="商品编码" align="center" />
              <el-table-column prop="prodName" label="商品名称" align="center" />
              <el-table-column prop="brandCode" width="100" label="品牌代码" align="center" />
              <el-table-column prop="brandName" width="180" label="品牌名称" align="center" />
              <el-table-column prop="saleNum" width="100" label="销售数量" align="center" />
              <el-table-column prop="total" width="100" label="销售总价" align="center" />
              <el-table-column prop="storeName" width="200" label="销售渠道" align="center" />
              <el-table-column prop="dataDate" width="150" label="销售日期" align="center" />
            </el-table>
          </div>

          <!-- End 项目列表 -->
          <div class="pages">
            <div class="tit" />
            <!--  翻页  -->
            <pagination v-show="dataList.length > 0" :total="queryParams.total" :page.sync="queryParams.current"
              :limit.sync="queryParams.size" @pagination="loadList" />
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
  import req from '@/api/query/distributionCentre'
  import ButtonBar from '@/components/ButtonBar'
  export default {
    components: {
      ButtonBar,
    },
    data() {
      return {
        btndisabled: false,
        viewState: 1, // 1、列表 2、添加 3、修改 4、查看
        isSearchShow: false,
        searchxianshitit: '显示查询条件',
        tableLoading: false,
        btnList: [{
          type: 'success',
          size: 'small',
          icon: 'export',
          btnKey: 'doBuild',
          btnLabel: '导出'
        }, {
          type: 'info',
          size: 'small',
          icon: 'cross',
          btnKey: 'doClose',
          btnLabel: '关闭'
        }],
        queryParams: {
          current: 1,
          size: 10,
          total: 0,
          params: {
            prodCode: '',
            prodName: '',
            startDate: '',
            endDate: ''
          }
        },
        dataList: []
      }
    },
    mounted() {
      this.$refs['btnbar'].setButtonList(this.btnList)
    },
    created() {
      this.loadList()
    },
    methods: {
      // 搜索条件效果
      clicksearchShow() {
        this.isSearchShow = !this.isSearchShow
        if (this.isSearchShow) {
          this.searchxianshitit = '隐藏查询条件'
        } else {
          this.searchxianshitit = '显示查询条件'
        }
      },
      btnHandle(btnKey) {
        switch (btnKey) {
          case 'doBuild':
            this.doBuild()
            break
          case 'doClose':
            this.doClose()
            break
          default:
            break
        }
      },
      loadList() {
        this.tableLoading = true
        req.listPage(this.queryParams).then((resp) => {
          this.tableLoading = false
          if (resp.success) {
            const data = resp.data
            this.queryParams.total = data.total
            this.dataList = data.records
          } else {
            // 根据resp.code进行异常情况处理
            this.dataList = []
            this.queryParams.total = 0
          }
        }).catch(() => {
          this.tableLoading = false
        })
      },
      // 序号
      indexMethod(index) {
        var pagestart = (this.queryParams.current - 1) * this.queryParams.size
        var pageindex = index + 1 + pagestart
        return pageindex
      },
      dosearch() {
        this.queryParams.current = 1
        this.loadList()
      },
      resetQuery() {
        this.queryParams = {
          current: 1,
          size: 10,
          total: 0,
          params: {
            prodCode: '',
            prodName: '',
            startDate: '',
            endDate: ''
          }
        }
        this.loadList()
      },
      // 导出文件
      doBuild() {

        if (this.dataList.length == 0) {
          this.$message({
            message: '暂无数据可导出！',
            type: 'warning',
            duration: 1000
          });
          return
        }

        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })

        req.exportExcel(this.queryParams).then((resp) => {
          loading.close()
          const blob = new Blob([resp], {
            type: 'application/vnd.ms-excel;charset=UTF-8'
          })
          const fileName = '配送中心批发列表' + '.xls'
          const elink = document.createElement('a')
          elink.download = fileName
          elink.style.display = 'nonde'
          elink.href = URL.createObjectURL(blob)
          document.body.appendChild(elink)
          elink.click()
          URL.revokeObjectURL(elink.href)
          document.body.removeChild(elink)
        }).catch(() => {
          loading.close()
        })

      },
      doClose() {
        this.$store.dispatch('tagsView/delView', this.$route)
        this.$router.go(-1)
      }
    }
  }
</script>

<style scoped>
</style>