Ver código fonte

feat(photography): 优化Excel文件上传展示与交互

- 调整header组件z-index值避免层级过高
- 新增已选Excel文件信息展示区域
- 支持显示已上传文件名并提供重新上传按钮
- 添加计算属性提取Excel文件名用于界面展示
- 完善Excel上传区域样式和布局结构
panqiuyao 1 semana atrás
pai
commit
8afd607fba

+ 1 - 1
frontend/src/components/header-bar/blue-header.vue

@@ -79,7 +79,7 @@ function openOTA() {
   justify-content: space-between;
   align-items: center;
   padding: 0 20px;
-  z-index: 100000;
+  z-index: 100;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   app-drag: drag;
   -webkit-app-region: drag;

+ 96 - 3
frontend/src/views/Photography/detail.vue

@@ -229,7 +229,7 @@
                     </div>
                     <div class="template-info">
                       <span class="mar-left-10 chaochu_1">{{ template.template_name }}</span>
-                      <div class="template-view" @click.stop="viewTemplate(template)" v-log="{ describe: { action: '点击查看模板详情', template_name: template.template_name } }">查看</div>
+                      <div class="template-view" v-if="isDetailServiceSelected" @click.stop="viewTemplate(template)" v-log="{ describe: { action: '点击查看模板详情', template_name: template.template_name } }">查看</div>
                     </div>
                   </div>
                 </div>
@@ -291,12 +291,37 @@
                   </el-radio-group>
 
                   <div v-if="form.dataType == '1'" class="excel-upload-section">
-                    <div class="excel-upload-area" @click="selectExcel" v-log="{ describe: { action: '点击选择Excel文件' } }">
+                    <div
+                      v-if="!form.excel_path"
+                      class="excel-upload-area"
+                      @click="selectExcel"
+                      v-log="{ describe: { action: '点击选择Excel文件' } }"
+                    >
                       <div class="excel-icon">
                         <img src="@/assets/images/detail/file-excel.png" class="tab-icon" />
                       </div>
                       <div class="excel-upload-text">点击选择文件</div>
                     </div>
+                    <div v-else class="excel-selected-info">
+                      <div class="excel-file-info">
+                        <div class="excel-icon">
+                          <img src="@/assets/images/detail/file-excel.png" class="tab-icon" />
+                        </div>
+                        <div class="excel-file-text">
+                          <div class="excel-file-label">已选择文件</div>
+                          <div class="excel-file-name" :title="excelFileName">{{ excelFileName }}</div>
+                        </div>
+                      </div>
+                      <el-button
+                        type="primary"
+                        link
+                        class="reupload-btn"
+                        @click="selectExcel"
+                        v-log="{ describe: { action: '重新上传Excel文件' } }"
+                      >
+                        重新上传
+                      </el-button>
+                    </div>
                     <el-button
                       type="text"
                       class="download-link"
@@ -696,6 +721,12 @@ const form = reactive({
   services: ['is_detail'], // 勾选服务内容(多选)默认包含详情页生成
 })
 
+const excelFileName = computed(() => {
+  if (!form.excel_path) return ''
+  const segments = form.excel_path.split(/[/\\]/)
+  return segments[segments.length - 1] || ''
+})
+
 const templatesLoaded = ref(false)
 const lastSelectedTemplateId = ref<string | number | null>(null)
 const isDetailServiceSelected = computed(() => form.services.includes('is_detail'))
@@ -1298,7 +1329,7 @@ const generate = async function () {
     return
   }
 
-  if(form.services.includes('is_detail')){
+  if(form.services.includes('is_detail') || form.services.includes('is_upper_footer')){
     if ( form.dataType == '1'  && !form.excel_path) {
       ElMessage.error('请上传商品基础资料')
       return
@@ -1985,6 +2016,7 @@ const selectFolder = () => {
   .template-pagination {
     pointer-events: none;
   }
+
 }
 
 .publish-section--disabled {
@@ -2134,6 +2166,67 @@ const selectFolder = () => {
         }
       }
 
+      .excel-selected-info {
+        width: 100%;
+        height: 64px;
+        border: 1px solid #E5E6EB;
+        border-radius: 8px;
+        padding: 12px 16px;
+        background: #fff;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 16px;
+        box-sizing: border-box;
+
+        .excel-file-info {
+          display: flex;
+          align-items: center;
+          flex: 1;
+          min-width: 0;
+
+          .excel-icon {
+            width: 32px;
+            height: 32px;
+            margin-right: 10px;
+
+            img {
+              width: 32px;
+              height: 32px;
+              display: block;
+            }
+          }
+
+          .excel-file-text {
+            display: flex;
+            flex-direction: column;
+            min-width: 0;
+            max-width: 100%;
+
+            .excel-file-label {
+              font-size: 12px;
+              text-align: left;
+              color: #888;
+              margin-bottom: 4px;
+            }
+
+            .excel-file-name {
+              font-size: 14px;
+              color: #1D2129;
+              font-weight: 500;
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              max-width: 100%;
+            }
+          }
+        }
+
+        .reupload-btn {
+          flex-shrink: 0;
+        }
+      }
+
       .download-link {
         color: #2957FF;
         text-decoration: underline;