Merge branch 'master' of http://36.137.93.232:3000/hf/byte-sailing-new

src/components/headerBar/header-bar.vue

@@ -2,7 +2,11 @@
 	<div id="main" class="header-bar">
 		<header>
 			<ul class="nav">
-				<div class="logo">ByteSailing</div>
+				<!-- <div class="logo">ByteSailing</div> -->
+				<div class="logo" style="display: flex; align-items: center; justify-content: center">
+					<img v-if="!logoUrl" :src="'/img/logo2.png'"/>
+					<el-image v-else   style="width: 120px; height: 30px" :src="logoUrl" fit="scale-down"/>
+				</div>
 				<li class="header-bar-hover-warp nav-li" :class="isChildMenu ? 'active' : ''">
 					<div @click="isChildMenu = !isChildMenu" class="menu-modal">
 						<i class="iconfont icon-icomx_gongndh" style="margin: 0 5px 0 0;"></i>
@@ -211,7 +215,17 @@ const openLeftBaner = (i,index) => {
 	activeLeftData.value = i
 	routerInit(i)
 }
-
+const logoUrl = ref()
+const getLogo = () => {
+	proxy.post('/tenantInfo/getLogo',{}).then(
+		res => {
+			if (res && res.length > 0 && res[0].fileUrl) {
+				logoUrl.value = res[0].fileUrl
+			}
+		}
+	)
+}
+getLogo()
 const userMenuEdit = () => {
 	proxy.post('/sysUserMenu/edit',{
 		type:1,

src/components/headerBar/header.scss

@@ -250,6 +250,7 @@
 			font-weight: bold;
 			line-height: 50px;
 			margin: 0 20px;
+			min-width: 120px
 		}
 		.nav-li {
 			width: 120px;

src/views/systemTenant/tenant/logoConfiguration/index.vue

@@ -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>