Browse Source

时间控件开发完成

linehang 6 years ago
parent
commit
7a41742e4e
2 changed files with 150 additions and 43 deletions
  1. 37 1
      app/recover/css/new_recover.css
  2. 113 42
      app/recover/html/new_recover.html

+ 37 - 1
app/recover/css/new_recover.css

@ -14,6 +14,7 @@ p {margin-bottom: 0; margin-top: 0;}
.re-title{border-bottom:solid 1px #ededed;}
.lh28 {line-height: 28px;}
.plr5 {padding-left: 5px; padding-right: 5px;}
.pl56 {padding-left: 56px;}
.c-12b7f5 {color: #12b7f5;)}
.bgc-12b7f5 {background-color: #12b7f5;}
.bgc-e1e1e1 {background-color: #e1e1e1;}
@ -36,6 +37,7 @@ p {margin-bottom: 0; margin-top: 0;}
	height: 80px;
}
.w300 {width: 300px;}
.maxw600 {max-width: 600px;}
.c-h100 {height: 100%;}
.c-h100-41 {height: calc(100% - 41px);}
.c-h100-99 {height: calc(100% - 99px);}
@ -102,6 +104,7 @@ ul {
}
.bgc-4dcd70 {background-color: #4dcd70;}
.bgc-55cefc {background-color: #55cefc;}
.bgc-f5f5fa {background-color: #f5f5fa;}
.c-red {color: red;}
.sub-tap {
	width: 18px;
@ -155,4 +158,37 @@ ul {
}
.f-w500 {
	font-weight: 500;
}
}
.el-date-editor .el-range-input {
	height: 24px;
	line-height: 24px;
	border: 0px;
	background-color: transparent;
	cursor: pointer;
}
.el-input__inner {
	height: 24px;
	line-height: 24px;
	border: 0px;
	background-color: transparent;
	cursor: pointer;
}
.el-input__icon {
	line-height: 24px;
	cursor: pointer;
}
.el-date-editor .el-range__icon, .el-date-editor .el-range-separator, .el-date-editor .el-range__close-icon {
	line-height: 18px;
}
.el-date-editor .el-range-input::-webkit-input-placeholder, .el-input__inner::-webkit-input-placeholder {
   color: #12b7f5;
}
.el-date-editor.el-input, .el-date-editor.el-input__inner {
	width: 90px;
}
.el-input--suffix .el-input__inner {
	padding-right: 0px;
}
.el-date-editor.el-range-editor.el-input__inner.el-date-editor--daterange {
	width: 220px;
}

+ 113 - 42
app/recover/html/new_recover.html

@ -6,6 +6,7 @@
		<link rel="stylesheet" type="text/css" href="../../../css/cross.css" />
		<link rel="stylesheet" type="text/css" href="../../../css/cross.ui.css" />
		<link rel="stylesheet" type="text/css" href="../../../css/style.min.css" />
		<link rel="stylesheet" type="text/css" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
		<link rel="stylesheet" type="text/css" href="../css/new_recover.css" />
	</head>
	<body class="m0">
@ -93,8 +94,8 @@
		        						<div class="fl w-100-78 c-333">
		        							<p class="m0 p0 mb10 txt-ells cur-pit" @click="lookProject(detail)">{{detail.specialistServiceItemDO.title}}</p>
	        								<div class="clearfix">
	        									<p class="m0 mb5 mr20 p0 fl"><span class="c-999">医&emsp;&emsp;院:</span>{{detail.hospitalName}}</p>
	        									<div class="m0 mb5 mr20 p0 fl clearfix">
	        									<p class="w300 m0 mb5 p0 fl"><span class="c-999">医&emsp;&emsp;院:</span>{{detail.hospitalName}}</p>
	        									<div class="m0 mb5  p0 fl clearfix">
	        										<span class="fl c-999">执行人员:</span>
	        										<div class="fl c-position-r w100">
	        											<p class="m0 p0 plr10 c-border cur-pit set-xia" :class="{'set-shang':detail.selectDoc}" @click="changeSelectDoc(index, detail.selectDoc)">{{detail.executeDoctorName}}</p>
@ -103,15 +104,30 @@
	        											</ul>
	        										</div>
	        									</div>
	        									<p class="m0 mb5 p0 fl"><span class="c-999">费&emsp;&emsp;用:</span>{{detail.expense}}{{detail.specialistServiceItemDO.unit}}</p>
	        								</div>
		        							<div class="m0 p0 lh18 clearfix">
        										<span class="fl c-999">计划时间:</span>
        										<p class="fl lh18 mb5 mr20 clearfix" v-for="(time, ind) in detail.specialistServiceItemDO.executeTime" :key="ind" v-if="detail.specialistServiceItemDO.executeTime.length">
        											<span class="fl">{{time}}</span><span class="fl ml5 c-red cur-pit" @click="spliceTimeArr(index, ind)">删除</span>
        										</p>
        										<span class="fl c-12b7f5 cur-pit calendar" contenteditable="true" readonly @keyup="setfont()" @keydown="setfont()" @mousedown="selectTime(index)" class=flatpickr data-enable-time=true data-time_24hr=true>{{surefont}}</span>
        										<span class="fl c-12b7f5 cur-pit ml10" v-show="sureIndex == index">确定</span>
		        								<div class="w300 fl clearfix">
	        										<span class="fl c-999">计划时间:</span>
	        										<div class="fl set-label clearfix">
	        											<span class="fl mr20 pl20 c-f14 cur-pit" :class="{'active': detail.selectDate == 1}" @click="changeSelectDate(index, 1)">日期</span>
	        											<span class="fl mr20 pl20 c-f14 cur-pit" :class="{'active': detail.selectDate == 2}" @click="changeSelectDate(index, 2)">周期</span>
	        										</div>
        										</div>
        										<p class="m0 p0 fl"><span class="c-999">费&emsp;&emsp;用:</span>{{detail.expense}}{{detail.specialistServiceItemDO.unit}}</p>
        									</div>
        									<div class="pl56">
        										<div class="maxw600 ptb10 bgc-f5f5fa" v-if="detail.selectDate == 1">
        											<p class="fl pl10 lh24 mb5 mr20 clearfix" v-for="(time, ind) in detail.specialistServiceItemDO.executeTime" :key="ind" v-if="detail.specialistServiceItemDO.executeTime.length">
	        											<span class="fl pb10">{{time}}</span><span class="fl pb10 ml5 c-red cur-pit" @click="spliceTimeArr(index, ind)">删除</span>
	        										</p>
        											<el-date-picker type="date" v-model="detail.value14"  value-format="yyyy-MM-dd" @input="getSelectDate(index)" placeholder="选择日期"></el-date-picker>
        										</div>
        										<div class="maxw600 ptb10 bgc-f5f5fa" v-if="detail.selectDate == 2">
        											<p class="lh24 pl10 mb5 mr20 clearfix" v-for="(time, ind) in detail.specialistServiceItemDO.selectDateRange" :key="ind" v-if="detail.specialistServiceItemDO.selectDateRange.length">
	        											<span class="pb10 mr10">{{time.startTime}}</span>至<span class="pb10 ml10">{{time.endTime}}</span><span class="pb10 ml5 c-red cur-pit" @click="spliceTimeRange(index, ind)">删除</span>
	        										</p>
        											<el-date-picker v-model="detail.value14" type="daterange" value-format="yyyy-MM-dd" @input="getRandgeDate(index)" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
        										</div>
        									</div>
		        						</div>
		        						<div class='fr w60 c-t-right clearfix'>
@ -180,9 +196,7 @@
        <script src="../../../js/es6-promise.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/underscore.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/util.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" href="../../../js/flatpickr/flatpickr.min.css">
		<script src="../../../js/flatpickr/flatpickr.min.js"></script>
		<script src="../../../js/flatpickr/flatpickr.l10n.zh.js"></script>
		<script src="https://unpkg.com/element-ui/lib/index.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../api/http-request.js" type="text/javascript"></script>
		<script src="../../../api/recover_api.js" type="text/javascript"></script>
		<script type="text/javascript">
@ -212,9 +226,6 @@
					icon: 6
				})
			}
			// 初始化加载flatpickr插件
//			$(".calendar").flatpickr();
			
			recoverVue = new Vue({
                el: "#app",
                data: {
@ -227,7 +238,6 @@
                	patiInfo: null,
                	diseaseObj: null,
                	mubanList: [],
                	sureIndex: null,
                	templateDetail: [],
                	templateResult: [],
                	allFee: 0,
@ -272,7 +282,6 @@
							layer.close(loadding)
							if(res.status == 200) {
								vm.patiInfo = res.data
								console.log(vm.patiInfo)
								vm.pati.patientName = res.data.name
								vm.jDlist = [{
									name: vm.patiInfo.ssDoctorName || vm.patiInfo.jtDoctorName,
@ -363,7 +372,10 @@
														if(o3.serviceItemId == o1.serviceItemId) {
															o3.isSelect = true
															o3.selectDoc = false
															o3.selectDate = 1
															o3.value14 = null
															o3.specialistServiceItemDO.executeTime = []
															o3.specialistServiceItemDO.selectDateRange = []
															if(o3.flag == 2) {
																o3.executeDoctor = vm.zDlist[0].code
																o3.executeDoctorName = vm.zDlist[0].name
@ -456,7 +468,10 @@
                		}
                		this.selectProjectDetail.isSelect = true
                		this.selectProjectDetail.selectDoc = false
                		this.selectProjectDetail.selectDate = 1
						this.selectProjectDetail.value14 = null
                		this.selectProjectDetail.specialistServiceItemDO.executeTime = []
                		this.selectProjectDetail.specialistServiceItemDO.selectDateRange = []
						if(this.selectProjectDetail.flag == 2) {
							this.selectProjectDetail.executeDoctor = this.zDlist[0].code
							this.selectProjectDetail.executeDoctorName = this.zDlist[0].name
@ -469,9 +484,6 @@
                		this.templateDetail.push(this.selectProjectDetail)
                		this.projectList[index].item[index2].hospitalServiceItems[index3] = this.selectProjectDetail
                	},
                	setfont: function() {
                		this.surefont = "添加"
                	},
                	// 查看项目
                	lookProject: function(o) {
                		selectPatientIndex = layer.open({
@ -485,6 +497,7 @@
							content: "select-project.html?projectId=" + o.id
						});
                	},
                	// 选择居民
                	selectPatient: function() {
                		selectPatientIndex = layer.open({
							type: 2,
@ -497,6 +510,7 @@
							content: "select-patient.html"
						});
                	},
                	// 选择居民回调
                	selectPatientOk: function(pati) {
                		this.isPlan = false
                		this.allFee = 0
@ -505,6 +519,7 @@
                		this.getPatientInfo()
                		this.findTemplateList()
                	},
                	// 添加模板
                	addMuban: function(oId) {
                		var vm = this
                		selectDiseaseIndex = layer.open({
@ -518,6 +533,7 @@
							content: "select-disease.html?teamCode=" + vm.pati.teamCode +"&templateId=" + oId || ''
						});
                	},
                	// 取消计划
                	canclePlan: function(obj) {
                		var vm = this
                		cancleIndex = layer.open({
@ -558,38 +574,87 @@
                		this.labelIndex = index
                		this.labelCode = label.code
                	},
                	selectTime: function(index) {
                		var currentEle = $(event.target),
                			vm = this;
                		this.sureIndex = index
                		currentEle.flatpickr({
                			locale: 'zh',
                			defaultDate: currentEle.val(),
                			minDate: "today",
                			enableTime: true,
                			onOpen: function(obj, str) {
                				currentEle.val(str)
                			},
                			onClose: function(obj, str) {
                				vm.sureIndex = null
                				if(!str) {
                					return false;
                				}
                				vm.templateDetail[index].specialistServiceItemDO.executeTime.push(str)
                				vm.allFee = vm.add(vm.allFee, vm.templateDetail[index].expense)
                			}
                		})
                	changeSelectDate: function(index, num) {
                		if(this.templateDetail[index].specialistServiceItemDO.executeTime.length) {
                			showWarningMessage("请先清除此选项的计划时间!");
                			return false;
                		}
                		this.isTest = !this.isTest
                		this.templateDetail[index].selectDate = num
                	},
                	openSelectTime: function(index) {
                		var vm = this
                		selectTimeIndex = layer.open({
							type: 2,
							area: ['600px', '500px'],
							shade: 0.5,
							title: '服务时间选择',
							closeBtn: 1,
							shift: 5,
							shadeClose: false, //点击遮罩关闭层
							content: "select_timer.html"
						});
                	},
                	// 选择日期
                	getSelectDate: function(index) {
                		var str = this.templateDetail[index].value14
                		this.templateDetail[index].specialistServiceItemDO.executeTime.push(str)
                		this.templateDetail[index].value14 = null
                		this.allFee = this.add(this.allFee, this.templateDetail[index].expense)
                	},
                	// 选择周期
                	getRandgeDate: function(index) {
                		var arr = this.templateDetail[index].value14,
                			startTime = new Date(arr[0]).getTime(),
                			endTime = new Date(arr[1]).getTime(),
                			absTime = endTime - startTime,
                			oneday = 60 * 60 *24 * 1000,
                			i = 0;
                		for(i; i * oneday <= absTime; i++) {
                			var num = i * oneday + startTime,
                				str = new Date(num).format("yyyy-MM-dd")
                			this.templateDetail[index].specialistServiceItemDO.executeTime.push(str)
	                		this.allFee = this.add(this.allFee, this.templateDetail[index].expense)
                		}
                		var obj = {
                			startTime: arr[0],
                			endTime: arr[1],
                			length: i
                		}
                		this.templateDetail[index].specialistServiceItemDO.selectDateRange.push(obj)
                		this.templateDetail[index].value14 = null
                	},
                	spliceTimeArr: function(index, ind) {
                		var vm = this
                		this.templateDetail[index].specialistServiceItemDO.executeTime.splice(ind, 1)
                		vm.allFee = vm.sub(vm.allFee, vm.templateDetail[index].expense)
                	},
                	spliceTimeRange: function(index, ind) {
                		var startPos = 0,
                			len = this.templateDetail[index].specialistServiceItemDO.selectDateRange[ind].length,
                			vm = this
                		for(var i = 0; i < ind; i++) {
                			startPos += this.templateDetail[index].specialistServiceItemDO.selectDateRange[i].length
                		}
                		this.templateDetail[index].specialistServiceItemDO.selectDateRange.splice(ind, 1)
                		this.templateDetail[index].specialistServiceItemDO.executeTime.splice(startPos, len)
                		vm.allFee = vm.sub(vm.allFee, vm.mul(vm.templateDetail[index].expense, len))
                	},
                	createRehabilitationPlan: function() {
                		if(!Number(this.allFee)) {
                			showWarningMessage("请选择计划时间!")
                			return false;
                		}
                		for(var k = 0; k < this.templateDetail.length; k++) {
                			for(var i = 0; i < this.templateDetail[k].specialistServiceItemDO.executeTime.length; i++) {
		    					for(var j = i + 1; j < this.templateDetail[k].specialistServiceItemDO.executeTime.length; j++) {
		    						if(this.templateDetail[k].specialistServiceItemDO.executeTime[i] == this.templateDetail[k].specialistServiceItemDO.executeTime[j]) {
		    							showWarningMessage("请核对项目“" + this.templateDetail[k].specialistServiceItemDO.title + "”的计划时间选择!");
		    							return false;
		    						}
		    					}
		    				}
                		}
                		var vm = this,
			    			loadding = layer.load(0, {shade: false}),
			    			data = {
@ -606,12 +671,17 @@
			    			params = {};
			    		$.each(vm.templateDetail, function(index, o) {
			    			if(o.specialistServiceItemDO.executeTime.length) {
			    				var executeTime = []
			    				$.each(o.specialistServiceItemDO.executeTime, function(ind, v) {
			    					v += ' 00:00'
			    					executeTime.push(v)
			    				});
			    				var obj = {
			    					hospitalServiceItemId: o.id,
			    					type: o.flag == 2 ? 2 : 1,
			    					doctor: o.executeDoctor,
			    					doctorName: o.executeDoctorName,
			    					executeTime: o.specialistServiceItemDO.executeTime.join(",")
			    					executeTime: executeTime.join(",")
			    				}
			    				data.detail.push(obj)
			    			}
@ -631,6 +701,7 @@
							}
						})
    				},
    				// 字符串方法计算加减乘除(精确度百分位)
               		add: function(num1,num2){
			            var r1,r2,m,n;
			            try{r1=num1.toString().split(".")[1].length}catch(e){r1=0}