vue 表单封装（利用iview自带组件）

实战代码功能如下

1.inputNumber  数字框 千分位和小数点 处理。（详细功能会另起文章）

2.AutoComplete 和select 框的联动处理

3. 弹框功能和弹框表单

4.动态添加表单字段

5.实战富文本编辑器另起文档说明。

 

封装目的和解决痛点，

表单字段 10几个20个时候，需要人为的不断拷贝和添加  相同的代码 特别是iview  冗余代码会非常多，html也不方便维护

本篇文章提供的代码是 

主要实现弹框的form 表单 且 有联动查询，各个组件会统一提交。

---

 注意： 核心 配置 在termOption.js   表单的验证 为了大家交流学习本人以不同的形式v-bind   并不是代码不规范，请勿吐槽

inpuNumber  在iview.vue 中是有部分问题的。 

代码已做优化，  利用 inputFocus 事件 和绑定验证的blur 和change 做处理    具体实战我会在vue  实战系列单独列出。这里不做详细说明。

---

代码封装 form表单组件 （CusForm.vue）

源码如下：

 

---

AutoCompLinkage.vue   源码 再 CusForm中的 引用

 

---

二次封装 弹框form 实战。

 

弹框源码 tipModal.vue 

和 modpage.js  的代码

 

export default {
  props: {
    value: Boolean
  },

  data () {
    return {
      visible: false,
      loading: true
    }
  },

  watch: {
    value (newVal) {
      this.visible = newVal
    },
    visible (newVal) {
      if (newVal && this.onShow) {
        this.onShow()
      }
      this.$emit('input', newVal)
    }
  }
}

/***上面是ModalPage.js 代码请放置到指定目录**/

 modform.vue    组件代码

 

实战实例点 

Create.vue    我的项目代码用于创建的，里面有一个富文本编辑器， 富文本编辑器的应用，会有文章单独讲解。此处不做说明

此处代码的实战主要用户 联动 和自动auto框 。 

 

exampleList.vue  实战

主要功能  用于用户动态添加组件

代码如下

 

实战核心配置js  

termOption.js     注意： 这个是核心，日常维护只需要处理这个配置文件，就可以解决大部分问题。 方便维护字段维护和添加

// import { formatDate } from '@util/tool'

// const mobileValid = (rule, val, cb) => {
//   let checkPhone = (mobile) => {
//     let tel = /^0\d{2,3}-?\d{7,8}$/
//     let phone = /^1[34578]\d{9}$/
//     if (tel.test(mobile) || phone.test(mobile)) {
//       return false
//     }
//     return true
//   }
//   // 指定截止日期 时做空验证
//   if (checkPhone(val)) {
//     cb(new Error('请输入格式正确的固话和手机号'))
//   }
//   cb()
// }

const termName = (rule, val, cb) => {
  if (val.length > 100) {
    cb(new Error('条款名称不超过100字'))
  }
  cb()
}

export const lengthValidator = (rule, val, cb) => {
  if (val.length > rule.maxLength) {
    cb(new Error(rule.message))
  }
  cb()
}

// 数字框的处理保留
const moneyValidChange = (rule, val, cb) => {
  // eslint-disable-next-line no-useless-escape
  val = val.replace(/\,/g, '').replace('-', '')
  if (this._isEmpty(val)) {
    cb(new Error('请填写合同金额'))
  } else if (this.isNumberInt(val)) {
    cb(new Error('请输入正确数字'))
  }
  cb()
}

const applyText = (rule, val, cb) => {
  if (val && val.length > 100) {
    cb(new Error(rule.name + '不超过100字'))
  }
  cb()
}
const termKeyWord = (rule, val, cb) => {
  if (val && val.length > 30) {
    cb(new Error('不超过30字，关键字之间以逗号间隔'))
  }
  cb()
}

const moneyValidBlur = (rule, val, cb) => {
  // eslint-disable-next-line no-useless-escape
  val = val.replace(/\,/g, '').replace('-', '')
  if (this._isEmpty(val)) {
    cb(new Error('请填写合同金额'))
  } else if (this.isNumberInt(val)) {
    cb(new Error('请输入正确数字'))
  } else {
    this.signInfoData[rule.field] = parseFloat(val).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,')
  }
  cb()
}

