调整数据视图排序工具栏

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

@@ -15,23 +15,13 @@
     </#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>
-        </div>
+    <app-sort-bar
+        :sortModel="sortModel"
+        :sortField="sortField"
+        :sortDir="sortDir"
+        entityName="${appde.getCodeName()?lower_case}"
+        @clickSort="(val) => {sortClick(val);}">
+    </app-sort-bar>
   </#if>
         <row class="data-view-container" v-if="items.length > 0" :gutter="20" type="flex" justify="start" style="margin:0px;">
         <#if ctrl.isEnableGroup?? && !ctrl.isEnableGroup()>
@@ -532,6 +522,24 @@ import CodeListService from "@/codelist/codelist-service";
      */    
     public sortField: string = '<#if ctrl.getMinorSortPSDEF()??>${ctrl.getMinorSortPSDEF().getCodeName()?lower_case}</#if>';
 
+<#if hasSortBar>
+    <#if ctrl.getPSDEDataViewDataItems?? && ctrl.getPSDEDataViewDataItems()??>
+    /**
+     * 排序模型数据集
+     *
+     * @type {string}
+     * @memberof ${srfclassname('${ctrl.codeName}')}Base
+     */  
+    public sortModel: any[] = [
+        <#list ctrl.getPSDEDataViewDataItems() as dataItem>
+            <#if dataItem.getPSAppDEField?? && dataItem.getPSDEField()?? && !dataItem.getPSAppDEField().isKeyDEField()>
+        '${dataItem.getPSDEField().getCodeName()?lower_case}'<#if dataItem_has_next>,</#if>
+            </#if>
+        </#list>
+    ]
+    </#if>
+</#if>
+
     /**
      * 应用状态事件
      *