feat(projects): 流程定义添加设计器样式等拓展字段,优化流程分类下拉组件

This commit is contained in:
AN
2025-09-03 14:31:50 +08:00
parent b70095e5ff
commit f739e1e031
5 changed files with 99 additions and 12 deletions

View File

@ -15,6 +15,7 @@ defineProps<Props>();
const rawValue = defineModel<CommonType.IdType | null>('value', { required: false });
const options = defineModel<Api.Common.CommonTreeRecord>('options', { required: false, default: [] });
const expandedKeys = defineModel<CommonType.IdType[]>('expandedKeys', { required: false, default: [] });
const attrs: TreeSelectProps = useAttrs();
const { loading, startLoading, endLoading } = useLoading();
@ -34,6 +35,10 @@ async function getCategoryList() {
const { error, data } = await fetchGetCategoryTree();
if (error) return;
options.value = data;
// 设置默认展开的节点
if (data?.length && !expandedKeys.value.length) {
expandedKeys.value = [data[0].id];
}
endLoading();
}
@ -43,13 +48,13 @@ getCategoryList();
<template>
<NTreeSelect
v-model:value="strValue"
v-model:expanded-keys="expandedKeys"
filterable
class="h-full"
:loading="loading"
key-field="id"
label-field="label"
:options="options as []"
:default-expanded-keys="[0]"
v-bind="attrs"
/>
</template>

View File

