PC-application/component/guidance/person-edit-panel.js

var PersonEditPanel = {
    template: '<div>\
    			<div style="height: 34px;" >\
		    		指导模板\
		    		<div class="save-btn ml10" @click="save" v-show="sendMode">\
		    		保存\
		    		</div>\
		    		<div class="delete-btn ml10" @click="deleteTemplate" v-show="editable && !sendMode">\
		    		删除\
		    		</div>\
		    	</div>\
		    	<div class="temp-info c-f14">\
		    		<div class="temp-name pl10 ptb10">\
		    			模板名称：<input v-model="modelName" placeholder="请输入模板名称( 10字内 )" class="c-f14" maxlength="10"/>\
		    		</div>\
		    		<div class="c-position-r">\
		    			<textarea @input="countWord" v-model="content" class="ptb10 plr10" style="border: 0;width: 100%;box-sizing: border-box;height: 180px;"></textarea>\
		    			<div class="c-t-right mr10 mb5 c-909090">{{count}}/{{words}}</div>\
		    		</div>\
		    	</div>\
		    	<div class="img-wrap mt20 c-f14">\
	    			<div>插入图片<span class="c-909090">（{{imgs.length}}/9）</span></div>\
	    			<div class="clearfix">\
	    				<div class="c-position-r fl mr15 mt20" v-for="(url,i) in imgs">\
				            <img class="upload_img" :src="url" width="65" height="65">\
				            <div class="delete-icon" @click="removeImg(url,i)"><img src="../../../images/delete_icon.png" width="18"></div>\
			            </div>\
	    				<img-upload @uploaded="imgUploaded" v-show="imgs.length<9"></img-upload>\
            		</div>\
	    		</div>\
	    		<div class="foot-btns" >\
	    			<a class="preview-btn c-t-center mr15" @click="preview" v-show="editable || sendMode">\
		    			预览\
		    		</a>\
		    		<a class="send-btn c-t-center" @click="save" v-show="editable && !sendMode">\
		    			保存\
		    		</a>\
		    		<a class="send-btn c-t-center" @click="sendTemplate" v-show="sendMode">\
		    			发送\
		    		</a>\
		    	</div>\
    </div>',
	beforeRouteEnter: function(to, from, next) {
	    next(function(vm) {
	      	var query = vm.$route.query
	    	vm.modelCode = query.modelCode
	    	if(!storage.patient && !query.patient) {
	    		vm.sendMode = false
	    	} else {
	    		storage.patient = storage.patient || query.patient
	    		storage.planId = storage.planId || query.planId
	    		vm.sendMode = true
	    	}
	    	
	    	if(vm.modelCode && from.path != "/preview-panel") {
	    		vm.editable = true
	    		vm.listDetail()
	    	}
	    })
	},
    props: [],
    data: function() {
        return {
			words: 1000,
			count: 0,
			content: "",
			modelName: "",
			imgs: [],
			modelCode: "",
			editable: true,
			sendMode: false // 根据url中是否携带patient来判断是否是"发送"模式
        }
    },
    mounted: function() {
    	var vm = this
    	EventBus.$emit('active-nav-tab', 0)
    },
    methods: {
        countWord: function() {
        	if(this.content.length <= this.words) {
        		this.count = this.content.length
        	} else {
        		this.content = this.content.slice(0, this.words)	
        	}
        },
        listDetail: function() {
        	var vm = this
        	guidanceAPI.listDetail({
        		modelCode: vm.modelCode
        	}).then(function(res) {
        		var data = res.data
        		if(data) {
        			vm.content = data.content
        			vm.modelName = data.modelName
        			vm.imgs = _.map(data.imagesUrls, function(s) {
        				return httpRequest.getImgUrl(s)
        			})
        		}
        	})
        },
        imgUploaded: function(url) {
        	var vm = this
        	vm.imgs.push(httpRequest.getImgUrl(url))
        },
        removeImg: function(url, idx) {
        	var vm = this
        	vm.imgs.splice(idx, 1)
        },
        save: function() {
        	var vm = this
        	if(!vm.modelCode) {
        		toastr && toastr.error("请选择模板")
        		return
        	}
        	if(!vm.modelName) {
        		toastr && toastr.error("模板名称不能为空")
        		return
        	}
        	if(!vm.content) {
        		toastr && toastr.error("模板内容不能为空")
        		return
        	}
        	guidanceAPI.modifyTemplate({
	            content: vm.content,
	            modelName: vm.modelName,
	            imagesUrl: vm.imgs.join(','),
	            code: vm.modelCode
        	}).then(function(res) {
        		if(res.status == 200) {
        			toastr && toastr.success("保存成功")
        			EventBus.$emit('refresh-person-panel')
        		}
        	}).catch(function(e) {
        		console.error(e)
        	})
        },
        deleteTemplate: function() {
        	var vm = this
        	var d = dialog({
        		width: 350,
				title: '删除模板',
				content: '删除后无法恢复,是否确认删除?',
				okValue: '确定',
				ok: function () {
					guidanceAPI.deleteTemplate( { code: vm.modelCode}).then(function(res) {
        				toastr && toastr.success("删除成功")
        				vm.editable = false
        				EventBus.$emit('refresh-person-panel')
		        	}).catch(function(e) {
		        		console.error(e)
		        	})
				},
				cancelValue: '取消',
				cancel: function () {}
			});
			d.showModal();
        	
        },
        sendTemplate: function() {
        	var vm = this
            if(!vm.modelName) {
        		toastr && toastr.error("模板名称不能为空")
        		return
        	}
        	if(!vm.content) {
        		toastr && toastr.error("模板内容不能为空")
        		return
        	}
            var d = dialog({
            	width: 350,
				content: '发出后无法变更，是否确认发送给居民？',
				okValue: '继续发送',
				ok: function () {
					guidanceAPI.sendTemplate( {
		                patient: storage.patient,
		                content: vm.content,
		                modelCode: vm.modelCode,
		                images: vm.imgs.join(',')
		            }).then(function(res) {
        				toastr && toastr.success("发送成功")
        				
        				var obj = {
        					rehabilitationDetailId: storage.planId,
				            patientCode: storage.patient,
				            // patientName: patientName,
				            doctorCode: storage.docInfo.code,
				            doctorName: storage.docInfo.name,
				            relationRecordType: 2, //健康指导
				            relationRecordCode: res.data.id
        				}
        				guidanceAPI.saveRehabilitationOperateRecord({
        					dataJson: JSON.stringify(obj)
        				}).then(function(res) {
        					if(res.status == 200) {
        						var index = parent.layer && parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
								parent.layer && parent.layer.close(index)
        					} else {
        						toastr && toastr.success(res.msg)
        					}
        				})
        				
		        	}).catch(function(e) {
		        		console.error(e)
		        	})
				},
				cancelValue: '取消',
				cancel: function () {}
			});
			d.showModal();
			
        },
        preview: function() {
        	var vm = this
			
			var query = {
        		modelCode: vm.modelCode,
        		patient: storage.patient || "",
        		timestemp: $.now()
        	}
        	this.$router.push({path:'/preview-panel',query:query})
        }
    },
    watch: {
    '$route': function (to, from) {
    	var vm = this
      	var query = vm.$route.query
    	if(query && query.modelCode && from.path == "/person-edit-panel" && to.path == "/person-edit-panel") {
    		vm.modelCode = query.modelCode
    		vm.editable = true
    		vm.listDetail()
    	}
    	
    	if(storage.patient) {
    		vm.sendMode = true
    	} else {
    		vm.sendMode = false
    	}
    	
    	if(to.path == "/preview-panel") {
    		EventBus.$emit('preview-template', {
    			content: vm.content,
	            modelName: vm.modelName,
	            imgs: vm.imgs
    		})
    	}
    },
    'content': function(v) {
    	this.countWord()
    }
  }
}