Hugging Face's logo

Spaces:
Sephiroth1984
/
system
Running

App Files Community
Sephiroth1984 commited on
Commit
d8d46a5
·
verified ·
1 Parent(s): 75f7227

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +674 -583
  2. prompts.txt +2 -1
index.html CHANGED
@@ -3,11 +3,11 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>仓储管理系统</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
10
- /* 之前的所有样式保持不变 */
11
  .custom-scrollbar::-webkit-scrollbar {
12
  width: 6px;
13
  }
@@ -332,7 +332,7 @@
332
  flex-wrap: wrap;
333
  gap: 1rem;
334
  margin-top: 1rem;
335
- }
336
 
337
  .preview-item {
338
  position: relative;
@@ -413,6 +413,154 @@
413
  .has-submenu.active > .menu-item::after {
414
  transform: translateY(-50%) rotate(180deg);
415
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
416
  </style>
417
  </head>
418
  <body class="bg-gray-50 h-screen overflow-hidden">
@@ -501,19 +649,19 @@
501
  <i class="menu-icon fas fa-tachometer-alt mr-3 text-blue-500"></i>
502
  <span>Dashboard</span>
503
  </div>
504
- <div class="menu-item active flex items-center px-6 py-3 cursor-pointer rounded-md my-1 mx-2">
505
  <i class="menu-icon fas fa-boxes mr-3 text-green-500"></i>
506
  <span>产品管理</span>
507
  </div>
508
 
509
  <!-- 仓储管理菜单（添加二级菜单） -->
510
- <div class="has-submenu">
511
  <div class="menu-item flex items-center px-6 py-3 cursor-pointer rounded-md my-1 mx-2">
512
  <i class="menu-icon fas fa-warehouse mr-3 text-purple-500"></i>
513
  <span>仓储管理</span>
514
  </div>
515
- <div class="submenu">
516
- <div class="submenu-item flex items-center">
517
  <i class="fas fa-building mr-3 text-purple-400"></i>
518
  <span>仓库管理</span>
519
  </div>
@@ -559,18 +707,17 @@
559
  </div>
560
  </aside>
561
 
562
- <!-- 主内容区 - 修改为与菜单栏和顶部栏完美衔接 -->
563
  <main class="main-content flex-1 overflow-hidden">
564
  <div class="product-content h-full">
565
- <!-- 产品管理页面内容 - 修改为填满高度并与边框衔接 -->
566
  <div class="product-container h-full flex flex-col">
567
  <!-- 标题和操作按钮 -->
568
  <div class="flex flex-col md:flex-row md:items-center md:justify-between p-6 pb-0">
569
- <h2 class="text-xl font-semibold text-gray-800 mb-4 md:mb-0">产品管理</h2>
570
  <div class="flex space-x-3">
571
- <button id="addProductBtn" class="flex items-center px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition-colors">
572
  <i class="fas fa-plus mr-2"></i>
573
- 添加产品
574
  </button>
575
  <button class="flex items-center px-4 py-2 bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 rounded-lg transition-colors">
576
  <i class="fas fa-download mr-2"></i>
@@ -579,25 +726,44 @@
579
  </div>
580
  </div>
581
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
582
  <!-- 搜索和筛选区域 -->
583
- <div class="flex flex-col md:flex-row md:items-center md:justify-between p-6">
584
  <div class="relative mb-4 md:mb-0 md:w-64">
585
- <input type="text" placeholder="搜索产品..." class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
586
  <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
587
  </div>
588
  <div class="flex space-x-3">
589
  <select class="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
590
- <option>所有类别</option>
591
- <option>电子产品</option>
592
- <option>家居用品</option>
593
- <option>办公设备</option>
594
- <option>服装鞋帽</option>
595
  </select>
596
  <select class="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
597
  <option>所有状态</option>
598
- <option>在售</option>
599
- <option>停售</option>
600
- <option>缺货</option>
601
  </select>
602
  <button class="px-4 py-2 bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 rounded-lg transition-colors">
603
  <i class="fas fa-filter mr-2"></i>
@@ -606,203 +772,180 @@
606
  </div>
607
  </div>
608
 
609
- <!-- 产品表格 - 修改为自动填充剩余高度 -->
610
  <div class="table-container px-6">
611
  <table class="min-w-full product-table">
612
  <thead>
613
  <tr>
614
- <th class="table-cell table-cell-id">产品ID</th>
615
- <th class="table-cell table-cell-name">产品名称</th>
616
- <th class="table-cell table-cell-category">类别</th>
617
- <th class="table-cell table-cell-stock">库存</th>
618
- <th class="table-cell table-cell-price">价格</th>
619
  <th class="table-cell table-cell-status">状态</th>
620
  <th class="table-cell table-cell-actions">操作</th>
621
  </tr>
622
  </thead>
623
  <tbody class="bg-white divide-y divide-gray-200">
624
- <!-- 产品行1 -->
625
  <tr>
626
- <td class="table-cell table-cell-id">P10001</td>
627
  <td class="table-cell table-cell-name">
628
  <div class="flex items-center">
629
- <img class="product-image mr-3" src="https://via.placeholder.com/40" alt="">
630
  <div>
631
- <div class="text-sm font-medium text-gray-900">智能手表 Pro</div>
632
- <div class="text-xs text-gray-500">型号: SW-2022</div>
633
  </div>
634
  </div>
635
  </td>
636
- <td class="table-cell table-cell-category">电子产品</td>
637
- <td class="table-cell table-cell-stock">245</td>
638
- <td class="table-cell table-cell-price">¥1,299.00</td>
639
- <td class="table-cell table-cell-status">
640
- <span class="status-badge status-active">在售</span>
641
  </td>
642
- <td class="table-cell table-cell-actions">
643
- <button class="edit-product-btn text-blue-600 hover:text-blue-900 mr-3" data-id="P10001">编辑</button>
644
- <button class="text-red-600 hover:text-red-900">删除</button>
645
  </td>
646
- </tr>
647
- <!-- 产品行2 -->
648
- <tr>
649
- <td class="table-cell table-cell-id">P10002</td>
650
- <td class="table-cell table-cell-name">
651
- <div class="flex items-center">
652
- <img class="product-image mr-3" src="https://via.placeholder.com/40" alt="">
653
- <div>
654
- <div class="text-sm font-medium text-gray-900">无线蓝牙耳机</div>
655
- <div class="text-xs text-gray-500">型号: BT-极2022</div>
656
- </div>
657
  </div>
658
  </td>
659
- <td class="table-cell table-cell-category">电子产品</td>
660
- <td class="table-cell table-cell-stock">189</td>
661
- <td class="table-cell table-cell-price">¥399.00</td>
662
  <td class="table-cell table-cell-status">
663
- <span class="status-badge status-active">在售</span>
664
  </td>
665
  <td class="table-cell table-cell-actions">
666
- <button class="edit-product-btn text-blue-600 hover:text-blue-900 mr-3" data-id="P10002">编辑</button>
667
- <button class="text-red-600 hover:text-red-900">删除</button>
668
  </td>
669
  </tr>
670
- <!-- 产品行3 -->
671
  <tr>
672
- <td class="table-cell table-cell-id">P10003</td>
673
  <td class="table-cell table-cell-name">
674
  <div class="flex items-center">
675
- <img class="product-image mr-3" src="https://via.placeholder.com/40" alt="">
676
  <div>
677
- <div class="text-sm font-medium text-gray-900">智能台灯</div>
678
- <div class="text-xs text-gray-500">型号: LT-2022</div>
679
  </div>
680
  </div>
681
  </td>
682
- <td class="table-cell table-cell-category">家居用品</td>
683
- <td class="table-cell table-cell-stock">0</td>
684
- <td class="table-cell table-cell-price">¥199.00</td>
685
- <td class="table-cell table-cell-status">
686
- <span class="status-badge status-inactive">缺货</span>
687
  </td>
688
- <td class="table-cell table-cell-actions">
689
- <button class="edit-product-btn text-blue-600 hover:text-blue-900 mr-3" data-id="P10003">编辑</button>
690
- <button class="text-red-600 hover:text-red-900">删除</button>
691
  </td>
692
- </tr>
693
- <!-- 产品行4 -->
694
- <tr>
695
- <td class="table-cell table-cell-id">P10004</td>
696
- <td class="table-cell table-cell-name">
697
- <div class="flex items-center">
698
- <img class="product-image mr-3" src="https://via.placeholder.com/40" alt="">
699
- <div>
700
- <div class="text-sm font-medium text-gray-900">办公椅</div>
701
- <div class="text-xs text-gray-500">型号: OC-2022</div>
702
- </div>
703
  </div>
704
  </td>
705
- <td class="table-cell table-cell-category">办公设备</td>
706
- <td class="table-cell table-cell-stock">56</td>
707
- <td class="table-cell table-cell-price">¥599.00</td>
708
  <td class="table-cell table-cell-status">
709
- <span class="status-badge status-active">在售</span>
710
  </td>
711
  <td class="table-cell table-cell-actions">
712
- <button class="edit-product-btn text-blue-600 hover:text-blue-900 mr-3" data-id="P10004">编辑</button>
713
- <button class="text-red-600 hover:text-red-900">删除</button>
714
  </td>
715
  </tr>
716
- <!-- 产品行5 -->
717
  <tr>
718
- <td class="table-cell table-cell-id">P10005</td>
719
  <td class="table-cell table-cell-name">
720
  <div class="flex items-center">
721
- <img class="product-image mr-3" src="https://via.placeholder.com/40" alt="">
722
  <div>
723
- <div class="text-sm font-medium text-gray-900">运动水壶</div>
724
- <div class="text-xs text-gray-500">型号: SB-2022</div>
725
  </div>
726
  </div>
727
  </td>
728
- <td class="table-cell table-cell-category">家居用品</td>
729
- <td class="table-cell table-cell-stock">124</td>
730
- <td class="table-cell table-cell-price">¥89.00</td>
731
- <td class="table-cell table-cell-status">
732
- <span class="status-badge status-pending">待审核</span>
733
  </td>
734
- <td class="table-cell table-cell-actions">
735
- <button class="edit-product-btn text-blue-600 hover:text-blue-900 mr-3" data-id="P10005">编辑</button>
736
- <button class="text-red-600 hover:text-red-900">删除</button>
737
  </td>
738
- </tr>
739
- <!-- 产品行6 -->
740
- <tr>
741
- <td class="table-cell table-cell-id">P10006</td>
742
- <td class="table-cell table-cell-name">
743
- <div class="flex items-center">
744
- <img class="product-image mr-3" src="https://via.placeholder.com/40" alt="">
745
- <div>
746
- <div class="text-sm font-medium text-gray-900">无线充电器</div>
747
- <div class="text-xs text-gray-500">型号: WC-2022</div>
748
- </div>
749
  </div>
750
  </td>
751
- <td class="table-cell table-cell-category">电子产品</td>
752
- <td class="table-cell table-cell-stock">78</td>
753
- <td class="table-cell table-cell-price">¥159.00</td>
754
  <td class="table-cell table-cell-status">
755
- <span class="status-badge status-active">在售</span>
756
  </td>
757
  <td class="table-cell table-cell-actions">
758
- <button class="edit-product-btn text-blue-600 hover:text-blue-900 mr-3" data-id="P10006">编辑</button>
759
- <button class="text-red-600 hover:text-red-900">删除</button>
760
  </td>
761
  </tr>
762
- <!-- 产品行7 -->
763
  <tr>
764
- <td class="table-cell table-cell-id">P10007</td>
765
  <td class="table-cell table-cell-name">
766
  <div class="flex items-center">
767
- <img class="product-image mr-3" src="https://via.placeholder.com/40" alt="">
768
  <div>
769
- <div class="text-sm font-medium text-gray-900">蓝牙音箱</div>
770
- <div class="text-xs text-gray-500">型号: BS-2022</div>
771
  </div>
772
  </div>
773
  </td>
774
- <td class="table-cell table-cell-category">电子产品</td>
775
- <td class="table-cell table-cell-stock">32</td>
776
- <td class="table-cell table-cell-price">¥299.00</td>
 
 
 
 
 
 
 
 
 
777
  <td class="table-cell table-cell-status">
778
- <span class="status-badge status-active">在售</span>
779
  </td>
780
  <td class="table-cell table-cell-actions">
781
- <button class="edit-product-btn text-blue-600 hover:text-blue-900 mr-3" data-id="P10007">编辑</button>
782
- <button class="text-red-600 hover:text-red-900">删除</button>
783
  </td>
784
  </tr>
785
- <!-- 产品行8 -->
786
  <tr>
787
- <td class="table-cell table-cell-id">P10008</td>
788
  <td class="table-cell table-cell-name">
789
  <div class="flex items-center">
790
- <img class="product-image mr-3" src="https://via.placeholder.com/40" alt="">
791
  <div>
792
- <div class="text-sm font-medium text-gray-900">机械键盘</div>
793
- <div class="text-xs text-gray-500">型号: MK-2022</div>
794
  </div>
795
  </div>
796
  </td>
797
- <td class="table-cell table-cell-category">电子产品</td>
798
- <td class="table-cell table-cell-stock">15</td>
799
- <td class="table-cell table-cell-price">¥499.00</td>
 
 
 
 
 
 
 
 
 
800
  <td class="table-cell table-cell-status">
801
- <span class="status-badge status-active">在售</span>
802
  </td>
803
  <td class="table-cell table-cell-actions">
804
- <button class="edit-product-btn text-blue-600 hover:text-blue-900 mr-3" data-id="P10008">编辑</button>
805
- <button class="text-red-600 hover:text-red-900">删除</button>
806
  </td>
807
  </tr>
808
  </tbody>
@@ -812,7 +955,7 @@
812
  <!-- 分页控件 -->
813
  <div class="flex items-center justify-between p-6 border-t border-gray-200">
814
  <div class="text-sm text-gray-500">
815
- 显示 <span class="font-medium">1</span> 到 <span class="font-medium">8</span> 条，共 <span class="font-medium">24</span> 条记录
816
  </div>
817
  <div class="flex space-x-1">
818
  <button class="pagination-btn px-3 py-1 border border-gray-300 rounded-lg disabled">
@@ -821,8 +964,6 @@
821
  <button class="pagination-btn px-3 py-1 border border-gray-300 rounded-lg bg-blue-500 text-white">1</button>
822
  <button class="pagination-btn px-3 py-1 border border-gray-300 rounded-lg hover:bg-gray-100">2</button>
823
  <button class="pagination-btn px-3 py-1 border border-gray-300 rounded-lg hover:bg-gray-100">3</button>
824
- <button class="pagination-btn px-3 py-1 border border-gray-300 rounded-lg hover:bg-gray-100">4</button>
825
- <button class="pagination-btn px-3 py-1 border border-gray-300 rounded-lg hover:bg-gray-100">5</button>
826
  <button class="pagination-btn px-3 py-1 border border-gray-300 rounded-lg">
827
  <i class="fas fa-angle-right"></i>
828
  </button>
@@ -834,265 +975,235 @@
834
  </div>
835
  </div>
836
 
837
- <!-- 添加产品抽屉 -->
838
- <div class="drawer-overlay" id="addProductOverlay"></div>
839
- <div class="drawer" id="addProductDrawer">
840
  <div class="drawer-header">
841
- <h3 class="text-lg font-semibold text-gray-800">添加新产品</h3>
842
- <button id="closeDrawerBtn" class="text-gray-400 hover:text-gray-500">
843
  <i class="fas fa-times"></i>
844
  </button>
845
  </div>
846
 
847
  <div class="drawer-body">
848
- <form id="addProductForm">
849
  <div class="form-grid">
850
  <!-- 基本信息 -->
851
- <div class="form-group form-full-width">
852
- <label class="form-label">产品名称</label>
853
- <input type="text" class="form-control" placeholder="输入产品名称" required>
854
  </div>
855
 
856
  <div class="form-group">
857
- <label class="form-label">产品型号</label>
858
- <input type="text" class="form-control" placeholder="输入产品型号" required>
859
  </div>
860
 
861
  <div class="form-group">
862
- <label class="form-label">产品类别</label>
863
  <select class="form-control" required>
864
- <option value="">选择类别</option>
865
- <option value="electronics">电子产品</option>
866
- <option value="home">家居用品</option>
867
- <option value="office">办公设备</option>
868
- <option value="clothing">服装鞋帽</option>
869
  </select>
870
  </div>
871
 
872
  <div class="form-group">
873
- <label class="form-label">产品品牌</label>
874
- <input type="text" class="form-control" placeholder="输入品牌名称">
 
 
 
 
 
 
 
 
 
875
  </div>
876
 
877
- <!-- 价格和库存 -->
878
  <div class="form-group">
879
- <label class="form-label">单价</label>
880
- <div class="relative">
881
- <span class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500">¥</span>
882
- <input type="number" class="form-control pl-8" placeholder="0.00" min="0" step="0.01" required>
883
- </div>
884
  </div>
885
 
886
  <div class="form-group">
887
- <label class="form-label">初始库存</label>
888
- <input type="number" class="form-control" placeholder="0" min="0" required>
889
  </div>
890
 
891
- <!-- 状态和SKU -->
892
  <div class="form-group">
893
- <label class="form-label">产品状态</label>
894
- <select class="form-control" required>
895
- <option value="active">在售</option>
896
- <option value="inactive">停售</option>
897
- <option value="pending">待审核</option>
898
- </select>
899
  </div>
900
 
901
  <div class="form-group">
902
- <label class="form-label">SKU编码</label>
903
- <input type="text" class="form-control" placeholder="自动生成" readonly>
 
 
 
 
 
 
904
  </div>
905
 
906
- <!-- 图片上传 -->
907
- <div class="form-group form-full-width">
908
- <label class="form-label">产品图片</label>
909
- <div class="image-upload">
910
- <div class="flex flex-col items-center justify-center">
911
- <i class="fas fa-cloud-upload-alt text-3xl text-blue-500 mb-2"></i>
912
- <p class="text-sm text-gray-600">拖放图片到此处或点击上传</p>
913
- <p class="text-xs text-gray-400 mt-1">支持JPG, PNG格式，最大5MB</p>
914
- </div>
915
- <input type="file" id="productImages" class="hidden", accept="image/*" multiple>
916
- </div>
917
- <div class="image-preview" id="imagePreview"></div>
918
  </div>
919
 
920
- <!-- 产品描述 -->
921
- <div class="form-group form-full-width">
922
- <label class="form-label">产品描述</label>
923
- <textarea class="form-control form-textarea" placeholder="输入产品详细描述..."></textarea>
924
  </div>
925
 
926
- <!-- 规格参数 -->
927
  <div class="form-group form-full-width">
928
- <label class="form-label">规格参数</label>
929
- <div class="space-y-2">
930
- <div class="flex space-x-2">
931
- <input type="text", class="form-control flex-1", placeholder="参数名称">
932
- <input type="text", class="form-control flex-1", placeholder="参数值">
933
- <button type="button" class="px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded">
934
- <i class="fas fa-plus"></i>
935
- </button>
936
  </div>
937
- <div class="border border-gray-200 rounded p-2">
938
- <div class="flex justify-between items-center py-1 px-2 bg-gray-50 rounded">
939
- <span class="text-sm">重量</span>
940
- <span class="text-sm">500g</span>
941
- <button type="button" class="text-red-400 hover:text-red-600">
942
- <i class="fas fa-times"></i>
943
- </button>
944
- </div>
945
- <div class="flex justify-between items-center py-1 px-2">
946
- <span class="text-sm">尺寸</span>
947
- <span class="text-sm">20x30x5cm</span>
948
- <button type="button" class="text-red-400 hover:text-red-600">
949
- <i class="fas fa-times"></i>
950
- </button>
951
- </div>
952
  </div>
953
  </div>
954
  </div>
 
 
 
 
 
 
955
  </div>
956
  </form>
957
  </div>
958
 
959
  <div class="drawer-footer">
960
- <button type="button" id="cancelAddBtn" class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50">
961
  取消
962
  </button>
963
- <button type="submit" form="addProductForm" class="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg">
964
- 保存产品
965
  </button>
966
  </div>
967
  </div>
968
 
969
- <!-- 编辑产品抽屉 -->
970
- <div class="drawer-overlay" id="editProductOverlay"></div>
971
- <div class="drawer" id="editProductDrawer">
972
  <div class="drawer-header">
973
- <h3 class="text-lg font-semibold text-gray-800">编辑产品</h3>
974
- <button id="closeEditDrawerBtn" class="text-gray-400 hover:text-gray-500">
975
  <i class="fas fa-times"></i>
976
  </button>
977
  </div>
978
 
979
  <div class="drawer-body">
980
- <form id="editProductForm">
981
  <div class="form-grid">
982
  <!-- 基本信息 -->
983
- <div class="form-group form-full-width">
984
- <label class="form-label">产品名称</label>
985
- <input type="text" class="form-control" id="editProductName" placeholder="输入产品名称" required>
986
  </div>
987
 
988
  <div class="form-group">
989
- <label class="form-label">产品型号</label>
990
- <input type="text" class="form-control" id="editProductModel" placeholder="输入产品型号" required>
991
  </div>
992
 
993
  <div class="form-group">
994
- <label class="form-label">产品类别</label>
995
- <select class="form-control" id="editProductCategory" required>
996
- <option value="">选择类别</option>
997
- <option value="electronics">电子产品</option>
998
- <option value="home">家居用品</option>
999
- <option value="office">办公设备</option>
1000
- <option value="clothing">服装鞋帽</option>
1001
  </select>
1002
  </div>
1003
 
1004
  <div class="form-group">
1005
- <label class="form-label">产品品牌</label>
1006
- <input type="text" class="form-control" id="editProductBrand" placeholder="输入品牌名称">
 
 
 
 
 
 
 
 
 
1007
  </div>
1008
 
1009
- <!-- 价格和库存 -->
1010
  <div class="form-group">
1011
- <label class="form-label">单价</label>
1012
- <div class="relative">
1013
- <span class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500">¥</span>
1014
- <input type="number" class="form-control pl-8" id="editProductPrice" placeholder="0.00" min="0" step="0.01" required>
1015
- </div>
1016
  </div>
1017
 
1018
  <div class="form-group">
1019
- <label class="form-label">当前库存</label>
1020
- <input type="number" class="form-control" id="editProductStock" placeholder="0", min="0" required>
1021
  </div>
1022
 
1023
- <!-- 状态和SKU -->
1024
  <div class="form-group">
1025
- <label class="form-label">产品状态</label>
1026
- <select class="form-control" id="editProductStatus" required>
1027
- <option value="active">在售</option>
1028
- <option value="inactive">停售</option>
1029
- <option value="pending">待审核</option>
1030
- </select>
1031
  </div>
1032
 
1033
  <div class="form-group">
1034
- <label class="form-label">SKU编码</label>
1035
- <input type="text" class="form-control" id="editProductSKU" placeholder="自动生成" readonly>
 
 
 
 
 
 
1036
  </div>
1037
 
1038
- <!-- 图片上传 -->
1039
- <div class="form-group form-full-width">
1040
- <label class="form-label">产品图片</label>
1041
- <div class="image-upload" id="editImageUpload">
1042
- <div class="flex flex-col items-center justify-center">
1043
- <i class="fas fa-cloud-upload-alt text-3xl text-blue-500 mb-2"></i>
1044
- <p class="text-sm text-gray-600">拖放图片到此处或点击上传</p>
1045
- <p class="text-xs text-gray-400 mt-1">支持JPG, PNG格式，最大5MB</p>
1046
- </div>
1047
- <input type="file" id="editProductImages" class="hidden" accept="image/*" multiple>
1048
- </div>
1049
- <div class="image-preview" id="editImagePreview"></div>
1050
  </div>
1051
 
1052
- <!-- 产品描述 -->
1053
- <div class="form-group form-full-width">
1054
- <label class="form-label">产品描述</label>
1055
- <textarea class="form-control form-textarea" id="editProductDescription" placeholder="输入产品详细描述..."></textarea>
1056
  </div>
1057
 
1058
- <!-- 规格参数 -->
1059
  <div class="form-group form-full-width">
1060
- <label class="form-label">规格参数</label>
1061
- <div class="space-y-2">
1062
- <div class="flex space-x-2">
1063
- <input type="text" class="form-control flex-1" id="editSpecName" placeholder="参数名称">
1064
- <input type="text" class="form-control flex-1" id="editSpecValue" placeholder="参数值">
1065
- <button type="button" id="addSpecBtn" class="px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded">
1066
- <i class="fas fa-plus"></i>
1067
- </button>
1068
  </div>
1069
- <div class="border border-gray-200 rounded p-2" id="editSpecList">
1070
- <div class="flex justify-between items-center py-1 px-2 bg-gray-50 rounded">
1071
- <span class="text-sm">重量</span>
1072
- <span class="text-sm">500g</span>
1073
- <button type="button" class="text-red-400 hover:text-red-600 remove-spec">
1074
- <i class="fas fa-times"></i>
1075
- </button>
1076
- </div>
1077
- <div class="flex justify-between items-center py-1 px-2">
1078
- <span class="text-sm">尺寸</span>
1079
- <span class="text-sm">20x30x5cm</span>
1080
- <button type="button" class="text-red-400 hover:text-red-600 remove-spec">
1081
- <i class="fas fa-times"></i>
1082
- </button>
1083
- </div>
1084
  </div>
1085
  </div>
1086
  </div>
 
 
 
 
 
 
1087
  </div>
1088
  </form>
1089
  </div>
1090
 
1091
  <div class="drawer-footer">
1092
- <button type="button" id="cancelEditBtn" class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50">
1093
  取消
1094
  </button>
1095
- <button type="submit" form="editProductForm" class="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg">
1096
  保存更改
1097
  </button>
1098
  </div>
@@ -1188,348 +1299,328 @@
1188
  });
