@icreate/ics-form-builder-save-template
Advanced tools
这是一个表单设计器(封装了保存模板)
npm i @icreate/ics-form-builder-save-template # 安装包
import VForm from '@icreate/ics-basic-form-builder' //引入VForm库
import '@icreate/ics-basic-form-builder/styles/form-builder.css' //引入VForm样式
import IcsUI from '@icreate/ics-ui' //引入ics-ui
import '@icreate/ics-ui/lib/ics-ui.css'
Vue.use(IcsUI) //全局注册ics-ui
Vue.use(VForm) //全局注册VForm(同时注册了v-form-designer和v-form-render组件)
import VFormTemplate from '@icreate/ics-form-builder-save-template' //引入 @icreate/ics-form-builder-save-template
Vue.use(VFormTemplate) //全局注册VFormTemplate(同时注册了v-form-designer-template和v-form-render-template组件)
<v-form-designer-template
ref="vfDesignerTemplateRef"
:designer-config="designerConfig"
:basicFieldsTransfer="basicFieldsTransfer"
:formJson="formJson"
@getFormId="getFormIdHandler"
@getFormJson="getFormJsonHandler"
></v-form-designer-template>
<v-form-render-template
ref="vFormTemplateRef"
:formId="formId"
:form-json="formJson"
:form-data="formData"
:option-data="optionData"
@appendButtonClick="appendButtonClickHandler"
@formChange="handleFormChange"
></v-form-render-template>
<ics-button type="primary" @click="submitForm">Submit</ics-button>
v-form-designer 表单设计器
designerConfig ：表单设计器配置 （必传） basicFieldsTransfer ： 基础字段组件（必传） formJson： 显示上次编辑的设计器页面 （选传） getFormIdHandler: 保存模板后的回调函数，可以获取到表单id getFormJsonHandler ：保存模板后的回调函数，可以获取到模板的json数据
v-form-render 表单渲染器 formId: 表单id（必传） formJson：需要渲染的表单的json数据（选传） formData：需要渲染的表单数据（选传） optionData：动态传入的选项数据（例如：多选框的选项）（选传） appendButtonClickHandler ： 输入框后置按钮的回调函数（选传） handleFormChange: 表单数据改变时触发 submitForm: 可以获取到表单数据formData
export default {
data() {
return {
designerConfig: {
resetFormJson: false,
toolbarMaxWidth: 490,
},
basicFieldsTransfer: [
{
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:"" //限制输入的最大值 (限制输入是数字的情况)
},
},
{
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值，默认不获取）
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",
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: {
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组件 自动展开下拉框
},
},
}
module.exports = {
devServer: {
proxy: {
'/prod-form-template-api': {
target: `http://192.168.3.73:9010`,
changeOrigin: true,
pathRewrite: {
'^/prod-form-template-api': ''
}
}
}
}
FAQs
这是一个表单设计器(封装了保存模板)
The npm package @icreate/ics-form-builder-save-template receives a total of 0 weekly downloads. As such, @icreate/ics-form-builder-save-template popularity was classified as not popular.
We found that @icreate/ics-form-builder-save-template demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
/Product
Socket Firewall Free is now bundled into Docker Hardened Images, adding build-time and dependency-install supply chain protection on top of hardened base images for Node.js, Python, and Rust.
Security News
Season’s greetings from Socket, and here’s to a calm end of year: clean dependencies, boring pipelines, no surprises.
Research
/Security News
Impostor NuGet package Tracer.Fody.NLog typosquats Tracer.Fody and its author, using homoglyph tricks, and exfiltrates Stratis wallet JSON/passwords to a Russian IP address.