健康指导模板：新增、编辑、删除、发送、预览功能

api/guidance-api.js

@@ -0,0 +1,61 @@
(function(exports) {
    var guidanceAPI = {
		guidanceTempList: function(data) {
			return httpRequest.get("doctor/guidance_temp/list", {data: data})
		},
		getDoctorTeams: function(data) {
			return httpRequest.get("doctor/team/guidance/getDoctorTeams", {data: data})
		},
		findAllListByPage: function(data) {
			return httpRequest.get("doctor/guidance_temp/lable/findAllListByPage", {data: data})
		},
		getTeamGuidanceLabelList: function(data) {
			return httpRequest.get("doctor/team/guidance/getTeamGuidanceLabelList", {data: data})
		},
		getTeamGuidanceListByLabelWithFilter: function(data) {
			return httpRequest.get("doctor/team/guidance/getTeamGuidanceListByLabelWithFilter", {data: data})
		},
		getTeamGuidanceDetail: function(data) {
			return httpRequest.get("doctor/team/guidance/getTeamGuidanceDetail", {data: data})
		},
		listDetail: function(data) {
			return httpRequest.get("doctor/guidance_temp/listDetail", {data: data})
		},
		findDoctorLeaderTeam: function(data) {
			return httpRequest.get("doctor/team/guidance/findDoctorLeaderTeam", {data: data})
		},
		findAllLabelList: function(data) {
			return httpRequest.get("doctor/guidance_temp/lable/findAllList", {data: data})
		},
		modifyTemplate: function(data) {
			return httpRequest.post("doctor/guidance_temp/modify", {data: data})
		},
		modifyTeamGuidance: function(data) {
			return httpRequest.post("doctor/team/guidance/modifyTeamGuidance", {data: data})
		},
		newTemplate: function(data) {
			return httpRequest.post("doctor/guidance_temp/add", {data: data})
		},
		saveTeamGuidance: function(data) {
			return httpRequest.post("doctor/team/guidance/saveTeamGuidance", {data: data})
		},
		deleteTeamGuidance: function(data) {
			return httpRequest.get("doctor/team/guidance/deleteTeamGuidance", {data: data})
		},
		deleteTemplate: function(data) {
			return httpRequest.post("doctor/guidance_temp/delete", {data: data})
		},
		sendTemplate: function(data) {
			return httpRequest.post("doctor/health/guidance/add", {data: data})
		},
		sendTeamGuidance: function(data) {
			return httpRequest.post("doctor/team/guidance/sendTeamGuidance", {data: data})
		},
		saveRehabilitationOperateRecord: function(data) {
			return httpRequest.post("doctor/specialist/rehabilitation/saveRehabilitationOperateRecord", {data: data})
		},
		
		
	}
    exports.guidanceAPI = guidanceAPI;
})(window)

api/home-api.js

@@ -1,5 +1,9 @@
(function(exports) {
    var homeAPI = {}
    var homeAPI = {
    	baseinfo: function(data) {
			return httpRequest.post("doctor/baseinfo", {data: data})
		},
    }
    exports.homeAPI = homeAPI;
})(window)

app/guidance/css/index.css