1189
  }, 100);
1190
 
1191
- // 添加产品抽屉功能
1192
- const addProductBtn = document.getElementById('addProductBtn');
1193
- const addProductOverlay = document.getElementById('addProductOverlay');
1194
- const addProductDrawer = document.getElementById('addProductDrawer');
1195
- const closeDrawerBtn = document.getElementById('closeDrawerBtn');
1196
- const cancelAddBtn = document.getElementById('cancelAddBtn');
1197
 
1198
  // 打开抽屉
1199
- addProductBtn.addEventListener('click', function() {
1200
- addProductOverlay.classList.add('active');
1201
- addProductDrawer.classList.add('active');
1202
  document.body.style.overflow = 'hidden';
1203
  });
1204
 
1205
  // 关闭抽屉
1206
- function closeAddDrawer() {
1207
- addProductOverlay.classList.remove('active');
1208
- addProductDrawer.classList.remove('active');
1209
  document.body.style.overflow = '';
1210
  }
1211
 
1212
- closeDrawerBtn.addEventListener('click', closeAddDrawer);
1213
- cancelAddBtn.addEventListener('click', closeAddDrawer);
1214
- addProductOverlay.addEventListener('click', closeAddDrawer);
1215
-
1216
- // 图片上传预览功能
1217
- const imageUpload = document.querySelector('.image-upload');
1218
- const productImages = document.getElementById('productImages');
1219
- const imagePreview = document.getElementById('imagePreview');
1220
-
1221
- imageUpload.addEventListener('click', function() {
1222
- productImages.click();
1223
- });
1224
-
1225
- productImages.addEventListener('change', function(e) {
1226
- const files = e.target.files;
1227
- imagePreview.innerHTML = '';
1228
-
1229
- if (files) {
1230
- Array.from(files).forEach(file => {
1231
- if (file.type.match('image.*')) {
1232
- const reader = new FileReader();
1233
-
1234
- reader.onload = function(e) {
1235
- const previewItem = document.createElement('div');
1236
- previewItem.className = 'preview-item';
1237
-
1238
- const img = document.createElement('img');
1239
- img.src = e.target.result;
1240
-
1241
- const removeBtn = document.createElement('div');
1242
- removeBtn.className = 'remove-image';
1243
- removeBtn.innerHTML = '<i class="fas fa-times text-xs"></i>';
1244
- removeBtn.addEventListener('click', function(e) {
1245
- e.stopPropagation();
1246
- previewItem.remove();
1247
- });
1248
-
1249
- previewItem.appendChild(img);
1250
- previewItem.appendChild(removeBtn);
1251
- imagePreview.appendChild(previewItem);
1252
- };
1253
-
1254
- reader.readAsDataURL(file);
1255
- }
1256
- });
1257
- }
1258
- });
1259
-
1260
- // 拖放上传功能
1261
- imageUpload.addEventListener('dragoover', function(e) {
1262
- e.preventDefault();
1263
- this.classList.add('border-blue-500', 'bg-blue-50');
1264
- });
1265
-
1266
- imageUpload.addEventListener('dragleave', function() {
1267
- this.classList.remove('border-blue-500', 'bg-blue-50');
1268
- });
1269
-
1270
- imageUpload.addEventListener('drop', function(e) {
1271
- e.preventDefault();
1272
- this.classList.remove('border-blue-500', 'bg-blue-50');
1273
-
1274
- const files = e.dataTransfer.files;
1275
- productImages.files = files;
1276
-
1277
- // 触发change事件
1278
- const event = new Event('change');
1279
- productImages.dispatchEvent(event);
1280
- });
1281
 
