修改新增和编辑为页面

src/App.vue

@@ -8,3 +8,15 @@
   export default {
   }
 </script>
+
+<style>
+.dialog-footer{
+  display: block;
+  text-align: center;
+  padding-top: 20px;
+}
+.my-title{
+  font-size: 18px;
+  padding-bottom: 20px;
+}
+</style>

src/views/modules/job/schedule-add-or-update.vue

@@ -1,27 +1,30 @@
 <template>
-  <el-dialog
+  <!-- <el-dialog
     :title="!dataForm.id ? '新增' : '修改'"
     :close-on-click-modal="false"
-    :visible.sync="visible">
-    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="100px">
-      <el-form-item label="bean名称" prop="beanName">
-        <el-input v-model="dataForm.beanName" placeholder="spring bean名称, 如: testTask"></el-input>
-      </el-form-item>
-      <el-form-item label="参数" prop="params">
-        <el-input v-model="dataForm.params" placeholder="参数"></el-input>
-      </el-form-item>
-      <el-form-item label="cron表达式" prop="cronExpression">
-        <el-input v-model="dataForm.cronExpression" placeholder="如: 0 0 12 * * ?"></el-input>
-      </el-form-item>
-      <el-form-item label="备注" prop="remark">
-        <el-input v-model="dataForm.remark" placeholder="备注"></el-input>
-      </el-form-item>
-    </el-form>
-    <span slot="footer" class="dialog-footer">
-      <el-button @click="visible = false">取消</el-button>
-      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
-    </span>
-  </el-dialog>
+    :visible.sync="visible"> -->
+    <div>
+      <div class="my-title">{{ !dataForm.id ? '新增' : '修改' }}</div>
+      <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="100px">
+        <el-form-item label="bean名称" prop="beanName">
+          <el-input v-model="dataForm.beanName" placeholder="spring bean名称, 如: testTask"></el-input>
+        </el-form-item>
+        <el-form-item label="参数" prop="params">
+          <el-input v-model="dataForm.params" placeholder="参数"></el-input>
+        </el-form-item>
+        <el-form-item label="cron表达式" prop="cronExpression">
+          <el-input v-model="dataForm.cronExpression" placeholder="如: 0 0 12 * * ?"></el-input>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="dataForm.remark" placeholder="备注"></el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="onChose">取消</el-button>
+        <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
+      </span>
+    </div>
+  <!-- </el-dialog> -->
 </template>
 
 <script>
@@ -70,6 +73,9 @@
           }
         })
       },
+      onChose () {
+        this.$emit('onChose')
+      },
       // 表单提交
       dataFormSubmit () {
         this.$refs['dataForm'].validate((valid) => {
@@ -92,7 +98,7 @@
                   type: 'success',
                   duration: 1500,
                   onClose: () => {
-                    this.visible = false
+                    this.onChose()
                     this.$emit('refreshDataList')
                   }
                 })

src/views/modules/job/schedule.vue

@@ -1,107 +1,109 @@
 <template>
   <div class="mod-schedule">
-    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
-      <el-form-item>
-        <el-input v-model="dataForm.beanName" placeholder="bean名称" clearable></el-input>
-      </el-form-item>
-      <el-form-item>
-        <el-button @click="getDataList()">查询</el-button>
-        <el-button v-if="isAuth('sys:schedule:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
-        <el-button v-if="isAuth('sys:schedule:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
-        <el-button v-if="isAuth('sys:schedule:pause')" type="danger" @click="pauseHandle()" :disabled="dataListSelections.length <= 0">批量暂停</el-button>
-        <el-button v-if="isAuth('sys:schedule:resume')" type="danger" @click="resumeHandle()" :disabled="dataListSelections.length <= 0">批量恢复</el-button>
-        <el-button v-if="isAuth('sys:schedule:run')" type="danger" @click="runHandle()" :disabled="dataListSelections.length <= 0">批量立即执行</el-button>
-        <el-button v-if="isAuth('sys:schedule:log')" type="success" @click="logHandle()">日志列表</el-button>
-      </el-form-item>
-    </el-form>
-    <el-table
-      :data="dataList"
-      border
-      v-loading="dataListLoading"
-      @selection-change="selectionChangeHandle"
-      style="width: 100%;">
-      <el-table-column
-        type="selection"
-        header-align="center"
-        align="center"
-        width="50">
-      </el-table-column>
-      <el-table-column
-        prop="jobId"
-        header-align="center"
-        align="center"
-        min-width="100"
-        :show-tooltip-when-overflow="true"
-        label="ID">
-      </el-table-column>
-      <el-table-column
-        prop="beanName"
-        header-align="center"
-        align="center"
-        min-width="120"
-        :show-tooltip-when-overflow="true"
-        label="bean名称">
-      </el-table-column>
-      <el-table-column
-        prop="params"
-        header-align="center"
-        align="center"
-        min-width="160"
-        :show-tooltip-when-overflow="true"
-        label="参数">
-      </el-table-column>
-      <el-table-column
-        prop="cronExpression"
-        header-align="center"
-        align="center"
-        min-width="100"
-        :show-tooltip-when-overflow="true"
-        label="cron表达式">
-      </el-table-column>
-      <el-table-column
-        prop="remark"
-        header-align="center"
-        align="center"
-        min-width="180"
-        :show-tooltip-when-overflow="true"
-        label="备注">
-      </el-table-column>
-      <el-table-column
-        prop="status"
-        header-align="center"
-        align="center"
-        label="状态">
-        <template slot-scope="scope">
-          <el-tag v-if="Number(scope.row.status) === 0" size="small">正常</el-tag>
-          <el-tag v-else size="small" type="danger">暂停</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column
-        fixed="right"
-        header-align="center"
-        align="center"
-        width="250"
-        label="操作">
-        <template slot-scope="scope">
-          <el-button v-if="isAuth('sys:schedule:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.jobId)">修改</el-button>
-          <el-button v-if="isAuth('sys:schedule:delete')" type="text" size="small" @click="deleteHandle(scope.row.jobId)">删除</el-button>
-          <el-button v-if="isAuth('sys:schedule:pause')" type="text" size="small" @click="pauseHandle(scope.row.jobId)">暂停</el-button>
-          <el-button v-if="isAuth('sys:schedule:resume')" type="text" size="small" @click="resumeHandle(scope.row.jobId)">恢复</el-button>
-          <el-button v-if="isAuth('sys:schedule:run')" type="text" size="small" @click="runHandle(scope.row.jobId)">立即执行</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <el-pagination
-      @size-change="sizeChangeHandle"
-      @current-change="currentChangeHandle"
-      :current-page="pageIndex"
-      :page-sizes="[10, 20, 50, 100]"
-      :page-size="pageSize"
-      :total="totalPage"
-      layout="total, sizes, prev, pager, next, jumper">
-    </el-pagination>
+    <template v-if="!addOrUpdateVisible">
+      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+        <el-form-item>
+          <el-input v-model="dataForm.beanName" placeholder="bean名称" clearable></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="getDataList()">查询</el-button>
+          <el-button v-if="isAuth('sys:schedule:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
+          <el-button v-if="isAuth('sys:schedule:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
+          <el-button v-if="isAuth('sys:schedule:pause')" type="danger" @click="pauseHandle()" :disabled="dataListSelections.length <= 0">批量暂停</el-button>
+          <el-button v-if="isAuth('sys:schedule:resume')" type="danger" @click="resumeHandle()" :disabled="dataListSelections.length <= 0">批量恢复</el-button>
+          <el-button v-if="isAuth('sys:schedule:run')" type="danger" @click="runHandle()" :disabled="dataListSelections.length <= 0">批量立即执行</el-button>
+          <el-button v-if="isAuth('sys:schedule:log')" type="success" @click="logHandle()">日志列表</el-button>
+        </el-form-item>
+      </el-form>
+      <el-table
+        :data="dataList"
+        border
+        v-loading="dataListLoading"
+        @selection-change="selectionChangeHandle"
+        style="width: 100%;">
+        <el-table-column
+          type="selection"
+          header-align="center"
+          align="center"
+          width="50">
+        </el-table-column>
+        <el-table-column
+          prop="jobId"
+          header-align="center"
+          align="center"
+          min-width="100"
+          :show-tooltip-when-overflow="true"
+          label="ID">
+        </el-table-column>
+        <el-table-column
+          prop="beanName"
+          header-align="center"
+          align="center"
+          min-width="120"
+          :show-tooltip-when-overflow="true"
+          label="bean名称">
+        </el-table-column>
+        <el-table-column
+          prop="params"
+          header-align="center"
+          align="center"
+          min-width="160"
+          :show-tooltip-when-overflow="true"
+          label="参数">
+        </el-table-column>
+        <el-table-column
+          prop="cronExpression"
+          header-align="center"
+          align="center"
+          min-width="100"
+          :show-tooltip-when-overflow="true"
+          label="cron表达式">
+        </el-table-column>
+        <el-table-column
+          prop="remark"
+          header-align="center"
+          align="center"
+          min-width="180"
+          :show-tooltip-when-overflow="true"
+          label="备注">
+        </el-table-column>
+        <el-table-column
+          prop="status"
+          header-align="center"
+          align="center"
+          label="状态">
+          <template slot-scope="scope">
+            <el-tag v-if="Number(scope.row.status) === 0" size="small">正常</el-tag>
+            <el-tag v-else size="small" type="danger">暂停</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column
+          fixed="right"
+          header-align="center"
+          align="center"
+          width="250"
+          label="操作">
+          <template slot-scope="scope">
+            <el-button v-if="isAuth('sys:schedule:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.jobId)">修改</el-button>
+            <el-button v-if="isAuth('sys:schedule:delete')" type="text" size="small" @click="deleteHandle(scope.row.jobId)">删除</el-button>
+            <el-button v-if="isAuth('sys:schedule:pause')" type="text" size="small" @click="pauseHandle(scope.row.jobId)">暂停</el-button>
+            <el-button v-if="isAuth('sys:schedule:resume')" type="text" size="small" @click="resumeHandle(scope.row.jobId)">恢复</el-button>
+            <el-button v-if="isAuth('sys:schedule:run')" type="text" size="small" @click="runHandle(scope.row.jobId)">立即执行</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        @size-change="sizeChangeHandle"
+        @current-change="currentChangeHandle"
+        :current-page="pageIndex"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="pageSize"
+        :total="totalPage"
+        layout="total, sizes, prev, pager, next, jumper">
+      </el-pagination>
+    </template>
     <!-- 弹窗, 新增 / 修改 -->
-    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"  @onChose="onChose"></add-or-update>
     <!-- 弹窗, 日志列表 -->
     <log v-if="logVisible" ref="log"></log>
   </div>
@@ -178,6 +180,9 @@
           this.$refs.addOrUpdate.init(id)
         })
       },
