@[toc]
版本更新说明
- [ 0.0.27-beta.4] 修复:combogrid的label报错
- [ 0.0.27-beta.3] 修复:formData数据实时回显
- [ 0.0.27-beta.2] 修复:打包引入地址组件
- [ 0.0.27-beta.1] 1.地址级联组件(业务组件) area-cascader 2.新模板/ace-builds放入ics-ui
- [ 0.0.27] 1.label添加tooltip (字段labelTooltipContent/labelTooltipPlacement) 2.添加multi-column-select(select自定义模板:多列select)
- [ 0.0.26-beta.0] 修复栅格组件的自适应宽度问题
- [ 0.0.25 ] 1.可隐藏保存模板按钮saveFormTemplate:false,提供了自己保存的方法customSaveTemplate 2.栅格垂直方向对齐
- [ 0.0.24 ] 随ics-ui更新版本
- [ 0.0.23 ] 计数器默认值问题
- [ 0.0.22 ] 1.自定义组件的name值改为'自定义组件的类型(type) + Widget' 2.属性collapseTags:select多选时是否将选中值按文字的形式展示 - 3.组件设置增加了标签行高 4.表单设置:静态字段增加了左侧标识
- [ 0.0.21 ] 1.input:placeholder 2.组件设置:组件大小 3.表单设置:设置标签颜色labelColor以及标签字体大小labelFontSize 4.子表单
- [ 0.0.20 ] 支持引入自定义组件
- [ 0.0.19 ] input组件只读属性的样式,设置属性 readOnlyNoBorder
说明
这是一个表单设计器
安装
npm i @icreate/ics-basic-form-builder
在vue使用
- 在vue项目的main.js中引入
import VForm from '@icreate/ics-basic-form-builder'
import '@icreate/ics-basic-form-builder/styles/form-builder.css'
import IcsUI from '@icreate/ics-ui'
import '@icreate/ics-ui/lib/ics-ui.css'
Vue.use(IcsUI)
Vue.use(VForm)
- 在Vue模板中使用表单设计器组件
<v-form-designer
ref="vfDesignerRef"
:designer-config="designerConfig"
:basicFieldsTransfer="basicFieldsTransfer"
:formJson="formJson"
:formTemplateJson="formTemplateJson"
@saveFormTemplateHandler="saveFormTemplateHandler"
:customComponentObj="customComponentObj"
></v-form-designer>
- 在Vue模板中使用表单渲染器组件
<v-form-render
ref="vFormRef"
:form-json="formJson"
:form-data="formData"
:option-data="optionData"
@appendButtonClick="appendButtonClickHandler"
@formChange="handleFormChange"
:customComponentObj="customComponentObj"
>
</v-form-render>
<ics-button type="primary" @click="submitForm">Submit</ics-button>
- 引入自定义组件(可选)
import customCom from "./customCom.vue";
数据格式:
v-form-designer 表单设计器
designerConfig :表单设计器配置 (必传)
basicFieldsTransfer : 基础字段组件(必传)
formJson: 显示上次编辑的设计器页面 (选传)
formTemplateJson :显示保存的模板 (选传)
saveFormTemplateHandler :保存模板后的回调函数,可以获取到模板的json数据
customComponentObj: 自定义组件的对象格式
v-form-render 表单渲染器
formJson:需要渲染的表单的json数据(从设计器复制json数据)(必传)
formData:需要渲染的表单数据(选传)
optionData:动态传入的选项数据(例如:多选框的选项)(选传)
appendButtonClickHandler : 输入框后置按钮的回调函数(选传)
handleFormChange: 表单数据改变时触发
submitForm: 可以获取到表单数据formData
customComponentObj: 自定义组件的对象格式
export default {
data() {
return {
customComponentArr:[customCom],
customComponentObj:{},
designerConfig: {
resetFormJson: false,
toolbarMaxWidth: 490,
saveFormTemplate: false,
},
basicFieldsTransfer: [
{
type: "customType",
formItemFlag: true,
options: {
name: "customName",
label: "自定义组件",
labelAlign: "",
defaultValue: null,
labelWidth: null,
labelHidden: false,
hidden: false,
required: false,
requiredHint: "",
columnWidth: '200px',
optionItems: [
{ label: "选项1", value: 1 },
{ label: "选项2", value: 2 },
],
},
},
{
type: "data-table",
options: {
name: "dataTable",
label: "数据表格",
tableWidth: "100%",
tableHeight: "300px",
showCheckBox: true,
stripe: true,
tableBorder: true,
showActionButton: true,
optionItems: {
thOptions: [
{
label: "日期",
value: "date",
width: "180",
},
{
label: "姓名",
value: "name",
width: "180",
},
{
label: "地址",
value: "address",
width: "",
},
],
tbodyOptions: [
{
id: "1",
date: "2016-05-02",
name: "张三",
address: "上海市普陀区金沙江路 1518 弄",
},
{
id: "2",
date: "2016-05-04",
name: "李四",
address: "上海市普陀区金沙江路 1517 弄",
},
{
id: "3",
date: "2016-05-01",
name: "王二麻子",
address: "上海市普陀区金沙江路 1519 弄",
},
],
},
},
},
{
type: "input",
options: {
label: "输入框",
name: "inputtext",
type: "text",
defaultValue:"",
required: true,
requiredHint:'',
validation: "/^[\u4e00-\u9fa5]+$/",
validationHint: "只能输入中文哦",
reverseValidation:'/[^\u4e00-\u9fa5]/g',
max:"" ,
readOnlyNoBorder: true,
labelTooltipContent:"标签文字提示内容",
labelTooltipPlacement:"top"
},
},
{
type: "input",
options: {
label: "输入框",
name: "inputpsw",
type: "password",
},
},
{
type: "textarea",
options: {
label: "文本域",
name: "textarea",
},
},
{
type: "radio",
options: {
name: "radio",
label: "单选项",
optionItems: [
{
label: "选项1",
value: "1",
},
{
label: "选项2",
value: "2",
},
],
},
},
{
type: "checkbox",
options: {
name: "checkbox",
label: "多选框",
max: 1,
optionItems: [
{
label: "选项1",
value: "1",
},
{
label: "选项2",
value: "2",
},
{
label: "选项3",
value: "3",
},
],
},
},
{
type: "number",
options: {
name: "number",
label: "计数器",
min: 0,
max: 100000,
precision: 0,
step: 1,
},
},
{
type: "select",
options: {
name: "select",
label: "下拉框",
labelAndValue: true,
collapseTags: true,
optionItems: [
{
id:"",
label: "select 1",
value: 1,
},
{
label: "select 2",
value: 2,
},
{
label: "select 3",
value: 3,
},
],
},
},
{
type: "select-plus",
options: {
name: "select-plus",
label: "下拉框加强版",
optionItems: [
{
label: "select 1",
value: 1,
},
{
label: "select 2",
value: 2,
},
{
label: "select 3",
value: 3,
},
],
},
},
{
type: "multi-column-select",
options: {
name: "multi-column-select",
label: "多列select",
labelColumn: "name",
valueColumn: "id",
showHeader: true,
labelAndValue: true,
optionItems: {
thOptions: [
{
label: "日期",
value: "date",
width: "100",
},
{
label: "姓名",
value: "name",
width: "100",
},
{
label: "地址",
value: "address",
width: "260",
},
],
tbodyOptions: [
{
id: "1",
date: "2016-05-02",
name: "张三",
address: "上海市普陀区金沙江路 1518 弄",
},
{
id: "2",
date: "2016-05-04",
name: "李四",
address: "上海市普陀区金沙江路 1517 弄",
},
{
id: "3",
date: "2016-05-01",
name: "王二麻子",
address: "上海市普陀区金沙江路 1519 弄",
},
],
},
},
},
{
type: "time",
options: {
name: "time",
label: "时间",
format: "HH:mm:ss",
},
},
{
type: "time-range",
options: {
name: "time-range",
label: "时间范围",
format: "HH:mm:ss",
},
},
{
type: "date",
options: {
name: "date",
label: "日期",
format: "yyyy-MM-dd",
valueFormat: "yyyy-MM-dd",
},
},
{
type: "date-range",
options: {
name: "date-range",
label: "日期范围",
format: "yyyy-MM-dd",
valueFormat: "yyyy-MM-dd",
},
},
{
type: "datetime",
options: {
name: "datetime",
label: "日期时间",
format: "yyyy-MM-dd HH:mm:ss",
valueFormat: "yyyy-MM-dd HH:mm:ss",
},
},
{
type: "switch",
options: {
name: "switch",
label: "开关",
},
},
{
type: "rate",
options: {
name: "rate",
label: "评分",
},
},
{
type: "button",
options: {
name: "button",
label: "按钮",
},
},
{
type: "cascader",
options: {
name: "cascader",
label: "级联选择",
optionItems: [
{
label: "select 1",
value: 1,
children: [{ label: "child 1", value: 11 }],
},
{ label: "select 2", value: 2 },
{ label: "select 3", value: 3 },
],
},
},
{
type: "combo-grid",
options: {
name: "comboGrid",
label: "组合网格",
labelColumn: "name",
valueColumn: "id",
valueKey:"",
labelAndValue: true,
customFilter: ["id", "name"],
optionItems: {
thOptions: [
{
label: "日期",
value: "date",
width: "180",
},
{
label: "姓名",
value: "name",
width: "180",
},
{
label: "地址",
value: "address",
width: "260",
},
],
tbodyOptions: [
{
id: "111111",
date: "2016-05-02",
name: "王小虎1",
address: "上海市普陀区金沙江路 1518 弄",
},
{
id: "111112",
date: "2016-05-04",
name: "王小虎2",
address: "上海市普陀区金沙江路 1517 弄",
},
{
id: "111113",
date: "2016-05-01",
name: "王小虎3",
address: "上海市普陀区金沙江路 1519 弄",
},
],
},
},
},
{
type: 'area-cascader',
options: {
name: 'area-cascader',
label: '地址级联'
}
}
],
formTemplateJson:
JSON.parse(localStorage.getItem("saveFormTemplateJson")) || null,
formJson: {
widgetList: [
{
type: "input",
options: {
labelAlign: "",
defaultValue: "",
placeholder: "",
columnWidth: "200px",
size: "",
labelWidth: null,
labelHidden: false,
readonly: false,
disabled: false,
hidden: false,
clearable: true,
showPassword: false,
required: true,
requiredHint: "",
validation: "/^[一-龥]+$/",
validationHint: "只能输入中文哦",
minLength: null,
maxLength: null,
showWordLimit: false,
appendButton: true,
appendButtonDisabled: false,
buttonIcon: "el-icon-search",
label: "用户名",
name: "username",
type: "text",
},
icon: "text-field",
formItemFlag: true,
id: "username",
},
{
type: "input",
options: {
labelAlign: "",
defaultValue: "",
placeholder: "",
columnWidth: "200px",
size: "",
labelWidth: null,
labelHidden: false,
readonly: false,
disabled: false,
hidden: false,
clearable: true,
showPassword: false,
required: false,
requiredHint: "",
validation: "",
validationHint: "",
minLength: null,
maxLength: null,
showWordLimit: false,
appendButton: false,
appendButtonDisabled: false,
buttonIcon: "el-icon-search",
label: "密码",
name: "password",
type: "password",
},
icon: "text-field",
formItemFlag: true,
id: "password",
},
{
type: "textarea",
options: {
labelAlign: "",
defaultValue: "",
placeholder: "",
columnWidth: "200px",
size: "",
labelWidth: null,
labelHidden: false,
readonly: false,
disabled: false,
hidden: false,
clearable: true,
showPassword: false,
required: false,
requiredHint: "",
validation: "",
validationHint: "",
minLength: null,
maxLength: null,
showWordLimit: false,
appendButton: false,
appendButtonDisabled: false,
buttonIcon: "el-icon-search",
label: "留言板",
name: "message",
rows: 3,
},
icon: "text-field",
formItemFlag: true,
id: "message",
},
],
formConfig: {
labelWidth: 80,
labelPosition: "left",
size: "",
labelAlign: "label-left-align",
labelColor:"",
labelFontSize:"",
labelLineHeight: "",
cssCode: "",
customClass: "",
functions: "",
layoutType: "PC",
modelName: "formData",
refName: "vForm",
rulesName: "rules",
onFormCreated: "",
onFormMounted: "",
onFormDataChange: "",
},
},
formData: {},
optionData: {
checkbox: [
{
label: "动态选项1",
value: "1",
},
{
label: "动态选项2",
value: "2",
},
{
label: "动态选项3",
value: "3",
},
],
},
};
},
methods: {
submitForm() {
this.$refs.vFormRef
.getFormData()
.then((formData) => {
alert(JSON.stringify(formData));
})
.catch((error) => {
this.$message.error(error);
});
},
saveFormTemplateHandler(data) {
localStorage.setItem("saveFormTemplateJson", data);
this.$message.success("模板保存成功");
},
appendButtonClickHandler(data) {
console.log("appendButtonClickHandler=======", data.$data.fieldModel);
},
handleFormChange(
fieldName,
newValue,
oldValue,
formDataModel,
subFormName,
subFormRowIndex,
comboGridItem
) {
console.log(this.$refs["vFormRef"].widgetRefList)
this.$refs["vFormRef"].widgetRefList["select"].setRequired(true);
this.$refs["vFormRef"].widgetRefList["select"].setValue("1");
this.$refs["vFormRef"].widgetRefList["input"].setWidgetOption("max",newValue)
this.$refs["vFormRef"].widgetRefList["comboGrid"].setValueNotEmitHandler(newValue);
this.$refs["vFormRef"].widgetRefList["select"].$refs.fieldEditor.toggleMenu();
},
customSaveTemplate(){
this.$refs.vfDesignerRef.$refs.toolbarRef.saveFormTemplate()
}
},
created(){
this.customComponentArr.map((item) => {
return (this.customComponentObj[item.name] = item);
});
}
}
自定义组件的格式(.vue文件):
<div>
<ics-switch
ref="fieldEditor"
v-model="fieldModelData.switchVal"
></ics-switch>
<ics-input
class="marginBottom"
ref="fieldEditor"
v-model="fieldModelData.inputVal"
placeholder="请输入内容"
clearable
show-password
/>
<ics-select v-model="fieldModelData.selectVal" placeholder="请选择">
<ics-option
v-for="item in field.options.optionItems"
:key="item.value"
:label="item.label"
:value="item.value"
>
</ics-option>
</ics-select>
</div>
</template>
export default {
name: "customTypeWidget",
data() {
return {
fieldModelData: {
switchVal: false,
inputVal: "",
selectVal: "",
}
};
},
props: {
field: Object,
value: Object,
},
model: {
prop: "value",
event: "change",
},
methods: {
},
watch: {
value: {
handler(val) {
if (val) {
this.fieldModelData = this.value;
}
},
deep: true,
immediate: true,
},
fieldModelData: {
handler(val) {
this.$emit("change", val);
},
deep: true,
},
},
};
<style scoped>
.marginBottom {
margin-bottom: 20px;
}
</style>