feat(柜体管理): 添加格口号列和柜机列表功能

在柜体管理页面中，新增了格口号列以展示单元格编号，并添加了左侧柜机列表，方便用户快速切换柜体进行管理。同时优化了页面布局和样式，提升了用户体验。

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

@@ -4,6 +4,7 @@ import { PureTableBar } from "@/components/RePureTableBar";
 import { onBeforeRouteUpdate, useRoute } from "vue-router";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 import { getCabinetCellList, deleteCabinetCell, CabinetCellDTO } from "@/api/cabinet/cabinet-cell";
+import { allCabinets, SmartCabinetDTO } from "@/api/cabinet/smart-cabinet";
 import EditPen from "@iconify-icons/ep/edit-pen";
 import Delete from "@iconify-icons/ep/delete";
 import AddFill from "@iconify-icons/ri/add-circle-line";
@@ -14,39 +15,56 @@ import CellEditModal from "./cell-edit-modal.vue";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { on } from "events";
 
+// 定义组件选项
 defineOptions({
-  name: "CabinetCell"
+  name: "CabinetCell" // 组件名称
 });
 
+// 表单引用
 const formRef = ref();
+// 表格引用
 const tableRef = ref();
+// 新增单元格模态框显示状态
 const modalVisible = ref(false);
 
+// 搜索表单参数
 const searchFormParams = ref({
-  cabinetId: null,
+  cabinetId: null, // 柜体ID
-  cellNo: null,
+  cellNo: null,   // 单元格号
-  cellType: null
+  cellType: null  // 单元格类型
 });
 
+// 分页参数
 const pagination = ref({
-  pageSize: 10,
+  pageSize: 10,     // 每页显示数量
-  currentPage: 1,
+  currentPage: 1,  // 当前页码
-  total: 0
+  total: 0         // 总条数
 });
 
+// 加载状态
 const loading = ref(false);
+// 表格数据列表
 const dataList = ref([]);
+// 多选选中项
 const multipleSelection = ref<number[]>([]);
+// 编辑单元格模态框显示状态
 const editVisible = ref(false);
+// 当前编辑行数据
 const currentRow = ref<CabinetCellDTO>();
 
+// 路由实例
 const route = useRoute();
 
-onMounted(() => {
+// 柜机列表数据
+const cabinets = ref<SmartCabinetDTO[]>([]);
+
+onMounted(async () => {
+  const { data } = await allCabinets();
+  cabinets.value = data;
   if (route.query.cabinetId) {
     searchFormParams.value.cabinetId = Number(route.query.cabinetId);
-    getList();
   }
+  getList();
 });
 onBeforeRouteUpdate(() => {
   if (route.query.cabinetId) {
@@ -55,24 +73,33 @@ onBeforeRouteUpdate(() => {
   }
 });
 
+/**
+ * 获取单元格列表数据
+ * @returns {Promise<void>}
+ */
 const getList = async () => {
   try {
-    loading.value = true;
+    loading.value = true; // 显示加载状态
+    // 调用API获取单元格列表
     const { data } = await getCabinetCellList({
-      ...searchFormParams.value,
+      ...searchFormParams.value, // 搜索参数
-      pageSize: pagination.value.pageSize,
+      pageSize: pagination.value.pageSize, // 每页数量
-      pageNum: pagination.value.currentPage
+      pageNum: pagination.value.currentPage // 当前页码
     });
-    dataList.value = data.rows;
+    dataList.value = data.rows; // 更新表格数据
-    pagination.value.total = data.total;
+    pagination.value.total = data.total; // 更新总条数
   } finally {
-    loading.value = false;
+    loading.value = false; // 隐藏加载状态
   }
 };
 
+/**
+ * 搜索按钮点击事件
+ * 重置页码为第一页并重新获取数据
+ */
 const onSearch = () => {
-  pagination.value.currentPage = 1;
+  pagination.value.currentPage = 1; // 重置页码
-  getList();
+  getList(); // 重新获取数据
 };
 
 const resetForm = () => {
@@ -90,13 +117,18 @@ const onCurrentChange = (val: number) => {
   getList();
 };
 
+/**
+ * 删除单元格
+ * @param {CabinetCellDTO} row - 要删除的单元格数据
+ */
 const handleDelete = async (row: CabinetCellDTO) => {
   try {
+    // 调用API删除单元格
     await deleteCabinetCell(row.cellId!.toString());
-    ElMessage.success("删除成功");
+    ElMessage.success("删除成功"); // 显示成功消息
-    getList();
+    getList(); // 刷新列表
   } catch (error) {
-    console.error("删除失败", error);
+    console.error("删除失败", error); // 打印错误信息
   }
 };
 
@@ -128,6 +160,11 @@ const handleEdit = (row: CabinetCellDTO) => {
   editVisible.value = true;
 };
 
+/**
+ * 转换单元格类型为中文描述
+ * @param {number} cellType - 单元格类型编号
+ * @returns {string} 单元格类型中文描述
+ */
 const switchCellType = (cellType: number) => {
   switch (cellType) {
     case 1:
@@ -146,7 +183,24 @@ const switchCellType = (cellType: number) => {
 </script>
 
 <template>
-  <div class="main">
+  <div class="main flex">
+    <!-- 左侧柜机列表 -->
+    <div class="w-[200px] pr-4 border-r h-full left-list">
+      <div class="text-lg font-bold mb-4 px-2">柜机列表</div>
+      <div class="h-[calc(100vh-180px)] overflow-y-auto">
+        <div class="cabinet-list">
+          <div v-for="cabinet in cabinets" :key="cabinet.cabinetId"
+            class="cabinet-item p-3 mb-2 cursor-pointer rounded hover:bg-gray-100 transition-colors"
+            :class="{ 'bg-blue-50': searchFormParams.cabinetId === cabinet.cabinetId }"
+            @click="searchFormParams.cabinetId = cabinet.cabinetId; onSearch()">
+            {{ cabinet.cabinetName }}
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 右侧内容 -->
+    <div class="flex-1 pl-4">
       <el-form ref="formRef" :inline="true" :model="searchFormParams"
         class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]">
         <el-form-item label="柜体ID：" prop="cabinetId">
@@ -229,6 +283,20 @@ const switchCellType = (cellType: number) => {
         @refresh="getList" />
       <cell-edit-modal v-model:visible="editVisible" :row="currentRow" @refresh="getList" />
     </div>
+  </div>
 </template>
 
-<style scoped></style>
+<style lang="scss" scoped>
+.flex {
+  display: flex;
+}
+
+.border-r {
+  border-right: 1px solid #ebeef5;
+}
+
+.left-list {
+  background: #FFFFFF;
+  padding: 15px;
+}
+</style>

src/views/cabinet/shop/index.vue

@@ -12,6 +12,7 @@ import Qrcode from "@iconify-icons/ep/iphone";
 import { ElMessage, ElMessageBox } from "element-plus";
 import ShopFormModal from "./shop-form-modal.vue";
 import ReQrcode from "@/components/ReQrcode";
+import { copyTextToClipboard } from "@pureadmin/utils";
 
 defineOptions({
   name: "Shop"
@@ -123,6 +124,12 @@ const showQrCode = (shopId: number) => {
   qrVisible.value = true;
 };
 
+const copyLink = () => {
+  const url = `http://wxshop.ab98.cn/shop-api/api/shop/wechatAuth?shopId=${currentShopId.value}`;
+  const success = copyTextToClipboard(url);
+  success ? ElMessage.success('链接复制成功') : ElMessage.error('复制失败，请手动复制');
+};
+
 getList();
 </script>
 
@@ -188,6 +195,9 @@ getList();
         <ReQrcode :text="`http://wxshop.ab98.cn/shop-api/api/shop/wechatAuth?shopId=${currentShopId}`"
           :options="{ width: 200 }" />
         <div class="mt-2 text-sm text-gray-500">微信扫码访问</div>
+        <el-button class="mt-2" type="primary" size="small" @click="copyLink">
+          复制链接
+        </el-button>
       </div>
     </el-dialog>
   </div>

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

@@ -261,6 +261,7 @@ const handleClearGoods = async (row: CabinetCellDTO) => {
         <el-table ref="tableRef" v-loading="loading" :data="dataList" row-key="cellId"
           @selection-change="handleSelectionChange" border>
           <el-table-column label="格口ID" prop="cellId" width="80" />
+          <el-table-column label="格口号" prop="cellNo" width="80" />
           <el-table-column label="商品图片" width="120">
             <template #default="{ row }">
               <el-image :src="row.coverImg" :preview-src-list="[row.coverImg]" :z-index="9999"