149 lines
10 KiB
Plaintext
149 lines
10 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→ const weightCount = Object.keys(weightGroups).length;
|
||
|
|
131→ const isSingleWeight = weightCount === 1;
|
||
|
|
132→
|
||
|
|
133→ // 如果没有克重，直接显示产品列表，不显示克重折叠卡片
|
||
|
|
134→ if (hasNoWeight) {
|
||
|
|
135→ return (
|
||
|
|
136→ <div key={weight} className="bg-gray-50 rounded-xl overflow-hidden">
|
||
|
|
137→ <table className="w-full">
|
||
|
|
138→ <thead className="bg-white/50 border-b border-gray-100">
|
||
|
|
139→ <tr>
|
||
|
|
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-left text-xs font-medium text-gray-500">产品码</th>
|
||
|
|
142→ <th className="px-3 py-2 text-left text-xs font-medium text-gray-500">库存</th>
|
||
|
|
143→ <th className="px-3 py-2 text-right text-xs font-medium text-gray-500">操作</th>
|
||
|
|
144→ </tr>
|
||
|
|
145→ </thead>
|
||
|
|
146→ <tbody className="divide-y divide-gray-100">
|
||
|
|
147→ {products.map(product => (
|
||
|
|
148→ <ProductRow
|
||
|
|
149→ key={product.id}
|
||
|
|
150→ product={product}
|
||
|
|
151→ ratios={productRatios[product.id]}
|
||
|
|
152→ onViewRecords={() => onViewRecords(product)}
|
||
|
|
153→ onViewPriceHistory={() => onViewPriceHistory(product)}
|
||
|
|
154→ onViewStockHistory={() => onViewStockHistory(product)}
|
||
|
|
155→ onEdit={() => onEdit(product)}
|
||
|
|
156→ onDelete={() => onDelete(product.id)}
|
||
|
|
157→ />
|
||
|
|
158→ ))}
|
||
|
|
159→ </tbody>
|
||
|
|
160→ </table>
|
||
|
|
161→ </div>
|
||
|
|
162→ );
|
||
|
|
163→ }
|
||
|
|
164→
|
||
|
|
165→ // 如果只有一种克重，直接显示克重信息和产品列表，不需要折叠
|
||
|
|
166→ if (isSingleWeight) {
|
||
|
|
167→ return (
|
||
|
|
168→ <div key={weight} className="bg-gray-50 rounded-xl overflow-hidden">
|
||
|
|
169→ <div className="flex items-center gap-2 p-3 bg-gray-100 border-b border-gray-200">
|
||
|
|
170→ <span className="font-medium text-gray-800">{weight}g</span>
|
||
|
|
171→ {products[0]?.warp_weight && products[0]?.weft_weight && (
|
||
|
|
172→ <span className="text-xs text-gray-500 ml-1">经{products[0].warp_weight}+纬{products[0].weft_weight}</span>
|
||
|
|
173→ )}
|
||
|
|
174→ <span className="text-xs text-gray-500">({products.length}个颜色)</span>
|
||
|
|
175→ </div>
|
||
|
|
176→ <table className="w-full">
|
||
|
|
177→ <thead className="bg-white/50 border-b border-gray-100">
|
||
|
|
178→ <tr>
|
||
|
|
179→ <th className="px-3 py-2 text-left text-xs font-medium text-gray-500">颜色</th>
|
||
|
|
180→ <th className="px-3 py-2 text-left text-xs font-medium text-gray-500">产品码</th>
|
||
|
|
181→ <th className="px-3 py-2 text-left text-xs font-medium text-gray-500">库存</th>
|
||
|
|
182→ <th className="px-3 py-2 text-right text-xs font-medium text-gray-500">操作</th>
|
||
|
|
183→ </tr>
|
||
|
|
184→ </thead>
|
||
|
|
185→ <tbody className="divide-y divide-gray-100">
|
||
|
|
186→ {products.map(product => (
|
||
|
|
187→ <ProductRow
|
||
|
|
188→ key={product.id}
|
||
|
|
189→ product={product}
|
||
|
|
190→ ratios={productRatios[product.id]}
|
||
|
|
191→ onViewRecords={() => onViewRecords(product)}
|
||
|
|
192→ onViewPriceHistory={() => onViewPriceHistory(product)}
|
||
|
|
193→ onViewStockHistory={() => onViewStockHistory(product)}
|
||
|
|
194→ onEdit={() => onEdit(product)}
|
||
|
|
195→ onDelete={() => onDelete(product.id)}
|
||
|
|
196→ />
|
||
|
|
197→ ))}
|
||
|
|
198→ </tbody>
|
||
|
|
199→ </table>
|
||
|
|
200→ </div>
|
||
|
|
201→ );
|
||
|
|
202→ }
|
||
|
|
203→
|
||
|
|
204→ return (
|
||
|
|
205→ <div key={weight} className="bg-gray-50 rounded-xl overflow-hidden">
|
||
|
|
206→ <div
|
||
|
|
207→ onClick={() => onToggleGroup(weightKey)}
|
||
|
|
208→ className="flex items-center justify-between p-3 cursor-pointer hover:bg-gray-100 transition-colors"
|
||
|
|
209→ >
|
||
|
|
210→ <div className="flex items-center gap-2">
|
||
|
|
211→ <div className={`w-6 h-6 rounded flex items-center justify-center transition-colors ${isWeightExpanded ? 'bg-blue-100' : 'bg-white'}`}>
|
||
|
|
212→ {isWeightExpanded ? <ChevronUp size={14} className="text-blue-600" /> : <ChevronDown size={14} className="text-gray-500" />}
|
||
|
|
213→ </div>
|
||
|
|
214→ <span className="font-medium text-gray-800">{weight}g</span>
|
||
|
|
215→ {products[0]?.warp_weight && products[0]?.weft_weight && (
|
||
|
|
216→ <span className="text-xs text-gray-400 ml-1">经{products[0].warp_weight}+纬{products[0].weft_weight}</span>
|
||
|
|
217→ )}
|
||
|
|
218→ <span className="text-xs text-gray-500">({products.length}个颜色)</span>
|
||
|
|
219→ </div>
|
||
|
|
220→ </div>
|
||
|
|
221→
|
||
|
|
222→ <AnimatePresence>
|
||
|
|
223→ {isWeightExpanded && (
|
||
|
|
224→ <motion.div
|
||
|
|
225→ initial={{ height: 0, opacity: 0 }}
|
||
|
|
226→ animate={{ height: 'auto', opacity: 1 }}
|
||
|
|
227→ exit={{ height: 0, opacity: 0 }}
|
||
|
|
228→ transition={animationConfig.fastTransition}
|
||
|
|
229→ className="border-t border-gray-200"
|
||
|
|
230→ >
|
||
|
|
231→ <table className="w-full">
|
||
|
|
232→ <thead className="bg-white/50 border-b border-gray-100">
|
||
|
|
233→ <tr>
|
||
|
|
234→ <th className="px-3 py-2 text-left text-xs font-medium text-gray-500">颜色</th>
|
||
|
|
235→ <th className="px-3 py-2 text-left text-xs font-medium text-gray-500">产品码</th>
|
||
|
|
236→ <th className="px-3 py-2 text-left text-xs font-medium text-gray-500">库存</th>
|
||
|
|
237→ <th className="px-3 py-2 text-right text-xs font-medium text-gray-500">操作</th>
|
||
|
|
238→ </tr>
|
||
|
|
239→ </thead>
|
||
|
|
240→ <tbody className="divide-y divide-gray-100">
|
||
|
|
241→ {products.map(product => (
|
||
|
|
242→ <ProductRow
|
||
|
|
243→ key={product.id}
|
||
|
|
244→ product={product}
|
||
|
|
245→ ratios={productRatios[product.id]}
|
||
|
|
246→ onViewRecords={() => onViewRecords(product)}
|
||
|
|
247→ onViewPriceHistory={() => onViewPriceHistory(product)}
|
||
|
|
248→ onViewStockHistory={() => onViewStockHistory(product)}
|
||
|
|
249→ onEdit={() => onEdit(product)}
|
||
|
|
250→ onDelete={() => onDelete(product.id)}
|
||
|
|
251→ />
|
||
|
|
252→ ))}
|
||
|
|
253→ </tbody>
|
||
|
|
254→ </table>
|
||
|
|
255→ </motion.div>
|
||
|
|
256→ )}
|
||
|
|
257→ </AnimatePresence>
|
||
|
|
258→ </div>
|
||
|
|
259→ );
|
||
|
|
260→ })}
|
||
|
|
261→ </div>
|
||
|
|
262→ </motion.div>
|
||
|
|
263→ )}
|
||
|
|
264→ </AnimatePresence>
|
||
|
|
265→ </motion.div>
|
||
|
|
266→ );
|