mrsong-form - 更新日志

1.2.5（2023-12-25）

更新版本

• 优化表单重置
• 新增readonly模式下插槽（slot=readonly）
• 新增自定义提示语msg

1.2.4（2023-12-25）

修复设置多个图片，上传第二个图片，会覆盖第一个图片的预览

1.2.3（2023-11-23）

功能介绍

• 只需配置表单类型即可，低代码方式，详情见test.js
• 包含绝大部分表单内容，输入框 input，时间 date，验证码 code，单选 radio，复选 checkbox，文本 ，textarea，级联选择 select-mutil，picker(单选) select-single，图片上传 upload，如需特殊表单，可采用slot插槽模式。
• 可控制样式，插件支持自定义主题，自定义表单对齐方式（上下对齐，左右对齐），可定义单项表单对齐方式，可定义label宽度，以及单项列表的label。
• 可控制表单内联动，控制单项状态disabled
• 只读模式，表单提交，重置，校验，回显；

1.2.2（2023-11-23）

更多配置请下载，使用 HBuilderX 导入示例项目

使用方法

• 本插件基于uview2.0UI组件，表单封装，所以必须引用uview2.0组件库

• 全局引用scss表单样式(在App.vue中引用)

  <style lang="scss">
  @import '@/uni_modules/mrsong-form/components/mrsong-form/static/custom.scss';
  </style>

• 引用组件mrsong-form

  import { companyAccount } from './test.js';
  import mrsongForm from '@/uni_modules/mrsong-form/components/mrsong-form/mrsong-form.vue';

  export default {
  components: {
      mrsongForm
  },
  data() {
      return {
          formParserData: companyAccount,
          formMode: {}
      };
  },
  methods: {
      change(e) {
          console.log('<<<<change>>>>>', e);
          // 控制form表单disabled
          this.$refs.comForm.disabledObj.address = e.name ? false : true;
      },
      submit(e) {
          console.log('<<<<submit>>>>>', e);
      },
      // getAction(e) {
      //  console.log('<<<<getAction>>>>>', e);
      // },
      getAction({ data, item, index, type, callBack }) {
          // 改变某个表单的disabled
          this.$refs.comForm.disabledObj.orgAccount = true;
          switch (type) {
              case 'upload':
                  // formMode定义表单
                  // 初始formMode如果为{}，使用$set改变值
                  // this.$set(this.formMode, item.prop, data);
                  // 初始formMode有值，使用this.formMode[key]直接赋值
                  callBack();
                  break;
              default:
                  break;
          }
      }
  }
  };

使用

<template>
    <view class="content">
        <mrsong-form
            @getAction="getAction"
            ref="comForm"
            :fixed="true"
            :borderBottom="false"
            theme-color="red"
            :form-parser-data="formParserData"
            :form-mode="formMode"
            @change="change"
            @submit="submit"
        ></mrsong-form>
    </view>
</template>

参数 props

// form下划线边框
borderBottom: {
    type: Boolean,
    default: true
},
// 确定按钮文本
confirmText: {
    type: String,
    default: '提交'
},
// 是否展示底部提交按钮
showFooter: {
    type: Boolean,
    default: true
},
// 只读模式
readonly: {
    type: Boolean,
    default: false
},
// disabled颜色
disabledColor: {
    type: String,
    default: '#f5f7fa'
},
// 对齐方式
inputAlign: {
    type: String,
    default: 'right'
},
// input边框
inputBorder: {
    type: String,
    default: 'surround'
},
// 是否有取消按钮
hasCancel: {
    type: Boolean,
    default: false
},
// 主题
themeColor: {
    type: String,
    default: '#3c9cff'
},
// 控制按钮定位
fixed: {
    type: Boolean,
    default: false
},
// 表单列表配置
formParserData: {
    type: Object,
    default: () => mockData
},
// 表单初始数据
formMode: {
    type: Object,
    default: () => {
        return {
            name: '楼兰',
            sex: '男'
        };
    }
}

