flexJobAdminBClient.git

			@@ -1,12 +1,7 @@
			<template>
			<LoadingLayout :loading="isLoading">
			<AppScrollContainer>
			<AppContainer>
			<ChunkCell title="结算单详情">
			<template #titleRight>
			<el-button type="primary" icon="Download" @click="handleDownloadTemplate()"
			>电子回单下载</el-button
			>
			</template>
			<ProForm :model="form" ref="formRef" label-width="120px" :is-read="true">
			<ProFormCol>
			<ProFormColItem :span="8">
			@@ -15,83 +10,71 @@
			</ProFormItemV2>
			</ProFormColItem>
			<ProFormColItem :span="8">
			<ProFormItemV2 label="任务编号:" prop="name">
			<ProFormText v-model="form.name"> </ProFormText>
			<ProFormItemV2 label="任务编号:" prop="code">
			<ProFormText v-model="form.code"> </ProFormText>
			</ProFormItemV2>
			</ProFormColItem>
			<ProFormColItem :span="8"></ProFormColItem>
			</ProFormCol>
			<ProFormCol>
			<!-- <ProFormCol>
			<ProFormColItem :span="8">
			<ProFormItemV2 label="结算单名称:" prop="name">
			<ProFormText v-model="form.name"> </ProFormText>
			<ProFormItemV2 label="结算单名称:" prop="settlementOrderName">
			<ProFormText v-model="form.settlementOrderName"> </ProFormText>
			</ProFormItemV2>
			</ProFormColItem>
			<ProFormColItem :span="8">
			<ProFormItemV2 label="上传时间:" prop="name">
			<ProFormItemV2 label="上传时间:" prop="settlementOrderTime">
			<ProFormDatePicker
			v-model="form.name"
			v-model="form.settlementOrderTime"
			type="date"
			format="YYYY-MM-DD HH:mm"
			></ProFormDatePicker>
			</ProFormItemV2>
			</ProFormColItem>
			<ProFormColItem :span="8"></ProFormColItem>
			</ProFormCol>
			</ProFormCol> -->
			<ProFormCol>
			<ProFormColItem :span="8">
			<ProFormItemV2 label="结算金额:" prop="money">
			<ProFormInputNumber v-model="form.money"> </ProFormInputNumber>
			<ProFormItemV2 label="结算金额:" prop="settlementAmount">
			<ProFormInputNumber v-model="form.settlementAmount" format-value="money">
			</ProFormInputNumber>
			</ProFormItemV2>
			</ProFormColItem>
			<ProFormColItem :span="8">
			<ProFormItemV2 label="实发金额:" prop="money">
			<ProFormInputNumber v-model="form.money"> </ProFormInputNumber>
			</ProFormItemV2>
			</ProFormColItem>
			<ProFormColItem :span="8">
			<ProFormItemV2 label="状态:" prop="status">
			<ProFormRadio v-model="form.status" :value-enum="[{ label: '是', value: 1 }]">
			</ProFormRadio>
			<ProFormItemV2 label="实发金额:" prop="actualSettlementAmount">
			<ProFormInputNumber v-model="form.actualSettlementAmount" format-value="money">
			</ProFormInputNumber>
			</ProFormItemV2>
			</ProFormColItem>
			</ProFormCol>
			</ProForm>
			</ChunkCell>
			<ChunkCell title="结算流程">
			<div class="step-wrapper">
			<el-steps :active="1" align-center finish-status="process">
			<el-step title="结算单上传" :icon="Edit">
			<template #description>
			<div>创建人:{{ form.name }}</div>
			<div>时间:{{ form.name }}</div>
			<TextOverTooltip>备注:{{ form.name }}</TextOverTooltip>
			</template>
			</el-step>
			<el-step title="结算付款" :icon="Upload">
			<template #description>
			<div>创建人:{{ form.name }}</div>
			<div>时间:{{ form.name }}</div>
			<TextOverTooltip
			>备注:{{ 'form.nameform.nameform.eform.nameform.nameform.name' }}</TextOverTooltip
			>
			</template>
			</el-step>
			</el-steps>
			</div>
			</ChunkCell>
			<ChunkCell title="结算名单">
			<ChunkCell title="结算名单" style="flex: 1" class="settlement-user-list-chunk">
			<ProTableQueryFilterBar @on-reset="reset">
			<template #query>
			<QueryFilterItem>
			<SearchInput
			v-model="extraParamState.searchWord"
			v-model="extraParamState.keywords"
			style="width: 300px"
			placeholder="人员姓名/身份证号/手机号"
			placeholder="姓名/手机/身份证号/客户"
			@on-click-search="getList"
			>
			</SearchInput>
			</QueryFilterItem>
			</template>
			<template #btn v-if="isSettlement">
			<BlFileUpload
			v-model:file-url="form.settlementUrl"
			ref="uploadRef"
			:showTip="false"
			:show-file-list="false"
			class="pro-table-operation-btn upload-style-btn"
			:on-success="(event) => handleUploadSuccess(event)"
			:limitFileSize="null"
			:limit="1"
			accept="xlsx,xls"
			>
			<el-button text type="primary" class="pro-table-operation-btn">导入</el-button>
			</BlFileUpload>
			<el-button type="primary" link @click="handleExport()">导出</el-button>
			</template>
			</ProTableQueryFilterBar>
			<ProTableV2
			@@ -101,18 +84,30 @@
			:auto-height="false"
			ref="proTable"
			:tableProps="{
			maxHeight: '400px',
			maxHeight: '250px',
			}"
			>
			</ProTableV2>
			<div class="chuck-add-or-edit-actions">
			<el-button class="chuck-add-or-edit-actions" @click="handleBack">取消</el-button>
			<el-button
			v-if="isSettlement"
			class="chuck-add-or-edit-actions"
			type="primary"
			@click="handleSubmit()"
			>结算</el-button
			>
			</div>
			</ChunkCell>
			</AppScrollContainer>
			</AppContainer>
			<EditAccountInfoDialog v-bind="dialogProps"></EditAccountInfoDialog>
			<SettleDetailDialog v-bind="dialogSettleProps" />
			</LoadingLayout>
			</template>
			<script setup lang="ts">
			import {
			LoadingLayout,
			AppScrollContainer,
			AppContainer,
			ChunkCell,
			ProForm,
			ProFormItemV2,
			@@ -121,54 +116,120 @@
			ProFormColItem,
			ProFormDatePicker,
			ProFormInputNumber,
			ProFormRadio,
			useTable,
			ProTableV2,
			defineOperationBtns,
			SearchInput,
			QueryFilterItem,
			ProTableQueryFilterBar,
			TextOverTooltip,
			useFormDialog,
			XLSXUtils,
			BlFileUpload,
			UploadUserFile,
			} from '@bole-core/components';
			import { Edit, Upload } from '@element-plus/icons-vue';
			import { SettlementListColumns } from './constants';
			import { useQuery } from '@tanstack/vue-query';
			import { downloadFileByUrl, OrderInputType } from '@bole-core/core';
			import * as taskServices from '@/services/api/task';
			import * as taskUserServices from '@/services/api/taskUser';
			import EditAccountInfoDialog from './components/EditAccountInfoDialog.vue';
			import SettleDetailDialog from './components/SettleDetailDialog.vue';
			import { Message } from '@bole-core/core';
			import { SettlementReceiveStatusText } from '@/constants';
			import {
			downloadFile,
			downloadFileByUrl,
			paginateList,
			setOssFileName,
			setOSSLink,
			toThousand,
			} from '@/utils';
			import _ from 'lodash';

			defineOptions({
			name: 'ServiceChargeDetail',
			});

			const { closeViewPush } = useRouteView();
			const eventContext = useGlobalEventContext();
			const operationBtns = defineOperationBtns([
			{
			data: {
			enCode: 'downloadBtn',
			name: '下载回单',
			enCode: 'editBtn',
			name: '编辑',
			},
			emits: {
			onClick: (role) => openDialog(role),
			},
			extraProps: {
			hide: () => !isSettlement.value,
			},
			},
			]);

			const route = useRoute();
			const id = (route.params.id as string) ?? '';
			const settlement = (route.query.settlement as string) ?? '';
			const isSettlement = computed(() => !!settlement);

			const form = reactive({
			name: '',
			money: 0,
			status: 1,
			settlementAmount: 0,
			actualSettlementAmount: 0,
			code: '',
			settlementOrderName: '',
			settlementOrderTime: '',
			settlementTaskUsers: [] as API.GetSettlementTaskUsersQueryResultItem[],

			settlementUrl: [] as UploadUserFile[],
			});

			const { isLoading } = useQuery({
			queryKey: ['flexTaskServices/getFlexTaskDetail', id],
			const BaseState = {
			loading: true,
			};

			const state = reactive({ ...BaseState });

			const { isLoading, refetch } = useQuery({
			queryKey: ['taskUserServices/getSettlementTaskUsers', id],
			queryFn: async () => {
			return await flexTaskServices.getFlexTaskDetail(
			return await taskUserServices.getSettlementTaskUsers(
			{ id: id },
			{
			showLoading: false,
			}
			);
			},
			placeholderData: () => ({} as API.GetFlexTaskDetailForBackOutput),
			onSuccess(data) {},
			placeholderData: () => ({} as API.GetSettlementTaskUsersQueryResult),
			onSuccess(res) {
			form.settlementTaskUsers = res?.data ?? [];
			if (res?.detail) {
			form.name = res?.detail?.name;
			form.settlementAmount = res?.detail?.settlementAmount ?? 0;
			form.actualSettlementAmount = res?.detail?.actualSettlementAmount ?? 0;
			form.code = res?.detail?.code;
			// form.settlementOrderName = setOssFileName(res?.detail?.settlementOrderName);
			// form.settlementOrderTime = res?.detail?.settlementOrderTime ?? '';
			}
			// if (res?.errors?.length > 0) {
			// Message.tipMessage('存在导入错误的数据，是否导出？').then(() => {
			// XLSXUtils.exportToXLSX({
			// workbookDataList: res.errors,
			// fileName: '结算导入-错误数据',
			// workbookHeaderMap: {
			// name: '姓名',
			// identity: '身份证号',
			// taskName: '任务名称',
			// settlementAmount: '结算金额',
			// actualSettlementAmount: '实发金额',
			// receiveAccount: '收款账户',
			// bank: '所属银行',
			// bankBranch: '开户支行名称',
			// errorMessage: '错误信息',
			// },
			// });
			// });
			// }
			getList();
			},
			enabled: !!id,
			});

			@@ -181,38 +242,199 @@
			} = useTable(
			async ({ pageIndex, pageSize }, extraParamState) => {
			try {
			let params: API.GetFlexEnterpriseInput = {
			let list = [...form.settlementTaskUsers];
			if (extraParamState.keywords) {
			list = list?.filter((item) => {
			return (
			item.name.includes(extraParamState.keywords) \|\|
			item.contactPhoneNumber.includes(extraParamState.keywords) \|\|
			item.identity.includes(extraParamState.keywords)
			);
			});
			}

			return Promise.resolve({
			pageModel: {
			rows: pageSize,
			page: pageIndex,
			orderInput: extraParamState.orderInput,
			totalCount: list.length,
			},
			searchWord: extraParamState.searchWord,
			};

			let res = await flexEnterpriseServices.getFlexEnterpriseList(params);
			return res;
			data: paginateList(list, pageIndex, pageSize),
			});
			} catch (error) {
			console.log('error: ', error);
			}
			},
			{
			defaultExtraParams: {
			searchWord: '',
			orderInput: [{ property: 'id', order: OrderInputType.Desc }],
			keywords: '',
			orderInput: [{ property: 'id', order: EnumPagedListOrder.Desc }],
			},
			queryKey: ['flexEnterpriseServices/getFlexEnterpriseList'],
			columnsRenderProps: {},
			queryKey: ['taskUserServices/getSettlementTaskUsers'],
			columnsRenderProps: {
			settlementTime: { type: 'date' },
			settlementAmount: { type: 'money' },
			actualSettlementAmount: { type: 'money' },
			settlementReceiveStatus: { type: 'enum', valueEnum: SettlementReceiveStatusText },
			},
			}
			);

			function handleDownloadTemplate() {
			downloadFileByUrl('', '电子回单');
			const { dialogProps, handleAdd, handleEdit, editForm } = useFormDialog({
			onConfirm: handleAddOrEdit,
			defaultFormParams: {
			id: '',
			settlementAmount: null as number,
			actualSettlementAmount: null as number,
			receiveAccount: '',
			bank: '',
			bankBranch: '',
			},
			});

			function openDialog(row?: API.GetSettlementTaskUsersQueryResultItem) {
			if (row) {
			handleEdit({
			id: row?.id,
			settlementAmount: row?.settlementAmount ?? null,
			actualSettlementAmount: row?.actualSettlementAmount ?? null,
			receiveAccount: row?.receiveAccount ?? '',
			bank: row?.bank ?? '',
			bankBranch: row?.bankBranch ?? '',
			});
			}
			}

			onMounted(() => {
			getList();
			async function handleAddOrEdit() {
			try {
			let params: API.EditTaskSettlementOrderRosterCommand = {
			id: editForm.id,
			settlementAmount: editForm.settlementAmount,
			actualSettlementAmount: editForm.actualSettlementAmount,
			receiveAccount: editForm.receiveAccount,
			bank: editForm.bank,
			bankBranch: editForm.bankBranch,
			};
			let res = await taskServices.editTaskSettlementOrderRoster(params);
			if (res) {
			Message.successMessage('操作成功');
			refetch();
			getList(paginationState.pageIndex);
			}
			} catch (error) {}
			}

			function handleUploadSuccess(response: UploadUserFile & { file: File & { uid: number } }) {
			if (response.path) {
			importTaskSettlementOrderRosters(response.path);
			}
			}

			async function importTaskSettlementOrderRosters(url: string) {
			try {
			let params: API.ImportTaskSettlementOrderRostersCommand = {
			id: id,
			url: url,
			};
			let res = await taskServices.importTaskSettlementOrderRosters(params);
			if (res) {
			Message.successMessage('操作成功');
			refetch();
			getList(paginationState.pageIndex);
			if (res?.errors?.length > 0) {
			Message.tipMessage('存在导入错误的数据，是否导出？').then(() => {
			XLSXUtils.exportToXLSX({
			workbookDataList: res.errors,
			fileName: '结算导入-错误数据',
			workbookHeaderMap: {
			name: '姓名',
			identity: '身份证号',
			taskName: '任务名称',
			settlementAmount: '结算金额',
			actualSettlementAmount: '实发金额',
			receiveAccount: '收款账户',
			bank: '所属银行',
			bankBranch: '开户支行名称',
			errorMessage: '错误信息',
			},
			});
			});
			}
			}
			} catch (error) {
			} finally {
			form.settlementUrl = [] as UploadUserFile[];
			}
			}

			function handleSubmit() {
			handleSettleEdit({
			id: id,
			name: form.name,
			code: form.code,
			settlementUserCount: form.settlementTaskUsers.length,
			actualSettlementAmount: form.actualSettlementAmount,
			});
			}

			const {
			dialogProps: dialogSettleProps,
			handleEdit: handleSettleEdit,
			editForm: settleEditForm,
			} = useFormDialog({
			onConfirm: handleSettle,
			defaultFormParams: {
			id: '',
			name: '',
			code: '',
			settlementUserCount: 0,
			actualSettlementAmount: 0,
			},
			});

			async function handleSettle() {
			sureTaskSettlementOrder();
			}

			async function sureTaskSettlementOrder() {
			try {
			let params: API.SureTaskSettlementCommand = {
			taskInfoId: id,
			};
			let res = await taskServices.sureTaskSettlement(params);
			if (res) {
			Message.successMessage('操作成功');
			eventContext.emit('sureTaskSettlementOrder');
			handleBack();
			}
			} catch (error) {}
			}

			const handleExport = _.debounce(
			async () => {
			if (paginationState.total === 0) {
			Message.warnMessage('没有数据可以导出哦~');
			return;
			}
			try {
			let params: API.ExportTaskSettlementOrderRostersCommand = {
			id: id,
			};
			let res = await taskServices.exportTaskSettlementOrderRosters(params);
			if (res) {
			downloadFileByUrl(setOSSLink(res), `${form.name}-${form.code}`);
			}
			} catch (error) {}
			},
			1000,
			{ leading: true, trailing: false }
			);

			function handleBack() {
			closeViewPush(route, {
			name: 'ServiceChargeManageList',
			});
			}
			</script>

			<style lang="scss" scoped>
			@@ -222,6 +444,14 @@
			margin: 0 auto;
			padding: 24px 0;
			}

			.settlement-user-list-chunk {
			:deep() {
			.no-data img {
			width: 280px;
			}
			}
			}
			</style>
			<style lang="scss">
			.text-over-tooltip-content {