NwFormSkin 表单组件

<template> <NwFormSkin :field-option="fieldOption" v-model:value="formData" > <t-row :gutter="[10, 20]"> <NwFormItemSkin label="类型名称" name="typeName"> <t-input v-model="formData.typeName" placeholder="请输入类型名称" /> </NwFormItemSkin> <NwFormItemSkin label="类型编码" name="typeCode"> <t-input v-model="formData.typeCode" placeholder="请输入类型编码" /> </NwFormItemSkin> <NwFormItemSkin label="备注" name="remark"> <t-input v-model="formData.remark" placeholder="请输入备注" /> </NwFormItemSkin> </t-row> </NwFormSkin> </template> <script setup lang="ts"> import { NwFormSkin, NwFormItemSkin, } from '@platform-lib/base' import type { FormFieldOption, } from '@platform-lib/base' // 表单绑定数据 const formData = reactive<any>({}) // 表单验证规则 const fieldOption = ref<Array<FormFieldOption>>([ { label: '类型名称', // 验证字段名称 name: 'typeName', // 需要验证的字段 type: 'string', // 字段类型 power: 'required', // 'readonly' | 'required' | 'hide' (required:必填; readonly:只读; hide:隐藏) rules: [] // 验证规则 }, { label: '类型编码', name: 'typeCode', type: 'string', power: 'required', // 'readonly' | 'required' | 'hide' (required:必填; readonly:只读; hide:隐藏) rules: [] } ]) </script> // 权限按钮配置页面 import {FunBoxUtils} from '@platform-lib/base' import {missionManageAddApi} from '../api' export const add: any = { code: 'add', mode: 'drawer', formUrl: '/web-client/html/mission-manage-form.html', buttons: { 'addBtn': { position: 'right', name: '保存', script: 'add', props: { theme: 'primary' } }, }, scripts: { init: { isAsync: true, code: async (request: any, utils: FunBoxUtils) => { utils.setLoading(true) //给表单初始化赋值 await utils.setFormValue({ }) utils.setLoading(false) } }, add: { isAsync: true, code: async (request: any, utils: FunBoxUtils) => { // 验证表单必填项是否填写完毕 const vflag = await utils.validate() if (vflag !== true) { return; } utils.setLoading(true) const params = {...utils.getFormValue()} //调用保存接口 await missionManageAddApi(params).then((r: any) => { utils.message('success', { content: '添加成功' }) }).finally(() => { utils.setLoading(false) }) // 页面回调 utils.complete() }, }, } } // 按钮如何注册以及引用 详解请看权限配置/权限按钮

<template> <NwFormSkin :field-option="fieldOption" v-model:value="formData" serviceKey="/mission/missionManage"> <t-row :gutter="[10, 20]"> <NwFormItemSkin label="类型名称" name="typeName"> <t-input v-model="formData.typeName" placeholder="请输入类型名称" /> </NwFormItemSkin> <NwFormItemSkin label="类型编码" name="typeCode"> <t-input v-model="formData.typeCode" placeholder="请输入类型编码" /> </NwFormItemSkin> <NwFormItemSkin label="备注" name="remark"> <t-input v-model="formData.remark" placeholder="请输入备注" /> </NwFormItemSkin> </t-row> </NwFormSkin> </template> <script setup lang="ts"> import { NwFormSkin, NwFormItemSkin, } from '@platform-lib/base' import type { FormFieldOption, } from '@platform-lib/base' // 表单绑定数据 const formData = reactive<any>({}) // 表单验证规则 const fieldOption = ref<Array<FormFieldOption>>([ { label: '类型名称', // 验证字段名称 name: 'typeName', // 需要验证的字段 type: 'string', // 字段类型 power: 'required', // 'readonly' | 'required' | 'hide' (required:必填; readonly:只读; hide:隐藏) rules: [] // 验证规则 }, { label: '类型编码', name: 'typeCode', type: 'string', power: 'required', // 'readonly' | 'required' | 'hide' (required:必填; readonly:只读; hide:隐藏) rules: [] } ]) </script> // 权限按钮配置页面 import {FunBoxUtils} from '@platform-lib/base' import {missionManageAddApi} from '../api' export const add: any = { camundaDefKey: 'measureWf', //流程key，由后台定义 scripts: { init: { isAsync: true, code: async (request: any, utils: FunBoxUtils) => { //初始化表单调用 } }, } }