feat: 新增主柜配置功能并优化配置逻辑

- 在 `smart-cabinet` 模块中新增 `MainCabinetConfigModal` 组件，用于配置主柜信息
- 优化 `ShopConfigModal` 和 `GatewayConfigModal` 的 `visible` 属性，使用 `computed` 替代 `ref`
- 调整 `cabinet-goods` 模块的分页选项，增加更多可选页大小
- 修复 `smart-cabinet-edit-modal` 中 `cabinetId` 的默认值问题

src/views/cabinet/smart-cabinet/GatewayConfigModal.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { getMqttServerList } from '@/api/cabinet/mqttServer';
 import { MqttServerDTO } from '@/api/cabinet/mqttServer';
 import { ElMessage } from 'element-plus';
@@ -30,7 +30,10 @@ const props = defineProps<{
 
 const emit = defineEmits(['update:modelValue', 'refresh']);
 
-const visible = ref(props.modelValue);
+const visible = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val)
+});
 const mqttList = ref<MqttServerDTO[]>([]);
 const loading = ref(false);
 const currentCabinetId = ref<number>();

src/views/cabinet/smart-cabinet/MainCabinetConfigModal.vue

@@ -0,0 +1,101 @@
+<template>
+  <el-dialog v-model="visible" title="主柜配置" width="800px">
+    <el-table :data="cabinetList" v-loading="loading" border>
+      <el-table-column prop="cabinetId" label="柜体ID" width="100" />
+      <el-table-column prop="cabinetName" label="柜体名称" />
+      <el-table-column label="柜体类型" width="120">
+        <template #default="{ row }">
+          <el-tag :type="row.cabinetType === 0 ? 'success' : 'warning'">
+            {{ row.cabinetType === 0 ? '主柜' : '副柜' }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="80" fixed="right">
+        <template #default="{ row }">
+          <el-button link type="primary" @click="handleConfig(row)">配置</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination v-model:current-page="pagination.currentPage" v-model:page-size="pagination.pageSize"
+      :page-sizes="[10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
+      @size-change="onSizeChange" @current-change="onCurrentChange" />
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import { SmartCabinetDTO } from '@/api/cabinet/smart-cabinet';
+import { ElMessage } from 'element-plus';
+import { getSmartCabinetList } from '@/api/cabinet/smart-cabinet';
+import { updateSmartCabinet } from '@/api/cabinet/smart-cabinet';
+
+const props = defineProps<{
+  modelValue: boolean;
+  cabinetId: number;
+}>();
+
+const emit = defineEmits(['update:modelValue', 'refresh']);
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val)
+});
+const cabinetList = ref<SmartCabinetDTO[]>([]);
+const loading = ref(false);
+const currentCabinetId = ref<number>();
+const pagination = ref({
+  pageSize: 10,
+  currentPage: 1,
+  total: 0
+});
+
+const loadMainCabinets = async () => {
+  try {
+    loading.value = true;
+    const { data } = await getSmartCabinetList({
+      cabinetType: 0,
+      pageSize: pagination.value.pageSize,
+      pageNum: pagination.value.currentPage
+    });
+    cabinetList.value = data.rows;
+    pagination.value.total = data.total;
+  } finally {
+    loading.value = false;
+  }
+};
+
+const onSizeChange = (val: number) => {
+  pagination.value.pageSize = val;
+  loadMainCabinets();
+};
+
+const onCurrentChange = (val: number) => {
+  pagination.value.currentPage = val;
+  loadMainCabinets();
+};
+
+watch(() => props.modelValue, (val) => {
+  visible.value = val;
+});
+
+watch(() => props.cabinetId, (newVal) => {
+  if (newVal) {
+    currentCabinetId.value = newVal;
+    loadMainCabinets();
+  }
+});
+
+const handleConfig = async (row: SmartCabinetDTO) => {
+  try {
+    await updateSmartCabinet(currentCabinetId.value, {
+      cabinetId: currentCabinetId.value,
+      mainCabinet: row.cabinetId
+    });
+    ElMessage.success('配置成功');
+    emit('update:modelValue', false);
+    emit('refresh');
+  } catch (error) {
+    console.error('配置失败', error);
+  }
+};
+</script>

src/views/cabinet/smart-cabinet/ShopConfigModal.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { getShopList } from '@/api/shop/shop';
 import { ShopDTO } from '@/api/shop/shop';
 import { ElMessage } from 'element-plus';
@@ -29,7 +29,10 @@ const props = defineProps<{
 
 const emit = defineEmits(['update:modelValue', 'refresh']);
 
-const visible = ref(props.modelValue);
+const visible = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val)
+});
 const shopList = ref<ShopDTO[]>([]);
 const loading = ref(false);
 const currentCabinetId = ref<number>();

src/views/cabinet/smart-cabinet/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import { PureTableBar } from "@/components/RePureTableBar";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 import { getSmartCabinetList, SmartCabinetDTO } from "@/api/cabinet/smart-cabinet";
@@ -16,6 +16,7 @@ import { deleteSmartCabinet } from "@/api/cabinet/smart-cabinet";
 import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
 import GatewayConfigModal from "./GatewayConfigModal.vue";
 import ShopConfigModal from "./ShopConfigModal.vue";
