新增系统模块

view/catch-admin/src/api/database.js

@@ -0,0 +1,37 @@
+/**
+ * 用户管理模块
+ *
+ */
+
+import { axios } from '@/utils/request'
+
+export function getTables (parameter) {
+  return axios({
+    url: '/tables',
+    method: 'get',
+    params: parameter
+  })
+}
+
+export function optimize (parameter) {
+  return axios({
+    url: '/table/optimize',
+    method: 'post',
+    data: parameter
+  })
+}
+
+export function backup (parameter) {
+  return axios({
+    url: '/table/backup',
+    method: 'post',
+    data: parameter
+  })
+}
+
+export function read (table) {
+  return axios({
+    url: '/table/view/' + table,
+    method: 'get'
+  })
+}

view/catch-admin/src/api/permission.js

@@ -0,0 +1,44 @@
+/**
+ * 用户管理模块
+ *
+ */
+
+import { axios } from '@/utils/request'
+
+export function getPermissionList (parameter) {
+  return axios({
+    url: '/permissions',
+    method: 'get',
+    params: parameter
+  })
+}
+
+export function store (parameter) {
+  return axios({
+    url: '/permissions',
+    method: 'post',
+    data: parameter
+  })
+}
+
+export function read (id) {
+  return axios({
+    url: '/permissions/' + id,
+    method: 'get'
+  })
+}
+
+export function update (id, parameter) {
+  return axios({
+    url: '/permissions/' + id,
+    method: 'put',
+    data: parameter
+  })
+}
+
+export function del (id) {
+  return axios({
+    url: '/permissions/' + id,
+    method: 'delete'
+  })
+}

view/catch-admin/src/config/router.config.js

@@ -94,6 +94,50 @@ export const asyncRouterMap = [
             hideChildrenInMenu: true, // 强制显示 MenuItem 而不是 SubMenu
             component: () => import('@/views/permissions/roles/roles'),
             meta: { title: '角色管理', keepAlive: true, permission: [ 'permission' ] }
+          },
+          {
+            path: '/permissions/rules',
+            name: 'rules',
+            hideChildrenInMenu: true, // 强制显示 MenuItem 而不是 SubMenu
+            component: () => import('@/views/permissions/rules/rules'),
+            meta: { title: '菜单管理', keepAlive: true, permission: [ 'permission' ] }
+          }
+        ]
+      },
+      {
+        path: '/system',
+        name: 'system',
+        component: PageView,
+        redirect: '/system',
+        meta: { title: '系统管理', icon: 'table', system: [ 'system' ] },
+        children: [
+          {
+            path: '/system/database',
+            name: 'database',
+            hideChildrenInMenu: true, // 强制显示 MenuItem 而不是 SubMenu
+            component: () => import('@/views/system/database/index'),
+            meta: { title: '数据字典', keepAlive: true, system: [ 'system' ] }
+          },
+          {
+            path: '/system/log',
+            name: 'log',
+            meta: { title: '日志管理', keepAlive: true, permission: [ 'permission' ] },
+            children: [
+              {
+                path: '/system/log/login',
+                name: 'loginLog',
+                hideChildrenInMenu: true, // 强制显示 MenuItem 而不是 SubMenu
+                component: () => import('@/views/system/log/login'),
+                meta: { title: '登录日志', keepAlive: true, system: [ 'system' ] }
+              },
+              {
+                path: '/system/log/operate',
+                name: 'operateLog',
+                hideChildrenInMenu: true, // 强制显示 MenuItem 而不是 SubMenu
+                component: () => import('@/views/system/log/operate'),
+                meta: { title: '操作日志', keepAlive: true, system: [ 'system' ] }
+              }
+            ]
           }
         ]
       },

view/catch-admin/src/core/lazy_lib/components_use.js

@@ -46,7 +46,9 @@ import {
   Skeleton,
   Popconfirm,
   message,
-  notification
+  notification,
+  TreeSelect,
+  Tree
 } from 'ant-design-vue'
 // import VueCropper from 'vue-cropper'
 
@@ -89,6 +91,8 @@ Vue.use(Skeleton)
 Vue.use(Popconfirm)
 // Vue.use(VueCropper)
 Vue.use(notification)
+Vue.use(TreeSelect)
+Vue.use(Tree)
 
 Vue.prototype.$confirm = Modal.confirm
 Vue.prototype.$message = message

view/catch-admin/src/views/permissions/roles/form/create.vue

@@ -25,14 +25,28 @@
         >
           <a-textarea v-decorator="['description']" />
         </a-form-item>
+        <a-form-item
+          label="权限"
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol">
+          <a-tree
+            checkable
+            checkStrictly
+            :treeData="permissions"
+            @check="this.onCheck"
+            :checkedKeys="permissionids"
+          >
+          </a-tree>
+        </a-form-item>
       </a-form>
     </a-spin>
   </a-modal>
 </template>
 
 <script>
-import { store, update } from '@/api/role'
+import { store, update, read } from '@/api/role'
 import pick from 'lodash.pick'
+import { getPermissionList } from '@/api/permission'
 
 export default {
   data () {
@@ -50,25 +64,45 @@ export default {
       confirmLoading: false,
       id: null,
       parent_id: 0,
-      form: this.$form.createForm(this)
+      form: this.$form.createForm(this),
+      permissions: [],
+      permissionids: []
     }
   },
   methods: {
     add () {
       this.visible = true
       this.title = '新增角色'
+      this.getPermissions()
     },
     edit (record) {
       this.visible = true
       this.title = '编辑角色'
       const { form: { setFieldsValue } } = this
       this.id = record.id
-      setFieldsValue(pick(record, ['role_name', 'description']))
+      this.getRolePermissions(this.id)
+      this.getPermissions(record.parent_id > 0 ? { role_id: record.parent_id } : {})
+      setFieldsValue(pick(record, ['role_name', 'description', 'permissions']))
     },
     addSon (record) {
       this.visible = true
       this.title = '新增子角色 (' + record.role_name + ')'
       this.parent_id = record.id
+      this.getPermissions({ role_id: this.parent_id })
+    },
+    // 获取角色权限
+    getRolePermissions (id) {
+      read(id).then((res) => {
+        const permissions = res.data.permissions
+        permissions.map(item => {
+          this.permissionids.push(item.id)
+        })
+      })
+    },
+    getPermissions (params) {
+      getPermissionList(params).then(res => {
+        this.permissions = this.resetPermissions(res.data)
+      })
     },
     handleSubmit () {
       const { form: { validateFields } } = this
@@ -76,6 +110,7 @@ export default {
       if (this.id) {
         validateFields((errors, values) => {
           if (!errors) {
+            values['permissions'] = this.permissionids
             update(this.id, values).then((res) => {
               this.refresh(res.message)
             }).catch(err => this.failed(err))
@@ -84,6 +119,7 @@ export default {
       } else {
         validateFields((errors, values) => {
           if (!errors) {
+            values['permissions'] = this.permissionids
             if (this.parent_id > 0) {
               values['parent_id'] = this.parent_id
             }
@@ -106,6 +142,7 @@ export default {
       this.id = null
       this.confirmLoading = false
       this.parent_id = 0
+      this.permissionids = []
       this.form.resetFields()
     },
     refresh (message) {
@@ -115,6 +152,38 @@ export default {
       })
       this.handleCancel()
       this.$parent.$parent.handleOk()
+    },
+    // 重组树结构
+    resetPermissions (permissions) {
+      permissions.map(item => {
+        item.title = item.permission_name
+        item.key = item.id
+        if (item.children) {
+          this.resetPermissions(item.children)
+        }
+      })
+      return permissions
+    },
+    onCheck (checkedKeys, info) {
+      const data = info.node.dataRef
+      const ids = []
+      ids.push(data.id)
+      if (data.hasOwnProperty('children')) {
+        this.getAllLeaf(data.children, ids)
+      }
+      if (info.checked) {
+        this.permissionids = this.permissionids.concat(ids)
+      } else {
+        this.permissionids = this.permissionids.filter(function (v) { return ids.indexOf(v) === -1 })
+      }
+    },
+    getAllLeaf (data, ids = []) {
+      data.forEach(item => {
+        ids.push(item.id)
+        if (item.hasOwnProperty('children')) {
+          this.getAllLeaf(item.children, ids)
+        }
+      })
     }
   }
 }

view/catch-admin/src/views/permissions/roles/roles.vue

@@ -50,7 +50,7 @@ import CreateRole from './form/create'
 import { getRoleList, del } from '@/api/role'
 
 export default {
-  name: 'Users',
+  name: 'Roles',
   components: {
     STable,
     CreateRole

view/catch-admin/src/views/permissions/rules/form/create.vue

@@ -1,6 +1,6 @@
 <template>
   <a-modal
-    title="新建用户"
+    :title="title"
     :width="640"
     :visible="visible"
     :confirmLoading="confirmLoading"
@@ -10,33 +10,65 @@
     <a-spin :spinning="confirmLoading">
       <a-form :form="form">
         <a-form-item
-          label="用户名"
+          label="菜单名称"
           type="text"
           :labelCol="labelCol"
           :wrapperCol="wrapperCol"
         >
-          <a-input v-decorator="['username', {rules: [{required: true, min: 3, message: '请输入至少3个字符！'}]}]" />
+          <a-input v-decorator="['permission_name', {rules: [{required: true, min: 2, message: '请输入至少3个字符！'}]}]" />
         </a-form-item>
         <a-form-item
-          label="邮箱"
+          label="菜单路由"
+          type="text"
           :labelCol="labelCol"
           :wrapperCol="wrapperCol"
         >
-          <a-input v-decorator="['email', {rules: [{ validator: handleEmail }]}]" />
+          <a-input v-decorator="['route', {rules: [{required: true, min: 2, message: '请输入至少3个字符！'}]}]" />
         </a-form-item>
         <a-form-item
-          label="密码"
+          label="菜单标识"
+          type="text"
           :labelCol="labelCol"
           :wrapperCol="wrapperCol"
         >
-          <a-input type="password" v-decorator="['password', {rules: [{required: true, min: 5, message: '请输入密码'}]}]" />
+          <a-input v-decorator="['permission_mark',{rules: [{required: true, min: 2, message: '请输入至少3个字符！'}]}]" />
         </a-form-item>
         <a-form-item
-          label="确认密码"
+          :label-col="labelCol"
-          :labelCol="labelCol"
+          :wrapper-col="wrapperCol"
-          :wrapperCol="wrapperCol"
+          label="请求方法"
         >
-          <a-input type="password" v-decorator="['passwordConfirm', {rules: [{required: true, min: 5, message: '请确认密码'}]}]" />
+          <a-select v-decorator="['method',{initialValue:methodValue},{rules: [{required: true}]}]">
+            <a-select-option value="GET">
+              GET
+            </a-select-option>
+            <a-select-option value="POST">
+              POST
+            </a-select-option>
+            <a-select-option value="PUT">
+              PUT
+            </a-select-option>
+            <a-select-option value="DELETE">
+              DELETE
+            </a-select-option>
+          </a-select>
+        </a-form-item>
+        <a-form-item
+          :label-col="labelCol"
+          :wrapper-col="wrapperCol"
+          label="类型"
+        >
+          <a-radio-group buttonStyle="solid" v-decorator="['type',{initialValue: typeValue},{rules: [{required: true}]}]">
+            <a-radio-button value="1">菜单</a-radio-button>
+            <a-radio-button value="2">按钮</a-radio-button>
+          </a-radio-group>
+        </a-form-item>
+        <a-form-item
+          :label-col="labelCol"
+          :wrapper-col="wrapperCol"
+          label="排序"
+        >
+          <a-input-number :min="1" v-decorator="['sort', {initialValue: sort}]" />
         </a-form-item>
       </a-form>
     </a-spin>
@@ -44,8 +76,7 @@
 </template>
 
 <script>
-import { validEmail } from '@/utils/validate'
+import { store, update } from '@/api/permission'
-import { store, update } from '@/api/user'
 import pick from 'lodash.pick'
 
 export default {
@@ -60,32 +91,42 @@ export default {
         sm: { span: 13 }
       },
       visible: false,
+      title: '新建菜单',
       confirmLoading: false,
       id: null,
-      form: this.$form.createForm(this)
+      parent_id: 0,
+      methodValue: 'GET',
+      typeValue: '2',
+      form: this.$form.createForm(this),
+      sort: 1
     }
   },
   methods: {
     add () {
       this.visible = true
+      this.title = '新增菜单'
     },
     edit (record) {
       this.visible = true
+      this.title = '编辑菜单'
       const { form: { setFieldsValue } } = this
       this.id = record.id
-      setFieldsValue(pick(record, ['username', 'email']))
+      setFieldsValue(pick(record, ['permission_name', 'route', 'permission_mark', 'method', 'type', 'sort']))
+      this.methodValue = record.method
+      this.typeValue = record.type
+      this.sort = record.sort
+      console.log(record.sort)
     },
-    handleEmail (rule, value, callback) {
+    addSon (record) {
-      if (!validEmail(value)) {
+      this.visible = true
-        callback(new Error('邮箱地址不正确'))
+      this.title = '新增子菜单 (' + record.permission_name + ')'
-      }
+      this.parent_id = record.id
-      callback()
     },
     handleSubmit () {
       const { form: { validateFields } } = this
       this.confirmLoading = true
       if (this.id) {
-        validateFields(['username', 'email'], (errors, values) => {
+        validateFields((errors, values) => {
           if (!errors) {
             update(this.id, values).then((res) => {
               this.refresh(res.message)
@@ -95,6 +136,9 @@ export default {
       } else {
         validateFields((errors, values) => {
           if (!errors) {
+            if (this.parent_id > 0) {
+              values['parent_id'] = this.parent_id
+            }
             store(values).then((res) => {
               this.refresh(res.message)
             }).catch(err => this.failed(err))
@@ -109,10 +153,14 @@ export default {
       })
       this.handleCancel()
     },
-    handleCancel (message) {
+    handleCancel () {
-      this.id = null
       this.visible = false
+      this.id = null
       this.confirmLoading = false
+      this.parent_id = 0
+      this.methodValue = 'GET'
+      this.typeValue = '2'
+      this.sort = 1
       this.form.resetFields()
     },
     refresh (message) {
@@ -120,9 +168,7 @@ export default {
         message: message,
         duration: 4
       })
-      this.visible = false
+      this.handleCancel()
-      this.form.resetFields()
-      this.id = null
       this.$parent.$parent.handleOk()
     }
   }

view/catch-admin/src/views/permissions/rules/rules.vue

@@ -0,0 +1,156 @@
+<template>
+  <a-card :bordered="false">
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline">
+        <a-row :gutter="48">
+          <a-col :md="4" :sm="24">
+            <a-input v-model="queryParam.permission_name" placeholder="请输入菜单名名称"/>
+          </a-col>
+          <a-col :md="4" :sm="24">
+            <span class="table-page-search-submitButtons">
+              <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
+              <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
+            </span>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+
+    <div class="table-operator">
+      <a-button type="primary" icon="plus" @click="$refs.permissionModal.add()">新建</a-button>
+    </div>
+
+    <s-table
+      ref="table"
+      size="default"
+      rowKey="id"
+      :bordered="true"
+      :columns="columns"
+      :data="loadData"
+      :showPagination="false"
+    >
+      <span slot="action" slot-scope="text, record">
+        <template>
+          <a @click="handleEdit(record)">编辑</a>
+          <a-divider type="vertical" />
+          <a @click="handleAddSon(record)">新增子菜单</a>
+          <a-divider type="vertical" />
+          <a @click="handleDel(record)">删除</a>
+        </template>
+      </span>
+    </s-table>
+    <create-permission ref="permissionModal" @ok="handleOk" />
+  </a-card>
+</template>
+
+<script>
+import moment from 'moment'
+import { STable } from '@/components'
+import CreatePermission from './form/create'
+import { getPermissionList, del } from '@/api/permission'
+
+export default {
+  name: 'Permissions',
+  components: {
+    STable,
+    CreatePermission
+  },
+  data () {
+    return {
+      // 查询参数
+      queryParam: {},
+      // 表头
+      columns: [
+        {
+          title: '菜单名称',
+          dataIndex: 'permission_name'
+        },
+        {
+          title: '菜单路由',
+          dataIndex: 'route'
+        },
+        {
+          title: '菜单标识',
+          dataIndex: 'permission_mark'
+        },
+        {
+          title: '请求方法',
+          dataIndex: 'method'
+        },
+        {
+          title: '类型',
+          dataIndex: 'type',
+          customRender: this.renderType
+        },
+        {
+          title: '创建时间',
+          dataIndex: 'created_at',
+          sorter: true
+        },
+        {
+          title: '更新时间',
+          dataIndex: 'updated_at',
+          sorter: true
+        },
+        {
+          title: '操作',
+          dataIndex: 'action',
+          width: '150px',
+          scopedSlots: { customRender: 'action' }
+        }
+      ],
+      // 加载数据方法 必须为 Promise 对象
+      loadData: parameter => {
+        return getPermissionList(Object.assign(parameter, this.queryParam))
+          .then(res => {
+            return res
+          })
+      }
+    }
+  },
+  methods: {
+    handleEdit (record) {
+      this.$refs.permissionModal.edit(record)
+    },
+    handleAddSon (record) {
+      this.$refs.permissionModal.addSon(record)
+    },
+    handleDel (record) {
+      this.$confirm({
+        title: '确定删除' + record.username + '吗?',
+        okText: '确定',
+        okType: 'danger',
+        cancelText: '取消',
+        onOk: () => {
+          del(record.id).then((res) => {
+            this.$notification['success']({
+              message: res.message,
+              duration: 4
+            })
+            this.handleOk()
+          }).catch(err => this.failed(err))
+        },
+        onCancel () {}
+      })
+    },
+    handleOk () {
+      this.$refs.table.refresh(true)
+    },
+    failed (errors) {
+      this.$notification['error']({
+        message: errors.message,
+        duration: 4
+      })
+      this.handleCancel()
+    },
+    resetSearchForm () {
+      this.queryParam = {
+        date: moment(new Date())
+      }
+    },
+    renderType (value, row, index) {
+      return value === 1 ? <a-button type="normal" size="small">菜单</a-button> : <a-button type="danger" size="small">按钮</a-button>
+    }
+  }
+}
+</script>

view/catch-admin/src/views/permissions/users/form/create.vue

@@ -15,28 +15,47 @@
           :labelCol="labelCol"
           :wrapperCol="wrapperCol"
         >
-          <a-input v-decorator="['username', {rules: [{required: true, min: 3, message: '请输入至少3个字符！'}]}]" />
+          <a-input allowClear v-decorator="['username', {rules: [{required: true, min: 3, message: '请输入至少3个字符！'}]}]" />
         </a-form-item>
         <a-form-item
           label="邮箱"
           :labelCol="labelCol"
           :wrapperCol="wrapperCol"
         >
-          <a-input v-decorator="['email', {rules: [{ validator: handleEmail }]}]" />
+          <a-input allowClear v-decorator="['email', {rules: [{ required: true, validator: handleEmail }]}]" />
         </a-form-item>
         <a-form-item
           label="密码"
           :labelCol="labelCol"
           :wrapperCol="wrapperCol"
         >
-          <a-input type="password" v-decorator="['password', {rules: [{required: true, min: 5, message: '请输入密码'}]}]" />
+          <a-input allowClear allotype="password" v-decorator="['password', {rules: [{required: required, min: 5, message: '请输入密码'}]}]" />
         </a-form-item>
         <a-form-item
           label="确认密码"
           :labelCol="labelCol"
           :wrapperCol="wrapperCol"
         >
-          <a-input type="password" v-decorator="['passwordConfirm', {rules: [{required: true, min: 5, message: '请确认密码'}]}]" />
+          <a-input allowClear type="password" v-decorator="['passwordConfirm', {rules: [{required: required, min: 5, message: '请确认密码'}]}]" />
+        </a-form-item>
+        <a-form-item
+          label="选择角色"
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+        >
+          <a-tree-select
+            style="width: 320px"
+            :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
+            :treeData="roles"
+            placeholder="请选择角色"
+            allowClear
+            treeCheckable
+            treeDefaultExpandAll
+            @change="onChange"
+            :showCheckedStrategy="SHOW_PARENT"
+            v-decorator="['roles', {initialValue: roleids},{rules: [{required: true, message: '请选择角色'}]}]"
+          >
+          </a-tree-select>
         </a-form-item>
       </a-form>
     </a-spin>
@@ -45,9 +64,11 @@
 
 <script>
 import { validEmail } from '@/utils/validate'
-import { store, update } from '@/api/user'
+import { store, update, read } from '@/api/user'
+import { getRoleList } from '@/api/role'
 import pick from 'lodash.pick'
-
+import { TreeSelect } from 'ant-design-vue'
+const SHOW_PARENT = TreeSelect.SHOW_PARENT
 export default {
   data () {
     return {
@@ -62,17 +83,27 @@ export default {
       visible: false,
       confirmLoading: false,
       id: null,
-      form: this.$form.createForm(this)
+      form: this.$form.createForm(this),
+      roles: [],
+      defaultRoles: [],
+      roleids: [],
+      SHOW_PARENT,
+      required: true
     }
   },
   methods: {
     add () {
       this.visible = true
+      this.getRoles()
     },
     edit (record) {
       this.visible = true
-      const { form: { setFieldsValue } } = this
+      this.required = false
       this.id = record.id
+      this.getRoles()
+      this.getUser(this.id)
+      console.log(this.defaultRoles)
+      const { form: { setFieldsValue } } = this
       setFieldsValue(pick(record, ['username', 'email']))
     },
     handleEmail (rule, value, callback) {
@@ -81,12 +112,40 @@ export default {
       }
       callback()
     },
+    // 获取角色
+    getRoles () {
+      getRoleList().then(res => {
+        this.roles = this.resetRoles(res.data)
+      })
+    },
+    // 获取用户角色
+    getUser (id) {
+      read(id).then(res => {
+        const roles = res.data.roles
+        roles.map(item => {
+          this.roleids.push(item.id)
+          this.defaultRoles.push(item.role_name)
+        })
+      })
+    },
+    // 重组树结构
+    resetRoles (roles) {
+      roles.map(item => {
+        item.title = item.role_name
+        item.value = item.id
+        if (item.children) {
+          this.resetRoles(item.children)
+        }
+      })
+      return roles
+    },
     handleSubmit () {
       const { form: { validateFields } } = this
-      this.confirmLoading = true
       if (this.id) {
-        validateFields(['username', 'email'], (errors, values) => {
+        validateFields(['username', 'email', 'roles'], (errors, values) => {
           if (!errors) {
+            this.confirmLoading = true
+            values['roles'] = this.roleids
             update(this.id, values).then((res) => {
               this.refresh(res.message)
             }).catch(err => this.failed(err))
@@ -95,6 +154,7 @@ export default {
       } else {
         validateFields((errors, values) => {
           if (!errors) {
+            this.confirmLoading = true
             store(values).then((res) => {
               this.refresh(res.message)
             }).catch(err => this.failed(err))
@@ -109,21 +169,26 @@ export default {
       })
       this.handleCancel()
     },
-    handleCancel (message) {
+    handleCancel () {
       this.id = null
       this.visible = false
+      this.required = true
       this.confirmLoading = false
       this.form.resetFields()
+      this.roleids = []
+      this.defaultRoles = []
+      this.roles = []
     },
     refresh (message) {
       this.$notification['success']({
         message: message,
         duration: 4
       })
-      this.visible = false
+      this.handleCancel()
-      this.form.resetFields()
-      this.id = null
       this.$parent.$parent.handleOk()
+    },
+    onChange (value, node, extra) {
+      this.roleids = value
     }
   }
 }

view/catch-admin/src/views/permissions/users/users.vue

@@ -18,7 +18,7 @@
           <a-col :md="4" :sm="24">
             <span class="table-page-search-submitButtons">
               <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
-              <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
+              <a-button style="margin-left: 8px" @click="resetSearchForm()">重置</a-button>
             </span>
           </a-col>
         </a-row>
@@ -63,7 +63,6 @@
 </template>
 
 <script>
-import moment from 'moment'
 import { STable } from '@/components'
 import CreateUser from './form/create'
 import { swtichStatus, del, getUserList } from '@/api/user'
@@ -80,10 +79,6 @@ export default {
       queryParam: {},
       // 表头
       columns: [
-        {
-          title: '用户ID',
-          key: 'id'
-        },
         {
           title: '用户名',
           dataIndex: 'username'
@@ -189,8 +184,6 @@ export default {
           message: res.message,
           duration: 4
         })
-        console.log(this.selectedRowKeys)
-        // this.options.rowSelection
         this.onSelectChange([], [])
         this.handleOk()
       })
@@ -200,9 +193,8 @@ export default {
       this.selectedRows = selectedRows
     },
     resetSearchForm () {
-      this.queryParam = {
+      this.queryParam = {}
-        date: moment(new Date())
+      this.handleOk()
-      }
     }
   }
 }

view/catch-admin/src/views/system/database/index.vue

@@ -1,13 +1,161 @@
 <template>
-    $END$
+  <a-card :bordered="false">
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline">
+        <a-row :gutter="48">
+          <a-col :md="4" :sm="24">
+            <a-input allowClear v-model="queryParam.tablename" placeholder="请输入表名"/>
+          </a-col>
+          <a-col :md="4" :sm="24">
+            <a-select allowClear v-model="queryParam.engine" placeholder="请选择引擎" default-value="0">
+              <a-select-option value="MyISAM">MyISAM</a-select-option>
+              <a-select-option value="InnoDB">InnoDB</a-select-option>
+            </a-select>
+          </a-col>
+          <a-col :md="4" :sm="24">
+            <span class="table-page-search-submitButtons">
+              <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
+              <a-button style="margin-left: 8px" @click="resetSearchForm()">重置</a-button>
+            </span>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+
+    <div class="table-operator" v-if="selectTables.length > 0">
+      <a-button type="primary" icon="plus" @click="optimizeTables()">优化</a-button>
+      <a-button type="primary" icon="plus" @click="backupTables">备份</a-button>
+    </div>
+
+    <s-table
+      ref="table"
+      size="default"
+      rowKey="name"
+      :bordered="true"
+      :columns="columns"
+      :data="loadData"
+      :alert="options.alert"
+      :rowSelection="options.rowSelection"
+      showPagination="auto"
+    >
+      <span slot="action" slot-scope="text, record">
+        <template>
+          <a @click="$refs.tableModal.add(record.name)">查看</a>
+        </template>
+      </span>
+    </s-table>
+    <table-view ref="tableModal" @ok="handleOk" />
+  </a-card>
 </template>
 
 <script>
-  export default {
+import { STable } from '@/components'
-    name: 'index'
+import { getTables, optimize, backup } from '@/api/database'
+import TableView from './table'
+
+export default {
+  name: 'Database',
+  components: {
+    STable,
+    TableView
+  },
+  data () {
+    return {
+      // 查询参数
+      queryParam: {},
+      // 表头
+      columns: [
+        {
+          title: '表名',
+          dataIndex: 'name'
+        },
+        {
+          title: '表引擎',
+          dataIndex: 'engine'
+        },
+        {
+          title: '字符集',
+          dataIndex: 'collation'
+        },
+        {
+          title: '数据行数',
+          dataIndex: 'rows',
+          sorter: true
+        },
+        {
+          title: '索引大小',
+          dataIndex: 'index_length',
+          sorter: true
+        },
+        {
+          title: '数据大小',
+          dataIndex: 'data_length',
+          sorter: true
+        },
+        {
+          title: '表注释',
+          dataIndex: 'comment',
+          sorter: true
+        },
+        {
+          title: '创建时间',
+          dataIndex: 'create_time',
+          sorter: true
+        },
+        {
+          title: '操作',
+          dataIndex: 'action',
+          width: '70px',
+          scopedSlots: { customRender: 'action' }
+        }
+      ],
+      // 加载数据方法 必须为 Promise 对象
+      loadData: parameter => {
+        return getTables(Object.assign(parameter, this.queryParam))
+          .then(res => {
+            return res
+          })
+      },
+      selectTables: [],
+      // custom table alert & rowSelection
+      options: {
+        alert: { show: false, clear: () => { this.selectedRowKeys = [] } },
+        rowSelection: {
+          selectedRowKeys: this.selectedRowKeys,
+          onChange: this.onSelectChange
+        }
+      }
+    }
+  },
+  methods: {
+    optimizeTables () {
+      optimize({ data: this.selectTables }).then(res => {
+        this.$notification['success']({
+          message: res.message,
+          duration: 4
+        })
+        this.selectTables = []
+      })
+    },
+    backupTables () {
+      backup({ data: this.selectTables }).then(res => {
+        this.$notification['success']({
+          message: res.message,
+          duration: 4
+        })
+        this.selectTables = []
+      })
+    },
+    handleOk () {
+      this.$refs.table.refresh(true)
+    },
+    onSelectChange (selectedRowKeys, selectedRows) {
+      this.selectTables = selectedRowKeys
+    },
+    resetSearchForm () {
+      this.queryParam = {}
+      this.handleOk()
+    }
   }
+}
 </script>
-
-<style scoped>
-
-</style>

view/catch-admin/src/views/system/database/table.vue

@@ -1,13 +1,83 @@
 <template>
-    $END$
+  <a-modal
+    bordered
+    title="表结构"
+    :width="1200"
+    rowKey="field"
+    :visible="visible"
+    @cancel="handleCancel"
+  >
+    <a-table
+      :columns="columns"
+      :dataSource="fields"
+      :pagination="false"
+    >
+    </a-table>
+  </a-modal>
 </template>
-
 <script>
-  export default {
+import { read } from '@/api/database'
-    name: 'table'
+
+export default {
+  data () {
+    return {
+      columns: [
+        {
+          title: '字段名称',
+          dataIndex: 'field'
+        },
+        {
+          title: '类型',
+          dataIndex: 'type'
+        },
+        {
+          title: '字符集',
+          dataIndex: 'collation'
+        },
+        {
+          title: 'Null',
+          dataIndex: 'null'
+        },
+        {
+          title: '索引',
+          dataIndex: 'key'
+        },
+        {
+          title: '默认值',
+          dataIndex: 'default'
+        },
+        {
+          title: '权限',
+          dataIndex: 'privileges'
+        },
+        {
+          title: '注释',
+          dataIndex: 'comment'
+        }
+      ],
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 7 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 13 }
+      },
+      visible: false,
+      fields: []
+    }
+  },
+  methods: {
+    add (name) {
+      this.visible = true
+      read(name).then(res => {
+        this.fields = res.data
+        console.log(this.fields)
+      })
+    },
+    handleCancel () {
+      this.visible = false
+    }
   }
+}
 </script>
-
-<style scoped>
-
-</style>

view/catch-admin/src/views/system/log/login.vue

@@ -1,13 +0,0 @@
-<template>
-    $END$
-</template>
-
-<script>
-  export default {
-    name: 'login'
-  }
-</script>
-
-<style scoped>
-
-</style>

view/catch-admin/src/views/system/log/operate.vue

@@ -1,13 +0,0 @@
-<template>
-    $END$
-</template>
-
-<script>
-  export default {
-    name: 'operate'
-  }
-</script>
-
-<style scoped>
-
-</style>