事件方法

// 表单值改变事件回调
change(e) {
    console.log('<<<<change>>>>>', e);
    // 控制form表单disabled
    this.$refs.comForm.disabledObj.address = e.name ? false : true;
},
// 表单提交事件回调
submit(e) {
    console.log('<<<<submit>>>>>', e);
},
// 表单点击事件回调
getAction({ data, item, index, type, callBack }) {
    // 改变某个表单的disabled
    this.$refs.comForm.disabledObj.orgAccount = true;
    switch (type) {
        case 'upload':
            // formMode定义表单
            // 初始formMode如果为{}，使用$set改变值
            // this.$set(this.formMode, item.prop, data);
            // 初始formMode有值，使用this.formMode[key]直接赋值
            callBack();
            break;
        default:
            break;
    }
}

使用slot

<template>
    <view class="content">
        <mrsong-form
            @getAction="getAction"
            ref="comForm"
            :fixed="true"
            :readonly="true"
            :borderBottom="false"
            :hasCancel="true"
            theme-color="red"
            :form-parser-data="formParserData"
            :form-mode="formMode"
            @change="change"
            @submit="submit"
        >
        // 自定义footer
            <view slot="footerBtn" class="flex-b">
                <view class="btn">
                    <u-button shape="circle" type="primary" @click="save">保存</u-button>
                </view>
                <view class="btn">
                    <u-button shape="circle" @click="reset">取消</u-button>
                </view>
            </view>
            // 文本slot
            <view slot="text" />
            // 图标slot
            <view slot="icon" />
            // 其他action
            <view slot="otherAction" />
        </mrsong-form>
    </view>
</template>

自定义footer触发表单事件

// 提交
this.$refs.comForm.submit();
// 取消
this.$refs.comForm.reset();

动态改变某个表单disabled

// 例如formMode为{orgAccount:'测试'},formMode是为表单赋值；
this.$refs.comForm.disabledObj.orgAccount = true;
// disabledObj是改变表单项是否disabled,这个时候orgAccount这个表单就会disabled

表单配置属性formParserData

{
    'fields':{
            formType: 'input',//表单类型
            placeholder: '请输入',//表单placeholder
            prop: 'mobile',//表单key
            label: '联系电话',//表单label
            labelWidth: 100,//单个表单label宽度
            required: true,//表单是否必须
            initValue: '',//表单初始值
            rules: [{//表单校验
                type: 'string',
                required: true,
                message: '请输入正确的手机号',
                trigger: ['blur', 'change']
            }, {
                // 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
                validator: (rule, value, callback) => {
                    // 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
                    return formatTool(value, 4)
                },
                message: '请输入正确的手机号',
                // 触发器可以同时用blur和change，二者之间用英文逗号隔开
                trigger: ['change', 'blur']
            }]
        },
    'formRef': 'elForm',//表单ref
    'formModel': 'formData',//可忽略
    'size': 'medium',//可忽略
    'labelPosition': 'top',//表单对齐方式
    'labelidth': 100,//表单label宽度
    'formRules': 'rules',//可忽略
    'gutter': 15,//可忽略
    'disabled': false,//可忽略
    'span': 24,//可忽略
    'formBtns': true//可忽略
}

表单对齐,样式

• labelPosition：top=>上对齐，left=>左对齐
• borderBottom：true默认下划线
• inputBorder：surround=>边框，none=>无边框;borderBottom为true,有下划线的情况下input默认无边框

表单类型

• formType

  • 输入框 input
  • 时间 date
  • 验证码 code
  • 单选 radio
  • 复选 checkbox
  • 文本 textarea
  • 级联 select-mutil
  • picker(单选) select-single
  • 图片上传 upload