1282
  // 表单提交
1283
- document.getElementById('addProductForm').addEventListener('submit', function(e) {
1284
  e.preventDefault();
1285
  // 这里可以添加表单提交逻辑
1286
- alert('产品添加成功！');
1287
- closeAddDrawer();
1288
  });
1289
 
1290
- // 编辑产品功能
1291
- const editProductOverlay = document.getElementById('editProductOverlay');
1292
- const editProductDrawer = document.getElementById('editProductDrawer');
1293
- const closeEditDrawerBtn = document.getElementById('closeEditDrawerBtn');
1294
- const cancelEditBtn = document.getElementById('cancelEditBtn');
1295
- const editProductImages = document.getElementById('editProductImages');
1296
- const editImagePreview = document.getElementById('editImagePreview');
1297
- const editImageUpload = document.getElementById('editImageUpload');
1298
- const editSpecList = document.getElementById('editSpecList');
1299
- const addSpecBtn = document.getElementById('addSpecBtn');
1300
 
1301
- // 模拟产品数据
1302
- const productData = {
1303
- 'P10001': {
1304
- name: '智能手表 Pro',
1305
- model: 'SW-2022',
1306
- category: 'electronics',
1307
- brand: '智能科技',
1308
- price: 1299,
1309
- stock: 245,
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1310
  status: 'active',
1311
- sku: 'SKU-10001',
1312
- description: '这是一款高端智能手表，具有心率监测、GPS定位、防水等功能。',
1313
- images: ['https://via.placeholder.com/400x400?text=智能手表'],
1314
- specs: [
1315
- {name: '重量', value: '500g'},
1316
- {name: '尺寸', value: '20x30x5cm'},
1317
- {name: '材质', value: '铝合金'},
1318
- {name: '防水等级', value: 'IP68'}
 
 
1319
  ]
1320
  },
1321
- 'P10002': {
1322
- name: '无线蓝牙耳机',
1323
- model: 'BT-极2022',
1324
- category: 'electronics',
1325
- brand: '音频科技',
1326
- price: 399,
1327
- stock: 189,
1328
  status: 'active',
1329
- sku: 'SKU-10002',
1330
- description: '高保真音质，降噪功能，蓝牙5.0，续航时间长达8小时。',
1331
- images: ['https://via.placeholder.com/400x400?text=蓝牙耳机'],
1332
- specs: [
1333
- {name: '重量', value: '50g'},
1334
- {name: '尺寸', value: '5x5x3cm'},
1335
- {name: '蓝牙版本', value: '5.0'},
1336
- {name: '续航时间', value: '8小时'}
 
 
1337
  ]
1338
  }
1339
  };
