MyPic.vue

<template>
	<div>
		<el-container>
			<el-main>
				<el-form :inline="true" :model="formInline" class="demo-form-inline">
					<el-form-item>
						<el-select size="small" v-model="picType" placeholder="请选择" @change="queryPic">
							<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button size="small" type="primary" @click="prepareAddPic">新增图片</el-button>
						<el-dialog title="新增图片" :visible.sync="addPicVisible" style="width: 100%">
							<el-upload class="upload-demo" ref="upload" action="http://43.139.90.182:8888/picInfo/upload" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" :auto-upload="false" :on-success="handleUploadSuccess">
								<el-button slot="trigger" size="small" type="primary">Select File</el-button>
								<el-button style="margin-left: 10px" size="small" type="success" @click="submitUpload">Upload to Server</el-button>
								<div slot="tip" class="el-upload__tip">Only jpg/png files are allowed, and they should not exceed 500kb.</div>
							</el-upload>
						</el-dialog>
					</el-form-item>
				</el-form>

				<el-table border :data="picList" v-loading="loading">
					<el-table-column prop="id" label="序号" width="100" sortable></el-table-column>
					<el-table-column prop="picName" label="图片名字" width="240" show-overflow-tooltip></el-table-column>
					<el-table-column align="center">
						<template slot-scope="props">
							<img :src="props.row.picUrl" alt="图片" height="100px" @click="showImageDialog(props.row.picUrl, props.$index)" style="cursor: pointer" />
						</template>
					</el-table-column>
					<el-table-column label="创建时间" width="170">
						<template slot-scope="props">
							{{ props.row.createTime | dateFormat }}
						</template>
					</el-table-column>
				</el-table>
				<el-dialog :visible.sync="imageDialogVisible" width="30%">
					<div style="display: flex; align-items: center; justify-content: space-between">
						<button class="arrow-button" :class="{ disabled: imageIndex === 0 }" @click="showBeforeImage" :disabled="imageIndex === 0">
							<el-icon class="custom-icon" name="arrow-left"></el-icon>
						</button>
						<img :src="enlargedImageUrl" alt="放大图片" style="width: 80%" />
						<button class="arrow-button" :class="{ disabled: imageIndex === picList.length - 1 }" @click="showNextImage" :disabled="imageIndex === picList.length - 1">
							<el-icon class="custom-icon" name="arrow-right"></el-icon>
						</button>
					</div>
				</el-dialog>

				<el-pagination class="pagination" background :key="elementui_page_component_key" :current-page.sync="currentPage" :page-size="pageSize" :total="total" @current-change="handleCurrentChange"></el-pagination>
			</el-main>
		</el-container>
	</div>
</template>

<script>
import axios from 'axios'
export default {
	name: 'MyPic',
	data() {
		return {
			//待上传的图片
			fileList: [],
			// 用户列表数据
			picList: [],
			loading: false,
			elementui_page_component_key: 0,
			currentPage: 1,
			pageSize: 6,
			total: 0,
			imageDialogVisible: false,
			addPicVisible: false,
			enlargedImageUrl: '',
			imageIndex: 0, // 当前展示的图片索引
			options: [
				{
					value: 0,
					label: '宝宝照片',
				},
				{
					value: 1,
					label: '学习照片',
				},
				{
					value: 2,
					label: '风景照片',
				},
				{
					value: 3,
					label: '美女照片',
				},
				{
					value: 99,
					label: '其他照片',
				},
			],
			picType: 0,
		}
	},
	created() {
		// 调用请求数据的方法
		this.queryPic()
	},
	methods: {
		submitUpload() {
			this.$refs.upload.submit()
			this.addPicVisible = false
		},
		handleRemove(file, fileList) {
			console.log(file, fileList)
		},
		handlePreview(file) {
			console.log(file)
		},
		prepareAddPic() {
			this.addPicVisible = true
		},
		handleUploadSuccess(response, file, fileList) {
			if (response.success) {
				// Introduce a 2-second delay using setTimeout
				setTimeout(() => {
					// Call the queryPic interface after a 2-second delay
					this.queryPic()
				}, 1000)
			} else {
				this.$message.error('Upload failed')
			}
		},
		showBeforeImage() {
			if (this.imageIndex > 0) {
				// 增加索引以显示下一张图片
				this.imageIndex--
				this.enlargedImageUrl = this.picList[this.imageIndex].picUrl
				this.imageDialogVisible = true // 打开对话框展示图片
			}
		},
		showNextImage() {
			if (this.imageIndex < this.picList.length - 1) {
				// 增加索引以显示下一张图片
				this.imageIndex++
				this.enlargedImageUrl = this.picList[this.imageIndex].picUrl
				this.imageDialogVisible = true
			}
		},
		showImageDialog(url, index) {
			this.enlargedImageUrl = url
			this.imageDialogVisible = true
			this.imageIndex = index
		},
		async queryPic() {
			this.loading = true
			const { data: res } = await axios.get('http://43.139.90.182:8888/picInfo/page', {
				params: {
					page: this.currentPage,
					pageSize: this.pageSize,
					picType: this.picType,
				},
			})
			if (res.code === 200) {
				this.picList = res.result.records
				this.total = res.result.total
			}
			this.loading = false
		},
		handleCurrentChange(currentPage) {
			this.currentPage = currentPage
			this.queryPic()
		},
	},
}
</script>

<style lang="less" scoped>
.el-header {
	background-color: #b3c0d1;
	color: #333;
	line-height: 60px;
}

.el-aside {
	color: #333;
}

.pagination {
	margin-top: 16px;
	text-align: right;
}

.arrow-button {
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	background-color: transparent;
	cursor: pointer;
}

.custom-icon {
	font-size: 24px; /* 调整图标大小 */
	color: #ff9900; /* 调整图标颜色 */
	margin-right: 6px; /* 调整图标与文字之间的间距 */
}

.arrow-button.disabled {
	pointer-events: none; /* 禁用点击事件 */
	opacity: 0.1; /* 添加透明度来表示禁用状态 */
}
</style>