+      onChose () {
+        this.addOrUpdateVisible = false
+      },
       // 删除
       deleteHandle (id) {
         const ids = id ? [id] : this.dataListSelections.map(item => {

src/views/modules/org/org-add-or-update.vue

@@ -1,46 +1,49 @@
 <template>
-  <el-dialog
+  <!-- <el-dialog
     :title="!dataForm.id ? '新增' : '修改'"
     :close-on-click-modal="false"
-    :visible.sync="visible">
-    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
-      <el-form-item label="机构名称" prop="name">
-        <el-input v-model="dataForm.name" placeholder="机构名称"></el-input>
-      </el-form-item>
-      <el-form-item label="上级机构" prop="parentName">
-        <el-popover
-          ref="menuListPopover"
-          placement="bottom-start"
-          trigger="click">
-          <el-tree
-            :data="orgList"
-            :props="menuListTreeProps"
-            node-key="orgId"
-            ref="menuListTree"
-            @current-change="menuListTreeCurrentChangeHandle"
-            :default-expand-all="true"
-            :highlight-current="true"
-            :expand-on-click-node="false">
-          </el-tree>
-        </el-popover>
-        <el-input v-model="dataForm.parentName" v-popover:menuListPopover :readonly="true" placeholder="点击选择上级机构" class="menu-list__input"></el-input>
-      </el-form-item>
-      <!-- <el-form-item label="状态" size="mini" prop="orgType">
-        <el-radio-group v-model="dataForm.orgType">
-          <el-radio :label="0">非运输公司</el-radio>
-          <el-radio :label="1">运输公司</el-radio>
-        </el-radio-group>
-      </el-form-item> -->
-      <el-form-item label="排序" prop="orderNum">
-        <el-input-number v-model="dataForm.orderNum" controls-position="right" :min="0" label="排序"></el-input-number>
-      </el-form-item>
+    :visible.sync="visible"> -->
+    <div>
+      <div class="my-title">{{ !dataForm.id ? '新增' : '修改' }}</div>
+      <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
+        <el-form-item label="机构名称" prop="name">
+          <el-input v-model="dataForm.name" placeholder="机构名称"></el-input>
+        </el-form-item>
+        <el-form-item label="上级机构" prop="parentName">
+          <el-popover
+            ref="menuListPopover"
+            placement="bottom-start"
+            trigger="click">
+            <el-tree
+              :data="orgList"
+              :props="menuListTreeProps"
+              node-key="orgId"
+              ref="menuListTree"
+              @current-change="menuListTreeCurrentChangeHandle"
+              :default-expand-all="true"
+              :highlight-current="true"
+              :expand-on-click-node="false">
+            </el-tree>
+          </el-popover>
+          <el-input v-model="dataForm.parentName" v-popover:menuListPopover :readonly="true" placeholder="点击选择上级机构" class="menu-list__input"></el-input>
+        </el-form-item>
+        <!-- <el-form-item label="状态" size="mini" prop="orgType">
+          <el-radio-group v-model="dataForm.orgType">
+            <el-radio :label="0">非运输公司</el-radio>
+            <el-radio :label="1">运输公司</el-radio>
+          </el-radio-group>
+        </el-form-item> -->
+        <el-form-item label="排序" prop="orderNum">
+          <el-input-number v-model="dataForm.orderNum" controls-position="right" :min="0" label="排序"></el-input-number>
+        </el-form-item>
 
-    </el-form>
-    <span slot="footer" class="dialog-footer">
-      <el-button @click="visible = false">取消</el-button>
-      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
-    </span>
-  </el-dialog>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="onChose">取消</el-button>
+        <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
+      </span>
+    </div>
+  <!-- </el-dialog> -->
 </template>
 
 <script>
@@ -115,6 +118,9 @@
           this.dataForm.parentName = (this.$refs.menuListTree.getCurrentNode() || {})['name']
         }
       },
+      onChose () {
+        this.$emit('onChose')
+      },
       // 表单提交
       dataFormSubmit () {
         this.$refs['dataForm'].validate((valid) => {
@@ -132,7 +138,7 @@
                   type: 'success',
                   duration: 1500,
                   onClose: () => {
-                    this.visible = false
+                    this.onChose()
                     this.$emit('refreshDataList')
                   }
                 })

src/views/modules/org/org.vue

@@ -1,66 +1,68 @@
 <template>
   <div class="mod-menu">
-    <el-form :inline="true" :model="dataForm">
-      <el-form-item>
-        <el-button v-if="isAuth('sys:menu:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
-      </el-form-item>
-    </el-form>
+    <template v-if="!addOrUpdateVisible">
+      <el-form :inline="true" :model="dataForm">
+        <el-form-item>
+          <el-button v-if="isAuth('sys:menu:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
+        </el-form-item>
+      </el-form>
 
-    <el-table
-      :data="dataList"
-      row-key="orgId"
-      border
-      :indent='20'
-      style="width: 100%; ">
-      <!-- <el-table-column type="selection" width="40">
-    	  <template slot-scope="scope">
-        	<el-radio :label="scope.row.orgId" v-model="orgId"> &nbsp; </el-radio>
-        </template>
-      </el-table-column> -->
-      <el-table-column
-        prop="name"
-        header-align="center"
-        min-width="100"
-        label="机构名称" >
-      </el-table-column>
-      <!-- <el-table-column
-        prop="orgType"
-        header-align="center"
-        align="center"
-        width="120"
-        label="机构类型">
-        <template slot-scope="scope">
-          <span>{{ orgType[Number(scope.row.orgType || 0)] }}</span>
-        </template>
-      </el-table-column> -->
-      <el-table-column
-        prop="parentName"
-        header-align="center"
-        align="center"
-        label="上级机构">
-      </el-table-column>
-      <!-- <el-table-column
-        prop="orgId"
-        header-align="center"
-        align="center"
-        min-width="100"
-        :show-overflow-tooltip="true"
-        label="机构ID">
-      </el-table-column> -->
-      <el-table-column
-        fixed="right"
-        header-align="center"
-        align="center"
-        width="150"
-        label="操作">
-        <template slot-scope="scope">
-          <el-button v-if="isAuth('sys:menu:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.orgId)">修改</el-button>
-          <el-button v-if="isAuth('sys:menu:delete')" type="text" size="small" @click="deleteHandle(scope.row.orgId)">删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+      <el-table
+        :data="dataList"
+        row-key="orgId"
+        border
+        :indent='20'
+        style="width: 100%; ">
+        <!-- <el-table-column type="selection" width="40">
+          <template slot-scope="scope">
+            <el-radio :label="scope.row.orgId" v-model="orgId"> &nbsp; </el-radio>
+          </template>
+        </el-table-column> -->
+        <el-table-column
+          prop="name"
+          header-align="center"
+          min-width="100"
+          label="机构名称" >
+        </el-table-column>
+        <!-- <el-table-column
+          prop="orgType"
+          header-align="center"
+          align="center"
+          width="120"
+          label="机构类型">
+          <template slot-scope="scope">
+            <span>{{ orgType[Number(scope.row.orgType || 0)] }}</span>
+          </template>
+        </el-table-column> -->
+        <el-table-column
+          prop="parentName"
+          header-align="center"
+          align="center"
+          label="上级机构">
+        </el-table-column>
+        <!-- <el-table-column
+          prop="orgId"
+          header-align="center"
+          align="center"
+          min-width="100"
+          :show-overflow-tooltip="true"
+          label="机构ID">
+        </el-table-column> -->
+        <el-table-column
+          fixed="right"
+          header-align="center"
+          align="center"
+          width="150"
+          label="操作">
+          <template slot-scope="scope">
+            <el-button v-if="isAuth('sys:menu:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.orgId)">修改</el-button>
+            <el-button v-if="isAuth('sys:menu:delete')" type="text" size="small" @click="deleteHandle(scope.row.orgId)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </template>
     <!-- 弹窗, 新增 / 修改 -->
-    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList" @onChose="onChose"></add-or-update>
   </div>
 </template>
 
@@ -104,6 +106,9 @@
           this.$refs.addOrUpdate.init(id)
         })
       },
+      onChose () {
+        this.addOrUpdateVisible = false
+      },
       // 删除
       deleteHandle (id) {
         this.$confirm(`确定对[orgId=${id}]进行[删除]操作?`, '提示', {

src/views/modules/sys/config-add-or-update.vue

@@ -1,24 +1,27 @@
 <template>
-  <el-dialog
+  <!-- <el-dialog
     :title="!dataForm.id ? '新增' : '修改'"
     :close-on-click-modal="false"
-    :visible.sync="visible">
-    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
-      <el-form-item label="参数名" prop="paramKey">
-        <el-input v-model="dataForm.paramKey" placeholder="参数名"></el-input>
-      </el-form-item>
-      <el-form-item label="参数值" prop="paramValue">
-        <el-input v-model="dataForm.paramValue" placeholder="参数值"></el-input>
-      </el-form-item>
-      <el-form-item label="备注" prop="remark">
-        <el-input v-model="dataForm.remark" placeholder="备注"></el-input>
-      </el-form-item>
-    </el-form>
-    <span slot="footer" class="dialog-footer">
-      <el-button @click="visible = false">取消</el-button>
-      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
-    </span>
-  </el-dialog>
+    :visible.sync="visible"> -->
+    <div>
+      <div class="my-title">{{ !dataForm.id ? '新增' : '修改' }}</div>
+      <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
+        <el-form-item label="参数名" prop="paramKey">
+          <el-input v-model="dataForm.paramKey" placeholder="参数名"></el-input>
+        </el-form-item>
+        <el-form-item label="参数值" prop="paramValue">
+          <el-input v-model="dataForm.paramValue" placeholder="参数值"></el-input>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="dataForm.remark" placeholder="备注"></el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="onChose">取消</el-button>
+        <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
+      </span>
+    </div>
+  <!-- </el-dialog> -->
 </template>
 
 <script>
@@ -63,6 +66,9 @@
           }
         })
       },
+      onChose () {
+        this.$emit('onChose')
+      },
       // 表单提交
       dataFormSubmit () {
         this.$refs['dataForm'].validate((valid) => {
@@ -83,7 +89,7 @@
                   type: 'success',
                   duration: 1500,
                   onClose: () => {
-                    this.visible = false
+                    this.onChose()
                     this.$emit('refreshDataList')
                   }
                 })

src/views/modules/sys/config.vue

@@ -1,75 +1,77 @@
 <template>
   <div class="mod-config">
-    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
-      <el-form-item>
-        <el-input v-model="dataForm.paramKey" placeholder="参数名" clearable></el-input>
-      </el-form-item>
-      <el-form-item>
-        <el-button @click="getDataList()">查询</el-button>
-        <el-button type="primary" @click="addOrUpdateHandle()">新增</el-button>
-        <el-button type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
-      </el-form-item>
-    </el-form>
-    <el-table
-      :data="dataList"
-      border
-      v-loading="dataListLoading"
-      @selection-change="selectionChangeHandle"
-      style="width: 100%;">
-      <el-table-column
-        type="selection"
-        header-align="center"
-        align="center"
-        width="50">
-      </el-table-column>
-      <el-table-column
-        prop="id"
-        header-align="center"
-        align="center"
-        width="80"
-        label="ID">
-      </el-table-column>
-      <el-table-column
-        prop="paramKey"
-        header-align="center"
-        align="center"
-        label="参数名">
-      </el-table-column>
-      <el-table-column
-        prop="paramValue"
-        header-align="center"
-        align="center"
-        label="参数值">
-      </el-table-column>
-      <el-table-column
-        prop="remark"
-        header-align="center"
-        align="center"
-        label="备注">
-      </el-table-column>
-      <el-table-column
-        fixed="right"
-        header-align="center"
-        align="center"
-        width="150"
-        label="操作">
-        <template slot-scope="scope">
-          <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
-          <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <el-pagination
-      @size-change="sizeChangeHandle"
-      @current-change="currentChangeHandle"
-      :current-page="pageIndex"
-      :page-sizes="[10, 20, 50, 100]"
-      :page-size="pageSize"
-      :total="totalPage"
-      layout="total, sizes, prev, pager, next, jumper">
-    </el-pagination>
+    <template v-if="!addOrUpdateVisible">
+      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+        <el-form-item>
+          <el-input v-model="dataForm.paramKey" placeholder="参数名" clearable></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="getDataList()">查询</el-button>
+          <el-button type="primary" @click="addOrUpdateHandle()">新增</el-button>
+          <el-button type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
+        </el-form-item>
+      </el-form>
+      <el-table
+        :data="dataList"
+        border
+        v-loading="dataListLoading"
+        @selection-change="selectionChangeHandle"
+        style="width: 100%;">
+        <el-table-column
+          type="selection"
+          header-align="center"
+          align="center"
+          width="50">
+        </el-table-column>
+        <el-table-column
+          prop="id"
+          header-align="center"
+          align="center"
+          width="80"
+          label="ID">
+        </el-table-column>
+        <el-table-column
+          prop="paramKey"
+          header-align="center"
+          align="center"
+          label="参数名">
+        </el-table-column>
+        <el-table-column
+          prop="paramValue"
+          header-align="center"
+          align="center"
+          label="参数值">
+        </el-table-column>
+        <el-table-column
+          prop="remark"
+          header-align="center"
+          align="center"
+          label="备注">
+        </el-table-column>
+        <el-table-column
+          fixed="right"
+          header-align="center"
+          align="center"
+          width="150"
+          label="操作">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
+            <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        @size-change="sizeChangeHandle"
+        @current-change="currentChangeHandle"
+        :current-page="pageIndex"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="pageSize"
+        :total="totalPage"
+        layout="total, sizes, prev, pager, next, jumper">
+      </el-pagination>
+    </template>
     <!-- 弹窗, 新增 / 修改 -->
-    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList" @onChose="onChose"></add-or-update>
   </div>
 </template>
 
@@ -141,6 +143,9 @@
           this.$refs.addOrUpdate.init(id)
         })
       },
+      onChose () {
+        this.addOrUpdateVisible = false
+      },
       // 删除
       deleteHandle (id) {
         var ids = id ? [id] : this.dataListSelections.map(item => {

src/views/modules/sys/dict-add-or-update.vue

@@ -1,53 +1,56 @@
 <template>
-  <el-dialog
+  <!-- <el-dialog
     :title="!dataForm.id ? '新增' : '修改'"
     :close-on-click-modal="false"
-    :visible.sync="visible">
-    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
-      <el-row class="my-row">
-        <el-col :span="12">
-          <el-form-item label="字典名称" prop="name">
-            <el-input v-model="dataForm.name" placeholder="字典名称"></el-input>
+    :visible.sync="visible"> -->
+    <div>
+      <div class="my-title">{{ !dataForm.id ? '新增' : '修改' }}</div>
+      <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
+        <el-row class="my-row">
+          <el-col :span="12">
+            <el-form-item label="字典名称" prop="name">
+              <el-input v-model="dataForm.name" placeholder="字典名称"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="字典类型" prop="type" >
+              <el-input v-model="dataForm.type" placeholder="字典类型"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row class="my-row">
+          <el-col :span="12">
+            <el-form-item label="字典码" prop="code">
+              <el-input v-model="dataForm.code" placeholder="字典码"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="字典值" prop="value">
+              <el-input v-model="dataForm.value" placeholder="字典值"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row class="my-row">
+          <el-col :span="12">
+            <el-form-item label="排序" prop="orderNum">
+              <el-input-number v-model="dataForm.orderNum" controls-position="right" :min="0" label="排序号"></el-input-number>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+          </el-col>
+        </el-row>
+        <el-row class="my-row">
+          <el-form-item label="备注" prop="remark">
+            <el-input v-model="dataForm.remark" placeholder="备注"></el-input>
           </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="字典类型" prop="type" >
-            <el-input v-model="dataForm.type" placeholder="字典类型"></el-input>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row class="my-row">
-        <el-col :span="12">
-          <el-form-item label="字典码" prop="code">
-            <el-input v-model="dataForm.code" placeholder="字典码"></el-input>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="字典值" prop="value">
-            <el-input v-model="dataForm.value" placeholder="字典值"></el-input>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row class="my-row">
-        <el-col :span="12">
-          <el-form-item label="排序" prop="orderNum">
-            <el-input-number v-model="dataForm.orderNum" controls-position="right" :min="0" label="排序号"></el-input-number>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-        </el-col>
-      </el-row>
-      <el-row class="my-row">
-        <el-form-item label="备注" prop="remark">
-          <el-input v-model="dataForm.remark" placeholder="备注"></el-input>
-        </el-form-item>
-      </el-row>
-    </el-form>
-    <span slot="footer" class="dialog-footer">
-      <el-button @click="visible = false">取消</el-button>
-      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
-    </span>
-  </el-dialog>
+        </el-row>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="onChose">取消</el-button>
+        <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
+      </span>
+    </div>
+  <!-- </el-dialog> -->
 </template>
 
 <script>
@@ -104,6 +107,9 @@
           })
         }
       },
+      onChose () {
+        this.$emit('onChose')
+      },
       // 表单提交
       dataFormSubmit () {
         this.$refs['dataForm'].validate((valid) => {
@@ -128,7 +134,7 @@
                   type: 'success',
                   duration: 1500,
                   onClose: () => {
-                    this.visible = false
+                    this.onChose()
                     this.$emit('refreshDataList')
                   }
                 })

src/views/modules/sys/dict.vue

@@ -1,80 +1,82 @@
 <template>
   <div class="mod-user">
-    <el-form :inline="true" :model="dataForm" @keyup.enter.native="search()">
-      <el-form-item>
-        <el-input v-model="dataForm.userName" placeholder="字典名称" clearable></el-input>
-      </el-form-item>
-      <el-form-item>
-        <el-button @click="search()">查询</el-button>
-        <el-button v-if="isAuth('sys:user:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
-        <el-button v-if="isAuth('sys:user:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
-      </el-form-item>
-    </el-form>
-    <el-table
-      :data="dataList"
-      border
-      v-loading="dataListLoading"
-      @selection-change="selectionChangeHandle"
-      style="width: 100%;">
-      <el-table-column
-        type="selection"
-        header-align="center"
-        align="center"
-        width="50">
-      </el-table-column>
-      <el-table-column
-        prop="name"
-        header-align="center"
-        align="center"
-        label="字典名称">
-      </el-table-column>
-      <el-table-column
-        prop="type"
-        header-align="center"
-        align="center"
-        label="字典类型">
-      </el-table-column>
-      <el-table-column
-        prop="code"
-        header-align="center"
-        align="center"
-        label="字典码">
-      </el-table-column>
-      <el-table-column
-        prop="value"
-        header-align="center"
-        align="center"
-        label="字典值">
-      </el-table-column>
-      <el-table-column
-        prop="remark"
-        header-align="center"
-        align="center"
-        label="备注">
-      </el-table-column>
-      <el-table-column
-        fixed="right"
-        header-align="center"
-        align="center"
-        width="150"
-        label="操作">
-        <template slot-scope="scope">
-          <el-button v-if="isAuth('sys:user:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
-          <el-button v-if="isAuth('sys:user:delete')" type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <el-pagination
-      @size-change="sizeChangeHandle"
-      @current-change="currentChangeHandle"
-      :current-page="pageIndex"
-      :page-sizes="[10, 20, 50, 100]"
-      :page-size="pageSize"
-      :total="totalPage"
-      layout="total, sizes, prev, pager, next, jumper">
-    </el-pagination>
+    <template v-if="!addOrUpdateVisible">
+      <el-form :inline="true" :model="dataForm" @keyup.enter.native="search()">
+        <el-form-item>
+          <el-input v-model="dataForm.userName" placeholder="字典名称" clearable></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="search()">查询</el-button>
+          <el-button v-if="isAuth('sys:user:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
+          <el-button v-if="isAuth('sys:user:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
+        </el-form-item>
+      </el-form>
+      <el-table
+        :data="dataList"
+        border
+        v-loading="dataListLoading"
+        @selection-change="selectionChangeHandle"
+        style="width: 100%;">
+        <el-table-column
+          type="selection"
+          header-align="center"
+          align="center"
+          width="50">
+        </el-table-column>
+        <el-table-column
+          prop="name"
+          header-align="center"
+          align="center"
+          label="字典名称">
+        </el-table-column>
+        <el-table-column
+          prop="type"
+          header-align="center"
+          align="center"
+          label="字典类型">
+        </el-table-column>
+        <el-table-column
+          prop="code"
+          header-align="center"
+          align="center"
+          label="字典码">
+        </el-table-column>
+        <el-table-column
+          prop="value"
+          header-align="center"
+          align="center"
+          label="字典值">
+        </el-table-column>
+        <el-table-column
+          prop="remark"
+          header-align="center"
+          align="center"
+          label="备注">
+        </el-table-column>
+        <el-table-column
+          fixed="right"
+          header-align="center"
+          align="center"
+          width="150"
+          label="操作">
+          <template slot-scope="scope">
+            <el-button v-if="isAuth('sys:user:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
+            <el-button v-if="isAuth('sys:user:delete')" type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        @size-change="sizeChangeHandle"
+        @current-change="currentChangeHandle"
+        :current-page="pageIndex"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="pageSize"
+        :total="totalPage"
+        layout="total, sizes, prev, pager, next, jumper">
+      </el-pagination>
+    </template>
     <!-- 弹窗, 新增 / 修改 -->
-    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList" @onChose="onChose"></add-or-update>
   </div>
 </template>
 
@@ -129,6 +131,9 @@
           this.dataListLoading = false
         })
       },
+      onChose () {
+        this.addOrUpdateVisible = false
+      },
       // 每页数
       sizeChangeHandle (val) {
         this.pageSize = val

src/views/modules/sys/menu-add-or-update.vue

@@ -1,79 +1,82 @@
 <template>
-  <el-dialog
+  <!-- <el-dialog
     :title="!dataForm.id ? '新增' : '修改'"
     :close-on-click-modal="false"
-    :visible.sync="visible">
-    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
-      <el-form-item label="类型" prop="type">
-        <el-radio-group v-model="dataForm.type">
-          <el-radio v-for="(type, index) in dataForm.typeList" :label="index" :key="index">{{ type }}</el-radio>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item :label="dataForm.typeList[dataForm.type] + '名称'" prop="name">
-        <el-input v-model="dataForm.name" :placeholder="dataForm.typeList[dataForm.type] + '名称'"></el-input>
-      </el-form-item>
-      <el-form-item v-if="dataForm.type !== 0" label="上级菜单" prop="parentName">
-        <el-popover
-          ref="menuListPopover"
-          placement="bottom-start"
-          trigger="click">
-          <el-tree
-            :data="menuList"
-            :props="menuListTreeProps"
-            node-key="menuId"
-            ref="menuListTree"
-            @current-change="menuListTreeCurrentChangeHandle"
-            :highlight-current="true"
-            :expand-on-click-node="false">
-          </el-tree>
-        </el-popover>
-        <el-input v-model="dataForm.parentName" v-popover:menuListPopover :readonly="true" placeholder="点击选择上级菜单" class="menu-list__input"></el-input>
-      </el-form-item>
-      <el-form-item v-if="dataForm.type === 1" label="菜单路由" prop="url">
-        <el-input v-model="dataForm.url" placeholder="菜单路由"></el-input>
-      </el-form-item>
-      <el-form-item v-if="dataForm.type !== 0" label="授权标识" prop="perms">
-        <el-input v-model="dataForm.perms" placeholder="多个用逗号分隔, 如: user:list,user:create"></el-input>
-      </el-form-item>
-      <el-form-item v-if="dataForm.type !== 2" label="排序号" prop="orderNum">
-        <el-input-number v-model="dataForm.orderNum" controls-position="right" :min="0" label="排序号"></el-input-number>
-      </el-form-item>
-      <el-form-item v-if="dataForm.type !== 2" label="菜单图标" prop="icon">
-        <el-row>
-          <el-col :span="22">
-            <el-popover
-              ref="iconListPopover"
-              placement="bottom-start"
-              trigger="click"
-              popper-class="mod-menu__icon-popover">
-              <div class="mod-menu__icon-inner">
-                <div class="mod-menu__icon-list">
-                  <el-button
-                    v-for="(item, index) in iconList"
-                    :key="index"
-                    @click="iconActiveHandle(item)"
-                    :class="{ 'is-active': item === dataForm.icon }">
-                    <icon-svg :name="item"></icon-svg>
-                  </el-button>
+    :visible.sync="visible"> -->
+    <div>
+      <div class="my-title">{{ !dataForm.id ? '新增' : '修改' }}</div>
+      <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
+        <el-form-item label="类型" prop="type">
+          <el-radio-group v-model="dataForm.type">
+            <el-radio v-for="(type, index) in dataForm.typeList" :label="index" :key="index">{{ type }}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item :label="dataForm.typeList[dataForm.type] + '名称'" prop="name">
+          <el-input v-model="dataForm.name" :placeholder="dataForm.typeList[dataForm.type] + '名称'"></el-input>
+        </el-form-item>
+        <el-form-item v-if="dataForm.type !== 0" label="上级菜单" prop="parentName">
+          <el-popover
+            ref="menuListPopover"
+            placement="bottom-start"
+            trigger="click">
+            <el-tree
+              :data="menuList"
+              :props="menuListTreeProps"
+              node-key="menuId"
+              ref="menuListTree"
+              @current-change="menuListTreeCurrentChangeHandle"
+              :highlight-current="true"
+              :expand-on-click-node="false">
+            </el-tree>
+          </el-popover>
+          <el-input v-model="dataForm.parentName" v-popover:menuListPopover :readonly="true" placeholder="点击选择上级菜单" class="menu-list__input"></el-input>
+        </el-form-item>
+        <el-form-item v-if="dataForm.type === 1" label="菜单路由" prop="url">
+          <el-input v-model="dataForm.url" placeholder="菜单路由"></el-input>
+        </el-form-item>
+        <el-form-item v-if="dataForm.type !== 0" label="授权标识" prop="perms">
+          <el-input v-model="dataForm.perms" placeholder="多个用逗号分隔, 如: user:list,user:create"></el-input>
+        </el-form-item>
+        <el-form-item v-if="dataForm.type !== 2" label="排序号" prop="orderNum">
+          <el-input-number v-model="dataForm.orderNum" controls-position="right" :min="0" label="排序号"></el-input-number>
+        </el-form-item>
+        <el-form-item v-if="dataForm.type !== 2" label="菜单图标" prop="icon">
+          <el-row>
+            <el-col :span="22">
+              <el-popover
+                ref="iconListPopover"
+                placement="bottom-start"
+                trigger="click"
+                popper-class="mod-menu__icon-popover">
+                <div class="mod-menu__icon-inner">
+                  <div class="mod-menu__icon-list">
+                    <el-button
+                      v-for="(item, index) in iconList"
+                      :key="index"
+                      @click="iconActiveHandle(item)"
+                      :class="{ 'is-active': item === dataForm.icon }">
+                      <icon-svg :name="item"></icon-svg>
+                    </el-button>
+                  </div>
                 </div>
-              </div>
-            </el-popover>
-            <el-input v-model="dataForm.icon" v-popover:iconListPopover :readonly="true" placeholder="菜单图标名称" class="icon-list__input"></el-input>
-          </el-col>
-          <el-col :span="2" class="icon-list__tips">
-            <el-tooltip placement="top" effect="light">
-              <div slot="content">全站推荐使用SVG Sprite, 详细请参考:<a href="//github.com/daxiongYang/renren-fast-vue/blob/master/src/icons/index.js" target="_blank">icons/index.js</a>描述</div>
-              <i class="el-icon-warning"></i>
-            </el-tooltip>
-          </el-col>
-        </el-row>
-      </el-form-item>
-    </el-form>
-    <span slot="footer" class="dialog-footer">
-      <el-button @click="visible = false">取消</el-button>
-      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
-    </span>
-  </el-dialog>
+              </el-popover>
+              <el-input v-model="dataForm.icon" v-popover:iconListPopover :readonly="true" placeholder="菜单图标名称" class="icon-list__input"></el-input>
+            </el-col>
+            <el-col :span="2" class="icon-list__tips">
+              <el-tooltip placement="top" effect="light">
+                <div slot="content">全站推荐使用SVG Sprite, 详细请参考:<a href="//github.com/daxiongYang/renren-fast-vue/blob/master/src/icons/index.js" target="_blank">icons/index.js</a>描述</div>
+                <i class="el-icon-warning"></i>
+              </el-tooltip>
+            </el-col>
+          </el-row>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="onChose">取消</el-button>
+        <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
+      </span>
+    </div>
+  <!-- </el-dialog> -->
 </template>
 
 <script>
@@ -187,6 +190,9 @@
       iconActiveHandle (iconName) {
         this.dataForm.icon = iconName
       },
+      onChose () {
+        this.$emit('onChose')
+      },
       // 表单提交
       dataFormSubmit () {
         this.$refs['dataForm'].validate((valid) => {
@@ -212,7 +218,7 @@
                   type: 'success',
                   duration: 1500,
                   onClose: () => {
-                    this.visible = false
+                    this.onChose()
                     this.$emit('refreshDataList')
                   }
                 })

src/views/modules/sys/menu.vue

@@ -1,85 +1,87 @@
 <template>
   <div class="mod-menu">
-    <el-form :inline="true" :model="dataForm">
-      <el-form-item>
-        <el-button v-if="isAuth('sys:menu:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
-      </el-form-item>
-    </el-form>
+    <template v-if="!addOrUpdateVisible">
+      <el-form :inline="true" :model="dataForm">
+        <el-form-item>
+          <el-button v-if="isAuth('sys:menu:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
+        </el-form-item>
+      </el-form>
 
-    <el-table
-      :data="dataList"
-      row-key="menuId"
-      border
-      :indent='20'
-      style="width: 100%; ">
-      <el-table-column
-        prop="name"
-        header-align="center"
-        min-width="150"
-        label="名称" >
-      </el-table-column>
-      <el-table-column
-        prop="parentName"
-        header-align="center"
-        align="center"
-        width="120"
-        label="上级菜单">
-      </el-table-column>
-      <el-table-column
-        header-align="center"
-        align="center"
-        label="图标">
-        <template slot-scope="scope">
-          <icon-svg :name="scope.row.icon || ''"></icon-svg>
-        </template>
-      </el-table-column>
-      <el-table-column
-        prop="type"
-        header-align="center"
-        align="center"
-        label="类型">
-        <template slot-scope="scope">
-          <el-tag v-if="scope.row.type === '0'" size="small">目录</el-tag>
-          <el-tag v-else-if="scope.row.type === '1'" size="small" type="success">菜单</el-tag>
-          <el-tag v-else-if="scope.row.type === '2'" size="small" type="info">按钮</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column
-        prop="orderNum"
-        header-align="center"
-        align="center"
-        label="排序号">
-      </el-table-column>
-      <el-table-column
-        prop="url"
-        header-align="center"
-        align="center"
-        width="150"
-        :show-overflow-tooltip="true"
-        label="菜单URL">
-      </el-table-column>
-      <el-table-column
-        prop="perms"
-        header-align="center"
-        align="center"
-        width="150"
-        :show-overflow-tooltip="true"
-        label="授权标识">
-      </el-table-column>
-      <el-table-column
-        fixed="right"
-        header-align="center"
-        align="center"
-        width="150"
-        label="操作">
-        <template slot-scope="scope">
-          <el-button v-if="isAuth('sys:menu:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.menuId)">修改</el-button>
-          <el-button v-if="isAuth('sys:menu:delete')" type="text" size="small" @click="deleteHandle(scope.row.menuId)">删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+      <el-table
+        :data="dataList"
+        row-key="menuId"
+        border
+        :indent='20'
+        style="width: 100%; ">
+        <el-table-column
+          prop="name"
+          header-align="center"
+          min-width="150"
+          label="名称" >
+        </el-table-column>
+        <el-table-column
+          prop="parentName"
+          header-align="center"
+          align="center"
+          width="120"
+          label="上级菜单">
+        </el-table-column>
+        <el-table-column
+          header-align="center"
+          align="center"
+          label="图标">
+          <template slot-scope="scope">
+            <icon-svg :name="scope.row.icon || ''"></icon-svg>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="type"
+          header-align="center"
+          align="center"
+          label="类型">
+          <template slot-scope="scope">
+            <el-tag v-if="scope.row.type === '0'" size="small">目录</el-tag>
+            <el-tag v-else-if="scope.row.type === '1'" size="small" type="success">菜单</el-tag>
+            <el-tag v-else-if="scope.row.type === '2'" size="small" type="info">按钮</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="orderNum"
+          header-align="center"
+          align="center"
+          label="排序号">
+        </el-table-column>
+        <el-table-column
+          prop="url"
+          header-align="center"
+          align="center"
+          width="150"
+          :show-overflow-tooltip="true"
+          label="菜单URL">
+        </el-table-column>
+        <el-table-column
+          prop="perms"
+          header-align="center"
+          align="center"
+          width="150"
+          :show-overflow-tooltip="true"
+          label="授权标识">
+        </el-table-column>
+        <el-table-column
+          fixed="right"
+          header-align="center"
+          align="center"
+          width="150"
+          label="操作">
+          <template slot-scope="scope">
+            <el-button v-if="isAuth('sys:menu:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.menuId)">修改</el-button>
+            <el-button v-if="isAuth('sys:menu:delete')" type="text" size="small" @click="deleteHandle(scope.row.menuId)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </template>
     <!-- 弹窗, 新增 / 修改 -->
-    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList" @onChose="onChose"></add-or-update>
   </div>
 </template>
 
@@ -123,6 +125,9 @@
           this.$refs.addOrUpdate.init(id)
         })
       },
+      onChose () {
+        this.addOrUpdateVisible = false
+      },
       // 删除
       deleteHandle (id) {
         this.$confirm(`确定对[id=${id}]进行[删除]操作?`, '提示', {

src/views/modules/sys/role-add-or-update.vue

@@ -1,49 +1,52 @@
 <template>
-  <el-dialog
+  <!-- <el-dialog
     :title="!dataForm.id ? '新增' : '修改'"
     :close-on-click-modal="false"
-    :visible.sync="visible">
-    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
-      <el-form-item label="角色名称" prop="roleName">
-        <el-input v-model="dataForm.roleName" placeholder="角色名称"></el-input>
-      </el-form-item>
-      <el-form-item label="备注" prop="remark">
-        <el-input v-model="dataForm.remark" placeholder="备注"></el-input>
-      </el-form-item>
-      <el-form-item label="所属机构" prop="orgId">
-        <org-component v-model="dataForm.orgId" @orgSelected="validateField('orgId')"/>
-      </el-form-item>
-      <div class="my-item">
-        <el-form-item size="mini" label="授权">
-          <el-tree
-            :data="menuList"
-            :props="menuListTreeProps"
-            node-key="menuId"
-            ref="menuListTree"
-            :default-expand-all="true"
-            show-checkbox>
-          </el-tree>
+    :visible.sync="visible"> -->
+    <div>
+      <div class="my-title">{{ !dataForm.id ? '新增' : '修改' }}</div>
+      <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
+        <el-form-item label="角色名称" prop="roleName">
+          <el-input v-model="dataForm.roleName" placeholder="角色名称"></el-input>
         </el-form-item>
-      </div>
-      <div class="my-item">
-        <el-form-item size="mini" label="数据权限">
-          <el-tree
-            :data="orgList"
-            :props="orgListTreeProps"
-            node-key="orgId"
-            ref="orgListData"
-            :default-expand-all="true"
-            :highlight-current="true"
-            show-checkbox>
-          </el-tree>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="dataForm.remark" placeholder="备注"></el-input>
         </el-form-item>
-      </div>
-    </el-form>
-    <span slot="footer" class="dialog-footer">
-      <el-button @click="visible = false">取消</el-button>
-      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
-    </span>
-  </el-dialog>
+        <el-form-item label="所属机构" prop="orgId">
+          <org-component v-model="dataForm.orgId" @orgSelected="validateField('orgId')"/>
+        </el-form-item>
+        <div class="my-item">
+          <el-form-item size="mini" label="授权">
+            <el-tree
+              :data="menuList"
+              :props="menuListTreeProps"
+              node-key="menuId"
+              ref="menuListTree"
+              :default-expand-all="true"
+              show-checkbox>
+            </el-tree>
+          </el-form-item>
+        </div>
+        <div class="my-item">
+          <el-form-item size="mini" label="数据权限">
+            <el-tree
+              :data="orgList"
+              :props="orgListTreeProps"
+              node-key="orgId"
+              ref="orgListData"
+              :default-expand-all="true"
+              :highlight-current="true"
+              show-checkbox>
+            </el-tree>
+          </el-form-item>
+        </div>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="onChose">取消</el-button>
+        <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
+      </span>
+    </div>
+  <!-- </el-dialog> -->
 </template>
 
 <script>
@@ -143,6 +146,9 @@
           }
         })
       },
+      onChose () {
+        this.$emit('onChose')
+      },
       // 表单提交
       dataFormSubmit () {
         this.$refs['dataForm'].validate((valid) => {
@@ -166,7 +172,7 @@
                   type: 'success',
                   duration: 1500,
                   onClose: () => {
-                    this.visible = false
+                    this.onChose()
                     this.$emit('refreshDataList')
                   }
                 })

src/views/modules/sys/role.vue

@@ -1,84 +1,86 @@
 <template>
   <div class="mod-role">
-    <el-form :inline="true" :model="dataForm" @keyup.enter.native="search()">
-      <el-form-item>
-        <org-component v-model="dataForm.orgId"/>
-      </el-form-item>
-      <el-form-item>
-        <el-input v-model="dataForm.roleName" placeholder="角色名称" clearable></el-input>
-      </el-form-item>
-      <el-form-item>
-        <el-button @click="search()">查询</el-button>
-        <el-button v-if="isAuth('sys:role:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
-        <el-button v-if="isAuth('sys:role:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
-      </el-form-item>
-    </el-form>
-    <el-table
-      :data="dataList"
-      border
-      v-loading="dataListLoading"
-      @selection-change="selectionChangeHandle"
-      style="width: 100%;">
-      <el-table-column
-        type="selection"
-        header-align="center"
-        align="center"
-        width="50">
-      </el-table-column>
-      <!-- <el-table-column
-        prop="roleId"
-        header-align="center"
-        align="center"
-        width="80"
-        label="ID">
-      </el-table-column> -->
-      <el-table-column
-        prop="roleName"
-        header-align="center"
-        align="center"
-        label="角色名称">
-      </el-table-column>
-      <el-table-column
-        prop="orgName"
-        header-align="center"
-        align="center"
-        label="所属机构">
-      </el-table-column>
-      <el-table-column
-        prop="remark"
-        header-align="center"
-        align="center"
-        label="备注">
-      </el-table-column>
-      <el-table-column
-        prop="createTime"
-        header-align="center"
-        align="center"
-        label="创建时间">
-      </el-table-column>
-      <el-table-column
-        fixed="right"
-        header-align="center"
-        align="center"
-        width="150"
-        label="操作">
-        <template slot-scope="scope">
-          <el-button v-if="isAuth('sys:role:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.roleId)">修改</el-button>
-          <el-button v-if="isAuth('sys:role:delete')" type="text" size="small" @click="deleteHandle(scope.row.roleId)">删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <el-pagination
-      @size-change="sizeChangeHandle"
-      @current-change="currentChangeHandle"
-      :current-page="pageIndex"
-      :page-sizes="[10, 20, 50, 100]"
-      :page-size="pageSize"
-      :total="totalPage"
-      layout="total, sizes, prev, pager, next, jumper">
-    </el-pagination>
+    <template v-if="!addOrUpdateVisible">
+      <el-form :inline="true" :model="dataForm" @keyup.enter.native="search()">
+        <el-form-item>
+          <org-component v-model="dataForm.orgId"/>
+        </el-form-item>
+        <el-form-item>
+          <el-input v-model="dataForm.roleName" placeholder="角色名称" clearable></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="search()">查询</el-button>
+          <el-button v-if="isAuth('sys:role:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
+          <el-button v-if="isAuth('sys:role:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
+        </el-form-item>
+      </el-form>
+      <el-table
+        :data="dataList"
+        border
+        v-loading="dataListLoading"
+        @selection-change="selectionChangeHandle"
+        style="width: 100%;">
+        <el-table-column
+          type="selection"
+          header-align="center"
+          align="center"
+          width="50">
+        </el-table-column>
+        <!-- <el-table-column
+          prop="roleId"
+          header-align="center"
+          align="center"
+          width="80"
+          label="ID">
+        </el-table-column> -->
+        <el-table-column
+          prop="roleName"
+          header-align="center"
+          align="center"
+          label="角色名称">
+        </el-table-column>
+        <el-table-column
+          prop="orgName"
+          header-align="center"
+          align="center"
+          label="所属机构">
+        </el-table-column>
+        <el-table-column
+          prop="remark"
+          header-align="center"
+          align="center"
+          label="备注">
+        </el-table-column>
+        <el-table-column
+          prop="createTime"
+          header-align="center"
+          align="center"
+          label="创建时间">
+        </el-table-column>
+        <el-table-column
+          fixed="right"
+          header-align="center"
+          align="center"
+          width="150"
+          label="操作">
+          <template slot-scope="scope">
+            <el-button v-if="isAuth('sys:role:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.roleId)">修改</el-button>
+            <el-button v-if="isAuth('sys:role:delete')" type="text" size="small" @click="deleteHandle(scope.row.roleId)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        @size-change="sizeChangeHandle"
+        @current-change="currentChangeHandle"
+        :current-page="pageIndex"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="pageSize"
+        :total="totalPage"
+        layout="total, sizes, prev, pager, next, jumper">
+      </el-pagination>
+    </template>
     <!-- 弹窗, 新增 / 修改 -->
-    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList" @onChose="onChose"></add-or-update>
   </div>
 </template>
 
@@ -161,6 +163,9 @@
           this.$refs.addOrUpdate.init(id)
         })
       },
+      onChose () {
+        this.addOrUpdateVisible = false
+      },
       // 删除
       deleteHandle (id) {
         var ids = id ? [id] : this.dataListSelections.map(item => {

src/views/modules/sys/user-add-or-update.vue

@@ -1,47 +1,50 @@
 <template>
-  <el-dialog
+  <!-- <el-dialog
     :title="!dataForm.id ? '新增' : '修改'"
     :close-on-click-modal="false"
-    :visible.sync="visible">
-    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
-      <el-form-item label="用户名" prop="userName">
-        <el-input v-model="dataForm.userName" :disabled="dataForm.id !== 0" placeholder="登录帐号"></el-input>
-      </el-form-item>
-      <el-form-item label="姓名" prop="name">
-        <el-input v-model="dataForm.name" placeholder="姓名"></el-input>
-      </el-form-item>
-      <el-form-item label="密码" prop="password" :class="{ 'is-required': !dataForm.id }">
-        <el-input v-model="dataForm.password" type="password" placeholder="密码"></el-input>
-      </el-form-item>
-      <el-form-item label="确认密码" prop="confirmPassword" :class="{ 'is-required': !dataForm.id }">
-        <el-input v-model="dataForm.confirmPassword" type="password" placeholder="确认密码"></el-input>
-      </el-form-item>
-      <el-form-item v-if="dataForm.userName !== 'admin'" label="所属机构" prop="orgId">
-        <org-component v-model="dataForm.orgId" @orgSelected="validateField('orgId')"/>
-      </el-form-item>
-      <el-form-item label="邮箱" prop="email">
-        <el-input v-model="dataForm.email" placeholder="邮箱"></el-input>
-      </el-form-item>
-      <el-form-item label="手机号" prop="mobile">
-        <el-input v-model="dataForm.mobile" placeholder="手机号"></el-input>
-      </el-form-item>
-      <el-form-item v-if="dataForm.userName !== 'admin'" label="角色" size="mini" prop="roleIdList">
-        <el-checkbox-group v-model="dataForm.roleIdList">
-          <el-checkbox v-for="role in roleList" :key="role.roleId" :label="role.roleId">{{ role.roleName }}</el-checkbox>
-        </el-checkbox-group>
-      </el-form-item>
-      <el-form-item v-if="dataForm.userName !== 'admin'" label="状态" size="mini" prop="status">
-        <el-radio-group v-model="dataForm.status">
-          <el-radio :label="0">禁用</el-radio>
-          <el-radio :label="1">正常</el-radio>
-        </el-radio-group>
-      </el-form-item>
-    </el-form>
-    <span slot="footer" class="dialog-footer">
-      <el-button @click="visible = false">取消</el-button>
-      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
-    </span>
-  </el-dialog>
+    :visible.sync="visible"> -->
+    <div>
+      <div class="my-title">{{ !dataForm.id ? '新增' : '修改' }}</div>
+      <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
+        <el-form-item label="用户名" prop="userName">
+          <el-input v-model="dataForm.userName" :disabled="dataForm.id !== 0" placeholder="登录帐号"></el-input>
+        </el-form-item>
+        <el-form-item label="姓名" prop="name">
+          <el-input v-model="dataForm.name" placeholder="姓名"></el-input>
+        </el-form-item>
+        <el-form-item label="密码" prop="password" :class="{ 'is-required': !dataForm.id }">
+          <el-input v-model="dataForm.password" type="password" placeholder="密码"></el-input>
+        </el-form-item>
+        <el-form-item label="确认密码" prop="confirmPassword" :class="{ 'is-required': !dataForm.id }">
+          <el-input v-model="dataForm.confirmPassword" type="password" placeholder="确认密码"></el-input>
+        </el-form-item>
+        <el-form-item v-if="dataForm.userName !== 'admin'" label="所属机构" prop="orgId">
+          <org-component v-model="dataForm.orgId" @orgSelected="validateField('orgId')"/>
+        </el-form-item>
+        <el-form-item label="邮箱" prop="email">
+          <el-input v-model="dataForm.email" placeholder="邮箱"></el-input>
+        </el-form-item>
+        <el-form-item label="手机号" prop="mobile">
+          <el-input v-model="dataForm.mobile" placeholder="手机号"></el-input>
+        </el-form-item>
+        <el-form-item v-if="dataForm.userName !== 'admin'" label="角色" size="mini" prop="roleIdList">
+          <el-checkbox-group v-model="dataForm.roleIdList">
+            <el-checkbox v-for="role in roleList" :key="role.roleId" :label="role.roleId">{{ role.roleName }}</el-checkbox>
+          </el-checkbox-group>
+        </el-form-item>
+        <el-form-item v-if="dataForm.userName !== 'admin'" label="状态" size="mini" prop="status">
+          <el-radio-group v-model="dataForm.status">
+            <el-radio :label="0">禁用</el-radio>
+            <el-radio :label="1">正常</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="onChose">取消</el-button>
+        <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
+      </span>
+    </div>
+  <!-- </el-dialog> -->
 </template>
 
 <script>
@@ -162,6 +165,9 @@
           }
         })
       },
+      onChose () {
+        this.$emit('onChose')
+      },
       // 表单提交
       dataFormSubmit () {
         this.$refs['dataForm'].validate((valid) => {
@@ -197,7 +203,7 @@
                   type: 'success',
                   duration: 1500,
                   onClose: () => {
-                    this.visible = false
+                    this.onChose()
                     this.$emit('refreshDataList')
                   }
                 })

src/views/modules/sys/user.vue

@@ -1,113 +1,115 @@
 <template>
   <div class="mod-user">
-    <el-form :inline="true" :model="dataForm" @keyup.enter.native="search()">
-      <el-form-item>
-        <org-component v-model="dataForm.orgId"/>
-      </el-form-item>
-      <el-form-item>
-        <el-input v-model="dataForm.userName" placeholder="用户名" clearable></el-input>
-      </el-form-item>
-      <el-form-item>
-        <el-button @click="search()">查询</el-button>
-        <el-button v-if="isAuth('sys:user:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
-        <el-button v-if="isAuth('sys:user:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
-      </el-form-item>
-    </el-form>
-    <el-table
-      :data="dataList"
-      border
-      v-loading="dataListLoading"
-      @selection-change="selectionChangeHandle"
-      style="width: 100%;">
-      <el-table-column
-        type="selection"
-        header-align="center"
-        align="center"
-        width="50">
-      </el-table-column>
-      <!-- <el-table-column
-        prop="userId"
-        header-align="center"
-        align="center"
-        width="80"
-        label="ID">
-      </el-table-column> -->
-      <el-table-column
-        prop="username"
-        header-align="center"
-        align="center"
-        min-width="100"
-        label="用户名">
-      </el-table-column>
-      <el-table-column
-        prop="name"
-        header-align="center"
-        align="center"
-        label="姓名">
-      </el-table-column>
-      <el-table-column
-        prop="orgName"
-        header-align="center"
-        align="center"
-        min-width="140"
-        :show-tooltip-when-overflow="true"
-        label="所属机构">
-      </el-table-column>
-      <el-table-column
-        prop="mobile"
-        header-align="center"
-        align="center"
-        min-width="120"
-        label="手机号">
-      </el-table-column>
-      <el-table-column
-        prop="email"
-        header-align="center"
-        align="center"
-        min-width="120"
-        :show-tooltip-when-overflow="true"
-        label="邮箱">
-      </el-table-column>
-      <el-table-column
-        prop="status"
-        header-align="center"
-        align="center"
-        label="状态">
-        <template slot-scope="scope">
-          <el-tag v-if="scope.row.status === '0'" size="small" type="danger">禁用</el-tag>
-          <el-tag v-else size="small">正常</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column
-        prop="createTime"
-        header-align="center"
-        align="center"
-        width="160"
-        label="创建时间">
-      </el-table-column>
-      <el-table-column
-        fixed="right"
-        header-align="center"
-        align="center"
-        width="150"
-        label="操作">
-        <template slot-scope="scope">
-          <el-button v-if="isAuth('sys:user:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.userId)">修改</el-button>
-          <el-button v-if="isAuth('sys:user:delete')" type="text" size="small" @click="deleteHandle(scope.row.userId)">删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <el-pagination
-      @size-change="sizeChangeHandle"
-      @current-change="currentChangeHandle"
-      :current-page="pageIndex"
-      :page-sizes="[10, 20, 50, 100]"
-      :page-size="pageSize"
-      :total="totalPage"
-      layout="total, sizes, prev, pager, next, jumper">
-    </el-pagination>
+    <template v-if="!addOrUpdateVisible">
+      <el-form :inline="true" :model="dataForm" @keyup.enter.native="search()">
+        <el-form-item>
+          <org-component v-model="dataForm.orgId"/>
+        </el-form-item>
+        <el-form-item>
+          <el-input v-model="dataForm.userName" placeholder="用户名" clearable></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="search()">查询</el-button>
+          <el-button v-if="isAuth('sys:user:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
+          <el-button v-if="isAuth('sys:user:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
+        </el-form-item>
+      </el-form>
+      <el-table
+        :data="dataList"
+        border
+        v-loading="dataListLoading"
+        @selection-change="selectionChangeHandle"
+        style="width: 100%;">
+        <el-table-column
+          type="selection"
+          header-align="center"
+          align="center"
+          width="50">
+        </el-table-column>
+        <!-- <el-table-column
+          prop="userId"
+          header-align="center"
+          align="center"
+          width="80"
+          label="ID">
+        </el-table-column> -->
+        <el-table-column
+          prop="username"
+          header-align="center"
+          align="center"
+          min-width="100"
+          label="用户名">
+        </el-table-column>
+        <el-table-column
+          prop="name"
+          header-align="center"
+          align="center"
+          label="姓名">
+        </el-table-column>
+        <el-table-column
+          prop="orgName"
+          header-align="center"
+          align="center"
+          min-width="140"
+          :show-tooltip-when-overflow="true"
+          label="所属机构">
+        </el-table-column>
+        <el-table-column
+          prop="mobile"
+          header-align="center"
+          align="center"
+          min-width="120"
+          label="手机号">
+        </el-table-column>
+        <el-table-column
+          prop="email"
+          header-align="center"
+          align="center"
+          min-width="120"
+          :show-tooltip-when-overflow="true"
+          label="邮箱">
+        </el-table-column>
+        <el-table-column
+          prop="status"
+          header-align="center"
+          align="center"
+          label="状态">
+          <template slot-scope="scope">
+            <el-tag v-if="scope.row.status === '0'" size="small" type="danger">禁用</el-tag>
+            <el-tag v-else size="small">正常</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="createTime"
+          header-align="center"
+          align="center"
+          width="160"
+          label="创建时间">
+        </el-table-column>
+        <el-table-column
+          fixed="right"
+          header-align="center"
+          align="center"
+          width="150"
+          label="操作">
+          <template slot-scope="scope">
+            <el-button v-if="isAuth('sys:user:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.userId)">修改</el-button>
+            <el-button v-if="isAuth('sys:user:delete')" type="text" size="small" @click="deleteHandle(scope.row.userId)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        @size-change="sizeChangeHandle"
+        @current-change="currentChangeHandle"
+        :current-page="pageIndex"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="pageSize"
+        :total="totalPage"
+        layout="total, sizes, prev, pager, next, jumper">
+      </el-pagination>
+    </template>
     <!-- 弹窗, 新增 / 修改 -->
-    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"  @onChose="onChose"></add-or-update>
   </div>
 </template>
 
@@ -188,6 +190,9 @@
           this.$refs.addOrUpdate.init(id)
         })
       },
+      onChose () {
+        this.addOrUpdateVisible = false
+      },
       // 删除
       deleteHandle (id) {
         let userIds = id ? [id] : this.dataListSelections.map(item => {