Skip to content

iBiz-Vue-R7-Res
iBiz-Vue-R7-Res
提交 1a736de6 编写于 作者: tony001's avatar tony001
浏览文件
操作

update：更新

上级 ebd48b5b
显示空白字符变更
内嵌 并排
正在显示 包含 90 行增加 和 69 行删除
src/components/layout-container/app-scroll-container/app-scroll-container.vue
浏览文件 @ 1a736de6
<template>
<div class="app-scroll-container">
<div
v-if="containerModel.NORTH"
:style="containerModel.NORTH.style"
class="no-style overflow-auto app-scroll-container__header"
>
<div v-if="containerModel.NORTH" :style="containerModel.NORTH.style"
class="no-style overflow-auto app-scroll-container__header">
<template v-for="name of containerModel.NORTH.name">
<slot :name="name"></slot>
</template>
</div>
<div class="app-scroll-container__middle" :style="middleContainerStyle">
<div
v-if="containerModel.WEST"
:style="containerModel.WEST.style"
class="no-style overflow-auto app-scroll-container__left"
>
<div v-if="containerModel.WEST" :style="containerModel.WEST.style"
class="no-style overflow-auto app-scroll-container__left">
<template v-for="name of containerModel.WEST.name">
<slot :name="name"></slot>
</template>
</div>
<div
v-if="containerModel.CENTER"
:style="containerModel.CENTER.style"
class="no-style overflow-auto app-scroll-container__center"
>
<div v-if="containerModel.CENTER" :style="containerModel.CENTER.style"
class="no-style overflow-auto app-scroll-container__center">
<template v-for="name of containerModel.CENTER.name">
<slot :name="name"></slot>
</template>
</div>
<div
v-if="containerModel.EAST"
:style="containerModel.EAST.style"
class="no-style overflow-auto app-scroll-container__right"
>
<div v-if="containerModel.EAST" :style="containerModel.EAST.style"
class="no-style overflow-auto app-scroll-container__right">
<template v-for="name of containerModel.EAST.name">
<slot :name="name"></slot>
</template>
</div>
</div>
<div
v-if="containerModel.SOUTH"
:style="containerModel.SOUTH.style"
class="no-style overflow-auto app-scroll-container__bottom"
>
<div v-if="containerModel.SOUTH" :style="containerModel.SOUTH.style"
class="no-style overflow-auto app-scroll-container__bottom">
<template v-for="name of containerModel.SOUTH.name">
<slot :name="name"></slot>
</template>
......@@ -51,6 +36,7 @@
</template>
<script lang="ts">
import { Util } from '@/utils';
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component({})
......@@ -100,23 +86,23 @@ export default class AppScrollContainer extends Vue {
* @memberof AppScrollContainer
*/
public initScrollContainer() {
let minusHeight = 0;
let minusWidth = 0;
let minusHeight = '';
let minusWidth:string = '';
const curLayoutModelDetails = this.layoutModelDetails[this.name];
if (curLayoutModelDetails && curLayoutModelDetails.details && curLayoutModelDetails.details.length > 0) {
curLayoutModelDetails.details.forEach((key: string) => {
const { name, layoutWidth, layoutHeight, layoutPos } = this.layoutModelDetails[key];
const { name, layoutWidth, widthMode, layoutHeight, heightMode, layoutPos } = this.layoutModelDetails[key];
const style = {};
if (layoutWidth) {
Object.assign(style, { width: `${layoutWidth}px` });
Object.assign(style, { width: Util.getBoxSize('WIDTH', widthMode, layoutWidth).width });
if (layoutPos && (Object.is(layoutPos, 'WEST') || Object.is(layoutPos, 'EAST'))) {
minusWidth += layoutWidth;
minusWidth += ` - ${Util.getBoxSize('WIDTH', widthMode, layoutWidth).width}`;
}
}
if (layoutHeight) {
Object.assign(style, { height: `${layoutHeight}px` });
Object.assign(style, { height: Util.getBoxSize('HEIGHT', heightMode, layoutHeight).height });
if (layoutPos && (Object.is(layoutPos, 'NORTH') || Object.is(layoutPos, 'SOUTH'))) {
minusHeight += layoutHeight;
minusHeight += ` - ${Util.getBoxSize('HEIGHT', heightMode, layoutHeight).height}`;
}
}
if (this.containerModel.hasOwnProperty(layoutPos)) {
......@@ -127,11 +113,10 @@ export default class AppScrollContainer extends Vue {
}
});
}
this.middleContainerStyle.height = minusHeight ? `calc(100% - ${minusHeight}px)` : '100%';
this.middleContainerStyle.height = minusHeight ? `calc(100%${minusHeight})` : '100%';
if (this.containerModel.CENTER) {
this.containerModel.CENTER.style.width = minusWidth ? `calc(100% - ${minusWidth}px)` : '100%';
this.containerModel.CENTER.style.width = minusWidth ? `calc(100%${minusWidth})` : '100%';
}
console.log(this.containerModel);
}
}
</script>
......
src/model/panel-detail/panel-detail.ts
浏览文件 @ 1a736de6
......@@ -52,7 +52,7 @@
* @type {string}
* @memberof PanelDetailModel
*/
public layout:string = '';
public layout: string = '';
/**
* 布局占位（边缘布局使用）
......@@ -60,7 +60,7 @@
* @type {string}
* @memberof PanelDetailModel
*/
public layoutPos:string = '';
public layoutPos: string = '';
/**
* 布局高度
......@@ -68,7 +68,7 @@
* @type {number}
* @memberof PanelDetailModel
*/
public layoutHeight:number = 0;
public layoutHeight: number = 0;
/**
* 高度模式
......@@ -76,7 +76,7 @@
* @type {string}
* @memberof PanelDetailModel
*/
public heightMode:string = '';
public heightMode: string = '';
/**
* 布局宽度
......@@ -84,7 +84,7 @@
* @type {number}
* @memberof PanelDetailModel
*/
public layoutWidth:number = 0;
public layoutWidth: number = 0;
/**
* 宽度模式
......@@ -92,7 +92,7 @@
* @type {string}
* @memberof PanelDetailModel
*/
public widthMode:string = '';
public widthMode: string = '';
/**
* 下档间隔
......@@ -100,7 +100,7 @@
* @type {string}
* @memberof PanelDetailModel
*/
public spacingBottom:string = '';
public spacingBottom: string = '';
/**
* 左侧间隔
......@@ -108,7 +108,7 @@
* @type {string}
* @memberof PanelDetailModel
*/
public spacingLeft:string = '';
public spacingLeft: string = '';
/**
* 右侧间隔
......@@ -116,7 +116,7 @@
* @type {string}
* @memberof PanelDetailModel
*/
public spacingRight:string = '';
public spacingRight: string = '';
/**
* 顶部间隔
......@@ -124,7 +124,7 @@
* @type {string}
* @memberof PanelDetailModel
*/
public spacingTop:string = '';
public spacingTop: string = '';
/**
* 自身水平对齐模式
......@@ -132,7 +132,7 @@
* @type {string}
* @memberof PanelDetailModel
*/
public hAlignSelf:string = '';
public hAlignSelf: string = '';
/**
* 自身垂直对齐模式
......@@ -140,7 +140,7 @@
* @type {string}
* @memberof PanelDetailModel
*/
public vAlignSelf:string = '';
public vAlignSelf: string = '';
/**
* Creates an instance of PanelDetailModel.
......
src/styles/default.less
浏览文件 @ 1a736de6
......@@ -6,6 +6,11 @@
@import './app-code-list.less';
@import './var.css';
#app {
height: 100vh;
width: 100vw;
}
.ibiz-page-tag .tags-body .tags-container .ivu-tag.tag-is-active .ivu-tag-text {
color: #1890ff;
}
......@@ -284,6 +289,12 @@
/*** END:多数据视图属性布局 ***/
// 自定义视图布局
.app-view-layout{
width: 100%;
height: 100%;
}
// 看板视图，卡片模式
// .view-container.appportalview,.view-container.deportalview,.view-container.deportalview9{
// >.view-card>.ivu-card-body>.content-container{
......
src/utils/util/util.ts
浏览文件 @ 1a736de6
......@@ -299,7 +299,7 @@ export class Util {
* @returns {any}
* @memberof Util
*/
public static formatData(arg: any,parent:any, params: any): any {
public static formatData(arg: any, parent: any, params: any): any {
let _data: any = {};
Object.keys(params).forEach((name: string) => {
if (!name) {
......@@ -309,11 +309,11 @@ export class Util {
if (value && value.startsWith('%') && value.endsWith('%')) {
const key = value.substring(1, value.length - 1);
if (arg && arg.hasOwnProperty(key)) {
if(arg[key] !== null && arg[key] !== undefined){
if (arg[key] !== null && arg[key] !== undefined) {
value = arg[key];
}else if(parent[key] !== null && parent[key] !== undefined){
} else if (parent[key] !== null && parent[key] !== undefined) {
value = parent[key];
}else{
} else {
value = null;
}
} else {
......@@ -337,9 +337,9 @@ export class Util {
* @returns {any}
* @memberof Util
*/
public static computedNavData(data:any,parentContext:any,parentParam:any,params:any):any{
public static computedNavData(data: any, parentContext: any, parentParam: any, params: any): any {
let _data: any = {};
if(params && Object.keys(params).length >0){
if (params && Object.keys(params).length > 0) {
Object.keys(params).forEach((name: string) => {
if (!name) {
return;
......@@ -349,9 +349,9 @@ export class Util {
const key = value.substring(1, value.length - 1).toLowerCase();
if (data && data.hasOwnProperty(key)) {
value = data[key];
}else if(parentContext && parentContext[key]){
} else if (parentContext && parentContext[key]) {
value = parentContext[key];
}else if(parentParam && parentParam[key]){
} else if (parentParam && parentParam[key]) {
value = parentParam[key];
} else {
value = null;
......@@ -372,7 +372,7 @@ export class Util {
* @returns {string}
* @memberof Util
*/
public static dateFormat(date: any,fmt: string = "YYYY-mm-dd HH:MM:SS"):string {
public static dateFormat(date: any, fmt: string = "YYYY-mm-dd HH:MM:SS"): string {
let ret;
const opt: any = {
"Y+": date.getFullYear().toString(), // 年
......@@ -401,7 +401,7 @@ export class Util {
* @returns {Object}
* @memberof Util
*/
public static deepObjectMerge(FirstOBJ:any, SecondOBJ:any) {
public static deepObjectMerge(FirstOBJ: any, SecondOBJ: any) {
for (var key in SecondOBJ) {
FirstOBJ[key] = FirstOBJ[key] && FirstOBJ[key].toString() === "[object Object]" ?
this.deepObjectMerge(FirstOBJ[key], SecondOBJ[key]) : FirstOBJ[key] = SecondOBJ[key];
......@@ -419,7 +419,7 @@ export class Util {
* @returns {Promise}
* @memberof Util
*/
public static validateItem(property: string, data:any, rules:any) {
public static validateItem(property: string, data: any, rules: any) {
// 1.获取数值和规则
const value = data[property];
const rule = rules[property];
......@@ -463,4 +463,29 @@ export class Util {
else
return null;
}
/**
* 获取盒子大小（宽高模式针对面板项，按钮等项模型是控制的布局内容的宽高）
* @param mode 模式 "WIDTH" | "HEIGHT"
* @param style 样式 "FULL"(全部宽度) | "PX"（像素） | "PERCENTAGE"（百分比）
* @param value
* @returns
*/
public static getBoxSize(mode: "WIDTH" | "HEIGHT", style: string, value: number) {
if (!mode || !style) {
return {};
}
if (style === "FULL") {
return { [mode.toLowerCase()]: "100%" };
} else {
if (!value) {
return {};
}
else if (style === "PERCENTAGE") {
return { [mode.toLowerCase()]: `${value}%` };
} else {
return { [mode.toLowerCase()]: `${value}px` };
}
}
}
}
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或