feat(shop): 新增商店卡片视图并优化表单功能

- 添加商店卡片视图组件，支持图片展示和模式状态显示 - 扩展商店接口DTO，增加封面图、运行模式和借呗支付字段 - 优化商店表单，增加封面图上传和运行模式选择功能 - 移除不再使用的商品模式相关代码 - 添加运行模式和借呗支付的文字映射工具函数
2025-06-12 16:15:11 +08:00 · 2025-06-12 16:15:11 +08:00 · 63b17eede0
parent 7b274988dd
commit 63b17eede0
5 changed files with 438 additions and 20 deletions
--- a/src/api/shop/shop.ts
+++ b/src/api/shop/shop.ts
@ -6,6 +6,10 @@ export interface ShopQuery extends BasePageQuery {
  corpid?: string;
  /** 归属类型（0-借还柜 1-固资通） */
  belongType?: number;
+  /** 运行模式（0-支付模式 1-审批模式 2-借还模式 3-会员模式 4-耗材模式） */
+  mode?: number;
+  /** 借呗支付（1-正常使用 0-禁止使用） */
+  balanceEnable?: number;
 }

 /** 商店DTO */
@ -13,16 +17,28 @@ export interface ShopDTO {
  shopId: number;
  shopName: string;
  corpid?: string;
+  /** 封面图URL */
+  coverImg?: string;
  /** 归属类型（0-借还柜 1-固资通） */
  belongType?: number;
+  /** 运行模式（0-支付模式 1-审批模式 2-借还模式 3-会员模式 4-耗材模式） */
+  mode?: number;
+  /** 借呗支付（1-正常使用 0-禁止使用） */
+  balanceEnable?: number;
 }

 /** 新增商店命令 */
 export interface AddShopCommand {
  shopName: string;
  corpid: string;
+  /** 封面图URL */
+  coverImg?: string;
  /** 归属类型（0-借还柜 1-固资通） */
  belongType?: number;
+  /** 运行模式（0-支付模式 1-审批模式 2-借还模式 3-会员模式 4-耗材模式） */
+  mode?: number;
+  /** 借呗支付（1-正常使用 0-禁止使用） */
+  balanceEnable?: number;
 }

 /** 更新商店命令 */
