Merge branch 'feature-20251125wyz-做产品上架' into 'dev'

Feature 20251125wyz 做产品上架

See merge request !6

.env.development

@@ -5,4 +5,4 @@ VITE_APP_TITLE = 银盾中台系统
 VITE_APP_ENV = 'development'
 VITE_APP_ENV = 'development'
 
 
 # 若依管理系统/开发环境
 # 若依管理系统/开发环境
-VITE_APP_BASE_API = 'http://10.0.10.26:9002'
+VITE_APP_BASE_API = 'http://139.224.145.34:9002'

Dockerfile

+# 使用 Node.js 18 基础镜像 (Debian bullseye)
+FROM docker.m.daocloud.io/library/node:18-bullseye AS build
+
+# 设置环境变量
+ENV npm_config_canvas_binary_host_mirror="https://npmmirror.com/mirrors/canvas"
+ENV npm_config_sharp_binary_host="https://npmmirror.com/mirrors/sharp"
+ENV npm_config_sharp_libvips_binary_host="https://npmmirror.com/mirrors/sharp-libvips"
+# 添加 esbuild 镜像源
+ENV ESBUILD_BINARY_HOST="https://npmmirror.com/mirrors/esbuild"
+
+# 安装系统依赖 (使用阿里云镜像源)
+RUN sed -i 's/deb.debian.org/mirrors.aliyun.com/g' /etc/apt/sources.list && \
+    sed -i 's/security.debian.org/mirrors.aliyun.com/g' /etc/apt/sources.list && \
+    apt-get update && apt-get install -y --no-install-recommends \
+    build-essential \
+    python3 \
+    pkg-config \
+    libcairo2-dev \
+    libpango1.0-dev \
+    libjpeg-dev \
+    libgif-dev \
+    librsvg2-dev \
+    libvips-dev \
+    && rm -rf /var/lib/apt/lists/*
+
+# 设置工作目录
+WORKDIR /app
+
+# 复制包管理文件
+COPY package.json ./
+
+# 1. 显式安装 esbuild 二进制
+RUN npm install @esbuild/linux-x64 --verbose --registry=https://registry.npmmirror.com
+
+# 2. 安装其他原生模块
+RUN npm install canvas@2.11.2 --verbose --ignore-scripts
+RUN npm install sharp@0.32.6 --verbose --ignore-scripts
+
+# 3. 安装项目依赖（移除 --no-optional）
+RUN npm install --verbose --registry=https://registry.npmmirror.com
+
+# 4. 验证 esbuild 安装
+RUN ls -la node_modules/esbuild/bin && \
+    ./node_modules/.bin/esbuild --version
+
+# 复制源码并构建
+COPY . .
+RUN npm run build:dev
+
+# 生产阶段
+FROM docker.m.daocloud.io/library/nginx:alpine
+COPY --from=build /app/dist /usr/share/nginx/html
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+# 设置时区
+RUN echo "https://mirrors.aliyun.com/alpine/v3.22/main/" > /etc/apk/repositories && \
+    echo "https://mirrors.aliyun.com/alpine/v3.22/community/" >> /etc/apk/repositories && \
+    apk update && \
+    apk add --no-cache tzdata && \
+    cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime && \
+    echo "Asia/Shanghai" > /etc/timezone
+
+EXPOSE 6699
+CMD ["nginx", "-g", "daemon off;"]

nginx.conf

+server {
+    listen 6699;
+    server_name 139.224.145.34;
+
+    # 处理前端静态资源（Vue应用）
+    location / {
+        root   /usr/share/nginx/html;
+        index  index.html;
+        try_files $uri $uri/ /index.html; # 处理Vue路由history模式
+        if ($request_method = OPTIONS) {
+            add_header 'Access-Control-Allow-Origin' '*';
+            add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
+            add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
+            add_header 'Access-Control-Max-Age' 1728000;
+            add_header 'Content-Type' 'text/plain charset=UTF-8';
+            add_header 'Content-Length' 0;
+            return 204;
+        }
+
+        limit_except GET POST PUT DELETE OPTIONS {
+            deny all;
+        }
+    }
+}

package.json

@@ -7,9 +7,10 @@
   "type": "module",
   "type": "module",
   "scripts": {
   "scripts": {
     "dev": "vite",
     "dev": "vite",
-    "build:prod": "vite build",
-    "build:stage": "vite build --mode staging",
-    "preview": "vite preview"
+    "build": "vite build",
+    "build:dev": "vite build --mode=development",
+    "preview": "vite preview",
+    "report": "npm run build --report"
   },
   },
   "repository": {
   "repository": {
     "type": "git",
     "type": "git",
@@ -28,6 +29,7 @@
     "js-beautify": "1.14.11",
     "js-beautify": "1.14.11",
     "js-cookie": "3.0.5",
     "js-cookie": "3.0.5",
     "jsencrypt": "3.3.2",
     "jsencrypt": "3.3.2",
+    "lodash-es": "^4.17.21",
     "nprogress": "0.2.0",
     "nprogress": "0.2.0",
     "pinia": "3.0.2",
     "pinia": "3.0.2",
     "splitpanes": "^4.0.4",
     "splitpanes": "^4.0.4",

src/api/common.js

@@ -20,9 +20,17 @@ export function uploadImage(data) {
   })
   })
 }
 }
 // 查询用户是否有访问项目的权限
 // 查询用户是否有访问项目的权限
-export function getVisitPermission(projectBizId) {
+export function getVisitPermission(projectBizId, tenantBizId) {
   return request({
   return request({
-    url: '/user/api/sysUser/login/permission/project/visit?projectBizId=' + projectBizId,
+    url: `/user/api/sysUser/login/permission/project/visit?projectBizId=${projectBizId}&tenantBizId=${tenantBizId}`,
     method: 'get'
     method: 'get'
   })
   })
 }
 }
+//获取保险公司列表
+export function getAllCompanys(data) {
+  return request({
+    url: '/user/api/sysDept/company/page',
+    method: 'post',
+    data: data
+  })
+}

src/api/product/index.js

+import request from '@/utils/request'
+
+// 查询产品上架列表
+export function getProductList(data) {
+  return request({
+    url: '/product/api/product/page',
+    method: 'post',
+    data: data
+  })
+}
+// 查询产品上架列表
+export function getCategoryTreeList(data) {
+  return request({
+    url: '/base/api/category/page',
+    method: 'post',
+    data: data
+  })
+}
+// 新增产品
+export function addProduct(data) {
+  return request({
+    url: '/product/api/productLaunch/add/category',
+    method: 'post',
+    data: data
+  })
+}
+// 获取产品详情
+export function getProductDetail(productLaunchBizId) {
+  return request({
+    url: `/product/api/productLaunch/detail?productLaunchBizId=${productLaunchBizId}`,
+    method: 'get'
+  })
+}
+// 查询产品参数信息
+export function productParams(data) {
+  return request({
+    url: '/base/api/relObjectField/query',
+    method: 'post',
+    data: data
+  })
+}
+// 查询产品参数右侧下拉框数据
+export function ParamRightOptions(data) {
+  return request({
+    url: '/base/api/relFieldValue/field/list',
+    method: 'post',
+    data: data
+  })
+}
+// 查询产品规格信息列表
+export function productSpecies(data) {
+  return request({
+    url: '/base/api/relObjectSpecies/query',
+    method: 'post',
+    data: data
+  })
+}
+// 查询选中的分类列表
+export function querySelectCategory(data) {
+  return request({
+    url: '/base/api/relObjectCategory/query/selected',
+    method: 'post',
+    data: data
+  })
+}
+// 保存上架产品
+export function saveProductLaunch(data) {
+  return request({
+    url: '/product/api/productLaunch/save',
+    method: 'post',
+    data: data
+  })
+}
+// 发佣管理更新规格信息
+export function exportSpecies(data) {
+  return request({
+    url: '/product/api/announcementSpecies/import/species',
+    method: 'post',
+    data: data
+  })
+}
+// 发佣管理查询公告佣列表
+export function sendSpecies(data) {
+  return request({
+    url: '/product/api/announcementSpecies/page',
+    method: 'post',
+    data: data
+  })
+}
+// 发佣管理查询公告佣金明细列表
+export function sendCommissionRatio(data) {
+  return request({
+    url: '/product/api/announcementCommissionRatio/page',
+    method: 'post',
+    data: data
+  })
+}
+// 发佣管理批量保存公告佣金设置
+export function saveBatchSendCommission(data) {
+  return request({
+    url: '/product/api/announcementCommissionRatio/batch/save',
+    method: 'post',
+    data: data
+  })
+}
+// 发佣管理单个删除公告佣金设置
+export function deleteCommission(announcementCommissionRatioBizId) {
+  return request({
+    url: `/product/api/announcementCommissionRatio/del?announcementCommissionRatioBizId=${announcementCommissionRatioBizId}`,
+    method: 'delete'
+  })
+}
+// 获得来佣列表的数据
+export function comeCommissionList(data) {
+  return request({
+    url: '/product/api/expectedSpecies/page',
+    method: 'post',
+    data: data
+  })
+}
+// 获得来佣列表的数据
+export function comeExpectedSpecies(data) {
+  return request({
+    url: '/product/api/expectedSpecies/import/species',
+    method: 'post',
+    data: data
+  })
+}
+// 批量保存来佣佣金设置
+export function comeBatchSave(data) {
+  return request({
+    url: '/product/api/expectedCommissionRatio/batch/save',
+    method: 'post',
+    data: data
+  })
+}
+// 批量保存来佣佣金设置
+export function comeCommissionRatio(data) {
+  return request({
+    url: '/product/api/expectedCommissionRatio/page',
+    method: 'post',
+    data: data
+  })
+}
+// 来佣管理单个删除佣金设置
+export function deleteComeCommission(expectedCommissionRatioBizId) {
+  return request({
+    url: `/product/api/expectedCommissionRatio/del?expectedCommissionRatioBizId=${expectedCommissionRatioBizId}`,
+    method: 'delete'
+  })
+}
+// 商品列表
+export function goodsList(data) {
+  return request({
+    url: '/product/api/productLaunch/page',
+    method: 'post',
+    data: data
+  })
+}
+// 审核商品状态
+export function productApproval(data) {
+  return request({
+    url: '/product/api/productLaunch/approval',
+    method: 'put',
+    data: data
+  })
+}
+// 修改商品上架下架状态
+export function changeProductStatus(data) {
+  return request({
+    url: '/product/api/productLaunch/edit/status',
+    method: 'put',
+    data: data
+  })
+}
+// 修改来佣佣金设置状态
+export function changeComeStatus(data) {
+  return request({
+    url: `/product/api/expectedCommissionRatio/edit/status?expectedCommissionRatioBizId=${data.expectedCommissionRatioBizId}&status=${data.status}`,
+    method: 'put'
+  })
+}
+// 修改发佣佣金设置状态
+export function changeSendStatus(data) {
+  return request({
+    url: `/product/api/announcementCommissionRatio/edit/status?announcementCommissionRatioBizId=${data.announcementCommissionRatioBizId}&status=${data.status}`,
+    method: 'put'
+  })
+}

src/components/CategoryTable/index.vue

+<template>
+  <div class="box">
+    <el-row>
+      <el-col :span="12">
+        <!--  v-model="queryParams.productName"
+           @blur="handleSelectChange"
+            :remote-method="searchProduct"
+           -->
+        <!-- <el-select
+          filterable
+          remote
+          default-first-option
+          :reserve-keyword="false"
+          placeholder="类目搜索"
+          clearable
+          remote-show-suffix
+          style="margin-bottom: 10px"
+        >
+          <el-option
+              v-for="item in productList"
+              :key="item.productBizId"
+              :label="item.productName"
+              :value="item.productBizId"
+            />
+        </el-select> -->
+      </el-col>
+      <el-col :span="24" v-if="categoryName">
+        <div class="chooseName">
+          <span style="color: rgb(0 0 0 / 55%)">已选类目：</span>{{ categoryName }}
+        </div>
+      </el-col>
+    </el-row>
+    <div class="category-container">
+      <div class="tableHeader">
+        <div
+          class="headerItem"
+          :style="{ width: `${100 / categoryList.length}%` }"
+          v-for="item in categoryList"
+          :key="item.level"
+        >
+          {{ item.title }}
+        </div>
+      </div>
+      <div class="tableBody">
+        <div
+          class="bodyItem"
+          v-for="(item, index) in categoryList"
+          :key="item.level"
+          :style="{
+            width: `${100 / categoryList.length}%`,
+            borderRight: categoryList.length - 1 === index ? 'none' : '1px solid #ccc'
+          }"
+        >
+          <div
+            class="categoryItem"
+            v-for="(cItem, cIndex) in item.data"
+            :key="cItem.id"
+            @click="handleClickCategory(item, cItem, cIndex)"
+            :style="{
+              backgroundColor: cItem.isSelected ? 'rgb(64, 158, 255,0.1)' : null
+            }"
+          >
+            <span> {{ cItem.name }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { getCategoryTreeList } from '@/api/product/index'
+import { computed } from 'vue'
+import { ref } from 'vue'
+const props = defineProps({
+  // 类目数据,
+  data: {
+    type: Array,
+    default: () => []
+  },
+  // 类型，是新增还是编辑,
+  type: {
+    type: String,
+    default: 'add'
+  }
+})
+const categoryList = ref([])
+const level1Obj = ref([])
+// 中文数字单位
+const units = ['', '十', '百', '千']
+const bigUnits = ['', '万', '亿', '兆', '京', '垓', '秭', '穰', '沟', '涧', '正', '载']
+
+// 中文数字字符
+const digits = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九']
+const categoryName = computed(() => {
+  let result = []
+  categoryList.value.forEach(item => {
+    item.data.forEach(c => {
+      if (c.isSelected) result.push(c.name)
+    })
+  })
+
+  if (result.length > 0) {
+    return result.join(' > ')
+  } else {
+    return ''
+  }
+})
+const emit = defineEmits(['handleClickCategory'])
+const handleClickCategory = (fItem, cItem, cIndex) => {
+  categoryList.value.forEach(item => {
+    item.data.forEach(c => {
+      if (c.categoryBizId == cItem.categoryBizId && fItem.level == item.level) {
+        c.isSelected = true
+      } else if (fItem.level == item.level) {
+        c.isSelected = false
+      }
+    })
+  })
+
+  getCategoryData(cItem)
+}
+function getCategoryData(obj) {
+  // let name = query ? query.trim() : ''
+
+  let data = {
+    // name: name,
+    type: 'PRODUCT',
+    pid: obj.categoryBizId ? obj.categoryBizId : '0',
+    pageSize: 9999,
+    pageNo: 1
+  }
+  getCategoryTreeList(data).then(response => {
+    if (response.code === 200) {
+      let res = response.data.records
+      res.forEach(item => {
+        item.isSelected = false
+      })
+      if (!obj.level) {
+        categoryList.value = [
+          { level: 1, data: res, title: `${convertSection(1)}级类目` },
+          { level: 2, data: [], title: `${convertSection(2)}级类目` },
+          { level: 3, data: [], title: `${convertSection(3)}级类目` },
+          { level: 4, data: [], title: `${convertSection(4)}级类目` }
+        ]
+      } else {
+        if (res.length > 0) {
+          // 先删除当前层级以后的数据
+          if (categoryList.value.length > 4 && obj.level > 4) {
+            categoryList.value.splice(obj.level, categoryList.value.length - obj.level)
+          }
+
+          let cIndex = categoryList.value.findIndex(item => item.level == res[0].level)
+          if (cIndex > -1) {
+            // 固定显示4个类目，如果超过4个类目，则删除多余的类目
+            if (categoryList.value.length > 4 && obj.level < 4) {
+              categoryList.value.splice(4, categoryList.value.length - 4)
+            }
+            categoryList.value[cIndex].data = res
+            for (let i = cIndex + 1; i < categoryList.value.length; i++) {
+              categoryList.value[i].data = []
+            }
+          } else {
+            categoryList.value.push({
+              level: res[0].level,
+              data: res,
+              title: `${convertSection(res[0].level)}级类目`
+            })
+          }
+        }
+      }
+      console.log('categoryList', categoryList.value)
+    } else {
+      categoryList.value = []
+      proxy.$modal.msgError(response.msg)
+    }
+  })
+}
+
+// 转换4位数字节
+const convertSection = sectionNum => {
+  const len = sectionNum
+  let result = ''
+  let hasZero = false
+
+  for (let i = 0; i < len; i++) {
+    const digit = sectionNum
+    if (digit === 0) {
+      hasZero = true
+    } else {
+      if (hasZero) {
+        result += '零'
+        hasZero = false
+      }
+      result += digits[digit]
+      return result
+    }
+  }
+
+  // 处理全零的情况
+  if (result === '') {
+    return '零'
+  }
+
+  return result
+}
+if (props.type == 'add') {
+  getCategoryData({ categoryBizId: '0' })
+} else if (props.type == 'edit') {
+  console.log('props.data', props.data);
+
+  // 先回显已经选择好的类目
+  categoryList.value = JSON.parse(JSON.stringify(props.data))
+  categoryList.value.forEach(item => {
+    item.title = `${convertSection(item.level)}级类目`
+    // 还应该把data里的数据都加上 isSelected: true
+  })
+}
+// 暴露给父组件
+defineExpose({
+  categoryList,
+  categoryName
+})
+</script>
+
+<style lang="scss" scoped>
+.box {
+  width: 100%;
+  box-sizing: border-box;
+}
+.category-container {
+  width: 100%;
+  border: 1px solid #ccc;
+  border-radius: 10px;
+  overflow: hidden;
+  height: 100%;
+}
+.tableHeader {
+  display: flex;
+  justify-content: space-between;
+
+  border-bottom: 1px solid #ccc;
+  color: rgb(0 0 0 / 55%);
+  font-size: 16px;
+}
+.headerItem {
+  padding: 10px 20px;
+  text-align: left;
+}
+.tableBody {
+  display: flex;
+  justify-content: space-between;
+
+  color: rgb(0 0 0 / 55%);
+  font-size: 14px;
+  height: calc(100% - 40px);
+}
+.bodyItem {
+  overflow-y: auto;
+  padding: 10px 10px;
+}
+.categoryItem {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  margin-bottom: 10px;
+  padding: 10px;
+  border-radius: 5px;
+}
+.chooseName {
+  padding: 10px 20px;
+  background-color: #f7f7f7;
+  border-radius: 5px;
+  font-size: 14px;
+  margin-bottom: 10px;
+}
+</style>

src/components/ImageUpload/index.vue

 <template>
 <template>
-  <div class="component-upload-image">
+  <div class="component-upload-media">
     <el-upload
     <el-upload
       multiple
       multiple
       :disabled="disabled"
       :disabled="disabled"
-      :action="uploadImgUrl"
-      list-type="picture-card"
+      :action="uploadUrl"
+      :list-type="listType"
       :on-success="handleUploadSuccess"
       :on-success="handleUploadSuccess"
       :before-upload="handleBeforeUpload"
       :before-upload="handleBeforeUpload"
       :data="data"
       :data="data"
       :limit="limit"
       :limit="limit"
       :on-error="handleUploadError"
       :on-error="handleUploadError"
       :on-exceed="handleExceed"
       :on-exceed="handleExceed"
-      ref="imageUpload"
+      ref="mediaUpload"
       :before-remove="handleDelete"
       :before-remove="handleDelete"
       :show-file-list="true"
       :show-file-list="true"
       :headers="headers"
       :headers="headers"
       :file-list="fileList"
       :file-list="fileList"
-      :on-preview="handlePictureCardPreview"
+      :on-preview="handlePreview"
       :class="{ hide: fileList.length >= limit }"
       :class="{ hide: fileList.length >= limit }"
     >
     >
       <el-icon class="avatar-uploader-icon"><plus /></el-icon>
       <el-icon class="avatar-uploader-icon"><plus /></el-icon>
@@ -24,8 +24,14 @@
     <!-- 上传提示 -->
     <!-- 上传提示 -->
     <div class="el-upload__tip" v-if="showTip && !disabled">
     <div class="el-upload__tip" v-if="showTip && !disabled">
       请上传
       请上传
-      <template v-if="fileSize">
-        大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
+      <template v-if="imageSize || videoSize">
+        <span v-if="imageSize"
+          >图片大小不超过 <b style="color: #f56c6c">{{ imageSize }}MB</b></span
+        >
+        <span v-if="imageSize && videoSize">，</span>
+        <span v-if="videoSize"
+          >视频大小不超过 <b style="color: #f56c6c">{{ videoSize }}MB</b></span
+        >
       </template>
       </template>
       <template v-if="fileType">
       <template v-if="fileType">
         格式为 <b style="color: #f56c6c">{{ fileType.join('/') }}</b>
         格式为 <b style="color: #f56c6c">{{ fileType.join('/') }}</b>
@@ -33,8 +39,21 @@
       的文件
       的文件
     </div>
     </div>
 
 
-    <el-dialog v-model="dialogVisible" title="预览" width="800px" append-to-body>
-      <img :src="dialogImageUrl" style="display: block; max-width: 100%; margin: 0 auto" />
+    <!-- 预览对话框 -->
+    <el-dialog v-model="dialogVisible" :title="previewTitle" width="800px" append-to-body>
+      <img
+        v-if="previewType === 'image'"
+        :src="dialogImageUrl"
+        style="display: block; max-width: 100%; margin: 0 auto"
+      />
+      <video
+        v-else-if="previewType === 'video'"
+        :src="dialogImageUrl"
+        controls
+        style="display: block; max-width: 100%; margin: 0 auto"
+      >
+        您的浏览器不支持视频播放
+      </video>
     </el-dialog>
     </el-dialog>
   </div>
   </div>
 </template>
 </template>
@@ -43,6 +62,7 @@
 import { getToken } from '@/utils/auth'
 import { getToken } from '@/utils/auth'
 import { isExternal } from '@/utils/validate'
 import { isExternal } from '@/utils/validate'
 import Sortable from 'sortablejs'
 import Sortable from 'sortablejs'
+import videoThumbnail from '@/assets/images/video-thumbnail.png'
 
 
 const props = defineProps({
 const props = defineProps({
   modelValue: [String, Object, Array],
   modelValue: [String, Object, Array],
@@ -51,6 +71,11 @@ const props = defineProps({
     type: String,
     type: String,
     default: '/common/upload'
     default: '/common/upload'
   },
   },
+  // 来源
+  source: {
+    type: String,
+    default: ''
+  },
   // 上传携带的参数
   // 上传携带的参数
   data: {
   data: {
     type: Object
     type: Object
@@ -60,12 +85,17 @@ const props = defineProps({
     type: Number,
     type: Number,
     default: 5
     default: 5
   },
   },
-  // 大小限制(MB)
-  fileSize: {
+  // 图片大小限制(MB)
+  imageSize: {
     type: Number,
     type: Number,
-    default: 5
+    default: 10
+  },
+  // 视频大小限制(MB)
+  videoSize: {
+    type: Number,
+    default: 500
   },
   },
-  // 文件类型, 例如['png', 'jpg', 'jpeg']
+  // 文件类型, 例如['png', 'jpg', 'jpeg', 'mp4']
   fileType: {
   fileType: {
     type: Array,
     type: Array,
     default: () => ['png', 'jpg', 'jpeg']
     default: () => ['png', 'jpg', 'jpeg']
@@ -75,7 +105,7 @@ const props = defineProps({
     type: Boolean,
     type: Boolean,
     default: true
     default: true
   },
   },
-  // 禁用组件（仅查看图片）
+  // 禁用组件（仅查看文件）
   disabled: {
   disabled: {
     type: Boolean,
     type: Boolean,
     default: false
     default: false
@@ -84,20 +114,75 @@ const props = defineProps({
   drag: {
   drag: {
     type: Boolean,
     type: Boolean,
     default: true
     default: true
+  },
+  // 列表类型，根据文件类型自动调整
+  listType: {
+    type: String,
+    default: 'picture-card'
   }
   }
 })
 })
 
 
 const { proxy } = getCurrentInstance()
 const { proxy } = getCurrentInstance()
-const emit = defineEmits()
+const emit = defineEmits(['file-change', 'update:modelValue'])
 const number = ref(0)
 const number = ref(0)
 const uploadList = ref([])
 const uploadList = ref([])
 const dialogImageUrl = ref('')
 const dialogImageUrl = ref('')
 const dialogVisible = ref(false)
 const dialogVisible = ref(false)
+const previewType = ref('image') // 'image' 或 'video'
+const previewTitle = ref('预览')
 const baseUrl = import.meta.env.VITE_APP_BASE_API
 const baseUrl = import.meta.env.VITE_APP_BASE_API
-const uploadImgUrl = ref(import.meta.env.VITE_APP_BASE_API + props.action) // 上传的图片服务器地址
+const uploadUrl = ref(import.meta.env.VITE_APP_BASE_API + props.action)
 const headers = ref({ Authorization: 'Bearer ' + getToken() })
 const headers = ref({ Authorization: 'Bearer ' + getToken() })
 const fileList = ref([])
 const fileList = ref([])
-const showTip = computed(() => props.isShowTip && (props.fileType || props.fileSize))
+const showTip = computed(
+  () => props.isShowTip && (props.fileType || props.imageSize || props.videoSize)
+)
+
+// 获取文件扩展名
+const getFileExtension = fileName => {
+  if (!fileName) return ''
+  const lastDotIndex = fileName.lastIndexOf('.')
+  return lastDotIndex > -1 ? fileName.slice(lastDotIndex + 1).toLowerCase() : ''
+}
+
+// 判断文件类型 - 更安全的方式
+const isImage = file => {
+  if (!file) return false
+
+  // 优先检查文件类型
+  if (file.type && typeof file.type === 'string' && file.type.startsWith('image/')) {
+    return true
+  }
+
+  // 通过文件扩展名判断
+  const imageExtensions = ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'webp', 'svg']
+  const fileExtension = getFileExtension(file.name || file.url || '')
+  return imageExtensions.includes(fileExtension)
+}
+
+const isVideo = file => {
+  if (!file) return false
+
+  // 优先检查文件类型
+  if (file.type && typeof file.type === 'string' && file.type.startsWith('video/')) {
+    return true
+  }
+
+  // 通过文件扩展名判断
+  const videoExtensions = ['mp4', 'avi', 'mov', 'wmv', 'flv', 'mkv', 'm4v', 'webm']
+  const fileExtension = getFileExtension(file.name || file.url || '')
+  return videoExtensions.includes(fileExtension)
+}
+
+// 获取文件对应的最大大小
+const getFileSizeLimit = file => {
+  if (isImage(file)) {
+    return props.imageSize
+  } else if (isVideo(file)) {
+    return props.videoSize
+  }
+  return Math.max(props.imageSize, props.videoSize) // 默认取较大的值
+}
 
 
 watch(
 watch(
   () => props.modelValue,
   () => props.modelValue,
@@ -126,37 +211,43 @@ watch(
 
 
 // 上传前loading加载
 // 上传前loading加载
 function handleBeforeUpload(file) {
 function handleBeforeUpload(file) {
-  let isImg = false
+  let isFileTypeValid = false
   if (props.fileType.length) {
   if (props.fileType.length) {
-    let fileExtension = ''
-    if (file.name.lastIndexOf('.') > -1) {
-      fileExtension = file.name.slice(file.name.lastIndexOf('.') + 1)
-    }
-    isImg = props.fileType.some(type => {
-      if (file.type.indexOf(type) > -1) return true
+    const fileExtension = getFileExtension(file.name)
+    isFileTypeValid = props.fileType.some(type => {
+      if (file.type && file.type.indexOf(type) > -1) return true
       if (fileExtension && fileExtension.indexOf(type) > -1) return true
       if (fileExtension && fileExtension.indexOf(type) > -1) return true
       return false
       return false
     })
     })
   } else {
   } else {
-    isImg = file.type.indexOf('image') > -1
+    // 如果没有指定文件类型，默认允许图片和视频
+    isFileTypeValid =
+      file.type && (file.type.indexOf('image') > -1 || file.type.indexOf('video') > -1)
   }
   }
-  if (!isImg) {
-    proxy.$modal.msgError(`文件格式不正确，请上传${props.fileType.join('/')}图片格式文件!`)
+
+  if (!isFileTypeValid) {
+    proxy.$modal.msgError(`文件格式不正确，请上传${props.fileType.join('/')}格式文件!`)
     return false
     return false
   }
   }
+
   if (file.name.includes(',')) {
   if (file.name.includes(',')) {
     proxy.$modal.msgError('文件名不正确，不能包含英文逗号!')
     proxy.$modal.msgError('文件名不正确，不能包含英文逗号!')
     return false
     return false
   }
   }
-  if (props.fileSize) {
-    const isLt = file.size / 1024 / 1024 < props.fileSize
-    if (!isLt) {
-      proxy.$modal.msgError(`上传头像图片大小不能超过 ${props.fileSize} MB!`)
-      return false
-    }
+
+  // 根据文件类型获取对应的大小限制
+  const maxSize = getFileSizeLimit(file)
+  const isLt = file.size / 1024 / 1024 < maxSize
+
+  if (!isLt) {
+    const fileType = isImage(file) ? '图片' : '视频'
+    proxy.$modal.msgError(`上传${fileType}大小不能超过 ${maxSize} MB!`)
+    return false
   }
   }
-  proxy.$modal.loading('正在上传图片，请稍候...')
+
+  proxy.$modal.loading('正在上传文件，请稍候...')
   number.value++
   number.value++
+  return true
 }
 }
 
 
 // 文件个数超出
 // 文件个数超出
@@ -165,27 +256,66 @@ function handleExceed() {
 }
 }
 
 
 // 上传成功回调
 // 上传成功回调
+// function handleUploadSuccess(res, file) {
+//   if (res.code === 200) {
+//     console.log('文件上传成功', res)
+//     // 添加上传文件的类型信息
+//     const fileItem = {
+//       name: res.data.originalName,
+//       url: res.data.url,
+//       raw: file // 保存原始文件对象以便后续使用
+//     }
+//     uploadList.value.push(fileItem)
+//     uploadedSuccessfully()
+//   } else {
+//     number.value--
+//     proxy.$modal.closeLoading()
+//     proxy.$modal.msgError(res.msg)
+//     proxy.$refs.mediaUpload.handleRemove(file)
+//     uploadedSuccessfully()
+//   }
+// }
+// 上传成功回调
 function handleUploadSuccess(res, file) {
 function handleUploadSuccess(res, file) {
   if (res.code === 200) {
   if (res.code === 200) {
-    console.log('图片上传', res)
+    console.log('文件上传成功', res)
+    // 添加上传文件的类型信息
+    const fileItem = {
+      name: res.data.originalName,
+      url: res.data.url,
+      raw: file, // 保存原始文件对象以便后续使用
+      isVideo: isVideo(file) // 标记是否为视频
+    }
+
+    // 为视频文件设置一个默认的封面图标
+    if (isVideo(file)) {
+      fileItem.thumbnail = videoThumbnail // 准备一个视频封面图标
+    }
 
 
-    uploadList.value.push({ name: res.data.originalName, url: res.data.url })
+    uploadList.value.push(fileItem)
     uploadedSuccessfully()
     uploadedSuccessfully()
   } else {
   } else {
     number.value--
     number.value--
     proxy.$modal.closeLoading()
     proxy.$modal.closeLoading()
     proxy.$modal.msgError(res.msg)
     proxy.$modal.msgError(res.msg)
-    proxy.$refs.imageUpload.handleRemove(file)
+    proxy.$refs.mediaUpload.handleRemove(file)
     uploadedSuccessfully()
     uploadedSuccessfully()
   }
   }
 }
 }
-
-// 删除图片
+// 删除文件
 function handleDelete(file) {
 function handleDelete(file) {
   const findex = fileList.value.map(f => f.name).indexOf(file.name)
   const findex = fileList.value.map(f => f.name).indexOf(file.name)
   if (findex > -1 && uploadList.value.length === number.value) {
   if (findex > -1 && uploadList.value.length === number.value) {
     fileList.value.splice(findex, 1)
     fileList.value.splice(findex, 1)
-    emit('update:modelValue', listToString(fileList.value))
+    const newValue = listToString(fileList.value)
+    emit('update:modelValue', newValue)
+    emit('file-change', {
+      count: fileList.value.length,
+      fileList: fileList.value,
+      value: newValue,
+      type: 'delete',
+      source: props.source
+    })
     return false
     return false
   }
   }
 }
 }
@@ -196,20 +326,68 @@ function uploadedSuccessfully() {
     fileList.value = fileList.value.filter(f => f.url !== undefined).concat(uploadList.value)
     fileList.value = fileList.value.filter(f => f.url !== undefined).concat(uploadList.value)
     uploadList.value = []
     uploadList.value = []
     number.value = 0
     number.value = 0
-    emit('update:modelValue', listToString(fileList.value))
+    const newValue = listToString(fileList.value)
+    emit('update:modelValue', newValue)
     proxy.$modal.closeLoading()
     proxy.$modal.closeLoading()
+    emit('file-change', {
+      count: fileList.value.length,
+      fileList: fileList.value,
+      value: newValue,
+      type: 'success',
+      source: props.source
+    })
   }
   }
 }
 }
 
 
 // 上传失败
 // 上传失败
 function handleUploadError() {
 function handleUploadError() {
-  proxy.$modal.msgError('上传图片失败')
+  proxy.$modal.msgError('上传文件失败')
   proxy.$modal.closeLoading()
   proxy.$modal.closeLoading()
 }
 }
 
 
-// 预览
-function handlePictureCardPreview(file) {
+// 预览 - 修复错误处理
+function handlePreview(file) {
+  console.log('预览文件:', file) // 调试用
+
+  if (!file || !file.url) {
+    proxy.$modal.msgError('文件信息不完整，无法预览')
+    return
+  }
+
   dialogImageUrl.value = file.url
   dialogImageUrl.value = file.url
+
+  // 安全地判断文件类型
+  try {
+    if (isImage(file)) {
+      previewType.value = 'image'
+      previewTitle.value = '图片预览'
+    } else if (isVideo(file)) {
+      previewType.value = 'video'
+      previewTitle.value = '视频预览'
+    } else {
+      // 如果无法确定类型，根据URL扩展名再次判断
+      const ext = getFileExtension(file.url)
+      const imageExts = ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'webp', 'svg']
+      const videoExts = ['mp4', 'avi', 'mov', 'wmv', 'flv', 'mkv', 'm4v', 'webm']
+
+      if (imageExts.includes(ext)) {
+        previewType.value = 'image'
+        previewTitle.value = '图片预览'
+      } else if (videoExts.includes(ext)) {
+        previewType.value = 'video'
+        previewTitle.value = '视频预览'
+      } else {
+        previewType.value = 'image'
+        previewTitle.value = '文件预览'
+      }
+    }
+  } catch (error) {
+    console.error('预览类型判断错误:', error)
+    // 出错时默认按图片处理
+    previewType.value = 'image'
+    previewTitle.value = '文件预览'
+  }
+
   dialogVisible.value = true
   dialogVisible.value = true
 }
 }
 
 
@@ -229,14 +407,17 @@ function listToString(list, separator) {
 onMounted(() => {
 onMounted(() => {
   if (props.drag && !props.disabled) {
   if (props.drag && !props.disabled) {
     nextTick(() => {
     nextTick(() => {
-      const element = proxy.$refs.imageUpload?.$el?.querySelector('.el-upload-list')
-      Sortable.create(element, {
-        onEnd: evt => {
-          const movedItem = fileList.value.splice(evt.oldIndex, 1)[0]
-          fileList.value.splice(evt.newIndex, 0, movedItem)
-          emit('update:modelValue', listToString(fileList.value))
-        }
-      })
+      const element = proxy.$refs.mediaUpload?.$el?.querySelector('.el-upload-list')
+      if (element) {
+        Sortable.create(element, {
+          onEnd: evt => {
+            const movedItem = fileList.value.splice(evt.oldIndex, 1)[0]
+            fileList.value.splice(evt.newIndex, 0, movedItem)
+            const newValue = listToString(fileList.value)
+            emit('update:modelValue', newValue)
+          }
+        })
+      }
     })
     })
   }
   }
 })
 })
@@ -251,4 +432,45 @@ onMounted(() => {
 :deep(.el-upload.el-upload--picture-card.is-disabled) {
 :deep(.el-upload.el-upload--picture-card.is-disabled) {
   display: none !important;
   display: none !important;
 }
 }
+
+.component-upload-media {
+  :deep(.el-upload-list__item) {
+    transition: none !important;
+
+    // 为视频文件添加特殊样式
+    &.is-video {
+      .el-upload-list__item-thumbnail {
+        position: relative;
+
+        &::before {
+          content: '▶';
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          font-size: 24px;
+          color: white;
+          text-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
+          z-index: 1;
+        }
+
+        &::after {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          background: rgba(0, 0, 0, 0.3);
+          z-index: 0;
+        }
+      }
+    }
+  }
+
+  // 视频缩略图样式
+  :deep(.el-upload-list__item-thumbnail) {
+    object-fit: cover;
+  }
+}
 </style>
 </style>

src/layout/components/AppMain.vue

@@ -2,9 +2,11 @@
   <section class="app-main">
   <section class="app-main">
     <router-view v-slot="{ Component, route }">
     <router-view v-slot="{ Component, route }">
       <transition name="fade-transform" mode="out-in">
       <transition name="fade-transform" mode="out-in">
-        <keep-alive :include="tagsViewStore.cachedViews">
-          <component v-if="!route.meta.link" :is="Component" :key="route.path"/>
-        </keep-alive>
+        <!-- 慎用keep-alive缓存标签 -->
+        <!-- <keep-alive :include="tagsViewStore.cachedViews">
+
+        </keep-alive> -->
+        <component v-if="!route.meta.link" :is="Component" :key="route.path" />
       </transition>
       </transition>
     </router-view>
     </router-view>
     <iframe-toggle />
     <iframe-toggle />
@@ -13,8 +15,8 @@
 </template>
 </template>
 
 
 <script setup>
 <script setup>
-import copyright from "./Copyright/index"
-import iframeToggle from "./IframeToggle/index"
+import copyright from './Copyright/index'
+import iframeToggle from './IframeToggle/index'
 import useTagsViewStore from '@/store/modules/tagsView'
 import useTagsViewStore from '@/store/modules/tagsView'
 
 
 const route = useRoute()
 const route = useRoute()
@@ -86,4 +88,3 @@ function addIframe() {
   border-radius: 3px;
   border-radius: 3px;
 }
 }
 </style>
 </style>
-

src/utils/1.js

+{
+    "apiAttributeSettingDtoList": [
+        {
+            "attributeSettingBizId": "attribute_setting_WlkMorcKwiNbm0Em",
+            "productLaunchBizId": "product_launch_cap2EOE86bOCI2Q2",
+            "fieldBizId": "field_UmvLSgtBj3j02JHI",
+            "fieldValueBizId": "field_value_PBa8PgSYxaYUeIRi",
+            "name": "是否区分吸烟",
+            "value": "不区分",
+            "isCustomize": "0",
+            "remark": null,
+            "textBoxType": "select"
+        },
+        {
+            "attributeSettingBizId": "attribute_setting_pP32oWpjgrlF6xan",
+            "productLaunchBizId": "product_launch_cap2EOE86bOCI2Q2",
+            "fieldBizId": "field_HEyLqvSBsDXvIWAd",
+            "fieldValueBizId": "",
+            "name": "经纪人",
+            "value": "",
+            "isCustomize": "0",
+            "remark": null,
+            "textBoxType": "text"
+        },
+        {
+            "attributeSettingBizId": "attribute_setting_xEAA2nPCOcAlBcpq",
+            "productLaunchBizId": "product_launch_cap2EOE86bOCI2Q2",
+            "fieldBizId": "field_IgjqsyU9oI5FCWFF",
+            "fieldValueBizId": "field_value_MARgbetAoKpL1jNY",
+            "name": "性别",
+            "value": "男",
+            "isCustomize": "0",
+            "remark": null,
+            "textBoxType": "select"
+        },
+        {
+            "attributeSettingBizId": "attribute_setting_EbJWfWYiVgno9MNy",
+            "productLaunchBizId": "product_launch_cap2EOE86bOCI2Q2",
+            "fieldBizId": "field_9CmvVH4Zltcjy0Ld",
+            "fieldValueBizId": "field_value_aPkDpPxZtLEBoqup",
+            "name": "证件类型",
+            "value": "身份证",
+            "isCustomize": "0",
+            "remark": null,
+            "textBoxType": "select"
+        },
+        {
+            "attributeSettingBizId": "attribute_setting_TcUdpmiPQUhYL8A3",
+            "productLaunchBizId": "product_launch_cap2EOE86bOCI2Q2",
+            "fieldBizId": "field_AEUevz9S6o6jmOtp",
+            "fieldValueBizId": "",
+            "name": "保单日期",
+            "value": "",
+            "isCustomize": "0",
+            "remark": null,
+            "textBoxType": "date"
+        },
+        {
+            "attributeSettingBizId": "attribute_setting_jCOxZccDQLJTESKE",
+            "productLaunchBizId": "product_launch_cap2EOE86bOCI2Q2",
+            "fieldBizId": "field_YX8KbhC0NPJfBoRR",
+            "fieldValueBizId": "",
+            "name": "颜色",
+            "value": "field_value_9GeaIYompsO6kizv;field_value_OMwQQKAl7PjLjjuL;field_value_mTCXOVFgWs9WlzRX",
+            "isCustomize": "0",
+            "remark": null,
+            "textBoxType": "multipleSelect"
+        },
+        {
+            "attributeSettingBizId": "attribute_setting_DZ5SjMXlOSXBXwtE",
+            "productLaunchBizId": "product_launch_cap2EOE86bOCI2Q2",
+            "fieldBizId": "custom1765265051120",
+            "fieldValueBizId": "",
+            "name": "222",
+            "value": "333",
+            "isCustomize": "1",
+            "remark": null,
+            "textBoxType": null,
+            "customValue": "自定义参数"
+        },
+        {
+            "attributeSettingBizId": "attribute_setting_pjtvm7lZtFutvgx9",
+            "productLaunchBizId": "product_launch_cap2EOE86bOCI2Q2",
+            "fieldBizId": "custom1765265062476",
+            "fieldValueBizId": "",
+            "name": "555",
+            "value": "666",
+            "isCustomize": "1",
+            "remark": null,
+            "textBoxType": null,
+            "customValue": "自定义参数"
+        },
+        {
+            "attributeSettingBizId": "attribute_setting_04iIGcmvdVBE04rZ",
+            "productLaunchBizId": "product_launch_cap2EOE86bOCI2Q2",
+            "fieldBizId": "custom1765266273226",
+            "fieldValueBizId": "",
+            "name": "",
+            "value": "",
+            "isCustomize": "1",
+            "remark": null,
+            "textBoxType": null,
+            "customValue": "自定义参数"
+        }
+    ],
+    "apiSpeciesSettingDtoList": [
+        {
+            "isIllustration": "1",
+            "speciesName": "species_type_IUVxfmyu8RUTHsfq",
+            "speciesTypeBizId": "species_type_IUVxfmyu8RUTHsfq",
+            "typeName": "保障计划",
+            "speciesId": 1765273896521,
+            "isAdd": false,
+            "isCustomize": "0",
+            "value": "保障1",
+            "productLaunchBizId": "product_launch_cap2EOE86bOCI2Q2"
+        },
+        {
+            "speciesId": 1765273899121,
+            "speciesTypeBizId": "species_type_IUVxfmyu8RUTHsfq",
+            "isAdd": false,
+            "value": "保障2",
+            "typeName": "保障计划",
+            "isCustomize": "0",
+            "isIllustration": "1",
+            "illustrationUrl": "",
+            "productLaunchBizId": "product_launch_cap2EOE86bOCI2Q2"
+        },
+        {
+            "isIllustration": "0",
+            "speciesName": "species_type_TcQNeGLE4rcBcjsj",
+            "speciesTypeBizId": "species_type_TcQNeGLE4rcBcjsj",
+            "typeName": "供款年期",
+            "speciesId": 1765273906553,
+            "isAdd": false,
+            "isCustomize": "0",
+            "value": "供款1",
+            "productLaunchBizId": "product_launch_cap2EOE86bOCI2Q2"
+        },
+        {
+            "speciesId": 1765273908642,
+            "speciesTypeBizId": "species_type_TcQNeGLE4rcBcjsj",
+            "isAdd": false,
+            "value": "供款2",
+            "typeName": "供款年期",
+            "isCustomize": "0",
+            "productLaunchBizId": "product_launch_cap2EOE86bOCI2Q2"
+        },
+        {
+            "typeName": "颜色",
+            "value": "红的",
+            "isIllustration": "0",
+            "isCustomize": "1",
+            "productLaunchBizId": "product_launch_cap2EOE86bOCI2Q2"
+        },
+        {
+            "typeName": "颜色",
+            "value": "黑的",
+            "isCustomize": "1",
+            "productLaunchBizId": "product_launch_cap2EOE86bOCI2Q2"
+        }
+    ],
+    "apiSpeciesPriceDtoList": [
+        {
+            "productLaunchBizId": "product_launch_cap2EOE86bOCI2Q2",
+            "price": 11,
+            "inventory": 21,
+            "illustrationUrl": "",
+            "status": "1",
+            "apiSpeciesSettingDtoList": [
+                {
+                    "value": "保障1",
+                    "typeName": "保障计划",
+                    "isIllustration": "1",
+                    "speciesTypeBizId": "species_type_IUVxfmyu8RUTHsfq"
+                },
+                {
+                    "value": "供款1",
+                    "typeName": "供款年期",
+                    "isIllustration": "0",
+                    "illustrationUrl": "",
+                    "speciesTypeBizId": "species_type_TcQNeGLE4rcBcjsj"
+                },
+                {
+                    "value": "红的",
+                    "typeName": "颜色",
+                    "isIllustration": "0",
+                    "illustrationUrl": ""
+                }
+            ]
+        },
+        {
+            "productLaunchBizId": "product_launch_cap2EOE86bOCI2Q2",
+            "price": 0,
+            "inventory": 0,
+            "illustrationUrl": "",
+            "status": "1",
+            "apiSpeciesSettingDtoList": [
+                {
+                    "value": "保障1",
+                    "typeName": "保障计划",
+                    "isIllustration": "1",
+                    "speciesTypeBizId": "species_type_IUVxfmyu8RUTHsfq"
+                },
+                {
+                    "value": "供款1",
+                    "typeName": "供款年期",
+                    "isIllustration": "0",
+                    "illustrationUrl": "",
+                    "speciesTypeBizId": "species_type_TcQNeGLE4rcBcjsj"
+                },
+                {
+                    "value": "黑的",
+                    "typeName": "颜色",
+                    "isIllustration": "0",
+                    "illustrationUrl": ""
+                }
+            ]
+        },
+        {
+            "productLaunchBizId": "product_launch_cap2EOE86bOCI2Q2",
+            "price": 0,
+            "inventory": 0,
+            "illustrationUrl": "",
+            "status": "1",
+            "apiSpeciesSettingDtoList": [
+                {
+                    "value": "保障1",
+                    "typeName": "保障计划",
+                    "isIllustration": "1",
+                    "speciesTypeBizId": "species_type_IUVxfmyu8RUTHsfq"
+                },
+                {
+                    "value": "供款2",
+                    "typeName": "供款年期",
+                    "isIllustration": "0",
+                    "illustrationUrl": "",
+                    "speciesTypeBizId": "species_type_TcQNeGLE4rcBcjsj"
+                },
+                {
+                    "value": "红的",
+                    "typeName": "颜色",
+                    "isIllustration": "0",
+                    "illustrationUrl": ""
+                }
+            ]
+        },
+        {
+            "productLaunchBizId": "product_launch_cap2EOE86bOCI2Q2",
+            "price": 0,
+            "inventory": 0,
+            "illustrationUrl": "",
+            "status": "1",
+            "apiSpeciesSettingDtoList": [
+                {
+                    "value": "保障1",
+                    "typeName": "保障计划",
+                    "isIllustration": "1",
+                    "speciesTypeBizId": "species_type_IUVxfmyu8RUTHsfq"
+                },
+                {
+                    "value": "供款2",
+                    "typeName": "供款年期",
+                    "isIllustration": "0",
+                    "illustrationUrl": "",
+                    "speciesTypeBizId": "species_type_TcQNeGLE4rcBcjsj"
+                },
+                {
+                    "value": "黑的",
+                    "typeName": "颜色",
+                    "isIllustration": "0",
+                    "illustrationUrl": ""
+                }
+            ]
+        },
+        {
+            "productLaunchBizId": "product_launch_cap2EOE86bOCI2Q2",
+            "price": 0,
+            "inventory": 0,
+            "illustrationUrl": "",
+            "status": "1",
+            "apiSpeciesSettingDtoList": [
+                {
+                    "value": "保障2",
+                    "typeName": "保障计划",
+                    "isIllustration": "1",
+                    "speciesTypeBizId": "species_type_IUVxfmyu8RUTHsfq"
+                },
+                {
+                    "value": "供款1",
+                    "typeName": "供款年期",
+                    "isIllustration": "0",
+                    "illustrationUrl": "",
+                    "speciesTypeBizId": "species_type_TcQNeGLE4rcBcjsj"
+                },
+                {
+                    "value": "红的",
+                    "typeName": "颜色",
+                    "isIllustration": "0",
+                    "illustrationUrl": ""
+                }
+            ]
+        },
+        {
+            "productLaunchBizId": "product_launch_cap2EOE86bOCI2Q2",
+            "price": 0,
+            "inventory": 0,
+            "illustrationUrl": "",
+            "status": "1",
+            "apiSpeciesSettingDtoList": [
+                {
+                    "value": "保障2",
+                    "typeName": "保障计划",
+                    "isIllustration": "1",
+                    "speciesTypeBizId": "species_type_IUVxfmyu8RUTHsfq"
+                },
+                {
+                    "value": "供款1",
+                    "typeName": "供款年期",
+                    "isIllustration": "0",
+                    "illustrationUrl": "",
+                    "speciesTypeBizId": "species_type_TcQNeGLE4rcBcjsj"
+                },
+                {
+                    "value": "黑的",
+                    "typeName": "颜色",
+                    "isIllustration": "0",
+                    "illustrationUrl": ""
+                }
+            ]
+        },
+        {
+            "productLaunchBizId": "product_launch_cap2EOE86bOCI2Q2",
+            "price": 0,
+            "inventory": 0,
+            "illustrationUrl": "",
+            "status": "1",
+            "apiSpeciesSettingDtoList": [
+                {
+                    "value": "保障2",
+                    "typeName": "保障计划",
+                    "isIllustration": "1",
+                    "speciesTypeBizId": "species_type_IUVxfmyu8RUTHsfq"
+                },
+                {
+                    "value": "供款2",
+                    "typeName": "供款年期",
+                    "isIllustration": "0",
+                    "illustrationUrl": "",
+                    "speciesTypeBizId": "species_type_TcQNeGLE4rcBcjsj"
+                },
+                {
+                    "value": "红的",
+                    "typeName": "颜色",
+                    "isIllustration": "0",
+                    "illustrationUrl": ""
+                }
+            ]
+        },
+        {
+            "productLaunchBizId": "product_launch_cap2EOE86bOCI2Q2",
+            "price": 0,
+            "inventory": 0,
+            "illustrationUrl": "",
+            "status": "1",
+            "apiSpeciesSettingDtoList": [
+                {
+                    "value": "保障2",
+                    "typeName": "保障计划",
+                    "isIllustration": "1",
+                    "speciesTypeBizId": "species_type_IUVxfmyu8RUTHsfq"
+                },
+                {
+                    "value": "供款2",
+                    "typeName": "供款年期",
+                    "isIllustration": "0",
+                    "illustrationUrl": "",
+                    "speciesTypeBizId": "species_type_TcQNeGLE4rcBcjsj"
+                },
+                {
+                    "value": "黑的",
+                    "typeName": "颜色",
+                    "isIllustration": "0",
+                    "illustrationUrl": ""
+                }
+            ]
+        }
+    ],
+    "apiProductLaunchDto": {
+        "productLaunchBizId": "product_launch_cap2EOE86bOCI2Q2",
+        "productBizId": "product_1001",
+        "title": "万通保险产品",
+        "shortTitle": "第一个短标题",
+        "mainUrlsList": [
+            "https://yd-ali-oss.oss-cn-shanghai-finance-1-pub.aliyuncs.com/png/2025/11/28/cfafe35897824f28949af08a4c455b10.png",
+            "https://yd-ali-oss.oss-cn-shanghai-finance-1-pub.aliyuncs.com/png/2025/11/28/6e0de16e242049189605e493c1bcee14.png",
+            "https://yd-ali-oss.oss-cn-shanghai-finance-1-pub.aliyuncs.com/png/2025/11/28/7215aa9e91b74170a7e5ef918cade0b7.png",
+            "https://yd-ali-oss.oss-cn-shanghai-finance-1-pub.aliyuncs.com/png/2025/12/09/0b7640e688c64c1f83173da38c7dfec6.png"
+        ],
+        "detailUrlsList": [
+            "https://yd-ali-oss.oss-cn-shanghai-finance-1-pub.aliyuncs.com/png/2025/12/09/503f71294ffc43f08dd868e5c9e8fffd.png"
+        ],
+        "detailDescription": "产品的详细描述",
+        "status": "DSH",
+        "isTiming": "1",
+        "releaseDate": "2025-12-10 02:00:00",
+        "isHiddenPrice": "1",
+        "isPurchaseLimit": "1",
+        "limitDateUnit": "YEARLY",
+        "limitQuantity": 9,
+        "projectBizIdList": [
+            "project_IbjfmMTYvNEBuh2S",
+            "project_p6OxrioQjvEJD3BZ",
+            "project_prvciwgfQSRfsbRH",
+            "project_UEdpnAgfnlmUbVuy"
+        ],
+        "apiProjectDtoList": [
+            {
+                "projectBizId": "project_IbjfmMTYvNEBuh2S",
+                "projectName": "CSF-小程序",
+                "projectCode": "PROJECT1019"
+            },
+            {
+                "projectBizId": "project_p6OxrioQjvEJD3BZ",
+                "projectName": "SW001",
+                "projectCode": "PROJECT1016"
+            },
+            {
+                "projectBizId": "project_prvciwgfQSRfsbRH",
+                "projectName": "邮件群发系统",
+                "projectCode": "PROJECT1018"
+            },
+            {
+                "projectBizId": "project_UEdpnAgfnlmUbVuy",
+                "projectName": "制作薯片",
+                "projectCode": "PROJECT1017"
+            }
+        ],
+        "categoryBizIdList": [
+            "category_49nw0brogpbZfwIi",
+            "category_G0oLWjCx8G788o3Y",
+            "category_LYKKjcf7O3XG5nz8"
+        ]
+    }
+}

src/utils/2.js

+speciesJson
+:
+"[{\"isIllustration\":\"1\",\"speciesTypeBizId\":\"species_type_IUVxfmyu8RUTHsfq\",\"typeCode\":\"PROTECTION_PLAN\",\"typeName\":\"保障计划\",\"value\":\"70岁\"},{\"illustrationUrl\":\"\",\"isIllustration\":\"0\",\"speciesTypeBizId\":\"species_type_TcQNeGLE4rcBcjsj\",\"typeCode\":\"PAYMENT_TERM\",\"typeName\":\"供款年期\",\"value\":\"3\"},{\"illustrationUrl\":\"\",\"isIllustration\":\"0\",\"speciesTypeBizId\":\"species_type_uvdLgZQHUZQMfv1k\",\"typeCode\":\"SPECIES_TYPE_CODE1616036003\",\"typeName\":\"尺码\",\"value\":\"S\"}]"
+status
+:
+1

src/utils/request.js

@@ -12,11 +12,10 @@ let downloadLoadingInstance
 export let isRelogin = { show: false }
 export let isRelogin = { show: false }
 
 
 axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
 axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
+
 // 创建axios实例
 // 创建axios实例
 const service = axios.create({
 const service = axios.create({
-  // axios中请求配置有baseURL选项，表示请求URL公共部分
-  baseURL: import.meta.env.VITE_APP_BASE_API,
-  // 超时
+  baseURL: import.meta.env.VITE_APP_BASE_API || '/api', // 使用环境变量
   timeout: 10000
   timeout: 10000
 })
 })
 
 
@@ -109,7 +108,7 @@ service.interceptors.response.use(
             useUserStore()
             useUserStore()
               .logOut()
               .logOut()
               .then(() => {
               .then(() => {
-                location.href = '/index'
+                location.href = '/login?redirect=/workbench'
               })
               })
           })
           })
           .catch(() => {
           .catch(() => {
@@ -123,6 +122,9 @@ service.interceptors.response.use(
     } else if (code === 601) {
     } else if (code === 601) {
       ElMessage({ message: msg, type: 'warning' })
       ElMessage({ message: msg, type: 'warning' })
       return Promise.reject(new Error(msg))
       return Promise.reject(new Error(msg))
+    } else if (code == 1004) {
+      // 后端自定义的错误码便于前端显示错误信息，非系统性
+      return Promise.resolve(res.data)
     } else if (code !== 200) {
     } else if (code !== 200) {
       ElNotification.error({ title: msg })
       ElNotification.error({ title: msg })
       return Promise.reject('error')
       return Promise.reject('error')
@@ -133,13 +135,37 @@ service.interceptors.response.use(
   error => {
   error => {
     console.log('err' + error)
     console.log('err' + error)
     let { message } = error
     let { message } = error
+
     if (message == 'Network Error') {
     if (message == 'Network Error') {
       message = '后端接口连接异常'
       message = '后端接口连接异常'
     } else if (message.includes('timeout')) {
     } else if (message.includes('timeout')) {
       message = '系统接口请求超时'
       message = '系统接口请求超时'
+    } else if (message == 'Request failed with status code 401') {
+      if (!isRelogin.show) {
+        isRelogin.show = true
+        ElMessageBox.confirm('登录状态已过期，请重新登录', '系统提示', {
+          confirmButtonText: '重新登录',
+          cancelButtonText: '取消',
+          type: 'warning',
+          showCancelButton: false
+        })
+          .then(() => {
+            isRelogin.show = false
+            useUserStore()
+              .logOut()
+              .then(() => {
+                location.href = '/login?redirect=/workbench'
+              })
+          })
+          .catch(() => {
+            isRelogin.show = false
+          })
+      }
+      return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
     } else if (message.includes('Request failed with status code')) {
     } else if (message.includes('Request failed with status code')) {
       message = '系统接口' + message.substr(message.length - 3) + '异常'
       message = '系统接口' + message.substr(message.length - 3) + '异常'
     }
     }
+
     ElMessage({ message: message, type: 'error', duration: 5 * 1000 })
     ElMessage({ message: message, type: 'error', duration: 5 * 1000 })
     return Promise.reject(error)
     return Promise.reject(error)
   }
   }

src/views/merchandise/addProduce.vue

+<template>
+  <div class="app-container">
+    <div class="form-content">
+      <div class="formHeader">基础信息</div>
+
+      <el-form :model="queryParams" ref="queryRef" label-position="top">
+        <el-row>
+          <el-col :span="12">
+            <div class="commonHeader">产品标题</div>
+            <el-select
+              v-model="queryParams.productName"
+              filterable
+              remote
+              allow-create
+              default-first-option
+              :reserve-keyword="false"
+              placeholder="请选择产品名称"
+              @blur="handleSelectChange"
+              :remote-method="searchProduct"
+              clearable
+              remote-show-suffix
+            >
+              <el-option
+                v-for="item in productList"
+                :key="item.productBizId"
+                :label="item.productName"
+                :value="item.productBizId"
+              />
+            </el-select>
+          </el-col>
+          <el-col :span="24">
+            <div class="nameTip">
+              <span style="color: #ccc">标题需包含产品名称。</span>
+
+              <el-tooltip placement="bottom" effect="light" trigger="click">
+                <template #content>
+                  <div style="width: 300px">
+                    <div v-for="item in nameRequireList" :key="item.key" style="margin-bottom: 8px">
+                      <span style="font-size: 13px">•</span>
+                      <span style="margin-left: 5px">{{ item.label }}</span>
+                    </div>
+                  </div>
+                </template>
+                <span style="color: #576b95; cursor: pointer">查看命名要求</span>
+              </el-tooltip>
+            </div>
+          </el-col>
+          <el-col :span="24" v-if="showNameTip">
+            <div class="tipCon">
+              <el-icon color="red" :size="20" style="margin-right: 5px"><Warning /></el-icon>
+              <span>标题信息过少，请至少输入5个有效字数（含中文、英文、数字）</span>
+            </div>
+          </el-col>
+          <el-col :span="24" style="margin: 20px 0">
+            <div class="commonHeader">
+              图片和视频
+              <span style="color: rgb(111, 111, 111); font-size: 15px"
+                >({{ imageInfo.count }}/9)</span
+              >
+            </div>
+
+            <image-upload
+              v-model="queryParams.picture"
+              :action="'/oss/api/oss/upload'"
+              :limit="9"
+              :image-size="10"
+              :video-size="500"
+              :file-type="['png', 'jpg', 'jpeg', 'mp4']"
+              :is-show-tip="false"
+              @change="handleImageChange"
+              @file-change="handleFileChange"
+            />
+          </el-col>
+          <el-col :span="24">
+            <div v-for="(item, index) in imageRequireList" :key="item.key" class="imgTip">
+              <span>{{ index + 1 }}.</span>
+              <span>{{ item.label }}</span>
+              <el-tooltip placement="bottom" effect="light" trigger="click" v-if="item.showTip">
+                <template #content>
+                  <div style="width: 300px">
+                    <div v-for="item in imageTipList" :key="item.key" style="margin-bottom: 8px">
+                      <span style="font-size: 13px">•</span>
+                      <span style="margin-left: 5px">{{ item.label }}</span>
+                    </div>
+                  </div>
+                </template>
+                <span style="color: #576b95; cursor: pointer">{{ item.tipContent }}</span>
+              </el-tooltip>
+            </div>
+          </el-col>
+          <el-col :span="24" v-if="imageInfo.count > 0 && imageInfo.count < 3">
+            <div class="tipCon">
+              <el-icon color="red" :size="20" style="margin-right: 5px"><Warning /></el-icon>
+              <span>请上传至少3张产品主图</span>
+            </div>
+          </el-col>
+          <el-col :span="24" style="margin: 20px 0">
+            <div class="commonHeader">产品类目</div>
+
+            <!-- <div class="classTip" v-if="!queryParams.productName || imageInfo.count < 3">
+            填写标题及上传主图后，即可选择类目
+          </div> -->
+
+            <CategoryTable style="height: 300px" type="add" ref="categoryData" />
+          </el-col>
+        </el-row>
+      </el-form>
+    </div>
+    <div class="bottomBtn">
+      <el-button type="primary" size="large" @click="submitProduct">下一步</el-button>
+    </div>
+  </div>
+</template>
+<script setup name="InsuranceProduct">
+import { getProductList, addProduct } from '@/api/product/index'
+import useUserStore from '@/store/modules/user'
+import { computed, ref } from 'vue'
+import ImageUpload from '@/components/ImageUpload/index.vue' //图片上传组件
+import CategoryTable from '@/components/CategoryTable/index.vue' //图片上传组件
+const userStore = useUserStore()
+const router = useRouter()
+const { proxy } = getCurrentInstance()
+// const { bx_product_type, sys_scope, bx_product_status, bx_smoking_allowed, bx_currency_type } =
+//   proxy.useDict(
+//     'bx_product_type',
+//     'sys_scope',
+//     'bx_product_status',
+//     'bx_smoking_allowed',
+//     'bx_currency_type'
+//   )
+const showNameTip = ref(false)
+const imageInfo = ref({ count: 0, fileList: [] })
+const productList = ref([])
+const categoryData = ref(null)
+const nameRequireList = ref([
+  {
+    label: '标题中必须包含产品名称',
+    key: '1'
+  },
+  {
+    label: '标题禁止出现连续重复的关键词',
+    key: '2'
+  },
+  {
+    label: '标题字数不少于5个字，包括中文、 英文、数字',
+    key: '3'
+  },
+  {
+    label: '标题为非中文时需要附带与产品对应一致的中文翻译',
+    key: '4'
+  },
+  {
+    label: '标题中需避免填写错别字',
+    key: '5'
+  }
+])
+const imageRequireList = ref([
+  {
+    label: '商品主图须符合平台要求，否则将无法通过审核。',
+    key: '1',
+    showTip: true,
+    tipContent: '查看主图要求'
+  },
+  {
+    label: '最少上传3个素材，最多上传9个素材，其中最多上传1个视频(mp4格式)，拖拽图片可排序。',
+    key: '2'
+  },
+  {
+    label: '视频时长不超过180秒，视频大小不超过500M；单张图片需限制在10M以内。',
+    key: '3'
+  }
+])
+const imageTipList = ref([
+  {
+    label: '全类目的产品主图要求提供不少于3张产品相关图片',
+    key: '1'
+  },
+  {
+    label: '主图第一张需为产品实物图',
+    key: '2'
+  },
+  {
+    label: '产品主图中不可包含相同的图片',
+    key: '3'
+  },
+  {
+    label: '产品图片不允许为手机截图、空白图',
+    key: '4'
+  },
+  {
+    label: '图片需清晰，不允许打码、遮挡/ps',
+    key: '5'
+  }
+])
+const data = reactive({
+  form: {},
+  queryParams: {},
+  rules: {
+    productName: [{ required: true, message: '产品名称不能为空', trigger: 'blur' }],
+    scope: [{ required: true, message: '作用域不能为空', trigger: 'blur' }],
+    productType: [{ required: true, message: '产品类型不能为空', trigger: 'blur' }],
+    currency: [{ required: true, message: '货币不能为空', trigger: 'blur' }],
+    premiumRate: [
+      { required: true, message: '基础费率不能为空', trigger: 'blur' },
+      {
+        validator: (rule, value, callback) => {
+          if (value === '' || value === null) {
+            callback(new Error('基础费率不能为空'))
+            return
+          }
+
+          const numValue = Number(value)
+          if (isNaN(numValue)) {
+            callback(new Error('请输入有效的数字'))
+          } else if (numValue < 0) {
+            callback(new Error('基础费率不能小于0'))
+          } else if (numValue > 100) {
+            callback(new Error('基础费率不能大于100'))
+          } else {
+            callback()
+          }
+        },
+        trigger: 'blur'
+      }
+    ],
+    smokingAllowed: [{ required: true, message: '是否区分吸烟不能为空', trigger: 'blur' }],
+    productStatus: [{ required: true, message: '产品状态不能为空', trigger: 'blur' }],
+    startAge: [
+      { required: true, message: '起保年龄不能为空', trigger: 'blur' },
+      {
+        validator: (rule, value, callback) => {
+          if (!Number.isInteger(Number(value)) || value <= 0) {
+            callback(new Error('请输入正整数'))
+          } else {
+            callback()
+          }
+        },
+        trigger: 'blur'
+      }
+    ],
+    endAge: [
+      { required: true, message: '终保年龄不能为空', trigger: 'blur' },
+      {
+        validator: (rule, value, callback) => {
+          if (!Number.isInteger(Number(value)) || value <= 0) {
+            callback(new Error('请输入正整数'))
+          } else if (Number(value) <= Number(form.value.startAge)) {
+            callback(new Error('终保必须大于起保'))
+          } else {
+            callback()
+          }
+        },
+        trigger: 'blur'
+      }
+    ],
+    tenantBizId: [{ required: true, message: '所属租户不能为空', trigger: 'blur' }],
+    ssDeptBizIdList: [
+      {
+        required: true,
+        message: '所属保险公司不能为空',
+        trigger: 'change',
+        validator: (rule, value, callback) => {
+          if (!value || value.length === 0) {
+            callback(new Error('请至少选择一个所属保险公司'))
+          } else {
+            callback()
+          }
+        }
+      }
+    ],
+    picture: [
+      {
+        required: true,
+        validator: (rule, value, callback) => {
+          if (!value || value.trim() === '') {
+            callback(new Error('请上传产品图片'))
+          } else {
+            callback()
+          }
+        },
+        trigger: 'change'
+      }
+    ]
+  }
+})
+
+const { queryParams, form, rules } = toRefs(data)
+function handleImageChange(value) {
+  console.log('图片', value)
+}
+const handleFileChange = info => {
+  imageInfo.value = JSON.parse(JSON.stringify(info))
+  console.log('图片信息', imageInfo.value)
+}
+const handleSelectChange = () => {
+  if (queryParams.value.productName && queryParams.value.productName.length < 5) {
+    showNameTip.value = true
+  } else if (!queryParams.value.productName) {
+    showNameTip.value = true
+  } else {
+    showNameTip.value = false
+  }
+}
+/** 查询产品列表 */
+function searchProduct(query) {
+  let productName = query ? query.trim() : ''
+
+  let data = {
+    productName: productName,
+    pageSize: 10,
+    pageNo: 1
+  }
+  getProductList(data).then(response => {
+    if (response.code === 200) {
+      productList.value = response.data.records
+    } else {
+      productList.value = []
+      proxy.$modal.msgError(response.msg)
+    }
+  })
+}
+/** 新增产品 */
+function submitProduct() {
+  let productBizId = ''
+  let categoryBizIdList = []
+  let mainUrlsList = []
+  let productName = queryParams.value.productName
+  if (!productName) {
+    proxy.$modal.msgError('产品名称不能为空或长度小于5')
+    showNameTip.value = true
+    return
+  } else {
+    productList.value.forEach(item => {
+      if (item.productBizId === productName) {
+        productBizId = item.productBizId
+        productName = item.productName
+      }
+    })
+  }
+  if (imageInfo.value.fileList && imageInfo.value.fileList.length > 0) {
+    imageInfo.value.fileList.forEach(item => {
+      mainUrlsList.push(item.url)
+    })
+  } else {
+    proxy.$modal.msgError('请上传产品图片')
+    return
+  }
+  if (categoryData.value) {
+    categoryData.value.categoryList.forEach(item => {
+      item.data.forEach(item2 => {
+        if (item2.isSelected) {
+          categoryBizIdList.push(item2.categoryBizId)
+        }
+      })
+    })
+  }
+  
+  if (categoryBizIdList.length === 0) {
+    proxy.$modal.msgError('请选择产品类目')
+    return
+  }
+
+  let data = {
+    productBizId: productBizId,
+    productName: productName,
+    mainUrlsList: mainUrlsList,
+    categoryBizIdList: categoryBizIdList
+  }
+
+  // return
+  addProduct(data).then(response => {
+    if (response.code === 200) {
+      router.push({
+        path: '/merchandise/putOnSale',
+        query: {
+          productBizId: response.data.productBizId,
+          productLaunchBizId: response.data.productLaunchBizId
+        }
+      })
+    } else {
+      proxy.$modal.msgError(response.msg)
+    }
+  })
+}
+
+searchProduct()
+</script>
+<style lang="scss" scoped>
+.app-container {
+  width: 100%;
+  box-sizing: border-box;
+  /* background-color: rgb(247 247 247) !important; */
+  /* padding: 0 !important; */
+  /* height: 500px !important;
+  overflow: hidden;
+  overflow-y: scroll; */
+}
+.form-content {
+  width: 100%;
+  box-sizing: border-box;
+  height: 72.5vh;
+  overflow: hidden;
+  overflow-y: scroll;
+  /* padding: 20px; */
+  /* background-color: #fff; */
+}
+.formHeader {
+  margin-bottom: 20px;
+  font-size: 22px;
+  font-weight: 600;
+}
+.nameTip {
+  font-size: 13px;
+  margin-top: 10px;
+}
+.tipCon {
+  /* width: 450px; */
+  width: fit-content;
+  /* 为了更好的兼容性，可以加上带前缀的版本 */
+  width: -moz-fit-content;
+  width: -webkit-fit-content;
+  margin: 5px 0;
+  padding: 10px 10px;
+  border-radius: 5px;
+  background-color: rgb(247 247 247);
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  span {
+    color: rgb(111 111 111);
+  }
+}
+.commonHeader {
+  font-size: 16px;
+  margin-bottom: 15px;
+}
+.imgTip {
+  color: #ccc;
+  font-size: 14px;
+  margin-bottom: 10px;
+}
+.classTip {
+  color: #ccc;
+  font-size: 14px;
+}
+.bottomBtn {
+  border-top: 1px solid rgb(247 247 247);
+  width: 100%;
+  padding: 30px 20px;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  background-color: #fff;
+}
+</style>

