|  |  |  | 
|---|
|  |  |  | <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" | 
|---|
|  |  |  | scrollViewClassName="common-infinite-scroll-list payroll-manage-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="item.settlementTime ? 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="请输入6位操作密码" | 
|---|
|  |  |  | 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.showKeyboard = 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; | 
|---|
|  |  |  | } finally { | 
|---|
|  |  |  | form.password = ''; | 
|---|
|  |  |  | 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; | 
|---|
|  |  |  | .payrollManage-page-wrapper { | 
|---|
|  |  |  | .payroll-manage-list { | 
|---|
|  |  |  | .income-detail-list-item-inner { | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | flex-direction: column; | 
|---|
|  |  |  | background: #ffffff; | 
|---|
|  |  |  | border-radius: 12px; | 
|---|
|  |  |  | padding: 40px; | 
|---|
|  |  |  | margin-bottom: 24px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | </style> | 
|---|