|
|
@@ -6,26 +6,8 @@
|
|
|
<el-form inline>
|
|
|
<el-form-item>
|
|
|
<el-input v-model="searchInfo" placeholder="搜索关键字" clearable style="width: 300px;" />
|
|
|
-
|
|
|
- <!-- 文件夹筛选下拉菜单 -->
|
|
|
- <!-- <el-dropdown @command="handleFolderCommand" style="margin-right: 10px;">
|
|
|
- <el-button icon="search" title="文件夹筛选">
|
|
|
- {{ selectedFolder || '文件夹筛选' }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
|
|
|
- </el-button>
|
|
|
- <template #dropdown>
|
|
|
- <el-dropdown-menu>
|
|
|
- <el-dropdown-item command="">全部文件夹</el-dropdown-item>
|
|
|
- <el-dropdown-item v-for="(folder, index) in folderList" :key="index" :command="folder">
|
|
|
- {{ folder }}
|
|
|
- </el-dropdown-item>
|
|
|
- </el-dropdown-menu>
|
|
|
- </template>
|
|
|
- </el-dropdown> -->
|
|
|
-
|
|
|
<el-button type="primary" icon="search" @click="onSubmit" title="搜索">查询</el-button>
|
|
|
<el-button type="primary" @click="onADD" >新增产品</el-button>
|
|
|
- <!-- <el-button type="primary" title="选择图片,文生图" @click="texttoimg" :loading="isLoading">文生图</el-button>
|
|
|
- <el-button type="primary" title="选择图片,图生图" @click="imgtoimg" :loading="isLoading">图生图</el-button> -->
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
</layout-header>
|
|
|
@@ -33,7 +15,7 @@
|
|
|
<layout>
|
|
|
<!-- 左侧树形结构 -->
|
|
|
<template v-if="userStore.userInfo.nickName === '超级管理员'">
|
|
|
- <layout-sider :resize-directions="['right']" :width="190" style="margin-right: 10px">
|
|
|
+ <layout-sider :resize-directions="['right']" :width="290" style="margin-right: 10px">
|
|
|
<div class="JKWTree-tree" style="height: 200px;width:100vh">
|
|
|
<h3>商户名称</h3>
|
|
|
<el-tree :data="treeData" class="treecolor" @node-click="handleNodeClick"></el-tree>
|
|
|
@@ -59,8 +41,7 @@
|
|
|
:cell-class-name="tableDataCellClass"
|
|
|
@selection-change="SelectionChange"
|
|
|
@row-dblclick="onRowDblClick"
|
|
|
- :show-overflow-tooltip="true"
|
|
|
- >
|
|
|
+ :show-overflow-tooltip="true">
|
|
|
<el-table-column type="selection" width="55" />
|
|
|
<el-table-column label="ID" prop="id" width="70" />
|
|
|
<el-table-column label="产品名称" prop="产品名称" width="300" />
|
|
|
@@ -79,30 +60,24 @@
|
|
|
<el-table-column label="效果图" width="120">
|
|
|
<template #default="{ row }">
|
|
|
<el-image
|
|
|
- :src="formatImageUrl(row.产品效果图)"
|
|
|
- :preview-src-list="[formatImageUrl(row.产品效果图)]"
|
|
|
- style="width: 90px; height: 70px;"
|
|
|
- fit="contain"
|
|
|
- preview-teleported
|
|
|
->
|
|
|
- <template #error>
|
|
|
- <div style="width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #f5f7fa; color: #909399; font-size: 12px;">
|
|
|
- <el-icon><Picture /></el-icon>
|
|
|
- <span>暂无效果图</span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
-</el-image>
|
|
|
+ :src="formatImageUrl(row.产品效果图)"
|
|
|
+ :preview-src-list="[formatImageUrl(row.产品效果图)]"
|
|
|
+ style="width: 90px; height: 70px;"
|
|
|
+ fit="contain"
|
|
|
+ preview-teleported>
|
|
|
+ <template #error>
|
|
|
+ <div style="width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #f5f7fa; color: #909399; font-size: 12px;">
|
|
|
+ <el-icon><Picture /></el-icon>
|
|
|
+ <span>暂无效果图</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-image>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="创建时间" prop="创建时间" width="300" />
|
|
|
<el-table-column label="创建人" prop="创建人" width="300" />
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
</el-table>
|
|
|
|
|
|
- <!-- 分页 -->
|
|
|
<div class="gva-pagination">
|
|
|
<el-pagination
|
|
|
@size-change="handleSizeChange"
|
|
|
@@ -111,8 +86,7 @@
|
|
|
:page-sizes="[10, 30, 50, 100]"
|
|
|
:page-size="pageSize"
|
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
|
- :total="total"
|
|
|
- />
|
|
|
+ :total="total"/>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-main>
|
|
|
@@ -120,32 +94,6 @@
|
|
|
</layout>
|
|
|
</layout>
|
|
|
|
|
|
- <!-- 文生图弹窗 -->
|
|
|
- <el-dialog v-model="txtimgDialogVisible" title="文生图" width="660px" top="10%">
|
|
|
- <el-form label-width="100px">
|
|
|
- <el-form-item label="文生图模型">
|
|
|
- <div style="display: flex; align-items: center; gap: 20px; flex-wrap: wrap;">
|
|
|
- <el-radio-group v-model="txtimgselectedModel" @change="handleModelChange">
|
|
|
- <el-radio
|
|
|
- v-for="item in txttoimg_modelList"
|
|
|
- :key="item.id"
|
|
|
- :label="item.txttoimg">
|
|
|
- {{ item.txttoimg }}
|
|
|
- <span v-if="item.id === usedIds.wenshengtu" style="color: #67C23A; margin-left: 5px;">(默认使用)</span>
|
|
|
- </el-radio>
|
|
|
- </el-radio-group>
|
|
|
- <el-button type="success" @click="setActive('wenshengtu')" :disabled="!selectedIds.wenshengtu || selectedIds.wenshengtu === usedIds.wenshengtu">
|
|
|
- 设为默认使用模型
|
|
|
- </el-button>
|
|
|
- </div>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- <template #footer>
|
|
|
- <el-button @click="txtimgDialogVisible = false">取消</el-button>
|
|
|
- <el-button type="primary" @click="generateTxtImg" :loading="isGenerating">生成文生图</el-button>
|
|
|
- </template>
|
|
|
- </el-dialog>
|
|
|
-
|
|
|
<el-dialog
|
|
|
v-model="editDialogVisible"
|
|
|
title="图片对比与编辑"
|
|
|
@@ -160,15 +108,12 @@
|
|
|
<!-- 图片对比区域 -->
|
|
|
<div class="image-comparison-section" style="flex: 1; display: flex; flex-direction: column; gap: 15px;">
|
|
|
<div class="image-item">
|
|
|
- <div class="image-title">原图</div>
|
|
|
<div style="display: flex; justify-content: space-between; width: 100%;">
|
|
|
<div style="display: flex; gap: 12px;">
|
|
|
- <el-button type="primary" size="large" @click="downloadImage('original')">
|
|
|
- <el-icon><Download /></el-icon>下载原图
|
|
|
- </el-button>
|
|
|
- <el-button type="primary" size="large" @click="downloadImage('new')">
|
|
|
- <el-icon><Download /></el-icon>下载新图
|
|
|
+ <el-button type="danger" size="large" @click="editDialogVisible = false">
|
|
|
+ <el-icon><Close /></el-icon>关闭
|
|
|
</el-button>
|
|
|
+
|
|
|
</div>
|
|
|
|
|
|
<div style="display: flex; gap: 12px;">
|
|
|
@@ -182,15 +127,37 @@
|
|
|
</div>
|
|
|
|
|
|
<!-- 原图区域 -->
|
|
|
- <div class="image-preview">
|
|
|
+ <div class="image-preview" style="position: relative;">
|
|
|
<el-image
|
|
|
v-if="editFormData.original_image_url"
|
|
|
:src="formatImageUrl(editFormData.original_image_url)"
|
|
|
- :preview-src-list="[formatImageUrl(editFormData.original_image_url)]"
|
|
|
style="width: 100%; height: 200px;"
|
|
|
fit="contain"
|
|
|
- preview-teleported
|
|
|
/>
|
|
|
+ <!-- 放大图标 -->
|
|
|
+ <el-button
|
|
|
+ v-if="editFormData.original_image_url"
|
|
|
+ type="primary"
|
|
|
+ circle
|
|
|
+ size="medium"
|
|
|
+ style="position: absolute; top: 10px; left: 10px; opacity: 0; transition: opacity 0.3s; z-index: 10;"
|
|
|
+ @click.stop="handleImageZoom(formatImageUrl(editFormData.original_image_url))"
|
|
|
+ class="image-zoom-btn"
|
|
|
+ >
|
|
|
+ <el-icon><ZoomIn /></el-icon>
|
|
|
+ </el-button>
|
|
|
+ <!-- 下载图标 -->
|
|
|
+ <el-button
|
|
|
+ v-if="editFormData.original_image_url"
|
|
|
+ type="primary"
|
|
|
+ circle
|
|
|
+ size="medium"
|
|
|
+ style="position: absolute; top: 10px; right: 10px; opacity: 0; transition: opacity 0.3s; z-index: 10;"
|
|
|
+ @click.stop="downloadImage('original')"
|
|
|
+ class="image-download-btn"
|
|
|
+ >
|
|
|
+ <el-icon><Download /></el-icon>
|
|
|
+ </el-button>
|
|
|
<div v-else class="image-placeholder">
|
|
|
<el-icon :size="40"><Picture /></el-icon>
|
|
|
<span>暂无原图</span>
|
|
|
@@ -201,15 +168,37 @@
|
|
|
</div>
|
|
|
|
|
|
<!-- 新图区域 -->
|
|
|
- <div class="image-preview">
|
|
|
+ <div class="image-preview" style="position: relative;">
|
|
|
<el-image
|
|
|
v-if="editFormData.new_image_url"
|
|
|
:src="formatImageUrl(editFormData.new_image_url)"
|
|
|
- :preview-src-list="[formatImageUrl(editFormData.new_image_url)]"
|
|
|
style="width: 100%; height: 200px;"
|
|
|
fit="contain"
|
|
|
- preview-teleported
|
|
|
/>
|
|
|
+ <!-- 放大图标 -->
|
|
|
+ <el-button
|
|
|
+ v-if="editFormData.new_image_url"
|
|
|
+ type="primary"
|
|
|
+ circle
|
|
|
+ size="medium"
|
|
|
+ style="position: absolute; top: 10px; left: 10px; opacity: 0; transition: opacity 0.3s; z-index: 10;"
|
|
|
+ @click.stop="handleImageZoom(formatImageUrl(editFormData.new_image_url))"
|
|
|
+ class="image-zoom-btn"
|
|
|
+ >
|
|
|
+ <el-icon><ZoomIn /></el-icon>
|
|
|
+ </el-button>
|
|
|
+ <!-- 下载图标 -->
|
|
|
+ <el-button
|
|
|
+ v-if="editFormData.new_image_url"
|
|
|
+ type="primary"
|
|
|
+ circle
|
|
|
+ size="medium"
|
|
|
+ style="position: absolute; top: 10px; right: 10px; opacity: 0; transition: opacity 0.3s; z-index: 10;"
|
|
|
+ @click.stop="downloadImage('new')"
|
|
|
+ class="image-download-btn"
|
|
|
+ >
|
|
|
+ <el-icon><Download /></el-icon>
|
|
|
+ </el-button>
|
|
|
<div v-else class="image-placeholder">
|
|
|
<el-icon :size="40"><Picture /></el-icon>
|
|
|
<span>暂无新图</span>
|
|
|
@@ -232,7 +221,7 @@
|
|
|
placeholder="点击右侧模板图片可自动填充描述内容"
|
|
|
show-word-limit
|
|
|
maxlength="500"
|
|
|
- style="width: 100%; flex: 1;"
|
|
|
+ style="width: 100%;"
|
|
|
/>
|
|
|
</el-form>
|
|
|
|
|
|
@@ -282,9 +271,9 @@
|
|
|
|
|
|
<!-- 右侧：操作按钮 -->
|
|
|
<div style="display: flex; gap: 10px;">
|
|
|
- <el-button size="small" @click="clearInput">清空</el-button>
|
|
|
- <el-button type="primary" size="small" @click="optimizeContent">内容优化</el-button>
|
|
|
- <el-button type="success" size="small" @click="generateImage">生成图片</el-button>
|
|
|
+ <el-button @click="clearInput">清空</el-button>
|
|
|
+ <el-button type="primary" @click="optimizeContent">内容优化</el-button>
|
|
|
+ <el-button type="success" @click="generateImage">生成图片</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -292,12 +281,70 @@
|
|
|
|
|
|
</div>
|
|
|
|
|
|
+ <!-- 中间：产品信息 -->
|
|
|
+ <div class="middle-column" style="width: 430px; border-left: 1px solid #e4e7ed; border-right: 1px solid #e4e7ed; padding: 0 20px;">
|
|
|
+ <div style="height: 100%; display: flex; flex-direction: column;">
|
|
|
+
|
|
|
+ <!-- 上：留出的空白区域 -->
|
|
|
+ <div style="height: 90px; background-image: url('/public/src/assets/top-bg.png'); background-size: cover; background-position: center; border-top-left-radius: 8px; border-top-right-radius: 8px;"></div>
|
|
|
+
|
|
|
+ <!-- 上中：图片显示区域 -->
|
|
|
+ <div style="display: flex; flex-direction: column; align-items: center;">
|
|
|
+ <div style="width: 430px; height: 290px; display: flex; justify-content: center; align-items: center; background-color: white; border-radius: 4px;">
|
|
|
+ <el-image
|
|
|
+ v-if="editFormData.new_image_url && showProductImage"
|
|
|
+ :src="formatImageUrl(editFormData.new_image_url)"
|
|
|
+ :preview-src-list="[formatImageUrl(editFormData.new_image_url)]"
|
|
|
+ style="width: 100%; height: 100%; object-fit: fill;"
|
|
|
+ fit="fill"
|
|
|
+ preview-teleported
|
|
|
+ />
|
|
|
+ <div v-else-if="!showProductImage || !editFormData.new_image_url" class="image-placeholder">
|
|
|
+ <el-icon :size="60"><Picture /></el-icon>
|
|
|
+ <span style="margin-top: 10px; display: block;">暂无产品图片</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 中：商品信息表单 -->
|
|
|
+ <div class="product-info-container" style="height: 320px;border: 12px solid #f6E0dd; border-radius: 4px; padding: 15px;">
|
|
|
+ <div class="product-info-item">
|
|
|
+ <span class="product-info-label">商品条码：</span>
|
|
|
+ <span class="product-info-value">{{ editFormData.barcode || '-' }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="product-info-item">
|
|
|
+ <span class="product-info-label">宏伟编码：</span>
|
|
|
+ <span class="product-info-value">{{ editFormData.code || '-' }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="product-info-item">
|
|
|
+ <span class="product-info-label">产品名称：</span>
|
|
|
+ <span class="product-info-value">{{ editFormData.product_name || '-' }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="product-info-item">
|
|
|
+ <span class="product-info-label">品牌名称：</span>
|
|
|
+ <span class="product-info-value">{{ editFormData.brand_name || '-' }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="product-info-item">
|
|
|
+ <span class="product-info-label">产品规格：</span>
|
|
|
+ <span class="product-info-value">{{ editFormData.specification || '-' }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="product-info-item">
|
|
|
+ <span class="product-info-label">单 位：</span>
|
|
|
+ <span class="product-info-value">{{ editFormData.unit || '-' }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 下：空出来的部分 -->
|
|
|
+ <div style="width: 430px; height: 61px;">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
<!-- 右侧：模板列表 -->
|
|
|
- <div class="right-column" style="flex: 1; border-left: 1px solid #e4e7ed; padding-left: 20px;">
|
|
|
+ <div class="right-column" style="flex: 2; padding-left: 20px;">
|
|
|
<div class="right-template" style="height: 100%; display: flex; flex-direction: column;">
|
|
|
<div class="template-header" style="margin-bottom: 15px;">
|
|
|
- <h4>参考模板 ({{ templateList.length }})</h4>
|
|
|
- <el-tag type="warning" size="small">点击选择</el-tag>
|
|
|
</div>
|
|
|
|
|
|
<!-- 搜索框 -->
|
|
|
@@ -306,7 +353,6 @@
|
|
|
v-model="searchKeyword"
|
|
|
placeholder="输入关键词搜索模板..."
|
|
|
clearable
|
|
|
- size="small"
|
|
|
@keyup.enter="handleSearch"
|
|
|
@clear="handleClearSearch"
|
|
|
>
|
|
|
@@ -314,38 +360,20 @@
|
|
|
<el-icon><Search /></el-icon>
|
|
|
</template>
|
|
|
<template #append>
|
|
|
- <el-button
|
|
|
- :icon="Search"
|
|
|
- size="small"
|
|
|
- :loading="searchLoading"
|
|
|
- @click="handleSearch"
|
|
|
- />搜索
|
|
|
+ <el-button @click="handleSearch" >搜索</el-button>
|
|
|
</template>
|
|
|
</el-input>
|
|
|
</div>
|
|
|
|
|
|
<!-- 模板列表 -->
|
|
|
<div style="flex: 1; min-height: 0;">
|
|
|
+ <h4>参考模板 ({{ templateList.length }})</h4>
|
|
|
<el-scrollbar style="height: 100%;">
|
|
|
<div class="template-list">
|
|
|
- <!-- 搜索结果为空提示 -->
|
|
|
- <div v-if="searchLoading" class="loading-state">
|
|
|
- <el-icon class="loading-icon" :size="30"><Loading /></el-icon>
|
|
|
- <p>搜索中...</p>
|
|
|
- </div>
|
|
|
-
|
|
|
<!-- 搜索无结果提示 -->
|
|
|
<div v-if="!searchLoading && searchKeyword && templateList.length === 0" class="empty-search">
|
|
|
- <el-icon :size="40"><Search /></el-icon>
|
|
|
+ <el-icon :size="50"><Search /></el-icon>
|
|
|
<p>未找到相关模板</p>
|
|
|
- <el-button
|
|
|
- type="text"
|
|
|
- size="small"
|
|
|
- @click="handleClearSearch"
|
|
|
- style="margin-top: 10px;"
|
|
|
- >
|
|
|
- 查看全部模板
|
|
|
- </el-button>
|
|
|
</div>
|
|
|
|
|
|
<!-- 模板项 -->
|
|
|
@@ -356,23 +384,34 @@
|
|
|
:class="{ 'active': currentTemplateId === template.id }"
|
|
|
@click="selectTemplate(template)"
|
|
|
>
|
|
|
- <div class="template-thumbnail">
|
|
|
- <el-image
|
|
|
- :src="template.template_image_url"
|
|
|
- :preview-src-list="[template.template_image_url]"
|
|
|
- style="width: 100%; height: 100%;"
|
|
|
- fit="cover"
|
|
|
- preview-teleported
|
|
|
- hide-on-click-modal
|
|
|
- @click.stop="handleTemplatePreview($event, template)"
|
|
|
- >
|
|
|
- <template #error>
|
|
|
- <div class="thumbnail-error">
|
|
|
- <el-icon><Picture /></el-icon>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </el-image>
|
|
|
+ <div class="template-thumbnail" style="position: relative;">
|
|
|
+ <div class="image-container" @click.stop="selectTemplate(template)">
|
|
|
+ <el-image
|
|
|
+ :src="template.template_image_url"
|
|
|
+ style="width: 100%; height: 100%;"
|
|
|
+ fit="cover"
|
|
|
+ >
|
|
|
+ <template #error>
|
|
|
+ <div class="thumbnail-error">
|
|
|
+ <el-icon><Picture /></el-icon>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-image>
|
|
|
+ <div class="zoom-icon" @click.stop="handleImageZoom(template.template_image_url)">
|
|
|
+ <el-icon :size="20"><ZoomIn /></el-icon>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<div class="template-id">模板 {{ template.id }}</div>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ circle
|
|
|
+ size="small"
|
|
|
+ style="position: absolute; top: 10px; right: 10px; opacity: 0; transition: opacity 0.3s; z-index: 10;"
|
|
|
+ @click.stop="downloadTemplateImage(template.template_image_url)"
|
|
|
+ class="image-download-btn"
|
|
|
+ >
|
|
|
+ <el-icon><Download /></el-icon>
|
|
|
+ </el-button>
|
|
|
</div>
|
|
|
<div class="template-desc" :title="template.chinese_description">
|
|
|
{{ truncateText(template.chinese_description, 25) }}
|
|
|
@@ -386,6 +425,13 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-scrollbar>
|
|
|
+
|
|
|
+ <!-- 图片预览组件 -->
|
|
|
+ <el-image-viewer
|
|
|
+ v-if="previewVisible"
|
|
|
+ :url-list="[previewImageUrl]"
|
|
|
+ @close="previewVisible = false"
|
|
|
+ />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -511,7 +557,7 @@ import { ElMessage, ElLoading} from 'element-plus'
|
|
|
import { getTable, imageToText, Template_ids,txttoimg_moxing,GetHttpUrl,txttoimg_update, getSide,merchantGetab,productList,productDetail,
|
|
|
product_template,GetTxtToTxt,GetProductFind,productAdd,getMerchantId } from '@/api/mes/job'
|
|
|
import { useUserStore } from '@/pinia/modules/user'
|
|
|
-import { ArrowDown } from '@element-plus/icons-vue'
|
|
|
+import { ArrowDown, ZoomIn } from '@element-plus/icons-vue'
|
|
|
import { Layout, LayoutHeader, LayoutSider, LayoutContent } from '@arco-design/web-vue'
|
|
|
const props = defineProps({
|
|
|
editFormData: {
|
|
|
@@ -610,16 +656,25 @@ const form = reactive({
|
|
|
chinese_description: ''
|
|
|
})
|
|
|
|
|
|
+// 控制产品信息部分图片是否显示
|
|
|
+const showProductImage = ref(false)
|
|
|
+
|
|
|
const formatImageUrl = (path) => {
|
|
|
if (!path) return ''
|
|
|
return `${full_url.value}/${path.replace(/^public\//, '')}`
|
|
|
}
|
|
|
|
|
|
+// 点击图片时更新产品信息部分的图片
|
|
|
+const updateProductImage = (imageUrl) => {
|
|
|
+ editFormData.new_image_url = imageUrl
|
|
|
+ showProductImage.value = true
|
|
|
+ ElMessage.success('图片已更新到产品信息区域')
|
|
|
+}
|
|
|
+
|
|
|
const txttoimg_modelList = ref([]); // 存储所有模型数据
|
|
|
const txtimgselectedModel = ref(''); // 当前选中的模型名称
|
|
|
const usedId = ref(null); // 当前使用的模型ID（兼容旧代码）
|
|
|
const selectedId = ref(null); // 用户选择的模型ID（兼容旧代码）
|
|
|
-const txtimgDialogVisible = ref(false); // 文生图弹窗可见性
|
|
|
const isGenerating = ref(false); // 文生图生成中状态
|
|
|
const usedIds = ref({}); // 当前使用的模型ID集合
|
|
|
const selectedIds = ref({}); // 用户选择的模型ID集合
|
|
|
@@ -720,106 +775,6 @@ const setActive = async (type) => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-// // 处理文件夹选择
|
|
|
-// const handleFolderCommand = (command) => {
|
|
|
-// selectedFolder.value = command
|
|
|
-// onSubmit()
|
|
|
-// }
|
|
|
-
|
|
|
-// const onSubmit = () => {
|
|
|
-// page.value = 1
|
|
|
-// getTableData()
|
|
|
-// }
|
|
|
-
|
|
|
-// const handleCurrentChange = (val) => {
|
|
|
-// page.value = val
|
|
|
-// getTableData()
|
|
|
-// }
|
|
|
-
|
|
|
-// const handleSizeChange = (val) => {
|
|
|
-// pageSize.value = val
|
|
|
-// page.value = 1
|
|
|
-// getTableData()
|
|
|
-// }
|
|
|
-
|
|
|
-// const SelectionChange = (rows) => {
|
|
|
-// _parh.value = rows.map(item => item.old_image_url)
|
|
|
-// }
|
|
|
-
|
|
|
-// // 文生图生成函数
|
|
|
-// const generateTxtImg = () => {
|
|
|
-// txtimgDialogVisible.value = false
|
|
|
-// processImages(toRaw(_parh.value), '文生图', form.chinese_description)
|
|
|
-// }
|
|
|
-
|
|
|
-// const texttoimg = async () => {
|
|
|
-// if (_parh.value.length === 0) {
|
|
|
-// ElMessage.warning('请先选择要处理的图片')
|
|
|
-// return
|
|
|
-// }
|
|
|
-// // 获取模型列表
|
|
|
-// await fetchTxtImgModels()
|
|
|
-// // 显示弹窗
|
|
|
-// txtimgDialogVisible.value = true
|
|
|
-// }
|
|
|
-
|
|
|
-// const imgtoimg = () => {
|
|
|
-// processImages(toRaw(_parh.value), '图生图')
|
|
|
-// }
|
|
|
-
|
|
|
-// // 是否执行几何图（默认不执行）
|
|
|
-// const executeKeywords = ref(false)
|
|
|
-
|
|
|
-// const processImages = async (files, type, prompt = '') => {
|
|
|
-// if (!Array.isArray(files) || files.length === 0) {
|
|
|
-// ElMessage.warning('请选择要处理的图片')
|
|
|
-// return
|
|
|
-// }
|
|
|
-
|
|
|
-// const pathGroups = {}
|
|
|
-// _parh.value.forEach(path => {
|
|
|
-// const dir = path.replace(/\/[^\/]*$/, '')
|
|
|
-// if (!pathGroups[dir]) pathGroups[dir] = []
|
|
|
-// pathGroups[dir].push(path)
|
|
|
-// })
|
|
|
-
|
|
|
-// isLoading.value = true
|
|
|
-// const failList = []
|
|
|
-
|
|
|
-// for (const [dir, images] of Object.entries(pathGroups)) {
|
|
|
-// const payload = {
|
|
|
-// old_image_file: dir,
|
|
|
-// type,
|
|
|
-// selectedOption: selectedOption.value,
|
|
|
-// txttotxt_selectedOption: txttotxt_selectedOption.value,
|
|
|
-// batch: images,
|
|
|
-// num: num.value,
|
|
|
-// width: width.value,
|
|
|
-// height: height.value,
|
|
|
-// executeKeywords:executeKeywords.value,
|
|
|
-// }
|
|
|
-
|
|
|
-// try {
|
|
|
-// await imageToText(payload)
|
|
|
-// ElMessage.success(`处理目录：${dir}，共 ${images.length} 张 * ${num.value} 次`)
|
|
|
-// } catch (e) {
|
|
|
-// console.warn('处理失败:', dir, e)
|
|
|
-// images.forEach((_, i) => failList.push(`目录 ${dir} 第 ${i + 1} 张`))
|
|
|
-// }
|
|
|
-// }
|
|
|
-
|
|
|
-// if (failList.length > 0) {
|
|
|
-// ElMessage.warning('部分图片处理失败，请查看控制台')
|
|
|
-// }
|
|
|
-
|
|
|
-// await new Promise(resolve => setTimeout(resolve, 3000))
|
|
|
-// isLoading.value = false
|
|
|
-// }
|
|
|
-
|
|
|
-// const previewImage = (url) => {
|
|
|
-// currentImageUrl.value = url
|
|
|
-// dialogVisible.value = true
|
|
|
-// }
|
|
|
|
|
|
const onRowDblClick = async (row) => {
|
|
|
try {
|
|
|
@@ -896,6 +851,37 @@ const handleTemplateButton = () => {
|
|
|
|
|
|
|
|
|
|
|
|
+// 图片预览相关
|
|
|
+const previewVisible = ref(false)
|
|
|
+const previewImageUrl = ref('')
|
|
|
+
|
|
|
+// 处理图片放大
|
|
|
+const handleImageZoom = (url) => {
|
|
|
+ previewImageUrl.value = url
|
|
|
+ previewVisible.value = true
|
|
|
+}
|
|
|
+
|
|
|
+// 下载模板图片
|
|
|
+const downloadTemplateImage = async (imageUrl) => {
|
|
|
+ try {
|
|
|
+ // 创建一个临时的a标签用于下载
|
|
|
+ const link = document.createElement('a')
|
|
|
+ link.href = imageUrl
|
|
|
+ // 设置文件名，从URL中提取或使用默认名
|
|
|
+ const fileName = imageUrl.split('/').pop() || `template_${Date.now()}.jpg`
|
|
|
+ link.download = fileName
|
|
|
+ // 触发下载
|
|
|
+ document.body.appendChild(link)
|
|
|
+ link.click()
|
|
|
+ // 清理
|
|
|
+ document.body.removeChild(link)
|
|
|
+ ElMessage.success('图片下载成功')
|
|
|
+ } catch (error) {
|
|
|
+ console.error('图片下载失败:', error)
|
|
|
+ ElMessage.error('图片下载失败，请稍后重试')
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
// 截断文本函数
|
|
|
const truncateText = (text, length) => {
|
|
|
if (!text) return '无描述'
|
|
|
@@ -1494,8 +1480,6 @@ const handleRemoveImage = () => {
|
|
|
productForm.product_img = ''
|
|
|
}
|
|
|
|
|
|
-
|
|
|
-
|
|
|
// 暴露方法给父组件
|
|
|
defineExpose({
|
|
|
openDialog
|
|
|
@@ -1512,9 +1496,9 @@ defineExpose({
|
|
|
:deep(.el-table td .cell) {
|
|
|
line-height: 22px !important;
|
|
|
}
|
|
|
- :deep(.el-dialog__body) {
|
|
|
+ /* :deep(.el-dialog__body) {
|
|
|
padding: 10px 20px;
|
|
|
- }
|
|
|
+ } */
|
|
|
.gva-pagination {
|
|
|
margin-top: 10px;
|
|
|
text-align: right;
|
|
|
@@ -1572,8 +1556,6 @@ defineExpose({
|
|
|
|
|
|
.image-preview {
|
|
|
flex: 1;
|
|
|
- border: 1px solid #dcdfe6;
|
|
|
- border-radius: 4px;
|
|
|
overflow: hidden;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
@@ -1607,17 +1589,11 @@ defineExpose({
|
|
|
|
|
|
.image-actions {
|
|
|
display: flex;
|
|
|
- gap: 10px;
|
|
|
justify-content: center;
|
|
|
padding: 10px 0;
|
|
|
}
|
|
|
|
|
|
.edit-section {
|
|
|
- flex: 1;
|
|
|
- border: 1px solid #e4e7ed;
|
|
|
- border-radius: 4px;
|
|
|
- padding: 15px;
|
|
|
- min-height: 200px;
|
|
|
overflow: hidden; /* 防止溢出 */
|
|
|
}
|
|
|
|
|
|
@@ -1640,10 +1616,6 @@ defineExpose({
|
|
|
}
|
|
|
|
|
|
.right-column {
|
|
|
- flex: 1;
|
|
|
- border: 1px solid #e4e7ed;
|
|
|
- border-radius: 4px;
|
|
|
- padding: 15px;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
min-height: 0; /* 防止溢出 */
|
|
|
@@ -1677,22 +1649,26 @@ defineExpose({
|
|
|
.template-list {
|
|
|
flex: 1;
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
+ flex-direction: row;
|
|
|
+ flex-wrap: wrap;
|
|
|
gap: 10px;
|
|
|
overflow-y: auto;
|
|
|
min-height: 0; /* 防止溢出 */
|
|
|
+ padding: 5px;
|
|
|
}
|
|
|
|
|
|
.template-item {
|
|
|
display: flex;
|
|
|
- align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
+ width: calc(33.33% - 7px); /* 一行显示3个，减去gap */
|
|
|
padding: 10px;
|
|
|
- border: 1px solid #e4e7ed;
|
|
|
+ border: 2px solid #e4e7ed;
|
|
|
border-radius: 6px;
|
|
|
cursor: pointer;
|
|
|
transition: all 0.3s;
|
|
|
background: white;
|
|
|
flex-shrink: 0; /* 防止被压缩 */
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.template-item:hover {
|
|
|
@@ -1708,10 +1684,9 @@ defineExpose({
|
|
|
|
|
|
.template-thumbnail {
|
|
|
position: relative;
|
|
|
- width: 160px;
|
|
|
- height: 140px;
|
|
|
- flex-shrink: 0;
|
|
|
- margin-right: 12px;
|
|
|
+ width: 100%;
|
|
|
+ height: 120px;
|
|
|
+ margin-bottom: 8px;
|
|
|
border-radius: 4px;
|
|
|
overflow: hidden;
|
|
|
background: #f5f7fa;
|
|
|
@@ -1723,6 +1698,57 @@ defineExpose({
|
|
|
object-fit: cover;
|
|
|
}
|
|
|
|
|
|
+ .image-container {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .zoom-icon {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 8px;
|
|
|
+ right: 8px;
|
|
|
+ width: 28px;
|
|
|
+ height: 28px;
|
|
|
+ background: rgba(0, 0, 0, 0.6);
|
|
|
+ color: white;
|
|
|
+ border-radius: 50%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ cursor: zoom-in;
|
|
|
+ opacity: 0;
|
|
|
+ transition: opacity 0.3s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .image-container:hover .zoom-icon {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 商品信息项样式 */
|
|
|
+ .product-info-item {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .product-info-label {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #000000;
|
|
|
+ font-weight: bold;
|
|
|
+ width: 90px;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .product-info-value {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #000000;
|
|
|
+ flex: 1;
|
|
|
+ text-align: left;
|
|
|
+ word-break: break-all;
|
|
|
+ }
|
|
|
+
|
|
|
.template-id {
|
|
|
position: absolute;
|
|
|
top: 4px;
|
|
|
@@ -1735,6 +1761,11 @@ defineExpose({
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
|
|
|
+ .image-preview:hover .image-download-btn,
|
|
|
+ .image-preview:hover .image-zoom-btn {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+
|
|
|
.template-desc {
|
|
|
flex: 1;
|
|
|
font-size: 12px;
|
