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 ref="upload" :limit="30" accept=".jpg,.gif,.png,.jpeg,.txt,.pdf,.doc,.docx,.xls,.xlsx" name="files" multiple 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">选择图片</el-button>
								<el-button style="margin-left: 10px" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
							</el-upload>
						</el-dialog>
					</el-form-item>
				</el-form>

				<el-table border :data="picList" v-loading="loading">
					<el-table-column prop="id" label="序号" align="center" sortable></el-table-column>
					<el-table-column prop="picName" label="图片名字" align="center" 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="创建时间" align="center">
						<template slot-scope="props">
							{{ props.row.createTime | dateFormat }}
						</template>
					</el-table-column>

					<el-table-column prop="操作" label="操作" width="100px" align="center">
						<template slot-scope="props">
							<el-button size="small" type="primary" @click.prevent="prePicEdit(props.row.id, props.row.picUrl, props.row.type)">编辑</el-button>
							<el-dialog title="编辑图片信息" :visible.sync="editPicVisible">
								<el-form :model="form" class="custom-form">
									<el-form-item align="center" class="form-item">
										<img :src="form.picUrl" alt="图片" height="100px" style="cursor: pointer" />
									</el-form-item>

									<el-form-item label="" class="form-item" align="middle">
										<el-select v-model="form.type" placeholder="请选择">
											<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>
								<div slot="footer" class="dialog-footer">
									<el-button @click="editPicVisible = false">取 消</el-button>
									<el-button type="primary" @click="editPicConfirm">确 定</el-button>
								</div>
							</el-dialog>
						</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 @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[8, 10, 50, 100, 200, 400]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
			</el-main>
		</el-container>
	</div>
</template>

<script>
import axios from 'axios'
import ApiService from '../../api/ApiService'
export default {
    name: 'MyPic',
    data() {
        return {
            form: {
                picUrl: '',
                type: 0,
            },
            formInline: {
                picType: 0,
            },
            //待上传的图片
            fileList: [],
            // 用户列表数据
            picList: [],
            loading: false,
            elementui_page_component_key: 0,
            currentPage: 1,
            pageSize: 6,
            total: 0,
            imageDialogVisible: false,
            addPicVisible: false,
            editPicVisible: false,
            enlargedImageUrl: '',
            currentRowId: null,
            imageIndex: 0, // 当前展示的图片索引
            options: [
                {
                    value: 0,
                    label: '宝宝',
                },
                {
                    value: 1,
                    label: '学习',
                },
                {
                    value: 2,
                    label: '风景',
                },
                {
                    value: 3,
                    label: '美女',
                },
                {
                    value: 4,
                    label: '猫咪',
                },
                {
                    value: 5,
                    label: '素材',
                },
                {
                    value: 6,
                    label: '动漫',
                },
                {
                    value: 99,
                    label: '其他',
                },
            ],
            picType: 0,
        }
    },
    created() {
        // 调用请求数据的方法
        this.queryPic()
    },
    methods: {
        async submitUpload() {
            this.$refs.upload.submit()
            this.addPicVisible = false
        },
        handleRemove(file, fileList) {
            console.log(file, fileList)
        },
        handlePreview(file) {
            console.log(file)
        },
        prepareAddPic() {
            this.addPicVisible = true
        },
        prePicEdit(id, picUrl, type) {
            this.currentRowId = id
            this.form.picUrl = picUrl
            this.form.type = type
            this.editPicVisible = true
        },
        handleUploadSuccess(response, file, fileList) {
            if (response.success) {
                setTimeout(() => {
                    this.queryPic()
                }, 1000)
                this.fileList = []
            } 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 ApiService.queryPic(this.currentPage, this.pageSize, this.picType)
            if (res.code === 200) {
                this.picList = res.result.records
                this.total = res.result.total
            }
            this.loading = false
        },
        async editPicConfirm() {
            try {
                this.loading = true
                this.editPicVisible = false
                const { data: res } = await ApiService.editPicConfirm(this.currentRowId, this.form.type)
                if (res.code === 200) {
                    this.form.type = 0
                    this.form.picUrl = null
                    this.currentRowId = null
                    this.queryPic()
                } else {
                    console.error('Received non-200 status code', res)
                }
            } catch (error) {
                console.error('An error occurred while adding the questionName:', error)
                // 异常处理逻辑
            } finally {
                this.loading = false
            }
        },

        handleCurrentChange(currentPage) {
            this.currentPage = currentPage
            this.queryPic()
        },
        handleSizeChange(currentSize) {
            this.pageSize = currentSize
            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>