forked from github/dataease
feat:恢复显示设置，仪表盘样式设置等
This commit is contained in:
wangjiahao
parent
70a298025b
commit
43489d63f1
38
frontend/src/api/commonAjax.js
Normal file
38
frontend/src/api/commonAjax.js
Normal file
@ -0,0 +1,38 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
export function post(url, data) {
|
||||
return request({
|
||||
url: url,
|
||||
method: 'post',
|
||||
loading: true,
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export function get(url) {
|
||||
return request({
|
||||
url: url,
|
||||
method: 'get',
|
||||
loading: true
|
||||
})
|
||||
}
|
||||
|
||||
export function fileUpload(url, file, files, param) {
|
||||
const formData = new FormData()
|
||||
if (file) {
|
||||
formData.append('file', file)
|
||||
}
|
||||
if (files) {
|
||||
files.forEach(f => {
|
||||
formData.append('files', f)
|
||||
})
|
||||
}
|
||||
formData.append('request', new Blob([JSON.stringify(param)], { type: 'application/json' }))
|
||||
return request({
|
||||
method: 'POST',
|
||||
loading: true,
|
||||
url: url,
|
||||
data: formData
|
||||
})
|
||||
}
|
||||
export default { fileUpload }
|
||||
@ -63,6 +63,7 @@ export default {
|
||||
closeSidebar(evt) {
|
||||
const parent = evt.target.closest('.rightPanel')
|
||||
if (!parent) {
|
||||
debugger
|
||||
this.show = false
|
||||
window.removeEventListener('click', this.closeSidebar)
|
||||
}
|
||||
|
||||
@ -12,6 +12,10 @@
|
||||
<span>画布比例</span>
|
||||
<input v-model="scale" @input="handleScaleChange"> %
|
||||
</div>
|
||||
|
||||
<el-tooltip content="样式">
|
||||
<el-button class="el-icon-magic-stick" size="mini" circle @click="showPanel" />
|
||||
</el-tooltip>
|
||||
<el-tooltip content="撤消">
|
||||
<el-button class="el-icon-refresh-right" size="mini" circle @click="undo" />
|
||||
</el-tooltip>
|
||||
@ -38,16 +42,12 @@
|
||||
</el-button>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- 预览 -->
|
||||
<!-- <PreviewEject v-model="isShowPreview" @change="handlePreviewChange" />-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import generateID from '@/components/canvas/utils/generateID'
|
||||
import toast from '@/components/canvas/utils/toast'
|
||||
import PreviewEject from '@/components/canvas/components/Editor/PreviewEject'
|
||||
import { mapState } from 'vuex'
|
||||
import { commonStyle, commonAttr } from '@/components/canvas/custom-component/component-list'
|
||||
import eventBus from '@/components/canvas/utils/eventBus'
|
||||
@ -56,7 +56,6 @@ import { post } from '@/api/panel/panel'
|
||||
import bus from '@/utils/bus'
|
||||
|
||||
export default {
|
||||
components: { PreviewEject },
|
||||
data() {
|
||||
return {
|
||||
isShowPreview: false,
|
||||
@ -152,6 +151,9 @@ export default {
|
||||
this.$store.commit('redo')
|
||||
},
|
||||
|
||||
showPanel() {
|
||||
this.$emit('showPanel', 2)
|
||||
},
|
||||
handleFileChange(e) {
|
||||
const file = e.target.files[0]
|
||||
if (!file.type.includes('image')) {
|
||||
|
||||
@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<div>
|
||||
<div style="width: 100%">
|
||||
<el-popover
|
||||
placement="right"
|
||||
width="200"
|
||||
trigger="click"
|
||||
>
|
||||
<el-col>
|
||||
<el-form ref="backgroundForm" :model="backgroundForm" label-width="80px" size="mini">
|
||||
<el-form-item label="颜色" class="form-item">
|
||||
<colorPicker v-model="backgroundForm.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeBackgroundStyle" />
|
||||
</el-form-item>
|
||||
<el-form-item label="图片" class="form-item">
|
||||
<colorPicker v-model="backgroundForm.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeBackgroundStyle" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
<el-button slot="reference" size="mini" class="shape-item">背景<i class="el-icon-setting el-icon--right" /></el-button>
|
||||
</el-popover>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { DEFAULT_BACKGROUND_COLOR } from '@/views/panel/panel'
|
||||
|
||||
export default {
|
||||
name: 'BackgroundSelector',
|
||||
props: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
backgroundForm: JSON.parse(JSON.stringify(DEFAULT_BACKGROUND_COLOR))
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
changeBackgroundStyle() {
|
||||
this.$emit('onChangeBackgroundForm', this.backgroundForm)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.shape-item{
|
||||
padding: 6px;
|
||||
border: none;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.form-item-slider>>>.el-form-item__label{
|
||||
font-size: 12px;
|
||||
line-height: 38px;
|
||||
}
|
||||
.form-item>>>.el-form-item__label{
|
||||
font-size: 12px;
|
||||
}
|
||||
.el-select-dropdown__item{
|
||||
padding: 0 20px;
|
||||
}
|
||||
span{
|
||||
font-size: 12px
|
||||
}
|
||||
.el-form-item{
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
</style>
|
||||
251
frontend/src/views/panel/SubjectSetting/Slider.vue
Normal file
251
frontend/src/views/panel/SubjectSetting/Slider.vue
Normal file
File diff suppressed because one or more lines are too long
157
frontend/src/views/panel/SubjectSetting/SubjectTemplateItem.vue
Normal file
157
frontend/src/views/panel/SubjectSetting/SubjectTemplateItem.vue
Normal file
@ -0,0 +1,157 @@
|
||||
<template>
|
||||
<div class="subject-template">
|
||||
<div class="vertical-layout">
|
||||
<i class="el-icon-error" />
|
||||
<i class="el-icon-edit" />
|
||||
<!-- 背景-->
|
||||
<div style="inset: 0px; position: absolute; background: 0% 0% / cover rgb(239, 241, 244);" />
|
||||
|
||||
<!-- 视图组件 背景-->
|
||||
<div style="inset: 17px 10px 10px; position: absolute; background: 0% 0% / cover rgb(255, 255, 255);" />
|
||||
<!-- 视图组件 主题-->
|
||||
<div style="inset: 20px 13px 15px; position: absolute;">
|
||||
<div style="position: absolute; inset: 0px 4px; width: auto; height: auto;">
|
||||
<!--柱形-->
|
||||
<div style="left: 0px; top: 11px; bottom: 0px; width: 3px; position: absolute; background-color: rgb(255, 191, 83);" />
|
||||
<div style="left: 5px; top: 6px; bottom: 0px; width: 3px; position: absolute; background-color: rgb(4, 177, 194);" />
|
||||
<div style="left: 10px; top: 2px; bottom: 0px; width: 3px; position: absolute; background-color: rgb(240, 116, 116);" />
|
||||
|
||||
<!--柱形-->
|
||||
<div style="left: 20px; top: 11px; bottom: 0px; width: 3px; position: absolute; background-color: rgb(255, 191, 83);" />
|
||||
<div style="left: 25px; top: 2px; bottom: 0px; width: 3px; position: absolute; background-color: rgb(4, 177, 194);" />
|
||||
<div style="left: 30px; top: 6px; bottom: 0px; width: 3px; position: absolute; background-color: rgb(240, 116, 116);" />
|
||||
|
||||
<!--柱形-->
|
||||
<div style="left: 40px; top: 2px; bottom: 0px; width: 3px; position: absolute; background-color: rgb(255, 191, 83);" />
|
||||
<div style="left: 45px; top: 6px; bottom: 0px; width: 3px; position: absolute; background-color: rgb(4, 177, 194);" />
|
||||
<div style="left: 50px; top: 11px; bottom: 0px; width: 3px; position: absolute; background-color: rgb(240, 116, 116);" />
|
||||
|
||||
<!--柱形-->
|
||||
<div style="left: 60px; top: 6px; bottom: 0px; width: 3px; position: absolute; background-color: rgb(255, 191, 83);" />
|
||||
<div style="left: 65px; top: 11px; bottom: 0px; width: 3px; position: absolute; background-color: rgb(4, 177, 194);" />
|
||||
<div style="left: 70px; top: 2px; bottom: 0px; width: 3px; position: absolute; background-color: rgb(240, 116, 116);" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 表格表头颜色 -->
|
||||
<div style="left: 10px; right: 10px; top: 10px; height: 6px; position: absolute; background: 0% 0% / cover rgb(255, 255, 255);" />
|
||||
|
||||
<!-- 字体颜色 -->
|
||||
<div style="left: 14px; top: 10px; height: 6px; position: absolute; vertical-align: middle">
|
||||
<div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; background-color: rgb(26, 26, 26);float: left;" />
|
||||
<div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; background-color: rgb(26, 26, 26);float: left;" />
|
||||
<div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; background-color: rgb(26, 26, 26);float: left;" />
|
||||
<div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; background-color: rgb(26, 26, 26);float: left;" />
|
||||
<div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; background-color: rgb(26, 26, 26);float: left;" />
|
||||
<div style="width: 1px; height: 2px; position: relative; flex-shrink: 0; margin-top: 2px;margin-right: 1px; background-color: rgb(26, 26, 26);float: left;" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div style="position: absolute; left: 0px; right: 0px; bottom: 0px; height: 30px;">
|
||||
<div style=" background-color:#f7f8fa;color:#3d4d66;font-size:12px;height: 30px; line-height: 30px; text-align: center; white-space: pre; text-overflow: ellipsis; margin-left: 1px; margin-right: 1px;">
|
||||
<span style="margin-top: 8px">Preset style 1</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'StyleTemplateItem',
|
||||
props: {
|
||||
template: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classBackground() {
|
||||
return {
|
||||
background: `url(${this.template.snapshot}) no-repeat`,
|
||||
'background-size': `100% 100%`
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
templateDelete() {
|
||||
this.$alert('是否删除模板：' + this.template.name + '？', '', {
|
||||
confirmButtonText: '确认',
|
||||
callback: (action) => {
|
||||
if (action === 'confirm') {
|
||||
this.$emit('templateDelete', this.template.id)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
templateEdit() {
|
||||
this.$emit('templateEdit', this.template)
|
||||
},
|
||||
handleDelete() {
|
||||
console.log('handleDelete')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.subject-template {
|
||||
width: 110px;
|
||||
height: 90px;
|
||||
position: relative;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.demonstration {
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin: 10px auto;
|
||||
width: 150px;
|
||||
white-space:nowrap;
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
}
|
||||
|
||||
.vertical-layout {
|
||||
overflow: hidden auto;
|
||||
position: absolute;
|
||||
inset: 0px 0px 30px;
|
||||
width: 108px; height: 58px;
|
||||
margin: 0 auto;
|
||||
box-shadow: 0 0 2px 0 rgba(31,31,31,0.15), 0 1px 2px 0 rgba(31,31,31,0.15);
|
||||
border: solid 1px #fff;
|
||||
box-sizing: border-box;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.vertical-layout:hover {
|
||||
border: solid 1px #4b8fdf;
|
||||
border-radius: 3px;
|
||||
color: deepskyblue;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.vertical-layout > i{
|
||||
float: right;
|
||||
color: gray;
|
||||
margin: 2px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.vertical-layout > i:hover {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.vertical-layout:hover > .el-icon-error {
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.vertical-layout:hover > .el-icon-edit {
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
</style>
|
||||
90
frontend/src/views/panel/SubjectSetting/index.vue
Normal file
90
frontend/src/views/panel/SubjectSetting/index.vue
Normal file
@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<el-row class="slider-container">
|
||||
<div style="height: 40px; line-height: 40px; padding-left: 15px; text-align: left; white-space: pre; text-overflow: ellipsis; left: 0px; right: 0px; top: 0px; font-weight: 700">仪表盘主题</div>
|
||||
<div style="height: 1px; position: absolute; left: 15px; right: 15px; top: 40px; box-sizing:border-box;border-bottom: 1px solid #e8eaed" />
|
||||
<div>
|
||||
<slider />
|
||||
</div>
|
||||
<!--折叠面板-->
|
||||
<div style="margin: 10px;overflow-y: auto">
|
||||
<el-collapse v-model="activeNames" @change="handleChange">
|
||||
<el-collapse-item title="仪表盘" name="panel">
|
||||
<el-row style="background-color: #f7f8fa; margin: 5px">
|
||||
<background-selector class="attr-selector" @changeBackgroundStyle="changeBackgroundStyle" />
|
||||
<background-selector class="attr-selector" @changeBackgroundStyle="changeBackgroundStyle" />
|
||||
<background-selector class="attr-selector" @changeBackgroundStyle="changeBackgroundStyle" />
|
||||
<background-selector class="attr-selector" @changeBackgroundStyle="changeBackgroundStyle" />
|
||||
</el-row>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="视图" name="view">
|
||||
<div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
|
||||
<div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="表格" name="table">
|
||||
<div>简化流程：设计简洁直观的操作流程；</div>
|
||||
<div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
|
||||
<div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="过滤组件" name="4">
|
||||
<div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
|
||||
<div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</div>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import slider from './Slider'
|
||||
import BackgroundSelector from './BackgroundSelector'
|
||||
export default {
|
||||
components: {
|
||||
slider,
|
||||
BackgroundSelector
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
panelInfo: this.$store.state.panel.panelInfo,
|
||||
activeNames: ['1'],
|
||||
backgroundType: 'color'
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
handleChange(val) {
|
||||
console.log(val)
|
||||
},
|
||||
changeBackgroundStyle() {
|
||||
console.log('changeBackgroundStyle')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.slider-container {
|
||||
width: 100%;
|
||||
overflow: hidden auto;
|
||||
min-height: 24px;
|
||||
padding-top: 0px;
|
||||
padding-bottom: 0px;
|
||||
position: relative;
|
||||
max-height: 976px;
|
||||
color: #3d4d66;
|
||||
font-size: 12px;
|
||||
}
|
||||
.attr-selector{
|
||||
background-color: white;
|
||||
height: 32px;
|
||||
margin: 5px 5px 5px 5px;
|
||||
padding:0 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
z-index: 10001;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -6,7 +6,7 @@
|
||||
名称：{{ panelInfo.name || '测试仪表板' }}
|
||||
</span>
|
||||
<!--横向工具栏-->
|
||||
<Toolbar />
|
||||
<Toolbar @showPanel="showPanel" />
|
||||
</el-row>
|
||||
</el-header>
|
||||
<de-container>
|
||||
@ -47,8 +47,9 @@
|
||||
<div v-show="show" class="leftPanel">
|
||||
|
||||
<div class="leftPanel-items">
|
||||
<view-select v-show=" showIndex===0" />
|
||||
<filter-group v-show="show && showIndex===1" />
|
||||
<view-select v-if=" showIndex===0" />
|
||||
<filter-group v-if="showIndex===1" />
|
||||
<subject-setting v-if="showIndex===2" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -112,6 +113,7 @@ import DeAsideContainer from '@/components/dataease/DeAsideContainer'
|
||||
import { addClass, removeClass } from '@/utils'
|
||||
import FilterGroup from '../filter'
|
||||
import ViewSelect from '../ViewSelect'
|
||||
import SubjectSetting from '../SubjectSetting'
|
||||
import bus from '@/utils/bus'
|
||||
import Editor from '@/components/canvas/components/Editor/index'
|
||||
import { deepCopy } from '@/components/canvas/utils/utils'
|
||||
@ -139,7 +141,8 @@ export default {
|
||||
ViewSelect,
|
||||
Editor,
|
||||
Toolbar,
|
||||
FilterDialog
|
||||
FilterDialog,
|
||||
SubjectSetting
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -192,6 +195,7 @@ export default {
|
||||
mounted() {
|
||||
this.insertToBody()
|
||||
bus.$on('component-on-drag', () => {
|
||||
debugger
|
||||
this.show = false
|
||||
})
|
||||
|
||||
@ -225,6 +229,7 @@ export default {
|
||||
this.$router.replace('/panel/index')
|
||||
},
|
||||
showPanel(type) {
|
||||
debugger
|
||||
this.show = !this.show
|
||||
this.showIndex = type
|
||||
},
|
||||
@ -234,7 +239,10 @@ export default {
|
||||
closeSidebar(evt) {
|
||||
const parent = evt.target.closest('.button-div-class')
|
||||
const self = evt.target.closest('.leftPanel')
|
||||
if (!parent && !self) {
|
||||
// 点击样式按钮 排除
|
||||
const stick = evt.target.closest('.el-icon-magic-stick')
|
||||
if (!parent && !self && !stick) {
|
||||
debugger
|
||||
this.show = false
|
||||
window.removeEventListener('click', this.closeSidebar)
|
||||
this.showIndex = -1
|
||||
@ -283,6 +291,7 @@ export default {
|
||||
this.currentFilterCom.style.left = e.offsetX
|
||||
this.currentFilterCom.id = newComponentId
|
||||
if (this.currentWidget.filterDialog) {
|
||||
debugger
|
||||
this.show = false
|
||||
this.openFilterDiolog()
|
||||
return
|
||||
@ -392,7 +401,7 @@ export default {
|
||||
|
||||
.leftPanel {
|
||||
width: 100%;
|
||||
max-width: 240px;
|
||||
max-width: 300px;
|
||||
height: calc(100vh - 91px);
|
||||
position: fixed;
|
||||
top: 91px;
|
||||
@ -401,14 +410,14 @@ export default {
|
||||
transition: all .25s cubic-bezier(.7, .3, .1, 1);
|
||||
transform: translate(100%);
|
||||
background: #fff;
|
||||
z-index: 40000;
|
||||
z-index: 1003;
|
||||
}
|
||||
|
||||
.show {
|
||||
transition: all .3s cubic-bezier(.7, .3, .1, 1);
|
||||
|
||||
.leftPanel-background {
|
||||
z-index: 20000;
|
||||
z-index: 1002;
|
||||
opacity: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
4
frontend/src/views/panel/panel.js
Normal file
4
frontend/src/views/panel/panel.js
Normal file
@ -0,0 +1,4 @@
|
||||
export const DEFAULT_BACKGROUND_COLOR = {
|
||||
color: '#ffffff',
|
||||
image: null
|
||||
}
|
||||
@ -88,14 +88,14 @@ export default {
|
||||
transition: all .25s cubic-bezier(.7, .3, .1, 1);
|
||||
transform: translate(100%);
|
||||
background: #fff;
|
||||
z-index: 40000;
|
||||
z-index: 1003;
|
||||
}
|
||||
|
||||
.show {
|
||||
transition: all .3s cubic-bezier(.7, .3, .1, 1);
|
||||
|
||||
.leftPanel-background {
|
||||
z-index: 20000;
|
||||
z-index: 1002;
|
||||
opacity: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
@ -1,201 +0,0 @@
|
||||
<template>
|
||||
<div v-loading="result.loading">
|
||||
{{ systemParams }}
|
||||
<el-form
|
||||
ref="systemParams"
|
||||
v-loading="loading"
|
||||
class="demo-form-inline"
|
||||
:disabled="show"
|
||||
size="small"
|
||||
>
|
||||
<el-row>
|
||||
<el-col v-for="(param,index) in systemParams" :key="index">
|
||||
<!--logo upload-->
|
||||
<el-form-item
|
||||
v-if="param.paramKey==='base.logo'"
|
||||
:label="$t('system_config.base.logo')"
|
||||
>
|
||||
<el-upload
|
||||
v-loading="result.loading"
|
||||
style="float: left"
|
||||
class="upload-demo"
|
||||
action=""
|
||||
accept=".jpeg,.jpg,.png,.gif"
|
||||
:on-exceed="handleExceed"
|
||||
:before-upload="uploadValidate"
|
||||
:on-error="handleError"
|
||||
:show-file-list="false"
|
||||
:file-list="filesTmp"
|
||||
:http-request="uploadLogo"
|
||||
>
|
||||
<el-button style="display: inline-block" size="mini" type="success" plain>
|
||||
{{ $t('commons.upload') }}
|
||||
</el-button>
|
||||
</el-upload>
|
||||
<el-button
|
||||
style="float:left;margin-left: 10px;margin-top: 3px"
|
||||
size="mini"
|
||||
type="danger"
|
||||
plain
|
||||
@click="removeValue('base.logo')"
|
||||
>
|
||||
{{ $t('commons.upload') }}
|
||||
</el-button>
|
||||
<el-input
|
||||
v-model="param.fileName"
|
||||
:disabled="true"
|
||||
:placeholder="$t('system_config.base.logo_size')+'：135px * 30px'"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!--title-->
|
||||
<el-form-item v-if="param.paramKey==='base.title'" :label="$t('system_config.base.title')">
|
||||
<el-input v-model="param.paramValue" placeholder="eg：DateEase" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div>
|
||||
<el-button v-if="showEdit" size="small" @click="edit">{{ $t('commons.edit') }}</el-button>
|
||||
<el-button v-if="showSave" type="success" :disabled="disabledSave" size="small" @click="save('systemParams')">
|
||||
{{ $t('commons.save') }}
|
||||
</el-button>
|
||||
<el-button v-if="showCancel" type="info" size="small" @click="cancel">{{ $t('commons.cancel') }}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ElUploadList from 'element-ui/packages/upload/src/upload-list'
|
||||
|
||||
export default {
|
||||
name: 'BaseSetting',
|
||||
components: {
|
||||
ElUploadList
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
filesTmp: [],
|
||||
suffixes: new Set(['png', 'jpg', 'gif', 'jpeg']),
|
||||
files: [],
|
||||
systemParams: [],
|
||||
systemParamsOld: [],
|
||||
input: '',
|
||||
visible: true,
|
||||
result: {},
|
||||
showEdit: true,
|
||||
showSave: false,
|
||||
showCancel: false,
|
||||
show: true,
|
||||
disabledConnection: false,
|
||||
disabledSave: false,
|
||||
loading: false,
|
||||
rules: {
|
||||
url: [
|
||||
{
|
||||
required: true,
|
||||
message: 'Not Null',
|
||||
trigger: ['change', 'blur']
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.query()
|
||||
},
|
||||
methods: {
|
||||
query() {
|
||||
this.result = this.$get('/system/base/info', response => {
|
||||
this.systemParams = response.data
|
||||
})
|
||||
},
|
||||
edit() {
|
||||
this.showEdit = false
|
||||
this.showSave = true
|
||||
this.showCancel = true
|
||||
this.show = false
|
||||
},
|
||||
save() {
|
||||
this.showEdit = true
|
||||
this.showCancel = false
|
||||
this.showSave = false
|
||||
this.show = true
|
||||
this.systemParams.forEach((param) => {
|
||||
if (param.file !== null) {
|
||||
const file = param.file
|
||||
const name = file.name + ',' + param.paramKey
|
||||
const newfile = new File([file], name, { type: file.type })
|
||||
this.files.push(newfile)
|
||||
param.file = null
|
||||
}
|
||||
})
|
||||
|
||||
this.result = this.$fileUpload('/system/save/base', null, this.files, { 'systemParams': this.systemParams }, response => {
|
||||
if (response.success) {
|
||||
this.query()// 刷新数据
|
||||
this.$success(this.$t('commons.save_success'))
|
||||
} else {
|
||||
this.$message.error(this.$t('commons.save_failed'))
|
||||
}
|
||||
})
|
||||
},
|
||||
cancel() {
|
||||
this.showEdit = true
|
||||
this.showCancel = false
|
||||
this.showSave = false
|
||||
this.show = true
|
||||
this.query()
|
||||
},
|
||||
handleExceed(files, fileList) {
|
||||
this.$warning(this.$t('test_track.case.import.upload_limit_count'))
|
||||
},
|
||||
handleError() {
|
||||
this.$warning(this.$t('test_track.case.import.upload_limit_count'))
|
||||
},
|
||||
uploadValidate(file) {
|
||||
const suffix = file.name.substring(file.name.lastIndexOf('.') + 1)
|
||||
if (!this.suffixes.has(suffix)) {
|
||||
this.$warning(this.$t('test_track.case.import.upload_limit_format'))
|
||||
return false
|
||||
}
|
||||
|
||||
if (file.size / 1024 / 1024 > 5) {
|
||||
this.$warning(this.$t('test_track.case.import.upload_limit_size'))
|
||||
return false
|
||||
}
|
||||
this.errList = []
|
||||
return true
|
||||
},
|
||||
uploadLogo(file) {
|
||||
this.systemParams.forEach((param) => {
|
||||
if (param.paramKey === 'base.logo') {
|
||||
param.fileName = file.file.name
|
||||
param.file = file.file
|
||||
}
|
||||
})
|
||||
},
|
||||
removeValue(paramKey) {
|
||||
this.systemParams.forEach((param) => {
|
||||
if (param.paramKey === paramKey) {
|
||||
param.fileName = null
|
||||
param.file = null
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.el-form {
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.inline-block {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 105px;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -98,6 +98,8 @@
|
||||
|
||||
<script>
|
||||
|
||||
import { post, get } from '@/api/commonAjax'
|
||||
|
||||
export default {
|
||||
name: 'EmailSetting',
|
||||
data() {
|
||||
@ -146,7 +148,7 @@ export default {
|
||||
this.$refs.input = 'password'
|
||||
},
|
||||
query() {
|
||||
this.result = this.$get('/system/mail/info', response => {
|
||||
this.result = get('/system/mail/info', response => {
|
||||
this.formInline = response.data
|
||||
this.formInline.ssl = this.formInline.ssl === 'true'
|
||||
this.formInline.tls = this.formInline.tls === 'true'
|
||||
@ -177,7 +179,7 @@ export default {
|
||||
}
|
||||
this.$refs[formInline].validate((valid) => {
|
||||
if (valid) {
|
||||
this.result = this.$post('/system/testConnection', param, response => {
|
||||
this.result = post('/system/testConnection', param, response => {
|
||||
this.$success(this.$t('commons.connection_successful'))
|
||||
})
|
||||
} else {
|
||||
@ -209,7 +211,7 @@ export default {
|
||||
|
||||
this.$refs[formInline].validate(valid => {
|
||||
if (valid) {
|
||||
this.result = this.$post('/system/edit/email', param, response => {
|
||||
this.result = post('/system/edit/email', param, response => {
|
||||
const flag = response.success
|
||||
if (flag) {
|
||||
this.$success(this.$t('commons.save_success'))
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div v-loading="result.loading">
|
||||
<div v-loading="$store.getters.loadingMap[$store.getters.currentPath]">
|
||||
<el-form
|
||||
ref="systemParams"
|
||||
v-loading="loading"
|
||||
v-loading="$store.getters.loadingMap[$store.getters.currentPath]"
|
||||
class="demo-form-inline"
|
||||
:disabled="show"
|
||||
size="small"
|
||||
@ -15,7 +15,7 @@
|
||||
:label="$t('display.logo')"
|
||||
>
|
||||
<el-upload
|
||||
v-loading="result.loading"
|
||||
v-loading="$store.getters.loadingMap[$store.getters.currentPath]"
|
||||
style="float: right;margin-left: 10px"
|
||||
class="upload-demo"
|
||||
action=""
|
||||
@ -52,7 +52,7 @@
|
||||
:label="$t('display.loginImage')"
|
||||
>
|
||||
<el-upload
|
||||
v-loading="result.loading"
|
||||
v-loading="$store.getters.loadingMap[$store.getters.currentPath]"
|
||||
style="float: right;margin-left: 10px"
|
||||
class="upload-demo"
|
||||
action=""
|
||||
@ -89,7 +89,7 @@
|
||||
:label="$t('display.loginLogo')"
|
||||
>
|
||||
<el-upload
|
||||
v-loading="result.loading"
|
||||
v-loading="$store.getters.loadingMap[$store.getters.currentPath]"
|
||||
style="float: right;margin-left: 10px"
|
||||
class="upload-demo"
|
||||
action=""
|
||||
@ -126,7 +126,7 @@
|
||||
:label="$t('display.favicon')"
|
||||
>
|
||||
<el-upload
|
||||
v-loading="result.loading"
|
||||
v-loading="$store.getters.loadingMap[$store.getters.currentPath]"
|
||||
style="float: right;margin-left: 10px"
|
||||
class="upload-demo"
|
||||
action=""
|
||||
@ -179,12 +179,12 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ElUploadList from 'element-ui/packages/upload/src/upload-list'
|
||||
import { get, fileUpload } from '@/api/commonAjax'
|
||||
|
||||
export default {
|
||||
name: 'UiSetting',
|
||||
components: {
|
||||
ElUploadList
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -219,8 +219,9 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
query() {
|
||||
this.result = this.$get('/system/ui/info', response => {
|
||||
this.systemParams = response.data
|
||||
debugger
|
||||
get('/system/ui/info').then(res => {
|
||||
this.systemParams = res.data
|
||||
})
|
||||
},
|
||||
edit() {
|
||||
@ -244,7 +245,7 @@ export default {
|
||||
}
|
||||
})
|
||||
|
||||
this.result = this.$fileUpload('/system/save/ui', null, this.files, { 'systemParams': this.systemParams }, response => {
|
||||
fileUpload('/system/save/ui', null, this.files, { 'systemParams': this.systemParams }).then(response => {
|
||||
if (response.success) {
|
||||
this.query()// 刷新数据
|
||||
this.$success(this.$t('commons.save_success'))
|
||||
|
||||
@ -1,11 +1,7 @@
|
||||
<template>
|
||||
<el-card>
|
||||
<el-tabs v-model="activeName" class="system-setting">
|
||||
|
||||
<!-- <el-tab-pane :label="$t('system_config.base_config')" name="base">-->
|
||||
<!-- <base-setting/>-->
|
||||
<!-- </el-tab-pane>-->
|
||||
<el-tab-pane :label="$t('display.title')" name="ui">
|
||||
<el-tab-pane label="显示设置" name="ui">
|
||||
<ui-setting />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('system_parameter_setting.mailbox_service_settings')" name="email">
|
||||
@ -18,12 +14,6 @@
|
||||
<script>
|
||||
import EmailSetting from './EmailSetting'
|
||||
import UiSetting from './UiSetting'
|
||||
// import { hasLicense } from '@/metersphere/common/js/utils'
|
||||
|
||||
// const requireComponent = require.context('@/metersphere/common/components/xpack/', true, /\.vue$/)
|
||||
// const display = requireComponent.keys().length > 0 ? requireComponent('./display/Display.vue') : {}
|
||||
// const auth = requireComponent.keys().length > 0 ? requireComponent('./auth/Auth.vue') : {}
|
||||
|
||||
export default {
|
||||
name: 'SystemParameterSetting',
|
||||
components: {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user