表单组件

一、安装

npm i -S form_element 或者 yarn add form_element (推荐)

二、使用

1、模块说明

   import { fromRules， fromComponent } from 'form_element';
   fromRules: 表单验证实例方法，如要外部使用，使用mixins混入方法
   fromComponent: 表单组件. 

2、组件使用

目前就一个组件 fromComponent

属性

format：Object

对表单指定字段数据进行处理

eg :

      format: { // key = 表单对应字段名称。
              hostId: { 当字段数据类型是个对象时，获取指定的值。data （获取的值的K）
                data: 'id'
              },
              participants: { 当字段类型是数组时，data（获取的值的K），key(赋值字段)，sortIndex当前数据下标位置
                data: 'k',
                key: 'ceshi',
                sortIndex: true // 是否添加数据下标位置
              }
            }

rules：Object

自定义表单规则，例子已element为准

setRules：Object

设置表单字段验证规则

eg :

      setRules: { // 字段规则
                meetingName: 'required', // 必填
                phone: 'rules_phone' // 多重验证，必填，电话号码验证
              },

formClass：String

设置表单class类名

'form-diogin-style'为组件自带弹窗样式

formData：Object

设置表单数据格式

eg :

              formData: { // 数据格式
                  meetingName: '',
                  hostId: {id: 1, name: '测试'}, formlist 对象类型 type = inputSelect 时
                  upload: [{ // formlist 对象类型 type = upload 时
                    name: 'food.jpeg',
                    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
                  }, {
                    name: 'food2.jpeg',
                    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
                  }],
                  participants: [{name: 'ces'}, {name: 'ces2', k: '这就是我要获取数据的字段'}, {name: 'ces3'}], formlist 对象类型 type = tagSelect || tagSelectList 时
                },

formData：formList

设置表单列表

eg :

formList: [ // 列表类型对象
          {
            label: '必填项',
            prop: 'meetingName'
          },
          {
            label: '电话号码多重验证',
            prop: 'phone'
          },
          {
            label: '下拉选择',
            prop: 'meetingType',
            type: 'select',
            options: [
              {
                label: '测试1',
                value: '2'
              },
              {
                label: '测试2',
                value: '3'
              }
            ]
          },
          {
            label: '回调单选',
            prop: 'hostId',
            type: 'inputSelect'
          },
          {
            label: '时间选择',
            prop: 'startTime',
            type: 'time' // 支持element时间选择类型
          },
          {
            label: '密码输入',
            prop: 'duration',
            text: 'password'
          },
          {
            label: '文本框输入',
            prop: 'brefIntro',
            text: 'textarea'
          },
          {
            label: 'tag选择，可拖动排序',
            prop: 'participants',
            type: 'tagSelect'
          },
           {
             label: '分类一次性选择tag',
             prop: 'participants',
             type: 'tagSelectList'
           },
          {
            label: '下载上传',
            prop: 'upload',
            type: 'upload',
            dialog: true // 按钮回调关闭,开启
          },
          {
            label: '单选',
            prop: 'voteFlag',
            type: 'radio',
            radioOption: [
              {
                label: '是',
                value: true
              },
              {
                label: '否',
                value: false
              }
            ]
          }
        ],

formData：rulesMessage

设置表单列表验证提示语

eg :

rulesMessage: { // 字段提示语
        meetingName: '请输入必填项',
        phone: '电话号码不能为空测试',
      }

unDisabled： Boolean

设置表单列表是否可编辑，true为可编辑

