wupengfei
2 天以前 e2cbcd64dd60014d82bd898ae51fd827e01e9c18
apps/bMiniApp/src/subpackages/payrollManage/payrollManageDetail/InnerPage.vue
@@ -2,9 +2,48 @@
  <LoadingLayout>
    <ContentView>
      <div class="payroll-manage-detail-top">
        <div class="payroll-manage-detail-top-title"></div>
        <div class="payroll-manage-detail-top-title">任务信息</div>
        <div class="payroll-manage-detail-top-content">
          <div class="payroll-manage-detail-top-content-item"></div>
          <div class="payroll-manage-detail-top-content-item">
            <div class="payroll-manage-detail-top-content-item-label">任务名称:</div>
            <div class="payroll-manage-detail-top-content-item-text">{{ form.name }}</div>
          </div>
          <div class="payroll-manage-detail-top-content-item">
            <div class="payroll-manage-detail-top-content-item-label">服务费金额:</div>
            <div class="payroll-manage-detail-top-content-item-text">
              {{ `${form.serviceFee ?? 0}${EnumBillingMethodText[form.billingMethod]}` }}
            </div>
          </div>
          <div class="payroll-manage-detail-top-content-item">
            <div class="payroll-manage-detail-top-content-item-label">结算人数:</div>
            <div class="payroll-manage-detail-top-content-item-text">
              {{ `${form.settlementCount ?? 0}人` }}
            </div>
          </div>
          <div class="payroll-manage-detail-top-content-item">
            <div class="payroll-manage-detail-top-content-item-label">结算金额:</div>
            <div class="payroll-manage-detail-top-content-item-text">
              {{ `${toThousand(form.settlementAmount ?? 0)}元` }}
            </div>
          </div>
          <div
            class="payroll-manage-detail-top-content-item"
            v-if="form.auditStatus !== EnumTaskSettlementAuditStatus.Wait"
          >
            <div class="payroll-manage-detail-top-content-item-label">审核时间:</div>
            <div class="payroll-manage-detail-top-content-item-text">
              {{ dayjs(form.auditTime).format('YYYY-MM-DD') }}
            </div>
          </div>
          <div
            class="payroll-manage-detail-top-content-item"
            v-if="form.settlementStatus === EnumTaskSettlementStatus.Completed"
          >
            <div class="payroll-manage-detail-top-content-item-label">结算时间:</div>
            <div class="payroll-manage-detail-top-content-item-text">
              {{ dayjs(form.settlementTime).format('YYYY-MM-DD') }}
            </div>
          </div>
        </div>
      </div>
      <ChunkTitle title="人员列表" />
@@ -19,22 +58,40 @@
          :name="item.name"
          :gender="item.gender"
          :isReal="item.isReal"
          :contactPhoneNumber="item.contactPhoneNumber"
          :checkReceiveStatus="item.checkReceiveStatus"
          :totalWorkHours="item.totalWorkHours"
          :settlementAmount="item.settlementAmount"
        />
      </template>
    </InfiniteLoading>
    <PageFooter v-if="form.">
      <PageFooterBtn type="primary" @click="auditTaskSettlement(EnumTaskSettlementAuditStatus.Pass)"
        >审核通过</PageFooterBtn
      >
      <PageFooterBtn
        type="primary"
        plain
        @click="auditTaskSettlement(EnumTaskSettlementAuditStatus.Fail)"
        >驳回</PageFooterBtn
      >
    </PageFooter>
  </LoadingLayout>
