药研云-智能表单
Introduction
智能表单可以灵活配置和扩展，帮助开发人员快速构建高度定制的表单生成器。
Install
智能表单提供了一些基础控件，基于 Vue 和 element@2.13.1，所以请先安装它们。
npm i -S element @zjyuanfei/zjsmartform
Setup
import ElementUI from 'element-ui'
import smartForm from "@zjyuanfei/zjsmartform";
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: [],
templateListData: [
{
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: {
templateList(obj, cb){
if(obj){
cb(this.templateListData)
}
},
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: Function
模板列表，数据结构下文中给出示例。
- 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>