登录页logo配置功能、logo替换 12.22

dev
zhc077 11 months ago
parent cfaee66128
commit 5445d499d8
  1. 17
      jeecg-boot-master/jeecg-module-demo/src/main/java/org/jeecg/modules/demo/upfile_persion/controller/UpfilePersionController.java
  2. 2
      jeecg-boot-master/jeecg-module-demo/src/main/java/org/jeecg/modules/demo/upfile_persion/service/IUpfilePersionService.java
  3. 49
      jeecg-boot-master/jeecg-module-demo/src/main/java/org/jeecg/modules/demo/upfile_persion/service/impl/UpfilePersionServiceImpl.java
  4. 2
      jeecg-boot-master/jeecg-module-system/jeecg-system-start/src/main/resources/application-dev.yml
  5. 2
      jeecg-boot-master/jeecg-module-system/jeecg-system-start/src/main/resources/application-prod.yml
  6. 3
      jeecgboot-vue3-master/index.html
  7. BIN
      jeecgboot-vue3-master/public/resource/img/comp/appLogo.png
  8. BIN
      jeecgboot-vue3-master/public/resource/img/comp/comp_ad.png
  9. BIN
      jeecgboot-vue3-master/public/resource/img/comp/comp_ad2.png
  10. BIN
      jeecgboot-vue3-master/public/resource/img/comp/comp_bg.png
  11. BIN
      jeecgboot-vue3-master/public/resource/img/comp/comp_logo.png
  12. BIN
      jeecgboot-vue3-master/public/resource/img/comp/jeecg_bg2.png
  13. BIN
      jeecgboot-vue3-master/src/assets/images/comp/appLogo.png
  14. BIN
      jeecgboot-vue3-master/src/assets/loginmini/icon/comp/comp_ad.png
  15. BIN
      jeecgboot-vue3-master/src/assets/loginmini/icon/comp/comp_ad2.png
  16. BIN
      jeecgboot-vue3-master/src/assets/loginmini/icon/comp/comp_bg.png
  17. BIN
      jeecgboot-vue3-master/src/assets/loginmini/icon/comp/comp_logo.png
  18. BIN
      jeecgboot-vue3-master/src/assets/loginmini/icon/logo-huanghuai.png
  19. 6
      jeecgboot-vue3-master/src/assets/loginmini/style/base.less
  20. 2
      jeecgboot-vue3-master/src/assets/loginmini/style/home.less
  21. 3
      jeecgboot-vue3-master/src/components/Application/src/AppLogo.vue
  22. 3
      jeecgboot-vue3-master/src/settings/siteSetting.ts
  23. 15
      jeecgboot-vue3-master/src/views/UpfilePersion/UpfilePersion.api.ts
  24. 114
      jeecgboot-vue3-master/src/views/system/loginPage/components/Upload4Logo.vue
  25. 220
      jeecgboot-vue3-master/src/views/system/loginPage/setting.vue
  26. 16
      jeecgboot-vue3-master/src/views/system/loginmini/MiniLogin.vue