@@ -0,0 +1,300 @@
html,body,#app {
	margin: 0;
	padding: 0;
	height: 100%;
	color: #333;
}
ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: ".";
    clear: both;
    height: 0;
}
.clearfix {
    zoom: 1;
}
.fl {
	float: left;
}
.fr {
	float: right;
}
#app>.ui-grid, #app>.ui-grid .ui-grid {
	height: 100%;
}
#app>.ui-grid .ui-col-0 {
	width: 340px;
	border-right: 1px solid #d7dce6;
	position: relative;
}
#app>.ui-grid .ui-col-1 {
	position: relative;
	height: -moz-calc(100%);
	height: -webkit-calc(100%);
	height: calc(100%);
	box-sizing: border-box;
}
ul.nav-tab {
	padding-left: 5px;
}
ul.nav-tab::after {
	content: ' ';
	position: absolute;
	border-bottom: 1px solid #d7dce6;
	height: 35px;
	width: 100%;
	left: 0;
	z-index: -1;
}
ul.nav-tab li {
	display: inline-block;
	width: 90px;
	line-height: 34px;
	border: 1px solid #d7dce6;
	margin-left: 3px;
	text-align: center;
	font-size: 14px;
	background-color: #f5f5fa;
	color: #666666;
	cursor: pointer;
}
ul.nav-tab li.active {
	border-bottom: 1px solid #fff;
	color: #12b7f5;
	background-color: #fff;
}
.inp-search {
	border: solid 1px #d7dce6;
	margin: 10px auto;
	width: 300px;
	height: 30px;
	padding-left: 10px;
	box-sizing: border-box;
}
.search-warp {
	position: relative;
}
.search-warp::after {
	content: ' ';
	width: 20px;
	height: 20px;
	position: absolute;
	right: 8px;
	top: 14px;
	display: block;
	background: url(../../../images/sousuo_icon.png) center center / 15px 15px no-repeat;
}
.temp-item  {
	position: relative;
	font-size: 14px;
	line-height: 40px;
	color: #333333;
	border-bottom: 1px solid #d7dce6;
	cursor: pointer;
}
.item-header {
	padding-right: 80px;
}
.list-arrow-r:after,
.list-arrow-d:after {
	position: absolute;
    top: 20px;
    right: 0.75rem;
    margin-top: -0.25rem;
    content: "";
    display: block;
    width: 0.4rem;
    height: 0.4rem;
    border: solid #cdcdcd;
    border-width: 0.1rem 0.1rem 0 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.list-arrow-d:after {
	right: 0.65rem;
    margin-top: -0.4rem;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}
.temp-item .dropdown-item {
	position: relative;
}
.temp-item .dropdown-item:first-child {
	border-top: 1px dashed #d7dce6;
}
.temp-item .dropdown-item:not(:last-child) {
	border-bottom: 1px dashed #d7dce6;
}
.new-temp {
	font-size: 14px;
	color: #12b7f5;
	position: fixed;
	bottom: 15px;
	left: 105px;
	cursor: pointer;
}
.temp-info {
	border: 1px solid #d7dce6;
}
.temp-name,
.team-name,
.label-name {
	position: relative;
	border-bottom: 1px solid #d7dce6;
}
.temp-name input {
	border: 0;
	width: -moz-calc(100% - 80px);
	width: -webkit-calc(100% - 80px);
	width: calc(100% - 80px);
}
.img-items {
	border: 1px solid #d7dce6;
	padding: 10px;
}
.img-items img {
	width: 60px;
	height: 60px;
	vertical-align: middle;
}
.send-btn, .back-btn {
	display: inline-block;
	width: 120px;
	height: 34px;
	line-height: 34px;
	background-color: #12b7f5;
	border-radius: 2px;
	color: #fff;
	cursor: pointer;
}
.foot-btns {
	position: absolute;
	bottom: 10px;
	left: 0;
	width: 100%;
	text-align: center;
}
.preview-btn, .new-btn {
	display: inline-block;
	width: 120px;
	height: 34px;
	line-height: 34px;
	color: #fff;
	cursor: pointer;
}
.back-btn {
	background-color: #12b7f5;
}
.preview-btn {
	background-color: #02cfb9;
}
.new-btn {
	background-color: #12b7f5;
}
.save-btn {
	float: right;
	width: 100px;
	height: 28px; 
	line-height: 28px;
	background-color: #12b7f5; 
	border-radius: 2px;
	color: #fff;
	text-align: center;
	cursor: pointer;
}
.delete-btn {
	float: right;
	width: 100px;
	height: 28px; 
	line-height: 28px;
	background-color: #ff3b30; 
	border-radius: 2px;
	color: #fff;
	text-align: center;
	cursor: pointer;
}
.delete-icon {
	position: absolute;
	top: -8px;
	left: 55px;
	cursor: pointer;
}
.file-upload {
	 width: 65px;
    height: 65px;
    position: absolute;
    opacity: 0;
    font-size: 0;
}
.delete-icon >img {
	background: #fff;
    border-radius: 50%;
}
.label-name .c-list {
	max-height: 100px;
    overflow-y: auto;
}
.c-list .c-list-li {
	height: 28px;
	line-height: 28px;
	float: left;
	display: inline;
	margin: 10px 7px 0 1%;
	padding: 0px 28px;
	border-radius: 15px;
	border: 1px solid #d7dce6;
}
.c-list .active-icon {
	border: 1px solid #12b7f5 ;
}
.item-header.active {
	color: #12b7f5;
}
.preview-wrap {
	height: calc(100% - 50px);
    overflow-y: auto;
}

app/guidance/html/index.html

@@ -0,0 +1,49 @@
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="renderer" content="webkit">
        <meta http-equiv="Cache-Control" content="no-siteapp">
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <title>健康指导</title>
        <meta name="keywords" content="">
        <meta name="description" content="">
        <link rel="shortcut icon" href="../../../favicon.ico">
        <link rel="stylesheet" type="text/css" href="../../../css/cross.css"/>
        <link rel="stylesheet" type="text/css" href="../../../plugins/toastr/toastr.min.css"/>
        <link rel="stylesheet" type="text/css" href="../../../plugins/artDialog/6.0.5/api/css/ui-dialog.css"/>
        <link rel="stylesheet" type="text/css" href="../css/index.css"/>
        <script src="../../../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/jquery-2.2.4.js" type="text/javascript" charset="utf-8"></script>
		<script>
			var EventBus = new Vue();
		</script>
	</head>
	<body>
		<div id="app" >
			<router-view></router-view>
		</div>
		<script src="../../../plugins/toastr/toastr.min.js"></script>
		<script src="../../../plugins/artDialog/6.0.5/api/js/dialog-plus.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../api/http-request.js"></script>
		<script src="../../../js/underscore.js"></script>
		<script src="../../../api/guidance-api.js"></script>
		<script src="../../../js/vue-router.js"></script>
		<script src="../../../component/guidance/index-page.js"></script>
		<script src="../../../component/guidance/nav-tab.js"></script>
		<script src="../../../component/guidance/person-panel.js"></script>
		<script src="../../../component/guidance/system-panel.js"></script>
		<script src="../../../component/guidance/team-panel.js"></script>
		<script src="../../../component/guidance/team-new-panel.js"></script>
		<script src="../../../component/guidance/temp-preview-panel.js"></script>
		<script src="../../../component/guidance/person-new-panel.js"></script>
		<script src="../../../component/guidance/person-edit-panel.js"></script>
		<script src="../../../component/guidance/preview-panel.js"></script>
		<script src="../../../component/guidance/temp-send-panel.js"></script>
		<script src="../../../component/guidance/system-send-panel.js"></script>
		<script src="../../../component/guidance/team-edit-panel.js"></script>
		<script src="../../../component/guidance/img-upload.js"></script>
		<script src="../js/index.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>

app/guidance/js/index.js

@@ -0,0 +1,58 @@
var routes = [
	{ path: '/', component: IndexPage,
	  children: [
	  	{
          path: '/',
          component: PersonEditPanel,
          redirect: 'person-edit-panel'
       },
        {
          path: 'person-new-panel',
          component: PersonNewPanel
        },
        {
          path: 'person-edit-panel',
          component: PersonEditPanel
        },
        {
          path: 'team-new-panel',
          component: TeamNewtPanel
        },
        {
          path: 'team-edit-panel',
          component: TeamEditPanel
        },
        {
          path: 'temp-send-panel',
          component: TempSendPanel
        },
        {
          path: 'system-send-panel',
          component: SystemSendPanel
        },
        {
        	path: 'preview-panel',
          	component: PreviewPanel
        }
      ]
	}
],
router = new VueRouter({
  routes: routes
}),
storage = {
	docInfo: localStorage.getItem('docInfo')?JSON.parse(localStorage.getItem('docInfo')):null,
	patient: null, // url中patient,用来来判断是否是"发送"模式
	planId: null
}
new Vue({
    data: {
    },
    router: router,
    methods: {
        chooseTab: function(val){
            this.selectedTab = val;
        }
    }
}).$mount('#app')

app/home/html/index.html

@@ -11,6 +11,7 @@
        <meta name="description" content="">
        <link rel="shortcut icon" href="../../../favicon.ico">
        <link rel="stylesheet" type="text/css" href="../../../css/cross.css"/>
        <link rel="stylesheet" type="text/css" href="../../../plugins/toastr/toastr.min.css"/>
       <style type="text/css">
       		*{margin: 0;padding: 0;}
       		.flex-box{
@@ -41,6 +42,11 @@
        <frame src="menu.html" noresize="noresize" id="tab">
        <frame src="href:aboutblank;" name="view_frame" id="main" class="p10" noresize="noresize">
    </frameset>-->
     <script src="../../../js/vue.js" type="text/javascript" charset="utf-8"></script>
     <script type="text/javascript" src="../../../js/jquery-2.2.4.js"></script>
     <script src="../../../plugins/layer/layer.min.js"></script>
     <script src="../../../plugins/toastr/toastr.min.js"></script>
     <script src="../../../api/http-request.js"></script>
     <script src="../../../api/home-api.js"></script>
     <script src="../js/index.js"></script>
</html>

app/home/js/index.js

@@ -19,5 +19,14 @@ new Vue({
  el: '#wrapper',
  data: {
    
  },
  created: function() {
  	homeAPI.baseinfo().then(function(res) {
  		if(res.status == 200) {
  			var infoStr = JSON.stringify(res.data);
  			localStorage.setItem("docInfo", infoStr);
  		}
  	})
  }
})
})

component/guidance/img-upload.js