</template>
<script setup lang="ts">
import Taro from '@tarojs/taro';
import * as taskCheckReceiveServices from '@12333/services/apiV2/taskCheckReceive';
import { useCheckReceiveTaskUserSubmits, useInfiniteLoading } from '@12333/hooks';
import * as taskUserServices from '@12333/services/apiV2/taskUser';
import * as taskServices from '@12333/services/apiV2/task';
import { useInfiniteLoading } from '@12333/hooks';
import {
  EnumBillingMethodText,
  EnumTaskSettlementAuditStatus,
  EnumTaskSettlementStatus,
} from '@12333/constants';
import PayrollManageDetailCard from '../components/PayrollManageDetailCard.vue';
import { EnumTaskCheckReceiveStatus } from '@12333/constants';
import { setOSSLink } from '@12333/utils';
import { Message, paginateList, setOSSLink, toThousand } from '@12333/utils';
import { useQuery } from '@tanstack/vue-query';
import dayjs from 'dayjs';
import { goBack } from '@/utils';
defineOptions({
  name: 'InnerPage',
@@ -42,27 +99,124 @@
const router = Taro.useRouter();
const id = router.params?.id ?? '';
const date = router.params?.date ?? '';
const checkReceiveStatus = Number(router.params?.checkReceiveStatus);
const operatorToken = router.params?.operatorToken ?? '';
const { infiniteLoadingProps } = useInfiniteLoading(
const form = reactive({
  name: '',
  serviceFee: 0,
  settlementCount: 0,
  settlementAmount: 0,
  settlementTime: '',
  auditTime: '',
  auditStatus: 0,
  billingMethod: 0,
  settlementStatus: 0,
});
const {
  isLoading,
  isError,
  data: detail,
  refetch,
} = useQuery({
  queryKey: ['taskUserServices/getSettlementTaskUsers', id, operatorToken],
  queryFn: async () => {
    let res = await taskUserServices.getSettlementTaskUsers(
      { id: id, operatorToken: operatorToken },
      {
        showLoading: false,
      }
    );
    if (res) {
      form.name = res.detail?.name;
      form.serviceFee = res.detail?.serviceFee;
      form.settlementCount = res.data?.length;
      form.settlementAmount = res.detail?.settlementAmount;
      form.settlementTime = res.detail?.settlementTime;
      form.auditTime = res.detail?.auditTime;
      form.auditStatus = res.detail?.auditStatus;
      form.settlementStatus = res.detail?.settlementStatus;
      form.billingMethod = res.detail?.billingMethod;
    }
    return res;
  },
  placeholderData: () => ({} as API.GetSettlementTaskUsersQueryResult),
});
const { infiniteLoadingProps, invalidateQueries } = useInfiniteLoading(
  ({ pageParam }) => {
    let params: API.GetCheckReceiveTaskQuery = {
      pageModel: {
        rows: 20,
        page: pageParam,
      },
      taskInfoId: id,
      date: dayjs(date).format('YYYY-MM-DD'),
      checkReceiveStatus: 30,
    };
    return taskCheckReceiveServices.getCheckReceiveTask(params, {
      showLoading: false,
    return Promise.resolve({
      pageModel: {
        rows: 20,
        page: pageParam,
        totalCount: detail.value?.data.length,
      },
      data: paginateList(detail.value?.data, pageParam, 20),
    });
  },
  {
    queryKey: ['taskCheckReceiveServices/getCheckReceiveTask'],
    enabled: computed(() => !!detail.value?.data),
  }
);
async function auditTaskSettlement(auditStatus: EnumTaskSettlementAuditStatus) {
  try {
    let params: API.AuditTaskSettlementCommand = {
      id: id,
      operatorToken: operatorToken,
      auditStatus: auditStatus,
    };
    let res = await taskServices.auditTaskSettlement(params);
    if (res) {
      Message.success('操作成功', {
        onClosed() {
          goBack();
        },
      });
    }
  } catch (error) {}
}
</script>
<style lang="scss">
@import '@/styles/common.scss';
.payrollManageDetail-page-wrapper {
  .payroll-manage-detail-top {
    padding: 24px 32px;
    margin-bottom: 24px;
    background-color: #fff;
    border-radius: 12px;
    .payroll-manage-detail-top-title {
      font-size: 32px;
      font-weight: bold;
      margin-bottom: 14px;
    }
    .payroll-manage-detail-top-content {
      .payroll-manage-detail-top-content-item {
        font-size: 24px;
        line-height: 40px;
        .payroll-manage-detail-top-content-item-label {
          display: inline-flex;
          color: boleGetCssVar('text-color', 'primary');
        }
        .payroll-manage-detail-top-content-item-text {
          display: inline-flex;
          color: boleGetCssVar('text-color', 'regular');
        }
      }
    }
  }
}
</style>