update

@CONTROL/数据视图/CONTROL-BASE.vue#KANBAN.ftl

 <template>
     <div class="app-data-view">
-<#if ctrl.render??><#t>
+<#if ctrl.render??>
         ${ctrl.render.code}
-<#else><#t>
-  <#assign hasSortBar = false />
-  <#if ctrl.getPSDEDataViewDataItems?? && ctrl.getPSDEDataViewDataItems()??>
-    <#list ctrl.getPSDEDataViewDataItems() as dataItem>
-      <#if dataItem.getPSAppDEField?? && dataItem.getPSAppDEField()?? && !dataItem.getPSAppDEField().isKeyField()>
-        <#assign hasSortBar = true />
-      </#if>
-    </#list>
-  </#if>
-  <#if hasSortBar>
-        <div class="bar-container">
-          <row class="page-sort-bar" :gutter="10" type="flex" justify="start" style="margin:0px;" >
-    <#if ctrl.getPSDEDataViewDataItems?? && ctrl.getPSDEDataViewDataItems()??>
-      <#list ctrl.getPSDEDataViewDataItems() as dataItem>
-        <#if dataItem.getPSAppDEField?? && dataItem.getPSAppDEField()?? && !dataItem.getPSAppDEField().isKeyField()>
-            <i-col :class="getsortClass('${dataItem.getPSDEField().getCodeName()?lower_case}')" @click.native="sortClick('${dataItem.getPSDEField().getCodeName()?lower_case}')">
-              <span class="sort-field-text">{{$t('entities.${appde.getCodeName()?lower_case}.fields.${dataItem.getPSDEField().getCodeName()?lower_case}')}}</span>
-              <span class="caret-wrapper">
-                <Icon type="md-arrow-dropup" />
-                <Icon type="md-arrow-dropdown" />
-              </span>
-            </i-col>
-        </#if>
-      </#list>
-    </#if>
-          </row>
+<#else>
+        <template v-for="(group, index) of groups">
+            <draggable :key="group + index" :list="getGroupItems(group)">
+                <div slot="header" class="dataview-group-header">
+                    {{ getGroupText(group) }}
                 </div>
-  </#if>
-        <row class="data-view-container" v-if="items.length > 0" :gutter="20" type="flex" justify="start" style="margin:0px;">
-            <a v-for="(item,index) in items" :key="index" :href = "item.starturl">
-                <i-col <#if ctrl.getCardColLG() gt 0> :lg="${ctrl.getCardColLG()?c}"</#if><#if ctrl.getCardColMD() gt 0> :md="${ctrl.getCardColMD()?c}"</#if><#if ctrl.getCardColSM() gt 0> :sm="${ctrl.getCardColSM()?c}"</#if><#if ctrl.getCardColXS() gt 0> :xs="${ctrl.getCardColXS()?c}"</#if> style="<#if ctrl.getCardHeight() gt 0>height: ${ctrl.getCardHeight()?c}<#else>min-height: 170</#if>px;<#if ctrl.getCardWidth() gt 0> width: ${ctrl.getCardWidth()?c}px;</#if>margin-bottom: 10px;">
-                    <el-card shadow="always" :class="[ item.isselected === true ? 'isselected' : false, 'single-card-data' ]" @click.native="handleClick(item)" @dblclick.native="handleDblClick(item)">
-                        <#if ctrl.getItemPSLayoutPanel()??>
-                        <#assign panel = ctrl.getItemPSLayoutPanel()>
-                        <layout_${panel.getName()} name='${panel.name}' :data="item"></layout_${panel.getName()}>
-                        <#elseif ctrl.itemRender??>
-                        ${ctrl.itemRender.code}
-                        <#else>
-                        <img v-if="item.srficonpath" :src="item.srficonpath" class="single-card-img" />
-                        <img v-else src="/assets/img/noimage.png" class="single-card-img" />
-                        <div class="single-card-default">
-                            <Tooltip :content="item.srfmajortext">
-                              {{item.srfmajortext}}
-                            </Tooltip>
+                <div v-for="(item, i) in getGroupItems(group)" :key="i" class="dataview-group-item">
+                    {{ item.srfmajortext }}
                 </div>
