@pfan/tq-customform

安装使用

npm i @pfan/tq-customform

//mian.js  或者单个vue文件中
//注意：项目中需使用iview  本组件是基于iview 开发
import TqCustomform from '@pfan/tq-customform'
import '@pfan/tq-customform/dist/tq-customform.css'
Vue.use(TqCustomform)

使用

主表单

<!-- 新增   defaultValue 默认值 不传  status 状态 新增 可不传 -->
<form-generator ref="form" />
<!-- 未使用   defaultValue 默认值   status 状态 notUse  -->
<form-generator  ref="form"   :defaultValue="json1"   status="notUse"   /> 
<!-- 停用   defaultValue 默认值   status 状态 stop  -->
<form-generator ref="form" :defaultValue="json1" status="stop" />

子表单

<!-- 子表单  初始值 defaultValue父表单数据 用于生成左侧-->
<sub-form ref="form" :defaultValue="json" />
<!-- 子表单  修改 defaultValue父表单数据 用于生成左侧  subDefaultValue子表单数据   --->
<sub-form :defaultValue="json" :subDefaultValue="subJson" /> 

获取json 字符串

 getJson() {
    const json = this.$refs.form.getJson()
    // todo ...
    ... 
  },

组件中数据格式

{
  config: { // 表单总体样式类控制
    labelPosition: 'right', // 表单对齐方式   left/左对齐   right/右对齐   top/顶部对齐
    labelWidth: 95, // 标签宽度
    gutter: 10, // 栅格间隔
    size: 'default', // 表单尺寸   large/大   default/中(默认)   small/小
    labelColon: false // 是否添加添加冒号
  },
  schema: [{
    name: 'populationType', // 后端随机生成
    title: {
      content: '人员类型', // 标题内容
      hide: true, // 是否隐藏标题
      icon: {
        show: true, // 是否展示
        iconPosition: 'left', // 位置   文字前面left   文字后面 right
        iconType: 'icon', // 图片类型  iview  icon  img 三种
        iconName: 'help', // iview icon 或 img 的标识
        tips: '我是提示内容，我是提示内容，我是提示内容' // 提示内容
      }
    },
    type: 'String', // 字段类型，待定
    layout: 12, // 布局比例
    defaultValue: '', // 默认值
    required: true, // 是否必填显示
    // 组件的属性 可根据多个组件添加 多个
    form: { // 示例 根据具体的组件定义
      type: 'Select', 
      filterable: true,
      multiple: true,
      placeholder: '请输入英文名字', // 占位提示
      options: {
        type: 'static', // static静态数据；remote远程数据；localstorage内存数据
        remote: '/ddd/xxxx/thodName',
        localstorage: 'properties.populationType',
        staticList: [{
          label: '展示1',
          value: 'key1'
        }, {
          label: '展示2',
          value: 'key2'
        }]
      }
    },
    search: { // 搜索展示及配置
      show: true, // 是否作为搜索条件
      sort: 1, // 排序 在搜索展示里面的顺序
      layout: 6, // 搜索时占据布局 宽度 6/24
      label: '搜索叫的名字', // 默认使用 schema.description
      type: 'simple' // simple基础型；between范围型；
    },
    table: { // 列表展示及配置
        show: true, // 是否在列表展示，若为true，显示下方配置
        label: '宣传日期', // 列头显示文字，默认使用 schema.description
      //  key:'activityDate', //对应列内容的字段名 
        width: 150, // 列宽 在table 展示顺序排序使用
        fixed:'left', //列是否固定在左侧或者右侧，可选值为 left 左侧和 right 右侧
        ellipsis:'true', //开启后，文本将不换行，超出部分显示为省略号
        sortable:'true', //对应列是否可以排序
        sort: 1, // 排序 在列表展示里面的顺序
        //先提供render入口方便开发人员设置简单的个性化配置，如不同条件下的颜色/性别等
        render:'', //自定义渲染列，传入三个参数 row、column 和 index，分别指当前单元格数据，当前列数据，当前是第几行.代码块形式传入 
     },
    isImport:{// 是否可导入
      show:true,
    }
    validateRules: [ // 校验规则
      {
          "pattern":"/^[a-zA-Z\\u4e00-\\u9fa5]+$/",//正则
          "trigger":[ //触发方式
              "change"
          ],
          "type":"compose",//类型  required/必填类正则  regular/固定类正则  compose/组合类正则    custom/自定义正则
          "check":[ // 组合类正则时 用来控制 组合类选项的
              "letter",
              "chinese"
          ],
          "range":[ // 组合类正则时 用来控制 方位的
              0,
              999999
          ],
          "message":"输入格式不正确"
      }
      { // 普通正则
       "type":"custom",
       "pattern":"/^[a-zA-Z\\u4e00-\\u9fa5]+$/",//正则
        "message":"输入格式不正确"
        "trigger":[ //触发方式
          "change","blur"
        ],
      }
    ],
    // 控制 可见 和 disabled 状态
    // insert/新增  update/修改  view/查看
    controller: {
      disabled: {
        update: false,
        view: true
      },
      visible: {
        update: true,
        view: true
      }
    }
  }]
  //行容器相关  用于将行容器组件 提取出来
  rows:[]
}

行容器 注意事项

• 行容器 无法嵌套 2层 (即 行容器中无法再次拖入行容器)
• 导出数据 和导入数据时 需要进行数据处理 （处理行容器）

{"config":{"labelPosition":"left","labelWidth":90,"gutter":20,"size":"default","labelColon":false},"schema":[{"id":1633751801737,"type":"string","name":"","defaultValue":null,"layout":24,"required":false,"title":{"content":"标题1","hide":false,"icon":{"show":false,"iconPosition":"left","iconType":"icon","iconName":"","tips":""}},"form":{"type":"Select","options":{"type":"static","remote":"","localstorage":"","static":[{"label":"展示1","value":"key1"},{"label":"展示2","value":"key2"}]}},"validateRules":[],"search":{"show":false,"sort":1,"layout":6,"label":"","type":"simple"},"table":{"show":false,"label":"","width":150,"fixed":"","ellipsis":false,"sortable":false,"sort":1,"render":""},"controller":{"disabled":{"insert":false,"update":false,"view":true},"visible":{"insert":true,"update":true,"view":true}}},{"id":1633751801734,"type":"any","name":"","defaultValue":null,"layout":24,"required":false,"title":{"content":"行容器","hide":false,"icon":{"show":false,"iconPosition":"left","iconType":"icon","iconName":"","tips":""}},"form":{"type":"Row"},"validateRules":[],"search":{"show":false,"sort":1,"layout":6,"label":"","type":"simple"},"table":{"show":false,"label":"","width":150,"fixed":"","ellipsis":false,"sortable":false,"sort":1,"render":""},"controller":{"disabled":{"insert":false,"update":false,"view":true},"visible":{"insert":true,"update":true,"view":true}},"schema":[{"id":1633751801735,"type":"string","name":"","defaultValue":null,"layout":24,"required":false,"title":{"content":"标题21","hide":false,"icon":{"show":false,"iconPosition":"left","iconType":"icon","iconName":"","tips":""}},"form":{"type":"Input"},"validateRules":[],"search":{"show":false,"sort":1,"layout":6,"label":"","type":"simple"},"table":{"show":false,"label":"","width":150,"fixed":"","ellipsis":false,"sortable":false,"sort":1,"render":""},"controller":{"disabled":{"insert":false,"update":false,"view":true},"visible":{"insert":true,"update":true,"view":true}}},{"id":1633751801736,"type":"string","name":"","defaultValue":null,"layout":24,"required":false,"title":{"content":"标题22","hide":false,"icon":{"show":false,"iconPosition":"left","iconType":"icon","iconName":"","tips":""}},"form":{"type":"Input"},"validateRules":[],"search":{"show":false,"sort":1,"layout":6,"label":"","type":"simple"},"table":{"show":false,"label":"","width":150,"fixed":"","ellipsis":false,"sortable":false,"sort":1,"render":""},"controller":{"disabled":{"insert":false,"update":false,"view":true},"visible":{"insert":true,"update":true,"view":true}}}]},{"id":1633751801738,"type":"string","name":"","defaultValue":null,"layout":24,"required":false,"title":{"content":"标题3","hide":false,"icon":{"show":false,"iconPosition":"left","iconType":"icon","iconName":"","tips":""}},"form":{"type":"Input"},"validateRules":[],"search":{"show":false,"sort":1,"layout":6,"label":"","type":"simple"},"table":{"show":false,"label":"","width":150,"fixed":"","ellipsis":false,"sortable":false,"sort":1,"render":""},"controller":{"disabled":{"insert":false,"update":false,"view":true},"visible":{"insert":true,"update":true,"view":true}}}]}

{"config":{"labelPosition":"left","labelWidth":90,"gutter":20,"size":"default","labelColon":false},"schema":[{"id":1633751801737,"type":"string","name":"","defaultValue":null,"layout":24,"required":false,"title":{"content":"标题1","hide":false,"icon":{"show":false,"iconPosition":"left","iconType":"icon","iconName":"","tips":""}},"form":{"type":"Select","options":{"type":"static","remote":"","localstorage":"","static":[{"label":"展示1","value":"key1"},{"label":"展示2","value":"key2"}]}},"validateRules":[],"search":{"show":false,"sort":1,"layout":6,"label":"","type":"simple"},"table":{"show":false,"label":"","width":150,"fixed":"","ellipsis":false,"sortable":false,"sort":1,"render":""},"controller":{"disabled":{"insert":false,"update":false,"view":true},"visible":{"insert":true,"update":true,"view":true}}},{"id":1633751801735,"type":"string","name":"","defaultValue":null,"layout":24,"required":false,"title":{"content":"标题21","hide":false,"icon":{"show":false,"iconPosition":"left","iconType":"icon","iconName":"","tips":""}},"form":{"type":"Input"},"validateRules":[],"search":{"show":false,"sort":1,"layout":6,"label":"","type":"simple"},"table":{"show":false,"label":"","width":150,"fixed":"","ellipsis":false,"sortable":false,"sort":1,"render":""},"controller":{"disabled":{"insert":false,"update":false,"view":true},"visible":{"insert":true,"update":true,"view":true}}},{"id":1633751801736,"type":"string","name":"","defaultValue":null,"layout":24,"required":false,"title":{"content":"标题22","hide":false,"icon":{"show":false,"iconPosition":"left","iconType":"icon","iconName":"","tips":""}},"form":{"type":"Input"},"validateRules":[],"search":{"show":false,"sort":1,"layout":6,"label":"","type":"simple"},"table":{"show":false,"label":"","width":150,"fixed":"","ellipsis":false,"sortable":false,"sort":1,"render":""},"controller":{"disabled":{"insert":false,"update":false,"view":true},"visible":{"insert":true,"update":true,"view":true}}},{"id":1633751801738,"type":"string","name":"","defaultValue":null,"layout":24,"required":false,"title":{"content":"标题3","hide":false,"icon":{"show":false,"iconPosition":"left","iconType":"icon","iconName":"","tips":""}},"form":{"type":"Input"},"validateRules":[],"search":{"show":false,"sort":1,"layout":6,"label":"","type":"simple"},"table":{"show":false,"label":"","width":150,"fixed":"","ellipsis":false,"sortable":false,"sort":1,"render":""},"controller":{"disabled":{"insert":false,"update":false,"view":true},"visible":{"insert":true,"update":true,"view":true}}}],"rows":[{"id":1633751801734,"type":"any","name":"","defaultValue":null,"layout":24,"required":false,"title":{"content":"行容器","hide":false,"icon":{"show":false,"iconPosition":"left","iconType":"icon","iconName":"","tips":""}},"form":{"type":"Row"},"validateRules":[],"search":{"show":false,"sort":1,"layout":6,"label":"","type":"simple"},"table":{"show":false,"label":"","width":150,"fixed":"","ellipsis":false,"sortable":false,"sort":1,"render":""},"controller":{"disabled":{"insert":false,"update":false,"view":true},"visible":{"insert":true,"update":true,"view":true}},"ids":[1633751801735,1633751801736]}]}

20211009 开会改动问题

增加可导入字段 isImport

{
  ...
  schema: [{
    ...
    // import 关键字 怕后端有影响  使用isImport 字段    
    isImport:{ //便于后续扩展  使用对象
      show:true,
      }
    }
  ]
}

static 字段变更

{
  ...
  schema: [{
    ...
   form:{
     ...
    options: {
      type: 'static', //注意这里的类型 static不变    static静态数据；remote远程数据；localstorage内存数据
      remote: '/ddd/xxxx/thodName',
      localstorage: 'properties.populationType',
      staticList: [{// static--> staticList
        label: '展示1',
        value: 'key1'
      }, {
        label: '展示2',
        value: 'key2'
      }]
    }
   }
  }
]

关于 正则

预定义正则分类

必填类正则
固定类正则

• 手机
• 电话
• 手机+电话
• 身份证
• 邮箱 组合类正则
  自定义正则

预定义正则

const RULES = [
  { type: 'required', name: '必填', pattern: '/[\\S]+/', message: '请输入必填项' },
  { type: 'mobile', name: '手机号', pattern: '/^1[3456789]\\d{9}$/', message: '请输入手机号' },
  { type: 'phone', name: '固定电话', pattern: '/^0\\d{2,3}-\\d{7,8}$/', message: '请输入固定电话' },
  { type: 'contact', name: '联系方式(手机+固定电话)', pattern: '/(^1[3456789]\\d{9}$)|(/^0\\d{2,3}-\\d{7,8}$)/', message: '请输入联系方式' },
  { type: 'number', name: '正整数', pattern: '/^\\d+$/', message: '请输入正整数' },
  { type: 'email', name: '邮箱', pattern: '/^([A-Za-z0-9_-.])+@([A-Za-z0-9_-.])+.([A-Za-z]{2,4})$/', message: '请输入邮箱' },
  { type: 'idCard', name: '身份证', pattern: '/(^\\d{15}$)|(^\\d{17}([0-9]|X|x)$)/', message: '请输入身份证号' },
]

预定义组合类正则 子项

const COMPOSES = [
  { type: 'number', name: '数字', pattern: '0-9' },
  { type: 'letter', name: '字母', pattern: 'a-zA-Z' },
  { type: 'underline', name: '下划线', pattern: '_' },
  { type: 'reduce', name: '减号', pattern: '-' },
  { type: 'chinese', name: '中文', pattern: '\\u4e00-\\u9fa5' },
  { type: 'range', name: '范围', pattern: '{0,999999}' },
]

正则子项 数据格式

{
    "pattern":"/^[a-zA-Z\\u4e00-\\u9fa5]+$/",//正则
    "trigger":[ //触发方式
        "change"
    ],
    "type":"compose",//类型  required/必填类正则  regular/固定类正则  compose/组合类正则    custom/自定义正则
    "check":[ // 组合类正则时 用来控制 组合类选项的
        "letter",
        "chinese"
    ],
    "range":[ // 组合类正则时 用来控制 方位的
        0,
        999999
    ],
    "id":1634001301454 //生成时间戳 id 
}

1027 修改正则规则

const RULES = [
  { type: 'required', name: '必填', pattern: '/[\\S]+/', message: '请输入必填项' },
  { type: 'mobile', name: '手机号', pattern: '/^1[3456789]\\d{9}$/', message: '请输入手机号' },
  { type: 'phone', name: '固定电话', pattern: '/^0\\d{2,3}-\\d{7,8}$/', message: '请输入固定电话' },
  { type: 'contact', name: '联系方式(手机+固定电话)', pattern: '/(^1[3456789]\\d{9}$)|(/^0\\d{2,3}-\\d{7,8}$)/', message: '请输入联系方式' },
  { type: 'email', name: '邮箱', pattern: '/^([A-Za-z0-9_-.])+@([A-Za-z0-9_-.])+.([A-Za-z]{2,4})$/', message: '请输入邮箱' },
  { type: 'idCard', name: '身份证', pattern: '/(^\\d{15}$)|(^\\d{17}([0-9]|X|x)$)/', message: '请输入身份证号' },
  { type: 'number', name: '数字', pattern: '/^\\d+$/', message: '请输入数字' },
  { type: 'chinese', name: '中文', pattern: '/^[\\u4e00-\\u9fa5]+$/', message: '请输入中文' },
  { type: 'chineseenglish', name: '中英文', pattern: '/^[a-zA-z\\u4e00-\\u9fa5]+$/', message: '请输入中英文' },
  { type: 'min', name: '最小字符长度', pattern: '/^[\\s\\S]{6,}$/', message: '最少输入6个字符长度' },
  { type: 'max', name: '最大字符长度', pattern: '/^[\\s\\S]{0,99}$/', message: '最大输入99个字符长度' },
]

类型

[
  {
    value: 'required',
    label: '必填项校验',
  },
  {
    value: 'textformat',
    label: '文本格式校验',
    children: [
      {
        value: 'mobile',
        label: '手机号',
      },
      {
        value: 'phone',
        label: '固定电话',
      },
      {
        value: 'contact',
        label: '联系方式(手机+固定电话)',
      }, {
        value: 'number',
        label: '正整数',
      }, {
        value: 'email',
        label: '邮箱',
      }, {
        value: 'idCard',
        label: '身份证',
      },
    ],
  },
  {
    value: 'texttype',
    label: '文本类型校验',
    children: [
      {
        value: 'number',
        label: '数字',
      },
      {
        value: 'chinese',
        label: '中文',
      },
      {
        value: 'chineseenglish',
        label: '中英文',
      },
    ],
  },
  {
    value: 'lengthrange',
    label: '长度范围校验',
    children: [
      {
        value: 'min',
        label: '最小字符长度',
      },
      {
        value: 'max',
        label: '最大字符长度',
      },
    ],
  },
  {
    value: 'custom',
    label: '正则表达式校验',
  },
]