如何自定义工作流的待办任务列表

介绍

有些时候我们需要把一些业务数据同时展示在工作流的待办列表中,这时候我们可以通过覆写oinone的待办列表展示组件

1. 由于平台原有的视图中未返回业务模型的原始数据的字段,所以我们先要将originNodeContext字段加到视图中,该workbench_usertask_active_table.xml文件存放在src/resources目录下

<view model="workbench.WorkBenchWorkflowUserTaskActive" type="gallery" viewName="全部待办" name="全部待办" title="全部待办" layout="workflow_gallery_layout">

    <template slot="search" widget="search" disabledExpand="true" invisibleSearch="true">
        <field allowClear="true" span="4" widget="TabSelect" data="optionSelect" label="false" required="false" defaultValue="ACTIVE_TOTAl"/>
        <field allowClear="true" span="2" widget="TagSelect" data="taskTypeSelect" label="false" required="false" defaultValue="TOTAL"/>
        <field allowClear="true" span="1" name="workflowModule" data="workflowModule" label="false" placeholder="所属应用" searchTrigger="change" domain="systemSource != 'BASE' and systemSource != 'SYSTEM' and state=='installed' and application=='true' " />
        <field allowClear="true" span="1" widget="SearchInput" data="name" label="false" placeholder="使用名称搜索"  required="false"/>
    </template>

    <template slot="actionBar" widget="actionBar"/>

    <template colSpan="FULL" cols="1" defaultPageSize="OPTION_3" disabled="false" gotoListExportDialog="false" gotoListImportDialog="false" invisible="false" readonly="false" required="false" slot="gallery" widget="workflow-gallery">
        <template area="title,content,rowActions" colSpan="FULL" disabled="false" inlineActiveCount="FIVE" invisible="false" minHeight="180" readonly="false" required="false" slot="card" widget="card">
            <template slot="title"  borderVisible="BOTTOM">
                <field data="taskType" invisible="true"/>
                <field data="taskTypeSelect" invisible="true"/>
                <field span="3" data="nodeName" widget="Input" label=""/>
                <field span="3" data="originNodeContext" widget="Input" invisible="true"/>
                <field allowClear="true" span="10" data="name" disabled="false" invisible="false" justifyContent="START" label="" maxLength="128" orientation="TRANSVERSE" patternType="NONE" placeholder="名称" prefixStore="false" prefixType="TEXT" readonly="false" required="false" showCount="false" showPrefix="false" showSuffix="false" suffixStore="false" suffixType="TEXT" type="TEXT" widget="Input"/>
                <field allowClear="true" span="2" name="customerTag" data="customerTag" invisible="!activeRecord.customerTag" bgColor="#035DFF"  textColor="#FFFFFF" disabled="false" justifyContent="END" label="" maxLength="128" orientation="TRANSVERSE" patternType="NONE" placeholder="名称" prefixStore="false" prefixType="TEXT" readonly="false" required="false" showCount="false" showPrefix="false" showSuffix="false" suffixStore="false" suffixType="TEXT" type="TEXT" widget="TagString" emptyStyle="NULL"/>
                <field allowClear="true" span="2" name="customerTag" data="customerTag" invisible="activeRecord.customerTag" bgColor="#035DFF"  textColor="#FFFFFF" disabled="false" justifyContent="END" label="" maxLength="128" orientation="TRANSVERSE" patternType="NONE" placeholder="名称" prefixStore="false" prefixType="TEXT" readonly="false" required="false" showCount="false" showPrefix="false" showSuffix="false" suffixStore="false" suffixType="TEXT" type="TEXT" widget="Input" emptyStyle="NULL"/>

                <field span="3" data="tag" label="" widget="Select" justifyContent="END" emptyStyle="NULL">
                    <options>
                        <option name="TAG_UN_READ" label="未读" backgroundColor='rgba(3,93,255,0.10)' color='#035DFF'/>
                        <option name="TAG_READ" label="已读" backgroundColor='#F1F1F1' color='rgba(0,0,0,0.25)'/>
                        <option name="TAG_PROCESSING" label="进行中" backgroundColor='#46BB36' color='#FFFFFF'/>
                        <option name="TAG_TIME_OUT" label="已超时" backgroundColor='#46BB36' color='#FFFFFF'/>
                        <option name="TAG_PASS" label="已通过" backgroundColor='#46BB36' color='#FFFFFF'/>
                        <option name="TAG_FILLED" label="已填写" backgroundColor='#46BB36' color='#FFFFFF'/>
                        <option name="TAG_REJECT" label="已拒绝" backgroundColor='#E02020' color='#FFFFFF'/>
                        <option name="TAG_TRANSFER" label="已转交" backgroundColor='#F1F1F1' color='rgba(0,0,0,0.25)'/>
                        <option name="TAG_RECALL" label="已撤销" backgroundColor='#F1F1F1' color='rgba(0,0,0,0.25)'/>
                        <option name="TAG_CUI" label="催" backgroundColor='rgba(255,50,50,0.10)' color='#FF3232'/>
                    </options>
                </field>
                <field allowClear="true" span="4" data="createDate" decimal="0" disabled="false" format="YYYY-MM-DD HH:mm" invisible="false" justifyContent="CENTER" label="" orientation="TRANSVERSE" placeholder="任务创建时间" prefixStore="false" prefixType="TEXT" readonly="false" required="false" showPrefix="false" showSuffix="false" suffixStore="false" suffixType="TEXT" widget="DateTimePicker"/>
            </template>
            <template slot="content">

                <field allowClear="true" colSpan="QUARTER" data="workflowModule" disabled="false" invisible="false" justifyContent="START" label="应用" optionLabel="activeRecord.displayName" optionType="关联模型字段" orientation="TRANSVERSE" placeholder="模块" prefixStore="false" prefixType="TEXT" readonly="false" required="false" showPrefix="false" showSuffix="false" suffixStore="false" suffixType="TEXT" widget="Select"/>
                <field allowClear="true" colSpan="QUARTER" data="source" disabled="false" invisible="false" justifyContent="START" label="来源" maxLength="1024" orientation="TRANSVERSE" patternType="NONE" placeholder="来源" prefixStore="false" prefixType="TEXT" readonly="false" required="false" showCount="false" showPrefix="false" showSuffix="false" suffixStore="false" suffixType="TEXT" type="TEXT" widget="Input"/>
                <field allowClear="true" colSpan="QUARTER" data="fromDepartment" disabled="false" invisible="false" justifyContent="START" label="来源部门" maxLength="1024" orientation="TRANSVERSE" patternType="NONE" placeholder="来源部门" prefixStore="false" prefixType="TEXT" readonly="false" required="false" showCount="false" showPrefix="false" showSuffix="false" suffixStore="false" suffixType="TEXT" type="TEXT" widget="Input"/>
                <field allowClear="true" colSpan="QUARTER" data="status" disabled="false" invisible="false" justifyContent="START" label="当前状态" maxLength="1024" orientation="TRANSVERSE" patternType="NONE" placeholder="状态显示名称" prefixStore="false" prefixType="TEXT" readonly="false" required="false" showCount="false" showPrefix="false" showSuffix="false" suffixStore="false" suffixType="TEXT" type="TEXT" widget="Select"/>
            </template>
            <template slot="rowActions">
                <action bizStyle="DEFAULT" cancelText="取消" closeDialog="true" closeDrawer="true" colSpan="FULL" confirm="确认要执行动作吗?" confirmPosition="BM" confirmType="POPPER" disabled="false" enableConfirm="false" enterText="确定" goBack="false" invisible="!(activeRecord.taskType == 'APPROVE' && activeRecord.status == 'ACTIVE')" label="审批" name="workflow_wait" readonly="false" refreshData="true" required="false" type="PRIMARY" validateForm="true" widget="ViewAction"/>
                <action bizStyle="DEFAULT" cancelText="取消" closeDialog="true" closeDrawer="true" colSpan="FULL" confirm="确认要执行动作吗?" confirmPosition="BM" confirmType="POPPER" disabled="false" enableConfirm="false" enterText="确定" goBack="false" invisible="!(activeRecord.taskType == 'WRITE' && activeRecord.status == 'ACTIVE')" label="填写" name="workflow_write" readonly="false" refreshData="true" required="false" type="PRIMARY" validateForm="true" widget="ViewAction"/>
            </template>
        </template>
        <field data="optionSelect" invisible="true"/>
        <field data="id" invisible="true"/>
    </template>

