pbl_admin_table/src/views/kanBan/components/addCampusDialog.vue

<template>
	<div>
		<el-dialog :title="dialogTitle" class="table" :visible.sync="show" :close-on-click-modal="false" width="800px"
			top="8vh">
			<div v-loading="loading">
				<el-image style="
						width: 50px;
						height: 50px;
						cursor: pointer;
						display: flex;
						align-items: center;
						justify-content: center;
					" :src="form.icon" fit="cover" v-if="this.type === 2" @click="addUrlIcon()">
					<div slot="error" class="image-slot" @click="addUrlIcon()">
						<i class="el-icon-picture-outline"></i>
					</div>
				</el-image>

				<el-image style="
						width: 50px;
						height: 50px;
						cursor: pointer;
						display: flex;
						align-items: center;
						justify-content: center;
					" :src="form.icon" fit="cover" v-if="this.type === 0" @click="addUrlIcon()">
					<div slot="error" class="image-slot" @click="addUrlIcon()">
						<i class="el-icon-picture-outline"></i>
					</div>
				</el-image>

				<div v-if="this.type != 2">
					<div class="Tit">标题</div>
					<div>
						<el-input v-model="form.name" placeholder="请输入内容"></el-input>
					</div>
				</div>

				<div v-if="this.type != 2">
					<div class="Tit">描述</div>
					<div>
						<el-input type="textarea" :rows="3" resize="none" placeholder="请输入描述" v-model="form.bri">
						</el-input>
					</div>
				</div>
			</div>
			<!-- 按钮区域 -->
			<div slot="footer" class="el-dialog__footer">
				<el-button @click="close()">取 消</el-button>
				<el-button type="primary" @click="submit()">确认</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import "@/common/aws-sdk-2.235.1.min.js";
export default {
	data() {
		return {
			show: false,
			loading: false,
			form: {
				name: "",
				icon: "",
				bri: "",
			},
			form2:{},
			type: null,
			title: "",
		};
	},
	computed: {
		dialogTitle() {
			return this.title || (this.type === 0
            ? "修改办学特色"
            : this.type === 1
            ? "修改师资力量"
            : this.type === 2
            ? "修改特色应用"
            : "");
		},
	},
	methods: {
		open(data, type, title = "") {
			this.type = type;
			this.title = title;

			// 根据 type 处理图片字段
			if (type === 2) {
				this.form2 = JSON.parse(JSON.stringify(data));

				// 如果是特色应用，图片在 form.json.icon
				this.form.icon = data.setIcon ?  data.setIcon : data.json.icon; // 确保 json 存在，避免报错
			}else{
				this.form = JSON.parse(JSON.stringify(data));
			}
			this.show = true;
		},
		close() {
			this.show = false;
			this.init();
		},
		init() {
			this.form = {
				name: "",
				icon: "",
				bri: "",
			};
			this.title = "";
		},
		submit() {
			if (this.type == 0) {
				if (!this.form.name || !this.form.icon || !this.form.bri)
					return this.$message.error("请完善表单");
			} else if (this.type == 1) {
				if (!this.form.name || !this.form.bri)
					return this.$message.error("请完善表单");
			} else if (this.type == 2) {
				if (!this.form.icon) {
					return this.$message.error("请完善表单");
				}
				let data = JSON.parse(JSON.stringify(this.form.icon))
				this.form2.setIcon = data 
				this.form = this.form2
			}
			this.$emit("success", { item: this.form });
			this.close()
		},
		async addUrlIcon() {
			let _url = await this.uploadFile("image/*");
			console.log("addUrlIcon", _url);

			if (_url) {
				this.form.icon = _url;	
			} else {
				return console.log("无图片");
			}
		},
		uploadFile(accept = "*") {
			return new Promise((resolve) => {
				const input = document.createElement("input");
				input.type = "file";
				input.accept = accept;
				input.onchange = (event) => {
					const file = event.target.files[0];
					if (file) {
						let credentials = {
							accessKeyId: "AKIATLPEDU37QV5CHLMH",
							secretAccessKey: "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",
						}; //秘钥形式的登录上传
						window.AWS.config.update(credentials);
						window.AWS.config.region = "cn-northwest-1"; //设置区域
						let bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
						// let _name = file.name;
						// let size = file.size;
						let params = {
							Key:
								file.name.split(".")[0] +
								new Date().getTime() +
								"." +
								file.name.split(".")[file.name.split(".").length - 1],
							ContentType: file.type,
							Body: file,
							"Access-Control-Allow-Credentials": "*",
							ACL: "public-read",
						}; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
						let options = {
							partSize: 2048 * 1024 * 1024,
							queueSize: 2,
							leavePartsOnError: true,
						};

						bucket
							.upload(params, options)
							.on("httpUploadProgress", (evt) => {
								console.log(evt);
							})
							.send((err, data) => {
								if (err) {
									this.$message.error("上传失败");
									return resolve("");
								} else {
									return resolve(data.Location);
								}
							});
					} else {
						resolve("");
					}
				};
				input.click();
			});
		},
	},
};
</script>

<style scoped>
.table>>>.el-dialog__header {
	padding: 15px 20px;
	background: #454545;
}

.table>>>.el-dialog__title {
	color: #fff;
}

.Tit {
	padding: 15px 0;
	font-size: 14px;
}
</style>