@@ -0,0 +1,39 @@
Vue.component('img-upload', {
    template: '<div class="fl mr15 mt20">\
        			<input ref="imgFile" type="file" name="FileUpload" class="file-upload" @change="addFile">\
                    <img src="../../../images/tianjiatupian_btn.png" width="65">\
                </div>',
    props: [],
    data: function() {
        return {
        }
    },
    methods: {
		addFile: function() {
			var vm = this
			var file = vm.$refs.imgFile.files[0]
			
			if(file && file.size) {
				var formFile = new FormData()
                formFile.append("file", file)
                httpRequest.post('upload/fastDFSImag',{
                	data: formFile,
                	cache: false,//上传文件无需缓存
                    processData: false,//用于对data参数进行序列化处理 这里必须false
                    contentType: false, //必须
                }).then(function(res) {
                	if(res.status == 200) {
                		vm.$emit('uploaded', res.data)
                	} else {
                		toastr && toastr.error(res.msg || "上传失败")
                	}
                }).catch(function(e) {
                	console.error(e)
                })
			}
		}
    }
})

component/guidance/index-page.js

@@ -0,0 +1,26 @@
var IndexPage = {
    template: '<div class="ui-grid">\
    <div class="ui-col-0 pt10">\
				<nav-tab>\
				</nav-tab>\
			</div>\
		    <div class="ui-col-1 ptb10 plr10">\
			    <keep-alive>\
				  <router-view></router-view>\
				</keep-alive>\
		    </div>\
    </div>',
    props: [],
    data: function() {
		return {
		}
    },
    methods: {
    },
    created: function() {
    	var vm = this
    }
}

component/guidance/nav-tab.js

@@ -0,0 +1,70 @@
Vue.component('nav-tab', {
    template: '<div>\
	    			<div>\
		    			<ul class="nav-tab" style="height: 34px;">\
							<li @click="active(0)" :class="{\'active\': activeIdx == 0}">\
								个人模板\
							</li>\
							<li @click="active(1)" :class="{\'active\': activeIdx == 1}">\
								团队模板\
							</li>\
							<li @click="active(2)" :class="{\'active\': activeIdx == 2}">\
								系统模板\
							</li>\
						</ul>\
						<person-panel v-show="activeIdx==0" :activetemplate="activetemplate"></person-panel>\
						<team-panel v-show="activeIdx==1" :activetemplate="activetemplate"></team-panel>\
						<system-panel v-show="activeIdx==2" :activetemplate="activetemplate"></system-panel>\
	    			</div>\
					<div>\
						<div v-if="isLeader && activeIdx == 0" class="new-temp" @click="newPersonTemplate">\
							<img class="c-vam" src="../../../images/tianjia_pre.png" width="20" />\
							<span class="c-vam">新建指导模板</span>\
						</div>\
					</div>\
					<div>\
						<div v-if="isLeader && activeIdx == 1" class="new-temp" @click="newTeamTemplate">\
							<img class="c-vam" src="../../../images/tianjia_pre.png" width="20" />\
							<span class="c-vam">新建指导模板</span>\
						</div>\
					</div>\
    			</div>',
    props: [],
    data: function() {
        return {
        	activeIdx: 0,
        	activetemplate: null,
        	isLeader: storage.docInfo.isLeader
        }
    },
	created: function() {
		var vm = this
		EventBus.$on('active-template', function(template) {
			vm.activetemplate = template
		})
		EventBus.$on('active-nav-tab', function(idx) {
			vm.activeIdx = idx
		})
	},
    methods: {
        active: function(idx) {
        	this.activeIdx = idx
        },
        newPersonTemplate: function() {
        	var query = {
        		patient: storage.patient || "",
        		timestemp: $.now()
        	}
        	this.$router.push({path:'/person-new-panel',query:query})
        },
        newTeamTemplate: function() {
        	var query = {
        		patient: storage.patient || "",
        		timestemp: $.now()
        	}
        	this.$router.push({path:'/team-new-panel',query:query})
        }
    }
})

component/guidance/person-edit-panel.js

