模块API_河图开放平台

文档目录

1.cloudpivot-form表单

表单模块目前由3部分组成：schema定义、renderer渲染器、runtime运行时

schema定义

schema下定义了所有表单控件的类型、选项；基础的控件通过类型确定选项，复杂控件通过继承的方式扩展属性。

表单控件类型

FormControl 表单设计控件
FormSheet 子表控件，继承FormControl
FormSheetStatistic 子表统计控件，继承FormControl

FormControl

 /**
   * 数据项code 
   * 布局控件的key为type
   */
  key: string

  /**
   * 控件选项
   */
  options: FormControlOptions

  /**
   * 控件类型
   */
  type: FormControlType

  /**
   * 父级key
   */
  parentKey?: string

FormSheetStatistic

/**
 * 子表统计控件
 */
export interface FormSheetStatistic extends FormControl {

  columnKey: string

}

FormSheet

/**
 * 子表
 */
export interface FormSheet extends FormControl {

  /**
   * 列
   */
  columns: FormControl[]

  /**
   * 统计
   */
  statistics: FormSheetStatistic[]

}

FormControlType 表单控件类型

/**
 * 表单控件类型
 */
export enum FormControlType {

  /**
   * 标签
   */
  Label = 0,

  /**
   * 单文本
   */
  Text = 1,

  /**
   * 长文本
   */
  Textarea = 2,

  /**
   * 日期
   */
  Date = 3,

  /**
   * 数值
   */
  Number = 4,

  /**
   * 单选
   */
  Radio = 5,

  /**
   * 复选
   */
  Checkbox = 6,

  /**
   * 下拉
   */
  Dropdown = 7,

  /**
   * 逻辑
   */
  Logic = 8,

  /**
   * 附件
   */
  Attachment = 9,

  /**
   * 图片
   */
  Image = 10,

  /**
   * 位置
   */
  Location = 11,

  /**
   * 日期范围
   */
  DateRange = 12,

  /**
   * 数值范围
   */
  NumberRange = 13,
  /**
   * 地址
   */
  Address = 14,

  /**
   * 签名
   */
  Signature = 15,

  /**
   * 人员单选
   */
  StaffSelector = 50,

  /**
   * 人员多选
   */
  StaffMultiSelector = 51,

  /**
   * 部门单选
   */
  DepartmentSelector = 60,

  /**
   * 部门多选
   */
  DepartmentMultiSelector = 61,

  /**
   * 审批意见
   */
  ApprovalOpinion = 70,

  /**
   * 关联表单
   */
  RelevanceForm = 80,

  /**
   * 反向关联
   */
  ReverseRelevance = 90,

  /**
   * 系统-流水号
   */
  SequenceNo = 100,

  /**
   * 系统-创建人
   */
  CreateBy = 101,

  /**
   * 系统-创建人部门
   */
  CreateByParentId = 102,

  /**
   * 系统-修改人
   */
  ModifyBy = 103,

  /**
   * 系统-创建时间
   */
  CreatedTime = 104,

  /**
   * 系统-修改时间
   */
  ModifiedTime = 105,

  /**
   * 系统-拥有者
   */
  OwnerId = 106,

  /**
   * 系统-其他
   */
  SystemOther = 107,

  /**
   * 布局-分组标题
   */
  Group = 200,

  /**
   * 子表
   */
  Sheet = 201,

  /**
   * 描述说明
   */
  Description = 202,

  /**
   * 表单标题
   */
  Title = 203,

  /**
   * 子表统计
   */
  SheetStatistic = 300

}

FormControlOptions 表单控件选项

FormControlOptions只是一个约束性的接口，具体属性声明在几个公共子类中，具体的控件选项基本都继承自这几个子类

export class StyleControlOptions implements FormControlOptions {

    /**
     * 控件名称
     */
    name: string = ''

    /**
     * 是否可见
     */
    visible: boolean = true

    /**
     * 控件样式
     */
    style: string | null = null
}

export class EditableControlOptions extends StyleControlOptions {
    
    /**
     * 显示条件
     */
    displayFormula = ''

    /**
     * 变更事件
     */
    onChange: string | null = null

}

export class InputControlOptions extends EditableControlOptions {

    /**
     * 必填条件
     */
    requiredFormula = ''
}

renderer渲染器

renderer渲染器由pc、mobile渲染器，控件值服务，和一些抽象类构成；目前在列表查询表单、表单详情中有使用。

如何使用

引用

<template>
    <pc-form-renderer ref="formRenderer" :controls="controls"></pc-form-renderer>