@ -31,6 +31,7 @@ import org.springframework.beans.BeanUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.http.MediaType;
import org.springframework.util.ObjectUtils;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.servlet.ModelAndView;
@ -362,6 +363,22 @@ public class UpfilePersionController extends JeecgController<UpfilePersion, IUpf
);
}
/**
* @description: 登录页logo上传
* @param: [file, annualCompId, workName]
* @return: org.jeecg.common.api.vo.Result<java.lang.String>
* @author: z.h.c
* @date: 23/12/21 16:09
*/
@PostMapping("loginPageImageUpload")
public Result<String> loginPageImageUpload(@RequestParam("files") MultipartFile[] file,
@RequestParam("flag") String flag) {
if (ObjectUtils.isEmpty(file)) {
return Result.error("请选择文件");
}
return upfilePersionService.logoImageUpload(file,flag);
}
@GetMapping("applyWorkBack")
public Result<String> applyWorkBack(UpfilePersion upfilePersion) {
if (StringUtils.isBlank(upfilePersion.getAnnualCompPointId())) {

@ -37,4 +37,6 @@ public interface IUpfilePersionService extends IService<UpfilePersion> {
Boolean updateStatusByApplyCode(String applyCode,Integer oldStatus,Integer newStatus);
Boolean updateStatus(UpfilePersion upfilePersion);
Result<String> logoImageUpload(MultipartFile[] file,String flag);
}

@ -21,6 +21,7 @@ import org.jeecg.modules.demo.upfile_persion.service.IUpfilePersionService;
import org.springframework.beans.BeanUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.core.env.Environment;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.util.StringUtils;
@ -43,6 +44,13 @@ public class UpfilePersionServiceImpl
implements IUpfilePersionService {
@Value("${comp.work.save-path}")
private String savePath;
@Value("${comp.logo-image.path}")
private String imagePath;
@Autowired
private Environment env;
private static final SimpleDateFormat SDF =
new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
@ -389,4 +397,45 @@ public class UpfilePersionServiceImpl
}
return true;
}
@Override
public Result<String> logoImageUpload(MultipartFile[] multipartFiles, String flag) {
MultipartFile file = multipartFiles[0];
// 当前文件的格式
String currentFormat = Objects.requireNonNull(file.getOriginalFilename()).substring(file.getOriginalFilename().lastIndexOf(".") + 1);
// 验证格式
if (!"png".equals(currentFormat)) {
return Result.error("文件格式不符合要求,请上传.png文件!");
}
String fileName = "";
//根据上上传操作标记,直接重命名文件
if ("LOGO".equals(flag)) {
fileName = "comp_logo.png";
} else if ("BG".equals(flag)) {
fileName = "comp_bg.png";
} else if ("AD".equals(flag)) {
fileName = "comp_ad.png";
}
String[] activeProfiles = env.getActiveProfiles();
String activeProfile = activeProfiles[0];
StringBuffer filePath = new StringBuffer();
final String lastPath = "/resource/img/comp/";
if ("dev".equals(activeProfile)) {
String projectPath = new File("").getAbsolutePath();
filePath.append(projectPath).append("\\").append("jeecgboot-vue3-master").append("\\").append("public").append(lastPath);
} else if ("prod".equals(activeProfile)) { //linux环境,根据发布目录结构自定义
filePath.append(imagePath).append(lastPath);
}
File uploadFile = new File(filePath + fileName);
log.info("-------上传logo路径:{},文件名:{}", uploadFile.getAbsolutePath(),file.getOriginalFilename());
try {
file.transferTo(uploadFile);
} catch (Exception e) {
log.error(e.getMessage(), e);
return Result.error("图片上传失败!");
}
return Result.ok("上传成功");
}
}

@ -296,6 +296,8 @@ third-app:
agent-id: ??
comp:
logo-image:
path: /resource/img/comp/
work:
# 作品目录,目录分隔符无论操作系统请用"/",路径末尾一定要有"/"
save-path: E:/tmp/

@ -305,6 +305,8 @@ third-app:
agent-id: ??
comp:
logo-image:
path: /user/local/www/
work:
# 作品目录,目录分隔符无论操作系统请用"/",路径末尾一定要有"/"
save-path: /opt/jeecgboot/upFiles/comp/zuopin

@ -158,7 +158,8 @@
</style>
<div class="app-loading">
<div class="app-loading-wrap">
<img src="/resource/img/logo.png" class="app-loading-logo" alt="Logo" />
<!-- <img src="/resource/img/logo.png" class="app-loading-logo" alt="Logo" />-->
<img src="/resource/img/comp/appLogo.png" class="app-loading-logo" alt="Logo" />
<div class="app-loading-dots">
<span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
</div>

Binary file not shown.

After

Width:  |  Height:  |  Size: 97 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 812 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 494 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 74 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 97 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 812 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 494 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 74 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 25 KiB

@ -358,7 +358,11 @@ a {
}
.login-background-img {
background-image: url(../icon/jeecg_bg.png);
//background-image: url(../icon/jeecg_bg.png);
//background-image: url(../icon/comp/comp_bg.png);
background-image: url(../../../../public/resource/img/comp/comp_bg.png);
background-size: cover;
background-position: top center;
background-repeat: no-repeat;

@ -35,7 +35,7 @@
-webkit-flex-basis: 60%;
background-color: #0198cd;
//background-image: url(../icon/jeecg_ad.png);
background-image: url(../icon/黄淮学院北门.png);
background-image: url(../../../../public/resource/img/comp/comp_ad.png);
background-size: cover;
}

@ -4,7 +4,8 @@
-->
<template>
<div class="anticon" :class="getAppLogoClass" @click="goHome">
<img src="../../../assets/images/logo.png" />
<!-- <img src="../../../assets/images/logo.png" />-->
<img src="../../../assets/images/comp/appLogo.png" />
<div class="ml-2 truncate md:opacity-100" :class="getTitleClass" v-show="showTitle">
{{ title }}
</div>

