药研云-智能表单

Introduction

智能表单可以灵活配置和扩展，帮助开发人员快速构建高度定制的表单生成器。

Install

智能表单提供了一些基础控件，基于 Vue 和 [email protected]，所以请先安装它们。

npm i -S element @mrhuoye/smartform

Setup

import ElementUI from 'element-ui'
import smartForm from "@mrhuoye/smartform";
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);
Vue.use(smartForm);

Basic usage

<template>
    <smart-form
      :panelList="panelList"
      @save="getData"
    />
</template>
<script>
  data(){
    return {
      panelList: []
    }
  },
  methods:{
    getData(){}
  }
</script>

Example

<template>
  <div>
    <!-- 配置模式 -->
    <smart-form
      v-if="!isEdit"
      ref="sf"
      :diyComponent="diyComponent"
      :diyConfig="diyConfig"
      :panelList="panelList"
      :templateList="templateList"
      @save="getData"
      :input-search="inputSearch"
    />
    <!-- 编辑模式 -->
    <smart-form
      v-else
      :disabled="false"
      :isEdit="isEdit"
      :diyComponent="diyComponent"
      :userLayout="userLayout"
      :input-search="inputSearch"
      @action-btn="handler"
    />
  </div>
</template>

<script>
import HelloWorld from "../components/HelloWorld";
import HelloWorld2 from "../components/HelloWorld2";
import ConfigInput from "../components/ConfigInput";
import ConfigInput2 from "../components/ConfigInput2";
export default {
  name: "Home",
  data() {
    return {
      isEdit: false,
      userLayout: [
        {
          x: 0,
          y: 0,
          w: 4,
          h: 2,
          i: 5,
          id: "ZDzxLpLVAJ",
          currentCompontent: "sfInput",
          btnArr: ["question", "checked", "edit", "freeze"],
          config: {
            area_id: "",
            area_title: "",
            ctrl_name: "",
            type: "text",
            title: "标题",
            domain_name: "",
            id: "",
            rank: "left",
            required: 0,
            width: 200,
            height: 40,
            align: "start",
            input_type: "0",
            meddra_ver: "0",
            unitValue: "",
            unitOptions: []
          }
        }
      ],
      diyComponent: [],
      diyConfig: [],
      templateList: [
        {
          name: "第一个模板",
          data: [
            {
              x: 0,
              y: 0,
              w: 12,
              h: 2,
              i: 5,
              id: "BPVqKW8dzy",
              currentCompontent: "sfRegion",
              config: { area_title: "域" },
              moved: false
            },
            {
              x: 0,
              y: 2,
              w: 12,
              h: 2,
              i: 6,
              id: "Zrga8VAY15",
              currentCompontent: "sfText",
              config: {
                area_id: "",
                area_title: "",
                ctrl_name: "",
                type: "static_label",
                id: "",
                title: "静态文本",
                align: "start",
                fontsize: "16",
                bold: false
              },
              moved: false
            },
            {
              x: 0,
              y: 4,
              w: 12,
              h: 2,
              i: 7,
              id: "ky8WrNymvv",
              currentCompontent: "sfRegion",
              config: { area_title: "域" },
              moved: false
            },
            {
              x: 0,
              y: 6,
              w: 12,
              h: 2,
              i: 8,
              id: "Z6nm1eYlyQ",
              currentCompontent: "sfText",
              config: {
                area_id: "",
                area_title: "",
                ctrl_name: "",
                type: "static_label",
                id: "",
                title: "静态文本",
                align: "start",
                fontsize: "16",
                bold: false
              },
              moved: false
            }
          ]
        },
        {
          name: "第二个模板",
          data: [
            {
              x: 0,
              y: 0,
              w: 12,
              h: 2,
              i: 5,
              id: "ky8WrNARol",
              currentCompontent: "sfRegion",
              config: { area_title: "域" },
              moved: false
            },
            {
              x: 0,
              y: 2,
              w: 12,
              h: 2,
              i: 6,
              id: "kKyLwmlaRR",
              currentCompontent: "sfText",
              config: {
                area_id: "",
                area_title: "",
                ctrl_name: "",
                type: "static_label",
                id: "",
                title: "静态文本",
                align: "start",
                fontsize: "16",
                bold: false
              },
              moved: false
            },
            {
              x: 0,
              y: 4,
              w: 12,
              h: 2,
              i: 7,
              id: "BJEDMLJn4r",
              currentCompontent: "sfRegion",
              config: { area_title: "域" },
              moved: false
            },
            {
              x: 0,
              y: 6,
              w: 12,
              h: 8,
              i: 8,
              id: "2QzgYbVO5a",
              currentCompontent: "sfTable",
              config: {
                area_id: "",
                area_title: "",
                type: "dynamic_table",
                row: 1,
                col: 2,
                columnConfig: [
                  { label: "第1列", component: "el-input" },
                  { label: "第2列", component: "el-select" }
                ]
              },
              moved: false
            }
          ]
        }
      ],
      panelList: [
        {
          title: "web表单",
          list: [
            {
              name: "域",
              componentName: "sfRegion",
              componentConfig: "sfRegionConfig"
            },
            {
              name: "静态文本",
              componentName: "sfText",
              componentConfig: "sfTextConfig"
            },
            {
              name: "单行输入框",
              componentName: "sfInput",
              componentConfig: "sfInputConfig"
            },
            {
              name: "多行输入框",
              componentName: "sfTextarea",
              componentConfig: "sfTextareaConfig"
            },
            {
              name: "单选框",
              componentName: "sfRadio",
              componentConfig: "sfRadioConfig"
            },
            {
              name: "复选框",
              componentName: "sfCheckbox",
              componentConfig: "sfCheckboxConfig"
            },
            {
              name: "下拉框",
              componentName: "sfSelect",
              componentConfig: "sfSelectConfig"
            },
            {
              name: "日期控件",
              componentName: "sfDatepicker",
              componentConfig: "sfDatepickerConfig"
            },
            {
              name: "动态表格",
              componentName: "sfTable",
              componentConfig: "sfTableConfig"
            },
            {
              name: "静态表格",
              componentName: "sfStaticTable",
              componentConfig: "sfStaticTableConfig"
            }
          ]
        },
        {
          isExtend: true,
          title: "扩展控件",
          list: [
            {
              name: "helloWorld",
              componentName: "HelloWorld",
              componentConfig: "ConfigInput"
            }
          ]
        },
        {
          isExtend: true,
          title: "通用控件",
          list: [
            {
              name: "helloWorld2",
              componentName: "HelloWorld2",
              componentConfig: "ConfigInput2"
            }
          ]
        }
      ]
    };
  },
  created() {
    this.diyComponent = [HelloWorld, HelloWorld2];
    this.diyConfig = [ConfigInput, ConfigInput2];
  },
  methods: {
    getData(layouts) {
      console.log(layouts, "lll");
    },
    inputSearch(queryString, cb) {
      let restaurants = [
        {
          value: "456三全鲜食（北新泾店）",
          address: "长宁区新渔路144号"
        },
        {
          value: "Hot honey 首尔炸鸡（仙霞路）",
          address: "上海市长宁区淞虹路661号"
        }
      ];
      if (queryString === "456") {
        restaurants = [{ value: "测试", address: "长宁区新渔路144号" }];
      }
      cb(restaurants);
    },
    handler(config) {
      console.log("核查逻辑：", config);
    }
  },
  computed: {}
};
</script>

