列表分组

@CONTROL/列表/CONTROL-BASE.vue.ftl

@@ -3,7 +3,7 @@
         <div v-if="items.length > 0">
 <#if ctrl.render??>
             ${ctrl.render.code}
-<#else>                 
+<#elseif ctrl.isEnableGroup?? && ctrl.isEnableGroup() === false>                 
             <div v-for = "item in items" :key="item.srfkey"  :class="['app-list-item', {'isSelect': item.isselected === true ? true : false}]" @click="handleClick(item)"  @dblclick="handleDblClick(item)">
   <#if ctrl.getItemPSLayoutPanel()??>
     <#assign panel = ctrl.getItemPSLayoutPanel()>
@@ -16,6 +16,28 @@
                 {{item.srfmajortext}}
   </#if>
             </div>
+<#else ctrl.isEnableGroup?? && ctrl.isEnableGroup() === true>
+            <el-collapse>
+                <el-collapse-item v-for="(group,index) in items" :key="index" :title="group.group" >
+                    <div v-if="group.children.length > 0">
+                        <div v-for="item in group.children" :key="item.srfkey"  :class="['app-list-item', {'isSelect': item.isselected === true ? true : false}]" @click="handleClick(item)"  @dblclick="handleDblClick(item)">
+                        <#if ctrl.getItemPSLayoutPanel()??>
+                            <#assign panel = ctrl.getItemPSLayoutPanel()>
+                                <@ibizindent blank=16>
+                                ${P.getCtrlCode(panel, 'CONTROL.html').code}
+                                </@ibizindent>
+                        <#elseif ctrl.itemRender??>
+                                ${ctrl.itemRender.code}
+                        <#else>
+                                {{item.srfmajortext}}
+                        </#if>
+                        </div>
+                    </div>
+                    <div v-else>
+                        {{ $t('app.commonWords.noData') }}
+                    </div>
+                </el-collapse-item>
+            </el-collapse>
 </#if>
             <template v-if="isScorll">
             <div v-if="totalRecord>items.length" class="loadmore">{{ this.$t('app.commonWords.loadmore') }}</div>
@@ -28,6 +50,11 @@
         <el-backtop target=".content-container .app-list"></el-backtop>
     </div>
 </template>
+<#if ctrl.getGroupMode?? && ctrl.getGroupMode() == 'CODELIST'>
+<#assign import_block>
+import CodeListService from "@service/app/codelist-service";
+</#assign>
+</#if>
 <#ibizinclude>
 ../@MACRO/CONTROL/CONTROL_HEADER-BASE.vue.ftl
 </#ibizinclude>
@@ -131,6 +158,121 @@
      */
     public thisRef: any = this;
 
