detail.html 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
  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. <li>
  62. <img class="layui-upload-img" src={{ item.picture }}>
  63. </li>
  64. {{# }); }}
  65. </ui>
  66. </div>
  67. </script>
  68. <script id="order_record_demo" type="text/html">
  69. <div class="layui-tab-item layui-show">
  70. <ul class="layui-timeline">
  71. {{# layui.each(d, function(index, item){ }}
  72. <li class="layui-timeline-item">
  73. <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
  74. <div class="layui-timeline-content layui-text">
  75. <h3 class="layui-timeline-title">{{ item.status_text }}</h3>
  76. <p>
  77. {{ item.desc }}
  78. </p>
  79. <p>
  80. 时间:{{ item.operation_time }}
  81. </p>
  82. <!-- 完工-->
  83. {{# if(item.status == 6){ }}
  84. <p>
  85. 故障原因:{{ item.fault_cause }}
  86. </p>
  87. <p>
  88. 完工描述:{{ item.content }}
  89. </p>
  90. {{# } }}
  91. {{# layui.each(item.images, function(index, img){ }}
  92. <li>
  93. <img class="layui-upload-img" src={{ img.url }}>
  94. </li>
  95. {{# }); }}
  96. <!-- 评价-->
  97. <div id="pingfen"></div>
  98. </div>
  99. </li>
  100. {{# }); }}
  101. </ul>
  102. </div>
  103. </script>
  104. </div>
  105. </div>
  106. <script src="../../layuiadmin/layui/layui.js"></script>
  107. <script>
  108. layui.config({
  109. base: '../../../layuiadmin/' //静态资源所在路径
  110. }).extend({
  111. index: 'lib/index',
  112. formSelects: 'formSelects-v4'
  113. }).use(['index', 'form', 'utils', 'laytpl', 'rate'], function () {
  114. var $ = layui.$
  115. , admin = layui.admin
  116. , laytpl = layui.laytpl
  117. , rate = layui.rate
  118. , form = layui.form;
  119. var data = JSON.parse(JSON.stringify(parent.layui.table.editdata)); // 框架有Bug所以这么转换
  120. let baoxiu_imgs_node = $('#baoxiu_imgs');
  121. for (let i in data.imgs) {
  122. baoxiu_imgs_node.append("<img style='width: 150px; height: auto; margin: 10px' src=" + data.imgs[i].url + ">");
  123. }
  124. var getTpl = order_detail_demo.innerHTML
  125. , order_detail = document.getElementById('order_detail');
  126. laytpl(getTpl).render(data, function (html) {
  127. order_detail.innerHTML = html;
  128. });
  129. admin.req({
  130. url: '/tenant/repair_order/get_repair_order_record/'
  131. , data: {order_id: data.id}
  132. , type: 'get'
  133. , done: function (res) {
  134. var getTpl2 = order_record_demo.innerHTML
  135. , order_record = document.getElementById('order_record');
  136. laytpl(getTpl2).render(res.data, function (html) {
  137. order_record.innerHTML = html;
  138. });
  139. for (var i in res.data) {
  140. if (res.data[i].status == 7) {
  141. rate.render({
  142. elem: '#pingfen'
  143. , value: res.data[i].start
  144. , readonly: true
  145. , text: true
  146. });
  147. }
  148. }
  149. }
  150. });
  151. })
  152. ;
  153. </script>
  154. </body>
  155. </html>