</template>

import { schema, renderer, runtime } from "@cloudpivot/form";

@Component({
  name: "pc-form-detail",
  components: {
    PcFormRenderer: renderer.components.pc.FormRenderer
  },

合并controls

// 表单设计器控件属性json
const formControls = JSON.parse(formDefine.publishedAttributesJson);

// 表单设计器布局json
const layout = JSON.parse(formDefine.publishedViewJson);

this.controls = components.FormRendererHelper.convertDesign(formControls, layout);

FormRenderer

FormRenderer是pc、mobile渲染器的抽象父类，它实现了以下方法

/**
 * 查找所有表单控件
 */
findFormControls(keys?: string[]): RendererFormControl[]

/**
 * 校验表单
 * @param excludes 不校验的控件
 */
validate(excludes?: string[]): boolean

/**
 * 表单所有错误
 */
getErrors(): any

/**
 * 获取错误
 * @param controlId 控件ID
 * @param errCode 错误码
 */
getErrorMessage(controlId: string, errCode: FormControlErrorCodes): string

/**
 * 获取表单值对象
 */
getValue(): any

/**
 * 表单重置
 */
reset(): void

/**
 * 进入编辑状态
 * @param keys 指定的控件ID
 */
edit(keys?: string[]): void

/**
 * 进入只读状态
 * @param keys 指定的控件ID
 */
readonly(keys?: string[]): void

可以通过refs的方式获取组件实例，调用方法

const formRenderer = this.$refs.formRenderer as any as FormRendererLike;
formRenderer.validate();

服务注入

渲染器中一些控件运行依赖于外部服务、或者环境，为了实现关注与实现分离，有一些服务需要在项目中注入

FileService 文件服务，上传控件使用，上传下载相关服务
UserService 用户服务，选人控件使用，获取当前用户、当前用户部门
LocationService 位置服务，定位导航具体实现，移动端使用钉钉服务实现
RelevanceFormService 关联表单服务，列表相关数据获取、关联表单打开
ReverseRelevanceService 反向关联服务，反向关联数据获取，关联表单打开
renderer.RelevanceFormControl.listSelectorLoad 列表组件异步加载，列表模块依赖表单模块，使用这种方式解决循环依赖的问题

目前服务的配置在项目src/config/h3-form目录下

runtime运行时

runtime运行时由表单运行相关组件组成，下列组件都具有pc、mobile版

FormActionModal 操作弹窗组件
FormActions 表单按钮组件
FormDetail 表单详情

FormActionModal

方法

show (options: FormActionModalOptions) 显示
chose 关闭

事件

ok (ac: runtime.FormActionButton, data: any) 弹窗确认

FormActions

props

actions : runtime.FormActionButton[] 按钮列表

事件

action (ac: runtime.FormActionButton) 按钮点击

FormDetail

表单详情是一个组件抽象类，实现有默认表单运行相关的方法：

load 加载
save 暂存
submit 提交、同意、不同意
cancel 作废
delete 删除
finish 结束
retrieve 撤回
print 打印
edit 编辑
forword 转办
reject 驳回

除了运行相关方法，还有一些辅助方法：

loadCustomForm 加载自定义表单模板
initCustomForm 初始化自定义表单
initForm 初始化表单
onAction 表单按钮事件分发方法，处理按钮交互
doAction 表单按钮事件流程控制方法，如触发前，触发后
beforeAction 表单按钮操作前事件调用方法
executeAction 表单事件执行分发方法
onActionDone 表单按钮操作后事件调用方法
onCustomAction 自定义按钮事件调用方法
showActionModal 表单按钮弹窗
onActionModalOk 表单按钮弹窗确认事件执行方法

除load方法外，其他都由按钮事件驱动，不需要手动调用。

pc和mobile的差别

审批意见
pc、mobile的审批意见控件交互处理不同，mobile端的审批意见控件是在按钮点击通过校验后，再显示审批意见控件。
校验
pc、mobile的错误消息交互不同，导致校验方法的是分开实现的

多语言

import Vue from 'vue';
import VueI18n from 'vue-i18n';

import form_zh from '@cloudpivot/form/locales/zh-CN';

Vue.use(VueI18n);

const i18n = new VueI18n({
  locale: localStorage.getItem('locale') || 'zh',
  messages: {
    zh: {
        cloudpivot: {
            form: form_zh
        },
    },
    en: {

    }
  }
});

2.cloudpivot-flow/flow流程

流程模块目前由2部分组成：components组件、typings声明

typings声明

typings下声明了流程相关的所有状态的枚举，包括：流程行为状态、流程任务状态、流程的节点状态、流程状态、流程行为样式、参与者的类型

workflow-enum

 /**
   * 流程行为状态
   */
 export const workflowActionStatus: { [key: string]: string } = {
  '0': '提交',
  '1': '提交',
  '2': '作废',
  '3': '同意',
  '4': '不同意',
  '5': '加签',
  '6': '协办',
  '7': '转办',
  '8': '驳回',
  '9': '结束流程',
  '10': '待阅',
  '11': '已阅'
};

/**
 * 流程任务状态
 */
export const workItemStatus: { [key: string]: string } = {
  '1': '未启动',
  '2': '进行中',
  '3': '已完成',
  '4': '被取消',
  '5': '草稿'
};
/**
 * 流程的节点状态
 */
export const workflowNode: { [key: string]: string } = {
  '0': '已办节点',
  '1': '进行中节点',
  '2': '异常节点',
};

/**
 * 流程状态
 */
export enum WorkflowState {
  DRAFT = '草稿',
  PROCESSING = '进行中',
  COMPLETED = '已完成',
  CANCELED = '已作废',
  EXCEPTION = '异常'
}

//@workflowActionClassName: gray, green, blue, red;
/**
 * 流程行为样式
 */
export enum WorkflowAction {
  DRAFT = 'gray',
  PROCESSING = 'green',
  COMPLETED = 'blue',
  CANCELED = 'red'
}

/**
 * 参与者的类型
 */
export enum WorkflowParticipantType  {
  MORMAL = 0,
  FORWARD = 1,
  ASSIST = 2,
  ADD_WORKITEM = 3,
  CIRCULATE_ITEM = 4
}

components组件

components组件由pc、mobile、shared渲染器构成；目前在流程信息、流程跟踪（包含流程基本信息、流程图、审批日志、操作日志等）中有使用。

flow组件列表-PC端

WorkflowInfo 流程信息
WorkflowTrack 流程跟踪
WorkflowTrackActions 流程跟踪顶部操作按钮
WorkflowChart 流程图展示
Approval 表单审批记录

flow组件列表-移动端

WorkflowInfo 流程信息
Approval 审批记录展示
WorkflowChart 流程图展示

如何使用

组件引入路径： import * as flow from "@cloudpivot/flow";
组件调用路径： flow.components.[端].[组件名]
例如：

  flow.components.pc.WorkflowInfo,
  flow.components.mobile.WorkflowChart

###1. 引用示例

1.1 流程信息

<template>
  <!-- 移动端存在参数user、pc端不需要这个参数 -->
    <workflow-info
      v-if="workflowInstanceId"
      :id="workflowInstanceId"
      :itemId="formObj.workItemId"
      :user="creater"
      @flowTrack="flowTrack"
    ></workflow-info>
</template>

import * as flow from "@cloudpivot/flow";

@Component({
  name: "pc-form-detail",
  components: {
    WorkflowInfo: flow.components.pc.WorkflowInfo,
  },
)}

1.2 流程跟踪--pc

<template>
  <!-- 流程跟踪Header的按钮 -->
  <workflow-track-actions 
    :headerAction="headerAction"
    :workflowInstanceId="workflowInstanceId"
    :workItemId="workItemId"
    @edit="onEdit"
    @logs="onLogs"
  ></workflow-track-actions>
  <!-- 流程跟踪内容主体 -->
  <workflow-track-main 
    :loading="loading"
    :baseInfo="baseInfo"
    :chart="chart"
    :logs="logs"
  ></workflow-track-main>
</template>

import * as flow from "@cloudpivot/flow";

import { workflowApi } from "@cloudpivot/api";

@Component({
  name: "workflow-track",
  components: {
    WorkflowTrackMain: flow.components.pc.WorkflowTrack,
    WorkflowTrackActions: flow.components.pc.WorkflowTrackActions
  }
})

1.3 流程跟踪--mobile

<template>
  <!-- 审批记录 -->
  <approvals
    :approvals="approvals"
    :creater="creater"
    :workflowInfo="workflowInfo"
    :participants="participants"
    v-show="!index"
    @preview="onPreview"
    @detail="onDetail"
  ></approvals>
  <!-- 流程图 -->
  <Chart
    :chart="chart"
    :show="!!index"
    v-show="index"
  >1 Container
  </Chart>
</template>

import * as flow from "@cloudpivot/flow";

import { workflowApi } from "@cloudpivot/api";

@Component({
  name: "workflow-track",
  components: {
    Approvals : flow.components.mobile.Approval,
    Chart : flow.components.mobile.WorkflowChart
  }
})

###2. 组件传参prop

2.1 流程信息组件参数

// id： 流程实例ID
workflowInstanceId：string 

// itemId：流程workItemId
workItemId：string

// user：创建人对象（仅移动端需要）
user：any

/**
 *  flowTrack：点击流程跟踪回调事件
 */
flowTrack：function

2.2.2 流程跟踪内容主体组件参数--pc

// loading： 流程跟踪页面加载时是否展示loading
loading：Boolean

// baseInfo：流程跟踪基础信息
baseInfo：any


// chart：流程图数据
chart：any

// logs：审批日志数据
logs：any

2.3.1 审批记录组件参数--mobile

// approvals： 审批记录的数据数组
approvals：Array 

// creater：创建人对象
creater：any 

// workflowInfo：流程信息对象
workflowInfo：any

// participants： 当前处理人对象
participants：any

/**
 *  preview：图片预览回调事件
 */
preview：function

/**
 *  detail：查看审批记录回调事件
 */
detail：function

2.3.2 流程图组件参数--mobile

// show： 流程跟踪页面加载时滚动条定位到流程图位置
show：Boolean

// chart：流程图数据
chart：any

3.cloudpivot-flow/flow-center流程中心

流程中心包含两块内容，列表与发起流程。其中，列表分为我的待办、我的待阅、我的已办、我的已阅、我的流程、流程查询，流程查询分为任务查询和流程实例查询两块。

流程中心区分移动端和PC端，区别差异于文末提供。

flow-center组件列表-PC端

MyUnFinishedWorkItem 我的待办
MyUnReadWorkItem 我的待阅
MyFinishedWorkItem 我的已办
MyReadWorkItem 我的已阅
MyWorkflow 我的流程
QueryInstance 流程实例查询
TaskSearch 任务查询
WorkflowCenterMenu 流程中心菜单树
StartWorkflow 发起流程

flow-center组件列表-移动端

MyUnFinishedWorkItem 我的待办
MyUnReadWorkItem 我的待阅
MyFinishedWorkItem 我的已办
MyReadWorkItem 我的已阅
InitialInstance 发起流程
MyInstanceItem 我的流程

引入flow-center包

  import * as FlowCenter from '@cloudpivot/flow-center';

flow-center组件调用

FlowCenter.components.[端].[组件名]

如：

  FlowCenter.components.pc.MyFinishedWorkItem
  FlowCenter.components.mobile.MyInstanceItem

组件使用具体细节

PC端

自定义表格的列

解释：目前只能基于默认列改变表格列的数量

参数列表：

我的待办、我的待阅、我的已办、我的已阅：

  /**
   * 自定义表格的列
  */
  @Prop() tableColumns!: any;

我的流程：

  /**
   * 自定义表格的列
  */
    @Prop() tableProcessingColumns!: any; // 进行中
    @Prop() tableCompletedColumns!: any; // 已完成
    @Prop() tableCanceledColumns!: any; // 已作废

流程实例查询：

  /**
   * 自定义表格的列
  */
  @Prop() tableAllColumns!: any; // 全部
  @Prop() tableProcessingColumns!: any; // 进行中
  @Prop() tableCompletedColumns!: any; // 已完成
  @Prop() tableCanceledColumns!: any; // 已作废

任务查询：

  /**
   * 自定义表格的列
  */
  @Prop() tableProcessingColumns!: any; // 处理中
  @Prop() tableCompletedColumns!: any; // 已完成
  @Prop() tableCanceledColumns!: any; // 被取消

表格默认列

我的待办：

  defaultTableColumns:any = [
    {
      dataIndex: 'orderNumber',
      width: 80,
      slots: { title: 'indexTitle' },
      scopedSlots: { customRender: 'orderNumber' }
    },
    {
      dataIndex: 'instanceName',
      width: 220,
      slots: { title: 'instanceNameTitle' },
      scopedSlots: { customRender: 'instanceName' }
    },
    {
      dataIndex: 'activityName',
      width: 130,
      slots: { title: 'activityNameTitle' },
      scopedSlots: { customRender: 'activityName' }
    },
    {
      dataIndex: 'stayTime',
      width: 220,
      slots: { title: 'stayTimeTitle' },
      scopedSlots: { customRender: 'stayTime' }
    },
    {
      dataIndex: 'originatorName',
      width: 130,
      slots: { title: 'originatorNameTitle' },
      scopedSlots: { customRender: 'originatorName' }
    },
    {
      dataIndex: 'departmentName',
      width: 220,
      slots: { title: 'departmentNameTitle' },
      scopedSlots: { customRender: 'departmentName' }
    }
]

我的待阅:

defaultTableColumns:any = [
  {
    dataIndex: 'orderNumber',
    width: 120,

    slots: { title: 'indexTitle' },
    scopedSlots: { customRender: 'orderNumber' }
  },
  {
    dataIndex: 'workflowName',
    width: 130,

    slots: { title: 'workflowNameTitle' }
  },
  {
    dataIndex: 'sourceName',
    width: 130,

    slots: { title: 'sourceNameTitle' },
    scopedSlots: { customRender: 'sourceName' }
  },
  {
    dataIndex: 'startTime',
    width: 180,

    slots: { title: 'startTimeTitle' },
    scopedSlots: { customRender: 'startTime' }
  },
  {
    dataIndex: 'originatorName',
    width: 130,

    slots: { title: 'originatorNameTitle' },
    scopedSlots: { customRender: 'originatorName' }
  },
  {
    dataIndex: 'departmentName',
    width: 200,

    slots: { title: 'departmentNameTitle' },
    scopedSlots: { customRender: 'departmentName' }
  }
]

我的已办：

 defaultTableColumns:any = [
  {
    dataIndex: 'orderNumber',
    width: 80,

    slots: { title: 'indexTitle' }
  },
  {
    dataIndex: 'instanceName',
    width: 220,

    slots: { title: 'instanceTitle' },
    scopedSlots: { customRender: 'instanceName' }
  },
  {
    dataIndex: 'activityName',
    width: 130,

    slots: { title: 'activityNameTitle' },
    scopedSlots: { customRender: 'activityName' }
  },
  {
    dataIndex: 'approvalTxt',
    width: 130,

    slots: { title: 'approvalTxtTitle' },
    scopedSlots: { customRender: 'approvalTxt' }
  },
  {
    dataIndex: 'finishTime',
    width: 180,

    slots: { title: 'finishTimeTitle' },
    scopedSlots: { customRender: 'finishTime' }
  },
  {
    dataIndex: 'originatorName',
    width: 130,

    slots: { title: 'originatorNameTitle' },
    scopedSlots: { customRender: 'originatorName' }
  },
  {
    dataIndex: 'workflowInstanceState',
    width: 130,

    slots: { title: 'workflowInstanceStateTitle' },
    scopedSlots: { customRender: 'workflowInstanceState' }
  },
]

我的已阅：

defaultTableColumns:any = [
  {
    dataIndex: 'orderNumber',
    width: 80,
    align: 'center',
    slots: { title: 'indexTitle' }
  },
  {
    dataIndex: 'instanceName',
    width: 220,
    align: 'center',
    slots: { title: 'instanceNameTitle' },
    scopedSlots: { customRender: 'instanceName' }
  },
  {
    dataIndex: 'workflowName',
    width: 130,
    align: 'center',
    slots: { title: 'workflowNameTitle' },
    scopedSlots: { customRender: 'workflowName' }
  },
  {
    dataIndex: 'sourceName',
    width: 130,
    align: 'center',
    slots: { title: 'sourceNameTitle' },
    scopedSlots: { customRender: 'sourceName' }
  },
  {
    dataIndex: 'receiveTime',
    width: 180,
    align: 'center',
    slots: { title: 'receiveTimeTitle' },
    scopedSlots: { customRender: 'receiveTime' }
  },
  {
    dataIndex: 'originatorName',
    width: 130,
    align: 'center',
    slots: { title: 'originatorNameTitle' },
    scopedSlots: { customRender: 'originatorName' }
  },
  {
    dataIndex: 'departmentName',
    width: 200,
    align: 'center',
    slots: { title: 'departmentNameTitle' },
    scopedSlots: { customRender: 'departmentName' }
  }
]

我的流程：

defaultProcessingColumns:any = [
  {
    title: '序号',
    dataIndex: 'index',
    width: 60,
    align: 'center'
  },
  {
    dataIndex: 'instanceName',
    width: 296,
    slots: { title: 'instanceNameTitle' },
    scopedSlots: { customRender: 'instanceName' }
  },
  {
    dataIndex: 'workflowName',
    width: 130,
    slots: { title: 'workflowNameTitle' },
  },
  {
    dataIndex: 'participants',
    width: 130,
    slots: { title: 'participantNameTitle' },
    scopedSlots: { customRender: 'participantName' }
  },
  {
    width: 180,
    dataIndex: 'stayTime',
    slots: { title: 'stayTimeTitle' },
  }
];

defaultCompletedColumns:any = [
  {
    title: '序号',
    dataIndex: 'index',
    width: 60,
    align: 'center'
  },
  {
    dataIndex: 'instanceName',
    width: 296,
    slots: { title: 'instanceNameTitle' },
    scopedSlots: { customRender: 'instanceName' }
  },
  {
    dataIndex: 'workflowName',
    slots: { title: 'workflowNameTitle' },
    width: 130
  },
  {
    dataIndex: 'startTime',
    slots: { title: 'startTimeTitle' },
    width: 180
  },
  {
    dataIndex: 'finishTime',
    slots: { title: 'finishedTimeTitle' },
    width: 180
  },
  {
    dataIndex: 'costTime',
    slots: { title: 'costTimeTitle' },
    width: 180
  }
];

defaultCanceledColumns:any = [
  {
    title: '序号',
    dataIndex: 'index',
    width: 60,
    align: 'center'
  },
  {
    dataIndex: 'instanceName',
    width: 296,
    slots: { title: 'instanceNameTitle' },
    scopedSlots: { customRender: 'instanceName' }
  },
  {
    dataIndex: 'workflowName',
    slots: { title: 'workflowNameTitle' },
    width: 130
  },
  {
    dataIndex: 'startTime',
    slots: { title: 'startTimeTitle' },
    width: 180
  },
  {
    dataIndex: 'finishTime',
    slots: { title: 'cancellationTime' },
    width: 180
  }
];

流程实例查询

defaultAllColumns:any = [
  {
    dataIndex: 'index',
    width: 60,
    align: 'center',
    slots: { title: 'indexTitle' }
  },
  {
    dataIndex: 'instanceName',
    width: 220,
    slots: { title: 'instanceNameTitle' },
    scopedSlots: { customRender: 'instanceName' }
  },
  {
    dataIndex: 'workflowName',
    width: 130,
    slots: { title: 'workflowNameTitle' },
  },
  {
    dataIndex: 'startTime',
    width: 180,
    slots: { title: 'startTimeTitle' },
  },
  {
    dataIndex: 'originatorName',
    width: 130,
    slots: { title: 'originatorNameTitle' },
    scopedSlots: { customRender: 'originatorName' }
  },
  {
    dataIndex: 'departmentName',
    width: 130,
    slots: { title: 'departmentNameTitle' },
    scopedSlots: { customRender: 'originatorName' }
  },
  {
    dataIndex: 'state',
    width: 130,
    slots: { title: 'stateTitle' },
  }
];

defaultProcessingColumns:any = [
  {
    dataIndex: 'index',
    width: 60,
    align: 'center',
    slots: { title: 'indexTitle' },
  },
  {
    dataIndex: 'instanceName',
    width: 220,
    slots: { title: 'instanceNameTitle' },
    scopedSlots: { customRender: 'instanceName' }
  },
  {
    dataIndex: 'workflowName',
    width: 130,
    slots: { title: 'workflowNameTitle' },
  },
  {
    dataIndex: 'participants',
    width: 130,
    slots: { title: 'participantNameTitle' },
    scopedSlots: { customRender: 'participantName' }
  },
  {
    dataIndex: 'stayTime',
    width: 180,
    slots: { title: 'stayTimeTitle' },
  },
  {
    dataIndex: 'startTime',
    width: 180,
    slots: { title: 'startTimeTitle' },
  },
  {
    dataIndex: 'originatorName',
    slots: { title: 'originatorNameTitle' },
    scopedSlots: { customRender: 'originatorName' },
    width: 130
  }
];

defaultCompletedColumns:any = [
  {
    dataIndex: 'index',
    width: 60,
    align: 'center',
    slots: { title: 'indexTitle' },
  },
  {
    dataIndex: 'instanceName',
    width: 296,
    slots: { title: 'instanceNameTitle' },
    scopedSlots: { customRender: 'instanceName' }
  },
  {
    dataIndex: 'workflowName',
    width: 130,
    slots: { title: 'workflowNameTitle' },
  },
  {
    dataIndex: 'startTime',
    width: 180,
    slots: { title: 'startTimeTitle' }
  },
  {
    dataIndex: 'finishTime',
    width: 180,
    slots: { title: 'finishedTimeTitle' }
  },
  {
    dataIndex: 'costTime',
    width: 180,
    slots: { title: 'costTimeTitle' }
  },
  {
    dataIndex: 'originatorName',
    slots: { title: 'originatorNameTitle' },
    scopedSlots: { customRender: 'originatorName' },
    width: 130
  }
];

defaultCanceledColumns:any = [
  {
    dataIndex: 'index',
    width: 60,
    align: 'center',
    slots: { title: 'indexTitle' }
  },
  {
    dataIndex: 'instanceName',
    width: 220,
    slots: { title: 'instanceNameTitle' },
    scopedSlots: { customRender: 'instanceName' }
  },
  {
    dataIndex: 'workflowName',
    width: 130,
    slots: { title: 'workflowNameTitle' },
  },
  {
    dataIndex: 'startTime',
    width: 180,
    slots: { title: 'startTimeTitle' },
  },
  {
    dataIndex: 'finishTime',
    width: 180,
    slots: { title: 'cancellationTime' },
  },
  {
    dataIndex: 'originatorName',
    width: 180,
    slots: { title: 'originatorNameTitle' },
    scopedSlots: { customRender: 'originatorName' }
  },
  {
    dataIndex: 'departmentName',
    scopedSlots: { customRender: 'departmentName' },
    width: 180,
    slots: { title: 'departmentNameTitle' }
  }
];

单应用

我的待办、我的待阅、我的已办、我的已阅是可以直接在钉钉打开的，这里称为单应用，这边需要传一些其他参数

  /**
   * 单应用集成属性,集成时不显示title
   */
  @Prop({
    default: true
  }) showTitle!: boolean;

  /**
   * 单应用集成属性,集成时表格高度
   */
  @Prop() scrollHeight!: number;

  /**
   * 单应用集成属性,单应用appCode
   */
  @Prop() appCode!: string;

  /**
   * 单应用集成属性,集成时不显示发起流程按钮
   */
  @Prop({
    default: true
  }) originate!: boolean;

关于自定义事件

我的待办、我的待阅、我的已办、我的已阅这四个组件点击流程名称需要打开表单详情，这里做的是路由跳转，需要在使用的时候去监听这个事件，并跳转到项目中的路由，传播出来的事件名称均为"openForm"，如下：

  <my-finished-work-item @openForm="openForm"/>

  /**
   * 查看表单详情
   */
  openForm(obj:any) {
    // 表单详情路由地址
    const url = `/form/detail?workitemId=${obj.id}&workflowInstanceId=${obj.instanceId}&return=${location.pathname + location.search}`;
    if (this.isDingTalk) {
      this.$router.push({
        path: url
      });
    } else {
      window.open(url);
    }
  }

其他组件

菜单树
菜单树时通过 component 的is属性进行切换的。
只需要在项目中 components/apps/aside/aside.vue 引用即可。

  <component :is="curMenu"/>

  @Component({
    name: 'Aside',
    components: {
      // todo
      WorkflowCenterMenu: FlowCenter.components.pc.WorkflowCenterMenu,
      // todo
    }
  })

  /*** 分割线 ****/
  curMenu:string = 'WorkflowCenterMenu'

发起流程
PC端发起流程组件名为 StartWorkflow
引入直接使用即可，如：

  <start-workflow/>

移动端

store引用

因为待办待阅已办已阅使用了同一个store，故需要在 views/home/index.vue 文件中引用命名控件为circulate的store模块。
如：

  // index.vue
  const circulateModule = namespace('circulate');

传入参数

使用组件时，需要传入appCode，appCode来自于顶级store

  <MyReadWorkItem :appCode="appCode"/>

  @State('appCode') appCode!: any;

关于自定义事件

跟PC端逻辑一致，点击每一个item，需要跳转至项目中的路由。

传播出来的事件名称均为"openForm"

  <MyFinishedWorkItem  @openForm="openForm"/>

    openForm(workitem:any) {
      // 表单详情默认路由
      this.$router.push({
        name: 'form-detail',
        query: {
          workitemId: workitem.id,
          workflowInstanceId: workitem.instanceId,
          return: this.$route.fullPath
        }
      });
  }

其他组件

发起流程 InitialInstance
移动端发起流程组件为 InitialInstance，引入直接使用即可。

  <initial-instance/>

我的流程 MyInstanceItem
这是单个item，需要传入一个我的所有流程list，同样监听一个自定义事件 openForm ，跳转项目中路由
如：

  <instances-item
    v-for="(circulate,index) in myInstances"
    :key="index"
    :workitem="circulate"
    @openForm="openForm(circulate)"
  />

  openForm(workitem:any) {
    this.$router.push({
      name: 'form-detail',
      query: {
        workflowInstanceId: workitem.id,
        return: this.$route.fullPath
      }
    });
  }

4.cloudpivot-list/list列表

主要用于渲染模型下列表设计在 pc 与 mobile 供用户查询的列表

mobile

列表页面主要包含两个部分组成，一个是查询条件的渲染，另外一个是数据列表项的渲染

使用方法

import * as applicationList from '@cloudpivot/list';

@Component({
  name: 'FormList',
  components: {
   AppsList: applicationList.components.mobile.ApplicationList
  }
})

也可以只渲染查询条件的渲染：

// 引入
import * as applicationList from '@cloudpivot/list';

@Component({
  name: 'FormList',
  components: {
   AppsList: applicationList.components.mobile.QueryForm
  }
})
// 使用
<query-form ref="list" :fields="queryConditions"></query-form>

// 
参数

// 列表设计请求的到是数据中 queryConditions 直接扔进去就可以渲染


// 查询确认

// 数据传递
 mounted() {

 	Bus.$on('queryList', () => {

		this.query();

	});

 }

  destroyed() {

	Bus.$off('queryList');

  }

// 获取参数

 query() {
    const list = this.$refs.list as any;
    const data = list.query();
  }

pc

pc 主要导出了两个模块，ApplicationList，ApplicationCustomIframe，ListSelector：

ApplicationList 主要用于渲染查询列表与列表数据
ApplicationCustomIframe 主要用于渲染后台添加的自定义页面的打开入口
ListSelector 主要用于关联表单选择时，对列表的选择

使用方式

// 引入
import * as  applicationList from '@cloudpivot/list';

// 路由使用

applicationList: {
  path: 'application-list/:schemaCode',
  name: 'applicationList',
  component: applicationList.components.pc.ApplicationList
}

// 自定义页面 iframe 打开

// 引入

import * as  applicationList from '@cloudpivot/list';

@Component({
  name: 'application-define',
  components: {
    applicationCustom: applicationList.components.pc.ApplicationCustomIframe
  }
})

// 使用

<application-custom :url="url" />
    
// 参数
 作为 iframe 打开的 url

5.cloudpivot-list/application应用

应用模块主要用以 admin 创建的应用在mobile 与 pc 前台的展示，分为 mobile 与 pc 两端渲染不同页面

mobile

AppsIndex 将整个应用模块导出，可以在路由直接引用
SingleApp 导出移动端单应用某块，使用方式与 AppsIndex 相同

使用方式

import * as  applicationList from '@cloudpivot/list'; // 将怎么模块导出

applicationList: {
    path: 'application-list/:schemaCode',
    name: 'applicationList',
    component: applicationList.components.pc.ApplicationList
}

// 通过 . 索引到对应组件引入使用

AppsIndex

作为引用列表页面的出入口，由下面三部分组成：

search-bar 引用是搜索功能，目前不对外开放
search-panel 搜索结果的展示，不对外开放
app-list 应用列表的主体内容, 不对外开放

app-list

side-bar 侧边栏
app-content 应用展示区域组成

PC

pc 应用主要导出两个部分，可以直接导入使用：

ApplicationHeader顶部导航条应用的列表
AppsMenu 左侧数据模型树
AppHomeContent 单应用首页内容
AppHomeHeader 单应用首页头部

使用方式：

import * as ApplicationComponents from '@cloudpivot/application';


@Component({
  name: 'common-header',
  components: {
    ApplicationHeader: ApplicationComponents.components.pc.ApplicationHeader
  }
})

单应用引用示例：

AppHomeContent的引用

<template>
  <app-home-content :appCode="code"></app-home-content>
</template>

import * as Application from '@cloudpivot/application';

@Component({
  name: 'app-home',
  components: {
    AppHomeContent: Application.components.pc.AppHomeContent
  }
})

AppHomeHeader的引用

<template>
    <app-home-header>
      <!-- AppHomeHeader组件的插槽 -->
      <div slot="left"><!--单应用头部左侧自定义代码 --></div>
      <div slot="right"><!--单应用头部右侧自定义代码 --></div>
    </app-home-header>
</template>

import * as Application from '@cloudpivot/application';

@Component({
  name: 'app-home',
  components: {
    AppHomeHeader: Application.components.pc.AppHomeHeader
  }
})

单应用参数列表

AppHomeContent 参数

/**
 * 应用编码
*/
@Prop() appCode!: string;

1.cloudpivot-form表单

2.cloudpivot-flow/flow流程

3.cloudpivot-flow/flow-center流程中心

4.cloudpivot-list/list列表

5.cloudpivot-list/application应用