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

var TeamNewtPanel = {
    template: '<div>\
		    	<div class="temp-info c-f14">\
		    		<div @click="saveAsPersonTemplate" class="save-btn ml10" v-if="sendMode" style="width: 150px;">\
		    		保存为个人模板\
		    		</div>\
		    		<div class="temp-name pl10 ptb10">\
		    			模板名称：<input v-model="modelName" placeholder="请输入模板名称( 10字内 )" class="c-f14" maxlength="10"/>\
		    		</div>\
		    		<div class="team-name pl10 ptb10">\
		    			所属团队：<select v-model="selectedTeam" class="c-f14" style="border:0;" @change="selectTeam">\
		    						<option value=""></option>\
		    						<option v-for="(team, i) in teams" :value="i">{{team.teamName}}</option>\
		    					</select>\
		    		</div>\
		    		<div class="label-name pl10 ptb10 list-arrow-r" :class="{\'list-arrow-r\': !labelsDropdown, \'list-arrow-d\': labelsDropdown}">\
		    			<div @click="labelsDropdown = !labelsDropdown">指导标签：{{selectedLabel && selectedLabel.name}}</div>\
		    			<ul v-show="labelsDropdown" class="c-list msg-list clearfix">\
			    			<li @click="selectLabel(label)" v-for="(label, i) in labelList"  :class="{\'active-icon\': label.active}" class="c-list-li ">\
								<div>\
									<span>{{label.name}}</span>\
								</div>\
							</li>\
						</ul>\
		    		</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="send-btn c-t-center" @click="save" v-show="!sendMode">\
		    			保存\
		    		</a>\
		    		<a class="send-btn c-t-center" @click="sendTeamTemplate" v-show="sendMode">\
		    			发送\
		    		</a>\
		    	</div>\
    </div>',

    props: [],
    data: function() {
        return {
			words: 1000,
			count: 0,
			content: "",
			modelName: "",
			imgs: [],
			modelCode: "",
			teamId: "",
			teamTemplateCode: "",
			teams: [],
			labelsDropdown: false,
			selectedLabel: null,
			labelList: [],
			selectedTeam: "",
			sendMode: false // 根据url中是否携带patient来判断是否是"发送"模式
        }
    },

    computed: {
    },
    created: function() {
    	var vm = this
    	vm.findDoctorLeaderTeam().then(function(res) {
    		vm.teams = res.teamList
    	})
    	
    },
    mounted: function() {
    	EventBus.$emit('active-nav-tab', 1)
    },
    methods: {
        countWord: function() {
        	if(this.content.length <= this.words) {
        		this.count = this.content.length
        	} else {
        		this.content = this.content.slice(0, this.words)	
        	}
        },
        findDoctorLeaderTeam: function() {
        	return guidanceAPI.findDoctorLeaderTeam()
        },
        selectTeam: function() {
        	var vm = this
        	if(vm.selectedTeam !== '') {
        		vm.teamId = vm.teams[vm.selectedTeam].teamId
        		vm.findAllLabelList()
        	}
        },
        findAllLabelList: function() {
        	var vm = this
        	return guidanceAPI.findAllLabelList({
        		teamId: vm.teamId
        	}).then(function(res) {
        		var selected = null
        		var label = vm.selectedLabel? vm.selectedLabel.name: '未分组'
        		selected = _.filter(res.data, function(o) {
    				return o.name == label
    			})
    			if(selected[0]) {
    				selected[0].active = true
    				vm.selectedLabel = selected[0]
    			}
    			
    			vm.labelList = res.data
        	}).catch(function(e){
        		console.error(e)
        	})
        },
        selectLabel: function(label) {
        	var vm = this
        	vm.selectedLabel && (vm.selectedLabel.active = false)
        	label.active = true
        	vm.selectedLabel = label
        	vm.labelsDropdown = false
        },
        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.modelName) {
        		toastr && toastr.error("模板名称不能为空")
        		return
        	}
        	if(vm.selectedTeam === '') {
        		toastr && toastr.error("请选择所属团队")
        		return
        	}
        	if(!vm.content) {
        		toastr && toastr.error("模板内容不能为空")
        		return
        	}
			
			var param = {
	            content: vm.content,
				title: vm.modelName,
				images: vm.imgs.join(','),
				teamInfo: vm.teams&&JSON.stringify(vm.teams)||""
        	}
        	
        	if(vm.selectedLabel && vm.selectedLabel.code) {
        		param.labelCode = vm.selectedLabel.code
        	}
        	
        	guidanceAPI.saveTeamGuidance(param).then(function(res) {
        		if(res.status == 200) {
        			toastr && toastr.success("保存成功")
        			EventBus.$emit('refresh-team-panel')
        		}
        	}).catch(function(e) {
        		console.error(e)
        	})
        },
        saveAsPersonTemplate: 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)
        	})
        },
        sendTeamTemplate: function() {

        	var vm = this
            if(!vm.modelName) {
        		toastr && toastr.error("模板名称不能为空")
        		return
        	}
        	if(!vm.content) {
        		toastr && toastr.error("模板内容不能为空")
        		return
        	}
        	
        	var team = _.filter(vm.teams, function(o) {
	    		return o.teamId == vm.teamId
	    	})
        	
        	if(!team.length) {
        		// 匹配不了说明医生修改了指导所属的 团队，并且入口团队并不在选中的列表中。则默认选择选中团队中的第一个团队来发送
        		team = [vm.teams[0]]
        	}
        	
            var d = dialog({
            	width: 350,
				content: '发出后无法变更，是否确认发送给居民？',
				okValue: '继续发送',
				ok: function () {
					guidanceAPI.sendTemplate( {
		        		patient: storage.patient,
		                content: vm.content,
		                guidanceCode: vm.teamTemplateCode,
		                images: vm.imgs.join(','),
						teamId: JSON.stringify(team)
		        	}).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
    	if(to.path == "/preview-panel") {
    		EventBus.$emit('preview-template', {
    			content: vm.content,
	            modelName: vm.modelName,
	            imgs: vm.imgs
    		})
    	}
    },
    'content': function(v) {
    	this.countWord()
    }
  }
}