扫码统计 - 商户商品扫码次数统计

<template>
  <div class='app-container'>
    <div class='app-container-search main-bgcolor main-radius'>
      <h1 class=''>扫码统计</h1>
      <br />
      <!-- 搜索工作栏 -->
      <StatsForm
        :searchFormParam='{ queryParams, dataSource }'
        :showSearch.sync='showSearch'
        @handleQuery='handleQuery'
        @resetQuery='resetQuery'
        @selectChage='selectChage'
      ></StatsForm>
    </div>
<pre><code>&lt;!-- 列表 --&gt;
&lt;div class='app-container-search main-bgcolor main-radius'&gt;
  &lt;h2&gt;扫码详情&lt;/h2&gt;
  &lt;el-table :data='list'&gt;
    &lt;!-- 编号就是序号 --&gt;
    &lt;el-table-column label='商品名称' align='center' prop='businessName' /&gt;
    &lt;el-table-column label='扫码次数' align='center' prop='scanCount' /&gt;
    &lt;el-table-column
      label='操作'
      align='center'
      class-name='small-padding fixed-width'
    &gt;
    &lt;/el-table-column&gt;
    &lt;div slot='empty'&gt;
      &lt;StatsTable /&gt;
    &lt;/div&gt;
  &lt;/el-table&gt;
&lt;/div&gt;
</code></pre>
  </div>
</template>
<script>
import { getBusinessNameList } from '@/api/basic/businessInfo'
import StatsForm from '@/components/Customer/SearchForm'
import StatsTable from '@/components/EmptyTable'
import { getGoodsNameList } from '@/api/basic/goodsInfo'
import { getScanRecordTimeList } from '@/api/identity/scanRecord'

export default {
  name: 'DiversionStats',
  components: {
    StatsForm,
    StatsTable,
  },
  data() {
    return {
      //展示层
      foldBoole: false,
      // 遮罩层
      // loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 窜货统计列表
      list: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        dealerId: null,
        dealerName: null,
        batchId: null,
        goodsId: null,
        goodsName: null,
        num: null,
        belongBusinessId: null,
        belongBusinessName: null,
        businessName: null,
        timeHorizon: null,
        scanCount: null,
        createTime: [],
      },
      //表对象
      dataSource: [
        {
          key: 'businessName', //商户名称
          itemType: 'select',
          label: '商户名称',
          placeholder: '请选择品牌',
          onEnterKeyUp: this.handleQuery,
          options: [],
          isNet: true,
        },
        {
          key: 'goodsName', //商品名称
          itemType: 'select',
          label: '商品',
          placeholder: '请输入',
          onEnterKeyUp: this.handleQuery,
          options: [],
        },
        {
          key: 'timeHorizon', //时间范围
          itemType: 'datePicker',
          label: '时间范围',
          placeholder: '请选择',
          onEnterKeyUp: this.handleQuery,
        },
      ],
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        businessName: [
          { required: true, message: '商户名称不能为空', trigger: 'blur' },
        ],
        goodsName: [
          { required: true, message: '商品名称不能为空', trigger: 'blur' },
        ],
          timeHorizon: [
          { required: true, message: '时间范围不能为空', trigger: 'blur' },
        ],
      },
    }
  },
  created() {
    // this.getList()
    this.getBusinessNameList()
  },
  methods: {
    selectChage({ value, type, book }) {
      if (type != 'goodsName') {
        this.queryParams.goodsName = ''
      }
      if (!book) {
        return
      }
      getGoodsNameList({
        ids: value,
      }).then((res) => {
        console.log(res, 'res')
        this.$nextTick(() => {
          this.dataSource[1].options = res.data.map((el) => {
            let obj = {
              label: el.goodsName,
              value: el.belongBusinessId,
              key: el.id,
            }
            return obj
          });
        })
      })
    },
    /** 查询列表 */
    getList() {
      // this.loading = true
      // 执行查询
      getScanRecordTimeList({
      ...this.queryParams,
      // belongBusinessId: this.queryParams.businessName,
      ids:''}).then((response) => {
        console.log('',response);
        this.list = response.data.list
        this.total = response.data.total
        this.loading = false
      })
    },
    //获取商户名称
    async getBusinessNameList() {
      const res = await getBusinessNameList()
      console.log('res', res)
      this.$nextTick(() => {
        this.dataSource[0].options = res.data.map((el) => {
          let obj = {
            label: el.businessName,
            value: el.id,
            key: el.id,
          }
          return obj
        })
      })
      // console.log(this.dataSource[0].options)
    },
    //获取商品名称
    async getGoodsNameList() {
      const res = await getGoodsNameList()
      console.log('res', res)
      this.$nextTick(() => {
        this.dataSource[1].options = res.data.map((el) => {
          let obj = {
            label: el.goodsName,
            value: el.belongBusinessId,
          }
          return obj
        })
      })
    },
    /** 取消按钮 */
    cancel() {
      this.open = false
      this.reset()
    },
    /** 表单重置 */
    reset() {
      this.form = {
        businessName: undefined,
        goodsName: undefined,
        timeHorizon: undefined,
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
  },
}
</script>