add:花材销售统计

cloudroam

2024-12-25 d35b2564780c4bda23781a72bb2908cee9a0bd53

add:花材销售统计

 pages/statistics-analysis/flower-sale/index.vue

对比新文件
@@ -0,0 +1,301 @@
<template>
  <div>
    <div v-loading="statisticLoading">

      <el-row :gutter="20">
        <el-col :span="4" class="mb-10">
          <el-card>
            <div class="statistic-title">销售金额</div>
            <div class="statistic-num">
              <!-- {{ statistic.discountTotalFee || 0 }} -->
              {{ statistic.saleAmount || 0 }}
            </div>
          </el-card>
        </el-col>
        <el-col :span="4" class="mb-10">
          <el-card>
            <div class="statistic-title">销售扎数</div>
            <div class="statistic-num">
              {{ statistic.saleNum || 0 }}
            </div>
          </el-card>
        </el-col>
        <el-col :span="4" class="mb-10">
          <el-card>
            <div class="statistic-title">商品总数</div>
            <div class="statistic-num">
              {{ statistic.goodsNum || 0 }}
            </div>
          </el-card>
        </el-col>
        <el-col :span="4" class="mb-10">
          <el-card>
            <div class="statistic-title">缺货扎数</div>
            <div class="statistic-num">
              {{ statistic.lackNum || 0 }}
            </div>
          </el-card>
        </el-col>
        <el-col :span="4" class="mb-10">
          <el-card>
            <div class="statistic-title">补货扎数</div>
            <div class="statistic-num">
              {{ statistic.replaceNum || 0 }}
            </div>
          </el-card>
        </el-col>
        <el-col :span="4" class="mb-10">
          <el-card>
            <div class="statistic-title">降级扎数</div>
            <div class="statistic-num">
              {{ statistic.reduceNum || 0 }}
            </div>
          </el-card>
        </el-col>
      </el-row>

    </div>
    <el-bus-crud ref="crud" v-bind="tableConfig"
                 :extra-query="extraQuery"
    >
      <template #header>
        <div style="float: right;">
          <el-select v-model="extraQuery.orderField" placeholder="排序字段" @change="changeQuery" size="mini" clearable >
            <el-option v-for="item in dict.orderField" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <el-select v-model="extraQuery.orderType" placeholder="排序方式" @change="changeQuery"  size="mini" clearable>
            <el-option v-for="item in dict.orderType" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
      </template>
    </el-bus-crud>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'
import {getStationListConfig} from '@/utils/form-item-config'

