center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

Merge branch 'dev' into pr@dev@perf_public_link_style

Browse Source
This commit is contained in:
fit2cloud-chenyw 2022-11-17 16:18:51 +08:00 committed by GitHub
commit c6c629fbd9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 596 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
backend/src/main/java/io/dataease/auth/filter/F2CDocFilter.java
View File

@ -1,26 +1,99 @@
package io.dataease.auth.filter;
import org.apache.shiro.web.filter.authc.AnonymousFilter;
import cn.hutool.core.util.ArrayUtil;
import io.dataease.auth.entity.SysUserEntity;
import io.dataease.auth.entity.TokenInfo;
import io.dataease.auth.service.AuthUserService;
import io.dataease.auth.util.JWTUtils;
import io.dataease.commons.license.DefaultLicenseService;
import io.dataease.commons.license.F2CLicenseResponse;
import io.dataease.commons.utils.CommonBeanFactory;
import io.dataease.commons.utils.LogUtil;
import org.apache.commons.lang3.ObjectUtils;
import org.apache.commons.lang3.StringUtils;
import org.apache.shiro.web.filter.AccessControlFilter;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletRequest;
import java.io.IOException;
import javax.servlet.http.HttpServletResponse;
import java.util.Arrays;
import static io.dataease.commons.license.F2CLicenseResponse.Status;
public class F2CDocFilter extends AccessControlFilter {
private static final String RESULT_URI_KEY = "result_uri_key";
private static final String NOLIC_PAGE = "nolic.html";
private static final String NO_LOGIN_PAGE = "/nologin.html";
private static final String DEFAULT_FAILED_PAGE = "/";
public class F2CDocFilter extends AnonymousFilter {
@Override
protected boolean onPreHandle(ServletRequest request, ServletResponse response, Object mappedValue) {
HttpServletRequest req = (HttpServletRequest) request;
String path = "/deApi";
protected boolean isAccessAllowed(ServletRequest servletRequest, ServletResponse servletResponse, Object o) throws Exception {
HttpServletRequest request = (HttpServletRequest) servletRequest;
try {
req.getRequestDispatcher(path).forward(req, response);
} catch (ServletException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
DefaultLicenseService defaultLicenseService = CommonBeanFactory.getBean(DefaultLicenseService.class);
F2CLicenseResponse f2CLicenseResponse = defaultLicenseService.validateLicense();
Status status = f2CLicenseResponse.getStatus();
if (status != Status.valid) {
request.setAttribute(RESULT_URI_KEY, NOLIC_PAGE);
return false;
}
} catch (Exception e) {
request.setAttribute(RESULT_URI_KEY, NOLIC_PAGE);
LogUtil.error(e.getMessage(), e);
return false;
}
try {
Boolean isLogin = validateLogin(request);
if (!isLogin) {
request.setAttribute(RESULT_URI_KEY, NO_LOGIN_PAGE);
return false;
}
} catch (Exception e) {
request.setAttribute(RESULT_URI_KEY, NO_LOGIN_PAGE);
LogUtil.error(e.getMessage(), e);
return false;
}
return true;
}
private Boolean validateLogin(HttpServletRequest request) throws Exception{
String authorization = request.getHeader("Authorization");
if (StringUtils.isBlank(authorization)) {
Cookie[] cookies = request.getCookies();
if (ArrayUtil.isNotEmpty(cookies)) {
Cookie cookie = Arrays.stream(cookies).filter(item -> StringUtils.equals(item.getName(), "Authorization")).findFirst().orElse(null);
if (ObjectUtils.isNotEmpty(cookie) && StringUtils.isNotBlank(cookie.getValue())) {
authorization = cookie.getValue();
}
}
}
if (StringUtils.isBlank(authorization)) {
return false;
}
TokenInfo tokenInfo = JWTUtils.tokenInfoByToken(authorization);
AuthUserService authUserService = CommonBeanFactory.getBean(AuthUserService.class);
SysUserEntity user = authUserService.getUserById(tokenInfo.getUserId());
if (user == null) {
return false;
}
String password = user.getPassword();
boolean verify = JWTUtils.verify(authorization, tokenInfo, password);
return verify;
}
@Override
protected boolean onAccessDenied(ServletRequest req, ServletResponse res) throws Exception {
HttpServletResponse response = (HttpServletResponse) res;
HttpServletRequest request = (HttpServletRequest) req;
Object attribute = request.getAttribute(RESULT_URI_KEY);
String path = ObjectUtils.isNotEmpty(attribute) ? attribute.toString() : DEFAULT_FAILED_PAGE;
request.getRequestDispatcher(path).forward(request, response);
return false;
}
}

17
backend/src/main/java/io/dataease/auth/filter/JWTFilter.java
View File

@ -1,5 +1,6 @@
package io.dataease.auth.filter;
import cn.hutool.core.util.URLUtil;
import com.auth0.jwt.algorithms.Algorithm;
import io.dataease.auth.entity.ASKToken;
import io.dataease.auth.entity.JWTToken;
@ -23,8 +24,10 @@ import org.springframework.web.bind.annotation.RequestMethod;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.nio.charset.Charset;
public class JWTFilter extends BasicHttpAuthenticationFilter {
@ -158,4 +161,18 @@ public class JWTFilter extends BasicHttpAuthenticationFilter {
httpServletResponse.setHeader("authentication-status", "login_expire");
}
@Override
protected boolean onAccessDenied(ServletRequest req, ServletResponse res, Object mappedValue) throws Exception {
HttpServletResponse response = (HttpServletResponse) res;
HttpServletRequest request = (HttpServletRequest) req;
String requestURI = request.getRequestURI();
String msg = requestURI + " has been denied";
String encode = URLUtil.encode(msg, Charset.forName("UTF-8"));
Cookie cookie_error = new Cookie("onAccessDeniedMsg", encode);
cookie_error.setPath("/");
response.addCookie(cookie_error);
response.sendRedirect("/");
return false;
}
}

14
backend/src/main/java/io/dataease/auth/service/impl/ShiroServiceImpl.java
View File

@ -11,6 +11,7 @@ import java.util.Map;
public class ShiroServiceImpl implements ShiroService {
private final static String ANON = "anon";
private final static String DOC = "doc";
@Override
public Map<String, String> loadFilterChainDefinitionMap() {
@ -20,15 +21,18 @@ public class ShiroServiceImpl implements ShiroService {
// ----------------------------------------------------------
// 放行Swagger2页面，需要放行这些
filterChainDefinitionMap.put("/doc.html**", "doc");
filterChainDefinitionMap.put("/deApi**", ANON);
filterChainDefinitionMap.put("/doc.html**", DOC);
filterChainDefinitionMap.put("/deApi**", DOC);
filterChainDefinitionMap.put("/swagger-ui.html", ANON);
filterChainDefinitionMap.put("/swagger-ui/**", ANON);
filterChainDefinitionMap.put("/swagger/**", ANON);
filterChainDefinitionMap.put("/webjars/**", ANON);
filterChainDefinitionMap.put("/swagger-resources/**", ANON);
filterChainDefinitionMap.put("/v2/**", ANON);
filterChainDefinitionMap.put("/v3/**", ANON);
filterChainDefinitionMap.put("/swagger-resources/**", DOC);
filterChainDefinitionMap.put("/v2/**", DOC);
filterChainDefinitionMap.put("/v3/**", DOC);
filterChainDefinitionMap.put("/**.gif", ANON);
filterChainDefinitionMap.put("/**.png", ANON);
filterChainDefinitionMap.put("/static/**", ANON);
filterChainDefinitionMap.put("/css/**", ANON);

15
backend/src/main/java/io/dataease/controller/IndexController.java
View File

@ -2,17 +2,16 @@ package io.dataease.controller;
import io.dataease.commons.exception.DEException;
import io.dataease.commons.license.DefaultLicenseService;
import io.dataease.commons.license.F2CLicenseResponse;
import io.dataease.commons.utils.CodingUtil;
import io.dataease.commons.utils.LogUtil;
import io.dataease.commons.utils.ServletUtils;
import io.dataease.service.panel.PanelLinkService;
import org.apache.commons.lang3.StringUtils;
import org.springframework.http.HttpRequest;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import javax.annotation.Resource;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletRequest;
@ -42,13 +41,7 @@ public class IndexController {
@GetMapping("/deApi")
public String deApi() {
F2CLicenseResponse f2CLicenseResponse = defaultLicenseService.validateLicense();
switch (f2CLicenseResponse.getStatus()) {
case valid:
return "doc.html";
default:
return "nolic.html";
}
return "doc.html";
}
@GetMapping("/link/{index}")
@ -64,8 +57,8 @@ public class IndexController {
// TODO 增加仪表板外部参数
HttpServletRequest request = ServletUtils.request();
String attachParams = request.getParameter("attachParams");
if(StringUtils.isNotEmpty(attachParams)){
url = url+"&attachParams="+attachParams;
if (StringUtils.isNotEmpty(attachParams)) {
url = url + "&attachParams=" + attachParams;
}
response.sendRedirect(url);
} catch (IOException e) {

2
backend/src/main/java/io/dataease/service/chart/ChartViewService.java
View File

@ -908,7 +908,7 @@ public class ChartViewService {
if (StringUtils.equalsIgnoreCase(table.getType(), DatasetType.DB.name())) {
datasourceRequest.setTable(dataTableInfoDTO.getTable());
if (StringUtils.equalsAnyIgnoreCase(view.getType(), "text", "gauge", "liquid")) {
datasourceRequest.setQuery(qp.getSQLSummary(dataTableInfoDTO.getTable(), yAxis, fieldCustomFilter, rowPermissionsTree, extFilterList, view, ds));
querySql = qp.getSQLSummary(dataTableInfoDTO.getTable(), yAxis, fieldCustomFilter, rowPermissionsTree, extFilterList, view, ds);
} else if (StringUtils.containsIgnoreCase(view.getType(), "stack")) {
querySql = qp.getSQLStack(dataTableInfoDTO.getTable(), xAxis, yAxis, fieldCustomFilter, rowPermissionsTree, extFilterList, extStack, ds, view);
} else if (StringUtils.containsIgnoreCase(view.getType(), "scatter")) {

BIN
frontend/public/dynamic.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.8 MiB

BIN
frontend/public/lic.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

37
frontend/public/nolic.html
View File

@ -1,13 +1,46 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>DataEase</title>
<style>
html,
body {
margin: 0 !important;
height: 100%;
}
.no-login-dynamic {
height: 100%;
background: url(./lic.png) no-repeat;
background-size: cover;
text-align: center;
}
span {
color: #000;
font-size: 25px;
font-weight: 500;
position: relative;
top: 130px;
}
</style>
</head>
<body style="height: 100%;">
<div>缺少许可</div>
<div class="no-login-dynamic">
<span>缺少许可</span>
</div>
</body>
</html>
<script>
document.getElementsByTagName("body")
</script>
</html>

50
frontend/public/nologin.html Normal file
View File

@ -0,0 +1,50 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>DataEase</title>
<style>
html,
body {
margin: 0 !important;
height: 100%;
}
.no-login-dynamic {
height: 100%;
background: url(./dynamic.gif) no-repeat;
background-size: cover;
text-align: center;
}
span {
color: #fff;
font-size: 25px;
font-weight: 500;
position: relative;
top: 30px;
}
</style>
</head>
<body style="height: 100%;">
<div id="de-nologin-div" class="no-login-dynamic">
<span>请先登录，即将跳转！</span>
</div>
</body>
<script>
const timer = setTimeout(() => {
window.location.href = "/";
}, 3500)
</script>
</html>

16
frontend/src/components/canvas/components/editor/Preview.vue
View File

@ -272,15 +272,19 @@ export default {
width: '100%'
}
if (this.canvasStyleData.openCommonStyle && this.isMainCanvas()) {
if (this.canvasStyleData.panel.backgroundType === 'image' && this.canvasStyleData.panel.imageUrl) {
const styleInfo = this.terminal === 'mobile' && this.canvasStyleData.panel.mobileSetting && this.canvasStyleData.panel.mobileSetting.customSetting
? this.canvasStyleData.panel.mobileSetting : this.canvasStyleData.panel
if (styleInfo.backgroundType === 'image' && typeof (styleInfo.imageUrl) === 'string') {
style = {
background: `url(${imgUrlTrans(this.canvasStyleData.panel.imageUrl)}) no-repeat`,
...style
background: `url(${imgUrlTrans(styleInfo.imageUrl)}) no-repeat`
}
} else if (this.canvasStyleData.panel.backgroundType === 'color') {
} else if (styleInfo.backgroundType === 'color') {
style = {
background: this.canvasStyleData.panel.color,
...style
background: styleInfo.color
}
} else {
style = {
background: '#f7f8fa'
}
}
}

6
frontend/src/components/canvas/customComponent/UserView.vue
View File

@ -640,7 +640,7 @@ export default {
},
viewInCache(param) {
this.view = param.view
if (this.view.customAttr) {
if (this.view && this.view.customAttr) {
this.currentPage.pageSize = parseInt(JSON.parse(this.view.customAttr).size.tablePageSize)
}
param.viewId && param.viewId === this.element.propValue.viewId && this.getDataEdit(param)
@ -703,7 +703,7 @@ export default {
requestInfo.proxy = { userId: this.panelInfo.proxy }
}
// table-info明细表增加分页
if (this.view.customAttr) {
if (this.view && this.view.customAttr) {
const attrSize = JSON.parse(this.view.customAttr).size
if (this.chart.type === 'table-info' && this.view.datasetMode === 0 && (!attrSize.tablePageMode || attrSize.tablePageMode === 'page')) {
requestInfo.goPage = this.currentPage.page
@ -1162,7 +1162,7 @@ export default {
queryFrom: 'panel'
}
// table-info明细表增加分页
if (this.view.customAttr) {
if (this.view && this.view.customAttr) {
const attrSize = JSON.parse(this.view.customAttr).size
if (this.chart.type === 'table-info' && this.view.datasetMode === 0 && (!attrSize.tablePageMode || attrSize.tablePageMode === 'page')) {
requestInfo.goPage = this.currentPage.page

3
frontend/src/components/canvas/utils/utils.js
View File

@ -7,7 +7,7 @@ import {
import { ApplicationContext } from '@/utils/ApplicationContext'
import { uuid } from 'vue-uuid'
import store from '@/store'
import { AIDED_DESIGN, PANEL_CHART_INFO, TAB_COMMON_STYLE } from '@/views/panel/panel'
import { AIDED_DESIGN, MOBILE_SETTING, PANEL_CHART_INFO, TAB_COMMON_STYLE } from '@/views/panel/panel'
import html2canvas from 'html2canvasde'
export function deepCopy(target) {
@ -86,6 +86,7 @@ export function panelDataPrepare(componentData, componentStyle, callback) {
componentStyle.chartInfo.tabStyle = (componentStyle.chartInfo.tabStyle || deepCopy(TAB_COMMON_STYLE))
componentStyle.themeId = (componentStyle.themeId || 'NO_THEME')
componentStyle.panel.themeColor = (componentStyle.panel.themeColor || 'light')
componentStyle.panel.mobileSetting = (componentStyle.panel.mobileSetting || MOBILE_SETTING)
componentData.forEach((item, index) => {
if (item.component && item.component === 'de-date') {
const widget = ApplicationContext.getService(item.serviceName)

5
frontend/src/lang/en.js
View File

@ -1865,7 +1865,12 @@ export default {
sure_bt: 'Confirm'
},
panel: {
down: 'Down',
mobile_style_setting: 'Style setting',
mobile_style_setting_tips: 'Customize the mobile background',
board: 'Border',
text: 'Text',
board_background: 'Background',

5
frontend/src/lang/tw.js
View File

@ -1865,7 +1865,12 @@ export default {
sure_bt: '確定'
},
panel: {
down: '下載',
mobile_style_setting: '樣式設置',
mobile_style_setting_tips: '自定義移動端背景',
board: '邊框',
text: '文字',
board_background: '背景',

5
frontend/src/lang/zh.js
View File

@ -1865,7 +1865,12 @@ export default {
sure_bt: '确定'
},
panel: {
down: '下载',
mobile_style_setting: '样式设置',
mobile_style_setting_tips: '自定义移动端背景',
board: '边框',
text: '文字',
board_background: '背景',

114
frontend/src/views/panel/edit/ComponentWait.vue
View File

@ -1,9 +1,22 @@
<template>
<el-row class="component-wait">
<el-row class="component-wait-title">
{{ $t('panel.component_hidden') }}
</el-row>
<el-row class="component-wait-main">
<el-tabs
v-model="activeName"
>
<el-tab-pane
:label="$t('panel.component_hidden')"
name="component-area"
/>
<el-tab-pane
:label="$t('panel.mobile_style_setting')"
name="style-area"
/>
</el-tabs>
<el-row
v-show="activeName === 'component-area'"
class="component-wait-main"
:style="mobileCanvasStyle"
>
<el-col
v-for="(config) in pcComponentData"
v-if="!config.mobileSelected && config.canvasId === 'canvas-main'"
@ -17,18 +30,25 @@
</el-col>
</el-row>
<el-row
v-show="activeName === 'style-area'"
class="component-wait-main"
style="padding:10px"
>
<mobile-background-selector />
</el-row>
</el-row>
</template>
<script>
import { mapState } from 'vuex'
import ComponentWaitItem from '@/views/panel/edit/ComponentWaitItem'
import MobileBackgroundSelector from '@/views/panel/subjectSetting/panelStyle/MobileBackgroundSelector'
import { imgUrlTrans } from '@/components/canvas/utils/utils'
export default {
name: 'ComponentWait',
components: { ComponentWaitItem },
components: { MobileBackgroundSelector, ComponentWaitItem },
props: {
template: {
type: Object,
@ -39,6 +59,7 @@ export default {
},
data() {
return {
activeName: 'component-area',
itemWidth: 280,
itemHeight: 200,
outStyle: {
@ -48,6 +69,27 @@ export default {
}
},
computed: {
mobileCanvasStyle() {
let style
if (this.canvasStyleData.openCommonStyle) {
const styleInfo = this.canvasStyleData.panel.mobileSetting && this.canvasStyleData.panel.mobileSetting.customSetting
? this.canvasStyleData.panel.mobileSetting : this.canvasStyleData.panel
if (styleInfo.backgroundType === 'image' && typeof (styleInfo.imageUrl) === 'string') {
style = {
background: `url(${imgUrlTrans(styleInfo.imageUrl)}) no-repeat`
}
} else if (styleInfo.backgroundType === 'color') {
style = {
background: styleInfo.color
}
} else {
style = {
background: '#f7f8fa'
}
}
}
return style
},
// 移动端编辑组件选择按钮显示
mobileCheckBarShow() {
// 显示条件：1.当前是移动端画布编辑状态
@ -62,36 +104,44 @@ export default {
},
...mapState([
'mobileLayoutStatus',
'canvasStyleData',
'pcComponentData'
])
},
methods: {
}
methods: {}
}
</script>
<style scoped>
.component-wait{
width: 100%;
height: 100%;
}
.component-wait-title {
width: 100%;
height: 30px;
color: #FFFFFF;
vertical-align: center;
background-color: #9ea6b2;
border-bottom: 1px black;
}
.component-wait-main {
width: 100%;
height: calc(100% - 30px);
float: left;
overflow-y: auto;
}
.component-custom {
outline: none;
width: 100% !important;
height: 100%;
}
.component-wait {
width: 100%;
height: 100%;
}
.component-wait-title {
width: 100%;
height: 30px;
color: #FFFFFF;
vertical-align: center;
background-color: #9ea6b2;
border-bottom: 1px black;
}
.component-wait-main {
width: 100%;
height: calc(100% - 40px);
float: left;
overflow-y: auto;
}
.component-custom {
outline: none;
width: 100% !important;
height: 100%;
}
::v-deep .el-tabs--top {
height: 40px !important;
background-color: #9ea6b2;
}
</style>

13
frontend/src/views/panel/edit/index.vue
View File

@ -251,7 +251,6 @@
<el-col
:span="16"
class="this_mobile_canvas_cell this_mobile_canvas_wait_cell"
:style="mobileCanvasStyle"
>
<component-wait />
</el-col>
@ -680,13 +679,15 @@ export default {
mobileCanvasStyle() {
let style
if (this.canvasStyleData.openCommonStyle) {
if (this.canvasStyleData.panel.backgroundType === 'image' && typeof (this.canvasStyleData.panel.imageUrl) === 'string') {
const styleInfo = this.canvasStyleData.panel.mobileSetting && this.canvasStyleData.panel.mobileSetting.customSetting
? this.canvasStyleData.panel.mobileSetting : this.canvasStyleData.panel
if (styleInfo.backgroundType === 'image' && typeof (styleInfo.imageUrl) === 'string') {
style = {
background: `url(${imgUrlTrans(this.canvasStyleData.panel.imageUrl)}) no-repeat`
background: `url(${imgUrlTrans(styleInfo.imageUrl)}) no-repeat`
}
} else if (this.canvasStyleData.panel.backgroundType === 'color') {
} else if (styleInfo.backgroundType === 'color') {
style = {
background: this.canvasStyleData.panel.color
background: styleInfo.color
}
} else {
style = {
@ -1537,7 +1538,7 @@ export default {
.this_mobile_canvas_wait_cell {
background-size: 100% 100% !important;
border: 2px solid #9ea6b2
border: 1px solid #9ea6b2
}
.canvas_main_content {

8
frontend/src/views/panel/panel.js
View File

@ -29,7 +29,15 @@ export const FILTER_COMMON_STYLE_DARK = {
innerBgColor: '#131E42'
}
export const MOBILE_SETTING = {
customSetting: false,
color: '#ffffff',
imageUrl: null,
backgroundType: 'image'
}
export const DEFAULT_PANEL_STYLE = {
mobileSetting: MOBILE_SETTING,
themeColor: 'light',
color: '#ffffff',
imageUrl: null,

268
frontend/src/views/panel/subjectSetting/panelStyle/MobileBackgroundSelector.vue Normal file
View File

@ -0,0 +1,268 @@
<template>
<div style="width: 100%;margin-top: 12px">
<el-form
ref="overallMobileSettingForm"
size="mini"
>
<el-col>
<el-checkbox v-model="mobileSetting.customSetting">{{ $t('panel.mobile_style_setting_tips') }}</el-checkbox>
</el-col>
<el-col>
<el-radio-group
v-model="mobileSetting.backgroundType"
size="mini"
:disabled="!mobileSetting.customSetting"
@change="onChangeType()"
>
<el-radio label="color">{{ $t('chart.color') }}</el-radio>
<el-radio label="image">{{ $t('panel.photo') }}</el-radio>
</el-radio-group>
</el-col>
<el-col
v-show="mobileSetting.backgroundType==='color'"
:span="10"
>
<el-color-picker
v-model="mobileSetting.color"
:predefine="predefineColors"
size="mini"
class="color-picker-custom"
:disabled="!mobileSetting.customSetting"
@change="onChangeType"
/>
</el-col>
<el-col
v-show="mobileSetting.backgroundType==='image'"
:span="10"
>
<el-upload
action=""
accept=".jpeg,.jpg,.png,.gif"
class="avatar-uploader"
list-type="picture-card"
:http-request="upload"
:class="{disabled:uploadDisabled}"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:disabled="!mobileSetting.customSetting"
:file-list="fileList"
>
<i class="el-icon-plus" />
</el-upload>
<el-dialog
top="25vh"
width="600px"
:modal-append-to-body="false"
:visible.sync="dialogVisible"
>
<img
width="100%"
:src="dialogImageUrl"
alt=""
>
</el-dialog>
</el-col>
<el-col v-show="mobileSetting.backgroundType==='image'">
<span
v-show="!mobileSetting.imageUrl"
class="image-hint"
>{{ $t('panel.panel_background_image_tips') }}</span>
<span
v-show="mobileSetting.imageUrl && mobileSetting.customSetting"
class="re-update-span"
@click="goFile"
>{{ $t('panel.reUpload') }}</span>
</el-col>
<input
id="input"
ref="files"
type="file"
accept=".jpeg,.jpg,.png,.gif"
hidden
@click="e => {e.target.value = '';}"
@change="reUpload"
>
</el-form>
</div>
</template>
<script>
import { mapState } from 'vuex'
import { deepCopy, imgUrlTrans } from '@/components/canvas/utils/utils'
import { COLOR_PANEL } from '@/views/chart/chart/chart'
import { uploadFileResult } from '@/api/staticResource/staticResource'
export default {
name: 'MobileBackgroundSelector',
data() {
return {
maxImageSize: 15000000,
fileList: [],
dialogImageUrl: '',
dialogVisible: false,
uploadDisabled: false,
mobileSetting: null,
predefineColors: COLOR_PANEL
}
},
computed: mapState([
'canvasStyleData'
]),
watch: {
// deep监听panel 如果改变 提交到 store
},
created() {
// 初始化赋值
this.mobileSetting = this.canvasStyleData.panel.mobileSetting
if (this.mobileSetting.imageUrl && typeof (this.mobileSetting.imageUrl) === 'string') {
this.fileList.push({ url: imgUrlTrans(this.mobileSetting.imageUrl) })
}
},
methods: {
goFile() {
this.$refs.files.click()
},
commitStyle() {
const canvasStyleData = deepCopy(this.canvasStyleData)
canvasStyleData.panel.mobileSetting = this.mobileSetting
this.$store.commit('setCanvasStyle', canvasStyleData)
this.$store.commit('recordSnapshot', 'commitStyle')
},
onChangeType() {
this.commitStyle()
},
handleRemove(file, fileList) {
this.uploadDisabled = false
this.mobileSetting.imageUrl = null
this.fileList = []
this.commitStyle()
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url
this.dialogVisible = true
},
upload(file) {
const _this = this
if (file.size > this.maxImageSize) {
this.sizeMessage()
}
uploadFileResult(file.file, (fileUrl) => {
_this.$store.commit('canvasChange')
_this.mobileSetting.imageUrl = fileUrl
_this.fileList = [{ url: imgUrlTrans(this.mobileSetting.imageUrl) }]
_this.commitStyle()
})
},
reUpload(e) {
const file = e.target.files[0]
const _this = this
if (file.size > this.maxImageSize) {
this.sizeMessage()
}
uploadFileResult(file, (fileUrl) => {
_this.$store.commit('canvasChange')
_this.mobileSetting.imageUrl = fileUrl
_this.fileList = [{ url: imgUrlTrans(this.mobileSetting.imageUrl) }]
_this.commitStyle()
})
},
sizeMessage() {
this.$notify({
message: this.$t('panel.image_size_tips'),
position: 'top-left'
})
}
}
}
</script>
<style scoped>
.avatar-uploader {
position: relative;
margin-left: 0px;
margin-top: 8px;
height: 80px;
width: 80px;
line-height: 80px;
overflow: hidden;
}
.avatar-uploader ::v-deep .el-upload {
width: 80px;
height: 80px;
line-height: 80px;
}
.avatar-uploader ::v-deep .el-upload-list li {
width: 80px !important;
height: 80px !important;
}
.disabled ::v-deep .el-upload--picture-card {
display: none;
}
.shape-item {
padding: 6px;
border: none;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.form-item-slider ::v-deep .el-form-item__label {
font-size: 12px;
line-height: 38px;
}
.form-item ::v-deep .el-form-item__label {
font-size: 12px;
}
.el-select-dropdown__item {
padding: 0 20px;
}
span {
font-size: 12px
}
.el-form-item {
margin-bottom: 6px;
}
.color-picker-custom {
margin-left: 0px;
cursor: pointer;
margin-top: 8px;
z-index: 1004;
}
.custom-item {
width: 70px;
}
.re-update-span {
cursor: pointer;
color: #3370FF;
size: 14px;
line-height: 22px;
font-weight: 400;
}
.image-hint {
color: #8F959E;
size: 14px;
line-height: 22px;
font-weight: 400;
}
.custom-item-text {
font-weight: 400 !important;
font-size: 14px !important;
color: var(--TextPrimary, #1F2329) !important;
line-height: 22px;
}
</style>