心通达OA便签模块前端开发说明

便签模块是心通达OA的一个简单入门模块，本文以开发过程视角，对心通达便签模块前端代码进行讲解，希望对研究心通达OA的爱好者有些指导和启示。心通达OA便签模块如下图所示：

页面HTML代码

<body onload="Initialization_load()">
<div class="dingbu"><div class="headImg"><img src="/img/commonTheme/${sessionScope.InterfaceModel}/bianqian.png" ></div><div class="divTitle"><fmt:message code="url.th.Note" /></div>
</div>
<div class="content"><div class="tishi" style="height: 100%;text-align: center;border: none;display: none"><div style="width:100%;padding-top:15%;"><img style="margin-top: 2%;text-align: center;" src="/img/noData.png" alt=""></div><h2 style="margin: auto;text-align: center;font-size: 20px;font-weight: normal;"><fmt:message code="doc.th.NoData" /></h2></div>
</div>
<br>
<button style="top: 6px;width: 100px;" id="but_ns" class=" btn_sps b_but b_new"><img style="margin-right: 3px" src="/img/mywork/newbuildworjk.png" alt=""><fmt:message code="adding.th.note" /></button><div class="modal fade bs-example-modal-sm modal_bbb" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"><div class="modal-dialog modal-sm"><div class="modal_cols" style="background-color:#c4ffc6"></div><div class="modal_cols" style="background-color:#ffaeab"></div><div class="modal_cols" style="background-color:#fffab6"></div><div class="modal_cols" style="background-color:#b2ebfe"></div><div class="modal_cols" style="background-color:#f0c3ff"></div><div class="modal_cols" style="background-color:#ffd1b0"></div></div><div class="new_con"><div class='bianqian' style='background-color: #000;width: 100%;height: 57px;position: absolute;top: 0;left: 0;opacity: 0.3;border-top-left-radius: 5px;border-top-right-radius: 5px;'></div><textarea   class='new_content'></textarea><div class="new_butt"><img src="/img/notes/gos_bc.png" title="保存" class="btn_1" onclick="new_btns(0)"><img src="/img/notes/gos_bc.png" title="保存" class="btn_9" onclick="new_btns(9)"><img src="/img/notes/gos_gb.png" title="关闭" class="btn_2" onclick="new_btns(1)"></div></div>
</div>
</div>
</body>

调用后台接口，初始化页面。根据后台标签数据，显示前端标签区域。