1340
 
 
 
 
 
 
 
 
 
 
 
1341
  // 打开编辑抽屉
1342
- document.querySelectorAll('.edit-product-btn').forEach(btn => {
1343
  btn.addEventListener('click', function() {
1344
- const productId = this.getAttribute('data-id');
1345
- const product = productData[productId] || {};
1346
 
1347
  // 填充表单数据
1348
- document.getElementById('editProductName').value = product.name || '';
1349
- document.getElementById('editProductModel').value = product.model || '';
1350
- document.getElementById('editProductCategory').value = product.category || '';
1351
- document.getElementById('editProductBrand').value = product.brand || '';
1352
- document.getElementById('editProductPrice').value = product.price || '';
1353
- document.getElementById('editProductStock').value = product.stock || '';
1354
- document.getElementById('editProductStatus').value = product.status || 'active';
1355
- document.getElementById('editProductSKU').value = product.sku || '';
1356
- document.getElementById('editProductDescription').value = product.description || '';
 
 
 
1357
 
1358
- // 填充图片
1359
- editImagePreview.innerHTML = '';
1360
- if (product.images && product.images.length > 0) {
1361
- product.images.forEach(imageUrl => {
1362
- const previewItem = document.createElement('div');
1363
- previewItem.className = 'preview-item';
1364
-
1365
- const img = document.createElement('img');
1366
- img.src = imageUrl;
1367
-
1368
- const removeBtn = document.createElement('div');
1369
- removeBtn.className = 'remove-image';
1370
- removeBtn.innerHTML = '<i class="fas fa-times text-xs"></i>';
1371
- removeBtn.addEventListener('click', function(e) {
1372
- e.stopPropagation();
1373
- previewItem.remove();
1374
- });
1375
-
1376
- previewItem.appendChild(img);
1377
- previewItem.appendChild(removeBtn);
1378
- editImagePreview.appendChild(previewItem);
1379
- });
1380
- }
1381
 
1382
- // 填充规格参数
1383
- editSpecList.innerHTML = '';
1384
- if (product.specs && product.specs.length > 0) {
1385
- product.specs.forEach(spec => {
1386
- const specItem = document.createElement('div');
1387
- specItem.className = 'flex justify-between items-center py-1 px-2';
1388
-
1389
- const nameSpan = document.createElement('span');
1390
- nameSpan.className = 'text-sm';
1391
- nameSpan.textContent = spec.name;
1392
 
1393
- const valueSpan = document.createElement('span');
1394
- valueSpan.className = 'text-sm';
1395
- valueSpan.textContent = spec.value;
1396
-
1397
- const removeBtn = document.createElement('button');
1398
- removeBtn.type = 'button';
1399
- removeBtn.className = 'text-red-400 hover:text-red-600 remove-spec';
1400
- removeBtn.innerHTML = '<i class="fas fa-times"></i>';
1401
- removeBtn.addEventListener('click', function() {
1402
- specItem.remove();
1403
  });
1404
 
1405
- specItem.appendChild(nameSpan);
1406
- specItem.appendChild(valueSpan);
1407
- specItem.appendChild(removeBtn);
1408
- editSpecList.appendChild(specItem);
1409
  });
1410
  }
1411
 
1412
  // 打开抽屉
1413
- editProductOverlay.classList.add('active');
1414
- editProductDrawer.classList.add('active');
1415
  document.body.style.overflow = 'hidden';
1416
  });
1417
  });
1418
 
1419
  // 关闭编辑抽屉
1420
- function closeEditDrawer() {
1421
- editProductOverlay.classList.remove('active');
1422
- editProductDrawer.classList.remove('active');
1423
  document.body.style.overflow = '';
1424
  }
1425
 
1426
- closeEditDrawerBtn.addEventListener('click', closeEditDrawer);
1427
- cancelEditBtn.addEventListener('click', closeEditDrawer);
1428
- editProductOverlay.addEventListener('click', closeEditDrawer);
1429
 
1430
- // 编辑图片上传预览功能
1431
- editImageUpload.addEventListener('click', function() {
1432
- editProductImages.click();
1433
- });
1434
-
1435
- editProductImages.addEventListener('change', function(e) {
1436
- const files = e.target.files;
1437
 
1438
- if (files) {
1439
- Array.from(files).forEach(file => {
1440
- if (file.type.match('image.*')) {
1441
- const reader = new FileReader();
1442
-
1443
- reader.onload = function(e) {
1444
- const previewItem = document.createElement('div');
1445
- previewItem.className = 'preview-item';
1446
-
1447
- const img = document.createElement('img');
1448
- img.src = e.target.result;
 
 
 
 
 
 
 
 
 
1449
 
1450
- const removeBtn = document.createElement('div');
1451
- removeBtn.className = 'remove-image';
1452
- removeBtn.innerHTML = '<i class="fas fa-times text-xs"></i>';
1453
- removeBtn.addEventListener('click', function(e) {
1454
  e.stopPropagation();
1455
- previewItem.remove();
1456
  });
1457
 
1458
- previewItem.appendChild(img);
1459
- previewItem.appendChild(removeBtn);
1460
- editImagePreview.appendChild(previewItem);
1461
- };
1462
 
1463
- reader.readAsDataURL(file);
1464
- }
 
 
 
1465
  });
1466
- }
1467
- });
1468
-
1469
- // 编辑拖放上传功能
1470
- editImageUpload.addEventListener('dragover', function(e) {
1471
- e.preventDefault();
1472
- this.classList.add('border-blue-500', 'bg-blue-50');
1473
- });
1474
-
1475
- editImageUpload.addEventListener('dragleave', function() {
1476
- this.classList.remove('border-blue-500', 'bg-blue-50');
1477
- });
1478
-
1479
- editImageUpload.addEventListener('drop', function(e) {
1480
- e.preventDefault();
1481
- this.classList.remove('border-blue-500', 'bg-blue-50');
1482
 
1483
- const files = e.dataTransfer.files;
1484
- editProductImages.files = files;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1485
 
1486
- // 触发change事件
1487
- const event = new Event('change');
1488
- editProductImages.dispatchEvent(event);
1489
- });
 
 
 
1490
 
1491
- // 添加规格参数
1492
- addSpecBtn.addEventListener('click', function() {
1493
- const specName = document.getElementById('editSpecName').value;
1494
- const specValue = document.getElementById('editSpecValue').value;
1495
-
1496
- if (specName && specValue) {
1497
- const specItem = document.createElement('div');
1498
- specItem.className = 'flex justify-between items-center py-1 px-2';
1499
-
1500
- const nameSpan = document.createElement('span');
1501
- nameSpan.className = 'text-sm';
1502
- nameSpan.textContent = specName;
1503
-
1504
- const valueSpan = document.createElement('span');
1505
- valueSpan.className = 'text-sm';
1506
- valueSpan.textContent = specValue;
1507
-
1508
- const removeBtn = document.createElement('button');
1509
- removeBtn.type = 'button';
1510
- removeBtn.className = 'text-red-400 hover:text-red-600 remove-spec';
1511
- removeBtn.innerHTML = '<i class="fas fa-times"></i>';
1512
- removeBtn.addEventListener('click', function() {
1513
- specItem.remove();
1514
- });
1515
-
1516
- specItem.appendChild(nameSpan);
1517
- specItem.appendChild(valueSpan);
1518
- specItem.appendChild(removeBtn);
1519
- editSpecList.appendChild(specItem);
1520
-
1521
- // 清空输入框
1522
- document.getElementById('editSpecName').value = '';
1523
- document.getElementById('editSpecValue').value = '';
1524
- }
1525
- });
1526
 
1527
  // 表单提交
1528
- document.getElementById('editProductForm').addEventListener('submit', function(e) {
1529
  e.preventDefault();
1530
  // 这里可以添加表单提交逻辑
1531
- alert('产品信息已更新！');
1532
- closeEditDrawer();
1533
  });
1534
 
1535
  // 二级菜单功能
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>仓库管理 - 仓储管理系统</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
10
+ /* 保持之前的所有样式不变 */
11
  .custom-scrollbar::-webkit-scrollbar {
12
  width: 6px;
13
  }
 
332
  flex-wrap: wrap;
333
  gap: 1rem;
334
  margin-top: 1rem;
335
+ }
336
 