• 表单数据test.js

  import {
  formatTool
  } from '@/uni_modules/mrsong-form/components/mrsong-form/static/tool.js'
  export const companyAccount = {
  'fields': [{
          formType: 'input',
          placeholder: '请输入',
          prop: 'mobile',
          label: '联系电话',
          labelWidth: null,
          required: true,
          initValue: '',
          rules: [{
              type: 'string',
              required: true,
              message: '请输入正确的手机号',
              trigger: ['blur', 'change']
          }, {
              // 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
              validator: (rule, value, callback) => {
                  // 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
                  return formatTool(value, 4)
              },
              message: '请输入正确的手机号',
              // 触发器可以同时用blur和change，二者之间用英文逗号隔开
              trigger: ['change', 'blur']
          }]
      }, {
          formType: 'input',
          placeholder: '请选择',
          prop: 'address',
          label: '接水地址',
          disabled: true,
          labelWidth: null,
          required: true,
          initValue: '',
          isAddress: true,
          rules: [{
              type: 'string',
              required: true,
              message: '请选择',
              trigger: ['blur', 'change']
          }]
      },{
          formType: 'date',
          placeholder: '请选择办理时间',
          prop: 'birthday',
          label: '办理时间',
          labelWidth: null,
          initValue: '',
          required: true,
          rules: [{
              type: 'string',
              required: true,
              message: '请选择办理时间',
              trigger: ['change', 'blur']
          }]
      },
      {
          formType: 'input',
          placeholder: '请输入',
          prop: 'addressDetail',
          label: '详细地址',
          labelWidth: null,
          isAddress: false,
          required: true,
          initValue: '',
          rules: [{
              type: 'string',
              required: true,
              message: '请输入',
              trigger: ['blur', 'change']
          }]
      }, {
          formType: 'checkbox',
          placeholder: '',
          prop: 'checkbox',
          label: '水果多选',
          labelWidth: null,
          labelPosition: 'left',
          initValue: ['2', '3'],
          required: true,
          shape: 'square',
          placement: 'row',
          options: [{
                  label: '苹果',
                  value: '1',
                  disabled: true
              },
              {
                  label: '香蕉',
                  value: '2',
                  disabled: false
              },
              {
                  label: '橘子',
                  value: '3',
                  disabled: false
              },
              {
                  label: '西红柿',
                  value: '4',
                  disabled: false
              },
              {
                  label: '西瓜',
                  value: '5',
                  disabled: false
              },
              {
                  label: '毒橙子',
                  value: '7',
                  disabled: false
              }
          ]
      }, 
      {
          formType: 'select-mutil',
          placeholder: '请选择',
          prop: 'mutil',
          label: '级联',
          labelWidth: null,
          disabled: false,
          initValue: '0,1',
          required: true,
          options: [{
                  name: '男',
                  label: '男',
                  value: '1',
                  children: [{
                      name: '18岁',
                      label: '18岁',
                      value: '1',
                  }, {
                      name: '20岁',
                      label: '20岁',
                      value: '2',
                  }]
              },
              {
                  name: '女',
                  label: '女',
                  value: '0',
                  children: [{
                      name: '19岁',
                      label: '19岁',
                      value: '1',
                  }, {
                      name: '21岁',
                      label: '21岁',
                      value: '2',
                  }]
              }
          ],
          rules: [{
              type: 'string',
              min: 1,
              required: true,
              message: '请选择',
              trigger: ['blur', 'change']
          }]
      },
      // 更多配置...
  ],
  'formRef': 'elForm',
  'formModel': 'formData',
  'size': 'medium',
  'labelPosition': 'top',
  'labelWidth': 100,
  'formRules': 'rules',
  'gutter': 15,
  'disabled': false,
  'span': 24,
  'formBtns': true
  }

1.2.1（2023-11-23）

release

1.1.2（2023-11-23）

完善readme

1.1.1（2023-11-23）

1.1.1

1.0.2（2023-11-23）

1.0.1（2023-11-23）

更多配置请下载，使用 HBuilderX 导入示例项目

使用方法

• 本插件基于uview2.0UI组件，表单封装，所以必须引用uview2.0组件库