Properties

• panelList
  • type: Array
  • required: 1
  • default: []

控件选择面板，提供基于一组基础配置，数据结构下文中给出示例。

• userLayout
  • type: Array
  • required: 0
  • default: []

传入的 layout

• templateList
  • type: Array
  • required: 0
  • default: []

模板列表，数据结构下文中给出示例。

• isEdit
  • type: Boolean
  • required: 0
  • default: false

使用编辑模式

• diyComponent
  • type: Array
  • required: 0
  • default: []

自定义组件

• diyConfig
  • type: Array
  • required: 0
  • default: []

自定义组件的配置项，需要跟 diyComponent 中的自定义组件对应起来

• input-search
  • type: Function
  • required: 0
  • params:
    • { String } queryString
    • { Function } callBack

输入框联想输入，queryString 是输入框的值，callBack 则用于接收搜索到的数据，参数是必须是数组类型。（Tips:函数触发已经做了防抖处理。）

Event

action-btn

核查逻辑点击事件

// template
<smart-form
  @action-btn="handler"
/>
// methods
handler: function(type){
  // Type 是按钮的类型 question,question-new,checked,freeze,edit
}

save

保存按钮，点击事件，返回当前配置的数组

// template
<smart-form
  @save="handler"
/>
// methods
handler: function(layouts){
  // layouts 是整个表单的配置数据
}

Methods

save

调用智能表单的保存方法

<template>
    <smart-form ref="sf" />
</template>

<script>
    methods:{
        handler(){
            this.$refs.sf.save()
        }
    }
</script>

highlightWidget

• type: Function
• required: 0
• params:
  • { String } id 控件 id

表单模式下高亮控件，传入控件的 Id

<template>
    <smart-form ref="sf" />
</template>

<script>
    methods:{
        handler(){
            this.$refs.sf.highlightWidget(id)
        }
    }
</script>