odc-form-render

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	插槽名称，用于自定义组件的插槽