337
  .preview-item {
338
  position: relative;
 
413
  .has-submenu.active > .menu-item::after {
414
  transform: translateY(-50%) rotate(180deg);
415
  }
416
+
417
+ /* 新增：仓库管理特定样式 */
418
+ .warehouse-badge {
419
+ display: inline-block;
420
+ padding: 2px 8px;
421
+ border-radius: 12px;
422
+ font-size: 12px;
423
+ font-weight: 600;
424
+ }
425
+
426
+ .warehouse-domestic {
427
+ background-color: #ebf8ff;
428
+ color: #3182ce;
429
+ }
430
+
431
+ .warehouse-overseas {
432
+ background-color: #fff5f7;
433
+ color: #d53f8c;
434
+ }
435
+
436
+ .warehouse-disabled {
437
+ background-color: #f7fafc;
438
+ color: #a0aec0;
439
+ }
440
+
441
+ .tab-item {
442
+ padding: 0.75rem 1rem;
443
+ cursor: pointer;
444
+ border-bottom: 2px solid transparent;
445
+ transition: all 0.2s;
446
+ }
447
+
448
+ .tab-item.active {
449
+ border-bottom-color: #4299e1;
450
+ color: #4299e1;
451
+ font-weight: 500;
452
+ }
453
+
454
+ .tab-item:hover:not(.active) {
455
+ border-bottom-color: #cbd5e0;
456
+ }
457
+
458
+ .user-tag {
459
+ display: inline-flex;
460
+ align-items: center;
461
+ padding: 0.25rem 0.5rem;
462
+ background-color: #ebf4ff;
463
+ border-radius: 9999px;
464
+ font-size: 0.75rem;
465
+ color: #3182ce;
466
+ margin-right: 0.25rem;
467
+ margin-bottom: 0.25rem;
468
+ }
469
+
470
+ .user-tag-remove {
471
+ margin-left: 0.25rem;
472
+ cursor: pointer;
473
+ }
474
+
475
+ .user-select-dropdown {
476
+ position: absolute;
477
+ width: 100%;
478
+ max-height: 200px;
479
+ overflow-y: auto;
480
+ background-color: white;
481
+ border: 1px solid #e2e8f0;
482
+ border-radius: 0.375rem;
483
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
484
+ z-index: 10;
485
+ display: none;
486
+ }
487
+
488
+ .user-select-item {
489
+ padding: 0.5rem 1rem;
490
+ cursor: pointer;
491
+ }
492
+
493
+ .user-select-item:hover {
494
+ background-color: #f7fafc;
495
+ }
496
+
497
+ /* 新增：配置步骤指示器 */
498
+ .config-steps {
499
+ display: flex;
500
+ justify-content: space-between;
501
+ margin-bottom: 2rem;
502
+ position: relative;
503
+ }
504
+
505
+ .config-steps::before {
506
+ content: '';
507
+ position: absolute;
508
+ top: 50%;
509
+ left: 0;
510
+ right: 0;
511
+ height: 1px;
512
+ background-color: #e2e8f0;
513
+ z-index: 1;
514
+ }
515
+
516
+ .step-item {
517
+ display: flex;
518
+ flex-direction: column;
519
+ align-items: center;
520
+ position: relative;
521
+ z-index: 2;
522
+ }
523
+
524
+ .step-number {
525
+ width: 2.5rem;
526
+ height: 2.5rem;
527
+ border-radius: 50%;
528
+ display: flex;
529
+ align-items: center;
530
+ justify-content: center;
531
+ margin-bottom: 0.5rem;
532
+ font-weight: 600;
533
+ }
534
+
535
+ .step-number.active {
536
+ background-color: #4299e1;
537
+ color: white;
538
+ }
539
+
540
+ .step-number.completed {
541
+ background-color: #38a169;
542
+ color: white;
543
+ }
544
+
545
+ .step-number.inactive {
546
+ background-color: #e2e8f0;
547
+ color: #718096;
548
+ }
549
+
550
+ .step-label {
551
+ font-size: 0.875rem;
552
+ color: #4a5568;
553
+ text-align: center;
554
+ }
555
+
556
+ .step-label.active {
557
+ color: #2b6cb0;
558
+ font-weight: 500;
559
+ }
560
+
561
+ .step-label.completed {
562
+ color: #38a169;
563
+ }
564
  </style>
565
  </head>
566
  <body class="bg-gray-50 h-screen overflow-hidden">
 
649
  <i class="menu-icon fas fa-tachometer-alt mr-3 text-blue-500"></i>
650
  <span>Dashboard</span>
651
  </div>
652
+ <div class="menu-item flex items-center px-6 py-3 cursor-pointer rounded-md my-1 mx-2">
653
  <i class="menu-icon fas fa-boxes mr-3 text-green-500"></i>
654
  <span>产品管理</span>
655
  </div>
656
 
657
  <!-- 仓储管理菜单（添加二级菜单） -->
658
+ <div class="has-submenu active">
659
  <div class="menu-item flex items-center px-6 py-3 cursor-pointer rounded-md my-1 mx-2">
660
  <i class="menu-icon fas fa-warehouse mr-3 text-purple-500"></i>
661
  <span>仓储管理</span>
662
  </div>
663
+ <div class="submenu active">
664
+ <div class="submenu-item active flex items-center">
665
  <i class="fas fa-building mr-3 text-purple-400"></i>
666
  <span>仓库管理</span>
667
  </div>
 
707
  </div>
708
  </aside>
709
 
710
+ <!-- 主内容区 - 仓库管理页面 -->
711
  <main class="main-content flex-1 overflow-hidden">
712
  <div class="product-content h-full">
 
713
  <div class="product-container h-full flex flex-col">
714
  <!-- 标题和操作按钮 -->
715
  <div class="flex flex-col md:flex-row md:items-center md:justify-between p-6 pb-0">
716
+ <h2 class="text-xl font-semibold text-gray-800 mb-4 md:mb-0">仓库管理</h2>
717
  <div class="flex space-x-3">
718
+ <button id="addWarehouseBtn" class="flex items-center px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition-colors">
719
  <i class="fas fa-plus mr-2"></i>
720
+ 添加仓库
721
  </button>
722
  <button class="flex items-center px-4 py-2 bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 rounded-lg transition-colors">
723
  <i class="fas fa-download mr-2"></i>
 
726
  </div>
727
  </div>
728
 
729
+ <!-- 配置步骤指示器 -->
730
+ <div class="p-6">
731
+ <div class="config-steps">
732
+ <div class="step-item">
733
+ <div class="step-number active">1</div>
734
+ <div class="step-label active">仓库配置</div>
735
+ </div>
736
+ <div class="step-item">
737
+ <div class="step-number inactive">2</div>
738
+ <div class="step-label">库区配置</div>
739
+ </div>
740
+ <div class="step-item">
741
+ <div class="step-number inactive">3</div>
742
+ <div class="step-label">库位配置</div>
743
+ </div>
744
+ <div class="step-item">
745
+ <div class="step-number inactive">4</div>
746
+ <div class="step-label">托盘配置</div>
747
+ </div>
748
+ </div>
749
+ </div>
750
+
751
  <!-- 搜索和筛选区域 -->
752
+ <div class="flex flex-col md:flex-row md:items-center md:justify-between p-6 pt-0">
753
  <div class="relative mb-4 md:mb-0 md:w-64">
754
+ <input type="text" placeholder="搜索仓库..." class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
755
  <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
756
  </div>
757
  <div class="flex space-x-3">
758
  <select class="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
759
+ <option>所有类型</option>
760
+ <option>国内仓</option>
761
+ <option>海外仓</option>
 
 
762
  </select>
763
  <select class="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
764
  <option>所有状态</option>
765
+ <option>启用</option>
766
+ <option>禁用</option>
 
767
  </select>
768
  <button class="px-4 py-2 bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 rounded-lg transition-colors">
769
  <i class="fas fa-filter mr-2"></i>
 
772
  </div>
773
  </div>
774
 
775
+ <!-- 仓库表格 -->
776
  <div class="table-container px-6">
777
  <table class="min-w-full product-table">
778
  <thead>
779
  <tr>
780
+ <th class="table-cell table-cell-id">仓库ID</th>
781
+ <th class="table-cell table-cell-name">仓库名称</th>
782
+ <th class="table-cell table-cell-category">类型</th>
783
+ <th class="table-cell">地址</th>
784
+ <th class="table-cell">负责人</th>
785
  <th class="table-cell table-cell-status">状态</th>
786
  <th class="table-cell table-cell-actions">操作</th>
787
  </tr>
788
  </thead>
789
  <tbody class="bg-white divide-y divide-gray-200">
790
+ <!-- 仓库行1 -->
791
  <tr>
792
+ <td class="table-cell table-cell-id">WH10001</td>
793
  <td class="table-cell table-cell-name">
794
  <div class="flex items-center">
795
+ <i class="fas fa-warehouse mr-3 text-blue-500"></i>
796
  <div>
797
+ <div class="text-sm font-medium text-gray-900">上海中心仓库</div>
798
+ <div class="text-xs text-gray-500">主仓库</div>
799
  </div>
800
  </div>
801
  </td>
802
+ <td class="table-cell table-cell-category">
803
+ <span class="warehouse-badge warehouse-domestic">国内仓</span>
 
 
 
804
  </td>
805
+ <td class="table-cell">
806
+ <div class="text-sm text-gray-900">上海市浦东新区张江高科技园区</div>
807
+ <div class="text-xs text-gray-500">邮编: 201203</div>
808
  </td>
809
+ <td class="table-cell">
810
+ <div class="flex flex-wrap">
811
+ <span class="user-tag">张三 <span class="user-tag-remove"><i class="fas fa-times"></i></span></span>
812
+ <span class="user-tag">李四 <span class="user-tag-remove"><i class="fas fa-times"></i></span></span>
 
 
 
 
 
 
 
813
  </div>
814
  </td>
 
 
 
815
  <td class="table-cell table-cell-status">
816
+ <span class="status-badge status-active">启用</span>
817
  </td>
818
  <td class="table-cell table-cell-actions">
819
+ <button class="edit-warehouse-btn text-blue-600 hover:text-blue-900 mr-3" data-id="WH10001">编辑</button>
820
+ <button class="text-red-600 hover:text-red-900">禁用</button>
821
  </td>
822
  </tr>
823
+ <!-- 仓库行2 -->
824
  <tr>
825
+ <td class="table-cell table-cell-id">WH10002</td>
826
  <td class="table-cell table-cell-name">
827
  <div class="flex items-center">
828
+ <i class="fas fa-warehouse mr-3 text-green-500"></i>
829
  <div>
830
+ <div class="text-sm font-medium text-gray-900">北京分仓</div>
831
+ <div class="text-xs text-gray-500">华北区域</div>
832
  </div>
833
  </div>
834
  </td>
835
+ <td class="table-cell table-cell-category">
836
+ <span class="warehouse-badge warehouse-domestic">国内仓</span>
 
 
 
837
  </td>
838
+ <td class="table-cell">
839
+ <div class="text-sm text-gray-900">北京市海淀区中关村科技园</div>
840
+ <div class="text-xs text-gray-500">邮编: 100080</div>
841
  </td>
842
+ <td class="table-cell">
843
+ <div class="flex flex-wrap">
844
+ <span class="user-tag">王五 <span class="user-tag-remove"><i class="fas fa-times"></i></span></span>
 
 
 
 
 
 
 
 
845
  </div>
846
  </td>
 
 
 
847
  <td class="table-cell table-cell-status">
848
+ <span class="status-badge status-active">启用</span>
849
  </td>
850
  <td class="table-cell table-cell-actions">
851
+ <button class="edit-warehouse-btn text-blue-600 hover:text-blue-900 mr-3" data-id="WH10002">编辑</button>
852
+ <button class="text-red-600 hover:text-red-900">禁用</button>
853
  </td>
854
  </tr>
855
+ <!-- 仓库行3 -->
856
  <tr>
857
+ <td class="table-cell table-cell-id">WH10003</td>
858
  <td class="table-cell table-cell-name">
859
  <div class="flex items-center">
860
+ <i class="fas fa-warehouse mr-3 text-yellow-500"></i>
861
  <div>
862
+ <div class="text-sm font-medium text-gray-900">广州分仓</div>
863
+ <div class="text-xs text-gray-500">华南区域</div>
864
  </div>
865
  </div>
866
  </td>
867
+ <td class="table-cell table-cell-category">
868
+ <span class="warehouse-badge warehouse-domestic">国内仓</span>
 
 
 
869
  </td>
870
+ <td class="table-cell">
871
+ <div class="text-sm text-gray-900">广州市天河区珠江新城</div>
872
+ <div class="text-xs text-gray-500">邮编: 510623</div>
873
  </td>
874
+ <td class="table-cell">
875
+ <div class="flex flex-wrap">
876
+ <span class="user-tag">赵六 <span class="user-tag-remove"><i class="fas fa-times"></i></span></span>
 
 
 
 
 
 
 
 
877
  </div>
878
  </td>
 
 
 
879
  <td class="table-cell table-cell-status">
880
+ <span class="status-badge status-active">启用</span>
881
  </td>
882
  <td class="table-cell table-cell-actions">
883
+ <button class="edit-warehouse-btn text-blue-600 hover:text-blue-900 mr-3" data-id="WH10003">编辑</button>
884
+ <button class="text-red-600 hover:text-red-900">禁用</button>
885
  </td>
886
  </tr>
887
+ <!-- 仓库行4 -->
888
  <tr>
889
+ <td class="table-cell table-cell-id">WH10004</td>
890
  <td class="table-cell table-cell-name">
891
  <div class="flex items-center">
892
+ <i class="fas fa-warehouse mr-3 text-red-500"></i>
893
  <div>
894
+ <div class="text-sm font-medium text-gray-900">美国洛杉矶仓</div>
895
+ <div class="text-xs text-gray-500">北美区域</div>
896
  </div>
897
  </div>
898
  </td>
899
+ <td class="table-cell table-cell-category">
900
+ <span class="warehouse-badge warehouse-overseas">海外仓</span>
901
+ </td>
902
+ <td class="table-cell">
903
+ <div class="text-sm text-gray-900">1234 Commerce St, Los Angeles, CA 90015</div>
904
+ <div class="text-xs text-gray-500">USA</div>
905
+ </td>
906
+ <td class="table-cell">
907
+ <div class="flex flex-wrap">
908
+ <span class="user-tag">John Smith <span class="user-tag-remove"><i class="fas fa-times"></i></span></span>
909
+ </div>
910
+ </td>
911
  <td class="table-cell table-cell-status">
912
+ <span class="status-badge status-active">启用</span>
913
  </td>
914
  <td class="table-cell table-cell-actions">
915
+ <button class="edit-warehouse-btn text-blue-600 hover:text-blue-900 mr-3" data-id="WH10004">编辑</button>
916
+ <button class="text-red-600 hover:text-red-900">禁用</button>
917
  </td>
918
  </tr>
919
+ <!-- 仓库行5 -->
920
  <tr>
921
+ <td class="table-cell table-cell-id">WH10005</td>
922
  <td class="table-cell table-cell-name">
923
  <div class="flex items-center">
924
+ <i class="fas fa-warehouse mr-3 text-purple-500"></i>
925
  <div>
926
+ <div class="text-sm font-medium text-gray-900">德国法兰克福仓</div>
927
+ <div class="text-xs text-gray-500">欧洲区域</div>
928
  </div>
929
  </div>
930
  </td>
931
+ <td class="table-cell table-cell-category">
932
+ <span class="warehouse-badge warehouse-overseas">海外仓</span>
933
+ </td>
934
+ <td class="table-cell">
935
+ <div class="text-sm text-gray-900">Mergenthalerallee 10, 65760 Eschborn</div>
936
+ <div class="text-xs text-gray-500">Germany</div>
937
+ </td>
938
+ <td class="table-cell">
939
+ <div class="flex flex-wrap">
940
+ <span class="user-tag">Michael <span class="user-tag-remove"><i class="fas fa-times"></i></span></span>
941
+ </div>
942
+ </td>
943
  <td class="table-cell table-cell-status">
944
+ <span class="status-badge status-inactive">禁用</span>
945
  </td>
946
  <td class="table-cell table-cell-actions">
947
+ <button class="edit-warehouse-btn text-blue-600 hover:text-blue-900 mr-3" data-id="WH10005">编辑</button>
948
+ <button class="text-green-600 hover:text-green-900">启用</button>
949
  </td>
950
  </tr>
951
  </tbody>
 
955
  <!-- 分页控件 -->
956
  <div class="flex items-center justify-between p-6 border-t border-gray-200">
957
  <div class="text-sm text-gray-500">
958
+ 显示 <span class="font-medium">1</span> 到 <span class="font-medium">5</span> 条，共 <span class="font-medium">12</span> 条记录
959
  </div>
960
  <div class="flex space-x-1">
961
  <button class="pagination-btn px-3 py-1 border border-gray-300 rounded-lg disabled">
 
964
  <button class="pagination-btn px-3 py-1 border border-gray-300 rounded-lg bg-blue-500 text-white">1</button>
965
  <button class="pagination-btn px-3 py-1 border border-gray-300 rounded-lg hover:bg-gray-100">2</button>
966
  <button class="pagination-btn px-3 py-1 border border-gray-300 rounded-lg hover:bg-gray-100">3</button>
 
 
967
  <button class="pagination-btn px-3 py-1 border border-gray-300 rounded-lg">
968
  <i class="fas fa-angle-right"></i>
969
  </button>
 
975
  </div>
976
  </div>
977
 
978
+ <!-- 添加仓库抽屉 -->
979
+ <div class="drawer-overlay" id="addWarehouseOverlay"></div>
980
+ <div class="drawer" id="addWarehouseDrawer">
981
  <div class="drawer-header">
982
+ <h3 class="text-lg font-semibold text-gray-800">添加新仓库</h3>
983
+ <button id="closeWarehouseDrawerBtn" class="text-gray-400 hover:text-gray-500">
984
  <i class="fas fa-times"></i>
985
  </button>
986
  </div>
987
 
988
  <div class="drawer-body">
989
+ <form id="addWarehouseForm">
990
  <div class="form-grid">
991
  <!-- 基本信息 -->
992
+ <div class="form-group">
993
+ <label class="form-label">仓库名称</label>
994
+ <input type="text" class="form-control" placeholder="输入仓库名称" required>
995
  </div>
996
 
997
  <div class="form-group">
998
+ <label class="form-label">仓库代码</label>
999
+ <input type="text" class="form-control" placeholder="自动生成" readonly>
1000
  </div>
1001
 
1002
  <div class="form-group">
1003
+ <label class="form-label">仓库类型</label>
1004
  <select class="form-control" required>
1005
+ <option value="">选择类型</option>
1006
+ <option value="domestic">国内仓</option>
1007
+ <option value="overseas">海外仓</option>
 
 
1008
  </select>
1009
  </div>
1010
 
1011
  <div class="form-group">
1012
+ <label class="form-label">仓库状态</label>
1013
+ <select class="form-control" required>
1014
+ <option value="active">启用</option>
1015
+ <option value="inactive">禁用</option>
1016
+ </select>
1017
+ </div>
1018
+
1019
+ <!-- 地址信息 -->
1020
+ <div class="form-group form-full-width">
1021
+ <label class="form-label">详细地址</label>
1022
+ <input type="text" class="form-control" placeholder="输入详细地址" required>
1023
  </div>
1024
 
 
1025
  <div class="form-group">
1026
+ <label class="form-label">所在省份</label>
1027
+ <input type="text" class="form-control" placeholder="输入省份">
 
 
 
1028
  </div>
1029
 
1030
  <div class="form-group">
1031
+ <label class="form-label">所在城市</label>
1032
+ <input type="text" class="form-control" placeholder="输入城市">
1033
  </div>
1034
 
 
1035
  <div class="form-group">
1036
+ <label class="form-label">邮政编码</label>
1037
+ <input type="text" class="form-control" placeholder="输入邮编">
 
 
 
 
1038
  </div>
1039
 
1040
  <div class="form-group">
1041
+ <label class="form-label">国家/地区</label>
1042
+ <select class="form-control">
1043
+ <option value="CN">中国</option>
1044
+ <option value="US">美国</option>
1045
+ <option value="DE">德国</option>
1046
+ <option value="JP">日本</option>
1047
+ <option value="UK">英国</option>
1048
+ </select>
1049
  </div>
1050
 
1051
+ <!-- 联系信息 -->
1052
+ <div class="form-group">
1053
+ <label class="form-label">联系人</label>
1054
+ <input type="text" class="form-control" placeholder="输入联系人姓名">
 
 
 
 
 
 
 
 
1055
  </div>
1056
 
1057
+ <div class="form-group">
1058
+ <label class="form-label">联系电话</label>
1059
+ <input type="tel" class="form-control" placeholder="输入联系电话">
 
1060
  </div>
1061
 
1062
+ <!-- 用户权限 -->
1063
  <div class="form-group form-full-width">
1064
+ <label class="form-label">仓库管理员</label>
1065
+ <div class="relative">
1066
+ <div class="flex flex-wrap border border-gray-300 rounded-lg p-2 min-h-10" id="userTagsContainer">
1067
+ <!-- 用户标签将在这里动态添加 -->
 
 
 
 
1068
  </div>
1069
+ <input type="text" class="form-control absolute opacity-0" id="userSearchInput" placeholder="搜索用户...">
1070
+ <div class="user-select-dropdown" id="userSelectDropdown">
1071
+ <!-- 用户选择项将在这里动态添加 -->
 
 
 
 
 
 
 
 
 
 
 
 
1072
  </div>
1073
  </div>
1074
  </div>
1075
+
1076
+ <!-- 仓库描述 -->
1077
+ <div class="form-group form-full-width">
1078
+ <label class="form-label">仓库描述</label>
1079
+ <textarea class="form-control form-textarea" placeholder="输入仓库描述信息..."></textarea>
1080
+ </div>
1081
  </div>
1082
  </form>
1083
  </div>
1084
 
1085
  <div class="drawer-footer">
1086
+ <button type="button" id="cancelAddWarehouseBtn" class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50">
1087
  取消
1088
  </button>
1089
+ <button type="submit" form="addWarehouseForm" class="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg">
1090
+ 保存仓库
1091
  </button>
1092
  </div>
1093
  </div>
1094
 
1095
+ <!-- 编辑仓库抽屉 -->
1096
+ <div class="drawer-overlay" id="editWarehouseOverlay"></div>
1097
+ <div class="drawer" id="editWarehouseDrawer">
1098
  <div class="drawer-header">
1099
+ <h3 class="text-lg font-semibold text-gray-800">编辑仓库</h3>
1100
+ <button id="closeEditWarehouseDrawerBtn" class="text-gray-400 hover:text-gray-500">
1101
  <i class="fas fa-times"></i>
1102
  </button>
1103
  </div>
1104
 
1105
  <div class="drawer-body">
1106
+ <form id="editWarehouseForm">
1107
  <div class="form-grid">
1108
  <!-- 基本信息 -->
1109
+ <div class="form-group">
1110
+ <label class="form-label">仓库名称</label>
1111
+ <input type="text" class="form-control" id="editWarehouseName" placeholder="输入仓库名称" required>
1112
  </div>
1113
 
1114
  <div class="form-group">
1115
+ <label class="form-label">仓库代码</label>
1116
+ <input type="text" class="form-control" id="editWarehouseCode" placeholder="自动生成" readonly>
1117
  </div>
1118
 
1119
  <div class="form-group">
1120
+ <label class="form-label">仓库类型</label>
1121
+ <select class="form-control" id="editWarehouseType" required>
1122
+ <option value="">选择类型</option>
1123
+ <option value="domestic">国内仓</option>
1124
+ <option value="overseas">海外仓</option>
 
 
1125
  </select>
1126
  </div>
1127
 
1128
  <div class="form-group">
1129
+ <label class="form-label">仓库状态</label>
1130
+ <select class="form-control" id="editWarehouseStatus" required>
1131
+ <option value="active">启用</option>
1132
+ <option value="inactive">禁用</option>
1133
+ </select>
1134
+ </div>
1135
+
1136
+ <!-- 地址信息 -->
1137
+ <div class="form-group form-full-width">
1138
+ <label class="form-label">详细地址</label>
1139
+ <input type="text" class="form-control" id="editWarehouseAddress" placeholder="输入详细地址" required>
1140
  </div>
1141
 
 
1142
  <div class="form-group">
1143
+ <label class="form-label">所在省份</label>
1144
+ <input type="text" class="form-control" id="editWarehouseProvince" placeholder="输入省份">
 
 
 
1145
  </div>
1146
 
1147
  <div class="form-group">
1148
+ <label class="form-label">所在城市</label>
1149
+ <input type="text" class="form-control" id="editWarehouseCity" placeholder="输入城市">
1150
  </div>
1151
 
 
1152
  <div class="form-group">
1153
+ <label class="form-label">邮政编码</label>
1154
+ <input type="text" class="form-control" id="editWarehousePostcode" placeholder="输入邮编">
 
 
 
 
1155
  </div>
1156
 
1157
  <div class="form-group">
1158
+ <label class="form-label">国家/地区</label>
1159
+ <select class="form-control" id="editWarehouseCountry">
1160
+ <option value="CN">中国</option>
1161
+ <option value="US">美国</option>
1162
+ <option value="DE">德国</option>
1163
+ <option value="JP">日本</option>
1164
+ <option value="UK">英国</option>
1165
+ </select>
1166
  </div>
1167
 
1168
+ <!-- 联系信息 -->
1169
+ <div class="form-group">
1170
+ <label class="form-label">联系人</label>
1171
+ <input type="text" class="form-control" id="editWarehouseContact" placeholder="输入联系人姓名">
 
 
 
 
 
 
 
 
1172
  </div>
1173
 
1174
+ <div class="form-group">
1175
+ <label class="form-label">联系电话</label>
1176
+ <input type="tel" class="form-control" id="editWarehousePhone" placeholder="输入联系电话">
 
1177
  </div>
1178
 
1179
+ <!-- 用户权限 -->
1180
  <div class="form-group form-full-width">
1181
+ <label class="form-label">仓库管理员</label>
1182
+ <div class="relative">
1183
+ <div class="flex flex-wrap border border-gray-300 rounded-lg p-2 min-h-10" id="editUserTagsContainer">
1184
+ <!-- 用户标签将在这里动态添加 -->
 
 
 
 
1185
  </div>
1186
+ <input type="text" class="form-control absolute opacity-0" id="editUserSearchInput" placeholder="搜索用户...">
1187
+ <div class="user-select-dropdown" id="editUserSelectDropdown">
1188
+ <!-- 用户选择项将在这里动态添加 -->
 
 
 
 
 
 
 
 
 
 
 
 
1189
  </div>
1190
  </div>
1191
  </div>
1192
+
1193
+ <!-- 仓库描述 -->
1194
+ <div class="form-group form-full-width">
1195
+ <label class="form-label">仓库描述</label>
1196
+ <textarea class="form-control form-textarea" id="editWarehouseDescription" placeholder="输入仓库描述信息..."></textarea>
1197
+ </div>
1198
  </div>
1199
  </form>
1200
  </div>
1201
 
1202
  <div class="drawer-footer">
1203
+ <button type="button" id="cancelEditWarehouseBtn" class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50">
1204
  取消
1205
  </button>
1206
+ <button type="submit" form="editWarehouseForm" class="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg">
1207
  保存更改
1208
  </button>
1209
  </div>
 
1299
  });
