安装方式

npm install hzzt-search

import HzztSearch from 'hzzt-search';
import 'hzzt-search/dist/index.css'
import {createApp} from 'vue'
import App from './App.vue'

const app = createApp(App);

app.use(HzztSearch, {
    size: 'small',
    // i18n: i18n  vue-i18n实例
})

app.mount('#app')

HzztSearch组件

Props

| 属性 | 类型 | 默认值 | 说明 | |------------|----------------------------------------------|-------|---------------| | modelValue | object | {} | 表单数据 | | formList | FormItem[] | [] | 表单数组 | | size | enum 'default' \| 'small' \| 'large' | null | 表单尺寸 | | position | enum 'left' \| 'top' \| 'right' | left | 表单域标签的位置 | | direction | enum 'row' \| 'column' | row | 组件排列方向
| autoLoad | boolean | true | 是否选择内容后自动触发查询 | | showSearch | boolean | true | 是否显示查询按钮 | | showReset | boolean | false | 是否显示重置按钮 |

Event

| 方法 | 说明 | 类型 | |-------------------|---------------------|------------------------------------------------------| | change | 仅当 modelValue 改变时触发 | (value: Record<string, any>, prop: string) => void | | update:modelValue | 仅当 modelValue 改变时触发 | (value: Record<string, any>) => void |

Slots

| 插槽名 | 说明 | |-------|--------| | left | 查询组件左侧 | | right | 查询组件右侧 |

FormItem 参数说明

| 属性名 | 类型 | 说明 | |----------------|-----------------------------------------------------------------------------------------|-------------| | name | string | 名称 | | type | string | 类型 | | model | any | 模型数据（可选） | | class | string | CSS 类名（可选） | | style | string | 行内样式（可选） | | size | string | 尺寸（可选） | | text | string | 显示文本（可选） | | cancelable | Boolean | 是否可取消（可选） | | props | Record<string, any> | 额外属性对象（可选） | | slots | Record<string, (props?: any) => Slots> | 插槽配置（可选） | | options | Record<string, any>[] | 选项列表（可选） | | parentClass | string | 父元素类名（可选） | | parentStyle | string | 父元素样式（可选） | | label | string | 标签文本（可选） | | formProps | Record<string, any> | 表单属性（可选） | | prepend | Boolean | 是否添加前缀（可选） | | prependName | string | 前缀名称（可选） | | prependModel | any | 前缀模型数据（可选） | | prependClass | string | 前缀类名（可选） | | prependStyle | string | 前缀样式（可选） | | prependProps | Record<string, any> | 前缀属性（可选） | | prependOptions | Option[] | 前缀选项列表（可选） | | formSlots | Record<string, (props?: any) => Slots> {prepend: () => vNode, append: () => vNode} | 表单插槽配置（可选） | | show | Boolean | 是否显示（可选） | | autoSearch | Boolean | 是否自动查询（可选） | | formatFunc | (v: any, form: Record<string, any>) => Record<string, any> | 数据格式化函数（可选） |

type支持类型 'checkButton' \| 'select' \| 'selectV2' \| 'userSelect' \| 'hzztSelect' \| 'cascader' \| 'datepicker' \| 'quarterpicker' \| 'input' \| 'textarea' \| 'inputNumber' \| 'inputRange' \| 'checkbox' \| 'checkboxGroup' \| 'checkboxButton' \| 'radioGroup' \| 'radioButton' \| 'button' \| 'upload' \| 'text' \| 'custom'

HzztForm组件

扩展element-plus的form组件

Props

| 属性 | 类型 | 默认值 | 说明 | |-----------|----------------------------------------------|------|----------| | model | object | {} | 表单数据 | | formList | FormItem[] | [] | 表单数组 | | size | enum 'default' \| 'small' \| 'large' | null | 表单尺寸 | | position | enum 'left' \| 'top' \| 'right' | left | 表单域标签的位置 | | direction | enum 'row' \| 'column' | row | 表单排列方向
| rules | {} | null | form表单规则 |

Event

| 方法 | 说明 | 类型 | |--------------|----------------|----------------------------------------------------| | change | 仅当 model 改变时触发 | (v: Record<string, any>, form: FormItem) => void | | update:model | 仅当 model 改变时触发 | (value: Record<string, any>) => void |

Slots

| 插槽名 | 说明 | |--------|----------| | before | form组件左侧 | | after | form组件右侧 |

HzztFormItem组件

| 属性 | 类型 | 默认值 | 说明 | |------------|----------------------------------------------|------|------| | modelValue | any | | 表单数据 | | form | FormItem | {} | 表单数组 | | size | enum 'default' \| 'small' \| 'large' | null | 表单尺寸 |

Event

| 方法 | 说明 | 类型 | |-------------------|---------------------|------------------------------------| | change | 仅当 modelValue 改变时触发 | (v: any, form: FormItem) => void | | update:modelValue | 仅当 modelValue 改变时触发 | (value: any) => void |

示例

<template>
  <h2>HzztSearch</h2>
  <hzzt-search v-model="form" :form-list="formList" :auto-load="false" :show-reset="true" @change="change">
  </hzzt-search>
  <h2>HzztForm</h2>
  <hzzt-form ref="formRef" direction="column" v-model:model="form" :rules="formRules" :form-list="formList"
             @change="change">
  </hzzt-form>
  <el-button @click="submit">提交</el-button>
