按钮ui调整

@CONTROL/向导面板/CONTROL-BASE.vue.ftl

@@ -32,9 +32,9 @@
 </#if>
         </template>
         <ion-footer class="app-wizard-footer">
-            <ion-button :disabled="isDisabled('PREV')" @click="onClickPrev()" type="primary">{{$t('app.button.previousStep')}}</ion-button>
-            <ion-button :disabled="isDisabled('NEXT')" @click="onClickNext()" type="primary">{{$t('app.button.nextStep')}}</ion-button>
-            <ion-button :disabled="isDisabled('FINISH')" @click="onClickFinish()" type="primary">{{$t('app.button.finish')}}</ion-button>
+            <app-mob-button :disabled="isDisabled('PREV')" type="primary" :text="$t('app.button.previousStep')" @click="onClickPrev()" />
+            <app-mob-button :disabled="isDisabled('NEXT')"  type="primary" :text="$t('app.button.nextStep')" @click="onClickNext()" />
+            <app-mob-button :disabled="isDisabled('FINISH')" type="primary" :text="$t('app.button.finish')" @click="onClickFinish()" />
         </ion-footer>
     </div>
 </template>

@CONTROL/工具栏/CONTROL.html#ITEM_DEUIACTION.ftl

@@ -8,28 +8,27 @@
 <#if ctrl.getToolbarStyle() == 'MOBBOTTOMMENU'>
     <div :class="{'sub-item':true,'disabled':${(ctrl.getName())?lower_case}Models.${item.name}.disabled}" v-show="${(ctrl.getName())?lower_case}Models.${item.name}.visabled">
         <app-mob-button 
-        :disabled="${(ctrl.getName())?lower_case}Models.${item.name}.disabled" 
-        @click="${ctrl.name}_click({ tag: '${item.name}' }, $event),popUpGroup()" 
-        size="large"  
-        iconName="<#if item.isShowIcon() && item.getPSSysImage()??><@setIcon item /></#if>" />
+            :disabled="${(ctrl.getName())?lower_case}Models.${item.name}.disabled" 
+            @click="${ctrl.name}_click({ tag: '${item.name}' }, $event),popUpGroup()" 
+            size="large"  
+            iconName="<#if item.isShowIcon() && item.getPSSysImage()??><@setIcon item /></#if>" />
         <#if item.isShowCaption()><span class="btn-out-text">{{<#if langbase??>$t('${langbase}.${item.name}.caption')<#else>'${item.getCaption()}'</#if>}}</span></#if>
     </div>
 <#elseif ctrl.getToolbarStyle() == 'MOBWFACTIONMENU'>
-    <ion-button class="app-quick-toolbar-item" v-show="${(ctrl.getName()?lower_case)}Models.${item.name}.visabled" :disabled="${(ctrl.getName())?lower_case}Models.${item.name}.disabled" @click="${ctrl.name}_click({ tag: '${item.name}' }, $event)"  >
-    <#if item.isShowIcon()>
-        <#if item.getPSSysImage()??>
-        <ion-icon  name="<@setIcon item />"> <#-- <#if item.getPSSysImage().getImagePath() != ""> <img src="${item.getPSSysImage().getImagePath()}" /></#if>--></ion-icon>
-        </#if>
-    </#if>
-    <#if item.isShowCaption()>{{<#if langbase??>$t('${langbase}.${item.name}.caption')<#else>'${item.getCaption()}'</#if>}}</#if>
-    </ion-button>
+        <app-mob-button 
+            v-show="${(ctrl.getName()?lower_case)}Models.${item.name}.visabled" 
+            className="app-quick-toolbar-item" 
+            iconName="<#if item.isShowIcon()><#if item.getPSSysImage()??><@setIcon item /></#if></#if>"
+            text="<#if item.isShowCaption()><#if langbase??>$t('${langbase}.${item.name}.caption')<#else>'${item.getCaption()}'</#if></#if>"
+            :disabled="${(ctrl.getName())?lower_case}Models.${item.name}.disabled" 
+            @click="${ctrl.name}_click({ tag: '${item.name}' }, $event)"  />
+    
 <#else>
