vue+element+axios+vuex后台管理系统（父子组建嵌套）

仅用于记录，使用方法笔记：详情：

设计思路：

弹出层里面加载Froma表单（应需求里面表单都是弹出层）

设计要点：

一般建议子组件里面不进行任何业务操作（业务逻辑操作，建议在父组件中使用），这样便于组建的复用性

组建拆分越简单越好，子组建中的参数传递到最外层组建（父组件）方法可以用vuex来过度 数据或者stroage（不建议一层一层传递）

GIT：https://github.com/Apache-Ra/vue-admin/blob/vue-element-admin

本框架是为了快速搭建后台管理系统而写（希望大佬们多多提意见） 本框架分为不带UI的vue-admin和 vue+elemenu-admin后期会加上iview的 本框架集成了vuex.Axios,LocalStroage,router·······常用的工具类（可以更具实际项目需求，稍做变动，即可直接使用）

父组件：
<dialogBar :dialogData="dialogData" v-if="showUpdateDiaLog" @handleDiaLog="handleDiaLogConfirm"></dialogBar>
---------------------------------------------参数--------------------------------------------
      /**
       * @type {default.methods}
       * @dialog: dialog的开启或者是关闭
       * @title： dialog提示内容（title）
       * @type：dialog的类型（用于区分多个dialog）
       * @multiple：select是否多选，默认为单选
       */
      let vue = this
      // 开启dialog
      vue.showUpdateDiaLog = true
      let formObj = {
        dialog: true,
        title: '创建用户',
        type: 'create',
        formData: {
          formList:[
            {type: 'input', inputType: 'text', disabled: false, inputLabel: '用户名称', modelName: 'userName', placeholder: '请输入用户名', required: true, defaultValue: null},
            {type: 'input', inputType: 'password', disabled: false, inputLabel: '用户密码', modelName: 'userPwd', placeholder: '请输入密码', required: true, defaultValue: null},
            {type: 'select', inputType: 'select', disabled: true, inputLabel: '用户级别', modelName: 'userLevel', placeholder: '请输入选择用户级别', options: [{value: '0', label: '超级管理员'}, {value: '1', label: '测试管理员'}], required: true, defaultValue: null},
            {type: 'textarea', inputType: 'textarea', disabled: false, inputLabel: '用户描述', modelName: 'userDescription', placeholder: '请输入用户描述', required: false, defaultValue: null}
          ]
        }
      };
      vue.dialogData.dialog = true;
      vue.dialogData = formObj;
--------------------------------------------handleDiaLogConfirm方法-------------------------------------------
    // 处理dialog弹窗确定
    handleDiaLogConfirm (item, type) {
      let vue = this
      // 区分是创建还是修改
      if (type=='exit') {
        vue.handleDiaLogExitConfirm(item);
      } else if (type= 'create') {
        vue.handleDiaLogCreatedConfirm (item);
      }
--------------------------------------------子组建--------------------------------------------handleDiaLogConfirm

<template>
  <el-dialog
    :title="dialogData.title"
    :visible.sync="dialogData.dialog" class="dialogBar">
    <!--Form表单组件-->
    <FormBar
      :FormData="dialogData.formData"></FormBar>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogData.dialog = false">取 消</el-button>
      <el-button type="primary" @click="confirm(dialogData.type)">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import FormBar from './formBar'
import _ from 'lodash'
export default {
  name: "buttonBar",
  components: {FormBar},
  props: {
    dialogData: {
      type: Object,
      twoWay: true
    }
  },
  data() {
    return {}
  },
  created() {
  },
  mounted() {
  },
  methods: {
    // 点击确定按钮
    confirm (type) {
      let vue = this;
      // 获取双向绑定的值 循环取值
      let itemObj = {}
      _.forEach(vue.dialogData.formData.formList, (item) =>{
        itemObj[item.modelName] = item.defaultValue;
        // 如果还存在值的潜逃
        if (item.groupList) {
         _.forEach(item.groupList, (group_item) =>{
           itemObj[group_item.modelName] = group_item.defaultValue;
         })
        }
        // 如果modelName是数组（时间选择器）
      });
      // 把对象形式传递带父组件
     vue.$emit('handleDiaLog', itemObj, type)
      // 关闭弹出组件
      setTimeout(() =>{
        vue.dialogData.dialog = false
      },100)
    }
  }
}
</script>

<style scoped>
.el-select{width: 100%}
</style>
--------------------------------------------子子组建--------------------------------------------
 <el-form
      :model="formBarForm"
      :label-width="FormData.labelWidth || '80px'"
      :label-position="FormData.labelPosition || 'left'">
      <!--input-->
      <el-form-item v-for="(inputItem, key) in FormData.formList"
                    :key="key"
                    :required="inputItem.required"
                    v-if="inputItem.type == 'input'"
                    :label="inputItem.inputLabel">
        <el-input
          :ref="inputItem.modelName"
          :type="inputItem.inputType"
          :disabled="inputItem.disabled"
          :placeholder="inputItem.placeholder"
          v-model="inputItem.defaultValue"></el-input>
      </el-form-item>
      <!--select-->
      <el-form-item v-for="(inputItem, key) in FormData.formList"
                    :key="key"
                    :required="inputItem.required"
                    v-if="inputItem.type == 'select'"
                    :label="inputItem.inputLabel">
        <el-select v-model="inputItem.defaultValue"
                   :multiple=inputItem.multiple?true:false
                   :disabled="inputItem.disabled"
                   :placeholder="inputItem.placeholder">
          <el-option v-for="(item, key) in inputItem.options"
                     :key="key" :value="item.value"
                     :label="item.label">
          </el-option>
        </el-select>
      </el-form-item>
  </el-form>
--------------------------------------------子子组建--------------------------------------------