• 引用组件mrsong-form

  import { companyAccount } from './test.js';
  import mrsongForm from '@/uni_modules/mrsong-form/components/mrsong-form/mrsong-form.vue';

  export default {
  components: {
      mrsongForm
  },
  data() {
      return {
          formParserData: companyAccount,
          formMode: {}
      };
  },
  methods: {
      change(e) {
          console.log('<<<<change>>>>>', e);
          // 控制form表单disabled
          this.$refs.comForm.disabledObj.address = e.name ? false : true;
      },
      submit(e) {
          console.log('<<<<submit>>>>>', e);
      },
      // getAction(e) {
      //  console.log('<<<<getAction>>>>>', e);
      // },
      getAction({ data, item, index, type, callBack }) {
          // 改变某个表单的disabled
          this.$refs.comForm.disabledObj.orgAccount = true;
          switch (type) {
              case 'upload':
                  // formMode定义表单
                  // 初始formMode如果为{}，使用$set改变值
                  // this.$set(this.formMode, item.prop, data);
                  // 初始formMode有值，使用this.formMode[key]直接赋值
                  callBack();
                  break;
              default:
                  break;
          }
      }
  }
  };

使用

<template>
    <view class="content">
        <mrsong-form
            @getAction="getAction"
            ref="comForm"
            :fixed="true"
            :borderBottom="false"
            theme-color="red"
            :form-parser-data="formParserData"
            :form-mode="formMode"
            @change="change"
            @submit="submit"
        ></mrsong-form>
    </view>
</template>

参数 props

// form下划线边框
borderBottom: {
    type: Boolean,
    default: true
},
// 确定按钮文本
confirmText: {
    type: String,
    default: '提交'
},
// 是否展示底部提交按钮
showFooter: {
    type: Boolean,
    default: true
},
// 只读模式
readonly: {
    type: Boolean,
    default: false
},
// disabled颜色
disabledColor: {
    type: String,
    default: '#f5f7fa'
},
// 对齐方式
inputAlign: {
    type: String,
    default: 'right'
},
// input边框
inputBorder: {
    type: String,
    default: 'surround'
},
// 是否有取消按钮
hasCancel: {
    type: Boolean,
    default: false
},
// 主题
themeColor: {
    type: String,
    default: '#3c9cff'
},
// 控制按钮定位
fixed: {
    type: Boolean,
    default: false
},
// 表单列表配置
formParserData: {
    type: Object,
    default: () => mockData
},
// 表单初始数据
formMode: {
    type: Object,
    default: () => {
        return {
            name: '楼兰',
            sex: '男'
        };
    }
}

事件方法

// 表单值改变事件回调
change(e) {
    console.log('<<<<change>>>>>', e);
    // 控制form表单disabled
    this.$refs.comForm.disabledObj.address = e.name ? false : true;
},
// 表单提交事件回调
submit(e) {
    console.log('<<<<submit>>>>>', e);
},
// 表单点击事件回调
getAction({ data, item, index, type, callBack }) {
    // 改变某个表单的disabled
    this.$refs.comForm.disabledObj.orgAccount = true;
    switch (type) {
        case 'upload':
            // formMode定义表单
            // 初始formMode如果为{}，使用$set改变值
            // this.$set(this.formMode, item.prop, data);
            // 初始formMode有值，使用this.formMode[key]直接赋值
            callBack();
            break;
        default:
            break;
    }
}

使用slot

<template>
    <view class="content">
        <mrsong-form
            @getAction="getAction"
            ref="comForm"
            :fixed="true"
            :readonly="true"
            :borderBottom="false"
            :hasCancel="true"
            theme-color="red"
            :form-parser-data="formParserData"
            :form-mode="formMode"
            @change="change"
            @submit="submit"
        >
        // 自定义footer
            <view slot="footerBtn" class="flex-b">
                <view class="btn">
                    <u-button shape="circle" type="primary" @click="save">保存</u-button>
                </view>
                <view class="btn">
                    <u-button shape="circle" @click="reset">取消</u-button>
                </view>
            </view>
            // 文本slot
            <view slot="text" />
            // 图标slot
            <view slot="icon" />
            // 其他action
            <view slot="otherAction" />
        </mrsong-form>
    </view>