+<#if ctrl.isEnableGroup?? && ctrl.isEnableGroup() === true>
+    /**
+     * 分组属性
+     * 
+     * @type {string}
+     * @memberof ${srfclassname('${ctrl.codeName}')}Base
+     */
+    public groupProperty: string = "<#if ctrl.getGroupPSDEField?? && ctrl.getGroupPSDEField()??>${ctrl.getGroupPSDEField().getCodeName()?lower_case}</#if>";
+</#if>
+
+<#if ctrl.getGroupMode?? && ctrl.getGroupMode() == 'CODELIST'>
+    /**
+     * 代码表服务对象
+     *
+     * @type {CodeListService}
+     * @memberof ${srfclassname('${ctrl.codeName}')}Base
+     */  
+    public codeListService:CodeListService = new CodeListService({ $store: this.$store });
+
+    /**
+     * 分组代码表标识
+     * 
+     * @type {string}
+     * @memberof ${srfclassname('${ctrl.codeName}')}Base
+     */
+    public tag: string = "<#if ctrl.getGroupPSCodeList?? && ctrl.getGroupPSCodeList()??>${ctrl.getGroupPSCodeList().getCodeName()}</#if>";
+
+    /**
+     * 分组代码表类型
+     * 
+     * @type {string}
+     * @memberof ${srfclassname('${ctrl.codeName}')}Base
+     */
+    public codelistType: string = "<#if ctrl.getGroupPSCodeList?? && ctrl.getGroupPSCodeList()??>${ctrl.getGroupPSCodeList().getCodeListType()}</#if>";
+
+    /**
+     * 根据分组代码表绘制分组列表
+     * 
+     * @memberof ${srfclassname('${ctrl.codeName}')}Base
+     */
+    public async drawCodelistGroup(){
+        let groups: Array<any> = [];
+        let groupTree:Array<any> = [];
+        let data:Array<any> = [...this.items];
+        // 动态代码表
+        if (Object.is(this.codelistType, "DYNAMIC")) {
+            groups = await this.codeListService.getItems(this.tag);
+        // 静态代码表
+        } else if(Object.is(this.codelistType, "STATIC")){
+            groups = await this.$store.getters.getCodeListItems(this.tag);
+        }
+        groups.forEach((group: any,i: number)=>{
+            let children:Array<any> = [];
+            data.forEach((item: any,j: number)=>{
+                if(Object.is(group,item[this.groupProperty])){
+                    children.push(item);
+                }
+            });
+            const tree: any ={
+                group: group,
+                children: children
+            }
+            groupTree.push(tree);
+        });
+        let child:Array<any> = [];
+        data.forEach((item: any)=>{
+            let i = groups.findIndex((group: any)=>Object.is(group,item[this.groupProperty]));
+            if(i < 0){
+                child.push(item);
+            }
+        })
+        const Tree: any = {
+            group: this.$t('app.commonWords.other'),
+            children: child
+        }
+        groupTree.push(Tree);
+        this.items = [...groupTree];
+    }
+</#if>
+
+<#if ctrl.getGroupMode?? && ctrl.getGroupMode() == 'AUTO'>
+    /**
+     * 绘制分组列表
+     * 
+     * @memberof ${srfclassname('${ctrl.codeName}')}Base
+     */
+    public drawGroup(){
+        let data:Array<any> = [...this.items];
+        let groups:Array<any> = [];
+        data.forEach((item: any)=>{
+            if(item.hasOwnProperty(this.groupProperty)){
+                groups.push(item[this.groupProperty]);
+            }
+        });
+        groups = [...new Set(groups)];
+        let groupItems:Array<any> = [];
+        let groupTree:Array<any> = [];
+        groups.forEach((group: any,i: number)=>{
+            let children:Array<any> = [];
+            data.forEach((item: any,j: number)=>{
+                if(Object.is(group,item[this.groupProperty])){
+                    console.log(item);
+                    children.push(item);
+                }
+            });
+            const tree: any ={
+                group: group,
+                children: children
+            }
+            groupTree.push(tree);
+        });
+        this.items = [...groupTree];
+    }
+</#if>
+
     /**
      * 当前页
      *
@@ -391,6 +533,11 @@
             if(this.isSelectFirstDefault){
                 this.handleClick(this.items[0]);
             }
+            <#if ctrl.getGroupMode?? && ctrl.getGroupMode() == 'AUTO'>
+            this.drawGroup();
+            <#elseif ctrl.getGroupMode?? && ctrl.getGroupMode() == 'CODELIST'>
+            this.drawCodelistGroup();
+            </#if>
         }, (response: any) => {
             if (response && response.status === 401) {
                 return;

APP/src/locale/lang/en-US.ts.ftl

@@ -33,7 +33,8 @@ export default {
             noData: "No data",
             startsuccess:"Start successful",
             loadmore:"Load more",
-            nomore:"No more"
+            nomore:"No more",
+            other:"other"
         },
         local:{
             new: "New",

APP/src/locale/lang/zh-CN.ts.ftl

@@ -33,7 +33,8 @@ export default {
             noData: "暂无数据",
             startsuccess:"启动成功",
             loadmore:"加载更多",
-            nomore:"没有更多了"
+            nomore:"没有更多了",
+            other:"其他"
         },
         local:{
             new: "新建",