版本更新说明
通知：npm包名改了，改为了@imedx/imedx-form-builder-save-template
- 更新请参考 https://www.npmjs.com/package/@icreate/ics-basic-form-builder
- [ 0.0.12-beta.1] 更新请参考 https://www.npmjs.com/package/@icreate/ics-basic-form-builder 版本0.0.27-beta.3
- [ 0.0.12-beta.0] 更新请参考 https://www.npmjs.com/package/@icreate/ics-basic-form-builder 版本0.0.27-beta.2
- [ 0.0.12] 更新请参考 https://www.npmjs.com/package/@icreate/ics-basic-form-builder 版本0.0.27-beta.0
- [ 0.0.11-beta.1 ] 更新请参考 https://www.npmjs.com/package/@icreate/ics-basic-form-builder 版本0.0.26-beta.0
- [ 0.0.11-beta.0 ] 更新请参考 https://www.npmjs.com/package/@icreate/ics-basic-form-builder 版本0.0.26-beta.0
- [ 0.0.10 ] 更新请参考 https://www.npmjs.com/package/@icreate/ics-basic-form-builder 版本0.0.25
- [ 0.0.9 ] 随ICS-UI 0.0.41 版本更新
- [ 0.0.8 ] 不需要单独引入表单设计器了
- [ 0.0.6 ] 保存模板 设计组件支持传入id(修改设计界面)
- [ 0.0.5 ] 参考 https://www.npmjs.com/package/@icreate/ics-basic-form-builder 版本0.0.22
- [ 0.0.4 ]
1.input:placeholder 2.组件设置：组件大小 3.表单设置：设置标签颜色labelColor以及标签字体大小labelFontSize 4.子表单 5.支持引入自定义组件 6.input组件只读属性的样式，设置属性 readOnlyNoBorder
说明
这是一个表单设计器(封装了保存模板)
安装
npm i @imedx/imedx-form-builder-save-template # 安装包在vue使用
- 在vue项目的main.js中引入
import VFormTemplate from '@imedx/imedx-form-builder-save-template' //引入 @imedx/imedx-form-builder-save-template
Vue.use(VFormTemplate) //全局注册VFormTemplate(同时注册了v-form-designer-template和v-form-render-template组件)- 在Vue模板中使用表单设计器组件
<v-form-designer-template
ref="vfDesignerTemplateRef"
:designer-config="designerConfig"
:basicFieldsTransfer="basicFieldsTransfer"
:formId="formId"
:formJson="formJson"
@getFormId="getFormIdHandler"
@getFormJson="getFormJsonHandler"
:customComponentObj="customComponentObj"
></v-form-designer-template>- 在Vue模板中使用表单渲染器组件
<v-form-render-template
ref="vFormTemplateRef"
:formId="formId"
:form-json="formJson"
:form-data="formData"
:option-data="optionData"
@appendButtonClick="appendButtonClickHandler"
@formChange="handleFormChange"
@apiRequestStatus="apiRequestHandler"
:customComponentObj="customComponentObj"
></v-form-render-template>
<ics-button type="primary" @click="submitForm">Submit</ics-button>- 引入自定义组件（可选）
import customCom from "./customCom.vue"; //自定义组件的格式，请参考最后的示例数据格式：
v-form-designer 表单设计器
designerConfig ：表单设计器配置 （必传） basicFieldsTransfer ： 基础字段组件（必传） formId: 表单id（修改设计界面时，可传，不传的话渲染formJson） formJson： 显示上次编辑的设计器页面 （选传） getFormIdHandler: 保存模板后的回调函数，可以获取到表单id getFormJsonHandler ：保存模板后的回调函数，可以获取到模板的json数据 customComponentObj: 自定义组件的对象格式
v-form-render 表单渲染器 formId: 表单id（必传） formJson：需要渲染的表单的json数据（选传） formData：需要渲染的表单数据（选传） optionData：动态传入的选项数据（例如：多选框的选项）（选传） appendButtonClickHandler ： 输入框后置按钮的回调函数（选传） handleFormChange: 表单数据改变时触发 submitForm: 可以获取到表单数据formData customComponentObj: 自定义组件的对象格式
export default {
data() {
return {
customComponentArr:[customCom], //自定义组件的数组
customComponentObj:{}, //将数组转成对象的格式 (写在created())
designerConfig: {
resetFormJson: false,
toolbarMaxWidth: 490,
saveFormTemplate: false, //隐藏保存模板
},
basicFieldsTransfer: [
{ //自定义组件
type: "customType", //自定义类型
formItemFlag: true,
options: {
name: "customName", //name唯一值
label: "自定义组件", //label值
labelAlign: "", //label对齐方式
defaultValue: null, //默认值
labelWidth: null, //标签宽度
labelHidden: false, //标签是否隐藏
hidden: false, //是否隐藏
required: false, //是否必填
requiredHint: "", //必填提示
columnWidth: '200px', //在子表单中的组件列宽
optionItems: [ //选项（ics-radio/ics-checkbox/ics-select...）
{ label: "选项1", value: 1 },
{ label: "选项2", value: 2 },
],
},
},
{
type: "input", //表单组件类型（必传）
options: {
label: "输入框", //组件label（必传）
name: "inputtext", //组件name（必传，而且必须是唯一值）
type: "text", //input 输入框的类型（可传）
defaultValue:"", //默认值（可传）
required: true, //是否必填（可传）
requiredHint:'', //必填提示（可传）
validation: "/^[\u4e00-\u9fa5]+$/", //组件的正则校验规则 （可传）
validationHint: "只能输入中文哦", //校验提示语（可传）
reverseValidation:'/[^\u4e00-\u9fa5]/g', //数据格式：正则取反+g (需要限制输入时，必传)
max:"", //限制输入的最大值 (限制输入是数字的情况)
readOnlyNoBorder: true, //只读时的样式 不要边框
},
},
{
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, // 可被勾选的 checkbox 的最大数量
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, // 获取选项数据的格式（例如：选中下拉框，是否需要获取label值，默认不获取）
collapseTags: true, //多选时是否将选中值按文字的形式展示 默认为fale
optionItems: [ //下拉列表（必传）
{
id:"", // 唯一key值 （如果value值不唯一，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: "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", //name列对应label
valueColumn: "id", //id列对应value(选中列表，获取的值)
valueKey:"", //添加表格数据的唯一key值属性（不传，默认是valueColumn）
labelAndValue: true, //true: 绑定的值是对象(含label) 默认为false
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 弄",
},
],
},
},
},
],
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:"", //label颜色
labelFontSize:"", //label字体大小
cssCode: "",
customClass: "",
functions: "",
layoutType: "PC",
modelName: "formData",
refName: "vForm",
rulesName: "rules",
onFormCreated: "",
onFormMounted: "",
onFormDataChange: "",
},
},
formData: {},
optionData: { //动态传入的选项数据
checkbox: [ //checkbox 是name名称
{
label: "动态选项1",
value: "1",
},
{
label: "动态选项2",
value: "2",
},
{
label: "动态选项3",
value: "3",
},
],
},
};
},
methods: {
apiRequestHandler(status) {
console.log(status, '接口请求结束--------------')
},
getFormIdHandler(id) {
this.formId = id;
console.log(id, "表单id------------------");
},
getFormJsonHandler(data) {
console.log(data, "表单json");
// this.formJson = JSON.parse(data);
},
submitForm() {
this.$refs.vFormTemplateRef.$refs.vFormRef
.getFormData()
.then((formData) => {
// Form Validation OK
alert(JSON.stringify(formData));
})
.catch((error) => {
// Form Validation failed
this.$message.error(error);
});
},
appendButtonClickHandler(data) {
//输入框添加后置按钮，回调函数
console.log("appendButtonClickHandler=======", data.$data.fieldModel);
},
handleFormChange(
fieldName,
newValue,
oldValue,
formDataModel,
subFormName,
subFormRowIndex，
comboGridItem
) {
//fieldName name
//newValue 新值
//oldValue 旧值
//formDataModel 表单数据
//comboGridItem 组合网格组件，传过来的对象
console.log(this.$refs['vFormTemplateRef'].$refs["vFormRef"].widgetRefList) //获取每个组件的属性方法
this.$refs['vFormTemplateRef'].$refs["vFormRef"].widgetRefList["select"].setRequired(true); //设置select组件必填属性为true
this.$refs['vFormTemplateRef'].$refs["vFormRef"].widgetRefList["select"].setValue("1"); //设置select组件值为1
this.$refs['vFormTemplateRef'].$refs["vFormRef"].widgetRefList["input"].setWidgetOption("max",newValue) //设置input组件的最大值为newValue
this.$refs['vFormTemplateRef'].$refs["vFormRef"].widgetRefList["comboGrid"].setValueNotEmitHandler(newValue); //给组合网格赋值（赋值不会触发handleFormChange） //改变组合网格选项,会触发
this.$refs['vFormTemplateRef'].$refs["vFormRef"].widgetRefList["select"].$refs.fieldEditor.toggleMenu(); //select组件 自动展开下拉框
},
customSaveTemplate(){
//自己保存模板的方法
this.$refs.vfDesignerRef.$refs.toolbarRef.saveFormTemplate() //方法的返回值即是保存的数据
}
},
created(){
this.customComponentArr.map((item) => {
return (this.customComponentObj[item.name] = item);
});
}
}自定义组件的格式（.vue文件）：
<!-- template 按需编写, 示例如下 -->
<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", //自定义组件的类型(type) + 'Widget'
data() {
return {
fieldModelData: {
switchVal: false, //每个组件的绑定值（名称自定义），都放在fieldModelData里面
inputVal: "",
selectVal: "",
}
};
},
props: {
field: Object, //basicFieldsTransfer的自定义组件的数据
value: Object,
},
model: {
prop: "value",
event: "change",
}, // v-model
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>- 项目的路由代理配置（vue.config.js）
module.exports = {
devServer: {
proxy: {
'/prod-form-template-api': {
target: `http://172.16.1.248:8080`,
changeOrigin: true,
pathRewrite: {
'^/prod-form-template-api': ''
}
}
}
}