</template>

自定义footer触发表单事件

// 提交
this.$refs.comForm.submit();
// 取消
this.$refs.comForm.reset();

动态改变某个表单disabled

// 例如formMode为{orgAccount:'测试'},formMode是为表单赋值；
this.$refs.comForm.disabledObj.orgAccount = true;
// disabledObj是改变表单项是否disabled,这个时候orgAccount这个表单就会disabled

表单配置属性formParserData

{
    'fields':{
            formType: 'input',//表单类型
            placeholder: '请输入',//表单placeholder
            prop: 'mobile',//表单key
            label: '联系电话',//表单label
            labelWidth: 100,//单个表单label宽度
            required: true,//表单是否必须
            initValue: '',//表单初始值
            rules: [{//表单校验
                type: 'string',
                required: true,
                message: '请输入正确的手机号',
                trigger: ['blur', 'change']
            }, {
                // 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
                validator: (rule, value, callback) => {
                    // 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
                    return formatTool(value, 4)
                },
                message: '请输入正确的手机号',
                // 触发器可以同时用blur和change，二者之间用英文逗号隔开
                trigger: ['change', 'blur']
            }]
        },
    'formRef': 'elForm',//表单ref
    'formModel': 'formData',//可忽略
    'size': 'medium',//可忽略
    'labelPosition': 'top',//表单对齐方式
    'labelidth': 100,//表单label宽度
    'formRules': 'rules',//可忽略
    'gutter': 15,//可忽略
    'disabled': false,//可忽略
    'span': 24,//可忽略
    'formBtns': true//可忽略
}

表单对齐

• labelPosition：top=>上对齐，left=>左对齐

表单类型

• formType

  • 输入框 input
  • 时间 date
  • 验证码 code
  • 单选 radio
  • 复选 checkbox
  • 文本 textarea
  • 级联 select-mutil
  • picker(单选) select-single
  • 图片上传 upload

