vue-form-config v1.4.4

#在 element-ui 基础上封装 #form 表单 #只需要配置 object，即可完成表单的所有信息

使用案例

import Vue from "vue";
import vueFormConfig from "vue-form-config";
Vue.use(vueFormConfig);

<vue-form-config
  :params="params"
  @lastStep="lastStep"
  @saveStep="saveStep"
  @nextStep="nextStep"
>
</vue-form-config>

data(){
    return {
        params:{
            config:{
                title:{
                    main:'标题',
                    sub:'副标题'
                },
                labelPosition:'right',
                labelWidth:'150px',
                width:'600px',
                align:'left',
                labelSuffix:'：',
                readonly:false,
                disabled:false,
                btnPosition:'center',
                btn:[
                    {
                        key:'lastStep',
                        show:true,
                        text:'上一步'
                    },
                    {
                        key:'nextStep',
                        show:true,
                        text:'提交',
                        novalidate:true//不验证
                    },
                    {
                        key:'saveStep',
                        show:true,
                        text:'保存',
                    },{
                        key:'resetStep',
                        show:true,
                        text:'重置'
                    }
                ],
                data:[
                    //通用input类型
                    {
                        label:'****',
                        keyName:'name',
                        defaultValue:'',
                        disabled:true,
                        maxlength:11,
                        type:'input',
                        rules:[
                            {
                                required: true,
                                message: '请输入****',
                                trigger: 'blur'
                            },
                            { min: 1, max: 11, message:'', trigger: 'blur' },
                            {
                                type:'reg',
                                default:false,
                                reg:/[\u4e00-\u9fa5]|\(|\)/,
                                text:'公司名称输入有误，请重新输入',
                                trigger:'blur',
                            }
                        ],
                    },
                ]
            },
        }
    }
},
methods:{
    lastStep(){

    },
    nextStep(from,key,cancle){
        //from为表单值对象
        //要在ajax提交表单form后，无论成功失败
        //执行cancle(key)，消掉按钮置灰状态
    },
    saveStep(from,key,cancle){
        //from为表单值对象
        //要在ajax提交表单form后，无论成功失败
        //执行cancle(key)，消掉按钮置灰状态
    },
}

Form config Attributes

Form data Attributes(通用)

type=input

//密码
{
    label:'登录密码',
    keyName:'password',
    defaultValue:'',
    placeholder:'请设置8-15位包含数字和字母的登录密码',
    type:'input',
    inputType:'password',
    disabled:true,
    rules:[
        {
            required: true,
            message: '请输入登录密码',
            trigger: 'blur',
        },{
            type:'reg',
            default:true,
            validator:'password',
            trigger:'blur',
        },
    ],
},
//确认密码类型
{
    label:'确认密码',
    keyName:'confirmPassword',
    defaultValue:'',
    placeholder:'请再次输入密码',
    type:'input',
    inputType:'password',
    rules:[
        {
            required: true,
            message: '请输入确认密码',
            trigger: 'blur'
        },{
            type:'value',
            associated:'password',
            text:'两次密码输入不一致',
            trigger:'blur',
        },
    ],
},

//sub（input 带下拉框）
{
    label:'',
    keyName:'',
    defaultValue:'',
    placeholder:'',
    type:'input',
    sub:{
        keyName:'',
        type:'select',
        defaultValue:'',
        slot:'append',
        options:[
            {
                label:'***',
                value:'1'
            },{
                label:'***',
                value:'2'
            },
        ],
    },
    icon: {
        type: "css",
        name: "iconfont iconi-info",
        fix: "prefix"
    },
},

{
    label:'金额（元）',
    keyName:'amount',
    defaultValue:'',
    placeholder:'',
    type:'input',
    spreadLink:{
        keyName:'accountBig',
        tick:(val)=>{
            const value = Number(val)
            if(isNaN(value)) return ''
            return numberChineseFormat(value)//转为大写
        }
    }
    //支持数组模式
    //spreadLink:[
    // {
    //     keyName:'accountBig',
    //     tick:(val)=>{
    //         const value = Number(val)
    //         if(isNaN(value)) return ''
    //         return numberChineseFormat(value)//转为大写
    //     }
    // }
    //]
}

