detail.html 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
  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. <link rel="stylesheet" type="text/css" href="../../layuiadmin/style/formSelects-v4.css"/>
  13. <style type="text/css">
  14. .baoxiu-li {
  15. margin: 10px
  16. }
  17. img {
  18. width: 40%;
  19. height: 30%;
  20. margin-bottom: 20px;
  21. }
  22. </style>
  23. </head>
  24. <body>
  25. <div class="layui-tab layui-tab-card">
  26. <ul class="layui-tab-title">
  27. <li class="layui-this">报修详情</li>
  28. <li>操作记录</li>
  29. </ul>
  30. <div class="layui-tab-content" style="background-color: #fff;">
  31. <div id="order_detail" class="layui-tab-item layui-show"></div>
  32. <div id="order_record" class="layui-tab-item"></div>
  33. <script id="order_detail_demo" type="text/html">
  34. <div class="layui-tab-item layui-show">
  35. <ui>
  36. <li class="baoxiu-li">
  37. <h3>报销单号:{{ d.no }}</h3>
  38. </li>
  39. <li class="baoxiu-li">
  40. <h3>地点:{{ d.device_address }}</h3>
  41. </li>
  42. <li class="baoxiu-li">
  43. <h3>问题描述:{{ d.fault_des }}</h3>
  44. </li>
  45. <li class="baoxiu-li">
  46. <h3>报修类型:{{ d.repair_type }}</h3>
  47. </li>
  48. <li class="baoxiu-li">
  49. <h3>报修人:{{ d.name }}</h3>
  50. </li>
  51. <li class="baoxiu-li">
  52. <h3>报修电话:{{ d.tel }}</h3>
  53. </li>
  54. <li class="baoxiu-li">
  55. <h3>报修时间:{{ d.create_time }}</h3>
  56. </li>
  57. <li class="baoxiu-li">
  58. <h3>报修状态:{{ d.status_text }}</h3>
  59. </li>
  60. {{# layui.each(d.images, function(index, item){ }}
  61. {{# if(item.type == 4){ }}
  62. <li class="baoxiu-li">
  63. <h3>报修语音:
  64. <audio controls>
  65. <source src={{ item.picture }} type="audio/mpeg">
  66. </audio>
  67. </h3>
  68. </li>
  69. {{# } }}
  70. {{# }); }}
  71. <li class="baoxiu-li">
  72. <h3>报修图片:</h3>
  73. </li>
  74. {{# layui.each(d.images, function(index, item){ }}
  75. {{# if(item.type != 4){ }}
  76. <li>
  77. <img class="layui-upload-img" src={{ item.picture }}>
  78. </li>
  79. {{# } }}
  80. {{# }); }}
  81. </ui>
  82. </div>
  83. </script>
  84. <script id="order_record_demo" type="text/html">
  85. <div class="layui-tab-item layui-show">
  86. <ul class="layui-timeline">
  87. {{# layui.each(d, function(index, item){ }}
  88. <li class="layui-timeline-item">
  89. <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
  90. <div class="layui-timeline-content layui-text">
  91. <h3 class="layui-timeline-title">{{ item.status_text }}</h3>
  92. <p>
  93. {{ item.desc }}
  94. </p>
  95. <p>
  96. 时间:{{ item.operation_time }}
  97. </p>
  98. <!-- 完工-->
  99. {{# if(item.status == 6){ }}
  100. <p>
  101. 故障原因:{{ item.fault_cause }}
  102. </p>
  103. <p>
  104. 完工描述:{{ item.content }}
  105. </p>
  106. {{# } }}
  107. {{# layui.each(item.images, function(index, img){ }}
  108. <li>
  109. <img class="layui-upload-img" src={{ img.url }}>
  110. </li>
  111. {{# }); }}
  112. <!-- 评价-->
  113. <div id="pingfen"></div>
  114. </div>
  115. </li>
  116. {{# }); }}
  117. </ul>
  118. </div>
  119. </script>
  120. </div>
  121. </div>
  122. <script src="../../layuiadmin/layui/layui.js"></script>
  123. <script>
  124. layui.config({
  125. base: '../../../layuiadmin/' //静态资源所在路径
  126. }).extend({
  127. index: 'lib/index',
  128. formSelects: 'formSelects-v4'
  129. }).use(['index', 'form', 'utils', 'laytpl', 'rate'], function () {
  130. var $ = layui.$
  131. , admin = layui.admin
  132. , laytpl = layui.laytpl
  133. , rate = layui.rate
  134. , form = layui.form;
  135. var data = JSON.parse(JSON.stringify(parent.layui.table.editdata)); // 框架有Bug所以这么转换
  136. let baoxiu_imgs_node = $('#baoxiu_imgs');
  137. for (let i in data.imgs) {
  138. baoxiu_imgs_node.append("<img style='width: 150px; height: auto; margin: 10px' src=" + data.imgs[i].url + ">");
  139. }
  140. var getTpl = order_detail_demo.innerHTML
  141. , order_detail = document.getElementById('order_detail');
  142. laytpl(getTpl).render(data, function (html) {
  143. order_detail.innerHTML = html;
  144. });
  145. admin.req({
  146. url: '/tenant/repair_order/get_repair_order_record/'
  147. , data: {order_id: data.id}
  148. , type: 'get'
  149. , done: function (res) {
  150. var getTpl2 = order_record_demo.innerHTML
  151. , order_record = document.getElementById('order_record');
  152. laytpl(getTpl2).render(res.data, function (html) {
  153. order_record.innerHTML = html;
  154. });
  155. for (var i in res.data) {
  156. if (res.data[i].status == 7) {
  157. rate.render({
  158. elem: '#pingfen'
  159. , value: res.data[i].start
  160. , readonly: true
  161. , text: true
  162. });
  163. }
  164. }
  165. }
  166. });
  167. })
  168. ;
  169. </script>
  170. </body>
  171. </html>