179crm_user_app/pages_user/user/editIndicator.vue

<template>
	<view class="content">
		<view class="top-fixed">
			<view class="search-cont">
				<view class="inner2">
					<image class="icon-search" src="/static/images/search.png" mode=""></image>
					<input type="text" v-model="keyword" placeholder="请输入想要搜索的指标" confirm-type="search" @confirm="doSearch" placeholder-style="font-size:28rpx;color:#BBBBBB;font-family: PingFang SC;" />
				</view>
			</view>
			<!-- <u-search bgColor="#F5F7FA" placeholder="请输入想要搜索的指标" v-model="keyword" :showAction="false" @c></u-search> -->
		</view>
		<view class="inner">
			<view class="title-box align-center justify-between">
				已添加指标(按住左侧按钮拖动排序)
			</view>
			<view class="form-box">
				<drag-sorts :listData="listData" :itemHeight="100" :scrollBoxHeight="600" :isAdd="false" @draged="ed"
				 @itemDisabledClick='onDisabledClick'/>
			</view>
			<view class="title-box">
				用户自设(长按制除)
			</view>
			<view class="form-box">
				<drag-sorts :showDragCtrl="false" :listData="dataList" :itemHeight="100" :scrollBoxHeight="800"
					:isRemove="false" @draged="ed2"  @itemAddClick='onAddClick' @itemRemoveClick="onRemove"  @navClick='navTo'/>
			</view>

		</view>
		<view class="h20"></view>
		<view class="btn-box2">
			<view class="sub-btn2" @click="navgetTo(orderStatusValue)">
				<image src="/static/images/health/nav_add_icon24.png" class="w48 h48"></image>
				<text>新增自定义指标</text>
			</view>
			<!-- <view class="sub-btn" @click="navgetTo(orderStatusValue)">
				<text>保存</text>
			</view> -->
		</view>
	</view>
</template>