-    <ion-button class="app-view-toolbar-button" v-show="${(ctrl.getName())?lower_case}Models.${item.name}.visabled" :disabled="${(ctrl.getName())?lower_case}Models.${item.name}.disabled" @click="${ctrl.name}_click({ tag: '${item.name}' }, $event)" >
-    <#if item.isShowIcon()>
-        <#if item.getPSSysImage()??>
-        <ion-icon class="ibiz-button-icon" name="<@setIcon item />"> <#--<#if item.getPSSysImage().getImagePath() != ""> <img class="ibiz-button-icon" src="${item.getPSSysImage().getImagePath()}" /></#if>--></ion-icon>
-        </#if>
-    </#if>
-    <#if item.isShowCaption()>{{<#if langbase??>$t('${langbase}.${item.name}.caption')<#else>'${item.getCaption()}'</#if>}}</#if>
-    </ion-button>
+        <app-mob-button 
+            className="app-view-toolbar-button" 
+            iconName="<#if item.isShowIcon()><#if item.getPSSysImage()??><@setIcon item /></#if></#if>"
+            :text="<#if item.isShowCaption()><#if langbase??>$t('${langbase}.${item.name}.caption')<#else>'${item.getCaption()}'</#if></#if>"
+            v-show="${(ctrl.getName())?lower_case}Models.${item.name}.visabled" 
+            :disabled="${(ctrl.getName())?lower_case}Models.${item.name}.disabled" 
+            @click="${ctrl.name}_click({ tag: '${item.name}' }, $event)" />
 </#if>
\ No newline at end of file

@CONTROL/工具栏/CONTROL.html#ITEM_ITEMS.ftl

@@ -19,7 +19,12 @@
 
     <ion-list class="toolbar_group_<#if ctrl.getToolbarStyle() == 'MOBNAVRIGHTMENU'>right<#else>left</#if>">
 <#list item.getPSDEToolbarItems() as toolbarItem>
-        <ion-item @click="${ctrl.name}_click({ tag: '${toolbarItem.name}' }, $event)"><ion-button class="app-view-toolbar-button"><#if toolbarItem.isShowIcon()><#if toolbarItem.getPSSysImage()??>  <ion-icon name="<@setIcon item />"></ion-icon><#else><ion-icon name="reorder-four-outline"></ion-icon></#if></#if> {{<#if toolbarItem.isShowCaption()><#if langbase??>$t('${langbase}.${toolbarItem.name}.caption')<#else>'${toolbarItem.getCaption()}'</#if></#if>}}</ion-button> </ion-item>
+        <ion-item @click="${ctrl.name}_click({ tag: '${toolbarItem.name}' }, $event)">
+            <app-mob-button 
+                iconName="<#if toolbarItem.isShowIcon()><#if toolbarItem.getPSSysImage()??> <@setIcon item /><#else>reorder-four-outline</#if></#if>"
+                :text="<#if toolbarItem.isShowCaption()><#if langbase??>$t('${langbase}.${toolbarItem.name}.caption')<#else>'${toolbarItem.getCaption()}'</#if></#if>"
+                className="app-view-toolbar-button" /> 
+        </ion-item>
 </#list>
     </ion-list>
  </div>

@CONTROL/移动端多项数据控件/CONTROL-BASE.template.ftl

@@ -14,7 +14,11 @@
                       <ion-checkbox slot="start" :checked="item.checked" v-show="isChoose" @click.stop="checkboxSelect(item)"></ion-checkbox>
                       </#if>
                       ${ctrl.render.code}
