Skip to content

R
rbc-demo
Commit adf2ed65 by qiaoyanqi
Options

tab-container.vue 迁移到了中台gms-view

parent a6311a52
Showing with 0 additions and 440 deletions
develop/@gms/gms-plugin-billexpand/src/control/tab-container/tab-container.vue deleted 100644 → 0
<template>
<div :class="['card-container',isAddBackgroundColor?'':'whiteColor']" :style="getTabStyle">
<div class="tabs-box">
<Tabs :type="tabsType" :animated="false" @on-click="changeTab">
<div class="extra-slot" slot="extra" >
<component :is="container" v-if="extraDefine" :define="extraDefine" :context="context"></component>
</div>
<TabPane :label="getTabPaneLabel(item)" v-for="(item,index) in defineSlot" :key="index"></TabPane>
</Tabs>
</div>
<div class="tab-pane-content" :style="{height:leftHeight+'px'}" >
<component :is="container" v-if="showCurrentDefine&&container" :define="currentDefine" :context="context"></component>
</div>
</div>
</template>
<script>
export default {
data(){
let getTabsType = function(){
if(this.define.config&&this.define.config.tabsType){
return this.define.config.tabsType;
}else{
return "card";
}
}.bind(this);
return {
showPersonalise:false, // 是否是自定义效果
leftHeight:500,
defineSlot:[],
tabsType:getTabsType(),
isAddBackgroundColor:false,
currentTabPane:0,
labelHeight:0,
currentDefine:null,
showCurrentDefine:false,
container:null
}
},
props:{
define:{
type:Object,
required:true,
default:function(){
return {};
}
},
context:{
type:Object,
required:false,
default:function(){
return {};
}
}
},
watch:{
},
computed:{
getContainerDefine(){
return function(slot) {
return {
layout:{},
slots:{
children:{
layout:slot.layout,
elements:slot.elements||slot.config.elements
}
}
}
}
},
getTabStyle(){
let style = {};
if(this.define.config&&this.define.config.background){
style['background-color'] = this.define.config.background;
}
return style;
},
getTabPaneLabel(){
return function(item){
if(item['config']&&item['config']['title']){
return (h) => {
return h('div',
{
style:this.getLabelStyle,
attrs:{
id:"tabContainerPaneLabel"
}
},
[
h('span', item['config']['title'])
])
}
}else{
return (h) => {
return h('div', [
h('span', '标签')
])
}
}
}.bind(this)
},
getLabelStyle(){
if(this.labelHeight){
return {
height:this.labelHeight?this.getUnit(this.labelHeight):'32px',
lineHeight:this.labelHeight?this.getUnit(this.labelHeight):'32px'
}
}else{
return {
height:this.labelHeight?this.getUnit(this.labelHeight):'32px',
padding: "0 16px 4px"
}
}
},
extraDefine(){
if(this.define.slots.children&&this.define.slots.children.elements){
return this.getExtraSlot(this.define.slots.children.elements);
}else if(this.define.slots.elements){
return this.getExtraSlot(this.define.slots.elements);
}else{
return false;
}
}
},
methods:{
getExtraSlot(elements){
if(elements[this.currentTabPane]&&elements[this.currentTabPane].extraElements&&elements[this.currentTabPane].extraElements.length > 0){
return {
layout:slot.extraLayout,
slots:{
children:{
layout:{},
elements:slot.extraElements
}
}
}
}else{
return false;
}
},
changeTab(name){
let params = {
defineSlot:this.defineSlot[name],
define:this.define
}
this.context.bill.setGlobalParam('tab_container_name',JSON.parse(JSON.stringify(params)));
this.currentTabPane = name;
this.currentDefine = this.getContainerDefine(this.defineSlot[name]);
this.showCurrentDefine = false;
this.$nextTick(function(){
this.showCurrentDefine = true;
}.bind(this));
},
getConfig(){
if(this.define.config&&this.define.config.background){
this.isAddBackgroundColor = true;
}
if(this.define.layout&&this.define.layout.labelHeight){
if(this.define.layout.labelHeight.indexOf){
this.labelHeight = this.define.layout.labelHeight.replace(/px/g,'');
}else{
this.labelHeight = this.define.layout.labelHeight;
}
this.labelHeight = Number(this.labelHeight) - 13;
}
},
getHeifht(val){
if(val.indexOf&&val.indexOf('px') > -1){
return val;
}else if(val){
return `${val}px`;
}else{
return 500;
}
},
getContentHeight(){
if(this.context.billType === 'card'){
this.setCardAutoHeight();
}
if(this.define.layout&&this.define.layout.hasOwnProperty('height')){
this.leftHeight = this.getHeifht(this.define.layout.height);
}else if(this.context&&this.context.bill&&this.context.bill.getGlobalParam&&this.context.bill.getGlobalParam('headHeight')){
this.leftHeight = window.innerHeight - this.context.bill.getGlobalParam('headHeight');
window.onresize = () => {
return (() => {
this.leftHeight = window.innerHeight - this.context.bill.getGlobalParam('headHeight');
})();
};
}else{
let integrationTheme = window.localStorage.getItem('back');
if(integrationTheme == 'ThemeLakeBlue'){
this.leftHeight = window.innerHeight - 130;
window.onresize = () => {
return (() => {
this.leftHeight = window.innerHeight - 130;
})();
};
}else{
this.leftHeight = window.innerHeight - 180;
window.onresize = () => {
return (() => {
this.leftHeight = window.innerHeight - 180;
})();
};
}
}
if(this.leftHeight.indexOf){
this.leftHeight = this.leftHeight.replace('px','');
}
},
setCardAutoHeight(){
this.leftHeight = window.innerHeight - 500;
this.context.bill.setGlobalParam('headHeight',500);
},
settabBarStyle(){
if(this.define.layout&&this.define.layout.labelHeight){
if(this.define.config.tabsType == 'line'){
$('.card-container .ivu-tabs-bar').eq(0).attr("style",`height:${this.getUnit(this.define.layout.labelHeight)}`);
}else if(this.define.config.tabsType == 'card'){
$('.card-container .ivu-tabs-nav-container').eq(0).attr("style",`height:${this.getUnit(this.define.layout.labelHeight)}`);
}else{
$('.card-container .ivu-tabs-nav-container').eq(0).attr("style",`height:${this.getUnit(this.define.layout.labelHeight)}`);
}
}
},
getUnit(val){
if(val&&val.toString().indexOf('px') > -1){
return val;
}else if(val){
return `${val}px`;
}
},
getTabPane(slots){
if(slots.children&&slots.children.elements){
let arr = [];
for (let ele of slots.children.elements) {
if(ele.config&&ele.config.formulas){
if(this.context.bill.getControlState('display',ele.name)){
arr.push(ele);
}
}else{
arr.push(ele);
}
}
return arr;
}else if(slots.elements){
return slots.elements;
}else{
return [];
}
},
addTabPaneListener(){
if(this.define.slots&&this.define.slots.children&&this.define.slots.children.elements){
if(!this.hideRemoveList){
this.hideRemoveList = [];
}
for (let i=0;i<this.define.slots.children.elements.length;i++) {
let _eleItem = this.define.slots.children.elements
if(_eleItem.config&&_eleItem.config.formulas){
let hideRemove = this.context.bill.addControlHideListener(_eleItem.name,{
display:function(type,name){
if(type){
this[name]&&this.updateDefineSlot(this[name].index,this[name].currentItem);
}else{
this[name]&&this.updateDefineSlot(this[name].index);
}
}.bind(this)
});
this.hideRemoveList.push(hideRemove);
this[_eleItem.name] = {
index:i,
currentItem:_eleItem
}
}
}
}
this.hideRemove = this.context.bill.addControlHideListener(this.define.name,{
controlChange:function(param){
if(param&&param.action){
this[param.action]&&this[param.action](param);
}
}.bind(this)
});
},
changeTabTitle(param){
if(param.titleList){
for (const ti of param.titleList) {
for (const st of this.defineSlot) {
let stName = st.name;
if(stName == ti.name){
st.config.title = ti.title;
}
}
}
this.$forceUpdate();
}else if(param.title){
this.$set(this.defineSlot[this.currentTabPane].config,'title',param.title);
}
},
updateDefineSlot(index,item){
if(item){
this.defineSlot.splice(index,0,item);
}else{
this.defineSlot.splice(index,1);
}
}
},
mounted(){
this.getContentHeight();
this.settabBarStyle();
this.defineSlot = this.getTabPane(this.define.slots);
if(this.defineSlot&&this.defineSlot[0]){
//设置全局变量存储数据
let params = {
defineSlot:this.defineSlot[0],
define:this.define
}
this.context.bill.setGlobalParam('tab_container_name',JSON.parse(JSON.stringify(params)));
this.currentDefine = this.getContainerDefine(this.defineSlot[0]);
this.showCurrentDefine = true;
}
this.context.bill.setGlobalParam('_tab_container_slot',JSON.parse(JSON.stringify(this.defineSlot)));
},
created(){
/**
* 动态变化支持了，但是我没测试，期待有缘人
*/
this.context.bill.setGlobalParam('_gams_tab_container_',true);
this.container = GMS.getContext().getCollector().getElement('billControl','Container');
this.getConfig();
this.addTabPaneListener();
},
beforeDestroy(){
if(this.hideRemoveList&&this.hideRemoveList instanceof Array){
for (let hrem of this.hideRemoveList) {
hrem();
}
}
this.hideRemove&&this.hideRemove();
}
}
</script>
<style lang="less" scoped>
/deep/ .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab{
border-radius: 0;
background: #fff;
}
/deep/ .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active{
border-top: 1px solid #3399ff;
}
/deep/ .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active:before{
content: '';
display: block;
width: 100%;
height: 1px;
background: #3399ff;
position: absolute;
top: 0;
left: 0;
}
.whiteColor{
background-color:#f0f2f6;
}
.tab-pane-content {
overflow-y: auto;
overflow-x: hidden;
position: relative;
padding-bottom: 25px;
}
.tab-slot{
width: 300px;
height: 50px;
background: red;
}
.card-container{
/deep/.ivu-tabs.ivu-tabs-card>.ivu-tabs-bar .ivu-tabs-nav-container,/deep/.ivu-tabs-bar{
/deep/.ivu-tabs-nav-wrap{
height: 100%;
/deep/.ivu-tabs-nav-scroll{
height: 100%;
/deep/.ivu-tabs-nav,/deep/.ivu-tabs-tab{
height: 100%;
}
}
}
}
}
</style>
develop/@gms/gms-plugin-billexpand/src/emcon.js
...@@ -20,51 +20,6 @@ export default { ...@@ -20,51 +20,6 @@ export default {
"path": "报销/通用" "path": "报销/通用"
}, },
{ {
"title": "Tab切换容器",
"description":"",
"discard": false,
"extends": {
"config": [
{
"key": "tabsType",
"type": "enum",
"tabsType":"card",
"title": "页签展示样式",
"ref": [
{
"key": "line",
"value": "普通样式"
},
{
"key": "card",
"value": "卡片样式"
}
]
},
{
"background": "#fff",
"key": "background",
"type": "Color",
"title": "背景色"
}
],
"layout":[
{
"key": "height",
"type": "int",
"title": "内容高度"
},
{
"key": "labelHeight",
"type": "int",
"title": "标签高度"
}
]
},
"value": "TabContainer",
"path": "单据/通用"
},
{
"title": "链接扩展", "title": "链接扩展",
"description": "", "description": "",
"discard": false, "discard": false,
......
develop/@gms/gms-plugin-billexpand/src/mcon.js
...@@ -85,7 +85,6 @@ import userSelectControl from './control/userSelect.vue' ...@@ -85,7 +85,6 @@ import userSelectControl from './control/userSelect.vue'
import integerControl from './control/integerControl.vue' import integerControl from './control/integerControl.vue'
import IntroduceInputControl from './control/IntroduceInputControl.vue' import IntroduceInputControl from './control/IntroduceInputControl.vue'
import InputModalControl from './control/InputModalControl.vue' import InputModalControl from './control/InputModalControl.vue'
import TabContainer from './control/tab-container/tab-container.vue'
import Achievements from './control/vxe-achievements/achievements.vue' import Achievements from './control/vxe-achievements/achievements.vue'
import VxeSubjectControl from './control/vxeTableExpand/VxeSubjectControl.js' import VxeSubjectControl from './control/vxeTableExpand/VxeSubjectControl.js'
//formula //formula
...@@ -271,7 +270,6 @@ export default { ...@@ -271,7 +270,6 @@ export default {
integerControl, integerControl,
IntroduceInputControl, IntroduceInputControl,
InputModalControl, InputModalControl,
TabContainer,
Achievements, Achievements,
VxeSubjectControl VxeSubjectControl
}, },
......
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