uniProject/pages/admin/Hetong/addSanfangHetong.vue

<template>
	<view class="sfht-info-page">
		<view class="icon-title-navBar-box">
			<view @click="goUpPage" class="nav-bar-icon"></view>
			<text class="nav-bar-title">新增三方合同</text>
		</view>
		<!-- form -->
		<view class="sfht-form-box">
			<!-- 合同模板 -->
			<view class="form-label-select form-radius-box">
				<view @click="handlePreviewPdf" class="phone-form-label" v-if="data.mobanIndex != null" style="color: #3fd2a1;"><text class="form-label-require"></text>合同模板预览</view>
				<view @click="handlePreviewPdf" class="phone-form-label" v-else><text class="form-label-require"></text>合同模板</view>
				<picker :range="data.mobanList" mode='selector' :value="data.mobanIndex" range-key="name"
					@change="onMobanSelect" class="select-picker-box">
					<view class="form-radio-select">
						<view v-if="data.mobanList[data.mobanIndex]">{{ data.mobanList[data.mobanIndex].name}}</view>
						<icon></icon>
					</view>
				</picker>
			</view>

			<!-- 客户信息 -->
			<kehuCardVue></kehuCardVue>

			<template v-if="data.mobanIndex == 0">

				<!-- 合同信息 -->
				<hetongCardVue></hetongCardVue>
				<!-- 其他约定 -->
				<qiTaYueDingVue></qiTaYueDingVue>
				<!-- 家政签名 -->
				<qianMingVue></qianMingVue>

			</template>

			<common-dialog ref="commonDialogRef" title="提示" :showQuxiao="false" content="请完善社会信用代码与服务监督热线"
				@confirm-btn="handleConfirm"></common-dialog>
		</view>

		<view class="sfht-info-btn-box">
			<button type="default" class="phone-green-btn" @click="handleAdd"
				v-if="data.type == 'addHetong'">创建合同</button>
			<button type="default" class="phone-green-btn" @click="handleUpdate"
				v-if="data.type == 'editorHetong'">更新合同</button>
		</view>


		<pdfPreviewVue ref="pdfRef"></pdfPreviewVue>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		nextTick
	} from "vue";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import * as httpApi from "@/api/sanfang.js"

	import hetongCardVue from "./components/hetongCard.vue";
	import kehuCardVue from "./components/kehuCard.vue";
	import qianMingVue from "./components/qianMing.vue";
	import qiTaYueDingVue from "./components/qiTaYueDing.vue";
	import commonDialog from '@/components/dialog/commonDialog.vue';
	import pdfPreviewVue from "./components/pdfPreview.vue";
	import {toast} from "@/utils/common.js"

	import {
		useHetong
	} from "./useHetong.js"
	import {
		getSanfangInfo
	} from "../../../api/sanfang";

	const {
		provideHetong
	} = useHetong()

	const emits = defineEmits('select-kehu')

	const data = reactive({
		mobanList: [],
		mobanIndex: null,
		hetong: {
			htId: null, // 合同模板id
			baochou: '', // 基本月报酬
			qita: '', // 其他服务
			bingren: '', // 病人病情
			dizhi: '', // 服务地址
			fafangri: '', // 工资发放日
			fangshi: 1, // 服务方式，1住家型，2非住家型
			fsShijian: '', // 非住家型服务时间
			fuwufei: '', // 服务费
			fuwufeiRate: '', // 服务费百分比
			fzHaizi: '', // 辅助照顾孩子人数
			fzHzNianling: '', // 辅助照顾孩子年龄
			huli: '', // 产妇护理
			jiabingEndDate: '', // 甲丙服务结束时间
			jiabingStartDate: '', // 甲丙服务开始时间
			jiandurexian: '', // 服务监督热线
			jiayiEndDate: '', // 甲乙服务结束时间
			jiayiStartDate: '', // 甲乙服务开始时间
			khId: '', // 客户ID
			khName: '', // 客户姓名
			khIdcard: '', // 客户身份证号
			laoren: '', // 照顾老人人数
			leixing: 1, // 服务类型，1普通家务保姆，2钟点工保姆，3育儿嫂，4其他
			lrnianling: '', // 照顾老人年龄: 60,70,80
			lxName: '', // 其他服务类型名称
			mianji: '', // 住房面积
			qzHaizi: '', // 全职照顾孩子人数
			qzHzNianliang: '', // 全职照顾孩子年龄
			realName: '', // 家政姓名
			renkou: '', // 常驻人口数
			tianshu: '', // 基本月报酬天数
			userId: '', // 家政员ID
			xinyongdaima: '', // 统一社会信用代码
			xiuxi: '', // 休息天数
			khUserName: '', // 客户电话
			shentiqingkuang: 0, // 身体状态，1 能自理 ，2半自理， 3不能自理
			beizhu: '', // 备注
			qianmingBase64: '',
			id: null,
			jutidizhi: '',
		},
		type: null,
		timer: null
	})

	const commonDialogRef = ref(null)

	// 穿透式传参
	provideHetong(data)

	const jzRef = ref(null)
	const pdfRef = ref(null)

	function handleSelct(code) {
		if (code == 'kh') {
			khRef.value.handleShow();
		} else {
			jzRef.value.handleShow();
		}
	}

	function handlePreviewPdf() {
		const id = data.mobanList[data.mobanIndex] && data.mobanList[data.mobanIndex].id;
		
		if (id) {
			uni.showLoading({title: '加载中...',mask: true})
			httpApi.getHetongSanfangMoban({id: id}).then(res => {
				 pdfRef.value.showPDF(res.data.base64List)
			}).finally(() => {
				uni.hideLoading()
			})
		}
	}

	function goUpPage() {
		uni.navigateBack()
	}

	function getMoban() {
		return httpApi.getMobanList().then(res => {
			data.mobanList = res.data;
			// 初始化默认选中
			data.mobanIndex = 0;
		})
	}

	function onMobanSelect(da) {
		data.mobanIndex = da.detail.value
	}

	function handleQianming(da) {
		data.qianming = da;
	}

	function handleAdd() {
		if (!data.hetong.jiabingStartDate || !data.hetong.jiabingEndDate || !data.hetong.qianmingBase64) {
			toast('请确认合同必填项是否完整')
			return;
		}

		uni.showLoading({
			title: '创建中...',
			mask: true
		});
		const opt = Object.assign({}, {
			...data.hetong,
			htId: data.mobanList[data.mobanIndex].id
		})
		httpApi.getSanfangAdd(opt).then(res => {
			if (res.data) {
				uni.hideLoading()
				uni.showToast({
					title: "创建成功",
					duration: 2000,
					success() {
						setTimeout(() => {
							uni.navigateBack()
						}, 2000)
					}
				})
			}
		}).catch(() => {
			uni.hideLoading()
		}).
		finally(() => {
			clearTimeout(data.timer);
			data.timer = null;
		})
	}

	function handleUpdate() {
		if (!data.hetong.jiabingStartDate || !data.hetong.jiabingEndDate || !data.hetong.qianmingBase64) {
			toast('请确认合同必填项是否完整')
			return;
		}
		uni.showLoading({
			title: '更新中...',
			mask: true
		});
		const opt = Object.assign({}, {
			...data.hetong,
			htId: data.mobanList[data.mobanIndex].id
		})
		httpApi.getSanfangUpdate(opt).then(res => {
			if (res.data) {
				uni.hideLoading()
				uni.showToast({
					title: "更新成功",
					duration: 2000,
					mask: true,
					success() {
						setTimeout(() => {
							uni.navigateBack()
						}, 2000)
					}
				})
			}
		}).catch(() => {
			uni.hideLoading()
		})
	}

	function handleConfirm() {
		uni.redirectTo({
			url: '/pages/admin/my/jzInfo' // 跳转完善
		})
	}

	onLoad((option) => {

		const {
			flag,
			id
		} = option;

		if (flag) {
			data.type = 'editorHetong'
			getMoban().then(() => {
				httpApi.getSanfangInfo({
					id
				}).then(res => {
					Object.assign(data.hetong, res.data)

					console.log('ccccc', res.data)
				})
			})
		} else {
			data.type = 'addHetong'
			httpApi.getSanfangCheck().then(res => {
				if (res.data) {
					getMoban();
				} else {
					commonDialogRef.value.handleShow()
				}
			})
		}
	})
</script>

<style>

</style>