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 class="phone-form-label"><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 :info="data.kehu" @select-kehu="onSelectKehu"></kehuCardVue>
			<!-- 家政人员 -->
			<jiazhengCardVue :info="data.jiazheng" @select-jzry="onSelectJzry"></jiazhengCardVue>
			<!-- 合同信息 -->
			<hetongCardVue :info="data.hetong" @fuwuleixing="onSelectFuwuLeixing"></hetongCardVue>
			<!-- 其他约定 -->
			<qiTaYueDingVue :info="data.qita" @qita="handleUpQita"></qiTaYueDingVue>
			<!-- 家政签名 -->
			<qianMingVue :info="data.qianming" @qianming="handleQianming"></qianMingVue>
		</view>
		
		<view class="sfht-info-btn-box">
			<button type="default" class="phone-green-btn">保存</button>
		</view>


		<!-- <button @click="handleSelct('kh')">选择客户</button>
	<button @click="handleSelct('jz')">选择家政</button> -->


	</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 jiazhengCardVue from "./components/jiazhengCard.vue";
	import kehuCardVue from "./components/kehuCard.vue";
	import qianMingVue from "./components/qianMing.vue";
	import qiTaYueDingVue from "./components/qiTaYueDing.vue";

	import {
		useHetong
	} from "./useHetong.js"

	const {
		provideHetong
	} = useHetong()

	const emits = defineEmits('select-kehu')

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

	// 穿透式传参
	provideHetong(data)

	const jzRef = ref(null)

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

	function goUpPage() {
		uni.navigateBack()
	}

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

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

	function onSelectKehu(da) {
		data.kehu = da;
	}

	function onSelectJzry(da) {
		data.jiazheng = da;
	}

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

	function handleUpQita(da) {
		data.qita = da;
	}

	function onSelectFuwuLeixing(da) {
		data.hetong.leixing = da.value;
	}

	onLoad(() => {
		getMoban();
	})
</script>

<style>

</style>