介绍
有些时候我们需要把一些业务数据同时展示在工作流的待办列表中，这时候我们可以通过覆写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低代码应用平台体验