1300
  }, 100);
1301
 
1302
+ // 添加仓库抽屉功能
1303
+ const addWarehouseBtn = document.getElementById('addWarehouseBtn');
1304
+ const addWarehouseOverlay = document.getElementById('addWarehouseOverlay');
1305
+ const addWarehouseDrawer = document.getElementById('addWarehouseDrawer');
1306
+ const closeWarehouseDrawerBtn = document.getElementById('closeWarehouseDrawerBtn');
1307
+ const cancelAddWarehouseBtn = document.getElementById('cancelAddWarehouseBtn');
1308
 
1309
  // 打开抽屉
1310
+ addWarehouseBtn.addEventListener('click', function() {
1311
+ addWarehouseOverlay.classList.add('active');
1312
+ addWarehouseDrawer.classList.add('active');
1313
  document.body.style.overflow = 'hidden';
1314
  });
1315
 
1316
  // 关闭抽屉
1317
+ function closeAddWarehouseDrawer() {
1318
+ addWarehouseOverlay.classList.remove('active');
1319
+ addWarehouseDrawer.classList.remove('active');
1320
  document.body.style.overflow = '';
1321
  }
1322
 
1323
+ closeWarehouseDrawerBtn.addEventListener('click', closeAddWarehouseDrawer);
1324
+ cancelAddWarehouseBtn.addEventListener('click', closeAddWarehouseDrawer);
1325
+ addWarehouseOverlay.addEventListener('click', closeAddWarehouseDrawer);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1326
 