@ -30,9 +46,48 @@ export interface UpdateShopCommand {
  corpid: string;
  shopId: number;
  shopName: string;
+  /** 封面图URL */
+  coverImg?: string;
  /** 归属类型（0-借还柜 1-固资通） */
  belongType?: number;
-}
+  /** 运行模式（0-支付模式 1-审批模式 2-借还模式 3-会员模式 4-耗材模式） */
+  mode?: number;
+  /** 借呗支付（1-正常使用 0-禁止使用） */
+  balanceEnable?: number;
+};
+
+// 运行模式文字映射
+const modeTextMap = {
+  0: '支付模式',
+  1: '审批模式',
+  2: '借还模式',
+  3: '会员模式',
+  4: '耗材模式'
+};
+
+// 借呗支付状态文字映射
+const balanceEnableTextMap = {
+  0: '禁止使用',
+  1: '正常使用'
+};
+
+/**
+ * 将运行模式数值转换为文字描述
+ * @param mode 运行模式数值
+ * @returns 对应的文字描述，未知值返回空字符串
+ */
+export const getModeText = (mode?: number): string => {
+  return mode !== undefined ? modeTextMap[mode] || '' : '';
+};
+
+/**
+ * 将借呗支付状态转换为文字描述
+ * @param balanceEnable 借呗支付状态数值
+ * @returns 对应的文字描述，未知值返回空字符串
+ */
+export const getBalanceEnableText = (balanceEnable?: number): string => {
+  return balanceEnable !== undefined ? balanceEnableTextMap[balanceEnable] || '' : '';
+};

 /** 获取商店列表 */
 export const getShopList = (params?: ShopQuery) => {
--- a/src/views/cabinet/shop/card.vue
+++ b/src/views/cabinet/shop/card.vue
@ -0,0 +1,263 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import { getShopList, type ShopDTO, ShopQuery, getModeText, getBalanceEnableText } from "@/api/shop/shop";
+import { type PaginationProps } from "@pureadmin/table";
+import { useRouter } from "vue-router";
+import { useWxStore } from "@/store/modules/wx";
+
+import Search from "@iconify-icons/ep/search";
+import Refresh from "@iconify-icons/ep/refresh";
+import View from "@iconify-icons/ep/view";
+import AddFill from "@iconify-icons/ri/add-circle-line";
+import ShopFormModal from "./shop-form-modal.vue";
+import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
+const { VITE_PUBLIC_IMG_PATH: IMG_PATH } = import.meta.env;
+
+defineOptions({
+  name: "ShopCard"
+});
+
+const router = useRouter();
+const wxStore = useWxStore();
+const formRef = ref();
+const modalVisible = ref(false);
+const currentRow = ref<ShopDTO | null>(null);
+const searchFormParams = ref<ShopQuery>({
+  shopName: "",
+  corpid: wxStore.corpid
+});
+
+const pageLoading = ref(false);
+const dataList = ref<ShopDTO[]>([]);
+const pagination = ref<PaginationProps>({
+  total: 0,
+  pageSize: 12,
+  currentPage: 1,
+  background: true
+});
+
+async function onSearch() {
+  pagination.value.currentPage = 1;
+  getList();
+}
+
+async function getList() {
+  try {
+    pageLoading.value = true;
+    const { data } = await getShopList({
+      ...searchFormParams.value,
+      corpid: wxStore.corpid,
+      pageSize: pagination.value.pageSize,
+      pageNum: pagination.value.currentPage
+    });
+    dataList.value = data.rows;
+    pagination.value.total = data.total;
+  } finally {
+    pageLoading.value = false;
+  }
+}
+
+const resetForm = formEl => {
+  if (!formEl) return;
+  formEl.resetFields();
+  onSearch();
+};
+
+const handleViewDetail = (row: ShopDTO) => {
+  currentRow.value = row;
+  modalVisible.value = true;
+};
+
+
+function getModeType(mode: number): "" | "success" | "warning" | "info" | "danger" {
+  switch (mode) {
+    case 0: return 'success';
+    case 1: return 'info';
+    case 2: return 'warning';
+    case 3: return 'danger';
+    default: return '';
+  }
+}
+
+function getBalanceType(enable: number): "" | "success" | "warning" | "info" | "danger" {
+  return enable == 1 ? 'success' : 'danger';
+}
+
+onMounted(() => {
+  getList();
+});
+</script>
+
+<template>
+  <div class="main">
+    <div class="float-right w-full">
+      <el-form ref="formRef" :inline="true" :model="searchFormParams"
+        class="search-form bg-bg_color flex w-[99/100] pl-[22px] pt-[12px]">
+        <el-form-item label="" prop="shopName">
+          <el-input @keydown.enter.prevent="onSearch" v-model="searchFormParams.shopName" placeholder="请输入地址名称"
+            clearable class="!w-[200px]" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" :icon="useRenderIcon(Search)" :loading="pageLoading" @click="onSearch">
+            搜索
+          </el-button>
+        </el-form-item>
+        <el-form-item class="space-item">
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" :icon="useRenderIcon(AddFill)" @click="modalVisible = true; currentRow = null"
+            style="margin-right: 10px;">
+            新增地址
+          </el-button>
+        </el-form-item>
+      </el-form>
+
+      <div class="grid-container">
+        <el-row :gutter="12">
+          <el-col v-for="(item, index) in dataList" :key="item.shopId" :xs="24" :sm="12" :md="8" :lg="4" :xl="4">
+            <el-card class="cabinet-card" :body-style="{ padding: '8px 10px' }">
+              <div class="card-content">
+                <img v-if="item.coverImg" :src="item.coverImg" alt="" class="cabinet-image">
+                <svg v-if="!item.coverImg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 100" width="160" height="100"
+                  class="cabinet-image">
+                  <!-- 背景：浅灰色填充，模拟图片容器 -->
+                  <rect width="100%" height="100%" fill="#f8f8f8" rx="4" ry="4" /> <!-- 可选圆角，适配卡片风格 -->
+                  <!-- 图片图标：简化的“图片”符号（矩形+交叉线），直观关联“图片” -->
+                  <g stroke="#ccc" stroke-width="2" fill="none">
+                    <rect x="20" y="10" width="120" height="65" /> <!-- 图片框 -->
+                    <line x1="20" y1="10" x2="140" y2="75" /> <!-- 对角线1 -->
+                    <line x1="140" y1="10" x2="20" y2="75" /> <!-- 对角线2 -->
+                  </g>
+                  <!-- 说明文字：明确提示“未设置图片”，居中对齐 -->
+                  <text x="50%" y="92" font-size="12" fill="#888" text-anchor="middle" font-family="Arial, sans-serif">
+                    未设置图片
+                  </text>
+                </svg>
+
+                <el-descriptions class="cabinet-info" :column="1">
+                  <!-- <el-descriptions-item class="type">模式：{{ item.belongType === 0 ? '借还模式' : '固资模式' }}</el-descriptions-item> -->
+                  <el-descriptions-item class="mode">运行模式：<el-tag :type="getModeType(item.mode)">{{ getModeText(item.mode) }}</el-tag></el-descriptions-item>
+                  <el-descriptions-item class="balance">借呗支付：<el-tag :type="getBalanceType(item.balanceEnable)">{{ getBalanceEnableText(item.balanceEnable) }}</el-tag></el-descriptions-item>
+                </el-descriptions>
+              </div>
+              <el-divider class="divider" />
+              <el-button class="detail-btn" link @click="handleViewDetail(item)">
+                {{ item.shopName }}
+              </el-button>
+            </el-card>
+          </el-col>
+        </el-row>
+        <div class="pagination-wrapper">
+          <el-pagination background layout="prev, pager, next" :page-size="pagination.pageSize"
+            :total="pagination.total" v-model:current-page="pagination.currentPage" @current-change="getList"
+            @size-change="getList" />
+        </div>
+      </div>
+    </div>
+    <shop-form-modal v-model:visible="modalVisible" :row="currentRow" @refresh="getList" />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.search-form {
+  :deep(.el-form-item) {
+    margin-bottom: 12px;
+    margin-right: 12px;
+  }
+}
+
+:deep(.el-descriptions__cell) {
+  padding-bottom: 1px !important;
+}
+
+.cabinet-card {
+  margin-bottom: 12px;
+  min-height: 190px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  .cabinet-image {
+    width: 50%;
+    height: 130px;
+    padding: 0 3px;
+    object-fit: contain;
+    border-radius: 4px;
+    margin-bottom: 10px;
+  }
+
+  .card-content {
+    flex: 1;
+    margin: 0px;
+    display: flex;
+    flex-direction: row;
+
+    .cabinet-info {
+      text-align: left;
+      padding: 16px 0px;
+
+      .name,
+      .type,
+      .shop,
+      .location,
+      .template {
+        width: 100%;
+        font-size: 14px;
+        color: #606266;
+        margin-bottom: 12px;
+        line-height: 1;
+        text-align: left;
+      }
+
+      .name {
+        width: 100%;
+        font-weight: 500;
+        color: #303133;
+      }
+    }
+  }
+
+  .divider {
+    margin: 5px 0px;
+  }
+
+  .detail-btn {
+    width: 100%;
+    border: 0;
+    margin-top: auto;
+    padding: 8px 0;
+
+    &:hover {
+      color: var(--el-color-primary);
+    }
+  }
+}
+
+.grid-container {
+  margin: 12px 0;
+  position: relative;
+
+  .el-row {
+    margin-bottom: -20px;
+  }
+}
+
+.pagination-wrapper {
+  position: relative;
+  background: var(--el-bg-color);
+  padding: 8px 12px;
+  margin-top: 20px;
+  text-align: center;
+
+  :deep(.el-pagination) {
+    margin: 0;
+    padding: 4px 0;
+  }
+}
+
+.space-item {
+  flex: 1;
+  width: 100%;
+}
+</style>
--- a/src/views/cabinet/shop/shop-form-modal.vue
+++ b/src/views/cabinet/shop/shop-form-modal.vue
@ -1,8 +1,10 @@
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { ref, watch, onMounted } from "vue";
 import { ElMessage } from "element-plus";
 import { addShop, updateShop, ShopDTO, UpdateShopCommand, AddShopCommand } from "@/api/shop/shop";
 import { useWxStore } from "@/store/modules/wx";
+import Upload from "@iconify-icons/ep/upload";
+const { VITE_APP_BASE_API } = import.meta.env;

 const props = defineProps({
  visible: {
@ -24,12 +26,18 @@ const formData = ref<UpdateShopCommand>({
  corpid: wxStore.corpid,
  shopId: 0,
  shopName: "",
-  belongType: undefined
+  belongType: undefined,
+  mode: undefined,
+  balanceEnable: undefined,
+  coverImg: ""
 });

 const rules = {
  shopName: [{ required: true, message: "请输入地址名称", trigger: "blur" }],
-  belongType: [{ required: true, message: "请选择商品模式", trigger: "change" }]
+  belongType: [{ required: true, message: "请选择商品模式", trigger: "change" }],
+  mode: [{ required: true, message: "请选择运行模式", trigger: "change" }],
+  balanceEnable: [{ required: true, message: "请选择借呗支付状态", trigger: "change" }],
+  coverImg: [{ required: true, message: "请上传封面图", trigger: "change" }]
 };

 watch(
@ -41,16 +49,25 @@ watch(
          ...props.row,
          shopId: props.row.shopId,
          corpid: props.row.corpid,
+          belongType: props.row.belongType,
+          mode: props.row.mode,
+          balanceEnable: props.row.balanceEnable,
+          coverImg: props.row.coverImg || ""
        };
      } else {
        formData.value = {
          shopId: 0,
          shopName: "",
-          corpid: wxStore.corpid
+          corpid: wxStore.corpid,
+          belongType: undefined,
+          mode: undefined,
+          balanceEnable: undefined,
+          coverImg: ""
        };
      }
    }
-  }
+  },
+  { immediate: true }
 );

 const handleSubmit = async () => {
@ -75,11 +92,27 @@ const handleSubmit = async () => {
 const handleClose = () => {
  emit("update:visible", false);
 };
+
+const handleAvatarSuccess = (response) => {
+  formData.value.coverImg = response.data.url;
+};
+
+const beforeAvatarUpload = (rawFile) => {
+  if (!['image/jpeg', 'image/png'].includes(rawFile.type)) {
+    ElMessage.error('封面图必须是 JPG/PNG 格式!');
+    return false;
+  }
+  if (rawFile.size > 50 * 1024 * 1024) {
+    ElMessage.error('封面图大小不能超过 50MB!');
+    return false;
+  }
+  return true;
+};
 </script>

 <template>
-  <el-dialog :title="formData.shopId ? '编辑地址' : '新增地址'" :model-value="visible" @update:model-value="handleClose"
-    width="600px">
+  <el-drawer :title="formData.shopId ? '编辑地址' : '新增地址'" :model-value="visible" @update:model-value="handleClose"
+    size="600px" direction="rtl">
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
      <el-form-item label="地址ID" prop="shopId" v-if="formData.shopId">
        <el-input v-model="formData.shopId" :disabled="true" />
@ -87,16 +120,83 @@ const handleClose = () => {
      <el-form-item label="地址名称" prop="shopName">
        <el-input v-model="formData.shopName" placeholder="请输入地址名称" />
      </el-form-item>
-      <el-form-item label="商品模式" prop="belongType">
+      <el-form-item label="封面图" prop="coverImg">
+        <el-upload class="avatar-uploader" :action="VITE_APP_BASE_API + '/file/upload'" :show-file-list="false"
+          :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
+          <img v-if="formData.coverImg" :src="formData.coverImg" class="avatar" />
+          <svg v-if="!formData.coverImg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 100" width="160" height="100"
+            class="cabinet-image">
+            <!-- 背景：浅灰色填充，模拟图片容器 -->
+            <rect width="100%" height="100%" fill="#f8f8f8" rx="4" ry="4" /> <!-- 可选圆角，适配卡片风格 -->
+            <!-- 图片图标：简化的“图片”符号（矩形+交叉线），直观关联“图片” -->
+            <g stroke="#ccc" stroke-width="2" fill="none">
+              <rect x="20" y="10" width="120" height="65" /> <!-- 图片框 -->
+              <line x1="20" y1="10" x2="140" y2="75" /> <!-- 对角线1 -->
+              <line x1="140" y1="10" x2="20" y2="75" /> <!-- 对角线2 -->
+            </g>
+            <!-- 说明文字：明确提示“未设置图片”，居中对齐 -->
+            <text x="50%" y="92" font-size="12" fill="#888" text-anchor="middle" font-family="Arial, sans-serif">
+              未设置图片
+            </text>
+          </svg>
+        </el-upload>
+      </el-form-item>
+      <!-- <el-form-item label="商品模式" prop="belongType">
        <el-select v-model="formData.belongType" placeholder="请选择归属类型">
          <el-option label="借还模式" :value="0" />
          <el-option label="固资模式" :value="1" />
        </el-select>
+      </el-form-item> -->
+      <el-form-item label="运行模式" prop="mode">
+        <el-select v-model="formData.mode" placeholder="请选择运行模式">
+          <el-option label="支付模式" :value="0" />
+          <el-option label="审批模式" :value="1" />
+          <el-option label="借还模式" :value="2" />
+          <el-option label="会员模式" :value="3" />
+          <el-option label="耗材模式" :value="4" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="借呗支付" prop="balanceEnable">
+        <el-select v-model="formData.balanceEnable" placeholder="请选择借呗支付状态">
+          <el-option label="正常使用" :value="1" />
+          <el-option label="禁止使用" :value="0" />
+        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
-      <el-button @click="handleClose">取消</el-button>
+      <el-button @click="handleClose" style="margin-right: 5px;">取消</el-button>
      <el-button type="primary" @click="handleSubmit">确定</el-button>
    </template>
-  </el-dialog>
-</template>
+  </el-drawer>
+</template>
+
+<style scoped>
+.avatar-uploader {
+  :deep(.el-upload) {
+    border: 1px dashed var(--el-border-color);
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+    transition: var(--el-transition-duration-fast);
+
+    &:hover {
+      border-color: var(--el-color-primary);
+    }
+  }
+}
+
+.avatar {
+  width: 178px;
+  height: 178px;
+  display: block;
+}
+
+.cabinet-image {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  object-fit: contain;
+  border-radius: 4px;
+}
+</style>
--- a/src/views/cabinet/smart-cabinet-card/edit-cabinet-drawer.vue
+++ b/src/views/cabinet/smart-cabinet-card/edit-cabinet-drawer.vue
@ -104,12 +104,12 @@ watch(() => props.cabinetInfo, (newVal) => {
      </el-select>
    </el-form-item>

-    <el-form-item label="商品模式" prop="belongType">
+    <!-- <el-form-item label="商品模式" prop="belongType">
      <el-select v-model="formData.belongType" placeholder="请选择商品模式">
        <el-option label="借还模式" :value="0" />
        <el-option label="固资模式" :value="1" />
      </el-select>
-    </el-form-item>
+    </el-form-item> -->

    <!-- <el-form-item label="运行模式" prop="mode">
      <el-select v-model="formData.mode" placeholder="请选择运行模式">
@ -120,12 +120,12 @@ watch(() => props.cabinetInfo, (newVal) => {
      </el-select>
    </el-form-item> -->

-    <el-form-item label="借呗支付" prop="balanceEnable">
+    <!-- <el-form-item label="借呗支付" prop="balanceEnable">
      <el-select v-model="formData.balanceEnable" placeholder="请选择借呗支付状态">
        <el-option label="正常使用" :value="1" />
        <el-option label="禁止使用" :value="0" />
      </el-select>
-    </el-form-item>
+    </el-form-item> -->

    <el-form-item>
      <el-button type="primary" :icon="useRenderIcon(Confirm)" @click="handleConfirm">
--- a/src/views/cabinet/smart-cabinet-card/smart-cabinet-card-form-modal.vue
+++ b/src/views/cabinet/smart-cabinet-card/smart-cabinet-card-form-modal.vue
@ -103,12 +103,12 @@ const templateOptions = Object.entries(CabinetImgMap).map(([value, item]) => ({
      </el-select>
    </el-form-item>

-    <el-form-item label="商品模式" prop="belongType">
+    <!-- <el-form-item label="商品模式" prop="belongType">
      <el-select v-model="formData.belongType" placeholder="请选择商品模式">
        <el-option label="借还模式" :value="0" />
        <el-option label="固资模式" :value="1" />
      </el-select>
-    </el-form-item>
+    </el-form-item> -->

    <!-- <el-form-item label="运行模式" prop="mode">
      <el-select v-model="formData.mode" placeholder="请选择运行模式">
@ -119,12 +119,12 @@ const templateOptions = Object.entries(CabinetImgMap).map(([value, item]) => ({
      </el-select>
    </el-form-item> -->

-    <el-form-item label="借呗支付" prop="balanceEnable">
+    <!-- <el-form-item label="借呗支付" prop="balanceEnable">
      <el-select v-model="formData.balanceEnable" placeholder="请选择借呗支付状态">
        <el-option label="正常使用" :value="1" />
        <el-option label="禁止使用" :value="0" />
      </el-select>
-    </el-form-item>
+    </el-form-item> -->

    <el-form-item>
      <el-button type="primary" :icon="useRenderIcon(Confirm)" @click="handleConfirm">