dataWare.html 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>数据仓库</title>
  6. <script src="../../js/min-loader-next.js"></script>
  7. </head>
  8. <body class="content">
  9. <div class="order-body">
  10. <div class="order-tiaojian back-gray">
  11. <div class="tiaojian-part1" id = "conditions">
  12. <div class="fl f12-gray4-op">所选条件:</div>
  13. </div>
  14. <div class="tiaojian-part2 fr demoTable">
  15. <button class="order-bnt1 layui-btn" onclick="reloadSearch()" >查询</button>
  16. <button class="layui-btn order-bnt2" onclick="reset()">重置</button>
  17. <button class="order-bnt2 layui-btn" onclick="uploadExcel()">导入</button>
  18. <a href="#" id="toggle" class="top">收起</a>
  19. </div>
  20. </div>
  21. <form class="layui-form" action="" id = "formRole">
  22. <div class="order-select back-border" id="content">
  23. <div class="d-dashed" style="margin: 10px 0;"></div>
  24. <div class="layui-inline">
  25. <label class="f12-gray4">上传日期:</label>
  26. <div class="layui-input-inline" style="position: relative;">
  27. <input type="text" class="layui-input" id="date" placeholder="请选择日期" readOnly/>
  28. </div>
  29. </div>
  30. <div class="layui-inline">
  31. <label class="f12-gray4">文件名称:</label>
  32. <input name="fileName" id ="fileName" autocomplete="off" placeholder="请输入文件名称" class="search-select" onchange = "changeSelectCon(1,this,'inp')">
  33. </div>
  34. </div>
  35. </form>
  36. </div>
  37. <div class="shadow-content" style="margin:1.5rem;">
  38. <table id="tableTest" lay-filter="tableFilter"></table>
  39. </div>
  40. <script type="text/html" id="barDemo">
  41. <a class="layui-btn layui-btn-xs" lay-event="detail">详情查看</a>
  42. <a class="layui-btn layui-btn-xs" lay-event="downLoad">下载</a>
  43. <a class="layui-btn layui-btn-xs" lay-event="delete">删除</a>
  44. </script>
  45. <script>
  46. $("#toggle").click(function() {
  47. $(this).html($("#content").is(":hidden") ? "收起" + "<i class='iconfont up iconSelect_drop-down'/></i>" : "展开" +
  48. "<i class='iconfont up iconSelect_drop-down'/></i>");
  49. $("#content").slideToggle();
  50. });
  51. var pageId = "210000";
  52. var table;
  53. var form;
  54. layui.use(['table','laydate'], function(){
  55. var laydate = layui.laydate;
  56. laydate.render({
  57. elem: '#date'
  58. ,type: 'date'
  59. ,range: true
  60. ,done: function(value, date, endDate){
  61. changeSelectCon(0,"date",'date',value)
  62. }
  63. });
  64. table = layui.table;
  65. // 加载数据
  66. table.render({
  67. id: 'tableTest'
  68. ,elem: '#tableTest'
  69. ,limit:10
  70. ,url: 'DataWareManageAction/fileInfQuery' //数据接口
  71. ,method: 'post'
  72. ,where:{MINView:"JSON"}
  73. ,page: true //开启分页
  74. ,cols: [[ //表头
  75. {field:'num', title: '序号',width:'5%', type:'numbers', align: 'center'}
  76. ,{field: 'uploadDate', title: '时间', width:'10%', sort: true}
  77. ,{field: 'fileName', title: '文件名称', width:'30%'}
  78. ,{field: 'userName', title: '导入人员', width:'10%'}
  79. ,{field: 'dataNum', title: '数据条数', width: '10%', sort: true}
  80. ,{field: 'operate', title: '操作', width: '25%', toolbar: '#barDemo', fixed : 'right'}
  81. ]]
  82. ,done: function(res, curr, count){
  83. }
  84. ,even: true //开启隔行背景
  85. });
  86. // 监听工具条(操作)
  87. table.on('tool(tableFilter)', function(obj){ //注:tool是工具条事件名,tableFilter是table原始容器的属性 lay-filter="对应的值"
  88. var data = obj.data; //获得当前行数据
  89. var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
  90. var tr = obj.tr; //获得当前行 tr 的DOM对象
  91. if (layEvent === 'detail'){ //查看
  92. showDetail(data);
  93. } else if(layEvent === 'downLoad'){
  94. window.open("../../DataWareManageAction/fileInfDownload?fileId=" + data.id);
  95. } else if(layEvent === 'delete'){
  96. layer.confirm('确认删除?', function(index){
  97. layer.close(index);
  98. $.request({
  99. action : 'DataWareManageAction/fileInfDelete',
  100. data : {
  101. fileId : data.id,
  102. fileType : data.type
  103. },
  104. success : function(data1) {
  105. $.SuccAlert("操作成功!");
  106. reloadSearch();
  107. },
  108. error : function(data2) {
  109. $.ErrorAlert(data2.MINErrorMessage);
  110. }
  111. });
  112. });
  113. }
  114. });
  115. });
  116. function reloadSearch (t) {
  117. var fileName = $("#fileName").val();
  118. var date = $("#date").val();
  119. //执行重载
  120. table.reload('tableTest', {
  121. page: {
  122. curr: 1 //重新从第 1 页开始
  123. }
  124. ,where: {
  125. date : date,
  126. fileName : fileName
  127. }
  128. });
  129. if (t == 1) {
  130. $.Alert("修改成功");
  131. }
  132. }
  133. function reset(){
  134. $('#formRole')[0].reset();
  135. $("#conditions").html('<div class="fl f12-gray4-op">所选条件:</div>');
  136. }
  137. function uploadExcel(){
  138. var openPageId = pageId + "-01";
  139. openMainTabPage(openPageId, "导入", "reprotManage/dataWareUpload.html?pageId="+openPageId, '', pageId, reloadSearch);
  140. }
  141. function showDetail(data){
  142. var openPageId = pageId + "-02";
  143. debugger;
  144. openMainTabPage(openPageId, "详情查看", "reprotManage/dataWareDetail.html?pageId="+openPageId+"&fileId="+data.id+"&fileType="+data.type, '', pageId, null);
  145. }
  146. function changeSelectCon(index, t, type, dateValue){
  147. if (type == "date") {
  148. if (isEmpty(dateValue)) {
  149. $("#search" + index).remove();
  150. } else {
  151. $("#search" + index).remove();
  152. if (isEmpty($("#search" + index).attr("name"))) {
  153. $("#conditions").append(getSelectConHtml(index, t, type,dateValue));
  154. }
  155. }
  156. } else if (type == 'inp') {
  157. if (isEmpty($(t).val())) {
  158. $("#search" + index).remove();
  159. } else {
  160. $("#search" + index).remove();
  161. if (isEmpty($("#search" + index).attr("name"))) {
  162. $("#conditions").append(getSelectConHtml(index, t, type));
  163. }
  164. }
  165. } else {
  166. if (isEmpty($(t).val())) {
  167. $("#search" + index).remove();
  168. } else {
  169. $("#search" + index).remove();
  170. if (isEmpty($("#search" + index).attr("name"))) {
  171. $(t).attr("id","subjects");
  172. $("#conditions").append(getSelectConHtml(index, t, type));
  173. }
  174. }
  175. }
  176. }
  177. var array = new Array('上传日期','文件名称');
  178. function getSelectConHtml(index, t, type,dateValue){
  179. var name;
  180. if (type == "date") {
  181. name = $("#"+t).attr("id");
  182. } else {
  183. name = $(t).attr("id");
  184. }
  185. var value;
  186. if(type == "inp"){
  187. value = t.value.substr(0,5)+"..";
  188. }
  189. if (type == "date") {
  190. value = dateValue;
  191. }
  192. if(type == "sel"){
  193. value = $("#stateDiv").find("option:selected").text();
  194. }
  195. var html = '<div class="fl xuanzhong-active" id = "search' + index + '" name = "' + name + '" onclick = "removeSearch(this)">' +
  196. '<div class="fl">' + array[index] + '</div>' +
  197. ':<span>'+value+'</span>' +
  198. '<svg class="icon" aria-hidden="true">' +
  199. '<use xlink:href="#iconicon_close1"></use>' +
  200. '</svg>' +
  201. '</div>';
  202. return html;
  203. }
  204. function removeSearch(t) {
  205. if ($(t).attr("name") == 'subjects') {
  206. initSelect('stateDiv', "COMPANY_STATE", "state", '', true);
  207. form.render();
  208. $(t).remove();
  209. } else {
  210. $("#"+$(t).attr("name")).val('');
  211. $(t).remove();
  212. }
  213. }
  214. </script>
  215. </body>
  216. </html>