feat: 页面

wupengfei

5 天以前 35526a3f28689fa3277fd4337a005ce78e7a7a33

feat: 页面

 src/views/FinanceManage/WithdrawManage.vue

New file
@@ -0,0 +1,140 @@
<template>
  <LoadingLayout :loading="state.loading">
    <AppContainer>
      <ProTableQueryFilterBar @on-reset="reset">
        <template #query>
          <QueryFilterItem>
            <FieldDatePicker
              v-model="extraParamState.time"
              type="daterange"
              range-separator="~"
              start-placeholder="起始日期"
              end-placeholder="截止日期"
              clearable
              @change="getList()"
              tooltipContent="申请时间"
            ></FieldDatePicker>
          </QueryFilterItem>
          <QueryFilterItem tip-content="提现状态">
            <FieldRadio
              v-model="extraParamState.status"
              :value-enum="[]"
              buttonStyle
              showAllBtn
              @change="getList()"
            />
          </QueryFilterItem>
          <QueryFilterItem>
            <SearchInput
              v-model="extraParamState.keywords"
              style="width: 260px"
              placeholder="姓名/电话/身份证号"
              @on-click-search="getList"
            >
            </SearchInput>
          </QueryFilterItem>
        </template>
      </ProTableQueryFilterBar>
      <ProTableV2 v-bind="proTableProps" :columns="column" :operationBtns="operationBtns">
      </ProTableV2>
    </AppContainer>
    <WithdrawalDetailDialog v-bind="dialogProps" />
  </LoadingLayout>
</template>

<script setup lang="ts">
import {
  ProTableQueryFilterBar,
  OperationBtnType,
  ProTableV2,
  SearchInput,
  LoadingLayout,
  AppContainer,
  QueryFilterItem,
  useTable,
  useFormDialog,
  FieldDatePicker,
  FieldRadio,
} from '@bole-core/components';
import { useAccess } from '@/hooks';
import * as userServices from '@/services/api/user';
import WithdrawalDetailDialog from './components/WithdrawalDetailDialog.vue';
import { ModelValueType } from 'element-plus';

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

const operationBtnMap: Record<string, OperationBtnType> = {
  detailBtn: { emits: { onClick: (role) => openDialog(role) } },
};

const { column, operationBtns } = useAccess({
  operationBtnMap,
});

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

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

onMounted(async () => {
  await getList();
  state.loading = false;
});

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

      let res = await userServices.getPersonalUserWalletBalances(params, {
        showLoading: !state.loading,
      });
      return res;
    } catch (error) {}
  },
  {
    defaultExtraParams: {
      keywords: '',
      status: '',
      time: [] as unknown as ModelValueType,
      orderInput: [{ property: 'id', order: EnumPagedListOrder.Asc }],
    },
    columnsRenderProps: {
      balance: { type: 'money' },
    },
  }
);

const { dialogProps, handleEdit, editForm } = useFormDialog({
  defaultFormParams: {
    id: '',
    status: '',
    time: '',
  },
});

function openDialog(row) {
  handleEdit({
    id: row.id,
    status: '',
    time: '',
  });
}
</script>

 src/views/FinanceManage/components/WithdrawalDetailDialog.vue

New file
@@ -0,0 +1,145 @@
<template>
  <ProDialog title="详情" v-model="visible" @close="onDialogClose" destroy-on-close draggable>
    <!-- <PortraitTableWithAttachment v-bind="portraitTableWithAttachmentProps" /> -->
    <ProForm :model="form" ref="dialogForm" label-width="90px" style="margin-top: 20px" is-read>
      <ProFormCol>
        <ProFormColItem :span="12">
          <ProFormItemV2 label="提现状态:" prop="status">
            <ProFormRadio v-model="form.status" :value-enum="[]" />
          </ProFormItemV2>
        </ProFormColItem>
      </ProFormCol>
      <ProFormCol>
        <ProFormColItem :span="12">
          <ProFormItemV2 label="提现日期:" prop="time">
            <ProFormDatePicker v-model="form.time" type="date" format="YYYY-MM-DD HH:mm" />
          </ProFormItemV2>
        </ProFormColItem>
      </ProFormCol>
    </ProForm>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="emit('onCancel')">取 消</el-button>
        <el-button type="primary" @click="emit('onCancel')">确 定</el-button>
      </span>
    </template>
  </ProDialog>
</template>

<script setup lang="ts">
import { FormInstance } from 'element-plus';
import {
  ProDialog,
  ProForm,
  ProFormItemV2,
  ProFormCol,
  ProFormColItem,
  ProFormRadio,
  ProFormDatePicker,
} from '@bole-core/components';
import { usePortraitTableWithAttachment } from '@/hooks';
import { convertApi2FormUrl } from '@/utils';
import { useQuery } from '@tanstack/vue-query';

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

const visible = defineModel({ type: Boolean });

type Form = {
  title?: string;
  id: string;
  status: string;
  time: string;
};

const form = defineModel<Form>('form');

const emit = defineEmits<{
  (e: 'onConfirm'): void;
  (e: 'onCancel'): void;
}>();

watch(
  () => visible.value,
  (val) => {
    if (val) {
      // refetch();
    }
  }
);

// const {
//   data: detail,
//   refetch,
//   isLoading,
// } = useQuery({
//   queryKey: ['parkBountyApplyServices/getEnterpriseDrawWithDetail', form.value?.id],
//   queryFn: async () => {
//     return await parkBountyApplyServices.getEnterpriseDrawWithDetail(
//       {
//         drawWithId: form.value?.id,
//       },
//       {
//         showLoading: true,
//       }
//     );
//   },
//   placeholderData: () => ({}),
//   enabled: !!form.value?.id,
//   onSuccess(data) {},
// });

// const { portraitTableWithAttachmentProps } = usePortraitTableWithAttachment({
//   data: detail,
//   annexList: computed(() =>
//     detail.value?.invoiceUrl
//       ? detail.value?.invoiceUrl.split('|').map((item) => convertApi2FormUrl(item))
//       : []
//   ),
//   columns: [
//     {
//       label: '姓名',
//       key: 'enterpriseName',
//     },
//     {
//       label: '身份证号',
//       key: 'societyCreditCode',
//     },
//     {
//       label: '账户名称',
//       key: 'accountName',
//     },
//     {
//       label: '银行帐号',
//       key: 'bankNumber',
//     },
//     {
//       label: '开户银行',
//       key: 'bankName',
//     },
//     {
//       label: '开户支行',
//       key: 'bankResumeName',
//     },
//     {
//       label: '提现金额',
//       key: 'amount',
//       type: 'money',
//     },
//     {
//       label: '申请日期',
//       key: 'creationTime',
//       type: 'date',
//     },
//   ],
// });

const dialogForm = ref<FormInstance>();

function onDialogClose() {
  if (!dialogForm.value) return;
  dialogForm.value.resetFields();
}
</script>