kengee-data-screen/src/views/AppStoreKeyGoods.vue

<script>
export default {
  name: "AppStoreKeyGoods",
  label: "表格",
  data() {
    return {
      tableData: [],
      columns: [
        {label: "重点单品", prop: "goodsName"},
        {label: "当日目标", prop: "targetNum", width: 70},
        {label: "销售数量", prop: "saleNum", width: 70},
        {label: "库存数量", prop: "stockNum", width: 70},
        {label: "预计销售数量", prop: "preSaleNum", width: 70},
        {label: "提醒", custom: 1, width: 70, align: 'center', prop: "remind"},
      ]
    }
  },
  computed: {
    tableConfig: v => {
      return {
        headerBGC: 'rgba(13, 48, 99, 0.6)', rowNum: 9,
        oddRowBGC: window.evenRowBGC(), evenRowBGC: "transparent",
        header: v.columns.map(e => e.label),
        columnWidth: v.columns.map(e => e.width || "0;flex:1;min-width:0;"),
        align: v.columns.map(e => e.align || "left"),
        data: v.tableData.map(e => v.columns.map(column => column.custom == 1 ? `<div class="pointer" style="color:${e.preSaleNum > e.stockNum ? 'red' : '#fff'}">周边库存</div>` :
            column.format ? column.format(e) : e[column.prop])) || [],
      }
    },
  },
  watch: {
    $storeBoard: {
      deep: true, immediate: true, handler(v) {
        this.tableData = v.storeKeyGoods || []
      }
    }
  },
  methods: {
    openNearbyStores({thirdGoodsCode}) {
      const {storeCode, longitude, latitude} = this.$storeBoard.store
      return $http.post("/data-boot/la/screen/multipleStoreBoard/aroundStock", {
        type: "1", ...this.search, storeCode, longitude, latitude, thirdGoodsCode,
      }).then(res => {
        if (res?.data) {
          this.$storeBoard.aroundStock = res.data
          this.$nextTick(() => this.$storeBoard.dialog = true)
        }
      })
    }
  }
}
</script>

<template>
  <section class="AppStoreKeyGoods">
    <div class="subTitle" v-text="'重点单品情况'"/>
    <scroll-table :table-data="tableData" :columns="columns" @click="openNearbyStores" @click.native.stop/>
    <!--<dv-scroll-board :config="tableConfig" @click="openNearbyStores" @click.native.stop/>-->
  </section>
</template>

<style>
.AppStoreKeyGoods {
  color: #fff;
  box-sizing: border-box;
}

.AppStoreKeyGoods .subTitle {
  line-height: 20px;
  width: fit-content;
  margin: 24px auto 12px;
  background-image: url("http://10.0.97.209/img/kengee/kengee5.png");
  background-repeat: no-repeat;
  background-size: 100% 2px;
  background-position: center bottom;
}
</style>