dayjs.locale('zh-cn')
export default {
  data() {
    const currentDate = this.$elBusUtil.toDate(new Date())
    return {
      extraQuery:{orderField:'', orderType: ''},
      dict:{
        orderFieldVal:'',
        orderTypeVal:'',
        orderField:[],
        orderType:[],
      },
      statistic: {},
      statisticLoading: false,
      tableConfig: {
        url: 'flower/v2/statistic-analysis/flower-sale/page',
        hasNew: false,
        hasEdit: false,
        hasDelete: false,
        hasOperation: false,
        hasExport: true,
        exportUrl: 'flower/v2/statistic-analysis/flower-sale/export',
        exportText: '导出',
        onResetView: (row) => {

        },
        // operationAttrs: {
        //   width: 80,
        //   fixed: 'right',
        // },
        beforeRequest: async (params) => {
          this.statisticLoading = true
          // eslint-disable-next-line
          let {code, data} = await this.$elBusHttp.request(
            `flower/v2/statistic-analysis/flower-sale/statistics`,
            {params}
          )
          if (code === 0) {
            data = data || {}
            this.statistic = data || {}
          }
          this.statisticLoading = false
        },
        columns: [
          {label: '供应商ID', prop: 'supplierId', minWidth: 120},
          {label: '供应商名称', prop: 'supplierName', minWidth: 120},
          {label: '注册手机号', prop: 'registerTel', minWidth: 120},
          {label: '联系方式', prop: 'registerTel', minWidth: 120},
          {label: '集货站', prop: 'stationName', minWidth: 120},
          {label: '品类', prop: 'flowerCategoryName', minWidth: 160},
          {label: '商品名称', prop: 'flowerName', minWidth: 150},
          {label: '等级', prop: 'flowerLevel', minWidth: 80},
          {label: '规格', prop: 'flowerUnit', minWidth: 80},
          {label: '底价', prop: 'supplierPrice', minWidth: 120},
          {label: '售价', prop: 'price', minWidth: 120},
          {label: '销售扎数', prop: 'num', minWidth: 120},
          {label: '销售地址', prop: 'address', minWidth: 220},
          {label: '支付时间', prop: 'paymentTime', minWidth: 160},
          {
            label: '订单号',
            prop: 'orderNo',
            minWidth: 180,
            formatter: (row) => (
              <el-link
                type="primary"
                onClick={() => this.handleOrderClick(row.orderId)}
              >
                {row.orderNo}
              </el-link>
            ),
          },

          {label: '缺货扎数', prop: 'lackNum', minWidth: 120},
          {label: '补货扎数', prop: 'replaceNum', minWidth: 120},
          {label: '降级扎数', prop: 'reduceNum', minWidth: 120},

        ],
        searchFormAttrs: {
          labelWidth: 'auto',
        },
        searchForm: [
          {
            type: 'row',
            items: [
              {
                label: '供应商ID', id: 'supplierId', type: 'input',
                rules: {
                  required: false,
                  pattern: /^\d*$/,
                  message: '请输入合法的供应商ID',
                  trigger: 'blur',
                },
              },
              {label: '供应商名称', id: 'supplierName', type: 'input'},
              {
                label: '注册手机号', id: 'registerTel', type: 'input',
              },
              {
                label: '联系方式', id: 'contactTel', type: 'input',
              },
              {
                ...getStationListConfig(),
                label: '所属集货站',
              },
              {
                label: '商品分类',
                id: 'flowerCategory',
                type: 'bus-cascader',
                el: {
                  otherInterfaceUri: 'flower/api/flower/category/tree',
                  props: {
                    label: 'name',
                    value: 'id',
                    emitPath: false,
                    checkStrictly: true,
                  },
                  clearable: true,
                  filterable: true,
                  style: 'width:100%',
                },
              },
              {
                label: '等级：',
                id: 'flowerLevel',
                type: 'bus-select-dict',
                el: {
                  code: 'FLOWER_LEVEL',
                  // multiple: true,
                  clearable: true,
                  filterable: true,
                  style: 'width:100%',
                },

              },
              {label: '订单号', id: 'orderNo', type: 'input'},
              {
                label: '日期',
                id: 'createDateBeginStr',
                component: 'el-bus-date-range',
                el: {
                  clearable: false,
                },
                commonFormat: true,
                commonFormatProps: ['createStartDateStr', 'createEndDateStr'],
                customClass: 'in-bus-form',
                default: [currentDate, currentDate],
              },
              {
                label: '地区：',
                id: 'customerProvince',
                component: 'el-bus-select-area',
                span: 24,
                commonFormat: true,
                commonFormatProps: [
                  'customerProvince',
                  'customerCity',
                  'customerRegion',
                ],
                str: true,
                strKey: 'districtStr',
                rules: {required: false, message: '请选择地区'},
              },


            ],
          },
        ],
      },
    }
  },
  async mounted() {
    this.dict.orderField=await this.getDictByType('FLOWER_SALE_FIELD');
    this.dict.orderType=await this.getDictByType('ORDER_BY');
  },
  methods: {

    changeQuery(){
      this.$refs.crud.getList()
    },
    async getDictByType(typename) {
      const resp = await this.$elBusHttp.request('flower/api/code/value', {
        params: {type:typename},
      });
      if (resp.code === 0) {
        return resp.data
      }
    },
    handleOrderClick(orderId) {
      if (orderId) {
        this.$router.push(`/order/list/${orderId}`)
      }
    },

  },
  head() {
    return {
      title: '花材销售统计',
    }
  },
}
</script>

<style lang="scss" scoped>
@import '@/assets/statistic/index.scss';

.statistic-title {
  text-align: center;
  font-size: 16px;
  color: $main-title-color;
  font-weight: bold;
  margin-bottom: 6px;
}

.statistic-num {
  text-align: center;
  font-size: 16px;
  color: $primary-color;
}

</style>