Vue3+ElementPlus 表单组件的封装实例

目录

• form文件夹
• FormItem.tsx
• 在页面中引用
• 总结

import filter from "@/utils/filters"
import {
  ElCheckbox,
  ElCheckboxGroup,
  ElDatePicker,
  ElInput,
  ElInputNumber,
  ElOption,
  ElRadio,
  ElRadioGroup,
  ElSelect,
  ElTimePicker
} from "element-plus"
import { defineComponent } from "vue"
// 普通显示
const Span = (form: Record, data: Record) => (
  {data.valueProp ? form[data.valueProp] : (data.filter ? filter(form[data.prop], data.filter) : form[data.prop] || "无")}
)
// 输入框
const Input = (form: Record, data: Record) => (
  
  
)
// 数字输入框
const InputNumber = (form: Record, data: Record) => (
  
)
const setLabelValue = (_item: any, { optionsKey }: any = {}) => {
  return {
    label: optionsKey ? _item[optionsKey.label] : _item.label,
    value: optionsKey ? _item[optionsKey.value] : _item.value,
  }
}
// 选择框
const Select = (form: Record, data: Record) => (
  
    {data.options.map((item: any) => {
      return 
    })}
  
)
// 单选/区间日期
const Date = (form: Record, data: Record) => (
  
)
// 单选/区间时间
const Time = (form: Record, data: Record) => (
  
)
// 单选
const Radio = (form: Record, data: Record) => (
  
    {data.radios.map(
      (item: { label: string | number | boolean; value: any }) => {
        return (
          
            {setLabelValue(item, data.prop).value}
          
        )
      },
    )}
  
)
// 多选
const Checkbox = (form: Record, data: Record) => (
  
    {data.checkboxs.map(
      (item: { label: string | number | boolean; value: any }) => {
        return (
          
            {setLabelValue(item, data.prop).value}
          
        )
      },
    )}
  
)
const setFormItem = (
  form: Record | undefined,
  data: Record,
  editable: Boolean,
) => {
  if (!form) return null
  if (!editable) return Span(form, data)
  switch (data.type) {
    case "input":
      return Input(form, data)
    case "textarea":
      return Input(form, data)
    case "password":
      return Input(form, data)
    case "inputNumber":
      return InputNumber(form, data)
    case "select":
      return Select(form, data)
    case "date":
    case "daterange":
      return Date(form, data)
    case "time":
      return Time(form, data)
    case "radio":
      return Radio(form, data)
    case "checkbox":
      return Checkbox(form, data)
    default:
      return null
  }
}
export default () =>
  defineComponent({
    props: {
      data: Object,
      formData: Object,
      editable: Boolean,
    },
    setup(props) {
      return () =>
        props.data
          ? setFormItem(props.formData, props.data, props.editable)
          : null
    },
  })

type itemType =
  | "input"
  | "select"
  | "switch"
  | "radio"
  | "date"
  | "time"
  | "checkbox"
  | "daterange"
interface FormProps {
  inline?: Boolean
  labelWidth?: string | number
  labelPosition?: "left" | "top" | "right"
  btn?: object[]
}
interface FormItems {
  type: itemType
  label?: string
  prop: string
  valueProp?: string
  width?: string | number
  span?: number
  filter?: string
}
export class commonForm {
  public data: any
  private rules?: object
  public elRowGutter?: number
  public editable?: boolean
  public formProps?: FormProps
  public formItems: FormItems[]
  public dataArray?:object[]
  constructor({
    data = {},
    rules = {},
    editable = true,
    formProps = {},
    formItems = [],
    elRowGutter = 0,
  }: any) {
    this.data = data
    this.rules = rules
    this.elRowGutter = elRowGutter
    this.editable = editable
    this.formItems = formItems
    this.formProps = formProps
  }
}

import { commonForm } from "@/components/common/form/type"
import { reactive } from "vue"
export default () => {
  const rules = {
    name: [
      { required: true, message: "人员名称", trigger: "blur" }
    ]
  }
  const form = reactive(
    new commonForm({
      data: [],
      editable: true,
      rules: rules,
      formItems: [
        {
          label: "人员名称",
          type: "select",
          prop: "name",
        },
        {
          label: "日期范围",
          type: "daterange",
          prop: "queueDate",
          format:"YYYY-MM-DD",
          valueFormat:"YYYY-MM-DD",
          startPlaceholder:"开始时间",
          endPlaceholder:"结束时间",
          span: 6,
        },
        {
          label: "时间段范围",
          type: "time",
          prop: "timeSlot",
          format:"HH:mm",
          valueFormat:"HH:mm",
          start:"开始时间",
          end:"结束时间",
          isRange:true,
          span: 6,
        },
        {
          label: "允许排队数量",
          type: "input",
          prop: "queueNum",
          span: 6,
        },
        {
          label: "生效类型",
          type: "select",
          prop: "isDelay",
          options: [
            {
              label: "当日生效",
              value: 0,
            },
            {
              label: "次日生效",
              value: 1,
            }
          ],
          span: 6,
        },
        {
          label: "生效时间",
          type: "date",
          prop: "effectiveTime",
          format:"YYYY-MM-DD",
          valueFormat:"YYYY-MM-DD",
          span: 6,
        },
      ],
    }),
  )
  return form
}