order_add.php 21 KB

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