demand_edit.html 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350
  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-view,
  13. .table-overlay .layui-table-header,
  14. .table-overlay .layui-table-box,
  15. .table-overlay .layui-table-body{overflow: visible;}
  16. .table-overlay .layui-table-cell{height: auto; overflow: visible;}
  17. </style>
  18. </head>
  19. <body>
  20. <div class="layui-fluid">
  21. <div class="layui-card">
  22. <div class="layui-card-body" pad15>
  23. <div class="layui-row layui-col-space15">
  24. <div class="layui-col-md12">
  25. <form class="layui-form" action="" lay-filter="component-form-element">
  26. <div class="layui-row layui-col-space10 layui-form-item">
  27. <div class="layui-col-md12">
  28. <label class="layui-form-label"><font color='red' size="4">*</font>客户:</label>
  29. <div class="layui-input-block">
  30. <div class="layui-col-xs12 layui-col-sm5">
  31. <input id='id_customer' type="text" autocomplete="off" lay-verify="required" class="layui-input"/>
  32. </div>
  33. <div class="layui-col-xs12 layui-col-sm7" style="line-height: 37px;">
  34. <button id="btn_add" class="layui-btn layui-btn-warm" type="button" data-permission="customer.add_customer"><i class="layui-icon layui-icon-add-circle"></i>新建</button>
  35. <label id="id_customer_name" style="margin-left: 10px;"></label>
  36. <label id="id_customer_tel" style="margin-left: 10px;"></label>
  37. <input id="customer_id" type="hidden" name="customer">
  38. </div>
  39. <div style="clear: both;"></div>
  40. </div>
  41. </div>
  42. <div class="layui-col-md12">
  43. <label class="layui-form-label"><font color='red' size="4">*</font>需求时间:</label>
  44. <div class="layui-input-block">
  45. <div class="layui-col-sm5">
  46. <input id="id_demand_date" name="demand_date" type="text" class="layui-input" placeholder="yyyy-MM-dd">
  47. </div>
  48. </div>
  49. </div>
  50. <div class="layui-col-md12">
  51. <label class="layui-form-label">备注:</label>
  52. <div class="layui-input-block">
  53. <div class="layui-col-sm12">
  54. <input id="id_notes" type="text" autocomplete="off" name="notes" class="layui-input">
  55. </div>
  56. </div>
  57. </div>
  58. </div>
  59. <fieldset class="layui-elem-field layui-field-title">
  60. <legend>产品明细&nbsp;&nbsp;<button type="button" id="part-btn-add" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button></legend>
  61. </fieldset>
  62. <div class="table-overlay">
  63. <table id="part_dataTable" lay-filter="part_dataTable" class="layui-hide"></table>
  64. </div>
  65. <button id="submit_btn" lay-submit lay-filter="component-form-element" style="display: none">保存</button>
  66. </form>
  67. </div>
  68. </div>
  69. </div>
  70. </div>
  71. </div>
  72. <script src="../../layuiadmin/layui/layui.js"></script>
  73. <script>
  74. var customer_id=null;
  75. var _options = [];
  76. layui.link('../../../layuiadmin/style/autocomplete.css');
  77. layui.config({
  78. base: '../../../layuiadmin/' //静态资源所在路径
  79. }).extend({
  80. index: 'lib/index',
  81. autocomplete: 'autocomplete'
  82. }).use(['index', 'form', 'autocomplete', 'table', 'utils', 'laydate'], function(){
  83. var $ = layui.$
  84. ,admin = layui.admin
  85. ,element = layui.element
  86. ,form = layui.form
  87. ,table = layui.table
  88. ,utils = layui.utils
  89. ,autocomplete = layui.autocomplete;
  90. var laydate = layui.laydate;
  91. laydate.render({
  92. elem: '#id_demand_date'
  93. });
  94. var id = layui.view.getParameterByName('id');
  95. admin.req({
  96. url: '/foundation/search_options/?type=4',
  97. done: function(res){
  98. _options = res.data;
  99. }
  100. });
  101. autocomplete.render({
  102. elem:$('#id_customer'),
  103. url:'/customer/customer/select/',
  104. template_val:'{{d.name}}-{{d.mobile}}',
  105. template_txt:'{{d.name}} <span class=\'layui-badge layui-bg-gray\'>{{d.mobile}}</span>',
  106. onselect: function (resp) {
  107. fillData(resp);
  108. }
  109. });
  110. function fillData(data){
  111. $('#id_customer_name').html('姓名:' + data.name);
  112. $('#id_customer_tel').html('电话:' + data.mobile);
  113. $('#id_demand_date').val(data.demand_date);
  114. $('#id_notes').val(data.notes);
  115. $('#id_customer').val(data.name + '-' + data.mobile);
  116. customer_id = data.id;
  117. }
  118. var part_layTableId = "part_layTable";
  119. var part_tableIns = table.render({
  120. elem: '#part_dataTable',
  121. id: part_layTableId,
  122. data: [],
  123. page: false,
  124. limit: 1000,
  125. loading: true,
  126. even: true, //不开启隔行背景
  127. cols: [[
  128. {title: '序号', type: 'numbers'},
  129. {field: 'name', title: '产品名称', width: 150},
  130. {field: 'model', title: '产品代码', width: 150},
  131. {field: 'unit', title: '单位', width: 80},
  132. {field: 'count', title: '数量', width: 100, templet: function (d){
  133. return '<input id="count'+d.id+'" type="text" value="'+d.count+'" lay-verify="required|numberGtZ" autocomplete="off" class="layui-input">';
  134. }},
  135. {field: 'price', title: '单价', width: 100, templet: function (d){
  136. return '<input id="price'+d.id+'" type="text" value="'+d.price+'" lay-verify="required|numberGeZ" autocomplete="off" class="layui-input">';
  137. }},
  138. {field: 'option_type', title: '质量要求', width: 120, templet: function (d) {
  139. var options = utils.renderSelectOptions(_options, {
  140. valueField: "id",
  141. textField: "name",
  142. selectedValue: d.option_type
  143. });
  144. return '<select id="option_type'+d.id+'" lay-filter="type_select"><option value="">请选择</option>' + options + '</select>';
  145. }
  146. },
  147. {field: 'id', title: '操作',minWidth:120, templet: function(d){
  148. return '<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del" lay-id="'+ d.id +'">删除</a>';
  149. }}
  150. ]],
  151. });
  152. table.on('tool(part_dataTable)', function (obj) {
  153. var data = obj.data, event = obj.event, tr = obj.tr; //获得当前行 tr 的DOM对象;
  154. switch(event){
  155. case "del":
  156. obj.del();
  157. layer.msg('删除成功', {icon: 6});
  158. break;
  159. }
  160. });
  161. var getItemsData = function () {
  162. var rows = table.cache[part_layTableId];
  163. var items = [];
  164. for(var k in rows){
  165. if (rows[k] == false) {
  166. continue;
  167. }
  168. var option_type = $('#option_type'+rows[k].id).val();
  169. var count = $('#count'+rows[k].id).val();
  170. var price = $('#price'+rows[k].id).val();
  171. var item = {
  172. id:rows[k].id,
  173. goods:rows[k].id,
  174. name:rows[k].name,
  175. model:rows[k].model,
  176. count:count,
  177. price:price,
  178. quality_request:option_type
  179. };
  180. items.push(item);
  181. }
  182. return items
  183. };
  184. form.on('submit(component-form-element)', function(data){
  185. var items = getItemsData();
  186. if(items.length == 0){
  187. layer.msg('请添加产品!', {icon: 5});
  188. return false;
  189. }
  190. if (!customer_id){
  191. layer.msg('请添加客户!', {icon: 5});
  192. return false;
  193. }
  194. var order_data = {'customer': customer_id, 'demand_date': $('#id_demand_date').val(), 'notes': $('#id_notes').val()};
  195. data.field.order_data = order_data;
  196. data.field.items = items;
  197. admin.req({
  198. url: '/plan/demand/save/?id='+id
  199. ,data: JSON.stringify(data.field)
  200. ,type: 'post'
  201. ,done: function(res){
  202. customer_id = null;
  203. parent.layui.onSubmitChild();
  204. }
  205. });
  206. return false;
  207. });
  208. $('#part-btn-add').on('click', function () {
  209. layer.open({
  210. type: 2,
  211. title: '添加产品',
  212. shadeClose: false,
  213. area: ['90%', '98%'],
  214. btn: ['保存', '关闭'],
  215. yes: function (index, dom) {
  216. layui.onSubmitChild = function (data) {
  217. var oldData = getItemsData();
  218. if (data.length > 0) {
  219. layer.msg('添加成功!', {icon: 6});
  220. } else {
  221. layer.msg('请先选择记录!');
  222. }
  223. for (var i in data) {
  224. var is_exit = false;
  225. for (var m in oldData) {
  226. if (oldData[m].id == data[i].id) {
  227. is_exit = true;
  228. break;
  229. }
  230. }
  231. if (is_exit) {
  232. continue;
  233. }
  234. var newRow = {
  235. id: data[i].id,
  236. name: data[i].name,
  237. model: data[i].model,
  238. unit: data[i].unit,
  239. price: data[i].retail_price,
  240. count: 1.00,
  241. warehouse_place: data[i].warehouse_place,
  242. option_type: ''
  243. };
  244. oldData.push(newRow);
  245. }
  246. part_tableIns.reload({
  247. data: oldData
  248. });
  249. };
  250. layui.submitChild();
  251. },
  252. btn2: function (index, layero) {
  253. layer.close(index);
  254. },
  255. content: '../goods/search_goods_item.html'
  256. });
  257. });
  258. $('#btn_add').on('click', function(){
  259. layer.open({
  260. type: 2,
  261. title: '添加客户',
  262. shadeClose: false,
  263. area: ['95%', '95%'],
  264. btn: ['保存', '取消'],
  265. yes: function(index, dom){
  266. layui.onSubmitChild = function (data) {
  267. layer.close(index);
  268. fillData(data)
  269. };
  270. layui.submitChild();
  271. },
  272. btn2: function(index, layero){
  273. layer.close(index);//关闭当前按钮
  274. },
  275. content:'../customer/customer_edit.html?add=true'
  276. });
  277. });
  278. if (id) {
  279. admin.req({
  280. url: '/plan/demand/detail/?id='+id,
  281. done: function(res){
  282. var data = res.data.items_data;
  283. var oldData = [];
  284. for (var i in data) {
  285. var item = data[i];
  286. var newRow = {
  287. id: item.goods_id,
  288. name: item.name,
  289. model:item.model,
  290. unit:item.unit,
  291. price: item.price,
  292. count: item.count,
  293. warehouse_place: '',
  294. option_type: item.quality_request,
  295. part_data:item
  296. }
  297. oldData.push(newRow);
  298. }
  299. part_tableIns.reload({
  300. data: oldData
  301. });
  302. var orderData = JSON.parse(JSON.stringify(parent.layui.table.editdata));
  303. fillData({
  304. name:orderData.customer_name,
  305. mobile:orderData.customer_tel,
  306. demand_date:orderData.demand_date,
  307. notes:orderData.notes,
  308. id:orderData.customer
  309. });
  310. }
  311. });
  312. }
  313. parent.layui.submitChild = function () {
  314. $("#submit_btn").click();
  315. };
  316. });
  317. </script>
  318. </body>
  319. </html>