新增看板视图部件从上往下布局

@CONTROL/看板视图/CONTROL-BASE.vue.ftl

@@ -5,7 +5,7 @@
 <#if ctrl.render??>
 ${ctrl.render.code}
 <#else>
-    <div class="app-data-view-group<#if ctrl.getPSSysCss?? && ctrl.getPSSysCss()??><#assign singleCss = ctrl.getPSSysCss()> ${singleCss.getCssName()}</#if>">
+    <div class="<#if ctrl.getGroupLayout?? && ctrl.getGroupLayout() == 'COLUMN'>app-data-view-group-column<#else>app-data-view-group-row</#if> <#if ctrl.getPSSysCss?? && ctrl.getPSSysCss()??><#assign singleCss = ctrl.getPSSysCss()> ${singleCss.getCssName()}</#if>">
             <template v-for="(group, index) of groups">
                 <#if ctrl.groupRender??>
                 ${ctrl.groupRender.code}
@@ -20,7 +20,7 @@ ${ctrl.render.code}
                         </div>
                     </div>
                 </draggable>
-                <div v-show="group.folding" :key="group + index" class="dataview-group-content dataview-group-kanban" style="<#if ctrl.getGroupWidth() gt 0>width: ${ctrl.getGroupWidth()?c}px;<#else>flex-grow: 1;</#if>">
+                <div v-show="group.folding" :key="group + index" class="dataview-group-content" style="<#if ctrl.getGroupWidth() gt 0>width: ${ctrl.getGroupWidth()?c}px;<#elseif ctrl.getGroupHeight() gt 0>height: ${ctrl.getGroupHeight()?c}px;<#else>flex-grow: 1;</#if>">
                     <div class="dataview-group-header<#if ctrl.getGroupPSSysCss()??> ${ctrl.getGroupPSSysCss().getCssName()}</#if>">
                         <div class="fold-icon" @click="onClick(group,index)">
                             <i class="el-icon-s-fold" :title="$t('app.kanban.fold')"></i>
@@ -29,8 +29,8 @@ ${ctrl.render.code}
                             {{ getGroupText(group.value) }}
                         </span>
                         <#if ctrl.getGroupPSUIActionGroup()??>
-                        <Poptip trigger="hover" content="content" placement="bottom-end" style="float: right;">
-                            <Icon type="md-more" />
+                        <Poptip trigger="hover" content="content" placement="<#if ctrl.getGroupLayout?? && ctrl.getGroupLayout() == 'COLUMN'>right-start<#else>bottom-end</#if>" style="float: right;">
+                            <Icon type="<#if ctrl.getGroupLayout?? && ctrl.getGroupLayout() == 'COLUMN'>ios-more<#else>md-more</#if>" />
                             <div slot="content" class="group-action">
                                 <#if ctrl.getGroupPSUIActionGroup().getPSUIActions()??>
                                 <#list ctrl.getGroupPSUIActionGroup().getPSUIActions() as action>
@@ -52,7 +52,7 @@ ${ctrl.render.code}
                         </Poptip>
                         </#if>
                     </div>
-                    <div v-if="items.length > 0">
+                    <div v-if="items.length > 0" class="dataview-group-data">
                         <draggable :list="group.items" group="${ctrl.name}" class="dataview-group-items" @change="onDragChange($event, group.value)">
                             <div v-for="(item, i) in group.items" :key="i" :class="{'dataview-group-item': true, 'is-select': item.isselected}" @click="handleClick(item)" @dblclick="handleDblClick(item)">
                                 <#if ctrl.getItemPSLayoutPanel()??>

@CONTROL/看板视图/CONTROL.less.ftl

-.app-data-view-group {
+
+<#if ctrl.getGroupLayout?? && ctrl.getGroupLayout() == "COLUMN">
+//从上往下
+.app-data-view-group-column{
+  width: 100%;
+  height: 100%;
+  display: flex;
+  overflow: auto;
+  flex-direction: column;
+  .dataview-group-folading-kanban{
+    border: 1px solid #ddd;
+    text-align: center;
+    border-left: 0;
+    width: 100%;
+    height: 40px;
+    background-color: #d8d8d8;
+    color: #a5a5a5;
+    .unfold-icon {
+        padding: 6px 0px 0px 6px;
+        float: left;
+        font-size: 20px;
+    }
+    .dataview-group-folding{
+      font-size: 17px;
+      padding-top: 8px;
+    }
+  }
+  .dataview-group-content {
+    border: 1px solid #ddd;
+    flex-shrink: 0;
+    width: 100%;
+    display: flex;
+    .dataview-group-header {
+      width: 36px;
+      position: relative;
+      border-right: 1px solid #ddd;
+      padding: 8px 0px;
+      .fold-icon{
+          font-size: 20px;
+          padding: 0px 6px;
+          color:#a5a5a5;
+          position: absolute;
+      }
+      .fold-text {
+        writing-mode: tb;
+        padding: 30px 6px 0px 6px;
+      }
+      .ivu-poptip{
+        position: absolute;
+        bottom: 0px;
+        left: 0px;
+        .ivu-poptip-rel{
+          padding-left: 8px;
+        }
+      }
+      .group-action {
+        .group-action-item:nth-child(1) + .group-action-item {
+          margin-top: 5px;
+        }
+      }
+    }
+    .dataview-group-data{
+      width: 100%;
+      .dataview-group-items {
+        display: flex;
+        flex-grow: 1;
+        height: 100%;
+        overflow: auto;
+        .dataview-group-item {
+          margin: 8px 0px 8px 8px;
+          border: 1px solid #ddd;
+          padding: 8px;
+          overflow: hidden;
+        }
+        .dataview-group-item.is-select {
+          border-color: #108cee;
+        }
+      }
+    }
+    .app-data-empty{
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+  .dataview-group-content:nth-child(1) {
+    border-left: 1px solid #ddd;
+  }
+  .quick-action {
+    flex-shrink: 0;
+    display: flex;
+    .quick-action-item {
+      width: 37px;
+      height: 37px;
+      text-align: center;
+      line-height: 37px;
+      border: 1px solid #ddd;
+      border-top-width: 0;
+    }
+    .quick-action-item:nth-child(1) {
+      border-top-width: 1px;
+    }
+  }
+
+  .dragitems {
+    z-index: -1 !important;
+    margin: 0px !important;
+    border: none !important;
+    padding: 0px !important;
+    height: 0px !important;
+    width: 10px !important;
+    color: #fff;
+    overflow: hidden;
+    .app-layoutpanel {
+      .app-layoutpanel-container {
+        padding: 0px !important;
+      }
+    }
+  }
+}
+<#else>
+//从左往右(默认)
+.app-data-view-group-row {
   height: 100%;
   display: flex;
   overflow: auto;
@@ -103,6 +227,7 @@
     }
   }
 }
+</#if>
 <#ibizinclude>
 ../@MACRO/CSS/DEFAULT.less.ftl
 </#ibizinclude>
\ No newline at end of file