zin

Appearance

详情页 ​

详情页通过 detail() 实现，只需要指定相关属性即可实现。

用法 ​

指定详情对象 ​

通过 object 属性来指定详情页对应的对象，通过 objectType 指定详情对象类型，通过 objectID 指定详情对象 ID，下面为一个例子：

php
detail
(
    set::object($story),
    set::objectType('story'),

    // 当指定了 object 属性，可以省略 objectID，自动从 object 对象上获取 ID。
    // set::objectID($story->id)
);

提示：省略详情对象相关属性

  • 当页面所属模块与 objectType 相同时可以省略 objectType 属性。
  • 当页面上存在 ${$objectType} 对象时可以省略 object 属性。
  • 当指定了 object 属性，可以省略 objectID，自动从 object 对象上获取 ID。

定义头部 ​

定义头部 ID 和标题 ​

当指定了详情对象后会自动在头部显示对象 ID 和标题，默认情况下也会在头部显示返回按钮，可以通过 set::backBtn(false) 来关闭返回按钮，如果需要自定义头部 ID 和标题，可以通过如下属性：

php
detail
(
    set::objectID($story->id),
    set::objectType('story'),
    set::title($story->title)
);

提示

当已经指定了详情对象，可以省略 objectID 和 title 属性。

定义头部右侧工具栏 ​

有时需要在头部右侧显示一些操作按钮，可以通过 set::toolbar() 来定义，如下：

php
$toolbar = array();

$toolbar[] = array('icon' => 'export', 'text' => '导出', 'url' => '#example-url');
$toolbar[] = array('icon' => 'plus', 'text' => '新建', 'type' => 'dropdown', 'items' => array(array('text' => '新建需求'), array('text' => '批量新建需求')));

detail
(
    set::toolbar($toolbar)
);

定义头部父级对象标题 ​

有时需要在标题前方显示父级对象的标题，例如父级任务，可以通过 set::parent($parentObject) 来定义，如下：

php
detail
(
    set::parent($parentTask)
);

/* 或者通过单独的属性指定父级对象相关属性： */
detail
(
    set::parentType('task'),
    set::parentTitle($parentTask->title),
    set::parentUrl(createLink('task', 'view', "taskID=$parentTask->id"))
);

定义主要栏目 ​

在详情页左侧主要栏目上会显示对象的主要信息。

定义主要栏目内容 ​

通过 set::sections() 来定义主要栏目内容，通过一个数组来指定多个内容。每个内容会使用 content 部件进行渲染，可以通过 control 来指定要渲染的部件类型，通过 title 来指定内容标题，通过其他属性来指定要渲染的部件其他属性。下面为一个例子：

php
$sections = array();

$sections[] = array
(
    'control' => 'html',          // 使用 html 渲染需求描述内容。
    'title' => '需求描述',
    'content' => $story->spec     // 需求描述内容。
);
$sections[] = array
(
    'control' => 'html',
    'title' => '验证步骤',
    'content' => $story->verify
);
$sections[] = array
(
    'title'      => '附件',
    'control'    => 'fileList',      // 指定使用 fileList 部件。
    'files'      => $story->files,
    'showDelete' => false,
    'object'     => $story
);

detail
(
    set::sections($sections)
);

定义主要栏目底部浮动操作栏 ​

在主要栏目底部可以显示一些操作按钮，可以通过 set::actions() 来定义，如下：

php
$actions = array();

$actions[] = array('icon' => 'alter', 'text' => '变更', 'url' => '#example-url');
$actions[] = array('icon' => 'hand-right', 'text' => '指派', 'url' => '#example-url');
$actions[] = '-'; // 分隔符。
$actions[] = array('icon' => 'edit', 'hint' => '编辑', 'url' => '#example-url');
$actions[] = array('icon' => 'copy', 'hint' => '复制', 'url' => '#example-url');
$actions[] = array('icon' => 'trash', 'hint' => '删除', 'url' => '#example-url');

detail
(
    set::actions($actions)
);

提示