{
    label: "",
    type:'',
    keyName:'commit',
    defaultValue:[],
    hideLink: {
        keyName: "reviewStatus",
        value: "2"
    },
}

checkLink: {
    label: "长期",
    keyName: "amountEnd",
    defaultValue: "",
    plusValue: "1",
    reduceValue: null,
    disabled: false,
    tick: val => {
        debugger;
    }
}

type=verifyCode （验证码）

{
    label:'手机验证码',
    keyName:'validateCode',
    sendKeyName:'mobile',
    defaultValue:'',
    placeholder:'',
    type:'verifyCode',
    associated:'contactMobile',
    maxlength:4,
    imageUrl:()=>{
        // debugger
        return `${getUrlPath('/getGraphCode')}?token=${this.token}&graphCodeType=${registerCode.graphCodeType}`
    },
    // disabled:true,
    tickCb:(data,success,fail)=>{
        this.sendMobileCode({...data,...registerCode},success,fail)
        //data {mobile:'136*******',graphCode:'****'}
    },
},

type=checkbox（多选框）

{
    label:'',
    type:'checkbox',
    keyName:'check',
    defaultValue:['1'],
    options:[
        {
            label:'1',
            labelName:'<span>***</span>',
        },
        ...
    ],
}

type=radio（单选框）

{
    label:'',
    keyName:'',
    defaultValue:'1',
    type:'radio',
    options:[{
        label:'1',
        labelName:'***',
    },{
        label:'2',
        labelName:'***',
    }],
}

type=select（下拉框）

{
    label:'',
    keyName:'',
    defaultValue:'',
    placeholder:'',
    type:'select',
    filterable:true,
    remote:true,
    options:[],
    tick:(data)=>{
        this.getBusinessList(data)
    }
},

type=areaSelect (地域联动)

{
    type: 'areaSelect',
    area: [
        {
            keyName: 'province',
            type: 'select',
            label: '注册地域',
            placeholder: '请选择省份',
            defaultValue: '',
            options: [],
            rules: [
                {
                    required: true,
                    message: '请选择省份',
                    trigger: 'change'
                }
            ],
            link: {
                keyName: 'city',
                tick: val => {
                    this.getCityOpt(val)
                }
            }
        },
        {
            keyName: 'city',
            placeholder: '请选择城市',
            defaultValue: '',
            options: [],
            type: 'select',
            rules: [
                {
                    required: true,
                    message: '请选择城市',
                    trigger: 'change'
                }
            ]
        }
    ]
},

type=upload（上传）

(备注：1.1.11 改为 heighSuccess 函数处理上传结果)

{
    label:'',
    keyName:'',
    urlKeyName:'filePath',
    valueKeyName:'fileId',
    apiUrl:this.fileServerIp,
    defaultValue:'',
    type:'upload',
    uploadType:'image',
    action:'/saas-online-server/api?apiName=uploadAccountFile',
    accept:'image/jpg,image/jpeg,image/png,.pdf',
    name:'fileList',
    limitSize:10,//单位 M
    html:'请上传',
    tick:{
        before:()=>{
            return this.example()
        },
    },
    rules:[
        {
            required: true,
            message: '请上传',
            trigger: 'blur'
        },
    ],
    data:{
        businessSceneId:'',
        fileType:'',
        reqId:''
    },
},

type=datePicker（日期）

{
    label:'',
    keyName:'',
    defaultValue:'',
    placeholder:'',
    type:'datePicker',
    pickerOptions:{
        disabledDate(time) {
            return time.getTime() < Date.now()+ (1000*60*60*24*15)
        },
    },
    originDefaultValue:new Date(Date.now()+ (1000*60*60*24*15)),,
},

type=text (纯文本)

rules el-ui Attributes

rules 自定义 Attributes

内置 regex

rules:[
        {
            required: true,
            message: '请输入',
            trigger: 'blur',
        },{
            min: 1,
            max: 11,
            message:'长度1-11',
            trigger: 'blur'
        },{
            type:'reg',
            default:true,
            validator:'mobile',
            trigger:'blur',
            text:'格式不正确',
        },{
            type:'reg',
            default:false,
            reg:/^\d{8}$/,
            trigger:'blur',
            text:'格式不正确',
        },{
            type:'value',
            associated:'password',
            text:'两次密码输入不一致',
            trigger:'blur',
        },
    ],

事件

(添加 lastStep/nextStep/saveStep 按钮，关联对应事件) 参数 | 说明 | 类型 | 其他 ---|---|---|---|---|--- @lastStep|lastStep 关联事件|function|无表单验证 @nextStep|nextStep 关联事件|function|function(from,key,cancel){}from 为表单值对象,要在 ajax 提交表单 form 后，无论成功失败,执行 cancle(key)，消掉按钮置灰状态 @saveStep|同上

辅助函数

//配合vue开发使用
export const defaultValue = {
  methods: {
    //表单回显 *
    addFaultValue(resData, params = "params") {
      // debugger
      this[params].data = this[params].data.map((item) => {
        const val = resData[item.keyName];
        if (item.type === "areaSelect") {
          const itemArea = item.area.map((child) => {
            if (resData[child.keyName]) {
              child.defaultValue = resData[child.keyName];
              return child;
            } else {
              return child;
            }
          });
          item.area = itemArea;
          return item;
        } else if (val !== undefined && val !== null) {
          item.defaultValue = val;
          return item;
        } else {
          return item;
        }
      });
    },
    //表单清空 *
    clearFaultValue(params = "params") {
      this[params].data = this[params].data.map((item) => {
        if (item.type === "areaSelect") {
          const itemArea = item.area.map((child) => {
            child.defaultValue = "";
            return child;
          });
          item.area = itemArea;
          return item;
        } else if (item.type === "checkbox") {
          item.defaultValue = [];
          return item;
        } else {
          item.defaultValue = "";
          return item;
        }
      });
    },
    //设置options
    setOptions(keyName, opts, paramsName = "params") {
      const index = this[paramsName].data.findIndex(
        (item) => item.keyName === keyName
      );
      if (index > -1) this[paramsName].data[index].options = opts;
    },
    //请求数据 设置options
    apiSetOptions(apiMoundle, api, params = {}, keyName, opt) {
      service[apiMoundle][api](params) // 请求方法可根据项目具体进行修改
        .then((res) => {
          if (res.resultCode === "SUCCESS") {
            let options = [];
            if (res.body) {
              options = res.body.map((item) => {
                return {
                  label: item[opt.label],
                  value: item[opt.value],
                };
              });
            }
            this.setOptions(keyName, options);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //搜索 远程加载 设置options
    searchSetOptions(data, params, apiName, opt, num = 0) {
      const val = data[data.keyName];
      if (val !== "" && val.length >= num) {
        product[apiName](params).then((res) => {
          if (res.body) {
            const options = res.body.map((item) => {
              return {
                label: item[opt.label],
                value: item[opt.value],
              };
            });
            this.setOptions(data.keyName, options);
          } else {
            this.setOptions(data.keyName, []);
          }
        });
      } else {
        this.setOptions(data.keyName, []);
      }
    },
    setUse(keyName, key, value) {
      const index = this.params.data.findIndex(
        (item) => item.keyName === keyName
      );
      if (index > -1) this.params.data[index][key] = value;
    },
    //options 回显
    dataSetoptions(keys, form) {
      keys.forEach((item) => {
        const opt = {};
        if (item.type === "select") {
          opt.label = form[item.keyName + "Name"];
          opt.value = form[item.keyName + "Id"];
        } else if (item.type === "radio") {
          opt.labelName = form[item.keyName + "Name"];
          opt.label = form[item.keyName + "Id"];
        }
        this.setOptions(item.keyName + "Id", [opt]);
      });
    },
    //查找option 对应 label
    findLabel(keyName, value, op = { label: "label", value: "value" }) {
      // debugger
      const index = this.params.data.findIndex(
        (item) => item.keyName === keyName
      );
      const item = this.params.data[index].options.find(
        (item) => item[op.value] === value
      );
      return item[op.label];
    },
  },
};