function Initialization_load() {var data = {page: 1,pageSize: 15,useFlag: true,timestamp: new Date().getTime()}$.ajax({'url': '/Notes/selectNotes','type': 'get','dataType': 'json','data': data,success: function(rsp) {if (rsp.obj.length != 0) {var length = rsp.obj.length;var divstr = '';for (var i = 0; i < length; i++) {var color = rsp.obj[i].color;var colorol;if (color == 0) {colorol = "#c4ffc6"};if (color == 1) {colorol = "#ffaeab"};if (color == 2) {colorol = "#fffab6"};if (color == 3) {colorol = "#b2ebfe"};if (color == 4) {colorol = "#f0c3ff"};if (color == 5) {colorol = "#ffd1b0"};var content = rsp.obj[i].content;var uid = rsp.obj[i].uid;var noteId = rsp.obj[i].noteId;var timeStamp = rsp.obj[i].editTime;var time = new Date(timeStamp * 1000);var year = time.getFullYear(); //年var month = time.getMonth() + 1; //月var date = time.getDate(); //日var hour = time.getHours(); //时var minu = time.getMinutes(); //分var conds = time.getSeconds(); //秒var new_months;var new_dates;var new_hours;var new_minus;var new_condss;if (month < 10) {new_months = "0" + month} else {new_months = month;}if (date < 10) {new_dates = "0" + date} else {new_dates = date;}if (minu < 10) {new_minus = "0" + minu} else {new_minus = minu;}if (hour < 10) {new_hours = "0" + hour;} else {new_hours = hour;}if (conds < 10) {new_condss = "0" + conds;} else {new_condss = conds;}var str_time = year + "-" + new_months + "-" + new_dates;var str_hour = new_hours + ":" + new_minus + ":" + new_condss;var new_time = str_time + '       ' + str_hour;divstr += "<div class='yuan yuan" + noteId + "' style='margin:10px 12px;height:200px;width:200px;left:8px;background-color:" + colorol + ";float:left'>" + "<div style='background-color: #000;width: 100%;height: 44px;position: absolute;top: 0;left: 0;opacity: 0.3;border-top-left-radius: 15px;border-top-right-radius: 15px;'>" + "</div>" + "<p style='position: relative;margin-top: 22px;left: 28px'>" + "<span class='title_time'>" + new_time + "</span>" + "<span class='title_hms'style='display: none'>" + str_hour + "</span></p>" + "<p class='textList contents' style='background-color:" + colorol + ";margin-top: 12px;padding-left: 12px;' style='width:90%;margin:0 auto'>" + content + "</p>" + "<span class='span_bj' onclick='redact(this)' ><img src='/img/notes/gos_xxx.png' class='span_remove' onclick='removes(this)' ></span></div>"}$(".content").html(divstr);gon_hover();} else {$('.tishi').css("display", "block");}}});
}

效果如下图

页面DOM加载完成后，用$(document).ready绑定事件

$(document).ready(function() {//对话框弹出$('.bs-example-modal-sm').on('show.bs.modal',function() {var arr = ["c4ffc6", "ffaeab", "fffab6", "b2ebfe", "f0c3ff", "ffd1b0"];var index = Math.floor((Math.random() * arr.length));$(".new_con").css("background-color", "#" + arr[index] + "");$(".new_con").find(".new_content").css("background-color", "#" + arr[index] + "");$(".new_content").val("");$(".new_con").show();$(".btn_1").show();$(".btn_9").hide();setTimeout(function() {$(".new_content").focus();},1000);});//点击新建调用模态太对话框$("#but_ns").click(function() {$('.bs-example-modal-sm').modal('show');});//换色$(".modal_cols").click(function() {colorb = $(this).css("background-color");$(".new_con").css("background-color", colorb);$(".new_con").find(".new_content").css("background-color", colorb);});
});

事件绑定后，点击后页面元素，出现如下编辑效果

本文说明了心通达OA开发前端页面的主体框架，其他保存、删除操作的前端代码，有兴趣的可以自行研究《心通达低代码开发平台》的便签模块前端源码。http://community.8oa.cn/forum.php?mod=viewthread&tid=2&extra=page%3D1

心通达OA便签模块前端开发说明相关推荐

心通达OA开发环境搭建，可在心通达OA平台上做业务管理二开，贡献您业务、开发能力
心通达OA开发环境搭建,可在心通达OA平台上做业务管理二开,贡献您业务.开发能力 [自行搭建开发环境所需工具] 1.gradle-3.5.gradle-4.1 2.IntelliJ IDEA 2021 ...
心通达OA系统的研发源自2001年，距今已有21年的历史沉淀
心通达OA系统的研发源自2001年,距今已有21年的历史沉淀. 1.系统介绍心通达OA系统的研发源自2001年,距今已有21年的历史沉淀.心通达OA采用主流企业级JAVA技术平台,基于云计算模式的S ...
心通达OA智慧办公系统拥有n个核心功能
心通达OA智慧办公系统拥有11个核心功能,分别是: 1.门户:系统内置16个门户并可扩展,形成一站式的协同门户,自动将相关信息从各个模块以及异构系统中抽取展现,同时自动与手机门户同步信息. 2.组织: ...
心通达OA办公系统与传统办公模式相比好在哪里
传统办公的模式传统的办公模式是企业租赁办公场地,员工在公司的区域内进行办公. 部门内部及部门之间的任务完成完全靠人力或借助传统的交通工具等手段完成. 传统办公模式的缺点众所周知,这种模式受限于时间 ...
心通达OA软件六大特色总结
心通达OA软件六大特色总结 1.多租户/多组织满足企业集团的集中部署需求.部署一套系统,满足数十家甚至数百家企业同时使用独立OA系统. 支持集团总部对下属企业的组织.数据进行集中管控 2.多数据库/ ...
心通达OA 办公精灵Mac版更新
http://www.8oa.cn/download/app/XOA_MAC20201111.dmg 心通达OA 办公精灵Mac版更新,同时支持英特尔和苹果M1芯片电脑,如果有苹果Mac系统的,可以试 ...
心通达OA党建详细功能说明
心通达OA党建详细功能说明
心通达OA已经支持11个操作系统，包括鸿蒙OS、麒麟OS等等
心通达OA已经支持11个操作系统,是国内支持平台最多的企业即时通讯软件,也已上架麒麟和统信应用商店.包括鸿蒙OS.麒麟OS.统信OS.Mac OS等等
五一节后收心大法,一个便签让满血复活
五一节放假五天,时间不算很长可也不短.如果五一假期玩嗨了,到了上班的时候,状态难免不佳.有的人甚至疲倦.昏昏欲睡.难以集中精神.肌肉酸痛.心情烦躁.容易发怒甚至根本不想上班!这叫节后综合症,为了避免自 ...

心通达OA便签模块前端开发说明

心通达OA便签模块前端开发说明相关推荐

最新文章

热门文章