wupengfei
1 天以前 c2463c02a17f92df55ec77ed2da3fb724290c072
apps/bMiniApp/src/subpackages/payrollManage/payrollManage/InnerPage.vue
@@ -1,6 +1,6 @@
<template>
  <ProTabs
    v-model="queryMenuState.status"
    v-model="queryState.paymentStatus"
    name="task-tab"
    :showPaneContent="false"
    class="task-tabs"
@@ -8,64 +8,136 @@
    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>
@@ -73,9 +145,16 @@
<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>