@ -73,6 +73,14 @@ export const workflowNodeTypeRecord: Record<Api.Workflow.WorkflowNodeType, strin
export const workflowNodeTypeOptions = transformRecordToOption(workflowNodeTypeRecord);
/** definition designer mode */
export const definitionDesignerModeRecord: Record<Api.Workflow.DefinitionDesignerMode, string> = {
CLASSICS: '经典模式',
MIMIC: '仿钉钉模式'
};
export const definitionDesignerModeOptions = transformRecordToOption(definitionDesignerModeRecord);
/** activity status */
export const workflowActivityStatusRecord: Record<Api.Workflow.WorkflowActivityStatus, string> = {
0: '挂起',

View File

@ -122,6 +122,9 @@ declare namespace Api {
/** 工作流发布状态 */
type WorkflowPublishStatus = 0 | 1 | 9;
/** 设计器模式 */
type DefinitionDesignerMode = 'CLASSICS' | 'MIMIC';
/** definition */
type Definition = Common.CommonTenantRecord<{
/** 主键id */
@ -139,17 +142,19 @@ declare namespace Api {
/** 是否发布0未发布 1已发布 9失效 */
isPublish: WorkflowPublishStatus;
/** 审批表单是否自定义Y是 N否 */
formCustom: string;
formCustom: Api.Common.YesOrNoStatus;
/** 审批表单路径 */
formPath: string;
/** 流程激活状态0挂起 1激活 */
activityStatus: number;
activityStatus: WorkflowActivityStatus;
/** 监听器类型 */
listenerType: string;
/** 监听器路径 */
listenerPath: string;
/** 业务详情 存业务表对象json字符串 */
ext: string;
/** 设计器模式 */
modelValue: DefinitionDesignerMode;
/** 删除标志 */
delFlag: string;
}>;
@ -161,7 +166,10 @@ declare namespace Api {
/** definition operate params */
type DefinitionOperateParams = CommonType.RecordNullable<
Pick<Api.Workflow.Definition, 'id' | 'flowCode' | 'flowName' | 'category' | 'formPath'>
Pick<
Api.Workflow.Definition,
'id' | 'flowCode' | 'flowName' | 'category' | 'formPath' | 'formCustom' | 'modelValue' | 'ext'
>
>;
/** definition list */

View File

@ -1,8 +1,10 @@
<script setup lang="ts">
import { computed, reactive, ref, watch } from 'vue';
import type { SelectOption } from 'naive-ui';
import { definitionDesignerModeOptions } from '@/constants/workflow';
import { fetchCreateDefinition, fetchUpdateDefinition } from '@/service/api/workflow/definition';
import { useFormRules, useNaiveForm } from '@/hooks/common/form';
import { useDict } from '@/hooks/business/dict';
import { $t } from '@/locales';
defineOptions({
@ -24,6 +26,7 @@ interface Emits {
const emit = defineEmits<Emits>();
useDict('sys_yes_no');
const visible = defineModel<boolean>('visible', {
default: false
});
@ -51,31 +54,55 @@ type Model = Api.Workflow.DefinitionOperateParams;
const model: Model = reactive(createDefaultModel());
/** 是否自动通过 */
const autoPass = ref<boolean>(false);
function createDefaultModel(): Model {
return {
flowCode: '',
flowName: '',
category: '',
formPath: undefined
formPath: null,
formCustom: 'N',
modelValue: 'CLASSICS',
ext: ''
};
}
type RuleKey = Extract<keyof Model, 'flowCode' | 'flowName' | 'category'>;
type RuleKey = Extract<keyof Model, 'flowCode' | 'flowName' | 'category' | 'modelValue' | 'formCustom'>;
const rules: Record<RuleKey, App.Global.FormRule> = {
flowCode: createRequiredRule('流程编码不能为空'),
flowName: createRequiredRule('流程名称不能为空'),
category: createRequiredRule('流程类别不能为空')
category: createRequiredRule('流程类别不能为空'),
modelValue: createRequiredRule('设计器模式不能为空'),
formCustom: createRequiredRule('审批表单是否自定义不能为空')
};
function handleUpdateModelWhenEdit() {
if (props.operateType === 'add') {
Object.assign(model, createDefaultModel());
model.formCustom = 'N';
autoPass.value = false;
// 设置默认的 ext JSON
model.ext = JSON.stringify({ autoPass: false });
return;
}
if (props.operateType === 'edit' && props.rowData) {
Object.assign(model, props.rowData);
// 从 ext 字段解析 JSON 并设置 autoPass 值
try {
if (props.rowData.ext) {
const extData = JSON.parse(props.rowData.ext);
autoPass.value = extData.autoPass || false;
} else {
autoPass.value = false;
}
} catch {
// 如果解析失败,设置默认值
autoPass.value = false;
}
}
}
@ -86,16 +113,36 @@ function closeDrawer() {
async function handleSubmit() {
await validate();
// 将 autoPass 值序列化为 JSON 并存储到 ext 字段
model.ext = JSON.stringify({ autoPass: autoPass.value });
// request
if (props.operateType === 'add') {
const { flowCode, flowName, category, formPath } = model;
const { error } = await fetchCreateDefinition({ flowCode, flowName, category, formPath });
const { flowCode, flowName, category, formPath, modelValue, formCustom, ext } = model;
const { error } = await fetchCreateDefinition({
flowCode,
flowName,
category,
formPath: formPath || '',
modelValue,
formCustom,
ext
});
if (error) return;
}
if (props.operateType === 'edit') {
const { id, flowCode, flowName, category, formPath } = model;
const { error } = await fetchUpdateDefinition({ id, flowCode, flowName, category, formPath });
const { id, flowCode, flowName, category, formPath, modelValue, formCustom, ext } = model;
const { error } = await fetchUpdateDefinition({
id,
flowCode,
flowName,
category,
formPath: formPath || '',
modelValue,
formCustom,
ext
});
if (error) return;
}
@ -125,6 +172,25 @@ watch(visible, () => {
<NFormItem label="流程名称" path="flowName">
<NInput v-model:value="model.flowName" placeholder="请输入流程名称" />
</NFormItem>
<NFormItem label="设计器模式" path="modelValue">
<NRadioGroup v-model:value="model.modelValue" :disabled="operateType === 'edit'">
<NSpace>
<NRadioButton
v-for="option in definitionDesignerModeOptions"
:key="option.value"
:value="option.value"
:label="option.label"
/>
</NSpace>
</NRadioGroup>
</NFormItem>
<!-- 流程配置 -->
<NFormItem label="流程配置" path="ext">
<NCheckbox v-model:checked="autoPass" label="下一节点执行人是当前任务处理人自动审批" />
</NFormItem>
<NFormItem label="是否动态表单" path="formCustom">
<DictRadio v-model:value="model.formCustom" dict-code="sys_yes_no" />
</NFormItem>
<NFormItem label="审批表单路径" path="formPath">
<template #label>
<div class="flex-center">

View File

@ -55,7 +55,7 @@ function createDefaultModel(): Model {
methodParams: '',
viewSpel: '',
remark: '',
status: ''
status: '0'
};
}