</view>

2. 在工程启动的生命周期MetaDataEditor的edit方法中手动覆盖工作流模块的待办列表的视图

@Component
public class DemoModuleAppInstall implements MetaDataEditor {

    @Override
    public void edit(AppLifecycleCommand command, Map<String, Meta> metaMap) {
        log.info("开始安装demo_core应用-元数据");
        InitializationUtil util = InitializationUtil.get(metaMap, DemoModule.MODULE_MODULE, DemoModule.MODULE_NAME);
        BizInitLoader.init(util, DemoModule.MODULE_MODULE);

        util.createView(WorkBenchWorkflowUserTaskActive.MODEL_MODEL, "全部待办", "全部待办", "file:workbench_usertask_active_table.xml", ViewTypeEnum.GALLERY, 77, false);
    }
}

3. 前端新增MyWorkflowRuntimeWidget组件,自定义其中的vue组件

MyWorkflowRuntimeWidget.ts文件
import { BaseElementWidget, SPI, ViewType } from '@kunlun/dependencies';
import MyWorkflowRuntime from './MyWorkflowRuntime.vue';
import { WorkflowRuntimeWidget } from '@kunlun/workflow';

@SPI.ClassFactory(
  BaseElementWidget.Token({
    viewType: ViewType.Gallery,
    widget: 'workflow-gallery'
  })
)
export class MyWorkflowRuntimeWidget extends WorkflowRuntimeWidget {
  public initialize(props) {
    super.initialize(props);
    this.setComponent(MyWorkflowRuntime);
    return this;
  }
}
MyWorkflowRuntime.vue文件
<template>
  <div class="default-gallery workflow-runtime-default-gallery">
    <div class="default-gallery-content default-gallery-show-pagination">
      <oio-spin wrapper-class-name="oio-gallery-wrapper oio-scrollbar" :loading="loading">
        <oio-table v-if="dataSource && dataSource.length" resizable :data="dataList">
          <vxe-table-column field="nodeName" title="节点名称"></vxe-table-column>
          <vxe-table-column field="name" title="名称"></vxe-table-column>
          <vxe-table-column title="商品名称">
            <template v-slot:default="{ row }">
              {{ row.nodeData && row.nodeData.name }}
            </template>
          </vxe-table-column>
          <vxe-table-column field="createDate" title="创建日期"></vxe-table-column>
          <vxe-table-column field="tag" title="标签">
            <template v-slot:default="{ row }">
              <div class="gallery-tag" style="justify-content: end" v-if="row.tag">
                <div class="tag" :style="getTagInfo(row.tag)" style="width: unset">
                  <div class="content">
                    {{ getTagInfo(row.tag).label }}
                  </div>
                </div>
              </div>
            </template>
          </vxe-table-column>
          <vxe-table-column field="status" title="状态">
            <template v-slot:default="{ row }">
              <div class="gallery-tag">
                <div class="tag" style="width: unset">
                  <div class="content">
                    {{ statusField && statusField.format(row.status) }}
                  </div>
                </div>
              </div>
            </template>
          </vxe-table-column>
          <vxe-table-column title="操作栏">
            <template v-slot:default="{ row }">
              <oio-button
                type="primary"
                v-for="action in getCardActions(row)"
                @click="executeWorkflowAction(action, row)"
              >
                  {{ action.displayName }}
              </oio-button>
            </template>
          </vxe-table-column>
        </oio-table>

        <a-empty v-else class="empty" :description="translateValueByKey('暂无数据')" />
      </oio-spin>
    </div>
    <div class="default-gallery-pagination">
      <OioPagination
        :currentPage="pagination.current"
        :pageSize="pagination.pageSize"
        :total="pagination.total"
        :showTotal="true"
        :showJumper="paginationStyle != ListPaginationStyle.SIMPLE"
        :showLastPage="paginationStyle != ListPaginationStyle.SIMPLE"
        :onChange="onPaginationChange"
      ></OioPagination>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType, computed } from 'vue';