<script>
	import dragSorts from '@/components/w-drag-sorts/w-drag-sorts.vue'
	import {
		getPage,
		updateIndicator,
		deleteIndicator,
		listEnabled,
		listByReport,
		listAllEnabledByReportId,
		addResult,
		deleteResult
	} from '@/api/companyUser.js'
	export default {
		components: {
			dragSorts
		},
		data() {
			return {
				curDate: '',
				markDays: [],
				type: null,
				keyword: '',
				patientId: null,
				famaleurl: "/static/images/health/female_profile.png",
				maleurl: "/static/images/health/my_heads.png",
				checked: 1,
				dataList: [],
				listData: [
					// {
					// id:1,
					//            icon: '/static/images/苹果.png', //不传该属性，则不显示也不占位
					//            text: '大血小板比率(P-LCR)'
					//          },
					//          {
					// 		  id:2,
					//            icon: '/static/images/雪梨.png',
					//            text: '血小板体积分布宽度(PDW)'
					//          },
					//          {
					// 		  id:6,
					//            icon: '/static/images/橙子.png',
					//            text: '平均血小板体积(MPV)'
					//          },
					//          {
					// 		  id:5,
					//            icon: '/static/images/香蕉.png',
					//            text: '血小板压积(PCT)'
					//          },
					// 	  {
					// 		  id:4,
					// 	    icon: '/static/images/香蕉.png',
					// 	    text: '血小板压积(PCT)'
					// 	  },
					// 	  {
					// 		  id:3,
					// 	    icon: '/static/images/香蕉.png',
					// 	    text: '血小板压积(PCT)'
					// 	  },
				],
				form: {
						"abnormalType": "",
						"indicatorCateId": 0,
						"indicatorId": 0,
						"indicatorName": "",
						"isAbnormal": 0,
						"refRange": "",
						"remarks": "",
						// "reportId": 0,
						// "resultId": 0,
						"testResult": "",
						// "testValue": 0,
						"unitName": "",
						
				},
				reportId:null,
			};
		},
		onLoad(options) {
            console.log(options,'o')
			if(options.id){
				this.reportId=options.id
				this.listAllEnabledByReportId()
				this.listByReport()
			}
			uni.$on('refreshEditIndicator', () => {
				this.listAllEnabledByReportId()
				this.listByReport()
				// this.getPage()
			})
			// this.getPage()

		},
		onShow() {

		},
		methods: {
			doSearch(){
				// this.getPage()
			},
			//日历
			onDayClick(data) {
				this.curDate = data.date;
			},
			navgetTo() {
				uni.navigateTo({
					url: '/pages_user/user/addIndicator?type=add'
				})
			},
			navTo(index,item){
				uni.navigateTo({
					url: '/pages_user/user/addIndicator?type=edit&id='+item.indicatorId
				})
			},
			listByReport() {
				listByReport(this.reportId).then(
					res => {
						if (res.code == 200) {
							this.listData = res.data;
			                // uni.$emit('refreshInformation');
						} else {
							uni.showToast({
								title: res.msg,
							});
						}
					},
					rej => {}
				);
			},
			listAllEnabledByReportId() {
				var data={
					reportId:this.reportId
				}
				listAllEnabledByReportId(data).then(
					res => {
						if (res.code == 200) {
							this.dataList = res.data
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg,
							});
						}
					},
					rej => {}
				);
			},
			// getPage() {
			// 	var data = {
			// 		indicatorName:this.keyword,
			// 		pageNum: 1,
			// 		pageSize: 100
			// 	}
			// 	getPage(data).then(
			// 		res => {
			// 			if (res.code == 200) {
			// 				this.dataList = res.data.list
			// 			} else {
			// 				uni.showToast({
			// 					icon: 'none',
			// 					title: res.msg,
			// 				});
			// 			}
			// 		},
			// 		rej => {}
			// 	);
			// },
			//排序后的数组
			ed(list) {
				if (list) {
					this.listData = list
				}
			},
			ed2(list) {
				if (list) {
					this.listData = list
				}
			},
			onItemIconClick(index, item) {

			},
			onDisabledClick(index, item) {
				this.listData = this.listData.filter(it => it.indicatorId !== item.indicatorId)
				this.updateResult(item.resultId)
			},
			onAddClick(index, item) {
				this.dataList = this.dataList.filter(it => it.indicatorId !== item.indicatorId)
				// 遍历item的属性，赋值到form（而非遍历form的属性）
				   // for(var key in this.form){
					  //  this.form[key]=item[key]
				   // }
				   const data = {
				         ...this.form, // 保留表单默认值
				         indicatorId: item.indicatorId || 0,
				         indicatorName: item.indicatorName || "",
				         indicatorCateId: Number(item.indicatorCategory) || 0, // 转换为数字类型
                         "remarks": "",
						 unitId: item.unitId,
						 "abnormalType": "",
				         // 处理参考范围（合并min和max为refRange）
				         refRange: item.referenceMin !== null && item.referenceMax !== null ? `${item.referenceMin}-${item.referenceMax}` : (item.referenceText || ""),
				         // 其他字段保持表单默认值或根据需要映射
				         isAbnormal: 0, // 异常状态需要根据测量值和参考范围计算
						  reportId: this.reportId  // 添加reportId
				       };
				this.addResult(data)
			},
			addResult(data) {
				addResult(data).then(
					res => {
						if (res.code == 200) {
							uni.showToast({
								icon: 'success',
								title: "操作成功",
							});
							// this.getPage();
							this.listByReport();
							this.listAllEnabledByReportId()
							uni.$emit('refreshInformation');
							// setTimeout(function() {
								
							// 	uni.navigateBack({
							// 		delta: 1
							// 	})
							// }, 500);
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg,
							});
						}
					},
					rej => {}
				);
			},
			updateResult(id) {
				deleteResult(id).then(
					res => {
						if (res.code == 200) {
							uni.showToast({
								icon: 'success',
								title: "操作成功",
							});
							this.listByReport();
							this.listAllEnabledByReportId()
							uni.$emit('refreshInformation');
							// setTimeout(function() {
								
							// 	uni.navigateBack({
							// 		delta: 1
							// 	})
							// }, 500);
							// this.getPage();
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg,
							});
						}
					},
					rej => {}
				);
			},
			onRemove(index,item) {
				console.log(item,'item')
				var that = this
				uni.showModal({
					title: '提示',
					content: '确定删除指标吗',
					success: function(res) {
						if (res.confirm) {
							deleteIndicator(item.indicatorId).then(res => {
								if (res.code == 200) {
									uni.showToast({
										icon: 'success',
										title: '删除成功！',
									});
									// that.listEnabled()
									that.listAllEnabledByReportId()
								} else {
									uni.showToast({
										icon: 'none',
										title: res.msg,
									});
								}
							});
						} else if (res.cancel) {

						}
					}
				});
			},
			// 出生日期选择
			bindDateChange: function(e) {
				this.form.birthday = e.target.value
			},
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		background: #F5F7FA;
	}

	.content {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.top-fixed {
			position: fixed;
			top: 0;
			background: #FFFFFF;
			padding: 20rpx;
			width: 100%;
			box-sizing: border-box;
			z-index: 999;
		}
		.search-cont{
			// padding: 16upx 30upx;
			.inner2{
				box-sizing: border-box;
				width: 100%;
				height: 72upx;
				background: #F5F7FA;
				border-radius: 36upx;
				display: flex;
				align-items: center;
				padding: 0 30upx;
				.icon-search{
					width: 28upx;
					height: 28upx;
					margin-right: 20upx;
				}
				input{
					height: 60upx;
					line-height: 60upx;
					flex: 1;
				}
			}
		}

		.inner {
			// height: calc(100% - 120upx);
			padding: 0 20upx;
			padding-top: 110rpx;
			padding-bottom: 200rpx;

			.title-box {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #898E91;
				text-align: left;
				padding: 24rpx 0;

				.select-box {
					display: flex;
					align-items: center;
					justify-content: center;

					text {
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #626468;
						margin-left: 8rpx;
					}
				}

				.select-box2 {
					width: 216rpx;
					height: 64rpx;
					background: #FFFFFF;
					border-radius: 32rpx 32rpx 32rpx 32rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					text {
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #626468;
						margin-left: 5rpx;
					}
				}

			}

			.form-box {
				// padding: 0 30upx;
				background: #FFFFFF;
				border-radius: 16upx;
				overflow: hidden;
				// margin-bottom: 20upx;

				.form-title {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #626468;
					text-align: left;
					padding: 30rpx 0;
					display: block;
				}

				.form-item {
					padding: 30upx 0;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1px solid #F1F1F1;

					&:last-child {
						border-bottom: none;
					}

					.left {
						display: flex;
						flex-direction: column;
						align-items: flex-start;

						.time {
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #898E91;
							text-align: left;
						}
					}

					.check {

						display: flex;
						align-items: center;
						justify-content: center;

						text {
							// font-family: PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #008FD3;
							margin-left: 16rpx;
						}
					}

					.label {
						// width: 150upx;
						text-align: left;
						font-weight: 500;
						font-size: 32rpx;
						color: #222426;
						text-align: left;
					}

					.num {
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 32rpx;
						color: #222426;
						line-height: 34rpx;
						display: flex;
						align-items: center;
					}
				}
			}
		}

		.btn-box2 {
			z-index: 9999;
			width: 100%;
			padding: 30upx;
			position: fixed;
			bottom: 0;
			left: 0;
			box-sizing: border-box;
			background: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 40rpx;

			.sub-btn {
				flex: 1;
				// width: 100%;
				height: 88upx;
				line-height: 88upx;
				text-align: center;
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				background: #008FD3;
				border-radius: 44upx;
				display: flex;
				align-items: center;
				border: 2rpx solid #008FD3;
				justify-content: center;

			}

			.sub-btn2 {
				flex: auto;
				height: 88upx;
				line-height: 88upx;
				display: flex;
				align-items: center;
				justify-content: center;
				text-align: center;
				font-size: 32rpx;
				color: #fff;
				font-family: PingFang SC;
				font-weight: bold;
				background: #FF5030;
				border-radius: 44rpx 44rpx 44rpx 44rpx;
				margin-right: 20rpx;

				image {
					margin-right: 16rpx;
				}
			}
		}
	}
</style>