-                      <ion-button v-if="!isTempMode && !allLoaded && needLoadMore" class="loadmore_btn"   @click="loadBottom">{{$t('app.button.loadmore')}}</ion-button>
+                      <app-mob-button 
+                        v-if="!isTempMode && !allLoaded && needLoadMore" 
+                        className="loadmore_btn" 
+                        :text="$t('app.button.loadmore')"  
+                        @click="loadBottom" />
                   </template>
                 </ion-list>
                 <ion-list class="items" ref="ionlist"  <#if ctrl.getBatchPSDEToolbar?? && ctrl.getBatchPSDEToolbar()??>@touchmove="gotouchmove" @touchstart="gotouchstart"  @touchend="gotouchend"</#if>>
@@ -67,7 +71,6 @@
                         </ion-item>
     </#if>
                     </ion-item-sliding>
-                    <#--  <ion-button v-if="!isTempMode && !allLoaded && needLoadMore" class="loadmore_btn" @click="loadBottom">{{$t('app.button.loadmore')}}</ion-button>  -->
                 </template>
             </ion-list>
             <ion-list class="items" ref="ionlist" <#if ctrl.getBatchPSDEToolbar?? && ctrl.getBatchPSDEToolbar()??>@touchmove="gotouchmove" @touchstart="gotouchstart"  @touchend="gotouchend"</#if>>
@@ -136,7 +139,6 @@
     </#if>
                       </ion-item-sliding>
                     </#if>
-                    <#--  <ion-button v-if="!isTempMode && !allLoaded && needLoadMore" class="loadmore_btn" @click="loadBottom">{{$t('app.button.loadmore')}}</ion-button>  -->
                 </template>
                 <template v-else-if="(viewType == 'DEMOBMDVIEW9')">
                 </template>

@CONTROL/表单/CONTROL-BASE.vue#DETAIL_BUTTON.ftl

@@ -5,17 +5,20 @@
     ${item.render.code}
 <#else>
 <div class="app-form-item-button" v-show="detailsModel.${item.name}.visible">
-    <ion-button v-if="detailsModel.${item.name}.visible" class="app-form-button
-    <#if item.getPSSysCss()??>${item.getPSSysCss().getCssName()}</#if>"
-    @click="${item.name}_click( $event,{ tag: '${item.name}' } )"  
-    style='<#if item.getHeight() gt 0>height: ${item.getHeight()}px;</#if>'>
-    <#if item.getPSSysImage()??>
-    <#assign sysimage = item.getPSSysImage()/>
-    <#if sysimage.getImagePath() ==  "">
-        <ion-icon name="<@setIcon item />" style="margin-right: 2px"></ion-icon>
-    <#else>
-        <img src="${sysimage.getImagePath()}" style="margin-right: 2px"/>
-    </#if>
-    </#if>${item.caption}</ion-button>
+    <app-mob-button 
+        v-if="detailsModel.${item.name}.visible" 
+        :className="app-form-button <#if item.getPSSysCss()??>${item.getPSSysCss().getCssName()}</#if>"
+        text="${item.caption}"
+        @click="${item.name}_click( $event,{ tag: '${item.name}' } )"  
+        style='<#if item.getHeight() gt 0>height: ${item.getHeight()}px;</#if>'
+        <#if item.getPSSysImage()??>
+        <#assign sysimage = item.getPSSysImage()/>
+        <#if sysimage.getImagePath() ==  "">
+        iconName="<@setIcon item />"
+        <#else>
+        imgUrl="${sysimage.getImagePath()}"
+        </#if>
+        </#if>
+    </app-mob-button>
 </div>
 </#if>
\ No newline at end of file

@CONTROL/视图布局面板/@MACRO/MOBPICUPVIEW.vue.ftl

@@ -39,14 +39,26 @@ ${P.getCtrlCode('pickupviewpanel', 'CONTROL.html').code}
       </#if>
       </#if>
       <div class="selectedCount"  <#if isTreeView>@click="select_click"</#if>>已选择：{{viewSelections.length}}<ion-icon name="chevron-up-outline"></ion-icon></div>
