使用

封装

mininx/userAdd.js

/**
* 表单支持输入框，数字输入框，单选按钮， 多选按钮，下拉选择器 switch开关
* 每次增加一个数据formItems里面的一个项目。都要配套的增加该项目的rule 验证规则，和watch监听属性，往params网络请求参数里面赋值。
* formITtems里面的数据项也有可能是经过一次网络请求获取来的， 就需要在此mixins文件中定义methods网络请求方法，去获取formItems数据，这个时候也需要在做另外一件事件：
* 在DialogAdd.vue中去监听这些网络数据请求回来的数据。
*/

import validate from "@/utils/validate";
const { checkAge } = validate;
export default {
data() {
return {
// 增加用户弹框组件数据选项
configDialogAdd: {
dialogVisible: false, //弹框默认不可见
title: "新增用户", //默认标题 如果写了#title插槽，title可以省略不传
width: "40%", //默认宽度
addUserForm: {
formName: "addUserForm", //表单名
labelWidth: '120px',
labelPosition: 'left',
formItems: [
//表单选项
{ label: "用户名", prop: "username", type: "input" }, //type是表单控件类型
{ label: "姓名", prop: "truename", type: "input" },
{ label: "手机号", prop: "phone", type: "numberInput" },
{
label: "是否启用",
prop: "status",
type: "radio",
values: ["禁用", "启用"]
},
{
label: "是否启用形式2",
prop: "status1",
type: "switch",

        },  
        {  
          label: "角色",  
          prop: "role",  
          type: "checkbox",  
          values: \["系统管理员", "信息管理员", "用户管理员"\]  
        },  
        {  
          label: "角色形式2",  
          prop: "role1",  
          type: "select",  
          options: \[{  
            value: 'admin',  
            label: '系统管理员'  
          }, {  
            value: 'info',  
            label: '信息管理员'  
          }, {  
            value: 'user',  
            label: '用户管理员'  
          }\],  
        },  
        {  
          label: "Cascader",  
          prop: "cascader",  
          type: "Cascader",  
          options: \[{  
            value: 'zhinan',  
            label: '指南',  
            children: \[{  
              value: 'shejiyuanze',  
              label: '设计原则'  
            }\]  
          },  
          {  
            value: 'daohang',  
            label: '导航',  
            children: \[{  
              value: 'cexiangdaohang',  
              label: '侧向导航'  
            }, {  
              value: 'dingbudaohang',  
              label: '顶部导航'  
            }\]  
          }  
          \],  
          handleChange: this.handleChange  
        }  
      \],  
      data: {  
        //绑定的数据  
        username: "",  
        truename: "",  
        phone: "",  
        status: "",  
        status1: false,  
        role: \[\],  
        role1: '',  
        cascader: \[\],  
      },

      rules: {  
        username: \[  
          { required: true, message: "请输入用户名", trigger: "blur" },  
          {  
            min: 2,  
            max: 10,  
            message: "长度在 3 到 5 个字符",  
            trigger: "blur"  
          }  
        \],  
        truename: \[  
          { required: true, message: "请输入名字", trigger: "blur" },  
          {  
            min: 2,  
            max: 19,  
            message: "长度在 2 到 10个字符",  
            trigger: "blur"  
          }  
        \],  
        phone: \[{ required: true, validator: checkAge, trigger: "blur" }\],  
        status: \[  
          { required: true, message: "请选择是否启用", trigger: "change" }  
        \],  
        status1: \[  
          { required: true, message: "请选择是否启用形式1", trigger: "change" }  
        \],  
        role: \[  
          {  
            type: "array",  
            required: true,  
            message: "请至少选择一个角色",  
            trigger: "change"  
          }  
        \],  
        role1: \[  
          { required: true, message: "请至少选择一个角色1", trigger: "change" }\],  
        cascader: \[  
          { required: true, message: "请至少选择一个级联选择器", trigger: "change" }\],  
      },

    },  
    requestApi: {  
      apiName: "userAdd",  
      params: {}  
    }  
  }  
}

},
methods: {
handleChange(val) {
console.log(111);
console.log(val);
}
},

created() { },
mounted() {

},

watch: {
// 逻辑处理在外部，由用户控制参数
'configDialogAdd.addUserForm.data.username': {
handler(newVal) {
this.configDialogAdd.requestApi.params.username = newVal
},

},  
'configDialogAdd.addUserForm.data.truename': {  
  handler(newVal) {  
    this.configDialogAdd.requestApi.params.truename = newVal  
  },

},  
'configDialogAdd.addUserForm.data.phone': {  
  handler(newVal) {  
    this.configDialogAdd.requestApi.params.phone = newVal  
  },

},  
'configDialogAdd.addUserForm.data.status': {  
  handler(newVal) {  
    if (!newVal) this.configDialogAdd.requestApi.params.status = ''  
    else this.configDialogAdd.requestApi.params.status = newVal === '禁用' ? '0' : '1'

  },  
},  
'configDialogAdd.addUserForm.data.role': {  
  handler(newVal) {  
    const obj = { "系统管理员": 'admin', '信息管理员': 'info', '用户管理员': 'user' }  
    let resArr = \[\]  
    newVal.forEach(item => resArr.push(obj\[item\]))  
    this.configDialogAdd.requestApi.params.role = resArr.join(',')  
  },  
},  
'configDialogAdd.addUserForm.data.status1': {  
  handler(newVal) {  
    this.configDialogAdd.requestApi.params.status1 = newVal  
  },

},  
'configDialogAdd.addUserForm.data.role1': {  
  handler(newVal) {  
    this.configDialogAdd.requestApi.params.role1 = newVal  
  },

},  
'configDialogAdd.addUserForm.data.cascader': {  
  handler(newVal) {  
    this.configDialogAdd.requestApi.params.cascader = newVal  
  },

},

},

}

DialogAdd.vue

<span slot="footer" class="dialog-footer">  
  <el-button @click="handleCancel(defaultConfigDialogAdd.addUserForm.formName)">取 消</el-button>  
  <el-button  
    type="primary"  
    @click="submitForm(defaultConfigDialogAdd.addUserForm.formName)"  
  >立即创建</el-button>  
</span>