chitanda 发布系统代码，表单分组支持STYLE4模式

app_CRM/src/components/app-form-group/app-form-group.vue

 <template>
     <div :class="classes">
-        <template v-if="uiStyle=='STYLE2'">
+        <template v-if="uiStyle=='STYLE4'">
+            <app-form-group4
+                :caption="caption"
+                :uiStyle="uiStyle"
+                :layoutType="layoutType"
+                :isShowCaption="isShowCaption"
+                :isInfoGroupMode="isInfoGroupMode"
+                :uiActionGroup="uiActionGroup"
+                :titleBarCloseMode="titleBarCloseMode">
+                   <slot></slot>
+            </app-form-group4>
+        </template>
+        <template v-else-if="uiStyle=='STYLE2'">
             <app-form-group2
                 :caption="caption"
                 :uiStyle="uiStyle"
                 :layoutType="layoutType"
                 :isShowCaption="isShowCaption"
                 :uiActionGroup="uiActionGroup"
+                :isInfoGroupMode="isInfoGroupMode"
                 :titleBarCloseMode="titleBarCloseMode">
                    <slot></slot>
                 </app-form-group2>
@@ -121,7 +134,7 @@ export default class AppFormGroup extends Vue {
      * @type {string}
      * @memberof AppFormGroup
      */
-    @Prop() public uiStyle?: string;
+    @Prop({ default: 'DEFAULT' }) public uiStyle!: string;
 
     /**
      * 布局模式
@@ -202,7 +215,8 @@ export default class AppFormGroup extends Vue {
             'app-form-group',
             this.isShowCaption && this.collapseContant ? 'app-group-collapse-contant' : '',
             this.isInfoGroupMode ? 'app-info-group-mode' : '',
-            Object.is(this.layoutType, 'FLEX') ? 'app-group-flex': ''
+            Object.is(this.layoutType, 'FLEX') ? 'app-group-flex': '',
+            this.uiStyle.toLowerCase()
         ];
     }
 

app_CRM/src/components/app-form-group4/app-form-group4.less

+.app-form-group.app-info-group-mode.style4 {
+    height: 100%;
+
+    .form-group-container-style4 {
+        height: 100%;
+
+        .form-group-content {
+            height: calc(100% - 24px);
+            overflow: hidden;
+        }
+    
+        .form-group-button.show-more {
+            height: 24px;
+            padding-left: 16px;
+        }
+    }
+}
\ No newline at end of file

app_CRM/src/components/app-form-group4/app-form-group4.tsx

+import { Vue, Component, Prop, } from 'vue-property-decorator';
+import './app-form-group4.less';
+
+/**
+ * 表单分组模式4
+ *
+ * @export
+ * @class AppFormGroup4
+ * @extends {Vue}
+ */
+@Component({})
+export default class AppFormGroup4 extends Vue {
+
+    /**
+     * 标题
+     *
+     * @type {string}
+     * @memberof AppFormGroup4
+     */
+    @Prop() public caption?: string;
+
+    /**
+     * 内置界面样式
+     * 
+     * @type {string}
+     * @memberof AppFormGroup4
+     */
+    @Prop() public uiStyle?: string;
+
+    /**
+     * 布局模式
+     *
+     * @type {string}
+     * @memberof AppFormGroup4
+     */
+    @Prop() public layoutType?: string;
+
+    /**
+     * 是否显示标题
+     *
+     * @type {boolean}
+     * @memberof AppFormGroup4
+     */
+    @Prop({ default: true }) public isShowCaption!: boolean;
+
+    /**
+     * 信息面板模式
+     *
+     * @type {boolean}
+     * @memberof AppFormGroup4
+     */
+    @Prop({ default: false }) public isInfoGroupMode!: boolean;
+
+    /**
+     * 界面行为组
+     *
+     * @type {*}
+     * @memberof AppFormGroup4
+     */
+    @Prop() public uiActionGroup?: any;
+
+    /**
+     * 标题栏关闭模式
+     * 0: 不支持关闭
+     * 1: 默认打开
+     * 2： 默认关闭
+     *
+     * @type {(number | 0 | 1 | 2)} 
+     * @memberof AppFormGroup4
+     */
+    @Prop({ default: 0 }) public titleBarCloseMode!: number | 0 | 1 | 2;
+
+    /**
+     * 是否为第一次展开
+     *
+     * @protected
+     * @type {boolean}
+     * @memberof AppFormGroup4
+     */
+    protected isFirstShow: boolean = true;
+
+    /**
+     * 是否显示更多信息
+     *
+     * @protected
+     * @type {boolean}
+     * @memberof AppFormGroup4
+     */
+    protected isShowMore: boolean = false;
+
+    /**
+     * 改变显示状态
+     *
+     * @protected
+     * @memberof AppFormGroup4
+     */
+    protected changeShow(): void {
+        this.isFirstShow = false;
+        this.isShowMore = !this.isShowMore;
+    }
+
+    /**
+     * 绘制内容
+     *
+     * @returns {*}
+     * @memberof AppFormGroup4
+     */
+    public render(): any {
+        return <div class="form-group-container-style4">
+            {!this.isFirstShow ? <div v-show={this.isShowMore} class="form-group-content">
+                {this.$slots.default}
+            </div> : null}
+            <div class="form-group-button show-more">
+                <i-button size="small" on-click={() => this.changeShow()}>{this.isShowMore ? '隐藏' : '显示'}更多信息</i-button>
+            </div>
+        </div>;
+    }
+}
\ No newline at end of file

app_CRM/src/styles/vue-transition.less

@@ -8,6 +8,16 @@
 .width-transition-leave-to {
     width: 0 !important;
 }
+// 高度变更动画样式
+.height-transition-enter-active,
+.height-transition-leave-active {
+    transition: height .3s ease-in-out !important;
+}
+
+.height-transition-enter,
+.height-transition-leave-to {
+    height: 0 !important;
+}
 // 显示隐藏动画样式
 .opacity-transition-enter-active,
 .opacity-transition-leave-active {

app_CRM/src/user-default-register.ts

@@ -8,5 +8,6 @@ export const UserDefaultComponent = {
         Vue.use(StudioCore);
         Vue.use(IBizStudioComponentsVue);
         v.component('app-vue-pivottable', () => import('./components/app-vue-pivottable/app-vue-pivottable.vue'));
+        v.component('app-form-group4', () => import('./components/app-form-group4/app-form-group4'));
     }
 };
\ No newline at end of file