|
|
@@ -4,31 +4,61 @@
|
|
|
|
|
|
<div class="detail-container">
|
|
|
<div>
|
|
|
- <!-- 处理模式 -->
|
|
|
- <div class="logo-section flex left top" >
|
|
|
- <div class="section-title" style="margin-bottom: 0px;">
|
|
|
+ <!-- 顶部：勾选服务内容（多选） -->
|
|
|
+ <div class="service-section flex between top">
|
|
|
+ <div class="section-title">
|
|
|
<img src="@/assets/images/Photography/zhuangshi.png" style="width: 32px; height: 32px;" />
|
|
|
- 处理模式：
|
|
|
-
|
|
|
- <el-checkbox v-model="form.is_only_cutout"
|
|
|
- true-value="1"
|
|
|
- false-value="0"
|
|
|
- true-label="1"
|
|
|
- false-label="0"
|
|
|
- label="仅抠图模式"/>
|
|
|
- <span class="flex left" style="font-weight: normal; font-size: 12px; color: #666">
|
|
|
- <el-icon><QuestionFilled /></el-icon>
|
|
|
- 如您勾选仅抠图模式，将只做抠图处理，不再自动生成详情页。
|
|
|
- </span>
|
|
|
+ 勾选服务内容（多选）：
|
|
|
+ </div>
|
|
|
+ <div class="service-cards">
|
|
|
+ <div class="service-card" :class="{ active: form.services.includes('scene') }" @click="toggleService('scene')" v-log="{ describe: { action: '点击服务卡片', service: '场景图生成' } }">
|
|
|
+ <div class="service-checkbox" @click.stop>
|
|
|
+ <el-checkbox size="large" :model-value="form.services.includes('scene')" @change="toggleService('scene')" />
|
|
|
+ </div>
|
|
|
+ <div class="service-content">
|
|
|
+ <div class="service-image">
|
|
|
+ <img src="@/assets/images/Photography/cj.png" alt="场景图生成" />
|
|
|
+ <div class="service-icon">
|
|
|
+ <el-icon><EditPen /></el-icon>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="service-name">场景图生成</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="service-card" :class="{ active: form.services.includes('model') }" @click="toggleService('model')" v-log="{ describe: { action: '点击服务卡片', service: '模特图生成' } }">
|
|
|
+ <div class="service-checkbox" @click.stop>
|
|
|
+ <el-checkbox size="large" :model-value="form.services.includes('model')" @change="toggleService('model')" />
|
|
|
+ </div>
|
|
|
+ <div class="service-content">
|
|
|
+ <div class="service-image">
|
|
|
+ <img src="@/assets/images/Photography/mt.png" alt="模特图生成" />
|
|
|
+ <div class="service-icon">
|
|
|
+ <el-icon><EditPen /></el-icon>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="service-name">模特图生成</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="service-card" :class="{ active: form.services.includes('detail') }" @click="toggleService('detail')" v-log="{ describe: { action: '点击服务卡片', service: '详情页生成' } }">
|
|
|
+ <div class="service-checkbox" @click.stop>
|
|
|
+ <el-checkbox size="large" :model-value="form.services.includes('detail')" @change="toggleService('detail')" />
|
|
|
+ </div>
|
|
|
+ <div class="service-content">
|
|
|
+ <div class="service-image">
|
|
|
+ <img src="@/assets/images/Photography/xq.png" alt="详情页生成" />
|
|
|
+ </div>
|
|
|
+ <div class="service-name">详情页生成</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <template v-if="form.is_only_cutout == 0">
|
|
|
<!-- 主图LOGO部分 -->
|
|
|
+<!--
|
|
|
<div class="logo-section flex left top" >
|
|
|
<div class="section-title" style="margin-bottom: 0px;">
|
|
|
<img src="@/assets/images/Photography/zhuangshi.png" style="width: 32px; height: 32px;" />
|
|
|
- 主图LOGO：
|
|
|
+ 主图LOGO 与 选择详情模板：
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="logo-section flex left top multi-line">
|
|
|
@@ -43,6 +73,7 @@
|
|
|
></upload>
|
|
|
<upload @input="onInput"></upload>
|
|
|
</div>
|
|
|
+-->
|
|
|
|
|
|
<el-divider />
|
|
|
<!-- <!– 图片抠图与货号图生成 –>
|
|
|
@@ -89,40 +120,85 @@
|
|
|
</div>
|
|
|
<el-divider />-->
|
|
|
|
|
|
- <!-- 选择详情模板部分 -->
|
|
|
- <div class="template-section ">
|
|
|
- <div class="flex between">
|
|
|
- <div class="section-title">
|
|
|
- <img src="@/assets/images/Photography/zhuangshi.png" style="width: 32px; height: 32px;" />
|
|
|
- 选择详情模版
|
|
|
+ <!-- 主图LOGO 与 选择详情模板：左右布局 -->
|
|
|
+ <div class="logo-template-row">
|
|
|
+ <!-- 左：主图LOGO -->
|
|
|
+ <div class="logo-col">
|
|
|
+ <div class="logo-section flex left top" >
|
|
|
+ <div class="section-title" style="margin-bottom: 0px;">
|
|
|
+ <img src="@/assets/images/Photography/zhuangshi.png" style="width: 32px; height: 32px;" />
|
|
|
+ 主图LOGO：
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="template-pagination">
|
|
|
- <el-pagination background layout="prev, pager, next" v-model:current-page="queryParams.current"
|
|
|
- v-model:page-size.sync="queryParams.size" :total="totalPage" @current-change="onCurrentChange"
|
|
|
- @size-change="onSizeChange" />
|
|
|
+ <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>
|
|
|
</div>
|
|
|
|
|
|
- <div class="template-list">
|
|
|
- <div v-for="(template, index) in visibleTemplates" :key="index" class="template-item"
|
|
|
- @click="form.selectTemplate = template" v-log="{ describe: { action: '点击选择详情模板', template_name: template.template_name } }">
|
|
|
- <el-image :src="template.template_cover_image" fit="contain" class="cur-p"
|
|
|
- style="width: 100%; display: block;" />
|
|
|
- <div class="select-warp" :class="form.selectTemplate.id == template.id ? 'active' : ''">
|
|
|
- <el-icon color="#FFFFFF">
|
|
|
- <Select />
|
|
|
- </el-icon>
|
|
|
+ <!-- 右：选择详情模板 -->
|
|
|
+ <div class="template-col">
|
|
|
+ <div class="template-section ">
|
|
|
+ <div class="flex between">
|
|
|
+ <div class="section-title">
|
|
|
+ <img src="@/assets/images/Photography/zhuangshi.png" style="width: 32px; height: 32px;" />
|
|
|
+ 选择详情模版
|
|
|
+ </div>
|
|
|
+ <div class="template-pagination">
|
|
|
+ <el-pagination background layout="prev, pager, next" v-model:current-page="queryParams.current"
|
|
|
+ v-model:page-size.sync="queryParams.size" :total="totalPage" @current-change="onCurrentChange"
|
|
|
+ @size-change="onSizeChange" />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="template-info">
|
|
|
- <span class="mar-left-10 chaochu_1">{{ template.template_name }}</span>
|
|
|
- <div class="template-view" @click="viewTemplate(template)" v-log="{ describe: { action: '点击查看模板详情', template_name: template.template_name } }">查看</div>
|
|
|
+
|
|
|
+ <div class="template-list">
|
|
|
+ <div v-for="(template, index) in visibleTemplates" :key="index" class="template-item"
|
|
|
+ @click="form.selectTemplate = template" v-log="{ describe: { action: '点击选择详情模板', template_name: template.template_name } }">
|
|
|
+ <el-image :src="template.template_cover_image" fit="contain" class="cur-p"
|
|
|
+ style="width: 100%; display: block;" />
|
|
|
+ <div class="select-warp" :class="form.selectTemplate.id == template.id ? 'active' : ''">
|
|
|
+ <el-icon color="#FFFFFF">
|
|
|
+ <Select />
|
|
|
+ </el-icon>
|
|
|
+ </div>
|
|
|
+ <div class="template-info">
|
|
|
+ <span class="mar-left-10 chaochu_1">{{ template.template_name }}</span>
|
|
|
+ <div class="template-view" @click="viewTemplate(template)" v-log="{ describe: { action: '点击查看模板详情', template_name: template.template_name } }">查看</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
|
|
|
- <div class="template-tips c-333 fs-14 line-20 te-l mar-top-20 flex left">
|
|
|
- <el-icon><WarningFilled /></el-icon>
|
|
|
- <span class="mar-left-10">该模版图片顺序说明：{{form.selectTemplate.template_image_order}}</span>
|
|
|
+ <div class="template-tips c-333 fs-14 line-20 te-l mar-top-20 flex left">
|
|
|
+ <el-icon><WarningFilled /></el-icon>
|
|
|
+ <span class="mar-left-10">该模版图片顺序说明：{{form.selectTemplate.template_image_order}}</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 模板下：一键上架 和 国内电商平台（多选） -->
|
|
|
+ <div class="publish-section flex left" v-if="onlineStores.length">
|
|
|
+ <div class="form-item flex left">
|
|
|
+ <div class="fw-b">一键上架：</div>
|
|
|
+ </div>
|
|
|
+ <div class="form-item flex left mar-top-10">
|
|
|
+ <div class="label">国内电商平台：</div>
|
|
|
+ <el-select v-model="domesticPlatforms" multiple placeholder="请选择平台" style="min-width: 200px;">
|
|
|
+ <el-option
|
|
|
+ v-for="store in onlineStores"
|
|
|
+ :key="store"
|
|
|
+ :label="store"
|
|
|
+ :value="store"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<el-divider />
|
|
|
@@ -193,7 +269,6 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </template>
|
|
|
</div>
|
|
|
<!-- 底部按钮 -->
|
|
|
<div class="footer">
|
|
|
@@ -211,7 +286,25 @@
|
|
|
<span>{{ item.goods_art_no }}</span>：<span>{{ item.info }}</span>
|
|
|
</div>
|
|
|
</template>
|
|
|
-
|
|
|
+ <template #progressMessages>
|
|
|
+ <div class="progress-messages" v-if="progressMessages.length">
|
|
|
+ <div class="message-header">
|
|
|
+ <span>处理进度</span>
|
|
|
+ <el-button type="text" @click="showMessageHistory = !showMessageHistory" v-log="{ describe: { action: '点击查看进度详情' } }">
|
|
|
+ {{ showMessageHistory ? '收起' : '查看详情' }}
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <div class="message-list" v-if="showMessageHistory">
|
|
|
+ <div v-for="(msg, index) in progressMessages" :key="index" class="message-item flex left">
|
|
|
+ <div class="message-time">{{ formatTime(msg.timestamp) }}</div>
|
|
|
+ <div class="message-content mar-left-10">
|
|
|
+ <span class="goods-no">货号{{ msg.goods_art_nos.join(', ') }}：</span>
|
|
|
+ <span class="message-text">{{ msg.msg }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
</loading-dialog>
|
|
|
<el-dialog v-model="dialogVisible">
|
|
|
<img style="width: 100%;" :src="dialogImageUrl" alt="Preview Image" />
|
|
|
@@ -233,14 +326,16 @@ import { clickLog, setLogInfo } from '@/utils/log'
|
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
|
|
|
|
import headerBar from '@/components/header-bar/index.vue'
|
|
|
-import { ref, computed, reactive, onMounted } from 'vue';
|
|
|
-import { Select } from '@element-plus/icons-vue'
|
|
|
+import { ref, computed, reactive, onMounted, onBeforeUnmount } from 'vue';
|
|
|
+import { Select, EditPen } from '@element-plus/icons-vue'
|
|
|
import upload from '@/components/upload'
|
|
|
import client from "@/stores/modules/client";
|
|
|
import icpList from '@/utils/ipc'
|
|
|
const clientStore = client();
|
|
|
import { getRouterUrl } from '@/utils/appfun'
|
|
|
import { useUuidStore } from '@/stores/modules/uuid'
|
|
|
+import socket from "@/stores/modules/socket";
|
|
|
+const socketStore = socket();
|
|
|
|
|
|
import { Close, Warning } from '@element-plus/icons-vue'
|
|
|
import LoadingDialog from '@/views/Photography/components/LoadingDialog.vue'
|
|
|
@@ -270,6 +365,16 @@ const loadingDialogVisible = ref(false)
|
|
|
const progress = ref(0)
|
|
|
const message = ref('正在为您处理，请稍后')
|
|
|
const disabledButton = ref(true)
|
|
|
+// 进度消息队列
|
|
|
+const progressMessages = ref<Array<{
|
|
|
+ goods_no: string
|
|
|
+ temp_name: string
|
|
|
+ status: string
|
|
|
+ goods_art_nos: string[]
|
|
|
+ msg: string
|
|
|
+ timestamp: number
|
|
|
+}>>([])
|
|
|
+const showMessageHistory = ref(true)
|
|
|
|
|
|
let templates = ref([])
|
|
|
let goods_art_nos = ref([])
|
|
|
@@ -302,7 +407,7 @@ const form = reactive({
|
|
|
dataType: '1', // 1: 选择excel文件 2: 系统对接
|
|
|
logo_path: '', // 主图LOGO
|
|
|
excel_path: '', // 商品基础资料EXCEL文件选择
|
|
|
- is_only_cutout:0, //是否仅抠图模式
|
|
|
+ services: ['detail'], // 勾选服务内容（多选）默认包含详情页生成
|
|
|
})
|
|
|
onMounted(() => {
|
|
|
// 页面访问埋点
|
|
|
@@ -313,6 +418,14 @@ onMounted(() => {
|
|
|
getLogolist()
|
|
|
})
|
|
|
|
|
|
+// 页面卸载时清理监听器
|
|
|
+onBeforeUnmount(() => {
|
|
|
+ clientStore.ipc.removeAllListeners(icpList.socket.message + '_detail_progress');
|
|
|
+ clientStore.ipc.removeAllListeners(icpList.socket.message + '_segment_progress');
|
|
|
+ clientStore.ipc.removeAllListeners(icpList.generate.generatePhotoDetail);
|
|
|
+ clearInterval(INTERVAL.value);
|
|
|
+})
|
|
|
+
|
|
|
|
|
|
// 计算属性，获取当前页可见的模板
|
|
|
const visibleTemplates = computed(() => {
|
|
|
@@ -331,6 +444,7 @@ const viewTemplate = (template) => {
|
|
|
const getCompanyTemplates = async () => {
|
|
|
const { data } = await getCompanyTemplatesApi()
|
|
|
templates.value = data.list
|
|
|
+ onlineStores.value = data.online_stores || [] // 获取电商平台列表
|
|
|
// 默认选中第一个模板
|
|
|
if (templates.value.length > 0) {
|
|
|
form.selectTemplate = templates.value[0]
|
|
|
@@ -350,6 +464,24 @@ const downloadExcel = () => {
|
|
|
document.body.removeChild(a);
|
|
|
}, 1000);
|
|
|
}
|
|
|
+// 服务内容切换
|
|
|
+const toggleService = (key: string) => {
|
|
|
+ const idx = form.services.indexOf(key)
|
|
|
+ if (idx > -1) form.services.splice(idx, 1)
|
|
|
+ else form.services.push(key)
|
|
|
+}
|
|
|
+
|
|
|
+// 国内电商平台多选与一键上架
|
|
|
+const domesticPlatforms = ref<string[]>([])
|
|
|
+const onlineStores = ref<any[]>([]) // 从接口获取的电商平台列表
|
|
|
+const publishToPlatforms = () => {
|
|
|
+ if (!domesticPlatforms.value.length) {
|
|
|
+ ElMessage.warning('请选择至少一个电商平台')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ clickLog({ describe: { action: '点击一键上架', platforms: domesticPlatforms.value } }, route)
|
|
|
+ // 具体上架逻辑按后续接口对接
|
|
|
+}
|
|
|
|
|
|
|
|
|
|
|
|
@@ -362,13 +494,57 @@ const onSizeChange = (data) => {
|
|
|
|
|
|
|
|
|
|
|
|
+// 格式化时间
|
|
|
+const formatTime = (timestamp: number) => {
|
|
|
+ const date = new Date(timestamp)
|
|
|
+ return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}:${date.getSeconds().toString().padStart(2, '0')}`
|
|
|
+}
|
|
|
+
|
|
|
+// 处理进度消息
|
|
|
+const handleProgressMessage = (data: any) => {
|
|
|
+ console.log("detail_progress", data);
|
|
|
+
|
|
|
+ if (data.code === 0 && data.msg_type === 'detail_progress') {
|
|
|
+ const messageData = {
|
|
|
+ goods_no: data.data.goods_no,
|
|
|
+ temp_name: data.data.temp_name,
|
|
|
+ status: data.data.status,
|
|
|
+ goods_art_nos: data.data.goods_art_nos,
|
|
|
+ msg: data.msg,
|
|
|
+ timestamp: Date.now()
|
|
|
+ }
|
|
|
+ progressMessages.value.push(messageData)
|
|
|
+ // 更新当前显示的消息
|
|
|
+ message.value = `货号${data.data.goods_art_nos.join(', ')}：${data.msg}`
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 处理抠图进度消息
|
|
|
+const handleSegmentProgressMessage = (data: any) => {
|
|
|
+ console.log("segment_progress", data);
|
|
|
+
|
|
|
+ if (data.code === 0 && data.msg_type === 'segment_progress') {
|
|
|
+ const messageData = {
|
|
|
+ goods_no: '',
|
|
|
+ temp_name: '',
|
|
|
+ status: data.data.status,
|
|
|
+ goods_art_nos: data.data.goods_art_nos,
|
|
|
+ msg: data.msg,
|
|
|
+ timestamp: Date.now()
|
|
|
+ }
|
|
|
+ progressMessages.value.push(messageData)
|
|
|
+ // 更新当前显示的消息
|
|
|
+ message.value = `货号${data.data.goods_art_nos.join(', ')}：${data.msg}`
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
// 开始生成操作
|
|
|
const generate = async function () {
|
|
|
// 埋点：开始生成详情页
|
|
|
clickLog({
|
|
|
describe: {
|
|
|
action: '点击开始生成详情页',
|
|
|
- is_only_cutout: form.is_only_cutout,
|
|
|
+ services: form.services,
|
|
|
dataType: form.dataType,
|
|
|
template_name: form.selectTemplate.template_name,
|
|
|
goods_count: goods_art_nos.value.length,
|
|
|
@@ -376,12 +552,9 @@ const generate = async function () {
|
|
|
}
|
|
|
}, route);
|
|
|
|
|
|
- if(form.is_only_cutout == 0 ){
|
|
|
-
|
|
|
- if ( form.dataType == '1' && !form.excel_path) {
|
|
|
- ElMessage.error('请上传商品基础资料')
|
|
|
- return
|
|
|
- }
|
|
|
+ if ( form.dataType == '1' && !form.excel_path) {
|
|
|
+ ElMessage.error('请上传商品基础资料')
|
|
|
+ return
|
|
|
}
|
|
|
const tokenInfoStore = tokenInfo();
|
|
|
const token = tokenInfoStore.getToken; // 使用 getToken() 获取 token
|
|
|
@@ -394,7 +567,6 @@ const generate = async function () {
|
|
|
})
|
|
|
const params = {
|
|
|
goods_art_no: JSON.parse(JSON.stringify(goods_art_nos.value)),
|
|
|
- is_only_cutout: form.is_only_cutout || '0',
|
|
|
logo_path: form.logo_path || '',
|
|
|
temp_name: form.selectTemplate.template_id || '',
|
|
|
excel_path: form.dataType == '1' ? form.excel_path : '',
|
|
|
@@ -406,13 +578,29 @@ const generate = async function () {
|
|
|
console.log(params);
|
|
|
// 开启进度弹窗
|
|
|
requesting.value = false
|
|
|
- console.log("params", "color:#3f7cff", params);
|
|
|
partErrList.value = []
|
|
|
message.value = '正在为您处理，请稍后'
|
|
|
progress.value = 0
|
|
|
+ // 清空之前的进度消息
|
|
|
+ progressMessages.value = []
|
|
|
+ showMessageHistory.value = true
|
|
|
+
|
|
|
openLoadingDialog(goods_art_nos.value.length * 10)
|
|
|
clientStore.ipc.removeAllListeners(icpList.generate.generatePhotoDetail);
|
|
|
clientStore.ipc.send(icpList.generate.generatePhotoDetail, params);
|
|
|
+
|
|
|
+ // 监听进度消息
|
|
|
+ clientStore.ipc.removeAllListeners(icpList.socket.message + '_detail_progress');
|
|
|
+ clientStore.ipc.on(icpList.socket.message + '_detail_progress', (event, data) => {
|
|
|
+ console.log('_detail_progress',data);
|
|
|
+ handleProgressMessage(data)
|
|
|
+ });
|
|
|
+
|
|
|
+ // 监听抠图进度消息
|
|
|
+ clientStore.ipc.removeAllListeners(icpList.socket.message + '_segment_progress');
|
|
|
+ clientStore.ipc.on(icpList.socket.message + '_segment_progress', (event, data) => {
|
|
|
+ handleSegmentProgressMessage(data)
|
|
|
+ });
|
|
|
clientStore.ipc.on(icpList.generate.generatePhotoDetail, (event, result) => {
|
|
|
if(result.code !== 0 ){
|
|
|
if(result.msg){
|
|
|
@@ -426,7 +614,11 @@ const generate = async function () {
|
|
|
|
|
|
console.log('result', result)
|
|
|
requesting.value = true
|
|
|
- clientStore.ipc.removeAllListeners(icpList.generate.generatePhotoDetail);
|
|
|
+ setTimeout(() => {
|
|
|
+ clientStore.ipc.removeAllListeners(icpList.generate.generatePhotoDetail);
|
|
|
+ clientStore.ipc.removeAllListeners(icpList.socket.message + '_detail_progress');
|
|
|
+ clientStore.ipc.removeAllListeners(icpList.socket.message + '_segment_progress');
|
|
|
+ }, 500)
|
|
|
clearInterval(INTERVAL.value)
|
|
|
if (result.code === 0) {
|
|
|
const { output_folder, list } = result.data
|
|
|
@@ -453,6 +645,10 @@ const generate = async function () {
|
|
|
if (errorMsg) {
|
|
|
ElMessage.error(errorMsg)
|
|
|
}
|
|
|
+
|
|
|
+ // 处理完成后停止监听进度消息
|
|
|
+ // clientStore.ipc.removeAllListeners(icpList.socket.message + '_detail_progress');
|
|
|
+ // clientStore.ipc.removeAllListeners(icpList.socket.message + '_segment_progress');
|
|
|
}
|
|
|
|
|
|
// 全部生成成功
|
|
|
@@ -464,6 +660,8 @@ const generate = async function () {
|
|
|
progress.value = 100
|
|
|
disabledButton.value = false
|
|
|
message.value = loadingMsg
|
|
|
+
|
|
|
+
|
|
|
handleComplete()
|
|
|
}
|
|
|
// 部分成功
|
|
|
@@ -494,6 +692,7 @@ const generate = async function () {
|
|
|
progress.value = 100
|
|
|
disabledButton.value = true
|
|
|
message.value = '全部货号生成失败'
|
|
|
+
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
@@ -652,12 +851,119 @@ const selectFolder = () => {
|
|
|
|
|
|
}
|
|
|
|
|
|
+.service-section {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ .service-cards {
|
|
|
+ display: flex;
|
|
|
+ gap: 60px;
|
|
|
+ margin-top: 16px;
|
|
|
+ }
|
|
|
+ .service-card {
|
|
|
+ width: 240px;
|
|
|
+ height: 140px;
|
|
|
+
|
|
|
+ border-radius: 8px;
|
|
|
+ background: #fff;
|
|
|
+ border: 1px solid #e0e0e0;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ padding: 12px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ border-color: #2957FF;
|
|
|
+ box-shadow: 0 2px 8px rgba(41, 87, 255, 0.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ border: 3px solid #2957FF;
|
|
|
+ background: #f8f9ff;
|
|
|
+ box-shadow: 0 4px 12px rgba(41, 87, 255, 0.25);
|
|
|
+ }
|
|
|
+
|
|
|
+ .service-checkbox {
|
|
|
+ position: absolute;
|
|
|
+ left: -40px;
|
|
|
+ top: 10px;
|
|
|
+ width: 30px;
|
|
|
+ transform: scale(1.5);
|
|
|
+ z-index: 10;
|
|
|
+ ::v-deep{
|
|
|
+ .el-checkbox {
|
|
|
+ display: block;
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ .el-checkbox__input {
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .service-content {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;;
|
|
|
+ }
|
|
|
+
|
|
|
+ .service-image {
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .service-icon {
|
|
|
+ position: absolute;
|
|
|
+ top: 10px;
|
|
|
+ right: 10px;
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ background: #2957FF;
|
|
|
+ border-radius: 50%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: white;
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .service-name {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333;
|
|
|
+ font-weight: 500;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
.logo-section,
|
|
|
.template-section,
|
|
|
.data-prep-section {
|
|
|
margin-bottom: 20px;
|
|
|
}
|
|
|
|
|
|
+.logo-template-row {
|
|
|
+ display: flex;
|
|
|
+ gap: 24px;
|
|
|
+ align-items: flex-start;
|
|
|
+ .logo-col { flex: 1; min-width: 300px; }
|
|
|
+ .template-col { flex: 3; }
|
|
|
+}
|
|
|
+
|
|
|
.logo-section {
|
|
|
.upload-item {
|
|
|
border: 2px solid rgba(0,0,0,0);
|
|
|
@@ -749,6 +1055,13 @@ const selectFolder = () => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+.publish-section {
|
|
|
+ .label {
|
|
|
+ min-width: 120px;
|
|
|
+ margin-right: 12px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
|
|
|
|
|
|
.excel-upload {
|
|
|
@@ -917,4 +1230,61 @@ const selectFolder = () => {
|
|
|
padding-right: 20px;
|
|
|
color: #2957FF !important;
|
|
|
}
|
|
|
+
|
|
|
+.progress-messages {
|
|
|
+ margin-top: 20px;
|
|
|
+ border-top: 1px solid #e4e7ed;
|
|
|
+ padding-top: 20px;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .message-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #606266;
|
|
|
+ }
|
|
|
+
|
|
|
+ .message-list {
|
|
|
+ max-height: 200px;
|
|
|
+ overflow-y: auto;
|
|
|
+ border: 1px solid #e4e7ed;
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 10px;
|
|
|
+ background: #fafafa;
|
|
|
+
|
|
|
+ .message-item {
|
|
|
+ margin-bottom: 12px;
|
|
|
+ padding-bottom: 12px;
|
|
|
+ border-bottom: 1px solid #f0f0f0;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+ padding-bottom: 0;
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .message-time {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #909399;
|
|
|
+ margin-bottom: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .message-content {
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 1.4;
|
|
|
+
|
|
|
+ .goods-no {
|
|
|
+ color: #2957FF;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+
|
|
|
+ .message-text {
|
|
|
+ color: #606266;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
