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

介绍

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

1.添加工作流相关依赖

业务的api工程添加工作流相关依赖

package pro.shushi.pamirs.demo.api;

import org.springframework.stereotype.Component;
import pro.shushi.pamirs.core.common.CommonModule;
import pro.shushi.pamirs.file.api.FileModule;
import pro.shushi.pamirs.meta.annotation.Module;
import pro.shushi.pamirs.meta.base.PamirsModule;
import pro.shushi.pamirs.meta.common.constants.ModuleConstants;
import pro.shushi.pamirs.user.api.UserModule;
import pro.shushi.pamirs.workflow.app.api.WorkflowModule;

@Component
@Module(
        name = DemoModule.MODULE_NAME,
        displayName = "oinoneDemo工程",
        version = "1.0.0",
        // 登录后默认访问 priority 值最小的模块
        priority = 1,
        dependencies = {ModuleConstants.MODULE_BASE,
                CommonModule.MODULE_MODULE,
                UserModule.MODULE_MODULE,
                // 此处新增工作流依赖
                WorkflowModule.MODULE_MODULE,
                FileModule.MODULE_MODULE
        }
)
@Module.module(DemoModule.MODULE_MODULE)
@Module.Advanced(selfBuilt = true, application = true)
public class DemoModule implements PamirsModule {

    public static final String MODULE_MODULE = "demo_core";

    public static final String MODULE_NAME = "DemoCore";

    @Override
    public String[] packagePrefix() {
        return new String[]{
                "pro.shushi.pamirs.demo"
        };
    }
}

业务的core工程添加工作流相关依赖

<dependency>
    <groupId>pro.shushi.pamirs.workflow</groupId>
    <artifactId>pamirs-workflow-api</artifactId>
</dependency>
<dependency>
    <groupId>pro.shushi.pamirs.workflow</groupId>
    <artifactId>pamirs-workflow-core</artifactId>
</dependency>

2. 由于平台原有的视图中未返回业务模型的原始数据的字段，所以我们先要将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>

3. 在工程启动的生命周期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);
    }
}

4. 前端新增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>

5.效果查看

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