Browse Source

新增企业新闻添加,修改,删除

xuchunyang 8 years ago
parent
commit
a0a2adf877
2 changed files with 417 additions and 111 deletions
  1. 5 111
      cmp-portal/cmp-articalList.html
  2. 412 0
      cmp-portal/js/cmp-articalList.js

+ 5 - 111
cmp-portal/cmp-articalList.html

@ -12,74 +12,6 @@
12 12
<script type="text/javascript" src="js/public/jquery-1.11.1.js"></script>
13 13
</head>
14 14
<body>
15
<!--文章添加model-->
16
<div class="blackcover">
17
	<div class="modelContain" style="width: 700px;">
18
		<form name="cmpAllFrm" class="cmpArticalFrm">
19
			<div class="cmpMotit">文章</div>
20
			<ul class="cmpAllUl cmpArticalul">
21
				<li>
22
    				<div class="col-w-3">文章标题</div>
23
    				<div class="col-w-9"><input type="text" class="frmtype frmtypeW" /></div>
24
				</li>
25
				<li>
26
    				<div class="col-w-3">涉及学术领域</div>
27
    				<div class="col-w-9">
28
    					<div class="col-w-9">
29
							<input type="text" class="frmtype frmtypeW" />
30
						</div>
31
						<div class="col-w-3">
32
							<button type="button" class="frmtype btnModel btnModel2 headRadius">添加</button>
33
						</div>
34
						<ul class="ulspace editUlist clearfix">
35
							<!--<li>领域标签<img src="images/con_icon_delete.png" /></li>
36
							<li>领域标签<img src="images/con_icon_delete.png" /></li>
37
							<li>领域标签<img src="images/con_icon_delete.png" /></li>
38
							<li>领域标签<img src="images/con_icon_delete.png" /></li>-->
39
						</ul>
40
    				</div>
41
				</li>
42
				<li>
43
    				<div class="col-w-3">涉及应用行业</div>
44
    				<div class="col-w-9">
45
    					<div class="col-w-9">
46
							<input type="text" class="frmtype frmtypeW" />
47
						</div>
48
						<div class="col-w-3">
49
							<button type="button" class="frmtype btnModel btnModel2 headRadius">添加</button>
50
						</div>
51
						<ul class="ulspace editUlist clearfix">
52
							<!--<li>行业标签<img src="images/con_icon_delete.png" /></li>
53
							<li>行业标签行业标<img src="images/con_icon_delete.png" /></li>
54
							<li>行业标签<img src="images/con_icon_delete.png" /></li>
55
							<li>行业标签<img src="images/con_icon_delete.png" /></li>-->
56
						</ul>
57
    				</div>
58
				</li>
59
				<div class="uploderArt">
60
					<div class="imgBlock" id="uploader">
61
						<div id="fileList" class="boxBlock uploader-list headRadius"><img class="boxBlockimg headRadius" src="../images/default-artical.jpg" /></div>
62
						<div id="filePicker" class="uploadInp uploadInpArt">上传文章封面图片</div>
63
		 			</div>
64
	        		<p class="smalltip">尺寸建议640*640,大小在5M以内,JPG、PNG格式</p>
65
				</div>
66
			</ul>
67
			<ul class="cmpAllUl cmpArticalul cmpArticalul2">
68
				<li>
69
    				<div class="col-w-2">文章正文</div>
70
    				<div class="col-w-10">
71
    					<textarea class="frmtype frmtypeW"></textarea>
72
    				</div>
73
				</li>
74
				<li class="alignCenter" style="position: relative;">
75
					<button type="button" class="frmtype btnModel headRadius save-block">发布</button>
76
					<a class="deleteFont">删除文章</a>
77
				</li>
78
			</ul>
79
		</form>
80
		<span class="modelClosebtn"></span>	
81
	</div>
82
</div>
83 15

84 16
<!--头部-->
85 17
<header>
@ -101,41 +33,8 @@
101 33
			    <div class="worksubcon clearfix">
