<script lang="ts" setup>
|
import type { ActionItem, BasicColumn } from '@jnpf/ui/vxeTable';
|
|
import { createVNode, onMounted, ref } from 'vue';
|
|
import { useMessage } from '@jnpf/hooks';
|
import { useModal } from '@jnpf/ui/modal';
|
import { BasicVxeTable, TableAction, useVxeTable } from '@jnpf/ui/vxeTable';
|
import { downloadByUrl } from '@jnpf/utils';
|
|
import { DownOutlined } from '@ant-design/icons-vue';
|
import { useClipboard } from '@vueuse/core';
|
import { FormItem, Radio, RadioGroup, Form as vueForm } from 'ant-design-vue';
|
|
import { changeType, copy as copyAPI, delFlow, exportData, getList, upDownShelf } from '#/api/workFlow/template';
|
import { $t } from '#/locales';
|
import { useBaseStore } from '#/store';
|
|
import DesignForm from './DesignForm.vue';
|
import Form from './Form.vue';
|
|
defineOptions({ name: 'OnlineDevFlowEngine' });
|
|
const { createMessage } = useMessage();
|
const baseStore = useBaseStore();
|
const [registerForm, { openModal: openFormModal }] = useModal();
|
const [registerDesignForm, { openModal: openDesignFormModal }] = useModal();
|
const { createConfirm } = useMessage();
|
const { copy } = useClipboard({ legacy: true });
|
const columns: BasicColumn[] = [
|
{ title: '流程名称', dataIndex: 'fullName', minWidth: 200 },
|
{ title: '流程编码', dataIndex: 'enCode', width: 200 },
|
{ title: '流程分类', dataIndex: 'category', width: 150 },
|
{ title: '流程类型', dataIndex: 'type', width: 100, align: 'center', customRender: ({ record }) => getFlowTypeName(record.type) },
|
{ title: '创建人', dataIndex: 'creatorUser', width: 120 },
|
{ title: '创建时间', dataIndex: 'creatorTime', width: 150, format: 'date|YYYY-MM-DD HH:mm:ss' },
|
{ title: '排序', dataIndex: 'sortCode', width: 70, align: 'center' },
|
{ title: '发布状态', dataIndex: 'enabledMark', width: 100, align: 'center', slots: { default: 'enabledMark' } },
|
{ title: '上架状态', dataIndex: 'status', width: 100, align: 'center', slots: { default: 'status' } },
|
];
|
const categoryList = ref<any[]>([]);
|
|
const [registerTable, { reload, getForm }] = useVxeTable({
|
api: getList,
|
columns,
|
useSearchForm: true,
|
formConfig: {
|
schemas: [
|
{
|
field: 'keyword',
|
label: $t('common.keyword'),
|
component: 'Input',
|
componentProps: {
|
placeholder: $t('common.enterKeyword'),
|
submitOnPressEnter: true,
|
},
|
},
|
{
|
field: 'category',
|
label: '流程分类',
|
component: 'Select',
|
componentProps: {
|
placeholder: '请选择',
|
showSearch: true,
|
},
|
},
|
{
|
field: 'type',
|
label: '流程类型',
|
component: 'Select',
|
componentProps: {
|
placeholder: '请选择',
|
options: [
|
{ id: 0, fullName: '标准流程' },
|
{ id: 1, fullName: '简单流程' },
|
{ id: 2, fullName: '任务流程' },
|
],
|
},
|
},
|
],
|
},
|
actionColumn: {
|
width: 180,
|
title: '操作',
|
dataIndex: 'action',
|
},
|
});
|
function getTableActions(record): ActionItem[] {
|
return [
|
{
|
label: $t('common.editText'),
|
onClick: addOrUpdateHandle.bind(null, record.id, record.type),
|
},
|
{
|
label: record.status == 1 ? '下架' : '上架',
|
color: 'error',
|
disabled: record.enabledMark === 0,
|
onClick: handleUpOrDown.bind(null, record),
|
},
|
{
|
label: '设计',
|
onClick: handleDesign.bind(null, record),
|
},
|
];
|
}
|
function getDropDownActions(record): ActionItem[] {
|
return [
|
{
|
label: '复制',
|
ifShow: !!record.enabledMark,
|
modelConfirm: {
|
content: '您确定要复制该流程, 是否继续?',
|
onOk: handleCopy.bind(null, record.id),
|
},
|
},
|
{
|
label: '复制ID',
|
onClick: handleCopyID.bind(null, record.id),
|
},
|
{
|
label: '导出',
|
ifShow: !!record.enabledMark,
|
modelConfirm: {
|
content: '您确定要导出该流程, 是否继续?',
|
onOk: handleExport.bind(null, record.id),
|
},
|
},
|
{
|
label: '切换',
|
ifShow: record.type === 1,
|
modelConfirm: {
|
content: '您确定要切换为标准流程, 是否继续?',
|
onOk: handleChangeType.bind(null, record.id),
|
},
|
},
|
{
|
label: $t('common.delText'),
|
modelConfirm: {
|
content: $t('common.delTip'),
|
onOk: handleDelete.bind(null, record.id),
|
},
|
},
|
];
|
}
|
function addOrUpdateHandle(id = '', type) {
|
openFormModal(true, { id, type, categoryList });
|
}
|
function handleDesign(record) {
|
openDesignFormModal(true, { id: record.id, fullName: record.fullName });
|
}
|
function handleDelete(id) {
|
delFlow(id).then((res) => {
|
createMessage.success(res.msg);
|
reload();
|
});
|
}
|
function handleCopy(id) {
|
copyAPI(id).then((res) => {
|
createMessage.success(res.msg);
|
reload();
|
});
|
}
|
function handleExport(id) {
|
exportData(id).then((res) => {
|
downloadByUrl({ url: res.data.url });
|
});
|
}
|
function handleChangeType(id) {
|
changeType(id).then((res) => {
|
createMessage.success(res.msg);
|
reload();
|
});
|
}
|
function handleAdd(e) {
|
addOrUpdateHandle('', e.key);
|
}
|
async function getOptions() {
|
const res = await baseStore.getDictionaryData('businessType');
|
categoryList.value = res as any[];
|
getForm().updateSchema({ field: 'category', componentProps: { options: res } });
|
}
|
function getFlowTypeName(type) {
|
if (type === 0) return '标准流程';
|
if (type === 1) return '简单流程';
|
if (type === 2) return '任务流程';
|
return '';
|
}
|
function handleUpOrDown(record) {
|
record.status == 1 ? handleDownFlow(record) : handleUpFlow(record);
|
}
|
function handleUpFlow(data) {
|
createConfirm({
|
iconType: 'warning',
|
title: $t('common.tipTitle'),
|
content: '此操作将上架该流程，是否继续？',
|
onOk: () => {
|
upDownShelf({ id: data.id, isUp: 0 }).then((res) => {
|
createMessage.success(res.msg);
|
reload();
|
});
|
},
|
});
|
}
|
function handleDownFlow(data) {
|
const formData = ref({
|
isHidden: 0, // 默认选中的值
|
});
|
const formInstance: any = ref(null);
|
createConfirm({
|
iconType: 'warning',
|
title: $t('common.tipTitle'),
|
content: () => {
|
return createVNode(
|
vueForm,
|
{
|
model: formData.value,
|
ref: (instance) => (formInstance.value = instance),
|
layout: 'vertical',
|
class: 'downFlow-confirm',
|
},
|
{
|
default: () => [
|
createVNode(
|
FormItem,
|
{
|
label: '此操作将下架该流程，下架后未审批完成的流程',
|
name: 'isHidden',
|
class: 'downFlow-label',
|
},
|
{
|
default: () =>
|
createVNode(
|
RadioGroup,
|
{
|
value: formData.value.isHidden,
|
'onUpdate:value': (value) => (formData.value.isHidden = value),
|
},
|
{
|
default: () => [
|
createVNode(Radio, { value: 0 }, { default: () => '继续审批' }),
|
createVNode(Radio, { value: 1 }, { default: () => '隐藏审批数据' }),
|
],
|
},
|
),
|
},
|
),
|
],
|
},
|
);
|
},
|
onOk,
|
});
|
function onOk() {
|
return formInstance.value
|
?.validate()
|
.then(() => {
|
upDownShelf({ id: data.id, isUp: 1, ...formData.value }).then((res) => {
|
createMessage.success(res.msg);
|
reload();
|
});
|
})
|
.catch(() => {
|
throw new Error('fail'); // 阻止 Modal 关闭
|
});
|
}
|
}
|
function handleCopyID(id) {
|
if (!id) return;
|
copy(id);
|
createMessage.success('复制成功');
|
}
|
|
onMounted(() => {
|
getOptions();
|
});
|
</script>
|
<template>
|
<div class="jnpf-content-wrapper">
|
<div class="jnpf-content-wrapper-center">
|
<div class="jnpf-content-wrapper-content">
|
<BasicVxeTable @register="registerTable">
|
<template #tableTitle>
|
<a-dropdown>
|
<template #overlay>
|
<a-menu @click="handleAdd">
|
<a-menu-item :key="0">标准流程</a-menu-item>
|
<a-menu-item :key="1">简单流程</a-menu-item>
|
<a-menu-item :key="2">任务流程</a-menu-item>
|
</a-menu>
|
</template>
|
<a-button pre-icon="icon-ym icon-ym-btn-add" type="primary">{{ $t('common.addText') }}<DownOutlined /></a-button>
|
</a-dropdown>
|
<jnpf-upload-btn accept=".ffe" url="/api/workflow/template/Actions/Import" @on-success="reload" />
|
</template>
|
<template #enabledMark="{ record }">
|
<a-tag :color="record.enabledMark == 1 ? 'success' : ''">{{ record.enabledMark == 1 ? '已发布' : '未发布' }}</a-tag>
|
</template>
|
<template #status="{ record }">
|
<a-tag :color="record.status === 0 ? '' : record.status == 1 ? 'success' : 'error'">
|
{{ record.status === 0 ? '未上架' : record.status === 1 ? '已上架' : '已下架' }}
|
</a-tag>
|
</template>
|
<template #action="{ record }">
|
<TableAction :actions="getTableActions(record)" :drop-down-actions="getDropDownActions(record)" />
|
</template>
|
</BasicVxeTable>
|
</div>
|
</div>
|
<Form @design="handleDesign" @register="registerForm" @reload="reload" />
|
<DesignForm @register="registerDesignForm" @reload="reload" />
|
</div>
|
</template>
|
