company/packages/components/plugins/form copy.ts

import { Select, Input, DatePicker, InputNumber, Slider, Button, Cascader } from 'ant-design-vue'
import { isPlainObject } from 'lodash-es'
import { YesOrNoOptions, addAllToOptions } from '../consts/consts'

function merge2(source: any, target: any) {
  const { autoSetChange, context } = target
  const { prop, vModelKey } = source

  delete target.context
  delete target.autoSetChange

  for (const key in target) {
    const value = target[key]
    if (isPlainObject(value)) {
      source[key] = source[key] || {}
      Object.assign(source[key], value)
    } else {
      source[key] = value
    }
  }

  if (autoSetChange && context) {
    source.on = source.on || {}
    source.on.change = function (v: any) {
      context.searchForm[prop || vModelKey] = v
      context.handleSearch(1)
    }
  }
  target = undefined
  return source
}
/**
 * @name 输入框
 * @type {GenFormItemFunc<Input>}
 * 
 */
export function genInput(label: string, prop: string, options = {}) {
  return merge2(
    {
      comp: Input,
      label,
      prop,
      props: {
        placeholder: `请输入${label}`,
        allowClear: true
      }
    },
    options
  )
}

/**
 * @name 级联选择器
 * @type {GenFormItemFunc<Cascader>}
 */
export function genCascader(label: string, prop: string, options = {}) {
  return merge2(
    {
      comp: Cascader,
      label,
      prop,
      props: {
        placeholder: '请选择',
        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>}
 */
export function genTextarea(label: string, prop: string, options = {}) {
  return merge2(
    {
      comp: Input.TextArea,
      label,
      prop,
      props: {
        autoSize: { minRows: 3 },
        placeholder: '请输入',
        allowClear: true
      }
    },
    options
  )
}

/**
 * @name 数字输入框
 * @type {GenFormItemFunc<InputNumber>}
 */
export function genInputNumber(label: string, prop: string, options = {}) {
  return merge2(
    {
      comp: InputNumber,
      label,
      prop,
      style: { width: '100%' },
      props: {
        min: 0,
        step: 1,
        defaultValue: 0,
        placeholder: '请输入',
        allowClear: true
      }
    },
    options
  )
}

/**
 * @name 日期选择器
 * @type {GenFormItemFunc<DatePicker>}
 */
export function genDatePicker(label: string, prop: string, options = {}) {
  return merge2(
    {
      comp: DatePicker,
      label,
      prop,
      style: { width: '100%' },
      props: {
        placeholder: '请输入',
        allowClear: true
      }
    },
    options
  )
}

/**
 * @name 滑动输入条
 * @type {GenFormItemFunc<Slider>}
 */
export function genSlider(label: string, prop: string, options = {}) {
  return merge2(
    {
      comp: Slider,
      label,
      prop,
      style: {
        margin: '10px 20px'
      },
      props: {
        placeholder: '请输入',
        range: true,
        min: 0,
        max: 42,
        step: 0.1,
        defaultValue: [],
        marks: {},
        allowClear: true
      }
    },
    options
  )
}

/**
 * @name 选择框
 * @type {GenFormItemFunc<Select>}
 */
export function genSelect(label: string, prop: string, options = {}) {
  return merge2(
    {
      comp: Select,
      label,
      prop,
      props: {
        placeholder: '请选择',
        options: YesOrNoOptions,
        allowClear: true
      }
    },
    options
  )
}

/**
 * @name 表格选择框
 * @type {GenFormItemFunc<{
 *  placeholder: string;
 *  tableModalProps: TableModelProps;
 *  modalWidth: string;
 *  defaultDisplay: string;
 *  disabled: boolean;
 *  allowClear: boolean;
 * }>}
 */
export function genTableSelect(label: string, prop: string, options = {}) {
  return merge2(
    {
      comp: SearchTableSelect,
      label,
      prop,
      style: {
        width: '100%'
      },
      props: {
        placeholder: `请选择${label}`,
        allowClear: true
      }
    },
    options
  )
}

/**
 * @name 级联选择检索
 * @type {GenFormItemFunc<Cascader>}
 */
export function genSearchCascader(label: string, prop: string, options = {}) {
  return merge2(
    {
      label,
      comp: Cascader,
      prop,
      style: {
        width: '250px'
      },
      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<{
 *  placeholder: string;
 *  tableModalProps: TableModelProps;
 *  modalWidth: string;
 *  defaultDisplay: string;
 *  disabled: boolean;
 *  allowClear: boolean;
 * }>}
 */
export function genSearchTableSelect(label: string, prop: string, options = {}) {
  return merge2(
    {
      label,
      comp: SearchTableSelect,
      prop,
      props: {
        placeholder: `请选择${label}`,
        allowClear: true
      }
    },
    options
  )
}

/**
 * @name 选择框可检索
 * @type {GenFormItemFunc<Select>}
 */
export function genSearchSelect(label: string, prop: string, options = {}) {
  return merge2(
    {
      label,
      comp: Select,
      prop,
      props: {
        placeholder: `请选择${label}`,
        options: addAllToOptions(YesOrNoOptions),
        allowClear: true,
        showSearch: true,
        filterOption(
          input: string,
          option: { componentOptions: { children: { text: string }[] } }
        ) {
          return (
            option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
          )
        }
      }
    },
    options
  )
}

/**
 * @name 日期范围选择
 * @type {GenFormItemFunc<DatePicker.RangePicker>}
 */
export function genDateRangePicker(label: string, prop: string, options = {}) {
  return merge2(
    {
      label,
      comp: DatePicker.RangePicker,
      prop,
      style: {
        width: '300px'
      },
      props: {
        allowClear: true
      }
    },
    options
  )
}

/**
 * @name 按钮
 * @param {string} label
 * @param {Function} clickFunc
 * @param {{props:Omit<Button, keyof Vue>}} options
 * @returns {any}
 */
export function genBtn(label: string, clickFunc = () => {}, options = {}) {
  return merge2(
    {
      comp: Button,
      props: {
        type: 'primary'
      },
      on: {
        click: clickFunc
      },
      content: label
    },
    options
  )
}