paymentManage.html 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387
  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="body-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="order-bnt1" onclick="reload();">查询</button>
  16. <button class="order-bnt2" onclick="reset();">重置</button>
  17. <a href="#" id="toggle" class="top">收起<i class="iconfont up iconSelect_drop-down"></i></a>
  18. </div>
  19. </div>
  20. <form class="layui-form" action="" id = "formName">
  21. <div class="order-select back-border" id="content" style="display: block;">
  22. <div class="layui-inline">
  23. <label class="f12-gray4">付款单位:</label>
  24. <input type="tel" name="fukuan" id ="fukuan" autocomplete="off" placeholder="请输入付款单位" class="search-select">
  25. </div>
  26. <div class="layui-inline">
  27. <label class="f12-gray4">收款单位:</label>
  28. <input type="tel" name="shoukuan" id ="shoukuan" autocomplete="off" placeholder="请输入收款单位" class="search-select">
  29. </div>
  30. <div class="layui-inline">
  31. <label class="f12-gray4">创建时间:</label>
  32. <div class="layui-input-inline" style="position: relative;">
  33. <input type="text" class="layui-input" id="dates" placeholder="-" autocomplete="off">
  34. </div>
  35. </div>
  36. <div class="layui-inline">
  37. <label class="f12-gray4">付款期限:</label>
  38. <div class="layui-input-inline" style="position: relative;">
  39. <input type="text" class="layui-input" id="termsPayment" placeholder="-" autocomplete="off">
  40. </div>
  41. </div>
  42. <div class="layui-inline">
  43. <label class="f12-gray4">备注:</label>
  44. <input type="tel" name="remarks" id ="remarks" autocomplete="off" placeholder="请输入备注" class="search-select">
  45. </div>
  46. </div>
  47. </form>
  48. <div class="order-select back-border yiyu" style="display: block;">
  49. <div class="layui-inline" id="allStockDiv">
  50. <label class="f12-gray4">预估付款金额合计:</label>
  51. <div class="layui-input-inline">
  52. <input type="text" class="layui-input" id="allMoney" name="allMoney" style="border:none;color: red" disabled="disabled" class="search-select">
  53. </div>
  54. </div>
  55. <div class="layui-inline" id="allStockDiv">
  56. <label class="f12-gray4">实际付款金额合计:</label>
  57. <div class="layui-input-inline">
  58. <input type="text" class="layui-input" id="allMoneys" name="allMoneys" style="border:none;color: red" disabled="disabled" class="search-select">
  59. </div>
  60. </div>
  61. <div class="layui-inline" id="allStockDiv">
  62. <label class="f12-gray4">实际收款金额合计:</label>
  63. <div class="layui-input-inline">
  64. <input type="text" class="layui-input" id="allsjMoneys" name="allsjMoneys" style="border:none;color: red" disabled="disabled" class="search-select">
  65. </div>
  66. </div>
  67. <div class="layui-inline" id="allStockDiv">
  68. <label class="f12-gray4">收款重量合计:</label>
  69. <div class="layui-input-inline">
  70. <input type="text" class="layui-input" id="collectWeight" name="collectWeight" style="border:none;color: red" disabled="disabled" class="search-select">
  71. </div>
  72. </div>
  73. <div class="layui-inline" id="allStockDiv">
  74. <label class="f12-gray4">付款重量合计:</label>
  75. <div class="layui-input-inline">
  76. <input type="text" class="layui-input" id="payWeight" name="payWeight" style="border:none;color: red" disabled="disabled" class="search-select">
  77. </div>
  78. </div>
  79. </div>
  80. </div>
  81. <div class="shadow-content">
  82. <div class="gray-title demoTable">
  83. <button class="left-bnt1 in-b" id = "addPayment">
  84. <i class="layui-icon">&#xe608;</i> 添加付款
  85. </button>
  86. <button class="left-bnt1 in-b" id = "addReceipt">
  87. <i class="layui-icon">&#xe608;</i> 添加收款
  88. </button>
  89. <button class="left-bnt1 in-b" data-type="financeToExecl" id = "financeToExecl" >
  90. <i class="layui-icon">&#xe601;</i> 导出
  91. </button>
  92. </div>
  93. <table id="tableTest" lay-filter="tableFilter"></table>
  94. </div>
  95. <!--操作功能-->
  96. <script type="text/html" id="barDemo">
  97. {{# if(d.aopType == '02'){ }}
  98. <a class="f12-green ml0-4" lay-event="detail">详情</a>
  99. {{# } else { }}
  100. <a class="f12-green ml0-4" lay-event="detail">详情</a>
  101. <a class="f12-blue ml0-4" lay-event="printOut">打印</a>
  102. <a class="f12-red2 ml0-4" lay-event="del">删除</a>
  103. <a class="f12-blue ml0-4" lay-event="edit">保存</a>
  104. {{# } }}
  105. </script>
  106. <script>
  107. $("#toggle").click(function() {
  108. $(this).html($("#content").is(":hidden") ? "收起" + "<i class='iconfont up iconSelect_drop-down'/></i>" : "展开" +
  109. "<i class='iconfont up iconSelect_drop-down'/></i>");
  110. $("#content").slideToggle();
  111. });
  112. var tabPageId = getQueryString("tabPageId");
  113. layui.use('laydate', function(){
  114. var laydate = layui.laydate;
  115. //日期范围
  116. laydate.render({
  117. elem: '#dates'
  118. ,range: true
  119. ,format:'yyyyMMdd'
  120. ,trigger: 'click'
  121. });
  122. })
  123. layui.use('laydate', function(){
  124. var laydate = layui.laydate;
  125. //日期范围
  126. laydate.render({
  127. elem: '#termsPayment'
  128. ,range: true
  129. ,format:'yyyyMMdd'
  130. ,trigger: 'click'
  131. });
  132. })
  133. var table;
  134. layui.use('table', function(){
  135. table = layui.table;
  136. table.render({
  137. id : 'tableTest'
  138. ,elem: '#tableTest'
  139. ,limit:10
  140. ,url: 'PaymentManageAction/queryPayment' //数据接口
  141. ,method: 'post'
  142. ,where:{MINView:"JSON"}
  143. ,page: true //开启分页
  144. ,cols: [[ //表头
  145. {type:'numbers',title: '序号',width:"5%", fixed:"left"}
  146. ,{field: 'id', title: '收付款编号', width:"10%", }
  147. ,{field: 'termsPayment', title: '付款期限',width:"10%",style:'background-color: #C1FFC1; color: #333;'}
  148. ,{field: 'aopAllWeight', title: '重量', width:"13%", }
  149. ,{field: 'totalMoney', title: '预估收付款金额', width:"15%",edit: 'text',style:'background-color: #C1FFC1; color: #333;'}
  150. ,{field: 'aopPredictPrice', title: '预估单价', width:"15%",edit: 'text',style:'background-color: #C1FFC1; color: #333;'}
  151. ,{field: 'totalMoneys', title: '实际收付款金额', width:"15%",edit: 'text',style:'background-color: #C1FFC1; color: #333;'}
  152. ,{field: 'aopRemarks', title: '备注', width:"13%",edit: 'text',style:'background-color: #C1FFC1; color: #333;'}
  153. ,{field: 'typeDesc', title: '收付类型', width:"10%", }
  154. ,{field: 'priceTypeDesc', title: '费用类型', width:"10%", }
  155. ,{field: 'buyer', title: '付款单位', width:"13%", }
  156. ,{field: 'seller', title: '收款单位', width:"13%"}
  157. ,{field: 'bankNum', title: '收款账号', width:"10%"}
  158. ,{field: 'bankName', title: '开户行', width:"10%"}
  159. ,{field: 'createTime', title: '创建时间',width:"14%"}
  160. ,{field: 'operate', title: '操作', width:"20%", toolbar: '#barDemo', fixed:"right"}
  161. ]]
  162. ,done: function(res, curr, count){
  163. $("#allMoney").val(fomatFloat(res.allMoney));
  164. $("#allMoneys").val(fomatFloat(res.allMoneys));
  165. $("#allsjMoneys").val(fomatFloat(res.allsjMoneys));
  166. $("#allsjMoneys").val(fomatFloat(res.allsjMoneys));
  167. $("#payWeight").val(fomatFloat(res.payWeight));
  168. $("#collectWeight").val(fomatFloat(res.collectWeight));
  169. var termsPaymentId = 0;
  170. $('td[data-field="termsPayment"]').each(function(i) {
  171. var index = termsPaymentId;
  172. termsPaymentId++;
  173. $(this).find("div").attr("id", "termsPayment"+index);
  174. var divElement = $(this).find("div");
  175. layui.use('laydate', function(){
  176. var laydate = layui.laydate;
  177. laydate.render({
  178. elem: "#termsPayment"+index
  179. ,done: function(value, date, endDate){
  180. var tableData = table.cache['tableTest'];
  181. tableData[index].termsPayment = value;
  182. console.log(value); //得到日期生成的值,如:2017-08-18
  183. }
  184. });
  185. })
  186. });
  187. }
  188. ,even: true //开启隔行背景
  189. });
  190. // 监听工具条(操作)
  191. table.on('tool(tableFilter)', function(obj){ //注:tool是工具条事件名,tableFilter是table原始容器的属性 lay-filter="对应的值"
  192. var data = obj.data; //获得当前行数据
  193. var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
  194. var tr = obj.tr; //获得当前行 tr 的DOM对象
  195. var id = data.id;
  196. if(layEvent == 'detail'){ //查看
  197. showDetail(data);
  198. }else if(layEvent === 'printOut'){//打印出库单
  199. printOut(data);
  200. }else if(layEvent === 'del'){//删除
  201. layer.confirm('确认删除吗?', function(index){
  202. layer.close(index);
  203. //向服务端发送删除指令roleDelete
  204. $.request({
  205. action : "PaymentManageAction/delPayMent",
  206. data : {
  207. id : id
  208. },
  209. success : function(resData) {
  210. if (resData.MINStatus == 0) {
  211. layer.alert('操作成功!', {icon: 1});
  212. obj.del(); //删除对应行(tr)的DOM结构,并更新缓存
  213. window.location.reload();
  214. } else {
  215. layer.alert(resData.MINErrorMessage, {
  216. icon: 5,
  217. title: "提示"
  218. });
  219. }
  220. },
  221. error : function(data2){
  222. layer.alert(data2.MINErrorMessage, {
  223. icon: 5,
  224. title: "提示"
  225. });
  226. }
  227. });
  228. });
  229. }else if(layEvent == 'edit'){
  230. layer.confirm('确认保存吗?', function(index){
  231. if (isEmpty(data.totalMoney)) {
  232. $.ErrorAlert('预估收付款金额不能为空!');
  233. return;
  234. }
  235. if (isEmpty(data.totalMoneys)) {
  236. $.ErrorAlert('实际收付款金额不能为空!');
  237. return;
  238. }
  239. if (isEmpty(data.termsPayment)) {
  240. $.ErrorAlert('收付款期限不能为空!');
  241. return;
  242. }
  243. $.request({
  244. action : "../../PaymentManageAction/editPayment",
  245. data : {
  246. id : data.id,
  247. totalMoney : data.totalMoney,
  248. totalMoneys : data.totalMoneys,
  249. termsPayment : data.termsPayment,
  250. aopRemarks:data.aopRemarks,
  251. aopPredictPrice:data.aopPredictPrice
  252. },
  253. success : function(resData) {
  254. if (resData.MINStatus == 0) {
  255. layer.alert('操作成功!', {icon: 1});
  256. reload();
  257. } else {
  258. layer.alert(resData.MINErrorMessage, {
  259. icon: 5,
  260. title: "提示"
  261. });
  262. }
  263. },
  264. error : function(data2){
  265. layer.alert(data2.MINErrorMessage, {
  266. icon: 5,
  267. title: "提示"
  268. });
  269. }
  270. });
  271. layer.close(index);
  272. })
  273. }
  274. });
  275. });
  276. function showDetail(data) {
  277. var params = {};
  278. params.columnNumber = 2; //每行显示两个字段
  279. setNowRowData(data, params);
  280. var jsonData = JSON.stringify(data);// 转成JSON格式
  281. var result = $.parseJSON(jsonData);// 转成JSON对象
  282. if(result.aopType == "01"){
  283. layer.open({
  284. type: 2,
  285. title: '付款详情',
  286. shadeClose: true,
  287. shade: 0.8,
  288. //maxmin: true, //开启最大化最小化按钮
  289. area: ['95%', '95%'],
  290. content: 'paymentDetail.html'
  291. });
  292. }else if(result.aopType == "02"){//预付款
  293. layer.open({
  294. type: 2,
  295. title: '预收款详情',
  296. shadeClose: true,
  297. shade: 0.8,
  298. //maxmin: true, //开启最大化最小化按钮
  299. area: ['95%', '84%'],
  300. content: '../advancePayment/advancePaymentDetail.html?page=1'
  301. });
  302. } else {
  303. layer.open({
  304. type: 2,
  305. title: '收款详情',
  306. shadeClose: true,
  307. shade: 0.8,
  308. //maxmin: true, //开启最大化最小化按钮
  309. area: ['95%', '84%'],
  310. content: 'receiptDetail.html'
  311. });
  312. }
  313. }
  314. $(document).on('click','#addPayment',function(){
  315. openMainTabPage('150001-02', '新增付款', 'paymentManage/addPayment.html?type=01&tabPageId=150001-02','','150001',reload);
  316. });
  317. $(document).on('click','#addReceipt',function(){
  318. openMainTabPage('150001-02', '新增收款', 'paymentManage/addReceipt.html?type=00&tabPageId=150001-02','','150001',reload);
  319. });
  320. //导出
  321. $(document).on('click','#financeToExecl',function(){
  322. var shoukuan = $("#shoukuan").val();
  323. var fukuan = $("#fukuan").val();
  324. var dates = $("#dates").val();
  325. var termsPayment = $("#termsPayment").val();
  326. var remarks = $("#remarks").val();
  327. var param = {};
  328. param.shoukuan = shoukuan;
  329. param.fukuan = fukuan;
  330. param.dates = dates;
  331. param.termsPayment = termsPayment;
  332. param.remarks = remarks;
  333. exportExcel("../../FinanceToExecl/exportExcelShouFu?",param);
  334. });
  335. function reload(){
  336. var shoukuan = $("#shoukuan").val();
  337. var fukuan = $("#fukuan").val();
  338. var dates = $("#dates").val();
  339. var termsPayment = $("#termsPayment").val();
  340. var remarks = $("#remarks").val();
  341. //执行重载
  342. table.reload('tableTest', {
  343. page: {
  344. curr: 1 //重新从第 1 页开始
  345. }
  346. ,where: {
  347. shoukuan:shoukuan,
  348. fukuan:fukuan,
  349. dates :dates,
  350. termsPayment:termsPayment,
  351. remarks:remarks
  352. }
  353. });
  354. }
  355. function reset(){
  356. $('#formName')[0].reset();
  357. }
  358. //打印出库单
  359. function printOut(data){
  360. // 寄存当前数据
  361. layui.sessionData("ROW_DATA", {key:"NOW_ROW", value:data});
  362. openMainTabPageParent(tabPageId+'-41', '打印付款申请及确认',
  363. 'paymentManage/confirmationSlip.html?tabPageId='+tabPageId+'-41&id='+data.id,'',tabPageId,reload);
  364. }
  365. </script>
  366. </body>
  367. </html>