<template>
|
<LoadingLayout>
|
<ContentView>
|
<div class="payroll-manage-detail-top">
|
<div class="payroll-manage-detail-top-title">任务信息</div>
|
<div class="payroll-manage-detail-top-content">
|
<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="人员列表" />
|
</ContentView>
|
<InfiniteLoading
|
scrollViewClassName="common-infinite-scroll-list"
|
v-bind="infiniteLoadingProps"
|
>
|
<template #renderItem="{ item }">
|
<PayrollManageDetailCard
|
:avatar="setOSSLink(item.avatar)"
|
:name="item.name"
|
:gender="item.gender"
|
:isReal="item.isReal"
|
:totalWorkHours="item.totalWorkHours"
|
:settlementAmount="item.settlementAmount"
|
/>
|
</template>
|
</InfiniteLoading>
|
<PageFooter v-if="form.auditStatus === EnumTaskSettlementAuditStatus.Wait">
|
<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 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 { 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 operatorToken = router.params?.operatorToken ?? '';
|
|
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,
|
},
|
};
|
|
return Promise.resolve({
|
pageModel: {
|
rows: 20,
|
page: pageParam,
|
totalCount: detail.value?.data.length,
|
},
|
data: paginateList(detail.value?.data, pageParam, 20),
|
});
|
},
|
{
|
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>
|
