departmentManage.html 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371
  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 mt4">所选条件:</div>
  13. </div>
  14. <div class="tiaojian-part2 fr demoTable">
  15. <button class="layui-btn order-bnt1" data-type="reload" >搜索</button>
  16. <button class="layui-btn order-bnt2" data-type="reset">重置</button>
  17. <button class="layui-btn order-bnt2" id = "addDepartment">添加</button>
  18. <a href="#" id="toggle" class="top">收起</a>
  19. </div>
  20. </div>
  21. <form class="layui-form" action="javascript:void(0)" id = "formName">
  22. <div class="order-select back-border" id="content">
  23. <div class="layui-inline">
  24. <label class="f12-gray4">名称:</label>
  25. <input onchange = "changeSelectCon(0,this,'inp')" lay-verify="branchName" class="search-select" type="tel" name="branchName" id ="branchName" value="" placeholder="请输入名称" />
  26. </div>
  27. <div class="layui-inline">
  28. <label class="f12-gray4">联系人:</label>
  29. <input onchange = "changeSelectCon(1,this,'inp')" lay-verify="person" class="search-select" type="tel" name="person" id ="person" value="" placeholder="请输入联系人" />
  30. </div>
  31. <div class="layui-inline">
  32. <label class="f12-gray4">联系方式:</label>
  33. <input onchange = "changeSelectCon(2,this,'inp')" lay-verify="phone" class="search-select" type="tel" name="person" id ="phone" value="" placeholder="请输入联系方式" />
  34. </div>
  35. </div>
  36. </form>
  37. </div>
  38. <div class="shadow-content" style="margin:1.5rem;">
  39. <table id="tableTest" lay-filter="tableFilter"></table>
  40. </div>
  41. <!--操作功能-->
  42. <script type="text/html" id="barDemo">
  43. <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
  44. <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  45. {{# if(d.stt == '0'){ }}
  46. <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="frozen">冻结</a>
  47. {{# }; }}
  48. {{# if(d.stt != '0'){ }}
  49. <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="enable">解冻</a>
  50. {{# }; }}
  51. <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
  52. </script>
  53. <script>
  54. var table;
  55. layui.use('table', function(){
  56. table = layui.table;
  57. table.render({
  58. elem: '#tableTest'
  59. ,limit:10
  60. // ,height: 315
  61. ,url: 'DepartmentManageAction/branchQueryAll' //数据接口
  62. ,method: 'post'
  63. ,where:{MINView:"JSON"}
  64. ,page: true //开启分页
  65. ,cols: [[ //表头
  66. {field: 'id', type: 'numbers', title: '序号'}
  67. ,{field: 'branchId', title: '编号', width:'8%', sort: true}
  68. ,{field: 'name', title: '商户名称', width:'15%',sort: true}
  69. ,{field: 'count', title: '操作员人数', width:'12%'}
  70. ,{field: 'person', title: '联系人', width:'10%'}
  71. ,{field: 'phone', title: '联系方式', width:'10%'}
  72. ,{field: 'desc', title: '备注', width:'20%', sort: true}
  73. ,{field: 'sttdesc', title: '状态', width:'8%', sort: true}
  74. ,{field: 'operate', title: '操作', width: '15%', toolbar: '#barDemo'}
  75. ]]
  76. ,done: function(res, curr, count){
  77. //如果是异步请求数据方式,res即为你接口返回的信息。
  78. console.log(res);
  79. }
  80. ,even: true //开启隔行背景
  81. });
  82. //监听操作按钮
  83. var $ = layui.$, active = {
  84. //搜索
  85. reload: function(){
  86. reLoadFun();
  87. } //重置
  88. ,reset : function(){
  89. $('#formName')[0].reset();
  90. }
  91. };
  92. //添加操作员
  93. $(document).on('click','#addDepartment',function(){
  94. openMainTabPage('101003-01', '添加商户', 'departmentManage/addDepartment.html', '', '101003', reLoadFun);
  95. });
  96. // 监听工具条(操作)
  97. table.on('tool(tableFilter)', function(obj){ //注:tool是工具条事件名,tableFilter是table原始容器的属性 lay-filter="对应的值"
  98. var data = obj.data; //获得当前行数据
  99. var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
  100. var tr = obj.tr; //获得当前行 tr 的DOM对象
  101. var branchId = data.branchId;
  102. if(layEvent === 'detail'){ //查看
  103. showDetail(data);
  104. } else if(layEvent === 'del'){ //删除
  105. layer.confirm('是否确定要删除该商户?', function(index){
  106. $.request({
  107. action : '../../DepartmentManageAction/deleteBranch',
  108. data : {
  109. branchId : branchId ,//用户名
  110. state:'2'
  111. },
  112. success : function(data) {
  113. location.reload(); //刷新页面
  114. layer.alert('操作成功!', {
  115. icon: 6,
  116. title: "提示"
  117. });
  118. },
  119. error : function(data) {
  120. layer.alert(data.MINErrorMessage, {
  121. icon: 5,
  122. title: "提示"
  123. });
  124. }
  125. });
  126. //向服务端发送删除指令
  127. });
  128. } else if(layEvent === 'edit'){ //编辑
  129. editDetail(data);
  130. }else if(layEvent === 'frozen'){ //冻结
  131. layer.confirm('是否确定要删除该商户?', function(index){
  132. $.request({
  133. action : '../../DepartmentManageAction/deleteBranch',
  134. data : {
  135. branchId : branchId,//用户名
  136. state:'1'
  137. },
  138. success : function(data) {
  139. location.reload(); //刷新页面
  140. layer.alert('操作成功!', {
  141. icon: 6,
  142. title: "提示"
  143. });
  144. },
  145. error : function(data) {
  146. layer.alert(data.MINErrorMessage, {
  147. icon: 5,
  148. title: "提示"
  149. });
  150. }
  151. });
  152. //向服务端发送删除指令
  153. });
  154. }else if(layEvent === 'enable'){ //解冻
  155. layer.confirm('是否确定要删除该商户?', function(index){
  156. $.request({
  157. action : '../../DepartmentManageAction/deleteBranch',
  158. data : {
  159. branchId : branchId,//用户名
  160. state :'0'
  161. },
  162. success : function(data) {
  163. location.reload(); //刷新页面
  164. layer.alert('操作成功!', {
  165. icon: 6,
  166. title: "提示"
  167. });
  168. },
  169. error : function(data) {
  170. layer.alert(data.MINErrorMessage, {
  171. icon: 5,
  172. title: "提示"
  173. });
  174. }
  175. });
  176. //向服务端发送删除指令
  177. });
  178. }
  179. });
  180. $('.demoTable .layui-btn').on('click', function(){
  181. var type = $(this).data('type');
  182. active[type] ? active[type].call(this) : '';
  183. });
  184. });
  185. //查询详情
  186. function showDetail(data) {
  187. var params = {};
  188. params.columnNumber = 2; //每行显示两个字段
  189. // 要显示的数据
  190. params.fields = [
  191. {field: 'branchId', title: 'ID'},
  192. {field: 'name', title: '商户名称'},
  193. {field: 'sttdesc', title: '状态'},
  194. {field: 'person', title: '联系人'},
  195. {field: 'phone', title: '联系方式'},
  196. {field: 'desc', title: '描述'}
  197. ];
  198. // 寄存当前数据
  199. setNowRowData(data, params);
  200. layer.open({
  201. type: 2,
  202. title: '部门详情',
  203. shadeClose: true,
  204. shade: 0.8,
  205. area: ['75%', '85%'],
  206. content: 'detailDepartment.html'
  207. });
  208. }
  209. //编辑
  210. function editDetail(data) {
  211. // 寄存当前数据
  212. layui.sessionData("ROW_DATA", {key:"NOW_ROW", value:data});
  213. openMainTabPage('101003-02', ' 编辑商户信息', 'departmentManage/editDepartment.html', '', '101003', reLoadFun);
  214. /*var params = {};
  215. params.columnNumber = 2; //每行显示两个字段
  216. // 寄存当前数据
  217. layui.sessionData("ROW_DATA", {key:"NOW_ROW", value:data});
  218. layer.open({
  219. type: 2,
  220. title: '编辑',
  221. shadeClose: true,
  222. // shade: true ,
  223. shade: 0.8,
  224. //maxmin: true, //开启最大化最小化按钮
  225. area: ['75%', '85%'],
  226. content: 'editDepartment.html' ,
  227. });*/
  228. }
  229. function reLoadFun() {
  230. //单位名称
  231. var branchName = $("#branchName").val();
  232. var person = $("#person").val();
  233. var phone = $("#phone").val();
  234. //执行重载
  235. table.reload('tableTest', {
  236. page: {
  237. curr: 1 //重新从第 1 页开始
  238. }
  239. ,where: {
  240. branchName : branchName,
  241. person:person,
  242. phone:phone
  243. }
  244. });
  245. }
  246. /**搜索栏*/
  247. function changeSelectCon(index, t, type, dateValue){
  248. if (type == "date") {
  249. if (isEmpty(dateValue)) {
  250. $("#search" + index).remove();
  251. } else {
  252. $("#search" + index).remove();
  253. if (isEmpty($("#search" + index).attr("name"))) {
  254. $("#conditions").append(getSelectConHtml(index, t, type,dateValue));
  255. }
  256. }
  257. } else if (type == 'inp') {
  258. if (isEmpty($(t).val())) {
  259. $("#search" + index).remove();
  260. } else {
  261. $("#search" + index).remove();
  262. if (isEmpty($("#search" + index).attr("name"))) {
  263. $("#conditions").append(getSelectConHtml(index, t, type));
  264. }
  265. }
  266. } else {
  267. if (isEmpty($(t).val())) {
  268. $("#search" + index).remove();
  269. } else {
  270. $("#search" + index).remove();
  271. if (isEmpty($("#search" + index).attr("name"))) {
  272. $(t).attr("id","subjects");
  273. $("#conditions").append(getSelectConHtml(index, t, type));
  274. }
  275. }
  276. }
  277. }
  278. var array = new Array('名称','联系人','联系方式');
  279. function getSelectConHtml(index, t, type,dateValue){
  280. var name;
  281. var value;
  282. if(type == "inp"){
  283. value = t.value.substr(0,5)+"..";
  284. }
  285. if (type == "date") {
  286. value = dateValue;
  287. }
  288. if(type == "sel" && dateValue =="state"){
  289. value = $("#state").find("option:selected").text();
  290. }
  291. if(type == "sel" && dateValue =="roleid"){
  292. value = $("#roleid").find("option:selected").text();
  293. }
  294. if (type == "date") {
  295. name = $("#"+t).attr("id");
  296. } else {
  297. name = $(t).attr("id");
  298. }
  299. var html = '<div class="fl xuanzhong-active" id = "search' + index + '" name = "' + name + '" onclick = "removeSearch(this)">' +
  300. '<div class="fl">' + array[index] + '</div>' +
  301. ':<i class="iconfont">'+value+'</i>' +
  302. '<svg class="icon" aria-hidden="true">' +
  303. '<use xlink:href="#iconicon_close1"></use>' +
  304. '</svg>' +
  305. '</div>';
  306. return html;
  307. }
  308. $("#toggle").click(function() {
  309. $(this).html($("#content").is(":hidden") ? "收起" + "<i class='iconfont up iconSelect_drop-down'/></i>" : "展开" +
  310. "<i class='iconfont up iconSelect_drop-down'/></i>");
  311. $("#content").slideToggle();
  312. });
  313. function removeSearch(t) {
  314. if ($(t).attr("name") == 'state') {
  315. initSelect('state', "IM_USER_STATE", "state", ' ', true);
  316. form.render();
  317. $(t).remove();
  318. } if ($(t).attr("name") == 'roleid') {
  319. $.request({
  320. action : '../../RoleManageAction/roleQueryByBranchId',
  321. data : { },
  322. success : function(data) {
  323. var selectName ="roleid";
  324. var html = '<select name="';
  325. html = html + selectName;
  326. html = html + '" lay-filter="';
  327. html = html + selectName;
  328. html = html + '"';
  329. html = html + '><option value="">全部</option>';
  330. $.each(data.MINQueryResult, function(i, j) {
  331. html = html + '<option ';
  332. html = html + 'value="';
  333. html = html + j.id + '">';
  334. html = html + j.name+ '</option>';
  335. })
  336. html = html + '</select>';
  337. $("#seleRoleid").html(html);
  338. form.render();
  339. }
  340. });
  341. form.on('select(roleid)', function(data){
  342. changeSelectCon(4, data.elem, "sel","roleid");
  343. });
  344. $(t).remove();
  345. } else {
  346. $("#"+$(t).attr("name")).val('');
  347. $(t).remove();
  348. }
  349. }
  350. /**搜索栏end*/
  351. </script>
  352. </body>
  353. </html>