Skip to content

iBiz-Vue-R7-Res
iBiz-Vue-R7-Res
提交 6d3ff6d3 编写于 作者: neko's avatar neko
浏览文件
操作

优化表单布局

上级 e149f635
隐藏空白字符变更
内嵌 并排
正在显示 包含 295 行增加 和 260 行删除
src/components/app-form-group/app-form-group.less
浏览文件 @ 6d3ff6d3
.app-form-group { .app-form-group {
>.ivu-card-head { >.ivu-card-head {
>p { >p {
>i { >i {
...@@ -7,9 +8,12 @@ ...@@ -7,9 +8,12 @@
} }
} }
} }
>.ivu-card-extra { >.ivu-card-extra {
.item-extract-mode { .item-extract-mode {
display: flex; display: flex;
.item { .item {
margin-left: 12px; margin-left: 12px;
} }
...@@ -26,7 +30,8 @@ ...@@ -26,7 +30,8 @@
.app-group-flex { .app-group-flex {
height: 100%; height: 100%;
overflow: auto; overflow: auto;
> .ivu-card-body {
>.ivu-card-body {
height: calc(100% - 51px); height: calc(100% - 51px);
overflow: auto; overflow: auto;
} }
......
src/components/app-form-group/app-form-group.vue
浏览文件 @ 6d3ff6d3
<template> <template>
<div class="app-form-group"> <div :class="classes">
<div v-if="uiStyle=='STYLE2'"> <template v-if="uiStyle=='STYLE2'">
<app-form-group2 <app-form-group2
:caption="caption" :caption="caption"
:uiStyle="uiStyle" :uiStyle="uiStyle"
...@@ -10,8 +10,8 @@ ...@@ -10,8 +10,8 @@
:titleBarCloseMode="titleBarCloseMode"> :titleBarCloseMode="titleBarCloseMode">
<slot></slot> <slot></slot>
</app-form-group2> </app-form-group2>
</div> </template>
<div v-else> <template v-else>
<card v-if="isShowCaption === true" :bordered="false" :dis-hover="true" :class="classes"> <card v-if="isShowCaption === true" :bordered="false" :dis-hover="true" :class="classes">
<p class='' slot='title'> <p class='' slot='title'>
<icon v-if="titleBarCloseMode !== 0" :type="collapseContant ? 'ios-arrow-dropright-circle' : 'ios-arrow-dropdown-circle'" <icon v-if="titleBarCloseMode !== 0" :type="collapseContant ? 'ios-arrow-dropright-circle' : 'ios-arrow-dropdown-circle'"
...@@ -87,17 +87,22 @@ ...@@ -87,17 +87,22 @@
</template> </template>
</a > </a >
</template> </template>
<div v-if="Object.is(layoutType, 'FLEX')"> <template v-if="Object.is(layoutType, 'FLEX')">
<slot></slot> <slot></slot>
</div> </template>
<div v-if="!Object.is(layoutType, 'FLEX')"> <template v-if="!Object.is(layoutType, 'FLEX')">
<row :gutter="10"><slot></slot></row> <row :gutter="10"><slot></slot></row>
</div> </template>
</card> </card>
<row v-if="isShowCaption === false" :class="classes"> <template v-if="isShowCaption === false">
<slot></slot> <template v-if="Object.is(layoutType, 'FLEX')">
</row> <slot></slot>
</div> </template>
<template v-if="!Object.is(layoutType, 'FLEX')">
<row :gutter="10"><slot></slot></row>
</template>
</template>
</template>
</div> </div>
</template> </template>
......
src/components/app-form-item/app-form-item.less
浏览文件 @ 6d3ff6d3
.app-form-item { .app-form-item {
// margin-bottom: 16px; height: 100%;
>.ivu-form-item-label {
text-decoration: none; >.ivu-form-item-label {
display: block; text-decoration: none;
overflow: hidden; display: block;
white-space: nowrap; overflow: hidden;
} white-space: nowrap;
>.ivu-form-item-content { }
min-height: 36px;
} >.ivu-form-item-content {
height: 100%;
min-height: 36px;
>.editor {
height: 100%;
}
}
} }
.app-form-item-label-top {
>.ivu-form-item-label { .app-form-item.label-top, .app-form-item.label-bottom {
float: none;
display: inline-block; .app-form-item-label {
padding: 0 0 10px; height: 16px;
} }
.editor {
height: calc(100% - 16px);
}
} }
.app-form-item-label-left{ .app-form-item.label-left, .app-form-item.label-right {
.app-form-item-label{
float: left; .app-form-item-label, .editor {
text-align: right; height: 100%;
padding-right: 12px;
} }
} }
.app-form-item-label-right{
.app-form-item-label{ .app-form-item.label-left {
float: right;
text-align: left; .app-form-item-label {
padding-left: 12px; float: left;
} }
} }
.app-form-item-label-top{
.app-form-item-label{ .app-form-item.label-right {
display: block;
padding-bottom: 10px; .app-form-item-label {
float: right;
} }
} }
.app-form-item-label-bottom{
.app-form-item-label{ .app-form-item.label-none {
display: block;
padding-top: 10px; .app-form-item-label {
display: none !important;
}
.editor {
height: 100%;
} }
} }
\ No newline at end of file
src/components/app-form-item/app-form-item.vue
浏览文件 @ 6d3ff6d3
<template> <template>
<div> <div class="app-form-item-wrapper">
<div v-if="this.uiStyle === 'STYLE2'"> <template v-if="this.uiStyle === 'STYLE2'">
<app-form-item2 <app-form-item2
:caption="caption" :caption="caption"
:labelStyle="labelStyle" :labelStyle="labelStyle"
:error="error" :error="error"
...@@ -14,248 +14,257 @@ ...@@ -14,248 +14,257 @@
:itemRules="itemRules"> :itemRules="itemRules">
<slot></slot> <slot></slot>
</app-form-item2> </app-form-item2>
</div> </template>
<div v-if="this.uiStyle !== 'STYLE2'"> <template v-if="this.uiStyle !== 'STYLE2'">
<form-item <form-item :prop="name" :error="error" :required="required" :rules="rules" :class="classes">
:prop="name" <div
:error="error" v-if="Object.is(this.labelPos,'BOTTOM') || Object.is(this.labelPos,'NONE') || !this.labelPos"
:required="required" class="editor"
:rules="rules" :style="slotstyle"
:class="classes"> >
<div v-if="Object.is(this.labelPos,'BOTTOM') || Object.is(this.labelPos,'NONE') || !this.labelPos" class="slot-editor" :style="slotstyle">
<slot></slot> <slot></slot>
</div> </div>
<span v-if="!Object.is(this.labelPos,'NONE') && this.isShowCaption && this.labelWidth > 0" :style="labelstyle" :class="labelclasses"> <span
{{this.isEmptyCaption ? '' : this.caption}} v-if="!Object.is(this.labelPos,'NONE') && this.isShowCaption && this.labelWidth > 0"
</span> :style="labelstyle"
<div v-if="Object.is(this.labelPos,'TOP') || Object.is(this.labelPos,'LEFT') || Object.is(this.labelPos,'RIGHT')" class="slot-editor" :style="slotstyle"> :class="labelclasses"
>
{{this.isEmptyCaption ? '' : this.caption}}</span>
<div
v-if="Object.is(this.labelPos,'TOP') || Object.is(this.labelPos,'LEFT') || Object.is(this.labelPos,'RIGHT')"
class="editor"
:style="slotstyle"
>
<slot></slot> <slot></slot>
</div> </div>
</form-item> </form-item>
</div> </template>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'; import { Vue, Component, Prop, Watch } from "vue-property-decorator";
@Component({}) @Component({})
export default class AppFormItem extends Vue { export default class AppFormItem extends Vue {
/**
* 名称
*
* @type {string}
* @memberof AppFormItem
*/
@Prop() public caption!: string;
/** /**
* 名称 * 错误信息
* *
* @type {string} * @type {string}
* @memberof AppFormItem * @memberof AppFormItem
*/ */
@Prop() public caption!: string; @Prop() public error?: string;
/**
* 错误信息
*
* @type {string}
* @memberof AppFormItem
*/
@Prop() public error?: string;
/** /**
* label样式 * label样式
* *
* @type {string} * @type {string}
* @memberof AppFormItem * @memberof AppFormItem
*/ */
@Prop() public labelStyle?: string; @Prop() public labelStyle?: string;
/** /**
* 标签位置 * 标签位置
* *
* @type {(string | 'BOTTOM' | 'LEFT' | 'NONE' | 'RIGHT' | 'TOP')} * @type {(string | 'BOTTOM' | 'LEFT' | 'NONE' | 'RIGHT' | 'TOP')}
* @memberof AppFormItem * @memberof AppFormItem
*/ */
@Prop() public labelPos?: string | 'BOTTOM' | 'LEFT' | 'NONE' | 'RIGHT' | 'TOP'; @Prop() public labelPos?:
| string
| "BOTTOM"
| "LEFT"
| "NONE"
| "RIGHT"
| "TOP";
/** /**
* 标签宽度 * 标签宽度
* *
* @type {number} * @type {number}
* @memberof AppFormItem * @memberof AppFormItem
*/ */
@Prop({}) public labelWidth!: number; @Prop({}) public labelWidth!: number;
/** /**
* 是否显示标题 * 是否显示标题
* *
* @type {boolean} * @type {boolean}
* @memberof AppFormItem * @memberof AppFormItem
*/ */
@Prop() public isShowCaption?: boolean; @Prop() public isShowCaption?: boolean;
/** /**
* 标签是否空白 * 标签是否空白
* *
* @type {boolean} * @type {boolean}
* @memberof AppFormItem * @memberof AppFormItem
*/ */
@Prop() public isEmptyCaption?: boolean; @Prop() public isEmptyCaption?: boolean;
/** /**
* 表单项名称 * 表单项名称
* *
* @type {string} * @type {string}
* @memberof AppFormItem * @memberof AppFormItem
*/ */
@Prop() public name!: string; @Prop() public name!: string;
/** /**
* 内置样式 * 内置样式
* *
* @type {string} * @type {string}
* @memberof AppFormItem * @memberof AppFormItem
*/ */
@Prop() public uiStyle?: string; @Prop() public uiStyle?: string;
/** /**
* 表单项值规则 * 表单项值规则
* *
* @type {string} * @type {string}
* @memberof AppFormItem * @memberof AppFormItem
*/ */
@Prop() public itemRules!: any; @Prop() public itemRules!: any;
/** /**
* 值规则数组 * 值规则数组
* *
* @type {any[]} * @type {any[]}
* @memberof AppFormItem * @memberof AppFormItem
*/ */
public rules: any[] = []; public rules: any[] = [];
/** /**
* 是否必填 * 是否必填
* *
* @type {boolean} * @type {boolean}
* @memberof AppFormItem * @memberof AppFormItem
*/ */
public required: boolean = false; public required: boolean = false;
/** /**
* 表单项值规则监控 * 表单项值规则监控
* *
* @param {*} newVal * @param {*} newVal
* @param {*} oldVal * @param {*} oldVal
* @memberof AppFormItem * @memberof AppFormItem
*/ */
@Watch('itemRules',{deep:true}) @Watch("itemRules", { deep: true })
onItemRulesChange(newVal: any, oldVal: any) { onItemRulesChange(newVal: any, oldVal: any) {
if (newVal) { if (newVal) {
try { try {
this.rules = []; this.rules = [];
const _rules: any[] = newVal; const _rules: any[] = newVal;
this.rules = [..._rules]; this.rules = [..._rules];
this.rules.some((rule: any) => { this.rules.some((rule: any) => {
if (rule.hasOwnProperty('required')) { if (rule.hasOwnProperty("required")) {
this.required = rule.required; this.required = rule.required;
return true; return true;
} }
return false; return false;
}); });
} catch (error) { } catch (error) {}
}
}
} }
}
/** /**
* 计算样式 * 计算样式
* *
* @readonly * @readonly
* @type {string []} * @type {string []}
* @memberof AppFormItem * @memberof AppFormItem
*/ */
get classes(): string[] { get classes(): string[] {
let posClass = ''; let posClass = "";
switch (this.labelPos) { switch (this.labelPos) {
case 'TOP': case "TOP":
posClass = 'app-form-item-label-top'; posClass = "label-top";
break; break;
case 'LEFT': case "LEFT":
posClass = 'app-form-item-label-left'; posClass = "label-left";
break; break;
case 'BOTTOM': case "BOTTOM":
posClass = 'app-form-item-label-bottom'; posClass = "label-bottom";
break; break;
case 'RIGHT': case "RIGHT":
posClass = 'app-form-item-label-right'; posClass = "label-right";
break; break;
case 'NONE': case "NONE":
posClass = 'app-form-item-label-none'; posClass = "label-none";
break; break;
}
return [
'app-form-item',
posClass
];
} }
return [ "app-form-item", posClass ];
}
/** /**
* label样式 * label样式
* *
* @readonly * @readonly
* @type {string} * @type {string}
* @memberof AppFormItem * @memberof AppFormItem
*/ */
get labelclasses():string{ get labelclasses(): string {
return this.labelStyle?this.labelStyle+' app-form-item-label':'app-form-item-label'; return this.labelStyle
} ? this.labelStyle + " app-form-item-label"
: "app-form-item-label";
}
/** /**
* label行内样式 * label行内样式
* *
* @readonly * @readonly
* @type {string} * @type {string}
* @memberof AppFormItem * @memberof AppFormItem
*/ */
get labelstyle():any{ get labelstyle(): any {
return {width:this.labelWidth+'px'}; if (Object.is(this.labelPos, 'LEFT') || Object.is(this.labelPos, 'RIGHT')) {
return { width: this.labelWidth + "px" };
} }
}
/** /**
* slot行内样式 * slot行内样式
* *
* @readonly * @readonly
* @type {string} * @type {string}
* @memberof AppFormItem * @memberof AppFormItem
*/ */
get slotstyle():any{ get slotstyle(): any {
if(Object.is(this.labelPos,'LEFT')){ if (Object.is(this.labelPos, "LEFT")) {
return {marginLeft:this.labelWidth+'px'}; return { marginLeft: this.labelWidth + "px" };
}else if(Object.is(this.labelPos,'RIGHT')){ } else if (Object.is(this.labelPos, "RIGHT")) {
return {marginRight:this.labelWidth+'px'}; return { marginRight: this.labelWidth + "px" };
}
} }
}
/** /**
* vue 生命周期 * vue 生命周期
* *
* @memberof AppFormItem * @memberof AppFormItem
*/ */
public mounted() { public mounted() {
if (this.itemRules) { if (this.itemRules) {
try { try {
const _rules: any[] = this.itemRules; const _rules: any[] = this.itemRules;
this.rules = [..._rules]; this.rules = [..._rules];
this.rules.some((rule: any) => { this.rules.some((rule: any) => {
if (rule.hasOwnProperty('required')) { if (rule.hasOwnProperty("required")) {
this.required = rule.required; this.required = rule.required;
return true; return true;
} }
return false; return false;
}); });
} catch (error) { } catch (error) {}
}
}
} }
}
} }
</script> </script>
<style lang='less'> <style lang='less'>
@import './app-form-item.less'; @import "./app-form-item.less";
</style> </style>
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或