EditPcJkArticle.html 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  6. <meta name="renderer" content="webkit" />
  7. <title>编辑文章-卫计委</title>
  8. <link rel="stylesheet" href="../iconfont/iconfont.css" type="text/css" />
  9. <link rel="stylesheet" href="../cross/css/cross.css" type="text/css" />
  10. <link rel="stylesheet" href="../cross/css/cross.ui.css" type="text/css" />
  11. <link rel="stylesheet" href="../css/health-edu.css" type="text/css" />
  12. </head>
  13. <body>
  14. <div class="c-hidden">
  15. <div class="phone-part fr">
  16. <div class="c-t-center mb30">
  17. <a id="preview" href="javascript:;" onclick="preview()"
  18. class="c-btn bgc-ec6941 btn-w60">预览</a>
  19. </div>
  20. <div class="phone">
  21. <div class="phone-wrap">
  22. <div class="phone-header">
  23. <img src="../images/health-edu/top.png" class="width-100" />
  24. <div class="phone-tit">
  25. <a href="javascript:;" class="btn-return"><i
  26. class="iconfont icon-xiangzuo c-f12"></i> 返回</a>
  27. <h1 id ="h1w"> </h1>
  28. <a href="#" class="btn-more"><i class="iconfont icon-more"></i></a>
  29. </div>
  30. </div>
  31. <div class="phone-main">
  32. <div class="article" id="articlecp"></div>
  33. </div>
  34. </div>
  35. </div>
  36. </div>
  37. <div class="main-part p20">
  38. <div
  39. class="form-layout form-horizontal form-horizontal-narrow c-f14 c-666 mtb20">
  40. <div class="control-group">
  41. <label class="control-label c-t-right">分类:</label>
  42. <div class="control-form">
  43. <div class=" cus-sel cus-sel-w200 cus-sel-h33"
  44. id="FirstLevelCategoryId" >
  45. <div class="cus-sel-chosed">
  46. <input id="p_FirstLevelCategoryId" type="text" class="c-hide"> <span
  47. class="cus-sel-chosed-txt" data-value="">--请选择一级分类--</span> <span
  48. class="jselect-icon"></span>
  49. </div>
  50. <div class="cus-sel-list c-hide">
  51. <ul>
  52. </ul>
  53. </div>
  54. </div>
  55. <div class="cus-sel cus-sel-h33 ml10"
  56. id="SecondLevelCategoryId">
  57. <div class="cus-sel-chosed">
  58. <input id="p_SecondLevelCategoryId" type="text" class="c-hide"> <span
  59. class="cus-sel-chosed-txt" data-value="">--请选择二级分类--</span> <span
  60. class="jselect-icon"></span>
  61. </div>
  62. <div class="cus-sel-list c-hide">
  63. <ul>
  64. </ul>
  65. </div>
  66. </div>
  67. </div>
  68. </div>
  69. <div class="control-group">
  70. <label class="control-label c-t-right">优先级:</label>
  71. <div class="control-form">
  72. <div class="cus-sel cus-sel-h33" data-toggle="formSelect"
  73. id="Articlelevel">
  74. <div class="cus-sel-chosed">
  75. <input type="text" style="display:none;"> <span
  76. class="cus-sel-chosed-txt" data-value="">--请选择重要等级--</span> <span
  77. class="jselect-icon"></span>
  78. </div>
  79. <div class="cus-sel-list c-hide">
  80. <ul>
  81. </ul>
  82. </div>
  83. </div>
  84. </div>
  85. </div>
  86. <div class="control-group">
  87. <label class="control-label c-t-right">类型:</label>
  88. <div class="control-form">
  89. <div class="cus-sel cus-sel-h33"
  90. id="ArticleType">
  91. <div class="cus-sel-chosed">
  92. <input type="text" style="display:none;"> <span
  93. class="cus-sel-chosed-txt" data-value="">--请选择类型--</span> <span
  94. class="jselect-icon"></span>
  95. </div>
  96. <div class="cus-sel-list c-hide">
  97. <ul>
  98. </ul>
  99. </div>
  100. </div>
  101. </div>
  102. </div>
  103. <div class="control-group">
  104. <label class="control-label c-t-right">标题:</label>
  105. <div class="control-form">
  106. <input type="text" placeholder="请输入标题" maxlength="50"
  107. class="input-text input-text-w520" id="ArticleTitle">
  108. <div class="c-inline-block c-ec514f c-f12 ml10">最多输入50个字</div>
  109. </div>
  110. </div>
  111. <div class="control-group">
  112. <label class="control-label mt25 c-t-right">封面:</label>
  113. <div class="control-form">
  114. <div class="upload-img mr20" id = "newUrl" style="display:none;" >
  115. </div>
  116. <span class="btn-file btn-file-3 fileinput-button" id = "fileHide"> <i
  117. class="c-f40 c-bold">+</i> <input id="articleCoverFile" class="fileupload-btn"
  118. type="file" name="file" multiple="">
  119. </span> <span class="control-tip">注:为了前端的优质显示效果,建议图片大小控制在100kb以内,像素200x200以内(支持jpg/png/gif)</span>
  120. </div>
  121. </div>
  122. <div class="control-group">
  123. <label class="control-label c-t-right">内容:</label>
  124. <div class="control-form">
  125. <script id="content" name="content" type="text/plain"></script>
  126. </div>
  127. </div>
  128. <div class="control-group">
  129. <div class="control-form">
  130. <a href="#" class="c-btn c-btn-blue btn-w60"
  131. onClick="editArticle()">保存</a> <a href="#"
  132. class="c-btn c-btn-white btn-w60 ml10">取消</a>
  133. </div>
  134. </div>
  135. </div>
  136. </div>
  137. </div>
  138. <script type="text/javascript" src="../widget/artDialog/4.1.7/js/artDialog.min.js"></script>
  139. <script type="text/javascript" src="../cross/js/jquery/1.8.3/jquery.js"></script>
  140. <script type="text/javascript" src="../cross/js/cross.ui.js"></script>
  141. <link rel="stylesheet"
  142. href="../widget/artDialog/4.1.7/css/artDialog.css" type="text/css" />
  143. <script type="text/javascript"
  144. src="../widget/artDialog/4.1.7/js/artDialog.js"></script>
  145. <script type="text/javascript"
  146. src="../widget/placeholder/2.0.7/js/jquery.placeholder.js"></script>
  147. <script type="text/javascript"
  148. src="../widget/nicescroll/3.6.0/js/jquery.nicescroll.min.js"></script>
  149. <script type="text/javascript"
  150. src="../widget/ueditor/1.4.3/ueditor.config2.js"></script>
  151. <script type="text/javascript"
  152. src="../widget/ueditor/1.4.3/ueditor.api.js"></script>
  153. <script type="text/javascript"
  154. src="../widget/inputSelect/1.0/js/inputSelect.js"></script>
  155. <script type="text/javascript"
  156. src="../widget/fileUpload/9.11.2/js/jquery.fileupload.js"></script>
  157. <script src="../cross/js/jquery/1.8.3/ajaxfileupload.js"></script>
  158. <script type="text/javascript">
  159. var remark1 = null;
  160. var articleid = null;
  161. var articleCover = ""; //封面图
  162. $(function() {
  163. articleid = getUrlParam("articleid");
  164. getrounte1();
  165. getrounte2();
  166. getArticlelevel();
  167. getArticleType();
  168. queryCardInfo();
  169. $('.phone-main').height($('.phone-wrap').height() - $('.phone-header').height());
  170. //ueditor
  171. remark1 = UE.getEditor('content');
  172. $("#articleCoverFile").change(function () {
  173. uploadImage();
  174. });
  175. //预览区自定义滚动条
  176. $(".phone-main").niceScroll({cursorcolor:"#a8a8a8",zindex:999});
  177. var nice = $(".phone-main").getNiceScroll();
  178. $(window).resize(function(){
  179. nice.resize();
  180. });
  181. });
  182. function queryCardInfo(){
  183. $.ajax({
  184. dataType: "json",
  185. type: "POST",
  186. cache:false,
  187. url: '/JkEdu/articlePc/queryArticlePcId',
  188. data: {
  189. articleid : articleid
  190. },
  191. beforeSend: function(){
  192. artLoading=art.dialog({
  193. lock: true,
  194. content: '<img src="../widget/artDialog/4.1.7/images/loading.gif" class="mr10" />数据加载中,请稍候...',
  195. tips:true
  196. });
  197. },
  198. success: function(data){
  199. artLoading.close();
  200. if(data.Code==10000){
  201. if(typeof(data.result) != "undefined"){
  202. setTimeout(function(){
  203. $('#ArticleTitle').val(data.result.articletitle);
  204. $('#h1w').val(data.result.articletitle);
  205. $('#h1w').html(data.result.articletitle);
  206. if (data.result.articlecover!=undefined){
  207. var html = "";
  208. html += '';
  209. html += '<img src="'+(data.result.articlecover==undefined?'':data.result.articlecover)+'" alt="" />';
  210. html += '<i class="icon icon-close" id = "gg"></i>';
  211. $('#newUrl').html(html);
  212. $("#newUrl").show();//
  213. $("#fileHide").hide();//隐藏
  214. $('#newUrl').val(data.result.articlecover);
  215. $("#gg").click(function () {
  216. uploadImage2();
  217. });
  218. }
  219. $('#ArticleType').formSelect('setDataKey', data.result.articletype);
  220. $('#SecondLevelCategoryId').formSelect('setDataKey', data.result.secondlevelcategoryid);
  221. $('#FirstLevelCategoryId').formSelect('setDataKey', data.result.firstlevelcategoryid);
  222. $('#Articlelevel').formSelect('setDataKey', data.result.articlelevel);
  223. if (typeof(data.result.articlecontent) != "undefined") {
  224. remark1.ready(function() {
  225. //设置编辑器的内容
  226. remark1.setContent(data.result.articlecontent);
  227. });
  228. }
  229. $('#articlecp').html(data.result.articlecontent);
  230. }, 300);
  231. }
  232. }else{
  233. ask(data.Message);
  234. }
  235. },
  236. error: function () {
  237. artLoading.close();
  238. var artBox=art.dialog({
  239. lock: true,
  240. artIcon:'error',
  241. opacity:0.4,
  242. width: 250,
  243. title:'提示',
  244. content: '数据加载失败!请联系管理员',
  245. ok: function () {
  246. }
  247. });
  248. }
  249. });
  250. }
  251. function getUrlParam(name) {
  252. var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
  253. var r = window.location.search.substr(1).match(reg);
  254. if (r!=null) return decodeURI(r[2]); return "";
  255. }
  256. function uploadImage(){
  257. var val=$("#articleCoverFile").val();
  258. if(val==null||val==""){
  259. return;
  260. }
  261. $.ajaxFileUpload({
  262. url : '/JkEdu/file/upload', //需要链接到服务器地址
  263. secureuri : false,
  264. fileElementId : 'articleCoverFile', //文件选择框的id属性
  265. dataType : 'json',
  266. success : function(data, status) {
  267. var file = $("#articleCoverFile") ;
  268. file.after(file.clone().val(""));
  269. file.remove();
  270. if (data.Code == 10000) {
  271. var html = "";
  272. html += '';
  273. html += '<img src="'+(data.url.Uri==undefined?'':data.url.Uri)+'" alt="" />';
  274. html += '<i class="icon icon-close" id = "gg"></i>';
  275. $('#newUrl').html(html);
  276. $("#newUrl").show();//
  277. $("#fileHide").hide();//隐藏
  278. articleCover = data.url.Uri;
  279. $("#gg").click(function () {
  280. uploadImage2();
  281. });
  282. } else if (data.Code == -10000) {
  283. }
  284. },error: function (data, status, e){
  285. artLoading.close();
  286. tip("请重新登录,可能网络异常");
  287. }
  288. });
  289. }
  290. function uploadImage2(){
  291. $("#newUrl").hide();
  292. $("#fileHide").show();
  293. $("#articleCoverFile").change(function () {
  294. uploadImage();
  295. });
  296. }
  297. //修改文章
  298. function editArticle(){
  299. var param = {};
  300. var remark = remark1.getContent();
  301. param.remark = remark;
  302. param.articleid = articleid;
  303. param.ArticleTitle = $('#ArticleTitle').val();
  304. param.ArticleType = $('#ArticleType').formSelect('getDataKey');
  305. param.Articlelevel = $('#Articlelevel').formSelect('getDataKey');
  306. param.newUrl = articleCover;
  307. param.SecondLevelCategoryId = $('#SecondLevelCategoryId').formSelect('getDataKey');
  308. param.SecondLevelCategoryName = $('#SecondLevelCategoryId').formSelect('getDataVal');
  309. param.FirstLevelCategoryId = $('#FirstLevelCategoryId').formSelect('getDataKey');
  310. param.FirstLevelCategoryName = $('#FirstLevelCategoryId').formSelect('getDataVal');
  311. if("" == param.ArticleTitle){
  312. ask("标题不能为空");
  313. return;
  314. }
  315. $.post("/JkEdu/articlePc/editArticle",param, function(data){
  316. if(data.Code==10000){
  317. var artBox=art.dialog({
  318. lock: true,
  319. artIcon:'error',
  320. opacity:0.4,
  321. width: 250,
  322. title:'提示',
  323. content: "修改成功",
  324. ok: function () {
  325. location.href ="JkArticleLibrary.html";
  326. //window.opener.query();
  327. },
  328. close:function(){
  329. }
  330. });
  331. }else{
  332. ask(data.Message);
  333. }
  334. });
  335. }
  336. function ask(message){
  337. art.dialog({
  338. lock : true,
  339. artIcon : 'ask',
  340. opacity : 0.4,
  341. width : 250,
  342. title : '提示',
  343. content : message,
  344. ok : function() {
  345. }
  346. });
  347. }
  348. //一级分类下拉框
  349. function getrounte1(){
  350. var tempArr =new Array();
  351. $.ajax({
  352. dataType: "json",
  353. type: "POST",
  354. cache:false,
  355. data : {
  356. },
  357. url: "/JkEdu/configDict/getCateOne",
  358. success : function(result) {
  359. if (result.Code == 10000) {
  360. var list = result.result;
  361. if (list != null) {
  362. list.unshift({
  363. "categoryId" : "",
  364. "categoryName" : "--请选择一级分类--"
  365. });
  366. $('#FirstLevelCategoryId').formSelect({
  367. jsonData : list,
  368. jsonDataId : "categoryId",
  369. jsonDataText : "categoryName"
  370. }, null, function(dom, text, value) {// 点击某个选项回调
  371. $('#SecondLevelCategoryId').formSelect('resetValue');
  372. getrounte2();
  373. });
  374. }
  375. }
  376. }
  377. });
  378. }
  379. //二级分类下拉框
  380. function getrounte2(){
  381. var pFirstId = $("#p_FirstLevelCategoryId").val();
  382. var tempArr =new Array();
  383. $.ajax({
  384. dataType: "json",
  385. type: "POST",
  386. cache:false,
  387. data : {
  388. pFirstId:pFirstId,
  389. },
  390. url: "/JkEdu/configDict/getCateTwo",
  391. success : function(result) {
  392. if (result.Code == 10000) {
  393. var list = result.result;
  394. if (list != null) {
  395. list.unshift({
  396. "categoryId" : "",
  397. "categoryName" : "--请选择一级分类--"
  398. });
  399. $('#SecondLevelCategoryId').formSelect({
  400. jsonData : list,
  401. jsonDataId : "categoryId",
  402. jsonDataText : "categoryName"
  403. }, null, function(dom, text, value) {// 点击某个选项回调
  404. });
  405. }
  406. }
  407. }
  408. });
  409. }
  410. //优先级下拉框
  411. function getArticlelevel(){
  412. var tempArr =new Array();
  413. $.ajax({
  414. dataType: "json",
  415. type: "POST",
  416. cache:false,
  417. data : {
  418. typeName : "prio"
  419. },
  420. url: "/JkEdu/configDict/getDict",
  421. success : function(result) {
  422. if (result.Code == 10000) {
  423. var list = result.result;
  424. if (list != null) {
  425. list.unshift({
  426. "code" : "",
  427. "codeName" : "--请选择重要等级--"
  428. });
  429. $('#Articlelevel').formSelect({
  430. jsonData : list,
  431. jsonDataId : "code",
  432. jsonDataText : "codeName"
  433. }, null, function(dom, text, value) {// 点击某个选项回调
  434. });
  435. }
  436. }
  437. }
  438. });
  439. }
  440. //类型下拉框
  441. function getArticleType() {
  442. $.ajax({
  443. url: "/JkEdu/configDict/getDict",
  444. async : false,
  445. dataType: "json",
  446. type: "POST",
  447. data : {
  448. typeName : "aType"
  449. },
  450. success : function(result) {
  451. if (result.Code == 10000) {
  452. var list = result.result;
  453. if (list != null) {
  454. list.unshift({
  455. "code" : "",
  456. "codeName" : "--请选择类型--"
  457. });
  458. $('#ArticleType').formSelect({
  459. jsonData : list,
  460. jsonDataId : "code",
  461. jsonDataText : "codeName"
  462. }, null, function(dom, text, value) {// 点击某个选项回调
  463. });
  464. }
  465. }
  466. }
  467. });
  468. }
  469. //预览
  470. function preview()
  471. {
  472. var remark = remark1.getContent();
  473. var fatherDiv = remark;
  474. var sonDiv = document.getElementById("articlecp");
  475. //将fatherDiv中的所有内容 包括HTML标签 给son
  476. sonDiv.innerHTML = remark;
  477. }
  478. </script>
  479. </body>
  480. </html>