shuhi-ui/src/views/finance/cashFlow/index.vue

<template>
  <ele-page flex-table>
    <page-search @search="reload">
      <el-checkbox-group v-model="checkList" v-if="useStatus == 5">
        <el-checkbox label="理赔" value="1" />
        <el-checkbox label="售后补偿" value="2" />
        <el-checkbox label="纸价补贴" value="3" />
      </el-checkbox-group>
    </page-search>

    <common-table ref="pageRef" :pageConfig="pageConfig" :columns="columns">
      <template #toolbar>
        <el-radio-group @change="handleStatusChange" v-model="useStatus">
          <el-radio-button label="全部明细" value="1" />
          <el-radio-button label="佣金明细" value="2" />
          <el-radio-button label="书款明细" value="3" />
          <el-radio-button label="提现明细" value="4" />
          <el-radio-button label="其他" value="5" />
        </el-radio-group>
      </template>

      <template #action="{ row }">
        <div>
          <el-button
            type="primary"
            link
            v-permission="'finance:cashFlow:detail'"
            @click="handleDetail(row)"
          >
            [详情]
          </el-button>
        </div>
      </template>
    </common-table>
  </ele-page>
</template>

<script setup>
  import { ref, reactive } from 'vue';
  import CommonTable from '@/components/CommonPage/CommonTable.vue';
  import pageSearch from './components/page-search.vue';
  import { useDictData } from '@/utils/use-dict-data';

  defineOptions({ name: 'withdrawal' });
  const checkList = ref([]);
  const [useStatusDicts] = useDictData(['use_status']);

  const useStatus = ref('1');
  function handleStatusChange(value) {
    pageRef.value.reload({ useStatus: value });
  }

  /** 表格列配置 */
  const columns = ref([
    { label: '交易时间', prop: 'createTime', align: 'center', width: 180 },
    { label: '用户UID', prop: 'uid', align: 'center', minWidth: 140 },
    {
      label: '支付单号/流水号',
      prop: 'paymentCode',
      align: 'center',
      minWidth: 160
    },
    { label: '对方账户', prop: 'addressDetail', align: 'center' },
    { label: '结算金额', prop: 'money', align: 'center' },
    {
      label: '交易状态',
      prop: 'useStatus',
      align: 'center',
      formatter: (row) =>
        useStatusDicts.value.find((d) => d.dictValue == row.useStatus)
          ?.dictLabel
    },
    { label: '订单编号', prop: 'code', align: 'center' },
    {
      label: '交易类型',
      prop: 'paymentType',
      align: 'center',
      formatter: (row) =>
        useStatusDicts.value.find((d) => d.dictValue == row.useStatus)
          ?.dictLabel
    },
    {
      columnKey: 'action',
      label: '操作',
      width: 90,
      align: 'center',
      slot: 'action',
      fixed: 'right'
    }
  ]);

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

  const pageConfig = reactive({
    pageUrl: '/baseinfo/godown/pagelist',
    exportUrl: '/baseinfo/godown/export',
    fileName: '佣金记录',
    cacheKey: 'commissionTable'
  });

  //刷新表格
  function reload(where) {
    pageRef.value?.reload(where);
  }
  //详情
  function handleDetail(row) {
    console.log(row);
  }
</script>