|
|
@@ -0,0 +1,139 @@
|
|
|
+<template>
|
|
|
+ <div class="tenant">
|
|
|
+ <div style="border-left: 3px solid #0084ff; padding-left: 8px">Logo 配置</div>
|
|
|
+ <div style="padding: 32px 0 16px 0">
|
|
|
+ <el-upload
|
|
|
+ class="avatar-uploader"
|
|
|
+ action="https://winfaster.obs.cn-south-1.myhuaweicloud.com"
|
|
|
+ :data="uploadData"
|
|
|
+ :show-file-list="false"
|
|
|
+ :on-success="handleAvatarSuccess"
|
|
|
+ :before-upload="uploadFile">
|
|
|
+ <img v-if="imageUrl" :src="imageUrl" class="avatar" />
|
|
|
+ <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
|
|
|
+ </el-upload>
|
|
|
+ </div>
|
|
|
+ <div style="color: #999999; font-size: 12px; padding: 8px 0 16px 0">请上传 120px * 30px 或同等比例的背景透明 png 格式图片</div>
|
|
|
+ <div style="padding: 16px 0">预览</div>
|
|
|
+ <div style="padding: 16px 0; display: flex">
|
|
|
+ <div style="padding: 0 20px; background-color: black; width: 180px; height: 50px; display: flex; align-items: center; justify-content: center">
|
|
|
+ <el-image v-if="imageUrl" style="width: 120px; height: 30px" :src="imageUrl" fit="scale-down" />
|
|
|
+ <img v-else :src="'/img/logo2.png'" />
|
|
|
+ </div>
|
|
|
+ <div style="height: 50px; background-color: black">
|
|
|
+ <li class="header-bar-hover-warp nav-li active">
|
|
|
+ <div class="menu-modal">
|
|
|
+ <i class="iconfont icon-icomx_gongndh" style="margin: 0 5px 0 0"></i>
|
|
|
+ 功能导览
|
|
|
+ <i class="iconfont icon-iconm_xialan1" style="margin: 0 0 0 3px"></i>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <el-button @click="clickCancel">重 置</el-button>
|
|
|
+ <el-button type="primary" @click="clickSubmit()">提 交</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref } from "vue";
|
|
|
+import { ElMessage } from "element-plus";
|
|
|
+
|
|
|
+const { proxy } = getCurrentInstance();
|
|
|
+const imageUrl = ref("/img/logo2.png");
|
|
|
+const fileList = ref([
|
|
|
+ {
|
|
|
+ id: "11111111111",
|
|
|
+ fileName: "logo2.png",
|
|
|
+ fileUrl: "/img/logo2.png",
|
|
|
+ },
|
|
|
+]);
|
|
|
+const uploadData = ref({});
|
|
|
+const uploadFile = async (file) => {
|
|
|
+ const res = await proxy.post("/fileInfo/getSing", { fileName: file.name });
|
|
|
+ uploadData.value = res.uploadBody;
|
|
|
+ file.id = res.id;
|
|
|
+ file.fileName = res.fileName;
|
|
|
+ file.fileUrl = res.fileUrl;
|
|
|
+ return true;
|
|
|
+};
|
|
|
+const handleAvatarSuccess = (response, uploadFile) => {
|
|
|
+ imageUrl.value = uploadFile.raw.fileUrl;
|
|
|
+ fileList.value = [
|
|
|
+ {
|
|
|
+ id: uploadFile.raw.id,
|
|
|
+ fileName: uploadFile.raw.fileName,
|
|
|
+ fileUrl: uploadFile.raw.fileUrl,
|
|
|
+ },
|
|
|
+ ];
|
|
|
+};
|
|
|
+const clickCancel = () => {
|
|
|
+ imageUrl.value = "/img/logo2.png";
|
|
|
+ fileList.value = [
|
|
|
+ {
|
|
|
+ id: "11111111111",
|
|
|
+ fileName: "logo2.png",
|
|
|
+ fileUrl: "/img/logo2.png",
|
|
|
+ },
|
|
|
+ ];
|
|
|
+};
|
|
|
+const clickSubmit = () => {
|
|
|
+ if (fileList.value && fileList.value.length > 0) {
|
|
|
+ proxy.post("/tenantInfo/editLogo", { fileList: fileList.value }).then(() => {
|
|
|
+ ElMessage({
|
|
|
+ message: "保存成功",
|
|
|
+ type: "success",
|
|
|
+ });
|
|
|
+ clickCancel();
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ ElMessage("请上传logo图片");
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.tenant {
|
|
|
+ margin: 20px;
|
|
|
+ padding: 20px;
|
|
|
+ background-color: white;
|
|
|
+}
|
|
|
+::v-deep(.el-upload) {
|
|
|
+ border: 2px dashed #eeeeee;
|
|
|
+}
|
|
|
+.avatar-uploader .avatar {
|
|
|
+ width: 120px;
|
|
|
+ height: 30px;
|
|
|
+ display: block;
|
|
|
+ background-color: black;
|
|
|
+}
|
|
|
+.avatar-uploader .el-upload {
|
|
|
+ border: 1px dashed var(--el-border-color);
|
|
|
+ border-radius: 6px;
|
|
|
+ cursor: pointer;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ transition: var(--el-transition-duration-fast);
|
|
|
+}
|
|
|
+.avatar-uploader .el-upload:hover {
|
|
|
+ border-color: var(--el-color-primary);
|
|
|
+}
|
|
|
+.el-icon.avatar-uploader-icon {
|
|
|
+ font-size: 28px;
|
|
|
+ color: #8c939d;
|
|
|
+ width: 120px;
|
|
|
+ height: 30px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.nav-li.active {
|
|
|
+ background: #0084ff;
|
|
|
+ color: #fff;
|
|
|
+ height: 50px;
|
|
|
+ padding: 0 20px;
|
|
|
+ a {
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
cz