• 表单数据test.js

  import {
  formatTool
  } from '@/uni_modules/mrsong-form/components/mrsong-form/static/tool.js'
  export const companyAccount = {
  'fields': [{
          formType: 'input',
          placeholder: '请输入',
          prop: 'mobile',
          label: '联系电话',
          labelWidth: null,
          required: true,
          initValue: '',
          rules: [{
              type: 'string',
              required: true,
              message: '请输入正确的手机号',
              trigger: ['blur', 'change']
          }, {
              // 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
              validator: (rule, value, callback) => {
                  // 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
                  return formatTool(value, 4)
              },
              message: '请输入正确的手机号',
              // 触发器可以同时用blur和change，二者之间用英文逗号隔开
              trigger: ['change', 'blur']
          }]
      }, {
          formType: 'input',
          placeholder: '请选择',
          prop: 'address',
          label: '接水地址',
          disabled: true,
          labelWidth: null,
          required: true,
          initValue: '',
          isAddress: true,
          rules: [{
              type: 'string',
              required: true,
              message: '请选择',
              trigger: ['blur', 'change']
          }]
      },{
          formType: 'date',
          placeholder: '请选择办理时间',
          prop: 'birthday',
          label: '办理时间',
          labelWidth: null,
          initValue: '',
          required: true,
          rules: [{
              type: 'string',
              required: true,
              message: '请选择办理时间',
              trigger: ['change', 'blur']
          }]
      },
      {
          formType: 'input',
          placeholder: '请输入',
          prop: 'addressDetail',
          label: '详细地址',
          labelWidth: null,
          isAddress: false,
          required: true,
          initValue: '',
          rules: [{
              type: 'string',
              required: true,
              message: '请输入',
              trigger: ['blur', 'change']
          }]
      }, {
          formType: 'checkbox',
          placeholder: '',
          prop: 'checkbox',
          label: '水果多选',
          labelWidth: null,
          labelPosition: 'left',
          initValue: ['2', '3'],
          required: true,
          shape: 'square',
          placement: 'row',
          options: [{
                  label: '苹果',
                  value: '1',
                  disabled: true
              },
              {
                  label: '香蕉',
                  value: '2',
                  disabled: false
              },
              {
                  label: '橘子',
                  value: '3',
                  disabled: false
              },
              {
                  label: '西红柿',
                  value: '4',
                  disabled: false
              },
              {
                  label: '西瓜',
                  value: '5',
                  disabled: false
              },
              {
                  label: '毒橙子',
                  value: '7',
                  disabled: false
              }
          ]
      }, 
      {
          formType: 'select-mutil',
          placeholder: '请选择',
          prop: 'mutil',
          label: '级联',
          labelWidth: null,
          disabled: false,
          initValue: '0,1',
          required: true,
          options: [{
                  name: '男',
                  label: '男',
                  value: '1',
                  children: [{
                      name: '18岁',
                      label: '18岁',
                      value: '1',
                  }, {
                      name: '20岁',
                      label: '20岁',
                      value: '2',
                  }]
              },
              {
                  name: '女',
                  label: '女',
                  value: '0',
                  children: [{
                      name: '19岁',
                      label: '19岁',
                      value: '1',
                  }, {
                      name: '21岁',
                      label: '21岁',
                      value: '2',
                  }]
              }
          ],
          rules: [{
              type: 'string',
              min: 1,
              required: true,
              message: '请选择',
              trigger: ['blur', 'change']
          }]
      },
      // 更多配置...
  ],
  'formRef': 'elForm',
  'formModel': 'formData',
  'size': 'medium',
  'labelPosition': 'top',
  'labelWidth': 100,
  'formRules': 'rules',
  'gutter': 15,
  'disabled': false,
  'span': 24,
  'formBtns': true
  }

1.0.1（2023-11-23）

更多配置请下载，使用 HBuilderX 导入示例项目

使用方法

• 本插件基于uview2.0UI组件，表单封装，所以必须引用uview2.0组件库

• 引用组件mrsong-form

  
  import { companyAccount } from './test.js';
  import mrsongForm from '@/uni_modules/mrsong-form/components/mrsong-form/mrsong-form.vue';

