This commit is contained in:
liuhuayong 2025-07-05 20:06:14 +08:00
parent ce081b6e46
commit 09a89dc145

View File

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