feat: 添加120口机柜的两种新图片并更新映射

在`cabinetImgMap.ts`中添加了120口机柜的两种新图片配置，分别为`cabinet_120_6X20.jpg`和`cabinet_120_4X30.jpg`，并更新了对应的映射关系。新增图片文件已放置在`public/img/cabinet`目录下。
feat: 添加企业微信用户余额修改功能
2025-05-19 10:37:10 +08:00 · 2025-05-19 08:21:44 +08:00 · 2025-05-17 16:38:00 +08:00 · 2025-05-17 09:57:22 +08:00
18 changed files with 559 additions and 183 deletions
--- a/public/img/cabinet/cabinet_120_4X30.jpg
+++ b/public/img/cabinet/cabinet_120_4X30.jpg
--- a/public/img/cabinet/cabinet_120_6X20.jpg
+++ b/public/img/cabinet/cabinet_120_6X20.jpg
--- a/public/img/cabinet/cabinet_4.jpg
+++ b/public/img/cabinet/cabinet_4.jpg
--- a/src/api/qy/qyUser.ts
+++ b/src/api/qy/qyUser.ts
@ -1,15 +1,18 @@
 import { http } from "@/utils/http";
+import { UserDTO } from "../system/user";

 /**
 * 企业微信用户信息
 */
 export interface QyUserDTO {
+  sysUser?: UserDTO;
  /** 用户ID（导出列：用户ID） */
  id?: number;
  /** 全局唯一ID（导出列：全局唯一ID） */
  openUserid?: string;
  /** 企业用户ID（导出列：企业用户ID） */
  userid?: string;
+  openid?: string;
  /** 用户姓名（导出列：用户姓名） */
  name?: string;
  /** 手机号码（导出列：手机号码） */
@ -114,3 +117,7 @@ export const syncQyUserApi = (params: { corpid: string; code: string }) => {
 export const exportQyUserExcelApi = (params: QyUserQuery, fileName: string) => {
  return http.download("/qywx/users/excel", fileName, { params });
 };
+
+export const getQyUserDetailApi = (id: number) => {
+  return http.request<ResponseData<QyUserDTO>>("get", `/qywx/users/detail/${id}`);
+};
--- a/src/api/shop/order.ts
+++ b/src/api/shop/order.ts
@ -7,6 +7,10 @@ export interface OrderQuery extends BasePageQuery {
   * 微信openid
   */
  openid?: string;
+  /**
+   * 企业微信用户ID或汇邦云用户ID
+   */
+  userid?: string;
  /** 柜机id */
  cabinetId?: number;
  /** 格口id */
--- a/src/layout/components/tag/index.vue
+++ b/src/layout/components/tag/index.vue
@ -92,15 +92,15 @@ const moveToView = async (index: number): Promise<void> => {
  } else if (
    tabItemElOffsetLeft > -translateX.value &&
    tabItemElOffsetLeft + tabItemOffsetWidth <
-      -translateX.value + scrollbarDomWidth
+    -translateX.value + scrollbarDomWidth
  ) {
    // 标签在可视区域
    translateX.value = Math.min(
      0,
      scrollbarDomWidth -
-        tabItemOffsetWidth -
-        tabItemElOffsetLeft -
-        tabNavPadding
+      tabItemOffsetWidth -
+      tabItemElOffsetLeft -
+      tabNavPadding
    );
  } else {
    // 标签在可视区域右侧
@ -455,7 +455,10 @@ function tagOnClick(item) {
      router.push({ name });
    }
  } else {
-    router.push({ path });
+    router.push({
+      path,
+      query: item.query
+    });
  }
  // showMenuModel(item?.path, item?.query);
 }
@ -516,43 +519,25 @@ onBeforeUnmount(() => {
    </span>
    <div ref="scrollbarDom" class="scroll-container">
      <div class="tab select-none" ref="tabDom" :style="getTabStyle">
-        <div
-          :ref="'dynamic' + index"
-          v-for="(item, index) in multiTags"
-          :key="index"
-          :class="[
-            'scroll-item is-closable',
-            linkIsActive(item),
-            route.path === item.path && showModel === 'card'
-              ? 'card-active'
-              : ''
-          ]"
-          @contextmenu.prevent="openMenu(item, $event)"
-          @mouseenter.prevent="onMouseenter(index)"
-          @mouseleave.prevent="onMouseleave(index)"
-          @click="tagOnClick(item)"
-        >
-          <router-link
-            :to="item.path"
-            class="dark:!text-text_color_primary dark:hover:!text-primary"
-          >
+        <div :ref="'dynamic' + index" v-for="(item, index) in multiTags" :key="index" :class="[
+          'scroll-item is-closable',
+          linkIsActive(item),
+          route.path === item.path && showModel === 'card'
+            ? 'card-active'
+            : ''
+        ]" @contextmenu.prevent="openMenu(item, $event)" @mouseenter.prevent="onMouseenter(index)"
+          @mouseleave.prevent="onMouseleave(index)" @click="tagOnClick(item)">
+          <router-link :to="item.path" class="dark:!text-text_color_primary dark:hover:!text-primary">
            {{ item.meta.title }}
          </router-link>
-          <span
-            v-if="
-              iconIsActive(item, index) ||
-              (index === activeIndex && index !== 0)
-            "
-            class="el-icon-close"
-            @click.stop="deleteMenu(item)"
-          >
+          <span v-if="
+            iconIsActive(item, index) ||
+            (index === activeIndex && index !== 0)
+          " class="el-icon-close" @click.stop="deleteMenu(item)">
            <IconifyIconOffline :icon="CloseBold" />
          </span>
-          <!-- <div
-            :ref="'schedule' + index"
-            v-if="showModel !== 'card'"
-            :class="[scheduleIsActive(item)]"
-          /> -->
+          <div :ref="'schedule' + index" v-if="showModel !== 'card'" style="display: none;"
+            :class="[scheduleIsActive(item)]" />
        </div>
      </div>
    </div>
@ -561,17 +546,8 @@ onBeforeUnmount(() => {
    </span>
    <!-- 右键菜单按钮 -->
    <transition name="el-zoom-in-top">
-      <ul
-        v-show="visible"
-        :key="Math.random()"
-        :style="getContextMenuStyle"
-        class="contextmenu"
-      >
-        <div
-          v-for="(item, key) in tagsViews.slice(0, 6)"
-          :key="key"
-          style="display: flex; align-items: center"
-        >
+      <ul v-show="visible" :key="Math.random()" :style="getContextMenuStyle" class="contextmenu">
+        <div v-for="(item, key) in tagsViews.slice(0, 6)" :key="key" style="display: flex; align-items: center">
          <li v-if="item.show" @click="selectTag(key, item)">
            <IconifyIconOffline :icon="item.icon" />
            {{ item.text }}
@ -580,23 +556,14 @@ onBeforeUnmount(() => {
      </ul>
    </transition>
    <!-- 右侧功能按钮 -->
-    <el-dropdown
-      trigger="click"
-      placement="bottom-end"
-      @command="handleCommand"
-    >
+    <el-dropdown trigger="click" placement="bottom-end" @command="handleCommand">
      <span class="arrow-down">
        <IconifyIconOffline :icon="ArrowDown" class="dark:text-white" />
      </span>
      <template #dropdown>
        <el-dropdown-menu>
-          <el-dropdown-item
-            v-for="(item, key) in tagsViews"
-            :key="key"
-            :command="{ key, item }"
-            :divided="item.divided"
-            :disabled="item.disabled"
-          >
+          <el-dropdown-item v-for="(item, key) in tagsViews" :key="key" :command="{ key, item }" :divided="item.divided"
+            :disabled="item.disabled">
            <IconifyIconOffline :icon="item.icon" />
            {{ item.text }}
          </el-dropdown-item>
--- a/src/layout/hooks/useTag.ts
+++ b/src/layout/hooks/useTag.ts
@ -128,7 +128,11 @@ export function useTags() {
        return isEqual(route.params, item.params) ? previous : next;
      }
    } else {
-      return route.path === item.path ? previous : next;
+      const route_id = String(route.query?.id);
+      const item_id = String(item.query?.id);
+      return route.path === item.path &&
+        route_id == item_id
+        ? previous : next;
    }
  }

--- a/src/router/modules/global.ts
+++ b/src/router/modules/global.ts
@ -31,6 +31,14 @@ export default {
      meta: {
        title: "柜机详情"
      }
+    },
+    {
+      path: "/user/qy/detail",
+      name: "QyUserDetail",
+      component: () => import("@/views/user/qy/detail.vue"),
+      meta: {
+        title: "用户详情"
+      }
    }
  ]
 } as RouteConfigsTable;
--- a/src/utils/cabinetImgMap.ts
+++ b/src/utils/cabinetImgMap.ts
@ -28,7 +28,15 @@ export const CabinetImgMap = {
    name: "60口机柜",
  },
  8: {
-    img: "cabinet_120.jpg",
-    name: "120口机柜",
+    img: "cabinet_120_6X20.jpg",
+    name: "120口机柜6X20",
+  },
+  9: {
+    img: "cabinet_4.jpg",
+    name: "4口机柜",
+  },
+  10: {
+    img: "cabinet_120_4X30.jpg",
+    name: "120口机柜4X30",
  },
 }
--- a/src/views/cabinet/smart-cabinet-card/detail.vue
+++ b/src/views/cabinet/smart-cabinet-card/detail.vue
@ -1,18 +1,28 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
-import { useRoute } from "vue-router";
+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: "",
@ -22,11 +32,74 @@ const cabinetInfo = ref<SmartCabinetDTO>({
  location: 0
 });
 const loading = ref(false);
-const activeTab = ref('basic');
+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 {
@ -38,9 +111,45 @@ async function fetchCabinetDetail() {
  }
 }

+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>

@ -89,8 +198,8 @@ onMounted(() => {
      <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-tab-pane label="单元格配置" name="cells"></el-tab-pane>
          </el-tabs>
        </div>

@ -101,15 +210,70 @@ onMounted(() => {
          <el-descriptions-item label="操作员">{{ cabinetInfo.operator || '-' }}</el-descriptions-item>
        </el-descriptions>

-        <div class="info-details" v-if="activeTab === 'cells'">
-          <!-- 单元格配置内容 -->
+        <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" />
+      <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>
@ -123,15 +287,18 @@ onMounted(() => {
  .flex-container {
    display: flex;
    flex: 1;
-    gap: 20px;
+    gap: 12px;
    min-height: 0;

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

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

--- a/src/views/cabinet/smart-cabinet-card/index.vue
+++ b/src/views/cabinet/smart-cabinet-card/index.vue
@ -12,6 +12,7 @@ import Refresh from "@iconify-icons/ep/refresh";
 import View from "@iconify-icons/ep/view";
 import AddFill from "@iconify-icons/ri/add-circle-line";
 import SmartCabinetCardFormModal from "./smart-cabinet-card-form-modal.vue";
+import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
 const { VITE_PUBLIC_IMG_PATH: IMG_PATH } = import.meta.env;

 defineOptions({
@ -62,6 +63,16 @@ const resetForm = formEl => {
 };

 const handleViewDetail = (row: SmartCabinetDTO) => {
+  // 保存信息到标签页
+  useMultiTagsStoreHook().handleTags("push", {
+    path: `/cabinet/card/detail`,
+    name: "smartCabinetCardDetail",
+    query: { id: row.cabinetId },
+    meta: {
+      title: `${row.cabinetName}`,
+      dynamicLevel: 3
+    }
+  });
  router.push({
    path: '/cabinet/card/detail',
    query: {
--- a/src/views/shop/goods/goods-edit-modal.vue
+++ b/src/views/shop/goods/goods-edit-modal.vue
@ -2,10 +2,11 @@
 import { ref, reactive, watch } from "vue";
 import { ElMessage, FormRules } from "element-plus";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
-import { GoodsDTO, updateGoodsApi, addGoodsApi } from "@/api/shop/goods";
+import { GoodsDTO, updateGoodsApi, addGoodsApi, deleteGoodsApi } from "@/api/shop/goods";
 import { CategoryDTO, getCategoryAllApi } from "@/api/shop/category";
 import Confirm from "@iconify-icons/ep/check";
 import Upload from "@iconify-icons/ep/upload";
+import Delete from "@iconify-icons/ep/delete";
 const { VITE_APP_BASE_API } = import.meta.env;

 const props = defineProps({
@ -121,10 +122,20 @@ watch(
    if (val) initForm();
  }
 );
+const handleDelete = async () => {
+  try {
+    await deleteGoodsApi(formData.goodsId);
+    ElMessage.success("删除成功");
+    emit("refresh");
+    closeDialog();
+  } catch (error) {
+    console.error("删除失败", error);
+  }
+};
 </script>

 <template>
-  <el-dialog :title="isEdit ? '编辑商品' : '新增商品'" :model-value="visible" width="600px" @close="closeDialog">
+  <el-drawer :title="isEdit ? '编辑商品' : '新增商品'" :model-value="visible" size="50%" direction="rtl" @close="closeDialog">
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="80px" label-position="right">
      <el-form-item label="商品名称" prop="goodsName">
        <el-input v-model="formData.goodsName" placeholder="请输入商品名称" clearable />
@ -165,6 +176,15 @@ watch(
          <el-radio :label="2">下架</el-radio>
        </el-radio-group>
      </el-form-item>
+      <el-form-item label="操作">
+        <el-popconfirm :title="`确认删除【${row.goodsName}】？`" @confirm="handleDelete()">
+          <template #reference>
+            <el-button type="danger" link :icon="useRenderIcon(Delete)" class="right-btn">
+              删除该商品
+            </el-button>
+          </template>
+        </el-popconfirm>
+      </el-form-item>
    </el-form>

    <template #footer>
@ -173,7 +193,7 @@ watch(
        确认
      </el-button>
    </template>
-  </el-dialog>
+  </el-drawer>
 </template>

 <style scoped>
--- a/src/views/shop/goods/index.vue
+++ b/src/views/shop/goods/index.vue
@ -202,13 +202,13 @@ const handleEdit = (row: GoodsDTO) => {
              @click="currentRow = row; configVisible = true">
              配置格口
            </el-button> -->
-            <el-popconfirm :title="`确认删除【${row.goodsName}】？`" @confirm="handleDelete(row)">
+            <!-- <el-popconfirm :title="`确认删除【${row.goodsName}】？`" @confirm="handleDelete(row)">
              <template #reference>
                <el-button type="danger" link :icon="useRenderIcon(Delete)" class="right-btn">
                  删除
                </el-button>
              </template>
-            </el-popconfirm>
+            </el-popconfirm> -->
          </template>
        </el-table-column>
      </el-table>
--- a/src/views/user/ab98/index.vue
+++ b/src/views/user/ab98/index.vue
@ -9,6 +9,7 @@ import Search from "@iconify-icons/ep/search";
 import Refresh from "@iconify-icons/ep/refresh";
 import View from "@iconify-icons/ep/view";
 import { useRouter } from "vue-router";
+import { useMultiTagsStoreHook } from "@/store/modules/multiTags";

 defineOptions({
  name: "Ab98User"
@ -56,7 +57,17 @@ const resetForm = formEl => {
  onSearch();
 };

-const handleViewDetail = (row: any) => {
+const handleViewDetail = (row: Ab98UserDTO) => {
+  // 保存信息到标签页
+  useMultiTagsStoreHook().handleTags("push", {
+    path: `/user/ab98/detail`,
+    name: "ab98Detail",
+    query: { id: row.ab98UserId },
+    meta: {
+      title: `${row.name}`,
+      dynamicLevel: 3
+    }
+  });
  router.push({
    path: '/user/ab98/detail',
    query: {
--- a/src/views/user/qy/UserDetail.vue
+++ b/src/views/user/qy/UserDetail.vue
@ -1,50 +0,0 @@
-<template>
-  <el-form ref="formRef" label-width="120px" :model="formInline" :disabled="true">
-    <el-form-item label="用户ID">
-      <el-input v-model="formInline.userId" clearable />
-    </el-form-item>
-    <el-form-item label="用户名">
-      <el-input v-model="formInline.username" />
-    </el-form-item>
-    <el-form-item label="用户昵称">
-      <el-input v-model="formInline.nickname" />
-    </el-form-item>
-    <el-form-item label="性别">
-      <el-select v-model="formInline.sex">
-        <el-option label="男" :value="1" />
-        <el-option label="女" :value="0" />
-      </el-select>
-    </el-form-item>
-    <el-form-item label="手机号码">
-      <el-input v-model="formInline.phoneNumber" />
-    </el-form-item>
-    <el-form-item label="所属部门">
-      <el-input v-model="formInline.deptId" />
-    </el-form-item>
-    <el-form-item label="状态">
-      <el-switch v-model="formInline.status" :active-value="1" :inactive-value="0" active-text="启用"
-        inactive-text="停用" />
-    </el-form-item>
-  </el-form>
-</template>
-
-<script setup lang="ts">
-import { ref } from "vue";
-
-defineProps({
-  formInline: {
-    type: Object,
-    default: () => ({
-      userId: null,
-      username: "",
-      nickname: "",
-      sex: 1,
-      phoneNumber: "",
-      deptId: null,
-      status: 1
-    })
-  }
-});
-
-const formRef = ref();
-</script>
--- a/src/views/user/qy/detail.vue
+++ b/src/views/user/qy/detail.vue
@ -0,0 +1,187 @@
+<script setup lang="ts">
+import { ref, onMounted, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { type QyUserDTO, getQyUserDetailApi } from "@/api/qy/qyUser";
+import { getOrderListApi, type OrderDTO } from "@/api/shop/order";
+import BalanceEditModal from "./BalanceEditModal.vue";
+
+defineOptions({
+  name: "QyUserDetail"
+});
+
+const route = useRoute();
+const router = useRouter();
+const userInfo = ref<QyUserDTO>({});
+const loading = ref(false);
+const balanceVisible = ref(false);
+const currentBalance = ref(0);
+
+// 基础信息
+const basicInfo = ref({
+  registerTime: "",
+  lastLogin: "",
+  loginCount: 0,
+  device: ""
+});
+
+// 订单记录
+const orderRecords = ref<OrderDTO[]>([]);
+const pagination = ref({
+  pageSize: 5,
+  currentPage: 1,
+  total: 0
+});
+const orderLoading = ref(false);
+const activeTab = ref('basic');
+
+async function fetchOrders() {
+  try {
+    orderLoading.value = true;
+    const { data } = await getOrderListApi({
+      openid: userInfo.value.openid,
+      userid: userInfo.value.userid,
+      pageSize: pagination.value.pageSize,
+      pageNum: pagination.value.currentPage
+    });
+    orderRecords.value = data.rows;
+    pagination.value.total = data.total;
+  } finally {
+    orderLoading.value = false;
+  }
+}
+
+watch(activeTab, (newVal) => {
+  if (newVal === 'orders') {
+    fetchOrders();
+  }
+});
+
+async function fetchUserDetail() {
+  try {
+    loading.value = true;
+    const userId = route.query.id;
+    const { data } = await getQyUserDetailApi(Number(userId));
+    userInfo.value = data;
+    basicInfo.value.registerTime = data.createTimeStr || "";
+  } finally {
+    loading.value = false;
+  }
+}
+
+onMounted(() => {
+  fetchUserDetail();
+});
+async function handleModifyBalance(row: QyUserDTO) {
+  currentBalance.value = row.balance || 0;
+  balanceVisible.value = true;
+}
+
+</script>
+
+<template>
+  <div class="detail-container">
+    <div class="flex-container">
+      <el-card class="user-info-card">
+        <div class="user-header">
+          <el-avatar :size="100" :src="userInfo.avatar" fit="cover" shape="square">
+            <svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+              <circle cx="50" cy="50" r="48" fill="#f5f5f5" stroke="#e0e0e0" stroke-width="1" />
+              <circle cx="50" cy="40" r="12" fill="#9e9e9e" />
+              <rect x="40" y="52" width="20" height="30" rx="2" fill="#9e9e9e" />
+            </svg>
+          </el-avatar>
+          <div class="user-name">{{ userInfo.name }}</div>
+        </div>
+
+        <el-divider />
+
+        <el-descriptions class="user-details" :column="1" border>
+          <el-descriptions-item label="姓名">{{ userInfo.name }}</el-descriptions-item>
+          <el-descriptions-item label="手机号">{{ userInfo.mobile }}</el-descriptions-item>
+          <el-descriptions-item label="余额">¥{{ userInfo.balance?.toFixed(2) }} <el-button type="primary" size="small"
+              @click="handleModifyBalance(userInfo)">修改</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="basic"></el-tab-pane>
+            <el-tab-pane label="订单记录" name="orders"></el-tab-pane>
+          </el-tabs>
+        </div>
+
+        <el-descriptions class="info-details" v-if="activeTab === 'basic'" :column="2" border>
+          <el-descriptions-item label="用户ID">{{ userInfo.userid }}</el-descriptions-item>
+          <el-descriptions-item label="企业ID">{{ userInfo.corpid }}</el-descriptions-item>
+          <el-descriptions-item label="职务信息">{{ userInfo.position }}</el-descriptions-item>
+        </el-descriptions>
+
+        <div class="info-details" v-if="activeTab === 'orders'">
+          <el-table v-loading="orderLoading" :data="orderRecords" row-key="orderId" border>
+            <el-table-column label="订单ID" prop="orderId" width="120" />
+            <el-table-column label="商品名称" prop="goodsNames" width="180" />
+            <el-table-column label="订单金额" prop="totalAmount" width="120">
+              <template #default="{ row }">{{ row.totalAmount }}元</template>
+            </el-table-column>
+            <el-table-column label="订单状态" prop="status" width="120">
+              <template #default="{ row }">
+                <el-tag :type="row.status === 2 ? 'success' : row.status === 5 ? 'danger' : 'info'">
+                  {{ { 1: '待付款', 2: '已付款', 3: '已发货', 4: '已完成', 5: '已取消' }[row.status] }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column label="支付时间" prop="payTime" width="180">
+              <template #default="{ row }">
+                {{ row.payTime ? new Date(row.payTime).toLocaleString() : '-' }}
+              </template>
+            </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"
+            @size-change="fetchOrders" @current-change="fetchOrders" />
+        </div>
+      </el-card>
+    </div>
+    <BalanceEditModal v-model:visible="balanceVisible" :row="userInfo" @refresh="fetchUserDetail" />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.detail-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  .flex-container {
+    display: flex;
+    flex: 1;
+    gap: 20px;
+    min-height: 0;
+
+    .user-info-card {
+      width: 20%;
+    }
+
+    .info-card {
+      width: 80%;
+    }
+  }
+
+  .user-header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 20px;
+
+    .user-name {
+      margin-top: 15px;
+      font-size: 20px;
+      font-weight: bold;
+    }
+  }
+
+  .tab-header {
+    margin-bottom: 20px;
+  }
+}
+</style>
--- a/src/views/user/qy/hook.tsx
+++ b/src/views/user/qy/hook.tsx
@ -13,6 +13,8 @@ import { getQyDeptListApi } from "@/api/system/dept";
 import { getPostListApi } from "@/api/system/post";
 import { getRoleListApi } from "@/api/system/role";
 import { useWxStore } from "@/store/modules/wx";
+import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
+import { useRouter } from "vue-router";

 /**
 * 企业用户管理页面的组合式函数
@ -20,6 +22,7 @@ import { useWxStore } from "@/store/modules/wx";
 */
 export function useHook() {
  const wxStore = useWxStore(); // 微信相关状态管理
+  const router = useRouter();

  // 搜索表单参数
  const searchFormParams = reactive<QyUserQuery>({
@ -34,7 +37,7 @@ export function useHook() {
  const timeRange = ref<[string, string]>(); // 时间范围选择

  // 列表相关状态
-  const dataList = ref([]); // 用户列表数据
+  const dataList = ref<QyUserDTO[]>([]); // 用户列表数据
  const pageLoading = ref(true); // 加载状态
  const pagination = reactive<PaginationProps>({ // 分页配置
    total: 0,
@ -117,8 +120,23 @@ export function useHook() {
   * 查看用户详情
   * @param row 用户数据行
   */
-  const handleViewDetail = (row: any) => {
-    // TODO: 实现查看详情逻辑
+  const handleViewDetail = (row: QyUserDTO) => {
+    // 保存信息到标签页
+    useMultiTagsStoreHook().handleTags("push", {
+      path: `/user/qy/detail`,
+      name: "qyDetail",
+      query: { id: row.id },
+      meta: {
+        title: `${row.name}`,
+        dynamicLevel: 3
+      }
+    });
+    router.push({
+      path: '/user/qy/detail',
+      query: {
+        id: row.id
+      }
+    });
  };

  /**
--- a/src/views/user/qy/index.vue
+++ b/src/views/user/qy/index.vue
@ -7,6 +7,7 @@ import BalanceEditModal from "./BalanceEditModal.vue";

 import Search from "@iconify-icons/ep/search";
 import Refresh from "@iconify-icons/ep/refresh";
+import View from "@iconify-icons/ep/view";

 defineOptions({
  name: "QyUser"
@ -57,40 +58,31 @@ watch(

      <div class="grid-container">
        <el-row :gutter="20">
-          <el-col v-for="(item, index) in dataList" :key="item.id" :xs="24" :sm="12" :md="8" :lg="6">
-            <el-card class="user-card">
-              <div class="card-content">
-                <el-avatar :size="60" :src="item.avatar" fit="cover" shape="square" class="avatar">
-                  <template v-if="!item.avatar">
-                    <svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-                      <!-- 浅灰圆形背景 -->
-                      <circle cx="50" cy="50" r="48" fill="#f5f5f5" stroke="#e0e0e0" stroke-width="1" />
-                      <!-- 中灰人形图标 -->
-                      <circle cx="50" cy="40" r="12" fill="#9e9e9e" />
-                      <!-- 修改后的身体部分 - 矩形躯干 -->
-                      <rect x="40" y="52" width="20" height="30" rx="2" fill="#9e9e9e" />
-                    </svg>
-                  </template>
-                </el-avatar>
-                <div class="user-info">
-                  <div class="name">{{ item.name }}</div>
-                  <!-- <div class="gender">性别：{{ item.gender === '1' ? '男' : item.gender === '2' ? '女' : '' }}</div> -->
-                  <div class="create-time">创建时间：{{ item.createTimeStr }}</div>
-                  <div class="balance">余额：¥{{ item.balance?.toFixed(2) }}</div>
+          <el-col v-for="(item, index) in dataList" :key="index" :xs="24" :sm="12" :md="8" :lg="6">
+            <el-card class="user-card" :body-style="{ padding: '8px 20px' }">
+              <div class="card-wrapper">
+                <div class="card-content">
+                  <el-avatar :size="80" :src="item.avatar" fit="cover" shape="square" class="avatar">
+                    <template v-if="!item.avatar">
+                      <svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+                        <circle cx="50" cy="50" r="48" fill="#f5f5f5" stroke="#e0e0e0" stroke-width="1" />
+                        <circle cx="50" cy="40" r="12" fill="#9e9e9e" />
+                        <rect x="40" y="52" width="20" height="30" rx="2" fill="#9e9e9e" />
+                      </svg>
+                    </template>
+                  </el-avatar>
+                  <div class="user-info">
+                    <div class="name">姓名：{{ item.name }}</div>
+                    <div class="tel">电话：{{ item.mobile }}</div>
+                    <div class="balance">余额：{{ item.balance }}</div>
+                  </div>
+                </div>
+                <div class="card-gap"></div>
+                <div class="card-footer">
+                  <el-divider class="divider" />
+                  <el-button class="detail-btn" :icon="useRenderIcon(View)" @click="handleViewDetail(item)" />
                </div>
              </div>
-              <el-row :gutter="10">
-                <el-col :span="12">
-                  <el-button type="primary" size="small" class="detail-btn" @click="handleViewDetail(item)">
-                    查看详情
-                  </el-button>
-                </el-col>
-                <el-col :span="12">
-                  <el-button type="warning" size="small" class="detail-btn" @click="handleModifyBalance(item)">
-                    修改余额
-                  </el-button>
-                </el-col>
-              </el-row>
            </el-card>
          </el-col>
        </el-row>
@ -117,47 +109,64 @@ watch(

 .user-card {
  margin-bottom: 20px;
-  min-height: 180px;
+  min-height: 210px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .card-content {
+    flex: 1;
    display: flex;
-    align-items: center;
-    margin-bottom: 15px;
+    flex-direction: row;
+    margin: 15px 0px;
+    gap: 15px;

    .avatar {
-      margin-right: 15px;
-      flex-shrink: 0;
+      align-self: flex-start;
    }

    .user-info {
-      .name {
-        font-size: 16px;
-        font-weight: 500;
+      text-align: left;
+      flex: 1;
+
+      .name,
+      .tel,
+      .balance {
+        font-size: 14px;
+        color: #606266;
        margin-bottom: 6px;
+        line-height: 1.5;
      }

-      .gender,
-      .create-time {
-        font-size: 12px;
-        color: #909399;
-        line-height: 1.5;
+      .name {
+        font-weight: 500;
+        color: #303133;
      }

      .balance {
        font-family: monospace;
-        font-size: 14px;
        color: #67c23a;
-        margin-bottom: 6px;
-        line-height: 1.5;
      }
    }
  }

-  .detail-btn {
-    width: 100%;
+  .card-footer {
+    margin-top: auto;
+
+    .divider {
+      margin: 2px 0px;
+    }
+
+    .detail-btn {
+      width: 100%;
+      border: 0;
+      padding: 12px 0;
+    }
+  }
+
+  .card-gap {
+    flex-grow: 1;
+    min-height: 40px;
    margin-top: auto;
  }
 }
@ -184,4 +193,9 @@ watch(
    padding: 8px 0;
  }
 }
+
+.card-wrapper {
+  display: flex;
+  flex-direction: column;
+}
 </style>
Author	SHA1	Message	Date
dzq	727671c58b	feat: 添加120口机柜的两种新图片并更新映射在`cabinetImgMap.ts`中添加了120口机柜的两种新图片配置，分别为`cabinet_120_6X20.jpg`和`cabinet_120_4X30.jpg`，并更新了对应的映射关系。新增图片文件已放置在`public/img/cabinet`目录下。	2025-05-19 10:37:10 +08:00
dzq	1aa7cee0c0	feat: 添加企业微信用户余额修改功能在用户详情页面中增加余额修改功能，允许管理员直接修改用户余额。同时，更新订单查询接口以支持通过企业微信用户ID查询订单记录，并优化用户详情页面的信息展示。	2025-05-19 08:21:44 +08:00
dzq	56904be993	feat(用户管理): 添加企业用户详情页功能新增企业用户详情页，支持查看用户基本信息，优化用户列表展示样式，并添加路由和API接口	2025-05-17 16:38:00 +08:00
dzq	b195336876	feat: 添加4口机柜图片并更新相关逻辑 - 新增4口机柜图片文件 - 在cabinetImgMap.ts中添加4口机柜的映射 - 更新useTag.ts中的路由匹配逻辑，增加对query.id的判断 - 在smart-cabinet-card/index.vue和ab98/index.vue中添加多标签页支持 - 修改goods-edit-modal.vue中的删除逻辑，并调整弹窗为抽屉样式 - 在smart-cabinet-card/detail.vue中添加格口管理功能，支持配置商品、库存和下架操作	2025-05-17 09:57:22 +08:00