回调方法请查看例子

 <template>
   <div class="from-template-box">
     <div class="from-template-header">
       <div>
         <label>禁用模式</label>
         <el-select size="mini" v-model="selectVal" placeholder="请选择">
           <el-option
             v-for="item in options"
             :key="item.value"
             :label="item.label"
             :value="item.value">
           </el-option>
         </el-select>
       </div>
       <div>
         <label>弹窗模式</label>
         <el-select size="mini" v-model="diagionVal" placeholder="请选择">
           <el-option
             v-for="item in options"
             :key="item.value"
             :label="item.label"
             :value="item.value">
           </el-option>
         </el-select>
       </div>
       <div>
         <label>上传下载框按钮回调</label>
         <el-select size="mini" v-model="uploadVal" placeholder="请选择" @change="uploadChange">
           <el-option
             v-for="item in options"
             :key="item.value"
             :label="item.label"
             :value="!item.value">
           </el-option>
         </el-select>
       </div>
     </div>
     <formTemplate :format="format" ref="ruleForm" :setRules="setRules" :formClass="diagionVal?'':'form-diogin-style'"
                   :formData="formData"
                   :formList="formList"
                   :rulesMessage="rulesMessage"
                   @handleRemove="handleRemove"
                   @uploadBtn="uploadBtn"
                   :unDisabled="selectVal" @fromClick="fromClick" @formBtnFun="formBtnFun"
                   @tagClose="tagClose"></formTemplate>
     <el-button type="primary" @click="onSubmit">提交</el-button>
   </div>
 </template>
 
 <style lang="scss" rel="stylesheet/scss" scoped>
   .from-template-box {
     width: 600px;
     margin-left: 100px;
   }
 
   .from-template-header {
     display: flex;
     margin-bottom: 20px;
     align-items: center;
     & > div {
       margin-right: 10px;
       align-items: center;
       display: flex;
     }
 
   }
 </style>
 
 <script type="text/ecmascript-6">
   import Vue from 'vue'
   import {Button} from 'element-ui'
   Vue.use(Button)
   import formTemplate from './index.vue'
   export default{
     data() {
       return {
         selectVal: true,
         diagionVal: false,
         uploadVal: true,
         options: [
           {
             label: '开启',
             value: false,
           },
           {
             label: '关闭',
             value: true,
           }
         ],
         setRules: { // 字段规则
           meetingName: 'required',
           phone: 'rules_phone'
         },
         formList: [ // 列表类型对象
           {
             label: '必填项',
             prop: 'meetingName'
           },
           {
             label: '电话号码多重验证',
             prop: 'phone'
           },
           {
             label: '下拉选择',
             prop: 'meetingType',
             type: 'select',
             options: [
               {
                 label: '测试1',
                 value: '2'
               },
               {
                 label: '测试2',
                 value: '3'
               }
             ]
           },
           {
             label: '回调单选',
             prop: 'hostId',
             type: 'inputSelect'
           },
           {
             label: '时间选择',
             prop: 'startTime',
             type: 'time' // 支持element时间选择类型
           },
           {
             label: '密码输入',
             prop: 'duration',
             text: 'password'
           },
           {
             label: '文本框输入',
             prop: 'brefIntro',
             text: 'textarea'
           },
           {
             label: 'tag选择，可拖动排序',
             prop: 'participants',
             type: 'tagSelect'
           },
           {
             label: 'tag选择，可拖动排序',
             type: 'tagSelectList',
             dialogFun: 'tagSelectList',
             list: [
               {
                 name: '人员',
                 prop: 'nonVotingPersons'
               },
               {
                 name: '单位',
                 prop: 'nonVotingUnits'
               },
               {
                 name: '职务',
                 prop: 'nonVotingPositions'
               }
             ]
           },
           {
             label: '下载上传',
             prop: 'upload',
             type: 'upload',
             dialog: true // 按钮回调关闭,开启
           },
           {
             label: '单选',
             prop: 'voteFlag',
             type: 'radio',
             radioOption: [
               {
                 label: '是',
                 value: true
               },
               {
                 label: '否',
                 value: false
               }
             ]
           }
         ],
         formData: { // 数据格式
           meetingName: '',
           meetingType: '',
           hostId: {id: 1, name: '测试'},
           startTime: '',
           duration: '',
           brefIntro: '',
           upload: [{
             name: 'food.jpeg',
             url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
           }, {
             name: 'food2.jpeg',
             url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
           }],
           participants: [{name: 'ces'}, {name: 'ces2', k: '这就是我要获取数据的字段'}, {name: 'ces3'}],
           nonVotingPersons: [{name: 'ces'}, {name: 'ces2', k: '这就是我要获取数据的字段'}, {name: 'ces3'}],
         },
         format: { // 过滤对象，数组，最后获取的数据
           hostId: {
             data: 'id'
           },
           participants: {
             data: 'k',
             key: 'ceshi',
             sortIndex: true // 是否添加数据下标位置
           }
         },
         rulesMessage: { // 字段提示语
           meetingName: '请输入必填项',
           phone: '电话号码不能为空测试',
         }
       }
     },
     components: {
       formTemplate
     },
     methods: {
       uploadChange(data) {
           this.$set(this.formList[8], 'dialog', data)
       },
       onSubmit() { // 提交回调
         this.$refs.ruleForm.validate().then(data => {
           alert('提交成功')
           console.log(data)
         })
       },
       fromClick(data) {
         alert('你点击了' + data.label)
         console.log(data)
       },
       handleRemove(data) { // 删除下载文件
         alert('你点击了' + data.name + '删除')
       },
       formBtnFun(data) {
         console.log(data)
       },
       uploadBtn(data) { //
         alert('你点击了上传按钮')
       },
       tagClose(data, index) {
         let {prop} = data
         alert('你点击了' + this.formData[prop][index].name + '删除')
         if (this.formData[prop]) {
           this.formData[prop].splice(index, 1)
         }
       }
     }
   }
 </script>