src/views/merchandise/components/comeInfo.vue

+<template>
+  <div class="app-container">
+    <el-row style="margin-bottom: 20px">
+      <el-col style="display: flex; justify-content: space-between"
+        ><div>
+          <el-button type="primary" plain icon="Refresh" @click="updateSpecies">更新规格</el-button>
+        </div>
+      </el-col>
+    </el-row>
+    <el-table
+      :data="tableData"
+      :span-method="objectSpanMethod"
+      border
+      style="width: 100%; margin-top: 20px"
+      row-key="rowKey"
+    >
+      <!-- 动态生成所有列 -->
+      <template v-for="column in tableColumns" :key="column.prop">
+        <el-table-column :prop="column.prop" :label="column.label" />
+      </template>
+
+      <!-- 固定操作列 -->
+      <el-table-column
+        label="操作"
+        :width="tableData.length > 0 ? 180 : 0"
+        align="center"
+        fixed="right"
+      >
+        <template #default="scope">
+          <el-button type="primary" size="small" @click="handleCommissionSetting(scope.row)">
+            佣金设置
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getSpeciesList"
+      style="margin-top: 10px"
+    />
+    <!-- 佣金设置 -->
+    <el-dialog
+      title="佣金设置"
+      v-model="showCommisionSetting"
+      width="1200px"
+      append-to-body
+      :close-on-click-modal="false"
+    >
+      <!-- 表格数据 -->
+      <el-table v-loading="settingLoading" :data="settingList" border ref="settingTableRef">
+        <el-table-column
+          label="序号 "
+          width="55"
+          align="center"
+          type="index"
+          fixed="left"
+        ></el-table-column>
+        <el-table-column label="费用名称" prop="expenseName" width="150" fixed="left">
+          <template #header>
+            <span class="required-label">费用名称</span>
+          </template>
+          <template #default="scope">
+            <el-select v-model="scope.row.expenseName" placeholder="请选择">
+              <el-option
+                v-for="item in commission_cost_type"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column label="佣金年限(起)" prop="startPeriod" width="120">
+          <template #header>
+            <span class="required-label">佣金年限(起)</span>
+          </template>
+          <template #default="scope">
+            <el-input
+              v-model="scope.row.startPeriod"
+              type="number"
+              placeholder="请输入"
+              :min="1"
+              clearable
+              @input="handleNumberInput(scope.row, 'startPeriod', 'positive')"
+              @blur="handlePeriodBlur(scope.row, scope.$index, 'startPeriod')"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column label="佣金年限(止)" prop="endPeriod" width="120">
+          <template #header>
+            <span class="required-label">佣金年限(止)</span>
+          </template>
+          <template #default="scope">
+            <el-input
+              v-model="scope.row.endPeriod"
+              type="number"
+              :min="1"
+              placeholder="请输入"
+              clearable
+              @input="handleNumberInput(scope.row, 'endPeriod', 'positive')"
+              @blur="handlePeriodBlur(scope.row, scope.$index, 'endPeriod')"
+            />
+          </template>
+        </el-table-column>
+
+        <el-table-column label="佣金率(%)" prop="commissionRate" width="120">
+          <template #header>
+            <span class="required-label">佣金率(%)</span>
+          </template>
+          <template #default="scope">
+            <el-input
+              v-model="scope.row.commissionRate"
+              type="number"
+              :min="0"
+              placeholder="请输入"
+              clearable
+              @input="handleNumberInput(scope.row, 'commissionRate', 'non-negative')"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column label="折标系数(%)" prop="discountRatio" width="120">
+          <template #header>
+            <span class="required-label">折标系数(%)</span>
+          </template>
+          <template #default="scope">
+            <el-input
+              v-model="scope.row.discountRatio"
+              type="number"
+              :min="0"
+              placeholder="请输入"
+              clearable
+              @input="handleNumberInput(scope.row, 'discountRatio', 'non-negative')"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column label="生效日期(起)" prop="effectiveStart" width="150">
+          <template #header>
+            <span class="required-label">生效日期(起)</span>
+          </template>
+          <template #default="scope">
+            <el-date-picker
+              v-model="scope.row.effectiveStart"
+              style="width: 100%"
+              type="date"
+              placeholder="请选择日期"
+              format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD"
+              @change="handleStartDateChange(scope.row, scope.$index)"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column label="生效日期(止)" prop="effectiveEnd" width="150">
+          <template #header>
+            <span class="required-label">生效日期(止)</span>
+          </template>
+          <template #default="scope">
+            <el-date-picker
+              v-model="scope.row.effectiveEnd"
+              style="width: 100%"
+              type="date"
+              placeholder="请选择日期"
+              format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD"
+              @change="handleEndDateChange(scope.row, scope.$index)"
+            />
+          </template>
+        </el-table-column>
+
+        <el-table-column label="是否受汇率影响" prop="isExchangeRate" width="150">
+          <template #header>
+            <span class="required-label">是否受汇率影响</span>
+          </template>
+          <template #default="scope">
+            <el-select
+              v-model="scope.row.isExchangeRate"
+              style="width: 100%"
+              placeholder="请选择"
+              clearable
+            >
+              <el-option
+                v-for="item in sys_no_yes"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column label="结算币种" prop="currency" width="120">
+          <template #header>
+            <span class="required-label">结算币种</span>
+          </template>
+          <template #default="scope">
+            <el-select
+              v-model="scope.row.currency"
+              style="width: 100%"
+              placeholder="请选择"
+              clearable
+            >
+              <el-option
+                v-for="item in bx_currency_type"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="对账公司"
+          prop="reconciliationCompanyName"
+          align="center"
+          width="150"
+        >
+          <template #header>
+            <span class="required-label">对账公司</span>
+          </template>
+          <template #default="scope">
+            <el-select
+              v-model="scope.row.reconciliationCompanyName"
+              filterable
+              remote
+              reserve-keyword
+              placeholder="请输入关键词搜索"
+              :remote-method="query => searchSelectList(query, 'reconciliationCompanyName')"
+              :loading="searchLoadingStates['reconciliationCompanyName']"
+            >
+              <el-option
+                v-for="item in searchOptions['reconciliationCompanyName'] || []"
+                :key="item.id"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column label="销售组织" prop="salesOrgName" align="center" width="150">
+          <template #header>
+            <span class="required-label">销售组织</span>
+          </template>
+          <template #default="scope">
+            <el-select
+              v-model="scope.row.salesOrgName"
+              filterable
+              remote
+              reserve-keyword
+              placeholder="请输入关键词搜索"
+              :remote-method="query => searchSelectList(query, 'salesOrgName')"
+              :loading="searchLoadingStates['salesOrgName']"
+            >
+              <el-option
+                v-for="item in searchOptions['salesOrgName'] || []"
+                :key="item.id"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" prop="status" width="120">
+          <template #header>
+            <span class="required-label">状态</span>
+          </template>
+          <!-- <template #default="scope">
+            <el-select
+              v-model="scope.row.status"
+              style="width: 100%"
+              placeholder="请选择"
+              clearable
+            >
+              <el-option
+                v-for="item in sys_status"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </template> -->
+          <template #default="scope">
+            <el-switch
+              v-model="scope.row.status"
+              active-value="1"
+              inactive-value="0"
+              @change="switchChange(scope.row)"
+            />
+            <span style="margin-left: 8px">
+              {{ scope.row.status === '1' ? '启用' : '禁用' }}
+            </span>
+          </template>
+        </el-table-column>
+        <el-table-column label="备注" prop="remark" width="200">
+          <template #default="scope">
+            <el-input v-model="scope.row.remark" type="textarea" placeholder="请输入" />
+          </template>
+        </el-table-column>
+        <el-table-column label="最近一次操作人" prop="updaterName" width="120" />
+        <el-table-column label="最近一次操作时间" prop="updateTime" width="160">
+          <template #default="scope">
+            <span>{{ scope.row.updateTime ? parseTime(scope.row.updateTime) : '--' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="120" align="center" fixed="right">
+          <template #default="scope">
+            <div class="btnCon">
+              <el-button
+                v-if="scope.$index == settingList.length - 1"
+                @click="handleAddCommission(scope.row)"
+                text
+                size="small"
+                type="primary"
+                >新增</el-button
+              >
+
+              <el-button
+                text
+                size="small"
+                type="danger"
+                @click="handleDeleteCommission(scope.row, scope.$index)"
+                >删除</el-button
+              >
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="closeSetting">关闭</el-button>
+          <el-button type="primary" @click="submitSetting">提 交</el-button>
+        </div>
+      </template>
+    </el-dialog>
+    <el-dialog title="佣金设置错误提示" v-model="errorTip" width="500px" append-to-body>
+      <div style="margin-bottom: 10px" v-for="item in settingErrorTip">{{ item }}</div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="errorTip = false">去修改</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+<script setup name="SendInfo">
+import { cloneDeep } from 'lodash-es'
+import {
+  comeCommissionRatio,
+  comeCommissionList,
+  comeExpectedSpecies,
+  comeBatchSave,
+  deleteComeCommission,
+  changeComeStatus
+} from '@/api/product/index'
+import { getAllCompanys } from '@/api/common'
+import { ref, watch } from 'vue'
+
+const props = defineProps({
+  // 类型，是新增还是编辑,
+  activeName: {
+    type: String,
+    default: ''
+  }
+})
+const route = useRoute()
+const { proxy } = getCurrentInstance()
+const loading = ref(true)
+const settingLoading = ref(true)
+const total = ref(0) //规格表格的总条数
+const settingTotal = ref(0) //规格表格的总条数
+const showCommisionSetting = ref(false) //佣金设置弹窗开关
+const errorTip = ref(false) //佣金设置弹窗开关
+const settingList = ref([]) //佣金设置表格数据
+const currentSettingRow = ref([]) //当前选中的佣金设置行
+const settingErrorTip = ref([]) //提交佣金错误提示信息
+const searchOptions = ref({}) // 存储不同key对应的选项
+const searchLoadingStates = ref({}) // 存储不同key对应的加载状态
+const data = reactive({
+  queryParams: {
+    pageNo: 1,
+    pageSize: 10,
+    productLaunchBizId: route.query.productLaunchBizId
+  },
+  settingQueryParams: {
+    pageNo: 1,
+    pageSize: 9999
+  }
+})
+
+const { queryParams, settingQueryParams } = toRefs(data)
+const { bx_currency_type, commission_cost_type, sys_no_yes, sys_status } = proxy.useDict(
+  'bx_currency_type',
+  'commission_cost_type',
+  'sys_no_yes',
+  'sys_status'
+)
+const switchChange = row => {
+  if (!row.expectedCommissionRatioBizId) {
+    return
+  }
+  try {
+    changeComeStatus({
+      expectedCommissionRatioBizId: row.expectedCommissionRatioBizId,
+      status: Number(row.status)
+    }).then(response => {
+      if (response.code === 200) {
+        proxy.$modal.msgSuccess('状态修改成功')
+      }
+    })
+  } catch (error) {
+    row.status = row.status === '1' ? '0' : '1'
+  }
+}
+// 搜索方法
+const searchSelectList = async (query, fieldKey) => {
+  // 设置该字段的加载状态
+  searchLoadingStates.value[fieldKey] = true
+
+  try {
+    // 根据不同的字段key调用不同的API
+    if (fieldKey === 'reconciliationCompanyName' || fieldKey === 'salesOrgName') {
+      const params = {
+        deptName: query.trim(),
+        pageNo: 1,
+        pageSize: 10
+      }
+      getAllCompanys(params).then(response => {
+        response.data.records = response.data.records.map(item => {
+          return {
+            ...item,
+            label: item.deptName,
+            value: item.deptBizId
+          }
+        })
+        searchOptions.value[fieldKey] = response.data.records
+      })
+    }
+  } catch (error) {
+    console.error(`${fieldKey} 搜索失败`, error)
+    searchOptions.value[fieldKey] = []
+  } finally {
+    searchLoadingStates.value[fieldKey] = false
+  }
+}
+const handleDeleteCommission = (row, index) => {
+  if (settingList.value.length === 1) {
+    proxy.$modal.msgError('至少保留一条佣金设置数据')
+    return
+  }
+  proxy.$modal
+    .confirm(`是否确认删除第${index + 1}行数据?`)
+    .then(function () {
+      if (row.expectedCommissionRatioBizId) {
+        deleteComeCommission(row.expectedCommissionRatioBizId).then(response => {
+          if (response.code === 200) {
+            settingList.value.splice(index, 1)
+          } else {
+            proxy.$modal.msgError(response.msg)
+          }
+        })
+      } else {
+        settingList.value.splice(index, 1)
+      }
+      proxy.$modal.msgSuccess('删除成功')
+    })
+    .catch(() => {})
+}
+const handleNumberInput = (row, field, type = 'positive') => {
+  const value = row[field]
+
+  if (value === null || value === undefined || value === '') return
+
+  let numValue = Number(value)
+
+  if (isNaN(numValue)) {
+    row[field] = null
+    return
+  }
+
+  if (type === 'positive') {
+    // 正整数：移除负号和小数部分
+    if (numValue <= 0) {
+      row[field] = null
+      return
+    }
+    // 取整数部分
+    row[field] = Math.floor(Math.abs(numValue))
+  } else if (type === 'non-negative') {
+    // 非负数：允许0及以上，不允许负数
+    if (numValue < 0) {
+      row[field] = 0
+    }
+  }
+}
+// 处理开始日期变化
+const handleStartDateChange = (row, index) => {
+  if (row.effectiveStart && row.effectiveEnd) {
+    const start = new Date(row.effectiveStart)
+    const end = new Date(row.effectiveEnd)
+
+    if (start > end) {
+      proxy.$modal.msgError(
+        `第${index + 1}行：生效日期(起)不能晚于生效日期(止),请重新选择生效日期(起)`
+      )
+      // 清空结束日期，让用户重新选择
+      setTimeout(() => {
+        row.effectiveStart = ''
+      }, 0)
+    }
+  }
+}
+
+// 处理结束日期变化
+const handleEndDateChange = (row, index) => {
+  console.log('时间', row)
+
+  if (row.effectiveStart && row.effectiveEnd) {
+    const start = new Date(row.effectiveStart)
+    const end = new Date(row.effectiveEnd)
+
+    if (end < start) {
+      proxy.$modal.msgError(
+        `第${index + 1}行：生效日期(止)不能早于生效日期(起),请重新选择生效日期(止)`
+      )
+      // 清空开始日期，让用户重新选择
+      setTimeout(() => {
+        row.effectiveEnd = ''
+      }, 0)
+    }
+  }
+}
+const handlePeriodBlur = (row, index, key) => {
+  if (row.startPeriod && row.endPeriod && row.startPeriod > row.endPeriod) {
+    proxy.$modal.msgError(`第${index + 1}行：佣金开始年限不能大于佣金结束年限,请重新填写`)
+    row[key] = ''
+    row.unadd = true
+  } else {
+    row.unadd = false
+  }
+  console.log('年限', row)
+}
+const handleAddCommission = row => {
+  let newRow = cloneDeep(row)
+  let obj = {}
+  // 复制当前条的数据
+  for (const key in newRow) {
+    if (key !== 'startPeriod' && key !== 'endPeriod' && key !== 'commissionRate') {
+      obj[key] = newRow[key]
+    } else {
+      obj[key] = ''
+    }
+  }
+  if (!row.unadd) {
+    settingList.value.push(obj)
+  }
+}
+const closeSetting = () => {
+  showCommisionSetting.value = false
+  settingQueryParams.value = {
+    pageNo: 1,
+    pageSize: 9999
+  }
+}
+// 批量提交佣金设置
+const submitSetting = async () => {
+  // 校验表格数据
+  const validationResult = validateTableData()
+  if (!validationResult.valid) {
+    proxy.$modal.msgError(validationResult.message)
+    return
+  }
+
+  let saveTable = cloneDeep(settingList.value)
+  saveTable.forEach(item => {
+    if (item.reconciliationCompanyName) {
+      searchOptions.value['reconciliationCompanyName'].forEach(item1 => {
+        if (item.reconciliationCompanyName == item1.value) {
+          item.reconciliationCompanyName = item1.label
+          item.reconciliationCompany = item1.value
+        }
+      })
+    }
+    if (item.salesOrgName) {
+      searchOptions.value['salesOrgName'].forEach(item1 => {
+        if (item.salesOrgName == item1.value) {
+          item.salesOrgName = item1.label
+          item.salesOrg = item1.value
+        }
+      })
+    }
+  })
+
+  // return
+  try {
+    comeBatchSave({
+      expectedSpeciesBizId: currentSettingRow.value.expectedSpeciesBizId,
+      ratioBatchSaveDtoList: saveTable
+    }).then(response => {
+      console.log('response', response)
+
+      if (response.code === 200) {
+        showCommisionSetting.value = false
+        proxy.$modal.msgSuccess('提交成功')
+      } else if (response.code === 1004) {
+        if (response.msg) {
+          settingErrorTip.value = response.msg.split('\n').filter(item => item !== '')
+        }
+        errorTip.value = true
+      }
+    })
+  } catch (error) {
+    console.log('错误了', error)
+  }
+}
+
+// 表格数据校验函数
+const validateTableData = () => {
+  const errors = []
+  const requiredFields = [
+    { key: 'expenseName', label: '费用名称' },
+    { key: 'startPeriod', label: '佣金年限(起)' },
+    { key: 'endPeriod', label: '佣金年限(止)' },
+    { key: 'commissionRate', label: '佣金率(%)' },
+    { key: 'discountRatio', label: '折标系数(%)' },
+    { key: 'effectiveStart', label: '生效日期(起)' },
+    { key: 'effectiveEnd', label: '生效日期(止)' },
+    { key: 'isExchangeRate', label: '是否受汇率影响' },
+    { key: 'currency', label: '结算币种' },
+    { key: 'salesOrgName', label: '销售组织' },
+    { key: 'reconciliationCompanyName', label: '对账公司' }
+  ]
+
+  settingList.value.forEach((row, index) => {
+    requiredFields.forEach(field => {
+      const value = row[field.key]
+      let isValid = true
+
+      if (Array.isArray(value)) {
+        isValid = value.length > 0
+      } else {
+        isValid = value !== null && value !== undefined && value !== ''
+      }
+
+      if (!isValid) {
+        errors.push({
+          rowIndex: index,
+          field: field.key,
+          label: field.label,
+          rowNumber: index + 1
+        })
+      }
+    })
+  })
+
+  if (errors.length === 0) {
+    return { valid: true }
+  }
+
+  // 生成友好的错误提示信息
+  const errorMessages = errors
+    .slice(0, 3)
+    .map(error => `第${error.rowNumber}行【${error.label}】未填写`)
+
+  let message = errorMessages.join('；')
+  if (errors.length > 3) {
+    message += `等，共${errors.length}处必填项未填写`
+  }
+
+  return {
+    valid: false,
+    errors,
+    message
+  }
+}
+
+/** 获得佣金设置数据 */
+function getSettingList() {
+  settingLoading.value = true
+  let obj = {
+    expenseName: '',
+    startPeriod: '',
+    endPeriod: '',
+    commissionRate: '',
+    discountRatio: '',
+    effectiveStart: '',
+    effectiveEnd: '',
+    isExchangeRate: '',
+    currency: '',
+    status: '1',
+    remark: '',
+    salesOrgName: '',
+    reconciliationCompanyName: ''
+  }
+  settingList.value = []
+  settingQueryParams.value.expectedSpeciesBizId = currentSettingRow.value.expectedSpeciesBizId
+  comeCommissionRatio(settingQueryParams.value).then(response => {
+    if (response.code === 200) {
+      if (response.data.records.length > 0) {
+        settingList.value = response.data.records
+        settingList.value.forEach(row => {
+          row.status = row.status === 1 ? '1' : row.status === 0 ? '0' : ''
+        })
+      } else {
+        settingList.value.push(obj)
+      }
+      settingTotal.value = response.data.total
+      settingLoading.value = false
+      showCommisionSetting.value = true
+    } else {
+      settingLoading.value = false
+      proxy.$modal.msgError(response.msg)
+    }
+  })
+}
+// 原始数据
+const originalData = ref([])
+
+// 表格列配置
+const tableColumns = ref([])
+
+// 表格数据
+const tableData = ref([])
+
+// 合并行配置，存储每列需要合并的行数
+const spanConfig = ref({})
+
+// 从数据中提取所有可能的列
+const extractColumnsFromData = data => {
+  const columnSet = new Map()
+
+  data.forEach(item => {
+    try {
+      if (item.apiSpeciesSettingDtoList && item.apiSpeciesSettingDtoList.length > 0) {
+        item.apiSpeciesSettingDtoList.forEach(species => {
+          if (!columnSet.has(species.typeCode)) {
+            columnSet.set(species.typeCode, {
+              prop: species.typeCode,
+              label: species.typeName,
+              width: species.typeName.length * 15 + 30,
+              align: 'center',
+              sortable: false
+            })
+          }
+        })
+      }
+    } catch (e) {
+      console.log('计算列失败', e)
+    }
+  })
+
+  // 将 Map 转换为数组并按 typeCode 排序（可选）
+  return Array.from(columnSet.values())
+}
+
+// 处理数据，生成表格需要的格式
+const processTableData = () => {
+  if (!originalData.value || originalData.value.length === 0) {
+    tableData.value = []
+    spanConfig.value = {}
+    return
+  }
+
+  // 1. 提取所有列
+  const columns = extractColumnsFromData(originalData.value)
+  tableColumns.value = columns
+
+  // 2. 转换数据格式
+  const processedData = []
+
+  originalData.value.forEach((item, index) => {
+    const rowData = {
+      rowKey: `${item.id}_${index}`, // 生成唯一 rowKey
+      id: item.id, // 保留原始ID
+      rawData: item // 保留原始数据
+    }
+
+    // 填充所有列的值
+    columns.forEach(column => {
+      try {
+        if (item.apiSpeciesSettingDtoList && item.apiSpeciesSettingDtoList.length > 0) {
+          const matchedSpecies = item.apiSpeciesSettingDtoList.find(s => s.typeCode === column.prop)
+          rowData[column.prop] = matchedSpecies ? matchedSpecies.value : ''
+        } else {
+          rowData[column.prop] = ''
+        }
+      } catch (e) {
+        console.log('填充所有列的值失败', e)
+      }
+    })
+
+    processedData.push(rowData)
+  })
+
+  // 3. 计算合并配置
+  calculateSpanConfig(processedData, columns)
+
+  tableData.value = processedData
+}
+
+// 计算合并配置
+const calculateSpanConfig = (data, columns) => {
+  const config = {}
+
+  // 为每一列计算合并配置
+  columns.forEach((column, columnIndex) => {
+    config[column.prop] = []
+
+    let pos = 0
+    while (pos < data.length) {
+      const currentValue = data[pos][column.prop]
+      let rowspan = 1
+
+      // 向后查找相同值的行
+      for (let i = pos + 1; i < data.length; i++) {
+        // 只有当该列之前的所有列的值都相同时才合并
+        let shouldMerge = true
+        for (let j = 0; j < columnIndex; j++) {
+          const prevColumn = columns[j]
+          if (data[pos][prevColumn.prop] !== data[i][prevColumn.prop]) {
+            shouldMerge = false
+            break
+          }
+        }
+
+        if (shouldMerge && data[i][column.prop] === currentValue) {
+          rowspan++
+        } else {
+          break
+        }
+      }
+
+      // 记录合并配置
+      config[column.prop][pos] = rowspan
+
+      // 跳过已经计算的行
+      pos += rowspan
+    }
+
+    // 填充剩余的配置为0（不合并）
+    for (let i = 0; i < data.length; i++) {
+      if (!config[column.prop][i]) {
+        config[column.prop][i] = 0
+      }
+    }
+  })
+
+  spanConfig.value = config
+}
+
+// 合并单元格的方法
+const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
+  // 最后一列是操作列，不合并
+  if (columnIndex === tableColumns.value.length) {
+    return {
+      rowspan: 1,
+      colspan: 1
+    }
+  }
+
+  const columnProp = tableColumns.value[columnIndex].prop
+  const rowspan = spanConfig.value[columnProp]?.[rowIndex] || 0
+
+  if (rowspan > 0) {
+    return {
+      rowspan: rowspan,
+      colspan: 1
+    }
+  } else {
+    return {
+      rowspan: 0,
+      colspan: 0
+    }
+  }
+}
+
+// 佣金设置操作
+const handleCommissionSetting = row => {
+  currentSettingRow.value = row.rawData
+  console.log(' currentSettingRow.value', currentSettingRow.value)
+
+  getSettingList()
+}
+
+/** 获得规格数据 */
+function getSpeciesList() {
+  loading.value = true
+  comeCommissionList(queryParams.value).then(response => {
+    if (response.code === 200) {
+      originalData.value = response.data.records
+      total.value = response.data.total
+      loading.value = false
+      if (originalData.value.length == 0) {
+        proxy.$modal.msgError('该商品暂无规格数据，请先更新规格数据')
+      } else {
+        let codeArr = []
+        // 自定义没有typeCode影响表格得展示
+        originalData.value[0].apiSpeciesSettingDtoList.forEach((item, index) => {
+          if (item.isCustomize == '1') {
+            item.typeCode = `custom${Date.now() + Math.floor(Math.random() * 1000)}`
+            codeArr.push({ index: index, code: item.typeCode })
+          }
+        })
+        originalData.value.forEach((item, oIndex) => {
+          item.apiSpeciesSettingDtoList.forEach((species, sIndex) => {
+            if (codeArr.length > 0) {
+              codeArr.forEach(codeItem => {
+                if (codeItem.index == sIndex) {
+                  species.typeCode = codeItem.code
+                }
+              })
+            }
+          })
+        })
+      }
+      // 计算表格
+      processTableData()
+      searchSelectList('', 'reconciliationCompanyName')
+      searchSelectList('', 'salesOrgName')
+    } else {
+      proxy.$modal.msgError(response.msg)
+    }
+  })
+}
+/** 更新规格数据 */
+function updateSpecies() {
+  loading.value = true
+  comeExpectedSpecies({ productLaunchBizId: route.query.productLaunchBizId }).then(response => {
+    if (response.code === 200) {
+      proxy.$modal.msgSuccess('来佣管理-规格更新成功')
+      getSpeciesList()
+    } else {
+      proxy.$modal.msgError(response.msg)
+    }
+  })
+}
+
+//========多选下拉框悬停效果结束=========
+
+watch(
+  () => props.activeName,
+  newVal => {
+    if (newVal == 'comeCommission') {
+      getSpeciesList()
+    }
+  }
+)
+</script>
+<style lang="scss" scoped>
+.required-label::before {
+  content: '*';
+  color: #f56c6c;
+  margin-right: 4px;
+}
+.btnCon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+/* 错误行样式 */
+.error-row {
+  background-color: #fff2f0 !important;
+  animation: highlight 0.6s ease-in-out;
+}
+
+/* 错误字段高亮 */
+.error-field :deep(.el-input__wrapper) {
+  border-color: #f56c6c !important;
+  box-shadow: 0 0 0 1px #f56c6c !important;
+}
+
+.error-field :deep(.el-input__inner) {
+  color: #f56c6c;
+}
+
+.error-field :deep(.el-select__wrapper) {
+  border-color: #f56c6c !important;
+  box-shadow: 0 0 0 1px #f56c6c !important;
+}
+
+/* 闪烁动画吸引用户注意力 */
+@keyframes highlight {
+  0%,
+  50% {
+    background-color: #fff2f0;
+  }
+  25%,
+  75% {
+    background-color: #ffeaea;
+  }
+  100% {
+    background-color: #fff2f0;
+  }
+}
+
+/* 错误提示消息样式 */
+.validation-message-box {
+  :deep(.el-message-box__content) {
+    max-height: 400px;
+    overflow-y: auto;
+  }
+}
+</style>

src/views/merchandise/components/productBaseInfo.vue

+<template>
+  <div class="baseBox">
+    <div class="form-content">
+      <!-- <div class="formHeader">基础信息</div> -->
+      <el-form>
+        <!-- 基础信息 -->
+        <el-card class="cardStyle" v-if="showImage">
+          <template #header>
+            <div @click="categoryDialogOpen = true">
+              <span class="cardTitle">基础信息</span>
+              <span class="chooseClass" v-if="categoryName">{{ categoryName }}</span>
+              <span class="editTxt">修改</span>
+            </div>
+          </template>
+          <div>
+            <el-row>
+              <el-col :span="12">
+                <div class="commonHeader">产品标题</div>
+                <el-select
+                  v-model="form['apiProductLaunchDto'].title"
+                  filterable
+                  remote
+                  allow-create
+                  default-first-option
+                  :reserve-keyword="false"
+                  placeholder="请选择产品名称"
+                  @blur="handleSelectChange"
+                  :remote-method="searchProduct"
+                  clearable
+                  remote-show-suffix
+                >
+                  <el-option
+                    v-for="item in productList"
+                    :key="item.productBizId"
+                    :label="item.productName"
+                    :value="item.productBizId"
+                  />
+                </el-select>
+              </el-col>
+              <el-col :span="24" :class="showNameTip ? '' : 'colBottomGap'">
+                <div class="nameTip">
+                  <span style="color: #ccc">标题需包含产品名称。</span>
+
+                  <el-tooltip placement="bottom" effect="light" trigger="click">
+                    <template #content>
+                      <div style="width: 300px">
+                        <div
+                          v-for="item in nameRequireList"
+                          :key="item.key"
+                          style="margin-bottom: 8px"
+                        >
+                          <span style="font-size: 13px">•</span>
+                          <span style="margin-left: 5px">{{ item.label }}</span>
+                        </div>
+                      </div>
+                    </template>
+                    <span style="color: #576b95; cursor: pointer">查看命名要求</span>
+                  </el-tooltip>
+                </div>
+              </el-col>
+              <el-col :span="24" v-if="showNameTip">
+                <div class="tipCon">
+                  <el-icon color="red" :size="20" style="margin-right: 5px"><Warning /></el-icon>
+                  <span>标题信息过少，请至少输入5个有效字数（含中文、英文、数字）</span>
+                </div>
+              </el-col>
+              <el-col :span="12">
+                <div class="commonHeader">产品短标题</div>
+                <el-input
+                  v-model="form['apiProductLaunchDto'].shortTitle"
+                  placeholder="请输入"
+                  maxlength="20"
+                  show-word-limit
+                />
+              </el-col>
+              <el-col :span="24" class="colBottomGap">
+                <div class="nameTip">
+                  <span style="color: #ccc">短标题会展示在对话、朋友圈分享等场景。</span>
+                </div>
+              </el-col>
+              <el-col :span="24">
+                <div class="commonHeader">产品参数</div>
+                <el-row :gutter="20">
+                  <template v-if="form.apiAttributeSettingDtoList.length">
+                    <el-col
+                      :span="item.isCustomize == '1' ? 24 : 8"
+                      v-for="(item, index) in form.apiAttributeSettingDtoList"
+                    >
+                      <div
+                        class="paramsItem"
+                        v-if="item.isCustomize == '0'"
+                        :style="{ marginBottom: item.errorMsg ? '0px' : '20px' }"
+                      >
+                        <div class="paramsLeft" style="width: 30%">
+                          <el-select
+                            v-model="item.name"
+                            placeholder="请选择"
+                            @change="changeLeft(item, index)"
+                          >
+                            <el-option
+                              v-for="left in item.leftOptions"
+                              :key="left.value"
+                              :label="left.fieldCnName"
+                              :value="left.fieldBizId"
+                            />
+                          </el-select>
+                        </div>
+                        <div class="paramsMiddle" style="width: 63%">
+                          <el-input
+                            v-model="item.value"
+                            placeholder="请输入"
+                            @blur="paramsErr"
+                            v-if="item.textBoxType == 'text'"
+                          />
+                          <el-input-number
+                            v-if="item.textBoxType == 'number'"
+                            v-model="item.value"
+                            :min="1"
+                            style="width: 100%"
+                          />
+                          <!-- 单选下拉框 -->
+                          <el-select
+                            v-model="item.value"
+                            @blur="paramsErr"
+                            placeholder="请选择"
+                            v-if="item.textBoxType == 'select'"
+                          >
+                            <el-option
+                              v-for="middle in item.middleOptions"
+                              :key="middle.fieldValueBizId"
+                              :label="middle.value"
+                              :value="middle.fieldValueBizId"
+                              clearable
+                            />
+                          </el-select>
+                          <!-- 多选下拉框 -->
+                          <el-select
+                            v-model="item.value"
+                            @blur="paramsErr"
+                            multiple
+                            collapse-tags
+                            collapse-tags-tooltip
+                            :max-collapse-tags="2"
+                            placeholder="请选择"
+                            v-if="item.textBoxType == 'multipleSelect'"
+                            clearable
+                          >
+                            <el-option
+                              v-for="middle in item.middleOptions"
+                              :key="middle.fieldValueBizId"
+                              :label="middle.value"
+                              :value="middle.fieldValueBizId"
+                            />
+                          </el-select>
+                          <!-- 带时分的时间框 -->
+                          <el-date-picker
+                            @blur="paramsErr"
+                            v-model="item.value"
+                            style="width: 100%"
+                            v-if="item.textBoxType == 'dateTime'"
+                            type="datetime"
+                            placeholder="请选择"
+                            @change="handleDateChange()"
+                            format="YYYY-MM-DD HH:mm"
+                            value-format="YYYY-MM-DD HH:mm:ss"
+                          />
+                          <!-- 不带时分 -->
+                          <el-date-picker
+                            @blur="paramsErr"
+                            v-model="item.value"
+                            style="width: 100%"
+                            v-if="item.textBoxType == 'date'"
+                            type="date"
+                            placeholder="请选择"
+                            format="YYYY-MM-DD"
+                            value-format="YYYY-MM-DD"
+                            @change="handleDateChange()"
+                          />
+                        </div>
+                        <div
+                          class="paramsRight"
+                          style="width: 8%"
+                          @click="deleteParams(item, index)"
+                        >
+                          <el-icon><Delete /></el-icon>
+                        </div>
+                      </div>
+                      <div
+                        class="paramsItem"
+                        v-else
+                        :style="{ marginBottom: item.errorMsg ? '0px' : '20px' }"
+                      >
+                        <div class="paramsLeft" style="width: 30%">
+                          <el-select
+                            v-model="item.customValue"
+                            placeholder="请选择"
+                            @change="changeCustomLeft(item, index)"
+                          >
+                            <el-option
+                              v-for="left in item.leftOptions"
+                              :key="left.value"
+                              :label="left.fieldCnName"
+                              :value="left.fieldBizId"
+                            />
+                          </el-select>
+                        </div>
+                        <div class="paramsMiddle" style="width: 63%">
+                          <el-input
+                            v-model="item.name"
+                            placeholder="请输入参数名"
+                            @blur="paramsErr"
+                          />
+                        </div>
+                        <div class="paramsMiddle customMiddle" style="width: 63%">
+                          <el-input
+                            v-model="item.value"
+                            placeholder="请输入参数值"
+                            @blur="paramsErr"
+                          />
+                        </div>
+                        <div
+                          class="paramsRight"
+                          style="width: 8%"
+                          @click="deleteCustomParams(item, index)"
+                        >
+                          <el-icon><Delete /></el-icon>
+                        </div>
+                      </div>
+                      <div class="errorParams" v-if="item.errorMsg">
+                        <el-icon color="red" :size="20" style="margin-right: 5px"
+                          ><Warning
+                        /></el-icon>
+                        <span>{{ item.errorMsg }}</span>
+                      </div>
+                    </el-col>
+                  </template>
+                  <el-col :span="24" class="addTxt">
+                    <el-icon :size="24"><CirclePlus /></el-icon>
+                    <span style="margin-left: 5px" @click="addParams">添加新参数</span>
+                  </el-col>
+                </el-row>
+              </el-col>
+            </el-row>
+          </div>
+        </el-card>
+        <!-- 配图 -->
+        <el-card class="cardStyle" v-if="showImage">
+          <template #header>
+            <div>
+              <span class="cardTitle">产品展示与介绍</span>
+            </div>
+          </template>
+          <div>
+            <el-row>
+              <!-- 主图 -->
+              <el-col :span="24" style="margin: 20px 0">
+                <div class="commonHeader">
+                  图片和视频
+                  <span style="color: rgb(111, 111, 111); font-size: 15px"
+                    >({{ imageInfo.count }}/9)</span
+                  >
+                </div>
+
+                <image-upload
+                  v-model="form['apiProductLaunchDto'].mainUrlsList"
+                  :action="'/oss/api/oss/upload'"
+                  :limit="9"
+                  :image-size="10"
+                  :video-size="500"
+                  :file-type="['png', 'jpg', 'jpeg', 'mp4']"
+                  :is-show-tip="false"
+                  source="main"
+                  @file-change="handleFileChange"
+                />
+              </el-col>
+              <el-col :span="24">
+                <div v-for="(item, index) in imageRequireList" :key="item.key" class="imgTip">
+                  <span>{{ index + 1 }}.</span>
+                  <span>{{ item.label }}</span>
+                  <el-tooltip placement="bottom" effect="light" trigger="click" v-if="item.showTip">
+                    <template #content>
+                      <div style="width: 300px">
+                        <div
+                          v-for="item in imageTipList"
+                          :key="item.key"
+                          style="margin-bottom: 8px"
+                        >
+                          <span style="font-size: 13px">•</span>
+                          <span style="margin-left: 5px">{{ item.label }}</span>
+                        </div>
+                      </div>
+                    </template>
+                    <span style="color: #576b95; cursor: pointer">{{ item.tipContent }}</span>
+                  </el-tooltip>
+                </div>
+              </el-col>
+              <el-col :span="24" v-if="imageInfo.count > 0 && imageInfo.count < 3">
+                <div class="tipCon">
+                  <el-icon color="red" :size="20" style="margin-right: 5px"><Warning /></el-icon>
+                  <span>请上传至少3张产品主图</span>
+                </div>
+              </el-col>
+              <!-- 详情图 -->
+              <el-col :span="24" style="margin: 20px 0">
+                <div class="commonHeader">
+                  详情图和描述
+                  <span style="color: rgb(111, 111, 111); font-size: 15px"
+                    >({{ subImageInfo.count }}/50)</span
+                  >
+                </div>
+
+                <image-upload
+                  v-model="form['apiProductLaunchDto'].detailUrlsList"
+                  :action="'/oss/api/oss/upload'"
+                  :limit="50"
+                  :image-size="10"
+                  :file-type="['png', 'jpg', 'jpeg']"
+                  :is-show-tip="false"
+                  source="sub"
+                  @file-change="handleFileChange"
+                />
+              </el-col>
+              <el-col :span="24">
+                <div v-for="(item, index) in desRequireList" :key="item.key" class="imgTip">
+                  <span>{{ index + 1 }}.</span>
+                  <span>{{ item.label }}</span>
+                  <el-tooltip placement="bottom" effect="light" trigger="click" v-if="item.showTip">
+                    <template #content>
+                      <div style="width: 310px">
+                        <div v-for="item in desTipList" :key="item.key" style="margin-bottom: 8px">
+                          <span style="font-size: 13px">•</span>
+                          <span style="margin-left: 5px">{{ item.label }}</span>
+                        </div>
+                      </div>
+                    </template>
+                    <span style="color: #576b95; cursor: pointer">{{ item.tipContent }}</span>
+                  </el-tooltip>
+                </div>
+              </el-col>
+              <el-col :span="24" v-if="subImageInfo.count == 0">
+                <div class="tipCon">
+                  <el-icon color="red" :size="20" style="margin-right: 5px"><Warning /></el-icon>
+                  <span>请上传至少1张产品详情图</span>
+                </div>
+              </el-col>
+              <el-col :span="24" style="margin-top: 10px">
+                <el-input
+                  v-model="form['apiProductLaunchDto'].detailDescription"
+                  type="textarea"
+                  placeholder="产品描述(选填)"
+                />
+              </el-col>
+            </el-row>
+          </div>
+        </el-card>
+        <!-- 规格和库存价格 -->
+        <el-card class="cardStyle" v-if="showImage">
+          <template #header>
+            <div>
+              <span class="cardTitle">规格和库存价格</span>
+            </div>
+          </template>
+          <div>
+            <el-row>
+              <el-col :span="24">规格</el-col>
+              <el-col :span="24">
+                <div
+                  class="speciesItem"
+                  v-for="(item, index) in form.speciesData"
+                  :key="item.speciesTypeBizId"
+                >
+                  <div class="speciesTop">
+                    <div class="speciesTopLeft">
+                      <el-select
+                        v-model="item.speciesName"
+                        placeholder="请选择"
+                        @change="changeSpeciesSelect(item, index)"
+                        style="width: 300px"
+                      >
+                        <el-option
+                          v-for="left in item.options"
+                          :key="left.speciesTypeBizId"
+                          :label="left.typeName"
+                          :value="left.speciesTypeBizId"
+                        />
+                      </el-select>
+                      <!-- 自定义规格名称 -->
+                      <div class="customizeInput" v-if="item.isCustomize == '1'">
+                        <el-input
+                          v-model="item.typeName"
+                          placeholder="请输入规格名称"
+                          @blur="changCustomSpecies(item)"
+                          style="width: 300px"
+                        />
+                        <div class="customizeErrorMsg" v-if="item.errorMsg">
+                          {{ item.errorMsg }}
+                        </div>
+                      </div>
+                      <!-- 切换配图得switch -->
+                      <template v-if="index == 0">
+                        <el-popconfirm
+                          v-if="item.isIllustration == '1'"
+                          width="300"
+                          class="box-item"
+                          title="关闭开关会清空现在的配图"
+                          placement="bottom"
+                          hide-icon
+                          @confirm="switchChange(item, 'close')"
+                        >
+                          <template #reference>
+                            <div>
+                              <el-switch
+                                v-model="item.isIllustration"
+                                active-value="1"
+                                inactive-value="0"
+                                style="margin: 0 5px 0px 15px"
+                                :before-change="switchBeforeChange"
+                              ></el-switch>
+                              <span class="imgSwitch">配图</span>
+                            </div>
+                          </template>
+                        </el-popconfirm>
+                        <div v-else>
+                          <el-switch
+                            v-model="item.isIllustration"
+                            active-value="1"
+                            inactive-value="0"
+                            style="margin: 0 5px 0px 15px"
+                            @change="switchChange(item, 'open')"
+                          ></el-switch>
+                          <span class="imgSwitch">配图</span>
+                        </div>
+                      </template>
+                    </div>
+                    <div class="speciesTopRight" @click="deleteSpecies(item)">
+                      <el-icon :size="18"><Delete /></el-icon>
+                    </div>
+                  </div>
+                  <el-row :gutter="20" style="margin-top: 15px">
+                    <el-col
+                      :span="8"
+                      v-for="(species, sIndex) in item.apiSpeciesSettingDtoList"
+                      :key="species.speciesId"
+                    >
+                      <div class="paramsItem" style="margin-bottom: 20px">
+                        <div
+                          class="paramsLeft speciesLeft"
+                          style="width: 8%"
+                          v-if="species.isIllustration == '1'"
+                        >
+                          <el-upload
+                            :action="uploadUrl"
+                            style="display: flex"
+                            list-type="picture"
+                            :headers="headers"
+                            :show-file-list="false"
+                            :on-success="(res, file) => handleUploadSuccess(res, file, species)"
+                            :before-upload="handleBeforeUpload"
+                          >
+                            <el-icon v-if="!species.illustrationUrl" :size="24" color="#969696"
+                              ><Picture
+                            /></el-icon>
+                            <!-- <el-popconfirm
+                              width="300"
+                              class="box-item"
+                              title="关闭开关会清空现在的配图"
+                              placement="bottom"
+                              hide-icon
+                            >
+                            </el-popconfirm> -->
+                            <img v-else :src="species.illustrationUrl" style="width: 100%; height:
+                            32px;object-fit: cover"
+                          </el-upload>
+                        </div>
+                        <div
+                          class="paramsMiddle speciesMiddle"
+                          :style="{ width: getSpeciesMiddleWidth(species, item) }"
+                        >
+                          <el-input
+                            v-model="species.value"
+                            placeholder="请输入"
+                            @keydown="speciesInputChange(species, sIndex, item)"
+                          />
+                        </div>
+
+                        <div
+                          v-if="item.apiSpeciesSettingDtoList.length > 1"
+                          class="paramsRight speciesRight"
+                          style="width: 8%"
+                          @click="deleteSpeciesValue(species)"
+                        >
+                          <el-icon><Delete /></el-icon>
+                        </div>
+                      </div>
+                    </el-col>
+                  </el-row>
+                </div>
+              </el-col>
+              <el-col :span="24" class="addTxt">
+                <el-icon :size="22"><CirclePlus /></el-icon>
+                <span style="margin-left: 5px" @click="addSpecies">创建新规格</span>
+              </el-col>
+              <el-col :span="24" style="margin-top: 20px">价格与库存</el-col>
+              <!-- 规格价格得设置 -->
+              <el-col
+                :span="24"
+                style="margin-top: 10px; margin-bottom: 10px"
+                v-if="speciesSelectList.length > 0"
+              >
+                <!-- 规格值得选择 -->
+                <div class="speciesSelect">
+                  <div v-for="item in speciesSelectList">
+                    <el-select
+                      placeholder="请选择"
+                      style="width: 220px; margin-right: 20px"
+                      v-model="selectedValues[item.speciesTypeBizId]"
+                    >
+                      <el-option
+                        v-for="left in item.options"
+                        :key="left.speciesId"
+                        :label="left.value"
+                        :value="left.speciesId"
+                      />
+                    </el-select>
+                  </div>
+                </div>
+                <!-- 产品价格等得固定设置 -->
+                <div class="settingBox">
+                  <div class="paramsItem settingItem">
+                    <div class="paramsLeft settingLeft">售卖价</div>
+                    <div class="paramsMiddle settingRight">
+                      <el-input type="number" v-model="batchPrice" placeholder="请输入售卖价" />
+                    </div>
+                  </div>
+                  <div class="paramsItem settingItem">
+                    <div class="paramsLeft settingLeft">库存</div>
+                    <div class="paramsMiddle settingRight">
+                      <el-input type="number" v-model="batchInventory" placeholder="请输入库存" />
+                    </div>
+                  </div>
+                  <el-button
+                    type="primary"
+                    plain
+                    @click="handleBatchSet"
+                    :disabled="!batchPrice && !batchInventory"
+                    >设置</el-button
+                  >
+                </div>
+              </el-col>
+              <!-- 规格表格部分 -->
+              <el-table
+                :data="tableData"
+                :span-method="objectSpanMethod"
+                border
+                style="width: 100%; margin-top: 20px"
+                height="250"
+              >
+                <!-- 动态规格列 -->
+                <el-table-column
+                  v-for="spec in form.speciesData.filter(
+                    item => item.typeName && item.apiSpeciesSettingDtoList[0].value
+                  )"
+                  :key="spec.speciesTypeBizId"
+                  :prop="spec.speciesTypeBizId"
+                  :label="spec.typeName"
+                  align="center"
+                  :width="form.speciesData.length > 5 ? 150 : 'auto'"
+                  fixed="left"
+                >
+                  <template #default="scope">
+                    {{ scope.row[spec.speciesTypeBizId] }}
+                  </template>
+                </el-table-column>
+
+                <!-- 价格列 -->
+                <el-table-column
+                  prop="price"
+                  label="价格"
+                  :width="tableData.length > 0 ? 120 : 'auto'"
+                  align="center"
+                >
+                  <template #header>
+                    <span class="required-label">价格</span>
+                  </template>
+                  <template #default="scope">
+                    <el-input v-model="scope.row.price" type="number" />
+                    <div class="errMsg" v-if="scope.row.priceErrorMsg">
+                      {{ scope.row.priceErrorMsg }}
+                    </div>
+                  </template>
+                </el-table-column>
+
+                <!-- 库存列 -->
+                <el-table-column
+                  prop="inventory"
+                  label="库存"
+                  :width="tableData.length > 0 ? 120 : 'auto'"
+                  align="center"
+                >
+                  <template #header>
+                    <span class="required-label">库存</span>
+                  </template>
+                  <template #default="scope">
+                    <el-input v-model="scope.row.inventory" type="number" />
+                    <div class="errMsg" v-if="scope.row.inventoryErrorMsg">
+                      {{ scope.row.inventoryErrorMsg }}
+                    </div>
+                  </template>
+                </el-table-column>
+                <!-- 配图列 -->
+                <el-table-column
+                  prop="illustrationUrl"
+                  label="配图"
+                  :width="tableData.length > 0 ? 120 : 'auto'"
+                  align="center"
+                >
+                  <template #default="scope">
+                    <div style="display: flex; align-items: center; justify-content: center">
+                      <img
+                        v-if="scope.row.illustrationUrl"
+                        :src="scope.row.illustrationUrl"
+                        style="width: 60%; height: 60%; object-fit: cover"
+                      />
+                      <el-icon v-else :size="24" color="#969696">
+                        <Picture />
+                      </el-icon>
+                    </div>
+                  </template>
+                </el-table-column>
+                <!-- 状态列 -->
+                <el-table-column
+                  prop="status"
+                  label="状态"
+                  :width="tableData.length > 0 ? 120 : 'auto'"
+                  align="center"
+                  fixed="right"
+                >
+                  <template #default="scope">
+                    <el-switch v-model="scope.row.status" active-value="1" inactive-value="0" />
+                    <span style="margin-left: 8px">
+                      {{ scope.row.status === '1' ? '上架' : '下架' }}
+                    </span>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-row>
+          </div>
+        </el-card>
+        <!-- 更多设置 -->
+        <el-card class="cardStyle">
+          <template #header>
+            <div>
+              <span class="cardTitle">更多设置</span>
+            </div>
+          </template>
+          <el-row>
+            <el-col :span="24">
+              <div class="moreBox">
+                <div class="moreTitle">定时开售</div>
+                <div class="moreItem">
+                  <div class="moreLeft">设置定时</div>
+                  <div class="moreRight">
+                    <el-switch
+                      v-model="form.apiProductLaunchDto['isTiming']"
+                      active-value="1"
+                      inactive-value="0"
+                      style="margin: 0 5px 0px 15px"
+                    ></el-switch>
+                    <span class="imgSwitch">{{
+                      form.apiProductLaunchDto['isTiming'] == '1' ? '已开启' : '已关闭'
+                    }}</span>
+                  </div>
+                </div>
+                <div class="moreItem" v-if="form.apiProductLaunchDto['isTiming'] == '1'">
+                  <div class="moreLeft">开售日期</div>
+                  <div class="moreRight" style="margin-left: 15px">
+                    <el-date-picker
+                      v-model="form.apiProductLaunchDto['releaseDate']"
+                      style="width: 100%"
+                      type="datetime"
+                      placeholder="请选择开售日期"
+                      format="YYYY-MM-DD HH:mm"
+                      value-format="YYYY-MM-DD HH:mm:ss"
+                    />
+                  </div>
+                </div>
+                <div class="moreItem" v-if="form.apiProductLaunchDto['isTiming'] == '1'">
+                  <div class="moreLeft">隐藏信息</div>
+                  <div class="moreRight" style="margin-left: 15px">
+                    <el-checkbox
+                      v-model="form.apiProductLaunchDto['isHiddenPrice']"
+                      label="价格"
+                      size="large"
+                    />
+                  </div>
+                </div>
+              </div>
+              <div class="moreBox">
+                <div class="moreTitle">购买设置</div>
+                <div class="moreItem">
+                  <div class="moreLeft">
+                    {{ form.apiProductLaunchDto['isPurchaseLimit'] == '1' ? '购买限制' : '限购' }}
+                  </div>
+                  <div class="moreRight">
+                    <el-switch
+                      v-model="form.apiProductLaunchDto['isPurchaseLimit']"
+                      active-value="1"
+                      inactive-value="0"
+                      style="margin: 0 5px 0px 15px"
+                    ></el-switch>
+                    <span class="imgSwitch">{{
+                      form.apiProductLaunchDto['isPurchaseLimit'] == '1' ? '开启限购' : '未开启'
+                    }}</span>
+                  </div>
+                </div>
+                <div class="moreItem" v-if="form.apiProductLaunchDto['isPurchaseLimit'] == '1'">
+                  <div class="moreLeft"></div>
+                  <div class="moreRight" style="margin-left: 15px">
+                    <span>每人</span>
+                    <el-select
+                      placeholder="请选择"
+                      style="width: 100px; margin-right: 5px"
+                      v-model="form.apiProductLaunchDto['limitDateUnit']"
+                    >
+                      <el-option
+                        v-for="option in limitoptions"
+                        :key="option.value"
+                        :label="option.label"
+                        :value="option.value"
+                      />
+                    </el-select>
+                    <span>限购</span>
+                    <el-input
+                      v-model="form.apiProductLaunchDto['limitQuantity']"
+                      placeholder="件数"
+                      type="number"
+                      style="width: 120px; margin-right: 20px"
+                    >
+                      <template #append>
+                        <span>件</span>
+                      </template>
+                    </el-input>
+                  </div>
+                </div>
+              </div>
+              <div class="moreBox">
+                <div class="moreTitle">上架平台</div>
+                <el-button
+                  type="primary"
+                  plain
+                  @click="choosePlatform"
+                  style="margin-top: 10px; margin-bottom: 10px"
+                  >选择平台</el-button
+                >
+                <el-table :data="choosePlatformList" border>
+                  <el-table-column
+                    label="项目名称"
+                    prop="projectName"
+                    :show-overflow-tooltip="true"
+                  />
+                  <el-table-column label="项目编号" prop="projectCode" />
+                  <el-table-column
+                    label="操作"
+                    align="center"
+                    class-name="small-padding fixed-width"
+                    width="200"
+                    fixed="right"
+                  >
+                    <template #default="scope">
+                      <el-button
+                        link
+                        type="danger"
+                        icon="Delete"
+                        @click="deletePlatform(scope.row, scope.$index)"
+                        >删除</el-button
+                      >
+                    </template>
+                  </el-table-column>
+                </el-table>
+              </div>
+            </el-col>
+          </el-row>
+        </el-card>
+      </el-form>
+    </div>
+    <div class="bottomBtn">
+      <el-button type="primary" size="large" @click="submitProduct">提交</el-button>
+    </div>
+    <!-- 选择平台 -->
+    <el-dialog title="平台" v-model="platFormOpen" width="700px" append-to-body>
+      <el-form
+        :model="platFormQueryParams"
+        ref="platFormQueryRef"
+        :inline="true"
+        label-width="68px"
+      >
+        <el-form-item label="项目名称" prop="projectName">
+          <el-input
+            v-model="platFormQueryParams.projectName"
+            placeholder="请输入项目名称"
+            clearable
+            style="width: 240px"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="Search" @click="searchPlatformTable">搜索</el-button>
+          <el-button icon="Refresh" @click="paltformReset">重置</el-button>
+        </el-form-item>
+      </el-form>
+      <!-- 表格数据 -->
+      <el-table
+        v-loading="platFormLoading"
+        :data="platFormList"
+        @selection-change="platformSelectionChange"
+        :row-key="row => row.projectBizId"
+        :reserve-selection="true"
+        ref="platformTableRef"
+      >
+        <el-table-column type="selection" width="55" align="center" :reserve-selection="true" />
+        <el-table-column label="项目名称" prop="projectName" />
+        <el-table-column label="项目编号" prop="projectCode" />
+      </el-table>
+      <pagination
+        v-show="platformTotal > 0"
+        :total="platformTotal"
+        v-model:page="platFormQueryParams.pageNo"
+        v-model:limit="platFormQueryParams.pageSize"
+        @pagination="getPlatFormList"
+      />
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="confirmPlatform">确 定</el-button>
+          <el-button @click="closePlatform">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+    <!-- 修改分类类目 -->
+    <el-dialog title="修改产品类目" v-model="categoryDialogOpen" width="1000px" append-to-body>
+      <CategoryTable
+        style="height: 300px"
+        type="edit"
+        ref="categoryRef"
+        :data="selectCategoryData"
+      />
+      <template #footer>
+        <div class="categoryDialogFooter">
+          <el-button type="primary" @click="categoryConfirm">确 定</el-button>
+          <el-button @click="categoryDialogOpen = false">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+    <el-dialog
+      :title="`${errorList.length}处需修改`"
+      v-model="errorDialogOpen"
+      width="800px"
+      append-to-body
+    >
+      <div class="errorContent">
+        <div class="errorTitle">以下问题会导致提交不通过，建议修改完再提交</div>
+        <div class="errorItem" v-for="error in errorList">
+          <el-icon class="errMsg" :size="22" style="margin-right: 5px"><Warning /></el-icon>
+          <span>{{ error.msg }}</span>
+        </div>
+      </div>
+      <template #footer>
+        <div class="categoryDialogFooter">
+          <el-button type="primary" @click="errorDialogOpen = false">去修改</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+<script setup name="InsuranceProduct">
+import { assign, cloneDeep } from 'lodash-es'
+
+import {
+  getProductList,
+  addProduct,
+  getProductDetail,
+  productParams,
+  ParamRightOptions,
+  productSpecies,
+  querySelectCategory,
+  saveProductLaunch
+} from '@/api/product/index'
+import { listProject } from '@/api/system/project'
+import { getToken } from '@/utils/auth'
+import useUserStore from '@/store/modules/user'
+import { ref, computed, watch, nextTick } from 'vue'
+import ImageUpload from '@/components/ImageUpload/index.vue' //图片上传组件
+import CategoryTable from '@/components/CategoryTable/index.vue' //图片上传组件
+const emit = defineEmits(['handleSuccess'])
+const props = defineProps({
+  // 类型，是新增还是编辑,
+  activeName: {
+    type: String,
+    default: ''
+  },
+  detailInfo: {
+    type: Object,
+    default: () => {}
+  }
+})
+const headers = ref({ Authorization: 'Bearer ' + getToken() })
+const uploadUrl = ref(import.meta.env.VITE_APP_BASE_API + '/oss/api/oss/upload')
+const userStore = useUserStore()
+const route = useRoute()
+const router = useRouter()
+const { proxy } = getCurrentInstance()
+const showImage = ref(true)
+const SummaryRightOptions = ref([]) //产品参数右侧下拉框汇总列表
+const paramsList = ref([]) //产品参数总列表
+const subImageInfo = ref({ count: 0, fileList: [] }) //详情图信息
+const showNameTip = ref(false)
+const imageInfo = ref({ count: 0, fileList: [] })
+const productList = ref([])
+const errorList = ref([]) //存储错误信息
+const errorDialogOpen = ref(false)
+const showOnce = ref(false)
+const allProductList = ref([])
+const nameRequireList = ref([
+  {
+    label: '标题中必须包含产品名称',
+    key: '1'
+  },
+  {
+    label: '标题禁止出现连续重复的关键词',
+    key: '2'
+  },
+  {
+    label: '标题字数不少于5个字，包括中文、 英文、数字',
+    key: '3'
+  },
+  {
+    label: '标题为非中文时需要附带与产品对应一致的中文翻译',
+    key: '4'
+  },
+  {
+    label: '标题中需避免填写错别字',
+    key: '5'
+  }
+])
+const imageRequireList = ref([
+  {
+    label: '商品主图须符合平台要求，否则将无法通过审核。',
+    key: '1',
+    showTip: true,
+    tipContent: '查看主图要求'
+  },
+  {
+    label: '最少上传3个素材，最多上传9个素材，其中最多上传1个视频(mp4格式)，拖拽图片可排序。',
+    key: '2'
+  },
+  {
+    label: '视频时长不超过180秒，视频大小不超过500M；单张图片需限制在10M以内。',
+    key: '3'
+  }
+])
+const desRequireList = ref([
+  {
+    label: '商品详情图须符合平台要求，否则将无法通过审核。',
+    key: '1',
+    showTip: true,
+    tipContent: '查看详情图要求'
+  },
+  {
+    label: '至少上传1个素材，最多上传50个素材，拖拽可进行排序。',
+    key: '2'
+  },
+  {
+    label: '单张图片需限制在10M以内。',
+    key: '3'
+  }
+])
+const imageTipList = ref([
+  {
+    label: '全类目的产品主图要求提供不少于3张产品相关图片',
+    key: '1'
+  },
+  {
+    label: '主图第一张需为产品实物图',
+    key: '2'
+  },
+  {
+    label: '产品主图中不可包含相同的图片',
+    key: '3'
+  },
+  {
+    label: '产品图片不允许为手机截图、空白图',
+    key: '4'
+  },
+  {
+    label: '图片需清晰，不允许打码、遮挡/ps',
+    key: '5'
+  }
+])
+const desTipList = ref([
+  {
+    label: '商品详情图不得少于1张',
+    key: '1'
+  },
+  {
+    label: '详情图需为与商品相关的图片',
+    key: '2'
+  },
+  {
+    label: '商品详情图中不可包含相同的图片',
+    key: '3'
+  },
+  {
+    label: '商品图片不允许为手机截图、空白图',
+    key: '4'
+  },
+  {
+    label: '图片需清晰，不允许打码、遮挡/ps、第三方平台信息等',
+    key: '5'
+  }
+])
+const data = reactive({
+  form: {
+    apiProductLaunchDto: {},
+    apiAttributeSettingDtoList: [],
+    speciesData: [], //规格设置的数据
+    apiSpeciesPriceDtoList: []
+  },
+  queryParams: {},
+  platFormQueryParams: {
+    pageNo: 1,
+    pageSize: 10
+  }
+})
+
+const { queryParams, form, platFormQueryParams } = toRefs(data)
+const handleDateChange = () => {}
+// ===========更多设置开始===========
+const choosePlatformList = ref([]) // 表格数据
+const platFormOpen = ref(false)
+const platFormLoading = ref(false)
+const platFormList = ref([])
+const platformSelectRows = ref([])
+const platformTotal = ref(0)
+const platformTableRef = ref()
+const selectedRows = ref([])
+// 使用 Set 来管理已选择的ID，方便查找
+const selectedPlatformIds = ref(new Set())
+
+const limitoptions = ref([
+  {
+    label: '每日',
+    value: 'DAILY',
+    key: '1'
+  },
+  {
+    label: '每周',
+    value: 'WEEKLY',
+    key: '2'
+  },
+  {
+    label: '每月',
+    value: 'MONTHLY',
+    key: '3'
+  },
+  {
+    label: '每年',
+    value: 'YEARLY',
+    key: '4'
+  }
+])
+
+const platformSelectionChange = rows => {
+  platformSelectRows.value = rows
+
+  // 实时更新ID集合
+  selectedPlatformIds.value = new Set(rows.map(item => item.projectBizId))
+}
+const paltformReset = () => {
+  platFormQueryParams.value = {
+    pageNo: 1,
+    pageSize: 10
+  }
+  getPlatFormList()
+}
+const closePlatform = () => {
+  platFormQueryParams.value = {
+    pageNo: 1,
+    pageSize: 10
+  }
+  platFormOpen.value = false
+}
+// 确定选择的平台
+const confirmPlatform = () => {
+  choosePlatformList.value = cloneDeep(platformSelectRows.value)
+  // 更新已选择的ID集合
+  selectedPlatformIds.value = new Set(choosePlatformList.value.map(item => item.projectBizId))
+  closePlatform()
+}
+
+// 2. 修改弹窗打开函数
+const choosePlatform = async () => {
+  platFormOpen.value = true
+  platFormQueryParams.value.pageNo = 1
+
+  // 获取列表数据
+  await getPlatFormList()
+}
+
+const getPlatFormList = () => {
+  platFormLoading.value = true
+  try {
+    listProject(platFormQueryParams.value).then(response => {
+      platFormList.value = response.data.records
+      platformTotal.value = response.data.total
+      // 数据加载后，设置选择状态
+      nextTick(() => {
+        if (platformTableRef.value) {
+          // 先清空所有选择
+          // platformTableRef.value.clearSelection()
+          platFormList.value.forEach(row => {
+            // 不可删除，删除会有bug
+            choosePlatformList.value.forEach(item => {
+              if (item.projectBizId == row.projectBizId) {
+                platformTableRef.value.toggleRowSelection(row, true)
+              }
+            })
+            const isSelected = selectedPlatformIds.value.has(row.projectBizId)
+
+            platformTableRef.value.toggleRowSelection(row, isSelected)
+          })
+        }
+      })
+    })
+  } catch (error) {
+    platFormList.value = []
+  } finally {
+    platFormLoading.value = false
+  }
+}
+const searchPlatformTable = () => {
+  platFormQueryParams.value.pageNo = 1
+  getPlatFormList()
+}
+const deletePlatform = (row, index) => {
+  proxy.$modal
+    .confirm('是否确认删除平台名称为"' + row.projectName + '"的数据项?')
+    .then(function () {
+      if (choosePlatformList.value.length > 0) {
+        choosePlatformList.value.splice(index, 1)
+        platformSelectRows.value.splice(index, 1)
+        // 从已选择的ID集合中移除
+        selectedPlatformIds.value.delete(row.projectBizId)
+      }
+    })
+    .catch(() => {})
+}
+
+// ===========更多设置结束===========
+
+// ===========产品规格与库存相关操作开始===========
+const tableData = ref([]) // 表格数据
+const tableColumns = ref([]) // 表格列配置
+const comboData = ref({}) // 存储每个规格组合的数据（价格、库存等）
+const speciesList = ref([])
+const speciesSelectList = ref([])
+const isSettingSpeciesPrice = ref(false) //是否根据详情值回显规格价格的值
+// 存储每个规格下拉框选中的值
+const selectedValues = ref({})
+// 价格和库存输入
+const batchPrice = ref('')
+const batchInventory = ref('')
+
+/** 获取产品的所有规格 */
+function getProductSpeciesInfo() {
+  productSpecies({ objectBizIdList: form.value.apiProductLaunchDto.categoryBizIdList }).then(
+    response => {
+      if (response.code == 200) {
+        // 应该做获取右侧的下拉框值了
+        speciesList.value = []
+        speciesList.value = response.data
+        let obj = {
+          speciesTypeBizId: `customSpecies${Date.now() + Math.floor(Math.random() * 1000)}`, //字段表唯一业务ID
+          isCustomize: '1', //是否自定义 0-否 1-是
+          typeName: '自定义规格'
+        }
+        speciesList.value.push(obj)
+        if (
+          props.detailInfo.apiSpeciesTypeDtoList &&
+          props.detailInfo.apiSpeciesTypeDtoList.length > 0
+        ) {
+          form.value.speciesData = cloneDeep(props.detailInfo.apiSpeciesTypeDtoList)
+          // 回显规格数据，处理每一项规格的options和自定义规格
+          form.value.speciesData.forEach(item => {
+            if (item.isCustomize == '1') {
+              item.speciesTypeBizId = `customSpecies${
+                Date.now() + Math.floor(Math.random() * 1000)
+              }`
+              item.speciesName = obj.speciesTypeBizId
+            } else {
+              item.speciesName = item.speciesTypeBizId
+            }
+            let options = getResidueSpecies()
+            // 非自定义规格的options需要从speciesList中获取
+            speciesList.value.forEach(item3 => {
+              if (item3.speciesTypeBizId == item.speciesTypeBizId) {
+                options.unshift(item3)
+                item.typeCode = item3.typeCode
+              }
+            })
+
+            item.apiSpeciesSettingDtoList.forEach((item2, index2) => {
+              item2.speciesTypeBizId = item.speciesTypeBizId
+              item2.speciesId = item2.speciesSettingBizId
+              item2.typeCode = item.typeCode
+              if (index2 == item.apiSpeciesSettingDtoList.length - 1) {
+                item2.isAdd = true
+              } else {
+                item2.isAdd = false
+              }
+            })
+            item.options = options
+          })
+        }
+      } else {
+        proxy.$modal.msgError(response.msg)
+      }
+    }
+  )
+}
+// 获取剩余的规格
+function getResidueSpecies() {
+  const remainData = speciesList.value.filter(species => {
+    // 检查当前规格是否已经在 form.value.speciesList 中
+    return !form.value.speciesData.some(item => item.speciesTypeBizId === species.speciesTypeBizId)
+  })
+  return remainData
+}
+// 添加规格
+function addSpecies() {
+  const residueSpecies = cloneDeep(getResidueSpecies())
+
+  if (residueSpecies.length > 1) {
+    const newSpecies = residueSpecies[0]
+    let speciesId = Date.now() + Math.floor(Math.random() * 1000)
+    newSpecies.speciesName = newSpecies.speciesTypeBizId
+    newSpecies.options = cloneDeep(residueSpecies)
+    newSpecies.isCustomize = '0'
+    //因为只有第一个规格需要添加图片，所以这里先判断一下，如果长度为0，则添加图片
+    if (form.value.speciesData.length == 0) {
+      newSpecies.isIllustration = '1'
+      newSpecies.illustrationUrl = ''
+    } else {
+      newSpecies.isIllustration = '0'
+      newSpecies.illustrationUrl = ''
+    }
+    newSpecies.apiSpeciesSettingDtoList = [
+      {
+        isIllustration: newSpecies.isIllustration,
+        speciesName: newSpecies.speciesName,
+        speciesTypeBizId: newSpecies.speciesTypeBizId,
+        typeName: newSpecies.typeName,
+        speciesId: speciesId,
+        isAdd: true,
+        isCustomize: '0'
+      }
+    ]
+    form.value.speciesData.push(newSpecies)
+  } else {
+    // 如果只剩下一个规格，则直接添加自定义规格
+    let newObj = {
+      speciesTypeBizId: `customSpecies${Date.now() + Math.floor(Math.random() * 1000)}`, //字段表唯一业务ID
+      isCustomize: '1', //是否自定义 0-否 1-是
+      typeName: ''
+    }
+    if (form.value.speciesData.length == 0) {
+      newObj.isIllustration = '1'
+    } else {
+      newObj.isIllustration = '0'
+    }
+    newObj.apiSpeciesSettingDtoList = [
+      {
+        ...newObj,
+        speciesId: Date.now() + Math.floor(Math.random() * 1000),
+        isAdd: true
+      }
+    ]
+    form.value.speciesData.push(newObj)
+  }
+
+  // 由于新增的时候，规格值会重置，所以需要更新规格下拉框的值
+  getNewSpeciesOptions()
+}
+// 处理规格值得宽度
+function getSpeciesMiddleWidth(species, item) {
+  if (species.isIllustration == '1' && item.apiSpeciesSettingDtoList.length < 2) {
+    // 有配图，但规格数量只有一个
+    return '92%'
+  } else if (species.isIllustration == '0' && item.apiSpeciesSettingDtoList.length > 1) {
+    // 无配图，但规格数量有多个
+    return '92%'
+  } else if (species.isIllustration == '0' && item.apiSpeciesSettingDtoList.length == 1) {
+    // 无配图，但规格数量只有一个
+    return '100%'
+  } else if (species.isIllustration == '1' && item.apiSpeciesSettingDtoList.length > 1) {
+    // 有配图，但规格数量有多个
+    return '84%'
+  } else {
+    return '100%'
+  }
+}
+// 规格上传图片前得校验
+function handleBeforeUpload(file) {
+  const isLt = file.size / 1024 / 1024 < 2
+  if (!isLt) {
+    proxy.$modal.msgError(`上传文件大小不能超过 2 MB!`)
+    return false
+  }
+  return true
+}
+// 规格上传图片成功
+const handleUploadSuccess = (res, file, species) => {
+  if (res.code == 200) {
+    form.value.speciesData.forEach(item => {
+      if (item.speciesTypeBizId == species.speciesTypeBizId) {
+        item.apiSpeciesSettingDtoList.forEach(item2 => {
+          if (item2.speciesId == species.speciesId) {
+            item2.illustrationUrl = res.data.url
+          }
+        })
+      }
+    })
+  }
+}
+// 添加规格值
+const speciesInputChange = (species, sIndex) => {
+  let speciesObj = { ...species }
+  // 添加规格值
+  let speciesId = Date.now() + Math.floor(Math.random() * 1000)
+  let newSpeciesValue = {
+    speciesId: speciesId,
+    speciesTypeBizId: speciesObj.speciesTypeBizId,
+    isAdd: true,
+    value: '',
+    typeName: speciesObj.typeName,
+    isCustomize: speciesObj.isCustomize
+  }
+  if (species.isIllustration == '1') {
+    newSpeciesValue.isIllustration = '1'
+    newSpeciesValue.illustrationUrl = ''
+  } else {
+    newSpeciesValue.isIllustration = '0'
+    newSpeciesValue.illustrationUrl = ''
+  }
+  form.value.speciesData.forEach((item, index) => {
+    if (item.speciesTypeBizId == speciesObj.speciesTypeBizId) {
+      item.apiSpeciesSettingDtoList.forEach((item2, i) => {
+        if (item2.speciesId == speciesObj.speciesId && item2.isAdd) {
+          item.apiSpeciesSettingDtoList.push(newSpeciesValue)
+          item2.isAdd = false
+        }
+      })
+    }
+  })
+}
+// 配图开关切换
+const switchBeforeChange = obj => {
+  return false
+}
+// 配图开关
+const switchChange = (obj, type) => {
+  form.value.speciesData.forEach((item, index) => {
+    if (item.speciesTypeBizId == obj.speciesTypeBizId) {
+      if (type == 'close') {
+        if (obj.isIllustration == '0') {
+          item.isIllustration = '1'
+        } else if (obj.isIllustration == '1') {
+          item.isIllustration = '0'
+        }
+      } else {
+        item.isIllustration = obj.isIllustration
+      }
+
+      item.apiSpeciesSettingDtoList.forEach((item2, i) => {
+        item2.isIllustration = item.isIllustration
+        if (item.isIllustration == '0') {
+          item2.illustrationUrl = ''
+        }
+      })
+    }
+  })
+}
+// 规格下拉框切换
+const changeSpeciesSelect = (obj, index) => {
+  //自定义规格只是把当前的规格给替换掉，并不是新增，写到这里了
+  let slefObj = { ...obj }
+  let newForm = { ...form.value }
+
+  const sameItem = speciesList.value.filter(item => {
+    if (item.speciesTypeBizId == slefObj.speciesName) {
+      return item
+    }
+  })
+  //更新form里对应的数据
+  newForm.speciesData.forEach((item, i) => {
+    let newSpecies = {}
+    if (item.speciesTypeBizId == slefObj.speciesTypeBizId) {
+      if (slefObj.speciesName.includes('customSpecies')) {
+        // 如果是自定义的要把自定义的数据替换成新的，
+        item.speciesTypeBizId = `customSpecies${Date.now() + Math.floor(Math.random() * 1000)}`
+        item.typeName = ''
+        item.isCustomize = '1'
+        newSpecies = { ...item }
+      } else {
+        item.isCustomize = '0'
+        item.speciesTypeBizId = slefObj.speciesName
+        item.typeName = sameItem[0].typeName
+        newSpecies = { ...sameItem[0] }
+      }
+      if (index == 0) {
+        newSpecies.isIllustration = '1'
+      } else {
+        newSpecies.isIllustration = '0'
+      }
+      item.apiSpeciesSettingDtoList = [
+        { ...newSpecies, speciesId: Date.now() + Math.floor(Math.random() * 1000), isAdd: true }
+      ]
+    }
+  })
+  form.value = newForm
+  // 由于规格下拉框切换的时候，规格值会重置，所以需要更新规格下拉框的值
+  getNewSpeciesOptions()
+}
+// 得到最新的规格下拉框数据
+const getNewSpeciesOptions = () => {
+  const remainSpeciesOptins = getResidueSpecies()
+
+  if (remainSpeciesOptins.length > 0) {
+    form.value.speciesData.forEach(item => {
+      if (item.options) {
+        let newOptions = cloneDeep(remainSpeciesOptins)
+        item.options.forEach(option => {
+          if (item.speciesTypeBizId == option.speciesTypeBizId) {
+            newOptions.unshift(option)
+          }
+        })
+        item.options = newOptions
+      } else {
+        item.speciesName = remainSpeciesOptins[0].speciesTypeBizId
+        item.options = remainSpeciesOptins
+      }
+    })
+  }
+}
+// 改变规格自定义名字得时候，规格值得typeName要同步
+const changCustomSpecies = obj => {
+  let newObj = { ...obj }
+  // 自定义规格的时候要看一下有没有重复的，如果有重复的就加错误信息，没有重复的就清空错误信息
+  let repeat = form.value.speciesData.filter(item => item.typeName == newObj.typeName)
+  form.value.speciesData.forEach((item, index) => {
+    if (item.speciesTypeBizId == newObj.speciesTypeBizId) {
+      if (repeat.length > 1) {
+        item.errorMsg = '规格名称不能重复'
+      } else if (!newObj.typeName && item.apiSpeciesSettingDtoList[0].value) {
+        item.errorMsg = '规格名称不能为空'
+      } else {
+        item.errorMsg = ''
+      }
+      item.apiSpeciesSettingDtoList.forEach((item2, i) => {
+        item2.typeName = newObj.typeName
+      })
+    }
+  })
+}
+// 删除规格
+const deleteSpecies = obj => {
+  let slefObj = { ...obj }
+  form.value.speciesData.forEach((item, index) => {
+    if (item.speciesTypeBizId == slefObj.speciesTypeBizId) {
+      form.value.speciesData.splice(index, 1)
+    }
+  })
+  if (form.value.speciesData.length > 0) {
+    form.value.speciesData[0].isIllustration = '1'
+    form.value.speciesData[0].apiSpeciesSettingDtoList.forEach((item2, i) => {
+      item2.isIllustration = '1'
+    })
+  }
+}
+// 删除规格值
+const deleteSpeciesValue = obj => {
+  let slefObj = { ...obj }
+  form.value.speciesData.forEach((item, index) => {
+    if (item.speciesTypeBizId == slefObj.speciesTypeBizId) {
+      item.apiSpeciesSettingDtoList.forEach((item2, i2) => {
+        if (item2.speciesId == slefObj.speciesId) {
+          item.apiSpeciesSettingDtoList.splice(i2, 1)
+        }
+      })
+    }
+  })
+}
+//规格设置下拉框
+const getSpeciesSelect = () => {
+  speciesSelectList.value = []
+  let newArray = cloneDeep(form.value.speciesData)
+  newArray.forEach(item => {
+    if (item.typeName && item.apiSpeciesSettingDtoList[0].value) {
+      let newOptions = item.apiSpeciesSettingDtoList.filter(item2 => {
+        return item2.value
+      })
+      newOptions.unshift({
+        value: `全部${item.typeName}`,
+        speciesId: item.speciesTypeBizId,
+        type: 'all'
+      })
+      item.options = newOptions
+      speciesSelectList.value.push(item)
+    }
+  })
+}
+
+// 初始化选中状态，默认选中"全部"
+const initSelectedValues = () => {
+  speciesSelectList.value.forEach(item => {
+    // 找到"全部"选项，类型为'all'
+    const allOption = item.options.find(opt => opt.type === 'all')
+    if (allOption) {
+      selectedValues.value[item.speciesTypeBizId] = allOption.speciesId
+    }
+  })
+}
+// 批量设置价格和库存
+const handleBatchSet = () => {
+  if (!batchPrice.value && !batchInventory.value) {
+    proxy.$modal.msgError('请输入价格或库存')
+    return
+  }
+
+  // 获取当前选中的规格值
+  const currentSelections = {}
+  speciesSelectList.value.forEach(item => {
+    const speciesTypeBizId = item.speciesTypeBizId
+    const selectedValue = selectedValues.value[speciesTypeBizId]
+    currentSelections[speciesTypeBizId] = selectedValue
+  })
+
+  // 过滤需要更新的表格行
+  const filteredRows = tableData.value.filter(row => {
+    // 检查每一行是否满足所有规格条件
+    return Object.keys(currentSelections).every(speciesTypeBizId => {
+      const selectedValue = currentSelections[speciesTypeBizId]
+
+      // 如果选择的是"全部"（speciesId等于speciesTypeBizId）
+      if (selectedValue === speciesTypeBizId) {
+        // "全部"意味着匹配该规格的所有值
+        return true
+      }
+
+      // 否则检查具体值是否匹配
+      // 通过_id字段来匹配
+      const rowSpeciesId = row[`${speciesTypeBizId}_id`]
+      return rowSpeciesId === selectedValue
+    })
+  })
+
+  // 更新匹配的行
+  filteredRows.forEach(row => {
+    if (batchPrice.value !== '') {
+      row.price = Number(batchPrice.value)
+    }
+    if (batchInventory.value !== '') {
+      row.inventory = Number(batchInventory.value)
+    }
+  })
+  tableData.value.forEach(item => {
+    if (!item.price) {
+      item.priceErrorMsg = '请输入价格'
+    } else {
+      item.priceErrorMsg = ''
+    }
+    if (!item.inventory) {
+      item.inventoryErrorMsg = '请输入库存'
+    } else {
+      item.inventoryErrorMsg = ''
+    }
+  })
+}
+// 在生成speciesSelectList后调用
+watch(
+  () => speciesSelectList.value,
+  () => {
+    if (speciesSelectList.value.length > 0) {
+      initSelectedValues()
+    }
+  },
+  { immediate: true, deep: true }
+)
+// 生成所有规格组合（笛卡尔积）
+const generateAllCombinations = specs => {
+  if (specs.length === 0) return []
+
+  const result = []
+  const firstSpec = specs[0]
+
+  const restSpecs = specs.slice(1)
+
+  // 如果还有剩余的规格，递归生成剩余规格的组合
+  const restCombinations = restSpecs.length > 0 ? generateAllCombinations(restSpecs) : [{}]
+
+  // 遍历第一个规格的每个值
+  for (let valueObj of firstSpec.apiSpeciesSettingDtoList) {
+    // 跳过空值（新增的空白项）
+    if (valueObj.value === '') continue
+
+    for (let restComb of restCombinations) {
+      let row = {
+        // 存储每个规格的值和ID
+        [firstSpec.speciesTypeBizId]: valueObj.value,
+        [`${firstSpec.speciesTypeBizId}_id`]: valueObj.speciesId,
+        speciesId: valueObj.speciesId,
+        speciesTypeBizId: firstSpec.speciesTypeBizId,
+        // 存储规格信息用于合并计算
+        _specs: {
+          [firstSpec.speciesTypeBizId]: {
+            value: valueObj.value,
+            typeName: firstSpec.typeName,
+            isIllustration: firstSpec.isIllustration,
+            speciesId: firstSpec.speciesId,
+            speciesTypeBizId: firstSpec.speciesTypeBizId,
+            isCustomize: firstSpec.isCustomize
+          }
+        }
+      }
+
+      // 添加剩余规格的值
+      for (let spec of restSpecs) {
+        row[spec.speciesTypeBizId] = restComb[spec.speciesTypeBizId]
+        row[`${spec.speciesTypeBizId}_id`] = restComb[`${spec.speciesTypeBizId}_id`]
+        row._specs[spec.speciesTypeBizId] = {
+          value: restComb[spec.speciesTypeBizId],
+          typeName: spec.typeName,
+          isIllustration: spec.isIllustration,
+          illustrationUrl: spec.illustrationUrl || '',
+          isCustomize: spec.isCustomize,
+          speciesTypeBizId: spec.speciesTypeBizId
+        }
+        if (!spec.speciesTypeBizId.includes('customSpecies')) {
+          row._specs[spec.speciesTypeBizId].speciesTypeBizId = spec.speciesTypeBizId
+        }
+      }
+
+      // 生成组合ID
+      const comboId = specs.map(spec => row[`${spec.speciesTypeBizId}_id`]).join('_')
+      row.comboId = comboId
+
+      // 如果有存储的数据，使用存储的数据
+      if (comboData.value[comboId]) {
+        row = { ...row, ...comboData.value[comboId] }
+      } else {
+        // 默认值
+        row.price = 0
+        row.inventory = 0
+        row.status = '1' // 1:上架, 0:下架
+        row.illustrationUrl = ''
+      }
+
+      if (valueObj.isIllustration && valueObj.isIllustration == '1') {
+        row.isIllustration = valueObj.isIllustration
+      }
+      if (valueObj.illustrationUrl) {
+        row.illustrationUrl = valueObj.illustrationUrl
+      }
+      if (valueObj.speciesId) {
+        row.speciesId = valueObj.speciesId
+      }
+      result.push(row)
+    }
+  }
+  return result
+}
+
+// 生成表格列配置
+const generateTableColumns = specs => {
+  const columns = []
+
+  // 动态规格列
+  specs.forEach(spec => {
+    if (spec.typeName) {
+      columns.push({
+        prop: spec.speciesTypeBizId,
+        label: spec.typeName,
+        isSpec: true
+      })
+    }
+  })
+
+  return columns
+}
+// 计算合并单元格
+const computeSpans = (data, specs) => {
+  const spans = []
+  let pos = 0
+
+  // 初始化
+  for (let i = 0; i < data.length; i++) {
+    spans[i] = []
+    for (let j = 0; j < specs.length; j++) {
+      spans[i][j] = { rowspan: 1, colspan: 1 }
+    }
+  }
+
+  // 对每个规格列进行处理
+  for (let j = 0; j < specs.length; j++) {
+    const specId = specs[j].speciesTypeBizId
+    let startRow = 0
+
+    for (let i = 1; i <= data.length; i++) {
+      // 需要比较当前行和上一行的值，以及前面规格的值
+      let same = true
+      for (let k = 0; k <= j; k++) {
+        const prevSpecId = specs[k].speciesTypeBizId
+        if (i < data.length && data[i][prevSpecId] !== data[i - 1][prevSpecId]) {
+          same = false
+          break
+        }
+      }
+
+      if (i === data.length || !same) {
+        // 从startRow到i-1行合并
+        for (let k = startRow; k < i; k++) {
+          if (k === startRow) {
+            spans[k][j].rowspan = i - startRow
+          } else {
+            spans[k][j].rowspan = 0
+            spans[k][j].colspan = 0
+          }
+        }
+        startRow = i
+      }
+    }
+  }
+
+  return spans
+}
+
+// 合并单元格方法
+const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
+  let newArray = cloneDeep(form.value.speciesData)
+  const specs = newArray.filter(item => item.typeName && item.apiSpeciesSettingDtoList[0].value)
+
+  if (columnIndex < specs.length && spans.value[rowIndex]) {
+    return [spans.value[rowIndex][columnIndex].rowspan, spans.value[rowIndex][columnIndex].colspan]
+  }
+  return [1, 1]
+}
+const spans = ref([])
+
+// 生成表格数据
+const generateTable = () => {
+  tableColumns.value = []
+  let newArray = cloneDeep(form.value.speciesData)
+  const specs = newArray.filter(item => item.typeName && item.apiSpeciesSettingDtoList[0].value)
+  // 生成列
+  tableColumns.value = generateTableColumns(specs)
+
+  // 生成行数据
+  tableData.value = generateAllCombinations(specs)
+
+  // 计算合并单元格
+  spans.value = computeSpans(tableData.value, specs)
+
+  if (isSettingSpeciesPrice.value) {
+    // 刚进来的时候，要根据详情中的apiSpeciesPriceDtoList去更新tableData中的价格和库存
+    let apiSpeciesPriceDtoList = cloneDeep(props.detailInfo.apiSpeciesPriceDtoList)
+    tableData.value.forEach((item1, index1) => {
+      apiSpeciesPriceDtoList.forEach((item2, index2) => {
+        if (index1 == index2) {
+          item1.status = String(item2.status)
+          item1.illustrationUrl = item2.illustrationUrl
+          item1.inventory = item2.inventory
+          item1.price = item2.price
+        }
+      })
+    })
+    isSettingSpeciesPrice.value = false
+  }
+}
+// 监听规格数据变化
+watch(
+  () => form.value.speciesData,
+  (newVal, oldVal) => {
+    // 更新规格表格数据
+    generateTable()
+    //设置规格设置下拉框
+    getSpeciesSelect()
+  },
+  { deep: true }
+)
+// ===========产品规格与库存相关操作结束===========
+
+// ===========产品参数相关操作开始===========
+const deleteParams = (item, index) => {
+  form.value.apiAttributeSettingDtoList.splice(index, 1)
+  // 还要处理每一项的leftOptions
+  getNewLeftOptions()
+}
+const deleteCustomParams = (item, index) => {
+  form.value.apiAttributeSettingDtoList.splice(index, 1)
+}
+const addParams = changeItem => {
+  let changeParam = { ...changeItem }
+  // 不要随意切换代码位置，会出现时机问题，会出现bug
+  // 正确的筛选逻辑：过滤出 form.value.apiAttributeSettingDtoList 中不存在的参数
+  const remainParams = getRemainData()
+  // 因为最后一个是自定义参数，所以加参加到最后一个直接走自定义参数的逻辑
+  if (!(changeParam.name && changeParam.name.includes('custom')) && remainParams.length > 1) {
+    // 按照 paramsList.value 的顺序，只添加第一个未添加的参数
+    form.value.apiAttributeSettingDtoList.push({
+      ...remainParams[0],
+      isCustomize: '0',
+      leftOptions: remainParams, // 所有剩余参数作为 leftOptions
+      name: remainParams[0].fieldBizId
+    })
+    // 还要处理每一项的leftOptions
+    getNewLeftOptions()
+  } else {
+    let leftOptions = getRemainData()
+    // 因为这里添加自定义参数的时候，需要把之前的自定义参数先删除，在增加新的自定义参数，这样左侧的下拉框中的才能对应上
+    leftOptions.splice(leftOptions.length - 1, 1)
+    let fieldBizId = `custom${Date.now() + Math.floor(Math.random() * 1000)}`
+    // 如果没有剩余参数，则添加自定义参数
+    const customParam = {
+      productLaunchBizId: route.query.productLaunchBizId, //产品上架信息表唯一业务ID
+      fieldBizId: fieldBizId, //字段表唯一业务ID
+      fieldValueBizId: '', //字段值表唯一业务ID
+      name: '', //字段名称
+      value: '', //字段值
+      isCustomize: '1', //是否自定义 0-否 1-是
+      fieldCnName: '自定义参数',
+      customValue: fieldBizId //自定义值
+    }
+    leftOptions.push(customParam)
+    customParam.leftOptions = leftOptions
+    form.value.apiAttributeSettingDtoList.push(customParam)
+
+    // 还要处理每一项的leftOptions,自定义的参数不需要处理,先暂时不处理，先放在这，需要处理的
+    // let remainLeftOptins = getRemainData().map(item => {
+    //   if (!item.isCustomize) return item
+    // })
+    // remainLeftOptins.push(customParam)
+    // if (remainLeftOptins.length > 0) {
+    //   form.value.apiAttributeSettingDtoList.forEach(item => {
+    //     if (item.leftOptions && !item.isCustomize) {
+    //       let newOptions = JSON.parse(JSON.stringify(remainLeftOptins))
+    //       item.leftOptions.forEach(option => {
+    //         if (item.fieldBizId == option.fieldBizId) {
+    //           newOptions.unshift(option)
+    //         }
+    //       })
+    //       item.leftOptions = newOptions
+    //     }
+    //   })
+    // }
+  }
+  // 处理必填提示
+  paramsErr()
+}
+// 给产品参数加必填提示
+const paramsErr = () => {
+  let errorList = []
+  form.value.apiAttributeSettingDtoList.forEach(item => {
+    if (item.isCustomize == '0' && item.value.length == 0) {
+      item.fieldCnName = item.leftOptions[0].fieldCnName
+      item.errorMsg = `参数${item.fieldCnName}为必填项`
+      errorList.push({ msg: item.errorMsg })
+    } else if (item.isCustomize == '1') {
+      if (!item.name && !item.value) {
+        item.errorMsg = `参数名称不能为空，参数值不能为空`
+        errorList.push({ msg: item.errorMsg })
+      } else if (!item.name) {
+        item.errorMsg = `参数名称不能为空`
+        errorList.push({ msg: item.errorMsg })
+      } else if (!item.value) {
+        item.errorMsg = `参数值不能为空`
+        errorList.push({ msg: item.errorMsg })
+      } else {
+        item.errorMsg = ``
+      }
+    } else {
+      item.errorMsg = ``
+    }
+  })
+
+  return errorList
+}
+const getRemainData = () => {
+  const remainData = paramsList.value.filter(param => {
+    // 检查当前参数是否已经在 form.value.apiAttributeSettingDtoList 中
+    return !form.value.apiAttributeSettingDtoList.some(item => item.fieldBizId === param.fieldBizId)
+  })
+  return remainData
+}
+const getNewLeftOptions = () => {
+  const remainLeftOptins = getRemainData()
+
+  if (remainLeftOptins.length > 0) {
+    form.value.apiAttributeSettingDtoList.forEach(item => {
+      if (item.leftOptions) {
+        let newOptions = cloneDeep(remainLeftOptins)
+        item.leftOptions.forEach(option => {
+          if (item.fieldBizId == option.fieldBizId) {
+            newOptions.unshift(option)
+          }
+        })
+        item.leftOptions = newOptions
+      } else {
+        let newOptions = cloneDeep(remainLeftOptins)
+        let option = cloneDeep(paramsList.value).filter(
+          item2 => item.isCustomize == '0' && item2.fieldBizId == item.fieldBizId
+        )
+        if (option.length > 0) {
+          newOptions.unshift(option[0])
+        }
+        if (item.isCustomize == '1') {
+          item.customValue = '自定义参数'
+        }
+        item.leftOptions = newOptions
+      }
+    })
+  }
+}
+const changeLeft = (changeItem, index) => {
+  const currentItem = cloneDeep(changeItem)
+  //如果选择的是自定义参数，则走添加参数的流程
+  if (currentItem.name.includes('custom')) {
+    // 先删除掉form中的当前项
+    if (form.value.apiAttributeSettingDtoList.length > 0) {
+      form.value.apiAttributeSettingDtoList.splice(index, 1)
+    }
+    // 再添加自定义参数
+    addParams(currentItem)
+    return
+  }
+
+  // return
+  // 非自定义参数，切换下拉框的值
+  // 1.先在 paramsList.value 中查找是否有相同的项
+  const identicalItem = paramsList.value.find(item => item.fieldBizId === currentItem.name) //选择的当前项
+  // 判断form中fieldBizId和changeItem.fieldBizId，一致就更新掉form中的当前项的数据
+  form.value.apiAttributeSettingDtoList.forEach(item => {
+    if (item.fieldBizId == currentItem.fieldBizId) {
+      item.name = currentItem.name
+      for (const key in identicalItem) {
+        item[key] = identicalItem[key]
+      }
+    }
+  })
+  getNewLeftOptions()
+}
+const changeCustomLeft = (item, index) => {
+  const currentItem = { ...item }
+  //如果选择的是自定义参数，则走添加参数的流程
+  if (currentItem.customValue.includes('custom')) {
+    return
+  } else {
+    // 先删除掉form中的当前项
+    if (form.value.apiAttributeSettingDtoList.length > 0) {
+      form.value.apiAttributeSettingDtoList.splice(index, 1)
+    }
+    // 依据当前选择的customValue，去paramsList中查找对应的项再添加到form中
+    const identicalItem = paramsList.value.find(item => item.fieldBizId === currentItem.customValue) //选择的当前项
+    identicalItem.name = currentItem.customValue
+    identicalItem.leftOptions = getRemainData()
+    form.value.apiAttributeSettingDtoList.push(identicalItem)
+    // 还要处理每一项的leftOptions
+    getNewLeftOptions()
+  }
+}
+/** 获取产品参数信息 */
+function getProductParamsInfo() {
+  productParams({ objectBizIdList: form.value.apiProductLaunchDto.categoryBizIdList }).then(
+    response => {
+      if (response.code == 200) {
+        // 应该做获取右侧的下拉框值了
+        paramsList.value = []
+        form.value.apiAttributeSettingDtoList = []
+        paramsList.value = response.data
+        const fieldBizIdList = response.data.map(item => item.fieldBizId)
+
+        if (paramsList.value.length > 0) {
+          paramsList.value.forEach(item => {
+            item.isCustomize = '0'
+          })
+        }
+        paramsList.value.push({
+          productLaunchBizId: route.query.productLaunchBizId, //产品上架信息表唯一业务ID
+          fieldBizId: `custom${Date.now() + Math.floor(Math.random() * 1000)}`, //字段表唯一业务ID
+          fieldValueBizId: '', //字段值表唯一业务ID
+          name: '', //字段名称
+          value: '', //字段值
+          isCustomize: '1', //是否自定义 0-否 1-是
+          fieldCnName: '自定义参数'
+        })
+        // 赋值
+        if (props.detailInfo.apiAttributeSettingDtoList.length == 0) {
+          if (paramsList.value.length == 0) {
+            form.value.apiAttributeSettingDtoList.push({
+              ...paramsList.value[0],
+              leftOptions: paramsList.value,
+              name: '',
+              customValue: paramsList.value[0].fieldBizId
+            })
+          }
+          // else {
+          //   form.value.apiAttributeSettingDtoList.push({
+          //     ...paramsList.value[0],
+          //     leftOptions: paramsList.value,
+          //     name: paramsList.value[0].fieldBizId
+          //   })
+          // }
+        } else {
+          // 回显的时候没有leftOptions和middleOptions，需要赋值
+          form.value.apiAttributeSettingDtoList = cloneDeep(
+            props.detailInfo.apiAttributeSettingDtoList
+          )
+          form.value.apiAttributeSettingDtoList.forEach(item => {
+            if (item.isCustomize == '0' && item.textBoxType !== 'multipleSelect') {
+              item.name = item.fieldBizId
+              if (item.fieldValueBizId) {
+                item.value = item.fieldValueBizId
+              }
+            }
+
+            if (item.textBoxType == 'multipleSelect') {
+              item.value = item.value.split(';')
+            }
+          })
+        }
+        getNewLeftOptions()
+        RightParamsOptionList(fieldBizIdList)
+      } else {
+        proxy.$modal.msgError(response.msg)
+      }
+    }
+  )
+}
+/** 获取产品参数右侧汇总options */
+function RightParamsOptionList(fieldBizIdList) {
+  ParamRightOptions({ fieldBizIdList }).then(response => {
+    if (response.code == 200) {
+      SummaryRightOptions.value = response.data
+      paramsList.value.forEach(item => {
+        SummaryRightOptions.value.forEach(item2 => {
+          if (item.fieldBizId == item2.fieldBizId) {
+            item.middleOptions = item2.fieldValueListResponseList
+          }
+        })
+      })
+      form.value.apiAttributeSettingDtoList.forEach(item => {
+        SummaryRightOptions.value.forEach(item2 => {
+          if (item.fieldBizId == item2.fieldBizId) {
+            item.middleOptions = item2.fieldValueListResponseList
+          }
+        })
+      })
+    } else {
+      proxy.$modal.msgError(response.msg)
+    }
+  })
+}
+// ===========产品参数相关操作结束===========
+const handleFileChange = info => {
+  if (info.source == 'main') {
+    imageInfo.value = cloneDeep(info)
+    form.value['apiProductLaunchDto'].mainUrlsList = info.fileList.map(item => item.url)
+  } else if (info.source == 'sub') {
+    subImageInfo.value = cloneDeep(info)
+    form.value['apiProductLaunchDto'].detailUrlsList = info.fileList.map(item => item.url)
+  }
+}
+
+const handleSelectChange = () => {
+  if (
+    form.value['apiProductLaunchDto'].title &&
+    form.value['apiProductLaunchDto'].title.length < 5
+  ) {
+    showNameTip.value = true
+  } else if (!form.value['apiProductLaunchDto'].title) {
+    showNameTip.value = true
+  } else {
+    showNameTip.value = false
+  }
+}
+
+/** 查询产品列表 */
+function searchProduct(query) {
+  let productName = query ? query.trim() : ''
+
+  let data = {
+    productName: productName,
+    pageSize: showOnce.value ? 9999 : 10,
+    pageNo: 1
+  }
+  getProductList(data).then(response => {
+    if (response.code === 200) {
+      productList.value = response.data.records
+      if (showOnce.value) {
+        allProductList.value = response.data.records
+        showOnce.value = false
+        console.log('allProductList.value', allProductList.value)
+      }
+    } else {
+      productList.value = []
+      proxy.$modal.msgError(response.msg)
+    }
+  })
+}
+
+// ===========基础信息相关操作开始===========
+const selectCategoryData = ref([]) //已经选择的分类数据
+const categoryDialogOpen = ref(false) //已经选择的分类数据
+const categoryRef = ref(null)
+// 选择的分类名称
+const categoryName = computed(() => {
+  let result = []
+  selectCategoryData.value.forEach(item => {
+    item.data.forEach(c => {
+      if (c.isSelected) result.push(c.name)
+    })
+  })
+
+  if (result.length > 0) {
+    return result.join(' > ')
+  } else {
+    return ''
+  }
+})
+/** 查询已经选中的分类列表 */
+function getSelectCategory() {
+  let data = {
+    objectBizId: form.value['apiProductLaunchDto'].productLaunchBizId,
+    type: 'PRODUCT'
+  }
+  querySelectCategory(data).then(response => {
+    if (response.code === 200) {
+      response.data = response.data.map(item => {
+        item.data = item.selectedResponseList
+        return item
+      })
+      selectCategoryData.value = response.data
+    } else {
+      selectCategoryData.value = []
+      proxy.$modal.msgError(response.msg)
+    }
+  })
+}
+const categoryConfirm = () => {
+  selectCategoryData.value = categoryRef.value.categoryList
+  categoryDialogOpen.value = false
+}
+// ===========基础信息相关操作结束===========
+/** 上架产品 保存接口*/
+function submitProduct() {
+  let submitObj = {}
+  errorList.value = []
+  // 产品
+  // 类目信息form.value['apiProductLaunchDto'].categoryBizIdList对应的是   selectCategoryData
+  if (!form.value['apiProductLaunchDto'].title) {
+    errorList.value.push({ msg: '标题信息过少，请至少输入5个有效字数（含中文、英文、数字）' })
+  }
+
+  // 处理图片
+  if (
+    !form.value['apiProductLaunchDto'].mainUrlsList ||
+    form.value['apiProductLaunchDto'].mainUrlsList.length == 0
+  ) {
+    errorList.value.push({ msg: '请上传至少三张产品主图' })
+  }
+  if (
+    !form.value['apiProductLaunchDto'].detailUrlsList ||
+    form.value['apiProductLaunchDto'].detailUrlsList.length == 0
+  ) {
+    errorList.value.push({ msg: '请上传至少一张产品详情图' })
+  }
+
+  //处理产品参数
+  let paramsErrors = paramsErr()
+  if (paramsErrors.length > 0) {
+    errorList.value.push(...paramsErrors)
+  }
+  // 处理产品参数
+  let apiAttributeSettingDtoList = cloneDeep(form.value.apiAttributeSettingDtoList)
+
+  apiAttributeSettingDtoList.forEach(item => {
+    if (!item.isCustomize) {
+      item.isCustomize = '0'
+    }
+    if (item.leftOptions) {
+      item.leftOptions.forEach(item2 => {
+        if (item.name == item2.fieldBizId) {
+          item.name = item2.fieldCnName
+        }
+      })
+    }
+    if (item.middleOptions) {
+      item.middleOptions.forEach(item2 => {
+        if (item.value == item2.fieldValueBizId) {
+          item.fieldValueBizId = item2.fieldValueBizId
+          item.value = item2.value
+        }
+      })
+    }
+    if (item.textBoxType == 'multipleSelect') {
+      item.value = item.value.join(';')
+    }
+    item.productLaunchBizId = form.value['apiProductLaunchDto'].productLaunchBizId
+    delete item.leftOptions
+    delete item.middleOptions
+  })
+  // 处理产品规格和库存
+  // 处理规格列表
+  let apiSpeciesSettingDtoList = []
+  let newData = cloneDeep(form.value.speciesData)
+  if (newData.length == 0) {
+    proxy.$modal.msgError('请添加产品规格')
+    return
+  }
+  newData.forEach(item => {
+    if (item.errorMsg) {
+      errorList.value.push({ msg: item.errorMsg })
+    }
+    item.apiSpeciesSettingDtoList.forEach(item2 => {
+      item2.productLaunchBizId = form.value['apiProductLaunchDto'].productLaunchBizId
+      if (item2.isCustomize == '1' && item2.value) {
+        apiSpeciesSettingDtoList.push({
+          typeName: item2.typeName,
+          value: item2.value,
+          isIllustration: item2.isIllustration,
+          illustrationUrl: item2.illustrationUrl,
+          isCustomize: item2.isCustomize,
+          productLaunchBizId: form.value['apiProductLaunchDto'].productLaunchBizId
+        })
+      } else if (item2.isCustomize == '0' && item2.value) {
+        apiSpeciesSettingDtoList.push(item2)
+      }
+    })
+  })
+
+  // 处理价格库存列表
+  let apiSpeciesPriceDtoList = []
+  tableData.value.forEach(item => {
+    if (!item.price) {
+      item.priceErrorMsg = '请输入价格'
+    } else {
+      item.priceErrorMsg = ''
+    }
+    if (!item.inventory) {
+      item.inventoryErrorMsg = '请输入库存'
+    } else {
+      item.inventoryErrorMsg = ''
+    }
+    if (!item.price || !item.inventory) {
+      errorList.value.push({ msg: item.priceErrorMsg || item.inventoryErrorMsg })
+    }
+  })
+  let newPrice = cloneDeep(tableData.value)
+
+  newPrice.forEach(item => {
+    item.apiSpeciesSettingDtoList = []
+    for (let key in item._specs) {
+      speciesList.value.forEach(spec => {
+        if (spec.speciesTypeBizId == key) {
+          item._specs[key].typeCode = spec.typeCode
+        }
+      })
+      item.apiSpeciesSettingDtoList.push(item._specs[key])
+    }
+    apiSpeciesPriceDtoList.push({
+      productLaunchBizId: form.value['apiProductLaunchDto'].productLaunchBizId,
+      price: item.price, //价格
+      inventory: item.inventory, //库存
+      illustrationUrl: item.illustrationUrl, //配图url
+      status: item.status, //状态：0=下架，1=上架
+      apiSpeciesSettingDtoList: item.apiSpeciesSettingDtoList
+    })
+  })
+  if (errorList.value.length > 0) {
+    errorDialogOpen.value = true
+    return
+  } else {
+    errorDialogOpen.value = false
+  }
+  // 处理类目数据
+  form.value['apiProductLaunchDto'].categoryBizIdList = []
+  selectCategoryData.value.forEach(item => {
+    if (item.data) {
+      item.data.forEach(item2 => {
+        if (item2.isSelected) {
+          form.value['apiProductLaunchDto'].categoryBizIdList.push(item2.categoryBizId)
+        }
+      })
+    }
+  })
+  // 处理平台数据
+  let projectBizIdList = []
+  choosePlatformList.value.forEach(item => {
+    projectBizIdList.push(item.projectBizId)
+  })
+  form.value['apiProductLaunchDto'].projectBizIdList = projectBizIdList
+
+  // 处理定期开售
+  if (form.value['apiProductLaunchDto'].isTiming == '0') {
+    form.value['apiProductLaunchDto'].releaseDate = ''
+    form.value['apiProductLaunchDto'].isHiddenPrice = ''
+  } else if (form.value['apiProductLaunchDto'].isTiming == '1') {
+    form.value['apiProductLaunchDto'].isHiddenPrice = form.value['apiProductLaunchDto']
+      .isHiddenPrice
+      ? '1'
+      : '0'
+  }
+  // 处理限购
+  if (form.value['apiProductLaunchDto'].isPurchaseLimit == '0') {
+    form.value['apiProductLaunchDto'].limitDateUnit = ''
+    form.value['apiProductLaunchDto'].limitQuantity = ''
+  }
+  submitObj.apiAttributeSettingDtoList = apiAttributeSettingDtoList
+  submitObj.apiSpeciesSettingDtoList = apiSpeciesSettingDtoList
+  submitObj.apiSpeciesPriceDtoList = apiSpeciesPriceDtoList
+  submitObj.apiProductLaunchDto = form.value['apiProductLaunchDto']
+  if (route.query.source && route.query.source == 'copy') {
+    submitObj.source = 1
+  } else {
+    submitObj.source = null
+  }
+  if (form.value['apiProductLaunchDto'].title) {
+    allProductList.value.forEach(item => {
+      if (item.productBizId == form.value['apiProductLaunchDto'].title) {
+        submitObj.apiProductLaunchDto.title = item.productName
+        submitObj.apiProductLaunchDto.productBizId = item.productBizId
+      }
+    })
+  }
+  // return
+  saveProductLaunch(submitObj).then(response => {
+    if (response.code === 200) {
+      if (route.query.source && route.query.source == 'copy') {
+        proxy.$modal.msgSuccess('产品复制成功')
+        emit('handleSuccess', 'baseInfo', response.data)
+      } else {
+        proxy.$modal.msgSuccess('产品上架成功')
+        emit('handleSuccess', 'baseInfo')
+      }
+    } else {
+      proxy.$modal.msgError(response.msg)
+    }
+  })
+}
+watch(
+  () => props.detailInfo,
+  newVal => {
+    if (newVal) {
+      form.value.apiProductLaunchDto = cloneDeep(newVal.apiProductLaunchDto)
+      imageInfo.value.count = form.value['apiProductLaunchDto'].mainUrlsList.length
+      subImageInfo.value.count = form.value['apiProductLaunchDto'].detailUrlsList.length
+      // 给平台赋值
+      if (form.value['apiProductLaunchDto'].apiProjectDtoList) {
+        choosePlatformList.value = cloneDeep(form.value['apiProductLaunchDto'].apiProjectDtoList)
+        // 更新已选择的ID集合
+        selectedPlatformIds.value = new Set(choosePlatformList.value.map(item => item.projectBizId))
+      }
+      if (newVal.apiSpeciesPriceDtoList.length > 0) {
+        isSettingSpeciesPrice.value = true
+      }
+      if (form.value['apiProductLaunchDto'].isHiddenPrice) {
+        form.value['apiProductLaunchDto'].isHiddenPrice =
+          form.value['apiProductLaunchDto'].isHiddenPrice == '1' ? true : false
+      }
+
+      getSelectCategory() // 获取已经选中的分类
+      /**
+       * 参数操作：
+       * 1.先拿到所有参数信息，默认只展示参数列表的第一个，用拿到的所有参数的fieldBizId去请求所有右侧下拉框的options
+       * 2.第一个参数列表的options也就是左侧的下拉框是参数列表的所有数据，当选了某一个option,下拉框里就没有当前选择的这个option了
+       * 3.当点击添加参数时，左侧下拉框是除了已经添加的参数外的paramsList外剩余的参数，右侧下拉框是当前参数对应的options
+       * 回显注意：
+       * 4.当回显的时候需要依据详情的值对form进行赋值,这一步还未做，等做编辑的时候再做
+       */
+      getProductParamsInfo()
+      /**
+       * 产品规格操作
+       * 1.先拿到所有规格信息，创建新规格默认只展示规格列表的第一个
+       */
+      getProductSpeciesInfo()
+      showOnce.value = true
+      searchProduct()
+    }
+  }
+)
+watch(
+  () => props.activeName,
+  newVal => {
+    if (newVal == 'baseInfo') {
+      // searchProduct()
+    }
+  }
+)
+</script>
+<style lang="scss" scoped>
+.baseBox {
+  width: 100%;
+  box-sizing: border-box;
+  height: 100%;
+  /* background-color: rgb(247 247 247) !important; */
+  /* padding: 0 !important; */
+  /* height: 500px !important;
+  overflow: hidden;
+  overflow-y: scroll; */
+}
+.cardStyle {
+  margin-bottom: 20px;
+  border: none !important;
+}
+.cardTitle {
+  font-size: 17px;
+  font-weight: 600;
+}
+.chooseClass {
+  font-size: 14px;
+  margin: 0px 10px;
+}
+.editTxt {
+  font-size: 14px;
+  color: #576b95;
+}
+.colBottomGap {
+  margin-bottom: 30px;
+}
+.form-content {
+  width: 100%;
+  box-sizing: border-box;
+  height: 73vh;
+  overflow: hidden;
+  overflow-y: scroll;
+  padding: 10px 10px;
+}
+.form-content :deep(.el-card) {
+  border: none !important;
+}
+.formHeader {
+  margin-bottom: 20px;
+  font-size: 22px;
+  font-weight: 600;
+}
+.nameTip {
+  font-size: 13px;
+  margin-top: 10px;
+}
+.tipCon {
+  /* width: 450px; */
+  width: fit-content;
+  /* 为了更好的兼容性，可以加上带前缀的版本 */
+  width: -moz-fit-content;
+  width: -webkit-fit-content;
+  margin: 5px 0;
+  padding: 10px 10px;
+  border-radius: 5px;
+  background-color: rgb(247 247 247);
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  span {
+    color: rgb(111 111 111);
+  }
+}
+.commonHeader {
+  font-size: 16px;
+  margin-bottom: 15px;
+}
+.imgTip {
+  color: #ccc;
+  font-size: 14px;
+  margin-bottom: 10px;
+}
+.classTip {
+  color: #ccc;
+  font-size: 14px;
+}
+.bottomBtn {
+  border-top: 1px solid rgb(247 247 247);
+  width: 100%;
+  padding: 10px 20px;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  background-color: #fff;
+}
+.paramsItem {
+  display: flex;
+  align-items: center;
+  border: 1px solid rgb(0 0 0 / 10%);
+  border-radius: 3px;
+  /* margin-bottom: 20px; */
+}
+.paramsItem:hover {
+  border-color: rgba(64, 158, 255, 1);
+}
+.paramsLeft {
+  border-right: 1px solid rgb(0 0 0 / 10%);
+}
+
+.paramsRight {
+  border-left: 1px solid rgb(0 0 0 / 10%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 32px;
+  background-color: #f7f7f7;
+}
+/* 通用：去除 el-select 和 el-input 的外框 */
+.paramsItem :deep(.el-input__wrapper) {
+  box-shadow: none !important;
+}
+.paramsItem :deep(.el-select__wrapper) {
+  box-shadow: none !important;
+}
+
+/* 专门针对 el-select：去除获得焦点时的蓝色外框 */
+.paramsItem :deep(.el-select .el-input.is-focus .el-input__wrapper) {
+  box-shadow: none !important;
+}
+
+/* 专门针对 el-input：去除获得焦点时的蓝色外框 */
+.paramsItem :deep(.el-input .el-input__wrapper.is-focus) {
+  box-shadow: none !important;
+}
+.customMiddle {
+  border-left: 1px solid rgb(0 0 0 / 10%);
+}
+.errorParams {
+  background-color: #f7f7f7;
+  padding: 10px;
+  border-radius: 5px;
+  font-size: 14px;
+  margin: 10px 0px;
+  display: flex;
+  align-items: center;
+}
+.addTxt {
+  color: #576b95;
+  font-size: 15px;
+  display: flex;
+  align-items: center;
+  margin-top: 20px;
+}
+.speciesItem {
+  background-color: #f7f7f7;
+  padding: 10px 20px;
+  margin: 15px 0px;
+  border-radius: 5px;
+}
+.speciesTop {
+  margin-top: 10px;
+}
+.imgSwitch {
+  color: rgb(0 0 0 / 55%);
+  font-size: 14px;
+}
+.speciesTop {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.speciesTopLeft {
+  display: flex;
+  /* align-items: center; */
+}
+.customizeInput {
+  margin-left: 20px;
+}
+.customizeErrorMsg {
+  margin-top: 5px;
+  font-size: 14px;
+  color: #fa5151;
+}
+.speciesTopRight {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* padding: 5px; */
+  border-radius: 50%;
+  border: 1px solid rgb(0 0 0 / 10%);
+  width: 40px;
+  height: 40px;
+}
+.speciesLeft {
+  background-color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 32px;
+}
+.required-label::before {
+  content: '*';
+  color: #f56c6c;
+  margin-right: 4px;
+}
+.speciesSelect {
+  margin-bottom: 10px;
+  display: flex;
+}
+.settingBox {
+  display: flex;
+}
+.settingItem {
+  width: 220px;
+  margin-right: 20px;
+}
+.settingLeft {
+  color: rgb(0 0 0 / 50%);
+  font-size: 14px;
+  text-align: center;
+  width: 25%;
+}
+.settingRight {
+  width: 80%;
+}
+.errMsg {
+  color: #f56c6c;
+  font-size: 12px;
+}
+.moreBox {
+  margin-bottom: 20px;
+}
+.moreTitle {
+  font-size: 17px;
+  font-weight: 500;
+}
+.moreItem {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  color: rgb(0 0 0 / 90%);
+  margin-top: 10px;
+  font-size: 14px;
+}
+.moreLeft {
+  width: 5%;
+}
+.categoryDialogFooter {
+  margin-top: 50px;
+}
+.errorContent {
+  height: 450px;
+  overflow-y: scroll;
+  /* overflow: hidden; */
+}
+.errorTitle {
+  font-size: 13px;
+  color: rgba(0, 0, 0, 50%);
+}
+.errorItem {
+  padding: 10px;
+  background-color: #f7f7f7;
+  margin: 10px 0px;
+  border-radius: 5px;
+  width: 100%;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+}
+</style>

src/views/merchandise/components/sendInfo.vue

+<template>
+  <div class="app-container">
+    <el-row style="margin-bottom: 20px">
+      <el-col style="display: flex; justify-content: space-between"
+        ><div>
+          <el-button type="primary" plain icon="Refresh" @click="updateSpecies">更新规格</el-button>
+        </div>
+      </el-col>
+    </el-row>
+    <el-table
+      :data="tableData"
+      :span-method="objectSpanMethod"
+      border
+      style="width: 100%; margin-top: 20px"
+      row-key="rowKey"
+    >
+      <!-- 动态生成所有列 -->
+      <template v-for="column in tableColumns" :key="column.prop">
+        <el-table-column :prop="column.prop" :label="column.label" />
+      </template>
+
+      <!-- 固定操作列 -->
+      <el-table-column
+        label="操作"
+        :width="tableData.length > 0 ? 180 : 0"
+        align="center"
+        fixed="right"
+      >
+        <template #default="scope">
+          <el-button type="primary" size="small" @click="handleCommissionSetting(scope.row)">
+            佣金设置
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getSpeciesList"
+      style="margin-top: 10px"
+    />
+    <!-- 佣金设置 -->
+    <el-dialog
+      title="佣金设置"
+      v-model="showCommisionSetting"
+      width="1200px"
+      append-to-body
+      :close-on-click-modal="false"
+    >
+      <el-form :model="settingQueryParams" ref="settingQueryRef" :inline="true" label-width="68px">
+        <!-- <el-form-item label="项目名称" prop="projectName">
+          <el-input
+            v-model="platFormQueryParams.projectName"
+            placeholder="请输入项目名称"
+            clearable
+            style="width: 240px"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="Search" @click="searchPlatformTable">搜索</el-button>
+          <el-button icon="Refresh" @click="paltformReset">重置</el-button>
+        </el-form-item> -->
+      </el-form>
+
+      <!-- 表格数据 -->
+      <el-table v-loading="settingLoading" :data="settingList" border ref="settingTableRef">
+        <el-table-column
+          label="序号 "
+          width="55"
+          align="center"
+          type="index"
+          fixed="left"
+        ></el-table-column>
+        <el-table-column label="费用名称" prop="expenseName" width="150" fixed="left">
+          <template #header>
+            <span class="required-label">费用名称</span>
+          </template>
+          <template #default="scope">
+            <el-select v-model="scope.row.expenseName" placeholder="请选择">
+              <el-option
+                v-for="item in commission_cost_type"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column label="佣金年限(起)" prop="startPeriod" width="120">
+          <template #header>
+            <span class="required-label">佣金年限(起)</span>
+          </template>
+          <template #default="scope">
+            <el-input
+              v-model="scope.row.startPeriod"
+              type="number"
+              placeholder="请输入"
+              :min="1"
+              clearable
+              @input="handleNumberInput(scope.row, 'startPeriod', 'positive')"
+              @blur="handlePeriodBlur(scope.row, scope.$index, 'startPeriod')"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column label="佣金年限(止)" prop="endPeriod" width="120">
+          <template #header>
+            <span class="required-label">佣金年限(止)</span>
+          </template>
+          <template #default="scope">
+            <el-input
+              v-model="scope.row.endPeriod"
+              type="number"
+              :min="1"
+              placeholder="请输入"
+              clearable
+              @input="handleNumberInput(scope.row, 'endPeriod', 'positive')"
+              @blur="handlePeriodBlur(scope.row, scope.$index, 'endPeriod')"
+            />
+          </template>
+        </el-table-column>
+
+        <el-table-column label="佣金率(%)" prop="commissionRate" width="120">
+          <template #header>
+            <span class="required-label">佣金率(%)</span>
+          </template>
+          <template #default="scope">
+            <el-input
+              v-model="scope.row.commissionRate"
+              type="number"
+              :min="0"
+              placeholder="请输入"
+              clearable
+              @input="handleNumberInput(scope.row, 'commissionRate', 'non-negative')"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column label="折标系数(%)" prop="discountRatio" width="120">
+          <template #header>
+            <span class="required-label">折标系数(%)</span>
+          </template>
+          <template #default="scope">
+            <el-input
+              v-model="scope.row.discountRatio"
+              type="number"
+              :min="0"
+              placeholder="请输入"
+              clearable
+              @input="handleNumberInput(scope.row, 'discountRatio', 'non-negative')"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column label="生效日期(起)" prop="effectiveStart" width="150">
+          <template #header>
+            <span class="required-label">生效日期(起)</span>
+          </template>
+          <template #default="scope">
+            <el-date-picker
+              v-model="scope.row.effectiveStart"
+              style="width: 100%"
+              type="date"
+              placeholder="请选择日期"
+              format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD"
+              @change="handleStartDateChange(scope.row, scope.$index)"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column label="生效日期(止)" prop="effectiveEnd" width="150">
+          <template #header>
+            <span class="required-label">生效日期(止)</span>
+          </template>
+          <template #default="scope">
+            <el-date-picker
+              v-model="scope.row.effectiveEnd"
+              style="width: 100%"
+              type="date"
+              placeholder="请选择日期"
+              format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD"
+              @change="handleEndDateChange(scope.row, scope.$index)"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column label="适用范围" prop="scope" width="300">
+          <template #header>
+            <span class="required-label">适用范围</span>
+          </template>
+          <template #default="scope">
+            <el-select
+              v-model="scope.row.scope"
+              style="width: 100%"
+              multiple
+              collapse-tags
+              collapse-tags-tooltip
+              :max-collapse-tags="2"
+              placeholder="请选择"
+              clearable
+            >
+              <el-option
+                v-for="item in commission_scope_type"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column label="是否受汇率影响" prop="isExchangeRate" width="150">
+          <template #header>
+            <span class="required-label">是否受汇率影响</span>
+          </template>
+          <template #default="scope">
+            <el-select
+              v-model="scope.row.isExchangeRate"
+              style="width: 100%"
+              placeholder="请选择"
+              clearable
+            >
+              <el-option
+                v-for="item in sys_no_yes"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column label="结算币种" prop="currency" width="120">
+          <template #header>
+            <span class="required-label">结算币种</span>
+          </template>
+          <template #default="scope">
+            <el-select
+              v-model="scope.row.currency"
+              style="width: 100%"
+              placeholder="请选择"
+              clearable
+            >
+              <el-option
+                v-for="item in bx_currency_type"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" prop="status" width="120">
+          <template #header>
+            <span class="required-label">状态</span>
+          </template>
+          <template #default="scope">
+            <el-switch
+              v-model="scope.row.status"
+              active-value="1"
+              inactive-value="0"
+              @change="switchChange(scope.row)"
+            />
+            <span style="margin-left: 8px">
+              {{ scope.row.status === '1' ? '启用' : '禁用' }}
+            </span>
+          </template>
+        </el-table-column>
+        <el-table-column label="备注" prop="remark" width="200">
+          <template #default="scope">
+            <el-input v-model="scope.row.remark" type="textarea" placeholder="请输入" />
+          </template>
+        </el-table-column>
+        <el-table-column label="最近一次操作人" prop="updaterName" width="120" />
+        <el-table-column label="最近一次操作时间" prop="updateTime" width="160">
+          <template #default="scope">
+            <span>{{ scope.row.updateTime ? parseTime(scope.row.updateTime) : '--' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="120" align="center" fixed="right">
+          <template #default="scope">
+            <div class="btnCon">
+              <el-button
+                v-if="scope.$index == settingList.length - 1"
+                @click="handleAddCommission(scope.row)"
+                text
+                size="small"
+                type="primary"
+                >新增</el-button
+              >
+
+              <el-button
+                text
+                size="small"
+                type="danger"
+                @click="handleDeleteCommission(scope.row, scope.$index)"
+                >删除</el-button
+              >
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="closeSetting">关闭</el-button>
+          <el-button type="primary" @click="submitSetting">提 交</el-button>
+        </div>
+      </template>
+    </el-dialog>
+    <el-dialog title="佣金设置错误提示" v-model="errorTip" width="500px" append-to-body>
+      <div style="margin-bottom: 10px" v-for="item in settingErrorTip">{{ item }}</div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="errorTip = false">去修改</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+<script setup name="SendInfo">
+import { cloneDeep } from 'lodash-es'
+import {
+  exportSpecies,
+  sendSpecies,
+  sendCommissionRatio,
+  saveBatchSendCommission,
+  deleteCommission,
+  changeSendStatus
+} from '@/api/product/index'
+import { ref, watch } from 'vue'
+
+const props = defineProps({
+  // 类型，是新增还是编辑,
+  activeName: {
+    type: String,
+    default: ''
+  }
+})
+const route = useRoute()
+const { proxy } = getCurrentInstance()
+const loading = ref(true)
+const settingLoading = ref(true)
+const total = ref(0) //规格表格的总条数
+const settingTotal = ref(0) //规格表格的总条数
+const dateRange = ref([])
+const showCommisionSetting = ref(false) //佣金设置弹窗开关
+const errorTip = ref(false) //佣金设置弹窗开关
+const settingList = ref([]) //佣金设置表格数据
+const currentSettingRow = ref([]) //当前选中的佣金设置行
+const settingErrorTip = ref([]) //提交佣金错误提示信息
+const data = reactive({
+  queryParams: {
+    pageNo: 1,
+    pageSize: 10,
+    productLaunchBizId: route.query.productLaunchBizId
+  },
+  settingQueryParams: {
+    pageNo: 1,
+    pageSize: 9999
+  }
+})
+
+const { queryParams, settingQueryParams } = toRefs(data)
+const { bx_currency_type, commission_scope_type, commission_cost_type, sys_no_yes, sys_status } =
+  proxy.useDict(
+    'bx_currency_type',
+    'commission_scope_type',
+    'commission_cost_type',
+    'sys_no_yes',
+    'sys_status'
+  )
+const switchChange = row => {
+  if (!row.announcementCommissionRatioBizId) {
+    return
+  }
+  try {
+    changeSendStatus({
+      announcementCommissionRatioBizId: row.announcementCommissionRatioBizId,
+      status: Number(row.status)
+    }).then(response => {
+      if (response.code === 200) {
+        proxy.$modal.msgSuccess('状态修改成功')
+      }
+    })
+  } catch (error) {
+    row.status = row.status === '1' ? '0' : '1'
+  }
+}
+const handleDeleteCommission = (row, index) => {
+  if (settingList.value.length === 1) {
+    proxy.$modal.msgError('至少保留一条佣金设置数据')
+    return
+  }
+  proxy.$modal
+    .confirm(`是否确认删除第${index + 1}行数据?`)
+    .then(function () {
+      if (row.announcementCommissionRatioBizId) {
+        deleteCommission(row.announcementCommissionRatioBizId).then(response => {
+          if (response.code === 200) {
+            settingList.value.splice(index, 1)
+          } else {
+            proxy.$modal.msgError(response.msg)
+          }
+        })
+      } else {
+        settingList.value.splice(index, 1)
+      }
+      proxy.$modal.msgSuccess('删除成功')
+    })
+    .catch(() => {})
+}
+const handleNumberInput = (row, field, type = 'positive') => {
+  const value = row[field]
+
+  if (value === null || value === undefined || value === '') return
+
+  let numValue = Number(value)
+
+  if (isNaN(numValue)) {
+    row[field] = null
+    return
+  }
+
+  if (type === 'positive') {
+    // 正整数：移除负号和小数部分
+    if (numValue <= 0) {
+      row[field] = null
+      return
+    }
+    // 取整数部分
+    row[field] = Math.floor(Math.abs(numValue))
+  } else if (type === 'non-negative') {
+    // 非负数：允许0及以上，不允许负数
+    if (numValue < 0) {
+      row[field] = 0
+    }
+  }
+}
+// 处理开始日期变化
+const handleStartDateChange = (row, index) => {
+  if (row.effectiveStart && row.effectiveEnd) {
+    const start = new Date(row.effectiveStart)
+    const end = new Date(row.effectiveEnd)
+
+    if (start > end) {
+      proxy.$modal.msgError(
+        `第${index + 1}行：生效日期(起)不能晚于生效日期(止),请重新选择生效日期(起)`
+      )
+      // 清空结束日期，让用户重新选择
+      setTimeout(() => {
+        row.effectiveStart = ''
+      }, 0)
+    }
+  }
+}
+
+// 处理结束日期变化
+const handleEndDateChange = (row, index) => {
+  console.log('时间', row)
+
+  if (row.effectiveStart && row.effectiveEnd) {
+    const start = new Date(row.effectiveStart)
+    const end = new Date(row.effectiveEnd)
+
+    if (end < start) {
+      proxy.$modal.msgError(
+        `第${index + 1}行：生效日期(止)不能早于生效日期(起),请重新选择生效日期(止)`
+      )
+      // 清空开始日期，让用户重新选择
+      setTimeout(() => {
+        row.effectiveEnd = ''
+      }, 0)
+    }
+  }
+}
+const handlePeriodBlur = (row, index, key) => {
+  if (row.startPeriod && row.endPeriod && row.startPeriod > row.endPeriod) {
+    proxy.$modal.msgError(`第${index + 1}行：佣金开始年限不能大于佣金结束年限,请重新填写`)
+    row[key] = ''
+    row.unadd = true
+  } else {
+    row.unadd = false
+  }
+  console.log('年限', row)
+}
+const handleAddCommission = row => {
+  let newRow = cloneDeep(row)
+  let obj = {}
+  // 复制当前条的数据
+  for (const key in newRow) {
+    if (key !== 'startPeriod' && key !== 'endPeriod' && key !== 'commissionRate') {
+      obj[key] = newRow[key]
+    } else {
+      obj[key] = ''
+    }
+  }
+  if (!row.unadd) {
+    settingList.value.push(obj)
+  }
+}
+const closeSetting = () => {
+  showCommisionSetting.value = false
+  settingQueryParams.value = {
+    pageNo: 1,
+    pageSize: 9999
+  }
+}
+// 批量提交佣金设置
+const submitSetting = async () => {
+  // 校验表格数据
+  const validationResult = validateTableData()
+  if (!validationResult.valid) {
+    proxy.$modal.msgError(validationResult.message)
+    return
+  }
+
+  let saveTable = cloneDeep(settingList.value)
+  saveTable.forEach(row => {
+    if (row.scope.length > 0) {
+      row.scope = row.scope.join(';')
+    }
+  })
+  console.log('saveTable', saveTable)
+
+  // return
+  try {
+    saveBatchSendCommission({
+      announcementSpeciesBizId: currentSettingRow.value.announcementSpeciesBizId,
+      ratioBatchSaveDtoList: saveTable
+    }).then(response => {
+      console.log('response', response)
+
+      if (response.code === 200) {
+        showCommisionSetting.value = false
+        proxy.$modal.msgSuccess('提交成功')
+      } else if (response.code === 1004) {
+        if (response.msg) {
+          settingErrorTip.value = response.msg.split('\n').filter(item => item !== '')
+        }
+        errorTip.value = true
+      }
+    })
+  } catch (error) {
+    console.log('错误了', error)
+  }
+}
+
+// 表格数据校验函数
+const validateTableData = () => {
+  const errors = []
+  const requiredFields = [
+    { key: 'expenseName', label: '费用名称' },
+    { key: 'startPeriod', label: '佣金年限(起)' },
+    { key: 'endPeriod', label: '佣金年限(止)' },
+    { key: 'commissionRate', label: '佣金率(%)' },
+    { key: 'discountRatio', label: '折标系数(%)' },
+    { key: 'effectiveStart', label: '生效日期(起)' },
+    { key: 'effectiveEnd', label: '生效日期(止)' },
+    { key: 'scope', label: '适用范围' },
+    { key: 'isExchangeRate', label: '是否受汇率影响' },
+    { key: 'currency', label: '结算币种' },
+    { key: 'status', label: '状态' }
+  ]
+
+  settingList.value.forEach((row, index) => {
+    requiredFields.forEach(field => {
+      const value = row[field.key]
+      let isValid = true
+
+      if (Array.isArray(value)) {
+        isValid = value.length > 0
+      } else {
+        isValid = value !== null && value !== undefined && value !== ''
+      }
+
+      if (!isValid) {
+        errors.push({
+          rowIndex: index,
+          field: field.key,
+          label: field.label,
+          rowNumber: index + 1
+        })
+      }
+    })
+  })
+
+  if (errors.length === 0) {
+    return { valid: true }
+  }
+
+  // 生成友好的错误提示信息
+  const errorMessages = errors
+    .slice(0, 3)
+    .map(error => `第${error.rowNumber}行【${error.label}】未填写`)
+
+  let message = errorMessages.join('；')
+  if (errors.length > 3) {
+    message += `等，共${errors.length}处必填项未填写`
+  }
+
+  return {
+    valid: false,
+    errors,
+    message
+  }
+}
+
+/** 获得佣金设置数据 */
+function getSettingList() {
+  settingLoading.value = true
+  let obj = {
+    expenseName: '',
+    startPeriod: '',
+    endPeriod: '',
+    commissionRate: '',
+    discountRatio: '',
+    effectiveStart: '',
+    effectiveEnd: '',
+    scope: '',
+    isExchangeRate: '',
+    currency: '',
+    status: '',
+    remark: ''
+  }
+  settingList.value = []
+  settingQueryParams.value.announcementSpeciesBizId =
+    currentSettingRow.value.announcementSpeciesBizId
+  sendCommissionRatio(settingQueryParams.value).then(response => {
+    if (response.code === 200) {
+      if (response.data.records.length > 0) {
+        settingList.value = response.data.records
+        settingList.value.forEach(row => {
+          if (row.scope) {
+            row.scope = row.scope.split(';')
+          }
+          row.status = row.status === 1 ? '1' : row.status === 0 ? '0' : ''
+        })
+      } else {
+        settingList.value.push(obj)
+      }
+      settingTotal.value = response.data.total
+      settingLoading.value = false
+      showCommisionSetting.value = true
+    } else {
+      settingLoading.value = false
+      proxy.$modal.msgError(response.msg)
+    }
+  })
+}
+// 原始数据
+const originalData = ref([])
+
+// 表格列配置
+const tableColumns = ref([])
+
+// 表格数据
+const tableData = ref([])
+
+// 合并行配置，存储每列需要合并的行数
+const spanConfig = ref({})
+
+// 从数据中提取所有可能的列
+const extractColumnsFromData = data => {
+  const columnSet = new Map()
+
+  data.forEach(item => {
+    try {
+      if (item.apiSpeciesSettingDtoList && item.apiSpeciesSettingDtoList.length > 0) {
+        item.apiSpeciesSettingDtoList.forEach(species => {
+          if (!columnSet.has(species.typeCode)) {
+            columnSet.set(species.typeCode, {
+              prop: species.typeCode,
+              label: species.typeName,
+              width: species.typeName.length * 15 + 30,
+              align: 'center',
+              sortable: false
+            })
+          }
+        })
+      }
+    } catch (e) {
+      console.log('计算列失败', e)
+    }
+  })
+
+  // 将 Map 转换为数组并按 typeCode 排序（可选）
+  return Array.from(columnSet.values())
+}
+
+// 处理数据，生成表格需要的格式
+const processTableData = () => {
+  if (!originalData.value || originalData.value.length === 0) {
+    tableData.value = []
+    spanConfig.value = {}
+    return
+  }
+  console.log('originalData.value', originalData.value)
+
+  // 1. 提取所有列
+  const columns = extractColumnsFromData(originalData.value)
+  tableColumns.value = columns
+
+  // 2. 转换数据格式
+  const processedData = []
+
+  originalData.value.forEach((item, index) => {
+    const rowData = {
+      rowKey: `${item.id}_${index}`, // 生成唯一 rowKey
+      id: item.id, // 保留原始ID
+      rawData: item // 保留原始数据
+    }
+
+    // 填充所有列的值
+    columns.forEach(column => {
+      try {
+        if (item.apiSpeciesSettingDtoList && item.apiSpeciesSettingDtoList.length > 0) {
+          const matchedSpecies = item.apiSpeciesSettingDtoList.find(s => s.typeCode === column.prop)
+          rowData[column.prop] = matchedSpecies ? matchedSpecies.value : ''
+        } else {
+          rowData[column.prop] = ''
+        }
+      } catch (e) {
+        console.log('填充所有列的值失败', e)
+      }
+    })
+
+    processedData.push(rowData)
+  })
+
+  // 3. 计算合并配置
+  calculateSpanConfig(processedData, columns)
+
+  tableData.value = processedData
+}
+
+// 计算合并配置
+const calculateSpanConfig = (data, columns) => {
+  const config = {}
+
+  // 为每一列计算合并配置
+  columns.forEach((column, columnIndex) => {
+    config[column.prop] = []
+
+    let pos = 0
+    while (pos < data.length) {
+      const currentValue = data[pos][column.prop]
+      let rowspan = 1
+
+      // 向后查找相同值的行
+      for (let i = pos + 1; i < data.length; i++) {
+        // 只有当该列之前的所有列的值都相同时才合并
+        let shouldMerge = true
+        for (let j = 0; j < columnIndex; j++) {
+          const prevColumn = columns[j]
+          if (data[pos][prevColumn.prop] !== data[i][prevColumn.prop]) {
+            shouldMerge = false
+            break
+          }
+        }
+
+        if (shouldMerge && data[i][column.prop] === currentValue) {
+          rowspan++
+        } else {
+          break
+        }
+      }
+
+      // 记录合并配置
+      config[column.prop][pos] = rowspan
+
+      // 跳过已经计算的行
+      pos += rowspan
+    }
+
+    // 填充剩余的配置为0（不合并）
+    for (let i = 0; i < data.length; i++) {
+      if (!config[column.prop][i]) {
+        config[column.prop][i] = 0
+      }
+    }
+  })
+
+  spanConfig.value = config
+}
+
+// 合并单元格的方法
+const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
+  // 最后一列是操作列，不合并
+  if (columnIndex === tableColumns.value.length) {
+    return {
+      rowspan: 1,
+      colspan: 1
+    }
+  }
+
+  const columnProp = tableColumns.value[columnIndex].prop
+  const rowspan = spanConfig.value[columnProp]?.[rowIndex] || 0
+
+  if (rowspan > 0) {
+    return {
+      rowspan: rowspan,
+      colspan: 1
+    }
+  } else {
+    return {
+      rowspan: 0,
+      colspan: 0
+    }
+  }
+}
+
+// 佣金设置操作
+const handleCommissionSetting = row => {
+  currentSettingRow.value = row.rawData
+  console.log('佣金设置', currentSettingRow.value)
+  getSettingList()
+}
+
+/** 获得规格数据 */
+function getSpeciesList() {
+  loading.value = true
+  sendSpecies(queryParams.value).then(response => {
+    if (response.code === 200) {
+      originalData.value = response.data.records
+      total.value = response.data.total
+      loading.value = false
+      if (originalData.value.length == 0) {
+        proxy.$modal.msgError('该商品暂无规格数据，请先更新规格数据')
+      } else {
+        let codeArr = []
+        // 自定义没有typeCode影响表格得展示
+        originalData.value[0].apiSpeciesSettingDtoList.forEach((item, index) => {
+          if (item.isCustomize == '1') {
+            item.typeCode = `custom${Date.now() + Math.floor(Math.random() * 1000)}`
+            codeArr.push({ index: index, code: item.typeCode })
+          }
+        })
+        originalData.value.forEach((item, oIndex) => {
+          item.apiSpeciesSettingDtoList.forEach((species, sIndex) => {
+            if (codeArr.length > 0) {
+              codeArr.forEach(codeItem => {
+                if (codeItem.index == sIndex) {
+                  species.typeCode = codeItem.code
+                }
+              })
+            }
+          })
+        })
+      }
+      // 计算表格
+      processTableData()
+    } else {
+      proxy.$modal.msgError(response.msg)
+    }
+  })
+}
+/** 更新规格数据 */
+function updateSpecies() {
+  loading.value = true
+  exportSpecies({ productLaunchBizId: route.query.productLaunchBizId }).then(response => {
+    if (response.code === 200) {
+      proxy.$modal.msgSuccess('发佣管理-规格更新成功')
+      getSpeciesList()
+    } else {
+      proxy.$modal.msgError(response.msg)
+    }
+  })
+}
+
+//========多选下拉框悬停效果结束=========
+
+watch(
+  () => props.activeName,
+  newVal => {
+    if (newVal == 'sendCommission') {
+      getSpeciesList()
+    }
+  }
+)
+</script>
+<style lang="scss" scoped>
+.required-label::before {
+  content: '*';
+  color: #f56c6c;
+  margin-right: 4px;
+}
+.btnCon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+/* 错误行样式 */
+.error-row {
+  background-color: #fff2f0 !important;
+  animation: highlight 0.6s ease-in-out;
+}
+
+/* 错误字段高亮 */
+.error-field :deep(.el-input__wrapper) {
+  border-color: #f56c6c !important;
+  box-shadow: 0 0 0 1px #f56c6c !important;
+}
+
+.error-field :deep(.el-input__inner) {
+  color: #f56c6c;
+}
+
+.error-field :deep(.el-select__wrapper) {
+  border-color: #f56c6c !important;
+  box-shadow: 0 0 0 1px #f56c6c !important;
+}
+
+/* 闪烁动画吸引用户注意力 */
+@keyframes highlight {
+  0%,
+  50% {
+    background-color: #fff2f0;
+  }
+  25%,
+  75% {
+    background-color: #ffeaea;
+  }
+  100% {
+    background-color: #fff2f0;
+  }
+}
+
+/* 错误提示消息样式 */
+.validation-message-box {
+  :deep(.el-message-box__content) {
+    max-height: 400px;
+    overflow-y: auto;
+  }
+}
+</style>

src/views/merchandise/productsList.vue

+<template>
+  <div class="app-container">
+    <el-tabs v-model="activeName" class="demo-tabs" :before-leave="beforeTabLeave">
+      <el-tab-pane v-for="tab in tabsList" :key="tab.name" :label="tab.label" :name="tab.name">
+        <el-row>
+          <el-form :model="queryParams" :inline="true">
+            <el-form-item label="标题" prop="title">
+              <el-input
+                v-model="queryParams.title"
+                placeholder="请输入标题"
+                clearable
+                style="width: 240px"
+              />
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+            </el-form-item>
+          </el-form>
+
+          <!-- 表格数据 -->
+          <el-table v-loading="loading" :data="tableList">
+            <el-table-column label="商品图片" align="center" prop="mainUrls" width="150">
+              <template #default="scope">
+                <el-image
+                  v-if="scope.row.mainUrls"
+                  :src="scope.row.mainUrls"
+                  class="logo-image"
+                  fit="cover"
+                >
+                  <template #error>
+                    <div class="image-slot">
+                      <el-icon><Picture /></el-icon>
+                    </div>
+                  </template>
+                </el-image>
+                <span v-else>无</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="标题" prop="title" :show-overflow-tooltip="true" />
+            <el-table-column
+              label="短标题"
+              prop="shortTitle"
+              :show-overflow-tooltip="true"
+              width="150"
+            />
+
+            <el-table-column label="状态" prop="status" align="left">
+              <template #default="scope">
+                <dict-tag :options="product_launch_status" :value="scope.row.status" />
+              </template>
+            </el-table-column>
+
+            <el-table-column
+              label="操作"
+              align="center"
+              class-name="small-padding fixed-width"
+              width="200"
+              fixed="right"
+            >
+              <template #default="scope">
+                <div class="btnCon">
+                  <el-button text size="small" type="primary" @click="handleEdit(scope.row)"
+                    >编辑</el-button
+                  >
+
+                  <!-- <el-button text size="small" type="danger">删除</el-button> -->
+                  <el-dropdown placement="left" style="margin-left: 10px">
+                    <el-button type="primary" link size="small">
+                      更多 <el-icon><ArrowDown /></el-icon
+                    ></el-button>
+                    <template #dropdown>
+                      <el-dropdown-menu>
+                        <el-dropdown-item
+                          v-if="scope.row.status == 'DSH' || scope.row.status == 'SB'"
+                          @click="changeStatus(scope.row, 'SH')"
+                          >审核</el-dropdown-item
+                        >
+                        <el-dropdown-item
+                          v-if="scope.row.status == 'XJ'"
+                          @click="changeStatus(scope.row, 'SJ')"
+                          >上架</el-dropdown-item
+                        >
+                        <el-dropdown-item
+                          v-if="scope.row.status == 'ZS' || scope.row.status == 'YS'"
+                          @click="changeStatus(scope.row, 'XJ')"
+                          >下架</el-dropdown-item
+                        >
+                        <el-dropdown-item @click="handleEdit(scope.row, 'copy')"
+                          >复制</el-dropdown-item
+                        >
+                      </el-dropdown-menu>
+                    </template>
+                  </el-dropdown>
+                </div>
+              </template>
+            </el-table-column>
+          </el-table>
+          <el-col style="display: flex; justify-content: flex-end">
+            <pagination
+              v-show="total >= 0"
+              :total="total"
+              v-model:page="queryParams.pageNo"
+              v-model:limit="queryParams.pageSize"
+              @pagination="getTableList"
+            />
+          </el-col>
+        </el-row>
+      </el-tab-pane>
+    </el-tabs>
+    <el-dialog title="审核" v-model="showReview" width="500px" append-to-body>
+      <el-form :model="reviewForm" label-width="68px">
+        <el-form-item label="审核状态" prop="approvalStatus">
+          <el-radio-group v-model="reviewForm.approvalStatus">
+            <el-radio value="TG" size="large">通过</el-radio>
+            <el-radio value="WTG" size="large">不通过</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item v-if="reviewForm.approvalStatus == 'WTG'" label="备注">
+          <el-input
+            v-model="reviewForm.approvalRemark"
+            placeholder="请输入备注"
+            clearable
+            type="textarea"
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="confirmReview">提交审核</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+<script setup name="InsuranceProduct">
+import { goodsList, changeProductStatus, productApproval } from '@/api/product/index'
+import { ref, watch } from 'vue'
+const router = useRouter()
+const route = useRoute()
+const { proxy } = getCurrentInstance()
+const { product_launch_status } = proxy.useDict('product_launch_status')
+const activeName = ref('all')
+const total = ref(0)
+const loading = ref(false)
+const tableList = ref([])
+const showReview = ref(false)
+const currentRow = ref({})
+const data = reactive({
+  queryParams: {},
+  allQueryParams: {
+    pageNo: 1,
+    pageSize: 10,
+    selectType: null
+  },
+  saleQueryParams: {
+    pageNo: 1,
+    pageSize: 10,
+    selectType: 1
+  },
+  delistQueryParams: {
+    pageNo: 1,
+    pageSize: 10,
+    selectType: 2
+  },
+  reviewForm: {},
+  rules: {
+    approvalStatus: [{ required: true, message: '审核状态不能为空', trigger: 'blur' }]
+  }
+})
+
+const { queryParams, allQueryParams, saleQueryParams, delistQueryParams, reviewForm } = toRefs(data)
+const tabsList = ref([
+  {
+    label: '全部',
+    name: 'all',
+    key: 'all',
+    id: 1
+  },
+  {
+    label: '销售中',
+    name: 'sale',
+    id: 2,
+    key: 'sale'
+  },
+  {
+    label: '已下架',
+    name: 'delist',
+    id: 3,
+    key: 'delist'
+  }
+])
+// Tab切换前的验证
+const beforeTabLeave = (activeTabName, oldTabName) => {
+  return true
+}
+const handleEdit = (row, type) => {
+  let obj = {
+    productBizId: row.productBizId,
+    productLaunchBizId: row.productLaunchBizId
+  }
+  if (type && type == 'copy') {
+    obj.source = 'copy'
+  }
+  router.push({
+    path: '/merchandise/putOnSale',
+    query: {
+      ...obj
+    }
+  })
+}
+// 提交审核
+const confirmReview = () => {
+  if (!reviewForm.value.approvalStatus) {
+    proxy.$modal.msgError('请选择审核状态')
+    return
+  }
+  productApproval({
+    productLaunchBizId: currentRow.value.productLaunchBizId,
+    ...reviewForm.value
+  }).then(response => {
+    if (response.code === 200) {
+      proxy.$modal.msgSuccess(`已提交审核`)
+      getTableList()
+      showReview.value = false
+      reviewForm.value = {}
+    } else {
+      proxy.$modal.msgError(response.msg)
+    }
+  })
+}
+// 上下架
+const changeStatus = (row, type) => {
+  console.log('type', type)
+
+  currentRow.value = { ...row }
+  if (type == 'SH') {
+    showReview.value = true
+  } else if (type == 'SJ' || type == 'XJ') {
+    proxy.$modal
+      .confirm(`是否确认${type == 'SJ' ? '上架' : '下架'}${row.title}?`)
+      .then(function () {
+        changeProductStatus({
+          productLaunchBizId: row.productLaunchBizId,
+          status: type
+        }).then(response => {
+          if (response.code === 200) {
+            proxy.$modal.msgSuccess(`${type == 'SJ' ? '上架' : '下架'}成功`)
+            getTableList()
+          } else {
+            proxy.$modal.msgError(response.msg)
+          }
+        })
+      })
+      .catch(() => {})
+  }
+}
+const handleQuery = () => {
+  let obj = {
+    pageNo: 1,
+    pageSize: 10
+  }
+  allQueryParams.value = { ...allQueryParams.value, ...obj }
+  saleQueryParams.value = { ...saleQueryParams.value, ...obj }
+  delistQueryParams.value = { ...delistQueryParams.value, ...obj }
+  if (activeName.value == 'all') {
+    queryParams.value = allQueryParams.value
+  } else if (activeName.value == 'sale') {
+    queryParams.value = saleQueryParams.value
+  } else if (activeName.value == 'delist') {
+    queryParams.value = delistQueryParams.value
+  }
+  getTableList()
+}
+const resetQuery = () => {
+  let obj = {
+    pageNo: 1,
+    pageSize: 10,
+    title: null
+  }
+  allQueryParams.value = { ...allQueryParams.value, ...obj }
+  saleQueryParams.value = { ...saleQueryParams.value, ...obj }
+  delistQueryParams.value = { ...delistQueryParams.value, ...obj }
+  if (activeName.value == 'all') {
+    queryParams.value = allQueryParams.value
+  } else if (activeName.value == 'sale') {
+    queryParams.value = saleQueryParams.value
+  } else if (activeName.value == 'delist') {
+    queryParams.value = delistQueryParams.value
+  }
+  getTableList()
+}
+const getTableList = () => {
+  loading.value = true
+  goodsList(queryParams.value).then(response => {
+    if (response.code === 200) {
+      tableList.value = response.data.records
+      total.value = response.data.total
+      loading.value = false
+      tableList.value.forEach(item => {
+        if (item.mainUrls) {
+          item.mainUrls = item.mainUrls.split(';')[0]
+        }
+      })
+    } else {
+      proxy.$modal.msgError(response.msg)
+    }
+  })
+}
+watch(
+  () => activeName.value,
+  newVal => {
+    if (newVal == 'all') {
+      queryParams.value = allQueryParams.value
+    } else if (newVal == 'sale') {
+      queryParams.value = saleQueryParams.value
+    } else if (newVal == 'delist') {
+      queryParams.value = delistQueryParams.value
+    }
+    getTableList()
+  }
+)
+queryParams.value = allQueryParams.value
+getTableList()
+</script>
+<style lang="scss" scoped>
+.app-container {
+  width: 100%;
+  box-sizing: border-box;
+}
+.logo-image {
+  width: 70px;
+  height: 70px;
+  border-radius: 4px;
+  object-fit: cover;
+}
+.btnCon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>

src/views/merchandise/putOnSale.vue

+<template>
+  <div class="app-container">
+    <el-tabs v-model="activeName" class="demo-tabs" :before-leave="beforeTabLeave">
+      <el-tab-pane v-for="tab in tabsList" :key="tab.name" :label="tab.label" :name="tab.name">
+        <ProductBaseInfo
+          :activeName="activeName"
+          v-if="tab.name === 'baseInfo'"
+          :detailInfo="productBaseInfo"
+          @handleSuccess="handleSuccess"
+        />
+        <div v-if="tab.name === 'comeCommission'">
+          <ComeInfo :activeName="activeName"></ComeInfo>
+        </div>
+        <div v-if="tab.name === 'sendCommission'">
+          <SendInfo :activeName="activeName"></SendInfo>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+<script setup name="InsuranceProduct">
+import { getProductDetail } from '@/api/product/index'
+import { ref } from 'vue'
+import ProductBaseInfo from './components/productBaseInfo.vue'
+import SendInfo from './components/sendInfo.vue'
+import ComeInfo from './components/comeInfo.vue'
+
+const route = useRoute()
+const { proxy } = getCurrentInstance()
+
+const activeName = ref('baseInfo')
+const productBaseInfo = ref({}) //产品基本信息
+
+const tabsList = ref([
+  {
+    label: '基础信息',
+    name: 'baseInfo',
+    key: 'baseInfo',
+    id: 1
+  },
+  {
+    label: '来佣管理',
+    name: 'comeCommission',
+    id: 2,
+    key: 'comeCommission'
+  },
+  {
+    label: '发佣管理',
+    name: 'sendCommission',
+    id: 3,
+    key: 'sendCommission'
+  }
+])
+const handleSuccess = (source, id) => {
+  if (source === 'baseInfo') {
+    getProductInfo('comeCommission', id)
+  }
+}
+// Tab切换前的验证
+const beforeTabLeave = (activeTabName, oldTabName) => {
+  if (activeTabName !== 'baseInfo' && productBaseInfo.value.apiSpeciesPriceDtoList.length == 0) {
+    proxy.$modal.msgError('请先提交产品相关信息，再进行下一步操作！')
+    return false
+  }
+  return true
+}
+/** 获取产品详情 */
+function getProductInfo(tabName, id) {
+  let productLaunchBizId = ''
+  if (route.query.source && route.query.source == 'copy') {
+    productLaunchBizId = id
+  } else {
+    productLaunchBizId = route.query.productLaunchBizId
+  }
+  getProductDetail(productLaunchBizId).then(response => {
+    if (response.code === 200) {
+      productBaseInfo.value = response.data
+      activeName.value = tabName
+    } else {
+      proxy.$modal.msgError(response.msg)
+    }
+  })
+}
+if (route.query.source && route.query.source == 'copy') {
+  getProductInfo('baseInfo', route.query.productLaunchBizId)
+} else {
+  getProductInfo('baseInfo')
+}
+</script>
+<style lang="scss" scoped>
+.app-container {
+  width: 100%;
+  height: 89.8vh !important;
+  box-sizing: border-box;
+  /* background-color: rgb(247 247 247) !important; */
+  /* padding: 0 !important; */
+  /* height: 500px !important;
+  overflow: hidden;
+  overflow-y: scroll; */
+}
+</style>

src/views/system/lazyPdf/index.vue

+<template>
+  <div class="pdf-viewer-container">
+    <!-- 控制面板 -->
+    <div class="control-panel">
+      <button @click="loadPDF" :disabled="loading">加载PDF</button>
+      <button @click="downloadAndFixPDF" :disabled="loading">下载并修复PDF</button>
+      <button @click="testSmallChunk" :disabled="loading">测试小文件下载</button>
+      <button @click="resetViewer" :disabled="loading">重置</button>
+
+      <span class="page-info" v-if="totalPages > 0">第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</span>
+    </div>
+
+    <!-- 加载状态 -->
+    <div v-if="loading" class="loading-container">
+      <div class="progress-info">
+        <div v-if="downloadProgress < 100">
+          下载进度: {{ downloadProgress }}%
+          <div class="progress-bar">
+            <div class="progress-fill" :style="{ width: downloadProgress + '%' }"></div>
+          </div>
+          <div>已下载: {{ loadedProgressText }}</div>
+        </div>
+        <div v-else>
+          PDF处理中...
+        </div>
+      </div>
+    </div>
+
+    <!-- 错误信息 -->
+    <div v-if="error" class="error-message">
+      {{ error }}
+    </div>
+
+    <!-- PDF 渲染区域 -->
+    <div ref="pdfContainer" class="pdf-container" :class="{ hidden: loading }">
+      <iframe
+          v-if="pdfUrl"
+          :src="pdfUrl"
+          width="100%"
+          height="600px"
+          style="border: none;"
+          @load="onIframeLoad"
+          @error="onIframeError"
+      ></iframe>
+
+      <div v-else-if="!loading" class="no-pdf-message">
+        暂无PDF显示
+      </div>
+    </div>
+
+    <!-- 调试信息 -->
+    <div v-if="debugInfo" class="debug-info">
+      {{ debugInfo }}
+    </div>
+
+    <!-- 下载链接 -->
+    <div v-if="pdfUrl" style="margin-top: 10px;">
+      <a :href="pdfUrl" download="document.pdf" style="color: green; font-weight: bold;">
+        ↓ 下载PDF文件
+      </a>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios';
+
+export default {
+  name: 'PDFViewer',
+  data() {
+    return {
+      fileKey: 'pdf/2025/10/11/company-intro.pdf',
+      currentPage: 1,
+      totalPages: 0,
+      loading: false,
+      error: '',
+      debugInfo: '',
+      totalSize: 0,
+      loadedSize: 0,
+      pdfUrl: '',
+      downloadProgress: 0,
+      // 配置项
+      chunkSize: 2 * 1024 * 1024, // 2MB 每块
+      maxConcurrentDownloads: 3, // 最大并发下载数
+    };
+  },
+  computed: {
+    loadedProgressText() {
+      if (this.totalSize === 0) return '';
+      const loadedMB = (this.loadedSize / 1024 / 1024).toFixed(1);
+      const totalMB = (this.totalSize / 1024 / 1024).toFixed(1);
+      return `${loadedMB}MB / ${totalMB}MB`;
+    }
+  },
+  methods: {
+    async loadPDF() {
+      await this.downloadAndRenderPDF();
+    },
+
+    async downloadAndFixPDF() {
+      await this.downloadAndRenderPDF(true);
+    },
+
+    async downloadAndRenderPDF(attemptFix = false) {
+      this.loading = true;
+      this.error = '';
+      this.downloadProgress = 0;
+      this.pdfUrl = '';
+
+      try {
+        this.debugInfo = '开始加载PDF...';
+
+        // 获取文件大小
+        const fileSize = await this.getFileSize();
+        this.totalSize = fileSize;
+        this.debugInfo = `文件大小: ${(fileSize / 1024 / 1024).toFixed(1)}MB`;
+
+        // 分块下载完整文件
+        const fullPdfData = await this.downloadFileByChunks(fileSize);
+
+        // 检查并修复PDF
+        let processedData = fullPdfData;
+        if (attemptFix) {
+          processedData = await this.attemptFixPDF(fullPdfData);
+        }
+
+        // 使用 iframe 渲染
+        await this.renderWithIframe(processedData);
+
+        this.debugInfo = `PDF 加载完成，大小: ${(processedData.byteLength / 1024 / 1024).toFixed(1)}MB`;
+
+      } catch (error) {
+        this.error = `PDF 加载失败: ${error.message}`;
+        console.error('PDF 加载失败:', error);
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    // 尝试修复PDF文件
+    async attemptFixPDF(pdfData) {
+      this.debugInfo = '尝试修复PDF文件...';
+
+      const dataView = new DataView(pdfData);
+      const dataArray = new Uint8Array(pdfData);
+
+      // 检查文件头
+      const header = String.fromCharCode(...dataArray.slice(0, 8));
+      console.log('PDF文件头:', header);
+
+      if (header.substring(0, 4) !== '%PDF') {
+        throw new Error('无效的PDF文件头');
+      }
+
+      // 查找文件尾的xref表和trailer
+      const trailerInfo = this.findTrailerAndXref(dataArray);
+      console.log('Trailer信息:', trailerInfo);
+
+      if (!trailerInfo.foundTrailer) {
+        console.warn('未找到完整的trailer，尝试手动添加EOF');
+        // 手动添加EOF标记
+        return this.addManualEOF(dataArray);
+      }
+
+      return pdfData;
+    },
+
+    // 查找trailer和xref表
+    findTrailerAndXref(dataArray) {
+      const decoder = new TextDecoder('ascii');
+      const dataString = decoder.decode(dataArray);
+
+      // 从文件末尾开始查找
+      const chunkSize = 1024;
+      let foundTrailer = false;
+      let foundStartXref = false;
+      let xrefOffset = -1;
+
+      // 检查最后几个chunk
+      for (let i = 0; i < 5; i++) {
+        const start = Math.max(0, dataArray.length - chunkSize * (i + 1));
+        const end = dataArray.length - chunkSize * i;
+        const chunk = dataArray.slice(start, end);
+        const chunkString = decoder.decode(chunk);
+
+        if (chunkString.includes('trailer')) {
+          foundTrailer = true;
+        }
+
+        if (chunkString.includes('startxref')) {
+          foundStartXref = true;
+          // 提取xref偏移量
+          const startxrefMatch = chunkString.match(/startxref\s+(\d+)/);
+          if (startxrefMatch) {
+            xrefOffset = parseInt(startxrefMatch[1]);
+          }
+        }
+
+        if (chunkString.includes('%%EOF')) {
+          console.log('找到EOF标记');
+        }
+      }
+
+      return {
+        foundTrailer,
+        foundStartXref,
+        xrefOffset
+      };
+    },
+
+    // 手动添加EOF标记
+    addManualEOF(dataArray) {
+      this.debugInfo = '手动添加PDF结束标记...';
+
+      // 创建新的ArrayBuffer，额外空间用于添加EOF
+      const newBuffer = new ArrayBuffer(dataArray.length + 50);
+      const newArray = new Uint8Array(newBuffer);
+
+      // 复制原始数据
+      newArray.set(dataArray, 0);
+
+      // 添加基本的PDF结束结构
+      const eofString = '\n\n%%EOF\n';
+      const encoder = new TextEncoder();
+      const eofBytes = encoder.encode(eofString);
+
+      newArray.set(eofBytes, dataArray.length);
+
+      console.log('已添加手动EOF标记');
+      return newArray.buffer;
+    },
+
+    // 测试小文件下载
+    async testSmallChunk() {
+      this.loading = true;
+      this.error = '';
+
+      try {
+        this.debugInfo = '测试小文件下载...';
+
+        // 只下载前5MB
+        const testSize = 5 * 1024 * 1024;
+        const testData = await this.downloadChunk(0, testSize - 1);
+
+        // 检查下载的数据
+        await this.analyzePDFChunk(testData);
+
+        this.debugInfo = '小文件测试完成';
+
+      } catch (error) {
+        this.error = `测试失败: ${error.message}`;
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    // 分析PDF数据块
+    async analyzePDFChunk(pdfData) {
+      const dataArray = new Uint8Array(pdfData);
+      const decoder = new TextDecoder('ascii');
+
+      // 检查文件头
+      const header = String.fromCharCode(...dataArray.slice(0, 8));
+      console.log('测试文件头:', header);
+
+      // 检查文件内容
+      const sampleSize = Math.min(1000, dataArray.length);
+      const sampleStart = decoder.decode(dataArray.slice(0, sampleSize));
+      const sampleEnd = decoder.decode(dataArray.slice(-sampleSize));
+
+      console.log('文件开始样本:', sampleStart.substring(0, 200));
+      console.log('文件结束样本:', sampleEnd.substring(Math.max(0, sampleEnd.length - 200)));
+
+      // 检查关键标记
+      const hasObj = sampleStart.includes('obj');
+      const hasEndObj = sampleStart.includes('endobj');
+      const hasXref = sampleEnd.includes('xref');
+      const hasTrailer = sampleEnd.includes('trailer');
+      const hasEOF = sampleEnd.includes('%%EOF');
+
+      console.log('PDF结构检查:', {
+        hasObj,
+        hasEndObj,
+        hasXref,
+        hasTrailer,
+        hasEOF
+      });
+
+      this.debugInfo = `PDF结构: 对象${hasObj ? '✓' : '✗'} XREF${hasXref ? '✓' : '✗'} Trailer${hasTrailer ? '✓' : '✗'} EOF${hasEOF ? '✓' : '✗'}`;
+    },
+
+    // 分块下载文件
+    async downloadFileByChunks(totalSize) {
+      const chunks = [];
+      const chunkCount = Math.ceil(totalSize / this.chunkSize);
+
+      console.log(`开始分块下载，总大小: ${(totalSize / 1024 / 1024).toFixed(1)}MB, 块数: ${chunkCount}`);
+
+      // 创建所有下载任务
+      const chunkPromises = [];
+      for (let i = 0; i < chunkCount; i++) {
+        const start = i * this.chunkSize;
+        const end = Math.min(start + this.chunkSize - 1, totalSize - 1);
+
+        chunkPromises.push(() => this.downloadChunkWithProgress(start, end, i, chunkCount));
+      }
+
+      // 并发下载（限制并发数）
+      for (let i = 0; i < chunkPromises.length; i += this.maxConcurrentDownloads) {
+        const batch = chunkPromises.slice(i, i + this.maxConcurrentDownloads);
+        const batchResults = await Promise.all(batch.map(fn => fn()));
+        chunks.push(...batchResults);
+
+        console.log(`已完成 ${Math.min(i + this.maxConcurrentDownloads, chunkCount)}/${chunkCount} 块下载`);
+      }
+
+      // 合并所有块
+      return this.mergeChunks(chunks);
+    },
+
+    // 下载单个块（带进度）
+    async downloadChunkWithProgress(start, end, chunkIndex, totalChunks) {
+      try {
+        const response = await axios.get('http://10.0.10.215:9106/oss/api/api/file/chunk', {
+          params: {
+            fileKey: this.fileKey,
+            start: start,
+            end: end
+          },
+          responseType: 'arraybuffer',
+          onDownloadProgress: (progressEvent) => {
+            // 计算整体下载进度
+            const chunkProgress = progressEvent.loaded ? (progressEvent.loaded / (end - start + 1)) * 100 : 0;
+            const overallProgress = (chunkIndex / totalChunks) * 100 + (chunkProgress / totalChunks);
+            this.downloadProgress = Math.min(100, Math.round(overallProgress));
+          }
+        });
+
+        this.loadedSize = Math.max(this.loadedSize, end + 1);
+        return response.data;
+      } catch (error) {
+        console.error(`下载块 ${start}-${end} 失败:`, error);
+        throw error;
+      }
+    },
+
+    // 下载单个块（无进度）
+    async downloadChunk(start, end) {
+      try {
+        const response = await axios.get('http://10.0.10.215:9106/oss/api/api/file/chunk', {
+          params: {
+            fileKey: this.fileKey,
+            start: start,
+            end: end
+          },
+          responseType: 'arraybuffer'
+        });
+
+        return response.data;
+      } catch (error) {
+        console.error(`下载块 ${start}-${end} 失败:`, error);
+        throw error;
+      }
+    },
+
+    // 合并所有块
+    mergeChunks(chunks) {
+      const totalLength = chunks.reduce((total, chunk) => total + chunk.byteLength, 0);
+      const result = new Uint8Array(totalLength);
+      let offset = 0;
+
+      chunks.forEach(chunk => {
+        const chunkArray = new Uint8Array(chunk);
+        result.set(chunkArray, offset);
+        offset += chunkArray.length;
+      });
+
+      console.log('合并完成，总大小:', totalLength);
+      return result;
+    },
+
+    // 使用 iframe 渲染
+    async renderWithIframe(pdfData) {
+      try {
+        this.debugInfo = '使用 iframe 渲染 PDF...';
+
+        // 创建 Blob 并生成 URL
+        const blob = new Blob([pdfData], { type: 'application/pdf' });
+        this.pdfUrl = URL.createObjectURL(blob);
+
+        this.debugInfo = 'iframe PDF 渲染完成';
+        this.currentPage = 1;
+        this.totalPages = 1; // iframe 模式下我们不知道总页数
+
+      } catch (error) {
+        console.error('iframe 渲染失败:', error);
+        throw error;
+      }
+    },
+
+    // iframe 加载成功
+    onIframeLoad() {
+      console.log('iframe PDF 加载成功');
+      this.debugInfo += ' | iframe 加载成功';
+    },
+
+    // iframe 加载失败
+    onIframeError() {
+      console.error('iframe PDF 加载失败');
+      this.error = 'iframe 无法加载 PDF 文档';
+    },
+
+    // 获取文件大小
+    async getFileSize() {
+      try {
+        const response = await axios.get('http://10.0.10.215:9106/oss/api/api/file/chunk', {
+          params: {
+            fileKey: this.fileKey,
+            start: 0,
+            end: 1024
+          },
+          responseType: 'arraybuffer'
+        });
+
+        // 尝试从响应头获取文件大小
+        const contentRange = response.headers['content-range'];
+        if (contentRange) {
+          const match = contentRange.match(/\/(\d+)$/);
+          if (match) {
+            return parseInt(match[1]);
+          }
+        }
+
+        // 使用默认值
+        return 85 * 1024 * 1024;
+      } catch (error) {
+        console.error('获取文件大小失败，使用默认值');
+        return 85 * 1024 * 1024;
+      }
+    },
+
+    // 重置查看器
+    resetViewer() {
+      if (this.pdfUrl) {
+        URL.revokeObjectURL(this.pdfUrl);
+      }
+      this.currentPage = 1;
+      this.totalPages = 0;
+      this.error = '';
+      this.debugInfo = '';
+      this.loadedSize = 0;
+      this.totalSize = 0;
+      this.pdfUrl = '';
+      this.downloadProgress = 0;
+    }
+  },
+
+  beforeUnmount() {
+    this.resetViewer();
+  }
+};
+</script>
+
+<style scoped>
+.pdf-viewer-container {
+  font-family: Arial, sans-serif;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.control-panel {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 20px;
+  padding: 15px;
+  background: #f5f5f5;
+  border-radius: 8px;
+  flex-wrap: wrap;
+}
+
+.control-panel button {
+  padding: 8px 16px;
+  border: 1px solid #ddd;
+  background: white;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.control-panel button:hover:not(:disabled) {
+  background: #e9e9e9;
+}
+
+.control-panel button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.page-info {
+  margin-left: auto;
+  font-weight: bold;
+  color: #333;
+}
+
+.loading-container {
+  text-align: center;
+  padding: 40px;
+}
+
+.progress-info {
+  max-width: 400px;
+  margin: 0 auto;
+}
+
+.progress-bar {
+  width: 100%;
+  height: 20px;
+  background: #e0e0e0;
+  border-radius: 10px;
+  margin-top: 10px;
+  overflow: hidden;
+}
+
+.progress-fill {
+  height: 100%;
+  background: #4CAF50;
+  transition: width 0.3s ease;
+}
+
+.error-message {
+  background: #ffebee;
+  color: #c62828;
+  padding: 15px;
+  border-radius: 4px;
+  margin: 20px 0;
+  border-left: 4px solid #c62828;
+}
+
+.pdf-container {
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  padding: 20px;
+  background: white;
+  min-height: 600px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.pdf-container.hidden {
+  display: none;
+}
+
+.no-pdf-message {
+  color: #666;
+  font-style: italic;
+  text-align: center;
+  margin-top: 50px;
+}
+
+.debug-info {
+  margin-top: 20px;
+  padding: 10px;
+  background: #e3f2fd;
+  border-radius: 4px;
+  font-size: 12px;
+  color: #1565c0;
+}
+</style>
\ No newline at end of file

src/views/system/menu/index.vue

@@ -76,8 +76,8 @@
                <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
                <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
                           v-if="(userStore.isSuperAdmin === 0 && scope.row.scope !== 1) || userStore.isSuperAdmin === 1">修改</el-button>
                           v-if="(userStore.isSuperAdmin === 0 && scope.row.scope !== 1) || userStore.isSuperAdmin === 1">修改</el-button>
 <!--               <el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)" v-hasPermi="['system:menu:add']">新增</el-button>-->
 <!--               <el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)" v-hasPermi="['system:menu:add']">新增</el-button>-->
-               <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
-                          v-if="(userStore.isSuperAdmin === 0 && scope.row.scope !== 1) || userStore.isSuperAdmin === 1">删除</el-button>
+               <!-- <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
+                          v-if="(userStore.isSuperAdmin === 0 && scope.row.scope !== 1) || userStore.isSuperAdmin === 1">删除</el-button> -->
             </template>
             </template>
          </el-table-column>
          </el-table-column>
       </el-table>
       </el-table>

src/views/system/project/index.vue

@@ -60,6 +60,11 @@
         </template>
         </template>
       </el-table-column>
       </el-table-column>
       <el-table-column label="项目名称" prop="projectName" />
       <el-table-column label="项目名称" prop="projectName" />
+      <el-table-column prop="projectType" label="项目类型">
+        <template #default="scope">
+          <dict-tag :options="sys_project_type" :value="scope.row.projectType" />
+        </template>
+      </el-table-column>
       <el-table-column prop="scope" label="作用域">
       <el-table-column prop="scope" label="作用域">
         <template #default="scope">
         <template #default="scope">
           <dict-tag :options="sys_scope" :value="scope.row.scope" />
           <dict-tag :options="sys_scope" :value="scope.row.scope" />
@@ -129,7 +134,7 @@
             "
             "
             >修改</el-button
             >修改</el-button
           >
           >
-          <el-button
+          <!-- <el-button
             link
             link
             type="primary"
             type="primary"
             icon="Delete"
             icon="Delete"
@@ -139,7 +144,7 @@
               userStore.isSuperAdmin === 1
               userStore.isSuperAdmin === 1
             "
             "
             >删除</el-button
             >删除</el-button
-          >
+          > -->
         </template>
         </template>
       </el-table-column>
       </el-table-column>
     </el-table>
     </el-table>
@@ -158,6 +163,18 @@
         <el-form-item label="项目名称" prop="projectName">
         <el-form-item label="项目名称" prop="projectName">
           <el-input v-model="form.projectName" placeholder="请输入项目名称" />
           <el-input v-model="form.projectName" placeholder="请输入项目名称" />
         </el-form-item>
         </el-form-item>
+        <!-- 项目类型选择 -->
+        <el-form-item label="项目类型">
+          <el-radio-group v-model="form.projectType">
+            <el-radio
+                v-for="dict in sys_project_type"
+                :key="dict.value"
+                :value="dict.value"
+            >
+              {{ dict.label }}
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
         <el-form-item label="项目开始时间" prop="startTime">
         <el-form-item label="项目开始时间" prop="startTime">
           <el-date-picker
           <el-date-picker
             v-model="form.startTime"
             v-model="form.startTime"
@@ -261,7 +278,7 @@
           </el-radio-group>
           </el-radio-group>
         </el-form-item>
         </el-form-item>
         <el-form-item
         <el-form-item
-          label="项目图标"
+          label="项目图标"0
           prop="logoUrl"
           prop="logoUrl"
           :rules="[{ required: true, message: '请上传项目图标', trigger: 'change' }]"
           :rules="[{ required: true, message: '请上传项目图标', trigger: 'change' }]"
         >
         >
@@ -363,7 +380,7 @@ import ImageUpload from '@/components/ImageUpload/index.vue' //图片上传组
 const userStore = useUserStore()
 const userStore = useUserStore()
 const router = useRouter()
 const router = useRouter()
 const { proxy } = getCurrentInstance()
 const { proxy } = getCurrentInstance()
-const { sys_status, sys_scope, sys_no_yes } = proxy.useDict('sys_status', 'sys_scope', 'sys_no_yes')
+const { sys_status, sys_scope, sys_no_yes,sys_project_type } = proxy.useDict('sys_status', 'sys_scope', 'sys_no_yes','sys_project_type')
 
 
 const projectList = ref([])
 const projectList = ref([])
 const open = ref(false)
 const open = ref(false)

src/views/system/project/permission.vue

 <template>
 <template>
   <div class="app-container">
   <div class="app-container">
+    <el-button type="primary" icon="Back" @click="handleBack" style="margin-bottom: 10px"
+      >返回</el-button
+    >
     <!-- 选项卡组件：增加 custom-tabs 类名 -->
     <!-- 选项卡组件：增加 custom-tabs 类名 -->
     <el-tabs v-model="activeTab" type="card" @tab-change="handleTabChange" class="custom-tabs">
     <el-tabs v-model="activeTab" type="card" @tab-change="handleTabChange" class="custom-tabs">
       <!-- 用户权限选项卡 -->
       <!-- 用户权限选项卡 -->
@@ -620,7 +623,9 @@ import {
 
 
 import { ref } from 'vue'
 import { ref } from 'vue'
 import useUserStore from '@/store/modules/user'
 import useUserStore from '@/store/modules/user'
+import { ElMessage } from 'element-plus'
 
 
+const router = useRouter()
 const userStore = useUserStore()
 const userStore = useUserStore()
 const { proxy } = getCurrentInstance()
 const { proxy } = getCurrentInstance()
 const {
 const {
@@ -848,7 +853,7 @@ function importProjectUserListSubmitForm() {
   proxy.$modal
   proxy.$modal
     .confirm('是否确认导入用户账号为"' + importProjectUserListNameList + '"的数据项?')
     .confirm('是否确认导入用户账号为"' + importProjectUserListNameList + '"的数据项?')
     .then(function () {
     .then(function () {
-      return addImportProjectUserList(importProjectUserListIdList, projectBizId,tenantBizId)
+      return addImportProjectUserList(importProjectUserListIdList, projectBizId, tenantBizId)
     })
     })
     .then(() => {
     .then(() => {
       importProjectUserListOpen.value = false
       importProjectUserListOpen.value = false
@@ -943,7 +948,7 @@ function importProjectRoleListSubmitForm() {
   proxy.$modal
   proxy.$modal
     .confirm('是否确认导入角色名称为"' + importProjectRoleListNameList + '"的数据项?')
     .confirm('是否确认导入角色名称为"' + importProjectRoleListNameList + '"的数据项?')
     .then(function () {
     .then(function () {
-      return addImportProjectRoleList(importProjectRoleListIdList, projectBizId,tenantBizId)
+      return addImportProjectRoleList(importProjectRoleListIdList, projectBizId, tenantBizId)
     })
     })
     .then(() => {
     .then(() => {
       importProjectRoleListOpen.value = false
       importProjectRoleListOpen.value = false
@@ -998,7 +1003,7 @@ function handleImportProjectMenuList() {
 // 加载菜单树
 // 加载菜单树
 const loadMenuTree = async () => {
 const loadMenuTree = async () => {
   try {
   try {
-    const res = await getMenuTree(route.query.projectBizId,route.query.tenantBizId)
+    const res = await getMenuTree(route.query.projectBizId, route.query.tenantBizId)
     menuTree.value = res.data // 直接使用后端返回的树形结构
     menuTree.value = res.data // 直接使用后端返回的树形结构
     loadImportSelectedMenuList() // 加载选中的菜单列表，更新树勾选
     loadImportSelectedMenuList() // 加载选中的菜单列表，更新树勾选
   } catch (error) {
   } catch (error) {
@@ -1009,7 +1014,7 @@ const loadMenuTree = async () => {
 // 修改加载选中菜单列表的逻辑
 // 修改加载选中菜单列表的逻辑
 const loadImportSelectedMenuList = async () => {
 const loadImportSelectedMenuList = async () => {
   try {
   try {
-    const res = await getImportSelectedMenuList(route.query.projectBizId,route.query.tenantBizId)
+    const res = await getImportSelectedMenuList(route.query.projectBizId, route.query.tenantBizId)
     const targetKeys = res.data || []
     const targetKeys = res.data || []
 
 
     // 开启严格模式（禁用联动）
     // 开启严格模式（禁用联动）
@@ -1368,7 +1373,9 @@ const handleTabChange = tabName => {
     getMenuList()
     getMenuList()
   }
   }
 }
 }
-
+const handleBack = () => {
+  router.go(-1)
+}
 getUserList()
 getUserList()
 </script>
 </script>
 
 

src/views/system/role/index.vue

@@ -90,8 +90,8 @@
         <template #default="scope">
         <template #default="scope">
           <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
           <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
                      v-if="(userStore.isSuperAdmin === 0 && scope.row.scope !== 1) || userStore.isSuperAdmin === 1">修改</el-button>
                      v-if="(userStore.isSuperAdmin === 0 && scope.row.scope !== 1) || userStore.isSuperAdmin === 1">修改</el-button>
-          <el-button link type="primary" icon="Delete"
-                     v-if="(userStore.isSuperAdmin === 0 && scope.row.scope !== 1) || userStore.isSuperAdmin === 1">删除</el-button>
+          <!-- <el-button link type="primary" icon="Delete"
+                     v-if="(userStore.isSuperAdmin === 0 && scope.row.scope !== 1) || userStore.isSuperAdmin === 1">删除</el-button> -->
         </template>
         </template>
       </el-table-column>
       </el-table-column>
     </el-table>
     </el-table>

src/views/system/tenant/deptList.vue

@@ -267,7 +267,6 @@ import { Splitpanes, Pane } from 'splitpanes'
 import 'splitpanes/dist/splitpanes.css'
 import 'splitpanes/dist/splitpanes.css'
 import { ref } from 'vue'
 import { ref } from 'vue'
 
 
-
 const props = defineProps({
 const props = defineProps({
   tenantBizId: {
   tenantBizId: {
     type: String,
     type: String,
@@ -534,7 +533,7 @@ const getDeptTree = () => {
         deptBizIdValue.value = response.data[0].deptBizId
         deptBizIdValue.value = response.data[0].deptBizId
         deptOptions.value = response.data
         deptOptions.value = response.data
         enabledDeptOptions.value = filterDisabledDept(JSON.parse(JSON.stringify(response.data)))
         enabledDeptOptions.value = filterDisabledDept(JSON.parse(JSON.stringify(response.data)))
-        getList()
+        // getList()
         // 等待 DOM 更新后选中第一个节点
         // 等待 DOM 更新后选中第一个节点
         nextTick(() => {
         nextTick(() => {
           selectFirstTreeNode()
           selectFirstTreeNode()
@@ -638,7 +637,10 @@ watch(
   newTab => {
   newTab => {
     if (newTab == 'dept') {
     if (newTab == 'dept') {
       getDeptTree()
       getDeptTree()
-      resetQuery()
+      dateRange.value = []
+      proxy.resetForm('queryRef')
+      queryParams.value.deptId = undefined
+      proxy.$refs.deptTreeRef.setCurrentKey(null)
     }
     }
   },
   },
   { immediate: true }
   { immediate: true }

src/views/system/tenant/index.vue

@@ -63,7 +63,7 @@
       <el-form-item>
       <el-form-item>
         <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
         <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
         <el-button icon="Refresh" @click="resetQuery">重置</el-button>
         <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-        <el-button type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
+        <el-button v-if="userStore.isSuperAdmin === 1" type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
       </el-form-item>
       </el-form-item>
     </el-form>
     </el-form>
 
 
@@ -124,9 +124,9 @@
           <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
           <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
             >修改</el-button
             >修改</el-button
           >
           >
-          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
+          <!-- <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
             >删除</el-button
             >删除</el-button
-          >
+          > -->
         </template>
         </template>
       </el-table-column>
       </el-table-column>
     </el-table>
     </el-table>

src/views/system/tenant/permission.vue

 <template>
 <template>
   <div class="app-container">
   <div class="app-container">
+    <el-button type="primary" icon="Back" @click="handleBack" style="margin-bottom: 10px"
+      >返回</el-button
+    >
     <!-- 选项卡组件：增加 custom-tabs 类名 -->
     <!-- 选项卡组件：增加 custom-tabs 类名 -->
     <el-tabs v-model="activeTab" type="card" @tab-change="handleTabChange" class="custom-tabs">
     <el-tabs v-model="activeTab" type="card" @tab-change="handleTabChange" class="custom-tabs">
       <!-- 项目权限选项卡 -->
       <!-- 项目权限选项卡 -->
@@ -45,19 +48,19 @@
           <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
           <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
             <template #default="scope">
             <template #default="scope">
               <el-button
               <el-button
-                  link
-                  type="primary"
-                  icon="Edit"
-                  @click="handlePermission(scope.row)"
-                  v-if="
-              (userStore.isSuperAdmin === 0 && scope.row.scope !== 1) ||
-              userStore.isSuperAdmin === 1
-            "
-              >分配权限</el-button
+                link
+                type="primary"
+                icon="Edit"
+                @click="handlePermission(scope.row)"
+                v-if="
+                  (userStore.isSuperAdmin === 0 && scope.row.scope !== 1) ||
+                  userStore.isSuperAdmin === 1
+                "
+                >分配权限</el-button
               >
               >
-<!--              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"-->
-<!--                >删除</el-button-->
-<!--              >-->
+              <!--              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"-->
+              <!--                >删除</el-button-->
+              <!--              >-->
             </template>
             </template>
           </el-table-column>
           </el-table-column>
         </el-table>
         </el-table>
@@ -938,7 +941,12 @@ function handleDelete(row) {
 
 
 /** 项目分配权限 */
 /** 项目分配权限 */
 function handlePermission(row) {
 function handlePermission(row) {
-  router.push(`/system/project/permission?tenantBizId=`+route.query.tenantBizId+`&projectBizId=` + row.projectBizId)
+  router.push(
+    `/system/project/permission?tenantBizId=` +
+      route.query.tenantBizId +
+      `&projectBizId=` +
+      row.projectBizId
+  )
 }
 }
 //========项目-列表结束=========
 //========项目-列表结束=========
 
 
@@ -1619,7 +1627,9 @@ const handleTabChange = tabName => {
     getMenuList()
     getMenuList()
   }
   }
 }
 }
-
+const handleBack = () => {
+  router.go(-1)
+}
 getList()
 getList()
 </script>
 </script>
 
 

src/views/system/user/bf/authRole.vue

-<template>
-   <div class="app-container">
-      <h4 class="form-header h4">基本信息</h4>
-      <el-form :model="form" label-width="80px">
-         <el-row>
-            <el-col :span="8" :offset="2">
-               <el-form-item label="用户昵称" prop="nickName">
-                  <el-input v-model="form.nickName" disabled />
-               </el-form-item>
-            </el-col>
-            <el-col :span="8" :offset="2">
-               <el-form-item label="登录账号" prop="userName">
-                  <el-input v-model="form.userName" disabled />
-               </el-form-item>
-            </el-col>
-         </el-row>
-      </el-form>
-
-      <h4 class="form-header h4">角色信息</h4>
-      <el-table v-loading="loading" :row-key="getRowKey" @row-click="clickRow" ref="roleRef" @selection-change="handleSelectionChange" :data="roles.slice((pageNum - 1) * pageSize, pageNum * pageSize)">
-         <el-table-column label="序号" width="55" type="index" align="center">
-            <template #default="scope">
-               <span>{{ (pageNum - 1) * pageSize + scope.$index + 1 }}</span>
-            </template>
-         </el-table-column>
-         <el-table-column type="selection" :reserve-selection="true" :selectable="checkSelectable" width="55"></el-table-column>
-         <el-table-column label="角色编号" align="center" prop="roleId" />
-         <el-table-column label="角色名称" align="center" prop="roleName" />
-         <el-table-column label="权限字符" align="center" prop="roleKey" />
-         <el-table-column label="创建时间" align="center" prop="createTime" width="180">
-            <template #default="scope">
-               <span>{{ parseTime(scope.row.createTime) }}</span>
-            </template>
-         </el-table-column>
-      </el-table>
-
-      <pagination v-show="total > 0" :total="total" v-model:page="pageNum" v-model:limit="pageSize" />
-
-      <el-form label-width="100px">
-         <div style="text-align: center;margin-left:-120px;margin-top:30px;">
-            <el-button type="primary" @click="submitForm()">提交</el-button>
-            <el-button @click="close()">返回</el-button>
-         </div>
-      </el-form>
-   </div>
-</template>
-
-<script setup name="AuthRole">
-import { getAuthRole, updateAuthRole } from "@/api/system/user"
-
-const route = useRoute()
-const { proxy } = getCurrentInstance()
-
-const loading = ref(true)
-const total = ref(0)
-const pageNum = ref(1)
-const pageSize = ref(10)
-const roleIds = ref([])
-const roles = ref([])
-const form = ref({
-  nickName: undefined,
-  userName: undefined,
-  userId: undefined
-})
-
-/** 单击选中行数据 */
-function clickRow(row) {
-  if (checkSelectable(row)) {
-    proxy.$refs["roleRef"].toggleRowSelection(row)
-  }
-}
-
-/** 多选框选中数据 */
-function handleSelectionChange(selection) {
-  roleIds.value = selection.map(item => item.roleId)
-}
-
-/** 保存选中的数据编号 */
-function getRowKey(row) {
-  return row.roleId
-}
-
-// 检查角色状态
-function checkSelectable(row) {
-  return row.status === "0" ? true : false
-}
-
-/** 关闭按钮 */
-function close() {
-  const obj = { path: "/system/user" }
-  proxy.$tab.closeOpenPage(obj)
-}
-
-/** 提交按钮 */
-function submitForm() {
-  const userId = form.value.userId
-  const rIds = roleIds.value.join(",")
-  updateAuthRole({ userId: userId, roleIds: rIds }).then(response => {
-    proxy.$modal.msgSuccess("授权成功")
-    close()
-  })
-}
-
-(() => {
-  const userId = route.params && route.params.userId
-  if (userId) {
-    loading.value = true
-    getAuthRole(userId).then(response => {
-      form.value = response.user
-      roles.value = response.roles
-      total.value = roles.value.length
-      nextTick(() => {
-        roles.value.forEach(row => {
-          if (row.flag) {
-            proxy.$refs["roleRef"].toggleRowSelection(row)
-          }
-        })
-      })
-      loading.value = false
-    })
-  }
-})()
-</script>

src/views/system/user/bf/index.vue

-<template>
-  <div class="app-container">
-    <el-row :gutter="20">
-      <splitpanes :horizontal="appStore.device === 'mobile'" class="default-theme">
-        <!--部门数据-->
-        <pane size="16">
-          <el-col>
-            <div class="head-container">
-              <el-input v-model="deptName" placeholder="请输入部门名称" clearable prefix-icon="Search" style="margin-bottom: 20px" />
-            </div>
-            <div class="head-container">
-              <el-tree :data="deptOptions" :props="{ label: 'label', children: 'children' }" :expand-on-click-node="false" :filter-node-method="filterNode" ref="deptTreeRef" node-key="id" highlight-current default-expand-all @node-click="handleNodeClick" />
-            </div>
-          </el-col>
-        </pane>
-        <!--用户数据-->
-        <pane size="84">
-          <el-col>
-            <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
-              <el-form-item label="用户名称" prop="userName">
-                <el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable style="width: 240px" @keyup.enter="handleQuery" />
-              </el-form-item>
-              <el-form-item label="手机号码" prop="phonenumber">
-                <el-input v-model="queryParams.phonenumber" placeholder="请输入手机号码" clearable style="width: 240px" @keyup.enter="handleQuery" />
-              </el-form-item>
-              <el-form-item label="状态" prop="status">
-                <el-select v-model="queryParams.status" placeholder="用户状态" clearable style="width: 240px">
-                  <el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
-                </el-select>
-              </el-form-item>
-              <el-form-item label="创建时间" style="width: 308px">
-                <el-date-picker v-model="dateRange" value-format="YYYY-MM-DD" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
-              </el-form-item>
-              <el-form-item>
-                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-              </el-form-item>
-            </el-form>
-
-            <el-row :gutter="10" class="mb8">
-              <el-col :span="1.5">
-                <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:user:add']">新增</el-button>
-              </el-col>
-              <el-col :span="1.5">
-                <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate" v-hasPermi="['system:user:edit']">修改</el-button>
-              </el-col>
-              <el-col :span="1.5">
-                <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:user:remove']">删除</el-button>
-              </el-col>
-              <el-col :span="1.5">
-                <el-button type="info" plain icon="Upload" @click="handleImport" v-hasPermi="['system:user:import']">导入</el-button>
-              </el-col>
-              <el-col :span="1.5">
-                <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['system:user:export']">导出</el-button>
-              </el-col>
-              <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
-            </el-row>
-
-            <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
-              <el-table-column type="selection" width="50" align="center" />
-              <el-table-column label="用户编号" align="center" key="userId" prop="userId" v-if="columns.userId.visible" />
-              <el-table-column label="用户名称" align="center" key="userName" prop="userName" v-if="columns.userName.visible" :show-overflow-tooltip="true" />
-              <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" v-if="columns.nickName.visible" :show-overflow-tooltip="true" />
-              <el-table-column label="部门" align="center" key="deptName" prop="dept.deptName" v-if="columns.deptName.visible" :show-overflow-tooltip="true" />
-              <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" v-if="columns.phonenumber.visible" width="120" />
-              <el-table-column label="状态" align="center" key="status" v-if="columns.status.visible">
-                <template #default="scope">
-                  <el-switch
-                    v-model="scope.row.status"
-                    active-value="0"
-                    inactive-value="1"
-                    @change="handleStatusChange(scope.row)"
-                  ></el-switch>
-                </template>
-              </el-table-column>
-              <el-table-column label="创建时间" align="center" prop="createTime" v-if="columns.createTime.visible" width="160">
-                <template #default="scope">
-                  <span>{{ parseTime(scope.row.createTime) }}</span>
-                </template>
-              </el-table-column>
-              <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
-                <template #default="scope">
-                  <el-tooltip content="修改" placement="top" v-if="scope.row.userId !== 1">
-                    <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:user:edit']"></el-button>
-                  </el-tooltip>
-                  <el-tooltip content="删除" placement="top" v-if="scope.row.userId !== 1">
-                    <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:user:remove']"></el-button>
-                  </el-tooltip>
-                  <el-tooltip content="重置密码" placement="top" v-if="scope.row.userId !== 1">
-                    <el-button link type="primary" icon="Key" @click="handleResetPwd(scope.row)" v-hasPermi="['system:user:resetPwd']"></el-button>
-                  </el-tooltip>
-                  <el-tooltip content="分配角色" placement="top" v-if="scope.row.userId !== 1">
-                    <el-button link type="primary" icon="CircleCheck" @click="handleAuthRole(scope.row)" v-hasPermi="['system:user:edit']"></el-button>
-                  </el-tooltip>
-                </template>
-              </el-table-column>
-            </el-table>
-            <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
-          </el-col>
-        </pane>
-      </splitpanes>
-    </el-row>
-
-    <!-- 添加或修改用户配置对话框 -->
-    <el-dialog :title="title" v-model="open" width="600px" append-to-body>
-      <el-form :model="form" :rules="rules" ref="userRef" label-width="80px">
-        <el-row>
-          <el-col :span="12">
-            <el-form-item label="用户昵称" prop="nickName">
-              <el-input v-model="form.nickName" placeholder="请输入用户昵称" maxlength="30" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="归属部门" prop="deptId">
-              <el-tree-select v-model="form.deptId" :data="enabledDeptOptions" :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择归属部门" check-strictly />
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="12">
-            <el-form-item label="手机号码" prop="phonenumber">
-              <el-input v-model="form.phonenumber" placeholder="请输入手机号码" maxlength="11" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="邮箱" prop="email">
-              <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="12">
-            <el-form-item v-if="form.userId == undefined" label="用户名称" prop="userName">
-              <el-input v-model="form.userName" placeholder="请输入用户名称" maxlength="30" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item v-if="form.userId == undefined" label="用户密码" prop="password">
-              <el-input v-model="form.password" placeholder="请输入用户密码" type="password" maxlength="20" show-password />
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="12">
-            <el-form-item label="用户性别">
-              <el-select v-model="form.sex" placeholder="请选择">
-                <el-option v-for="dict in sys_user_sex" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="状态">
-              <el-radio-group v-model="form.status">
-                <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :value="dict.value">{{ dict.label }}</el-radio>
-              </el-radio-group>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="12">
-            <el-form-item label="岗位">
-              <el-select v-model="form.postIds" multiple placeholder="请选择">
-                <el-option v-for="item in postOptions" :key="item.postId" :label="item.postName" :value="item.postId" :disabled="item.status == 1"></el-option>
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="角色">
-              <el-select v-model="form.roleIds" multiple placeholder="请选择">
-                <el-option v-for="item in roleOptions" :key="item.roleId" :label="item.roleName" :value="item.roleId" :disabled="item.status == 1"></el-option>
-              </el-select>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="24">
-            <el-form-item label="备注">
-              <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
-            </el-form-item>
-          </el-col>
-        </el-row>
-      </el-form>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button type="primary" @click="submitForm">确 定</el-button>
-          <el-button @click="cancel">取 消</el-button>
-        </div>
-      </template>
-    </el-dialog>
-
-    <!-- 用户导入对话框 -->
-    <el-dialog :title="upload.title" v-model="upload.open" width="400px" append-to-body>
-      <el-upload ref="uploadRef" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
-        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
-        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
-        <template #tip>
-          <div class="el-upload__tip text-center">
-            <div class="el-upload__tip">
-              <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据
-            </div>
-            <span>仅允许导入xls、xlsx格式文件。</span>
-            <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link>
-          </div>
-        </template>
-      </el-upload>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button type="primary" @click="submitFileForm">确 定</el-button>
-          <el-button @click="upload.open = false">取 消</el-button>
-        </div>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-
-<script setup name="User">
-import { getToken } from "@/utils/auth"
-import useAppStore from '@/store/modules/app'
-import { changeUserStatus, listUser, resetUserPwd, delUser, getUser, updateUser, addUser, deptTreeSelect } from "@/api/system/user"
-import { Splitpanes, Pane } from "splitpanes"
-import "splitpanes/dist/splitpanes.css"
-
-const router = useRouter()
-const appStore = useAppStore()
-const { proxy } = getCurrentInstance()
-const { sys_normal_disable, sys_user_sex } = proxy.useDict("sys_normal_disable", "sys_user_sex")
-
-const userList = ref([])
-const open = ref(false)
-const loading = ref(true)
-const showSearch = ref(true)
-const ids = ref([])
-const single = ref(true)
-const multiple = ref(true)
-const total = ref(0)
-const title = ref("")
-const dateRange = ref([])
-const deptName = ref("")
-const deptOptions = ref(undefined)
-const enabledDeptOptions = ref(undefined)
-const initPassword = ref(undefined)
-const postOptions = ref([])
-const roleOptions = ref([])
-/*** 用户导入参数 */
-const upload = reactive({
-  // 是否显示弹出层（用户导入）
-  open: false,
-  // 弹出层标题（用户导入）
-  title: "",
-  // 是否禁用上传
-  isUploading: false,
-  // 是否更新已经存在的用户数据
-  updateSupport: 0,
-  // 设置上传的请求头部
-  headers: { Authorization: "Bearer " + getToken() },
-  // 上传的地址
-  url: import.meta.env.VITE_APP_BASE_API + "/system/user/importData"
-})
-// 列显隐信息
-const columns = ref({
-  userId: { label: '用户编号', visible: true },
-  userName: { label: '用户名称', visible: true },
-  nickName: { label: '用户昵称', visible: true },
-  deptName: { label: '部门', visible: true },
-  phonenumber: { label: '手机号码', visible: true },
-  status: { label: '状态', visible: true },
-  createTime: { label: '创建时间', visible: true }
-})
-
-const data = reactive({
-  form: {},
-  queryParams: {
-    pageNum: 1,
-    pageSize: 10,
-    userName: undefined,
-    phonenumber: undefined,
-    status: undefined,
-    deptId: undefined
-  },
-  rules: {
-    userName: [{ required: true, message: "用户名称不能为空", trigger: "blur" }, { min: 2, max: 20, message: "用户名称长度必须介于 2 和 20 之间", trigger: "blur" }],
-    nickName: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
-    password: [{ required: true, message: "用户密码不能为空", trigger: "blur" }, { min: 5, max: 20, message: "用户密码长度必须介于 5 和 20 之间", trigger: "blur" }, { pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符：< > \" ' \\\ |", trigger: "blur" }],
-    email: [{ type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }],
-    phonenumber: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }]
-  }
-})
-
-const { queryParams, form, rules } = toRefs(data)
-
-/** 通过条件过滤节点  */
-const filterNode = (value, data) => {
-  if (!value) return true
-  return data.label.indexOf(value) !== -1
-}
-
-/** 根据名称筛选部门树 */
-watch(deptName, val => {
-  proxy.$refs["deptTreeRef"].filter(val)
-})
-
-/** 查询用户列表 */
-function getList() {
-  loading.value = true
-  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(res => {
-    loading.value = false
-    userList.value = res.rows
-    total.value = res.total
-  })
-}
-
-/** 查询部门下拉树结构 */
-function getDeptTree() {
-  deptTreeSelect().then(response => {
-    deptOptions.value = response.data
-    enabledDeptOptions.value = filterDisabledDept(JSON.parse(JSON.stringify(response.data)))
-  })
-}
-
-/** 过滤禁用的部门 */
-function filterDisabledDept(deptList) {
-  return deptList.filter(dept => {
-    if (dept.disabled) {
-      return false
-    }
-    if (dept.children && dept.children.length) {
-      dept.children = filterDisabledDept(dept.children)
-    }
-    return true
-  })
-}
-
-/** 节点单击事件 */
-function handleNodeClick(data) {
-  queryParams.value.deptId = data.id
-  handleQuery()
-}
-
-/** 搜索按钮操作 */
-function handleQuery() {
-  queryParams.value.pageNum = 1
-  getList()
-}
-
-/** 重置按钮操作 */
-function resetQuery() {
-  dateRange.value = []
-  proxy.resetForm("queryRef")
-  queryParams.value.deptId = undefined
-  proxy.$refs.deptTreeRef.setCurrentKey(null)
-  handleQuery()
-}
-
-/** 删除按钮操作 */
-function handleDelete(row) {
-  const userIds = row.userId || ids.value
-  proxy.$modal.confirm('是否确认删除用户编号为"' + userIds + '"的数据项？').then(function () {
-    return delUser(userIds)
-  }).then(() => {
-    getList()
-    proxy.$modal.msgSuccess("删除成功")
-  }).catch(() => {})
-}
-
-/** 导出按钮操作 */
-function handleExport() {
-  proxy.download("system/user/export", {
-    ...queryParams.value,
-  },`user_${new Date().getTime()}.xlsx`)
-}
-
-/** 用户状态修改  */
-function handleStatusChange(row) {
-  let text = row.status === "0" ? "启用" : "停用"
-  proxy.$modal.confirm('确认要"' + text + '""' + row.userName + '"用户吗?').then(function () {
-    return changeUserStatus(row.userId, row.status)
-  }).then(() => {
-    proxy.$modal.msgSuccess(text + "成功")
-  }).catch(function () {
-    row.status = row.status === "0" ? "1" : "0"
-  })
-}
-
-/** 更多操作 */
-function handleCommand(command, row) {
-  switch (command) {
-    case "handleResetPwd":
-      handleResetPwd(row)
-      break
-    case "handleAuthRole":
-      handleAuthRole(row)
-      break
-    default:
-      break
-  }
-}
-
-/** 跳转角色分配 */
-function handleAuthRole(row) {
-  const userId = row.userId
-  router.push("/system/user-auth/role/" + userId)
-}
-
-/** 重置密码按钮操作 */
-function handleResetPwd(row) {
-  proxy.$prompt('请输入"' + row.userName + '"的新密码', "提示", {
-    confirmButtonText: "确定",
-    cancelButtonText: "取消",
-    closeOnClickModal: false,
-    inputPattern: /^.{5,20}$/,
-    inputErrorMessage: "用户密码长度必须介于 5 和 20 之间",
-    inputValidator: (value) => {
-      if (/<|>|"|'|\||\\/.test(value)) {
-        return "不能包含非法字符：< > \" ' \\\ |"
-      }
-    },
-  }).then(({ value }) => {
-    resetUserPwd(row.userId, value).then(response => {
-      proxy.$modal.msgSuccess("修改成功，新密码是：" + value)
-    })
-  }).catch(() => {})
-}
-
-/** 选择条数  */
-function handleSelectionChange(selection) {
-  ids.value = selection.map(item => item.userId)
-  single.value = selection.length != 1
-  multiple.value = !selection.length
-}
-
-/** 导入按钮操作 */
-function handleImport() {
-  upload.title = "用户导入"
-  upload.open = true
-}
-
-/** 下载模板操作 */
-function importTemplate() {
-  proxy.download("system/user/importTemplate", {
-  }, `user_template_${new Date().getTime()}.xlsx`)
-}
-
-/**文件上传中处理 */
-const handleFileUploadProgress = (event, file, fileList) => {
-  upload.isUploading = true
-}
-
-/** 文件上传成功处理 */
-const handleFileSuccess = (response, file, fileList) => {
-  upload.open = false
-  upload.isUploading = false
-  proxy.$refs["uploadRef"].handleRemove(file)
-  proxy.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true })
-  getList()
-}
-
-/** 提交上传文件 */
-function submitFileForm() {
-  proxy.$refs["uploadRef"].submit()
-}
-
-/** 重置操作表单 */
-function reset() {
-  form.value = {
-    userId: undefined,
-    deptId: undefined,
-    userName: undefined,
-    nickName: undefined,
-    password: undefined,
-    phonenumber: undefined,
-    email: undefined,
-    sex: undefined,
-    status: "0",
-    remark: undefined,
-    postIds: [],
-    roleIds: []
-  }
-  proxy.resetForm("userRef")
-}
-
-/** 取消按钮 */
-function cancel() {
-  open.value = false
-  reset()
-}
-
-/** 新增按钮操作 */
-function handleAdd() {
-  reset()
-  getUser().then(response => {
-    postOptions.value = response.posts
-    roleOptions.value = response.roles
-    open.value = true
-    title.value = "添加用户"
-    form.value.password = initPassword.value
-  })
-}
-
-/** 修改按钮操作 */
-function handleUpdate(row) {
-  reset()
-  const userId = row.userId || ids.value
-  getUser(userId).then(response => {
-    form.value = response.data
-    postOptions.value = response.posts
-    roleOptions.value = response.roles
-    form.value.postIds = response.postIds
-    form.value.roleIds = response.roleIds
-    open.value = true
-    title.value = "修改用户"
-    form.password = ""
-  })
-}
-
-/** 提交按钮 */
-function submitForm() {
-  proxy.$refs["userRef"].validate(valid => {
-    if (valid) {
-      if (form.value.userId != undefined) {
-        updateUser(form.value).then(response => {
-          proxy.$modal.msgSuccess("修改成功")
-          open.value = false
-          getList()
-        })
-      } else {
-        addUser(form.value).then(response => {
-          proxy.$modal.msgSuccess("新增成功")
-          open.value = false
-          getList()
-        })
-      }
-    }
-  })
-}
-
-onMounted(() => {
-  getDeptTree()
-  getList()
-  proxy.getConfigKey("sys.user.initPassword").then(response => {
-    initPassword.value = response.msg
-  })
-})
-</script>

src/views/system/user/bf/profile/index.vue

-<template>
-   <div class="app-container">
-      <el-row :gutter="20">
-         <el-col :span="6" :xs="24">
-            <el-card class="box-card">
-               <template v-slot:header>
-                 <div class="clearfix">
-                   <span>个人信息</span>
-                 </div>
-               </template>
-               <div>
-                  <div class="text-center">
-                     <userAvatar />
-                  </div>
-                  <ul class="list-group list-group-striped">
-                     <li class="list-group-item">
-                        <svg-icon icon-class="user" />用户名称
-                        <div class="pull-right">{{ state.user.userName }}</div>
-                     </li>
-                     <li class="list-group-item">
-                        <svg-icon icon-class="phone" />手机号码
-                        <div class="pull-right">{{ state.user.phonenumber }}</div>
-                     </li>
-                     <li class="list-group-item">
-                        <svg-icon icon-class="email" />用户邮箱
-                        <div class="pull-right">{{ state.user.email }}</div>
-                     </li>
-                     <li class="list-group-item">
-                        <svg-icon icon-class="tree" />所属部门
-                        <div class="pull-right" v-if="state.user.dept">{{ state.user.dept.deptName }} / {{ state.postGroup }}</div>
-                     </li>
-                     <li class="list-group-item">
-                        <svg-icon icon-class="peoples" />所属角色
-                        <div class="pull-right">{{ state.roleGroup }}</div>
-                     </li>
-                     <li class="list-group-item">
-                        <svg-icon icon-class="date" />创建日期
-                        <div class="pull-right">{{ state.user.createTime }}</div>
-                     </li>
-                  </ul>
-               </div>
-            </el-card>
-         </el-col>
-         <el-col :span="18" :xs="24">
-            <el-card>
-               <template v-slot:header>
-                 <div class="clearfix">
-                   <span>基本资料</span>
-                 </div>
-               </template>
-               <el-tabs v-model="selectedTab">
-                  <el-tab-pane label="基本资料" name="userinfo">
-                     <userInfo :user="state.user" />
-                  </el-tab-pane>
-                  <el-tab-pane label="修改密码" name="resetPwd">
-                     <resetPwd />
-                  </el-tab-pane>
-               </el-tabs>
-            </el-card>
-         </el-col>
-      </el-row>
-   </div>
-</template>
-
-<script setup name="Profile">
-import userAvatar from "./userAvatar"
-import userInfo from "./userInfo"
-import resetPwd from "./resetPwd"
-import { getUserProfile } from "@/api/system/user"
-
-const route = useRoute()
-const selectedTab = ref("userinfo")
-const state = reactive({
-  user: {},
-  roleGroup: {},
-  postGroup: {}
-})
-
-function getUser() {
-  getUserProfile().then(response => {
-    state.user = response.data
-    state.roleGroup = response.roleGroup
-    state.postGroup = response.postGroup
-  })
-}
-
-onMounted(() => {
-  const activeTab = route.params && route.params.activeTab
-  if (activeTab) {
-    selectedTab.value = activeTab
-  }
-  getUser()
-})
-</script>

src/views/system/user/bf/profile/resetPwd.vue

-<template>
-   <el-form ref="pwdRef" :model="user" :rules="rules" label-width="80px">
-      <el-form-item label="旧密码" prop="oldPassword">
-         <el-input v-model="user.oldPassword" placeholder="请输入旧密码" type="password" show-password />
-      </el-form-item>
-      <el-form-item label="新密码" prop="newPassword">
-         <el-input v-model="user.newPassword" placeholder="请输入新密码" type="password" show-password />
-      </el-form-item>
-      <el-form-item label="确认密码" prop="confirmPassword">
-         <el-input v-model="user.confirmPassword" placeholder="请确认新密码" type="password" show-password/>
-      </el-form-item>
-      <el-form-item>
-      <el-button type="primary" @click="submit">保存</el-button>
-      <el-button type="danger" @click="close">关闭</el-button>
-      </el-form-item>
-   </el-form>
-</template>
-
-<script setup>
-import { updateUserPwd } from "@/api/system/user"
-
-const { proxy } = getCurrentInstance()
-
-const user = reactive({
-  oldPassword: undefined,
-  newPassword: undefined,
-  confirmPassword: undefined
-})
-
-const equalToPassword = (rule, value, callback) => {
-  if (user.newPassword !== value) {
-    callback(new Error("两次输入的密码不一致"))
-  } else {
-    callback()
-  }
-}
-
-const rules = ref({
-  oldPassword: [{ required: true, message: "旧密码不能为空", trigger: "blur" }],
-  newPassword: [{ required: true, message: "新密码不能为空", trigger: "blur" }, { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" }, { pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符：< > \" ' \\\ |", trigger: "blur" }],
-  confirmPassword: [{ required: true, message: "确认密码不能为空", trigger: "blur" }, { required: true, validator: equalToPassword, trigger: "blur" }]
-})
-
-/** 提交按钮 */
-function submit() {
-  proxy.$refs.pwdRef.validate(valid => {
-    if (valid) {
-      updateUserPwd(user.oldPassword, user.newPassword).then(response => {
-        proxy.$modal.msgSuccess("修改成功")
-      })
-    }
-  })
-}
-
-/** 关闭按钮 */
-function close() {
-  proxy.$tab.closePage()
-}
-</script>

src/views/system/user/bf/profile/userAvatar.vue

-<template>
-  <div class="user-info-head" @click="editCropper()">
-    <img :src="options.img" title="点击上传头像" class="img-circle img-lg" />
-    <el-dialog :title="title" v-model="open" width="800px" append-to-body @opened="modalOpened" @close="closeDialog">
-      <el-row>
-        <el-col :xs="24" :md="12" :style="{ height: '350px' }">
-          <vue-cropper
-            ref="cropper"
-            :img="options.img"
-            :info="true"
-            :autoCrop="options.autoCrop"
-            :autoCropWidth="options.autoCropWidth"
-            :autoCropHeight="options.autoCropHeight"
-            :fixedBox="options.fixedBox"
-            :outputType="options.outputType"
-            @realTime="realTime"
-            v-if="visible"
-          />
-        </el-col>
-        <el-col :xs="24" :md="12" :style="{ height: '350px' }">
-          <div class="avatar-upload-preview">
-            <img :src="options.previews.url" :style="options.previews.img" />
-          </div>
-        </el-col>
-      </el-row>
-      <br />
-      <el-row>
-        <el-col :lg="2" :md="2">
-          <el-upload
-            action="#"
-            :http-request="requestUpload"
-            :show-file-list="false"
-            :before-upload="beforeUpload"
-          >
-            <el-button>
-              选择
-              <el-icon class="el-icon--right"><Upload /></el-icon>
-            </el-button>
-          </el-upload>
-        </el-col>
-        <el-col :lg="{ span: 1, offset: 2 }" :md="2">
-          <el-button icon="Plus" @click="changeScale(1)"></el-button>
-        </el-col>
-        <el-col :lg="{ span: 1, offset: 1 }" :md="2">
-          <el-button icon="Minus" @click="changeScale(-1)"></el-button>
-        </el-col>
-        <el-col :lg="{ span: 1, offset: 1 }" :md="2">
-          <el-button icon="RefreshLeft" @click="rotateLeft()"></el-button>
-        </el-col>
-        <el-col :lg="{ span: 1, offset: 1 }" :md="2">
-          <el-button icon="RefreshRight" @click="rotateRight()"></el-button>
-        </el-col>
-        <el-col :lg="{ span: 2, offset: 6 }" :md="2">
-          <el-button type="primary" @click="uploadImg()">提 交</el-button>
-        </el-col>
-      </el-row>
-    </el-dialog>
-  </div>
-</template>
-
-<script setup>
-import "vue-cropper/dist/index.css"
-import { VueCropper } from "vue-cropper"
-import { uploadAvatar } from "@/api/system/user"
-import useUserStore from "@/store/modules/user"
-
-const userStore = useUserStore()
-const { proxy } = getCurrentInstance()
-
-const open = ref(false)
-const visible = ref(false)
-const title = ref("修改头像")
-
-//图片裁剪数据
-const options = reactive({
-  img: userStore.avatar,     // 裁剪图片的地址
-  autoCrop: true,            // 是否默认生成截图框
-  autoCropWidth: 200,        // 默认生成截图框宽度
-  autoCropHeight: 200,       // 默认生成截图框高度
-  fixedBox: true,            // 固定截图框大小 不允许改变
-  outputType: "png",         // 默认生成截图为PNG格式
-  filename: 'avatar',        // 文件名称
-  previews: {}               //预览数据
-})
-
-/** 编辑头像 */
-function editCropper() {
-  open.value = true
-}
-
-/** 打开弹出层结束时的回调 */
-function modalOpened() {
-  visible.value = true
-}
-
-/** 覆盖默认上传行为 */
-function requestUpload() {}
-
-/** 向左旋转 */
-function rotateLeft() {
-  proxy.$refs.cropper.rotateLeft()
-}
-
-/** 向右旋转 */
-function rotateRight() {
-  proxy.$refs.cropper.rotateRight()
-}
-
-/** 图片缩放 */
-function changeScale(num) {
-  num = num || 1
-  proxy.$refs.cropper.changeScale(num)
-}
-
-/** 上传预处理 */
-function beforeUpload(file) {
-  if (file.type.indexOf("image/") == -1) {
-    proxy.$modal.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。")
-  } else {
-    const reader = new FileReader()
-    reader.readAsDataURL(file)
-    reader.onload = () => {
-      options.img = reader.result
-      options.filename = file.name
-    }
-  }
-}
-
-/** 上传图片 */
-function uploadImg() {
-  proxy.$refs.cropper.getCropBlob(data => {
-    let formData = new FormData()
-    formData.append("avatarfile", data, options.filename)
-    uploadAvatar(formData).then(response => {
-      open.value = false
-      options.img = import.meta.env.VITE_APP_BASE_API + response.imgUrl
-      userStore.avatar = options.img
-      proxy.$modal.msgSuccess("修改成功")
-      visible.value = false
-    })
-  })
-}
-
-/** 实时预览 */
-function realTime(data) {
-  options.previews = data
-}
-
-/** 关闭窗口 */
-function closeDialog() {
-  options.img = userStore.avatar
-  options.visible = false
-}
-</script>
-
-<style lang='scss' scoped>
-.user-info-head {
-  position: relative;
-  display: inline-block;
-  height: 120px;
-}
-
-.user-info-head:hover:after {
-  content: "+";
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  color: #eee;
-  background: rgba(0, 0, 0, 0.5);
-  font-size: 24px;
-  font-style: normal;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  cursor: pointer;
-  line-height: 110px;
-  border-radius: 50%;
-}
-</style>
\ No newline at end of file

src/views/system/user/bf/profile/userInfo.vue

-<template>
-   <el-form ref="userRef" :model="form" :rules="rules" label-width="80px">
-      <el-form-item label="用户昵称" prop="nickName">
-         <el-input v-model="form.nickName" maxlength="30" />
-      </el-form-item>
-      <el-form-item label="手机号码" prop="phonenumber">
-         <el-input v-model="form.phonenumber" maxlength="11" />
-      </el-form-item>
-      <el-form-item label="邮箱" prop="email">
-         <el-input v-model="form.email" maxlength="50" />
-      </el-form-item>
-      <el-form-item label="性别">
-         <el-radio-group v-model="form.sex">
-            <el-radio value="0">男</el-radio>
-            <el-radio value="1">女</el-radio>
-         </el-radio-group>
-      </el-form-item>
-      <el-form-item>
-      <el-button type="primary" @click="submit">保存</el-button>
-      <el-button type="danger" @click="close">关闭</el-button>
-      </el-form-item>
-   </el-form>
-</template>
-
-<script setup>
-import { updateUserProfile } from "@/api/system/user"
-
-const props = defineProps({
-  user: {
-    type: Object
-  }
-})
-
-const { proxy } = getCurrentInstance()
-
-const form = ref({})
-const rules = ref({
-  nickName: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
-  email: [{ required: true, message: "邮箱地址不能为空", trigger: "blur" }, { type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }],
-  phonenumber: [{ required: true, message: "手机号码不能为空", trigger: "blur" }, { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }],
-})
-
-/** 提交按钮 */
-function submit() {
-  proxy.$refs.userRef.validate(valid => {
-    if (valid) {
-      updateUserProfile(form.value).then(response => {
-        proxy.$modal.msgSuccess("修改成功")
-        props.user.phonenumber = form.value.phonenumber
-        props.user.email = form.value.email
-      })
-    }
-  })
-}
-
-/** 关闭按钮 */
-function close() {
-  proxy.$tab.closePage()
-}
-
-// 回显当前登录用户信息
-watch(() => props.user, user => {
-  if (user) {
-    form.value = { nickName: user.nickName, phonenumber: user.phonenumber, email: user.email, sex: user.sex }
-  }
-},{ immediate: true })
-</script>

src/views/system/user/index.vue

@@ -325,6 +325,7 @@ function handleStatusChange(row, event) {
 /** 重置新增的表单以及其他数据  */
 /** 重置新增的表单以及其他数据  */
 function reset() {
 function reset() {
   form.value = {
   form.value = {
+    loginTenantBizId: userStore.currentTenant.apiLoginTenantInfoResponse.tenantBizId,
     userBizId: undefined,
     userBizId: undefined,
     userName: undefined,
     userName: undefined,
     password: undefined,
     password: undefined,

src/views/workbench/components/AppCard.vue

@@ -13,7 +13,9 @@ import { computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { useRouter } from 'vue-router'
 import { getVisitPermission } from '@/api/common'
 import { getVisitPermission } from '@/api/common'
 import { getToken } from '@/utils/auth'
 import { getToken } from '@/utils/auth'
+import useUserStore from '@/store/modules/user'
 
 
+const userStore = useUserStore()
 const props = defineProps({
 const props = defineProps({
   project: {
   project: {
     type: Object,
     type: Object,
@@ -26,7 +28,10 @@ const appName = computed(() => props.project.projectName)
 
 
 const handleClick = () => {
 const handleClick = () => {
   console.log('点击了应用卡片', props.project)
   console.log('点击了应用卡片', props.project)
-  getVisitPermission(props.project.projectBizId).then(response => {
+  getVisitPermission(
+    props.project.projectBizId,
+    userStore.currentTenant.apiLoginTenantInfoResponse.tenantBizId
+  ).then(response => {
     if (response.code === 200) {
     if (response.code === 200) {
       // 有权限访问项目，进行跳转
       // 有权限访问项目，进行跳转
       // 记录最近使用的应用
       // 记录最近使用的应用

src/views/workbench/index.vue

@@ -9,11 +9,7 @@
       </template>
       </template>
 
 
       <div class="app-list">
       <div class="app-list">
-        <AppCard
-            v-for="project in projects"
-            :key="project.projectBizId"
-            :project="project"
-        />
+        <AppCard v-for="project in projects" :key="project.projectBizId" :project="project" />
       </div>
       </div>
 
 
       <div v-if="!projects.length" class="empty-container">
       <div v-if="!projects.length" class="empty-container">
@@ -42,11 +38,12 @@ const projects = computed(() => {
 
 
 // 监听租户变化
 // 监听租户变化
 watch(
 watch(
-    () => userStore.currentTenant,
-    () => {
-      // 租户变化时自动刷新
-    }
+  () => userStore.currentTenant,
+  () => {
+    // 租户变化时自动刷新
+  }
 )
 )
+userStore.getInfo()
 </script>
 </script>
 
 
 <style lang="scss" scoped>
 <style lang="scss" scoped>

vite.config.js

@@ -6,74 +6,74 @@ const baseUrl = 'http://localhost:8080' // 后端接口
 
 
 // https://vitejs.dev/config/
 // https://vitejs.dev/config/
 export default defineConfig(({ mode, command }) => {
 export default defineConfig(({ mode, command }) => {
-  const env = loadEnv(mode, process.cwd())
-  const { VITE_APP_ENV } = env
-  return {
-    // 部署生产环境和开发环境下的URL。
-    // 默认情况下，vite 会假设你的应用是被部署在一个域名的根路径上
-    // 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.ruoyi.vip/admin/，则设置 baseUrl 为 /admin/。
-    base: VITE_APP_ENV === 'production' ? '/' : '/',
-    plugins: createVitePlugins(env, command === 'build'),
-    resolve: {
-      // https://cn.vitejs.dev/config/#resolve-alias
-      alias: {
-        // 设置路径
-        '~': path.resolve(__dirname, './'),
-        // 设置别名
-        '@': path.resolve(__dirname, './src')
-      },
-      // https://cn.vitejs.dev/config/#resolve-extensions
-      extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
-    },
-    // 打包配置
-    build: {
-      // https://vite.dev/config/build-options.html
-      sourcemap: command === 'build' ? false : 'inline',
-      outDir: 'dist',
-      assetsDir: 'assets',
-      chunkSizeWarningLimit: 2000,
-      rollupOptions: {
-        output: {
-          chunkFileNames: 'static/js/[name]-[hash].js',
-          entryFileNames: 'static/js/[name]-[hash].js',
-          assetFileNames: 'static/[ext]/[name]-[hash].[ext]'
-        }
-      }
-    },
-    // vite 相关配置
-    server: {
-      port: 80,
-      host: true,
-      open: true,
-      proxy: {
-        // https://cn.vitejs.dev/config/#server-proxy
-        '/dev-api': {
-          target: baseUrl,
-          changeOrigin: true,
-          rewrite: (p) => p.replace(/^\/dev-api/, '')
+    const env = loadEnv(mode, process.cwd())
+    const { VITE_APP_ENV } = env
+    return {
+        // 部署生产环境和开发环境下的URL。
+        // 默认情况下，vite 会假设你的应用是被部署在一个域名的根路径上
+        // 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.ruoyi.vip/admin/，则设置 baseUrl 为 /admin/。
+        base: VITE_APP_ENV === 'production' ? '/' : '/',
+        plugins: createVitePlugins(env, command === 'build'),
+        resolve: {
+            // https://cn.vitejs.dev/config/#resolve-alias
+            alias: {
+                // 设置路径
+                '~': path.resolve(__dirname, './'),
+                // 设置别名
+                '@': path.resolve(__dirname, './src')
+            },
+            // https://cn.vitejs.dev/config/#resolve-extensions
+            extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
         },
         },
-         // springdoc proxy
-         '^/v3/api-docs/(.*)': {
-          target: baseUrl,
-          changeOrigin: true,
-        }
-      }
-    },
-    css: {
-      postcss: {
-        plugins: [
-          {
-            postcssPlugin: 'internal:charset-removal',
-            AtRule: {
-              charset: (atRule) => {
-                if (atRule.name === 'charset') {
-                  atRule.remove()
+        // 打包配置
+        build: {
+            // https://vite.dev/config/build-options.html
+            sourcemap: command === 'build' ? false : 'inline',
+            outDir: 'dist',
+            assetsDir: 'assets',
+            chunkSizeWarningLimit: 2000,
+            rollupOptions: {
+                output: {
+                    chunkFileNames: 'static/js/[name]-[hash].js',
+                    entryFileNames: 'static/js/[name]-[hash].js',
+                    assetFileNames: 'static/[ext]/[name]-[hash].[ext]'
+                }
+            }
+        },
+        // vite 相关配置
+        server: {
+            port: 80,
+            host: true,
+            open: true,
+            proxy: {
+                // https://cn.vitejs.dev/config/#server-proxy
+                '/dev-api': {
+                    target: baseUrl,
+                    changeOrigin: true,
+                    rewrite: (p) => p.replace(/^\/dev-api/, '')
+                },
+                // springdoc proxy
+                '^/v3/api-docs/(.*)': {
+                    target: baseUrl,
+                    changeOrigin: true,
                 }
                 }
-              }
             }
             }
-          }
-        ]
-      }
+        },
+        css: {
+            postcss: {
+                plugins: [
+                    {
+                        postcssPlugin: 'internal:charset-removal',
+                        AtRule: {
+                            charset: (atRule) => {
+                                if (atRule.name === 'charset') {
+                                    atRule.remove()
+                                }
+                            }
+                        }
+                    }
+                ]
+            }
+        }
     }
     }
-  }
 })
 })