shuhi-ui/src/views/optimization/reportAnalysis/index.vue

<template>
  <ele-page flex-table>
    <common-table
      ref="pageRef"
      :pageConfig="pageConfig"
      :columns="columns"
      :tools="false"
    >
      <template #toolbar>
        <div class="flex mb-6">
          <pieChart class="flex-1"></pieChart>
          <rank-list></rank-list>
        </div>
      </template>
    </common-table>
  </ele-page>
</template>

<script setup>
  import { ref, reactive } from 'vue';
  import CommonTable from '@/components/CommonPage/CommonTable.vue';
  import pieChart from '@/views/optimization/orderAnalysis/components/pie-chart.vue';
  import rankList from '@/views/optimization/orderAnalysis/components/rank-list.vue';
  import { useDictData } from '@/utils/use-dict-data';

  defineOptions({ name: 'orderCancelAnalysis' });

  /** 表格列配置 */
  const columns = ref([
    { label: '订单编号', prop: 'orderCode', align: 'center' },
    { label: '用户UID', prop: 'uid', align: 'center' },
    { label: '取消原因', prop: 'cancelReason', align: 'center', minWidth: 200 },
    { label: '取消时间', prop: 'createTime', align: 'center' }
  ]);

  /** 页面组件实例 */
  const pageRef = ref(null);

  const pageConfig = reactive({
    pageUrl: '/baseinfo/godown/pagelist',
    exportUrl: '/baseinfo/godown/export',
    fileName: '订单取消分析',
    cacheKey: 'orderCancelAnalysisTable'
  });

  //刷新表格
  function reload(where) {
    pageRef.value?.reload(where);
  }
</script>