From 09a89dc1454095811e01958908abd2aa7c2968e1 Mon Sep 17 00:00:00 2001
From: liuhuayong <995058772@qq.com>
Date: Sat, 5 Jul 2025 20:06:14 +0800
Subject: [PATCH] 111

---
 src/views/douyin/goods_info/index.vue | 144 ++++++++++++--------------
 1 file changed, 69 insertions(+), 75 deletions(-)

diff --git a/src/views/douyin/goods_info/index.vue b/src/views/douyin/goods_info/index.vue
index 5050b85..a946920 100644
--- a/src/views/douyin/goods_info/index.vue
+++ b/src/views/douyin/goods_info/index.vue
@@ -1,59 +1,41 @@
 <template>
   <div class="tool-container">
-    <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
-      <el-row>
-        <el-col :span="24">
-      <el-form-item label="Excel文件" >
-          <el-upload
-            class="upload-demo"
-            :on-preview="handlePreview"
-            :on-remove="handleRemove"
-            :before-remove="beforeRemove"
-            multiple
-            :auto-upload="true"
-            accept=".xlsx, .xls, .csv" 
-            method="get"
-            :headers="upload.headers" 
-            :on-success="handleSuccess"
-            :action="upload.url"
-            :limit="1"
-            :on-exceed="handleExceed"
-            :file-list="fileList1">
-            <el-button size="small" type="primary">点击上传</el-button>
-            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
-          </el-upload>
-      </el-form-item>
-        </el-col>
-        <el-col :span="24">
-      <el-form-item label="图片压缩包文件" >
-          <el-upload
-            class="upload-demo"
-            :on-preview="handlePreview"
-            :on-remove="handleRemove2"
-            :before-remove="beforeRemove"
-            :auto-upload="true"
-            accept=".zip, .rar" 
-            method="get"
-            :headers="upload.headers" 
-            :action="upload.url"
-            :on-success="handleSuccess2"
-            :limit="1"
-            :on-exceed="handleExceed"
-            :file-list="fileList2">
-            <el-button size="small" type="primary">点击上传</el-button>
-            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
-          </el-upload>
-      </el-form-item>
-      </el-col>
-      </el-row>
-    </el-form>
-      <el-button type="text" @click="cancel">取消</el-button>
+    <el-card class="box-card">
+      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="Excel文件" label-width="180px">
+              <el-upload class="upload-demo" :on-preview="handlePreview" :on-remove="handleRemove"
+                :before-remove="beforeRemove" multiple :auto-upload="true" accept=".xlsx, .xls, .csv" method="get"
+                :headers="upload.headers" :on-success="handleSuccess" :action="upload.url" :limit="1"
+                :on-exceed="handleExceed" :file-list="fileList1">
+                <el-button size="small" type="primary">点击上传</el-button>
+                <div slot="tip" class="el-upload__tip">只能上传xlsx/xls/csv文件，且不超过100M</div>
+              </el-upload>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="图片压缩包文件" label-width="180px">
+              <el-upload class="upload-demo" :on-preview="handlePreview" :on-remove="handleRemove2"
+                :before-remove="beforeRemove" :auto-upload="true" accept=".zip, .rar" method="get"
+                :headers="upload.headers" :action="upload.url" :on-success="handleSuccess2" :limit="1"
+                :on-exceed="handleExceed" :file-list="fileList2">
+                <el-button size="small" type="primary">点击上传</el-button>
+                <div slot="tip" class="el-upload__tip">只能上传zip文件，且不超过100M</div>
+              </el-upload>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </el-card>
+    <div class="button-container">
       <el-button :loading="loading" type="primary" @click="download">图片处理</el-button>
     </div>
+  </div>
 </template>
 
 <script>
-import { add, edit,processImage } from '@/api/DouyinGoodsInfo'
+import { add, edit, processImage } from '@/api/DouyinGoodsInfo'
 import { getToken } from "@/utils/auth";
 import { parseTime, downloadFile, parseDate } from '@/utils/index'
 
@@ -61,19 +43,19 @@ export default {
   data() {
     return {
       upload: {
-                // 是否显示弹出层（用户导入）
-                open: false,
-                // 弹出层标题（用户导入）
-                title: "",
-                // 是否禁用上传
-                isUploading: false,
-                // 设置上传的请求头部
-                headers: { Authorization: "Bearer " + getToken() },
-                // 上传的地址
-                url: "/api/DouyinGoodsInfo/saveFile"
+        // 是否显示弹出层（用户导入）
+        open: false,
+        // 弹出层标题（用户导入）
+        title: "",
+        // 是否禁用上传
+        isUploading: false,
+        // 设置上传的请求头部
+        headers: { Authorization: "Bearer " + getToken() },
+        // 上传的地址
+        url: "/api/DouyinGoodsInfo/saveFile"
       },
       fileList1: [],
-            fileList2: [],
+      fileList2: [],
       loading: false, dialog: false,
       params: {},
       form: {
@@ -102,22 +84,22 @@ export default {
         this.loading = false
       })
     },
-   handleRemove(file, fileList) {
-     console.log(file, fileList);
-        this.params['excelFileName'] = '';
+    handleRemove(file, fileList) {
+      console.log(file, fileList);
+      this.params['excelFileName'] = '';
     },
-       handleRemove2(file, fileList) {
-     console.log(file, fileList);
-        this.params['zipFileName'] = '';
-      },
-      handlePreview(file) {
-        console.log(file);
-      },
-      handleExceed(files, fileList) {
-        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
-      },
-      beforeRemove(file, fileList) {
-        return this.$confirm(`确定移除 ${ file.name }？`);
+    handleRemove2(file, fileList) {
+      console.log(file, fileList);
+      this.params['zipFileName'] = '';
+    },
+    handlePreview(file) {
+      console.log(file);
+    },
+    handleExceed(files, fileList) {
+      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
+    },
+    beforeRemove(file, fileList) {
+      return this.$confirm(`确定移除 ${file.name}？`);
     },
     handleSuccess(response, file, fileList) {
       this.params['excelFileName'] = file.name;
@@ -131,7 +113,19 @@ export default {
 
 <style scoped>
 .tool-container {
+  
+}
+.box-card {
+  width: 100%;
+  display: flex;
+  justify-content: center; /* 水平居中 */
+  align-items: center;     /* 垂直居中（如果需要） */
+}
+.button-container {
   margin: 10px;
   padding: 10px;
+  display: flex;
+  justify-content: center; /* 水平居中 */
+  align-items: center;     /* 垂直居中（如果需要） */
 }
 </style>