子应用-组件手册

需求概述

U9条码移动端组件样式设计遵循用友公司UI/UE交互设计规范，功能理念遵循简单、易用、数据驱动方式。所有组件尽量将业务无关功能封装透明，统一样式交互。

目前组件包含了大部分应用所涉及的交互功能。包括扫码（红外，摄像头，手工录入），布局，参照（存储地点，库位，工序），基础组件等。如果有其他组件或功能需求，可联系U9条码开发人员或通过SPS支持网获取帮助。

组件设计

• im-val属性值均为单向的字符串传递
• ng-model属性值代表双向绑定
• handle属性值代表”&”函数类型传递，可理解为eval()。传递的函数总是带括号的执行态，可传递当前作用域的变量作为参数。常见使用方法： handle=”qtyChange()” 或 handle=”qtyChange(line.DocLine)”

• handle-change属性代表单向绑定”<”的函数变量，且函数变量为(value,context)=>{} 类型的委托，即只带有两个参数的回调函数。常见使用方法：handle-change=”onChange” handle-change-context=”data” ，注意传值时不带括号。

  设计规范

• im-card中label-width：2文字=30pt 3文字=40pt 4文字=50pt 6文字=70pt

• im-blue-tag背景颜色 | 常用场景 | 背景颜色 | 字体颜色 | 效果 | | —- | —- | —- | —- | | 料码 | #1777FF | #FFFFFF | 料码 | | 调出库位 | #00E255 | #FFFFFF | 调出库位 | | 调入库位 | #09AD05 | #FFFFFF | 调入库位 |

优秀实现

• 货位整理应用 MTransBetweenBin （该应用大量实践了各种设计规范与组件使用，是优秀的实现案例）
• 调拨验货 MTransRcvIn (该应用实践了多页面之间跳转和数据共享，支持在首页，明细页同时扫码，并处理了连续跳转后页面返回问题)

可用指令

• 触摸开始 ng-touchstart
• 触摸停止 ng-touchend

ng-touchstart

触摸开始事件，可放置在任意组件或标签元素上，使用方法类似ng-click

ng-touchend

触摸停止离开事件，可放置在任意组件或标签元素上，使用方法类似ng-click

示例代码

<im-content ng-touchend="touchend()" />

布局组件

• 页面头
• 页面主内容
• 页面尾
• 列表
• 卡片
• 内部卡片（已废弃，请使用im-card的card-type属性）

  im-header,im-content,im-bottom

  其中 header,content,bottom 主要负责将页面分成三块，首尾固定，以及一些通用的padding。通过flex布局，content内容自适应页面剩余高度。

  im-list

  im-list内部可以自适应滚动，但是im-list嵌套会有问题，请避免im-list嵌套。通常用im-list包裹im-card等控件

im-card

该控件通常和*-row类控件搭配使用，可以呈现如下效果。

im-card件属性说明

im-card可用具名插槽

• 如果tag-val和title属性无法满足时可使用header插槽进行自定义card头。具名插槽甚至可以和tag-val，title属性同时使用。

示例代码：

<im-list>
   <im-card  
        ng-repeat="info in homeData.Lines track by $index"        
        action-type="expand" 
        title="{{info.barcode}}"
        tag-val="条码"
        is-open="true"
        label-width="55pt">
            <im-common-row label="料品：">{{info.ItemName}}<im-blue-label im-val="{{info.Spec}}"></im-blue-label></im-common-row>  
          <im-qty-row  label="调出数量：" can-edit="false"  ng-model="info.OutQty" im-val="info.OutQty" uom="{{info.UOMName}}"></im-qty-row>  
            <im-qty-row label="实拣数量：" can-edit="false"  ng-model="info.SumQty" im-val="info.SumQty" uom="{{info.UOMName}}"></im-qty-row>  
    </im-card>
</im-list>

im-inner-card（已废弃）。

已废弃
请改用im-card组件中的card-type属性进行区分

im-inner-card基本和im-card逻辑保持一致，唯一是不支持折叠功能。一般内嵌于im-card控件，并去掉了im-card内部元素的默认padding，保持和父card同样的缩进级别。

该控件通常和*-row类控件搭配使用，下图中存储地点和打印机类型是im-card的row，而inner-title和数量是im-inner-card的内部元素。可见他们之间的缩进级别是相同的。

呈现效果如下：

im-inner-card件属性说明

im-inner-card-header可用具名插槽

• 如果tag-val和title属性无法满足时可使用header插槽进行自定义card头。具名插槽甚至可以和tag-val，title属性同时使用。

示例代码：