102 34
		            <!--企业信息、相关记录-->
103 35
		            <div class="workblock clearfix">
104
		            	<div class="workarea"> 
105
		            		<div class="addworkbtn"></div>
106
		            		<div class="addworkbtn-list">
107
	            				<div class="showBlock">
108
	            					<div class="showImg"></div>
109
	            					<div class="showBasic">
110
	            						<h6 class="showTopic">福福福福福福福福福付4福福福福福福福福福付4福福福福福福福福福付4福福福福福福福福福付4</h6>
111
	            					</div>
112
	            				</div>
113
	            				<div class="tagsBox">
114
	            					<span>one,two,three,1</span>
115
	            				</div>
116
		            		</div>
117
		            		<div class="addworkbtn-list">
118
	            				<div class="showBlock">
119
	            					<div class="showImg"></div>
120
	            					<div class="showBasic">
121
	            						<h6 class="showTopic">福福福福福福福福福付4福福福福福福福福福付4福福福福福福福福福付4福福福福福福福福福付4</h6>
122
	            					</div>
123
	            				</div>
124
	            				<div class="tagsBox">
125
	            					<span>one,two,three,1</span>
126
	            				</div>
127
		            		</div>
128
		            		<div class="addworkbtn-list">
129
	            				<div class="showBlock">
130
	            					<div class="showImg"></div>
131
	            					<div class="showBasic">
132
	            						<h6 class="showTopic">福福福福福福福福福付4福福福福福福福福福付4福福福福福福福福福付4福福福福福福福福福付4</h6>
133
	            					</div>
134
	            				</div>
135
	            				<div class="tagsBox">
136
	            					<span>one,two,three,1</span>
137
	            				</div>
138
		            		</div>
36
		            	<div class="workarea" id="newsbox"> 
37
		          
139 38
		            	</div>
140 39
		            </div>
141 40
			    </div>
@ -152,16 +51,11 @@
152 51
</footer>
153 52

154 53
<script type="text/javascript"src="js/public/jquery.cookie.js"></script>
54
<script type="text/javascript" src="../js/ueditor/ueditor.config.js"></script>
55
<script type="text/javascript" src="../js/ueditor/ueditor.all.js"> </script>
155 56
<script type="text/javascript" src="../js/webuploader/webuploader.js"></script>
156 57
<script type="text/javascript" src="js/public/jquery.similar.msgbox.js"></script>
157 58
<script type="text/javascript" src="js/public/common.js"></script>
158
<script type="text/javascript">
159
	$(".addworkbtn,.addworkbtn-list").click(function() {
160
		modelOpen();
161
	})
162
	$(".modelClosebtn").click(function() {
163
		modelClose();
164
	})
165
</script>
59
<script type="text/javascript" src="js/cmp-articalList.js"></script>
166 60
</body>
167 61
</html>

+ 412 - 0
cmp-portal/js/cmp-articalList.js