-      <ion-button class="pick-btn" @click="onClickOk" :disabled="viewSelections.length === 0">{{$t('app.button.confirm')}}</ion-button>
+      <app-mob-button 
+          className="pick-btn" 
+          :text="$t('app.button.confirm')"
+          :disabled="viewSelections.length === 0" 
+          @click="onClickOk"/>
     </div>
 </div>
 <#else>
 <ion-toolbar style="text-align: center;">
     <div class="mobpickupview_button">
-      <ion-button class="pick-btn" @click="onClickCancel" color="medium">{{$t('app.button.cancel')}}</ion-button>
-      <ion-button class="pick-btn" @click="onClickOk" :disabled="viewSelections.length === 0">{{$t('app.button.confirm')}}</ion-button>
+      <app-mob-button 
+          className="pick-btn" 
+          color="medium"
+          :text="$t('app.button.cancel')"
+          @click="onClickCancel"/>
+      <app-mob-button 
+          className="pick-btn" 
+          :text="$t('app.button.confirm')"
+          :disabled="viewSelections.length === 0" 
+          @click="onClickOk" />
     </div>
 </ion-toolbar>
 </#if>

@CONTROL/视图布局面板/@MACRO/MOB_MD_VIEW.vue.ftl

@@ -67,10 +67,11 @@ ${P.getCtrlCode('mdctrl', 'CONTROL.html').code}
                 <@ibizindent blank=8>
                 ${P.getCtrlCode(batchToolbar, 'CONTROL.html').code}
                 </@ibizindent>
-                <ion-button class="app-view-toolbar-button"  @click="cancelSelect" >
-                    <ion-icon name="arrow-undo-outline"></ion-icon>
-                    {{$t('app.button.cancel')}}
-                </ion-button>
+                <app-mob-button
+                    className="app-view-toolbar-button"  
+                    iconName="arrow-undo-outline"
+                    :text="$t('app.button.cancel')"
+                    @click="cancelSelect" />
             </div> 
         </div>     
     </#if>

@CONTROL/视图布局面板/@MACRO/WIZARD.vue.ftl

@@ -3,10 +3,11 @@
     <ion-header>
         <ion-toolbar class="ionoc-view-header">
             <ion-buttons slot="start">
-                <ion-button v-show="isShowBackButton" @click="closeView">
-                    <ion-icon name="chevron-back"></ion-icon>
-                    {{$t('app.button.back')}}
-                </ion-button>
+                <app-mob-button 
+                    v-show="isShowBackButton" 
+                    iconName="chevron-back"
+                    :text="$t('app.button.back')"
+                    @click="closeView" />
             </ion-buttons>
             <ion-title>{{$t(model.srfCaption)}}</ion-title>
         </ion-toolbar>

@CONTROL/视图布局面板/实体移动端工作流动态操作视图/VIEW.vue.ftl

@@ -25,8 +25,15 @@
 </#assign>
 <#assign view_footer>
 <div class="option-wf-view-btnbox">
-  <ion-button class="option-btn medium" color="medium" @click="onClickCancel">{{$t('app.button.cancel')}}</ion-button>
-  <ion-button class="option-btn success" @click="onClickOk">{{$t('app.button.confirm')}}</ion-button> 
+  <app-mob-button 
+        className="option-btn medium" 
+        color="medium"  
+        :text="$t('app.button.cancel')"
+        @click="onClickCancel" />
+  <app-mob-button 
+        className="option-btn success" 
+        :text="$t('app.button.confirm')"
+        @click="onClickOk" />
 </div>
 </#assign>
 <#ibizinclude>

@CONTROL/视图布局面板/实体移动端工作流动态编辑视图/VIEW.vue.ftl

@@ -27,13 +27,19 @@
 </#assign>
 <#assign view_footer>
     <div class="fab_container">
-        <ion-button @click="popUpGroup(true)" v-if="linkModel.length > 0"  :style="button_style"  class="app-view-toolbar-button wf_btns"><ion-icon name="chevron-up-circle-outline"></ion-icon></ion-button>
+        <app-mob-button 
+            v-if="linkModel.length > 0"  
+            iconName="chevron-up-circle-outline"
+            class="app-view-toolbar-button wf_btns" 
+            :style="button_style"  
+            @click="popUpGroup(true)"  />
         <van-popup  class="popup" v-model="showGrop" round position="bottom">
             <div class="container">
                 <div class='sub-item'  v-for="(linkItem,index) in linkModel" :key="index" >