@@ -0,0 +1,248 @@
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({
				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({
				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) {
//      						
//      					} 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()
    }
  }
}

component/guidance/person-new-panel.js

@@ -0,0 +1,174 @@
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(httpRequest.getImgUrl(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({
				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()
	    }
    }
}

component/guidance/person-panel.js

@@ -0,0 +1,87 @@
Vue.component('person-panel', {
    template: '<div class="ml20 mr20"">\
					<div class="search-warp">\
						<input class="inp-search" placeholder="查找模板" v-model="filter" @input="throttledTempList()"/>\
					</div>\
					<div ref="innerPanel" style="overflow-y: auto;">\
						<div class="list-arrow-r temp-item" v-for="(o, i) in items">\
							<div @click="showDetail(o)" :class="{\'active\': o == activetemplate}" class="item-header c-nowrap">\
								<span class="c-nowrap">{{o.modelName}}</span>\
							</div>\
						</div>\
					</div>\
					<div>\
					</div>\
				</div>',
    props: ["activetemplate"],
    data: function() {
        return {
        	filter: "",
        	pagesize: 20,
        	pageNo: 1,
        	throttled: null,
        	items: []
        }
    },
    created: function() {
    	var vm = this
		EventBus.$on('refresh-person-panel',function() {
			vm.throttledTempList()
		})
    },
    mounted: function() {
    	var vm = this
    	var el = vm.$refs.innerPanel
    	$(el).height($(window).height() - 140)
    	window.addEventListener('resize', _.debounce(function() {
    		$(el).height($(window).height() - 140)
    	}, 300))
    	
    	el.onscroll = function() {
		    var scrollHeight = el.scrollHeight;
		    var scrollTop = el.scrollTop;
		    var clientHeight = el.clientHeight;
		
		    if (scrollHeight - clientHeight == scrollTop) {
		        vm.guidanceTempList()
		    }
		};
		
		vm.guidanceTempList()
    },
    methods: {
    	throttledTempList: function() {
    		return _.throttle(function() {
    			var vm = this
	    		vm.pageNo = 1
	    		vm.items = []
	    		this.guidanceTempList()
    		}, 300).call(this)
    	},
        guidanceTempList: function() {
        	var vm = this
        	guidanceAPI.guidanceTempList( {
	            type: 2, //模板类型 1:系统 2:自定义 为空:所有
	            pageNo: vm.pageNo,
	            pageSize: vm.pagesize,
	            filter: vm.filter
	        }).then(function(res) {
	        	if(res.data && res.data.length) {
	        		vm.pageNo++;
	        		vm.items = vm.items.concat(res.data)
	        	}
	        })
        },
        showDetail: function(o) {
        	var vm = this
        	EventBus.$emit('active-template', o)
        	
        	var query = {
        		modelCode: o.code,
        		patient: storage.patient||"",
        		timestemp: $.now()
        	}
        	vm.$router.push({path:'/person-edit-panel',query:query})
        }
    }
})

component/guidance/preview-panel.js

@@ -0,0 +1,79 @@
var PreviewPanel = {
    template: '<div class="preview-wrap">\
    			<p class="c-t-center c-bold">{{modelName}}</p>\
    			<div v-html="content" class="mtb10 c-333"></div>\
    			<div v-for="(url,i) in imgs" class="mtb10"><img :src="url" width="100%" /></div>\
    			<div class="foot-btns">\
	    			<a class="back-btn c-t-center mr15" @click="goBack">\
		    			返回\
		    		</a>\
	    		</div>\
    </div>',
    props: [],
    data: function() {
        return {
        	content: "",
        	modelName:"",
        	createTime: "",
        	imgs: []
        }
    },
//  beforeRouteEnter: function (to, from, next) {
//	    next(function(vm) {
//	    	var query = vm.$route.query
//	    	if(query && query.modelCode) {
//	    		vm.modelCode = query.modelCode
//	    		vm.listDetail()
//	    	}
//	    })
//	},
	created: function() {
		var vm = this
		EventBus.$on('preview-template', function(data) {
			var regN = /\n/g;
			vm.content = data.content.replace(regN,"<br/>").replace(/ /g, "&nbsp;");
			vm.modelName = data.modelName
        	vm.imgs = data.imgs
		})
	},
    methods: {
    	listDetail: function() {
        	var vm = this
        	guidanceAPI.listDetail({
        		modelCode: vm.modelCode
        	}).then(function(res) {
        		var data = res.data
        		if(data) {
        			var regN = /\n/g;
        			vm.content = data.content.replace(regN,"<br/>").replace(/ /g, "&nbsp;");
        			vm.modelName = data.modelName
        			vm.createTime = data.createTime
        			vm.imgs = _.map(data.imagesUrls, function(s) {
        				return httpRequest.getImgUrl(s)
        			})
        		}
        	})
        },
        getDetail: function (){
            var regN = /\n/g;
            var regRN = /\r\n/g;
            var content = detail.content.replace(/ /g, "&nbsp;");
            content = content.replace(regN,"<br/>");
            var p = "<p class='c-f14 c-333'>"+content+"</p>",
                images = "";
            for(i=0; i<detail.images.length; i++){
                var src = detail.images[i];
                if(!(src.indexOf("file://") > -1)){
                    src = getImgUrl(detail.images[i]);
                }
                
                images += "<div class='mtb10'><img src='"+src+"' width='100%'></div>";
            }
            $(".content").append(p+images);
        },
        goBack: function() {
        	this.$router.back()
        }
    }
}

component/guidance/system-panel.js

@@ -0,0 +1,81 @@
Vue.component('system-panel', {
    template: '<div class="ml20 mr20"">\
					<div class="search-warp">\
						<input class="inp-search" placeholder="查找模板" v-model="filter" @input="debounceTempList" />\
					</div>\
					<div ref="innerPanel" style="overflow-y: auto;">\
						<div class="list-arrow-r temp-item" v-for="(o, i) in items">\
							<div @click="showDetail(o)" :class="{\'active\': o == activetemplate}"  class="item-header c-nowrap">\
								<span class="c-nowrap">{{o.modelName}}</span>\
							</div>\
						</div>\
					</div>\
					<div>\
					</div>\
				</div>',
    props: ['activetemplate'],
    data: function() {
        return {
        	filter: "",
        	pagesize: 20,
        	pageNo: 1,
        	throttled: null,
        	items: []
        }
    },
    created: function() {
    },
    mounted: function() {
    	var vm = this
    	var el = vm.$refs.innerPanel
    	$(el).height($(window).height() - 140)
    	window.addEventListener('resize', _.debounce(function() {
    		$(el).height($(window).height() - 140)
    	}, 300))
    	
    	el.onscroll = function() {
		    var scrollHeight = el.scrollHeight;
		    var scrollTop = el.scrollTop;
		    var clientHeight = el.clientHeight;
		
		    if (scrollHeight - clientHeight == scrollTop) {
		        vm.guidanceTempList()
		    }
		};
		
		vm.guidanceTempList()
    },
    methods: {
    	debounceTempList: _.debounce(function() {
			var vm = this
    		vm.pageNo = 1
    		vm.items = []
    		this.guidanceTempList()
		}, 500, false),
        guidanceTempList: function() {
        	var vm = this
        	guidanceAPI.guidanceTempList( {
	            type: 1, //模板类型 1:系统 2:自定义 为空:所有
	            pageNo: vm.pageNo,
	            pageSize: vm.pagesize,
	            filter: vm.filter
	        }).then(function(res) {
	        	if(res.data && res.data.length) {
	        		vm.pageNo++;
	        		vm.items = vm.items.concat(res.data)
	        	}
	        })
        },
        showDetail: function(o) {
        	var vm = this
        	EventBus.$emit('active-template', o)
        	var query = {
        		modelCode: o.code,
        		patient: storage.patient||"",
        		timestemp: $.now()
        	}
        	vm.$router.push({path:'/system-send-panel',query:query})
        }
    }
})

component/guidance/system-send-panel.js

@@ -0,0 +1,226 @@
var SystemSendPanel = {
    template: '<div>\
    			<div style="height: 34px;" >\
		    		指导模板\
		    		<div @click="saveAsPersonTemplate" 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="send-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>',
    beforeRouteEnter: function(to, from, next) {
	    next(function(vm) {
	      	var query = vm.$route.query
	    	if(query && query.modelCode && from.path != "/preview-panel") {
	    		vm.modelCode = query.modelCode
	    		vm.listDetail()
	    	}
	    	if(!storage.patient && !query.patient) {
	    		vm.sendMode = false
	    	} else {
	    		storage.patient = storage.patient || query.patient
	    		vm.sendMode = true
	    	}
	    })
	},
    props: [],
    data: function() {
        return {
			words: 10000,
			count: 0,
			content: "",
			modelName: "",
			imgs: [],
			modelCode: "",
			sendMode: false // 根据url中是否携带patient来判断是否是"发送"模式
        }
    },
    mounted: function() {
    	EventBus.$emit('active-nav-tab', 2)
    },
    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.modelName) {
        		toastr && toastr.error("模板名称不能为空")
        		return
        	}
        	if(!vm.content) {
        		toastr && toastr.error("模板内容不能为空")
        		return
        	}
        	guidanceAPI.newTemplate({
	            content: vm.content,
	            modelName: vm.modelName,
	            imagesUrl: vm.imgs.join(',')
        	}).then(function(res) {
        		if(res.status == 200) {
        			toastr && toastr.success("保存成功")
        		} else {
        			toastr && toastr.error(res.msg)
        		}
        	}).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)
        	})
        },
        sendTemplate: function() {
        	var vm = this
            if(!vm.modelName) {
        		toastr && toastr.error("模板名称不能为空")
        		return
        	}
        	if(!vm.content) {
        		toastr && toastr.error("模板内容不能为空")
        		return
        	}
            var d = dialog({
				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(query && query.modelCode && from.path == "/system-send-panel"&& to.path == "/system-send-panel") {
    		vm.modelCode = query.modelCode
    		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()
    }
  }
}

component/guidance/team-edit-panel.js

@@ -0,0 +1,350 @@
var TeamEditPanel = {
    template: '<div>\
    			<div style="height: 34px;" >\
		    		指导模板\
		    		<div @click="saveAsPersonTemplate" class="save-btn ml10" v-if="sendMode" style="width: 150px;">\
		    		保存为个人模板\
		    		</div>\
		    		<div class="delete-btn ml10" v-if="isLeader && editable && !sendMode" @click="deleteTemplate">\
		    		删除\
		    		</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="team-name pl10 ptb10">\
		    			所属团队：<select class="c-f14" style="border:0;">\
		    						<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" v-show="editable || sendMode">\
		    			预览\
		    		</a>\
		    		<a class="send-btn c-t-center" @click="save" v-show="isLeader && editable && !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: [],
			editable: true,
			sendMode: false // 根据url中是否携带patient来判断是否是"发送"模式
        }
    },
    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
	    	}
	      	
	    	if(query && query.teamTemplateCode && from.path != "/preview-panel") {
	    		vm.modelCode = query.modelCode
	    		vm.teamId = query.teamId
	    		vm.teamTemplateCode = query.teamTemplateCode
	    		vm.editable = true
	    		vm.getTeamGuidanceDetail().then(function() {
	    			vm.findAllLabelList()
	    		})
	    	}
	    })
	},
    computed: {
    	isLeader: function() {
    		var vm = this
	    	var leaderCode = storage.docInfo.adminTeamCode
	    	
	    	if(!vm.teams || !vm.teams.length || !leaderCode) {
	    		return 0
	    	}
	    	
	    	var team = _.filter(vm.teams, function(o) {
	    		return o.teamId == leaderCode
	    	})
	    	if(team.length) {
	    		vm.teams = team
	    		return 1
	    	} 
	    	return 0
    	}
    },
    created: function() {
    },
    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)	
        	}
        },
        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
        },
        getTeamGuidanceDetail: function() {
        	var vm = this
        	return guidanceAPI.getTeamGuidanceDetail({teamTemplateCode: vm.teamTemplateCode,teamId:vm.teamId}).then(function(res) {
        		if(res.status == 200) {
        			var detail = res.guidanceDetail
        			vm.teams = detail.teamList
        			vm.modelName = detail.title
        			vm.content = detail.content
        			vm.imgs = detail.imagesUrl && detail.imagesUrl.split(',') || []
        			vm.selectedLabel = {
        				name: detail.labelName,
        				code: detail.labelCode
        			}
        		}
        	})
        },
        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.content) {
        		toastr && toastr.error("模板内容不能为空")
        		return
        	}
        	guidanceAPI.modifyTeamGuidance({
	            content: vm.content,
				title: vm.modelName,
				labelCode: vm.selectedLabel.code,
				images: vm.imgs.join(','),
				teamInfo: vm.teams&&JSON.stringify(vm.teams)||"",
				saveAsGuidance:0,
				guidanceCode: vm.teamTemplateCode,
				isLeader: vm.isLeader || 0
        	}).then(function(res) {
        		if(res.status == 200) {
        			toastr && toastr.success("保存成功")
        			EventBus.$emit('refresh-team-panel')
        		}
        	}).catch(function(e) {
        		console.error(e)
        	})
        },
        deleteTemplate: function() {
        	var vm = this
        	var d = dialog({
				title: '删除模板',
				content: '删除后无法恢复,是否确认删除?',
				okValue: '确定',
				ok: function () {
					guidanceAPI.deleteTeamGuidance( { deleteAll: 0, guidanceCode: vm.teamTemplateCode, teamId:vm.teamId}).then(function(res) {
        				toastr && toastr.success("删除成功")
        				vm.editable = false
        				EventBus.$emit('refresh-team-panel')
		        	}).catch(function(e) {
		        		console.error(e)
		        	})
				},
				cancelValue: '取消',
				cancel: function () {}
			});
			d.showModal();
        	
        },
        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({
				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();
        },
        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)
        	})
        },
        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.teamTemplateCode && from.path == "/team-edit-panel"&& to.path == "/team-edit-panel") {
    		vm.modelCode = query.modelCode
    		vm.teamId = query.teamId
    		vm.editable = true
    		vm.teamTemplateCode = query.teamTemplateCode
    		vm.getTeamGuidanceDetail().then(function() {
    			vm.findAllLabelList()
    		})
    	}
    	
    	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()
    }
  }
}