@ -5,4 +5,5 @@ export const GITHUB_URL = 'https://github.com/jeecgboot/jeecgboot-vue3';
export const DOC_URL = 'http://help.jeecg.com';
// site url
export const SITE_URL = 'http://www.jeecg.com';
// export const SITE_URL = 'http://www.jeecg.com';
export const SITE_URL = 'https://www.huanghuai.edu.cn/';

@ -14,6 +14,7 @@ enum Api {
importExcel = '/upfilePersion/upfilePersion/importExcel',
exportXls = '/upfilePersion/upfilePersion/exportXls',
workUpload = '/upfilePersion/upfilePersion/workUpload',
loginPageImageUpload = '/upfilePersion/upfilePersion/loginPageImageUpload',
canUpload = '/upfilePersion/upfilePersion/canUpload',
workBack = '/upfilePersion/upfilePersion/workBack',
applyWorkBack = '/upfilePersion/upfilePersion/applyWorkBack',
@ -114,6 +115,20 @@ export const workUpload = async (formData: FormData) => {
}
};
// 登录页logo上传
export const loginPageImageUpload = async (formData: FormData) => {
message.info('图片上传中...');
const { data } = await uploadMyFile(Api.loginPageImageUpload, formData);
if (data.code === 200) {
message.success(data.message);
return true;
} else {
message.error(data.message);
return false;
}
};
export const canUpload = (params) => {
const url = Api.canUpload;
return defHttp.get({ url, params });

@ -0,0 +1,114 @@
<template>
<a-modal :confirm-loading="uploading" v-model:visible="isModalShow"
title="图片上传" @ok="handleOk" @cancel="handleCancel">
<!-- <a-form-->
<!-- name="basic"-->
<!-- :label-col="{ span: 4}"-->
<!-- :wrapper-col="{ span: 19 }"-->
<!-- autocomplete="off"-->
<!-- style="margin-top: 20px"-->
<!-- >-->
<!-- <a-form-item label="作品名称:">-->
<!-- <a-input placeholder="请输入作品名称"-->
<!-- v-model:value.lazy="workName"/>-->
<!-- </a-form-item>-->
<!-- </a-form>-->
<a-upload-dragger
:fileList="readyUploadFileList"
:multiple="true"
:beforeUpload="workCustomUpload"
accept="image/png"
@remove="handleRemove"
>
<p class="ant-upload-drag-icon">
<inbox-outlined></inbox-outlined>
</p>
<p class="ant-upload-text">点击或拖拽文件到此处进行上传</p>
<!-- <p class="ant-upload-hint">-->
<!-- 可以同时上传多个文件,请一次性将作品中的所有文件进行上传</p>-->
</a-upload-dragger>
</a-modal>
</template>
<script lang="ts" setup>
import {ref} from 'vue';
import {InboxOutlined} from '@ant-design/icons-vue';
import {message, UploadProps} from "ant-design-vue";
import {loginPageImageUpload} from "/@/views/UpfilePersion/UpfilePersion.api";
const isModalShow = ref(false)
const uploading = ref(false)
const annualCompId = ref('')
const readyUploadFileList = ref<UploadProps['fileList']>([]);
const workName = ref('')
const flag = ref('')
let reloadData: Function;
// const modalShow = (show: boolean, id: string, reload: Function) => {
// readyUploadFileList.value = <UploadProps['fileList']>[]
// annualCompId.value = id
// uploading.value = false
// workName.value = ''
// isModalShow.value = show
// reloadData = reload
// }
const modalShow = (show: boolean, id: string, reload: Function) => {
readyUploadFileList.value = <UploadProps['fileList']>[]
// annualCompId.value = id
uploading.value = false
workName.value = ''
flag.value = id
isModalShow.value = show
reloadData = reload
}
async function handleOk() {
//
if (readyUploadFileList.value.length !=1) {
return message.error('请选择一个.png文件');
}
//
const formData: FormData = new FormData();
//
readyUploadFileList.value.forEach(file => formData.append("files", file))
formData.append('flag', flag.value)
//
// formData.append('flag', workName.value)
uploading.value = true
let resp = await loginPageImageUpload(formData)
uploading.value = false
if (resp) {
//
isModalShow.value = false
annualCompId.value = ''
readyUploadFileList.value = []
workName.value = ''
// reloadData()
}
}
function handleCancel() {
//
isModalShow.value = false
annualCompId.value = ''
uploading.value = false
readyUploadFileList.value = []
workName.value = ''
}
function workCustomUpload(file) {
readyUploadFileList.value = [...(readyUploadFileList.value || []), file];
return false;
}
const handleRemove: UploadProps['onRemove'] = file => {
const index = readyUploadFileList.value.indexOf(file);
const newFileList = readyUploadFileList.value.slice();
newFileList.splice(index, 1);
readyUploadFileList.value = newFileList;
};
defineExpose({
modalShow
})
</script>

@ -0,0 +1,220 @@
<template>
<!-- <PageWrapper title="上传">-->
<a-alert message="首页图片配置"/>
<div>
<br/>
<a-space size="small">
<a-button class="my-5" style="margin-right: 10px;" type="primary" @click="handleUploadImage('LOGO')">
上传LOGO
</a-button>
<a-button class="my-5" style="margin-right: 10px;" type="primary" @click="handleUploadImage('BG')">
上传背景图片
</a-button>
<a-button class="my-5" style="margin-right: 10px;" type="primary" @click="handleUploadImage('AD')">
上传公司图片
</a-button>
</a-space>
</div>
<!-- </PageWrapper>-->
<WorkUpload ref="workUploadRef"/>
</template>
<script lang="ts" name="upfile_persion-upfilePersion" setup>
import {reactive, ref} from 'vue';
import {useUserStore} from '/@/store/modules/user';
import {useRoute} from 'vue-router';
import WorkUpload from '/@/views/system/loginPage/components/Upload4Logo.vue';
import {useGlobSetting} from '/@/hooks/setting';
const globalSetting = useGlobSetting();
const formRef = ref();
const queryParam = reactive<any>({});
const toggleSearchStatus = ref<boolean>(false);
const registerModal = ref();
const workUploadRef = ref();
const userStore = useUserStore();
//
const route = useRoute();
async function handleUploadImage(flag) {
console.log("---上传图片flag",flag);
// isCanUpload.value = false;
// await canUpload({ annualCompPointId: route.query.annualCompPointId });
// isCanUpload.value = true;
// if (isCanUpload.value) {
// workUploadRef.value.modalShow(true, route.query.annualCompPointId, reload);
workUploadRef.value.modalShow(true,flag);
// }
}
</script>
<style lang="less" scoped>
.jeecg-basic-table-form-container {
.table-page-search-submitButtons {
display: block;
margin-bottom: 24px;
white-space: nowrap;
}
.query-group-cust {
width: calc(50% - 15px);
min-width: 100px !important;
}
.query-group-split-cust {
width: 30px;
display: inline-block;
text-align: center;
}
}
</style>
<!--<style lang="less" scoped>-->
<!--.user-setting-top {-->
<!-- padding-top: 40px;-->
<!-- width: 100%;-->
<!-- border-bottom: 1px solid @border-color-base;-->
<!-- display: flex;-->
<!-- padding-bottom: 40px;-->
<!--}-->
<!--.account-avatar {-->
<!-- align-items: center;-->
<!-- display: flex;-->
<!-- margin-right: 30px;-->
<!-- flex: 1;-->
<!--}-->
<!--.change-avatar {-->
<!-- img {-->
<!-- display: block;-->
<!-- margin-bottom: 15px;-->
<!-- border-radius: 50%;-->
<!-- }-->
<!--}-->
<!--.account-right {-->
<!-- margin-left: 25px !important;-->
<!--}-->
<!--.font-size-15 {-->
<!-- font-size: 15px;-->
<!--}-->
<!--.font-size-17 {-->
<!-- font-size: 17px;-->
<!--}-->
<!--.pointer {-->
<!-- cursor: pointer;-->
<!--}-->
<!--.account-name {-->
<!-- white-space: nowrap;-->
<!-- overflow: hidden;-->
<!-- width: 200px;-->
<!-- text-overflow: ellipsis;-->
<!-- line-height: 32px !important;-->
<!-- /*begin 兼容暗夜模式*/-->
<!-- color: @text-color;-->
<!-- /*end 兼容暗夜模式*/-->
<!-- font-weight: 500;-->
<!--}-->
<!--.gray-bd {-->
<!-- color: #bdbdbd-->
<!--}-->
<!--.account-icon {-->
<!-- margin-left: 4px;-->
<!--}-->
<!--.account-data {-->
<!-- width: 100% !important;-->
<!-- display: flex;-->
<!-- min-width: 0;-->
<!--}-->
<!--.account-detail {-->
<!-- width: 40%;-->
<!-- display: flex;-->
<!-- flex-direction: column;-->
<!-- padding: 40px 0;-->
<!-- .item-label {-->
<!-- display: inline-block;-->
<!-- text-align: left;-->
<!-- width: 80px;-->
<!-- }-->
<!--}-->
<!--.font-bold {-->
<!-- font-weight: 700 !important;-->
<!--}-->
<!--.margin-bottom-10 {-->
<!-- margin-bottom: 10px;-->
<!--}-->
<!--/*begin 兼容暗夜模式*/-->
<!--.gray-75 {-->
<!-- color: @text-color !important;-->
<!--}-->
<!--.gray-3 {-->
<!-- color: @text-color;-->
<!--}-->
<!--/*end 兼容暗夜模式*/-->
<!--.account-info {-->
<!-- width: 60%;-->
<!-- display: flex;-->
<!-- flex-direction: column;-->
<!-- padding: 40px 0;-->
<!-- box-sizing: border-box;-->
<!-- margin-left: 10px;-->
<!-- .item-label {-->
<!-- display: inline-block;-->
<!-- text-align: left;-->
<!-- width: 80px;-->
<!-- }-->
<!--}-->
<!--.nowarp {-->
<!-- overflow: hidden;-->
<!-- white-space: nowrap;-->
<!-- text-overflow: ellipsis;-->
<!--}-->
<!--.account-padding {-->
<!-- padding-left: 20px !important;-->
<!-- padding-right: 40px !important;-->
<!--}-->
<!--.use-day {-->
<!-- /*begin 兼容暗夜模式*/-->
<!-- color: @text-color;-->
<!-- /*end 兼容暗夜模式*/-->
<!-- margin-top: 10px;-->
<!-- font-size: 13px;-->
<!-- span {-->
<!-- color: #1e88e5;-->
<!-- margin-left: 5px;-->
<!-- }-->
<!--}-->
<!--.font-size-13 {-->
<!-- font-size: 13px;-->
<!--}-->
<!--/*begin 兼容暗夜模式*/-->
<!--.font-color-gray {-->
<!-- color: @text-color;-->
<!--}-->
<!--/*end 兼容暗夜模式*/-->
<!--</style>-->

@ -5,14 +5,12 @@
<div class="aui-logo" v-if="!getIsMobile">
<div>
<h3>
<!-- <img :src="logoImg" alt="jeecg" />-->
<!-- <img :src="logoImg_huanghuai" alt="jeecg" />-->
<img :src="logoImg" alt="jeecg" />
</h3>
</div>
</div>
<div v-else class="aui-phone-logo">
<!-- <img :src="logoImg" alt="jeecg" />-->
<!-- <img :src="logoImg_huanghuai" alt="jeecg" />-->
<img :src="logoImg" alt="jeecg" />
</div>
<div v-show="type === 'login'">
<div class="aui-content">
@ -21,7 +19,6 @@
<div class="aui-image">
<div class="aui-image-text">
<!-- <img :src="adTextImg" />-->
<!-- <img :src="logoImg_huanghuai" />-->
</div>
</div>
<div class="aui-formBox">
@ -116,7 +113,7 @@
</div>
<div class="aui-flex-box">
<div class="aui-third-login">
<a title="企业微信77" @click="onThirdLogin('wechat_enterprise')"><icon-font class="item-icon" type="icon-qiyeweixin3" /></a>
<a title="企业微信" @click="onThirdLogin('wechat_enterprise')"><icon-font class="item-icon" type="icon-qiyeweixin3" /></a>
</div>
</div>
<div class="aui-flex-box">
@ -162,9 +159,10 @@
import MiniForgotpad from './MiniForgotpad.vue';
import MiniRegister from './MiniRegister.vue';
import MiniCodelogin from './MiniCodelogin.vue';
import logoImg from '/@/assets/loginmini/icon/jeecg_logo.png';
import logoImg_huanghuai from '/@/assets/loginmini/icon/logo-huanghuai.png';
import adTextImg from '/@/assets/loginmini/icon/jeecg_ad_text.png';
// import logoImg from '/@/assets/loginmini/icon/jeecg_logo.png';
import logoImg from '/public/resource/img/comp/comp_logo.png';
// import adTextImg from '/@/assets/loginmini/icon/jeecg_ad_text.png';
import { AppLocalePicker, AppDarkModeToggle } from '/@/components/Application';
import { useLocaleStore } from '/@/store/modules/locale';
import { useDesign } from "/@/hooks/web/useDesign";

Loading…
Cancel
Save