feat: 页面

wupengfei

2025-12-03 7ea7cd0ce3faafb0ab881935d88bef7928fc2ca7

 src/views/FinanceManage/EnterpriseBalanceManage.vue

@@ -1,128 +1,26 @@
<template>
  <LoadingLayout :loading="state.loading">
    <AppContainer>
      <ProTableV2
        v-bind="proTableProps"
        :columns="BalanceManageColumns"
        :operationBtns="operationBtns"
      >
      </ProTableV2>
    </AppContainer>
    <RechargeEnterpriseWalletDialog v-bind="dialogRechargeProps" />
  </LoadingLayout>
  <AppContainer>
    <ProTabs v-model="state.tabType" hasBorder>
      <ProTabPane lazy label="余额管理" name="enterpriseBalanceManageView">
        <EnterpriseBalanceManageView />
      </ProTabPane>
      <ProTabPane lazy label="客户余额管理" name="customerBalanceManageView">
        <CustomerBalanceManageView />
      </ProTabPane>
    </ProTabs>
  </AppContainer>
</template>

<script setup lang="ts">
import {
  ProTableV2,
  LoadingLayout,
  AppContainer,
  useTable,
  useFormDialog,
  defineOperationBtns,
} from '@bole-core/components';
import * as enterpriseWalletServices from '@/services/api/enterpriseWallet';
import { BalanceManageColumns } from './constants';
import RechargeEnterpriseWalletDialog from '@/views/ServiceChargeManage/components/RechargeEnterpriseWalletDialog.vue';
import { EnumEnterpriseWalletAccess, EnumEnterpriseWalletAccessText } from '@/constants';
import { AppContainer, ProTabs, ProTabPane } from '@bole-core/components';
import EnterpriseBalanceManageView from './components/EnterpriseBalanceManageView.vue';
import CustomerBalanceManageView from './components/CustomerBalanceManageView.vue';

defineOptions({
  name: 'EnterpriseBalanceManage',
});

const operationBtns = defineOperationBtns([
  {
    data: {
      enCode: 'rechargeBtn',
      name: '充值',
    },
    emits: {
      onClick: (role) => openDialog(role),
    },
    extraProps: {
      hide: (role: API.GetEnterpriseWalletBalancesQueryResultItem) =>
        role.access !== EnumEnterpriseWalletAccess.Alipay,
    },
  },
  {
    data: {
      enCode: 'detailBtn',
      name: '详情',
    },
    emits: {
      onClick: (role) => goDetail(role),
    },
  },
]);

const router = useRouter();
const BaseState = {
  loading: true,
};

const state = reactive({ ...BaseState });

onMounted(async () => {
  await getList();
  state.loading = false;
const state = reactive({
  tabType: 'enterpriseBalanceManageView',
});

const {
  getDataSource: getList,
  proTableProps,
  paginationState,
  extraParamState,
  reset,
} = useTable(
  async ({ pageIndex, pageSize }, extraParamState) => {
    try {
      let params: API.GetEnterpriseWalletBalancesQuery = {
        pageModel: {
          rows: pageSize,
          page: pageIndex,
          orderInput: extraParamState.orderInput,
        },
      };

      let res = await enterpriseWalletServices.getEnterpriseWalletBalances(params, {
        showLoading: !state.loading,
      });
      return res;
    } catch (error) {}
  },
  {
    defaultExtraParams: {
      orderInput: [{ property: 'id', order: EnumPagedListOrder.Desc }],
    },
    columnsRenderProps: {
      access: { type: 'enum', valueEnum: EnumEnterpriseWalletAccessText },
      balance: { type: 'money' },
    },
  }
);

const {
  dialogProps: dialogRechargeProps,
  handleAdd: handleRechargeAdd,
  editForm: rechargeEditForm,
} = useFormDialog({
  defaultFormParams: {
    access: EnumEnterpriseWalletAccess.Alipay,
    amount: null as number,
    remark: '',
  },
});

function openDialog(row) {
  handleRechargeAdd();
}

function goDetail(row: API.GetEnterpriseWalletBalancesQueryResultItem) {
  router.push({
    name: 'EnterpriseBalanceManageDetail',
    params: {
      id: row?.id ?? '',
    },
  });
}
</script>