export const signRules = {
  money: [
    { validator: moneyValidChange, trigger: 'change' },
    { validator: moneyValidBlur, trigger: 'blur' }
  ],
  termName: [
    { required: true, message: '请输入条款名称', trigger: 'change' },
    { validator: termName, trigger: 'change' }
  ],
  industry: [
    { required: true, message: '请选择行业', trigger: 'change' }
  ],
  l1Class: [
    { required: true, message: '请选择业务类型', trigger: 'change' }
  ],
  l2Class: [
    { required: true, message: '请选择产品类型', trigger: 'change' }
  ],
  l3Class: [
    { required: true, message: '请选择产品细分', trigger: 'change' }
  ],
  applyObject: [
    { validator: applyText, trigger: 'change', name: '适用对象' }
  ],
  applyScence: [
    { validator: applyText, trigger: 'change', name: '适用场景' }
  ],
  termKeyword: [
    { validator: termKeyWord, trigger: 'change' }
  ],
  remark: [
    { validator: applyText, trigger: 'change', name: '备注' }
  ]

}

export const addProjectForms = () => {
  return [
    {
      type: 'input',
      label: '条款名称：',
      model: 'termName',
      prop: 'termName',
      rules: signRules.termName,
      placeholder: '条款名称不超过100字'
    },
    {
      type: 'select',
      label: '行业：',
      model: 'industry',
      prop: 'industry',
      showModel: 'industryName',
      rules: signRules.industry,
      placeholder: '',
      children: []
    },
    {
      type: 'select',
      label: '业务类型：',
      model: 'l1Class',
      prop: 'l1Class',
      showModel: 'l1ClassName',
      rules: signRules.l1Class,
      placeholder: ''
    },
    {
      type: 'select',
      label: '产品类型：',
      model: 'l2Class',
      prop: 'l2Class',
      showModel: 'l2ClassName',
      rules: signRules.l2Class,
      placeholder: '',
      children: []
    },
    {
      type: 'select',
      label: '产品细分：',
      model: 'l3Class',
      prop: 'l3Class',
      showModel: 'l3ClassName',
      rules: signRules.l3Class,
      placeholder: '',
      children: []
    },
    {
      type: 'autoComp',
      label: '条款主标签：',
      model: 'mainTag',
      prop: 'mainTag',
      showModel: 'mainTagName',
      eventName: 'mainTagEvent',
      placeholder: '',
      children: []
    },
    {
      type: 'autoComp',
      label: '条款次标签：',
      model: 'secTag',
      prop: 'secTag',
      showModel: 'secTagName',
      eventName: 'secTagEvent',
      placeholder: '',
      children: []
    },
    {
      type: 'input',
      label: '条款关键字：',
      model: 'termKeyword',
      rules: signRules.termKeyword,
      prop: 'termKeyword',
      placeholder: '不超过30字。例：银行同业,货币基金',
      children: []
    },
    {
      type: 'textarea',
      label: '适用对象：',
      model: 'applyObject',
      prop: 'applyObject',
      rules: signRules.applyObject,
      class: 'middleSize',
      placeholder: '100个字内',
      children: []
    },
    {
      type: 'textarea',
      label: '适用场景：',
      model: 'applyScence',
      prop: 'applyScence',
      rules: signRules.applyScence,
      class: 'middleSize',
      placeholder: '100个字内',
      children: []
    },
    {
      type: 'textarea',
      label: '备注：',
      model: 'remark',
      prop: 'remark',
      rules: signRules.remark,
      class: 'middleSize',
      placeholder: '100个字内',
      children: []
    }

  ]
}

// 范例字段
export const exampleForms = () => {
  return [
    {
      type: 'inputSlot',
      label: '所属合约名称',
      model: 'contractName',
      prop: 'contractName',
      slot: 'contractName',
      class: 'contractName',
      placeholder: '所属合约名称不超过60字'
    },
    {
      type: 'input',
      label: '一级章节名称 ',
      model: 'chapterOneName',
      prop: 'chapterOneName',
      placeholder: '例:"第一章增级对象“'
    },
    {
      type: 'input',
      label: '二级章节名称 ',
      model: 'chapterTwoName',
      prop: 'chapterTwoName',
      isShow: true,
      placeholder: '例:"1.1内部增级“'
    },
    {
      type: 'input',
      label: '三级章节名称 ',
      model: 'chapterThreeName',
      prop: 'chapterThreeName',
      isShow: true,
      placeholder: '例:"4.1.1内部增级的具体策略"'
    },
    {
      type: 'input',
      label: '四级章节名称 ',
      model: 'chapterFourName',
      prop: 'chapterFourName',
      isShow: true,
      placeholder: '例“4.1.1.1内部增级的方式”'
    },
    {
      type: 'text',
      slot: 'optionBtn',
      prop: 'optionBtn',
      class: 'optionBtn'
    },
    {
      type: 'textarea',
      label: '范例内容',
      model: 'exampleContent',
      prop: 'exampleContent',
      class: 'lineMiddleSize',
      placeholder: '1000个字内'
    }
  ]
}