</template>
<script setup lang="ts">
  import {h, ref} from 'vue';
  import {ElButton} from "element-plus";

  const form = ref({
    checkButton: '选项一'
  });

  const formRef = ref(null);

  const formRules = ref({
    'select': [{required: true, message: '请选择选项', trigger: 'change'}]
  })

  const formList = ref([{
    type: 'checkButton',
    name: 'checkButton',
    props: {},
    options: [{
      label: '选项一',
      value: '选项一',
    }, {
      label: '选项二',
      value: '选项二',
    }]
  }, {
    type: 'select',
    name: 'select',
    props: {
      placeholder: '请选择内容',
      clearable: false,
      filterable: true,
    },
    options: [{
      label: '选项一',
      value: '选项一',
    }, {
      label: '选项二',
      value: '选项二',
    }],
    style: {
      width: '200px',
    },
    prepend: true,
    prependClass: 'width-2',
    prependName: 'select_prepend',
    prependOptions: [{
      label: '选项一',
      value: '选项一',
    }, {
      label: '选项二',
      value: '选项二',
    }],
    slots: {
      header: () => 'test',
    },
    formProps: {
      prop: 'select',
      label: 'Select',
    },
    formSlots: {
      prepend: () => h(ElButton, {
        type: 'primary'
      }, () => 'prepend'),
      append: () => h(ElButton, {
        type: 'primary'
      }, () => 'append')
    },
  }, {
    type: 'selectV2',
    name: 'selectV2',
    props: {
      placeholder: '请选择内容',
      clearable: true,
      filterable: true,
    },
    options: [{
      label: '选项一',
      value: '1',
    }, {
      label: '选项二',
      value: '2',
    }],
    slots: {
      default: ({item}) => item?.value
    }
  }, {
    type: 'HzztSelect',
    name: 'HzztSelect',
    props: {
      placeholder: '请选择内容',
    },
    options: [{
      label: '选项一',
      value: '选项一',
    }, {
      label: '选项二',
      value: '选项二',
    }]
  }, {
    type: 'cascader',
    name: 'cascader',
    props: {
      placeholder: '请选择内容',
      props: {
        checkStrictly: true,
        expandTrigger: 'hover',
      },
    },
    options: [{
      label: '选项一',
      value: '选项一',
      children: [{
        label: '选项一-1',
        value: '选项一-1',
      }]
    }, {
      label: '选项二',
      value: '选项二',
    }]
  }, {
    type: 'datepicker',
    name: 'datepicker',
    props: {
      type: 'daterange',
    },
    model: [new Date(), new Date()],
    formatFunc: (v) => ({
      start_at: v?.[0],
      end_at: v?.[1],
    })
  }, {
    type: 'quarterpicker',
    name: 'quarterpicker',
    props: {
      clearable: true,
    }
  }, {
    type: 'input',
    name: 'input',
    props: {
      clearable: true,
    },
    slots: {
      append: () => '元'
    }
  }, {
    type: 'textarea',
    name: 'textarea',
    props: {
      clearable: true,
      autosize: {
        minRows: 4,
      }
    },
  }, {
    type: 'inputNumber',
    name: 'inputNumber',
    model: 1,
    props: {
      min: 0,
    },
  }, {
    type: 'inputRange',
    name: 'inputRange',
  }, {
    type: 'checkbox',
    name: 'checkbox',
    props: {
      trueValue: 1,
      falseValue: 0,
      label: '选项'
    },
  }, {
    type: 'checkboxGroup',
    name: 'checkboxGroup',
    options: [{
      label: '选项一',
      value: '选项一',
    }, {
      label: '选项二',
      value: '选项二',
    }]
  }, {
    type: 'checkboxButton',
    name: 'checkboxButton',
    show: false,
    options: [{
      label: '选项一',
      value: '选项一',
    }, {
      label: '选项二',
      value: '选项二',
    }]
  }, {
    type: 'radioGroup',
    name: 'radioGroup',
    cancelable: true,
    show: false,
    options: [{
      label: '选项一',
      value: '选项一',
    }, {
      label: '选项二',
      value: '选项二',
    }]
  }, {
    type: 'radioButton',
    name: 'radioButton',
    show: false,
    options: [{
      label: '选项一',
      value: '选项一',
    }, {
      label: '选项二',
      value: '选项二',
    }]
  }, {
    type: 'button',
    name: 'button',
    props: {
      type: 'danger',
    },
    show: false,
    text: '按钮',
  }, {
    type: 'upload',
    name: 'upload',
    props: {
      drag: true,
      multiple: true,
    },
    show: false,
    slots: {
      default: () => ' Drop file here or click to upload',
      tip: () => 'jpg/png files with a size less than 500kb'
    }
  }, {
    style: 'color: red',
    type: 'text',
    name: 'text',
    text: '文本内容'
  }]);

  function change(...rest) {
    console.log(rest);
    console.log(form.value);
  }

  function submit() {
    formRef.value.validate((valid) => {
      if (valid) {
        console.log('success');
      }
    })
  }

</script>

<style scoped>

</style>