kccExcel.html 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364
  1. <!DOCTYPE html>
  2. <html>
  3. <head lang='zh'>
  4. <meta charset='utf-8'>
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  6. <meta name="renderer" content="webkit"/>
  7. <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0"/>
  8. <title>Luckysheet</title>
  9. <link rel='stylesheet' href='/static/js/luckysheet/plugins/css/pluginsCss.css'/>
  10. <link rel='stylesheet' href='/static/js/luckysheet/plugins/plugins.css'/>
  11. <link rel='stylesheet' href='/static/js/luckysheet/css/luckysheet.css'/>
  12. <link rel='stylesheet' href='/static/js/luckysheet/assets/iconfont/iconfont.css'/>
  13. <link charset="utf-8" rel="stylesheet" href="/static/css/layui.css?v=1.0.0">
  14. <script>
  15. var _PageHeight = document.documentElement.clientHeight,
  16. _PageWidth = document.documentElement.clientWidth;
  17. var _LoadingTop = _PageHeight > 61 ? (_PageHeight - 61) / 2 : 0,
  18. _LoadingLeft = _PageWidth > 215 ? (_PageWidth - 215) / 2 : 0;
  19. var _LoadingHtml = '<div id="loadingDiv" style="position:absolute;left:0;width:100%;height:' + _PageHeight + 'px;top:0;background:#f3f8ff;opacity:1;filter:alpha(opacity=80);z-index:10000;"><div style="position: absolute; cursor1: wait; left: ' + _LoadingLeft + 'px; top:' + _LoadingTop + 'px; width: auto; height: 57px; line-height: 57px; padding-left: 50px; padding-right: 5px; color: #696969; font-family:\'Microsoft YaHei\';"><img style="width:200px;height:200px" src="../images/loading.gif"></div></div>';
  20. document.write(_LoadingHtml);
  21. document.onreadystatechange = completeLoading;
  22. function completeLoading() {
  23. if (document.readyState == "complete") {
  24. var loadingMask = document.getElementById('loadingDiv');
  25. loadingMask.parentNode.removeChild(loadingMask);
  26. }
  27. }
  28. </script>
  29. <script src="/static/js/layui.js?v=1.0.0"></script>
  30. <script src="/static/js/exceljs.js"></script>
  31. <script src="/static/js/fileSave.js"></script>
  32. <script src="/static/js/luckysheet/luckSheetExcel.js"></script>
  33. <script src="/static/js/luckysheet/plugins/js/plugin.js"></script>
  34. <script src="/static/js/luckysheet/luckysheet.umd.js"></script>
  35. <script src="/static/js/api.config.js"></script>
  36. <script src="/static/js/util.js?v=1.0.0"></script>
  37. <script src="/static/js/url.js?v=1.0.0"></script>
  38. <script src="/static/js/exportExcel.js"></script>
  39. <script src="/static/js/fullScreen.js"></script>
  40. </head>
  41. <style>
  42. * {
  43. padding: 0;
  44. margin: 0;
  45. }
  46. html,
  47. body {
  48. height: 100%;
  49. }
  50. #monthSelect {
  51. padding: 10px 0px;
  52. }
  53. </style>
  54. <body style="background: #fff;">
  55. <div class="layui-inline" id="monthSelect">
  56. <div class="layui-input-inline">
  57. <form class="layui-form mc-work-form">
  58. <label> 地市可编辑列:从 </label><input type="number" id="editFrom" style="width: 100px"></input> 到 <input type="number" id="editTo" style="width: 100px"></input>
  59. </form>
  60. </div>
  61. </div>
  62. <div style="height:90%;width: 100%;">
  63. <div id="luckysheet" style="width:100%;height:100%">
  64. </div>
  65. </div>
  66. <script>
  67. //监听window是否全屏,并进行相应的操作,支持esc键退出
  68. window.onresize = function () {
  69. var isFull = !!(document.webkitIsFullScreen || document.mozFullScreen ||
  70. document.msFullscreenElement || document.fullscreenElement
  71. );//!document.webkitIsFullScreen都为true。因此用!!
  72. if (isFull == false) {
  73. $("#exitFullScreen").css("display", "none");
  74. $("#fullScreen").css("display", "");
  75. } else {
  76. $("#exitFullScreen").css("display", "");
  77. $("#fullScreen").css("display", "none");
  78. }
  79. }
  80. </script>
  81. <script>
  82. var lockFlag = 'see';
  83. util.ajaxJson("", ctx + "/market/cadvLedger/getRoleByCode", {}, function (res) {
  84. console.log("html" + res.result);
  85. if (res.result == 1) {
  86. lockFlag = 'add';//省级
  87. } else {
  88. lockFlag = 'updata';//管理员
  89. }
  90. });
  91. var id = '' // 模板id 查看/修改load时候用
  92. var powerFlag = '0'; // 权限控制 0 开启 1关闭
  93. var excelId = '';
  94. var flag = false; // 控制excel是否可以编辑
  95. var adminFlag = false;
  96. var userId; // 用户ID
  97. var excelInfo = {};
  98. var isAdmin = '';
  99. var excelLevel = '';
  100. var toolBar = '';
  101. var type = '';
  102. $(function () {
  103. userId = JSON.parse(window.top.sessionStorage.userInfo).loginNo
  104. })
  105. layui.use(['laydate', 'form'], function () {
  106. var laydate = layui.laydate;
  107. var form = layui.form;
  108. form.on('select(powerFlag)', function (data) {
  109. powerFlag = data.value
  110. })
  111. // 获取数据
  112. function getData() {
  113. // 先销毁excel重新加载
  114. if (window.luckysheet) {
  115. window.luckysheet.destroy();
  116. }
  117. //拿参数的
  118. var r = window.top.location.href.split('?')[1];
  119. var excelId = r.split('&')[1].split('=')[1];
  120. type = r.split('&')[0].split('=')[1];
  121. toolBar = '';
  122. var url = '/market/cKeyChannelCoopExcel/getExcelInfo';
  123. util.ajaxJson("数据加载中", ctx + url, {
  124. "id": excelId ? excelId : '',
  125. }, function (res) {
  126. if (res.result == 0) {
  127. // 查看和修改时 下拉框赋值
  128. excelInfo = res.body.excelInfo;
  129. excelLevel = res.body.excelLevel;
  130. isAdmin = res.body.isExcelAdmin;
  131. $("#editFrom").val(excelInfo.editConStart);
  132. $("#editTo").val(excelInfo.editConEnd);
  133. console.log(type);
  134. if (type == '2') {
  135. if (isAdmin) {
  136. toolBar += '<input id="imports" type="file" class="btn btn-primary" style="padding:3px 6px;font-size: 12px;margin-right: 10px;"></input>';
  137. }
  138. toolBar += '<button id="saves" class="btn btn-primary btn-danger" style=" padding:3px 6px; font-size: 12px; margin-right: 10px;">保存</button>';
  139. }
  140. if (isAdmin) {
  141. toolBar += '<button id="exports" class="btn btn-primary" style="padding:3px 6px;font-size: 12px;margin-right: 10px;">导出</button>';
  142. }
  143. toolBar += '<button id="fullScreen" class="btn btn-primary" style="padding:3px 6px;font-size: 12px;margin-right: 10px;">全屏显示</button><button id="exitFullScreen" class="btn btn-primary" style="padding:3px 6px;font-size: 12px;margin-right: 10px;display:none">退出全屏</button>';
  144. initExcel(res.body.excelJson);
  145. }
  146. });
  147. initExcel()
  148. }
  149. // 表格初始化
  150. function initExcel(data) {
  151. if (type == '1') {
  152. flag = false
  153. } else {
  154. flag = true
  155. }
  156. if (isAdmin){
  157. adminFlag = true;
  158. }
  159. try {
  160. luckysheet.create({
  161. container: 'luckysheet',
  162. data: data,
  163. showsheetbar: false, // 底部sheet显示/隐藏
  164. showstatisticBar: false, // 底部计数
  165. showtoolbar: false,
  166. showinfobar: true, // 顶部信息 文件名称 按钮
  167. allowUpdate: false, // 是否允许操作表格后的后台更新 在线文档websocket时为true
  168. allowEdit: flag, // 是否允许前台编辑
  169. column: 12,
  170. title: excelInfo.name, // 文件名称
  171. row: 10,
  172. lang: 'zh',
  173. showstatisticBar: false, // 底部计数
  174. showstatisticBarConfig: {
  175. count: false, // 计数栏
  176. view: false, // 打印视图
  177. zoom: false, // 缩放
  178. },
  179. functionButton: toolBar,
  180. cellRightClickConfig: {
  181. copy: false, // 复制
  182. copyAs: false, // 复制为
  183. paste: false, // 粘贴
  184. insertRow: true, // 插入行
  185. insertColumn: adminFlag, // 插入列
  186. deleteRow: adminFlag, // 删除选中行
  187. deleteColumn: adminFlag, // 删除选中列
  188. deleteCell: false, // 删除单元格
  189. hideRow: false, // 隐藏选中行和显示选中行
  190. hideColumn: false, // 隐藏选中列和显示选中列
  191. rowHeight: true, // 行高
  192. columnWidth: true, // 列宽
  193. clear: false, // 清除内容
  194. matrix: false, // 矩阵操作选区
  195. sort: false, // 排序选区
  196. filter: false, // 筛选选区
  197. chart: false, // 图表生成
  198. image: false, // 插入图片
  199. link: false, // 插入链接
  200. data: false, // 数据验证
  201. cellFormat: false, // 设置单元格格式
  202. mComplete: false,
  203. mCetup: false,
  204. mRevoke: false
  205. },
  206. hook: {
  207. cellMousedown: function (a, b, c) {
  208. if (b.c == luckysheet.getSheet().data[b.r].length - 1) {
  209. return false
  210. }
  211. },//绑定鼠标事件
  212. cellUpdateBefore: function (r, c) {
  213. // c坐标 r行坐标
  214. // if(lockFlag == 'updata'){
  215. // return true
  216. // }
  217. // if (c == luckysheet.getSheet().data[r].length - 1) {
  218. // if(luckysheet.getSheet().data[r][c] != null ){
  219. // return false
  220. // }
  221. // }
  222. var editConStart = excelInfo.editConStart;
  223. var editConEnd = excelInfo.editConEnd;
  224. //console.log(r + '---' + c)
  225. if ($.trim(editConStart) != '' && $.trim(editConEnd) != '' && isAdmin == false) {
  226. editConStart = editConStart - 1;
  227. editConEnd = editConEnd - 1;
  228. // console.log(editConStart + '---' + editConEnd);
  229. // console.log(c < editConStart);
  230. // console.log(c > editConEnd);
  231. // console.log(c == 3);
  232. if (c < editConStart || c > editConEnd || c == 2) {
  233. window.top.$vm.$message({
  234. message: '您无权修改当前列',
  235. type: 'info'
  236. });
  237. return false;
  238. }
  239. }
  240. if (r == 0) {
  241. window.top.$vm.$message({
  242. message: '您无权修改当前行',
  243. type: 'info'
  244. });
  245. return false;
  246. }
  247. },
  248. },
  249. })
  250. } catch (err) {
  251. console.log(err)
  252. }
  253. if (isAdmin == false) {
  254. $('#monthSelect').hide()
  255. } else {
  256. $('#monthSelect').show()
  257. }
  258. initHandel()
  259. }
  260. // 绑定按钮事件
  261. function initHandel() {
  262. $("#fullScreen").on("click", function () {
  263. fullScreen();
  264. })
  265. //退出全屏
  266. $("#exitFullScreen").on("click", function () {
  267. exitFullscreen();
  268. })
  269. // 保存
  270. $('#saves').off("click").click(function () {
  271. // 当前工作表名
  272. var r = window.top.location.href.split('?')[1];
  273. var excelId = r.split('&')[1].split('=')[1];
  274. var sheetName = luckysheet.getSheet().name;
  275. var data = luckysheet.getSheet(sheetName);
  276. var urlsave = '/market/cKeyChannelCoopExcel/saveExcel';
  277. var editFrom = $("#editFrom").val();
  278. var editTo = $("#editTo").val();
  279. if (editTo < editFrom){
  280. window.top.$vm.$message({
  281. message: '可编辑列的起始列不能大于结束列',
  282. type: 'error'
  283. });
  284. return;
  285. }
  286. util.ajaxJson("正在加载中", ctx + urlsave, {
  287. data: data,
  288. id: excelId,
  289. editConStart:editFrom,
  290. editConEnd:editTo
  291. }, function (data) {
  292. if (data.result == 1) {
  293. window.top.$vm.$message({
  294. message: data.desc,
  295. type: 'error'
  296. })
  297. }
  298. console.log(data);
  299. getData()
  300. });
  301. })
  302. // 导出
  303. $('#exports').click(function () {
  304. exportExcel(luckysheet.getluckysheetfile(), 'excel')
  305. })
  306. // 导入
  307. $("#imports").change(function (evt) {
  308. var files = evt.target.files;
  309. if (files == null || files.length == 0) {
  310. window.top.$vm.$message({
  311. message: '没有文件导入',
  312. type: 'info'
  313. })
  314. return;
  315. }
  316. var name = files[0].name;
  317. var suffixArr = name.split("."),
  318. suffix = suffixArr[suffixArr.length - 1];
  319. if (suffix != "xlsx") {
  320. window.top.$vm.$message({
  321. message: '目前只支持xlsx文件的导入',
  322. type: 'info'
  323. })
  324. return;
  325. }
  326. // 解析文件
  327. LuckyExcel.transformExcelToLucky(
  328. files[0],
  329. function (exportJson, luckysheetfile) {
  330. if (exportJson.sheets == null || exportJson.sheets.length == 0) {
  331. window.top.$vm.$message({
  332. message: '无法读取excel文件的内容,当前不支持xls文件',
  333. type: 'info'
  334. })
  335. return;
  336. }
  337. // 销毁原来的excel
  338. window.luckysheet.destroy();
  339. // 重新加载
  340. initExcel([exportJson.sheets[0]])
  341. // 绑定按钮事件
  342. initHandel()
  343. }
  344. );
  345. });
  346. }
  347. getData()
  348. })
  349. </script>
  350. </body>
  351. </html>