lh-mobile/pages/jiance/order/lhypbMessage.vue

<template>
	<view>
		<view class="u-m-20">
			<u-form :model="form" ref="form" label-width="220" :error-type="errorType">
				<u-form-item label="样品名称" prop="yangPinMingCheng" required>
					<u-input placeholder="请输入样品名称" v-model="form.yangPinMingCheng" />
				</u-form-item>
				<u-form-item label="样品编号">
					<u-input placeholder="请输入样品编号" v-model="form.yangPinBianHao" disabled />
				</u-form-item>
				<u-form-item label="姓名">
					<u-input placeholder="请输入姓名" v-model="form.xingMing" />
				</u-form-item>
				<u-form-item label="性别">
					<u-radio-group v-model="form.xingBie">
						<u-radio v-for="(it, index) in sexList" :key="index" :name="it.name">
							{{it.name}}
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item label="年龄">
					<u-input placeholder="请输入年龄" v-model="form.nianLing" />
				</u-form-item>
				<u-form-item label="送检批号/编号" prop="songJianPiHao" required>
					<u-input placeholder="请输入送检批号/编号" v-model="form.songJianPiHao" />
				</u-form-item>
				<u-form-item label="样本状态" prop="yangPinZhuangTai" required>
					<u-input placeholder="请选择样本状态" type="select" v-model="form.yangPinZhuangTai"
						@click="sheetClick('state')" />
				</u-form-item>
				<u-form-item label="送检时间" prop="songJianShiJian" required>
					<u-input placeholder="请选择送检时间" type="select" v-model="form.songJianShiJian"
						@click="dateClick('inspect')" />
				</u-form-item>
				<u-form-item label="备注">
					<u-input placeholder="请输入备注" v-model="form.beiZhu1" />
				</u-form-item>

				<view class="qingshe" style="background-color: #99cc66;">
					<view class="qingTitle" style="color: #FFFFFF;">
						常规项目选择
					</view>
				</view>

				<u-form-item label="检测类型">
					<u-input placeholder="请选择检测类型" type="select" v-model="form.jianCeType"
						@click="selectClick('jianCeType')" />
				</u-form-item>

				<u-form-item label="检测项目" prop="name" label-position="top">
					<checkbox-group v-for="(it, x) in form.jianCeList" :key="x" @click="changeIndex(it,x)">
						<label class=" uni-list-cell uni-list-cell-pd"
							v-show="(it.jian_ce_lei_bie_==form.jianCeType) || it.checked"
							style="display: flex;margin: 15rpx 10rpx;font-size: 20rpx;line-height: 40rpx;">
							<view>
								<checkbox :checked="it.checked" :value="it.id_" />
							</view>
							<view style="margin-left: 10rpx;font-size: 28rpx;">
								<view>
									{{it.jian_ce_lei_bie_ || ''}}-{{it.jian_ce_xiang_mu_ || ''}}
									<text style="color: red;">[{{it.zhe_hou_jia_ge_ || '当'}}元]</text>
								</view>
								<view>{{it.yi_ju_de_biao_zhu || ''}}</view>
								<view>报告周期（工作日）:{{it.bao_gao_zhou_qi_g || '当'}}天</view>
								<view>送样要求:{{it.yang_pin_tiao_jia || ''}}</view>
							</view>
						</label>
					</checkbox-group>
				</u-form-item>

				<view class="qingshe" style="background-color: #99cc66;">
					<view class="qingTitle" style="color: #FFFFFF;">
						套餐选择
					</view>
				</view>

				<u-form-item label="选择套餐" prop="name" label-position="top">
					<checkbox-group v-for="(it, x) in form.taoCanList" :key="x" @click="changeTaoCanIndex(it,x)">
						<label class=" uni-list-cell uni-list-cell-pd"
							style="display: flex;align-items: center;margin: 15rpx 10rpx;font-size: 20rpx;line-height: 40rpx;">
							<view>
								<checkbox :checked="it.checked" :value="it.id_" />
							</view>
							<view style="margin-left: 10rpx;font-size: 28rpx;">
								<view>
									{{it.tao_can_ming_chen || ''}}
								</view>
							</view>
						</label>
					</checkbox-group>
				</u-form-item>

				<view class="qingshe" @click="form.showBoolean1 = !form.showBoolean1">
					<view>
						①
					</view>
					<view>
						<u-icon name="arrow-up" v-if="form.showBoolean1"></u-icon>
						<u-icon name="arrow-down" v-else></u-icon>
					</view>
				</view>
				<block v-if="form.showBoolean1">
					<u-form-item label="样品类型①">
						<u-input placeholder="请选择样品类型①" type="select" v-model="form.yangPinLeiXing"
							@click="sheetClick('yangpinType1')" />
					</u-form-item>
					<u-form-item label="样品运输条件①">
						<u-input placeholder="请选择样品运输条件①" type="select" v-model="form.yangBenYunShuTiao"
							@click="sheetClick('transportType1')" />
					</u-form-item>
					<u-form-item label="数量①">
						<uni-number-box v-model="form.shuLiang"></uni-number-box>
					</u-form-item>
					<u-form-item label="样品规格①">
						<u-input placeholder="请输入样品规格①" v-model="form.yangPinGuiGe" />
						<u-button slot="right" type="success" size="mini" @click="sheetClick('specification1')">规格
						</u-button>
					</u-form-item>
				</block>

				<view class="qingshe" @click="form.showBoolean2 = !form.showBoolean2">
					<view>
						②
					</view>
					<view>
						<u-icon name="arrow-up" v-if="form.showBoolean2"></u-icon>
						<u-icon name="arrow-down" v-else></u-icon>
					</view>
				</view>
				<block v-if="form.showBoolean2">
					<u-form-item label="样品类型②">
						<u-input placeholder="请选择样品类型②" type="select" v-model="form.yangPinLeiXingEr"
							@click="sheetClick('yangpinType2')" />
					</u-form-item>
					<u-form-item label="样品运输条件②">
						<u-input placeholder="请选择样品运输条件②" type="select" v-model="form.yangPinYunShuTiao"
							@click="sheetClick('transportType2')" />
					</u-form-item>
					<u-form-item label="数量②">
						<uni-number-box v-model="form.shuLiangEr"></uni-number-box>
					</u-form-item>
					<u-form-item label="样品规格②">
						<u-input placeholder="请输入样品规格②" v-model="form.yangPinGuiGeEr" />
						<u-button slot="right" type="success" size="mini" @click="sheetClick('specification2')">规格
						</u-button>
					</u-form-item>
				</block>

				<view class="qingshe" @click="form.showBoolean3 = !form.showBoolean3">
					<view>
						③
					</view>
					<view>
						<u-icon name="arrow-up" v-if="form.showBoolean3"></u-icon>
						<u-icon name="arrow-down" v-else></u-icon>
					</view>
				</view>
				<block v-if="form.showBoolean3">
					<u-form-item label="样品类型③">
						<u-input placeholder="请选择样品类型③" type="select" v-model="form.yangPinLeiXingSan"
							@click="sheetClick('yangpinType3')" />
					</u-form-item>
					<u-form-item label="样品运输条件③">
						<u-input placeholder="请选择样品运输条件③" type="select" v-model="form.yangPinYunShuSan"
							@click="sheetClick('transportType3')" />
					</u-form-item>
					<u-form-item label="数量③">
						<uni-number-box v-model="form.shuLiangSan"></uni-number-box>
					</u-form-item>
					<u-form-item label="样品规格③">
						<u-input placeholder="请输入样品规格③" v-model="form.yangPinGuiGeSan" />
						<u-button slot="right" type="success" size="mini" @click="sheetClick('specification3')">规格
						</u-button>
					</u-form-item>
				</block>

				<view class="qingshe" @click="form.showBoolean4 = !form.showBoolean4">
					<view>
						④
					</view>
					<view>
						<u-icon name="arrow-up" v-if="form.showBoolean4"></u-icon>
						<u-icon name="arrow-down" v-else></u-icon>
					</view>
				</view>
				<block v-if="form.showBoolean4">
					<u-form-item label="样品类型④">
						<u-input placeholder="请选择样品类型④" type="select" v-model="form.yangPinLeiXingSi"
							@click="sheetClick('yangpinType4')" />
					</u-form-item>
					<u-form-item label="样品运输条件④">
						<u-input placeholder="请选择样品运输条件④" type="select" v-model="form.yangPinYunShuSi"
							@click="sheetClick('transportType4')" />
					</u-form-item>
					<u-form-item label="数量④">
						<uni-number-box v-model="form.shuLiangSi"></uni-number-box>
					</u-form-item>
					<u-form-item label="样品规格④">
						<u-input placeholder="请输入样品规格④" v-model="form.yangPinGuiGeSi" />
						<u-button slot="right" type="success" size="mini" @click="sheetClick('specification4')">规格
						</u-button>
					</u-form-item>
				</block>
				<u-form-item label="项目名称" prop="xiangMuMingCheng" v-if="form.weiTuoHeTong == '技术服务协议'">
					<u-input placeholder="请输入项目名称" v-model="form.xiangMuMingCheng" />
				</u-form-item>
				<u-form-item label="样品总价" prop="yangPinZongJia">
					<u-input v-model="form.yangPinZongJia" disabled />
				</u-form-item>
			</u-form>
			<view style="height: 220rpx;"></view>

			<view class="btnBottom">
				<u-button type="error" class="btn" @click="deletSing">取消
				</u-button>
				<u-button type="error" class="btn" @click="sumbitSing">保存
				</u-button>
			</view>
		</view>

		<u-action-sheet :list="list" v-model="sheetShow" @click="actionSheetCallback" z-index="2000">
		</u-action-sheet>
		<u-select v-model="selectShow" :list="list" @confirm="selectConfirm"></u-select>
		<u-calendar v-model="dateShow" :mode="mode" max-date="2050-01-01" @change="dateChange"></u-calendar>

	</view>