1327
  // 表单提交
1328
+ document.getElementById('addWarehouseForm').addEventListener('submit', function(e) {
1329
  e.preventDefault();
1330
  // 这里可以添加表单提交逻辑
1331
+ alert('仓库添加成功！');
1332
+ closeAddWarehouseDrawer();
1333
  });
1334
 
1335
+ // 编辑仓库功能
1336
+ const editWarehouseOverlay = document.getElementById('editWarehouseOverlay');
1337
+ const editWarehouseDrawer = document.getElementById('editWarehouseDrawer');
1338
+ const closeEditWarehouseDrawerBtn = document.getElementById('closeEditWarehouseDrawerBtn');
1339
+ const cancelEditWarehouseBtn = document.getElementById('cancelEditWarehouseBtn');
 
 
 
 
 
1340
 
1341
+ // 模拟仓库数据
1342
+ const warehouseData = {
1343
+ 'WH10001': {
1344
+ name: '上海中心仓库',
1345
+ code: 'WH10001',
1346
+ type: 'domestic',
1347
+ status: 'active',
1348
+ address: '上海市浦东新区张江高科技园区',
1349
+ province: '上海市',
1350
+ city: '浦东新区',
1351
+ postcode: '201203',
1352
+ country: 'CN',
1353
+ contact: '张经理',
1354
+ phone: '13800138000',
1355
+ description: '公司主仓库，负责全国商品调配',
1356
+ users: [
1357
+ {id: 'U1001', name: '张三'},
1358
+ {id: 'U1002', name: '李四'}
1359
+ ]
1360
+ },
1361
+ 'WH10002': {
1362
+ name: '北京分仓',
1363
+ code: 'WH10002',
1364
+ type: 'domestic',
1365
  status: 'active',
1366
+ address: '北京市海淀区中关村科技园',
1367
+ province: '北京市',
1368
+ city: '海淀区',
1369
+ postcode: '100080',
1370
+ country: 'CN',
1371
+ contact: '王经理',
1372
+ phone: '13900139000',
1373
+ description: '华北区域分仓',
1374
+ users: [
1375
+ {id: 'U1003', name: '王五'}
1376
  ]
1377
  },
1378
+ 'WH10004': {
1379
+ name: '美国洛杉矶仓',
1380
+ code: 'WH10004',
1381
+ type: 'overseas',
 
 
 
1382
  status: 'active',
1383
+ address: '1234 Commerce St, Los Angeles, CA 90015',
1384
+ province: 'California',
1385
+ city: 'Los Angeles',
1386
+ postcode: '90015',
1387
+ country: 'US',
1388
+ contact: 'John Smith',
1389
+ phone: '+1 213 555 1234',
1390
+ description: '北美区域海外仓',
1391
+ users: [
1392
+ {id: 'U2001', name: 'John Smith'}
1393
  ]
1394
  }
1395
  };
1396
 
1397
+ // 模拟用户数据
1398
+ const userData = [
1399
+ {id: 'U1001', name: '张三', email: '[email protected]'},
1400
+ {id: 'U1002', name: '李四', email: '[email protected]'},
1401
+ {id: 'U1003', name: '王五', email: '[email protected]'},
1402
+ {id: 'U1004', name: '赵六', email: '[email protected]'},
1403
+ {id: 'U2001', name: 'John Smith', email: '[email protected]'},
1404
+ {id: 'U2002', name: 'Michael', email: '[email protected]'}
1405
+ ];
1406
+
1407
  // 打开编辑抽屉