component/guidance/team-new-panel.js

@@ -0,0 +1,274 @@
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({
				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()
    }
  }
}

component/guidance/team-panel.js

@@ -0,0 +1,150 @@
Vue.component('team-panel', {
    template: '<div class="team-panel ml20 mr20"">\
					<div class="search-warp">\
						<input class="inp-search" placeholder="查找模板" v-model="filter" @input="debounceTempList" />\
					</div>\
					<div ref="innerPanel" style="overflow-y: auto;">\
						<div :class="{\'list-arrow-r\': !o.dropdown, \'list-arrow-d\': o.dropdown}" class="temp-item" v-for="(o, i) in items">\
							<div @click="selectTeam(o)" class="item-header c-nowrap">\
								<span class="c-nowrap">{{o.teamName}} ({{o.amount}})</span>\
							</div>\
							<div v-show="o.dropdown">\
								<div class="ml30 dropdown-item" v-for="(v, j) in o.items" :class="{\'list-arrow-r\': !v.dropdown, \'list-arrow-d\': v.dropdown}">\
									<div @click="seletGroup(v)" >{{v.name}}</div>\
									<div v-show="v.dropdown">\
										<div @click="showDetail(t,o)" class="ml30 dropdown-item" v-for="(t, j) in v.items">\
											<span :class="{\'active\': t == activetemplate}" class="c-nowrap item-header">{{t.title}}</span>\
											<span style="position: absolute;right:24px;">\
												<img src="../../../images/shiyongren_icon.png" width="14"/>\
												{{t.useTimes}}\
											</span>\
										</div>\
									</div>\
								</div>\
							</div>\
						</div>\
					</div>\
					<div>\
					</div>\
				</div>',
    props: ['activetemplate'],
    data: function() {
        return {
        	activeTeam: null,
        	filter: "",
        	pagesize: 20,
        	pageNo: 1,
        	throttled: null,
        	items: [],
        	activeItem: null
        }
    },
    created: function() {
    	var vm = this
		EventBus.$on('refresh-team-panel',function() {
			EventBus.$emit('active-nav-tab', 1)
			vm.debounceTempList()
		})
    },
    mounted: function() {
    	var vm = this
    	var el = vm.$refs.innerPanel
    	$(el).height($(window).height() - 140)
    	window.addEventListener('resize', _.debounce(function() {
    		$(el).height($(window).height() - 140)
    	}, 300))
    	
		vm.getDoctorTeams()
    },
    methods: {
    	debounceTempList: _.debounce(function() {
			var vm = this
    		vm.pageNo = 1
    		this.getTeamGuidanceListByLabelWithFilter()
		}, 500, false),
		getTeamGuidanceListByLabelWithFilter: function() {
			var vm = this
			guidanceAPI.getTeamGuidanceListByLabelWithFilter({
				teamId: vm.activeTeam.teamId,
				filter: vm.filter
			}).then(function(res) {
				var data = res.data
	        	if(data) {
	        		vm.activeTeam.items = _.map(_.keys(data), function(k) {
	        			return {
	        				name: k,
	        				dropdown: true,
	        				code: data[k]&&data[k][0].labelCode,
	        				teamId: vm.activeTeam.teamId,
	        				items: data[k]
	        			}
	        		})
	        	}
	        })
		},
    	getDoctorTeams: function() {
    		var vm = this
    		guidanceAPI.getDoctorTeams({
    			
    		}).then(function(res) {
    			vm.items = res.teamList
    			vm.$nextTick(function() {
    				if(vm.items && vm.items.length) {
    					vm.activeTeam = vm.items[0]
    					$('.team-panel .temp-item').eq(0).find('.item-header').click()
    				}
    			})
    		})
    	},
    	selectTeam: function(o) {
    		var vm = this
    		o.dropdown=!o.dropdown
    		
    		if(o.teamName !== vm.activeTeam.teamName) {
    			vm.filter = ""
    			vm.activeTeam.dropdown = false
    		}
    		
    		vm.activeTeam = o
    		
    		if(!o.items || o.items.length) {
    			guidanceAPI.findAllListByPage({
	    			teamId: o.teamId,
	    			pageNo: 1,
	    			pageSize: 1000
	    		}).then(function(res) {
	    			Vue.set(o, 'items', res.data);
	    		})
    		}
    		
    	},
    	seletGroup: function(v) {
    		var vm = this
    		Vue.set(v, 'dropdown', !v.dropdown);
    		if(!v.items || !v.items.length) {
    			guidanceAPI.getTeamGuidanceLabelList({
	    			teamId: vm.activeTeam.teamId,
	    			pageNo: 1,
	    			pageSize: 1000,
	    			labelCode: v.code
	    		}).then(function(res) {
	    			Vue.set(v, 'items', res.data);
	    		})
    		}
    	},
        showDetail: function(o,t) {
        	var vm = this
        	EventBus.$emit('active-template', o)
        	
        	var query = {
        		teamId: t.teamId,
        		teamTemplateCode: o.teamTemplateCode,
        		modelCode: vm.modelCode,
        		patient: storage.patient||"",
        		timestemp: $.now()
        	}
        	vm.$router.push({path:'/team-edit-panel',query:query})
        }
    }
})

