调整 api 目录，代码优化

src/views/components/MarkDown.vue

@@ -12,7 +12,7 @@
 import axios from 'axios'
 import { mapGetters } from 'vuex'
 import { getToken } from '@/utils/auth'
-import { del } from '@/api/picture'
+import { del } from '@/api/tools/picture'
 export default {
   name: 'Markdown',
   data() {

src/views/dashboard/LineChart.vue

@@ -6,7 +6,7 @@
 import echarts from 'echarts'
 require('echarts/theme/macarons') // echarts theme
 import { debounce } from '@/utils'
-import { getChartData } from '@/api/visits'
+import { getChartData } from '@/api/monitor/visits'
 
 export default {
   props: {

src/views/dashboard/PanelGroup.vue

@@ -49,7 +49,7 @@
 
 <script>
 import CountTo from 'vue-count-to'
-import { get } from '@/api/visits'
+import { get } from '@/api/monitor/visits'
 export default {
   components: {
     CountTo

src/views/generator/config.vue

@@ -174,9 +174,9 @@
 
 <script>
 import initData from '@/mixins/initData'
-import { update, get } from '@/api/genConfig'
-import { save } from '@/api/generator'
-import { getDicts } from '@/api/dict'
+import { update, get } from '@/api/generator/genConfig'
+import { save } from '@/api/generator/generator'
+import { getDicts } from '@/api/system/dict'
 export default {
   name: 'GeneratorConfig',
   components: {},

src/views/generator/index.vue

@@ -48,7 +48,7 @@
 <script>
 import initData from '@/mixins/initData'
 import { parseTime } from '@/utils/index'
-import { generator } from '@/api/generator'
+import { generator } from '@/api/generator/generator'
 export default {
   name: 'GeneratorIndex',
   mixins: [initData],

src/views/home.vue

@@ -32,7 +32,7 @@ import LineChart from './dashboard/LineChart'
 import RadarChart from '@/components/Echarts/RadarChart'
 import PieChart from '@/components/Echarts/PieChart'
 import BarChart from '@/components/Echarts/BarChart'
-import { count } from '@/api/visits'
+import { count } from '@/api/monitor/visits'
 
 /**
  * 记录访问，只有页面刷新或者第一次加载才会记录

src/views/monitor/log/errorLog.vue

@@ -51,7 +51,7 @@
 <script>
 import initData from '@/mixins/initData'
 import { parseTime } from '@/utils/index'
-import { getErrDetail } from '@/api/log'
+import { getErrDetail } from '@/api/monitor/log'
 import Search from './search'
 export default {
   name: 'ErrorLog',

src/views/monitor/log/search.vue

@@ -29,7 +29,7 @@
 
 <script>
 import { downloadFile } from '@/utils/index'
-import { downloadLog } from '@/api/log'
+import { downloadLog } from '@/api/monitor/log'
 export default {
   props: {
     query: {

src/views/monitor/online/index.vue

@@ -60,7 +60,7 @@
 <script>
 import initData from '@/mixins/initData'
 import { parseTime, downloadFile } from '@/utils/index'
-import { del, downloadOnline } from '@/api/online'
+import { del, downloadOnline } from '@/api/monitor/online'
 export default {
   name: 'OnlineUser',
   mixins: [initData],

src/views/monitor/redis/index.vue

@@ -64,7 +64,7 @@
 <script>
 import checkPermission from '@/utils/permission' // 权限判断函数
 import initData from '@/mixins/initData'
-import { del, delAll, downloadRedis } from '@/api/redis'
+import { del, delAll, downloadRedis } from '@/api/monitor/redis'
 import { downloadFile } from '@/utils/index'
 export default {
   name: 'Redis',

src/views/monitor/server/form.vue

@@ -22,7 +22,7 @@
 </template>
 
 <script>
-import { add, edit } from '@/api/server'
+import { add, edit } from '@/api/monitor/server'
 export default {
   props: {
     isAdd: {

src/views/monitor/server/index.vue

@@ -122,7 +122,7 @@
 <script>
 import checkPermission from '@/utils/permission'
 import initData from '@/mixins/initData'
-import { del } from '@/api/server'
+import { del } from '@/api/monitor/server'
 import eForm from './form'
 export default {
   name: 'ServerMonitor',

src/views/system/dept/form.vue

@@ -1,125 +0,0 @@
-<template>
-  <el-dialog :append-to-body="true" :close-on-click-modal="false" :before-close="cancel" :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: 370px;" />
-      </el-form-item>
-      <el-form-item v-if="form.pid !== 0" label="状态" prop="enabled">
-        <el-radio v-for="item in dicts" :key="item.id" v-model="form.enabled" :label="item.value">{{ item.label }}</el-radio>
-      </el-form-item>
-      <el-form-item v-if="form.pid !== 0" style="margin-bottom: 0px;" label="上级部门">
-        <treeselect v-model="form.pid" :options="depts" 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, getDepts } from '@/api/dept'
-import Treeselect from '@riophae/vue-treeselect'
-import '@riophae/vue-treeselect/dist/vue-treeselect.css'
-export default {
-  components: { Treeselect },
-  props: {
-    isAdd: {
-      type: Boolean,
-      required: true
-    },
-    dicts: {
-      type: Array,
-      required: true
-    }
-  },
-  data() {
-    return {
-      loading: false, dialog: false, depts: [],
-      form: {
-        id: '',
-        name: '',
-        pid: 1,
-        enabled: 'true'
-      },
-      rules: {
-        name: [
-          { required: true, message: '请输入名称', trigger: 'blur' }
-        ]
-      }
-    }
-  },
-  methods: {
-    cancel() {
-      this.resetForm()
-    },
-    doSubmit() {
-      this.$refs['form'].validate((valid) => {
-        if (valid) {
-          if (this.form.pid !== undefined) {
-            this.loading = true
-            if (this.isAdd) {
-              this.doAdd()
-            } else this.doEdit()
-          } else {
-            this.$message({
-              message: '上级部门不能为空',
-              type: 'warning'
-            })
-          }
-        }
-      })
-    },
-    doAdd() {
-      add(this.form).then(res => {
-        this.resetForm()
-        this.$notify({
-          title: '添加成功',
-          type: 'success',
-          duration: 2500
-        })
-        this.loading = false
-        this.$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.$parent.init()
-      }).catch(err => {
-        this.loading = false
-        console.log(err.response.data.message)
-      })
-    },
-    resetForm() {
-      this.dialog = false
-      this.$refs['form'].resetFields()
-      this.form = {
-        id: '',
-        name: '',
-        pid: 1,
-        enabled: 'true'
-      }
-    },
-    getDepts() {
-      getDepts({ enabled: true }).then(res => {
-        this.depts = res.content
-      })
-    }
-  }
-}
-</script>
-
-<style scoped>
-
-</style>

src/views/system/dept/index.vue

@@ -3,9 +3,9 @@
     <!--工具栏-->
     <div class="head-container">
       <!-- 搜索 -->
-      <el-input v-model="query.value" clearable size="small" placeholder="输入部门名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
+      <el-input v-model="query.name" clearable size="small" placeholder="输入部门名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
       <el-date-picker
-        v-model="query.date"
+        v-model="query.createTime"
         :default-time="['00:00:00','23:59:59']"
         type="daterange"
         range-separator=":"
@@ -20,37 +20,49 @@
       </el-select>
       <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
       <!-- 新增 -->
-      <div v-permission="['admin','dept:add']" style="display: inline-block;margin: 0px 2px;">
-        <el-button
-          class="filter-item"
-          size="mini"
-          type="primary"
-          icon="el-icon-plus"
-          @click="add"
-        >新增</el-button>
-      </div>
+      <el-button
+        class="filter-item"
+        size="mini"
+        type="primary"
+        icon="el-icon-plus"
+        @click="showAddFormDialog"
+      >新增</el-button>
       <!-- 导出 -->
-      <div style="display: inline-block;">
-        <el-button
-          :loading="downloadLoading"
-          size="mini"
-          class="filter-item"
-          type="warning"
-          icon="el-icon-download"
-          @click="download"
-        >导出</el-button>
-      </div>
+      <el-button
+        :loading="downloadLoading"
+        size="mini"
+        class="filter-item"
+        type="warning"
+        icon="el-icon-download"
+        @click="downloadMethod"
+      >导出</el-button>
     </div>
     <!--表单组件-->
-    <eForm ref="form" :is-add="isAdd" :dicts="dict.dept_status" />
+    <el-dialog :append-to-body="true" :close-on-click-modal="false" :before-close="cancel" :visible.sync="dialog" :title="getFormTitle()" 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: 370px;" />
+        </el-form-item>
+        <el-form-item v-if="form.pid !== 0" label="状态" prop="enabled">
+          <el-radio v-for="item in dict.dept_status" :key="item.id" v-model="form.enabled" :label="item.value">{{ item.label }}</el-radio>
+        </el-form-item>
+        <el-form-item v-if="form.pid !== 0" style="margin-bottom: 0px;" label="上级部门" prop="pid">
+          <treeselect v-model="form.pid" :options="depts" 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="submitMethod">确认</el-button>
+      </div>
+    </el-dialog>
     <!--表格渲染-->
-    <el-table v-loading="loading" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" :default-expand-all="expand" :data="data" row-key="id" size="small">
+    <el-table v-loading="loading" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" default-expand-all :data="data" row-key="id" size="small">
       <el-table-column label="名称" prop="name" />
       <el-table-column label="状态" align="center">
         <template slot-scope="scope">
           <el-switch
             v-model="scope.row.enabled"
-            :disabled="scope.row.id == 1"
+            :disabled="scope.row.id === 1"
             active-color="#409EFF"
             inactive-color="#F56C6C"
             @change="changeEnabled(scope.row, scope.row.enabled,)"
@@ -64,7 +76,7 @@
       </el-table-column>
       <el-table-column v-if="checkPermission(['admin','dept:edit','dept:del'])" label="操作" width="130px" align="center" fixed="right">
         <template slot-scope="scope">
-          <el-button v-permission="['admin','dept:edit']" size="mini" type="primary" icon="el-icon-edit" @click="edit(scope.row)" />
+          <el-button v-permission="['admin','dept:edit']" size="mini" type="primary" icon="el-icon-edit" @click="showEditFormDialog(scope.row)" />
           <el-popover
             :ref="scope.row.id"
             v-permission="['admin','dept:del']"
@@ -74,7 +86,7 @@
             <p>确定删除本条数据吗？</p>
             <div style="text-align: right; margin: 0">
               <el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
-              <el-button :loading="delLoading" type="primary" size="mini" @click="subDelete(scope.row.id)">确定</el-button>
+              <el-button :loading="delLoading" type="primary" size="mini" @click="delMethod(scope.row.id)">确定</el-button>
             </div>
             <el-button slot="reference" :disabled="scope.row.id === 1" type="danger" icon="el-icon-delete" size="mini" />
           </el-popover>
@@ -85,24 +97,31 @@
 </template>
 
 <script>
-import checkPermission from '@/utils/permission'
-import initData from '@/mixins/initData'
-import { del, edit, downloadDept } from '@/api/dept'
-import { parseTime, downloadFile } from '@/utils/index'
-import eForm from './form'
+import crud from '@/mixins/crud'
+import crudDept from '@/api/system/dept'
+import Treeselect from '@riophae/vue-treeselect'
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 export default {
   name: 'Dept',
-  components: { eForm },
-  mixins: [initData],
+  components: { Treeselect },
+  mixins: [crud],
   // 设置数据字典
   dicts: ['dept_status'],
   data() {
     return {
+      title: '部门',
+      crudMethod: { ...crudDept },
+      depts: [],
+      form: { id: null, name: null, pid: 1, enabled: 'true' },
+      rules: {
+        name: [
+          { required: true, message: '请输入名称', trigger: 'blur' }
+        ]
+      },
       enabledTypeOptions: [
         { key: 'true', display_name: '正常' },
         { key: 'false', display_name: '禁用' }
-      ],
-      delLoading: false, expand: true
+      ]
     }
   },
   created() {
@@ -111,61 +130,28 @@ export default {
     })
   },
   methods: {
-    parseTime,
-    checkPermission,
     beforeInit() {
       this.url = 'api/dept'
-      const sort = 'id,desc'
-      this.params = { page: this.page, size: this.size, sort: sort }
-      const query = this.query
-      const value = query.value
-      const enabled = query.enabled
-      if (value) { this.params['name'] = value }
-      if (query.date) {
-        this.params['startTime'] = query.date[0]
-        this.params['endTime'] = query.date[1]
-      }
-      if (enabled !== '' && enabled !== null) { this.params['enabled'] = enabled }
       return true
     },
-    subDelete(id) {
-      this.delLoading = true
-      del(id).then(res => {
-        this.delLoading = false
-        this.$refs[id].doClose()
-        this.init()
-        this.$notify({
-          title: '删除成功',
-          type: 'success',
-          duration: 2500
+    // 打开新增弹窗前做的操作
+    beforeShowAddForm() {
+      this.getDepts()
+    },
+    // 打开新增弹窗前做的操作
+    beforeShowEditForm(data) {
+      this.getDepts()
+      this.form.enabled = data.enabled.toString()
+    },
+    beforeSubmitMethod() {
+      if (!this.form.pid) {
+        this.$message({
+          message: '上级部门不能为空',
+          type: 'warning'
         })
-      }).catch(err => {
-        this.delLoading = false
-        this.$refs[id].doClose()
-        console.log(err.response.data.message)
-      })
-    },
-    add() {
-      this.isAdd = true
-      const _this = this.$refs.form
-      _this.getDepts()
-      _this.dialog = true
-    },
-    changeExpand() {
-      this.expand = !this.expand
-    },
-    edit(data) {
-      this.isAdd = false
-      const _this = this.$refs.form
-      _this.getDepts()
-      _this.form = {
-        id: data.id,
-        name: data.name,
-        pid: data.pid,
-        createTime: data.createTime,
-        enabled: data.enabled.toString()
+        return false
       }
-      _this.dialog = true
+      return true
     },
     // 改变状态
     changeEnabled(data, val) {
@@ -174,12 +160,8 @@ export default {
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
-        edit(data).then(res => {
-          this.$notify({
-            title: this.dict.label.dept_status[val] + '成功',
-            type: 'success',
-            duration: 2500
-          })
+        this.crudMethod.edit(data).then(res => {
+          this.notify(this.dict.label.dept_status[val] + '成功', 'success')
         }).catch(err => {
           data.enabled = !data.enabled
           console.log(err.response.data.message)
@@ -188,14 +170,9 @@ export default {
         data.enabled = !data.enabled
       })
     },
-    download() {
-      this.beforeInit()
-      this.downloadLoading = true
-      downloadDept(this.params).then(result => {
-        downloadFile(result, '部门列表', 'xlsx')
-        this.downloadLoading = false
-      }).catch(() => {
-        this.downloadLoading = false
+    getDepts() {
+      this.crudMethod.getDepts({ enabled: true }).then(res => {
+        this.depts = res.content
       })
     }
   }

src/views/system/dict/form.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script>
-import { add, edit } from '@/api/dict'
+import { add, edit } from '@/api/system/dict'
 export default {
   props: {
     isAdd: {

src/views/system/dict/index.vue

@@ -92,7 +92,7 @@
 <script>
 import checkPermission from '@/utils/permission'
 import initData from '@/mixins/initData'
-import { del, downloadDict } from '@/api/dict'
+import { del, downloadDict } from '@/api/system/dict'
 import dictDetail from '../dictDetail/index'
 import { downloadFile } from '@/utils/index'
 import eForm from './form'

src/views/system/dictDetail/form.vue

@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import { add, edit } from '@/api/dictDetail'
+import { add, edit } from '@/api/system/dictDetail'
 export default {
   props: {
     isAdd: {

src/views/system/dictDetail/index.vue

@@ -55,7 +55,7 @@
 <script>
 import checkPermission from '@/utils/permission'
 import initData from '@/mixins/initData'
-import { del } from '@/api/dictDetail'
+import { del } from '@/api/system/dictDetail'
 import eForm from './form'
 export default {
   components: { eForm },

src/views/system/job/index.vue

@@ -39,11 +39,8 @@
       >导出</el-button>
     </div>
     <!--表单渲染-->
-    <el-dialog :append-to-body="true" :close-on-click-modal="false" :before-close="hideFormDialog" :visible.sync="dialog" :title="getFormTitle()" width="500px">
+    <el-dialog :append-to-body="true" :close-on-click-modal="false" :before-close="cancel" :visible.sync="dialog" :title="getFormTitle()" width="500px">
       <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
-        <el-form-item v-show="false" label="ID" prop="id">
-          <el-input v-model="form.id" style="width: 370px;" />
-        </el-form-item>
         <el-form-item label="名称" prop="name">
           <el-input v-model="form.name" style="width: 370px;" />
         </el-form-item>
@@ -58,7 +55,7 @@
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button type="text" @click="hideFormDialog">取消</el-button>
+        <el-button type="text" @click="cancel">取消</el-button>
         <el-button :loading="loading" type="primary" @click="submitMethod">确认</el-button>
       </div>
     </el-dialog>
@@ -124,8 +121,8 @@
 
 <script>
 import crud from '@/mixins/crud'
-import crudJob from '@/api/job'
-import { getDepts } from '@/api/dept'
+import crudJob from '@/api/system/job'
+import { getDepts } from '@/api/system/dept'
 import Treeselect from '@riophae/vue-treeselect'
 import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 export default {
@@ -145,14 +142,7 @@ export default {
         { key: 'true', display_name: '正常' },
         { key: 'false', display_name: '禁用' }
       ],
-      form: {
-        id: '',
-        name: '',
-        sort: 999,
-        enabled: 'true',
-        createTime: '',
-        dept: { id: null }
-      },
+      form: { id: null, name: null, sort: 999, enabled: 'true', dept: { id: null }},
       depts: [],
       rules: {
         name: [

src/views/system/menu/form.vue

@@ -1,170 +0,0 @@
-<template>
-  <el-dialog :visible.sync="dialog" :close-on-click-modal="false" :before-close="cancel" :title="isAdd ? '新增菜单' : '编辑菜单'" append-to-body width="580px">
-    <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="80px">
-      <el-form-item label="菜单类型">
-        <el-radio-group v-model="form.type" size="mini" style="width: 178px">
-          <el-radio-button label="0">目录</el-radio-button>
-          <el-radio-button label="1">菜单</el-radio-button>
-          <el-radio-button label="2">按钮</el-radio-button>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item v-show="form.type.toString() !== '2'" label="菜单图标">
-        <el-popover
-          placement="bottom-start"
-          width="450"
-          trigger="click"
-          @show="$refs['iconSelect'].reset()"
-        >
-          <IconSelect ref="iconSelect" @selected="selected" />
-          <el-input slot="reference" v-model="form.icon" style="width: 450px;" 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 v-show="form.type.toString() !== '2'" label="外链菜单">
-        <el-radio-group v-model="form.iframe" size="mini">
-          <el-radio-button label="true">是</el-radio-button>
-          <el-radio-button label="false">否</el-radio-button>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item v-show="form.type.toString() === '1'" label="菜单缓存">
-        <el-radio-group v-model="form.cache" size="mini">
-          <el-radio-button label="true">是</el-radio-button>
-          <el-radio-button label="false">否</el-radio-button>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item v-show="form.type.toString() !== '2'" label="菜单可见">
-        <el-radio-group v-model="form.hidden" size="mini">
-          <el-radio-button label="false">是</el-radio-button>
-          <el-radio-button label="true">否</el-radio-button>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item v-show="form.type.toString() !== '2'" label="菜单标题" prop="name">
-        <el-input v-model="form.name" :style=" form.type.toString() === '0' ? 'width: 450px' : 'width: 178px'" placeholder="菜单标题" />
-      </el-form-item>
-      <el-form-item v-show="form.type.toString() === '2'" label="按钮名称">
-        <el-input v-model="form.name" placeholder="按钮名称" style="width: 178px;" />
-      </el-form-item>
-      <el-form-item v-show="form.type.toString() !== '0'" label="权限标识">
-        <el-input v-model="form.permission" :disabled="form.iframe === 'true'" placeholder="权限标识" style="width: 178px;" />
-      </el-form-item>
-      <el-form-item v-if="form.type.toString() !== '2'" label="路由地址" prop="path">
-        <el-input v-model="form.path" placeholder="路由地址" style="width: 178px;" />
-      </el-form-item>
-      <el-form-item label="菜单排序">
-        <el-input-number v-model.number="form.sort" :min="0" :max="999" controls-position="right" style="width: 178px;" />
-      </el-form-item>
-      <el-form-item v-show="form.iframe === 'false' && form.type.toString() === '1'" label="组件名称">
-        <el-input v-model="form.componentName" style="width: 178px;" placeholder="匹配组件内Name字段" />
-      </el-form-item>
-      <el-form-item v-show="form.iframe === 'false' && form.type.toString() === '1'" label="组件路径">
-        <el-input v-model="form.component" style="width: 178px;" placeholder="组件路径" />
-      </el-form-item>
-      <el-form-item label="上级类目">
-        <treeselect v-model="form.pid" :options="menus" style="width: 450px;" 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, getMenusTree } 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: {
-    isAdd: {
-      type: Boolean,
-      required: true
-    }
-  },
-  data() {
-    return {
-      loading: false, dialog: false, menus: [],
-      form: { name: '', sort: 999, path: '', component: '', componentName: '', iframe: 'false', roles: [], pid: 0, icon: '', cache: false, hidden: false, type: 0, permission: '' },
-      rules: {
-        name: [
-          { required: true, message: '请输入名称', trigger: 'blur' }
-        ],
-        path: [
-          { 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
-        this.$parent.init()
-      }).catch(() => {
-        this.loading = false
-      })
-    },
-    doEdit() {
-      edit(this.form).then(res => {
-        this.resetForm()
-        this.$notify({
-          title: '修改成功',
-          type: 'success',
-          duration: 2500
-        })
-        this.loading = false
-        this.$parent.init()
-      }).catch(() => {
-        this.loading = false
-      })
-    },
-    resetForm() {
-      this.dialog = false
-      this.$refs['form'].resetFields()
-      this.form = { name: '', sort: 999, path: '', component: '', componentName: '', iframe: 'false', roles: [], pid: 0, icon: '', cache: false, hidden: false, type: 0, permission: '' }
-    },
-    selected(name) {
-      this.form.icon = name
-    },
-    getMenus() {
-      getMenusTree().then(res => {
-        this.menus = []
-        const menu = { id: 0, label: '顶级类目', children: [] }
-        menu.children = res
-        this.menus.push(menu)
-      })
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-  /deep/ .el-input-number .el-input__inner {
-    text-align: left;
-  }
-</style>

src/views/system/menu/index.vue

@@ -3,9 +3,9 @@
     <!--工具栏-->
     <div class="head-container">
       <!-- 搜索 -->
-      <el-input v-model="query.value" clearable size="small" placeholder="模糊搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
+      <el-input v-model="query.blurry" clearable size="small" placeholder="模糊搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
       <el-date-picker
-        v-model="query.date"
+        v-model="query.createTime"
         :default-time="['00:00:00','23:59:59']"
         type="daterange"
         range-separator=":"
@@ -17,31 +17,97 @@
       />
       <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
       <!-- 新增 -->
-      <div v-permission="['admin','menu:add']" style="display: inline-block;margin: 0px 2px;">
-        <el-button
-          class="filter-item"
-          size="mini"
-          type="primary"
-          icon="el-icon-plus"
-          @click="add"
-        >新增</el-button>
-      </div>
+      <el-button
+        class="filter-item"
+        size="mini"
+        type="primary"
+        icon="el-icon-plus"
+        @click="showAddFormDialog"
+      >新增</el-button>
       <!-- 导出 -->
-      <div style="display: inline-block;">
-        <el-button
-          :loading="downloadLoading"
-          size="mini"
-          class="filter-item"
-          type="warning"
-          icon="el-icon-download"
-          @click="download"
-        >导出</el-button>
-      </div>
+      <el-button
+        :loading="downloadLoading"
+        size="mini"
+        class="filter-item"
+        type="warning"
+        icon="el-icon-download"
+        @click="downloadMethod"
+      >导出</el-button>
     </div>
-    <!--表单组件-->
-    <eForm ref="form" :is-add="isAdd" />
+    <!--表单渲染-->
+    <el-dialog :visible.sync="dialog" :close-on-click-modal="false" :before-close="cancel" :title="getFormTitle()" append-to-body width="580px">
+      <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="80px">
+        <el-form-item label="菜单类型" prop="type">
+          <el-radio-group v-model="form.type" size="mini" style="width: 178px">
+            <el-radio-button label="0">目录</el-radio-button>
+            <el-radio-button label="1">菜单</el-radio-button>
+            <el-radio-button label="2">按钮</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item v-show="form.type.toString() !== '2'" label="菜单图标" prop="icon">
+          <el-popover
+            placement="bottom-start"
+            width="450"
+            trigger="click"
+            @show="$refs['iconSelect'].reset()"
+          >
+            <IconSelect ref="iconSelect" @selected="selected" />
+            <el-input slot="reference" v-model="form.icon" style="width: 450px;" 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 v-show="form.type.toString() !== '2'" label="外链菜单" prop="iframe">
+          <el-radio-group v-model="form.iframe" size="mini">
+            <el-radio-button label="true">是</el-radio-button>
+            <el-radio-button label="false">否</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item v-show="form.type.toString() === '1'" label="菜单缓存" prop="cache">
+          <el-radio-group v-model="form.cache" size="mini">
+            <el-radio-button label="true">是</el-radio-button>
+            <el-radio-button label="false">否</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item v-show="form.type.toString() !== '2'" label="菜单可见" prop="hidden">
+          <el-radio-group v-model="form.hidden" size="mini">
+            <el-radio-button label="false">是</el-radio-button>
+            <el-radio-button label="true">否</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item v-show="form.type.toString() !== '2'" label="菜单标题" prop="name">
+          <el-input v-model="form.name" :style=" form.type.toString() === '0' ? 'width: 450px' : 'width: 178px'" placeholder="菜单标题" />
+        </el-form-item>
+        <el-form-item v-show="form.type.toString() === '2'" label="按钮名称" prop="name">
+          <el-input v-model="form.name" placeholder="按钮名称" style="width: 178px;" />
+        </el-form-item>
+        <el-form-item v-show="form.type.toString() !== '0'" label="权限标识" prop="permission">
+          <el-input v-model="form.permission" :disabled="form.iframe === 'true'" placeholder="权限标识" style="width: 178px;" />
+        </el-form-item>
+        <el-form-item v-if="form.type.toString() !== '2'" label="路由地址" prop="path">
+          <el-input v-model="form.path" placeholder="路由地址" style="width: 178px;" />
+        </el-form-item>
+        <el-form-item label="菜单排序" prop="sort">
+          <el-input-number v-model.number="form.sort" :min="0" :max="999" controls-position="right" style="width: 178px;" />
+        </el-form-item>
+        <el-form-item v-show="form.iframe === 'false' && form.type.toString() === '1'" label="组件名称" prop="componentName">
+          <el-input v-model="form.componentName" style="width: 178px;" placeholder="匹配组件内Name字段" />
+        </el-form-item>
+        <el-form-item v-show="form.iframe === 'false' && form.type.toString() === '1'" label="组件路径" prop="component">
+          <el-input v-model="form.component" style="width: 178px;" placeholder="组件路径" />
+        </el-form-item>
+        <el-form-item label="上级类目" prop="pid">
+          <treeselect v-model="form.pid" :options="menus" style="width: 450px;" 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="submitMethod">确认</el-button>
+      </div>
+    </el-dialog>
     <!--表格渲染-->
-    <el-table v-loading="loading" :data="data" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" :default-expand-all="expand" row-key="id" size="small">
+    <el-table v-loading="loading" :data="data" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" row-key="id" size="small">
       <el-table-column :show-overflow-tooltip="true" label="菜单名称" width="125px" prop="name" />
       <el-table-column prop="icon" label="图标" align="center" width="60px">
         <template slot-scope="scope">
@@ -82,7 +148,7 @@
       </el-table-column>
       <el-table-column v-if="checkPermission(['admin','menu:edit','menu:del'])" label="操作" width="130px" align="center" fixed="right">
         <template slot-scope="scope">
-          <el-button v-permission="['admin','menu:edit']" size="mini" type="primary" icon="el-icon-edit" @click="edit(scope.row)" />
+          <el-button v-permission="['admin','menu:edit']" size="mini" type="primary" icon="el-icon-edit" @click="showEditFormDialog(scope.row)" />
           <el-popover
             :ref="scope.row.id"
             v-permission="['admin','menu:del']"
@@ -92,7 +158,7 @@
             <p>确定删除吗,如果存在下级节点则一并删除，此操作不能撤销！</p>
             <div style="text-align: right; margin: 0">
               <el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
-              <el-button :loading="delLoading" type="primary" size="mini" @click="subDelete(scope.row.id)">确定</el-button>
+              <el-button :loading="delLoading" type="primary" size="mini" @click="delMethod(scope.row.id)">确定</el-button>
             </div>
             <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini" />
           </el-popover>
@@ -103,18 +169,29 @@
 </template>
 
 <script>
-import checkPermission from '@/utils/permission' // 权限判断函数
-import initData from '@/mixins/initData'
-import { del, downloadMenu } from '@/api/menu'
-import { parseTime, downloadFile } from '@/utils/index'
-import eForm from './form'
+import crud from '@/mixins/crud'
+import crudMenu from '@/api/system/menu'
+import Treeselect from '@riophae/vue-treeselect'
+import IconSelect from '@/components/IconSelect'
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 export default {
   name: 'Menu',
-  components: { eForm },
-  mixins: [initData],
+  components: { Treeselect, IconSelect },
+  mixins: [crud],
   data() {
     return {
-      delLoading: false, expand: false
+      title: '菜单',
+      crudMethod: { ...crudMenu },
+      menus: [],
+      form: { name: null, sort: 999, path: null, component: null, componentName: null, iframe: false, roles: [], pid: 0, icon: null, cache: false, hidden: false, type: 0, permission: null },
+      rules: {
+        name: [
+          { required: true, message: '请输入名称', trigger: 'blur' }
+        ],
+        path: [
+          { required: true, message: '请输入地址', trigger: 'blur' }
+        ]
+      }
     }
   },
   created() {
@@ -123,68 +200,35 @@ export default {
     })
   },
   methods: {
-    parseTime,
-    checkPermission,
     beforeInit() {
       this.url = 'api/menus'
-      const sort = 'id,desc'
-      const query = this.query
-      const value = query.value
-      this.params = { page: this.page, size: this.size, sort: sort }
-      if (value) { this.params['blurry'] = value }
-      if (query.date) {
-        this.params['startTime'] = query.date[0]
-        this.params['endTime'] = query.date[1]
-      }
       return true
     },
-    subDelete(id) {
-      this.delLoading = true
-      del(id).then(res => {
-        this.delLoading = false
-        this.$refs[id].doClose()
-        this.init()
-        this.$notify({
-          title: '删除成功',
-          type: 'success',
-          duration: 2500
-        })
-      }).catch(err => {
-        this.delLoading = false
-        this.$refs[id].doClose()
-        console.log(err.response.data.message)
-      })
+    // 打开新增弹窗前做的操作
+    beforeShowAddForm() {
+      this.getMenus()
     },
-    add() {
-      this.isAdd = true
-      this.$refs.form.getMenus()
-      this.$refs.form.dialog = true
+    // 打开新增弹窗前做的操作
+    beforeShowEditForm() {
+      this.getMenus()
     },
-    edit(data) {
-      this.isAdd = false
-      const _this = this.$refs.form
-      _this.getMenus()
-      _this.form = { id: data.id, component: data.component, componentName: data.componentName, name: data.name, sort: data.sort, pid: data.pid, path: data.path, iframe: data.iframe.toString(), roles: [], icon: data.icon, cache: data.cache, hidden: data.hidden, type: data.type, permission: data.permission }
-      _this.dialog = true
+    selected(name) {
+      this.form.icon = name
     },
-    changExpand() {
-      this.expand = !this.expand
-      this.init()
-    },
-    download() {
-      this.beforeInit()
-      this.downloadLoading = true
-      downloadMenu(this.params).then(result => {
-        downloadFile(result, '菜单列表', 'xlsx')
-        this.downloadLoading = false
-      }).catch(() => {
-        this.downloadLoading = false
+    getMenus() {
+      this.crudMethod.getMenusTree().then(res => {
+        this.menus = []
+        const menu = { id: 0, label: '顶级类目', children: [] }
+        menu.children = res
+        this.menus.push(menu)
       })
     }
   }
 }
 </script>
 
-<style scoped>
-
+<style rel="stylesheet/scss" lang="scss" scoped>
+  /deep/ .el-input-number .el-input__inner {
+    text-align: left;
+  }
 </style>

src/views/system/role/form.vue

@@ -1,149 +0,0 @@
-<template>
-  <el-dialog :visible.sync="dialog" :close-on-click-modal="false" :before-close="cancel" :title="isAdd ? '新增角色' : '编辑角色'" append-to-body width="520px">
-    <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="80px">
-      <el-form-item label="角色名称" prop="name">
-        <el-input v-model="form.name" style="width: 145px;" />
-      </el-form-item>
-      <el-form-item label="角色权限" prop="permission">
-        <el-input v-model="form.permission" style="width: 145px;" />
-      </el-form-item>
-      <el-form-item label="数据范围">
-        <el-select v-model="form.dataScope" style="width: 145px" placeholder="请选择数据范围" @change="changeScope">
-          <el-option
-            v-for="item in dateScopes"
-            :key="item"
-            :label="item"
-            :value="item"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="角色级别" prop="sort">
-        <el-input-number v-model.number="form.level" :min="1" controls-position="right" style="width: 145px;" />
-      </el-form-item>
-      <el-form-item v-if="form.dataScope === '自定义'" label="数据权限">
-        <treeselect v-model="deptIds" :options="depts" multiple style="width: 380px" placeholder="请选择" />
-      </el-form-item>
-      <el-form-item label="描述信息">
-        <el-input v-model="form.remark" style="width: 380px;" 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 { getDepts } from '@/api/dept'
-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: {
-    isAdd: {
-      type: Boolean,
-      required: true
-    }
-  },
-  data() {
-    return {
-      dateScopes: ['全部', '本级', '自定义'],
-      loading: false, dialog: false, depts: [], deptIds: [],
-      form: { name: '', depts: [], remark: '', dataScope: '本级', level: 3, permission: '' },
-      rules: {
-        name: [
-          { required: true, message: '请输入名称', trigger: 'blur' }
-        ],
-        permission: [
-          { required: true, message: '请输入权限', trigger: 'blur' }
-        ]
-      }
-    }
-  },
-  methods: {
-    cancel() {
-      this.resetForm()
-    },
-    doSubmit() {
-      if (this.form.dataScope === '自定义' && this.deptIds.length === 0) {
-        this.$message({
-          message: '自定义数据权限不能为空',
-          type: 'warning'
-        })
-      } else {
-        this.form.depts = []
-        if (this.form.dataScope === '自定义') {
-          for (let i = 0; i < this.deptIds.length; i++) {
-            this.form.depts.push({
-              id: this.deptIds[i]
-            })
-          }
-        }
-        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.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.$parent.init()
-      }).catch(err => {
-        this.loading = false
-        console.log(err.response.data.message)
-      })
-    },
-    resetForm() {
-      this.dialog = false
-      this.$refs['form'].resetFields()
-      this.form = { name: '', depts: [], remark: '', dataScope: '本级', level: 3, permission: '' }
-    },
-    getDepts() {
-      getDepts({ enabled: true }).then(res => {
-        this.depts = res.content
-      })
-    },
-    changeScope() {
-      if (this.form.dataScope === '自定义') {
-        this.getDepts()
-      }
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-  /deep/ .el-input-number .el-input__inner {
-    text-align: left;
-  }
-</style>

src/views/system/role/index.vue

@@ -1,13 +1,11 @@
 <template>
   <div class="app-container">
-    <!--表单组件-->
-    <eForm ref="form" :is-add="isAdd" />
     <!--工具栏-->
     <div class="head-container">
       <!-- 搜索 -->
-      <el-input v-model="query.value" size="small" clearable placeholder="输入名称或者描述搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
+      <el-input v-model="query.blurry" size="small" clearable placeholder="输入名称或者描述搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
       <el-date-picker
-        v-model="query.date"
+        v-model="query.createTime"
         :default-time="['00:00:00','23:59:59']"
         type="daterange"
         range-separator=":"
@@ -19,27 +17,57 @@
       />
       <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
       <!-- 新增 -->
-      <div v-permission="['admin','roles:add']" style="display: inline-block;margin: 0px 2px;">
-        <el-button
-          class="filter-item"
-          size="mini"
-          type="primary"
-          icon="el-icon-plus"
-          @click="add"
-        >新增</el-button>
-      </div>
+      <el-button
+        class="filter-item"
+        size="mini"
+        type="primary"
+        icon="el-icon-plus"
+        @click="showAddFormDialog"
+      >新增</el-button>
       <!-- 导出 -->
-      <div style="display: inline-block;">
-        <el-button
-          :loading="downloadLoading"
-          size="mini"
-          class="filter-item"
-          type="warning"
-          icon="el-icon-download"
-          @click="download"
-        >导出</el-button>
-      </div>
+      <el-button
+        :loading="downloadLoading"
+        size="mini"
+        class="filter-item"
+        type="warning"
+        icon="el-icon-download"
+        @click="downloadMethod"
+      >导出</el-button>
     </div>
+    <!-- 表单渲染 -->
+    <el-dialog :visible.sync="dialog" :close-on-click-modal="false" :before-close="cancel" :title="getFormTitle()" append-to-body width="520px">
+      <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="80px">
+        <el-form-item label="角色名称" prop="name">
+          <el-input v-model="form.name" style="width: 145px;" />
+        </el-form-item>
+        <el-form-item label="角色权限" prop="permission">
+          <el-input v-model="form.permission" style="width: 145px;" />
+        </el-form-item>
+        <el-form-item label="数据范围" prop="dataScope">
+          <el-select v-model="form.dataScope" style="width: 145px" placeholder="请选择数据范围" @change="changeScope">
+            <el-option
+              v-for="item in dateScopes"
+              :key="item"
+              :label="item"
+              :value="item"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="角色级别" prop="level">
+          <el-input-number v-model.number="form.level" :min="1" controls-position="right" style="width: 145px;" />
+        </el-form-item>
+        <el-form-item v-if="form.dataScope === '自定义'" label="数据权限" prop="depts">
+          <treeselect v-model="form.depts" :options="depts" multiple style="width: 380px" placeholder="请选择" />
+        </el-form-item>
+        <el-form-item label="描述信息" prop="remark">
+          <el-input v-model="form.remark" style="width: 380px;" 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="submitMethod">确认</el-button>
+      </div>
+    </el-dialog>
     <el-row :gutter="15">
       <!--角色管理-->
       <el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="17" style="margin-bottom: 10px">
@@ -53,14 +81,14 @@
             <el-table-column prop="permission" label="角色权限" />
             <el-table-column prop="level" label="角色级别" />
             <el-table-column :show-overflow-tooltip="true" prop="remark" label="描述" />
-            <el-table-column :show-overflow-tooltip="true" width="130px" prop="createTime" label="创建日期">
+            <el-table-column :show-overflow-tooltip="true" width="135px" prop="createTime" label="创建日期">
               <template slot-scope="scope">
                 <span>{{ parseTime(scope.row.createTime) }}</span>
               </template>
             </el-table-column>
             <el-table-column v-if="checkPermission(['admin','roles:edit','roles:del'])" label="操作" width="130px" align="center" fixed="right">
               <template slot-scope="scope">
-                <el-button v-permission="['admin','roles:edit']" size="mini" type="primary" icon="el-icon-edit" @click="edit(scope.row)" />
+                <el-button v-permission="['admin','roles:edit']" size="mini" type="primary" icon="el-icon-edit" @click="showEditFormDialog(scope.row)" />
                 <el-popover
                   :ref="scope.row.id"
                   v-permission="['admin','roles:del']"
@@ -70,7 +98,7 @@
                   <p>确定删除本条数据吗？</p>
                   <div style="text-align: right; margin: 0">
                     <el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
-                    <el-button :loading="delLoading" type="primary" size="mini" @click="subDelete(scope.row.id)">确定</el-button>
+                    <el-button :loading="delLoading" type="primary" size="mini" @click="delMethod(scope.row.id)">确定</el-button>
                   </div>
                   <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini" />
                 </el-popover>
@@ -88,7 +116,7 @@
           />
         </el-card>
       </el-col>
-      <!-- 授权 -->
+      <!-- 菜单授权 -->
       <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="7">
         <el-card class="box-card" shadow="never">
           <div slot="header" class="clearfix">
@@ -123,25 +151,36 @@
 </template>
 
 <script>
-import checkPermission from '@/utils/permission'
-import initData from '@/mixins/initData'
-import { del } from '@/api/role'
-import { getMenusTree } from '@/api/menu'
-import { parseTime, downloadFile } from '@/utils/index'
-import eForm from './form'
-import { editMenu, get, downloadRole } from '@/api/role'
+import crud from '@/mixins/crud'
+import crudRoles from '@/api/system/role'
+import { getDepts } from '@/api/system/dept'
+import { getMenusTree } from '@/api/system/menu'
+import Treeselect from '@riophae/vue-treeselect'
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 export default {
   name: 'Role',
-  components: { eForm },
-  mixins: [initData],
+  components: { Treeselect },
+  mixins: [crud],
   data() {
     return {
       defaultProps: {
         children: 'children',
         label: 'label'
       },
+      title: '角色',
+      dateScopes: ['全部', '本级', '自定义'],
+      crudMethod: { ...crudRoles },
       currentId: 0, menuLoading: false, showButton: false,
-      delLoading: false, menus: [], menuIds: []
+      menus: [], menuIds: [], depts: [],
+      form: { name: null, depts: [], remark: null, dataScope: null, level: 3, permission: null },
+      rules: {
+        name: [
+          { required: true, message: '请输入名称', trigger: 'blur' }
+        ],
+        permission: [
+          { required: true, message: '请输入权限', trigger: 'blur' }
+        ]
+      }
     }
   },
   created() {
@@ -151,41 +190,42 @@ export default {
     })
   },
   methods: {
-    parseTime,
-    checkPermission,
     beforeInit() {
       this.showButton = false
       this.url = 'api/roles'
-      const sort = 'level,asc'
-      const query = this.query
-      const value = query.value
-      this.params = { page: this.page, size: this.size, sort: sort }
-      if (value) { this.params['blurry'] = value }
-      if (query.date) {
-        this.params['startTime'] = query.date[0]
-        this.params['endTime'] = query.date[1]
-      }
+      this.sort = 'level,asc'
       // 清空菜单的选中
       this.$refs.menu.setCheckedKeys([])
       return true
     },
-    subDelete(id) {
-      this.delLoading = true
-      del(id).then(res => {
-        this.delLoading = false
-        this.$refs[id].doClose()
-        this.dleChangePage()
-        this.init()
-        this.$notify({
-          title: '删除成功',
-          type: 'success',
-          duration: 2500
-        })
-      }).catch(err => {
-        this.delLoading = false
-        this.$refs[id].doClose()
-        console.log(err.response.data.message)
+    // 打开编辑弹窗前做的操作
+    beforeShowEditForm(data) {
+      if (data.dataScope === '自定义') {
+        this.getDepts()
+      }
+      const depts = []
+      data.depts.forEach(function(dept, index) {
+        depts.push(dept.id)
       })
+      this.form.depts = depts
+    },
+    // 提交前做的操作
+    beforeSubmitMethod() {
+      if (this.form.dataScope === '自定义' && this.form.depts.length === 0) {
+        this.$message({
+          message: '自定义数据权限不能为空',
+          type: 'warning'
+        })
+        return false
+      } else {
+        const depts = []
+        this.form.depts.forEach(function(data, index) {
+          const dept = { id: data }
+          depts.push(dept)
+        })
+        this.form.depts = depts
+      }
+      return true
     },
     getMenus() {
       getMenusTree().then(res => {
@@ -222,12 +262,8 @@ export default {
         const menu = { id: data }
         role.menus.push(menu)
       })
-      editMenu(role).then(res => {
-        this.$notify({
-          title: '保存成功',
-          type: 'success',
-          duration: 2500
-        })
+      this.crudMethod.editMenu(role).then(res => {
+        this.notify('保存成功', 'success')
         this.menuLoading = false
         this.update()
       }).catch(err => {
@@ -237,7 +273,7 @@ export default {
     },
     update() {
       // 无刷新更新 表格数据
-      get(this.currentId).then(res => {
+      this.crudMethod.get(this.currentId).then(res => {
         for (let i = 0; i < this.data.length; i++) {
           if (res.id === this.data[i].id) {
             this.data[i] = res
@@ -246,32 +282,15 @@ export default {
         }
       })
     },
-    add() {
-      this.isAdd = true
-      this.$refs.form.dialog = true
-    },
-    edit(data) {
-      this.isAdd = false
-      const _this = this.$refs.form
-      _this.deptIds = []
-      _this.form = { id: data.id, name: data.name, remark: data.remark, depts: data.depts, dataScope: data.dataScope, level: data.level, permission: data.permission }
-      if (_this.form.dataScope === '自定义') {
-        _this.getDepts()
-      }
-      for (let i = 0; i < _this.form.depts.length; i++) {
-        _this.deptIds[i] = _this.form.depts[i].id
-      }
-      _this.dialog = true
-    },
-    download() {
-      this.beforeInit()
-      this.downloadLoading = true
-      downloadRole(this.params).then(result => {
-        downloadFile(result, '角色列表', 'xlsx')
-        this.downloadLoading = false
-      }).catch(() => {
-        this.downloadLoading = false
+    getDepts() {
+      getDepts({ enabled: true }).then(res => {
+        this.depts = res.content
       })
+    },
+    changeScope() {
+      if (this.form.dataScope === '自定义') {
+        this.getDepts()
+      }
     }
   }
 }
@@ -284,8 +303,8 @@ export default {
   }
 </style>
 
-<style scoped>
-  /deep/ .el-tree-node__label{
-    margin-left: 5px;
+<style rel="stylesheet/scss" lang="scss" scoped>
+  /deep/ .el-input-number .el-input__inner {
+    text-align: left;
   }
 </style>

src/views/system/timing/index.vue

@@ -136,7 +136,7 @@
 <script>
 import checkPermission from '@/utils/permission'
 import initData from '@/mixins/initData'
-import { del, updateIsPause, execution, add, edit, downloadJobs } from '@/api/timing'
+import { del, updateIsPause, execution, add, edit, downloadJobs } from '@/api/system/timing'
 import { parseTime, downloadFile } from '@/utils/index'
 import Log from './log'
 export default {

src/views/system/timing/log.vue

@@ -75,7 +75,7 @@
 <script>
 import checkPermission from '@/utils/permission'
 import initData from '@/mixins/initData'
-import { downloadLogs } from '@/api/timing'
+import { downloadLogs } from '@/api/system/timing'
 import { parseTime, downloadFile } from '@/utils/index'
 export default {
   mixins: [initData],

src/views/system/user/center/updateEmail.vue

@@ -24,8 +24,8 @@
 <script>
 import store from '@/store'
 import { validEmail } from '@/utils/validate'
-import { updateEmail } from '@/api/user'
-import { resetEmail } from '@/api/code'
+import { updateEmail } from '@/api/system/user'
+import { resetEmail } from '@/api/system/code'
 export default {
   props: {
     email: {

src/views/system/user/center/updatePass.vue

@@ -22,7 +22,7 @@
 
 <script>
 import store from '@/store'
-import { updatePass } from '@/api/user'
+import { updatePass } from '@/api/system/user'
 export default {
   data() {
     const confirmPass = (rule, value, callback) => {

src/views/system/user/index.vue

@@ -48,7 +48,7 @@
           >导出</el-button>
         </div>
         <!--表单渲染-->
-        <el-dialog :visible.sync="dialog" :close-on-click-modal="false" :before-close="hideFormDialog" :title="getFormTitle()" append-to-body width="570px">
+        <el-dialog :visible.sync="dialog" :close-on-click-modal="false" :before-close="cancel" :title="getFormTitle()" append-to-body width="570px">
           <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="66px">
             <el-form-item label="用户名" prop="username">
               <el-input v-model="form.username" />
@@ -88,7 +88,7 @@
             </el-form-item>
           </el-form>
           <div slot="footer" class="dialog-footer">
-            <el-button type="text" @click="hideFormDialog">取消</el-button>
+            <el-button type="text" @click="cancel">取消</el-button>
             <el-button :loading="loading" type="primary" @click="submitMethod">确认</el-button>
           </div>
         </el-dialog>
@@ -152,11 +152,11 @@
 
 <script>
 import crud from '@/mixins/crud'
-import crudUser from '@/api/user'
+import crudUser from '@/api/system/user'
 import { isvalidPhone } from '@/utils/validate'
-import { getDepts } from '@/api/dept'
-import { getAll, getLevel } from '@/api/role'
-import { getAllJob } from '@/api/job'
+import { getDepts } from '@/api/system/dept'
+import { getAll, getLevel } from '@/api/system/role'
+import { getAllJob } from '@/api/system/job'
 import Treeselect from '@riophae/vue-treeselect'
 import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 export default {

src/views/tools/aliPay/config.vue

@@ -31,7 +31,7 @@
 </template>
 
 <script>
-import { get, update } from '@/api/alipay'
+import { get, update } from '@/api/tools/alipay'
 export default {
   name: 'Config',
   data() {

src/views/tools/aliPay/toPay.vue

@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import { toAliPay } from '@/api/alipay'
+import { toAliPay } from '@/api/tools/alipay'
 export default {
   data() {
     return {

src/views/tools/email/config.vue

@@ -27,7 +27,7 @@
 </template>
 
 <script>
-import { get, update } from '@/api/email'
+import { get, update } from '@/api/tools/email'
 export default {
   name: 'Config',
   data() {

src/views/tools/email/send.vue

@@ -22,7 +22,7 @@
 <script>
 import { mapGetters } from 'vuex'
 import { getToken } from '@/utils/auth'
-import { send } from '@/api/email'
+import { send } from '@/api/tools/email'
 import { validEmail } from '@/utils/validate'
 import E from 'wangeditor'
 export default {

src/views/tools/picture/index.vue

@@ -123,7 +123,7 @@ import checkPermission from '@/utils/permission' // 权限判断函数
 import initData from '@/mixins/initData'
 import { parseTime, downloadFile } from '@/utils/index'
 import { mapGetters } from 'vuex'
-import { del, delAll, downloadPicture } from '@/api/picture'
+import { del, delAll, downloadPicture } from '@/api/tools/picture'
 import { getToken } from '@/utils/auth'
 export default {
   name: 'Pictures',

src/views/tools/storage/local/form.vue

@@ -31,7 +31,7 @@
 <script>
 import { mapGetters } from 'vuex'
 import { getToken } from '@/utils/auth'
-import { edit } from '@/api/localStorage'
+import { edit } from '@/api/tools/localStorage'
 export default {
   props: {
     isAdd: {

src/views/tools/storage/local/index.vue

@@ -140,7 +140,7 @@
 import { mapGetters } from 'vuex'
 import checkPermission from '@/utils/permission'
 import initData from '@/mixins/initData'
-import { del, delAll, downloadStorage } from '@/api/localStorage'
+import { del, delAll, downloadStorage } from '@/api/tools/localStorage'
 import { parseTime, downloadFile } from '@/utils/index'
 import eForm from './form'
 export default {

src/views/tools/storage/qiniu/form.vue

@@ -37,7 +37,7 @@
 </template>
 
 <script>
-import { get, update } from '@/api/qiniu'
+import { get, update } from '@/api/tools/qiniu'
 export default {
   data() {
     return {

src/views/tools/storage/qiniu/index.vue

@@ -125,7 +125,7 @@
 
 <script>
 import initData from '@/mixins/initData'
-import { del, download, sync, delAll, downloadQiNiu } from '@/api/qiniu'
+import { del, download, sync, delAll, downloadQiNiu } from '@/api/tools/qiniu'
 import { parseTime, downloadFile } from '@/utils/index'
 import { mapGetters } from 'vuex'
 import { getToken } from '@/utils/auth'