-                        </#if>
-                    </el-card>
-                </i-col>
-            </a>
-        </row>
-        <div v-else class="app-data-empty">暂无数据</div>
+            </draggable>
+        </template>
 </#if>
   </div>
 </template>
+<#assign import_block>
+import draggable from "vuedraggable";
+</#assign>
+<#assign component_block>
+draggable,
+</#assign>
 
 <#ibizinclude>
 ../@MACRO/CONTROL/CONTROL_HEADER-BASE.vue.ftl
@@ -207,6 +173,42 @@
      */    
     public sortField: string = '<#if ctrl.getMinorSortPSDEF()??>${ctrl.getMinorSortPSDEF().getCodeName()?lower_case}</#if>';
 
+    /**
+     * 是否分组
+     *
+     * @type {string}
+     * @memberof ${srfclassname('${ctrl.codeName}')}
+     */   
+    public isGroup: boolean = true;
+    /**
+     * 分组集合
+     *
+     * @type {string}
+     * @memberof ${srfclassname('${ctrl.codeName}')}
+     */ 
+    public groups: any[] = [];
+    /**
+     * 分组属性名称
+     *
+     * @type {string}
+     * @memberof ${srfclassname('${ctrl.codeName}')}
+     */ 
+    public groupField: string = '<#if ctrl.getGroupPSDEField()??>${ctrl.getGroupPSDEField().getCodeName()?lower_case}</#if>';
+    /**
+     * 分组模式
+     *
+     * @type {string}
+     * @memberof ${srfclassname('${ctrl.codeName}')}
+     */ 
+    public groupMode: string = '${ctrl.getGroupMode()}'
+    /**
+     * 分组模式
+     *
+     * @type {string}
+     * @memberof ${srfclassname('${ctrl.codeName}')}
+     */ 
+    public groupCodelist: string = '<#if ctrl.getGroupPSCodeList()??>${ctrl.getGroupPSCodeList().getCodeName()?lower_case}</#if>'
+
     /**
      * 排序点击事件
      * @param {string} field 属性名
@@ -400,6 +402,7 @@
                 }
             }
             this.isAddBehind = false;
+            this.setGroups();
             this.$emit('load', this.items);
             if(this.isSelectFirstDefault){
                 this.handleClick(this.items[0]);
@@ -513,6 +516,55 @@
         return removeData;
     }
 
+    /**
+     * 设置分组集合
+     *
+     * @param {}
+     * @memberof ${srfclassname('${ctrl.codeName}')}
+     */
+    public setGroups() {
+        if(!this.isGroup || !this.groupField || Object.is(this.groupMode, 'NONE')) {
+            return;
+        }
+        if(Object.is(this.groupMode, 'AUTO')) {
+            this.groups = [];
+            this.items.forEach(item => {
+                if(this.groups.indexOf(item[this.groupField]) < 0) {
+                    this.groups.push(item[this.groupField]);
+                }
+            });
+        }
+    }
+
+    /**
+     * 设置分组集合
+     *
+     * @param {string} name
+     * @memberof ${srfclassname('${ctrl.codeName}')}
+     */
+    public getGroupItems(name: string) {
+        let datas: any = [];
+        this.items.forEach(item => {
+            if(Object.is(item[this.groupField], name)) {
+                datas.push(item);
+            }
+        })
+        return datas;
+    }
+
+    /**
+     * 设置分组集合
+     *
+     * @param {string} name
+     * @memberof ${srfclassname('${ctrl.codeName}')}
+     */
+    public getGroupText(name: string) {
+        if(Object.is(this.groupMode, 'CODELIST')) {
+
+        }
+        return name;
+    }
+
     /**
      * 选择数据
      * @memberof ${srfclassname('${ctrl.codeName}')}