company/packages/components/plugins/form.ts

import { Select, Input, DatePicker, InputNumber, Slider, Button, Switch } from 'ant-design-vue'
import { isPlainObject } from 'lodash-es'
import { YesOrNoOptions, addAllToOptions } from '../consts/consts'
import SearchTableSelect from '../src/components/SearchTableSelect/index.vue'
function merge(source: any, options: any = {}) {
  for (const key in options) {
    const value = options[key]
    if (isPlainObject(value)) {
      source[key] = source[key] || {}
      Object.assign(source[key], value)
    } else {
      source[key] = value
    }
  }
  options = undefined
  return source
}

export function genRulesRequired(type = {}, options: any = {}) {
  return [
    { required: true, message: `必填项`, trigger: ['blur', 'change'], ...type },
    JSON.stringify(options) === '{}' ? null : { ...options, trigger: ['blur', 'change'] }
  ].filter((el) => !!el)
}

/**
 * @name 输入框
 * @type {GenFormItemFunc<Input>}
 * @param {string} label label名称
 * @param {string} key 绑定属性名
 * @param {object} options 组件属性
 */
export function genInput(label: string, key: string, options: any = {}) {
  return merge(
    {
      label,
      key,
      comp: Input,
      props: {
        placeholder: `请输入${label}`
      }
    },
    options
  )
}

export function genSwitch(label: string, key: string, options: any = {}) {
  return merge(
    {
      label,
      key,
      comp: Switch
    },
    options
  )
}

/**
 * @name 级联选择器
 * @type {GenFormItemFunc<Cascader>}
 * @param {string} label label名称
 * @param {string} key 绑定属性名
 * @param {object} options 组件属性
 */
export function genCascader(label: string, key: string, options: any = {}) {
  return merge(
    {
      label,
      key,
      comp: 'Cascader',
      props: {
        placeholder: `请选择${label}`,
        expandTrigger: 'hover',
        allowClear: true,
        showSearch: {
          filter(inputValue: string, path: any[]) {
            return path.some(
              (option) => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1
            )
          }
        }
      }
    },
    options
  )
}

/**
 * @name 多行文本
 * @type {GenFormItemFunc<Input.TextArea>}
 * @param {string} label label名称
 * @param {string} key 绑定属性名
 * @param {object} options 组件属性
 */
export function genTextarea(label: string, key: string, options: any = {}) {
  return merge(
    {
      label,
      key,
      comp: Input.TextArea,
      props: {
        placeholder: `请输入${label}`
      }
    },
    options
  )
}

/**
 * @name 数字输入框
 * @type {GenFormItemFunc<InputNumber>}
 * @param {string} label label名称
 * @param {string} key 绑定属性名
 * @param {object} options 组件属性
 */
export function genInputNumber(label: string, key: string, options: any = {}) {
  return merge(
    {
      label,
      key,
      comp: InputNumber,
      props: {
        placeholder: `请输入${label}`
      }
    },
    options
  )
}

/**
 * @name 日期选择器
 * @type {GenFormItemFunc<DatePicker>}
 * @param {string} label label名称
 * @param {string} key 绑定属性名
 * @param {object} options 组件属性
 */
export function genDatePicker(label: string, key: string, options: any = {}) {
  return merge(
    {
      label,
      key,
      comp: DatePicker,
      props: {
        placeholder: `请选择${label}`
      }
    },
    options
  )
}

/**
 * @name 滑动输入条
 * @type {GenFormItemFunc<Slider>}
 * @param {string} label label名称
 * @param {string} key 绑定属性名
 * @param {object} options 组件属性
 */
export function genSlider(label: string, key: string, options: any = {}) {
  return merge(
    {
      label,
      key,
      comp: Slider,
      props: {
        placeholder: `请选择${label}`
      }
    },
    options
  )
}

/**
 * @name 选择框
 * @type {GenFormItemFunc<Select>}
 * @param {string} label label名称
 * @param {string} key 绑定属性名
 * @param {object} options 组件属性
 */
export function genSelect(label: string, key: string, options: any = {}) {
  return merge(
    {
      label,
      key,
      comp: Select,
      props: {
        placeholder: `请选择${label}`,
        showSearch: true,
        allowClear: true,
        options: addAllToOptions(YesOrNoOptions),
        filterOption: (input: string, option: any) =>
          option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
      }
    },
    options
  )
}

/**
 * @name 表格选择框
 * @type {GenFormItemFunc}
 * @param {string} label label名称
 * @param {string} key 绑定属性名
 * @param {object} options 组件属性
 */
export function genSearchTableSelect(label: string, key: string, options: any = {}) {
  return merge(
    {
      label,
      key,
      comp: SearchTableSelect,
      props: {
        placeholder: `请选择${label}`,
        allowClear: true
      }
    },
    options
  )
}

/**
 * @name 表格选择框
 * @type {GenFormItemFunc<{
 *  placeholder: string;
 *  tableModalProps: TableModelProps;
 *  modalWidth: string;
 *  defaultDisplay: string;
 *  disabled: boolean;
 *  allowClear: boolean;
 * }>}
 * @param {string} label label名称
 * @param {string} key 绑定属性名
 * @param {object} options 组件属性
 */

/**
 * @name 日期范围选择
 * @type {GenFormItemFunc<DatePicker.RangePicker>}
 * @param {string} label label名称
 * @param {string} key 绑定属性名
 * @param {object} options 组件属性
 */
export function genDateRangePicker(label: string, key: string, options: any = {}) {
  return merge(
    {
      label,
      key,
      comp: DatePicker.RangePicker,
      props: {
        placeholder: ['开始日期', '结束日期'],
        style: {
          width: '240px'
        }
      }
    },
    options
  )
}

/**
 * @name 按钮
 * @param {string} label label名称
 * @param {Function} clickFunc 点击事件
 * @param {{props:Omit<Button, keyof Vue>}} options 组件属性
 */
export function genBtn(label: string, clickFunc: Function = () => {}, options: any = {}) {
  return merge(
    {
      comp: Button,
      props: {
        type: 'primary'
      },
      on: {
        click: clickFunc
      },
      content: label
    },
    options
  )
}