import {
  CommonGutterType,
  ListPaginationStyle,
  OioPagination,
  OioCard,
  OioSpin,
  OioRow,
  OioCol,
  OioButton,
  OioEmpty
} from '@kunlun/vue-ui-antd';
import { OioTable, ActiveRecord, Pagination, ModelFieldType, translateValueByKey } from '@kunlun/dependencies';
import { get as getValue } from 'lodash-es';

export default defineComponent({
  inheritAttrs: false,
  props: {
    dataSource: {
      type: Array as PropType<ActiveRecord[]>
    },
    cols: {
      type: Number
    },
    gutter: {
      type: [Number, String, Array, Object] as PropType<CommonGutterType>
    },
    loading: {
      type: Boolean,
      default: false
    },
    pagination: {
      type: Object as PropType<Pagination>,
      default: () => ({})
    },
    itemWidth: {
      type: Number
    },
    itemMinWidth: {
      type: Number
    },
    itemMaxWidth: {
      type: Number
    },
    showPagination: {
      type: Boolean,
      default: true
    },
    paginationStyle: {
      type: String as PropType<ListPaginationStyle>
    },
    onPaginationChange: {
      type: Function,
      required: true
    },
    getTagInfo: {
      type: Function,
      required: true
    },
    contentFields: {
      type: Array,
      default: () => []
    },
    getCardActions: {
      type: Function,
      required: true
    },
    executeWorkflowAction: {
      type: Function,
      required: true
    }
  },
  components: {
    OioPagination,
    OioCard,
    OioSpin,
    OioRow,
    OioCol,
    OioTable,
    OioButton,
    OioEmpty
  },

  setup(props) {
    const statusField = computed(() => props.contentFields.find((a) => a.value === 'status'));
    const dataList = computed(() => {
      props.dataSource?.forEach((a) => {
        try {
          a.nodeData = JSON.parse(a.originNodeContext);
        } catch (e) {

        }
      });

      return props.dataSource;
    });
    return { statusField, dataList, ListPaginationStyle, ModelFieldType, getValue, translateValueByKey };
  }
});
</script>
<style lang="scss">
.workflow-runtime-default-gallery {
  .empty {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
}
</style>

4.效果查看

如何自定义工作流的待办任务列表

上面的vue文件中,我们将商品名称展示在了列表中,可以看到我们在vue的setup方法中将业务数据放到了工作流待办任务的nodeData属性中,我们可以根据自己的业务模型将自己需要的字段展示在页面中。需要注意的是:要展示的字段一定要出现在模型触发工作流的原始视图中。

Oinone社区 作者:nation原创文章,如若转载,请注明出处:https://doc.oinone.top/designer/workflow/6989.html

访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验

(0)
nation的头像nation数式员工
上一篇 2024年5月8日 上午2:21
下一篇 2024年5月9日 下午3:56

相关推荐

  • 流程设计器的导入导出        流程设计器

    流程设计器的导入导出

    目录 依赖包安装GraphQL的工具登录gql导出生成json文件业务工程中导入示例代码生产环境使用流程设计器 简介 通过调用导出接口,将设计器的设计数据与元数据打包导出到文件中。提供了download/export两类接口。 依赖包 <dependency> <groupId>pro.shushi.pamirs.metadata.m…

    4天前
    00
  • 工作流-流程设计扩展自定义函数示例代码汇总        后端

    工作流-流程设计扩展自定义函数示例代码汇总

    目录 1. 流程节点审批人函数2. 审批开始前执行函数3. 待办操作提交后执行函数4. 审批操作数据函数 1. 流程节点审批人函数 包含转交、抄送、加签、填写、通知人自定义函数当平台默认提供的审批人选择无法满足个性化的业务需求时,我们可以通过自定义函数处理审批人的生成逻辑 1.1 编写自定义审批人函数 @Function(name = "custo…

    2023年12月4日
    00
  • 如何在业务模型的列表中展示工作流的审批按钮        流程设计器

    如何在业务模型的列表中展示工作流的审批按钮

    介绍 当我们需要在业务模型的列表中展示审批的按钮时,我们可以通过自定义的方式完成扩展,这样就可以在业务数据中直接点击该动作按钮跳转到工作流待办详情页处理审批或填写任务 1.先在业务数据模型中新增userTaskList字段存放该条数据的工作流待办数据 @Model.model(DemoItem.MODEL_MODEL) @Model(displayName …

    2024年5月8日
    00
  • 项目中工作流引入/触发        后端

    项目中工作流引入/触发

    目录 1. 使用工作流需要依赖的包和设置2. 触发方式2.1 自动触发方式2.2 触发方式 1.使用工作流需要依赖的包和设置 1.1 工作流需要依赖的模块 需在pom.xml中增加workflow、sql-record和trigger相关模块的依赖 workflow:工作流运行核心模块 sql-record:监听流程发布以后对应模型的增删改监听 trigge…

    2023年11月7日
    00
  • 流程设计流程结束通知SPI接口        后端

    流程设计流程结束通知SPI接口

    1.实现SPI接口 import pro.shushi.pamirs.meta.common.spi.SPI; import pro.shushi.pamirs.meta.common.spi.factory.SpringServiceLoaderFactory; import pro.shushi.pamirs.workflow.app.api.entit…

    2023年12月26日
    00

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注