ng-repeat 配置及扩展说明

1、更新平台及架构的公共 js

\static\app\main\BaseController.js
\static\app\service\utils.js
\static\app\framework\tab\GillionTabModule.js

BaseControll.js

更新了 `pageStateWatch` 方法，支持数组的修改状态监听

utils.js

增加以下方法，在 ctrl.js 中引入后，通过 `utils.方法名` 来调用

* `composeGlpaasRepeatDirective` - 用于将配置的 `class` 转换为 `ng-repeat` 指令
* `outerHTML` - 将传入的 `dom` 转换为字符串
* `composeGlpaasRepeatDirectiveForLazyDiv` - 用于转换 `div` 懒加载 `tab` 页的 `ng-repeat` 指令
* `verifyRepeatForm` - 执行 repeat 表单校验
* `isRepeatFormValid` - 表单校验状态判断
* `collapsablePanelDirectiveConstructor` - 折叠面板指令封装，通过平台配置 `class` 实现
* `processBarDirectiveContructor` - 进度条指令封装

GillionTabModule.js

针对 `div` 懒加载的 `tab` 作处理，可以 ctrl.js 中对加载到的 html 进行处理

2、 ng-repeat、ng-init 的配置

在可视化中针对要配置 repeat/init 的容器，配置以下 class (样式名称)

glpaas-repeat/glpaas-init 标识该容器需要做 repeat 处理
repeat-source:xx/init-source:xx 标识 repeat 的数据源，一般是业务对象名称 + s，如 repeat-source:mfPlans
repeat-item:yy/init-item:yy 标识 repeat 遍历之后的子项名称，一般是业务对象名称，如 repeat-item:mfPlan
+ / - 号按钮配置：直接在相应区域配置按钮，并绑定相应方法。可配置显示隐藏表达示来控制显示隐藏的条件，可使用 $index 来判断序号。如 + 按钮只显示在最后一个 repeat 项中显示，表达示为 $index === mfPlans.length - 1，- 按钮在只有一条记录时不显示，表达式为 mfPlans.length > 1
以上配置最终将转换为 angularJs 指令的形式: ng-repeat="xx in yy" 或 ng-init="xx = yy";

在 ctrl.js 中进行扩展

引入 utils.js ，并在 js 的最前面调用 composeGlpaasRepeatDirective 来让 repeat 生效

define([
    'service/utils'
  ], function (utils) {
     utils.composeGlpaasRepeatDirective && utils.composeGlpaasRepeatDirective();
});

repeat-source 对应的数据源，需要在 $scope 上定义，如果没有生成对应的数据，在扩展 js 中自定义一个数组： $scope.mfPlans = [...]
需要监听数据的修改来标记页面状态和 rowStatus，调用 _this.pageStateWatch 方法，注意 repeat 需要监听整个数组，第一个参数需要写成数组的形式（监听单个对象的，是直接传字符串）

// 监听数组对象修改状态
_this.pageStateWatch(['mfPlans'], [/* 监听的字段列表 */]);

根据具体业务需要定义新增、删除等方法
延迟加载 div 形式的 tab 处理：

// div 懒加载 html 处理，定义 ${tabsApi}_${tabKey}_afterLoadLazyHtml 的方法，对传入的 html 字符串进行处理
$scope['F0020Api_订舱_undefined_afterLoadLazyHtml'] = utils.composeGlpaasRepeatDirectiveForLazyDiv;

ng-repat使用效果：

3、折叠面板配置

在可视化中按以下规则配置 class (样式名称)，则点击面板标题时，可以切换内容区域的显示隐藏。

外层容器配置 collapsable-panel
标题区域配置 collapsable-panel-head
内容区域配置 collapsable-panel-body

在 ctrl.js 的 moduleExt 方法中需要注册这个指令：

moduleExt:function(module){
    // 注册折叠面板指令
    module.directive('collapsablePanel', utils.collapsablePanelDirectiveConstructor);
}

css 中定义相应的样式

.collapsable-panel .collapsable-panel-head {
    position: relative;
    height: 32px;
    color: #fff;
    background-color: #0099dc;
    line-height: 32px;
}
.collapsable-panel.collapsed .collapsable-panel-body {
    display: none;
}

4、进度条配置

在可视化中配置 TEMPLATE 的方式扩展，使用自定义指令 process-bar

自定义 html 的内容:

