| | |
| | | <template> |
| | | <ProTabs |
| | | v-model="queryMenuState.status" |
| | | v-model="queryState.paymentStatus" |
| | | name="task-tab" |
| | | :showPaneContent="false" |
| | | class="task-tabs" |
| | |
| | | title-gutter="8" |
| | | title-scroll |
| | | > |
| | | <ProTabPane :title="`待审核(${waitAssignCount})`" :pane-key="EnumTaskStatus.Wait"></ProTabPane> |
| | | <ProTabPane |
| | | :title="`已审核(${completedAssignCount})`" |
| | | :pane-key="EnumTaskStatus.Complete" |
| | | :title="`待审核(${waitAuditCount})`" |
| | | :pane-key="GetSettlementTasksQueryPaymentStatus.WaitAudit" |
| | | ></ProTabPane> |
| | | <ProTabPane |
| | | :title="`已发放(${completedAssignCount})`" |
| | | :pane-key="EnumTaskStatus.Complete" |
| | | :title="`已审核(${completedAuditCount})`" |
| | | :pane-key="GetSettlementTasksQueryPaymentStatus.CompletedAudit" |
| | | ></ProTabPane> |
| | | <ProTabPane |
| | | :title="`已发放(${completedReleaseCount})`" |
| | | :pane-key="GetSettlementTasksQueryPaymentStatus.CompletedRelease" |
| | | ></ProTabPane> |
| | | </ProTabs> |
| | | <InfiniteLoading |
| | | scrollViewClassName="common-infinite-scroll-list" |
| | | v-bind="infiniteLoadingProps" |
| | | :key="queryMenuState.status" |
| | | :key="queryState.paymentStatus" |
| | | > |
| | | <template #renderItem="{ item }"> |
| | | <IncomeDetailListItem |
| | | :title="item.name" |
| | | :funds="100" |
| | | :item="dayjs(item.createdTime).format('YYYY-MM-DD HH:mm:ss')" |
| | | :value="`钱包余额:${toThousand(item.serviceFee)}`" |
| | | @click="goPayrollManageDetail(item)" |
| | | :title="item.code" |
| | | :funds="item.settlementAmount" |
| | | :item="dayjs(item.settlementTime).format('YYYY-MM-DD HH:mm:ss')" |
| | | @click="openPassword(item)" |
| | | > |
| | | </IncomeDetailListItem> |
| | | </template> |
| | | </InfiniteLoading> |
| | | <nut-short-password |
| | | v-model="form.password" |
| | | v-model:visible="form.passwordVisible" |
| | | @focus="form.showKeyboard = true" |
| | | tips="请输入操作密码" |
| | | desc="明细需输入操作密码才能查看" |
| | | :length="6" |
| | | @complete="complete" |
| | | > |
| | | </nut-short-password> |
| | | <nut-number-keyboard |
| | | v-model="form.password" |
| | | v-model:visible="form.showKeyboard" |
| | | @blur="form.showKeyboard = false" |
| | | > |
| | | </nut-number-keyboard> |
| | | </template> |
| | | |
| | | <script setup lang="ts"> |
| | | import { ProTabs, ProTabPane, IncomeDetailListItem } from '@12333/components'; |
| | | import Taro from '@tarojs/taro'; |
| | | import dayjs from 'dayjs'; |
| | | import { toThousand } from '@12333/utils'; |
| | | import { EnumTaskStatus } from '@12333/constants'; |
| | | import { useTaskList } from '@12333/hooks'; |
| | | import { GetSettlementTasksQueryPaymentStatus, EnumPagedListOrder } from '@12333/constants'; |
| | | import * as taskServices from '@12333/services/apiV2/task'; |
| | | import * as userServices from '@12333/services/apiV2/user'; |
| | | import { useInfiniteLoading } from '@12333/hooks'; |
| | | |
| | | defineOptions({ |
| | | name: 'InnerPage', |
| | | }); |
| | | |
| | | const { queryMenuState, infiniteLoadingProps } = useTaskList({ |
| | | defaultQueryMenuState: { |
| | | status: EnumTaskStatus.Wait, |
| | | const form = reactive({ |
| | | password: '', |
| | | passwordVisible: false, |
| | | showKeyboard: false, |
| | | id: '', |
| | | }); |
| | | |
| | | const queryState = reactive({ |
| | | paymentStatus: GetSettlementTasksQueryPaymentStatus.WaitAudit, |
| | | }); |
| | | |
| | | const { infiniteLoadingProps, invalidateQueries } = useInfiniteLoading( |
| | | ({ pageParam }) => { |
| | | let params: API.GetSettlementTasksQuery = { |
| | | pageModel: { |
| | | rows: 20, |
| | | page: pageParam, |
| | | orderInput: [{ property: 'id', order: EnumPagedListOrder.Desc }], |
| | | }, |
| | | paymentStatus: queryState.paymentStatus, |
| | | }; |
| | | return taskServices.getSettlementTasks(params, { |
| | | showLoading: false, |
| | | }); |
| | | }, |
| | | { |
| | | queryKey: ['taskServices/getSettlementTasks', queryState], |
| | | } |
| | | ); |
| | | |
| | | const completedAuditCount = computed(() => { |
| | | return infiniteLoadingProps.value?.listData?.pages?.[0]?.objectData?.completedAuditCount ?? 0; |
| | | }); |
| | | const waitAuditCount = computed(() => { |
| | | return infiniteLoadingProps.value?.listData?.pages?.[0]?.objectData?.waitAuditCount ?? 0; |
| | | }); |
| | | const completedReleaseCount = computed(() => { |
| | | return infiniteLoadingProps.value?.listData?.pages?.[0]?.objectData?.completedReleaseCount ?? 0; |
| | | }); |
| | | |
| | | const completedAssignCount = computed(() => { |
| | | return infiniteLoadingProps.value?.listData?.pages?.[0]?.objectData?.completedAssignCount ?? 0; |
| | | }); |
| | | const waitAssignCount = computed(() => { |
| | | return infiniteLoadingProps.value?.listData?.pages?.[0]?.objectData?.waitAssignCount ?? 0; |
| | | }); |
| | | function openPassword(item: API.GetSettlementTasksQueryResultItem) { |
| | | form.passwordVisible = true; |
| | | form.id = item.id; |
| | | } |
| | | |
| | | function goPayrollManageDetail(item: API.GetTaskInfosQueryResultItem) { |
| | | function complete(value: string) { |
| | | form.passwordVisible = false; |
| | | buildOperatorToken(value); |
| | | } |
| | | |
| | | async function buildOperatorToken(value: string) { |
| | | try { |
| | | let params: API.BuildOperatorTokenCommand = { |
| | | password: value, |
| | | }; |
| | | let res = await userServices.buildOperatorToken(params); |
| | | if (res) { |
| | | goPayrollManageDetail(form.id, res.operatorToken); |
| | | } |
| | | } catch (error) { |
| | | form.showKeyboard = false; |
| | | } |
| | | } |
| | | |
| | | async function goPayrollManageDetail(id: string, operatorToken: string) { |
| | | Taro.navigateTo({ |
| | | url: `${RouterPath.payrollManageDetail}?id=${ |
| | | item.id |
| | | }&date=${'Fri Oct 17 2025 18:49:01 GMT+0800'}`, |
| | | url: `${RouterPath.payrollManageDetail}?id=${id}&operatorToken=${operatorToken}`, |
| | | }); |
| | | } |
| | | </script> |
| | | |
| | | <style lang="scss"> |
| | | @import '@/styles/common.scss'; |
| | | |
| | | .taskManage-page-wrapper { |
| | | .dark-btn { |
| | | margin-left: 12px; |
| | | } |
| | | } |
| | | </style> |