feat: 流程配置页（节点链编辑、出厂模板、版本历史，ADR 0015）
This commit is contained in:
@@ -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>
|
||||
Reference in New Issue
Block a user