feat(柜格管理): 添加重置柜格密码功能并优化显示样式

- 在cabinet-cell.ts中新增resetCellById接口
- 在cell-edit-modal.vue中添加密码重置功能及按钮
- 优化detail.vue中柜格卡片显示样式，区分占用状态
- 调整部分代码格式和缩进

src/api/cabinet/cabinet-cell.ts

@@ -118,6 +118,11 @@ export const configureGoodsCellsStock = (cellId: number, goodsId: number, stock:
 export const changeGoodsCellsStock = (cellId: number, stock: number) => {
   return http.request<ResponseData<void>>('put', `/cabinet/cell/changeGoodsCellsStock/${cellId}/${stock}`);
 };
+
 export const clearGoodsCells = (cellId: number) => {
   return http.request<ResponseData<void>>('put', `/cabinet/cell/clearGoodsCells/${cellId}`);
 };
+
+export const resetCellById = (cellId: number) => {
+  return http.request<ResponseData<void>>('put', `/cabinet/cell/reset/${cellId}`);
+};

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

@@ -2,7 +2,7 @@
 import { ref, reactive, watch } from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
-import { updateCabinetCell, clearGoodsCells } from "@/api/cabinet/cabinet-cell";
+import { updateCabinetCell, clearGoodsCells, resetCellById } from "@/api/cabinet/cabinet-cell";
 import Confirm from "@iconify-icons/ep/check";
 import type { FormRules } from 'element-plus';
 
@@ -96,6 +96,17 @@ const closeDialog = () => {
   emit('update:modelValue', false);
 };
 
+const handleResetPassword = async () => {
+  try {
+    await resetCellById(props.row.cellId);
+    formData.password = '';
+    ElMessage.success('密码已重置');
+    emit("refresh");
+  } catch (error) {
+    console.error('重置密码失败', error);
+  }
+};
+
 async function handleClearGoods() {
   try {
     await ElMessageBox.confirm(
@@ -143,6 +154,9 @@ watch(() => props.row, (val) => {
     </el-form-item>
     <el-form-item v-if="props.mode == 5" label="密码" prop="password">
       <el-input v-model="formData.password" placeholder="请输入密码（可选）" style="width: 200px;" />
+      <el-button @click="handleResetPassword" type="text" size="small" style="margin-left: 10px;">
+        清空
+      </el-button>
     </el-form-item>
 
     <el-form-item v-if="props.row.goodsId" label="商品ID">
@@ -173,15 +187,18 @@ watch(() => props.row, (val) => {
 </template>
 
 <style scoped lang="scss">
-.save-btn, .clear-btn {
+.save-btn,
+.clear-btn {
   margin-right: 10px;
 }
+
 .price-input-item .el-input__wrapper {
   border-radius: 6px;
   border-color: #dcdfe6;
   box-shadow: 0 0 0 0 rgba(144, 147, 153, 0);
   transition: all 0.3s;
 }
+
 .price-input-item .el-input__wrapper:focus-within {
   border-color: #409eff;
   box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);

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

@@ -49,7 +49,7 @@ const shopInfo = ref<ShopDTO>({
   /** 封面图URL */
   coverImg: '',
   /** 归属类型（0-借还柜 1-固资通） */
-  belongType:0,
+  belongType: 0,
   /** 运行模式（0-支付模式 1-审批模式 2-借还模式 3-会员模式 4-耗材模式） */
   mode: -1,
   /** 借呗支付（1-正常使用 0-禁止使用） */
@@ -339,7 +339,7 @@ onMounted(() => {
           <el-descriptions-item label="名称">{{ cabinetInfo.cabinetName }}</el-descriptions-item>
           <el-descriptions-item label="模式">{{ getModeText(shopInfo.mode) }}</el-descriptions-item>
           <el-descriptions-item label="格式">{{ CabinetImgMap[cabinetInfo.templateNo]?.name || '-'
-            }}</el-descriptions-item>
+          }}</el-descriptions-item>
           <el-descriptions-item label="已用">{{ cabinetInfo.usedCells || '0' }}</el-descriptions-item>
           <el-descriptions-item label="未用">{{ cabinetInfo.availableCells || '0' }}</el-descriptions-item>
           <el-descriptions-item label="柜址">{{ cabinetInfo.shopName || '-' }}</el-descriptions-item>
@@ -370,7 +370,7 @@ onMounted(() => {
             <el-descriptions-item label="柜体名称">{{ cabinetInfo.cabinetName || '-' }}</el-descriptions-item>
             <el-descriptions-item label="运行模式">{{ getModeText(shopInfo.mode) }}</el-descriptions-item>
             <el-descriptions-item label="柜体格式">{{ CabinetImgMap[cabinetInfo.templateNo]?.name || '-'
-              }}</el-descriptions-item>
+            }}</el-descriptions-item>
             <el-descriptions-item label="柜体地址">{{ cabinetInfo.shopName || '-' }}
               <el-button v-if="hasPermission('shop:cabinet:write')" type="success" link
                 @click="shopConfigVisible = true">
@@ -390,7 +390,8 @@ onMounted(() => {
             <!-- <el-descriptions-item label="商品模式">
               {{ cabinetInfo.belongType === 0 ? '借还模式' : '固资模式' }}
             </el-descriptions-item> -->
-            <el-descriptions-item label="归还期限">{{ cabinetInfo.returnDeadline === 0 ? '不限制' : cabinetInfo.returnDeadline + '天' }}</el-descriptions-item>
+            <el-descriptions-item label="归还期限">{{ cabinetInfo.returnDeadline === 0 ? '不限制' : cabinetInfo.returnDeadline
+              + '天' }}</el-descriptions-item>
           </el-descriptions>
         </div>
 
@@ -415,10 +416,24 @@ onMounted(() => {
             <el-col v-for="(item, index) in cellList" :key="item.cellId" :xs="24" :sm="12" :md="8" :lg="4" :xl="4">
               <el-card class="cell-card" :body-style="{ padding: '8px 10px' }">
                 <div class="card-content">
-                  <el-image v-if="item.coverImg" :src="item.coverImg" class="cell-image" fit="contain" />
+                  <el-image v-if="item.coverImg" :src="item.coverImg"
-                  <el-image v-if="item.faceImg" :src="item.faceImg" class="cell-image" fit="contain" />
+                    :class="['cell-image', shopInfo?.mode === 5 ? 'cell-image-full' : '']" fit="contain" />
-                  <svg v-if="!item.coverImg && !item.faceImg" width="80" height="80" viewBox="0 0 100 100"
+                  <el-image v-if="item.faceImg" :src="item.faceImg"
-                    xmlns="http://www.w3.org/2000/svg" class="cell-image">
+                    :class="['cell-image', shopInfo?.mode === 5 ? 'cell-image-full' : '']" fit="contain" />
+                  <svg v-if="!item.coverImg && !item.faceImg && item.usageStatus === 2" width="80" height="80"
+                    viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"
+                    :class="['cell-image', shopInfo?.mode === 5 ? 'cell-image-full' : '']">
+                    <rect x="5" y="5" width="90" height="90" rx="10" fill="#FFF9C4" stroke="#FBC02D" stroke-width="2" />
+                    <!-- 添加在矩形和文本之间的虚线 -->
+                    <line x1="20" y1="70" x2="80" y2="70" stroke="#F57F17" stroke-width="1" stroke-dasharray="4,2" />
+                    <text x="50" y="45" font-family="Arial, sans-serif" font-size="24" font-weight="bold" fill="#F57F17"
+                      text-anchor="middle">占用</text>
+                    <text x="50" y="85" font-family="Arial, sans-serif" font-size="12" fill="#F57F17"
+                      text-anchor="middle">{{ switchCellType(item.cellType) }}</text>
+                  </svg>
+                  <svg v-if="!item.coverImg && !item.faceImg && item.usageStatus !== 2" width="80" height="80"
+                    viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"
+                    :class="['cell-image', shopInfo?.mode === 5 ? 'cell-image-full' : '']">
                     <rect x="5" y="5" width="90" height="90" rx="10" fill="#E8F5E9" stroke="#81C784" stroke-width="2" />
                     <!-- 添加在矩形和文本之间的虚线 -->
                     <line x1="20" y1="70" x2="80" y2="70" stroke="#2E7D32" stroke-width="1" stroke-dasharray="4,2" />
@@ -427,7 +442,7 @@ onMounted(() => {
                     <text x="50" y="85" font-family="Arial, sans-serif" font-size="12" fill="#2E7D32"
                       text-anchor="middle">{{ switchCellType(item.cellType) }}</text>
                   </svg>
-                  <div class="cell-info">
+                  <div v-if="shopInfo?.mode !== 5" class="cell-info">
                     <!-- <div class="cell-no">格口号: {{ item.cellNo }}</div> -->
                     <div class="price">价格: {{ shopInfo?.mode == 3 ? item.cellPrice : item.price }}</div>
                     <div class="stock">库存: {{ item.stock }}</div>
@@ -556,6 +571,14 @@ onMounted(() => {
       margin-bottom: 12px;
     }
 
+    .cell-image-full {
+      width: 100%;
+      height: 130px;
+      object-fit: contain;
+      border-radius: 4px;
+      margin-bottom: 12px;
+    }
+
     .cell-info {
       padding: 18px 8px 0 8px;