order_add.php 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579
  1. <?php
  2. require_once 'conn.php';
  3. checkLogin();
  4. $page = $_GET['Page'] ?? '';
  5. $keys = urlencode($_GET['Keys'] ?? '');
  6. $hrefstr = "keys=$keys&Page=$page";
  7. ?>
  8. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  9. <html xmlns="http://www.w3.org/1999/xhtml">
  10. <head>
  11. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  12. <title>新增订单</title>
  13. <link rel="stylesheet" href="css/common.css" type="text/css" />
  14. <link rel="stylesheet" href="css/alert.css" type="text/css" />
  15. <script src="js/jquery-1.7.2.min.js"></script>
  16. <script src="js/js.js"></script>
  17. <style>
  18. body {
  19. margin: 0;
  20. padding: 20px;
  21. background: #fff;
  22. }
  23. #man_zone {
  24. margin-left: 0;
  25. }
  26. .product-row {
  27. border: 1px solid #ddd;
  28. padding: 10px;
  29. margin-bottom: 10px;
  30. background-color: #f9f9f9;
  31. position: relative;
  32. }
  33. .delete-product {
  34. position: absolute;
  35. right: 10px;
  36. top: 10px;
  37. color: red;
  38. cursor: pointer;
  39. }
  40. .add-product-btn {
  41. background-color: #4CAF50;
  42. color: white;
  43. padding: 8px 12px;
  44. border: none;
  45. cursor: pointer;
  46. margin-bottom: 15px;
  47. }
  48. .total-section {
  49. margin-top: 20px;
  50. padding: 10px;
  51. background-color: #eee;
  52. font-weight: bold;
  53. }
  54. #product-container {
  55. margin-bottom: 20px;
  56. }
  57. .productlist {
  58. display: none;
  59. position: absolute;
  60. background: white;
  61. border: 1px solid #ccc;
  62. max-height: 200px;
  63. overflow-y: auto;
  64. width: 100%;
  65. z-index: 1000;
  66. box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  67. }
  68. .productlist ul {
  69. list-style: none;
  70. padding: 0;
  71. margin: 0;
  72. }
  73. .productlist li {
  74. padding: 8px 10px;
  75. cursor: pointer;
  76. border-bottom: 1px solid #eee;
  77. }
  78. .productlist li:hover {
  79. background-color: #f5f5f5;
  80. }
  81. .productinput {
  82. position: relative;
  83. }
  84. .productlist li .category-tag {
  85. color: #777;
  86. font-size: 12px;
  87. font-style: italic;
  88. margin-left: 5px;
  89. }
  90. </style>
  91. </head>
  92. <body>
  93. <div id="man_zone">
  94. <form name="form1" id="form1" method="post" action="order_save.php?<?= $hrefstr ?>" onsubmit="return validateOrderForm()">
  95. <table width="100%" border="0" cellpadding="3" cellspacing="1" class="table1">
  96. <tbody>
  97. <tr>
  98. <th width="8%">订单编号</th>
  99. <td><input type="text" id="order_code" name="order_code" value="" class="txt1" placeholder="请输入订单编号" /></td>
  100. </tr>
  101. <tr>
  102. <th width="8%">客户选择</th>
  103. <td>
  104. <div style="display: inline-block; width: 60%;" class="customerinput">
  105. <input type="text" class="customer-search fastsearch" placeholder="输入客户名称搜索..." style="width: 100%;">
  106. <div class="customerlist" style="display: none; position: absolute; background: white; border: 1px solid #ccc; max-height: 200px; overflow-y: auto; width: 100%; z-index: 1000; box-shadow: 0 2px 5px rgba(0,0,0,0.2);">
  107. <ul style="list-style: none; padding: 0; margin: 0;"></ul>
  108. </div>
  109. <input type="hidden" name="customer_id" id="customer_id" value="0">
  110. <div class="selected-customer-info" style="margin-top: 5px; font-weight: bold;"></div>
  111. </div>
  112. </td>
  113. </tr>
  114. <tr>
  115. <th width="8%">联系人</th>
  116. <td>
  117. <select id="contact_id" name="contact_id">
  118. <option value="">请选择联系人</option>
  119. </select>
  120. </td>
  121. </tr>
  122. <tr>
  123. <th width="8%">订单日期</th>
  124. <td><input type="date" id="order_date" name="order_date" value="<?= date('Y-m-d') ?>" class="txt1" /></td>
  125. </tr>
  126. <tr>
  127. <th width="8%" valign="top">产品列表</th>
  128. <td>
  129. <div id="product-container">
  130. <!-- 产品行将通过搜索添加 -->
  131. <div id="no-products-message" style="padding: 20px; text-align: center; color: #777; background-color: #f9f9f9; border: 1px dashed #ddd; display: block;">
  132. 请使用下方的产品搜索框添加产品
  133. </div>
  134. </div>
  135. <div class="total-section">
  136. <div>
  137. <label>订单总额:</label>
  138. <span id="total-amount">0.00</span>
  139. <input type="hidden" name="total_amount" id="total-amount-input" value="0.00">
  140. <input type="hidden" name="subtotal" id="subtotal-input" value="0.00">
  141. </div>
  142. </div>
  143. <div style="margin-top: 15px; border-top: 1px dashed #ccc; padding-top: 15px;">
  144. <div class="productinput" style="position: relative; width: 60%;">
  145. <label>产品搜索:</label>
  146. <input type="text" id="product-search-single" class="fastsearch" placeholder="输入产品名称搜索并添加..." style="width: 100%;">
  147. <div id="product-list-single" class="productlist" style="width: 100%;"><ul></ul></div>
  148. </div>
  149. </div>
  150. </td>
  151. </tr>
  152. <tr>
  153. <th width="8%">订单备注</th>
  154. <td>
  155. <textarea name="notes" rows="3" style="width: 90%;"></textarea>
  156. </td>
  157. </tr>
  158. <tr>
  159. <th></th>
  160. <td>
  161. <input type="submit" name="save" value="保存订单" class="btn1">
  162. <input type="button" value="返回" class="btn1" onClick="location.href='order.php?<?= $hrefstr ?>'" />
  163. </td>
  164. </tr>
  165. </tbody>
  166. </table>
  167. </form>
  168. <script>
  169. var productIndex = 1;
  170. $(document).ready(function() {
  171. // 初始化计算
  172. calculateOrderTotal();
  173. // 移除第一个默认产品行(如果不需要的话)
  174. if ($('.product-row').length > 0) {
  175. $('.product-row').first().remove();
  176. }
  177. // 删除产品行
  178. $(document).on('click', '.delete-product', function() {
  179. if ($('.product-row').length > 1) {
  180. $(this).closest('.product-row').remove();
  181. reindexProductRows();
  182. calculateOrderTotal();
  183. updateNoProductsMessage();
  184. } else {
  185. // 如果只剩最后一个产品行,则清空它而不是删除
  186. $(this).closest('.product-row').remove();
  187. updateNoProductsMessage();
  188. calculateOrderTotal(); // 确保在删除最后一个产品时也更新总额
  189. }
  190. });
  191. // 客户搜索功能
  192. var customerSearchTimeout = null;
  193. $(document).on('keyup', '.customer-search', function() {
  194. var $this = $(this);
  195. var searchTerm = $this.val().trim();
  196. var customerList = $('.customerlist');
  197. // 清除之前的超时
  198. clearTimeout(customerSearchTimeout);
  199. // 隐藏之前的结果
  200. customerList.hide();
  201. // 如果搜索词少于2个字符,不执行搜索
  202. if (searchTerm.length < 2) {
  203. return;
  204. }
  205. // 设置一个300毫秒的超时,以减少请求数量
  206. customerSearchTimeout = setTimeout(function() {
  207. $.ajax({
  208. url: 'get_customer_search.php',
  209. type: 'GET',
  210. data: {search: searchTerm},
  211. dataType: 'json',
  212. success: function(data) {
  213. var ul = customerList.find('ul');
  214. ul.empty();
  215. if (data && data.customers && data.customers.length > 0) {
  216. $.each(data.customers, function(i, customer) {
  217. var displayText = customer.cs_company;
  218. if (customer.cs_code) {
  219. displayText = customer.cs_code + ' - ' + displayText;
  220. }
  221. ul.append('<li data-id="' + customer.id + '" data-code="' + (customer.cs_code || '') + '">' +
  222. displayText + '</li>');
  223. });
  224. customerList.show();
  225. }
  226. },
  227. error: function() {
  228. console.log('搜索客户失败,请重试');
  229. }
  230. });
  231. }, 300);
  232. });
  233. // 点击选择客户
  234. $(document).on('click', '.customerlist li', function() {
  235. var $this = $(this);
  236. var customerId = $this.data('id');
  237. var customerName = $this.text();
  238. var customerCode = $this.data('code') || '';
  239. // 设置选中的客户ID和名称
  240. $('#customer_id').val(customerId);
  241. $('.customer-search').val(customerName);
  242. $('.selected-customer-info').text(customerName);
  243. $('.customerlist').hide();
  244. // 加载客户联系人
  245. loadCustomerContacts(customerId);
  246. });
  247. // 单一产品搜索功能 - 使用防抖动以减少请求数量
  248. var productSearchTimeout = null;
  249. $(document).on('keyup', '#product-search-single', function() {
  250. var $this = $(this);
  251. var searchTerm = $this.val().trim();
  252. var productList = $('#product-list-single');
  253. // 清除之前的超时
  254. clearTimeout(productSearchTimeout);
  255. // 隐藏之前的结果
  256. productList.hide();
  257. // 如果搜索词少于2个字符,不执行搜索
  258. if (searchTerm.length < 2) {
  259. return;
  260. }
  261. // 设置一个300毫秒的超时,以减少请求数量
  262. productSearchTimeout = setTimeout(function() {
  263. $.ajax({
  264. url: 'get_product_info.php',
  265. type: 'GET',
  266. data: {search: searchTerm},
  267. dataType: 'json',
  268. success: function(data) {
  269. var ul = productList.find('ul');
  270. ul.empty();
  271. if (data && data.products && data.products.length > 0) {
  272. $.each(data.products, function(i, product) {
  273. ul.append('<li data-id="' + product.id + '">' +
  274. product.ProductName +
  275. (product.category_name ? ' <span class="category-tag">(' + product.category_name + ')</span>' : '') +
  276. '</li>');
  277. });
  278. productList.show();
  279. }
  280. },
  281. error: function() {
  282. console.log('搜索产品失败,请重试');
  283. }
  284. });
  285. }, 300);
  286. });
  287. // 点击选择产品 - 从单一搜索框
  288. $(document).on('click', '#product-list-single li', function() {
  289. var $this = $(this);
  290. var productId = $this.data('id');
  291. var productName = $this.text(); // 这会包含分类名,需要清理
  292. var categoryTag = $this.find('.category-tag').text();
  293. // 清理产品名称,移除分类信息
  294. if (categoryTag) {
  295. productName = productName.replace(categoryTag, '').trim();
  296. }
  297. // 检查产品是否已经添加
  298. var isDuplicate = false;
  299. $('.product-id-input').each(function() {
  300. if ($(this).val() == productId) {
  301. isDuplicate = true;
  302. return false; // 跳出循环
  303. }
  304. });
  305. if (isDuplicate) {
  306. alert('该产品已添加,不能重复添加');
  307. $('#product-search-single').val('');
  308. $('#product-list-single').hide();
  309. return;
  310. }
  311. // 添加产品行
  312. addProductRowWithProduct(productId, productName, categoryTag);
  313. // 清空搜索框并隐藏结果
  314. $('#product-search-single').val('');
  315. $('#product-list-single').hide();
  316. });
  317. // 点击其他地方隐藏下拉列表
  318. $(document).on('click', function(e) {
  319. if (!$(e.target).closest('#product-search-single').length) {
  320. $('#product-list-single').hide();
  321. }
  322. if (!$(e.target).closest('.customerinput').length) {
  323. $('.customerlist').hide();
  324. }
  325. });
  326. });
  327. function addEmptyProductRow() {
  328. var html = `
  329. <div class="product-row" data-index="${productIndex}">
  330. <span class="delete-product">×</span>
  331. <div>
  332. <label>产品:</label>
  333. <div style="display: inline-block; width: 60%;">
  334. <input type="hidden" name="items[${productIndex}][product_id]" class="product-id-input" value="">
  335. <div class="selected-product-info" style="margin-top: 5px; font-weight: bold;"></div>
  336. </div>
  337. </div>
  338. <div style="margin-top: 5px;">
  339. <label>数量:</label>
  340. <input type="number" name="items[${productIndex}][quantity]" value="1" min="1" class="quantity-input" onchange="calculateItemTotal(this)">
  341. <label style="margin-left: 10px;">单位:</label>
  342. <input type="text" name="items[${productIndex}][unit]" value="" class="unit-input">
  343. <label style="margin-left: 10px;">单价:</label>
  344. <input type="number" step="0.01" name="items[${productIndex}][unit_price]" value="" class="price-input" placeholder="请输入单价" onchange="calculateItemTotal(this)">
  345. <label style="margin-left: 10px;">总价:</label>
  346. <input type="number" step="0.01" name="items[${productIndex}][total_price]" value="0.00" class="total-price-input" readonly>
  347. </div>
  348. <div style="margin-top: 5px;">
  349. <label>备注:</label>
  350. <input type="text" name="items[${productIndex}][notes]" value="" style="width: 90%;">
  351. </div>
  352. </div>
  353. `;
  354. $('#product-container').append(html);
  355. productIndex++;
  356. return productIndex - 1; // 返回新添加行的索引
  357. }
  358. function addProductRowWithProduct(productId, productName, categoryTag) {
  359. // 添加空行
  360. var rowIndex = addEmptyProductRow();
  361. var row = $('.product-row[data-index="' + rowIndex + '"]');
  362. // 设置产品ID和名称
  363. row.find('.product-id-input').val(productId);
  364. // 显示包含分类的完整产品信息
  365. var displayName = productName;
  366. if (categoryTag) {
  367. displayName += ' <span class="category-tag">' + categoryTag + '</span>';
  368. }
  369. row.find('.selected-product-info').html(displayName);
  370. // 获取产品信息
  371. getProductInfo(productId, row);
  372. // 更新无产品消息显示
  373. updateNoProductsMessage();
  374. }
  375. function reindexProductRows() {
  376. $('.product-row').each(function(index) {
  377. $(this).attr('data-index', index);
  378. $(this).find('select, input').each(function() {
  379. var name = $(this).attr('name');
  380. if (name) {
  381. name = name.replace(/items\[\d+\]/, 'items[' + index + ']');
  382. $(this).attr('name', name);
  383. }
  384. });
  385. });
  386. productIndex = $('.product-row').length;
  387. }
  388. function getProductInfo(productId, row) {
  389. if (!productId) return;
  390. $.ajax({
  391. url: 'get_product_info.php',
  392. type: 'GET',
  393. data: {id: productId},
  394. dataType: 'json',
  395. success: function(data) {
  396. if (data) {
  397. row.find('.unit-input').val(data.unit);
  398. // 只有当数据库中有价格信息时才设置价格
  399. if (data.price && data.price !== '0' && data.price !== '0.00') {
  400. //默认不设置单价
  401. //row.find('.price-input').val(data.price);
  402. }
  403. calculateItemTotal(row.find('.price-input')[0]);
  404. }
  405. }
  406. });
  407. }
  408. function calculateItemTotal(element) {
  409. var row = $(element).closest('.product-row');
  410. var quantity = parseInt(row.find('.quantity-input').val()) || 0;
  411. var priceInput = row.find('.price-input');
  412. var priceValue = priceInput.val().trim();
  413. var price = (priceValue === '') ? 0 : (parseFloat(priceValue) || 0);
  414. var total = quantity * price;
  415. if (total < 0) total = 0;
  416. row.find('.total-price-input').val(total.toFixed(2));
  417. calculateOrderTotal();
  418. }
  419. function calculateOrderTotal() {
  420. var total = 0;
  421. $('.total-price-input').each(function() {
  422. total += parseFloat($(this).val()) || 0;
  423. });
  424. // 更新总额和隐藏的小计字段
  425. $('#total-amount').text(total.toFixed(2));
  426. $('#total-amount-input').val(total.toFixed(2));
  427. $('#subtotal-input').val(total.toFixed(2)); // 为兼容性保留
  428. }
  429. function loadCustomerContacts(customerId) {
  430. if (customerId) {
  431. $.ajax({
  432. url: 'get_customer_contacts.php',
  433. type: 'GET',
  434. data: {customer_id: customerId},
  435. dataType: 'json',
  436. success: function(data) {
  437. var options = '<option value="">请选择联系人</option>';
  438. if (data && data.length > 0) {
  439. for (var i = 0; i < data.length; i++) {
  440. options += '<option value="' + data[i].id + '">' + data[i].contact_name + '</option>';
  441. }
  442. }
  443. $('#contact_id').html(options);
  444. }
  445. });
  446. } else {
  447. $('#contact_id').html('<option value="">请选择联系人</option>');
  448. }
  449. }
  450. function validateOrderForm() {
  451. var orderCode = $('#order_code').val();
  452. var customerId = $('#customer_id').val();
  453. var customerName = $('.customer-search').val();
  454. var contactId = $('#contact_id').val();
  455. var hasProducts = false;
  456. var allPricesValid = true;
  457. var firstEmptyPriceField = null;
  458. $('.product-id-input').each(function() {
  459. if ($(this).val()) {
  460. hasProducts = true;
  461. // 检查该产品的单价是否已填写
  462. var row = $(this).closest('.product-row');
  463. var priceInput = row.find('.price-input');
  464. var priceValue = priceInput.val().trim();
  465. if (priceValue === '' || isNaN(parseFloat(priceValue))) {
  466. allPricesValid = false;
  467. if (!firstEmptyPriceField) {
  468. firstEmptyPriceField = priceInput;
  469. }
  470. }
  471. }
  472. });
  473. if (!orderCode) {
  474. alert('订单编号不能为空');
  475. $('#order_code').focus();
  476. return false;
  477. }
  478. if (!customerId || customerId == '0') {
  479. alert('请选择客户');
  480. $('.customer-search').focus();
  481. return false;
  482. }
  483. if (!customerName) {
  484. alert('请输入并选择有效的客户');
  485. $('.customer-search').focus();
  486. return false;
  487. }
  488. if (!contactId) {
  489. alert('请选择联系人');
  490. $('#contact_id').focus();
  491. return false;
  492. }
  493. if (!hasProducts) {
  494. alert('请至少添加一个产品');
  495. $('#product-search-single').focus();
  496. return false;
  497. }
  498. if (!allPricesValid) {
  499. alert('请为所有产品输入有效的单价');
  500. if (firstEmptyPriceField) {
  501. firstEmptyPriceField.focus();
  502. }
  503. return false;
  504. }
  505. return true;
  506. }
  507. function updateNoProductsMessage() {
  508. if ($('.product-row').length > 0) {
  509. $('#no-products-message').hide();
  510. } else {
  511. $('#no-products-message').show();
  512. }
  513. }
  514. </script>
  515. </div>
  516. </body>
  517. </html>