+import MainCabinetConfigModal from "./MainCabinetConfigModal.vue";
 
 defineOptions({
   name: "SmartCabinet"
@@ -43,7 +44,8 @@ const editVisible = ref(false);
 const currentRow = ref<SmartCabinetDTO>();
 const gatewayConfigVisible = ref(false);
 const shopConfigVisible = ref(false);
-const currentCabinetId = ref<number>();
+const mainCabinetConfigVisible = ref(false);
+const currentCabinetId = ref<number>(0);
 
 const getList = async () => {
   try {
@@ -145,6 +147,11 @@ const handleShopConfig = (row: SmartCabinetDTO) => {
   shopConfigVisible.value = true;
 };
 
+const handleMainCabinetConfig = (row: SmartCabinetDTO) => {
+  currentCabinetId.value = row.cabinetId;
+  mainCabinetConfigVisible.value = true;
+};
+
 getList();
 </script>
 
@@ -185,15 +192,43 @@ getList();
         @selection-change="handleSelectionChange" border>
         <el-table-column type="selection" width="55" />
         <el-table-column label="柜体名称" prop="cabinetName" />
-        <el-table-column label="归属商店" prop="shopName" width="120" />
+        <el-table-column label="归属商店" prop="shopName" width="180">
+          <template #default="{ row }">
+            <span>{{ row.shopName }}</span>
+            <el-button type="success" link :icon="useRenderIcon('ep:shop')" @click="handleShopConfig(row)">
+              配置
+            </el-button>
+          </template>
+        </el-table-column>
+        <el-table-column label="归属主柜" prop="mainCabinetName" width="180">
+          <template #default="{ row }">
+            <template v-if="row.cabinetType === 1">
+              <span>{{ row.mainCabinetName || '-' }}</span>
+              <el-button type="primary" link :icon="useRenderIcon('ep:setting')" @click="handleMainCabinetConfig(row)">
+                配置
+              </el-button>
+            </template>
+            <span v-else>-</span>
+          </template>
+        </el-table-column>
         <el-table-column label="柜体类型" prop="cabinetType" width="120">
           <template #default="{ row }">
+            <el-tag :type="row.cabinetType === 0 ? 'success' : 'warning'">
               {{ row.cabinetType === 0 ? '主柜' : '副柜' }}
+            </el-tag>
           </template>
         </el-table-column>
         <el-table-column label="模板编号" prop="templateNo" width="180" />
         <el-table-column label="锁控编号" prop="lockControlNo" width="120" />
-        <el-table-column label="网关ID" prop="mqttServerId" width="120" />
+        <el-table-column label="网关ID" prop="mqttServerId" width="180">
+          <template #default="{ row }">
+            <span>{{ row.mqttServerId }}</span>
+            <el-button type="warning" link :icon="useRenderIcon('ant-design:gateway-outlined')"
+              @click="handleGatewayConfig(row)">
+              配置
+            </el-button>
+          </template>
+        </el-table-column>
         <el-table-column label="位置" prop="location" width="120" />
         <el-table-column label="操作" width="150" fixed="right">
           <template #default="{ row }">
@@ -203,13 +238,6 @@ getList();
             <el-button type="warning" link :icon="useRenderIcon(EditPen)" @click="goCellManagement(row)">
               格口
             </el-button>
-            <el-button type="warning" link :icon="useRenderIcon('ant-design:gateway-outlined')"
-              @click="handleGatewayConfig(row)">
-              配置网关
-            </el-button>
-            <el-button type="success" link :icon="useRenderIcon('ep:shop')" @click="handleShopConfig(row)">
-              配置商店
-            </el-button>
             <el-popconfirm :title="`确认删除【${row.cabinetName}】？`" @confirm="handleDelete(row)">
               <template #reference>
                 <el-button type="danger" link :icon="useRenderIcon(Delete)">
@@ -228,5 +256,6 @@ getList();
     <smart-cabinet-edit-modal v-model:visible="editVisible" :row="currentRow" @refresh="getList" />
     <GatewayConfigModal v-model="gatewayConfigVisible" :cabinet-id="currentCabinetId" @refresh="getList" />
     <ShopConfigModal v-model="shopConfigVisible" :cabinet-id="currentCabinetId" @refresh="getList" />
+    <MainCabinetConfigModal v-model="mainCabinetConfigVisible" :cabinet-id="currentCabinetId" @refresh="getList" />
   </div>
 </template>

src/views/cabinet/smart-cabinet/smart-cabinet-edit-modal.vue

@@ -7,7 +7,7 @@ import Confirm from "@iconify-icons/ep/check";
 import type { FormRules } from 'element-plus';
 
 export interface FormDTO {
-  cabinetId?: number;
+  cabinetId: number;
   cabinetName: string;
   cabinetType: number;
   templateNo: string;
@@ -30,6 +30,7 @@ const emit = defineEmits(["update:visible", "refresh"]);
 
 const formRef = ref();
 const formData = reactive<FormDTO>({
+  cabinetId: 0,
   cabinetName: "",
   cabinetType: 1,
   templateNo: "",

src/views/shop/cabinet-goods/index.vue

@@ -311,7 +311,7 @@ const handleClearGoods = async (row: CabinetCellDTO) => {
           </el-table-column>
         </el-table>
         <el-pagination v-model:current-page="pagination.currentPage" v-model:page-size="pagination.pageSize"
-          :page-sizes="[5, 10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
+          :page-sizes="[5,8,10,11,12,13,14,15,16,18,20]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
           @size-change="onSizeChange" @current-change="onCurrentChange" class="pagination" />
       </div>
       <el-dialog v-model="configVisible" title="配置商品" width="80%">