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

var PersonNewPanel = {
    template: '<div>\
    			<div style="height: 34px;" >\
		    		指导模板\
		    		<div @click="save" class="save-btn ml10" v-if="sendMode" style="width: 150px;">\
		    		保存为个人模板\
		    		</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">\
		    			预览\
		    		</a>\
		    		<a class="new-btn c-t-center" @click="save" v-show="!sendMode">\
		    			新增\
		    		</a>\
		    		<a class="send-btn c-t-center" @click="sendTemplate" v-show="sendMode">\
		    			发送\
		    		</a>\
	    		</div>\
    </div>',
    props: [],
    beforeRouteEnter: function(to, from, next) {
	    next(function(vm) {
	      	var query = vm.$route.query
	    	if(!storage.patient && !query.patient) {
	    		vm.sendMode = false
	    	} else {
	    		storage.patient = storage.patient || query.patient
	    		vm.sendMode = true
	    	}
	    })
	},
    data: function() {
        return {
			words: 1000,
			count: 0,
			content: "",
			modelName: "",
			imgs: [],
			sendMode: false // 根据url中是否携带patient来判断是否是"发送"模式
        }
    },
    mounted: function() {
    	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)	
        	}
        },
        imgUploaded: function(url) {
        	var vm = this
        	vm.imgs.push(url)
        },
        save: function() {
        	var vm = this
        	if(!vm.modelName) {
        		toastr && toastr.error("模板名称不能为空")
        		return
        	}
        	if(!vm.content) {
        		toastr && toastr.error("模板内容不能为空")
        		return
        	}
        	
        	var param = {
	            content: vm.content,
	            modelName: vm.modelName
        	}
        	
        	var img = vm.imgs.join(',').trim()
        	
        	if(img) {
        		param.imagesUrl = img
        	}
        	guidanceAPI.newTemplate(param).then(function(res) {
        		if(res.status == 200) {
        			toastr && toastr.success("保存成功")
        			EventBus.$emit('refresh-person-panel')
        		} else {
        			toastr && toastr.error(res.msg)
        		}
        	}).catch(function(e) {
        		console.error(e)
        	})
        },
        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("发送成功")
		        	}).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(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()
	    }
    }
}