Skip to content

V
vue-gjjs
Commit 43043f23 by 潘际乾
Options

页面小组件

parent 8fce6347
Showing with 550 additions and 211 deletions
src/assets/css/common.css
......@@ -64,6 +64,11 @@
.fold {
width: 60px !important;
}
.clear::after, .clear::before {
content: "";
display: block;
clear: both;
}
/* sidemenu */
.el-menu {
background: var(--sidecolor);
......
src/store/UserContext.js
......@@ -7,6 +7,12 @@ const UserContext={
menu:[],
state:"LOGOUT",
token:"",
homeCellsSetting: {
defaultCells: [],
cellRows: 0,
cellCols: 0,
cellNames: []
}
},
mutations:{
setLoginInfo(state,info){
......@@ -30,6 +36,15 @@ const UserContext={
},
setMenu(state, menu) {
state.menu = menu;
},
setHomeCellsSetting(state, setting) {
state.homeCellsSetting.cellRows = setting.cellRows
state.homeCellsSetting.cellCols = setting.cellCols
state.homeCellsSetting.cellNames = setting.cellNames
localStorage.setItem(`cells-setting-${state.userId}`, JSON.stringify(setting));
},
setHomeDefaultCells(state, cells) {
state.homeCellsSetting.defaultCells = cells;
}
}
}
......
src/views/Home/cells/CustomerAnalyse.vue
<template>
<div class="home-cell" id="customerAnalyse">
<CellHeaderVue title="大客户分析">
<CellWrapper title="大客户分析">
<template v-slot:header>
<span class="el-icon-refresh" title="刷新"></span>
<span class="el-icon-more" title="操作"></span>
</CellHeaderVue>
<div class="cell-content">
</template>
<div class="content">
<div class="chart-operate">
<i class="el-icon-arrow-up"></i>
<i class="el-icon-arrow-down"></i>
</div>
<div id="chartWrapper">
<div id="chart"></div>
<div class="chartWrapper">
<div class="chart"></div>
</div>
</div>
</div>
</CellWrapper>
</template>
<script>
import CellHeaderVue from "./common/CellHeader.vue";
import CellWrapper from "../common/CellWrapper.vue";
import * as echarts from "echarts";
export default {
name: "CustomerAnalyse",
components: { CellHeaderVue },
components: { CellWrapper },
data() {
return {
echartInstance: null,
};
},
mounted() {
this.echartInstance = echarts.init(document.getElementById("chart"));
this.loadCharts()
this.loadChartsBind = this.loadCharts.bind(this)
window.addEventListener('resize', this.loadChartsBind)
this.echartInstance = echarts.init(this.$el.querySelector('.content .chartWrapper .chart'));
this.loadCharts();
this.loadChartsBind = this.loadCharts.bind(this);
window.addEventListener("resize", this.loadChartsBind);
},
methods: {
loadCharts() {
this.echartInstance.clear()
this.echartInstance.clear();
const option = {
title: {
// text: "Test Demo",
......@@ -93,32 +94,28 @@ export default {
},
},
destroyed() {
window.removeEventListener('resize', this.loadChartsBind)
}
window.removeEventListener("resize", this.loadChartsBind);
},
};
</script>
<style scoped>
#customerAnalyse .cell-content {
.content {
display: flex;
flex-direction: column;
padding: 0 5px;
}
#customerAnalyse .cell-content .chart-operate {
.chart-operate {
margin-left: 20px;
height: 20px;
}
#customerAnalyse .cell-content .chart-operate i {
.chart-operate i {
cursor: pointer;
}
#customerAnalyse .cell-content #chartWrapper {
/* width: 98%; */
/* height: calc(100% - 50px); */
/* height: 200px; */
/* margin: 0 auto; */
.chartWrapper {
flex: 1;
}
#customerAnalyse .cell-content #chartWrapper #chart {
.chartWrapper .chart {
width: 100%;
height: 100%;
}
......
src/views/Home/cells/Hall.vue
<template>
<div class="home-cell" id="hall">
<CellHeaderVue title="电子大厅">
<CellWrapper title="电子大厅">
<template v-slot:header>
<span class="el-icon-refresh" title="刷新"></span>
<span class="el-icon-more" title="操作"></span>
</CellHeaderVue>
<div class="cell-content">
</template>
<div class="content">
<div class="card-item" v-for="(item, idx) in itemList" :key="idx">
<div class="dept-name">
<div
......@@ -25,15 +26,15 @@
</div>
</div>
</div>
</div>
</CellWrapper>
</template>
<script>
import CellHeaderVue from "./common/CellHeader.vue";
import CellWrapper from "../common/CellWrapper.vue";
export default {
name: "Hall",
components: { CellHeaderVue },
components: { CellWrapper },
data() {
return {
itemList: [
......@@ -64,15 +65,13 @@ export default {
</script>
<style scoped>
#hall .cell-content {
.content {
display: flex;
flex-wrap: wrap;
}
#hall .cell-content {
justify-content: space-around;
align-items: center;
}
#hall .cell-content .card-item {
.card-item {
width: 45%;
height: 45%;
background-color: #e6e8ef;
......
src/views/Home/cells/NoticeAnnouncement.vue
<template>
<div class="home-cell" id="noticeAnnouncement">
<CellHeaderVue title="通知公告">
<CellWrapper title="通知公告">
<template v-slot:header>
<span class="el-icon-refresh" title="刷新"></span>
<span class="el-icon-more" title="操作"></span>
</CellHeaderVue>
</template>
<el-scrollbar :style="{ height: cellScrollHeight + 'px' }">
<div class="cell-content">
<div class="content">
<el-scrollbar :style="{ height: cellScrollHeight + 'px' }">
<div class="notice-item" v-for="(item, idx) in noticeList" :key="idx">
<div class="notice-title" :class="{ active: idx === 0 }">
<a :href="item.url" target="_blank" rel="noopener noreferrer">
......@@ -17,17 +17,17 @@
{{ item.date }}
</div>
</div>
</div>
</el-scrollbar>
</div>
</el-scrollbar>
</div>
</CellWrapper>
</template>
<script>
import CellHeaderVue from "./common/CellHeader.vue";
import CellWrapper from "../common/CellWrapper.vue";
export default {
name: "NoticeAnnouncement",
components: { CellHeaderVue },
components: { CellWrapper },
props: {
cellScrollHeight: {
type: Number,
......@@ -36,7 +36,8 @@ export default {
},
data() {
return {
noticeList: [
noticeList: [],
testData: [
{
title: "中国国际货物和服务贸易数据（BPM6，2015年以后）",
url: "https://www.safe.gov.cn/safe/2018/0427/8886.html",
......@@ -105,37 +106,48 @@ export default {
],
};
},
mounted() {
this.$nextTick(() => {
this.loadNoticeData();
});
},
methods: {
loadNoticeData() {
// 查询加载数据
this.noticeList = this.testData;
},
},
};
</script>
<style scoped>
/* 通知公告 */
#noticeAnnouncement .cell-content {
.content {
margin: 0 20px;
box-sizing: border-box;
}
#noticeAnnouncement .cell-content .notice-item {
.notice-item {
width: 100%;
display: flex;
justify-content: space-between;
margin-bottom: 5px;
font-size: 15px;
}
#noticeAnnouncement .cell-content .notice-item .notice-title {
.notice-item .notice-title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 75%;
}
#noticeAnnouncement .cell-content .notice-item .notice-title a {
.notice-item .notice-title a {
color: #4e4e4e;
text-decoration: none;
}
#noticeAnnouncement .cell-content .notice-item .notice-title::before {
.notice-item .notice-title::before {
content: "";
display: inline-block;
width: 8px;
}
#noticeAnnouncement .cell-content .notice-item .notice-title.active::before {
.notice-item .notice-title.active::before {
content: "";
background: rgb(255, 0, 0);
display: inline-block;
......@@ -146,7 +158,7 @@ export default {
margin-right: 2px;
margin-bottom: 2px;
}
#noticeAnnouncement .cell-content .notice-item .notice-date {
.notice-item .notice-date {
/* width: 20%; */
margin-right: 6px;
}
......
src/views/Home/cells/QuickSearch.vue
<template>
<div class="home-cell" id="quickSearch">
<CellHeaderVue title="快速查询">
<CellWrapper title="快速查询">
<template v-slot:header>
<span class="el-icon-setting" title="设置" @click="openSetting"></span>
</CellHeaderVue>
</template>
<quick
ref="quick"
:cellScrollHeight="cellScrollHeight"
quickType="search"
></quick>
</div>
<div class="content">
<quick
ref="quick"
:cellScrollHeight="cellScrollHeight"
quickType="search"
></quick>
</div>
</CellWrapper>
</template>
<script>
import CellHeaderVue from "./common/CellHeader.vue";
import quick from "./common/quick.vue";
import CellWrapper from "../common/CellWrapper.vue";
import quick from "../common/quick.vue";
import defaultQuickSearchItems from "./common/defaultQuickSearchItems.js";
import defaultQuickSearchItems from "../common/defaultQuickSearchItems.js";
export default {
name: "QuickSearch",
components: { CellHeaderVue, quick },
components: { CellWrapper, quick },
props: {
cellScrollHeight: {
type: Number,
......
src/views/Home/cells/QuickVisit.vue
<template>
<div class="home-cell" id="quickVisit">
<CellHeaderVue title="快速访问">
<CellWrapper title="快速访问">
<template v-slot:header>
<span class="el-icon-setting" title="设置" @click="openSetting"></span>
</CellHeaderVue>
</template>
<quick
ref="quick"
:cellScrollHeight="cellScrollHeight"
quickType="visit"
></quick>
</div>
<div class="content">
<quick
ref="quick"
:cellScrollHeight="cellScrollHeight"
quickType="visit"
></quick>
</div>
</CellWrapper>
</template>
<script>
import CellHeaderVue from "./common/CellHeader.vue";
import quick from "./common/quick.vue";
import CellWrapper from "../common/CellWrapper.vue";
import quick from "../common/quick.vue";
import defaultVisitItems from "./common/defaultQuickVisitItems.js";
import defaultVisitItems from "../common/defaultQuickVisitItems.js";
export default {
name: "QuickVisit",
components: { CellHeaderVue, quick },
components: { CellWrapper, quick },
props: {
cellScrollHeight: {
type: Number,
......
src/views/Home/cells/TaskStatistics.vue
<template>
<div class="home-cell">
<CellHeaderVue title="任务统计">
<CellWrapper title="任务统计">
<template v-slot:header>
<span class="el-icon-refresh" title="刷新"></span>
<span class="el-icon-more" title="操作"></span>
</CellHeaderVue>
<div class="cell-content">
</template>
<div class="content">
<div class="task-stat-display total">
<div class="display-wrapper">
<div
......@@ -43,16 +44,16 @@
</div>
</div>
</div>
</div>
</CellWrapper>
</template>
<script>
import CellHeaderVue from "./common/CellHeader.vue";
import CellWrapper from "../common/CellWrapper.vue";
import { all } from "~/service/report";
export default {
name: "TaskStatistics",
components: { CellHeaderVue },
components: { CellWrapper },
data() {
return {
total: [
......@@ -84,20 +85,20 @@ export default {
};
},
created() {
all().then(res => {
console.log(res);
})
}
all().then((res) => {
console.log(res);
});
},
};
</script>
<style scoped>
.cell-content {
.content {
padding: 0px 8px;
}
.task-stat-display {
height: 25%;
max-height: 90px;
/* max-height: 90px; */
display: flex;
justify-content: space-around;
color: #f3f3f3;
......@@ -176,7 +177,7 @@ export default {
border-right: 0;
}
.task-sign {
height: 12%;
height: 12.5%;
display: flex;
align-items: center;
padding-left: 15px;
......
src/views/Home/cells/common/CellHeader.vue → src/views/Home/common/CellHeader.vue
......@@ -9,12 +9,7 @@
<script>
export default {
props: {
title: {
type: String,
required: true,
},
},
props: ['title'],
};
</script>
......
src/views/Home/common/CellWrapper.vue 0 → 100644
<template>
<div class="home-cell">
<CellHeader :title="title">
<slot name="header"></slot>
</CellHeader>
<div class="cell-content">
<slot></slot>
</div>
</div>
</template>
<script>
import CellHeader from "./CellHeader.vue";
export default {
name: 'CellWrapper',
components: { CellHeader },
props: {
title: {
type: String,
required: true,
},
},
data() {
return {};
},
};
</script>
<style scoped>
.home-cell {
height: 100%;
background-color: #ffffff;
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
border-radius: 8px;
}
.home-cell::before {
display: table;
content: '';
}
.home-cell .cell-content {
height: calc(100% - 52px);
}
.home-cell .cell-content >>> .content {
padding-bottom: 10px;
height: calc(100% - 10px);
}
.home-cell >>> .el-scrollbar__wrap {
overflow-y: scroll;
overflow-x: auto;
}
</style>
\ No newline at end of file
src/views/Home/cells/common/quick.vue → src/views/Home/common/quick.vue
<template>
<el-scrollbar :style="{ height: cellScrollHeight + 'px' }">
<div class="cell-content">
<router-link
v-for="(item, index) in quickVisitItem"
:key="index"
:to="item.path"
>
<div
class="content-wrapper"
:style="{ height: Math.floor(cellScrollHeight * 0.3) + 'px' }"
>
<div class="visit-item-wrapper">
<div class="visit-item">
<img :src="item.icon" alt="" />
<span>{{ item.name }}</span>
</div>
</div>
<router-link
v-for="(item, index) in quickVisitItem"
:key="index"
:to="item.path"
>
<div
class="content-wrapper"
:style="{ height: Math.floor(cellScrollHeight * 0.3) + 'px' }"
>
<div class="visit-item-wrapper">
<div class="visit-item">
<img :src="item.icon" alt="" />
<span>{{ item.name }}</span>
</div>
</router-link>
</div>
</div>
</router-link>
<el-dialog :visible="visible" title="设置" :before-close="handleClose">
<div style="text-align: center">
<el-transfer
style="text-align: left; display: inline-block"
v-model="selectedVals"
filterable
:titles="['未添加', '已添加']"
:button-texts="['移除', '添加']"
:format="{
noChecked: '${total}',
hasChecked: '${checked}/${total}',
}"
:data="transferData"
>
</el-transfer>
</div>
<span slot="footer" class="dialog-footer">
<c-button @click="cancel">取消</c-button>
<c-button type="primary" @click="save">保存</c-button>
</span>
</el-dialog>
</el-scrollbar>
<el-dialog :visible="visible" title="设置" width="60%" :before-close="handleClose">
<div style="text-align: center">
<el-transfer
style="text-align: left; display: inline-block"
v-model="selectedVals"
filterable
:titles="['未添加', '已添加']"
:button-texts="['移除', '添加']"
:format="{
noChecked: '${total}',
hasChecked: '${checked}/${total}',
}"
:data="transferData"
>
</el-transfer>
</div>
<span slot="footer" class="dialog-footer">
<c-button @click="cancel">取消</c-button>
<c-button type="primary" @click="save">保存</c-button>
</span>
</el-dialog>
</el-scrollbar>
</template>
<script>
......@@ -53,12 +51,12 @@ export default {
type: Number,
required: true,
},
quickType: {
type: String,
quickType: {
type: String,
required: true,
}
},
},
data() {
data() {
return {
allAvailableItems: [],
quickVisitItem: [],
......@@ -67,11 +65,11 @@ export default {
transferData: [],
};
},
mounted() {
mounted() {
this.$nextTick(() => {
this.init();
this.generateVisitItems(this.getCachedVisitItems());
})
});
},
methods: {
init() {
......@@ -79,27 +77,29 @@ export default {
this.getAllAvailableItems(this.$store.state.UserContext.menu, arr);
this.allAvailableItems = arr;
this.transferData = arr.map((item) => {
const ps = item.path.split("/")
const ps = item.path.split("/");
return {
key: item.path,
label: `${ps[ps.length - 1]} - ${item.name}` ,
label: `${ps[ps.length - 1]} - ${item.name}`,
};
});
},
getCachedVisitItems() {
const userId = this.$store.state.UserContext.userId;
const data = localStorage.getItem(
`quick-${this.quickType}-${userId.toLowerCase() === "zl" ? "admin" : "normal"}`
`quick-${this.quickType}-${this.getUserRole()}`
);
return JSON.parse(data);
},
setCachedVisitItems(data) {
const userId = this.$store.state.UserContext.userId;
localStorage.setItem(
`quick-${this.quickType}-${userId.toLowerCase() === "zl" ? "admin" : "normal"}`,
`quick-${this.quickType}-${this.getUserRole()}`,
JSON.stringify(data)
);
},
getUserRole() {
const userId = this.$store.state.UserContext.userId;
return userId.toLowerCase() === "zl" ? "admin" : "normal";
},
generateVisitItems(keys) {
const res = [];
for (let i = 0; i < keys.length; i++) {
......@@ -144,50 +144,43 @@ export default {
}
},
},
}
};
</script>
<style scoped>
.cell-content {
/* display: flex;
flex-wrap: wrap; */
}
.content-wrapper {
display: inline-block;
width: 33%;
width: 33.33%;
/* height: 30%; */
}
.cell-content .visit-item-wrapper {
.visit-item-wrapper {
display: flex;
height: 100%;
justify-content: center;
align-items: center;
}
.cell-content .visit-item {
.visit-item {
/* padding-bottom: 16px; */
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
}
.cell-content .visit-item i {
.visit-item i {
color: #0088ff;
font-size: 36px;
}
.cell-content .visit-item span {
.visit-item span {
color: #303133;
font-size: 14px;
margin-top: 10px;
}
/* .cell-content .visit-item:hover i {
color: var(--themecolor);
} */
.cell-content .visit-item:hover span {
.visit-item:hover span {
color: var(--themecolor);
}
.el-scrollbar >>> .el-transfer-panel {
width: 300px;
height: 600px;
height: 400px;
}
.el-scrollbar >>> .el-checkbox-group.el-transfer-panel__list {
height: 500px;
......
src/views/Home/index.vue
<template>
<div class="eContainer-home">
<QuickVisitVue :cellScrollHeight="cellScrollHeight"></QuickVisitVue>
<TaskStatisticsVue></TaskStatisticsVue>
<NoticeAnnouncementVue :cellScrollHeight="cellScrollHeight" ></NoticeAnnouncementVue>
<HallVue></HallVue>
<CustomerAnalyseVue></CustomerAnalyseVue>
<QuickSearchVue :cellScrollHeight="cellScrollHeight"></QuickSearchVue>
<c-row
:gutter="10"
:style="{ height: getRowHeightPercent() * 100 + '%' }"
v-for="cRow in cellRows"
:key="cRow"
>
<c-col
class="home-cell-col"
:span="24 / cellCols"
v-for="cCol in cellCols"
:key="cCol"
>
<component
v-if="getComponentName([cRow - 1], [cCol - 1])"
v-bind:is="getComponentName([cRow - 1], [cCol - 1])"
:cellScrollHeight="cellScrollHeight"
></component>
</c-col>
</c-row>
</div>
</template>
<script>
import QuickVisitVue from "./cells/QuickVisit.vue";
import TaskStatisticsVue from "./cells/TaskStatistics.vue";
import NoticeAnnouncementVue from "./cells/NoticeAnnouncement.vue";
import HallVue from "./cells/Hall.vue";
import CustomerAnalyseVue from "./cells/CustomerAnalyse.vue";
import QuickSearchVue from "./cells/QuickSearch.vue";
import { createNamespacedHelpers } from "vuex";
const { mapState } = createNamespacedHelpers("UserContext");
import QuickVisit from "./cells/QuickVisit.vue";
import TaskStatistics from "./cells/TaskStatistics.vue";
import NoticeAnnouncement from "./cells/NoticeAnnouncement.vue";
import Hall from "./cells/Hall.vue";
import CustomerAnalyse from "./cells/CustomerAnalyse.vue";
import QuickSearch from "./cells/QuickSearch.vue";
export default {
name: "Home",
components: {
QuickVisitVue,
TaskStatisticsVue,
NoticeAnnouncementVue,
HallVue,
CustomerAnalyseVue,
QuickSearchVue,
QuickVisit,
TaskStatistics,
NoticeAnnouncement,
Hall,
CustomerAnalyse,
QuickSearch,
},
data() {
return {
cellScrollHeight: 0,
cellDataDefinition: [
{
title: "快速访问",
name: "QuickVisit",
description: "交易快速访问入口",
},
{
title: "任务统计",
name: "TaskStatistics",
description: "任务的数量统计",
},
{
title: "通知公告",
name: "NoticeAnnouncement",
description: "最新的通知公告",
},
{ title: "电子大厅", name: "Hall", description: "电子大厅" },
{
title: "大客户分析",
name: "CustomerAnalyse",
description: "客户数据分析",
},
{
title: "快速查询",
name: "QuickSearch",
description: "交易快速查询入口",
},
],
};
},
created() {
this.loadCellData();
},
mounted() {
this.calcCellScrollHeight();
this.calcCellScrollHeightBind = this.calcCellScrollHeight.bind(this);
window.addEventListener("resize", this.calcCellScrollHeightBind);
},
data() {
return {
cellScrollHeight: 0,
};
computed: {
...mapState({
cellRows: (state) => state.homeCellsSetting.cellRows,
cellCols: (state) => state.homeCellsSetting.cellCols,
cellNames: (state) => state.homeCellsSetting.cellNames,
}),
},
watch: {
cellRows(newVal, oldVal) {
this.calcCellScrollHeight()
},
},
methods: {
loadCellData() {
this.$store.commit(
"UserContext/setHomeDefaultCells",
this.cellDataDefinition
);
let cellsSettingDefault = localStorage.getItem("cells-setting-default");
if (!cellsSettingDefault) {
const rows = 2;
const cols = 3;
localStorage.setItem(
"cells-setting-default",
JSON.stringify({
cellRows: rows,
cellCols: cols,
cellNames: this.generateRowColNames(
rows,
cols,
this.cellDataDefinition.map((definition) => definition.name)
),
})
);
}
let userCellsSetting = localStorage.getItem(
`cells-setting-${this.$store.state.UserContext.userId}`
);
if (!userCellsSetting) {
userCellsSetting = localStorage.getItem("cells-setting-default");
}
this.$store.commit(
"UserContext/setHomeCellsSetting",
JSON.parse(userCellsSetting)
);
},
generateRowColNames(rows, cols, cells) {
const rArr = [];
for (let i = 0; i < rows; i++) {
const cArr = [];
for (let j = 0; j < cols; j++) {
cArr.push(cells[i * cols + j]);
}
rArr.push(cArr);
}
return rArr;
},
getComponentName(rowIdx, colIdx) {
return this.cellNames[rowIdx] ? this.cellNames[rowIdx][colIdx] : null;
},
calcCellScrollHeight() {
this.cellScrollHeight = this.$el.clientHeight * 0.49 - 52;
this.cellScrollHeight = Math.floor(this.$el.clientHeight * this.getRowHeightPercent() - 52 - 10)
},
getRowHeightPercent() {
// 每行预留 0.4% 的间距
return 1 / this.cellRows - 0.004 * this.cellRows;
},
getRowWidthPercent() {
// 每列预留 0.4% 的间距
return 1 / this.cellCols - 0.004 * this.cellCols;
},
},
destroyed() {
......@@ -52,26 +166,10 @@ export default {
.eContainer-home {
height: 100%;
display: flex;
flex-wrap: wrap;
/* justify-content: space-around; */
align-items: center;
}
.home-cell {
width: 33%;
height: 49%;
margin-left: 0.166%;
margin-right: 0.166%;
background-color: #ffffff;
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
border-radius: 8px;
flex-direction: column;
justify-content: space-around;
}
.home-cell >>> .cell-content {
/* max-height: calc(100% - 52px); */
height: calc(100% - 52px);
overflow: auto;
}
.home-cell >>> .el-scrollbar__wrap {
overflow-y: scroll;
overflow-x: auto;
.home-cell-col {
height: 100%;
}
</style>
src/views/Layout/Header.vue
......@@ -42,6 +42,12 @@
>修改密码</el-button
>
<el-button
@click="showHomeCellSettingDialog"
size="small"
style="width:100%;margin-left:0px;margin-top:5px"
>首页组件</el-button
>
<el-button
@click="showLogoutDialog(false)"
size="small"
style="width:100%;margin-left:0px;margin-top:5px"
......@@ -117,6 +123,65 @@
</div>
</el-popover>
<span class="header-tool-item-text">会计日期: {{ accDate }}</span>
<el-dialog custom-class="homeSetting"
:visible="homeSettingDialog"
title="首页小组件设置"
width="60%"
:before-close="handleCloseHomeSettingDialog"
>
<div style="padding: 0 20px;">
<div class="clear">
<c-col :span="24" style="margin-bottom: 10px;">
选择行数：
<c-select v-model="homeSetting.rows" :clearable="false" @change="updateDisplayArr">
<el-option label="1" :value="1"></el-option>
<el-option label="2" :value="2"></el-option>
<el-option label="3" :value="3"></el-option>
</c-select>
</c-col>
<c-col :span="24" style="margin-bottom: 10px;">
选择列数：
<c-select v-model="homeSetting.cols" :clearable="false" @change="updateDisplayArr">
<el-option label="1" :value="1"></el-option>
<el-option label="2" :value="2"></el-option>
<el-option label="3" :value="3"></el-option>
<el-option label="4" :value="4"></el-option>
</c-select>
</c-col>
</div>
<div>
<div class="setting-grid-row" v-for="row in getCellRows()" :key="row">
<div class="setting-grid-col" v-for="col in getCellCols()" :key="col" :style="{ width: 100 / getCellCols() + '%', height: '50px'}">
<div class="cell-item">
<div>{{ homeSetting.displayArray[row - 1][col - 1].title ? '标题：' + homeSetting.displayArray[row - 1][col - 1].title : '' }}</div>
<div>{{ homeSetting.displayArray[row - 1][col - 1].description ? '描述：' + homeSetting.displayArray[row - 1][col - 1].description : '' }}</div>
</div>
<div class="cell-operate">
<el-dropdown trigger="click">
<span class="el-dropdown-link">
设置&nbsp;&nbsp;<i class="el-icon-edit"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item
v-for="(item,idx) in $store.state.UserContext.homeCellsSetting.defaultCells"
:key="idx"
@click.native="setCell(row, col, item)"
>
{{ item.title }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
</div>
</div>
</div>
<span slot="footer" class="dialog-footer">
<c-button @click="cancelHomeSetting">取消</c-button>
<c-button type="primary" @click="saveHomeSetting">保存</c-button>
</span>
</el-dialog>
</div>
</div>
</template>
......@@ -149,6 +214,12 @@ export default {
{ lang: "en", shortName: "En", fullName: "English" },
{ lang: "fr", shortName: "FR", fullName: "French" },
],
homeSettingDialog: false,
homeSetting: {
rows: null,
cols: null,
displayArray: []
}
};
},
computed: {
......@@ -189,6 +260,68 @@ export default {
showChgPwdDialog() {
this.$refs["chgPwdForm"].dialogOpen = true;
},
showHomeCellSettingDialog() {
this.homeSettingDialog = true;
this.homeSetting.rows = this.$store.state.UserContext.homeCellsSetting.cellRows
this.homeSetting.cols = this.$store.state.UserContext.homeCellsSetting.cellCols
this.homeSetting.displayArray = this.$store.state.UserContext.homeCellsSetting.cellNames.map(cellNameRows => {
return cellNameRows.map(cellName => {
return Object.assign({}, this.$store.state.UserContext.homeCellsSetting.defaultCells.find(cell => cell.name === cellName))
})
})
},
saveHomeSetting() {
if (!this.homeSetting.rows || !this.homeSetting.cols) {
this.$message.warning('请选择正确的行列数！')
return
}
const cellNames = this.homeSetting.displayArray.map(row => {
return row.map(col => col.name)
})
if (cellNames.some(row => row.some(cellName => !cellName))) {
this.$message.warning('请配置全部的格子组件！')
return
}
this.$store.commit('UserContext/setHomeCellsSetting', {
cellRows: this.homeSetting.rows,
cellCols: this.homeSetting.cols,
cellNames: cellNames
})
this.homeSettingDialog = false;
},
cancelHomeSetting() {
this.homeSettingDialog = false;
},
handleCloseHomeSettingDialog(done) {
this.homeSettingDialog = false;
done();
},
getCellRows() {
return this.homeSetting.rows ? this.homeSetting.rows : this.homeSetting.cols ? 1 : 0
},
getCellCols() {
return this.homeSetting.cols ? this.homeSetting.cols : this.homeSetting.rows ? 1 : 0
},
updateDisplayArr() {
const rArr = []
for (let i = 0; i < this.getCellRows(); i++) {
const cArr = []
for (let j = 0; j < this.getCellCols(); j++) {
cArr.push({
title: null,
name: null,
description: null
})
}
rArr.push(cArr)
}
this.homeSetting.displayArray = rArr
},
setCell(row, col, item) {
this.homeSetting.displayArray[row - 1][col - 1].title = item.title
this.homeSetting.displayArray[row - 1][col - 1].name = item.name
this.homeSetting.displayArray[row - 1][col - 1].description = item.description
}
},
};
</script>
......@@ -255,7 +388,7 @@ export default {
}
.header-tool {
position: absolute;
text-align: right;
/* text-align: right; */
right: 35px;
top: 22px;
color: #fff;
......@@ -328,4 +461,38 @@ export default {
.long-text:hover {
background-color: #e8f0fe;
}
/* 首页设置框 */
.homeSetting .setting-grid-row {
width: 100%;
display: flex;
border-bottom: 1px solid #ebebeb;
}
.homeSetting .setting-grid-row:nth-of-type(1) {
border-top: 1px solid #ebebeb;
}
.homeSetting .setting-grid-col {
display: flex;
border-right: 1px solid #ebebeb;
}
.homeSetting .setting-grid-row .setting-grid-col:nth-of-type(1) {
border-left: 1px solid #ebebeb;
}
.homeSetting .setting-grid-col .cell-item {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
margin-left: 15px;
}
.homeSetting .setting-grid-col .cell-operate {
font-size: 24px;
margin: 0 10px;
display: flex;
justify-content: center;
align-items: center;
}
.homeSetting .setting-grid-col .cell-operate .el-dropdown-link {
cursor: pointer;
color: #409EFF;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment