PixelAI-admin/src/views/photos/index.vue

<template>
    <div class="system-dept-container layout-padding">
		<el-card shadow="hover" class="layout-padding-auto">
			<div class="system-dept-search mb15">
				<span>模块:</span>
				<el-select @change="handleChangeModule" size="default" v-model="state.tableData.param.moduleName" placeholder="请选择" clearable style="max-width: 180px;margin:0 10px;">
                    <el-option 
					:data-op="item.id" v-for="(item,index) in moduleList" 
					:key="index" 
					:label="item.moduleName" 
					:value="item.moduleName">
				</el-option>
                </el-select>
				<span>标签:</span>
                <el-select size="default" v-model="state.tableData.param.labelName" placeholder="请选择" clearable class="ml10" style="max-width: 180px;margin:0 10px;">
					<el-option 
					v-for="(item,index) in labelList" 
					:key="index" 
					:label="item.name" 
					:value="item.name">
				</el-option>
                </el-select>
				<span>名称:</span>
                <el-input size="default" placeholder="请输入" v-model="state.tableData.param.name" class="ml10" style="max-width: 250px;margin-right: 20px;"> </el-input>
				<el-button @click="getTableData" size="default" type="primary" class="ml10" style="margin-right: 15px;">
					<el-icon>
						<ele-Search />
					</el-icon>
					查询
				</el-button>
				<el-button @click="reset" size="default" type="primary" class="ml10"  style="margin-right: 15px;">
					<el-icon>
						<ele-RefreshRight />
					</el-icon>
					重置
				</el-button>
				<el-button @click="switchDrawer(0)" size="default" type="primary" class="ml10">
					<el-icon>
						<ele-FolderAdd />
					</el-icon>
					添加图片
				</el-button>
			</div>
			<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
				<el-table-column type="selection" width="55" />
				<el-table-column prop="name" label="图片名称"  show-overflow-tooltip width="180px"></el-table-column>
				<el-table-column  label="素材"  width="300px" align="center">
					<template #default="scope">
						<el-image :src="jpgFormatter(scope.row)" />
						<!-- <a :href="jpgFormatter(scope.row)">{{ jpgFormatter(scope.row) }}</a> -->
						 <!-- <el-button @click="jpgJump(scope.row)" text type="primary">{{ jpgFormatter(scope.row) }}</el-button> -->
					</template>
				</el-table-column>
				<el-table-column prop="moduleName" label="模块"  show-overflow-tooltip width="200px" align="center"></el-table-column>		
				<el-table-column prop="labelName" label="标签"  show-overflow-tooltip width="200px" align="center"></el-table-column>		
				<el-table-column prop="uploadName" label="上传者"  show-overflow-tooltip width="200px" align="center"></el-table-column>		
				<el-table-column prop="createtime" label="创建时间" :formatter="dateFormatter" show-overflow-tooltip width="200px" align="center"></el-table-column>
				<el-table-column label="操作" width="250" align="center">
					<template #default="scope">
						<el-button  text type="primary" @click="switchDrawer(2,scope.row.id)">
							<el-icon>
								<ele-View />
							</el-icon>
						</el-button>
						<el-button  text type="primary" @click="switchDrawer(1,scope.row.id)">
							<el-icon>
								<ele-Edit />
							</el-icon>
						</el-button>
						<el-button  text type="primary" @click="download(scope.row)">
							<el-icon>
								<ele-Download />
							</el-icon>
						</el-button>
						<el-button  text type="primary" @click="deleteBanner(scope.row.id)">
							<el-icon>
								<ele-Delete />
							</el-icon>
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 新增或编辑弹窗  -->
			<el-drawer
				v-model="dialog"
				:title="changeTitle()"
				@close="resetForm"
				direction="rtl"
				size="45%"
			>
				<div class="demo-drawer__content">
					<el-form  
						ref="ruleFormRef"
						style="max-width: 85%"
						:model="state.formData"
						:rules="state.rules"
						label-width="110px"
						class="demo-ruleForm"
						:size="formSize"
						status-icon
						v-loading="state.formData.loading"
						:disabled="isForbidden"
					>
						<el-form-item label="模块:" prop="moduleName">
							<el-select @change="handleChangeModule" size="default" v-model="state.formData.moduleName" placeholder="请选择" clearable>
								<el-option 
									:data-op="item.id" v-for="(item,index) in moduleList" 
									:key="index" 
									:label="item.moduleName" 
									:value="item.moduleName">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="标签:" prop="labelName">
							<el-select size="default" v-model="state.formData.labelName" placeholder="请选择" clearable >
								<el-option 
									v-for="(item,index) in labelList" 
									:key="index" 
									:label="item.name" 
									:value="item.name">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="图片名称:" prop="name" >
							<el-input v-model="state.formData.name" />
						</el-form-item>
						<el-form-item label="图片:" prop="fileList">
							<el-upload ref="uploadRef" action="#" list-type="picture-card" :class="{disabled:uploadDisabled}" 
							:limit="1" :file-list="state.formData.fileList" :on-change="handleChange" :auto-upload="false">
							<el-icon><Plus /></el-icon>
							<template #file="{ file }">
							<div>
								<img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
								<span class="el-upload-list__item-actions">
								<span
									class="el-upload-list__item-preview"
									@click="handlePictureCardPreview(file)"
								>
									<el-icon><zoom-in /></el-icon>
								</span>
								<span
									v-if="!disabled"
									class="el-upload-list__item-delete"
									@click="handleRemove(file)"
								>
									<el-icon><Delete /></el-icon>
								</span>
								</span>
							</div>
							</template>
						</el-upload>
						<el-dialog v-model="dialogVisible">
							<img :src="dialogImageUrl"  style="width: 100%"  alt="Preview Image" />
						</el-dialog>
						</el-form-item>
					</el-form>
					<div class="demo-drawer__footer">
						<el-button v-show="isHide" @click="submitForm(flag)" :loading="loading" style="margin-right: 30px;" >
							{{ loading ? '保存 ...' : '保存' }}
						</el-button>
						<el-button type="primary" @click="resetForm">取消</el-button>
					</div>
				</div>
			</el-drawer>
			<!-- 分页器 -->
			<el-pagination
				@size-change="onHandleSizeChange"
				@current-change="onHandleCurrentChange"
				class="mt15"
				:pager-count="5"
				:page-sizes="[10, 20, 30]"
				v-model:current-page="state.tableData.param.current"
				background
				v-model:page-size="state.tableData.param.size"
				layout="total, sizes, prev, pager, next, jumper"
				:total="state.tableData.total"
			>
			</el-pagination>
		</el-card>
	</div>