默认会自动在底部操作栏左侧显示返回按钮，如果完全不需要操作栏，可以通过 set::actions(false) 来关闭。

定义侧边栏标签页 ​

在详情页右侧会显示一些标签页，可以通过 set::tabs() 来定义，与主要栏目内容定义 sections 相同，通过一个数组来定义每个标签页，每个标签页会使用 content 部件进行渲染，可以通过 control 来指定要渲染的部件类型，通过 title 来指定标签页标题，通过 group 来指定标签页分组，通过其他属性来指定要渲染的部件其他属性。相同 group 的标签页会作为一个标签页组展示，不同的的分组会从上到下排列。下面为一个例子：

php
$tabs = array();

$tabs[] = array
(
    'group'   => 'basic',   // 第一个标签页组
    'title'   => '基本信息',
    'control' => 'storyBasicInfo' // 使用 storyBasicInfo 部件渲染。
);
$tabs[] = array
(
    'group'   => 'basic',   // 第一个标签页组
    'title'   => '需求的一生',
    'control' => 'storyLifeInfo' // 使用 storyLifeInfo 部件渲染。
);

$tabs[] = array
(
    'group'   => 'relatives', // 第二个标签页组
    'title'   => '用户需求',
    'control' => 'linkedStoryList' // 使用 linkedStoryList 部件渲染。
);
$tabs[] = array
(
    'group'   => 'relatives', // 第二个标签页组
    'title'   => '迭代任务',
    'control' => 'executionTaskList' // 使用 executionTaskList 部件渲染。
);
$tabs[] = array
(
    'group'   => 'relatives', // 第二个标签页组
    'title'   => '相关信息',
    'control' => 'storyRelatedList' // 使用 storyRelatedList 部件渲染。
);

综合示例 ​

php
/* 工具栏。 */
$toolbar = array();
$toolbar[] = array('icon' => 'export', 'text' => '导出', 'url' => '#example-url');
$toolbar[] = array('icon' => 'plus', 'text' => '新建', 'type' => 'dropdown', 'items' => array(array('text' => '新建需求'), array('text' => '批量新建需求')));

/* 主栏目。 */
$sections = array();
$sections[] = array('control' => 'html', 'title' => '需求描述', 'content' => $story->spec);
$sections[] = array('control' => 'html', 'title' => '验证步骤', 'content' => $story->verify);
$sections[] = array('title' => '附件', 'cont rol' => 'fileList', 'files' => $story->files, 'showDelete' => false, 'object' => $story);

/* 侧边栏标签页。 */
$tabs = array();
$tabs[] = array('group' => 'basic', 'title' => '基本信息', 'control' => 'storyBasicInfo');
$tabs[] = array('group' => 'basic', 'title' => '需求的一生', 'control' => 'storyLifeInfo');
$tabs[] = array('group' => 'relatives', 'title' => '用户需求', 'control' => 'linkedStoryList');
$tabs[] = array('group' => 'relatives', 'title' => '迭代任务', 'control' => 'executionTaskList');
$tabs[] = array('group' => 'relatives', 'title' => '相关信息', 'control' => 'storyRelatedList');

/* 底部操作按钮。 */
$actions = array();
$actions[] = array('icon' => 'alter', 'text' => '变更', 'url' => '#example-url');
$actions[] = array('icon' => 'hand-right', 'text' => '指派', 'url' => '#example-url');
$actions[] = '-'; // 分隔符。
$actions[] = array('icon' => 'edit', 'hint' => '编辑', 'url' => '#example-url');
$actions[] = array('icon' => 'copy', 'hint' => '复制', 'url' => '#example-url');
$actions[] = array('icon' => 'trash', 'hint' => '删除', 'url' => '#example-url');

detail
(
    set::toolbar($toolbar),
    set::sections($sections),
    set::tabs($tabs),
    set::history(true),
    set::actions($actions),
);

相关部件 ​

通用部件 ​

需求相关 ​

任务相关部件 ​

https://zentao.net

Copyright (C) 2023 cnezsoft.com