component/guidance/temp-preview-panel.js

@@ -0,0 +1,51 @@
var TempPreviewPanel = {
    template: '<div>\
    			<div></div>\
    			<a class="back-btn c-t-center mr15" @click="goBack">\
	    			返回\
	    		</a>\
    </div>',
    props: [],
    data: function() {
        return {
        }
    },
    methods: {
    	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)
        			})
        		}
        	})
        },
        getDetail: function (){
            var regN = /\n/g;
            var regRN = /\r\n/g;
            var content = detail.content.replace(/ /g, "&nbsp;");
            content = content.replace(regN,"<br/>");
            var p = "<p class='c-f14 c-333'>"+content+"</p>",
                images = "";
            for(i=0; i<detail.images.length; i++){
                var src = detail.images[i];
                if(!(src.indexOf("file://") > -1)){
                    src = getImgUrl(detail.images[i]);
                }
                
                images += "<div class='mtb10'><img src='"+src+"' width='100%'></div>";
            }
            $(".content").append(p+images);
        },
        goBack: function() {
        	this.$router.back()
        }
    }
}

component/guidance/temp-send-panel.js

@@ -0,0 +1,45 @@
var TempSendPanel = {
    template: '<div>\
    			<div style="height: 34px;" >\
		    		指导模板\
		    		<div class="save-btn">\
		    		保存\
		    		</div>\
		    	</div>\
		    	<div class="temp-info c-f14">\
		    		<div class="temp-name pl10 ptb10">\
		    			模板名称：<input placeholder="请输入模板名称( 10字内 )" class="c-f14" />\
		    		</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">（0/9）</span></div>\
	    			<div class="img-items mt10">\
	    				<img src="" />\
	    			</div>\
	    		</div>\
	    		<a class="send-btn c-t-center">\
	    			发送\
	    		</a>\
    </div>',
    props: [],
    data: function() {
        return {
			words: 1000,
			count: 0,
			content: ""
        }
    },
    methods: {
        countWord: function() {
        	if(this.content.length <= this.words) {
        		this.count = this.content.length
        	} else {
        		this.content = this.content.slice(0, this.words)	
        	}
        }
    }
}

plugins/artDialog/6.0.5/api/css/ui-dialog.min.css