<im-list>
  <im-card title="title" action-type="expand" max-height="400pt" label-width="60pt">    
    <im-inner-card label-width="60pt" title="inner-title" action-type="delete">  
      <im-inner-card-header></im-inner-card-header>
      <im-qty-row label="数量" can-edit="false"  ng-model="info.SumQty" im-val="info.SumQty" uom="{{info.UOMName}}"></im-qty-row>  
    </im-inner-card >   
    </im-card>
</im-list>

卡片行，Card-Row组件

• 通用行
• 数量行
• 开关行
• 参照行
• 富集行

其中im-rich-row不带有label属性，因此不受card组件的label-width控制。

im-common-row

最常用的行组件，自带有label列。值内容通过插槽传入即可。

呈现效果如下：

im-common-row控件属性值说明

示例代码：

 <im-card label-width="55pt">
   <im-common-row label="料品：">{{info.ItemName}}<im-blue-label im-val="{{info.Spec}}"></im-blue-label></im-common-row>  
 </im-card>

im-input-row

用于显示带普通文本框控件行，可切换是否可编辑。

呈现效果如下：

im-input-row控件属性说明

示例代码：

<im-card label-width="40pt">  
    <im-input-row label="批号" can-edit="!bar.BoxCode || bar.BarCode==BarCode"  ng-model="bar.lot"  handle="onChanged(index)"></im-input-row>  
</im-card>

im-qty-row

用于显示带有单位的数量控件，可切换是否可编辑。

呈现效果如下：

im-qty-row控件属性说明

示例代码：

<im-card label-width="40pt">  
    <im-qty-row label="数量：" can-edit="!bar.BoxCode || bar.BarCode==BarCode"  ng-model="bar.Qty"  handle="QtyChanged(index)" uom="{{info.UOMName}}"></im-qty-row>  
</im-card>

im-pair-qty-row

可显示两个数量，并用分隔符分隔，行位可显示单位。

呈现效果如下：

im-pair-qty-row控件属性说明

示例代码：

<im-card label-width="40pt">  
   <im-pair-qty-row label="数量" 
       left-qty="lineInfo.scanItemQty" right-qty="lineInfo.IssueQty" uom="{{lineInfo.IssueUOM}}"></im-pair-qty-row>              
</im-card>

im-ref-row

参照样式控件，可点击，右侧带有箭头

im-ref-row控件通常由参照组件封装使用，封装成不同完整参照组件，如存储地点参照。

显示效果如下：

im-ref-row控件属性说明

示例代码：

<im-card label-width="40pt">  
    <im-re-row label="数量：" im-val="{{wh.Code+'/'+wh.Name}}"  handle="onClick(index)" "></im-ref-row>  
</im-card>

im-rich-row

富集内容控件，不带label列。该容器强制flex布局，内部元素需使用flex:1自动布局。

目前有搭配 im-large-info控件使用。

呈现效果如下：

im-rich-row控件属性说明

代码示例：

<im-card>
  <im-rich-row>
    <im-large-info im-val="{{homeData.Lines[index].OutQty}}" label="调出数量"></im-large-info>
    <im-large-info im-val="{{homeData.Lines[index].SumQty}}" label="实拣数量"></im-large-info>
  </im-rich-row> 
</im-card>

im-swtich-row

带有开关的行，封装了im-switch 控件

呈现效果如下：

im-switch-row控件属性说明

代码示例：

<im-card>
  <im-switch-row label="开关" ng-model="data.isChecked" handle="toggleChange()">
  </im-switch-row>
</im-card>

im-date-row

日期控件，支持日期和时间

呈现效果如下：

im-switch-row控件属性说明

代码示例：

<im-card>
  <im-date-row label="日期" ng-model="data.isChecked" handle="toggleChange()">
  </im-date-row>
</im-card>

参照控件

• 基础参照控件
• 存储地点参照
• 库位参照
• 打印设备选择

参照说明：通过im-common-ref实现的参照控件，均支持handle-change和handle-change-context属性。handle-change-context属性目的是在触发change事件时，可以将参照原本上下文信息返回给父scope事件。
例如：handle-change=”selectBin” handle-change-context=”lineInfo”,则触发handle-change时，实际调用是selectBin(newValue,lineInfo);

im-common-ref

基础参照控件，包含Table行控件，弹框页面等相关交互。支持单选，多选，模糊查询，下拉加载分页等。

控件说明：
1、get-data-by-once是一次性获取所有数据，不涉及分页。Search查询也是控件内部实现，查询过滤字段通过filter-fields传入。
2、get-data-by-page支持分页查询，Search查询也是通过接口实现，控件不处理。可根据需要选择两种模式。
3、refresh-index是用来优化性能，减少接口调用的。只有当refresh-index改变时，才会调用get-data-by-*接口刷新全部数据，否则保留之前已加载的数据。（例如，当库位参照的whID发生变化时，应该改变refresh-index来）

