# 库位管理简化 - 手动修改指南

## ✅ 已完成的修改

1. **已添加处理函数**（第2250行后）：
   - `handleSubmitLocation` - 提交库位（新增/更新）
   - `handleOpenLocationEdit` - 打开编辑对话框
   - `handleDeleteLocation` - 删除库位
   - `handleViewLocationQRCode` - 查看二维码
   - `handleOpenLocationDetail` - 查看详情

## 📝 仍需手动修改的部分

### 修改1：简化仓库选择（第7635-7682行）

**找到：**
```tsx
            {/* 仓库选择 */}
            <div className="grid grid-cols-2 gap-4">
              <div>
                <Label>仓库 *</Label>
                ... (仓库选择的 Select 组件)
              </div>

              <div>
                <Label>区域 *</Label>
                ... (区域选择的 Select 组件，包含 A区、B区、C区、D区)
              </div>
            </div>
```

**替换为：**
```tsx
            {/* 仓库选择 */}
            <div>
              <Label>仓库 *</Label>
              <Select
                value={locationFormData.warehouseId}
                onValueChange={(value) => {
                  const warehouse = warehouses.find(w => w.id === value);
                  setLocationFormData({
                    ...locationFormData,
                    warehouseId: value,
                    warehouseName: warehouse?.name || '',
                  });
                }}
              >
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {warehouses.map(wh => (
                    <SelectItem key={wh.id} value={wh.id}>
                      {wh.name} - {wh.type}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
```

### 修改2：删除行号、货架号、层级、容量字段，添加位置名称（第7684-7771行）

**删除整个代码块：**
```tsx
            {/* 行号货架号 */}
            <div className="grid grid-cols-3 gap-4">
              ... (行号、货架号、层级的Input和Select)
            </div>

            {/* 容量 */}
            <div>
              ... (容量的Input)
            </div>

            {/* 备注 */}
            <div>
              ... (备注的Textarea)
            </div>

            {/* 预览编码 */}
            {locationFormData.row && locationFormData.shelf && (
              <Card className="p-4 bg-blue-50 border-blue-200">
                ... (编码预览)
              </Card>
            )}
```

**替换为：**
```tsx
            {/* 位置名称 */}
            <div>
              <Label>位置名称 *</Label>
              <Input
                placeholder="如：A区种子存储位、B区肥料存储位等"
                value={locationFormData.name}
                onChange={(e) => setLocationFormData({
                  ...locationFormData,
                  name: e.target.value,
                })}
              />
            </div>

            {/* 备注 */}
            <div>
              <Label>备注</Label>
              <Textarea
                placeholder="备注信息（选填）"
                value={locationFormData.notes}
                onChange={(e) => setLocationFormData({
                  ...locationFormData,
                  notes: e.target.value,
                })}
              />
            </div>
```

### 修改3：添加删除按钮并调整底部按钮布局（第7774-7791行）

**找到：**
```tsx
          <div className="flex justify-end gap-2 mt-6">
            <Button
              variant="outline"
              onClick={() => {
                setShowLocationDialog(false);
                setSelectedLocation(null);
              }}
            >
              取消
            </Button>
            <Button
              className="bg-green-600 hover:bg-green-700"
              onClick={handleSubmitLocation}
            >
              <Save className="w-4 h-4 mr-2" />
              {selectedLocation ? '更新' : '创建'}
            </Button>
          </div>
```

**替换为：**
```tsx
          <div className="flex justify-between gap-2 mt-6">
            <div>
              {selectedLocation && (
                <Button
                  variant="destructive"
                  onClick={() => {
                    setShowLocationDeleteConfirm(true);
                  }}
                >
                  <Trash2 className="w-4 h-4 mr-2" />
                  删除库位
                </Button>
              )}
            </div>
            <div className="flex gap-2">
              <Button
                variant="outline"
                onClick={() => {
                  setShowLocationDialog(false);
                  setSelectedLocation(null);
                }}
              >
                取消
              </Button>
              <Button
                className="bg-green-600 hover:bg-green-700"
                onClick={handleSubmitLocation}
              >
                <Save className="w-4 h-4 mr-2" />
                {selectedLocation ? '更新' : '创建'}
              </Button>
            </div>
          </div>
```

### 修改4：添加删除确认对话框（第7792行后，在</Dialog>之后）

**在库位表单对话框的 `</Dialog>` 标签之后添加：**
```tsx
      {/* 删除库位确认对话框 */}
      <AlertDialog open={showLocationDeleteConfirm} onOpenChange={setShowLocationDeleteConfirm}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>确认删除库位</AlertDialogTitle>
            <AlertDialogDescription>
              您确定要删除库位 "{selectedLocation?.name}" 吗？此操作不可撤销。
              {selectedLocation?.materials && selectedLocation.materials.length > 0 && (
                <div className="mt-2 p-2 bg-red-50 border border-red-200 rounded">
                  <p className="text-red-600 text-sm">
                    注意：该库位当前存放有 {selectedLocation.materials.length} 种物料，删除后这些物料将无库位信息。
                  </p>
                </div>
              )}
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>取消</AlertDialogCancel>
            <AlertDialogAction
              className="bg-red-600 hover:bg-red-700"
              onClick={handleDeleteLocation}
            >
              确认删除
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
```

## 🎯 修改要点总结

1. **仓库选择**：从两列布局改为单列，删除"区域"字段
2. **位置名称**：新增位置名称输入框（必填）
3. **删除字段**：行号、货架号、层级、容量、编码预览
4. **删除按钮**：仅在编辑模式显示，位于底部左侧
5. **删除确认**：添加AlertDialog进行二次确认

## ✅ 修改完成后的功能

- ✨ 简化的表单：只需填写仓库和位置名称
- 🗑️ 删除功能：编辑时可以删除库位
- ⚠️ 二次确认：删除前弹出确认对话框并显示警告
- 📊 智能提示：如果库位有物料会显示警告信息