@@ -0,0 +1,126 @@
.ui-popup-full { width: 100%; box-sizing: border-box; -webkit-box-sizing: border-box; padding: 0 25px !important; left: 0 !important }
.ui-dialog {
 *zoom: 1; _float: left; position: relative; background-color: #FFF; border: 1px solid #999; border-radius: 6px; outline: 0; background-clip: padding-box; font-family: Helvetica, arial, sans-serif; font-size: 14px; line-height: 1.428571429; color: #333; opacity: 0; -webkit-transform: scale(0); transform: scale(0); -webkit-transition: -webkit-transform .15s ease-in-out, opacity .15s ease-in-out; transition: transform .15s ease-in-out, opacity .15s ease-in-out; padding: 0 10px }
.ui-popup-show .ui-dialog { opacity: 1; -webkit-transform: scale(1); transform: scale(1) }
.ui-popup-focus .ui-dialog { box-shadow: 0 0 8px rgba(0, 0, 0, 0.1) }
.ui-popup-modal .ui-dialog { box-shadow: 0 0 8px rgba(0, 0, 0, 0.1), 0 0 256px rgba(255, 255, 255, .3) }
.ui-dialog-grid { width: 100%; margin: 0; border: 0 none; border-collapse: collapse; border-spacing: 0; background: transparent }
.ui-dialog-header, .ui-dialog-body, .ui-dialog-footer { padding: 0; border: 0 none; text-align: left; background: transparent }
.ui-dialog-header { white-space: nowrap; border-bottom: 1px solid #e5e5e5 }
.ui-dialog-close { position: relative; _position: absolute; float: right; top: 13px; right: 13px; _height: 26px; padding: 0 4px; font-size: 21px; font-weight: bold; line-height: 1; color: #000; text-shadow: 0 1px 0 #FFF; opacity: .2; filter: alpha(opacity=20); cursor: pointer; background: transparent; _background: #FFF; border: 0; -webkit-appearance: none }
.ui-dialog-close:hover, .ui-dialog-close:focus { color: #000; text-decoration: none; cursor: pointer; outline: 0; opacity: .5; filter: alpha(opacity=50) }
.ui-dialog-title { margin: 0; line-height: 1.428571429; min-height: 16.428571429px; padding: 15px; overflow: hidden; white-space: pre-wrap;font-weight: bold; cursor: default }
.ui-dialog-body { padding: 20px; text-align: center }
.ui-dialog-content { display: inline-block; position: relative; vertical-align: middle;  *zoom: 1; *display: inline;text-align: left }
.ui-dialog-footer { padding: 0 20px 20px 20px }
.ui-dialog-statusbar { float: left; margin-right: 20px; padding: 6px 0; line-height: 1.428571429; font-size: 14px; color: #888; white-space: nowrap }
.ui-dialog-statusbar label:hover { color: #333 }
.ui-dialog-statusbar input, .ui-dialog-statusbar .label { vertical-align: middle }
.ui-dialog-button { float: right; white-space: nowrap }
.ui-dialog-footer button + button { margin-bottom: 0; margin-left: 5px }
.ui-dialog-footer button { width: auto; overflow: visible; display: inline-block; padding: 6px 12px; _margin-left: 5px; margin-bottom: 0; font-size: 14px; font-weight: normal; line-height: 1.428571429; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer; background-image: none; border: 1px solid transparent; border-radius: 4px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none }
.ui-dialog-footer button:focus { outline: thin dotted #333; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px }
.ui-dialog-footer button:hover, .ui-dialog-footer button:focus { color: #333; text-decoration: none }
.ui-dialog-footer button:active { background-image: none; outline: 0; -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) }
.ui-dialog-footer button[disabled] { pointer-events: none; cursor: not-allowed; opacity: .65; filter: alpha(opacity=65); -webkit-box-shadow: none; box-shadow: none }
.ui-dialog-footer button { color: #333; background-color: #fff; border-color: #ccc }
.ui-dialog-footer button:hover, .ui-dialog-footer button:focus, .ui-dialog-footer button:active { color: #333; background-color: #ebebeb; border-color: #adadad }
.ui-dialog-footer button:active { background-image: none }
.ui-dialog-footer button[disabled], .ui-dialog-footer button[disabled]:hover, .ui-dialog-footer button[disabled]:focus, .ui-dialog-footer button[disabled]:active { background-color: #fff; border-color: #ccc }
.ui-dialog-footer button.ui-dialog-autofocus { color: #fff; background-color: #428bca; border-color: #357ebd }
.ui-dialog-footer button.ui-dialog-autofocus:hover, .ui-dialog-footer button.ui-dialog-autofocus:focus, .ui-dialog-footer button.ui-dialog-autofocus:active { color: #fff; background-color: #3276b1; border-color: #285e8e }
.ui-dialog-footer button.ui-dialog-autofocus:active { background-image: none }
.ui-popup-top-left .ui-dialog, .ui-popup-top .ui-dialog, .ui-popup-top-right .ui-dialog { top: -8px }
.ui-popup-bottom-left .ui-dialog, .ui-popup-bottom .ui-dialog, .ui-popup-bottom-right .ui-dialog { top: 8px }
.ui-popup-left-top .ui-dialog, .ui-popup-left .ui-dialog, .ui-popup-left-bottom .ui-dialog { left: -8px }
.ui-popup-right-top .ui-dialog, .ui-popup-right .ui-dialog, .ui-popup-right-bottom .ui-dialog { left: 8px }
.ui-dialog-arrow-a, .ui-dialog-arrow-b { position: absolute; display: none; width: 0; height: 0; overflow: hidden; _color: #ff3fff; _filter: chroma(color=#FF3FFF); border: 8px dashed transparent }
.ui-popup-follow .ui-dialog-arrow-a, .ui-popup-follow .ui-dialog-arrow-b { display: block }
.ui-popup-top-left .ui-dialog-arrow-a, .ui-popup-top .ui-dialog-arrow-a, .ui-popup-top-right .ui-dialog-arrow-a { bottom: -16px; border-top: 8px solid #7c7c7c }
.ui-popup-top-left .ui-dialog-arrow-b, .ui-popup-top .ui-dialog-arrow-b, .ui-popup-top-right .ui-dialog-arrow-b { bottom: -15px; border-top: 8px solid #fff }
.ui-popup-top-left .ui-dialog-arrow-a, .ui-popup-top-left .ui-dialog-arrow-b { left: 15px }
.ui-popup-top .ui-dialog-arrow-a, .ui-popup-top .ui-dialog-arrow-b { left: 50%; margin-left: -8px }
.ui-popup-top-right .ui-dialog-arrow-a, .ui-popup-top-right .ui-dialog-arrow-b { right: 15px }
.ui-popup-bottom-left .ui-dialog-arrow-a, .ui-popup-bottom .ui-dialog-arrow-a, .ui-popup-bottom-right .ui-dialog-arrow-a { top: -16px; border-bottom: 8px solid #7c7c7c }
.ui-popup-bottom-left .ui-dialog-arrow-b, .ui-popup-bottom .ui-dialog-arrow-b, .ui-popup-bottom-right .ui-dialog-arrow-b { top: -15px; border-bottom: 8px solid #fff }
.ui-popup-bottom-left .ui-dialog-arrow-a, .ui-popup-bottom-left .ui-dialog-arrow-b { left: 15px }
.ui-popup-bottom .ui-dialog-arrow-a, .ui-popup-bottom .ui-dialog-arrow-b { margin-left: -8px; left: 50% }
.ui-popup-bottom-right .ui-dialog-arrow-a, .ui-popup-bottom-right .ui-dialog-arrow-b { right: 15px }
.ui-popup-left-top .ui-dialog-arrow-a, .ui-popup-left .ui-dialog-arrow-a, .ui-popup-left-bottom .ui-dialog-arrow-a { right: -16px; border-left: 8px solid #7c7c7c }
.ui-popup-left-top .ui-dialog-arrow-b, .ui-popup-left .ui-dialog-arrow-b, .ui-popup-left-bottom .ui-dialog-arrow-b { right: -15px; border-left: 8px solid #fff }
.ui-popup-left-top .ui-dialog-arrow-a, .ui-popup-left-top .ui-dialog-arrow-b { top: 15px }
.ui-popup-left .ui-dialog-arrow-a, .ui-popup-left .ui-dialog-arrow-b { margin-top: -8px; top: 50% }
.ui-popup-left-bottom .ui-dialog-arrow-a, .ui-popup-left-bottom .ui-dialog-arrow-b { bottom: 15px }
.ui-popup-right-top .ui-dialog-arrow-a, .ui-popup-right .ui-dialog-arrow-a, .ui-popup-right-bottom .ui-dialog-arrow-a { left: -16px; border-right: 8px solid #7c7c7c }
.ui-popup-right-top .ui-dialog-arrow-b, .ui-popup-right .ui-dialog-arrow-b, .ui-popup-right-bottom .ui-dialog-arrow-b { left: -15px; border-right: 8px solid #fff }
.ui-popup-right-top .ui-dialog-arrow-a, .ui-popup-right-top .ui-dialog-arrow-b { top: 15px }
.ui-popup-right .ui-dialog-arrow-a, .ui-popup-right .ui-dialog-arrow-b { margin-top: -8px; top: 50% }
.ui-popup-right-bottom .ui-dialog-arrow-a, .ui-popup-right-bottom .ui-dialog-arrow-b { bottom: 15px }
 @-webkit-keyframes ui-dialog-loading {
 0% {
 -webkit-transform: rotate(0deg)
}
 100% {
 -webkit-transform: rotate(360deg)
}
}
 @keyframes ui-dialog-loading {
 0% {
 transform: rotate(0deg)
}
 100% {
 transform: rotate(360deg)
}
}
.ui-dialog-loading { vertical-align: middle; position: relative; display: block;  *zoom: 1;
 *display: inline;
overflow: hidden; width: 32px; height: 32px; top: 50%; margin: -16px auto 0 auto; font-size: 0; text-indent: -999em; color: #666 }
.ui-dialog-loading { width: 100% \9; text-indent: 0 \9; line-height: 32px \9; text-align: center \9; font-size: 12px \9 }
.ui-dialog-loading::after { position: absolute; content: ''; width: 3px; height: 3px; margin: 14.5px 0 0 14.5px; border-radius: 100%; box-shadow: 0 -10px 0 1px #ccc, 10px 0 #ccc, 0 10px #ccc, -10px 0 #ccc, -7px -7px 0 .5px #ccc, 7px -7px 0 1.5px #ccc, 7px 7px #ccc, -7px 7px #ccc; -webkit-transform: rotate(360deg); -webkit-animation: ui-dialog-loading 1.5s infinite linear; transform: rotate(360deg); animation: ui-dialog-loading 1.5s infinite linear; display: none \9 }
.ax-popup { padding: 0; border: 0; border-radius: 10px; outline: 0; font-size: 14px; line-height: 1.428571429; color: #333; overflow: hidden; }
.ax-popup .ui-dialog-header { font-size: 17px; font-weight: 700; border: 0; text-align: center; }
.ax-popup .ui-dialog-close { display: none; }
.ax-popup .ui-dialog-title { padding: 15px 20px 0 20px; border-top-left-radius: 10px; border-top-right-radius: 10px; overflow: hidden; }
.fat-title .ui-dialog-title { padding: 25px 15px 0 15px; }
.ax-popup .ui-dialog-body, .ax-popup .ui-dialog-content { text-align: center; color: #5b5b5b; }
.ui-popup-modal .ui-dialog { -webkit-box-shadow: none; box-shadow: none; }
.ax-popup .ui-dialog-body { padding: 15px; line-height:1.8; }
.ax-popup .ui-dialog-footer { border-top: 1px solid #e1e1e1; padding: 0; text-align: center; border-radius: 0 0 10px 10px; overflow: hidden; }
.ax-popup .ui-dialog-button { float: none; width: 100%; white-space: nowrap; display: -webkit-box; display: box; }
.ax-popup .ui-dialog-footer button { display: box; display: -webkit-box; -webkit-box-flex: 1; box-flex: 1; box-sizing: border-box; -webkit-box-sizing: border-box; padding: 0; margin: 0; height: 44px; font-size: 17px; font-weight: normal; color: #167efb; cursor: pointer; background: none; border: 0; text-align: center !important; border-left: 1px solid #e1e1e1; border-radius: 0; outline: 0; }
.ax-popup .ui-dialog-footer button span { display: block; width: 100%; text-align: center; }
.ax-popup .ui-dialog-footer button + button { margin-bottom: 0; margin-left: 0; }
.ax-popup .ui-dialog-footer button.ui-dialog-autofocus { color: #167efb; background-color: #fff; border: 0; border-left: 1px solid #e1e1e1; }
.ax-popup .ui-dialog-footer button:first-child { border: 0; border-bottom-left-radius: 10px; }
.ax-popup .ui-dialog-footer button:last-child { border-bottom-right-radius: 10px; }
.ax-popup .ui-dialog-footer button:active { background-image: none; outline: 0; -webkit-box-shadow: none; box-shadow: none; background: #efefef; }
.bk-popup { padding: 0 10px; border: 0; border-radius: 10px; outline: 0; font-size: 14px; line-height: 1.428571429; color: #fff; overflow: hidden; border:0; background:rgba(0,0,0,.8);}
.ui-popup-focus .bk-popup{ box-shadow:none; }
.bk-popup .ui-dialog-header { font-size: 17px; font-weight: 700; border: 0; text-align: center;}
.bk-popup .ui-dialog-close { display: none; }
.bk-popup .ui-dialog-title { padding: 15px 20px 0 20px; border-top-left-radius: 10px; border-top-right-radius: 10px; overflow: hidden; }
.fat-title .ui-dialog-title { padding: 25px 15px 0 15px; }
.bk-popup .ui-dialog-body, .bk-popup .ui-dialog-content { text-align: center; color: #5b5b5b; font-size:17px; line-height:1.5; background:rgba(0,0,0,0); }
.ui-popup .bk-popup tr, .ui-popup  .bk-popup tr {background:none}
.ui-popup-modal .ui-dialog { -webkit-box-shadow: none; box-shadow: none; }
.bk-popup .ui-dialog-content, .bk-popup tr{ background:transparent; color:#fff;}
.thin-con .ui-dialog-body { padding: 9px 10px; }
.bk-popup .ui-dialog-footer { border-top: 1px solid rgba(255,255,255,.3); padding: 10px 0; text-align: center; border-radius: 0 0 10px 10px; overflow: hidden; }
.bk-popup .ui-dialog-button { float: none; width: 100%; white-space: nowrap; display: -webkit-box; display: box; }
.bk-popup .ui-dialog-footer button { display: box; display: -webkit-box; -webkit-box-flex: 1; box-flex: 1; box-sizing: border-box; -webkit-box-sizing: border-box; padding: 0; margin: 0; height: 28px; font-size: 17px; font-weight: normal; color: #fff; cursor: pointer; background: none; border: 0; text-align: center !important; border-left: 1px solid rgba(255,255,255,.3); border-radius: 0; outline: 0; }
.bk-popup .ui-dialog-footer button span { display: block; width: 100%; text-align: center; }
.bk-popup .ui-dialog-footer button + button { margin-bottom: 0; margin-left: 0; }
.bk-popup .ui-dialog-footer button.ui-dialog-autofocus { color: #fff; background-color:transparent; border: 0; border-left: 1px solid rgba(255,255,255,.3); }
.bk-popup .ui-dialog-footer button:first-child { border: 0; border-bottom-left-radius: 10px; }
.bk-popup .ui-dialog-footer button:last-child { border-bottom-right-radius: 10px; }
.bk-popup .ui-dialog-footer button:active { background-image: none; outline: 0; color:#167efb; -webkit-box-shadow: none; box-shadow:none;}
.ui-dialog-loading{ text-align:left;}
.smallTips .ui-dialog-grid{margin:15px 0;}
.ui-popup p,.ui-popup blockquote,.ui-popup ul,.ui-popup ol,.ui-popup dl,.ui-popup li, .ui-popup pre { margin: 15px 0; }
.ui-popup table { padding: 0; border-collapse: collapse; }
.ui-popup tr { background-color: white; margin: 0; padding: 0; }
.ui-popup th { font-weight: bold; text-align: left; margin: 0; padding: 6px 13px; }
.ui-popup td { text-align: left; margin: 0; padding: 6px 13px; }
.ui-popup th :first-child,.ui-popup td :first-child { margin-top: 0; }
.ui-popup th :last-child,.ui-popup td :last-child { margin-bottom: 0; }