</template>

<script>
	import order from './test.json'
	export default {
		props: {
			jianCeTypeList: {
				type: Array,
				default: () => {
					return []
				}
			}
		},
		data() {
			return {
				errorType: ['toast'],
				form: {

				},
				//样本状态
				sampleStateList: order.sampleState,
				sexList: order.sex,
				//样本类型
				sampleTypeList: order.sampleType,
				//样本运输条件
				transportTypeList: order.transportType,
				//样本规格
				specificationList: order.specification,
				list: [],
				listType: '',
				sheetShow: false,
				selectShow: false,
				dateShow: false,
				mode: 'date',
				type: "",
				rules: {
					yangPinMingCheng: [{
						required: true,
						message: '请输入样品名称',
						trigger: 'blur',
					}],
					songJianPiHao: [{
						required: true,
						message: '请输入送检批号/编号',
						trigger: 'blur',
					}],
					yangPinZhuangTai: [{
						required: true,
						message: '请输入样本状态',
						trigger: 'blur',
					}],
					songJianShiJian: [{
						required: true,
						message: '请输入送检时间',
						trigger: 'blur',
					}],
				}
			}
		},
		onReady() {
			this.$refs.form.setRules(this.rules);
		},
		methods: {
			getInit(data) {
				this.form = data
			},
			changeIndex(it, x) {
				let itemData = this.form
				this.form.jianCeList[x].checked = !this.form.jianCeList[x].checked

				let show = itemData.jianCeList.some(item => item.id_ == '1039826037036285952' || item.id_ ==
					'1040205909151711232')

				if (show) {
					itemData.mingChengShow = true
				}
				this.getTotal()
			},
			changeTaoCanIndex(it, x) {
				let itemData = this.form
				this.form.taoCanList[x].checked = !this.form.taoCanList[x].checked
				this.getTotal()
			},
			getTotal() {
				var itemTotal = 0
				this.form.jianCeList.forEach((it, x) => {
					if (it.checked) {
						itemTotal += parseFloat(it.zhe_hou_jia_ge_ || 0)
					}
				})
				this.form.yangPinZongJia = (itemTotal).toFixed(2)
			},
			selectClick(type) {
				this.listType = type
				this.selectShow = true
				if (type == 'jianCeType') {
					this.list = this.jianCeTypeList
				}
			},
			sheetClick(type) {
				this.listType = type
				this.sheetShow = true
				if (type == 'state') {
					this.list = this.sampleStateList
				}

				//1
				if (type.includes('yangpinType')) {
					this.list = this.sampleTypeList
				}
				if (type.includes('transportType')) {
					this.list = this.transportTypeList
				}
				if (type.includes('specification')) {
					this.list = this.specificationList
				}
				if (type == 'disposition') {
					this.list = this.dispositionList
				}
			},

			//下拉框回调
			actionSheetCallback(e) {
				let that = this
				let lists = that.form

				if (this.listType == 'state') {
					lists.yangPinZhuangTai = this.list[e].text
				}

				//1
				if (this.listType == 'yangpinType1') {
					lists.yangPinLeiXing = that.list[e].text
				}
				if (this.listType == 'transportType1') {
					lists.yangBenYunShuTiao = that.list[e].text
				}
				if (this.listType == 'specification1') {
					lists.yangPinGuiGe = that.list[e].text
				}

				//2
				if (this.listType == 'yangpinType2') {
					lists.yangPinLeiXingEr = that.list[e].text
				}
				if (this.listType == 'transportType2') {
					lists.yangPinYunShuTiao = that.list[e].text
				}
				if (this.listType == 'specification2') {
					lists.yangPinGuiGeEr = that.list[e].text
				}

				//3
				if (this.listType == 'yangpinType3') {
					lists.yangPinLeiXingSan = that.list[e].text
				}
				if (this.listType == 'transportType3') {
					lists.yangPinYunShuSan = that.list[e].text
				}
				if (this.listType == 'specification3') {
					lists.yangPinGuiGeSan = that.list[e].text
				}

				//3
				if (this.listType == 'yangpinType4') {
					lists.yangPinLeiXingSi = that.list[e].text
				}
				if (this.listType == 'transportType4') {
					lists.yangPinYunShuSi = that.list[e].text
				}
				if (this.listType == 'specification4') {
					lists.yangPinGuiGeSi = that.list[e].text
				}

				if (this.listType == 'disposition') {
					this.form.yangBenChuLi = this.list[e].text
				}

			},
			//调用日期组件
			dateClick(type) {
				if (type == 'inspect') {
					this.type = type
					this.mode = 'date'
					this.dateShow = true
				}
			},
			//日期回调
			dateChange(e) {
				if (this.type == 'inspect') {
					this.form.songJianShiJian = e.result
				}
			},

			deletSing() {
				this.$emit("deletClick")
			},
			sumbitSing() {
				if (this.form.yangPinZongJia == '') {
					this.form.yangPinZongJia = 0
				}
				// let showIndex = this.form.lhypb.findIndex(item => item.jianCeXiangMu == '')
				// if (showIndex >= 0) {
				// 	uni.showToast({
				// 		title: `请在样品信息${showIndex+1}选择委托单需要检测项目`,
				// 		icon: 'none',
				// 		duration: 2000
				// 	})
				// 	return
				// }
				this.$refs.form.validate(valid => {
					if (valid) {
						this.$emit("sumbitSingClick", this.form)
					} else {
						uni.showToast({
							title: '必填项未填写',
							icon: 'none',
							duration: 2000
						})
					}
				});

			}
		}
	}
</script>

<style lang="scss" scoped>
	.qingshe {
		background-color: #f0f9eb;
		color: #67c23a;
		padding: 15rpx 20rpx;
		border-radius: 8rpx;

		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 25rpx;
	}

	.btnBottom {
		z-index: 1500;
		height: 220rpx;
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;


		.btn {
			margin: 20rpx;
		}
	}
</style>