npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@icreate/imedx-form-builder-save-template

v0.0.11-beta.1

Published

保存模板,封装了表单设计器组件

Downloads

13

Readme

版本更新说明

  • [ 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 @icreate/imedx-form-builder-save-template # 安装包

在vue使用

  1. 在vue项目的main.js中引入
import VFormTemplate from '@icreate/imedx-form-builder-save-template'  //引入 @icreate/imedx-form-builder-save-template
Vue.use(VFormTemplate)  //全局注册VFormTemplate(同时注册了v-form-designer-template和v-form-render-template组件)
  1. 在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>
  1. 在Vue模板中使用表单渲染器组件
    <v-form-render-template
      ref="vFormTemplateRef"
      :formId="formId"
      :form-json="formJson"
      :form-data="formData"
      :option-data="optionData"
      @appendButtonClick="appendButtonClickHandler"
      @formChange="handleFormChange"
      :customComponentObj="customComponentObj"
    ></v-form-render-template>
    <ics-button type="primary" @click="submitForm">Submit</ics-button>
  1. 引入自定义组件(可选)
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: {
    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>
  1. 项目的路由代理配置(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': ''
        }
      }
    }
}