1.基本用法

全局安装及引入

npm i odc-form-render
//main.js中注册
import OdcFormRender from 'odc-form-render'
import 'odc-form-render/OdcFormRender.css'//样式引入
Vue.use(OdcFormRender)

2. 使用示例

<template>
  <div class="dashboard-container">
    <!-- <div class="dashboard-text">name: {{ name }}</div> -->
    <OdcFormRender
      ref="searchRef"
      label-width="90px"
      :form-config="formConfig"
      :form-data="searchForm"
      v-bind="$attrs"
    >
      <template>
        <div slot="search" class="btnWrap">
          <el-button type="primary" size="medium" @click="search"
            >查询</el-button
          >
          <el-button size="medium" @click="handleReset">重置</el-button>
        </div>
      </template>
    </OdcFormRender>
  </div>
</template>

<script>
  import { formConfig } from './data'
  export default {
    name: 'Dashboard',
    data() {
      return {
        formConfig,
        searchForm: {
          statScale: '1',
          tarEchart: 'pollutantEmission',
          timeType: 'year',
          yearStr: [],
          industryStr: [],
          streetStr: [],
          enterpriseName: '',
        },
      }
    },
    methods: {
      search() {
        this.$refs.searchRef.submitForm(() => {
          // 在验证成功后执行的操作
          console.log('Form submitted successfully')
        })
      },
      handleReset() {
        this.$refs.searchRef.resetForm()
      },
    },
  }
</script>

<style lang="scss" scoped>
  .dashboard {
    &-container {
      margin: 30px;
    }
    &-text {
      font-size: 30px;
      line-height: 46px;
    }
  }
</style>

formConfig 配置示例

// 查询表单配置项
export const formConfig = [
  {
    //radio控件
    label: '统计类型',
    prop: 'timeType',
    type: 'radio',
    require: false,
    span: 6,
    options: [
      {
        label: '年',
        value: 'year',
      },
      {
        label: '月',
        value: 'month',
      },
    ],
  },
  {
    //基础输入框
    label: '关键字',
    prop: 'enterpriseName',
    type: 'text',
    span: 6,
  },
  {
    //基础下拉框
    label: '指标',
    prop: 'tarEchart',
    type: 'select',
    multiple: false,
    clearable: true,
    span: 6,
    options: [
      { label: '排污量', value: 'pollutantEmission' },
      { label: '水重复利用率（%）', value: 'waterReuseRate' },
      { label: '工业增加值（万元）', value: 'industryAddValue' },
      { label: '产值（万元）', value: 'productionValue' },
      { label: '耗水量', value: 'waterConsume' },
      { label: '用水量', value: 'totalConsume' },
      { label: '自备水', value: 'selfProvidedWaterAct' },
      { label: '自来水', value: 'tapWaterAct' },
      { label: '再生水', value: 'reclaimedWaterAct' },
    ],
  },

  {
    //自定义下拉框
    label: '行业',
    prop: 'industryStr',
    type: 'autoSelect',
    span: 6,
    apiUrl: () =>
      request({
        url: `/system/dict/data/type/company_business`,
        method: 'get',
      }),
    placeholder: '请选择行业',
    require: false,
    multiple: true,
    collapseTags: true,
    labelValue: {
      label: 'dictLabel',
      value: 'dictValue',
    },
  },

  {
    //自定义插槽
    type: 'slotName',
    slotName: 'search',
    span: 6,
  },
]

3.参数说明

| 参数 | 是否必传 | 参数类型 | 描述 | | ------------- | -------- | -------- | --------------------------------------------- | | labelWidth | 否 | String | 表单域标签的宽度 | | labelPosition | 否 | String | 表单域标签的位置 | | formConfig | 是 | Array | 表单配置数组，定义表单字段的结构和行为 | | formData | 是 | Object | 包含表单数据，由 OdcFormRender 组件渲染和操作 | | disabled | 否 | Boolean | 是否禁用表单 | | rules | 否 | Object | 表单验证规则 | | gutter | 否 | Number | 表单项间距 | |

Methods

• validateField(value): 验证指定的表单字段。
• resetFields(value): 重置指定表单字段的值。
• clearValidate(value): 清除指定表单字段的验证消息。
• submitForm(cb): 提交表单，并在验证成功后触发回调函数。
• resetForm(isResetCascader): 重置整个表单，可选择是否也重置级联选择器组件。
• visibleChange(prop, flag): 触发下拉元素的可见性变化时的事件。
• cascaderChange(object, prop): 触发级联选择器选中值变化时的事件。
• selectChange({ prop, val }): 触发下拉框值变化时的事件。

formConfig 配置说明 | formConfig | 是否必填 | 描述 | | ------------ | -------- | ------------------------------------------------------------------------------------- | | type | 是 | 表单项类型，包括文本输入框、下拉选择框、日期选择器等不同类型 | | label | 是 | 控件的标签文本 | | prop | 是 | 控件对应的数据字段，用于与表单数据绑定 | | disabled | 否 | 是否禁用当前表单项 | | maxlength | 否 | 输入最大长度，对文本输入框和文本域输入框有效 | | options | 否 | 下拉选择框的选项列表 | | apiUrl | 否 | 自定义下拉选择框的数据来源 API 地址 | | value | 否 | 控件的值 | | placeholder | 否 | 控件的占位符文字 | | autosize | 否 | 自适应文本域的高度，只对文本域输入框有效 | | width | 否 | 控件的宽度 | | rows | 否 | 文本域输入框的行数 | | showLimit | 否 | 是否显示输入框的字数限制提示 | | show-word-limit | 否 | 是否显示字数限制 | | multiple | 否 | 是否允许多选 | | filterable | 否 | 下拉选择框是否可搜索 | | clearable | 否 | 是否显示清空按钮 | | collapseTags | 否 | 多选下拉选择框的已选项是否在一行显示 | | popperAppendToBody | 否 | 下拉选择框的弹出框是否插入至 body 元素中，常用于解决下拉框被其他元素遮挡的问题 | | expandTrigger| 否 | 级联选择器的展开触发方式 | | isCheckbox | 否 | 是否为复选框形式 | | lastLevel | 否 | 是否只显示最后一级的选项 | | showAllLevels| 否 | 是否展示所有级联选择的层级 | | collapse | 否 | 是否可折叠 | | filterable | 否 | 是否允许通过搜索过滤选项 | | showLevel | 否 | 是否展示级别 | | slotName | 否 | 自定义插槽的名称 | | isTips | 否 | 表单项后的提示信息 | | isStatus | 否 | 控件状态，用于显示或隐藏该表单项 | | isHidden | 否 | 是否隐藏该表单项 |

type 控件类型 配置描述 | item.type | 描述 | | --------------- | ---------------------------------------------- | | text | 文本输入框 | | number | 数字输入框 | | textarea | 文本域输入框 | | password | 密码输入框 | | link | 文件链接 | | inputNumber | 数字输入框 | | select | 下拉选择框 | | autoSelect | 自定义下拉选择框 | | switch | 开关按钮 | | radio | 单选框组 | | checkbox | 复选框组 | | daterange | 日期范围选择器 | | datetime | 日期时间选择器 | | datetimerange | 日期时间范围选择器 | | date | 日期选择器 | | month | 月份选择器 | | year | 年份选择器 | | monthrange | 月份范围选择器 | | defaultCascader | 默认的级联选择器，根据配置的选项进行级联选择 | | slotName | 插槽名称，用于自定义组件的插槽 |