feat: 流程配置页（节点链编辑、出厂模板、版本历史，ADR 0015）
This commit is contained in:
@@ -0,0 +1,52 @@
|
||||
import request from '@/utils/request';
|
||||
import type { ApiResult } from '@/api';
|
||||
import { THINK_API_URL } from '@/config/setting';
|
||||
import type {
|
||||
ApprovalFlow,
|
||||
ApprovalFlowNode,
|
||||
ApprovalFlowVersion
|
||||
} from './model';
|
||||
|
||||
/**
|
||||
* 流程定义列表（当前版本与出厂模板）
|
||||
*/
|
||||
export async function listFlowConfigs() {
|
||||
const res = await request.get<ApiResult<ApprovalFlow[]>>(
|
||||
THINK_API_URL + '/approval/flow'
|
||||
);
|
||||
if (res.data.code === 0 && res.data.data) {
|
||||
return res.data.data;
|
||||
}
|
||||
return Promise.reject(new Error(res.data.message));
|
||||
}
|
||||
|
||||
/**
|
||||
* 流程定义历史版本
|
||||
*/
|
||||
export async function listFlowHistory(flowCode: string) {
|
||||
const res = await request.get<ApiResult<ApprovalFlowVersion[]>>(
|
||||
THINK_API_URL + '/approval/flow/history',
|
||||
{ params: { flowCode } }
|
||||
);
|
||||
if (res.data.code === 0 && res.data.data) {
|
||||
return res.data.data;
|
||||
}
|
||||
return Promise.reject(new Error(res.data.message));
|
||||
}
|
||||
|
||||
/**
|
||||
* 发布流程定义新版本（保存即发布）
|
||||
*/
|
||||
export async function publishFlowConfig(data: {
|
||||
flowCode: string;
|
||||
nodes: ApprovalFlowNode[];
|
||||
}) {
|
||||
const res = await request.post<ApiResult<ApprovalFlow>>(
|
||||
THINK_API_URL + '/approval/flow/publish',
|
||||
data
|
||||
);
|
||||
if (res.data.code === 0 && res.data.data) {
|
||||
return res.data.data;
|
||||
}
|
||||
return Promise.reject(new Error(res.data.message));
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
/**
|
||||
* 流程节点会签组（与后端 ApprovalNode.ApprovalGroup 对应）
|
||||
*/
|
||||
export interface ApprovalFlowNodeGroup {
|
||||
key: string;
|
||||
name: string;
|
||||
resolver?: string;
|
||||
orgCode?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 流程节点回填字段（与后端 ApprovalNode.WritableField 对应）
|
||||
*/
|
||||
export interface ApprovalFlowWritableField {
|
||||
field: string;
|
||||
required: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* 流程节点（与后端 ApprovalNode 对应）
|
||||
*/
|
||||
export interface ApprovalFlowNode {
|
||||
key: string;
|
||||
type: string;
|
||||
resolver?: string;
|
||||
orgCode?: string;
|
||||
name: string;
|
||||
groups?: ApprovalFlowNodeGroup[];
|
||||
writableFields?: ApprovalFlowWritableField[];
|
||||
}
|
||||
|
||||
/**
|
||||
* 可写字段元数据（与后端 ApprovalFieldSpec 对应）
|
||||
*/
|
||||
export interface ApprovalFieldSpec {
|
||||
key: string;
|
||||
label: string;
|
||||
maxLength?: number;
|
||||
unique?: boolean;
|
||||
type?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 流程定义当前版本
|
||||
*/
|
||||
export interface ApprovalFlow {
|
||||
flowCode: string;
|
||||
flowName: string;
|
||||
version?: number;
|
||||
definitionId?: number;
|
||||
publishTime?: string;
|
||||
nodes: ApprovalFlowNode[];
|
||||
factoryNodes: ApprovalFlowNode[];
|
||||
factoryVersion?: number;
|
||||
fieldSpecs: ApprovalFieldSpec[];
|
||||
resolvers: string[];
|
||||
}
|
||||
|
||||
/**
|
||||
* 流程定义历史版本
|
||||
*/
|
||||
export interface ApprovalFlowVersion {
|
||||
definitionId: number;
|
||||
version: number;
|
||||
name: string;
|
||||
publishTime?: string;
|
||||
nodes: ApprovalFlowNode[];
|
||||
}
|
||||
@@ -0,0 +1,337 @@
|
||||
<!-- 流程节点编辑卡片（ADR 0015）：节点字段 + 会签组 + 回填字段 -->
|
||||
<template>
|
||||
<a-card size="small" class="node-card">
|
||||
<template #title>
|
||||
<span>{{ index + 1 }}. {{ form.name || '未命名节点' }}</span>
|
||||
<a-tag color="blue" style="margin-left: 8px">
|
||||
{{ nodeTypeLabel(form.type) }}
|
||||
</a-tag>
|
||||
</template>
|
||||
<template #extra>
|
||||
<a-space :size="4">
|
||||
<a-button
|
||||
type="link"
|
||||
size="small"
|
||||
:disabled="index === 0"
|
||||
@click="emit('move', -1)"
|
||||
>
|
||||
上移
|
||||
</a-button>
|
||||
<a-button
|
||||
type="link"
|
||||
size="small"
|
||||
:disabled="index === total - 1"
|
||||
@click="emit('move', 1)"
|
||||
>
|
||||
下移
|
||||
</a-button>
|
||||
<a-button type="link" danger size="small" @click="emit('remove')">
|
||||
删除
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
<a-form layout="vertical">
|
||||
<a-row :gutter="16">
|
||||
<a-col :md="8" :sm="24">
|
||||
<a-form-item label="节点名称">
|
||||
<a-input
|
||||
v-model:value="form.name"
|
||||
allow-clear
|
||||
:maxlength="50"
|
||||
placeholder="如：报送部门负责人"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="8" :sm="24">
|
||||
<a-form-item label="节点标识">
|
||||
<a-input
|
||||
v-model:value="form.key"
|
||||
allow-clear
|
||||
:maxlength="40"
|
||||
placeholder="同一流程内唯一，如：deptLeader"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="8" :sm="24">
|
||||
<a-form-item label="节点类型">
|
||||
<a-select v-model:value="form.type" :options="NODE_TYPE_OPTIONS" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col v-if="form.type !== 'COUNTERSIGN'" :md="8" :sm="24">
|
||||
<a-form-item label="审批人解析器">
|
||||
<a-select
|
||||
v-model:value="form.resolver"
|
||||
:options="resolverOptions"
|
||||
allow-clear
|
||||
show-search
|
||||
option-filter-prop="label"
|
||||
placeholder="选择解析器"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col v-if="needOrgCode" :md="8" :sm="24">
|
||||
<a-form-item label="组织编码">
|
||||
<a-select
|
||||
v-model:value="form.orgCode"
|
||||
:options="orgOptions"
|
||||
allow-clear
|
||||
show-search
|
||||
option-filter-prop="label"
|
||||
placeholder="选择组织"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<div v-if="form.type === 'COUNTERSIGN'" class="node-section">
|
||||
<div class="node-section-title">
|
||||
<span>会签组（组内或签，组间会签）</span>
|
||||
<a-button type="link" size="small" @click="addGroup">
|
||||
添加会签组
|
||||
</a-button>
|
||||
</div>
|
||||
<a-row
|
||||
v-for="(group, groupIndex) in form.groups"
|
||||
:key="groupIndex"
|
||||
:gutter="12"
|
||||
>
|
||||
<a-col :md="5" :sm="24">
|
||||
<a-form-item label="组标识">
|
||||
<a-input v-model:value="group.key" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="5" :sm="24">
|
||||
<a-form-item label="组名称">
|
||||
<a-input v-model:value="group.name" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="6" :sm="24">
|
||||
<a-form-item label="解析器">
|
||||
<a-select
|
||||
v-model:value="group.resolver"
|
||||
:options="resolverOptions"
|
||||
option-filter-prop="label"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col v-if="isOrgResolver(group.resolver)" :md="6" :sm="24">
|
||||
<a-form-item label="组织编码">
|
||||
<a-select
|
||||
v-model:value="group.orgCode"
|
||||
:options="orgOptions"
|
||||
allow-clear
|
||||
show-search
|
||||
option-filter-prop="label"
|
||||
placeholder="选择组织"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="2" :sm="24">
|
||||
<a-form-item label=" ">
|
||||
<a-button type="link" danger @click="removeGroup(groupIndex)">
|
||||
删除
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
|
||||
<div v-if="writableVisible" class="node-section">
|
||||
<div class="node-section-title">
|
||||
<span>回填字段</span>
|
||||
<a-button type="link" size="small" @click="addField">
|
||||
添加回填字段
|
||||
</a-button>
|
||||
</div>
|
||||
<a-row
|
||||
v-for="(field, fieldIndex) in form.writableFields"
|
||||
:key="fieldIndex"
|
||||
:gutter="12"
|
||||
>
|
||||
<a-col :md="8" :sm="24">
|
||||
<a-form-item label="字段">
|
||||
<a-select
|
||||
v-model:value="field.field"
|
||||
:options="fieldOptions"
|
||||
show-search
|
||||
option-filter-prop="label"
|
||||
placeholder="选择可回填字段"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="4" :sm="24">
|
||||
<a-form-item label="必填">
|
||||
<a-switch v-model:checked="field.required" size="small" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="4" :sm="24">
|
||||
<a-form-item label=" ">
|
||||
<a-button type="link" danger @click="removeField(fieldIndex)">
|
||||
删除
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</a-form>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, reactive, watch } from 'vue';
|
||||
import {
|
||||
NODE_TYPE_OPTIONS,
|
||||
ORG_RESOLVERS,
|
||||
WRITABLE_TYPES,
|
||||
nodeTypeLabel
|
||||
} from '../constants';
|
||||
import type {
|
||||
ApprovalFieldSpec,
|
||||
ApprovalFlowNode,
|
||||
ApprovalFlowNodeGroup
|
||||
} from '@/api/approval/flow/model';
|
||||
import type { ApprovalOrganization } from '@/api/approval/instance/model';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update', node: ApprovalFlowNode): void;
|
||||
(e: 'remove'): void;
|
||||
(e: 'move', step: number): void;
|
||||
}>();
|
||||
|
||||
const props = defineProps<{
|
||||
node: ApprovalFlowNode;
|
||||
index: number;
|
||||
total: number;
|
||||
resolvers: string[];
|
||||
organizations: ApprovalOrganization[];
|
||||
fieldSpecs: ApprovalFieldSpec[];
|
||||
}>();
|
||||
|
||||
const form = reactive<ApprovalFlowNode>({
|
||||
key: props.node.key,
|
||||
type: props.node.type,
|
||||
resolver: props.node.resolver,
|
||||
orgCode: props.node.orgCode,
|
||||
name: props.node.name,
|
||||
groups: (props.node.groups || []).map((group) => ({ ...group })),
|
||||
writableFields: (props.node.writableFields || []).map((field) => ({
|
||||
...field
|
||||
}))
|
||||
});
|
||||
|
||||
const isOrgResolver = (resolver?: string) => {
|
||||
return !!resolver && ORG_RESOLVERS.indexOf(resolver) !== -1;
|
||||
};
|
||||
|
||||
const needOrgCode = computed(() => isOrgResolver(form.resolver));
|
||||
|
||||
const writableVisible = computed(() => {
|
||||
return (
|
||||
WRITABLE_TYPES.indexOf(form.type) !== -1 && props.fieldSpecs.length > 0
|
||||
);
|
||||
});
|
||||
|
||||
const resolverOptions = computed(() => {
|
||||
return props.resolvers.map((resolver) => ({
|
||||
value: resolver,
|
||||
label: resolver
|
||||
}));
|
||||
});
|
||||
|
||||
const orgOptions = computed(() => {
|
||||
return props.organizations.map((organization) => ({
|
||||
value: organization.organizationCode,
|
||||
label:
|
||||
organization.organizationFullName || organization.organizationName || ''
|
||||
}));
|
||||
});
|
||||
|
||||
const fieldOptions = computed(() => {
|
||||
return props.fieldSpecs.map((spec) => ({
|
||||
value: spec.key,
|
||||
label: spec.label + '（' + spec.key + '）'
|
||||
}));
|
||||
});
|
||||
|
||||
const addGroup = () => {
|
||||
const group: ApprovalFlowNodeGroup = {
|
||||
key: 'group' + ((form.groups ? form.groups.length : 0) + 1),
|
||||
name: '会签组' + ((form.groups ? form.groups.length : 0) + 1),
|
||||
resolver: 'orgLeaderByCode'
|
||||
};
|
||||
form.groups = [...(form.groups || []), group];
|
||||
};
|
||||
|
||||
const removeGroup = (index: number) => {
|
||||
form.groups = (form.groups || []).filter((item, i) => i !== index);
|
||||
};
|
||||
|
||||
const addField = () => {
|
||||
if (!props.fieldSpecs.length) {
|
||||
return;
|
||||
}
|
||||
form.writableFields = [
|
||||
...(form.writableFields || []),
|
||||
{ field: props.fieldSpecs[0].key, required: false }
|
||||
];
|
||||
};
|
||||
|
||||
const removeField = (index: number) => {
|
||||
form.writableFields = (form.writableFields || []).filter(
|
||||
(item, i) => i !== index
|
||||
);
|
||||
};
|
||||
|
||||
/* 节点类型切换时同步清理不适用的配置，避免提交被后端拦下 */
|
||||
watch(
|
||||
() => form.type,
|
||||
(type) => {
|
||||
if (type === 'COUNTERSIGN') {
|
||||
form.resolver = undefined;
|
||||
form.orgCode = undefined;
|
||||
if (!form.groups || !form.groups.length) {
|
||||
addGroup();
|
||||
}
|
||||
} else if (form.groups && form.groups.length) {
|
||||
form.groups = [];
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
/* 换了非按组织取人的解析器，组织编码就不再适用 */
|
||||
watch(
|
||||
() => form.resolver,
|
||||
(resolver) => {
|
||||
if (!isOrgResolver(resolver)) {
|
||||
form.orgCode = undefined;
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
form,
|
||||
() => {
|
||||
emit('update', { ...form });
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.node-card {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.node-section {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.node-section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 4px;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,22 @@
|
||||
/**
|
||||
* 流程节点类型（与后端 ApprovalConstants 对应）
|
||||
*/
|
||||
export const NODE_TYPE_OPTIONS = [
|
||||
{ value: 'APPROVE', label: '审批（或签）' },
|
||||
{ value: 'COUNTERSIGN', label: '会签' },
|
||||
{ value: 'DISPATCH', label: '派单' },
|
||||
{ value: 'CONFIRM', label: '存档' },
|
||||
{ value: 'ARCHIVE', label: '归档' }
|
||||
];
|
||||
|
||||
/** 需要固定组织编码的解析器 */
|
||||
export const ORG_RESOLVERS = ['orgLeaderByCode', 'orgDeputyByCode'];
|
||||
|
||||
/** 可配置回填字段的节点类型 */
|
||||
export const WRITABLE_TYPES = ['APPROVE', 'COUNTERSIGN', 'CONFIRM'];
|
||||
|
||||
/** 节点类型显示名 */
|
||||
export function nodeTypeLabel(type?: string) {
|
||||
const item = NODE_TYPE_OPTIONS.find((option) => option.value === type);
|
||||
return item ? item.label : type || '';
|
||||
}
|
||||
@@ -0,0 +1,364 @@
|
||||
<!-- 流程配置（ADR 0015）：编辑节点链并发布新版本 -->
|
||||
<template>
|
||||
<div class="ele-body">
|
||||
<a-card :bordered="false" :body-style="{ padding: '16px' }">
|
||||
<ele-split-layout
|
||||
width="320px"
|
||||
allow-collapse
|
||||
:style="{ minHeight: 'calc(100vh - 152px)' }"
|
||||
>
|
||||
<a-spin :spinning="loading">
|
||||
<a-list :data-source="flows" size="small">
|
||||
<template #renderItem="{ item }">
|
||||
<a-list-item
|
||||
class="flow-item"
|
||||
:class="{ 'flow-item-active': item.flowCode === flowCode }"
|
||||
@click="selectFlow(item)"
|
||||
>
|
||||
<div class="flow-item-body">
|
||||
<div class="flow-item-title">{{ item.flowName }}</div>
|
||||
<div class="flow-item-meta">
|
||||
{{
|
||||
item.version ? '当前版本 v' + item.version : '尚未发布'
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</a-list-item>
|
||||
</template>
|
||||
</a-list>
|
||||
</a-spin>
|
||||
<template #content>
|
||||
<div v-if="current">
|
||||
<a-alert
|
||||
type="warning"
|
||||
show-icon
|
||||
message="保存即发布新版本，仅对之后提交的单据生效；已提交的单据继续走原版本。"
|
||||
style="margin-bottom: 12px"
|
||||
/>
|
||||
<div class="flow-toolbar">
|
||||
<div class="flow-toolbar-title">
|
||||
{{ current.flowName }}
|
||||
<span class="ele-text-secondary flow-toolbar-meta">
|
||||
{{
|
||||
current.version
|
||||
? 'v' + current.version + ' · ' + current.publishTime
|
||||
: '尚未发布（出厂模板 v' + current.factoryVersion + '）'
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
<a-space :size="8">
|
||||
<a-button @click="loadFactory">载入出厂模板</a-button>
|
||||
<a-button :disabled="!current.version" @click="openHistory">
|
||||
版本历史
|
||||
</a-button>
|
||||
<a-button
|
||||
v-permission="'approval:flow:publish'"
|
||||
type="primary"
|
||||
:loading="saving"
|
||||
@click="publish"
|
||||
>
|
||||
保存并发布
|
||||
</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
<a-empty
|
||||
v-if="!nodes.length"
|
||||
description="该流程尚未发布，点击「载入出厂模板」开始编辑"
|
||||
/>
|
||||
<node-card
|
||||
v-for="(node, index) in nodes"
|
||||
:key="editorRevision + '-' + index + '-' + node.key"
|
||||
:node="node"
|
||||
:index="index"
|
||||
:total="nodes.length"
|
||||
:resolvers="current.resolvers || []"
|
||||
:organizations="organizations"
|
||||
:field-specs="current.fieldSpecs || []"
|
||||
@update="updateNode(index, $event)"
|
||||
@remove="removeNode(index)"
|
||||
@move="moveNode(index, $event)"
|
||||
/>
|
||||
<a-button
|
||||
v-if="nodes.length"
|
||||
type="dashed"
|
||||
block
|
||||
class="flow-add"
|
||||
@click="addNode"
|
||||
>
|
||||
添加节点
|
||||
</a-button>
|
||||
</div>
|
||||
<a-empty v-else description="请选择左侧流程" />
|
||||
</template>
|
||||
</ele-split-layout>
|
||||
</a-card>
|
||||
<a-drawer v-model:open="historyVisible" title="版本历史" :width="560">
|
||||
<a-spin :spinning="historyLoading">
|
||||
<a-empty v-if="!history.length" description="暂无版本" />
|
||||
<a-card
|
||||
v-for="item in history"
|
||||
:key="item.definitionId"
|
||||
size="small"
|
||||
class="history-card"
|
||||
>
|
||||
<template #title>
|
||||
<span>v{{ item.version }}</span>
|
||||
<span class="ele-text-secondary" style="margin-left: 8px">
|
||||
{{ item.publishTime }}
|
||||
</span>
|
||||
</template>
|
||||
<template #extra>
|
||||
<a-button type="link" size="small" @click="loadVersion(item)">
|
||||
以此版本为蓝本
|
||||
</a-button>
|
||||
</template>
|
||||
<div
|
||||
v-for="(node, nodeIndex) in item.nodes"
|
||||
:key="nodeIndex"
|
||||
class="history-node"
|
||||
>
|
||||
{{ nodeIndex + 1 }}. {{ node.name }}（{{
|
||||
nodeTypeLabel(node.type)
|
||||
}}）
|
||||
</div>
|
||||
</a-card>
|
||||
</a-spin>
|
||||
</a-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { Modal, message } from 'ant-design-vue';
|
||||
import {
|
||||
listFlowConfigs,
|
||||
listFlowHistory,
|
||||
publishFlowConfig
|
||||
} from '@/api/approval/flow';
|
||||
import { listApprovalOrganizations } from '@/api/approval/directory';
|
||||
import NodeCard from './components/node-card.vue';
|
||||
import { nodeTypeLabel } from './constants';
|
||||
import type {
|
||||
ApprovalFlow,
|
||||
ApprovalFlowNode,
|
||||
ApprovalFlowVersion
|
||||
} from '@/api/approval/flow/model';
|
||||
import type { ApprovalOrganization } from '@/api/approval/instance/model';
|
||||
|
||||
/* 深拷贝节点：编辑区不能直接改列表里的对象 */
|
||||
const cloneNodes = (nodes?: ApprovalFlowNode[]) => {
|
||||
return JSON.parse(JSON.stringify(nodes || [])) as ApprovalFlowNode[];
|
||||
};
|
||||
|
||||
const loading = ref(false);
|
||||
const saving = ref(false);
|
||||
const flows = ref<ApprovalFlow[]>([]);
|
||||
const current = ref<ApprovalFlow | null>(null);
|
||||
const flowCode = ref('');
|
||||
const nodes = ref<ApprovalFlowNode[]>([]);
|
||||
const editorRevision = ref(0);
|
||||
const organizations = ref<ApprovalOrganization[]>([]);
|
||||
const historyVisible = ref(false);
|
||||
const historyLoading = ref(false);
|
||||
const history = ref<ApprovalFlowVersion[]>([]);
|
||||
|
||||
/* 加载编辑区：整链替换时递增 revision，强制节点卡片重新初始化 */
|
||||
const applyFlow = (flow: ApprovalFlow) => {
|
||||
current.value = flow;
|
||||
flowCode.value = flow.flowCode;
|
||||
nodes.value = cloneNodes(flow.nodes);
|
||||
editorRevision.value = editorRevision.value + 1;
|
||||
};
|
||||
|
||||
const refreshFlows = (keepCode?: string) => {
|
||||
loading.value = true;
|
||||
return listFlowConfigs()
|
||||
.then((data) => {
|
||||
loading.value = false;
|
||||
flows.value = data;
|
||||
const code = keepCode || flowCode.value;
|
||||
const item = data.find((flow) => flow.flowCode === code);
|
||||
if (item) {
|
||||
applyFlow(item);
|
||||
}
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
const selectFlow = (flow: ApprovalFlow) => {
|
||||
applyFlow(flow);
|
||||
};
|
||||
|
||||
const updateNode = (index: number, node: ApprovalFlowNode) => {
|
||||
const list = [...nodes.value];
|
||||
list[index] = node;
|
||||
nodes.value = list;
|
||||
};
|
||||
|
||||
const removeNode = (index: number) => {
|
||||
nodes.value = nodes.value.filter((item, i) => i !== index);
|
||||
};
|
||||
|
||||
const moveNode = (index: number, step: number) => {
|
||||
const target = index + step;
|
||||
if (target < 0 || target >= nodes.value.length) {
|
||||
return;
|
||||
}
|
||||
const list = [...nodes.value];
|
||||
const temp = list[index];
|
||||
list[index] = list[target];
|
||||
list[target] = temp;
|
||||
nodes.value = list;
|
||||
editorRevision.value = editorRevision.value + 1;
|
||||
};
|
||||
|
||||
const addNode = () => {
|
||||
const next: ApprovalFlowNode = {
|
||||
key: 'node' + (nodes.value.length + 1),
|
||||
type: 'APPROVE',
|
||||
name: '新节点',
|
||||
resolver: 'reporterOrgLeader'
|
||||
};
|
||||
nodes.value = [...nodes.value, next];
|
||||
};
|
||||
|
||||
const loadFactory = () => {
|
||||
if (!current.value) {
|
||||
return;
|
||||
}
|
||||
Modal.confirm({
|
||||
title: '载入出厂模板？',
|
||||
content:
|
||||
'会用代码里声明的节点覆盖当前编辑区，需要再点「保存并发布」才生效。',
|
||||
okText: '载入',
|
||||
cancelText: '取消',
|
||||
onOk: () => {
|
||||
nodes.value = cloneNodes(current.value?.factoryNodes);
|
||||
editorRevision.value = editorRevision.value + 1;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const openHistory = () => {
|
||||
if (!current.value) {
|
||||
return;
|
||||
}
|
||||
historyVisible.value = true;
|
||||
historyLoading.value = true;
|
||||
listFlowHistory(current.value.flowCode)
|
||||
.then((data) => {
|
||||
historyLoading.value = false;
|
||||
history.value = data;
|
||||
})
|
||||
.catch((e) => {
|
||||
historyLoading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
const loadVersion = (item: ApprovalFlowVersion) => {
|
||||
nodes.value = cloneNodes(item.nodes);
|
||||
editorRevision.value = editorRevision.value + 1;
|
||||
historyVisible.value = false;
|
||||
message.info('已载入 v' + item.version + '，确认后点「保存并发布」');
|
||||
};
|
||||
|
||||
const publish = () => {
|
||||
if (!current.value) {
|
||||
return;
|
||||
}
|
||||
if (!nodes.value.length) {
|
||||
message.warning('请先配置流程节点');
|
||||
return;
|
||||
}
|
||||
Modal.confirm({
|
||||
title: '确认发布新版本？',
|
||||
content:
|
||||
'保存即发布，立即对之后提交的单据生效；已提交的单据继续走原版本。',
|
||||
okText: '发布',
|
||||
cancelText: '取消',
|
||||
onOk: () => {
|
||||
saving.value = true;
|
||||
return publishFlowConfig({
|
||||
flowCode: current.value!.flowCode,
|
||||
nodes: nodes.value
|
||||
})
|
||||
.then((data) => {
|
||||
saving.value = false;
|
||||
message.success('已发布 v' + data.version);
|
||||
return refreshFlows(data.flowCode);
|
||||
})
|
||||
.catch((e) => {
|
||||
saving.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
refreshFlows();
|
||||
listApprovalOrganizations()
|
||||
.then((data) => {
|
||||
organizations.value = data;
|
||||
})
|
||||
.catch(() => {});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.flow-item {
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.flow-item-active {
|
||||
background: rgba(24, 144, 255, 0.08);
|
||||
}
|
||||
|
||||
.flow-item-title {
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.flow-item-meta {
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.flow-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.flow-toolbar-title {
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.flow-toolbar-meta {
|
||||
margin-left: 8px;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.flow-add {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.history-card {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.history-node {
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
line-height: 24px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user