| | |
| | | <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="人员列表" /> |
| | |
| | | :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', |
| | |
| | | |
| | | 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> |