</template>

<script setup lang="ts" name="photos">
import { onMounted, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { ElDrawer, ElMessage, ElMessageBox, TableColumnCtx, timePickerDefaultProps } from 'element-plus';
import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'
import type { ComponentSize, FormInstance, FormRules, UploadFile, UploadProps, UploadUserFile } from 'element-plus'
import { baseUrlHost } from '../../api/baseUrlHost';
import { photosApi } from '/@/api/photos';
import { downloadPhoto } from '../../api/download';

const router = useRouter();

// 数据
const state = reactive({
	tableData: {
		data: [],
		total: 0,
		loading: false,
		param: {
			labelName: '',
			moduleName: '',
			name:'',
			current: 1,
			size: 10,
		},
	},
	formData: {
		labelName: '',
		moduleName: '',
		fileList: [],
		name:"",
		loading: false
	},
	rules: {
		name: [
    		{ required: true, message: '请输入名称', trigger: 'blur' }
		],
		fileList: [
			{ required: true, message: '请选择图片', trigger: 'blur' }
		],
		moduleName: [
			{ required: true, message: '请选择模块', trigger: 'blur' },
		],
		labelName: [
			{ required: true, message: '请选择标签', trigger: 'blur' },
		],
	},
});

// 引入 api 请求接口
const photoApi = photosApi();

// 模块列表
const moduleList = ref([]);

const getModuleList = async() => {
	try {
		let res = await photoApi.getModuleList();
		if(res?.success){
			moduleList.value = res.data;
		}else{
			ElMessage.error('模块列表获取失败！');
		}
	} catch (error) {
		ElMessage.error('模块列表获取失败！');
	} finally {
	}
}

// 标签列表
const labelList = ref([]);

// 模块选择
const handleChangeModule = async(val: any) => {
	try {
		state.tableData.param.labelName = '';
		state.formData.labelName = '';
		if(!val){labelList.value=[]; return;}
		const op:any = event?.currentTarget;
		let res = await photoApi.getLabelList(op.dataset.op);
		if(res?.success){
			labelList.value = res.data;
		}else{
			ElMessage.error('标签列表获取失败！');
		}
	} catch (error) {
		ElMessage.error('标签列表获取失败！');
	} finally {
	}
}

// #region

// 获取表格数据
const getTableData = async() => {
	try {
		state.tableData.loading = true;
		let res = await photoApi.getPhotosList(state.tableData.param);
		if(res?.success){
			state.tableData.data = res.data.records;
			state.tableData.total = res.data.total;
		}else{
			ElMessage.error('图片列表获取失败！');
		}
	} catch (error) {
	} finally {
		state.tableData.loading = false;
	}
};

// 重置
const reset = () =>{
	state.tableData.param = {
		name: '',
		current: 1,
		size: 10,
	}
	getTableData();
}

// 图片基本路径
const viteUrl = import.meta.env.VITE_API_URL;

// 图片链接格式化
const jpgFormatter = (row: any) => {
	// console.log("44444444444",row);
	let newPath;
	if (row?.data) {
		newPath = row.data.path.replaceAll('\\', '/')	
	// console.log("11111111111",newPath);	

	} else {
		newPath = row.path.replaceAll('\\\\', '/')	
	// console.log("333333333333",newPath);	

	}
	newPath = newPath.includes('http://8.138.171.103/') ? newPath : 'http://8.138.171.103/' + newPath
	// console.log("22222222222222222",newPath);
  	return `${newPath}`;
}

// 日期格式化
const dateFormatter = (row: any, column: TableColumnCtx<String>) => {
	let date = new Date(row.createtime);
  	return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
}

// 分页改变
const onHandleSizeChange = (val: number) => {
	state.tableData.param.size = val;
	getTableData();
};

// 分页改变
const onHandleCurrentChange = (val: number) => {
	state.tableData.param.current = val;
	getTableData();
};
// #endregion

// #region
const dialog = ref(false)
const flag = ref(false)


const formSize = ref<ComponentSize>('large')
const ruleFormRef = ref<FormInstance>()
const uploadDisabled = ref(false)
const isHide = ref(false)
const headTitle = ref("")

const changeTitle = () => {
	if (flag.value) {
		headTitle.value="新增图片"
	} else {
		headTitle.value="编辑图片"
	}
	if (!isHide.value) {
		headTitle.value="查看图片"
	}
	return headTitle.value;
}

// 获取图片详情
const getPhotoDetail = async (id: number) => {
	state.formData.loading = true;
		let res = await photoApi.getPhotosDetail(id)
		if (res?.success) {
			state.formData.fileList.push({ url: jpgFormatter(res) });
			Object.assign(state.formData, res.data);
			state.formData.path = res.data.path;
			uploadDisabled.value = true;
			state.formData.loading = false;
		} else {
			ElMessage.error('获取图片详情失败！')
			state.formData.loading = false;
		}
}

const isForbidden = ref(false)

// 切换右侧边栏
const switchDrawer = async (staus,id: number) => {
	if (staus == 1) {
		flag.value = false;
		isHide.value = true;
		disabled.value = false;
		getPhotoDetail(id);
	} else if (staus == 2) {
		isForbidden.value = true;
		isHide.value = false;
		disabled.value = true;
		getPhotoDetail(id);
	} else {
		console.log("添加图片");
		flag.value = true;
		isHide.value = true;
	}
	dialog.value = true;
}

// 添加图片
const disabled = ref(false)

const handleChange: UploadProps['onChange'] = async (file: uploadFile, uploadFiles) => {
	state.formData.loading = true;
	if (file.raw.type === 'image/png' || file.raw.type === 'image/jpeg' || file.raw.type === 'image/jpg') {
		state.formData.fileList = uploadFiles;
		uploadDisabled.value = true;
		try {
			const formdata = new FormData();
			formdata.append('file', file.raw);
			let res = await photoApi.uploadFile(formdata);
			if(res?.success){
				state.formData.url = jpgFormatter(res);
				state.formData.path = res.data.path;
				ElMessage({
					message: '图片上传成功！',
					type: 'success',
				})
				state.formData.loading = false;
			}else{
				ElMessage.error('图片上传失败！');
			}
		} catch (error) {
			state.formData.loading = false;
			console.log(error);
			
			ElMessage.error('图片上传失败！');
		}
	} else {
		ElMessageBox.alert('图片的格式不正确，请重新选择！', '提示', {
			confirmButtonText: '确定',
		})
		console.log("handleChange3",uploadFiles);
		uploadFiles.pop()
		console.log("handleChange4",uploadFiles);
		uploadDisabled.value = false;
	}
}

const dialogImageUrl = ref('')
const dialogVisible = ref(false)

const handlePictureCardPreview = (file: UploadFile,uploadFiles) => {
  dialogImageUrl.value = file.url!
  dialogVisible.value = true
}

const uploadRef = ref();

const handleRemove = (file: UploadFile, uploadFiles) => {
	uploadRef.value.clearFiles();
	state.formData.path = "";
	uploadDisabled.value = false;

};

//下载图片
const download = async(row:any) =>{
	state.formData.loading = true;
	// console.log("44444444444",row);
	let newPath;
	if (row?.data) {
		newPath = row.data.path.replaceAll('\\', '/')	
	// console.log("11111111111",newPath);	

	} else {
		newPath = row.path.replaceAll('\\\\', '/')	
	// console.log("333333333333",newPath);	

	}
	newPath = newPath.includes('http://localhost:8888/') ? newPath : viteUrl + newPath
	// console.log("22222222222222222",newPath);
	try{
		await downloadPhoto(newPath);

    ElMessage({
      message: '图片下载成功！',
      type: 'success',
    });
	}catch(error){
		console.error(error);
		ElMessage.error('图片下载失败！')
	}finally{
		state.formData.loading = false;
	}
}; 

// 删除图片
const deleteBanner = (id: number) => {
	ElMessageBox.confirm('确定要删除该图片吗?', '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	})
	.then(async() => {
		try {
			state.tableData.loading = true;
			let res = await photoApi.deletePhotos(id);
			if(res?.success){ 
				await getTableData();
				ElMessage.success('图片删除成功！');
			} else ElMessage.error('图片删除失败！');
		} catch(e) {
			ElMessage.error('删除失败！');
		} finally {
			state.tableData.loading = false;
		}
	})
} 

const loading = ref(false)

//保存
const submitForm = (decision) => {
	ruleFormRef.value?.validate(async(valid: boolean) => {
		if (valid) {
			if (decision) {
				console.log("新增新增新增");
				loading.value = true;
				const form = { ...state.formData };
				try {
					let res = await photoApi.addPhotos(form);
					if(res?.success){
						ElMessage({
							message: '保存成功！',
							type: 'success',
						})
						loading.value = false;
						getTableData();
						dialog.value = false;
					}
				} catch (error) {
					console.log(error);
					ElMessage.error('保存失败！');
					loading.value = false;
				}
			} else {
				console.log("编辑编辑编辑");
				const form = { ...state.formData };
				try {
					let res = await photoApi.updatePhotos(form);
					if(res?.success){
						ElMessage({
							message: '保存成功！',
							type: 'success',
						})
						loading.value = false;
						getTableData();
						dialog.value = false;
					}
				} catch (error) {
					console.log(error);
					ElMessage.error('保存失败！');
					loading.value = false;
				}
			}
        }else{
			ElMessage.error('请填写必要信息！');
			loading.value = false;
		}
    });
}

// 表单重置和取消
const resetForm = () => {
	dialog.value = false;
	ruleFormRef.value?.resetFields();
	state.formData.fileList.pop();
	uploadDisabled.value = false;
	isForbidden.value = false;
}

// #endregion

onMounted(() => {
	getTableData();
	getModuleList();
})

</script>

<style scoped lang="scss">
.system-dept-container {
	:deep(.el-card__body) {
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: auto;
		.el-table {
			flex: 1;
		}
	}
};

::v-deep .el-image {
  width: 250px; // 固定图片宽度
  height: 150px; // 固定图片高度
  object-fit: cover; // 图片居中剪裁
  display: block;
}

::v-deep .el-drawer .el-drawer__header {
	margin: 15px 0 20px 0!important;
    border-bottom: 0!important;
}
::v-deep .el-drawer__title {
    font-size: 28px!important;
}
::v-deep .el-form-item--large{
    --font-size: 18px;
    margin-bottom: 28px!important;
}

.demo-drawer__footer{
	margin:40px 0 0 150px!important;
}

::v-deep .disabled{
    .el-upload--picture-card{
      display: none;
    }
}

::v-deep .el-select--large .el-select__wrapper {
    padding: 5px 10px;
    min-height: 30px;
}

::v-deep .el-form {
    margin: 0 19px;
}
</style>