1.花材统计报表：统计字段放在表格右上角

陶杰

2024-12-24 260db43ff377fe953cb719912f91da9192b66734

1.花材统计报表：统计字段放在表格右上角

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

@@ -29,20 +29,45 @@
          </el-card>
        </el-col>
      </el-row>
      

    </div>
    <el-bus-crud ref="crud" v-bind="tableConfig" />
    <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 { getSupplierListWithIdConfig,getStationListConfig } from '@/utils/form-item-config'
import { getSupplierListWithIdConfig, getStationListConfig } from '@/utils/form-item-config'
dayjs.locale('zh-cn')
export default {



  data() {
    return {
      extraQuery:{orderField:'', orderType: ''},
      dict:{
        orderFieldVal:'',
        orderTypeVal:'',
        orderField:[],
        orderType:[],
      },
      statistic: {},
      statisticLoading: false,
      tableConfig: {
@@ -59,8 +84,7 @@
          const searchFormRef = this.$refs.crud.$refs.searchForm
          const searchFormValue = searchFormRef.getFormValue()
          const url = this.$router.resolve(
            `/report/finance/${row.orderDate}?partnerId=${
              searchFormValue?.partnerId || ''
            `/report/finance/${row.orderDate}?partnerId=${searchFormValue?.partnerId || ''
            }`
          ).href
          window.open(url, '_blank')
@@ -84,18 +108,19 @@
        },
        columns: [
          { label: '供应商ID', prop: 'supplierId', minWidth: '120px' },
          { label: '供应商名称',prop: 'supplierName', minWidth: '120px',
          // fixed: 'left',
          {
            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: 'parentCategoryName', minWidth: '120px' },
          

          { label: '商品名称', prop: 'flowerName', minWidth: 150, },
          { label: '等级', prop: 'flowerLevelStr', minWidth: 80 },
          { label: '商品规格', prop: 'flowerUnit',  minWidth: 80 },
          { label: '商品规格', prop: 'flowerUnit', minWidth: 80 },
          { label: '价格', prop: 'flowerPrice', minWidth: 120 },
          { label: '库存', prop: 'flowerStock', minWidth: 120 },
          { label: '状态', prop: 'flowerStatusStr', minWidth: 120 },
@@ -108,7 +133,7 @@
          {
            type: 'row',
            items: [
            {
              {
                label: '商品状态：',
                id: 'flowerStatus',
                type: 'bus-radio',
@@ -125,7 +150,7 @@
              { label: '供应商名称', id: 'supplierName', type: 'input' },
              { label: '供应商ID', id: 'supplierId', type: 'input' },
              { label: '注册手机号', id: 'loginName', type: 'input' },
              { label: '联系方式', id: 'contactTel',type: 'input'},
              { label: '联系方式', id: 'contactTel', type: 'input' },
              {
                ...getStationListConfig(),
                label: '所属集货站',
@@ -160,39 +185,60 @@
                },

              },
              {
                label: '排序字段',
                id: 'orderField',
                type: 'bus-select-dict',
                el: {
                  code: 'FLOWER_MATERIAL_FIELD',
                  // multiple: true,
                  clearable: true,
                  filterable: true,
                  style: 'width:100%',
                },
              // {
              //   label: '排序字段',
              //   id: 'orderField',
              //   type: 'bus-select-dict',
              //   el: {
              //     code: 'FLOWER_MATERIAL_FIELD',
              //     // multiple: true,
              //     clearable: true,
              //     filterable: true,
              //     style: 'width:100%',
              //   },

              },
              {
                label: '排序方式',
                id: 'orderType',
                type: 'bus-select-dict',
                el: {
                  code: 'ORDER_BY',
                  // multiple: true,
                  clearable: true,
                  filterable: true,
                  style: 'width:100%',
                },
              // },
              // {
              //   label: '排序方式',
              //   id: 'orderType',
              //   type: 'bus-select-dict',
              //   el: {
              //     code: 'ORDER_BY',
              //     // multiple: true,
              //     clearable: true,
              //     filterable: true,
              //     style: 'width:100%',
              //   },

              },
              
              // },

            ],
          },
        ],
      },
    }
  },

  async mounted() {
    this.dict.orderField=await this.getDictByType('FLOWER_MATERIAL_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
      }
    },

  },

  head() {
    return {
      title: '财务报表',
@@ -211,10 +257,10 @@
  font-weight: bold;
  margin-bottom: 6px;
}

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

</style>