ytForm搜索表单组件

使用场景

复杂的表单搜索栏、增删改查的form表单

实例属性

属性名	默认值	类型	描述	是否必填
inline	true	Boolean	行内表单模式 可选值：true / false
form	{}	Object	表单数据 formData	true
formLabel	[]	Array	表单类型数组	true
formRules	{}	Object	表单规则校验对象
labelWidth	""	String	表单标签label宽度
formSize	small	String	组件尺寸 可选值：small / mini / medium
showOperationBtn	true	Boolean	是否展示 (查询、重置)按钮 可选值：true / false

formLabel中type可选值

// 其中type是支持的组件类型，label是对应的属性介绍
formLabel: [
    {type: "input", label: "输入框"},
    {type: "select", label: "下拉选择器"},
    {type: "radio", label: "单选框"},
    {type: "switch", label: "Switch开关"},
    {type: "date", label: "DatePicker 日期选择器"},
    {type: "datetimerange", label: "DatePicker 日期选择器"},
    {type: "daterange", label: "DatePicker 日期选择器"},
]

formLabel参数示例

      formLabel: [
        {
          type: "input",
          label: "输入框",
          value: "inputValue",
        },
        {
          type: "select",
          label: "下拉选择器",
          value: "selectValue",
          opts: [
            {
              deptName: "单位1",
              deptId: "单位1",
            },
            {
              deptName: "单位2",
              deptId: "单位2",
            },
            {
              deptName: "单位3",
              deptId: "单位3",
            },
          ], // 其中optLabel的值是opts列表的label,optValue是opts列表的value
          optLabel: "deptName",
          optValue: "deptId",
        },
        {
          type: "radio",
          label: "单选框",
          value: "radioValue",
          opts: [
            {
              label: "男",
              value: "男",
            },
            {
              label: "女",
              value: "女",
            },
            {
              label: "未知",
              value: "未知",
            },
          ],
        },
        {
          type: "switch",
          label: "Switch开关",
          value: "switchValue",
          activeColor: "#13ce66",
          inactiveColor: "#ff4949",
          activeText: "打开",
          inactiveText: "关闭",
        },
        {
          type: "date",
          label: "DatePicker日期选择器",
          value: "dateValue",
          placeholder: "请选择日期",
          valueFormat: "yyyy-MM-dd HH:mm:ss",
        },
        {
          type: "datetimerange",
          label: "DatePicker 日期选择器",
          value: "datetimerangeValue",
          pickerOptions: [],
          align: "left",
          rangeSeparator: "~",
          startPlaceholder: "开始时间",
          endPlaceholder: "结束时间",
          valueFormat: "yyyy-MM-dd HH:mm:ss",
        },
        {
          type: "daterange",
          label: "DatePicker 日期选择器",
          value: "daterangeValue",
          pickerOptions: [],
          align: "left",
          rangeSeparator: "~",
          startPlaceholder: "开始时间",
          endPlaceholder: "结束时间",
          valueFormat: "yyyy-MM-dd",
        },
      ],

事件

事件名	参数	描述
selectClick	obj	当 formLabel 中有type:"select"即有下拉框时，该属性会将下拉框点击的值和列表传给父组件
handleSearch	obj	表单查询事件，将formData的值传给父组件
handleResetFrom		重置表单

简单使用

<!--
 * @Description: 搜索表单组件的使用 页面
 * @Author: mhf
 * @Date: 2023/11/4 19:57
-->
<template>
  <div class="useYtForm">
    <bgComp>
      <ytForm
        v-if="formLabel.length > 0"
        :inline="inline"
        :form="searchForm"
        :formSize="formSize"
        :formLabel="formLabel"
        :formRules="formRules"
        @handleSearch="handleSearch"
        @handleResetFrom="handleResetFrom"
        @selectClick="selectClick"
      >
        <template slot="formSlot">
          <el-date-picker
            type="years"
            v-model="searchForm.formSlotValue"
            value-format="yyyy"
            placeholder="选择一个或多个年"
            :size="formSize"
          >
          </el-date-picker>
        </template>

        <template slot="btnSlot">
          <el-button type="primary" :size="formSize">
            自定义按钮（插槽）
          </el-button>
        </template>

        <template slot="otherSlot">
          <span> 在这里写其他自定义内容 </span>
        </template>
      </ytForm>
    </bgComp>
  </div>
</template>

<script>
export default {
  name: "useYtForm",
  components: {},
  props: {},
  computed: {},
  watch: {},
  filters: {},
  data() {
    return {
      inline: true,
      formSize: "mini",
      labelWidth: "120px",
      formLabel: [
        {
          type: "input",
          label: "输入框",
          value: "inputValue",
        },
        {
          type: "select",
          label: "下拉选择器",
          value: "selectValue",
          opts: [
            {
              deptName: "单位1",
              deptId: "单位1",
            },
            {
              deptName: "单位2",
              deptId: "单位2",
            },
            {
              deptName: "单位3",
              deptId: "单位3",
            },
          ],
          optLabel: "deptName",
          optValue: "deptId",
        },
        {
          type: "radio",
          label: "单选框",
          value: "radioValue",
          opts: [
            {
              label: "男",
              value: "男",
            },
            {
              label: "女",
              value: "女",
            },
            {
              label: "未知",
              value: "未知",
            },
          ],
        },
        {
          type: "switch",
          label: "Switch开关",
          value: "switchValue",
          activeColor: "#13ce66",
          inactiveColor: "#ff4949",
          activeText: "打开",
          inactiveText: "关闭",
        },
        {
          type: "date",
          label: "DatePicker日期选择器",
          value: "dateValue",
          placeholder: "请选择日期",
          valueFormat: "yyyy-MM-dd HH:mm:ss",
        },
        {
          type: "datetimerange",
          label: "DatePicker 日期选择器",
          value: "datetimerangeValue",
          pickerOptions: [],
          align: "left",
          rangeSeparator: "~",
          startPlaceholder: "开始时间",
          endPlaceholder: "结束时间",
          valueFormat: "yyyy-MM-dd HH:mm:ss",
        },
        {
          type: "daterange",
          label: "DatePicker 日期选择器",
          value: "daterangeValue",
          pickerOptions: [],
          align: "left",
          rangeSeparator: "~",
          startPlaceholder: "开始时间",
          endPlaceholder: "结束时间",
          valueFormat: "yyyy-MM-dd",
        },
      ],
      formRules: {
        inputValue: {
          required: true,
          message: "请输入输入框内容",
          trigger: "blur",
        },
      }, // 表单规则校验
      searchForm: {}, // 表单查询的条件
    };
  },
  methods: {
    handleSearch(formData) {
      console.log(formData);
      this.getTableData();
    },

    handleResetFrom() {
      this.searchForm = {};
      this.getTableData();
    },

    getTableData() {
      console.log("获取表格数据");
    },

    selectClick(obj) {
      console.log("下拉列表项点击了：", obj);
    },
  },
  created() {},
  mounted() {},
  destroyed() {},
};
</script>

<style lang="scss" scoped></style>