@ -0,0 +1,412 @@
1
//企业新闻
2
$(function() {
3

4
	var orgId = $.cookie("orgId");
5
	var newtitle = false;
6
	newslist(); //科研新闻列表
7

8
	/*弹框*/
9
	$("body").on("click", ".modelClosebtn", function() {
10
		BombBoxlClose();
11
	})
12

13
	$(".workarea").on("click", ".addworkbtn", function() {
14
		newsBombBox(); //插入弹框
15
		addDele(); //编辑学术领域和应用行业	
16
		$("#inputb").on("click", function() {
17
			if($("#newsName").val() != "") {
18
				newsAdd();
19
			} else {
20
				$(".msgLog1").text("发布文章名称不能为空");
21
			}
22

23
		});
24
	});
25

26
	$(".workarea").on("click", ".addworkbtn-list", function() {
27
		articleId = $(this).find(".showBlock").attr("data-title");
28
		newsBombBox(); //插入弹框
29
		addDele(); //编辑学术领域和应用行业
30
		modifyDisplay();
31
		$("#inputb").on("click", function() {
32
			if($("#newsName").val() != "") {
33
				$.MsgBox.Confirm("消息", "确定修改文章信息吗?", newsModify)
34
			} else {
35
				$(".workmsg1").text("发布文章名称不能为空");
36
			}
37
		});
38
	});
39

40
	/*失去焦点判断*/
41
	$("#newsName").blur(function() {
42
		newsName();
43
	});
44

45
	//判断文章标题不能为空
46
	function newsName() {
47
		var code = $("#newsName").val();
48
		if(code.length == 0 || code == " ") {
49
			$(".msgLog1 span").text("发布文章名称不能为空");
50
			newtitle = false;
51
		} else {
52
			$(".msgLog1 span").text("");
53
			newtitle = true;
54
		}
55
	}
56

57
	/*科研新闻列表*/
58
	function newslist() {
59
		$.ajax({
60
			"url": "/ajax/article/qaOrg",
61
			"type": "get",
62
			"async": true,
63
			"data": {
64
				"orgId": orgId
65
			},
66
			"beforeSend": function() {
67
				$("#newsbox").append('<img src="../images/loading.gif" class="loading" />');
68
			},
69
			"success": function(data) {
70
				console.log(data);
71
				if(data.success) {
72
					var add = '';
73
					$("#newsbox").html("");
74
					var addbut = ' <div class="addworkbtn" ></div>';
75
					$("#newsbox").append(addbut);
76
					for(var i = 0; i < data.data.length; i++) {
77
						var add = '<div class="addworkbtn-list"><div class="showBlock" data-title="">'
78
						add += '<div class="showImg"></div>'
79
						add += '<div class="showBasic"><h6 id="artical_topic" class="showTopic">' + data.data[i].articleTitle + '</h6></div>'
80
						add += '</div><div class="tagsBox"><span></span></div>'
81
						add += '</div>';
82
						$add = $(add);
83
						$("#newsbox").append($add);
84
						$add.find('.showBlock').attr("data-title", data.data[i].articleId);
85
						$add.find('.tagsBox span').text(data.data[i].industry);
86
						if(data.data[i].articleImg) {
87
							$add.find(".showImg").attr("style", "background: url(/data/article/" + data.data[i].articleImg + ") 0 0 no-repeat;background-size:cover;");
88
						}
89
						$(".loading").remove();
90
					}
91

92
				} else {
93
					$.MsgBox.Alert('消息', '链接服务器超时')
94
				}
95
			},
96
			"error": function() {
97
				$.MsgBox.Alert('消息', '链接服务器超时')
98
			}
99
		});
100
	}
101

102
	/*科研新闻添加*/
103
	function newsAdd() {
104
		var $data = {};
105
		$data.orgId = orgId;
106
		$data.articleTitle = $("#newsName").val();
107
		$data.subject = captiureSubInd("SubjectList .deleteSubject");
108
		$data.industry = captiureSubInd("industryList .deleteIndustry");
109
		$data.articleContent = ue.getContent();
110
		if(cacheImageKey) {
111
			$data.articleImg = cacheImageKey;
112
		}
113
		$.ajax({
114
			"url": "/ajax/article",
115
			"type": "post",
116
			"dataType": "json",
117
			"data": $data,
118
			"success": function(data) {
119
				console.log(data);
120
				if(data.success) {
121
					newsname = data.data;
122
					console.log(newsname);
123
					$.MsgBox.Alert("消息", "文章发表成功!");
124
					newslist();
125
					UE.delEditor('editor');
126
					BombBoxlClose();
127
				} else {
128
					$.MsgBox.Alert("消息", "文章发表失败!");
129
				}
130
			},
131
			"error": function() {
132
				$.MsgBox.Alert('消息', '链接服务器超时')
133
			}
134
		});
135
	}
136

137
	/*科研新闻修改回显内容*/
138
	function modifyDisplay() {
139
		$.ajax({
140
			"url": "/ajax/article/query",
141
			"type": "GET",
142
			"dataType": "json",
143
			"data": {
144
				"articleId": articleId
145
			},
146
			"success": function($data) {
147
				console.log($data);
148
				if($data.success) {
149
					$("#newsName").val($data.data.articleTitle);
150
					industryShow($data.data.subject, "SubjectList", "deleteSubject");
151
					industryShow($data.data.industry, "industryList", "deleteIndustry");
152
					ue.ready(function() {
153
						if($data.data.articleContent == undefined) {
154
							var datadescp = "";
155
						} else {
156
							var datadescp = $data.data.articleContent;
157
						}
158
						ue.setContent(datadescp);
159
					});
160
					if($data.data.articleImg) {
161
						$("#imghos").attr("src", "/data/article/" + $data.data.articleImg);
162
					}
163

164
				}
165
			},
166
			"error": function() {
167
				$.MsgBox.Alert('消息', '链接服务器超时')
168
			}
169
		})
170

171
		$("#deletedResource").show();
172
		//$.MsgBox.Confirm("消息", "确定修改文章信息吗?", newsAdd())
173
		$("#deletedResource").on("click", function() {
174
			$.MsgBox.Confirm("消息", "执行删除后文章信息将无法恢复,确定继续吗?", newsDelet)
175
		});
176
	}
177

178
	/*科研新闻修改*/
179
	function newsModify() {
180
		var $data = {};
181
		$data.articleId = articleId;
182
		$data.articleTitle = $("#newsName").val();
183
		$data.subject = captiureSubInd("SubjectList .deleteSubject");
184
		$data.industry = captiureSubInd("industryList .deleteIndustry");
185
		$data.articleContent = ue.getContent();
186
		if(cacheImageKey) {
187
			$data.articleImg = cacheImageKey;
188
		}
189
		console.log($data);
190
		$.ajax({
191
			"url": "/ajax/article/updateArt",
192
			"type": "POST",
193
			"dataType": "json",
194
			"data": $data,
195
			"success": function($data) {
196
				console.log($data);
197
				if($data.success) {
198
					newslist();
199
					BombBoxlClose();
200
					UE.delEditor('editor');
201
				}
202
			},
203
			"error": function() {
204
				$.MsgBox.Alert('消息', '链接服务器超时')
205
			}
206
		})
207

208
		$("#deletedResource").show();
209
		//$.MsgBox.Confirm("消息", "确定修改文章信息吗?", newsAdd())
210
		$("#deletedResource").on("click", function() {
211
			$.MsgBox.Confirm("消息", "执行删除后文章信息将无法恢复,确定继续吗?", newsDelet)
212
		});
213
	}
214

215
	/*科研新闻删除*/
216
	function newsDelet() {
217
		$.ajax({
218
			"url": "/ajax/article/delete",
219
			"type": "POST",
220
			"dataType": "json",
221
			"data": {
222
				"articleId": articleId
223
			},
224
			"success": function($data) {
225
				if($data.success) {
226
					BombBoxlClose();
227
					UE.delEditor('editor');
228
					newslist();
229
				}
230
			},
231
			"error": function() {
232
				$.MsgBox.Alert('消息', '链接服务器超时')
233
			}
234
		})
235
	}
236

237
	//组合应用行业及学术领域
238
	function captiureSubInd(subIndu) {
239
		var industrys = $("#" + subIndu + "");
240
		var industryAll = "";
241
		if(industrys.size() > 0) {
242
			for(var i = 0; i < industrys.size(); i++) {
243
				industryAll += industrys[i].innerText;
244
				industryAll += ',';
245
			};
246
			industryAll = industryAll.substring(0, industryAll.length - 1);
247
		}
248
		return industryAll;
249
	}
250

251
	//拆解应用行业及学术领域
252
	function industryShow(data, industryList, deleteIndustry) {
253
		if(data != undefined && data.length != 0) {
254
			var subs = new Array();
255
			if(data.indexOf(',')) {
256
				subs = data.split(',');
257
			} else {
258
				subs[0] = data;
259
			}
260
			if(subs.length > 0) {
261
				for(var i = 0; i < subs.length; i++) {
262
					$("#" + industryList + "").append("<li class='" + deleteIndustry + "'><em>" + subs[i] + "</em><img src='images/con_icon_delete.png' class='removeNu'></li>");
263
				};
264
			}
265
		}
266
	}
267

268
	/*添加或者删除应用行业及学术领域*/
269
	function addDele() {
270
		$("#industryList").on("click", ".removeNu", function() {
271
			$(this).parent().remove();
272
		});
273
		$("#industryAdd").click(function() {
274
			var val = $("#industry").val();
275
			if(val == "") {
276
				$(".workmsg4").text("请填写应用行业");
277
				return;
278
			}
279
			var vallist = $("#industryList .deleteIndustry em");
280
			for(var i = 0; i < vallist.length; i++) {
281
				if(vallist[i].innerText == val) {
282
					$(".workmsg4").text("不能添加重复内容");
283
					return;
284
				}
285
			}
286
			$("#industryList").append("<li class='deleteIndustry'><em>" + val + "</em><img src='images/con_icon_delete.png' class='removeNu'></li>")
287
			$("#industry").val("");
288
			$(".workmsg4").text("");
289
		});
290

291
		$("#SubjectList").on("click", ".removeNu", function() {
292
			$(this).parent().remove();
293
		});
294

295
		$("#subjectAdd").click(function() {
296
			var val = $("#subject").val();
297
			if(val == "") {
298
				$(".workmsg3").text("请填写学术领域");
299
				return;
300
			}
301
			var vallist = $("#SubjectList .deleteSubject em");
302
			for(var i = 0; i < vallist.length; i++) {
303
				if(vallist[i].innerText == val) {
304
					$(".workmsg3").text("不能添加重复内容");
305
					return;
306
				}
307
			}
308
			$("#SubjectList").append("<li class='deleteSubject'> <em>" + val + "</em> <img src='images/con_icon_delete.png' class='removeNu'/></li>")
309
			$("#subject").val("");
310
			$(".workmsg3").text("");
311
		});
312
	}
313

314
	/*科研文章*/
315
	function newsBombBox() {
316
		var PopHtml = "";
317
		PopHtml += '<div class="blackcover" style="display:block">';
318
		PopHtml += '<div class="modelContain" style="width: 700px;display:block">';
319
		PopHtml += '<form name="cmpAllFrm" class="cmpArticalFrm">';
320
		PopHtml += '<div class="cmpMotit">文章</div>';
321
		PopHtml += '<ul class="cmpAllUl cmpArticalul">';
322
		PopHtml += '<li><div class="col-w-3">文章标题</div><div class="col-w-9"><input type="text" class="frmtype frmtypeW"  id="newsName"/><div class="frmmsg msgLog1"><span></span></div></div></li>';
323
		PopHtml += '<li><div class="col-w-3">涉及学术领域</div><div class="col-w-9">';
324
		PopHtml += '<div class="col-w-9"><input type="text" class="frmtype frmtypeW" id="subject"/><div class="frmmsg msgLog workmsg3"><span></span></div></div>';
325
		PopHtml += '<div class="col-w-3"><button type="button" class="frmtype btnModel btnModel2 headRadius" id="subjectAdd">添加</button></div><ul class="ulspace editUlist clearfix" id="SubjectList"></ul>';
326
		PopHtml += '</div></li>';
327
		PopHtml += '<li><div class="col-w-3">涉及应用行业</div><div class="col-w-9">';
328
		PopHtml += '<div class="col-w-9"><input type="text" class="frmtype frmtypeW" id="industry"/><div class="frmmsg msgLog workmsg4"><span></span></div></div>'
329
		PopHtml += '<div class="col-w-3"><button type="button" class="frmtype btnModel btnModel2 headRadius" id="industryAdd">添加</button></div>';
330
		PopHtml += '<ul class="ulspace editUlist clearfix" id="industryList"></ul></div></li>';
331
		/////////////文章图片上传////////////////////
332
		PopHtml += '<div class="uploderArt"><div class="imgBlock" id="uploader">';
333
		PopHtml += '<div id="fileList" class="boxBlock uploader-list headRadius"><img class="boxBlockimg headRadius" id="imghos" src="../images/default-artical.jpg" /></div>';
334

335
		PopHtml += '<div id="filePicker" class="uploadInp uploadInpArt">上传文章封面图片</div>';
336
		PopHtml += '</div><p class="smalltip">尺寸建议640*640,大小在5M以内,JPG、PNG格式</p></div></ul>';
337
		/////////////文章图片上传 结束////////////////////
338
		PopHtml += '<ul class="cmpAllUl cmpArticalul cmpArticalul2">';
339
		PopHtml += '<li><div class="col-w-2">文章正文</div>';
340
		PopHtml += '<div class="col-w-10"><script id="editor" name="content" type="text/plain" style="width:520px; height:200px;float: left;"></script></div></li>';
341
		PopHtml += '<li class="alignCenter" style="position: relative;"><button type="button" class="frmtype btnModel headRadius save-block" id="inputb">发布</button><a class="deleteFont" style="display: none;" id="deletedResource">删除文章</a></li></ul>';
342
		PopHtml += '</form><span class="modelClosebtn"></span></div></div>';
343
		//必须先将html添加到body,再设置Css样式
344
		$("body").prepend(PopHtml);
345
		$("body").css("position", "fixed");
346
		ue = UE.getEditor('editor', {});
347
		// 初始化Web Uploader
348
		var uploader = WebUploader.create({
349
			// 选完文件后,是否自动上传。
350
			auto: true,
351
			// 添加的文件数量
352
			//fileNumLimit: 1,
353
			// swf文件路径
354
			swf: '../js/webuploader/Uploader.swf',
355
			// 文件接收服务端。
356
			server: '../ajax/cachedFileUpload',
357
			// 选择文件的按钮。可选。
358
			// 内部根据当前运行是创建,可能是input元素,也可能是flash.
359

360
			pick: {
361
				id: "#filePicker",
362
				multiple: false
363
			},
364
			// 只允许选择图片文件。
365
			accept: {
366
				title: 'Images',
367
				extensions: 'gif,jpg,jpeg,bmp,png',
368
				mimeTypes: 'image/*'
369
			}
370

371
		});
372

373
		// 当有文件添加进来的时候
374
		uploader.on('fileQueued', function(file) {
375
			var $li = $(
376
				'<img class="boxBlockimg headRadius" style="display: inline;" id="' + file.id + '" >'
377
			)
378

379
			// $list为容器jQuery实例
380
			var $list = $('#fileList');
381
			$list.empty("");
382
			$list.append($li);
383

384
			// 创建缩略图
385
			// 如果为非图片文件,可以不用调用此方法。
386
			// thumbnailWidth x thumbnailHeight 为 100 x 100
387
			uploader.makeThumb(file, function(error, src) {
388
				if(error) {
389
					$li.replaceWith('<span>不能预览</span>');
390
					return;
391
				}
392
				$li.attr('src', src);
393
			}, 1, 1);
394

395
		});
396

397
		// 文件上传成功,给item添加成功class, 用样式标记上传成功。
398
		cacheImageKey = null;
399
		uploader.on('uploadSuccess', function(file, data) {
400
			cacheImageKey = data.data[0].cacheKey;
401
			console.log(cacheImageKey);
402
		});
403
	}
404
	/*科研文章 end*/
405

406
	function BombBoxlClose() {
407
		$(".blackcover").remove();
408
		$("body").css("position", "");
409
		UE.delEditor('editor');
410
	}
411

412
})