流程表单

流程表单即发起流程填写的表单，实现流程表单主要有：.vue自定义表单和元数据表单两种方式。

自定义表单

自定义表单是使用vue组件的方式，可以自己定义表单的布局、逻辑，只需要满足#/views/**/wf-form/*.vue路径的.vue文件，即可作为流程表单，且会出现在流程设计器的流程表单配置下拉选项中，下面以请假表单为例： #/views/wf/process-define/wf-form/leave-wf-form.vue.vue为例,进行说明。

<script setup lang="ts">
import { useVbenForm, type VbenFormProps } from '#/adapter/form';
import { FormDescription } from '#/components/form-description';

defineOptions({
  name: 'LeaveWfForm',
  title: '请假表单',
});
defineProps({
  processDefine: {
    type: Object,
    default: () => {},
  },
  processInstance: {
    type: Object,
    default: () => {},
  },
  processTask: {
    type: Object,
    default: () => {},
  },
  view: {
    type: Boolean,
    default: false,
  },
});
const formOptions: VbenFormProps = {
  showDefaultActions: false,
  schema: [
    {
      fieldName: 'f_reasonType',
      label: '请假类型',
      component: 'ApiDict',
      rules: 'required',
      componentProps: {
        placeholder: '请选择请假类型',
        code: 'biz_leave_reason_type',
        allowClear: true,
      },
    },
    {
      fieldName: 'f_startTime',
      label: '开始时间',
      component: 'DatePicker',
      rules: 'required',
      componentProps: {
        class: 'w-full',
        format: 'YYYY-MM-DD',
        valueFormat: 'YYYY-MM-DD',
      },
    },
    {
      fieldName: 'f_endTime',
      label: '结束时间',
      component: 'DatePicker',
      rules: 'required',
      componentProps: {
        class: 'w-full',
        format: 'YYYY-MM-DD',
        valueFormat: 'YYYY-MM-DD',
      },
    },
    {
      fieldName: 'f_day',
      label: '请假天数',
      rules: 'required',
      component: 'InputNumber',
      componentProps: {
        placeholder: '请假天数由起止时间计算得出',
        class: 'w-full',
        readonly: true,
      },
      dependencies: {
        triggerFields: ['f_startTime', 'f_endTime'],
        trigger(values, formApi) {
          const { f_startTime, f_endTime } = values;
          if (f_startTime && f_endTime) {
            // 使用Date对象计算天数差
            const start = new Date(f_startTime);
            const end = new Date(f_endTime);
            const timeDiff = Math.abs(end.getTime() - start.getTime());
            const diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24)) + 1; // 加1因为包括开始和结束日期
            formApi.setValues({
              f_day: diffDays,
            });
          } else {
            // 如果开始时间或结束时间未设置，则清空天数
            formApi.setValues({
              f_day: undefined,
            });
          }
        },
      },
    },
    {
      fieldName: 'f_title',
      label: '请假原因',
      rules: 'required',
      component: 'Textarea',
      componentProps: {
        placeholder: '请输入请假原因',
      },
    },
    {
      fieldName: 'f_attachment',
      label: '上传附件',
      component: 'Upload',
      componentProps: {},
    },
  ],
};
const [BasicForm, formApi] = useVbenForm(formOptions);
defineExpose({
  getFormApi() {
    return formApi;
  },
});
</script>
<template>
  <FormDescription
    v-if="view"
    :data="processInstance?.formData"
    :form-options="formOptions"
  />
  <BasicForm v-else />
</template>

配置说明

基本配置

defineOptions({
  name: 'LeaveWfForm',
  title: '请假表单',
});

name: 组件名称，用于流程设计器中流程表单配置下拉选项的唯一编码
title: 组件标题，用于流程设计器中流程表单配置下拉选项显示

属性配置

defineProps({
  processDefine: { // 流程定义对象
    type: Object,
    default: () => {},
  },
  processInstance: { // 流程实例对象
    type: Object,
    default: () => {},
  },
  processTask: {  // 流程任务对象
    type: Object,
    default: () => {},
  },
  view: { // 是否为查看模式
    type: Boolean,
    default: false,
  },
});

导出方法说明

defineExpose({
  getFormApi() {
    return formApi;
  },
});