呈现效果如下：

im-common-ref控件属性说明

im-common-ref可用具名插槽

• 可在参照im-val数据前显示插入前缀显示内容。如上述式样图中，调出存储地点中的【V】。

示例代码：

<im-common-ref label="调入单单据类型"
               im-val="{{homeData.inDocType.Code?homeData.inDocType.Code+'/'+homeData.inDocType.Name:''}}"
               title="调入单单据类型"
               key-field="ID"
               get-data-by-once="getTransInDocTypes"
               filter-fields="['Code','Name']"
               im-selected-data="homeData.inDocType"
               handle-change="selectInDocType"
               row-transclude="{{transIndocTypeRowTransclude}}"
               >
  <im-common-ref-prefix><im-blue-tag ng-if="vm.showPrefix"  
       im-val="V" background-color="#60a5fa"></im-blue-tag></im-common-ref-prefix>
</im-common-ref>

$scope.getTransInDocTypes = function () {
  var orgCode = BarCodeServices.getOrgCode();
  var param = '';
  if (type == '0') {
    param = 'TransInDocType&';
    $scope.homeData.selectDoctype = $scope.homeData.inDocType;
  } else {
    param = 'TransOutDocType&';
    $scope.homeData.selectDoctype = $scope.homeData.outDocType;
  }
  param += orgCode;
  return BarCodeServices.getSubAppSettingParam(param).then(function (datas) {
    var objs = angular.fromJson(datas);
    if (objs) {
      return objs;
    }
  }).catch(function (error) {
    error = BarCodeServices.getErrorMessage(error);//获取error中errorMessage信息
    imanDialog.alert(error);
  });
}

im-wh-ref

存储地点参照控件，自动根据条件加载数据，并弹出选择页面。使用方法和im-ref-row类似。

呈现效果如下：

im-wh-ref控件属性说明

示例代码：

 <im-card label-width="60pt">              
   <im-wh-ref label="存储地点" im-val="{{homeData.OutWh.WhCode}} {{homeData.OutWh.WhID?'/':''}} {{homeData.OutWh.WhName}}" cur-erpid="{{homeData.OutWh.WhID}}" handle-change="selectWh" ></im-wh-ref>    
</im-card>

im-bin-ref

库位参照控件，自动根据条件加载数据，并弹出选择页面。使用方法和im-ref-row类似。

呈现效果如下：
im-wh-ref控件属性说明

示例代码：

 <im-card label-width="60pt">              
   <im-bin-ref label="库位" im-val="{{homeData.bin.Code}} {{homeData.bin.Code?'/':''}} {{homeData.bin.BinName}}" cur-erpid="{{homeData.bin.ErpID}}" handle-change="selectBin" ></im-bin-ref>    
</im-card>

im-operation-ref

工序参照控件，支持MO工序和PLS工序，自动根据条件加载数据，并弹出选择页面。

呈现效果如下：

im-operation-ref控件属性说明

示例代码：

 <im-card label-width="60pt">              
   <im-operation-ref label="工序" im-val="{item.operation.OperationNum}}/{{item.operation.OperationDesc}}" cur-erpid="{{homeData.opID}}" handle-change="selectOp" handle-change-context="homeData" mo="{{homeData.moID}}" ></im-operation-ref>    
</im-card>

im-print-device-select

蓝牙打印机设备选择，目前只支持下图所示的四个。该组件封装了im-select组件。

呈现效果如图：

im-print-device-select控件属性说明

代码示例：

 <im-card label-width="60pt">   
   <im-print-device-select cur-selected-val="printDevice" label= handle-change="test"></im-print-device-select>
</im-card>

im-select

枚举类型选择框，打印机设备选择参照即封装的此空间

效果如图所示

im-select控件属性说明

代码示例：

 <im-card label-width="60pt">   
   <im-select label="{{vm.label?vm.label:\'打印机机型\'}}"  handle-change="vm.handleChange" im-data-list="vm.dataList" cur-selected-val="vm.curSelectedVal" ></im-select>
</im-card>

vm.handleChange = function(newValue,context){
  if ($scope.data.DocID > 0) {
    return imanDialog.confirm("切换数据来源将清空当前已扫数据，是否继续？").then(function (confirm) {
      if (confirm) {
        clearData();
        window.localStorage.setItem("ConfirmIssueDoc-SrcType", srcType);                           
      }else{
        //切换枚举时，如果弹框选择否，应返回false，则不修改枚举值。
        return false;
      }
    })
  } else {
    window.localStorage.setItem("ConfirmIssueDoc-SrcType", srcType);
  }
}

页面公共集成组件

• 顶部标题栏
• 扫码输入集成
• 搜索控件
• 料品信息
• 按钮
• 枚举选择
• 开关

  im-top-tab

  页面顶部标题栏，显示标题并带有返回按钮。

