kccExcel.html 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429
  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="/marketfront/static/js/luckysheet_old/plugins/js/plugin.js?v=1.0.0"></script>
  34. <script src="/marketfront/static/js/luckysheet_old/luckysheet.umd.js?v=1.0.0"></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" style="width: 100%">
  56. <div class="layui-input-inline">
  57. <form class="layui-form mc-work-form">
  58. <label> 地市可编辑列:从 </label><input type="text" id="editFrom" style="width: 100px"
  59. onkeyup="this.value=this.value.replace(/[^a-zA-Z]/g,'')"></input> 到 <input
  60. type="text" id="editTo" style="width: 100px"
  61. onkeyup="this.value=this.value.replace(/[^a-zA-Z]/g,'')"></input>
  62. </form>
  63. </div>
  64. <label style="color: red;float: right;padding-right: 10px">提示:请在第三列填写地市</label>
  65. </div>
  66. <div style="height:90%;width: 100%;">
  67. <div id="luckysheet" style="width:100%;height:100%">
  68. </div>
  69. </div>
  70. <script>
  71. //监听window是否全屏,并进行相应的操作,支持esc键退出
  72. window.onresize = function () {
  73. var isFull = !!(document.webkitIsFullScreen || document.mozFullScreen ||
  74. document.msFullscreenElement || document.fullscreenElement
  75. );//!document.webkitIsFullScreen都为true。因此用!!
  76. if (isFull == false) {
  77. $("#exitFullScreen").css("display", "none");
  78. $("#fullScreen").css("display", "");
  79. } else {
  80. $("#exitFullScreen").css("display", "");
  81. $("#fullScreen").css("display", "none");
  82. }
  83. }
  84. </script>
  85. <script>
  86. var lockFlag = 'see';
  87. util.ajaxJson("", ctx + "/market/cadvLedger/getRoleByCode", {}, function (res) {
  88. console.log("html" + res.result);
  89. if (res.result == 1) {
  90. lockFlag = 'add';//省级
  91. } else {
  92. lockFlag = 'updata';//管理员
  93. }
  94. });
  95. var id = '' // 模板id 查看/修改load时候用
  96. var powerFlag = '0'; // 权限控制 0 开启 1关闭
  97. var excelId = '';
  98. var flag = false; // 控制excel是否可以编辑
  99. var adminFlag = false;
  100. var userId; // 用户ID
  101. var excelInfo = {};
  102. var isAdmin = '';
  103. var excelLevel = '';
  104. var toolBar = '';
  105. var type = '';
  106. $(function () {
  107. userId = JSON.parse(window.top.sessionStorage.userInfo).loginNo
  108. })
  109. layui.use(['laydate', 'form'], function () {
  110. var laydate = layui.laydate;
  111. var form = layui.form;
  112. form.on('select(powerFlag)', function (data) {
  113. powerFlag = data.value
  114. })
  115. // 获取数据
  116. function getData() {
  117. // 先销毁excel重新加载
  118. if (window.luckysheet) {
  119. window.luckysheet.destroy();
  120. }
  121. //拿参数的
  122. var r = window.top.location.href.split('?')[1];
  123. var excelId = r.split('&')[1].split('=')[1];
  124. type = r.split('&')[0].split('=')[1];
  125. toolBar = '';
  126. var url = '/market/cKeyChannelCoopExcel/getExcelInfo';
  127. util.ajaxJson("数据加载中", ctx + url, {
  128. "id": excelId ? excelId : '',
  129. }, function (res) {
  130. if (res.result == 0) {
  131. // 查看和修改时 下拉框赋值
  132. excelInfo = res.body.excelInfo;
  133. excelLevel = res.body.excelLevel;
  134. isAdmin = res.body.isExcelAdmin;
  135. $("#editFrom").val(excelInfo.editConStart);
  136. $("#editTo").val(excelInfo.editConEnd);
  137. console.log(type);
  138. if (type == '2') {
  139. if (isAdmin) {
  140. toolBar += '<input id="imports" type="file" class="btn btn-primary" style="padding:3px 6px;font-size: 12px;margin-right: 10px;"></input>';
  141. }
  142. toolBar += '<button id="saves" class="btn btn-primary btn-danger" style=" padding:3px 6px; font-size: 12px; margin-right: 10px;">保存</button>';
  143. }
  144. if (isAdmin) {
  145. toolBar += '<button id="exports" class="btn btn-primary" style="padding:3px 6px;font-size: 12px;margin-right: 10px;">导出</button>';
  146. }
  147. 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>';
  148. var eJson = res.body.excelJson;
  149. var cellData = luckysheet.transToCellData(eJson[0].data);
  150. eJson[0].celldata = cellData;
  151. initExcel(res.body.excelJson);
  152. }
  153. });
  154. initExcel()
  155. }
  156. // 表格初始化
  157. function initExcel(data) {
  158. if (type == '1') {
  159. flag = false
  160. } else {
  161. flag = true
  162. }
  163. if (isAdmin) {
  164. adminFlag = true;
  165. }
  166. try {
  167. luckysheet.create({
  168. container: 'luckysheet',
  169. data: data,
  170. showsheetbar: false, // 底部sheet显示/隐藏
  171. showsheetbarConfig: {
  172. add: false, //新增sheet
  173. menu: false, //sheet管理菜单
  174. sheet: false //sheet页显示
  175. },
  176. showstatisticBar: false, // 底部计数
  177. showtoolbar: false,
  178. showinfobar: true, // 顶部信息 文件名称 按钮
  179. allowUpdate: false, // 是否允许操作表格后的后台更新 在线文档websocket时为true
  180. allowEdit: flag, // 是否允许前台编辑
  181. title: excelInfo.name, // 文件名称
  182. lang: 'zh',
  183. enableAddRow: adminFlag,
  184. showstatisticBar: false, // 底部计数
  185. showstatisticBarConfig: {
  186. count: false, // 计数栏
  187. view: false, // 打印视图
  188. zoom: false, // 缩放
  189. },
  190. functionButton: toolBar,
  191. cellRightClickConfig: {
  192. copy: false, // 复制
  193. copyAs: false, // 复制为
  194. paste: false, // 粘贴
  195. insertRow: adminFlag, // 插入行
  196. insertColumn: adminFlag, // 插入列
  197. deleteRow: adminFlag, // 删除选中行
  198. deleteColumn: adminFlag, // 删除选中列
  199. deleteCell: false, // 删除单元格
  200. hideRow: false, // 隐藏选中行和显示选中行
  201. hideColumn: false, // 隐藏选中列和显示选中列
  202. rowHeight: true, // 行高
  203. columnWidth: true, // 列宽
  204. clear: false, // 清除内容
  205. matrix: false, // 矩阵操作选区
  206. sort: false, // 排序选区
  207. filter: false, // 筛选选区
  208. chart: false, // 图表生成
  209. image: false, // 插入图片
  210. link: false, // 插入链接
  211. data: false, // 数据验证
  212. cellFormat: false, // 设置单元格格式
  213. mComplete: false,
  214. mCetup: false,
  215. mRevoke: false
  216. },
  217. hook: {
  218. cellMousedown: function (a, b, c) {
  219. // if (b.c == luckysheet.getSheet().data[b.r].length - 1) {
  220. // return false
  221. // }
  222. },//绑定鼠标事件
  223. cellUpdateBefore: function (r, c) {
  224. console.log('执行事件');
  225. // c坐标 r行坐标
  226. // if(lockFlag == 'updata'){
  227. // return true
  228. // }
  229. // if (c == luckysheet.getSheet().data[r].length - 1) {
  230. // if(luckysheet.getSheet().data[r][c] != null ){
  231. // return false
  232. // }
  233. // }
  234. // var editConStart = excelInfo.editConStart;
  235. // var editConEnd = excelInfo.editConEnd;
  236. // //console.log(r + '---' + c)
  237. // if ($.trim(editConStart) != '' && $.trim(editConEnd) != '' && isAdmin == false) {
  238. // editConStart = editConStart - 1;
  239. // editConEnd = editConEnd - 1;
  240. // // console.log(editConStart + '---' + editConEnd);
  241. // // console.log(c < editConStart);
  242. // // console.log(c > editConEnd);
  243. // // console.log(c == 3);
  244. // if (c < editConStart || c > editConEnd || c == 2) {
  245. // window.top.$vm.$message({
  246. // message: '您无权修改当前列',
  247. // type: 'info'
  248. // });
  249. // return false;
  250. // }
  251. // }
  252. if (r == 0 && isAdmin == false) {
  253. window.top.$vm.$message({
  254. message: '您无权修改当前行',
  255. type: 'info'
  256. });
  257. return false;
  258. }
  259. },
  260. cellMousedownBefore: function (a, p, s) {
  261. if (flag == false) {
  262. window.top.$vm.$message({
  263. message: '查看模式无法编辑',
  264. type: 'info'
  265. });
  266. return false;
  267. } else {
  268. //r行,c列
  269. var r = p.r;
  270. var c = p.c;
  271. // var editConStart = excelInfo.editConStart;
  272. // var editConEnd = excelInfo.editConEnd;
  273. // //console.log(r + '---' + c)
  274. // if ($.trim(editConStart) != '' && $.trim(editConEnd) != '' && isAdmin == false) {
  275. // editConStart = editConStart - 1;
  276. // editConEnd = editConEnd - 1;
  277. // // console.log(editConStart + '---' + editConEnd);
  278. // // console.log(c < editConStart);
  279. // // console.log(c > editConEnd);
  280. // // console.log(c == 3);
  281. // if (c < editConStart || c > editConEnd || c == 2) {
  282. // window.top.$vm.$message({
  283. // message: '您无权修改当前列',
  284. // type: 'info'
  285. // });
  286. // return false;
  287. // }
  288. // }
  289. if (r == 0 && isAdmin == false) {
  290. window.top.$vm.$message({
  291. message: '您无权修改当前行',
  292. type: 'info'
  293. });
  294. return false;
  295. }
  296. }
  297. },
  298. rangePasteBefore: function (range, data) {
  299. //禁止选区粘贴
  300. return false;
  301. },
  302. },
  303. })
  304. } catch (err) {
  305. console.log(err)
  306. }
  307. if (isAdmin == false) {
  308. $('#monthSelect').hide()
  309. } else {
  310. $('#monthSelect').show()
  311. }
  312. initHandel()
  313. }
  314. // 绑定按钮事件
  315. function initHandel() {
  316. $("#fullScreen").on("click", function () {
  317. fullScreen();
  318. })
  319. //退出全屏
  320. $("#exitFullScreen").on("click", function () {
  321. exitFullscreen();
  322. })
  323. // 保存
  324. $('#saves').off("click").click(function () {
  325. // 当前工作表名
  326. var r = window.top.location.href.split('?')[1];
  327. var excelId = r.split('&')[1].split('=')[1];
  328. var sheetName = luckysheet.getSheet().name;
  329. var data = luckysheet.getSheet(sheetName);
  330. var urlsave = '/market/cKeyChannelCoopExcel/saveExcel';
  331. var editFrom = $("#editFrom").val();
  332. var editTo = $("#editTo").val();
  333. // if (editTo < editFrom) {
  334. // window.top.$vm.$message({
  335. // message: '可编辑列的起始列不能大于结束列',
  336. // type: 'error'
  337. // });
  338. // return;
  339. // }
  340. if (isAdmin && ($.trim(editFrom) == '' || $.trim(editTo) == '')) {
  341. window.top.$vm.$message({
  342. message: '可编辑列不可为空',
  343. type: 'error'
  344. });
  345. return;
  346. }
  347. util.ajaxJson("正在加载中", ctx + urlsave, {
  348. data: data,
  349. id: excelId,
  350. editConStart: editFrom,
  351. editConEnd: editTo
  352. }, function (data) {
  353. if (data.result == 1) {
  354. window.top.$vm.$message({
  355. message: data.desc,
  356. type: 'error'
  357. })
  358. } else {
  359. console.log(data);
  360. getData()
  361. }
  362. });
  363. })
  364. // 导出
  365. $('#exports').click(function () {
  366. exportExcel(luckysheet.getluckysheetfile(), excelInfo.name)
  367. })
  368. // 导入
  369. $("#imports").change(function (evt) {
  370. var files = evt.target.files;
  371. if (files == null || files.length == 0) {
  372. window.top.$vm.$message({
  373. message: '没有文件导入',
  374. type: 'info'
  375. })
  376. return;
  377. }
  378. var name = files[0].name;
  379. var suffixArr = name.split("."),
  380. suffix = suffixArr[suffixArr.length - 1];
  381. if (suffix != "xlsx") {
  382. window.top.$vm.$message({
  383. message: '目前只支持xlsx文件的导入',
  384. type: 'info'
  385. })
  386. return;
  387. }
  388. // 解析文件
  389. LuckyExcel.transformExcelToLucky(
  390. files[0],
  391. function (exportJson, luckysheetfile) {
  392. console.log(exportJson);
  393. if (exportJson.sheets == null || exportJson.sheets.length == 0) {
  394. window.top.$vm.$message({
  395. message: '无法读取excel文件的内容,当前不支持xls文件',
  396. type: 'info'
  397. })
  398. return;
  399. }
  400. // 销毁原来的excel
  401. window.luckysheet.destroy();
  402. // 重新加载
  403. var a = exportJson.sheets[0];
  404. a.name = '';
  405. initExcel([a])
  406. // 绑定按钮事件
  407. initHandel()
  408. }
  409. );
  410. });
  411. }
  412. getData()
  413. })
  414. </script>
  415. </body>
  416. </html>