From f56e474c81bb25845b46cf99c85bd313dbfcd3b5 Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期六, 31 一月 2026 19:26:25 +0800
Subject: [PATCH] 项目初始化+首页+公告详情页面
---
src/views/main/components/UploadBtn.vue | 248 +++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 248 insertions(+), 0 deletions(-)
diff --git a/src/views/main/components/UploadBtn.vue b/src/views/main/components/UploadBtn.vue
new file mode 100644
index 0000000..42bf5fa
--- /dev/null
+++ b/src/views/main/components/UploadBtn.vue
@@ -0,0 +1,248 @@
+<template>
+ <el-upload
+ ref="upload"
+ class="my-3" action="#"
+ v-model:file-list="list"
+ :accept="acceptType"
+ :list-type="listType"
+ :http-request="uploadRequest"
+ :multiple="true"
+ :limit="limitFileCount"
+ :on-preview="handlePreview"
+ :on-remove="handleRemove"
+ :before-remove="beforeRemove"
+ :on-exceed="handleExceed"
+ :disabled="disabled"
+ :class="{ hideUpload: hideUpload }"
+ >
+ <template #default>
+ <template v-if="listType=='picture-card'">
+ <el-icon v-if="!disabled"><Plus /></el-icon>
+ <el-text v-if="disabled">鏆傛湭涓婁紶</el-text>
+ </template>
+ <template v-else>
+ <el-row>
+ <el-button type="primary">
+ <el-row align="middle">
+ <Icon icon="material-symbols:upload-rounded" width="20" height="20" style="color: #fff" />
+ <el-text class="text-white ml-1">{{ againUploadFlag ? '閲嶆柊涓婁紶' : '绔嬪嵆涓婁紶' }}</el-text>
+ </el-row>
+ </el-button>
+ <el-text style="color: #666666" class="ml-4">
+ {{ tip }}
+ </el-text>
+ </el-row>
+ </template>
+ </template>
+ <template #file="{ file, index }">
+ <template v-if="listType=='picture-card'">
+ <el-image
+ ref="previewImg"
+ :src="file.url"
+ :initial-index="initialPreviewImgIndex"
+ :preview-src-list="filterPreviewImgList"
+ >
+ </el-image>
+ <span class="el-upload-list__item-actions">
+ <span @click="previewImage(index)">
+ <el-icon><zoom-in /></el-icon>
+ </span>
+ <!-- <span @click="replaceUpload(index)">
+ <el-icon><upload /></el-icon>
+ </span> -->
+ <span @click="deleteFileItem(index)">
+ <el-icon><delete /></el-icon>
+ </span>
+ </span>
+ </template>
+ <template v-else>
+ <div class="file-box">
+ <Icon
+ @click="deleteFileItem(index)"
+ class="cursor-p mr-3"
+ icon="eva:close-fill"
+ width="18"
+ height="18"
+ style="color: #666666"
+ />
+ <Icon class="mr-1" icon="uis:paperclip" width="18" height="18" style="color:#007AFF" />
+ <span>{{ file.name }}</span>
+ </div>
+ </template>
+ </template>
+ </el-upload>
+ <el-dialog v-model="imgPreviewDialogFlag">
+ <img w-full :src="previewUrl" alt="Preview Image" />
+ </el-dialog>
+</template>
+
+<script>
+const pdf = 'application/pdf'
+const xls = 'application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+const doc = 'application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document'
+const image = 'image/*'
+const jpg = 'image/jpeg'
+const png = 'image/png'
+import { genFileId } from 'element-plus'
+export default {
+ data() {
+ return {
+ list: [],
+ imgPreviewDialogFlag: false,
+ previewUrl: '',
+ initialPreviewImgIndex: 0
+ }
+ },
+ props: {
+ listType: {
+ type: String,
+ default: 'text'
+ },
+ accept: {
+ type: Array,
+ default: () => {
+ return ['pdf', 'xls', 'doc', 'image', 'jpg', 'png']
+ }
+ },
+ limitFileCount: {
+ type: Number,
+ default: 1
+ },
+ modelValue: {
+ type: Array,
+ default: () => {
+ return []
+ }
+ },
+ disabled: {
+ type: Boolean,
+ default: false
+ }
+ },
+ watch: {
+ modelValue: {
+ handler: function() {
+ this.list = this.modelValue
+ },
+ deep: true
+ },
+ list: {
+ handler: function(val) {
+ this.$emit('update:modelValue', val)
+ },
+ deep: true
+ }
+ },
+ computed: {
+ acceptType() {
+ let obj = { pdf, xls, doc, image, jpg, png }
+ return this.accept.map(ele => obj[ele]).join(',')
+ },
+ tip() {
+ let obj = {
+ pdf: 'PDF',
+ xls: 'EXCEL',
+ doc: 'WORD',
+ image: '鍥剧墖',
+ jpg: 'JPEG/JPG',
+ png: 'PNG'
+ }
+ let tip = this.accept.map(ele => obj[ele]).join('銆�')
+ return `鏀寔${tip}绫诲瀷鏂囦欢`
+ },
+ againUploadFlag() {
+ return this.limitFileCount == 1 && this.list.length == 1
+ },
+ filterPreviewImgList() {
+ let list = this.list.map(ele => ele.url )
+ return list
+ },
+ hideUpload() {
+ return this.list.length >= this.limitFileCount
+ }
+ },
+ methods: {
+ uploadRequest(UploadRequestOptions) {
+ const data = {
+ file: UploadRequestOptions.file,
+ directory: ''
+ }
+ this.$axios.post('/infra/file/upload', data, {
+ headers: { 'Content-Type': "multipart/form-data" }
+ }).then(res => {
+ let index = this.list.findIndex(ele => ele.uid == data.file.uid)
+ if (res.data.code == 0) {
+ let index = this.list.findIndex(ele => ele.uid == data.file.uid)
+ if (index != -1) {
+ this.list[index].uploadStatus = 'success'
+ this.list[index].url = res.data.data
+ }
+ this.$message.success('涓婁紶鎴愬姛')
+ } else {
+ if (index != -1) {
+ this.list[index].uploadStatus = 'fail'
+ }
+ this.$message.error(res.data.msg || '涓婁紶澶辫触')
+ }
+ })
+ },
+ deleteFileItem(index) {
+ this.list.splice(index, 1)
+ },
+ previewImage(index) {
+ this.initialPreviewImgIndex = index
+ this.$refs.previewImg?.showPreview()
+ },
+ replaceUpload() {
+
+ },
+ handleRemove() {},
+ beforeRemove() {},
+ handlePreview() {},
+ handleExceed(file) {
+ if (this.againUploadFlag) {
+ this.$refs.upload?.clearFiles()
+ let newFile = file[0]
+ newFile.uid = genFileId()
+ this.$refs.upload?.handleStart(newFile)
+ this.$refs.upload?.submit()
+ } else {
+ this.$message.error(`鏈�澶氭敮鎸佷笂浼� ${this.limitFileCount} 涓枃浠禶)
+ }
+ }
+ }
+}
+</script>
+
+<style scoped>
+.hideUpload :deep(.el-upload--picture-card) {
+ display: none !important;
+}
+.file-box {
+ display: flex;
+ color: #007AFF;
+ align-content: center;
+ background-color: #ECF5FF;
+ padding: 8px;
+ font-size: 15px;
+ line-height: 16px;
+}
+.el-upload-list__item-actions {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.5); /* 鍗婇�忔槑榛戣壊钂欑増 */
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ opacity: 0; /* 榛樿閫忔槑 */
+ transition: opacity .3s; /* 娣诲姞杩囨浮鍔ㄧ敾鏁堟灉 */
+}
+
+/* 榧犳爣鎮仠鏃舵樉绀鸿挋鐗� */
+.el-upload-list__item:hover .el-upload-list__item-actions {
+ opacity: 1;
+}
+</style>
\ No newline at end of file
--
Gitblit v1.8.0