shop-front-end/src/views/cabinet/smart-cabinet-card/detail.vue

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getSmartCabinetDetailApi, type SmartCabinetDTO } from "@/api/cabinet/smart-cabinet";
import { changeGoodsCellsStock, clearGoodsCells, getCabinetCellList, type CabinetCellDTO } from "@/api/cabinet/cabinet-cell";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { CabinetImgMap } from "@/utils/cabinetImgMap";
import GatewayConfigModal from "@/views/cabinet/smart-cabinet/GatewayConfigModal.vue";
import ShopConfigModal from "@/views/cabinet/smart-cabinet/ShopConfigModal.vue";
import MainCabinetConfigModal from "@/views/cabinet/smart-cabinet/MainCabinetConfigModal.vue";
import CabinetGoodsConfigModal from "@/views/shop/cabinet-goods/cabinet-goods-config-modal.vue";
import { ElMessage, ElMessageBox } from "element-plus";
const { VITE_PUBLIC_IMG_PATH: IMG_PATH } = import.meta.env;
import EditPen from "@iconify-icons/ep/edit-pen";
import Delete from "@iconify-icons/ep/delete";
import AddFill from "@iconify-icons/ri/add-circle-line";
import Search from "@iconify-icons/ep/search";
import Refresh from "@iconify-icons/ep/refresh";
import { getGoodsInfo } from "@/api/shop/goods";

defineOptions({
  name: "SmartCabinetDetail"
});

const router = useRouter();
const route = useRoute();
const cabinetInfo = ref<SmartCabinetDTO>({
  cabinetName: "",
  cabinetType: 0,
  templateNo: "",
  lockControlNo: 0,
  location: 0
});
const loading = ref(false);
const activeTab = ref('cells');
const cabinetId = ref<number>(0);
const gatewayConfigVisible = ref(false);
const shopConfigVisible = ref(false);
const mainCabinetConfigVisible = ref(false);
const cellList = ref<CabinetCellDTO[]>([]);
const cellPagination = ref({
  pageSize: 5,
  currentPage: 1,
  total: 0
});
const goodsConfigVisible = ref(false);
const currentCellId = ref<number>();

function handleConfigure(row: CabinetCellDTO) {
  currentCellId.value = row.cellId;
  goodsConfigVisible.value = true;
}

async function handleStockConfig(row: CabinetCellDTO) {
  try {
    const { data } = await getGoodsInfo(row.goodsId!);
    const remainingStock = data.stock - data.totalStock + row.stock;

    const { value } = await ElMessageBox.prompt(
      `请输入${row.goodsName || '未配置商品'}的库存数量（本次最多可分配：${remainingStock}）。\n      若可分配数量不足，请先调整商品列表中的库存。`,
      '配置库存',
      {
        inputPattern: /^0$|^[1-9]\d*$/,
        inputValue: row.stock?.toString(),
        inputErrorMessage: '请输入有效的非负整数',
        inputValidator: (inputValue: string) => {
          const num = Number(inputValue);
          if (num > remainingStock) {
            return '分配数量不能超过剩余库存';
          }
          return true;
        }
      }
    );

    if (Number(value) > remainingStock) {
      ElMessage.warning('分配数量不能超过剩余库存');
      return;
    }

    await changeGoodsCellsStock(row.cellId!, Number(value));
    ElMessage.success('库存更新成功');
    fetchCellList();
  } catch (error) {
    console.error('库存配置取消或失败', error);
  }
}

async function handleClearGoods(row: CabinetCellDTO) {
  try {
    await ElMessageBox.confirm(
      `确认要下架${row.goodsName || '未配置商品'}吗？`,
      '警告',
      { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }
    );
    await clearGoodsCells(row.cellId!);
    ElMessage.success('商品下架成功');
    fetchCellList();
  } catch (error) {
    console.error('操作取消或失败', error);
  }
}

async function fetchCabinetDetail() {
  try {
    loading.value = true;
    const { data } = await getSmartCabinetDetailApi(cabinetId.value);
    cabinetInfo.value = data;
  } finally {
    loading.value = false;
  }
}

function switchCellType(cellType: number) {
  switch (cellType) {
    case 1: return '小格';
    case 2: return '中格';
    case 3: return '大格';
    case 4: return '超大格';
    default: return '未知';
  }
}

async function fetchCellList() {
  try {
    loading.value = true;
    const { data } = await getCabinetCellList({
      cabinetId: cabinetId.value,
      pageSize: cellPagination.value.pageSize,
      pageNum: cellPagination.value.currentPage
    });
    cellList.value = data.rows;
    cellPagination.value.total = data.total;
  } finally {
    loading.value = false;
  }
}

function handleCellSizeChange(val: number) {
  cellPagination.value.pageSize = val;
  fetchCellList();
}

function handleCellPageChange(val: number) {
  cellPagination.value.currentPage = val;
  fetchCellList();
}

onMounted(() => {
  cabinetId.value = Number(route.query.id);
  fetchCabinetDetail();
  fetchCellList();
});
</script>

