Index.cshtml 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510
  1. @{
  2. ViewBag.Title = "邮件中心";
  3. Layout = "~/Views/Shared/_LayoutIndex.cshtml";
  4. }
  5. <script>
  6. $(function () {
  7. InitialPage();
  8. InitialEmailNavCount();
  9. GetGrid();
  10. });
  11. //初始化页面
  12. function InitialPage() {
  13. //layout布局
  14. $('#layout').layout({
  15. applyDemoStyles: true,
  16. west__resizable: false,
  17. west__size: 220,
  18. spacing_open: 0,
  19. onresize: function () {
  20. $(window).resize();
  21. }
  22. });
  23. $('.profile-nav').height($(window).height() - 60);
  24. $('.profile-content').height($(window).height() - 20);
  25. //resize重设(表格、树形)宽高
  26. $(window).resize(function (e) {
  27. window.setTimeout(function () {
  28. $('#gridTable').setGridWidth(($('#gridPanel').width() - 15));
  29. $("#gridTable").setGridHeight($(window).height() - 139.5);
  30. $('.profile-nav').height($(window).height() - 60);
  31. $('.profile-content').height($(window).height() - 20);
  32. }, 200);
  33. e.stopPropagation();
  34. });
  35. InitialMyfloder();
  36. }
  37. //统计邮件数量
  38. function InitialEmailNavCount() {
  39. $.ajax({
  40. url: "../../PublicInfoManage/Email/GetMailCount",
  41. type: "get",
  42. dataType: "json",
  43. async: false,
  44. success: function (count) {
  45. $("#unreadMail").find('span').html(count.unread);
  46. $("#starredMail").find('span').html(count.asterisk);
  47. $("#draftMail").find('span').html(count.draft);
  48. $("#recycleMail").find('span').html(count.recycle);
  49. $("#addresseeMail").find('span').html(count.addressee);
  50. $("#sendMail").find('span').html(count.sent);
  51. }
  52. });
  53. }
  54. //初始化我的文件夹(新增、修改、删除)
  55. function InitialMyfloder() {
  56. $.ajax({
  57. url: "../../PublicInfoManage/Email/GetCategoryListJson",
  58. type: "get",
  59. dataType: "json",
  60. async: false,
  61. success: function (data) {
  62. $("#myfloderArea ul").html('');
  63. $.each(data, function (i) {
  64. var row = data[i];
  65. $("#myfloderArea ul").append('<li style="margin-bottom: 0px;"><i class="fa fa-tags" style="margin-right:5px; font-size: 13px;color: #666666;opacity: 0.9;"></i>' + row.FullName + '<span style="float: right; right: 9px; position: relative; color: #95A0AA; display: none;"><a data-value="' + row.CategoryId + '" class="edit_floder" style="color: #95A0AA;">编辑</a>&nbsp;<a data-value="' + row.CategoryId + '" class="delete_floder" style="color: #95A0AA;">删除</a></span></li>');
  66. $("#lr-moveTo").next('ul').append('<li><a data-value="' + row.CategoryId + '">&nbsp;' + row.FullName + '</a></li>');
  67. });
  68. }
  69. });
  70. $(".profile-nav li").click(function () {
  71. $(".profile-nav li").removeClass("active");
  72. $(".profile-nav li").removeClass("hover");
  73. $(this).addClass("active");
  74. }).hover(function () {
  75. if (!$(this).hasClass("active")) {
  76. $(this).addClass("hover");
  77. }
  78. }, function () {
  79. $(this).removeClass("hover");
  80. })
  81. $("#myfloder").click(function () {
  82. if (!$(this).hasClass("Expand")) {
  83. $('#myfloderArea ul').show();
  84. $(this).addClass("Expand");
  85. $(".mail-floder-icon").find('i').swapClass("fa fa-chevron-right", "fa fa-chevron-down");
  86. } else {
  87. $('#myfloderArea ul').hide();
  88. $(this).removeClass("Expand");
  89. $(".mail-floder-icon").find('i').swapClass("fa fa-chevron-down", "fa fa-chevron-right");
  90. }
  91. }).parents('li').hover(function () {
  92. $("#addfloder").show();
  93. }, function () {
  94. $("#addfloder").hide();
  95. });
  96. $("#myfloderArea li").hover(function () {
  97. $(this).find("span").show();
  98. }, function () {
  99. $(this).find("span").hide();
  100. });
  101. //添加文件夹
  102. $("#addfloder").unbind('click');
  103. $("#addfloder").click(function () {
  104. dialogOpen({
  105. id: "Form",
  106. title: '添加文件夹',
  107. url: '/PublicInfoManage/Email/EmailCategoryForm',
  108. width: "400px",
  109. height: "200px",
  110. callBack: function (iframeId) {
  111. top.frames[iframeId].AcceptClick();
  112. }
  113. });
  114. });
  115. //编辑文件夹
  116. $("#myfloderArea li .edit_floder").click(function () {
  117. var keyValue = $(this).attr('data-value');
  118. dialogOpen({
  119. id: "Form",
  120. title: '编辑文件夹',
  121. url: '/PublicInfoManage/Email/EmailCategoryForm?keyValue=' + keyValue,
  122. width: "400px",
  123. height: "200px",
  124. callBack: function (iframeId) {
  125. top.frames[iframeId].AcceptClick();
  126. }
  127. });
  128. });
  129. //删除文件夹
  130. $("#myfloderArea li .delete_floder").click(function () {
  131. var keyValue = $(this).attr('data-value');
  132. $.RemoveForm({
  133. url: "../../PublicInfoManage/Email/RemoveCategoryForm",
  134. param: { keyValue: keyValue },
  135. success: function (data) {
  136. InitialMyfloder();
  137. }
  138. });
  139. });
  140. }
  141. //加载表格
  142. function GetGrid() {
  143. var selectedRowIndex = 0;
  144. var $gridTable = $("#gridTable");
  145. $gridTable.jqGrid({
  146. url: "../../PublicInfoManage/Email/GetUnreadMailJson",
  147. datatype: "json",
  148. height: $(window).height() - 139.5,
  149. autowidth: true,
  150. colModel: [
  151. { label: '主键', name: 'ContentId', hidden: true },
  152. { label: '主键', name: 'ParentId', hidden: true },
  153. {
  154. label: '&nbsp;', name: 'IsHighlight', width: 30, align: 'center',
  155. formatter: function (cellvalue, options, rowObject) {
  156. if (rowObject.IsHighlight == 1) {
  157. return "<a title=\"取消星标\" onclick=\"btn_cancelasterisk('" + rowObject.ContentId + "')\" style=\"cursor:pointer;font-size: 15px;color: #ffce55;\"><i class=\"fa fa-star\"></i></a>";
  158. } else {
  159. return "<a title=\"设置星标\" onclick=\"btn_asterisk('" + rowObject.ContentId + "')\" style=\"cursor:pointer;font-size: 15px;color: #d0d0d0;\"><i class=\"fa fa-star-o\"></i></a>";
  160. }
  161. }
  162. },
  163. { label: '发件人', name: 'SenderName', index: 'SenderName', width: 180, align: 'left' },
  164. {
  165. label: '主题', name: 'Theme', index: 'Theme', width: $(".profile-content").width() - 430, align: 'left',
  166. formatter: function (cellvalue, options, rowObject) {
  167. //rowObject.ThemeColor
  168. return "<p onclick=\"btn_lookmail('" + rowObject.ContentId + "')\" style=\"cursor:pointer;color:" + rowObject.ThemeColor + ";\">" + cellvalue + "</p>";
  169. }
  170. },
  171. {
  172. label: "时间", name: "SenderTime", index: "SenderTime", width: 120, align: "center",
  173. formatter: function (cellvalue, options, rowObject) {
  174. return formatDate(cellvalue, 'yyyy-MM-dd hh:mm');
  175. }
  176. }
  177. ],
  178. viewrecords: true,
  179. rowNum: 30,
  180. rowList: [30, 50, 100],
  181. pager: "#gridPager",
  182. sortname: 'CreateDate',
  183. sortorder: 'desc',
  184. rownumbers: true,
  185. shrinkToFit: false,
  186. gridview: true,
  187. onSelectRow: function () {
  188. selectedRowIndex = $gridTable.getGridParam('selrow');
  189. },
  190. gridComplete: function () {
  191. $gridTable.setSelection(selectedRowIndex, false);
  192. var ids = $gridTable.getDataIDs();
  193. for (var i = 0; i < ids.length; i++) {
  194. var rowData = $gridTable.getRowData(ids[i]);
  195. if (rowData.ParentId == 0) {//如果天数等于0,则背景色置灰显示
  196. if (rowData.ThemeColor)
  197. {
  198. $('#' + ids[i]).find("td").css("font-weight", "800" );;
  199. }
  200. else
  201. {
  202. $('#' + ids[i]).find("td").css("font-weight","800");;
  203. }
  204. }
  205. else
  206. {
  207. $('#' + ids[i]).find("td").css("color", "DimGray");
  208. }
  209. }
  210. }
  211. });
  212. //邮件left导航事件(未读、星标、草稿、回收、收件、已发送)
  213. $("#nav_email li").click(function () {
  214. $("#txt_Keyword").val('');
  215. $("#lr-delete").show();
  216. $("#lr-thoroughdelete").show();
  217. $("#lr-marked").show();
  218. $("#lr-moveTo").show();
  219. var _url = "";
  220. var id = $(this).attr('id');
  221. switch (id) {
  222. case "unreadMail":
  223. _url = "../../PublicInfoManage/Email/GetUnreadMailJson";
  224. break;
  225. case "starredMail":
  226. _url = "../../PublicInfoManage/Email/GetAsteriskMailJson";
  227. break;
  228. case "draftMail":
  229. _url = "../../PublicInfoManage/Email/GetDraftMailJson";
  230. $("#lr-delete").hide();
  231. $("#lr-marked").hide();
  232. $("#lr-moveTo").hide();
  233. break;
  234. case "recycleMail":
  235. _url = "../../PublicInfoManage/Email/GetRecycleMailJson";
  236. $("#lr-delete").hide();
  237. $("#lr-marked").hide();
  238. $("#lr-moveTo").hide();
  239. break;
  240. case "addresseeMail":
  241. _url = "../../PublicInfoManage/Email/GetAddresseeMailJson";
  242. break;
  243. case "sendMail":
  244. _url = "../../PublicInfoManage/Email/GetSentMailJson";
  245. break;
  246. default:
  247. break;
  248. }
  249. $gridTable.jqGrid('setGridParam', {
  250. url: _url,
  251. page: 1
  252. }).trigger('reloadGrid');
  253. });
  254. //查询事件
  255. $("#btn_Search").click(function () {
  256. $gridTable.jqGrid('setGridParam', {
  257. postData: {
  258. keyword: $("#txt_Keyword").val(),
  259. page: 1
  260. },
  261. }).trigger('reloadGrid');
  262. });
  263. }
  264. //收件事件
  265. function btn_mailRecv() {
  266. InitialEmailNavCount();
  267. $("#gridTable").trigger("reloadGrid");
  268. }
  269. //写信、编辑草稿
  270. function btn_mailSend(keyValue) {
  271. dialogOpen({
  272. id: "EmailWriteForm",
  273. title: keyValue != "" ? "修改草稿" : "写信",
  274. url: '/PublicInfoManage/Email/EmailWriteForm?keyValue=' + keyValue,
  275. width: "1100px",
  276. height: "700px",
  277. btn: null
  278. });
  279. }
  280. //查看邮件
  281. function btn_lookmail(keyValue) {
  282. var emailType = $("#nav_email li.active").attr('id');
  283. if (emailType == 'draftMail') {
  284. btn_mailSend(keyValue);
  285. } else {
  286. dialogOpen({
  287. id: "EmailLookDetail",
  288. title: "查看邮件",
  289. url: '/PublicInfoManage/Email/EmailLookDetail?keyValue=' + keyValue,
  290. width: "1100px",
  291. height: "700px",
  292. btn: null
  293. });
  294. }
  295. }
  296. //删除
  297. function btn_maildelete() {
  298. var keyValue = $("#gridTable").jqGridRowValue("ContentId");
  299. var emailType = $("#nav_email li.active").attr('id');
  300. if (keyValue) {
  301. $.RemoveForm({
  302. url: "../../PublicInfoManage/Email/RemoveEmailForm",
  303. param: { keyValue: keyValue, emailType: emailType },
  304. success: function (data) {
  305. InitialEmailNavCount();
  306. $("#gridTable").trigger("reloadGrid");
  307. }
  308. })
  309. } else {
  310. dialogMsg('请选择需要删除的数据!', 0);
  311. }
  312. }
  313. //彻底删除
  314. function btn_mailthoroughdelete() {
  315. var keyValue = $("#gridTable").jqGridRowValue("ContentId");
  316. var emailType = $("#nav_email li.active").attr('id');
  317. if (keyValue) {
  318. $.RemoveForm({
  319. url: "../../PublicInfoManage/Email/ThoroughRemoveEmailForm",
  320. param: { keyValue: keyValue, emailType: emailType },
  321. success: function (data) {
  322. InitialEmailNavCount();
  323. $("#gridTable").trigger("reloadGrid");
  324. }
  325. })
  326. } else {
  327. dialogMsg('请选择需要彻底删除的数据!', 0);
  328. }
  329. }
  330. //邮件已读
  331. function btn_read() {
  332. var keyValue = $("#gridTable").jqGridRowValue("ContentId");
  333. if (keyValue) {
  334. $.ajax({
  335. url: "../../PublicInfoManage/Email/ReadEmail",
  336. data: { keyValue: keyValue, IsRead: 1 },
  337. type: "post",
  338. dataType: "json",
  339. success: function (data) {
  340. InitialEmailNavCount();
  341. $("#gridTable").trigger("reloadGrid");
  342. }
  343. });
  344. } else {
  345. dialogMsg('请选择需要设置已读邮件!', 0);
  346. }
  347. }
  348. //邮件未读
  349. function btn_unread() {
  350. var keyValue = $("#gridTable").jqGridRowValue("ContentId");
  351. if (keyValue) {
  352. $.ajax({
  353. url: "../../PublicInfoManage/Email/ReadEmail",
  354. data: { keyValue: keyValue, IsRead: 0 },
  355. type: "post",
  356. dataType: "json",
  357. success: function (data) {
  358. InitialEmailNavCount();
  359. $("#gridTable").trigger("reloadGrid");
  360. }
  361. });
  362. } else {
  363. dialogMsg('请选择需要设置未读邮件!', 0);
  364. }
  365. }
  366. //星标邮件
  367. function btn_asterisk(keyValue) {
  368. if (keyValue == undefined) {
  369. keyValue = $("#gridTable").jqGridRowValue("ContentId");
  370. }
  371. if (keyValue) {
  372. $.ajax({
  373. url: "../../PublicInfoManage/Email/SteriskEmail",
  374. data: { keyValue: keyValue, asterisk: 1 },
  375. type: "post",
  376. dataType: "json",
  377. success: function (data) {
  378. InitialEmailNavCount();
  379. $("#gridTable").trigger("reloadGrid");
  380. }
  381. });
  382. } else {
  383. dialogMsg('请选择需要设置星标邮件!', 0);
  384. }
  385. }
  386. //取消星标邮件
  387. function btn_cancelasterisk(keyValue) {
  388. if (keyValue == undefined) {
  389. keyValue = $("#gridTable").jqGridRowValue("ContentId");
  390. }
  391. if (keyValue) {
  392. $.ajax({
  393. url: "../../PublicInfoManage/Email/SteriskEmail",
  394. data: { keyValue: keyValue, asterisk: 0 },
  395. type: "post",
  396. dataType: "json",
  397. success: function (data) {
  398. InitialEmailNavCount();
  399. $("#gridTable").trigger("reloadGrid");
  400. }
  401. });
  402. } else {
  403. dialogMsg('请选择需要设置取消星标邮件!', 0);
  404. }
  405. }
  406. </script>
  407. <div class="ui-layout" id="layout" style="height: 100%; width: 100%;">
  408. <div class="ui-layout-west">
  409. <div class="west-Panel" style="border-right: none;">
  410. <div class="mail-nav-top">
  411. <div id="mailRecv" class="receive option" onclick="btn_mailRecv()">
  412. <i class="fa fa-download"></i>
  413. 收件
  414. </div>
  415. <div id="mailSend" class="option" onclick="btn_mailSend('')">
  416. <i class="fa fa-edit"></i>
  417. 写信
  418. </div>
  419. </div>
  420. <div class="profile-nav" style="overflow: auto;">
  421. <ul id="nav_email" style="padding-top: 10px;">
  422. <li id="unreadMail" class="active"><i class="fa fa-coffee" style="vertical-align: middle; margin-top: -2px; margin-right: 8px; font-size: 14px; color: #666666; opacity: 0.9;"></i>未读邮箱<span style="float: right; right: 9px; top: 9px; position: relative;" class="label label-default">20</span></li>
  423. <li id="starredMail"><i class="fa fa-star" style="vertical-align: middle; margin-top: -2px; margin-right: 8px; margin-top: -2px; font-size: 14px; color: #666666; opacity: 0.9;"></i>星标邮箱<span style="float: right; right: 9px; top: 9px; position: relative;" class="label label-default">20</span></li>
  424. <li id="draftMail"><i class="fa fa-inbox" style="vertical-align: middle; margin-top: -2px; margin-right: 8px; font-size: 14px; color: #666666; opacity: 0.9;"></i>草稿箱<span style="float: right; right: 9px; top: 9px; position: relative;" class="label label-default">0</span></li>
  425. <li id="recycleMail"><i class="fa fa-trash" style="vertical-align: middle; margin-top: -3px; margin-right: 8px; font-size: 14px; color: #666666; opacity: 0.9;"></i>回收箱<span style="float: right; right: 9px; top: 9px; position: relative;" class="label label-default">8</span></li>
  426. <li id="addresseeMail"><i class="fa fa-sign-in" style="vertical-align: middle; margin-top: -2px; margin-right: 8px; font-size: 14px; color: #666666; opacity: 0.9;"></i>收件箱<span style="float: right; right: 9px; top: 9px; position: relative;" class="label label-default">20</span></li>
  427. <li id="sendMail"><i class="fa fa-sign-out" style="vertical-align: middle; margin-top: -2px; margin-right: 8px; font-size: 14px; color: #666666; opacity: 0.9;"></i>已发送<span style="float: right; right: 9px; top: 9px; position: relative;" class="label label-default">20</span></li>
  428. <div class="divide"></div>
  429. <li>
  430. <span class="mail-floder-icon"><i class="fa fa-chevron-right"></i></span>
  431. <span id="myfloder">我的文件夹</span>
  432. <span id="addfloder" style="float: right; right: 9px; position: relative; color: #95A0AA; display: none;" onclick="btn_add_floder()">添加</span>
  433. </li>
  434. </ul>
  435. <div id="myfloderArea">
  436. <ul style="display: block;"></ul>
  437. </div>
  438. </div>
  439. </div>
  440. </div>
  441. <div class="ui-layout-center">
  442. <div class="center-Panel">
  443. <div class="profile-content" style="background: #fff; padding: 0px;">
  444. <div class="titlePanel">
  445. <div class="title-search">
  446. <table>
  447. <tr>
  448. <td>
  449. <input id="txt_Keyword" type="text" class="form-control" placeholder="请输入要查询关键字" style="width: 200px;" />
  450. </td>
  451. <td style="padding-left: 5px;">
  452. <a id="btn_Search" class="btn btn-primary"><i class="fa fa-search"></i>&nbsp;查询</a>
  453. </td>
  454. </tr>
  455. </table>
  456. </div>
  457. <div class="toolbar">
  458. <div class="btn-group">
  459. <a id="lr-replace" class="btn btn-default" onclick="reload();"><i class="fa fa-refresh"></i>&nbsp;刷新</a>
  460. </div>
  461. <div class="btn-group">
  462. <a id="lr-delete" class="btn btn-default" onclick="btn_maildelete()"><i class="fa fa-trash-o"></i>&nbsp;删除</a>
  463. </div>
  464. <div class="btn-group">
  465. <a id="lr-thoroughdelete" class="btn btn-default" onclick="btn_mailthoroughdelete()"><i class="fa fa-remove"></i>&nbsp;彻底删除</a>
  466. </div>
  467. <div class="btn-group">
  468. <a id="lr-marked" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
  469. <i class="fa fa-tags"></i>&nbsp;标记为<span class="caret"></span>
  470. </a>
  471. <ul class="dropdown-menu pull-right">
  472. <li id="lr-read"><a onclick="btn_read()">&nbsp;已读邮件</a></li>
  473. <li id="lr-unread"><a onclick="btn_unread()">&nbsp;未读邮件</a></li>
  474. <li id="lr-asterisk"><a onclick="btn_asterisk()">&nbsp;星标邮件</a></li>
  475. <li id="lr-cancelasterisk"><a onclick="btn_cancelasterisk()">&nbsp;取消星标</a></li>
  476. </ul>
  477. </div>
  478. <div class="btn-group">
  479. <a id="lr-moveTo" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
  480. <i class="fa fa-retweet"></i>&nbsp;移动到<span class="caret"></span>
  481. </a>
  482. <ul class="dropdown-menu pull-right"></ul>
  483. </div>
  484. <script>$('.toolbar').authorizeButton()</script>
  485. </div>
  486. </div>
  487. <div id="gridPanel" style="padding-left: 15px; padding-right: 15px;">
  488. <table id="gridTable"></table>
  489. <div id="gridPager"></div>
  490. <style>
  491. .ui-jqgrid-htable th.ui-th-column {
  492. background-color: #F7F7F7;
  493. }
  494. </style>
  495. </div>
  496. </div>
  497. </div>
  498. </div>
  499. </div>
  500. <style type="text/css">
  501. .SelectBG{
  502. background-color:#AAAAAA;
  503. }
  504. </style>