feat: 添加编辑柜体抽屉组件并集成到详情页

在详情页中添加了编辑柜体的抽屉组件，允许用户通过点击按钮打开抽屉并编辑柜体信息。抽屉组件包含表单验证和提交功能，提交成功后刷新详情页数据。

src/views/cabinet/smart-cabinet-card/detail.vue

@@ -19,6 +19,7 @@ import Refresh from "@iconify-icons/ep/refresh";
 import CellFormModal from "@/views/cabinet/cabinet-cell/cell-form-modal.vue";
 import CellEditModal from "@/views/cabinet/cabinet-cell/cell-edit-modal.vue";
 import { getGoodsInfo } from "@/api/shop/goods";
+import EditCabinetDrawer from "./edit-cabinet-drawer.vue";
 import { CabinetMainboardDTO, deleteMainboard, getMainboardList, updateMainboard } from "@/api/cabinet/mainboards";
 
 defineOptions({
@@ -37,7 +38,6 @@ const cabinetInfo = ref<SmartCabinetDTO>({
 });
 const loading = ref(false);
 const activeTab = ref('cells');
-const mainboardConfigVisible = ref(false);
 const mainboardList = ref<CabinetMainboardDTO[]>([]);
 const mainboardPagination = ref({
   pageSize: 5,
@@ -48,6 +48,7 @@ const cabinetId = ref<number>(0);
 const gatewayConfigVisible = ref(false);
 const shopConfigVisible = ref(false);
 const mainCabinetConfigVisible = ref(false);
+const editCabinetDrawerVisible = ref(false);
 const cellList = ref<CabinetCellDTO[]>([]);
 const cellPagination = ref({
   pageSize: 5,
@@ -285,15 +286,19 @@ onMounted(() => {
           </el-tabs>
         </div>
 
-        <el-descriptions class="info-details" v-if="activeTab === 'basic'" :column="2" border>
-          <el-descriptions-item label="主柜ID">{{ cabinetInfo.mainCabinet || '-' }}</el-descriptions-item>
-          <el-descriptions-item label="主柜名称">{{ cabinetInfo.mainCabinetName || '-' }}</el-descriptions-item>
-          <el-descriptions-item label="MQTT服务器ID">{{ cabinetInfo.mqttServerId || '-' }}</el-descriptions-item>
-          <el-descriptions-item label="操作员">{{ cabinetInfo.operator || '-' }}</el-descriptions-item>
-          <el-button type="primary" link :icon="useRenderIcon('ep:setting')" @click="mainboardConfigVisible = true">
-            配置主板
-          </el-button>
-        </el-descriptions>
+        <div class="info-details" v-if="activeTab === 'basic'">
+          <div style="display: flex; justify-content: flex-end; margin-bottom: 16px;">
+            <el-button type="primary" link :icon="useRenderIcon(EditPen)" @click="editCabinetDrawerVisible = true">
+              编辑柜体
+            </el-button>
+          </div>
+          <el-descriptions :column="2" border>
+            <el-descriptions-item label="主柜ID">{{ cabinetInfo.mainCabinet || '-' }}</el-descriptions-item>
+            <el-descriptions-item label="主柜名称">{{ cabinetInfo.mainCabinetName || '-' }}</el-descriptions-item>
+            <el-descriptions-item label="MQTT服务器ID">{{ cabinetInfo.mqttServerId || '-' }}</el-descriptions-item>
+            <el-descriptions-item label="操作员">{{ cabinetInfo.operator || '-' }}</el-descriptions-item>
+          </el-descriptions>
+        </div>
 
         <div class="cell-details" v-if="activeTab === 'cells'">
           <div style="display: flex; justify-content: flex-end; margin-bottom: 16px;">
@@ -387,6 +392,10 @@ onMounted(() => {
       <ShopConfigModal v-model="shopConfigVisible" :cabinet-id="cabinetId" @refresh="fetchCabinetDetail" />
       <MainCabinetConfigModal v-model="mainCabinetConfigVisible" :cabinet-id="cabinetId"
         @refresh="fetchCabinetDetail" />
+      <el-drawer v-model="editCabinetDrawerVisible" title="编辑柜体" size="30%" direction="rtl">
+        <EditCabinetDrawer v-model="editCabinetDrawerVisible" :cabinet-info="cabinetInfo"
+          @refresh="fetchCabinetDetail" />
+      </el-drawer>
       <el-drawer v-model="goodsConfigVisible" title="配置商品" size="50%" direction="rtl">
         <CabinetGoodsConfigModal v-model="goodsConfigVisible" :cell-id="currentCellId" @refresh="fetchCellList" />
       </el-drawer>

src/views/cabinet/smart-cabinet-card/edit-cabinet-drawer.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { ref, reactive, watch } from "vue";
+import { ElMessage } from "element-plus";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import { updateSmartCabinet } from "@/api/cabinet/smart-cabinet";
+import Confirm from "@iconify-icons/ep/check";
+import type { FormRules } from 'element-plus';
+import { CabinetImgMap } from "@/utils/cabinetImgMap";
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false
+  },
+  cabinetInfo: {
+    type: Object,
+    required: true
+  }
+});
+
+const emit = defineEmits(["update:modelValue", "refresh"]);
+
+const formRef = ref();
+const formData = reactive({
+  cabinetName: "",
+  cabinetType: 1,
+  templateNo: "",
+  lockControlNo: 0,
+  location: 0
+});
+
+const rules = reactive<FormRules>({
+  cabinetName: [{ required: true, message: "柜体名称必填", trigger: "blur" }],
+  cabinetType: [{ required: true, message: "请选择柜体类型", trigger: "change" }],
+  templateNo: [{ required: true, message: "请选择模板编号", trigger: "change" }],
+  lockControlNo: [
+    { required: true, message: "锁控板序号", trigger: "blur" }
+  ],
+  location: [
+    { required: true, message: "位置信息必填", trigger: "blur" },
+    { type: 'number', min: 0, message: '位置编号不能为负数', trigger: 'blur' }
+  ]
+});
+
+const handleConfirm = async () => {
+  try {
+    await formRef.value.validate();
+    await updateSmartCabinet(props.cabinetInfo.cabinetId, {
+      cabinetId: props.cabinetInfo.cabinetId,
+      ...formData,
+    });
+    ElMessage.success("更新成功");
+    emit("refresh");
+    closeDialog();
+  } catch (error) {
+    console.error("表单提交失败", error);
+    ElMessage.error("更新失败");
+  }
+};
+
+const closeDialog = () => {
+  formRef.value.resetFields();
+  emit("update:modelValue", false);
+};
+
+const templateOptions = Object.entries(CabinetImgMap).map(([value, item]) => ({
+  label: item.name,
+  value
+}));
+
+watch(() => props.cabinetInfo, (newVal) => {
+  Object.assign(formData, newVal);
+}, { immediate: true });
+</script>
+
+<template>
+  <el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
+    <el-form-item label="柜体名称" prop="cabinetName">
+      <el-input v-model="formData.cabinetName" placeholder="请输入柜体名称" />
+    </el-form-item>
+
+    <el-form-item label="柜体类型" prop="cabinetType">
+      <el-select v-model="formData.cabinetType" placeholder="请选择类型">
+        <el-option label="主柜" :value="0" />
+        <el-option label="副柜" :value="1" />
+      </el-select>
+    </el-form-item>
+
+    <el-form-item label="模板编号" prop="templateNo">
+      <el-select v-model="formData.templateNo" placeholder="请选择模板编号">
+        <el-option v-for="option in templateOptions" :key="option.value" :label="option.label" :value="option.value" />
+      </el-select>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" :icon="useRenderIcon(Confirm)" @click="handleConfirm">
+        确认
+      </el-button>
+    </el-form-item>
+  </el-form>
+</template>