excel.html 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411
  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/plugins/js/plugin.js"></script>
  33. <script src="/static/js/luckysheet/luckysheet.umd.js"></script>
  34. <script src="/static/js/api.config.js"></script>
  35. <script src="/static/js/util.js?v=1.0.0"></script>
  36. <script src="/static/js/url.js?v=1.0.0"></script>
  37. </head>
  38. <style>
  39. * {
  40. padding: 0;
  41. margin: 0;
  42. }
  43. html,
  44. body {
  45. height: 100%;
  46. }
  47. </style>
  48. <body>
  49. <div class="layui-inline" id="monthSelect">
  50. <label class="layui-form-label">请选择月份</label>
  51. <div class="layui-input-inline">
  52. <input type="text" class="layui-input" id="year" placeholder="请选择月份">
  53. </div>
  54. </div>
  55. <div style="display: flex;height: 93%;width: 100%;" id="excelBox">
  56. <div id="luckysheet" style="width:50%;height:100%">
  57. </div>
  58. <div style="width:50%;height:100%">
  59. <iframe src="./text.html" id="complete" height="100%" width="100%" frameborder="0"></iframe>
  60. </div>
  61. </div>
  62. <script>
  63. var date = new Date();
  64. var month = date.getMonth()
  65. if (month >= 1 && month <= 9) {
  66. month = "0" + (month + 1);
  67. }
  68. var nowDate = date.getFullYear() + '-' + month
  69. $(function () {
  70. getData(nowDate)
  71. })
  72. layui.use(['laydate', 'form'], function () {
  73. var laydate = layui.laydate;
  74. var form = layui.form;
  75. var htmlStr = ''
  76. laydate.render({
  77. elem: '#year'
  78. , value: nowDate
  79. , type: 'month', done: function (value, date, endDate) {
  80. $('#complete')[0].contentWindow.postMessage({
  81. module: "aaa",
  82. month: value
  83. }, 'http://10.230.26.15:8000');
  84. nowDate = value
  85. getData(value)
  86. }
  87. });
  88. })
  89. var flag = false
  90. var excelData;
  91. function getData(nowDate) {
  92. window.luckysheet.destroy();
  93. util.ajaxJson("", ctx + '/market/keywork/load', {
  94. "id": '',
  95. "opMonth": nowDate,
  96. "sts": '0'
  97. }, function (res) {
  98. if (res.result == 0) {
  99. if (res.body[0].config.authority) {
  100. res.body[0].config.authority = {}
  101. }
  102. initExcel(res.body)
  103. excelData = res.body
  104. }
  105. });
  106. }
  107. var datas = [
  108. {
  109. "position": {
  110. "column": [
  111. 2,
  112. 4
  113. ],
  114. "row": [
  115. 1,
  116. 6
  117. ]
  118. },
  119. "id": null,
  120. "name": "11",
  121. "color": "",
  122. "status": "1",
  123. "order": "0",
  124. "opMonth": null,
  125. "data": [
  126. [
  127. null,
  128. null,
  129. null,
  130. null,
  131. null,
  132. null,
  133. null,
  134. null,
  135. null,
  136. null,
  137. null,
  138. null
  139. ],
  140. [
  141. null,
  142. null,
  143. {
  144. "m": null,
  145. "ct": null,
  146. "v": null,
  147. "bl": null,
  148. "fs": null,
  149. "ff": null,
  150. "bg": "#00ff00",
  151. "fc": null,
  152. "un": null,
  153. "it": null,
  154. "ht": null
  155. },
  156. null,
  157. {
  158. "m": null,
  159. "ct": null,
  160. "v": null,
  161. "bl": null,
  162. "fs": null,
  163. "ff": null,
  164. "bg": "#00ff00",
  165. "fc": null,
  166. "un": null,
  167. "it": null,
  168. "ht": null
  169. },
  170. null,
  171. null,
  172. null,
  173. null,
  174. null,
  175. null,
  176. null
  177. ],
  178. [
  179. null,
  180. null,
  181. null,
  182. null,
  183. null,
  184. null,
  185. null,
  186. null,
  187. null,
  188. null,
  189. null,
  190. null
  191. ],
  192. [
  193. null,
  194. null,
  195. null,
  196. null,
  197. null,
  198. null,
  199. null,
  200. null,
  201. null,
  202. null,
  203. null,
  204. null
  205. ],
  206. [
  207. null,
  208. null,
  209. null,
  210. null,
  211. null,
  212. null,
  213. null,
  214. null,
  215. null,
  216. null,
  217. null,
  218. null
  219. ]
  220. ],
  221. "config": {
  222. "rowlen": null,
  223. "customHeight": null,
  224. "merge": null,
  225. "authority": {
  226. selectLockedCells: 1, //选定锁定单元格
  227. selectunLockedCells: 0, //选定解除锁定的单元格
  228. formatCells: 0, //设置单元格格式
  229. formatColumns: 0, //设置列格式
  230. formatRows: 0, //设置行格式
  231. insertColumns: 0, //插入列
  232. insertRows: 0, //插入行
  233. insertHyperlinks: 0, //插入超链接
  234. deleteColumns: 0, //删除列
  235. deleteRows: 0, //删除行
  236. sort: 0, //排序
  237. filter: 0, //使用自动筛选
  238. usePivotTablereports: 0, //使用数据透视表和报表
  239. editObjects: 0, //编辑对象
  240. editScenarios: 0, //编辑方案
  241. hintText: "当前工作表正在编辑中",
  242. sheet: 1
  243. }
  244. }
  245. }
  246. ]
  247. function initExcel(data) {
  248. try {
  249. luckysheet.create({
  250. container: 'luckysheet',
  251. mComplete: function () {
  252. // 选取范围坐标
  253. var position = luckysheet.getRange()[0]
  254. // 当前表所有数据
  255. for (var i = position.row[0]; i <= position.row[1]; i++) {
  256. for (var j = position.column[0]; j <= position.column[1]; j++) {
  257. if (JSON.stringify(luckysheet.getSheet().data[i][j]) != '{}' && JSON.stringify(luckysheet.getSheet().data[i][j]) != 'null') {
  258. console.log(luckysheet.getSheet().data[i][j])
  259. luckysheet.setCellValue(i, j, { bg: "#00ff00" })
  260. luckysheet.setCellValue(i, j, { bg: "#00ff00" })
  261. excelData[0].data[i][j].complete = '1'
  262. excelData[0].data[i][j].revoke = '2'
  263. }
  264. }
  265. }
  266. },
  267. mSetup: function () {
  268. // 选取范围坐标
  269. var position = luckysheet.getRange()[0]
  270. // 当前表所有数据
  271. for (var i = position.row[0]; i <= position.row[1]; i++) {
  272. for (var j = position.column[0]; j <= position.column[1]; j++) {
  273. excelData[0].data[i][j].setup = '1'
  274. }
  275. }
  276. },
  277. mRevoke: function () {
  278. // 选取范围坐标
  279. var position = luckysheet.getRange()[0]
  280. // 当前表所有数据
  281. for (var i = position.row[0]; i <= position.row[1]; i++) {
  282. for (var j = position.column[0]; j <= position.column[1]; j++) {
  283. if (JSON.stringify(luckysheet.getSheet().data[i][j]) != '{}' && luckysheet.getSheet().data[i][j].m) {
  284. luckysheet.setCellValue(i, j, { bg: "" })
  285. luckysheet.setCellValue(i, j, { bg: "" })
  286. excelData[0].data[i][j].bg = ''
  287. excelData[0].data[i][j].revoke = '1'
  288. }
  289. }
  290. }
  291. },
  292. data: data,
  293. title: data[0].fileName || '默认模板',
  294. showsheetbar: false, // 底部sheet显示/隐藏
  295. showstatisticBar: false, // 底部计数
  296. myFolderUrl: false,
  297. showinfobar: true,
  298. allowUpdate: false,
  299. allowEdit: flag, // 是否允许前台编辑
  300. column: 12,
  301. row: 10,
  302. lang: 'zh',
  303. showstatisticBar: false, // 底部计数
  304. myFolderUrl: false,
  305. showstatisticBarConfig: {
  306. count: false, // 计数栏
  307. view: false, // 打印视图
  308. zoom: false, // 缩放
  309. },
  310. showinfobar: true,
  311. functionButton: '<button id="updates" class="btn btn-primary" style="padding:3px 6px;font-size: 12px;margin-right: 10px;">开启编辑</button> <button id="saves" class="btn btn-primary btn-danger" style=" padding:3px 6px; font-size: 12px; margin-right: 10px;display:none">保存</button>',
  312. cellRightClickConfig: {
  313. copy: true, // 复制
  314. copyAs: false, // 复制为
  315. paste: true, // 粘贴
  316. insertRow: true, // 插入行
  317. insertColumn: true, // 插入列
  318. deleteRow: true, // 删除选中行
  319. deleteColumn: true, // 删除选中列
  320. deleteCell: false, // 删除单元格
  321. hideRow: false, // 隐藏选中行和显示选中行
  322. hideColumn: false, // 隐藏选中列和显示选中列
  323. rowHeight: false, // 行高
  324. columnWidth: false, // 列宽
  325. clear: false, // 清除内容
  326. matrix: false, // 矩阵操作选区
  327. sort: false, // 排序选区
  328. filter: false, // 筛选选区
  329. chart: false, // 图表生成
  330. image: false, // 插入图片
  331. link: false, // 插入链接
  332. data: false, // 数据验证
  333. cellFormat: false, // 设置单元格格式
  334. mComplete: true,
  335. mSetup: true,
  336. mRevoke: true
  337. },
  338. hook: {
  339. cellMousedown: function (a, b, c) {
  340. if (flag == false) {
  341. window.top.$vm.$message({
  342. message: '请先点击开启编辑按钮',
  343. type: 'info'
  344. })
  345. }
  346. },//绑定鼠标事件
  347. },
  348. })
  349. } catch (err) {
  350. console.log(err)
  351. }
  352. if (flag) {
  353. $('#saves').show()
  354. $('#updates').hide()
  355. } else {
  356. $('#saves').hide()
  357. $('#updates').show()
  358. }
  359. $('#updates').off('click').click(function () {
  360. util.ajaxJson("", ctx + '/market/keywork/lock', {
  361. id: luckysheet.getSheet().id
  362. }, function (data) {
  363. if (data.result == 1) {
  364. window.top.$vm.$message({
  365. message: data.desc,
  366. type: 'info'
  367. })
  368. } else {
  369. flag = true
  370. getData(1)
  371. $('#saves').show()
  372. $('#updates').hide()
  373. }
  374. });
  375. })
  376. // 保存
  377. $('#saves').off('click').click(function () {
  378. // 当前工作表名
  379. var sheetName = luckysheet.getSheet().name
  380. var data = luckysheet.getSheet(sheetName)
  381. $('#saves').hide()
  382. $('#updates').show()
  383. flag = false
  384. data.fileName = luckysheet.getWorkbookName()
  385. util.ajaxJson("正在加载中", ctx + '/market/keywork/save', {
  386. data: data
  387. }, function (data) {
  388. if (data.result == 0) {
  389. $('#complete')[0].contentWindow.postMessage({
  390. module: "aaa",
  391. month: nowDate
  392. }, 'http://114.215.71.182:8080');
  393. }
  394. getData(1)
  395. });
  396. })
  397. }
  398. </script>
  399. </body>
  400. </html>