FlowPages

设置文档中流程表单的弹窗类型：

drawerdialogwindow

安装

pnpm i @yusui/flow-pages @yusui/flow-design @yusui/form-design

使用

TIP

FlowPages 以 lodash.merge 的形式将传入配置和默认配置进行合并

// main.ts
import FlowPages, { CONFIG_DEFAULT, FlowForm } from '@yusui/flow-pages'
import { FlowDesign } from '@yusui/flow-design'
import { FormDesign } from '@yusui/form-design'
import '@yusui/flow-design/dist/styles/index.css'
import '@yusui/form-design/dist/styles/index.css'

import { request } from '@/api/request'

// 接下

const importedForms = import.meta.glob('../custom-form/**/*.vue')
const customForm = Object.fromEntries(Object.entries(importedForms).map(([key, module]) => [key.replace('../custom-form/', ''), module]))
app.use(FlowPages, {
  FlowDesign,
  FormDesign,
  request,
  userInfo: { userId: '1' }, // () => storage.get('user')
  customForm,
  useFlowFormOptions: {
    type: localStorage.getItem('useFlowFormType') as any ?? 'drawer',
    window: ['/yusui-tools/flow-pages/pages/flow-form/index'],
  },
  tabs: [
    ...CONFIG_DEFAULT.tabs!,
    { label: '默认隐藏', prop: 'test', display: false },
  ],
  tableOption: {
    border: false,
    stripe: false,
  },
  upload: {
    action: import.meta.env.VITE_UPLOAD_URL,
    headers: { Authorization: import.meta.env.VITE_TOKEN }, // ()=> ({ Authorization: storage.get('token') })
    download: row => window.open(row.fileUrl),
    preview: row => window.open(row.fileUrl),
  },
  buttonHandler(state) {
    return {
      flow_custom() {
        console.log(state)
        ElMessage.success('点击自定义按钮')
        return Promise.reject()
      },
    }
  },
})

// vite.config.ts
import { defineConfig } from 'vite'

export default defineConfig({
  optimizeDeps: {
    exclude: ['@yusui/flow-pages'],
  }
})

默认配置

import type { FlowPagesConfig } from '../types'

import FlowForm from '../flow-form/index.vue'
import InternalForm from '../flow-form/components/InternalForm.vue'
import UploadTable from '../flow-form/components/UploadTable.vue'
import FlowTrack from '../flow-form/components/FlowTrack.vue'

export const CONFIG_DEFAULT: FlowPagesConfig = {
  FlowDesign: {},
  FormDesign: {},
  FlowForm,
  request: {} as any,
  tabs: [
    { label: '审批表单', prop: 'formTab', component: InternalForm },
    { label: '附件资料', prop: 'fileTab', component: UploadTable },
    { label: '流程跟踪', prop: 'trackTab', component: FlowTrack },
  ],
  useFlowFormOptions: {
    type: 'drawer',
    window: ['', 'flow-form', 'left=0,top=0,width=1600,height=900'],
    overlay: {
      width: '80%',
      size: '80%',
      top: '100px',
      fullscreen: true,
      destroyOnClose: true,
    },
  },
  tableOption: {
    align: 'center',
    border: true,
    card: true,
    stripe: true,
    searchMenuSpan: 6,
    span: 24,
  },
  upload: {
    props: {
      fileName: 'fileOriginalName',
      fileType: 'fileType',
      fileSize: 'fileSize',
      fileUrl: 'fileUrl',
      res: 'res.data',
    },
  },
  flowParams: {
    'flow.approval.autocheck': true,
    'flow.approval.autocomment': true,
    'flow.approval.tree.horizontal': true,
  },
}

类型定义

import type { AsyncComponentLoader, Component } from 'vue'
import type { AxiosInstance, AxiosRequestConfig } from 'axios'
import type { AvueCrudOption } from '@smallwei/avue'
import type { TabsProps } from 'element-plus'
import type { Res } from '@yusui/types'
import type { FlowFile, FlowParamMap } from '../api'
import type { UseFlowFormOptions } from '../composables'
import type { ButtonHandler, FlowFormState } from '../flow-form'

export interface FlowFormTab {
  label?: string
  prop?: string
  disabled?: boolean
  lazy?: boolean
  closable?: boolean
  display?: boolean
  component?: Component
}

export interface FlowPagesConfig {
  /** 流程设计器 */
  FlowDesign?: Component
  /** 表单设计器 */
  FormDesign?: Component
  /** 流程表单 */
  FlowForm?: Component
  /** 审批表单弹窗 */
  ApprovalForm?: Component
  /** 流程表单标签页属性 */
  tabsProps?: Partial<TabsProps>
  /** 流程表单标签页配置 */
  tabs?: FlowFormTab[]
  /** axios实例 */
  request: RequestInstance
  /** 用户信息 */
  userInfo?: { userId?: string | number } | (() => { userId?: string | number })
  /** 自定义表单 */
  customForm?: Record<string, Component | AsyncComponentLoader>
  /** 打开流程表单弹窗的默认配置 */
  useFlowFormOptions?: UseFlowFormOptions
  /** 按钮处理 */
  buttonHandler?: (state: FlowFormState) => ButtonHandler
  /** avue表格统一配置 */
  tableOption?: AvueCrudOption
  /** 上传配置 */
  upload?: {
    /** 上传地址 */
    action?: string
    /** 请求头携带的参数，如token */
    headers?: object | (() => any)
    /** 预览实现函数 */
    preview?: (row: FlowFile, list: FlowFile[]) => any
    /** 下载实现函数 */
    download?: (row: FlowFile, list: FlowFile[]) => any
    /** 与流程文件对接的字段（如有变化则传入修改） */
    props?: {
      /** 文件名 */
      fileName?: string
      /** 文件类型 */
      fileType?: string
      /** 文件大小 */
      fileSize?: string
      /** 文件地址 */
      fileUrl?: string
      /** 上传成功后返回的数据 */
      res?: string
    }
  }
  /** 流程参数 */
  flowParams?: Partial<FlowParamMap>
}

export interface RequestInstance extends AxiosInstance {
  <T = Res>(config: AxiosRequestConfig): Promise<T>
  <T = Res>(url: string, config?: AxiosRequestConfig): Promise<T>
  getUri(config?: AxiosRequestConfig): string
  request<T = Res>(config: AxiosRequestConfig): Promise<T>
  get<T = Res>(url: string, config?: AxiosRequestConfig): Promise<T>
  delete<T = Res>(url: string, config?: AxiosRequestConfig): Promise<T>
  head<T = Res>(url: string, config?: AxiosRequestConfig): Promise<T>
  options<T = Res>(url: string, config?: AxiosRequestConfig): Promise<T>
  post<T = Res>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T>
  put<T = Res>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T>
  patch<T = Res>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T>
  postForm<T = Res>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T>
  putForm<T = Res>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T>
  patchForm<T = Res>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T>
}