1408
+ document.querySelectorAll('.edit-warehouse-btn').forEach(btn => {
1409
  btn.addEventListener('click', function() {
1410
+ const warehouseId = this.getAttribute('data-id');
1411
+ const warehouse = warehouseData[warehouseId] || {};
1412
 
1413
  // 填充表单数据
1414
+ document.getElementById('editWarehouseName').value = warehouse.name || '';
1415
+ document.getElementById('editWarehouseCode').value = warehouse.code || '';
1416
+ document.getElementById('editWarehouseType').value = warehouse.type || '';
1417
+ document.getElementById('editWarehouseStatus').value = warehouse.status || 'active';
1418
+ document.getElementById('editWarehouseAddress').value = warehouse.address || '';
1419
+ document.getElementById('editWarehouseProvince').value = warehouse.province || '';
1420
+ document.getElementById('editWarehouseCity').value = warehouse.city || '';
1421
+ document.getElementById('editWarehousePostcode').value = warehouse.postcode || '';
1422
+ document.getElementById('editWarehouseCountry').value = warehouse.country || 'CN';
1423
+ document.getElementById('editWarehouseContact').value = warehouse.contact || '';
1424
+ document.getElementById('editWarehousePhone').value = warehouse.phone || '';
1425
+ document.getElementById('editWarehouseDescription').value = warehouse.description || '';
1426
 
1427
+ // 填充用户标签
1428
+ const userTagsContainer = document.getElementById('editUserTagsContainer');
1429
+ userTagsContainer.innerHTML = '';
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1430
 
1431
+ if (warehouse.users && warehouse.users.length > 0) {
1432
+ warehouse.users.forEach(user => {
1433
+ const userTag = document.createElement('span');
1434
+ userTag.className = 'user-tag';
1435
+ userTag.dataset.userId = user.id;
1436
+ userTag.innerHTML = `${user.name} <span class="user-tag-remove"><i class="fas fa-times"></i></span>`;
 
 
 
 
1437
 
1438
+ // 添加删除事件
1439
+ userTag.querySelector('.user-tag-remove').addEventListener('click', function(e) {
1440
+ e.stopPropagation();
1441
+ userTag.remove();
 
 
 
 
 
 
1442
  });
1443
 
1444
+ userTagsContainer.appendChild(userTag);
 
 
 
1445
  });
1446
  }
1447
 
1448
  // 打开抽屉
1449
+ editWarehouseOverlay.classList.add('active');
1450
+ editWarehouseDrawer.classList.add('active');
1451
  document.body.style.overflow = 'hidden';
1452
  });
1453
  });
1454
 
1455
  // 关闭编辑抽屉
1456
+ function closeEditWarehouseDrawer() {
1457
+ editWarehouseOverlay.classList.remove('active');
1458
+ editWarehouseDrawer.classList.remove('active');
1459
  document.body.style.overflow = '';
1460
  }
1461
 
1462
+ closeEditWarehouseDrawerBtn.addEventListener('click', closeEditWarehouseDrawer);
1463
+ cancelEditWarehouseBtn.addEventListener('click', closeEditWarehouseDrawer);
1464
+ editWarehouseOverlay.addEventListener('click', closeEditWarehouseDrawer);
1465
 
1466
+ // 用户搜索功能
1467
+ function setupUserSearch(inputId, containerId, dropdownId) {
1468
+ const userSearchInput = document.getElementById(inputId);
1469
+ const userTagsContainer = document.getElementById(containerId);
1470
+ const userSelectDropdown = document.getElementById(dropdownId);
 
 
1471
 
1472
+ userSearchInput.addEventListener('focus', function() {
1473
+ // 显示所有用户
1474
+ userSelectDropdown.innerHTML = '';
1475
+ userData.forEach(user => {
1476
+ const userItem = document.createElement('div');
1477
+ userItem.className = 'user-select-item';
1478
+ userItem.dataset.userId = user.id;
1479
+ userItem.innerHTML = `
1480
+ <div class="font-medium">${user.name}</div>
1481
+ <div class="text-xs text-gray-500">${user.email}</div>
1482
+ `;
1483
+
1484
+ userItem.addEventListener('click', function() {
1485
+ // 检查是否已添加
1486
+ const existingTag = userTagsContainer.querySelector(`[data-user-id="${user.id}"]`);
1487
+ if (!existingTag) {
1488
+ const userTag = document.createElement('span');
1489
+ userTag.className = 'user-tag';
1490
+ userTag.dataset.userId = user.id;
1491
+ userTag.innerHTML = `${user.name} <span class="user-tag-remove"><i class="fas fa-times"></i></span>`;
1492
 
1493
+ // 添加删除事件
1494
+ userTag.querySelector('.user-tag-remove').addEventListener('click', function(e) {
 
 
1495
  e.stopPropagation();
1496
+ userTag.remove();
1497
  });
1498
 
1499
+ userTagsContainer.appendChild(userTag);
1500
+ }
 
 
1501
 
1502
+ userSelectDropdown.style.display = 'none';
1503
+ userSearchInput.value = '';
1504
+ });
1505
+
1506
+ userSelectDropdown.appendChild(userItem);
1507
  });
1508
+
1509
+ userSelectDropdown.style.display = 'block';
1510
+ });
 
 
 
 
 
 
 
 
 
 
 
 
 
1511
 
1512
+ userSearchInput.addEventListener('input', function() {
1513
+ const searchTerm = this.value.toLowerCase();
1514
+
1515
+ if (searchTerm) {
1516
+ userSelectDropdown.innerHTML = '';
1517
+
1518
+ const filteredUsers = userData.filter(user =>
1519
+ user.name.toLowerCase().includes(searchTerm) ||
1520
+ user.email.toLowerCase().includes(searchTerm)
1521
+ );
1522
+
1523
+ if (filteredUsers.length > 0) {
1524
+ filteredUsers.forEach(user => {
1525
+ const userItem = document.createElement('div');
1526
+ userItem.className = 'user-select-item';
1527
+ userItem.dataset.userId = user.id;
1528
+ userItem.innerHTML = `
1529
+ <div class="font-medium">${user.name}</div>
1530
+ <div class="text-xs text-gray-500">${user.email}</div>
1531
+ `;
1532
+
1533
+ userItem.addEventListener('click', function() {
1534
+ // 检查是否已添加
1535
+ const existingTag = userTagsContainer.querySelector(`[data-user-id="${user.id}"]`);
1536
+ if (!existingTag) {
1537
+ const userTag = document.createElement('span');
1538
+ userTag.className = 'user-tag';
1539
+ userTag.dataset.userId = user.id;
1540
+ userTag.innerHTML = `${user.name} <span class="user-tag-remove"><i class="fas fa-times"></i></span>`;
1541
+
1542
+ // 添加删除事件
1543
+ userTag.querySelector('.user-tag-remove').addEventListener('click', function(e) {
1544
+ e.stopPropagation();
1545
+ userTag.remove();
1546
+ });
1547
+
1548
+ userTagsContainer.appendChild(userTag);
1549
+ }
1550
+
1551
+ userSelectDropdown.style.display = 'none';
1552
+ userSearchInput.value = '';
1553
+ });
1554
+
1555
+ userSelectDropdown.appendChild(userItem);
1556
+ });
1557
+ } else {
1558
+ const noResult = document.createElement('div');
1559
+ noResult.className = 'p-2 text-sm text-gray-500';
1560
+ noResult.textContent = '没有找到匹配的用户';
1561
+ userSelectDropdown.appendChild(noResult);
1562
+ }
1563
+
1564
+ userSelectDropdown.style.display = 'block';
1565
+ } else {
1566
+ // 显示所有用户
1567
+ userSelectDropdown.innerHTML = '';
1568
+ userData.forEach(user => {
1569
+ const userItem = document.createElement('div');
1570
+ userItem.className = 'user-select-item';
1571
+ userItem.dataset.userId = user.id;
1572
+ userItem.innerHTML = `
1573
+ <div class="font-medium">${user.name}</div>
1574
+ <div class="text-xs text-gray-500">${user.email}</div>
1575
+ `;
1576
+
1577
+ userItem.addEventListener('click', function() {
1578
+ // 检查是否已添加
1579
+ const existingTag = userTagsContainer.querySelector(`[data-user-id="${user.id}"]`);
1580
+ if (!existingTag) {
1581
+ const userTag = document.createElement('span');
1582
+ userTag.className = 'user-tag';
1583
+ userTag.dataset.userId = user.id;
1584
+ userTag.innerHTML = `${user.name} <span class="user-tag-remove"><i class="fas fa-times"></i></span>`;
1585
+
1586
+ // 添加删除事件
1587
+ userTag.querySelector('.user-tag-remove').addEventListener('click', function(e) {
1588
+ e.stopPropagation();
1589
+ userTag.remove();
1590
+ });
1591
+
1592
+ userTagsContainer.appendChild(userTag);
1593
+ }
1594
+
1595
+ userSelectDropdown.style.display = 'none';
1596
+ userSearchInput.value = '';
1597
+ });
1598
+
1599
+ userSelectDropdown.appendChild(userItem);
1600
+ });
1601
+
1602
+ userSelectDropdown.style.display = 'block';
1603
+ }
1604
+ });
1605
 
1606
+ // 点击外部关闭下拉框
1607
+ document.addEventListener('click', function(e) {
1608
+ if (!userSelectDropdown.contains(e.target) && e.target !== userSearchInput) {
1609
+ userSelectDropdown.style.display = 'none';
1610
+ }
1611
+ });
1612
+ }
1613
 
1614
+ // 初始化用户搜索功能
1615
+ setupUserSearch('userSearchInput', 'userTagsContainer', 'userSelectDropdown');
1616
+ setupUserSearch('editUserSearchInput', 'editUserTagsContainer', 'editUserSelectDropdown');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1617
 
1618
  // 表单提交
1619
+ document.getElementById('editWarehouseForm').addEventListener('submit', function(e) {
1620
  e.preventDefault();
1621
  // 这里可以添加表单提交逻辑
1622
+ alert('仓库信息已更新！');
1623
+ closeEditWarehouseDrawer();
1624
  });
1625
 
1626
  // 二级菜单功能
prompts.txt CHANGED
@@ -1 +1,2 @@
1
- 请在一级菜单仓储管理下创建二级菜单：仓库管理、库区管理、库位管理、托盘模版管理，其余设计不变
 
 
1
+ 请在一级菜单仓储管理下创建二级菜单：仓库管理、库区管理、库位管理、托盘模版管理，其余设计不变
2
+ 帮我生成仓储管理中二级菜单中仓库管理的功能及页面，要求：用户需要多仓库模式下，需要在此处进行其他仓库的配置，仓库管理中不仅可以配置国内仓，也可以配置海外仓，整个仓储管理的逻辑为先配置仓库，才能配置库区和库位，最后配置托盘模版，如果不按照这个顺序，则库区、库位、托盘模版都无法进行配置。仓库配置完成后，需要对仓库进行账号或者用户绑定，账号或者用户来源于系统设置中的账户管理