Skip to content

V
vue-gjjs
Commit 62a0cf00 by zhoutian
Options

Merge remote-tracking branch 'origin/vue-gjjs-template' into train

parents 9484ed00 f3503c7b
Showing with 911 additions and 243 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/components/TableColumnItem.vue
......@@ -16,14 +16,8 @@ export default {
methods: {
/**
* 以英文为主
* 若 lang 为中文 zh ，则列 label 不变
* 若 lang 为英文 en ，则需将中文翻译为英文（得提前配置好表格头的国际化：中 --> 英）
*/
generateI18nLabel() {
const lang = this.$store.state.I18n.lang
if (lang === "zh") {
return this.label;
}
return this.$t(`custom.columns.${this.label}`)
}
}
......
src/model/Diasel/Check.js 0 → 100644
import Utils from "~/utils"
/**
* Diasel Check规则
*/
let checkObj = {
}
for (const key in checkObj) {
if (Object.hasOwnProperty.call(checkObj, key)) {
checkObj[key] = checkObj[key] ? checkObj[key] : Utils.reflectCheck(key)
}
}
export default checkObj
src/model/Diasel/Default.js 0 → 100644
/**
* Diasel Default规则
*/
import Api from "~/service/Api";
import Utils from "~/utils/index"
export default {
"usfmod.flt" :Utils.defaultFunction,
"dspstm" :Utils.defaultFunction,
"usfmod.selusg" :Utils.defaultFunction,
"usfmod.selusgset" :Utils.defaultFunction,
"usfmod.usr.extkey" :Utils.defaultFunction,
"diatil" :Utils.defaultFunction,
"seasec" :Utils.defaultFunction,
"diafro" :Utils.defaultFunction,
"searef" :Utils.defaultFunction,
}
//你可以添加自动default处理
src/model/Diasel/Event.js 0 → 100644
import Api from "~/service/Api"
import Utils from "~/utils"
export default {
async onUsfmodShwflt(){
let rtnmsg = await this.executeRule("usfmod.shwflt")
if(rtnmsg.respCode == SUCCESS)
{
//TODO 处理数据逻辑
}
else
{
this.$notify.error({title: '错误',message: '服务请求失败！'});
}
},
async onButdet(){
let rtnmsg = await this.executeRule("butdet")
if(rtnmsg.respCode == SUCCESS)
{
//TODO 处理数据逻辑
}
else
{
this.$notify.error({title: '错误',message: '服务请求失败！'});
}
},
async onButdia(){
let rtnmsg = await this.executeRule("butdia")
if(rtnmsg.respCode == SUCCESS)
{
//TODO 处理数据逻辑
}
else
{
this.$notify.error({title: '错误',message: '服务请求失败！'});
}
},
async onButdel(){
let rtnmsg = await this.executeRule("butdel")
if(rtnmsg.respCode == SUCCESS)
{
//TODO 处理数据逻辑
}
else
{
this.$notify.error({title: '错误',message: '服务请求失败！'});
}
},
async onButprt(){
let rtnmsg = await this.executeRule("butprt")
if(rtnmsg.respCode == SUCCESS)
{
//TODO 处理数据逻辑
}
else
{
this.$notify.error({title: '错误',message: '服务请求失败！'});
}
},
async onButconsel(){
let rtnmsg = await this.executeRule("butconsel")
if(rtnmsg.respCode == SUCCESS)
{
//TODO 处理数据逻辑
}
else
{
this.$notify.error({title: '错误',message: '服务请求失败！'});
}
},
async onButconcal(){
let rtnmsg = await this.executeRule("butconcal")
if(rtnmsg.respCode == SUCCESS)
{
//TODO 处理数据逻辑
}
else
{
this.$notify.error({title: '错误',message: '服务请求失败！'});
}
},
async onButexi(){
let rtnmsg = await this.executeRule("butexi")
if(rtnmsg.respCode == SUCCESS)
{
//TODO 处理数据逻辑
}
else
{
this.$notify.error({title: '错误',message: '服务请求失败！'});
}
},
async handleSearch() {
this.executeDefault("dspstm").then(res => {
//TODO 处理数据逻辑
this.stmData.data = res.data.dspstm.rows;
this.$store.commit("setTaskList", {key: "diasel", val: this.stmData.data.length});
})
},
async handleReset(){
this.model.diafro = "";
this.model.diatil = "";
this.model.reasen = "";
this.model.searef = "";
this.model.seasec = "";
this.model.usfmod.flt = "";
}
}
\ No newline at end of file
src/model/Diasel/Pattern.js 0 → 100644
export default {
"diafro":[
{type: "date", required: false, message: "输入正确的日期"}
],
"diatil":[
{type: "date", required: false, message: "输入正确的日期"}
],
"searef":[
{type: "string", required: false, message: "必输项"},
{max: 16,message:"长度不能超过16"}
],
"usfmod.usr.extkey":[
{type: "string", required: false, message: "必输项"},
{max: 8,message:"长度不能超过8"}
],
"usfmod.usrget.sdamod.seainf":[
{type: "string", required: false, message: "必输项"},
{max: 3,message:"长度不能超过3"}
],
"dspstm":[
{type: "string", required: false, message: "必输项"},
{max: 1,message:"长度不能超过1"}
],
}
\ No newline at end of file
src/model/Diasel/index.js 0 → 100644
import Api from "~/service/Api"
import Pts from "../Common/Pts"
export default class Diasel{
constructor () {
this.data = {
diafro:"", // Diary From date .diafro
diatil:"", // Diary Till date .diatil
usfmod:{
labtxt:"", // Text of Label .usfmod.labtxt
usftxt:"", // Text of Selection Text .usfmod.usftxt
flt:"", // Filter .usfmod.flt
selusg:"", // Selected User Group .usfmod.selusg
selusgset:"", // Selected User Group Set .usfmod.selusgset
usr:{
extkey:"", // User ID .usfmod.usr.extkey
},
usrget:{
sdamod:{
seainf:"", // .usfmod.usrget.sdamod.seainf
},
},
selusb:"", // Select user branch .usfmod.selusb
},
searef:"", // Selection Reference .searef
seasec:"", // Business Sector .seasec
dspstm:"", // Display Stream .dspstm
pageId: "" // ctx的key
}
}
}
\ No newline at end of file
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/Business/Diasel/index.vue 0 → 100644
<template>
<div class="eContainer">
<el-form :model="model" :rules="rules" ref="modelForm" label-width="200px" size="small" :validate-on-rule-change="false">
<!-- <c-tabs v-model="tabVal" ref="elment" type="card" @tab-click="tabClick">-->
<!--PD000001 -->
<!-- <el-tab-pane label="Diary Selection" name="diaselp"> -->
<!-- <c-content> -->
<m-diaselp :model="model" :codes="codes" ref="diaselp"/>
<!-- </c-content> -->
<!-- </el-tab-pane>
</c-tabs> -->
</el-form>
</div>
</template>
<script>
import { getCodetable } from "~/service/business/codeTable"
import CodeTable from "~/config/CodeTable"
import Diasel from "~/model/Diasel"
import commonProcess from "~/mixin/commonProcess"
import Utils from "~/utils/index"
import Check from "~/model/Diasel/Check"
import Default from "~/model/Diasel/Default"
import Pattern from "~/model/Diasel/Pattern"
import Diaselp from "./Diaselp"
export default {
name: 'Diasel',
components:{
"m-diaselp" : Diaselp,
},
provide() {
return {
root: this
}
},
mixins: [commonProcess], // 里面包含了Default、Check等的公共处理
data(){
return {
tabVal: "diaselp",
trnName: "diasel",
model: new Diasel().data,
checkRules: Check,
defaultRules: Default,
pattern: Pattern,
rules: null,
codes: {
...CodeTable,
bustxt:[],
diatxt:[],
},
}
},
methods:{
tabClick(){
}
},
created:async function(){
console.log("进入diasel交易");
// 查询码表
getCodetable({ tbl:'DIATXT',lang:'EN' }).then((res) => {
if (res.respCode == SUCCESS) {
this.codes.diatxt = res.data;
}
});
getCodetable({ tbl:'BUSTXT',lang:'EN' }).then((res) => {
if (res.respCode == SUCCESS) {
this.codes.bustxt = res.data;
}
});
/* let rtnmsg = await this.init({})
if(rtnmsg.respCode == SUCCESS)
{
this.$refs.diaselp.stmData.data = rtnmsg.data.dspstm.rows;
}
else
{
this.$notify.error({title: '错误',message: '服务请求失败！'});
} */
const that = this;
that.init(that.model).then(res => {
//TODO 处理数据逻辑
that.model = Utils.copyValueFromVO(that.model, res.data)
this.$refs.diaselp.handleSearch();
})
}
}
</script>
<style>
</style>
src/views/Business/Trnrel/InftrnpsDetail.vue
......@@ -494,7 +494,7 @@ export default {
},
async show(idx,row){
var params = {selDst:"recpan.smhstm",selIds:[idx+1],selBtnId:"A"}
let rtnmsg = await Api.post(`/business/trnrel/executeRule/recpan.smhstm`, this.wrapper(params))
let rtnmsg = await this.executeRule('recpan.smhstm', this.wrapper(params))
if (rtnmsg.respCode == SUCCESS) {
this.title = "面函"
let viewurl = "/#/docpan/show";
......
src/views/Home/cells/CustomerAnalyse.vue
<template>
<div class="home-cell" id="customerAnalyse">
<CellHeaderVue title="大客户分析">
<CellWrapper title="大客户分析" :cellContentHeight="cellContentHeight">
<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="chart-container">
<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 },
props: ["cellContentHeight"],
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.$nextTick(() => {
this.loadCharts();
this.loadChartsBind = this.loadCharts.bind(this);
window.addEventListener("resize", this.loadChartsBind);
});
},
methods: {
loadCharts() {
this.echartInstance.clear()
if (this.echartInstance) {
this.echartInstance.dispose();
}
this.echartInstance = echarts.init(
this.$el.querySelector(".chart-container .chartWrapper .chart")
);
const option = {
title: {
// text: "Test Demo",
......@@ -93,32 +101,29 @@ export default {
},
},
destroyed() {
window.removeEventListener('resize', this.loadChartsBind)
}
window.removeEventListener("resize", this.loadChartsBind);
},
};
</script>
<style scoped>
#customerAnalyse .cell-content {
.chart-container {
height: 100%;
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="电子大厅" :cellContentHeight="cellContentHeight">
<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="card-wrapper">
<div class="card-item" v-for="(item, idx) in itemList" :key="idx">
<div class="dept-name">
<div
......@@ -25,15 +26,16 @@
</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 },
props: ['cellContentHeight'],
components: { CellWrapper },
data() {
return {
itemList: [
......@@ -64,15 +66,14 @@ export default {
</script>
<style scoped>
#hall .cell-content {
.card-wrapper {
height: 100%;
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="通知公告" :cellContentHeight="cellContentHeight">
<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="notice-container">
<el-scrollbar style="height: 100%;">
<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,26 +17,22 @@
{{ 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 },
props: {
cellScrollHeight: {
type: Number,
required: true,
},
},
props: ['cellContentHeight'],
components: { CellWrapper },
data() {
return {
noticeList: [
noticeList: [],
testData: [
{
title: "中国国际货物和服务贸易数据（BPM6，2015年以后）",
url: "https://www.safe.gov.cn/safe/2018/0427/8886.html",
......@@ -102,40 +98,67 @@ export default {
url: "https://www.safe.gov.cn/safe/2021/0720/19437.html",
date: "2021-07-20",
},
{
title: "现行有效外汇管理主要法规目录（截至2021年6月30日）...",
url: "https://www.safe.gov.cn/safe/2021/0720/19437.html",
date: "2021-07-20",
},
{
title: "现行有效外汇管理主要法规目录（截至2021年6月30日）...",
url: "https://www.safe.gov.cn/safe/2021/0720/19437.html",
date: "2021-07-20",
},
{
title: "现行有效外汇管理主要法规目录（截至2021年6月30日）...",
url: "https://www.safe.gov.cn/safe/2021/0720/19437.html",
date: "2021-07-20",
},
],
};
},
mounted() {
this.$nextTick(() => {
this.loadNoticeData();
});
},
methods: {
loadNoticeData() {
// 查询加载数据
this.noticeList = this.testData;
},
},
};
</script>
<style scoped>
/* 通知公告 */
#noticeAnnouncement .cell-content {
.notice-container {
height: 100%;
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 +169,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="快速查询" :cellContentHeight="cellContentHeight">
<template v-slot:header>
<span class="el-icon-setting" title="设置" @click="openSetting"></span>
</CellHeaderVue>
</template>
<quick
ref="quick"
:cellScrollHeight="cellScrollHeight"
quickType="search"
:cellContentHeight="cellContentHeight"
></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: {
cellContentHeight: {
type: Number,
required: true,
},
......
src/views/Home/cells/QuickVisit.vue
<template>
<div class="home-cell" id="quickVisit">
<CellHeaderVue title="快速访问">
<CellWrapper title="快速访问" :cellContentHeight="cellContentHeight">
<template v-slot:header>
<span class="el-icon-setting" title="设置" @click="openSetting"></span>
</CellHeaderVue>
</template>
<quick
ref="quick"
:cellScrollHeight="cellScrollHeight"
quickType="visit"
:cellContentHeight="cellContentHeight"
></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: {
cellContentHeight: {
type: Number,
required: true,
},
......
src/views/Home/cells/TaskStatistics.vue
<template>
<div class="home-cell">
<CellHeaderVue title="任务统计">
<CellWrapper title="任务统计" :cellContentHeight="cellContentHeight">
<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="statistics-container">
<div class="task-stat-display total">
<div class="display-wrapper">
<div
......@@ -43,16 +44,17 @@
</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 },
props: ["cellContentHeight"],
components: { CellWrapper },
data() {
return {
total: [
......@@ -84,20 +86,21 @@ export default {
};
},
created() {
all().then(res => {
console.log(res);
})
}
all().then((res) => {
console.log(res);
});
},
};
</script>
<style scoped>
.cell-content {
.statistics-container {
height: 100%;
padding: 0px 8px;
}
.task-stat-display {
height: 25%;
max-height: 90px;
/* max-height: 90px; */
display: flex;
justify-content: space-around;
color: #f3f3f3;
......@@ -176,7 +179,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" :style="{ height: cellContentHeight + 'px' }">
<slot></slot>
</div>
</div>
</template>
<script>
import CellHeader from "./CellHeader.vue";
export default {
name: "CellWrapper",
components: { CellHeader },
props: {
title: {
type: String,
required: true,
},
cellContentHeight: {
type: Number,
required: true,
},
},
data() {
return {};
},
};
</script>
<style scoped>
.home-cell {
background-color: #ffffff;
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
border-radius: 8px;
padding-bottom: 10px;
}
.home-cell::before {
display: table;
content: "";
}
.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>
<el-scrollbar style="height: 100%">
<router-link
v-for="(item, index) in quickVisitItem"
:key="index"
:to="item.path"
>
<div
class="content-wrapper"
:style="{ height: Math.floor(cellContentHeight * 0.33) + '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>
......@@ -49,16 +52,16 @@ import icons from "./icons.js";
export default {
props: {
cellScrollHeight: {
type: Number,
quickType: {
type: String,
required: true,
},
quickType: {
type: String,
cellContentHeight: {
type: Number,
required: true,
}
},
},
data() {
data() {
return {
allAvailableItems: [],
quickVisitItem: [],
......@@ -67,11 +70,11 @@ export default {
transferData: [],
};
},
mounted() {
mounted() {
this.$nextTick(() => {
this.init();
this.generateVisitItems(this.getCachedVisitItems());
})
});
},
methods: {
init() {
......@@ -79,27 +82,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 +149,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/config.js 0 → 100644
export const 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: "交易快速查询入口",
},
];
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"
v-for="cRow in cellRows"
:key="cRow"
>
<c-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])"
:cellContentHeight="cellContentHeight"
></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";
import { cellDataDefinition } from "./config";
export default {
name: "Home",
components: {
QuickVisitVue,
TaskStatisticsVue,
NoticeAnnouncementVue,
HallVue,
CustomerAnalyseVue,
QuickSearchVue,
},
mounted() {
this.calcCellScrollHeight();
this.calcCellScrollHeightBind = this.calcCellScrollHeight.bind(this);
window.addEventListener("resize", this.calcCellScrollHeightBind);
QuickVisit,
TaskStatistics,
NoticeAnnouncement,
Hall,
CustomerAnalyse,
QuickSearch,
},
data() {
return {
cellScrollHeight: 0,
cellContentHeight: 0,
};
},
created() {
this.loadCellData();
},
mounted() {
this.calcCellContentHeight();
this.calcCellContentHeightBind = this.calcCellContentHeight.bind(this);
window.addEventListener("resize", this.calcCellContentHeightBind);
},
computed: {
...mapState({
cellRows: (state) => state.homeCellsSetting.cellRows,
cellCols: (state) => state.homeCellsSetting.cellCols,
cellNames: (state) => state.homeCellsSetting.cellNames,
}),
},
watch: {
cellRows(newVal, oldVal) {
this.calcCellContentHeight()
},
},
methods: {
calcCellScrollHeight() {
this.cellScrollHeight = this.$el.clientHeight * 0.49 - 52;
loadCellData() {
this.$store.commit(
"UserContext/setHomeDefaultCells",
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,
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;
},
calcCellContentHeight() {
this.cellContentHeight = this.$el.clientHeight * this.getRowHeightPercent() - 52 - 10
},
getRowHeightPercent() {
// 每行预留 0.4% 的间距
return 1 / this.cellRows - 0.004 * this.cellRows;
},
},
destroyed() {
window.removeEventListener("resize", this.calcCellScrollHeightBind);
window.removeEventListener("resize", this.calcCellContentHeightBind);
},
};
</script>
......@@ -52,26 +134,7 @@ 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;
}
.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;
flex-direction: column;
justify-content: space-around;
}
</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>
src/views/TaskList/index.vue
......@@ -12,7 +12,7 @@
/>
</span>
<c-content :height="180">
<!-- <t-sptsel /> -->
<t-sptsel />
</c-content>
</el-tab-pane>
......@@ -26,13 +26,13 @@
/>
</span>
<c-content :height="180">
<!-- <t-trnrel /> -->
<t-trnrel />
</c-content>
</el-tab-pane>
<el-tab-pane label="已完成列表" name="trnfnd">
<c-content :height="180">
<!-- <t-trnfnd /> -->
<t-trnfnd />
</c-content>
</el-tab-pane>
<el-tab-pane label="待申报列表" name="bopsel">
......@@ -47,7 +47,7 @@
:max="99"
/>
</span>
<!-- <t-sptbrk /> -->
<t-sptbrk />
</el-tab-pane>
<el-tab-pane label="到期提示" name="diasel">
<span slot="label">
......@@ -59,7 +59,7 @@
/>
</span>
<c-content :height="180">
<!-- <t-diasel /> -->
<t-diasel />
</c-content>
</el-tab-pane>
</c-tabs>
......@@ -67,12 +67,12 @@
</template>
<script>
// import Sptsel from "~/views/Business/Sptsel";
// import Sptbrk from "~/views/Business/Sptsel/Sptbrk";
// import Trnrel from "~/views/Business/Trnrel";
// import Trnfnd from "~/views/Business/Trnrel/Trnfnd";
// import Diasel from "~/views/Business/Diasel";
// import Bopsel from "~/views/Business/Bopsel";
import Sptsel from "~/views/Business/Sptsel";
import Sptbrk from "~/views/Business/Sptsel/Sptbrk";
import Trnrel from "~/views/Business/Trnrel";
import Trnfnd from "~/views/Business/Trnrel/Trnfnd";
import Diasel from "~/views/Business/Diasel";
import Bopsel from "~/views/Business/Bopsel";
export default {
data() {
......@@ -96,12 +96,12 @@ export default {
},
},
components: {
// "t-sptsel": Sptsel,
// "t-sptbrk": Sptbrk,
// "t-trnrel": Trnrel,
// "t-trnfnd": Trnfnd,
// "t-diasel": Diasel,
// "t-bopsel": Bopsel,
"t-sptsel": Sptsel,
"t-sptbrk": Sptbrk,
"t-trnrel": Trnrel,
"t-trnfnd": Trnfnd,
"t-diasel": Diasel,
"t-bopsel": Bopsel,
},
};
</script>
......
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