-                <ion-button  @click="dynamic_toolbar_click(linkItem, $event)" class="wf_btn_item">
-                        {{linkItem.sequenceFlowName}}
-                </ion-button>
+                <app-mob-button  
+                    class="wf_btn_item"
+                    :text="linkItem.sequenceFlowName"
+                    @click="dynamic_toolbar_click(linkItem, $event)" />
             </div>
             </div>
         </van-popup>

@CONTROL/视图布局面板/实体移动端日历视图/VIEW.vue.ftl

@@ -10,10 +10,11 @@ ${P.getCtrlCode('calendar', 'CONTROL.html').code}
                 <@ibizindent blank=8>
                 ${P.getCtrlCode(batchToolbar, 'CONTROL.html').code}
                 </@ibizindent>
-            <ion-button class="app-view-toolbar-button"  @click="cancelSelect" >
-                <ion-icon name="arrow-undo-outline"></ion-icon>
-                {{$t('app.button.cancel')}}
-            </ion-button>
+            <app-mob-button 
+                class="app-view-toolbar-button"  
+                iconName="arrow-undo-outline"
+                :text="$t('app.button.cancel')"
+                @click="cancelSelect" />
         </div>    
     </#if>
 </#assign>

@CONTROL/视图布局面板/实体移动端选项操作视图/VIEW.vue.ftl

@@ -5,8 +5,15 @@ ${P.getCtrlCode('form', 'CONTROL.html').code}
 </#if>
 <#assign view_footer>
 <div class="option-view-btnbox">
-  <ion-button class="option-btn medium" color="medium" @click="back">{{$t('app.button.cancel')}}</ion-button>
-  <ion-button class="option-btn success" @click="save">{{$t('app.button.confirm')}}</ion-button> 
+  <app-mob-button 
+      className="option-btn medium" 
+      color="medium" 
+      :text="$t('app.button.cancel')"
+      @click="back" />
+  <app-mob-button 
+      className="option-btn success" 
+      :text="$t('app.button.confirm')"
+      @click="save" />
 </div>
 </#assign>
 <#ibizinclude>

@CONTROL/面板/CONTROL-BASE.vue#ITEM_BUTTON.ftl

@@ -2,14 +2,18 @@
 ../../@NAVPARAMS/FUNC/PUBLIC.vue.ftl
 </#ibizinclude>
 <#assign selfContent>
-<ion-button  @click="${item.name}_click($event)" <#if item.getHeight() gt 0> style="height: ${item.getHeight()?c}px;"</#if>>
+<app-mob-button  
+    <#if item.getHeight() gt 0> style="height: ${item.getHeight()?c}px;"</#if>
     <#if item.getPSSysImage()??>
     <#assign image = item.getPSSysImage()>
-    <ion-icon name="<@setIcon item />"></ion-icon>
+    iconName = "<@setIcon item />"
     </#if>
     <#if item.isShowCaption()>
-    <#if item.getLabelPSSysCss()??> class="${item.getLabelPSSysCss().getCssName()}"</#if><#if item.getLabelPSSysCss()??> style="${item.getLabelPSSysCss().getRawCssStyle()}"</#if>${item.getCaption()}</#if>
-</ion-button>
+    <#if item.getLabelPSSysCss()??>className="${item.getLabelPSSysCss().getCssName()}"</#if>
+    <#if item.getLabelPSSysCss()??> style="${item.getLabelPSSysCss().getRawCssStyle()}"</#if>
+    text="${item.getCaption()}"
+    </#if>
+    @click="${item.name}_click($event)" />
 </#assign>
 <#ibizinclude>
 ./@MACRO/PLAYOUT.vue.ftl