export default { components: { mrsongForm }, data() { return { formParserData: companyAccount, formMode: {} }; }, methods: { change(e) { console.log('<<<>>>>', e); // 控制form表单disabled this.$refs.comForm.disabledObj.address = e.name ? false : true; }, submit(e) { console.log('<<<>>>>', e); }, // getAction(e) { // console.log('<<<>>>>', e); // }, getAction({ data, item, index, type, callBack }) { // 改变某个表单的disabled this.$refs.comForm.disabledObj.orgAccount = true; switch (type) { case 'upload': // formMode定义表单 // 初始formMode如果为{}，使用$set改变值 // this.$set(this.formMode, item.prop, data); // 初始formMode有值，使用this.formMode[key]直接赋值 callBack(); break; default: break; } } } };

## 使用

```vue
<template>
    <view class="content">
        <mrsong-form
            @getAction="getAction"
            ref="comForm"
            :fixed="true"
            :borderBottom="false"
            theme-color="red"
            :form-parser-data="formParserData"
            :form-mode="formMode"
            @change="change"
            @submit="submit"
        ></mrsong-form>
    </view>
</template>

参数 props

// form下划线边框
borderBottom: {
    type: Boolean,
    default: true
},
// 确定按钮文本
confirmText: {
    type: String,
    default: '提交'
},
// 是否展示底部提交按钮
showFooter: {
    type: Boolean,
    default: true
},
// 只读模式
readonly: {
    type: Boolean,
    default: false
},
// disabled颜色
disabledColor: {
    type: String,
    default: '#f5f7fa'
},
// 对齐方式
inputAlign: {
    type: String,
    default: 'right'
},
// input边框
inputBorder: {
    type: String,
    default: 'surround'
},
// 是否有取消按钮
hasCancel: {
    type: Boolean,
    default: false
},
// 主题
themeColor: {
    type: String,
    default: '#3c9cff'
},
// 控制按钮定位
fixed: {
    type: Boolean,
    default: false
},
// 表单列表配置
formParserData: {
    type: Object,
    default: () => mockData
},
// 表单初始数据
formMode: {
    type: Object,
    default: () => {
        return {
            name: '楼兰',
            sex: '男'
        };
    }
}

事件方法

// 表单值改变事件回调
change(e) {
    console.log('<<<<change>>>>>', e);
    // 控制form表单disabled
    this.$refs.comForm.disabledObj.address = e.name ? false : true;
},
// 表单提交事件回调
submit(e) {
    console.log('<<<<submit>>>>>', e);
},
// 表单点击事件回调
getAction({ data, item, index, type, callBack }) {
    // 改变某个表单的disabled
    this.$refs.comForm.disabledObj.orgAccount = true;
    switch (type) {
        case 'upload':
            // formMode定义表单
            // 初始formMode如果为{}，使用$set改变值
            // this.$set(this.formMode, item.prop, data);
            // 初始formMode有值，使用this.formMode[key]直接赋值
            callBack();
            break;
        default:
            break;
    }
}

使用slot

<template>
    <view class="content">
        <mrsong-form
            @getAction="getAction"
            ref="comForm"
            :fixed="true"
            :readonly="true"
            :borderBottom="false"
            :hasCancel="true"
            theme-color="red"
            :form-parser-data="formParserData"
            :form-mode="formMode"
            @change="change"
            @submit="submit"
        >
        // 自定义footer
            <view slot="footerBtn" class="flex-b">
                <view class="btn">
                    <u-button shape="circle" type="primary" @click="save">保存</u-button>
                </view>
                <view class="btn">
                    <u-button shape="circle" @click="reset">取消</u-button>
                </view>
            </view>
            // 文本slot
            <view slot="text" />
            // 图标slot
            <view slot="icon" />
            // 其他action
            <view slot="otherAction" />
        </mrsong-form>
    </view>
</template>

自定义footer触发表单事件

// 提交
this.$refs.comForm.submit();
// 取消
this.$refs.comForm.reset();

动态改变某个表单disabled

// 例如formMode为{orgAccount:'测试'},formMode是为表单赋值；
this.$refs.comForm.disabledObj.orgAccount = true;
// disabledObj是改变表单项是否disabled,这个时候orgAccount这个表单就会disabled

表单配置属性formParserData

{
    'fields':{
            formType: 'input',//表单类型
            placeholder: '请输入',//表单placeholder
            prop: 'mobile',//表单key
            label: '联系电话',//表单label
            labelWidth: 100,//单个表单label宽度
            required: true,//表单是否必须
            initValue: '',//表单初始值
            rules: [{//表单校验
                type: 'string',
                required: true,
                message: '请输入正确的手机号',
                trigger: ['blur', 'change']
            }, {
                // 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
                validator: (rule, value, callback) => {
                    // 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
                    return formatTool(value, 4)
                },
                message: '请输入正确的手机号',
                // 触发器可以同时用blur和change，二者之间用英文逗号隔开
                trigger: ['change', 'blur']
            }]
        },
    'formRef': 'elForm',//表单ref
    'formModel': 'formData',//可忽略
    'size': 'medium',//可忽略
    'labelPosition': 'top',//表单对齐方式
    'labelidth': 100,//表单label宽度
    'formRules': 'rules',//可忽略
    'gutter': 15,//可忽略
    'disabled': false,//可忽略
    'span': 24,//可忽略
    'formBtns': true//可忽略
}

表单对齐

• labelPosition：top=>上对齐，left=>左对齐

表单类型

• formType

  • 输入框 input
  • 时间 date
  • 验证码 code
  • 单选 radio
  • 复选 checkbox
  • 文本 textarea
  • 级联 select-mutil
  • picker(单选) select-single
  • 图片上传 upload

• 表单数据test.js

  import {
  formatTool
  } from '@/uni_modules/mrsong-form/components/mrsong-form/static/tool.js'
  export const companyAccount = {
  'fields': [{
          formType: 'input',
          placeholder: '请输入',
          prop: 'mobile',
          label: '联系电话',
          labelWidth: null,
          required: true,
          initValue: '',
          rules: [{
              type: 'string',
              required: true,
              message: '请输入正确的手机号',
              trigger: ['blur', 'change']
          }, {
              // 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
              validator: (rule, value, callback) => {
                  // 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
                  return formatTool(value, 4)
              },
              message: '请输入正确的手机号',
              // 触发器可以同时用blur和change，二者之间用英文逗号隔开
              trigger: ['change', 'blur']
          }]
      }, {
          formType: 'input',
          placeholder: '请选择',
          prop: 'address',
          label: '接水地址',
          disabled: true,
          labelWidth: null,
          required: true,
          initValue: '',
          isAddress: true,
          rules: [{
              type: 'string',
              required: true,
              message: '请选择',
              trigger: ['blur', 'change']
          }]
      },{
          formType: 'date',
          placeholder: '请选择办理时间',
          prop: 'birthday',
          label: '办理时间',
          labelWidth: null,
          initValue: '',
          required: true,
          rules: [{
              type: 'string',
              required: true,
              message: '请选择办理时间',
              trigger: ['change', 'blur']
          }]
      },
      {
          formType: 'input',
          placeholder: '请输入',
          prop: 'addressDetail',
          label: '详细地址',
          labelWidth: null,
          isAddress: false,
          required: true,
          initValue: '',
          rules: [{
              type: 'string',
              required: true,
              message: '请输入',
              trigger: ['blur', 'change']
          }]
      }, {
          formType: 'checkbox',
          placeholder: '',
          prop: 'checkbox',
          label: '水果多选',
          labelWidth: null,
          labelPosition: 'left',
          initValue: ['2', '3'],
          required: true,
          shape: 'square',
          placement: 'row',
          options: [{
                  label: '苹果',
                  value: '1',
                  disabled: true
              },
              {
                  label: '香蕉',
                  value: '2',
                  disabled: false
              },
              {
                  label: '橘子',
                  value: '3',
                  disabled: false
              },
              {
                  label: '西红柿',
                  value: '4',
                  disabled: false
              },
              {
                  label: '西瓜',
                  value: '5',
                  disabled: false
              },
              {
                  label: '毒橙子',
                  value: '7',
                  disabled: false
              }
          ]
      }, 
      {
          formType: 'select-mutil',
          placeholder: '请选择',
          prop: 'mutil',
          label: '级联',
          labelWidth: null,
          disabled: false,
          initValue: '0,1',
          required: true,
          options: [{
                  name: '男',
                  label: '男',
                  value: '1',
                  children: [{
                      name: '18岁',
                      label: '18岁',
                      value: '1',
                  }, {
                      name: '20岁',
                      label: '20岁',
                      value: '2',
                  }]
              },
              {
                  name: '女',
                  label: '女',
                  value: '0',
                  children: [{
                      name: '19岁',
                      label: '19岁',
                      value: '1',
                  }, {
                      name: '21岁',
                      label: '21岁',
                      value: '2',
                  }]
              }
          ],
          rules: [{
              type: 'string',
              min: 1,
              required: true,
              message: '请选择',
              trigger: ['blur', 'change']
          }]
      },
      // 更多配置...
  ],
  'formRef': 'elForm',
  'formModel': 'formData',
  'size': 'medium',
  'labelPosition': 'top',
  'labelWidth': 100,
  'formRules': 'rules',
  'gutter': 15,
  'disabled': false,
  'span': 24,
  'formBtns': true
  }

1.0.0（2023-11-23）

1.0.0