specs.html 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213
  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. <style type="text/css">
  12. .table-overlay .layui-table-body{overflow: visible;}
  13. .table-overlay .layui-table-cell{height: auto; overflow: visible;}
  14. </style>
  15. </head>
  16. <body>
  17. <div class="layui-fluid">
  18. <div class="layui-card">
  19. <div class="layui-card-body" pad15>
  20. <div class="layui-row layui-col-space15">
  21. <div class="layui-col-md12">
  22. <form class="layui-form" action="" lay-filter="component-form-element">
  23. <fieldset class="layui-elem-field layui-field-title">
  24. <legend>规格参数<button type="button" id="btn-add" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button></legend>
  25. </fieldset>
  26. <div id="consumableDataTable" class="table-overlay">
  27. <table id="consumable_layTable" lay-filter="consumable_layTable" class="layui-hide"></table>
  28. </div>
  29. <button class="layui-btn" id="btn_save" lay-submit lay-filter="component-form-element" style="display: none">确定</button>
  30. </form>
  31. </div>
  32. </div>
  33. </div>
  34. </div>
  35. </div>
  36. <script src="../../layuiadmin/layui/layui.js"></script>
  37. <script>
  38. layui.link('../../../layuiadmin/style/autocomplete.css');
  39. layui.config({
  40. base: '../../../layuiadmin/', //静态资源所在路径
  41. autocomplete: 'autocomplete'
  42. }).extend({
  43. index: 'lib/index' //主入口模块
  44. }).use(['index', 'form', 'table', 'laydate', 'utils', 'autocomplete'], function() {
  45. var $ = layui.$;
  46. var admin = layui.admin;
  47. var form = layui.form;
  48. var table = layui.table;
  49. var id = layui.view.getParameterByName('id');
  50. var consumable_tbWidth = $("#consumableDataTable").width();
  51. var consumable_layTable = "consumable_layTable";
  52. var consumable_tableIns = table.render({
  53. elem: '#consumable_layTable',
  54. id: consumable_layTable,
  55. data: [],
  56. width: consumable_tbWidth,
  57. page: false,
  58. limit: 1000,
  59. loading: true,
  60. even: true, //不开启隔行背景
  61. cols: [[
  62. {title: '序号', type: 'numbers'},
  63. {field: 'name', title: '名称', width: 100},
  64. {field: 'value', title: '值', width: 300, templet: function (d) {
  65. return '<input id="value' + d.num + '" value="' + d.value + '" type="text" lay-verify="required" autocomplete="off" class="layui-input">';
  66. }},
  67. {field: 'notes', title: '备注', width: 200},
  68. {
  69. field: 'id', minWidth: 80, title: '操作', templet: function (d) {
  70. return '<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del" lay-id="' + d.num + '"><i class="layui-icon layui-icon-delete"></i>删除</a>';
  71. }
  72. }
  73. ]],
  74. });
  75. admin.req({
  76. url: '/vehicle/model_specs/?vehicle_model=' + id,
  77. done: function (res) {
  78. var data = res.data;
  79. var roldData = table.cache[consumable_layTable];
  80. var k=0;
  81. for (var i in data) {
  82. k = k + 1;
  83. var newRow = {
  84. id: data[i].name,
  85. name: data[i].name_text,
  86. notes: data[i].notes,
  87. value: data[i].value,
  88. num: k
  89. };
  90. roldData.push(newRow);
  91. }
  92. consumable_tableIns.reload({
  93. data: roldData
  94. });
  95. }
  96. });
  97. table.on('tool(consumable_layTable)', function (obj) {
  98. var data = obj.data;
  99. var event = obj.event;
  100. switch (event) {
  101. case "del":
  102. obj.del();
  103. layer.msg('删除成功', {icon: 6});
  104. break;
  105. }
  106. });
  107. var getconsumableData = function () {
  108. var rows = table.cache[consumable_layTable];
  109. var data = [];
  110. for (var n in rows) {
  111. if (rows[n] == false) {
  112. continue;
  113. }
  114. var value = $('#value'+rows[n].num).val();
  115. var item = {
  116. num: rows[n].num,
  117. id: rows[n].id,
  118. name: rows[n].name,
  119. notes: rows[n].notes,
  120. value: value
  121. };
  122. data.push(item);
  123. }
  124. return data;
  125. };
  126. form.on('submit(component-form-element)', function (data) {
  127. var rows = table.cache[consumable_layTable];
  128. var save_data = [];
  129. for (var n in rows) {
  130. if (rows[n] == false) {
  131. continue;
  132. }
  133. var value = $('#value'+rows[n].num).val();
  134. var item = {
  135. key: rows[n].id,
  136. value: value
  137. };
  138. save_data.push(item);
  139. }
  140. admin.req({
  141. url: '/vehicle/model/' + id + '/set_specs/'
  142. ,type: 'post'
  143. , data: {data: JSON.stringify(save_data)}
  144. , done: function (res) {
  145. parent.layui.onSubmitChild(res.data);
  146. }
  147. });
  148. return false;
  149. });
  150. $('#btn-add').on('click', function () {
  151. layer.open({
  152. type: 2,
  153. title: '添加产品',
  154. area: ['90%', '98%'],
  155. btn: ['确定', '取消'],
  156. yes: function (index, dom) {
  157. layui.onSubmitChild = function (data) {
  158. if(data.length === 0) {
  159. layer.msg('请先选择记录!');
  160. return;
  161. }
  162. var oldData = getconsumableData();
  163. var k=0;
  164. if (oldData.length > 0){
  165. k = oldData[oldData.length-1].num;
  166. }
  167. for (var i in data) {
  168. for(var m in oldData){
  169. if(oldData[m].id === data[i].id){
  170. layer.msg('规格['+data[i].name+']已添加!', {icon: 5});
  171. return;
  172. }
  173. }
  174. k = k + 1;
  175. var newRow = {
  176. id: data[i].id,
  177. name: data[i].name,
  178. notes: data[i].notes,
  179. num: k,
  180. value:''
  181. };
  182. oldData.push(newRow);
  183. }
  184. consumable_tableIns.reload({
  185. data: oldData
  186. });
  187. layer.msg('添加成功!', {icon: 6});
  188. };
  189. layui.submitChild();
  190. },
  191. btn2: function (index, layero) {
  192. layer.close(index);//关闭当前按钮
  193. },
  194. content: '../option/search.html'
  195. });
  196. });
  197. parent.layui.submitChild = function () {
  198. $("#btn_save").click();
  199. };
  200. });
  201. </script>
  202. </body>
  203. </html>