edit.html 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291
  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" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  9. <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
  10. <link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
  11. <link rel="stylesheet" type="text/css" href="../../layuiadmin/style/formSelects-v4.css"/>
  12. <style>
  13. img{
  14. width: 40%;
  15. height: 30%;
  16. }
  17. </style>
  18. </head>
  19. <body>
  20. <div class="layui-fluid">
  21. <div class="layui-card">
  22. <div class="layui-card-body" pad15>
  23. <form class="layui-form" action="" lay-filter="component-form-element">
  24. <div class="layui-row layui-col-space10 layui-form-item">
  25. <div>
  26. <label class="layui-form-label"><font color='red' size="4">*</font>品牌:</label>
  27. <div class="layui-input-block">
  28. <select id="id_brand" name="brand" lay-verify="required">
  29. </select>
  30. </div>
  31. </div>
  32. <div>
  33. <label class="layui-form-label"><font color='red' size="4">*</font>车型:</label>
  34. <div class="layui-input-block">
  35. <input type="text" name="model" lay-verify="required" placeholder="请输入车型" autocomplete="off" class="layui-input">
  36. </div>
  37. </div>
  38. <div>
  39. <label class="layui-form-label"><font color='red' size="4">*</font>车牌号:</label>
  40. <div class="layui-input-block">
  41. <input type="text" name="number" lay-verify="required" placeholder="请输入车牌号" autocomplete="off" class="layui-input">
  42. </div>
  43. </div>
  44. <div>
  45. <label class="layui-form-label"><font color='red' size="4">*</font>指导价:</label>
  46. <div class="layui-input-block">
  47. <input type="text" name="guide_price" lay-verify="required|intGeZ" placeholder="请输入指导价" autocomplete="off" class="layui-input">
  48. </div>
  49. </div>
  50. <div>
  51. <label class="layui-form-label"><font color='red' size="4">*</font>销售价:</label>
  52. <div class="layui-input-block">
  53. <input type="text" name="sale_price" lay-verify="required|intGeZ" placeholder="请输入销售价" autocomplete="off" class="layui-input">
  54. </div>
  55. </div>
  56. <div>
  57. <label class="layui-form-label"><font color='red' size="4">*</font>变速箱:</label>
  58. <div class="layui-input-block">
  59. <select id="id_gearbox" name="gearbox" lay-verify="required">
  60. </select>
  61. </div>
  62. </div>
  63. <div>
  64. <label class="layui-form-label"><font color='red' size="4">*</font>颜色:</label>
  65. <div class="layui-input-block">
  66. <select id="id_color" name="color" lay-verify="required">
  67. </select>
  68. </div>
  69. </div>
  70. <div>
  71. <label class="layui-form-label"><font color='red' size="4">*</font>排量:</label>
  72. <div class="layui-input-block">
  73. <select id="id_displacement" name="displacement" lay-verify="required">
  74. </select>
  75. </div>
  76. </div>
  77. <div>
  78. <label class="layui-form-label"><font color='red' size="4">*</font>排放标准:</label>
  79. <div class="layui-input-block">
  80. <select id="id_emission" name="emission" lay-verify="required">
  81. </select>
  82. </div>
  83. </div>
  84. <div>
  85. <label class="layui-form-label">车所在地:</label>
  86. <div class="layui-input-block">
  87. <input type="text" name="address" placeholder="请输入车辆所在地" autocomplete="off" class="layui-input">
  88. </div>
  89. </div>
  90. <div>
  91. <label class="layui-form-label"><font color='red' size="4">*</font>座位数:</label>
  92. <div class="layui-input-block">
  93. <select id="id_seat_count" name="seat_count" lay-verify="required">
  94. </select>
  95. </div>
  96. </div>
  97. <div>
  98. <label class="layui-form-label"><font color='red' size="4">*</font>上牌日期:</label>
  99. <div class="layui-input-block">
  100. <input id="plate_date" type="text" lay-verify="required" name="plate_date" placeholder="请输入上牌日期" autocomplete="off" class="layui-input">
  101. </div>
  102. </div>
  103. <div>
  104. <label class="layui-form-label"><font color='red' size="4">*</font>出厂日期:</label>
  105. <div class="layui-input-block">
  106. <input id="factory_date" type="text" lay-verify="required" name="factory_date" placeholder="请输入出厂日期" autocomplete="off" class="layui-input" >
  107. </div>
  108. </div>
  109. <div>
  110. <label class="layui-form-label"><font color='red' size="4">*</font>燃油类型:</label>
  111. <div class="layui-input-block">
  112. <select id="id_oil_type" name="oil_type" lay-verify="required">
  113. </select>
  114. </div>
  115. </div>
  116. <div>
  117. <label class="layui-form-label"><font color='red' size="4">*</font>里程:</label>
  118. <div class="layui-input-block">
  119. <input type="text" name="mileage" lay-verify="required|intGeZ" placeholder="请输入里程" autocomplete="off" class="layui-input">
  120. </div>
  121. </div>
  122. <div>
  123. <label class="layui-form-label">备注:</label>
  124. <div class="layui-input-block">
  125. <input type="text" name="notes" placeholder="请输入备注" autocomplete="off" class="layui-input">
  126. </div>
  127. </div>
  128. <div>
  129. <label class="layui-form-label"><font color='red' size="4">*</font>车型图片:</label>
  130. <div class="layui-input-block">
  131. <button type="button" class="layui-btn-sm" id="test1">上传图片</button><br><br>
  132. <img class="layui-upload-img" id="demo1" style="max-width: 300px; max-height: 200px;">
  133. </div>
  134. </div>
  135. <button id="id_save" class="layui-btn" lay-submit lay-filter="component-form-element" style="display: none">保存</button>
  136. <button class="layui-btn" type="button" id="upload_image" style="display: none"></button>
  137. </div>
  138. </form>
  139. </div>
  140. </div>
  141. </div>
  142. <script src="../../layuiadmin/layui/layui.js"></script>
  143. <script>
  144. layui.config({
  145. base: '../../../layuiadmin/' //静态资源所在路径
  146. }).extend({
  147. index: 'lib/index',
  148. formSelects: 'formSelects-v4'
  149. }).use(['index', 'form', 'utils', 'upload', 'laydate'], function(){
  150. var $ = layui.$
  151. ,admin = layui.admin
  152. ,laydate = layui.laydate
  153. ,upload = layui.upload
  154. ,form = layui.form;
  155. var id = layui.view.getParameterByName('id');
  156. laydate.render({
  157. elem: '#plate_date'
  158. ,type: 'date'
  159. ,trigger: 'click'
  160. } );
  161. laydate.render({
  162. elem: '#factory_date'
  163. ,type: 'date'
  164. ,trigger: 'click'
  165. });
  166. admin.req({
  167. url: '/foundation/option/search/?types=0,3,4,5,6,7,8',
  168. done: function (res) {
  169. var data = res.data;
  170. var brand_node = $('#id_brand');
  171. var gearbox_node = $('#id_gearbox');
  172. var color_node = $('#id_color');
  173. var displacement_node = $('#id_displacement');
  174. var emission_node = $('#id_emission');
  175. var seat_count_node = $('#id_seat_count');
  176. var oil_type_node = $('#id_oil_type');
  177. for (var i in data) {
  178. var pid = data[i].id;
  179. var value = data[i].name;
  180. if (data[i].type == '0') {
  181. brand_node.append("<option value='" + pid + "'>" + value + "</option>");
  182. }else if (data[i].type == '3'){
  183. gearbox_node.append("<option value='" + pid + "'>" + value + "</option>");
  184. }else if (data[i].type == '4'){
  185. color_node.append("<option value='" + pid + "'>" + value + "</option>");
  186. }else if (data[i].type == '5'){
  187. emission_node.append("<option value='" + pid + "'>" + value + "</option>");
  188. }else if (data[i].type == '6'){
  189. displacement_node.append("<option value='" + pid + "'>" + value + "</option>");
  190. }else if (data[i].type == '7'){
  191. seat_count_node.append("<option value='" + pid + "'>" + value + "</option>");
  192. }else if (data[i].type == '8'){
  193. oil_type_node.append("<option value='" + pid + "'>" + value + "</option>");
  194. }
  195. }
  196. form.render();
  197. loadData();
  198. }
  199. });
  200. var loadData = function () {
  201. if(id){
  202. var editdata = JSON.parse(JSON.stringify(parent.layui.table.editdata)); // 框架有Bug所以这么转换
  203. form.val("component-form-element", editdata);
  204. if(editdata.thumbnail_url){
  205. $('#demo1').attr('src', editdata.thumbnail_url);
  206. }
  207. }
  208. };
  209. var form_data = {field:{}};
  210. if (id){
  211. var url = '/usedvehicle/usedvehicle/' +id + '/update_model/';
  212. }else{
  213. url = '/usedvehicle/usedvehicle/';
  214. }
  215. upload.render({
  216. elem: '#test1',
  217. url: url,
  218. auto: false,
  219. field: 'image',
  220. bindAction: '#upload_image',
  221. choose: function(obj) {
  222. obj.preview(
  223. function(index, file, result) {
  224. $('#demo1').attr('src', result);
  225. }
  226. );
  227. },
  228. data:{
  229. brand: function(){return form_data.field.brand;},
  230. model: function(){return form_data.field.model;},
  231. number: function(){return form_data.field.number;},
  232. guide_price: function(){return form_data.field.guide_price},
  233. sale_price: function(){return form_data.field.sale_price;},
  234. gearbox: function(){return form_data.field.gearbox;},
  235. color: function(){return form_data.field.color;},
  236. displacement: function(){return form_data.field.displacement;},
  237. emission: function(){return form_data.field.emission;},
  238. address: function(){return form_data.field.address;},
  239. seat_count: function(){return form_data.field.seat_count;},
  240. plate_date: function(){return form_data.field.plate_date;},
  241. factory_date: function(){return form_data.field.factory_date;},
  242. oil_type: function(){return form_data.field.oil_type;},
  243. mileage: function(){return form_data.field.mileage;},
  244. notes: function(){return form_data.field.notes;},
  245. },
  246. done: function (res) {
  247. if (res.code != 0) {
  248. layer.msg(res.msg);
  249. }else {
  250. parent.layui.onSubmitChild(res.data);
  251. }
  252. },
  253. error: function () {
  254. layer.msg('保存失败');
  255. }
  256. });
  257. form.on('submit(component-form-element)', function(data){
  258. if (data.field.image){
  259. form_data = data;
  260. $('#upload_image').click();
  261. }else {
  262. admin.req({
  263. url: url
  264. ,data: data.field
  265. ,type: 'post'
  266. ,done: function(res){
  267. parent.layui.onSubmitChild(res.data);
  268. }
  269. });
  270. }
  271. return false;
  272. });
  273. parent.layui.submitChild = function () {
  274. $("#id_save").click();
  275. };
  276. });
  277. </script>
  278. </body>
  279. </html>