1.花材统计报表

陶杰

2024-12-18 c8be8bfb8d98ba89db116dbde86d96612e5c8aa2

1.花材统计报表

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

对比新文件
@@ -0,0 +1,189 @@
<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.supplierAmount || 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.flowerAmount || 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.flowerStockAmount || 0 }}
            </div>
          </el-card>
        </el-col>
      </el-row>
      
    </div>
    <el-bus-crud ref="crud" v-bind="tableConfig" />
  </div>
</template>

<script>
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'
import { getSupplierListWithIdConfig,getStationListConfig } from '@/utils/form-item-config'
dayjs.locale('zh-cn')
export default {
  data() {
    return {
      statistic: {},
      statisticLoading: false,
      tableConfig: {
        url: 'flower/v2/statistic-analysis/flower-material/page',
        hasNew: false,
        hasEdit: false,
        hasDelete: false,
        viewText: '明细',
        hasExport: true,
        exportUrl: 'flower/v2/statistic-analysis/flower-material/export',
        exportText: '导出',
        onResetView: (row) => {
          const searchFormRef = this.$refs.crud.$refs.searchForm
          const searchFormValue = searchFormRef.getFormValue()
          const url = this.$router.resolve(
            `/report/finance/${row.orderDate}?partnerId=${
              searchFormValue?.partnerId || ''
            }`
          ).href
          window.open(url, '_blank')
        },
        // 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-material/statis`,
            { params }
          )
          if (code === 0) {
            data = data || {}
            this.statistic = data || {}
          }
          this.statisticLoading = false
        },
        columns: [
          { label: '供应商ID', prop: 'supplierId', minWidth: '120px' },
          { label: '供应商名称',prop: 'supplierName', minWidth: '120px',
          // fixed: 'left',
          },
          { label: '注册手机号', prop: 'loginName', minWidth: '120px' },
          { label: '联系方式', prop: 'contactTel', minWidth: '120px' },
          { label: '所属集货站', prop: 'stationName', minWidth: '120px' },
          { label: '品类', prop: 'categoryName', minWidth: '120px' },
          { label: '商品名称', prop: 'flowerName', minWidth: 150, },
          { label: '等级', prop: 'flowerLevelStr', minWidth: 80 },
          { label: '商品规格', prop: 'flowerUnit',  minWidth: 80 },
          { label: '价格', prop: 'flowerPrice', minWidth: 120 },
          { label: '库存', prop: 'flowerStock', minWidth: 120 },
          { label: '状态', prop: 'flowerStatusStr', minWidth: 120 },

        ],
        searchFormAttrs: {
          labelWidth: 'auto',
        },
        searchForm: [
          {
            type: 'row',
            items: [
            {
                label: '商品状态：',
                id: 'flowerStatus',
                type: 'bus-radio',
                el: {
                  code: 'FLOWER_STATUS',
                  hasAll: true,
                  childType: 'el-radio-button',
                },
                default: this.$route.query.status || '',
                span: 24,
                searchImmediately: true,
              },
              { ...getSupplierListWithIdConfig(), label: '供应商' },
              { label: '注册手机号', id: 'loginName', 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%',
                },

              },
              
            ],
          },
        ],
      },
    }
  },
  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>

 utils/form-item-config.js

@@ -237,3 +237,33 @@
    },
  }
}

export const getSupplierListWithIdConfig = () => {
  return {
    label: '供应商：',
    id: 'supplierId',
    type: 'bus-select',
    el: {
      interfaceUri: 'flower/api/supplier/page',
      extraQuery: {
        current: 1,
        size: 2000,
        status: 'P',
        isEnabled: 1,
      },
      props: {
        label: 'name',
        value: 'id',
        dataPath: 'records',
      },
      filterable: true,
      clearable: true,
      style: 'width:100%',
      // 列表返回的是id是int但是存的是string情况
      filterOptions: (list) => {
        const listFilter= list.map((item) => ({ ...item, id: item.id + '',name:item.name+'(SID:'+item.id +')'}))
        return listFilter
      },
    },
  }
}