因為這個項目license問題無法開源,更多技術支持與服務請加入我的知識星球。
1、初始化的時候加載表單
/** 查詢表單列表 */
const getFormList = () => {listForm().then(res => formOptions.value = res.result.records)
}
2、開始節點的修改,增加表單選擇
<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、選擇表單的更新,后續還要傳遞到父組件,以便其它組件使用這些字段
const updateFormKey = (formKey) => {console.log("updateFormKey formKey",formKey)props.activeData.formKey = formKeyconst formItem = formOptions.value?.find((f) => f.id === formKey)const formContent = JSON.parse(formItem.formContent)props.activeData.formProperties = formContent.widgetListconsole.log("updateFormKey formProperties",props.activeData.formProperties)
}
4、相應watchEffect修改如下:
watchEffect(() => {const formProperties = props.activeData.formPropertiesprops.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.readonlyitem.hidden = properties.options.hiddenitem.required = properties.options.required}})
})
5、效果圖如下: