New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@pfan/tq-customform

Package Overview
Dependencies
Maintainers
1
Versions
19
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@pfan/tq-customform

```js npm i @pfan/tq-customform

  • 1.0.16
  • latest
  • npm
  • Socket score
Version published
Maintainers
1
Created
Source

安装使用

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: '正则表达式校验',
  },
]

FAQs

Package last updated on 20 Apr 2022

Did you know?

Socket

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.

Install

Related posts

Ransomware in 2024: Record-Low Payment Rate Signals Changing Economics of Cybercrime

Security News

Ransomware in 2024: Record-Low Payment Rate Signals Changing Economics of Cybercrime

Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.

By Sarah Gooding  -  Feb 14, 2025
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc