diff --git a/package.json b/package.json
index 4bbee2c..c70b389 100644
--- a/package.json
+++ b/package.json
@@ -88,7 +88,7 @@
     "webpack": "4.16.5",
     "webpack-bundle-analyzer": "2.13.1",
     "webpack-cli": "3.1.0",
-    "webpack-dev-server": "3.1.5",
+    "webpack-dev-server": ">= 3.1.11",
     "webpack-merge": "4.1.4"
   },
   "engines": {
diff --git a/src/icons/svg/dev.svg b/src/icons/svg/dev.svg
new file mode 100644
index 0000000..ed4d23c
--- /dev/null
+++ b/src/icons/svg/dev.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1546567861908" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2422" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M318.577778 819.2L17.066667 512l301.511111-307.2 45.511111 45.511111L96.711111 512l267.377778 261.688889zM705.422222 819.2l-45.511111-45.511111L927.288889 512l-267.377778-261.688889 45.511111-45.511111L1006.933333 512zM540.785778 221.866667l55.751111 11.150222L483.157333 802.133333l-55.751111-11.093333z" fill="#bfbfbf" p-id="2423"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/generate.svg b/src/icons/svg/generate.svg
new file mode 100644
index 0000000..c180884
--- /dev/null
+++ b/src/icons/svg/generate.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1546567963456" class="icon" style="" viewBox="0 0 1028 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3728" xmlns:xlink="http://www.w3.org/1999/xlink" width="200.78125" height="200"><defs><style type="text/css"></style></defs><path d="M320.747082 1024H0V0h1024v501.540856h-69.727626V69.727626H69.727626v884.544748h251.019456z" p-id="3729" fill="#bfbfbf"></path><path d="M903.171984 669.385214L786.228794 786.228794h87.657587c0 96.722179-78.592996 175.315175-175.315175 175.315175-28.588327 0.099611-56.678599-6.972763-81.780545-20.420234l-42.633463 42.633463c37.154864 23.707393 80.385992 36.258366 124.513619 36.258366C827.766537 1020.015564 932.357977 915.424125 932.357977 786.228794h87.657587L903.171984 669.385214zM523.256031 786.228794c0-96.722179 78.592996-175.315175 175.315175-175.315175 29.484825 0 57.575097 7.271595 81.780545 20.420233l42.633463-42.633463c-37.154864-23.707393-80.385992-36.258366-124.513619-36.258366-129.195331 0-233.78677 104.59144-233.78677 233.786771h-87.657588L494.070039 903.171984l116.84358-116.843579h-87.657588v-0.099611zM806.848249 241.357198H139.455253V295.844358h667.392996zM517.976654 482.814008H139.455253v54.387548h378.521401zM309.789883 724.171206H139.455253v54.48716h170.33463z" p-id="3730" fill="#bfbfbf"></path></svg>
\ No newline at end of file
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 5afdc45..0b2b9d6 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -12,6 +12,12 @@ body {
   font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
 }
 
+.el-dialog__body {
+  padding: 20px 20px;
+  color: #606266;
+  font-size: 14px;
+}
+
 label {
   font-weight: 700;
 }
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 98ac62e..164e41e 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -40,13 +40,6 @@ import { md5 } from '@/utils/md5'
 export default {
   name: 'Login',
   data() {
-    const validatePass = (rule, value, callback) => {
-      if (value.length < 5) {
-        callback(new Error('密码不能小于5位'))
-      } else {
-        callback()
-      }
-    }
     return {
       loginForm: {
         username: 'admin',
@@ -54,7 +47,7 @@ export default {
       },
       loginRules: {
         username: [{ required: true, trigger: 'blur', message: '用户名不能为空' }],
-        password: [{ required: true, trigger: 'blur', validator: validatePass }]
+        password: [{ required: true, trigger: 'blur', message: '密码不能为空' }]
       },
       loading: false,
       pwdType: 'password',
diff --git a/src/views/monitor/log/index.vue b/src/views/monitor/log/index.vue
index 96a2474..1222ced 100644
--- a/src/views/monitor/log/index.vue
+++ b/src/views/monitor/log/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <search :query="query"/>
+    <eHeader :query="query"/>
     <!--表格渲染-->
     <el-table v-loading="loading" :data="data" size="small" border style="width: 100%;">
       <el-table-column prop="username" label="用户名"/>
@@ -8,7 +8,7 @@
       <el-table-column prop="description" label="描述"/>
       <el-table-column :show-overflow-tooltip="true" prop="method" label="方法名称"/>
       <el-table-column :show-overflow-tooltip="true" prop="params" label="参数"/>
-      <el-table-column :show-overflow-tooltip="true" prop="exceptionDetail" label="异常详细"/>
+      <el-table-column :show-overflow-tooltip="true" prop="exceptionDetail" label="异常堆栈信息"/>
       <el-table-column prop="time" label="请求耗时" align="center">
         <template slot-scope="scope">
           <el-tag v-if="scope.row.time <= 300">{{ scope.row.time }}ms</el-tag>
@@ -41,9 +41,9 @@
 <script>
 import initData from '../../../mixins/initData'
 import { parseTime } from '@/utils/index'
-import search from './module/search'
+import eHeader from './module/header'
 export default {
-  components: { search },
+  components: { eHeader },
   mixins: [initData],
   created() {
     this.$nextTick(() => {
diff --git a/src/views/monitor/log/module/search.vue b/src/views/monitor/log/module/header.vue
similarity index 98%
rename from src/views/monitor/log/module/search.vue
rename to src/views/monitor/log/module/header.vue
index 3e94f12..2ec0f05 100644
--- a/src/views/monitor/log/module/search.vue
+++ b/src/views/monitor/log/module/header.vue
@@ -9,7 +9,6 @@
 </template>
 
 <script>
-// 查询条件
 export default {
   props: {
     query: {
diff --git a/src/views/monitor/log/msg.vue b/src/views/monitor/log/msg.vue
index e2a05da..48db97a 100644
--- a/src/views/monitor/log/msg.vue
+++ b/src/views/monitor/log/msg.vue
@@ -24,8 +24,8 @@ export default {
   name: 'Msg',
   data() {
     return {
-      height: document.documentElement.clientHeight - 132 + 'px;',
-      data: [{ name: 'elAdmin-', timestamp: parseTime(new Date().getTime()), threadName: 'system-prompt-message', level: 'INFO', className: 'me.zhengjie.AppRun' + ' :', body: '(*^ω^*) 欢迎使用，暂无日志输出~' }],
+      height: document.documentElement.clientHeight - 95 + 'px;',
+      data: [{ name: 'elAdmin-', timestamp: new Date(), threadName: 'system-prompt-message', level: 'INFO', className: 'me.zhengjie.AppRun' + ' :', body: 'Welcome, no log output~' }],
       // level
       INFO: '#0000ff', WARN: '#FFFF00', ERROR: '#FF0000', DEBUG: '#DEA000'
     }
@@ -99,7 +99,6 @@ export default {
       }
     },
     getColor(level) {
-      // INFO: '#0000ff', WARN: '#FFFF00', ERROR: '#FF0000', DEBUG: '#DEA000',
       if (level === 'INFO') {
         return this.INFO
       } else if (level === 'WARN') {
@@ -115,5 +114,5 @@ export default {
 </script>
 
 <style scoped>
-  textarea,input,button{outline:0}.container .buttons .closes,.container .buttons .minimize,.container .buttons .maximize{padding:0;margin:0;margin-right:6px;width:12px;height:12px;border:1px solid rgba(0,0,0,0);border-radius:6px}.container{width:100%;margin:5px}.container .handle{height:38px;background:#f9f9f9;border:1px solid #eee;border-top-left-radius:3px;border-top-right-radius:3px;font-family:'consolas';font-size:13px;line-height:38px;text-align:center}.container .buttons{position:absolute;float:left;margin:0 8px}.container .buttons .closes{background-color:#fc625d}.container .buttons .minimize{margin-left:8px;background-color:#fdbc40}.container .buttons .maximize{margin-left:8px;background-color:#35cd4b}.container .console{font-family:consolas;overflow-y:scroll;background:#494949;color:#f7f7f7;padding:10px;font-size:14px}
+  button,input,textarea{outline:0}.container .buttons .closes,.container .buttons .maximize,.container .buttons .minimize{padding:0;margin:0;margin-right:6px;width:12px;height:12px;border:1px solid transparent;border-radius:6px}.container{width:100%;margin:5px}.container .console{font-family:consolas;overflow-y:scroll;background:#494949;color:#f7f7f7;padding:10px;font-size:14px}
 </style>
diff --git a/src/views/monitor/redis/index.vue b/src/views/monitor/redis/index.vue
index 871017b..04b7cc5 100644
--- a/src/views/monitor/redis/index.vue
+++ b/src/views/monitor/redis/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <search :query="query"/>
+    <eHeader :query="query"/>
     <!--表格渲染-->
     <el-table v-loading="loading" :data="data" size="small" border style="width: 100%;">
       <el-table-column label="序号" width="80" align="center">
@@ -44,10 +44,10 @@ import initData from '../../../mixins/initData'
 import { del } from '@/api/redis'
 import { getPermissionTree } from '@/api/permission'
 import { parseTime } from '@/utils/index'
-import search from './module/search'
+import eHeader from './module/header'
 import edit from './module/edit'
 export default {
-  components: { search, edit },
+  components: { eHeader, edit },
   mixins: [initData],
   data() {
     return {
diff --git a/src/views/monitor/redis/module/add.vue b/src/views/monitor/redis/module/add.vue
deleted file mode 100644
index dfebc52..0000000
--- a/src/views/monitor/redis/module/add.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<template>
-  <div>
-    <el-button class="filter-item" size="mini" type="primary" icon="el-icon-plus" @click="dialog = true">新增</el-button>
-    <el-dialog :visible.sync="dialog" :title="title" width="500px">
-      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="66px">
-        <el-form-item label="key" prop="key">
-          <el-input v-model="form.key" style="width: 370px;"/>
-        </el-form-item>
-        <el-form-item label="value" prop="value">
-          <el-input v-model="form.value" style="width: 370px;" rows="6" type="textarea"/>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="text" @click="cancel">取消</el-button>
-        <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
-      </div>
-    </el-dialog>
-  </div>
-</template>
-<script>
-import { add } from '@/api/redis'
-export default {
-  data() {
-    return {
-      loading: false, dialog: false, title: '新增缓存',
-      form: { key: '', value: '' },
-      rules: {
-        key: [
-          { required: true, message: '请输入Key', trigger: 'blur' }
-        ],
-        value: [
-          { required: true, message: '请输入Value', trigger: 'blur' }
-        ]
-      }
-    }
-  },
-  methods: {
-    cancel() {
-      this.resetForm()
-    },
-    doSubmit() {
-      this.$refs['form'].validate((valid) => {
-        if (valid) {
-          this.loading = true
-          add(this.form).then(res => {
-            this.resetForm()
-            this.$notify({
-              title: '添加成功',
-              type: 'success',
-              duration: 2500
-            })
-            this.loading = false
-            this.$parent.$parent.init()
-          }).catch(err => {
-            this.loading = false
-            console.log(err.response.data.message)
-          })
-        } else {
-          return false
-        }
-      })
-    },
-    resetForm() {
-      this.dialog = false
-      this.$refs['form'].resetFields()
-      this.form = { key: '', value: '' }
-    }
-  }
-}
-</script>
-
-<style scoped>
-  div{
-    display: inline-block;
-    margin-left: 5px;
-    margin-right: 5px;
-  }
-</style>
diff --git a/src/views/monitor/redis/module/edit.vue b/src/views/monitor/redis/module/edit.vue
index d722a16..95c691a 100644
--- a/src/views/monitor/redis/module/edit.vue
+++ b/src/views/monitor/redis/module/edit.vue
@@ -1,27 +1,13 @@
 <template>
   <div>
     <el-button size="mini" type="success" @click="to">编辑</el-button>
-    <el-dialog :visible.sync="dialog" :title="title" style="text-align: left" width="500px">
-      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="66px">
-        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="66px">
-          <el-form-item label="key" prop="key">
-            <el-input v-model="form.key" style="width: 370px;"/>
-          </el-form-item>
-          <el-form-item label="value" prop="value">
-            <el-input v-model="form.value" style="width: 370px;" rows="6" type="textarea"/>
-          </el-form-item>
-        </el-form>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="text" @click="cancel">取消</el-button>
-        <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
-      </div>
-    </el-dialog>
+    <eForm ref="form" :sup_this="sup_this" :is-add="false"/>
   </div>
 </template>
 <script>
-import { edit } from '@/api/redis'
+import eForm from './form'
 export default {
+  components: { eForm },
   props: {
     data: {
       type: Object,
@@ -32,63 +18,16 @@ export default {
       required: true
     }
   },
-  data() {
-    return {
-      loading: false, dialog: false, title: '编辑缓存',
-      form: { key: '', value: '' },
-      rules: {
-        key: [
-          { required: true, message: '请输入Key', trigger: 'blur' }
-        ],
-        value: [
-          { required: true, message: '请输入Value', trigger: 'blur' }
-        ]
-      }
-    }
-  },
   methods: {
     to() {
-      this.form = { key: this.data.key, value: this.data.value }
-      this.dialog = true
-    },
-    cancel() {
-      this.resetForm()
-    },
-    doSubmit() {
-      this.$refs['form'].validate((valid) => {
-        if (valid) {
-          this.loading = true
-          const _this = this
-          edit(this.form).then(res => {
-            this.resetForm()
-            this.$notify({
-              title: '修改成功',
-              type: 'success',
-              duration: 2500
-            })
-            this.loading = false
-            _this.sup_this.init()
-          }).catch(err => {
-            this.loading = false
-            console.log(err.response.data.message)
-          })
-        } else {
-          return false
-        }
-      })
-    },
-    resetForm() {
-      this.dialog = false
-      this.$refs['form'].resetFields()
-      this.form = { key: '', value: '' }
+      const _this = this.$refs.form
+      _this.form = { key: this.data.key, value: this.data.value }
+      _this.dialog = true
     }
   }
 }
 </script>
 
 <style scoped>
-  div{
-    display: inline-block;
-    margin-right: 3px;
-  }
+  div{display: inline-block;margin-right: 3px;}
 </style>
diff --git a/src/views/monitor/redis/module/form.vue b/src/views/monitor/redis/module/form.vue
new file mode 100644
index 0000000..7d4dd0e
--- /dev/null
+++ b/src/views/monitor/redis/module/form.vue
@@ -0,0 +1,102 @@
+<template>
+  <el-dialog :append-to-body="true" :visible.sync="dialog" :title="isAdd ? '新增缓存' : '编辑缓存'" width="500px">
+    <el-form ref="form" :model="form" :rules="rules" size="small" label-width="66px">
+      <el-form-item label="key" prop="key">
+        <el-input v-model="form.key" style="width: 370px;"/>
+      </el-form-item>
+      <el-form-item label="value" prop="value">
+        <el-input v-model="form.value" style="width: 370px;" rows="6" type="textarea"/>
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="text" @click="cancel">取消</el-button>
+      <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { add, edit } from '@/api/redis'
+export default {
+  props: {
+    isAdd: {
+      type: Boolean,
+      required: true
+    },
+    sup_this: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      loading: false, dialog: false, title: '新增缓存',
+      form: { key: '', value: '' },
+      rules: {
+        key: [
+          { required: true, message: '请输入Key', trigger: 'blur' }
+        ],
+        value: [
+          { required: true, message: '请输入Value', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    cancel() {
+      this.resetForm()
+    },
+    doSubmit() {
+      this.$refs['form'].validate((valid) => {
+        if (valid) {
+          this.loading = true
+          if (this.isAdd) {
+            this.doAdd()
+          } else this.doEdit()
+        } else {
+          return false
+        }
+      })
+    },
+    doAdd() {
+      add(this.form).then(res => {
+        this.resetForm()
+        this.$notify({
+          title: '添加成功',
+          type: 'success',
+          duration: 2500
+        })
+        this.loading = false
+        this.$parent.$parent.init()
+      }).catch(err => {
+        this.loading = false
+        console.log(err.response.data.message)
+      })
+    },
+    doEdit() {
+      edit(this.form).then(res => {
+        this.resetForm()
+        this.$notify({
+          title: '修改成功',
+          type: 'success',
+          duration: 2500
+        })
+        this.loading = false
+        this.sup_this.init()
+      }).catch(err => {
+        this.loading = false
+        console.log(err.response.data.message)
+      })
+    },
+    resetForm() {
+      this.dialog = false
+      this.$refs['form'].resetFields()
+      this.form = { key: '', value: '' }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/monitor/redis/module/search.vue b/src/views/monitor/redis/module/header.vue
similarity index 71%
rename from src/views/monitor/redis/module/search.vue
rename to src/views/monitor/redis/module/header.vue
index 545f117..f75f659 100644
--- a/src/views/monitor/redis/module/search.vue
+++ b/src/views/monitor/redis/module/header.vue
@@ -1,19 +1,31 @@
 <template>
   <div class="head-container">
+    <!-- 搜索 -->
     <el-input v-model="query.value" clearable placeholder="输入关键词搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery"/>
     <el-button class="filter-item" size="mini" type="primary" icon="el-icon-search" @click="toQuery">搜索</el-button>
-    <add v-if="checkPermission(['ADMIN','REDIS_ALL','REDIS_CREATE'])"/>
+    <!-- 新增 -->
+    <div style="display: inline-block;margin: 0px 2px;">
+      <el-button
+        v-if="checkPermission(['ADMIN','REDIS_ALL','REDIS_CREATE'])"
+        class="filter-item"
+        size="mini"
+        type="primary"
+        icon="el-icon-plus"
+        @click="$refs.form.dialog = true">新增</el-button>
+      <eForm ref="form" :is-add="true"/>
+    </div>
+    <!-- 清空缓存 -->
     <el-button v-if="checkPermission(['ADMIN','REDIS_ALL','REDIS_DELETE'])" :loading="deleteAllLoading" type="warning" size="mini" class="filter-item" icon="el-icon-delete" @click="deleteAll">清空缓存</el-button>
   </div>
 </template>
 
 <script>
 import checkPermission from '@/utils/permission' // 权限判断函数
-import add from './add'
+import eForm from './form'
 import { delAll } from '@/api/redis'
 // 查询条件
 export default {
-  components: { add },
+  components: { eForm },
   props: {
     query: {
       type: Object,
diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue
index 7c8f3e1..ecfdbca 100644
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <search :roles="roles" :menus="menus" :query="query"/>
+    <eHeader :roles="roles" :menus="menus" :query="query"/>
     <!--表格渲染-->
     <tree-table v-loading="loading" :data="data" :expand-all="true" :columns="columns" border size="small">
       <el-table-column prop="icon" label="图标" align="center" width="80px">
@@ -54,10 +54,10 @@ import treeTable from '@/components/TreeTable'
 import initData from '../../../mixins/initData'
 import { del, getMenusTree } from '@/api/menu'
 import { parseTime } from '@/utils/index'
-import search from './module/search'
+import eHeader from './module/header'
 import edit from './module/edit'
 export default {
-  components: { search, edit, treeTable },
+  components: { eHeader, edit, treeTable },
   mixins: [initData],
   data() {
     return {
diff --git a/src/views/system/menu/module/add.vue b/src/views/system/menu/module/add.vue
deleted file mode 100644
index 5d78961..0000000
--- a/src/views/system/menu/module/add.vue
+++ /dev/null
@@ -1,137 +0,0 @@
-<template>
-  <div>
-    <el-button class="filter-item" size="mini" type="primary" icon="el-icon-plus" @click="dialog = true">新增</el-button>
-    <el-dialog :visible.sync="dialog" :title="title" width="600px">
-      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
-        <el-form-item label="菜单图标">
-          <el-popover
-            placement="bottom-start"
-            width="460"
-            trigger="click"
-            @show="$refs['iconSelect'].reset()">
-            <IconSelect ref="iconSelect" @selected="selected" />
-            <el-input slot="reference" v-model="form.icon" style="width: 460px;" placeholder="点击选择图标" readonly>
-              <svg-icon v-if="form.icon" slot="prefix" :icon-class="form.icon" class="el-input__icon" style="height: 32px;width: 16px;" />
-              <i v-else slot="prefix" class="el-icon-search el-input__icon"/>
-            </el-input>
-          </el-popover>
-        </el-form-item>
-        <el-form-item label="菜单名称" prop="name">
-          <el-input v-model="form.name" placeholder="名称" style="width: 460px;"/>
-        </el-form-item>
-        <el-form-item label="菜单排序" prop="sort">
-          <el-input v-model.number="form.sort" placeholder="序号越小越靠前" style="width: 460px;"/>
-        </el-form-item>
-        <el-form-item label="内部菜单" prop="iframe">
-          <el-radio v-model="form.iframe" label="false">是</el-radio>
-          <el-radio v-model="form.iframe" label="true" >否</el-radio>
-        </el-form-item>
-        <el-form-item label="链接地址">
-          <el-input v-model="form.path" placeholder="菜单路径" style="width: 460px;"/>
-        </el-form-item>
-        <el-form-item v-if="form.iframe === 'false'" label="组件路径">
-          <el-input v-model="form.component" placeholder="菜单路径" style="width: 460px;"/>
-        </el-form-item>
-        <el-form-item label="上级类目">
-          <treeselect v-model="form.pid" :options="menus" style="width: 460px;" placeholder="选择上级类目" />
-        </el-form-item>
-        <el-form-item style="margin-top: -10px;margin-bottom: 0px;" label="选择角色">
-          <treeselect v-model="roleIds" :multiple="true" :options="roles" style="width: 460px;" placeholder="请选择角色" />
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="text" @click="cancel">取消</el-button>
-        <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
-      </div>
-    </el-dialog>
-  </div>
-</template>
-<script>
-import { add } from '@/api/menu'
-import Treeselect from '@riophae/vue-treeselect'
-import IconSelect from '@/components/IconSelect'
-import '@riophae/vue-treeselect/dist/vue-treeselect.css'
-export default {
-  components: { Treeselect, IconSelect },
-  props: {
-    menus: {
-      type: Array,
-      required: true
-    },
-    roles: {
-      type: Array,
-      required: true
-    }
-  },
-  data() {
-    return {
-      loading: false, dialog: false, title: '新增菜单',
-      form: { name: '', sort: 999, path: '', component: '', iframe: 'false', roles: [], pid: 0, icon: '' }, roleIds: [],
-      rules: {
-        name: [
-          { required: true, message: '请输入名称', trigger: 'blur' }
-        ],
-        sort: [
-          { required: true, message: '请输入序号', trigger: 'blur', type: 'number' }
-        ],
-        iframe: [
-          { required: true, message: '请选择菜单类型', trigger: 'blur' }
-        ]
-      }
-    }
-  },
-  methods: {
-    cancel() {
-      this.resetForm()
-    },
-    doSubmit() {
-      this.$refs['form'].validate((valid) => {
-        if (valid) {
-          this.loading = true
-          this.form.roles = []
-          const _this = this
-          this.roleIds.forEach(function(data, index) {
-            const role = { id: data }
-            _this.form.roles.push(role)
-          })
-          add(this.form).then(res => {
-            this.resetForm()
-            this.$notify({
-              title: '添加成功',
-              type: 'success',
-              duration: 2500
-            })
-            this.loading = false
-            setTimeout(() => {
-              this.$parent.$parent.init()
-              this.$parent.$parent.getMenus()
-            }, 200)
-          }).catch(err => {
-            this.loading = false
-            console.log(err.response.data.message)
-          })
-        } else {
-          return false
-        }
-      })
-    },
-    resetForm() {
-      this.dialog = false
-      this.$refs['form'].resetFields()
-      this.form = { name: '', sort: 999, path: '', component: '', iframe: 'false', roles: [], pid: 0, icon: '' }
-      this.roleIds = []
-    },
-    selected(name) {
-      this.form.icon = name
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-  div{
-    display: inline-block;
-    margin-left: 5px;
-    margin-right: 5px;
-  }
-</style>
diff --git a/src/views/system/menu/module/edit.vue b/src/views/system/menu/module/edit.vue
index 845f31d..3a9c04f 100644
--- a/src/views/system/menu/module/edit.vue
+++ b/src/views/system/menu/module/edit.vue
@@ -1,58 +1,13 @@
 <template>
   <div>
     <el-button size="mini" type="success" @click="to">编辑</el-button>
-    <el-dialog :visible.sync="dialog" :title="title" style="text-align: left" width="600px">
-      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
-        <el-form-item label="菜单图标">
-          <el-popover
-            placement="bottom-start"
-            width="460"
-            trigger="click"
-            @show="$refs['iconSelect'].reset()">
-            <IconSelect ref="iconSelect" @selected="selected" />
-            <el-input slot="reference" v-model="form.icon" style="width: 460px;" placeholder="点击选择图标" readonly>
-              <svg-icon v-if="form.icon" slot="prefix" :icon-class="form.icon" class="el-input__icon" style="height: 32px;width: 16px;" />
-              <i v-else slot="prefix" class="el-icon-search el-input__icon"/>
-            </el-input>
-          </el-popover>
-        </el-form-item>
-        <el-form-item label="菜单名称" prop="name">
-          <el-input v-model="form.name" placeholder="名称" style="width: 460px;"/>
-        </el-form-item>
-        <el-form-item label="菜单排序" prop="sort">
-          <el-input v-model.number="form.sort" placeholder="序号越小越靠前" style="width: 460px;"/>
-        </el-form-item>
-        <el-form-item label="内部菜单" prop="iframe">
-          <el-radio v-model="form.iframe" label="false">是</el-radio>
-          <el-radio v-model="form.iframe" label="true" >否</el-radio>
-        </el-form-item>
-        <el-form-item label="链接地址">
-          <el-input v-model="form.path" placeholder="菜单路径" style="width: 460px;"/>
-        </el-form-item>
-        <el-form-item v-if="form.iframe === 'false'" label="组件路径">
-          <el-input v-model="form.component" placeholder="菜单路径" style="width: 460px;"/>
-        </el-form-item>
-        <el-form-item label="上级类目">
-          <treeselect v-model="form.pid" :options="menus" style="width: 460px;" placeholder="选择上级类目" />
-        </el-form-item>
-        <el-form-item style="margin-top: -10px;margin-bottom: 0px;" label="选择角色">
-          <treeselect v-model="roleIds" :multiple="true" :options="roles" style="width: 460px;" placeholder="请选择角色" />
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="text" @click="cancel">取消</el-button>
-        <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
-      </div>
-    </el-dialog>
+    <eForm ref="form" :roles="roles" :menus="menus" :sup_this="sup_this" :is-add="false"/>
   </div>
 </template>
 <script>
-import { edit } from '@/api/menu'
-import IconSelect from '@/components/IconSelect'
-import Treeselect from '@riophae/vue-treeselect'
-import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+import eForm from './form'
 export default {
-  components: { Treeselect, IconSelect },
+  components: { eForm },
   props: {
     data: {
       type: Object,
@@ -71,74 +26,15 @@ export default {
       required: true
     }
   },
-  data() {
-    return {
-      loading: false, dialog: false, title: '编辑菜单',
-      form: { id: '', name: '', sort: 999, path: '', component: '', iframe: 'false', roles: [], pid: 0, icon: '' }, roleIds: [],
-      rules: {
-        name: [
-          { required: true, message: '请输入名称', trigger: 'blur' }
-        ],
-        sort: [
-          { required: true, message: '请输入序号', trigger: 'blur', type: 'number' }
-        ],
-        iframe: [
-          { required: true, message: '请选择菜单类型', trigger: 'blur' }
-        ]
-      }
-    }
-  },
   methods: {
     to() {
-      const _this = this
-      this.form = { id: this.data.id, component: this.data.component, name: this.data.name, sort: this.data.sort, pid: this.data.pid, path: this.data.path, iframe: this.data.iframe.toString(), roles: [], icon: this.data.icon }
+      const _this = this.$refs.form
+      _this.roleIds = []
+      _this.form = { id: this.data.id, component: this.data.component, name: this.data.name, sort: this.data.sort, pid: this.data.pid, path: this.data.path, iframe: this.data.iframe.toString(), roles: [], icon: this.data.icon }
       this.data.roles.forEach(function(data, index) {
         _this.roleIds.push(data.id)
       })
-      this.dialog = true
-    },
-    cancel() {
-      this.resetForm()
-    },
-    doSubmit() {
-      this.$refs['form'].validate((valid) => {
-        if (valid) {
-          this.loading = true
-          this.form.roles = []
-          const _this = this
-          this.roleIds.forEach(function(data, index) {
-            const role = { id: data }
-            _this.form.roles.push(role)
-          })
-          edit(this.form).then(res => {
-            this.resetForm()
-            this.$notify({
-              title: '修改成功',
-              type: 'success',
-              duration: 2500
-            })
-            this.loading = false
-            setTimeout(() => {
-              _this.sup_this.init()
-              _this.sup_this.getMenus()
-            }, 200)
-          }).catch(err => {
-            this.loading = false
-            console.log(err.response.data.message)
-          })
-        } else {
-          return false
-        }
-      })
-    },
-    resetForm() {
-      this.dialog = false
-      this.$refs['form'].resetFields()
-      this.form = { id: '', name: '', sort: 999, path: '', component: '', iframe: 'false', roles: [], pid: 0, icon: '' }
-      this.roleIds = []
-    },
-    selected(name) {
-      this.form.icon = name
+      _this.dialog = true
     }
   }
 }
diff --git a/src/views/system/menu/module/form.vue b/src/views/system/menu/module/form.vue
new file mode 100644
index 0000000..e610782
--- /dev/null
+++ b/src/views/system/menu/module/form.vue
@@ -0,0 +1,162 @@
+<template>
+  <el-dialog :append-to-body="true" :visible.sync="dialog" :title="isAdd ? '新增菜单' : '编辑菜单'" width="600px">
+    <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
+      <el-form-item label="菜单图标">
+        <el-popover
+          placement="bottom-start"
+          width="460"
+          trigger="click"
+          @show="$refs['iconSelect'].reset()">
+          <IconSelect ref="iconSelect" @selected="selected" />
+          <el-input slot="reference" v-model="form.icon" style="width: 460px;" placeholder="点击选择图标" readonly>
+            <svg-icon v-if="form.icon" slot="prefix" :icon-class="form.icon" class="el-input__icon" style="height: 32px;width: 16px;" />
+            <i v-else slot="prefix" class="el-icon-search el-input__icon"/>
+          </el-input>
+        </el-popover>
+      </el-form-item>
+      <el-form-item label="菜单名称" prop="name">
+        <el-input v-model="form.name" placeholder="名称" style="width: 460px;"/>
+      </el-form-item>
+      <el-form-item label="菜单排序" prop="sort">
+        <el-input v-model.number="form.sort" placeholder="序号越小越靠前" style="width: 460px;"/>
+      </el-form-item>
+      <el-form-item label="内部菜单" prop="iframe">
+        <el-radio v-model="form.iframe" label="false">是</el-radio>
+        <el-radio v-model="form.iframe" label="true" >否</el-radio>
+      </el-form-item>
+      <el-form-item label="链接地址">
+        <el-input v-model="form.path" placeholder="菜单路径" style="width: 460px;"/>
+      </el-form-item>
+      <el-form-item v-if="form.iframe === 'false'" label="组件路径">
+        <el-input v-model="form.component" placeholder="菜单路径" style="width: 460px;"/>
+      </el-form-item>
+      <el-form-item label="上级类目">
+        <treeselect v-model="form.pid" :options="menus" style="width: 460px;" placeholder="选择上级类目" />
+      </el-form-item>
+      <el-form-item style="margin-top: -10px;margin-bottom: 0px;" label="选择角色">
+        <treeselect v-model="roleIds" :multiple="true" :options="roles" style="width: 460px;" placeholder="请选择角色" />
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="text" @click="cancel">取消</el-button>
+      <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { add, edit } from '@/api/menu'
+import Treeselect from '@riophae/vue-treeselect'
+import IconSelect from '@/components/IconSelect'
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+export default {
+  components: { Treeselect, IconSelect },
+  props: {
+    menus: {
+      type: Array,
+      required: true
+    },
+    roles: {
+      type: Array,
+      required: true
+    },
+    isAdd: {
+      type: Boolean,
+      required: true
+    },
+    sup_this: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      loading: false, dialog: false,
+      form: { name: '', sort: 999, path: '', component: '', iframe: 'false', roles: [], pid: 0, icon: '' }, roleIds: [],
+      rules: {
+        name: [
+          { required: true, message: '请输入名称', trigger: 'blur' }
+        ],
+        sort: [
+          { required: true, message: '请输入序号', trigger: 'blur', type: 'number' }
+        ],
+        iframe: [
+          { required: true, message: '请选择菜单类型', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    cancel() {
+      this.resetForm()
+    },
+    doSubmit() {
+      this.$refs['form'].validate((valid) => {
+        if (valid) {
+          this.loading = true
+          this.form.roles = []
+          const _this = this
+          this.roleIds.forEach(function(data, index) {
+            const role = { id: data }
+            _this.form.roles.push(role)
+          })
+          if (this.isAdd) {
+            this.doAdd()
+          } else this.doEdit()
+        } else {
+          return false
+        }
+      })
+    },
+    doAdd() {
+      add(this.form).then(res => {
+        this.resetForm()
+        this.$notify({
+          title: '添加成功',
+          type: 'success',
+          duration: 2500
+        })
+        this.loading = false
+        setTimeout(() => {
+          this.$parent.$parent.init()
+          this.$parent.$parent.getMenus()
+        }, 200)
+      }).catch(err => {
+        this.loading = false
+        console.log(err.response.data.message)
+      })
+    },
+    doEdit() {
+      edit(this.form).then(res => {
+        this.resetForm()
+        this.$notify({
+          title: '修改成功',
+          type: 'success',
+          duration: 2500
+        })
+        this.loading = false
+        setTimeout(() => {
+          this.sup_this.init()
+          this.sup_this.getMenus()
+        }, 200)
+      }).catch(err => {
+        this.loading = false
+        console.log(err.response.data.message)
+      })
+    },
+    resetForm() {
+      this.dialog = false
+      this.$refs['form'].resetFields()
+      this.form = { name: '', sort: 999, path: '', component: '', iframe: 'false', roles: [], pid: 0, icon: '' }
+      this.roleIds = []
+    },
+    selected(name) {
+      this.form.icon = name
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/system/menu/module/search.vue b/src/views/system/menu/module/header.vue
similarity index 59%
rename from src/views/system/menu/module/search.vue
rename to src/views/system/menu/module/header.vue
index d28dcc5..929a6a6 100644
--- a/src/views/system/menu/module/search.vue
+++ b/src/views/system/menu/module/header.vue
@@ -1,17 +1,27 @@
 <template>
   <div class="head-container">
+    <!-- 搜索 -->
     <el-input v-model="query.value" clearable placeholder="输入名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery"/>
     <el-button class="filter-item" size="mini" type="primary" icon="el-icon-search" @click="toQuery">搜索</el-button>
-    <add v-if="checkPermission(['ADMIN','MENU_ALL','MENU_CREATE'])" :roles="roles" :menus="menus"/>
+    <!-- 新增 -->
+    <div style="display: inline-block;margin: 0px 2px;">
+      <el-button
+        v-if="checkPermission(['ADMIN','MENU_ALL','MENU_CREATE'])"
+        class="filter-item"
+        size="mini"
+        type="primary"
+        icon="el-icon-plus"
+        @click="$refs.form.dialog = true">新增</el-button>
+      <eForm ref="form" :roles="roles" :menus="menus" :is-add="true"/>
+    </div>
   </div>
 </template>
 
 <script>
-import checkPermission from '@/utils/permission' // 权限判断函数
-import add from './add'
-// 查询条件
+import checkPermission from '@/utils/permission'
+import eForm from './form'
 export default {
-  components: { add },
+  components: { eForm },
   props: {
     query: {
       type: Object,
diff --git a/src/views/system/permission/index.vue b/src/views/system/permission/index.vue
index b44790c..3d2a1cb 100644
--- a/src/views/system/permission/index.vue
+++ b/src/views/system/permission/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <search :permissions="permissions" :query="query"/>
+    <eHeader :permissions="permissions" :query="query"/>
     <!--表格渲染-->
     <tree-table v-loading="loading" :data="data" :expand-all="true" :columns="columns" border size="small">
       <el-table-column prop="createTime" label="创建日期">
@@ -36,10 +36,10 @@ import initData from '../../../mixins/initData'
 import { del } from '@/api/permission'
 import { getPermissionTree } from '@/api/permission'
 import { parseTime } from '@/utils/index'
-import search from './module/search'
+import eHeader from './module/header'
 import edit from './module/edit'
 export default {
-  components: { search, edit, treeTable },
+  components: { eHeader, edit, treeTable },
   mixins: [initData],
   data() {
     return {
diff --git a/src/views/system/permission/module/add.vue b/src/views/system/permission/module/add.vue
deleted file mode 100644
index 0797666..0000000
--- a/src/views/system/permission/module/add.vue
+++ /dev/null
@@ -1,93 +0,0 @@
-<template>
-  <div>
-    <el-button class="filter-item" size="mini" type="primary" icon="el-icon-plus" @click="dialog = true">新增</el-button>
-    <el-dialog :visible.sync="dialog" :title="title" width="500px">
-      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
-        <el-form-item label="名称" prop="name">
-          <el-input v-model="form.name" style="width: 360px;"/>
-        </el-form-item>
-        <el-form-item label="别名" prop="alias">
-          <el-input v-model="form.alias" style="width: 360px;"/>
-        </el-form-item>
-        <el-form-item style="margin-bottom: 0px;" label="上级类目">
-          <treeselect v-model="form.pid" :options="permissions" style="width: 360px;" placeholder="选择上级类目" />
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="text" @click="cancel">取消</el-button>
-        <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
-      </div>
-    </el-dialog>
-  </div>
-</template>
-<script>
-import { add } from '@/api/permission'
-import Treeselect from '@riophae/vue-treeselect'
-import '@riophae/vue-treeselect/dist/vue-treeselect.css'
-export default {
-  components: { Treeselect },
-  props: {
-    permissions: {
-      type: Array,
-      required: true
-    }
-  },
-  data() {
-    return {
-      loading: false, dialog: false, title: '新增权限',
-      form: { name: '', alias: '', pid: 0 },
-      rules: {
-        name: [
-          { required: true, message: '请输入名称', trigger: 'blur' }
-        ],
-        alias: [
-          { required: true, message: '请输入别名', trigger: 'blur' }
-        ]
-      }
-    }
-  },
-  methods: {
-    cancel() {
-      this.resetForm()
-    },
-    doSubmit() {
-      this.$refs['form'].validate((valid) => {
-        if (valid) {
-          this.loading = true
-          add(this.form).then(res => {
-            this.resetForm()
-            this.$notify({
-              title: '添加成功',
-              type: 'success',
-              duration: 2500
-            })
-            this.loading = false
-            setTimeout(() => {
-              this.$parent.$parent.init()
-              this.$parent.$parent.getPermissions()
-            }, 200)
-          }).catch(err => {
-            this.loading = false
-            console.log(err.response.data.message)
-          })
-        } else {
-          return false
-        }
-      })
-    },
-    resetForm() {
-      this.dialog = false
-      this.$refs['form'].resetFields()
-      this.form = { name: '', alias: '', pid: 0 }
-    }
-  }
-}
-</script>
-
-<style scoped>
-  div{
-    display: inline-block;
-    margin-left: 5px;
-    margin-right: 5px;
-  }
-</style>
diff --git a/src/views/system/permission/module/edit.vue b/src/views/system/permission/module/edit.vue
index 481a2e1..6520d67 100644
--- a/src/views/system/permission/module/edit.vue
+++ b/src/views/system/permission/module/edit.vue
@@ -1,31 +1,13 @@
 <template>
   <div>
     <el-button :disabled="data.id === 1" size="mini" type="success" @click="to">编辑</el-button>
-    <el-dialog :visible.sync="dialog" :title="title" style="text-align: left" width="500px">
-      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
-        <el-form-item label="名称" prop="name">
-          <el-input v-model="form.name" style="width: 360px;"/>
-        </el-form-item>
-        <el-form-item label="别名" prop="alias">
-          <el-input v-model="form.alias" style="width: 360px;"/>
-        </el-form-item>
-        <el-form-item style="margin-bottom: 0px;" label="上级类目">
-          <treeselect v-model="form.pid" :options="permissions" style="width: 360px;" placeholder="选择上级类目" />
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="text" @click="cancel">取消</el-button>
-        <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
-      </div>
-    </el-dialog>
+    <eForm ref="form" :permissions="permissions" :sup_this="sup_this" :is-add="false"/>
   </div>
 </template>
 <script>
-import { edit } from '@/api/permission'
-import Treeselect from '@riophae/vue-treeselect'
-import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+import eForm from './form'
 export default {
-  components: { Treeselect },
+  components: { eForm },
   props: {
     data: {
       type: Object,
@@ -40,58 +22,11 @@ export default {
       required: true
     }
   },
-  data() {
-    return {
-      loading: false, dialog: false, title: '编辑权限',
-      form: { id: '', name: '', alias: '', pid: 0 },
-      rules: {
-        name: [
-          { required: true, message: '请输入名称', trigger: 'blur' }
-        ],
-        alias: [
-          { required: true, message: '请输入别名', trigger: 'blur' }
-        ]
-      }
-    }
-  },
   methods: {
     to() {
-      this.form = { id: this.data.id, name: this.data.name, alias: this.data.alias, pid: this.data.pid }
-      this.dialog = true
-    },
-    cancel() {
-      this.resetForm()
-    },
-    doSubmit() {
-      this.$refs['form'].validate((valid) => {
-        if (valid) {
-          this.loading = true
-          const _this = this
-          edit(this.form).then(res => {
-            this.resetForm()
-            this.$notify({
-              title: '修改成功',
-              type: 'success',
-              duration: 2500
-            })
-            this.loading = false
-            setTimeout(() => {
-              _this.sup_this.init()
-              _this.sup_this.getPermissions()
-            }, 200)
-          }).catch(err => {
-            this.loading = false
-            console.log(err.response.data.message)
-          })
-        } else {
-          return false
-        }
-      })
-    },
-    resetForm() {
-      this.dialog = false
-      this.$refs['form'].resetFields()
-      this.form = { id: '', name: '', alias: '', pid: 0 }
+      const _this = this.$refs.form
+      _this.form = { id: this.data.id, name: this.data.name, alias: this.data.alias, pid: this.data.pid }
+      _this.dialog = true
     }
   }
 }
diff --git a/src/views/system/permission/module/form.vue b/src/views/system/permission/module/form.vue
new file mode 100644
index 0000000..6922293
--- /dev/null
+++ b/src/views/system/permission/module/form.vue
@@ -0,0 +1,118 @@
+<template>
+  <el-dialog :append-to-body="true" :visible.sync="dialog" :title="isAdd ? '新增权限' : '编辑权限'" width="500px">
+    <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
+      <el-form-item label="名称" prop="name">
+        <el-input v-model="form.name" style="width: 360px;"/>
+      </el-form-item>
+      <el-form-item label="别名" prop="alias">
+        <el-input v-model="form.alias" style="width: 360px;"/>
+      </el-form-item>
+      <el-form-item style="margin-bottom: 0px;" label="上级类目">
+        <treeselect v-model="form.pid" :options="permissions" style="width: 360px;" placeholder="选择上级类目" />
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="text" @click="cancel">取消</el-button>
+      <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { add, edit } from '@/api/permission'
+import Treeselect from '@riophae/vue-treeselect'
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+export default {
+  components: { Treeselect },
+  props: {
+    permissions: {
+      type: Array,
+      required: true
+    },
+    isAdd: {
+      type: Boolean,
+      required: true
+    },
+    sup_this: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      loading: false, dialog: false,
+      form: { name: '', alias: '', pid: 0 },
+      rules: {
+        name: [
+          { required: true, message: '请输入名称', trigger: 'blur' }
+        ],
+        alias: [
+          { required: true, message: '请输入别名', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    cancel() {
+      this.resetForm()
+    },
+    doSubmit() {
+      this.$refs['form'].validate((valid) => {
+        if (valid) {
+          this.loading = true
+          if (this.isAdd) {
+            this.doAdd()
+          } else this.doEdit()
+        } else {
+          return false
+        }
+      })
+    },
+    doAdd() {
+      add(this.form).then(res => {
+        this.resetForm()
+        this.$notify({
+          title: '添加成功',
+          type: 'success',
+          duration: 2500
+        })
+        this.loading = false
+        setTimeout(() => {
+          this.$parent.$parent.init()
+          this.$parent.$parent.getPermissions()
+        }, 200)
+      }).catch(err => {
+        this.loading = false
+        console.log(err.response.data.message)
+      })
+    },
+    doEdit() {
+      edit(this.form).then(res => {
+        this.resetForm()
+        this.$notify({
+          title: '修改成功',
+          type: 'success',
+          duration: 2500
+        })
+        this.loading = false
+        setTimeout(() => {
+          this.sup_this.init()
+          this.sup_this.getPermissions()
+        }, 200)
+      }).catch(err => {
+        this.loading = false
+        console.log(err.response.data.message)
+      })
+    },
+    resetForm() {
+      this.dialog = false
+      this.$refs['form'].resetFields()
+      this.form = { name: '', alias: '', pid: 0 }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/system/permission/module/search.vue b/src/views/system/permission/module/header.vue
similarity index 57%
rename from src/views/system/permission/module/search.vue
rename to src/views/system/permission/module/header.vue
index c26fc52..d89183d 100644
--- a/src/views/system/permission/module/search.vue
+++ b/src/views/system/permission/module/header.vue
@@ -1,17 +1,27 @@
 <template>
   <div class="head-container">
+    <!-- 搜索 -->
     <el-input v-model="query.value" clearable placeholder="输入名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery"/>
     <el-button class="filter-item" size="mini" type="primary" icon="el-icon-search" @click="toQuery">搜索</el-button>
-    <add v-if="checkPermission(['ADMIN','PERMISSION_ALL','PERMISSION_CREATE'])" :permissions="permissions"/>
+    <!-- 新增 -->
+    <div style="display: inline-block;margin: 0px 2px;">
+      <el-button
+        v-if="checkPermission(['ADMIN','PERMISSION_ALL','PERMISSION_CREATE'])"
+        class="filter-item"
+        size="mini"
+        type="primary"
+        icon="el-icon-plus"
+        @click="$refs.form.dialog = true">新增</el-button>
+      <eForm ref="form" :permissions="permissions" :is-add="true"/>
+    </div>
   </div>
 </template>
 
 <script>
-import checkPermission from '@/utils/permission' // 权限判断函数
-import add from './add'
-// 查询条件
+import checkPermission from '@/utils/permission'
+import eForm from './form'
 export default {
-  components: { add },
+  components: { eForm },
   props: {
     query: {
       type: Object,
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
index f44f2c6..746c955 100644
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <search :permissions="permissions" :query="query"/>
+    <eHeader :permissions="permissions" :query="query"/>
     <!--表格渲染-->
     <el-table v-loading="loading" :data="data" size="small" border style="width: 100%;">
       <el-table-column prop="name" label="名称"/>
@@ -39,15 +39,15 @@
 </template>
 
 <script>
-import checkPermission from '@/utils/permission' // 权限判断函数
+import checkPermission from '@/utils/permission'
 import initData from '../../../mixins/initData'
 import { del } from '@/api/role'
 import { getPermissionTree } from '@/api/permission'
 import { parseTime } from '@/utils/index'
-import search from './module/search'
+import eHeader from './module/header'
 import edit from './module/edit'
 export default {
-  components: { search, edit },
+  components: { eHeader, edit },
   mixins: [initData],
   data() {
     return {
diff --git a/src/views/system/role/module/add.vue b/src/views/system/role/module/add.vue
deleted file mode 100644
index 64d575a..0000000
--- a/src/views/system/role/module/add.vue
+++ /dev/null
@@ -1,94 +0,0 @@
-<template>
-  <div>
-    <el-button class="filter-item" size="mini" type="primary" icon="el-icon-plus" @click="dialog = true">新增</el-button>
-    <el-dialog :visible.sync="dialog" :title="title" width="500px">
-      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="66px">
-        <el-form-item label="名称" prop="name">
-          <el-input v-model="form.name" style="width: 370px;"/>
-        </el-form-item>
-        <el-form-item label="权限">
-          <treeselect v-model="permissionIds" :multiple="true" :options="permissions" style="width: 370px;" placeholder="请选择权限" />
-        </el-form-item>
-        <el-form-item style="margin-top: -10px;" label="描述">
-          <el-input v-model="form.remark" style="width: 370px;" rows="5" type="textarea"/>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="text" @click="cancel">取消</el-button>
-        <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
-      </div>
-    </el-dialog>
-  </div>
-</template>
-<script>
-import { add } from '@/api/role'
-import Treeselect from '@riophae/vue-treeselect'
-import '@riophae/vue-treeselect/dist/vue-treeselect.css'
-export default {
-  components: { Treeselect },
-  props: {
-    permissions: {
-      type: Array,
-      required: true
-    }
-  },
-  data() {
-    return {
-      loading: false, dialog: false, title: '新增角色',
-      form: { name: '', permissions: [], remark: '' }, permissionIds: [],
-      rules: {
-        name: [
-          { required: true, message: '请输入名称', trigger: 'blur' }
-        ]
-      }
-    }
-  },
-  methods: {
-    cancel() {
-      this.resetForm()
-    },
-    doSubmit() {
-      this.$refs['form'].validate((valid) => {
-        if (valid) {
-          this.loading = true
-          this.form.permissions = []
-          const _this = this
-          this.permissionIds.forEach(function(data, index) {
-            const permission = { id: data }
-            _this.form.permissions.push(permission)
-          })
-          add(this.form).then(res => {
-            this.resetForm()
-            this.$notify({
-              title: '添加成功',
-              type: 'success',
-              duration: 2500
-            })
-            this.loading = false
-            this.$parent.$parent.init()
-          }).catch(err => {
-            this.loading = false
-            console.log(err.response.data.message)
-          })
-        } else {
-          return false
-        }
-      })
-    },
-    resetForm() {
-      this.dialog = false
-      this.$refs['form'].resetFields()
-      this.permissionIds = []
-      this.form = { name: '', permissions: [], remark: '' }
-    }
-  }
-}
-</script>
-
-<style scoped>
-  div{
-    display: inline-block;
-    margin-left: 5px;
-    margin-right: 5px;
-  }
-</style>
diff --git a/src/views/system/role/module/edit.vue b/src/views/system/role/module/edit.vue
index add70fb..aa68180 100644
--- a/src/views/system/role/module/edit.vue
+++ b/src/views/system/role/module/edit.vue
@@ -1,33 +1,13 @@
 <template>
   <div>
     <el-button :disabled="data.id === 1" size="mini" type="success" @click="to">编辑</el-button>
-    <el-dialog :visible.sync="dialog" :title="title" style="text-align: left" width="500px">
-      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="66px">
-        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="66px">
-          <el-form-item label="名称" prop="name">
-            <el-input v-model="form.name" style="width: 370px;"/>
-          </el-form-item>
-          <el-form-item label="权限">
-            <treeselect v-model="permissionIds" :multiple="true" :options="permissions" style="width: 370px;" placeholder="请选择权限" />
-          </el-form-item>
-          <el-form-item style="margin-top: -10px;" label="描述">
-            <el-input v-model="form.remark" rows="5" style="width: 370px;" type="textarea"/>
-          </el-form-item>
-        </el-form>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="text" @click="cancel">取消</el-button>
-        <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
-      </div>
-    </el-dialog>
+    <eForm ref="form" :permissions="permissions" :sup_this="sup_this" :is-add="false"/>
   </div>
 </template>
 <script>
-import { edit } from '@/api/role'
-import Treeselect from '@riophae/vue-treeselect'
-import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+import eForm from './form'
 export default {
-  components: { Treeselect },
+  components: { eForm },
   props: {
     data: {
       type: Object,
@@ -42,62 +22,15 @@ export default {
       required: true
     }
   },
-  data() {
-    return {
-      loading: false, dialog: false, title: '编辑角色',
-      form: { id: '', name: '', permissions: [], remark: '' }, permissionIds: [],
-      rules: {
-        name: [
-          { required: true, message: '请输入名称', trigger: 'blur' }
-        ]
-      }
-    }
-  },
   methods: {
     to() {
-      const _this = this
-      this.form = { id: this.data.id, name: this.data.name, remark: this.data.remark, permissions: [] }
+      const _this = this.$refs.form
+      _this.permissionIds = []
+      _this.form = { id: this.data.id, name: this.data.name, remark: this.data.remark, permissions: [] }
       this.data.permissions.forEach(function(data, index) {
         _this.permissionIds.push(data.id)
       })
-      this.dialog = true
-    },
-    cancel() {
-      this.resetForm()
-    },
-    doSubmit() {
-      this.$refs['form'].validate((valid) => {
-        if (valid) {
-          this.loading = true
-          this.form.permissions = []
-          const _this = this
-          this.permissionIds.forEach(function(data, index) {
-            const permission = { id: data }
-            _this.form.permissions.push(permission)
-          })
-          edit(this.form).then(res => {
-            this.resetForm()
-            this.$notify({
-              title: '修改成功',
-              type: 'success',
-              duration: 2500
-            })
-            this.loading = false
-            _this.sup_this.init()
-          }).catch(err => {
-            this.loading = false
-            console.log(err.response.data.message)
-          })
-        } else {
-          return false
-        }
-      })
-    },
-    resetForm() {
-      this.dialog = false
-      this.$refs['form'].resetFields()
-      this.permissionIds = []
-      this.form = { name: '', permissions: [], remark: '' }
+      _this.dialog = true
     }
   }
 }
diff --git a/src/views/system/role/module/form.vue b/src/views/system/role/module/form.vue
new file mode 100644
index 0000000..7e1153d
--- /dev/null
+++ b/src/views/system/role/module/form.vue
@@ -0,0 +1,116 @@
+<template>
+  <el-dialog :append-to-body="true" :visible.sync="dialog" :title="isAdd ? '新增角色' : '编辑角色'" width="500px">
+    <el-form ref="form" :model="form" :rules="rules" size="small" label-width="66px">
+      <el-form-item label="名称" prop="name">
+        <el-input v-model="form.name" style="width: 370px;"/>
+      </el-form-item>
+      <el-form-item label="权限">
+        <treeselect v-model="permissionIds" :multiple="true" :options="permissions" style="width: 370px;" placeholder="请选择权限" />
+      </el-form-item>
+      <el-form-item style="margin-top: -10px;" label="描述">
+        <el-input v-model="form.remark" style="width: 370px;" rows="5" type="textarea"/>
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="text" @click="cancel">取消</el-button>
+      <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { add, edit } from '@/api/role'
+import Treeselect from '@riophae/vue-treeselect'
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+export default {
+  components: { Treeselect },
+  props: {
+    permissions: {
+      type: Array,
+      required: true
+    },
+    isAdd: {
+      type: Boolean,
+      required: true
+    },
+    sup_this: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      loading: false, dialog: false,
+      form: { name: '', permissions: [], remark: '' }, permissionIds: [],
+      rules: {
+        name: [
+          { required: true, message: '请输入名称', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    cancel() {
+      this.resetForm()
+    },
+    doSubmit() {
+      this.$refs['form'].validate((valid) => {
+        if (valid) {
+          this.loading = true
+          this.form.permissions = []
+          const _this = this
+          this.permissionIds.forEach(function(data, index) {
+            const permission = { id: data }
+            _this.form.permissions.push(permission)
+          })
+          if (this.isAdd) {
+            this.doAdd()
+          } else this.doEdit()
+        } else {
+          return false
+        }
+      })
+    },
+    doAdd() {
+      add(this.form).then(res => {
+        this.resetForm()
+        this.$notify({
+          title: '添加成功',
+          type: 'success',
+          duration: 2500
+        })
+        this.loading = false
+        this.$parent.$parent.init()
+      }).catch(err => {
+        this.loading = false
+        console.log(err.response.data.message)
+      })
+    },
+    doEdit() {
+      edit(this.form).then(res => {
+        this.resetForm()
+        this.$notify({
+          title: '修改成功',
+          type: 'success',
+          duration: 2500
+        })
+        this.loading = false
+        this.sup_this.init()
+      }).catch(err => {
+        this.loading = false
+        console.log(err.response.data.message)
+      })
+    },
+    resetForm() {
+      this.dialog = false
+      this.$refs['form'].resetFields()
+      this.permissionIds = []
+      this.form = { name: '', permissions: [], remark: '' }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/system/role/module/search.vue b/src/views/system/role/module/header.vue
similarity index 77%
rename from src/views/system/role/module/search.vue
rename to src/views/system/role/module/header.vue
index c42ae7d..28a4163 100644
--- a/src/views/system/role/module/search.vue
+++ b/src/views/system/role/module/header.vue
@@ -1,8 +1,20 @@
 <template>
   <div class="head-container">
+    <!-- 搜索 -->
     <el-input v-model="query.value" clearable placeholder="输入名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery"/>
     <el-button class="filter-item" size="mini" type="primary" icon="el-icon-search" @click="toQuery">搜索</el-button>
-    <add v-if="checkPermission(['ADMIN','ROLE_ALL','ROLE_CREATE'])" :permissions="permissions"/>
+    <!-- 新增 -->
+    <div style="display: inline-block;margin: 0px 2px;">
+      <el-button
+        v-if="checkPermission(['ADMIN','ROLE_ALL','ROLE_CREATE'])"
+        class="filter-item"
+        size="mini"
+        type="primary"
+        icon="el-icon-plus"
+        @click="$refs.form.dialog = true">新增</el-button>
+      <eForm ref="form" :permissions="permissions" :is-add="true"/>
+    </div>
+    <!-- 导出 -->
     <el-button v-if="checkPermission(['ADMIN'])" :loading="downloadLoading" size="mini" class="filter-item" type="primary" icon="el-icon-download" @click="download">导出</el-button>
   </div>
 </template>
@@ -10,10 +22,10 @@
 <script>
 import checkPermission from '@/utils/permission' // 权限判断函数
 import { parseTime } from '@/utils/index'
-import add from './add'
+import eForm from './form'
 // 查询条件
 export default {
-  components: { add },
+  components: { eForm },
   props: {
     query: {
       type: Object,
@@ -32,7 +44,6 @@ export default {
   methods: {
     checkPermission,
     toQuery() {
-      console.log(this.query)
       this.$parent.page = 0
       this.$parent.init()
     },
diff --git a/src/views/system/user/center.vue b/src/views/system/user/center.vue
index 6a7c7ff..080bc0e 100644
--- a/src/views/system/user/center.vue
+++ b/src/views/system/user/center.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <div id="content-main" :style="'width:'+width">
+    <div id="content-main" style="width:600px;">
       <el-card shadow="never" class="box-card user-info">
         <div class="avatar-content">
           <el-upload
@@ -54,7 +54,6 @@ export default {
   components: { updatePass, updateEmail },
   data() {
     return {
-      width: document.documentElement.clientWidth - 180 + 'px;',
       headers: {
         'Authorization': 'Bearer ' + getToken()
       }
@@ -95,78 +94,5 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss">
-.box-card{
-  border: 0px;
-  border-bottom: 1px solid #ECEDFE;
-  border-radius: unset;
-  h4{
-    height: 26px;
-    margin: 0 0 7px;
-    line-height: 26px;
-    font-size: 1.1rem;
-    font-weight: 500;
-    color: #444242;
-    display: inline-block;
-  }
-  p{
-    font-family: Lantinghei;
-    font-size: 90%;
-    color: #747474;
-  }
-  ul{
-    padding: 0;
-    margin: 7px 0 0;
-    list-style: none;
-    font-size: 80%;
-  }
-  li {
-    float: left;
-    margin: 0 30px 10px 0!important;
-  }
-  li:before {
-    width: 8px;
-    height: 8px;
-    background-color: #52acd9;
-    color: #52acd9;
-    display: inline-block;
-    border-radius: 50%;
-    margin-right: 5px;
-    content: '';
-    box-sizing: border-box;
-  }
-}
-
-.user-info{
-  height: 170px;
-}
-
-.reset-email{
-  border-bottom: 0px;
-}
-
-.avatar-content, .user-info-content {
-  float: left;
-}
-.user-info-content{
-  font-family: Lantinghei;
-  position: relative;
-  font-size: 14px;
-  margin: 25px;
-  div{
-    margin-bottom: 15px;
-  }
-}
-.avatar-uploader-icon {
-  font-size: 28px;
-  width: 120px;
-  height: 120px;
-  line-height: 120px;
-  text-align: center;
-}
-.avatar {
-  width: 120px;
-  height: 120px;
-  display: block;
-  border-radius: 50%;
-}
+  .box-card{border:0;border-bottom:1px solid #ECEDFE;border-radius:unset;h4{height:26px;margin:0 0 7px;line-height:26px;font-size:1.1rem;font-weight:500;color:#444242;display:inline-block}p{font-family:Lantinghei;font-size:90%;color:#747474}ul{padding:0;margin:7px 0 0;list-style:none;font-size:80%}li{float:left;margin:0 30px 10px 0!important}li:before{width:8px;height:8px;background-color:#52acd9;color:#52acd9;display:inline-block;border-radius:50%;margin-right:5px;content:'';box-sizing:border-box}}.user-info{height:170px}.reset-email{border-bottom:0}.avatar-content,.user-info-content{float:left}.user-info-content{font-family:Lantinghei;position:relative;font-size:14px;margin:25px;div{margin-bottom:15px}}.avatar-uploader-icon{font-size:28px;width:120px;height:120px;line-height:120px;text-align:center}.avatar{width:120px;height:120px;display:block;border-radius:50%}
 </style>
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index 2a3bbde..e2370b1 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <search :roles="roles" :query="query"/>
+    <eHeader :roles="roles" :query="query"/>
     <!--表格渲染-->
     <el-table v-loading="loading" :data="data" size="small" border style="width: 100%;">
       <el-table-column prop="username" label="用户名"/>
@@ -49,15 +49,15 @@
 </template>
 
 <script>
-import checkPermission from '@/utils/permission' // 权限判断函数
+import checkPermission from '@/utils/permission'
 import initData from '../../../mixins/initData'
 import { del } from '@/api/user'
 import { getRoleTree } from '@/api/role'
 import { parseTime } from '@/utils/index'
-import search from './module/search'
+import eHeader from './module/header'
 import edit from './module/edit'
 export default {
-  components: { search, edit },
+  components: { eHeader, edit },
   mixins: [initData],
   data() {
     return {
diff --git a/src/views/system/user/module/add.vue b/src/views/system/user/module/add.vue
deleted file mode 100644
index 710d732..0000000
--- a/src/views/system/user/module/add.vue
+++ /dev/null
@@ -1,107 +0,0 @@
-<template>
-  <div>
-    <el-button class="filter-item" size="mini" type="primary" icon="el-icon-plus" @click="dialog = true">新增</el-button>
-    <el-dialog :visible.sync="dialog" :title="title" width="500px">
-      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="66px">
-        <el-form-item label="用户名" prop="username">
-          <el-input v-model="form.username" style="width: 370px;"/>
-        </el-form-item>
-        <el-form-item label="邮箱" prop="email">
-          <el-input v-model="form.email" style="width: 370px;"/>
-        </el-form-item>
-        <el-form-item label="状态" prop="enabled">
-          <el-radio v-model="form.enabled" label="true">激活</el-radio>
-          <el-radio v-model="form.enabled" label="false" >锁定</el-radio>
-        </el-form-item>
-        <el-form-item style="margin-bottom: 0px;" label="角色">
-          <treeselect v-model="roleIds" :multiple="true" :options="roles" style="width: 370px;" placeholder="请选择角色" />
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="text" @click="cancel">取消</el-button>
-        <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
-      </div>
-    </el-dialog>
-  </div>
-</template>
-<script>
-import { add } from '@/api/user'
-import Treeselect from '@riophae/vue-treeselect'
-import '@riophae/vue-treeselect/dist/vue-treeselect.css'
-export default {
-  components: { Treeselect },
-  props: {
-    roles: {
-      type: Array,
-      required: true
-    }
-  },
-  data() {
-    return {
-      loading: false, dialog: false, title: '新增用户',
-      form: { username: '', email: '', enabled: 'false', roles: [] }, roleIds: [],
-      rules: {
-        username: [
-          { required: true, message: '请输入用户名', trigger: 'blur' },
-          { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
-        ],
-        email: [
-          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
-          { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
-        ],
-        enabled: [
-          { required: true, message: '状态不能为空', trigger: 'blur' }
-        ]
-      }
-    }
-  },
-  methods: {
-    cancel() {
-      this.resetForm()
-    },
-    doSubmit() {
-      this.$refs['form'].validate((valid) => {
-        if (valid) {
-          this.loading = true
-          this.form.roles = []
-          const _this = this
-          this.roleIds.forEach(function(data, index) {
-            const role = { id: data }
-            _this.form.roles.push(role)
-          })
-          add(this.form).then(res => {
-            this.resetForm()
-            this.$notify({
-              title: '添加成功',
-              message: '默认密码：123456',
-              type: 'success',
-              duration: 2500
-            })
-            this.loading = false
-            this.$parent.$parent.init()
-          }).catch(err => {
-            this.loading = false
-            console.log(err.response.data.message)
-          })
-        } else {
-          return false
-        }
-      })
-    },
-    resetForm() {
-      this.dialog = false
-      this.$refs['form'].resetFields()
-      this.roleIds = []
-      this.form = { username: '', email: '', enabled: 'false', roles: [] }
-    }
-  }
-}
-</script>
-
-<style scoped>
-  div{
-    display: inline-block;
-    margin-left: 5px;
-    margin-right: 5px;
-  }
-</style>
diff --git a/src/views/system/user/module/edit.vue b/src/views/system/user/module/edit.vue
index 974acb1..0bdd21d 100644
--- a/src/views/system/user/module/edit.vue
+++ b/src/views/system/user/module/edit.vue
@@ -1,35 +1,13 @@
 <template>
   <div>
     <el-button :disabled="data.id === 1" size="mini" type="success" @click="to">编辑</el-button>
-    <el-dialog :visible.sync="dialog" :close-on-click-modal="false" :title="title" style="text-align: left" width="500px">
-      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="66px">
-        <el-form-item label="用户名" prop="username">
-          <el-input v-model="form.username" style="width: 370px;"/>
-        </el-form-item>
-        <el-form-item label="邮箱" prop="email">
-          <el-input v-model="form.email" style="width: 370px;"/>
-        </el-form-item>
-        <el-form-item label="状态" prop="enabled">
-          <el-radio v-model="form.enabled" label="true">激活</el-radio>
-          <el-radio v-model="form.enabled" label="false" >锁定</el-radio>
-        </el-form-item>
-        <el-form-item style="margin-bottom: 0px;" label="角色">
-          <treeselect v-model="roleIds" :multiple="true" :options="roles" style="width: 370px;" placeholder="请选择角色" />
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="text" @click="cancel">取消</el-button>
-        <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
-      </div>
-    </el-dialog>
+    <eForm ref="form" :roles="roles" :sup_this="sup_this" :is-add="false"/>
   </div>
 </template>
 <script>
-import { edit } from '@/api/user'
-import Treeselect from '@riophae/vue-treeselect'
-import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+import eForm from './form'
 export default {
-  components: { Treeselect },
+  components: { eForm },
   props: {
     roles: {
       type: Array,
@@ -39,83 +17,26 @@ export default {
       type: Object,
       required: true
     },
+    // index.vue 的this 可用于刷新数据
     sup_this: {
       type: Object,
       required: true
     }
   },
-  data() {
-    return {
-      loading: false, dialog: false, title: '编辑用户',
-      form: { id: '', username: '', email: '', enabled: '', roles: [] }, roleIds: [],
-      rules: {
-        username: [
-          { required: true, message: '请输入用户名', trigger: 'blur' },
-          { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
-        ],
-        email: [
-          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
-          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
-        ],
-        enabled: [
-          { required: true, message: '状态不能为空', trigger: 'blur' }
-        ]
-      }
-    }
-  },
   methods: {
     to() {
-      const _this = this
-      this.form = { id: this.data.id, username: this.data.username, email: this.data.email, enabled: this.data.enabled.toString(), roles: [] }
+      const _this = this.$refs.form
+      _this.roleIds = []
+      _this.form = { id: this.data.id, username: this.data.username, email: this.data.email, enabled: this.data.enabled.toString(), roles: [] }
       this.data.roles.forEach(function(data, index) {
         _this.roleIds.push(data.id)
       })
-      this.dialog = true
-    },
-    cancel() {
-      this.resetForm()
-    },
-    doSubmit() {
-      this.$refs['form'].validate((valid) => {
-        if (valid) {
-          this.loading = true
-          this.form.roles = []
-          const _this = this
-          this.roleIds.forEach(function(data, index) {
-            const role = { id: data }
-            _this.form.roles.push(role)
-          })
-          edit(this.form).then(res => {
-            this.resetForm()
-            this.$notify({
-              title: '修改成功',
-              type: 'success',
-              duration: 2500
-            })
-            this.loading = false
-            _this.sup_this.init()
-          }).catch(err => {
-            this.loading = false
-            console.log(err.response.data.message)
-          })
-        } else {
-          return false
-        }
-      })
-    },
-    resetForm() {
-      this.dialog = false
-      this.$refs['form'].resetFields()
-      this.roleIds = []
-      this.form = { id: '', username: '', email: '', enabled: '', roles: [] }
+      _this.dialog = true
     }
   }
 }
 </script>
 
 <style scoped>
-  div{
-    display: inline-block;
-    margin-right: 3px;
-  }
+  div{display: inline-block;margin-right: 3px;}
 </style>
diff --git a/src/views/system/user/module/form.vue b/src/views/system/user/module/form.vue
new file mode 100644
index 0000000..3f436b4
--- /dev/null
+++ b/src/views/system/user/module/form.vue
@@ -0,0 +1,129 @@
+<template>
+  <el-dialog :append-to-body="true" :visible.sync="dialog" :title="isAdd ? '新增用户' : '编辑用户'" width="500px">
+    <el-form ref="form" :model="form" :rules="rules" size="small" label-width="66px">
+      <el-form-item label="用户名" prop="username">
+        <el-input v-model="form.username" style="width: 370px;"/>
+      </el-form-item>
+      <el-form-item label="邮箱" prop="email">
+        <el-input v-model="form.email" style="width: 370px;"/>
+      </el-form-item>
+      <el-form-item label="状态" prop="enabled">
+        <el-radio v-model="form.enabled" label="true">激活</el-radio>
+        <el-radio v-model="form.enabled" label="false" >锁定</el-radio>
+      </el-form-item>
+      <el-form-item style="margin-bottom: 0px;" label="角色">
+        <treeselect v-model="roleIds" :multiple="true" :options="roles" style="width: 370px;" placeholder="请选择角色" />
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="text" @click="cancel">取消</el-button>
+      <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { add, edit } from '@/api/user'
+import Treeselect from '@riophae/vue-treeselect'
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+export default {
+  name: 'Form',
+  components: { Treeselect },
+  props: {
+    roles: {
+      type: Array,
+      required: true
+    },
+    isAdd: {
+      type: Boolean,
+      required: true
+    },
+    sup_this: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      dialog: false, loading: false, form: { username: '', email: '', enabled: 'false', roles: [] }, roleIds: [],
+      rules: {
+        username: [
+          { required: true, message: '请输入用户名', trigger: 'blur' },
+          { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
+        ],
+        email: [
+          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
+          { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
+        ],
+        enabled: [
+          { required: true, message: '状态不能为空', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    cancel() {
+      this.resetForm()
+    },
+    doSubmit() {
+      this.$refs['form'].validate((valid) => {
+        if (valid) {
+          this.loading = true
+          this.form.roles = []
+          const _this = this
+          this.roleIds.forEach(function(data, index) {
+            const role = { id: data }
+            _this.form.roles.push(role)
+          })
+          if (this.isAdd) {
+            this.doAdd()
+          } else this.doEdit()
+        } else {
+          return false
+        }
+      })
+    },
+    doAdd() {
+      add(this.form).then(res => {
+        this.resetForm()
+        this.$notify({
+          title: '添加成功',
+          message: '默认密码：123456',
+          type: 'success',
+          duration: 2500
+        })
+        this.loading = false
+        this.$parent.$parent.init()
+      }).catch(err => {
+        this.loading = false
+        console.log(err.response.data.message)
+      })
+    },
+    doEdit() {
+      edit(this.form).then(res => {
+        this.resetForm()
+        this.$notify({
+          title: '修改成功',
+          type: 'success',
+          duration: 2500
+        })
+        this.loading = false
+        this.sup_this.init()
+      }).catch(err => {
+        this.loading = false
+        console.log(err.response.data.message)
+      })
+    },
+    resetForm() {
+      this.dialog = false
+      this.$refs['form'].resetFields()
+      this.roleIds = []
+      this.form = { username: '', email: '', enabled: 'false', roles: [] }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/system/user/module/search.vue b/src/views/system/user/module/header.vue
similarity index 76%
rename from src/views/system/user/module/search.vue
rename to src/views/system/user/module/header.vue
index 7248d16..f038cb4 100644
--- a/src/views/system/user/module/search.vue
+++ b/src/views/system/user/module/header.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="head-container">
+    <!-- 搜索 -->
     <el-input v-model="query.value" clearable placeholder="输入关键字搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery"/>
     <el-select v-model="query.type" clearable placeholder="类型" class="filter-item" style="width: 130px">
       <el-option v-for="item in queryTypeOptions" :key="item.key" :label="item.display_name" :value="item.key"/>
@@ -8,18 +9,36 @@
       <el-option v-for="item in enabledTypeOptions" :key="item.key" :label="item.display_name" :value="item.key"/>
     </el-select>
     <el-button class="filter-item" size="mini" type="primary" icon="el-icon-search" @click="toQuery">搜索</el-button>
-    <add v-if="checkPermission(['ADMIN','USER_ALL','USER_CREATE'])" :roles="roles"/>
-    <el-button v-if="checkPermission(['ADMIN'])" :loading="downloadLoading" size="mini" class="filter-item" type="primary" icon="el-icon-download" @click="download">导出</el-button>
+    <!-- 新增 -->
+    <div style="display: inline-block;margin: 0px 2px;">
+      <el-button
+        v-if="checkPermission(['ADMIN','USER_ALL','USER_CREATE'])"
+        class="filter-item"
+        size="mini"
+        type="primary"
+        icon="el-icon-plus"
+        @click="$refs.form.dialog = true">新增</el-button>
+      <eForm ref="form" :roles="roles" :is-add="true"/>
+    </div>
+    <!-- 导出 -->
+    <el-button
+      v-if="checkPermission(['ADMIN'])"
+      :loading="downloadLoading"
+      size="mini"
+      class="filter-item"
+      type="primary"
+      icon="el-icon-download"
+      @click="download">导出</el-button>
   </div>
 </template>
 
 <script>
 import checkPermission from '@/utils/permission' // 权限判断函数
 import { parseTime } from '@/utils/index'
-import add from './add'
+import eForm from './form'
 // 查询条件
 export default {
-  components: { add },
+  components: { eForm },
   props: {
     roles: {
       type: Array,
@@ -45,10 +64,12 @@ export default {
   },
   methods: {
     checkPermission,
+    // 去查询
     toQuery() {
       this.$parent.page = 0
       this.$parent.init()
     },
+    // 导出
     download() {
       this.downloadLoading = true
       import('@/vendor/Export2Excel').then(excel => {
@@ -63,6 +84,7 @@ export default {
         this.downloadLoading = false
       })
     },
+    // 数据转换
     formatJson(filterVal, jsonData) {
       return jsonData.map(v => filterVal.map(j => {
         if (j === 'createTime' || j === 'lastPasswordResetTime') {
diff --git a/src/views/tools/picture/index.vue b/src/views/tools/picture/index.vue
index 7375c30..1fed09e 100644
--- a/src/views/tools/picture/index.vue
+++ b/src/views/tools/picture/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <search :query="query"/>
+    <eHeader :query="query"/>
     <!--表格渲染-->
     <el-table v-loading="loading" :data="data" size="small" border style="width: 100%;">
       <el-table-column prop="filename" label="文件名"/>
@@ -50,9 +50,9 @@ import checkPermission from '@/utils/permission' // 权限判断函数
 import initData from '../../../mixins/initData'
 import { del } from '@/api/picture'
 import { parseTime } from '@/utils/index'
-import search from './module/search'
+import eHeader from './module/header'
 export default {
-  components: { search },
+  components: { eHeader },
   mixins: [initData],
   data() {
     return {
diff --git a/src/views/tools/picture/module/add.vue b/src/views/tools/picture/module/form.vue
similarity index 61%
rename from src/views/tools/picture/module/add.vue
rename to src/views/tools/picture/module/form.vue
index d5a3f1c..e5b1cf6 100644
--- a/src/views/tools/picture/module/add.vue
+++ b/src/views/tools/picture/module/form.vue
@@ -1,27 +1,25 @@
 <template>
-  <div>
-    <el-button class="filter-item" size="mini" type="primary" icon="el-icon-upload" @click="dialog = true">上传图片</el-button>
-    <el-dialog :visible.sync="dialog" width="600px" @close="doSubmit">
-      <el-upload
-        :on-preview="handlePictureCardPreview"
-        :before-remove="handleBeforeRemove"
-        :on-success="handleSuccess"
-        :on-error="handleError"
-        :headers="headers"
-        :file-list="fileList"
-        :action="imagesUploadApi"
-        list-type="picture-card">
-        <i class="el-icon-plus"/>
-      </el-upload>
-      <el-dialog :visible.sync="dialogVisible">
-        <img :src="dialogImageUrl" width="100%" alt="">
-      </el-dialog>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="doSubmit">确认</el-button>
-      </div>
+  <el-dialog :visible.sync="dialog" width="600px" @close="doSubmit">
+    <el-upload
+      :on-preview="handlePictureCardPreview"
+      :before-remove="handleBeforeRemove"
+      :on-success="handleSuccess"
+      :on-error="handleError"
+      :headers="headers"
+      :file-list="fileList"
+      :action="imagesUploadApi"
+      list-type="picture-card">
+      <i class="el-icon-plus"/>
+    </el-upload>
+    <el-dialog :visible.sync="dialogVisible">
+      <img :src="dialogImageUrl" width="100%" alt="">
     </el-dialog>
-  </div>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="doSubmit">确认</el-button>
+    </div>
+  </el-dialog>
 </template>
+
 <script>
 import { mapGetters } from 'vuex'
 import { del } from '@/api/picture'
@@ -84,9 +82,5 @@ export default {
 </script>
 
 <style scoped>
-  div{
-    display: inline-block;
-    margin-left: 5px;
-    margin-right: 5px;
-  }
+
 </style>
diff --git a/src/views/tools/picture/module/search.vue b/src/views/tools/picture/module/header.vue
similarity index 59%
rename from src/views/tools/picture/module/search.vue
rename to src/views/tools/picture/module/header.vue
index 5e8a1e5..859c878 100644
--- a/src/views/tools/picture/module/search.vue
+++ b/src/views/tools/picture/module/header.vue
@@ -1,17 +1,28 @@
 <template>
   <div class="head-container">
+    <!--搜索-->
     <el-input v-model="query.value" clearable placeholder="输入文件名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery"/>
     <el-button class="filter-item" size="mini" type="primary" icon="el-icon-search" @click="toQuery">搜索</el-button>
-    <add v-if="checkPermission(['ADMIN','PICTURE_ALL','PICTURE_UPLOAD'])"/>
+    <!-- 上传 -->
+    <div style="display: inline-block;margin: 0px 2px;">
+      <el-button
+        v-if="checkPermission(['ADMIN','PICTURE_ALL','PICTURE_UPLOAD'])"
+        class="filter-item"
+        size="mini"
+        type="primary"
+        icon="el-icon-upload"
+        @click="$refs.form.dialog = true">上传图片</el-button>
+      <eForm ref="form"/>
+    </div>
   </div>
 </template>
 
 <script>
 import checkPermission from '@/utils/permission' // 权限判断函数
-import add from './add'
+import eForm from './form'
 // 查询条件
 export default {
-  components: { add },
+  components: { eForm },
   props: {
     query: {
       type: Object,
diff --git a/src/views/tools/qiniu/module/list.vue b/src/views/tools/qiniu/module/list.vue
index a656f53..426604f 100644
--- a/src/views/tools/qiniu/module/list.vue
+++ b/src/views/tools/qiniu/module/list.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <search :query="query"/>
+    <eHeader :query="query"/>
     <!--表格渲染-->
     <el-table v-loading="loading" :data="data" size="small" border style="width: 100%;">
       <el-table-column :show-overflow-tooltip="true" prop="key" label="文件名"/>
@@ -53,9 +53,9 @@ import checkPermission from '@/utils/permission' // 权限判断函数
 import initData from '../../../../mixins/initData'
 import { del, download } from '@/api/qiniu'
 import { parseTime } from '@/utils/index'
-import search from './module/search'
+import eHeader from './module/header'
 export default {
-  components: { search },
+  components: { eHeader },
   mixins: [initData],
   data() {
     return {
diff --git a/src/views/tools/qiniu/module/module/add.vue b/src/views/tools/qiniu/module/module/form.vue
similarity index 59%
rename from src/views/tools/qiniu/module/module/add.vue
rename to src/views/tools/qiniu/module/module/form.vue
index 954c98f..bc78b41 100644
--- a/src/views/tools/qiniu/module/module/add.vue
+++ b/src/views/tools/qiniu/module/module/form.vue
@@ -1,25 +1,23 @@
 <template>
-  <div>
-    <el-button class="filter-item" size="mini" type="primary" icon="el-icon-upload" @click="dialog = true">上传文件</el-button>
-    <el-dialog :visible.sync="dialog" width="400px" @close="doSubmit">
-      <el-upload
-        :before-remove="handleBeforeRemove"
-        :on-success="handleSuccess"
-        :on-error="handleError"
-        :file-list="fileList"
-        :headers="headers"
-        :action="qiNiuUploadApi"
-        class="upload-demo"
-        multiple>
-        <el-button size="small" type="primary">点击上传</el-button>
-        <div slot="tip" style="display: block;width: 330px" class="el-upload__tip">请勿上传违法文件，且文件不超过5M</div>
-      </el-upload>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="doSubmit">确认</el-button>
-      </div>
-    </el-dialog>
-  </div>
+  <el-dialog :visible.sync="dialog" width="500px" @close="doSubmit">
+    <el-upload
+      :before-remove="handleBeforeRemove"
+      :on-success="handleSuccess"
+      :on-error="handleError"
+      :file-list="fileList"
+      :headers="headers"
+      :action="qiNiuUploadApi"
+      class="upload-demo"
+      multiple>
+      <el-button size="small" type="primary">点击上传</el-button>
+      <div slot="tip" style="display: block;" class="el-upload__tip">请勿上传违法文件，且文件不超过5M</div>
+    </el-upload>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="doSubmit">确认</el-button>
+    </div>
+  </el-dialog>
 </template>
+
 <script>
 import { mapGetters } from 'vuex'
 import { del } from '@/api/qiniu'
@@ -82,9 +80,5 @@ export default {
 </script>
 
 <style scoped>
-  div{
-    display: inline-block;
-    margin-left: 5px;
-    margin-right: 5px;
-  }
+
 </style>
diff --git a/src/views/tools/qiniu/module/module/search.vue b/src/views/tools/qiniu/module/module/header.vue
similarity index 77%
rename from src/views/tools/qiniu/module/module/search.vue
rename to src/views/tools/qiniu/module/module/header.vue
index 9fcd3ee..21f9d5f 100644
--- a/src/views/tools/qiniu/module/module/search.vue
+++ b/src/views/tools/qiniu/module/module/header.vue
@@ -1,18 +1,29 @@
 <template>
   <div class="head-container">
+    <!-- 搜索 -->
     <el-input v-model="query.value" clearable placeholder="输入文件名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery"/>
     <el-button class="filter-item" size="mini" type="primary" icon="el-icon-search" @click="toQuery">搜索</el-button>
-    <add/>
+    <!-- 上传 -->
+    <div style="display: inline-block;margin: 0px 2px;">
+      <el-button
+        class="filter-item"
+        size="mini"
+        type="primary"
+        icon="el-icon-upload"
+        @click="$refs.form.dialog = true">上传文件</el-button>
+      <eForm ref="form"/>
+    </div>
+    <!-- 同步 -->
     <el-button :icon="icon" class="filter-item" size="mini" type="primary" @click="synchronize">{{ buttonName }}</el-button>
   </div>
 </template>
 
 <script>
-import add from './add'
+import eForm from './form'
 import { sync } from '@/api/qiniu'
 // 查询条件
 export default {
-  components: { add },
+  components: { eForm },
   props: {
     query: {
       type: Object,