mirror of
https://github.com/PanJiaChen/vue-element-admin.git
synced 2025-08-07 18:25:45 +08:00
Style Dashboard (#954)
* Sort Dashboard * minimal change style Co-authored-by: elsiosanchez <elsiossanches@gmail.com>
This commit is contained in:
Elsio Sanchez
GitHub
parent
3b0190af18
commit
90a4846b29
@ -16,7 +16,7 @@
|
||||
along with this program. If not, see <https:www.gnu.org/licenses/>.
|
||||
-->
|
||||
<template>
|
||||
<el-calendar style="max-height: 40vh;">
|
||||
<el-calendar>
|
||||
<!-- Use 2.5 slot syntax. If you use Vue 2.6, please use new slot syntax-->
|
||||
<template
|
||||
slot="dateCell"
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
along with this program. If not, see <https:www.gnu.org/licenses/>.
|
||||
-->
|
||||
<template>
|
||||
<div :class="className" :style="{height:height,width:width + 'max-height: 40vh;'}" />
|
||||
<div :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
along with this program. If not, see <https:www.gnu.org/licenses/>.
|
||||
-->
|
||||
<template>
|
||||
<div :class="className" :style="{height:height,width:width + 'max-height: 40vh;'}" />
|
||||
<div :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
along with this program. If not, see <https:www.gnu.org/licenses/>.
|
||||
-->
|
||||
<template>
|
||||
<div :class="className" :style="{height:height,width:width + 'max-height: 40vh;'}" />
|
||||
<div :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
along with this program. If not, see <https:www.gnu.org/licenses/>.
|
||||
-->
|
||||
<template>
|
||||
<div :class="className" :style="{height:height,width:width + 'max-height: 40vh;'}" />
|
||||
<div :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
along with this program. If not, see <https:www.gnu.org/licenses/>.
|
||||
-->
|
||||
<template>
|
||||
<div :class="className" :style="{height:height,width:width + 'max-height: 40vh;'}" />
|
||||
<div :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
along with this program. If not, see <https:www.gnu.org/licenses/>.
|
||||
-->
|
||||
<template>
|
||||
<div :class="className" :style="{height:height,width:width + 'max-height: 40vh;'}" />
|
||||
<div :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
along with this program. If not, see <https:www.gnu.org/licenses/>.
|
||||
-->
|
||||
<template>
|
||||
<el-card class="box-card" :body-style="{ padding: '0px' }" shadow="never" style="max-height: 40vh;">
|
||||
<el-card class="box-card" :body-style="{ padding: '0px' }" shadow="never">
|
||||
<div class="recent-items">
|
||||
<el-table :data="dataResult" max-height="455" @row-click="handleClick">
|
||||
<el-table-column
|
||||
|
||||
@ -16,28 +16,36 @@
|
||||
along with this program. If not, see <https:www.gnu.org/licenses/>.
|
||||
-->
|
||||
<template>
|
||||
<el-collapse
|
||||
<el-card
|
||||
v-if="!unsupportedDashboards.includes(dashboard.fileName)"
|
||||
v-model="activeDashboard"
|
||||
accordion
|
||||
style="height: auto;"
|
||||
>
|
||||
<el-collapse-item
|
||||
:name="dashboard.name"
|
||||
:disabled="!dashboard.isCollapsible"
|
||||
class="custom-collapse-item"
|
||||
>
|
||||
<template slot="title">
|
||||
<span class="custom-title">
|
||||
{{ dashboard.name }}
|
||||
</span>
|
||||
</template>
|
||||
<component
|
||||
:is="renderDashboard"
|
||||
:ref="dashboard.name"
|
||||
:metadata="dashboard"
|
||||
/>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
<div class="clearfix">
|
||||
<el-row :gutter="2">
|
||||
<el-col :span="isEmptyValue(title) ? 22 : 23">
|
||||
<el-button type="text" class="label-dashboard" @click="metadata.isCollapsible = !metadata.isCollapsible">
|
||||
{{ labelDashboard }}
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col v-if="isEmptyValue(title)" :span="1">
|
||||
<el-button type="text" icon="el-icon-files" @click="sendMain(metadata)" />
|
||||
</el-col>
|
||||
<el-col :span="1">
|
||||
<el-button type="text" :icon="!metadata.isCollapsible ? 'el-icon-arrow-down' : 'el-icon-arrow-up'" @click="metadata.isCollapsible = !metadata.isCollapsible" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<transition name="el-zoom-in-top">
|
||||
<div v-show="metadata.isCollapsible" class="dashboard-transitio">
|
||||
<component
|
||||
:is="renderDashboard"
|
||||
:ref="dashboard.name"
|
||||
:metadata="metadata"
|
||||
:height="'450px'"
|
||||
/>
|
||||
</div>
|
||||
</transition>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -47,6 +55,10 @@ export default {
|
||||
metadata: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@ -112,6 +124,18 @@ export default {
|
||||
}
|
||||
return dashboard
|
||||
// return () => import(`@/components/ADempiere/Dashboard/${this.metadata.fileName}`)
|
||||
},
|
||||
labelDashboard() {
|
||||
if (this.isEmptyValue(this.title)) {
|
||||
return this.dashboard.name
|
||||
}
|
||||
return this.title
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
sendMain(dashboard) {
|
||||
this.$store.commit('setMainDashboard', dashboard)
|
||||
this.$forceUpdate()
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -144,4 +168,34 @@ export default {
|
||||
color: #303133;
|
||||
}
|
||||
}
|
||||
.el-card__header {
|
||||
border: 1px solid #36a3f7;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.dashboard-transitio {
|
||||
margin: 0px;
|
||||
width: 100%;
|
||||
padding-right: 2%;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
box-sizing: border-box;
|
||||
height: 500px;
|
||||
overflow: auto;
|
||||
}
|
||||
.label-dashboard{
|
||||
color: black;
|
||||
width: 95%;
|
||||
text-align: inherit;
|
||||
font-weight: 500;
|
||||
font-size: large;
|
||||
padding-left: 1%;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.el-card__body {
|
||||
padding: 5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
along with this program. If not, see <https:www.gnu.org/licenses/>.
|
||||
-->
|
||||
<template>
|
||||
<el-card class="box-card" :body-style="{ padding: '0px' }" shadow="never" style="max-height: 40vh;">
|
||||
<el-card class="box-card" :body-style="{ padding: '0px' }" shadow="never">
|
||||
<div class="recent-items">
|
||||
<el-table :data="dataResult" max-height="455" @row-click="handleClick">
|
||||
<el-table-column width="40">
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
along with this program. If not, see <https:www.gnu.org/licenses/>.
|
||||
-->
|
||||
<template>
|
||||
<el-card class="box-card" :body-style="{ padding: '0px' }" shadow="never" style="max-height: 40vh;">
|
||||
<el-card class="box-card" :body-style="{ padding: '0px' }" shadow="never">
|
||||
<div class="recent-items">
|
||||
<el-table :data="dataResult" max-height="455" @row-click="handleClick">
|
||||
<el-table-column width="40">
|
||||
|
||||
@ -23,7 +23,8 @@ import { getCurrentRole } from '@/utils/auth'
|
||||
const dashboard = {
|
||||
state: {
|
||||
dashboard: [],
|
||||
recentItems: []
|
||||
recentItems: [],
|
||||
mainashboard: {}
|
||||
},
|
||||
mutations: {
|
||||
addDashboard(state, payload) {
|
||||
@ -34,6 +35,9 @@ const dashboard = {
|
||||
},
|
||||
setRecentItems(state, payload) {
|
||||
state.recentItems = payload
|
||||
},
|
||||
setMainDashboard(state, payload) {
|
||||
state.mainashboard = payload
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
|
||||
@ -1,8 +1,14 @@
|
||||
<template>
|
||||
<div class="dashboard-editor-container">
|
||||
<el-row :gutter="8">
|
||||
<el-col :span="24" style="padding-right:8px;margin-bottom:2px;">
|
||||
<dashboard
|
||||
:metadata="mainashboard"
|
||||
:title="mainashboard.name"
|
||||
/>
|
||||
</el-col>
|
||||
<template v-for="(dashboardAttributes, index) in dashboardList">
|
||||
<el-col :key="index" :xs="{ span: 24 }" :sm="{ span: 24 }" :md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 12 }" style="padding-right:8px;margin-bottom:2px;">
|
||||
<el-col v-if="index > 0" :key="index" :xs="{ span: 24 }" :sm="{ span: 24 }" :md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 12 }" style="padding-right:8px;margin-bottom:2px;">
|
||||
<dashboard :metadata="dashboardAttributes" />
|
||||
</el-col>
|
||||
</template>
|
||||
@ -33,11 +39,17 @@ export default {
|
||||
},
|
||||
getterRol() {
|
||||
return this.$store.getters.getRoleUuid
|
||||
},
|
||||
mainashboard() {
|
||||
return this.$store.state.dashboard.mainashboard
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
getterRol(value) {
|
||||
this.getDashboardListFromServer()
|
||||
},
|
||||
mainashboard(value) {
|
||||
this.getDashboardListFromServer()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@ -50,6 +62,9 @@ export default {
|
||||
roleUuid: this.currentRole.uuid
|
||||
})
|
||||
.then(response => {
|
||||
if (this.isEmptyValue(this.mainashboard)) {
|
||||
this.$store.commit('setMainDashboard', response.dashboardsList[1])
|
||||
}
|
||||
this.dashboardList = response.dashboardsList
|
||||
this.$forceUpdate()
|
||||
})
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user