pblUserManage/src/components/dialog/addMenuDialog.vue

<template>
	<div>
		<el-dialog
			:title="type == 'edit' ? '编辑菜单' : '添加菜单'"
			class="table"
			:visible.sync="show"
			:close-on-click-modal="false"
			width="800px"
			top="8vh"
		>
			<div v-loading="loading">
				<el-form ref="form" :model="form" label-width="100px">
					<el-form-item label="菜单名称">
						<el-input style="width: 300px" v-model="form.menuName"></el-input>
					</el-form-item>
					<el-form-item label="菜单默认图标">
						<el-tooltip
							class="item"
							effect="dark"
							:content="form.menuIcon ? '更改图标' : '上传图标'"
							placement="top"
						>
							<el-image
								style="width: 50px; height: 50px;cursor: pointer;display: flex;align-items: center;justify-content: center;"
								:src="form.menuIcon"
								fit="cover"
								@click="addUrlIcon('menuIcon')"
							>
								<div
									slot="error"
									class="image-slot"
									@click="addUrlIcon('menuIcon')"
								>
									<i class="el-icon-picture-outline"></i>
								</div>
							</el-image>
						</el-tooltip>
					</el-form-item>
					<el-form-item label="菜单激活图标" v-if="['admin-sidebar'].includes(this.tagType)">
						<el-tooltip
							class="item"
							effect="dark"
							:content="form.menuActiveIcon ? '更改图标' : '上传图标'"
							placement="top"
						>
							<el-image
								style="width: 50px; height: 50px;cursor: pointer;display: flex;align-items: center;justify-content: center;"
								:src="form.menuActiveIcon"
								fit="cover"
								@click="addUrlIcon('menuActiveIcon')"
							>
								<div
									slot="error"
									class="image-slot"
									@click="addUrlIcon('menuActiveIcon')"
								>
									<i class="el-icon-picture-outline"></i>
								</div>
							</el-image>
						</el-tooltip>
					</el-form-item>
				</el-form>
			</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: {
				menuName: "",
				menuIcon: "",
				menuActiveIcon: "",
				children:[]
			},
			type: null,
			tagType:null,
		};
	},
	methods: {
		open(data, type = "add",tagType) {
			if (data) {
				this.form = JSON.parse(JSON.stringify(data));
			} else {
				this.init();
			}
			this.type = type;
			this.tagType = tagType;
			this.show = true;
		},
		close() {
			this.show = false;
			this.init();
		},
		init() {
			this.form = {
				menuName: "",
				menuIcon: "",
				menuActiveIcon: "",
				children:[]
			};
		},
		submit() {
			if(!this.form.menuName || !this.form.menuIcon || (!['admin-school'].includes(this.tagType) && !this.form.menuActiveIcon ))return this.$message.error("请完善表单")
			this.$emit("success", {item:this.form,type:this.type,tagType:this.tagType});
		},
		async addUrlIcon(type = "menuIcon") {
			let _url = await this.uploadFile("image/*");
			if (_url) {
				this.form[type] = _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();
			});
		},
		addArg(value) {
			if (this.form.argumentList.includes(value)) {
				this.form.argumentList.splice(this.form.argumentList.indexOf(value), 1);
			} else {
				this.form.argumentList.push(value);
			}
		},
	},
};
</script>

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

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