基于jeecgboot-vue3的Flowable流程仿钉钉流程设计器-支持VForm3表单的选择与支持

因为这个项目license问题无法开源,更多技术支持与服务请加入我的知识星球。

1、初始化的时候加载表单

javascript 复制代码
/** 查询表单列表 */
const getFormList = () => {
  listForm().then(res => formOptions.value = res.result.records)
}

2、开始节点的修改,增加表单选择

javascript 复制代码
<el-tab-pane label="表单选择" name="formSelect">
       <el-form size="small" label-width="90px" @submit.native.prevent>
         <el-form-item label="表单" prop="formKey">
           <el-select v-model="activeData.formKey" placeholder="请选择表单" @change="updateFormKey" clearable>
             <el-option v-for="item in formOptions" :key="item.id" :label="item.formName" :value="item.id" />
           </el-select>
         </el-form-item>
         <el-form-item prop="localScope">
           <span slot="label">
             <el-tooltip content="若为节点表单,则表单信息仅在此节点可用,默认为全局表单,表单信息在整个流程实例中可用" placement="top-start">
               <i class="header-icon el-icon-info"></i>
             </el-tooltip>
             <span>节点表单</span>
           </span>
           <el-switch disabled  v-model="activeData.localScope" active-text="是" inactive-text="否" @change="updateFormScope()" />
         </el-form-item>
       </el-form>
    </el-tab-pane>

3、选择表单的更新,后续还要传递到父组件,以便其它组件使用这些字段

javascript 复制代码
const updateFormKey = (formKey) => {
  console.log("updateFormKey formKey",formKey)
  props.activeData.formKey = formKey
  const formItem  = formOptions.value?.find((f) => f.id === formKey)
  const formContent = JSON.parse(formItem.formContent)
  props.activeData.formProperties = formContent.widgetList
  console.log("updateFormKey formProperties",props.activeData.formProperties)
}

4、相应watchEffect修改如下:

javascript 复制代码
watchEffect(() => {
  const formProperties = props.activeData.formProperties
  props.activeData.formProperties = formProperties?.map((field) => ({
    id: field.id,
    name: field.options.label,
    readonly: field.options.readonly,
    hidden: field.options.hidden,
    required: field.options.required
  }))
  props.activeData.formProperties?.forEach((item) => {
    const properties = formProperties.find((f) => f.id === item.id)
    if (properties) {
      item.readonly = properties.options.readonly
      item.hidden = properties.options.hidden
      item.required = properties.options.required
    }
  })
})

5、效果图如下:

相关推荐
小毛驴8504 分钟前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
誰能久伴不乏33 分钟前
Linux如何执行系统调用及高效执行系统调用:深入浅出的解析
java·服务器·前端
涔溪2 小时前
响应式前端设计:CSS 自适应布局与字体大小的最佳实践
前端·css
今禾2 小时前
前端开发中的Mock技术:深入理解vite-plugin-mock
前端·react.js·vite
你这个年龄怎么睡得着的2 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
我想说一句2 小时前
掘金移动端React开发实践:从布局到样式优化的完整指南
前端·react.js·前端框架
jqq6662 小时前
Vue3脚手架实现(九、渲染typescript配置)
前端
码间舞2 小时前
Zustand 与 useSyncExternalStore:现代 React 状态管理的极简之道
前端·react.js
Dream耀2 小时前
提升React移动端开发效率:Vant组件库
前端·javascript·前端框架
冰菓Neko2 小时前
HTML 常用标签速查表
前端·html