<!--
 * @Company: 沈阳信诚科技
 * @Email: html_venustar@163.com
 * @Author: Liuqiming
 * @Description: 公共表单组件开发文档
 * @LastEditors: Liuqiming
 * @LastEditTime: 2024-03-25 16:25:53
 * @Date: 2024-03-06 14:35:08
-->

# 父组件内使用
  · 父组件vue文件
  <els-form
    ref="mainForm"
    :fieldList="fieldList"
    :formOption="formOption"
    :formLoading="false"
    @cancel="cancel"
    @ok="submit"
    @formChange="formChange"
    :form="formData"  
  ></els-form>
  <script setup>
    // 表单的回显字段，用于编辑或查看，行项目数据直接赋值
    // 虽然修改此值的内容，表单的值也会改变，但不建议用此值修改表单的数据值，此值只做回显展示用
    const formData = ref({})
    // 表单点击提交按钮的回调，参数value为表单的输入项，表单组件会在点击提交时自动进行校验，校验失败不调用此函数
    const submit = (value) => {}
    // 表单点击取消按钮的回调，参数value为表单的输入项，表单在点击此按钮时会自动清空表单内的数据
    const cancel = (value) => {}
    // 表单触发某一项时的回调函数，雷同change事件，参数value为 {field:'',val:''} field为fieldList内的field字段，val为change值
    const formChange = (value) => {}
    // ref
    const mainForm = ref(null)
    // 任意事件触发
    const 任意事件 = () => {
      nextTick(() => {
        mainForm.value.disabled('field', true) // 修改表单字段为 field 的 disabled 状态
        mainForm.value.change('field', 'width', '500px') // 修改表单字段为 field 的 fieldList 项的参数值
        mainForm.value.hidden('field', true) // 修改表单字段为 field 的 hidden 状态，是否隐藏
        mainForm.value.setValue('field', '新值') // 修改表单字段为 field 的绑定值
        mainForm.value.getValue('field') // 获取表单字段为 field 的绑定值
        mainForm.value.isView(true) // 是否为详情页，用于隐藏表单自带的按钮组
      })
    }
  </script>



  · 父组件jsx文件参数配置
    1.表单元素
    const fieldList = ref([
      {
        label: '岗位名称',
        type: 'input',    // 类型为输入框，默认input，可不传
        field: 'postName',    // 绑定字段，必传
        width: '400px',
        max: 100,       // 最大输入字数，可不传
        rules: [{ required: true, message: "岗位名称不能为空", trigger: "blur" }],
        placeholder: '请输入岗位名称'
      },
      {
        label: '岗位顺序',
        field: 'postSort',
        type: 'number',
        hidden: true,
        width: '320px',
        rules: [{ required: true, message: "岗位顺序不能为空", trigger: "blur" }],
        placeholder: ''
      },
      {
        label: '所属部门',
        field: 'deptId',
        type: 'treeSelect',
        width: '400px',
        props: { value: 'deptId', label: 'deptName', children: 'children' },
        clearable: true,
        rules: [{ required: true, message: "所属部门不能为空", trigger: "change" }],
        placeholder: '请选择所属部门',
        options: [树结构数据]
      },
      {
        label: '备注',
        field: 'remark',
        type: 'textarea',
        max: 100,
        width: '400px',
        placeholder: '请输入备注内容'
      },
      {
        label: '事件时刻',
        field: 'abnormalEventTime',
        type: 'date',
        enum: 'datetime',
        valueFormat: 'YYYY-MM-DD HH:mm',
        format: 'YYYY-MM-DD HH:mm',
        width: '300px',
        rules: [{required: true,message: '请选择事件时刻',trigger: 'change'}],
        placeholder: '请选择事件时刻'
      },
    ])
    [type类型枚举：select，cascader，treeSelect，checkbox，radio，date，time，timeRange，timeSelect，switch，number，textarea，imageUpload，password，input]
    [当type='date'时枚举：enum='datetime','daterange'...其他可查看elementUI]
    2.表单配置项
    const formOption = ref({
      inline: false,    // 是否行内表单
      labelWidth: '80px',
      scrollToError: true,  //当表单校验时是否自动滚动至校验失败项
      btnCenter: true,      // 表单按钮组的排列位置【目前代码未修改，此项用来判断是否为弹窗使用表单】
      labelPosition: 'right',
      btn: ['submit', 'cancel']       //按钮组，全部选项['search', 'reset','submit', 'cancel']，哪项不传哪项隐藏
    })