108 lines
7.4 KiB
Plaintext
108 lines
7.4 KiB
Plaintext
|
The file /home/project/src/components/warehouse/ProductList.tsx has been updated. Made 1 replacement.
|
||
|
|
|
||
|
|
Here's the result of running `cat -n` on a snippet of the edited file:
|
||
|
|
121→ exit={{ height: 0, opacity: 0 }}
|
||
|
|
122→ transition={animationConfig.transition}
|
||
|
|
123→ className="border-t border-gray-100"
|
||
|
|
124→ >
|
||
|
|
125→ <div className="p-4 space-y-3">
|
||
|
|
126→ {Object.entries(weightGroups).map(([weight, products]) => {
|
||
|
|
127→ const weightKey = `${productName}-${weight}`;
|
||
|
|
128→ const isWeightExpanded = expandedGroups[weightKey];
|
||
|
|
129→ const hasNoWeight = weight === '__no_weight__';
|
||
|
|
130→
|
||
|
|
131→ // 如果没有克重，直接显示产品列表，不显示克重折叠卡片
|
||
|
|
132→ if (hasNoWeight) {
|
||
|
|
133→ return (
|
||
|
|
134→ <div key={weight} className="bg-gray-50 rounded-xl overflow-hidden">
|
||
|
|
135→ <table className="w-full">
|
||
|
|
136→ <thead className="bg-white/50 border-b border-gray-100">
|
||
|
|
137→ <tr>
|
||
|
|
138→ <th className="px-3 py-2 text-left text-xs font-medium text-gray-500">颜色</th>
|
||
|
|
139→ <th className="px-3 py-2 text-left text-xs font-medium text-gray-500">产品码</th>
|
||
|
|
140→ <th className="px-3 py-2 text-left text-xs font-medium text-gray-500">库存</th>
|
||
|
|
141→ <th className="px-3 py-2 text-right text-xs font-medium text-gray-500">操作</th>
|
||
|
|
142→ </tr>
|
||
|
|
143→ </thead>
|
||
|
|
144→ <tbody className="divide-y divide-gray-100">
|
||
|
|
145→ {products.map(product => (
|
||
|
|
146→ <ProductRow
|
||
|
|
147→ key={product.id}
|
||
|
|
148→ product={product}
|
||
|
|
149→ ratios={productRatios[product.id]}
|
||
|
|
150→ onViewRecords={() => onViewRecords(product)}
|
||
|
|
151→ onViewPriceHistory={() => onViewPriceHistory(product)}
|
||
|
|
152→ onViewStockHistory={() => onViewStockHistory(product)}
|
||
|
|
153→ onEdit={() => onEdit(product)}
|
||
|
|
154→ onDelete={() => onDelete(product.id)}
|
||
|
|
155→ />
|
||
|
|
156→ ))}
|
||
|
|
157→ </tbody>
|
||
|
|
158→ </table>
|
||
|
|
159→ </div>
|
||
|
|
160→ );
|
||
|
|
161→ }
|
||
|
|
162→
|
||
|
|
163→ return (
|
||
|
|
164→ <div key={weight} className="bg-gray-50 rounded-xl overflow-hidden">
|
||
|
|
165→ <div
|
||
|
|
166→ onClick={() => onToggleGroup(weightKey)}
|
||
|
|
167→ className="flex items-center justify-between p-3 cursor-pointer hover:bg-gray-100 transition-colors"
|
||
|
|
168→ >
|
||
|
|
169→ <div className="flex items-center gap-2">
|
||
|
|
170→ <div className={`w-6 h-6 rounded flex items-center justify-center transition-colors ${isWeightExpanded ? 'bg-blue-100' : 'bg-white'}`}>
|
||
|
|
171→ {isWeightExpanded ? <ChevronUp size={14} className="text-blue-600" /> : <ChevronDown size={14} className="text-gray-500" />}
|
||
|
|
172→ </div>
|
||
|
|
173→ <span className="font-medium text-gray-800">{weight}g</span>
|
||
|
|
174→ {products[0]?.warp_weight && products[0]?.weft_weight && (
|
||
|
|
175→ <span className="text-xs text-gray-400 ml-1">经{products[0].warp_weight}+纬{products[0].weft_weight}</span>
|
||
|
|
176→ )}
|
||
|
|
177→ <span className="text-xs text-gray-500">({products.length}个颜色)</span>
|
||
|
|
178→ </div>
|
||
|
|
179→ </div>
|
||
|
|
180→
|
||
|
|
181→ <AnimatePresence>
|
||
|
|
182→ {isWeightExpanded && (
|
||
|
|
183→ <motion.div
|
||
|
|
184→ initial={{ height: 0, opacity: 0 }}
|
||
|
|
185→ animate={{ height: 'auto', opacity: 1 }}
|
||
|
|
186→ exit={{ height: 0, opacity: 0 }}
|
||
|
|
187→ transition={animationConfig.fastTransition}
|
||
|
|
188→ className="border-t border-gray-200"
|
||
|
|
189→ >
|
||
|
|
190→ <table className="w-full">
|
||
|
|
191→ <thead className="bg-white/50 border-b border-gray-100">
|
||
|
|
192→ <tr>
|
||
|
|
193→ <th className="px-3 py-2 text-left text-xs font-medium text-gray-500">颜色</th>
|
||
|
|
194→ <th className="px-3 py-2 text-left text-xs font-medium text-gray-500">产品码</th>
|
||
|
|
195→ <th className="px-3 py-2 text-left text-xs font-medium text-gray-500">库存</th>
|
||
|
|
196→ <th className="px-3 py-2 text-right text-xs font-medium text-gray-500">操作</th>
|
||
|
|
197→ </tr>
|
||
|
|
198→ </thead>
|
||
|
|
199→ <tbody className="divide-y divide-gray-100">
|
||
|
|
200→ {products.map(product => (
|
||
|
|
201→ <ProductRow
|
||
|
|
202→ key={product.id}
|
||
|
|
203→ product={product}
|
||
|
|
204→ ratios={productRatios[product.id]}
|
||
|
|
205→ onViewRecords={() => onViewRecords(product)}
|
||
|
|
206→ onViewPriceHistory={() => onViewPriceHistory(product)}
|
||
|
|
207→ onViewStockHistory={() => onViewStockHistory(product)}
|
||
|
|
208→ onEdit={() => onEdit(product)}
|
||
|
|
209→ onDelete={() => onDelete(product.id)}
|
||
|
|
210→ />
|
||
|
|
211→ ))}
|
||
|
|
212→ </tbody>
|
||
|
|
213→ </table>
|
||
|
|
214→ </motion.div>
|
||
|
|
215→ )}
|
||
|
|
216→ </AnimatePresence>
|
||
|
|
217→ </div>
|
||
|
|
218→ );
|
||
|
|
219→ })}
|
||
|
|
220→ </div>
|
||
|
|
221→ </motion.div>
|
||
|
|
222→ )}
|
||
|
|
223→ </AnimatePresence>
|
||
|
|
224→ </motion.div>
|
||
|
|
225→ );
|