<template>
  <div class="detail-container">
    <div class="flex-container">
      <el-card class="cabinet-info-card">
        <div class="cabinet-header">
          <img :src="`${IMG_PATH}img/cabinet/${CabinetImgMap[cabinetInfo.templateNo]?.img || 'default.jpg'}`"
            class="cabinet-image" />
          <div class="cabinet-name">{{ cabinetInfo.cabinetName }}</div>
        </div>

        <el-divider />

        <el-descriptions class="cabinet-details" :column="1" border>
          <el-descriptions-item label="柜体ID">{{ cabinetInfo.cabinetId }}</el-descriptions-item>
          <el-descriptions-item label="柜体类型">
            {{ cabinetInfo.cabinetType === 0 ? '主柜' : '副柜' }}
          </el-descriptions-item>
          <el-descriptions-item label="模板">
            {{ CabinetImgMap[cabinetInfo.templateNo]?.name || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="归属商店">
            {{ cabinetInfo.shopName || '-' }}
            <el-button type="success" link :icon="useRenderIcon('ep:shop')" @click="shopConfigVisible = true">
              配置
            </el-button>
          </el-descriptions-item>
          <el-descriptions-item label="MQTT网关">
            {{ cabinetInfo.mqttServerId || '-' }}
            <el-button type="warning" link :icon="useRenderIcon('ant-design:gateway-outlined')"
              @click="gatewayConfigVisible = true">
              配置
            </el-button>
          </el-descriptions-item>
          <el-descriptions-item label="归属主柜" v-if="cabinetInfo.cabinetType === 1">
            {{ cabinetInfo.mainCabinetName || '-' }}
            <el-button type="primary" link :icon="useRenderIcon('ep:setting')" @click="mainCabinetConfigVisible = true">
              配置
            </el-button>
          </el-descriptions-item>
        </el-descriptions>
      </el-card>

      <el-card class="info-card">
        <div class="tab-header">
          <el-tabs type="card" v-model="activeTab">
            <el-tab-pane label="格口管理" name="cells"></el-tab-pane>
            <el-tab-pane label="基本信息" name="basic"></el-tab-pane>
          </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-descriptions>

        <div class="cell-details" v-if="activeTab === 'cells'">
          <el-table v-loading="loading" :data="cellList" 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]" fit="cover" class="rounded" width="60"
                  height="60" />
              </template>
            </el-table-column>
            <el-table-column label="商品名称">
              <template #default="{ row }">
                {{ row.goodsId ? row.goodsName : '未配置商品' }}
              </template>
            </el-table-column>
            <el-table-column label="价格" prop="price" width="80" />
            <el-table-column label="库存" prop="stock" width="80" />
            <el-table-column label="单元格类型" prop="cellType" width="120">
              <template #default="{ row }">
                {{ switchCellType(row.cellType) }}
              </template>
            </el-table-column>
            <el-table-column label="购买次数" prop="orderCount" width="100" />
            <el-table-column label="相关信息" width="150" fixed="right">
              <template #default="{ row }">
                <el-button type="success" link :icon="useRenderIcon('document')"
                  @click="router.push({ path: '/shop/order/index', query: { cellId: row.cellId } })">
                  购买记录
                </el-button>
                <el-button type="warning" link :icon="useRenderIcon('document')"
                  @click="router.push({ path: '/cabinet/operation/index', query: { cellId: row.cellId } })">
                  开启记录
                </el-button>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="150" fixed="right">
              <template #default="{ row }">
                <el-button type="success" link :icon="useRenderIcon(AddFill)" @click="handleConfigure(row)">
                  配置商品
                </el-button>
                <el-button v-if="row.goodsId" type="warning" link :icon="useRenderIcon(EditPen)"
                  @click="handleStockConfig(row)">
                  配置库存
                </el-button>
                <el-button v-if="row.goodsId" type="danger" link :icon="useRenderIcon(Delete)"
                  @click="handleClearGoods(row)">
                  下架商品
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination v-model:current-page="cellPagination.currentPage" v-model:page-size="cellPagination.pageSize"
            :page-sizes="[5, 8, 16, 24, 32]" layout="total, sizes, prev, pager, next, jumper"
            :total="cellPagination.total" @size-change="handleCellSizeChange" @current-change="handleCellPageChange"
            class="pagination" />
        </div>
      </el-card>
      <GatewayConfigModal v-model="gatewayConfigVisible" :cabinet-id="cabinetId" @refresh="fetchCabinetDetail" />
      <ShopConfigModal v-model="shopConfigVisible" :cabinet-id="cabinetId" @refresh="fetchCabinetDetail" />
      <MainCabinetConfigModal v-model="mainCabinetConfigVisible" :cabinet-id="cabinetId"
        @refresh="fetchCabinetDetail" />
      <el-drawer v-model="goodsConfigVisible" title="配置商品" size="50%" direction="rtl">
        <CabinetGoodsConfigModal v-model="goodsConfigVisible" :cell-id="currentCellId" @refresh="fetchCellList" />
      </el-drawer>
    </div>
  </div>
</template>

<style scoped lang="scss">
.detail-container {
  display: flex;
  flex-direction: column;
  height: 100%;

  .flex-container {
    display: flex;
    flex: 1;
    gap: 12px;
    min-height: 0;

    .cabinet-info-card {
      width: 20%;
      height: 88vh;
    }

    .info-card {
      width: 80%;
      height: 88vh;
      overflow-y: auto;
    }
  }

  .cabinet-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;

    .cabinet-image {
      width: 100%;
      height: 420px;
      object-fit: contain;
      margin-bottom: 15px;
    }

    .cabinet-name {
      font-size: 20px;
      font-weight: bold;
    }
  }

  .tab-header {
    margin-bottom: 20px;
  }
}
</style>