detail.html 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>订单详情</title>
  6. <meta name="renderer" content="webkit">
  7. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  8. <meta name="viewport"
  9. content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  10. <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
  11. <link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
  12. <style>
  13. .input {
  14. border-radius: 2px;
  15. height: 38px;
  16. border-width: 1px;
  17. border-color: lightgray;
  18. border-style: solid;
  19. background-color: white;
  20. padding-left: 3px;
  21. }
  22. </style>
  23. </head>
  24. <body>
  25. <div class="layui-fluid">
  26. <div class="layui-row layui-col-space15">
  27. <div class="layui-card">
  28. <div class="layui-card-body" pad15>
  29. <div id="tableDom"></div>
  30. <h3 style="margin: 40px 0 10px 0">进度明细</h3>
  31. <table class="layui-hide" id="customer_datagrid" lay-filter="customer-operate"></table>
  32. </div>
  33. </div>
  34. </div>
  35. </div>
  36. <script type="text/html" id="customer-operate-bar">
  37. <div class="layui-btn-group">
  38. <a class="layui-btn layui-btn-xs" lay-event="order_detail"
  39. >查看资料</a>
  40. </div>
  41. </script>
  42. <script id="demo" type="text/html">
  43. <table class="layui-table">
  44. <tbody>
  45. <tr>
  46. <td style="background: #f8f8f8; width: 70px">单号:</td>
  47. <td>{{ d.no || "" }}</td>
  48. <td style="background: #f8f8f8; width: 70px">下单时间:</td>
  49. <td>{{ d.create_time || "" }}</td>
  50. </tr>
  51. <tr>
  52. <td style="background: #f8f8f8; width: 70px">客户名称:</td>
  53. <td>{{ d.name || "" }}</td>
  54. <td style="background: #f8f8f8; width: 70px">客户电话:</td>
  55. <td>{{ d.tel || "" }}</td>
  56. </tr>
  57. <tr>
  58. <td style="background: #f8f8f8; width: 70px">客户地址:</td>
  59. <td>{{ d.address || "" }}</td>
  60. <td style="background: #f8f8f8; width: 70px">当前进度:</td>
  61. <td>{{ d.stage_progress_text || "" }}</td>
  62. </tr>
  63. <tr>
  64. <td style="background: #f8f8f8; width: 70px">服务人员:</td>
  65. <td>{{ d.service_user_text || "" }}</td>
  66. <td style="background: #f8f8f8; width: 70px">备注:</td>
  67. <td>{{ d.notes || "" }}</td>
  68. </tr>
  69. </tbody>
  70. </table>
  71. </script>
  72. <script src="../../layuiadmin/layui/layui.js"></script>
  73. <script>
  74. layui.link('../../../layuiadmin/style/autocomplete.css');
  75. layui.config({
  76. base: '../../../layuiadmin/' //静态资源所在路径
  77. }).extend({
  78. index: 'lib/index',
  79. }).use(['index', 'table','laytpl' ], function () {
  80. var $ = layui.$
  81. , table = layui.table
  82. , laytpl = layui.laytpl
  83. var order_id = layui.view.getParameterByName('order_id');
  84. editdata = JSON.parse(JSON.stringify(parent.layui.table.editdata)); // 框架有Bug所以这么转换
  85. var data = editdata;
  86. var getTpl = demo.innerHTML
  87. ,tableDom = document.getElementById('tableDom');
  88. laytpl(getTpl).render(data, function(html){
  89. tableDom.innerHTML = html;
  90. });
  91. table.render({
  92. elem: '#customer_datagrid'
  93. , url: '/order/get_details/?order_id=' + order_id
  94. , cols: [[
  95. {field: 'operation', title: "操作", width: 280}
  96. , {field: 'operation_time_f', title: '操作时间', width: 150}
  97. , {field: 'notes', title: '备注', width: 200}
  98. , {field: 'user_text', title: '操作人', width: 150}
  99. , {width: 100, align: 'center', fixed: 'right', toolbar: '#customer-operate-bar'}
  100. ]]
  101. , page: true
  102. });
  103. //监听工具条
  104. table.on('tool(customer-operate)', function (obj) {
  105. var data = obj.data;
  106. if (obj.event === 'order_detail') {
  107. // 显示资料图片
  108. layer.open({
  109. type: 2,
  110. title: '资料图片',
  111. area: ['100%', '70%'],
  112. btn: ['取消'],
  113. btn1: function (index, layero) {
  114. layer.close(index);//关闭当前按钮
  115. },
  116. content: 'imgsInfo.html?id=' + data.id
  117. });
  118. }
  119. });
  120. });
  121. </script>
  122. </body>
  123. </html>