通用表单前端组件包

使用方式

1. 安装 yarn add iwater-easyform
2. 在main.js 全局注册
   import iwaterEasyForm from "iwater-easyform";
   import "iwater-easyform/style.css";
   app.use(iwaterEasyForm)
3. <iwaterEasyForm>	</iwaterEasyForm>

使用说明

全局注册完毕之后，可在vue页面直接使用组件

<iwaterEasyForm 
   ref="easyFormRef"
   v-bind="formConfig" 
   @onSubmitForm="onSubmitForm" 
   @closeForm="closeForm">	
</iwaterEasyForm>

基本配置说明

const easyFormRef = ref() // 定义表单的ref
const formConfig = ref({
  formTitle: '新增角色', // 设置表单弹框标题,默认是 新增
  isDisabled: true, //  是否置灰所有的form表单，设置不可输入，一般用于查看功能,默认false 可编辑
  isInline , // 默认是true, 表单两项一行, 设置false 单行展示
  showFooter: false, // 控制是否显示底部按钮， 默认显示 true
  optionForm: {},// 此属性是主要的配置，下面会单独介绍
  defaultData: {} // 此属性一般用于编辑功能，表单数据需要回显，所以可以设置此对象,对象内部的一般都是表格行的数据，里面的key和optionForm配置的key应该保持一致，只有这样才能正确回显数据
})

optionForm 属性配置详解

 const optionForm =  ref([
  {
    formType: 'disabled', // 设置表单项目类型是只展示不可编辑
    field: 'currentArea', // 设置接口对应的字段
    label: '不可编辑测试', //  设置label名称
    defaultValue: 122 // 可以设置默认值
  },
 {
    formType: 'input',// 设置表单项目类型是输入框 也支持textarea
    field: 'descript', // 设置接口对应的字段
    label: '角色描述', // 设置label名称
    defaultValue: '', // 可以设置默认值，非必填
    // 设置校验规则 非必填，类似element-plus
    rules: [{ required: true, message: '请输入角色描述', trigger: 'blur' }] 
  },
  {
    formType: 'select',// 设置表单项目类型是下拉框， 也支持selectFilter选择框筛选
    field: 'area', // 设置接口对应的字段
    label: '区域选择', // 设置label名称
    changeLable: [  //设置下拉数组的option --- 选择的值是value的值
      {
        label: '北京',
        value: '100101'
      },
      {
        label: '上海',
        value: '100102'
      }
    ]
  },
  {
    formType: 'radioGroup',// 设置表单项目类型是 raido组，单选按钮
    field: 'radioGroup', 
    label: '是否禁用',
    defaultValue: true  // 必填,必须设置一个changeLable的value的默认值
    changeLable: [  // 必填
      {
        label: '禁用',
        value: true
      },
      {
        label: '启用',
        value: false
      },
    ],
  },
  {
    formType: 'datetime',// 设置表单项目类型是 配置日期类型，也支持date 日期类型
    field: 'uodateTime',
    label: '更新时间',
    defaultValue: '2023-08-25 02:19:50' // 也可以设置默认时间
  },
   {
      formType: 'tree',// 设置表单项目类型是 tree形
      field: 'menuIds', // 关键key
      label: '菜单权限', // label
      propsDict: [], //  树形数据集合
      defaultProps: { // 设置tree数据结构的取值字段
        children: 'children',
        label: 'menuName'
      },
      nodeKey: 'id', // 设置tree的node-key 默认是id
      defaultValue: [], // 设置默认值
      rules: [{ required: true, message: '请选择菜单权限', trigger: 'change' }]
    },
  { 
    formSlot: true, // 配置自定义slot -- 自定义组件
    field: 'custom', // 关键key --- 必填
    label: '插槽测试',// label  --- 必填
    defaultValue: [2, 10] // 配置默认的值
  }
  ])

自定义组件，比如针对custom字段项

// 在template中自定义组件。
// 示例：scope.ruleForm[scope.data.key] 要在v-model这么写，很关键
// 一定要这么绑定，才可以使ruleForm对象拿到自定义你组件的绑定值
 <template #form-item-custom="scope">
   <el-transfer v-model="scope.ruleForm[scope.data.field]" :data="transData"></el-transfer>
</template>

defaultData 属性详解

 // 一般都单项的数据对象，里面的key-value对应到 optionForm的配置,用于回显数据的

onSubmitForm 接收确定事件，data参数就是form组件给的form对象的值，都可以拿到

// 点击确定按钮的事件接收，可以根据 来判断是 新增还是编辑 formConfig.value.formTitle
const onSubmitForm = (data) => {
  if (formConfig.value.formTitle === '新增角') {
   // 调用新增角色的接口
  } else {
    // 调用编辑接口，如果数据结构不是想要的，还可以在此进行二次处理
  }
}

closeForm 点击关闭按钮后触发的事件

//  点击form 的关闭或者取消按钮，将会触发本事件

定义ref easyFormRef,可调用内部事件

easyFormRef.value.show() // 显示本表单弹框
easyFormRef.value.resetFormKey(field) // 手动将某个值 置空null
easyFormRef.value.resetFormData() // 重置所有的表单项

更新日志

2024-07-17 解决了 下拉框被el-dailog遮挡的问题
2024-07-17 新增表单项目可隐藏  配置formType = hide即可
2024-08-13 支持配置自定义头部，支持自定义底部按钮布局、文字、颜色
2024-08-21 支持 inline模式下，配置一行单独显示 ,配置项  innerOneline:true