mod:多LOGO 调整

electron/api/generate.js

@@ -3,8 +3,6 @@ const { post,get } = require('./request')
 module.exports = {
   // 生成主图详情页
   generatePhotoDetail(data){
-    console.log('generatePhotoDetail')
-    console.log(data)
     return post({
       url: '/handle_detail',
       data: data,
@@ -12,6 +10,24 @@ module.exports = {
         'Content-Type':"application/json",
       }
     })
-  }
+  },
 
+  addLogo(data){
+    return post({
+      url: '/add_logo',
+      data: data
+    })
+  },
+  getLogoList(data){
+    return get({
+      url: '/logo_list',
+      data: data
+    })
+  },
+  deleteLogo(data){
+    return post({
+      url: '/delete_logo',
+      data: data
+    })
+  },
 }

electron/api/takephoto.js

@@ -9,8 +9,6 @@ module.exports = {
   },
 
   delectGoodsArts(data){
-    console.log('delectGoodsArts')
-    console.log(data)
     return post({
       url: '/delect_goods_arts',
       data: data

electron/controller/generate.js

@@ -5,7 +5,7 @@ const Log = require('ee-core/log');
 const Services = require('ee-core/services');
 const path = require('path');
 const fs = require('fs');
-const { generatePhotoDetail } = require('../api/generate');
+const { generatePhotoDetail, getLogoList, addLogo,deleteLogo } = require('../api/generate');
 
 const errData = {
   msg :'请求失败，请联系管理员',
@@ -36,6 +36,47 @@ class GenerateController extends Controller {
       return errData;
     }
   }
+  /**
+   * 获取LOGO列表
+   */
+  async addLogo(args) {
+    try {
+      const result = await addLogo(args);
+      if(result.data)  return result.data
+      return errData;
+    } catch (error) {
+      Log.error('添加LOGO失败:', error);
+      return errData;
+    }
+  }
+  /**
+   * 获取LOGO列表
+   */
+  async getLogoList(args) {
+    try {
+      const result = await getLogoList(args);
+      if(result.data)  return result.data
+      return errData;
+    } catch (error) {
+      Log.error('获取LOGO列表失败:', error);
+      return errData;
+    }
+  }
+
+  /**
+   * 获取LOGO列表
+   */
+  async deleteLogo(args) {
+    try {
+      const result = await deleteLogo(args);
+      if(result.data)  return result.data
+      return errData;
+    } catch (error) {
+      Log.error('删除LOGO失败:', error);
+      return errData;
+    }
+  }
+
 
 }
 

frontend/src/components/upload/index.vue

@@ -9,54 +9,21 @@
     <div v-if="base64Image" class="image-out">
       <img class="el-upload-list__item-thumbnail" :src="'file:///'+base64Image" alt="" />
       <span class="el-upload-list__item-actions">
-        <span  @click="handlePictureCardPreview(base64Image)">
+        <span  @click.stop="handlePictureCardPreview(base64Image)">
           <el-icon><zoom-in /></el-icon>
         </span>
-        <span v-if="!disabled" class="mar-left-10"  @click="handleRemove()">
+        <span v-if="!disabled" class="mar-left-10"  @click.stop="handleRemove()">
           <el-icon>
             <Delete />
           </el-icon>
         </span>
       </span>
     </div>
-  </div>
-  <!-- <img v-if="base64Image" :src="base64Image">
-  <div class="input" v-if="filePath">{{filePath}}</div> -->
-
-  <!--
-  <el-upload class="upload-warp" action="#" list-type="picture-card" :http-request="upload">
-
-    <div class="flex col">
-      <el-icon>
-        <Plus />
-      </el-icon>
-      <div class="add-text">添加</div>
-    </div>
-    <template #file="{ file }">
-      <div>
-        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
-        <span class="el-upload-list__item-actions">
-          <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
-            <el-icon><zoom-in /></el-icon>
-          </span>
-          <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
-            <el-icon>
-              <Download />
-            </el-icon>
-          </span>
-          <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
-            <el-icon>
-              <Delete />
-            </el-icon>
-          </span>
-        </span>
-      </div>
-    </template>
-</el-upload>-->
 
-<el-dialog v-model="dialogVisible">
-  <img class="w-full" :src="dialogImageUrl" alt="Preview Image" />
-</el-dialog>
+    <el-dialog v-model="dialogVisible" v-if="dialogVisible">
+      <img class="w-full" :src="dialogImageUrl" alt="Preview Image" />
+    </el-dialog>
+  </div>
 </template>
 <script lang="ts" setup>
 import { ref, defineEmits } from 'vue'
@@ -104,7 +71,6 @@ const handleRemove = () => {
   base64Image.value = ''
   emit('input' , '' )
 }
-
 const handlePictureCardPreview = (base64Image) => {
   dialogImageUrl.value = base64Image!
   dialogVisible.value = true
@@ -114,15 +80,15 @@ const handleDownload = (file: UploadFile) => {
   console.log(file)
 }
 
-const base64Image = ref('')
+const base64Image = ref(props.value)
 const filePath = ref('')
 function openImage() {
 
   clientStore.ipc.removeAllListeners(icpList.utils.openImage);
   clientStore.ipc.send(icpList.utils.openImage);
   clientStore.ipc.on(icpList.utils.openImage, async (event, result) => {
-    filePath.value = result.filePath
-    base64Image.value = result.filePath
+ //   filePath.value = result.filePath
+ //   base64Image.value = result.filePath
     clientStore.ipc.removeAllListeners(icpList.utils.openImage);
     emit('input' ,result.filePath)
   })
@@ -145,8 +111,8 @@ function openImage() {
 // }
 
 .uplaod-btn {
-  width: 120px;
-  height: 120px;
+  width: 88px;
+  height: 88px;
   cursor: pointer;
   background: #fff;
   border-radius: 6px;
@@ -164,12 +130,13 @@ function openImage() {
 }
 
 .image-out {
-  width: 120px;
-  height: 120px;
+  width: 88px;
+  height: 88px;
   position: relative;
   border: 1px solid var(--el-border-color);
   border-radius: 6px;
   overflow: hidden;
+  cursor: pointer;
 
   .el-upload-list__item-thumbnail {
     width: 100%;
@@ -179,9 +146,9 @@ function openImage() {
   .el-upload-list__item-actions{
     position: absolute;
     width: 100%;
-    height: 100%;
+    height: 30px;
     left: 0;
-    top: 0;
+    bottom:0;
     cursor: default;
     display: inline-flex;
     justify-content: center;
@@ -195,18 +162,19 @@ function openImage() {
         display: none;
         cursor: pointer;
       }
-    &:hover{
-      opacity: 1;
-      span{
-        display: inline-flex;
-        cursor: pointer;
-        width: 20px;
-      }
-    }
     // .el-upload-list__item-preview,
     // .el-upload-list__item-delete{
 
     // }
   }
+
+  &:hover .el-upload-list__item-actions{
+    opacity: 1;
+    span{
+      display: inline-flex;
+      cursor: pointer;
+      width: 20px;
+    }
+  }
 }
 </style>

frontend/src/utils/ipc.ts

@@ -37,8 +37,11 @@ const icpList = {
     },
     generate:{
         generatePhotoDetail: 'controller.generate.generatePhotoDetail',
+        addLogo: 'controller.generate.addLogo',
+        getLogoList: 'controller.generate.getLogoList',
+        deleteLogo: 'controller.generate.deleteLogo',
     }
-    
+
 
 }
 

frontend/src/views/Photography/detail.vue

@@ -15,8 +15,17 @@
           主图LOGO：
         </div>
       </div>
-      <div class="logo-section flex left top">
-        <upload :value="form.logo_path" @input="onInput"></upload>
+      <div class="logo-section flex left top multi-line">
+        <upload v-for="item,index in logoList"   :value="item" :key="item"
+                v-show="item"
+                @input="onRemove(index)"
+                class="mar-right-10 upload-item"
+                :class="{
+                    active: item === form.logo_path
+                }"
+                @click.native="form.logo_path = item"
+        ></upload>
+        <upload @input="onInput"></upload>
       </div>
 
       <el-divider />
@@ -144,8 +153,8 @@
         <div class="flex-item left">
           <div class="section-title">
             <img src="@/assets/images/Photography/zhuangshi.png" style="width: 32px; height: 32px;" />
-            详情资料准备 (2选1)  
-            
+            详情资料准备 (2选1)
+
             <el-button v-if="form.dataType == '1'" type="text" class="mar-left-10 fs-16"  @click="downloadExcel">下载商品基础资料模版</el-button>
           </div>
         </div>
@@ -278,6 +287,7 @@ onMounted(() => {
   const goods_art_data = route.query.goods_art_nos
   goods_art_nos.value = Array.isArray(goods_art_data) ? goods_art_data : [goods_art_data]
   getCompanyTemplates()
+  getLogolist()
 })
 
 
@@ -309,8 +319,8 @@ const getCompanyTemplates = async () => {
 
 const downloadExcel =  () => {
   const a = document.createElement('a')
-  a.href = excel_template_url.value, 
-  a.download = '商品基础资料模版' 
+  a.href = excel_template_url.value,
+  a.download = '商品基础资料模版'
   document.body.appendChild(a)
   a.click()
   setTimeout(() => {
@@ -437,11 +447,59 @@ const openLoadingDialog = (timer: number) => {
 }
 
 
-
+//logo
+const logoList = ref([])
 const onInput = (value) => {
-  form.logo_path = value
+  addLogo(value)
+}
+const onRemove = (index) => {
+  if(logoList.value[index] === form.logo_path){
+    form.logo_path = ''
+  }
+  logoList.value.splice(index, 1)
+  clientStore.ipc.send(icpList.generate.deleteLogo,{
+    value:JSON.stringify(logoList.value)
+  });
+  clientStore.ipc.on(icpList.generate.deleteLogo, async (event, result) => {
+    console.log('deleteLogo');
+    console.log(result);
+
+    clientStore.ipc.removeAllListeners(icpList.generate.deleteLogo);
+  })
 }
 
+const getLogolist = async () => {
+  clientStore.ipc.send(icpList.generate.getLogoList);
+  clientStore.ipc.on(icpList.generate.getLogoList, async (event, result) => {
+    logoList.value = result.data
+    if(logoList.value.length){
+      form.logo_path = logoList.value[0]
+    }
+    clientStore.ipc.removeAllListeners(icpList.generate.getLogoList);
+  })
+}
+
+
+const addLogo = async (path) => {
+  clientStore.ipc.send(icpList.generate.addLogo,{
+    logo_path:path
+  });
+  clientStore.ipc.on(icpList.generate.addLogo, async (event, result) => {
+    console.log(result);
+
+    if (result.code === 0) {
+        console.log("添加成功")
+      console.log(result)
+      if(result.data.logo){
+        form.logo_path = result.data.logo
+        logoList.value.push(result.data.logo)
+      }
+    }
+    clientStore.ipc.removeAllListeners(icpList.generate.addLogo);
+  })
+}
+
+
 function selectExcel() {
   clientStore.ipc.removeAllListeners(icpList.utils.openFile);
   clientStore.ipc.send(icpList.utils.openFile, {
@@ -519,6 +577,29 @@ const selectFolder = () => {
   margin-bottom: 20px;
 }
 
+.logo-section {
+  .upload-item {
+    border: 2px solid rgba(0,0,0,0);
+
+  }
+  .active {
+    border: 2px solid #2957FF;
+    border-radius: 6px;
+    overflow: hidden;;
+  }
+
+  &.multi-line {
+    flex-direction: row; // 默认横向排列
+    flex-wrap: wrap; // 允许换行
+    align-items: flex-start; // 对齐方式调整为顶部对齐
+
+    .upload-item {
+      margin-bottom: 10px; // 每行之间增加间距
+      width: 90px; // 每行显示 4 个元素，减去外边距
+      box-sizing: border-box; // 确保宽度计算包含 padding 和 border
+    }
+  }
+}
 .logo-upload {
   border: 1px dashed #ccc;
   border-radius: 5px;