<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.timeoutHours"
|
:settlementAmount="item.settlementAmount"
|
>
|
<template #actions v-if="form.auditStatus === EnumTaskSettlementAuditStatus.Wait">
|
<div class="payroll-manage-detail-card-actions">
|
<nut-button type="primary" plain @click="goPayrollChange(item)">修改</nut-button>
|
</div>
|
</template>
|
</PayrollManageDetailCard>
|
</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,
|
|
settlementTaskUsers: [] as API.GetSettlementTaskUsersQueryResultItem[],
|
});
|
|
const state = reactive({
|
isLoaded: false,
|
});
|
|
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),
|
onSuccess(res) {
|
if (!state.isLoaded) {
|
form.settlementTaskUsers = res?.data ?? [];
|
state.isLoaded = true;
|
}
|
},
|
});
|
|
const { infiniteLoadingProps, invalidateQueries } = useInfiniteLoading(
|
({ pageParam }) => {
|
let params: API.GetCheckReceiveTaskQuery = {
|
pageModel: {
|
rows: 20,
|
page: pageParam,
|
},
|
};
|
|
return Promise.resolve({
|
pageModel: {
|
rows: 20,
|
page: pageParam,
|
totalCount: form.settlementTaskUsers.length,
|
},
|
data: paginateList(form.settlementTaskUsers, pageParam, 20),
|
});
|
},
|
{
|
enabled: computed(() => form.settlementTaskUsers?.length > 0),
|
}
|
);
|
|
async function auditTaskSettlement(auditStatus: EnumTaskSettlementAuditStatus) {
|
try {
|
let params: API.AuditTaskSettlementCommand = {
|
id: id,
|
operatorToken: operatorToken,
|
auditStatus: auditStatus,
|
rosters: form.settlementTaskUsers.map((item) => ({
|
id: item.id,
|
serviceFee: item.serviceFee,
|
timeoutHours: item.timeoutHours,
|
timeoutFee: item.timeoutFee,
|
otherFee: item.otherFee,
|
remark: item.remark,
|
settlementAmount: item.settlementAmount,
|
})),
|
};
|
// if(auditStatus===EnumTaskSettlementAuditStatus.Pass){
|
// params.rosters
|
// }
|
let res = await taskServices.auditTaskSettlement(params);
|
if (res) {
|
Message.success('操作成功', {
|
onClosed() {
|
goBack();
|
},
|
});
|
}
|
} catch (error) {}
|
}
|
|
function goPayrollChange(item: API.GetSettlementTaskUsersQueryResultItem) {
|
Taro.navigateTo({
|
url: `${RouterPath.payrollChange}?orderRosterId=${item.id}&settleId=${id}&operatorToken=${operatorToken}`,
|
events: {
|
update: function (params: API.EditTaskSettlementOrderRosterCommand) {
|
// refetch();
|
form.settlementTaskUsers = form.settlementTaskUsers.map((item) => {
|
if (item.id == params.id) {
|
item.settlementAmount = params.settlementAmount;
|
item.actualSettlementAmount = params.actualSettlementAmount;
|
item.receiveAccount = params.receiveAccount;
|
item.bank = params.bank;
|
item.serviceFee = params.serviceFee;
|
item.timeoutHours = params.timeoutHours;
|
item.timeoutFee = params.timeoutFee;
|
item.otherFee = params.otherFee;
|
item.remark = params.remark;
|
return item;
|
}
|
return item;
|
});
|
},
|
},
|
});
|
}
|
</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');
|
}
|
}
|
}
|
}
|
|
.payroll-manage-detail-card-actions {
|
--nut-button-default-height: 24px;
|
|
text-align: right;
|
}
|
}
|
</style>
|