<process-bar
  nodes="processNodes"
  current="processCurrent"
></process-bar>

在 ctrl.js 的 moduleExt 方法中需要注册这个指令：

moduleExt:function(module){
    // 注册进度条指令
    module.directive('processBar', utils.processBarDirectiveContructor);
}

在 ctrl.js 的定义 processNodes 和 processCurrent 来标记进度条节点的内容和当前进度

$scope.processNodes = [
  { text: ['客户下单', '2020-11-30 10:00'] },
  { text: ['委托受理', '2020-11-30 11:00'] },
  { text: ['订舱确认', '2020-11-30 11:00'] },
  { text: ['委托受理', '2020-12-1 09:00'] },
  { text: '已发客户BC' },
  { text: '码头已放行' },
  { text: '码头已配载' },
]
$scope.processCurrent = 2;

5、悬浮标签定位处理

按钮 ng-repeat 的方式配置标签项，并绑定方法 scrollToMfPlan($index)

通过 css 样式定义外观样式

.float-tags {
   position: fixed;
   right: 0;
   z-index: 1;
}
.float-tags-item {
   width: 55px;
   height: 35px;
   line-height: 35px;
   border: 1px solid #0099dc;
   border-radius: 4px;
   background-color: #ebf7ff;
   border-right: 0;
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
   cursor: pointer;
   padding-left: 8px;
}
.float-tags-item:hover {
   background-color: #fff;
   color: #333;
}

.float-tags-item.active,
.float-tags-item:active {
   background-color: #0099dc;
   color: #fff;
}

在 ctrl.js 中定义滚动定位的方法

/** 定位到 mfPlan 指定序号的位置 */
$scope.scrollToMfPlan = function(index) {
 var el = $('.mfPlantRepeatItem')[index];
 el && el.scrollIntoView({ behavior: 'smooth' });
};

6、悬浮标签切换，页面绑定对象显示为当前悬浮标签对应数组对象

按钮 ng-repeat 的方式配置标签项，并绑定方法 scrollToMfPlan($index)

在html中使用

tmPlanRepeatTag`` 用于定位显示样式，tmPlan取值为业务对象名称repeat-item:tmPlan，tmPlanRepeatTag` 代码会自动生成

<!-- 定位悬浮框 -->
<div class="float-tags">
    <div class="float-tags-item tmPlanRepeatTag glpaas-repeat repeat-source:tmPlans repeat-item:tmPlan" ng-click="scrollToTmPlan($index)">
      拖车{{$index + 1}}
    </div>
</div>

在 ctrl.js 中进行扩展

// 初始获取数组信息
// tags显示第一个选中
$scope.tmPlanIndex = 0;
var interval = setInterval(setText, 1000);
function setText() {
  length = $(".tmPlanRepeatTag").length;
  if (length > 0) {
     $($(".tmPlanRepeatTag")[0]).addClass('active')
  }
}

// 移除拖车计划
$scope.removeTmPlan = function($event, tmPlan) {
 $event.stopPropagation();
 $scope.scrollToTmPlan();
 $scope.tmPlans = _.filter($scope.tmPlans, function(item) {
    return item !== tmPlan;
 })
};
/** 定位到 tmPlan 指定序号的位置 */
$scope.scrollToTmPlan = function(index) {
   let newIndex = index >= 0 ? index : $scope.tmPlanIndex === 0 ? $scope.tmPlanIndex + 1 : $scope.tmPlanIndex - 1;
   $scope.tmPlanIndex = index >= 0 ? index : $scope.tmPlanIndex === 0 ? $scope.tmPlanIndex : $scope.tmPlanIndex - 1;
   $scope.tmPlan = $scope.tmPlans[newIndex];
   var el = $('.tmPlanRepeatTag')[newIndex];
   $(el).addClass('active').siblings().removeClass('active');
};

ng-repeat + 悬浮标签切换使用效果：

《ng-repeat 配置及扩展说明》有1个想法

Большое спасибо. Что ни говорите весьма призанятно

Gschool

ng-repeat 配置及扩展说明

ng-repeat 配置及扩展说明

1、更新平台及架构的公共 js

2、 ng-repeat、ng-init 的配置

3、折叠面板配置

4、进度条配置

5、悬浮标签定位处理

6、悬浮标签切换，页面绑定对象显示为当前悬浮标签对应数组对象