呈现效果如下：

im-top-tab控件属性说明

示例代码：

 <im-header>
   <im-top-tab title="调拨拣货出库"  handle="MyPageGoBack()">
   </im-top-tab>
</im-header>

im-barcode-scan-input

扫码输入集成，包含监听PDA红外扫码事件，输入框回车事件，摄像头解析事件。

呈现效果如下：

im-barcode-scan-input控件属性说明

示例代码：

 <im-header>
   <im-barcode-scan-input placeholder="{{holdstring}}" im-val="{{BarCode}}" handle-change="BarCodeScan" >
   </im-barcode-scan-input>
</im-header>

im-search-input

查询输入框控件，默认400ms防抖间隔。目前用于存储地点参照选择页面中。

呈现效果如下：

im-search-input控件属性说明

示例代码：

<im-header>
    <im-top-tab title="选择存储地点"  handle="vm.modal.hide()"></im-top-tab>
  <im-search-input placeholder="Search" delay-time="500" handle-change="getDataByFilter"></im-search-input>
</im-header>

im-item-info

料品信息控件，带有【料品】标识，品名，规格，料号。目前用在im-card-header中，也可用于其他位置。

呈现效果如下：

im-item-info控件属性说明

示例代码：

<im-card label-width="55pt">    
  <im-card-header>
    <im-item-info  tag-val="料品" item-name='{{homeData.Lines[index].ItemName}}' item-code='{{homeData.Lines[index].ItemName}}' item-specs='{{homeData.Lines[index].Spec}}'></im-item-info>        
  </im-card-header>  
  <im-rich-row>
    <im-large-info im-val="{{homeData.Lines[index].OutQty}}" label="调出数量"></im-large-info>
    <im-large-info im-val="{{homeData.Lines[index].SumQty}}" label="实拣数量"></im-large-info>
  </im-rich-row> 
</im-card>

im-button

按钮控件

呈现效果如下：

im-button控件属性说明

示例代码：

<im-bottom>
    <im-button type='default' size="minor"  im-val="取消"  handle="Cancel()" ></im-button>
  <im-button type='primary' size="minor"  im-val="确认"  handle="ConfirmOk()" ></im-button>
</im-bottom>

im-switch

开关控件

效果如图所示

im-switch控件属性说明

代码示例：

<im-switch  ng-model="vm.ngModel" 
           handle-change="vm.toggleChange" 
           handle="vm.handle()">
</im-switch>

Tiny组件

• 蓝色标签
• 蓝色标签
• 大字信息
• 底部信息

该分组是一些固定样式的小组件，均是可以单据使用，堆叠使用。

im-blue-label

蓝色标签①

呈现效果如下：

im-blue-label控件属性说明

代码示例：

<im-list>
  <im-card  ng-repeat="info in homeData.Lines track by $index"
           label-width="55pt">
    <im-common-row label="料品：">{{info.ItemName}}<im-blue-label im-val="{{info.Spec}}"></im-blue-label></im-common-row>  
    </im-card>
</im-list>

im-blue-tag

蓝色标签②

呈现效果如下：

im-blue-tag控件属性说明

代码示例：

<im-card>  
  <im-card-header ng-if="bin.BinCode">
    <im-blue-tag im-val="库位" background-color='#fe9e02' ></im-blue-tag>{{bin.BinCode}}
  </im-card-header>
</im-card>

im-large-info

大字汇总信息控件，可以搭配im-rich-row使用

呈现效果如下（两个一起使用效果）：

im-large-info控件属性说明

代码示例：

<im-card label-width="55pt">    
  <im-rich-row>
    <im-large-info im-val="{{homeData.Lines[index].OutQty}}" label="调出数量"></im-large-info>
    <im-large-info im-val="{{homeData.Lines[index].SumQty}}" label="实拣数量"></im-large-info>
  </im-rich-row> 
</im-card>

im-barcode-sum

主要用于显示已扫条码汇总数量信息，触摸im-content元素时，隐藏该汇总数量，停止触摸短暂延迟后，恢复显示。
控件理论上可防止任意代码位置，通常放置于im-content结尾处。目前样式定位为绝对定位，只预留一行按钮高度，若有其他需要，请自行覆盖样式。

呈现效果如下：

im-barcode-sum 控件属性说明

示例代码

<im-content>
  <im-list>
  </im-list>
  <im-barcode-sum  im-val="已扫条码：{{barCodes.length}}"></im-barcode-sum>
</im-content>

im-blue-up-icon/im-blue-down-icon

一个向上和向下的箭头。用来标记当前数据是调出或调入，

呈现效果如下：

im-barcode-sum 控件属性说明