前端开发框架
当前页

二次开发组件 ​

BasicForm ​

基于 ElForm 封装的 JSONSchema 形式的表单 ​

使用 ​

vue
<basic-form ref="basicTree">
  <template #available="{ record, value, field }">
  </template>
</basic-form>
<script setup lang="ts">
  import BasicForm from './src/components/sys/BasicForm';
  const basicForm = ref<InstanceType<typeof BasicForm>>();
</script>

传递参数 ​

:disableSubmit="isNull(selectedDept)"
:form-list="deptFormSchema"
:form-data="deptDetail || {}"

  • form-list: 必填，表单 JSON 描述， 类型描述, FormOptions, 见 src/components/sys/BasicForm/types.ts 使用方式后续介绍：

  • form-data: 必填，表单绑定的数据

  • isCreate: 是否新增数据默认为 true, 如果是打开 编辑表单， 需要手动配置 为 false

  • labelWidth 统一配置 标签宽度

  • showSubmit，是否显示 提交按钮 默认为 true

  • disableSubmit 提交按钮是否可用 默认为 true

  • showReset 是否显示重置按钮 默认为 true

事件 ​

@success=''
@fail=''
  • success 事件返回校验正常的数据，
  • fail 事件返回校验失败的数据

调用子组件方法 ​

vue
<basic-form ref="basicTree">
  <template #available="{ record, value, field }">
  </template>
</basic-form>
<script setup lang="ts">
  import BasicForm from './src/components/sys/BasicForm';
  const basicForm = ref<InstanceType<typeof BasicForm>>();
</script>
  • 手动触发 form 校验
ts
// 不传方法 通过 success事件监听 结果
basicForm.value.formValid();

// 使用方法 接收 校验结果
function test(type: string, value: any) {
  // any 是数据类型
  // 'success', formValue.value
}
basicForm.value.formValid(test);

表单使用说明 ​

  • 表单 JSONSchema 示例
ts
export const deptFormSchema: FormOptions[] = [
  {
    field: 'parentId',
    label: '上级机构编号：',
    // defaultValue: 'lala',
    component: 'Input',
    componentProps: {
      placeholder: '',
      disabled: true,
    },
    ifShow: false,
  },
  {
    field: 'parentName',
    label: '上级机构名称：',
    component: 'Input',
    componentProps: {
      placeholder: '',
      disabled: true,
    },
    ifShow: false,
  },
  {
    label: '机构编号：',
    field: 'id',
    component: 'Input',
    componentProps: {
      placeholder: '',
      disabled: true,
    },
    ifShow: false,
  },
  {
    field: 'deptName',
    label: '机构名称：',
    slot: 'available',
    component: 'Input',
    // componentProps: {
    //   replaceFields: {
    //     title: 'deptName',
    //     key: 'id',
    //     value: 'id',
    //   },
    //   getPopupContainer: () => document.body,
    // },
    required: true,
  },

  {
    label: '机构状态：',
    field: 'status',
    component: 'RadioGroup',
    componentProps: {
      options: [
        {
          label: '无效',
          value: '0',
        },
        {
          label: '有效',
          value: '1',
        },
      ],
    },
    required: true,
  },

  {
    label: '联系人：',
    field: 'contacts',
    component: 'Input',
    // required: true,
    componentProps: {
      placeholder: '请输入联系人',
    },
  },
  {
    label: '手机号：',
    field: 'phone',
    component: 'Input',
    componentProps: {
      placeholder: '请输入手机号',
    },
    // rules: [{ required: true, pattern: phoneReg, message: '请输入正确的手机号' }],
  },
  // {
  //   label: '联系电话：',
  //   field: 'telephone',
  //   component: 'Input',
  //   componentProps: {
  //     placeholder: '请输入联系电话',
  //   },
  // },
  {
    label: '机构地址：',
    field: 'addr',
    component: 'Input',
    componentProps: {
      placeholder: '请输入机构地址',
    },
  },
  {
    label: '机构信用码：',
    field: 'creditCode',
    component: 'Input',
    componentProps: {
      placeholder: '请输入机构信用码',
    },
  },
  {
    label: '机构序号：',
    field: 'erpDeptCode',
    component: 'Input',
    componentProps: {
      placeholder: '请输入机构序号',
    },
  },
  {
    label: '机构描述：',
    field: 'description',
    component: 'InputTextArea',
    componentProps: {
      placeholder: '请输入机构描述',
    },
  },
  {
    label: '版本：',
    field: 'version',
    component: 'Input',
    componentProps: {
      placeholder: '',
    },
    ifShow: false,
  },
];
  • 绑定数据
ts
const formData = {
   parentId: '-1',
   parentName: '父级机构名称',
   deptName: '机构名称',
   ...
   }
  • 表单 JSONSchema 说明
field: string => 必填 字段名
label: string => 必填 标签名
required?: boolean => 可选 否必填
component:  => 必填 表单可选的输入元素，如果没有需要的，可以使用slot进行自定义, Slot无真实含义
    | 'Input'
    | 'InputPassword'
    | 'InputTextArea'
    | 'InputNumber'
    | 'DatePicker'
    | 'RadioGroup'
    | 'Select'
    | 'SelectMultiple'
    | 'TreeSelect'
    | 'CheckboxGroup'
    | 'Slot';
span?: number; => 可选 span标识 字段占用的宽度，默认宽度为24
slot?: string => 可选， 如果字段过于复杂或者component无法满足需求，可以自定义slot
componentProps?: {   => 可选，用于设置，form-item所需的属性
    placeholder?: string; => 字段提示
    options?: Option[];   => 通常配合 Select CheckboxGroup  [{label: '张三', value: 'zhangsan'}]
    disabled?: boolean;   => 字段是否可用
    appendText?: string;
    prependText?: string;
    data?: any[];
    showCheckbox?: Boolean;
    multiple?: Boolean;
    nodeKey?: string;
  };

rules?: any[]; =>  检验规则
dynamicRules?: any[];  => 异步校验规则
ifShow?: Function | boolean;  =>  类似于v-if接收 form-item的dom
show?: boolean;   =>  字段是否可见 类似于 v-show

slot 使用 ​

  • 默认 slot
vue
<basic-form ref="basicTree">
  <template #footer="{ record, value, field }">
  </template>
</basic-form>
  • 自定义 slot，配合 JSONSchema 使用，在 4.1.6 中的 FormOptions 中用到如下字段
{
    field: 'deptName',
    label: '机构名称：',
    slot: 'available',
    component: 'Input',
    required: true,
  },

对应的 Template

vue
<basic-form ref="basicTree">
  <template #available="{ record, value, field }">
    <el-input
      v-model="record[field]"
      placeholder="请输入角色编码"
    ></el-input>
  </template>
</basic-form>

slot 作用域变量说明

  • record 代表 form 表单数据
  • field 代表 字段名
  • 使用 record[field] 进行 数据绑定
  • value 是当前字段的值， 和 record[field] 相同