db同步信息

src/api/dbconfig.js

+import request from '@/utils/request'
+
+export function getConfig(query) {
+  return request({
+    url: '/dbconfig/get_db_config',
+    method: 'get',
+    params: query
+  })
+}
+
+export function saveConfig(data) {
+  return request({
+    url: '/dbconfig/save',
+    method: 'post',
+    data
+  })
+}
+
+export function deleteConfig(query) {
+  return request({
+    url: '/dbconfig/delete',
+    method: 'get',
+    params: query
+  })
+}

src/icons/svg/mysql.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1552288590959" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2511" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M1001.632 793.792c-7.84-13.856-26.016-37.536-93.12-83.2a1096.224 1096.224 0 0 0-125.152-74.144c-30.592-82.784-89.824-190.112-176.256-319.36-93.056-139.168-201.12-197.792-321.888-174.56a756.608 756.608 0 0 0-40.928-37.696C213.824 78.688 139.2 56.48 96.32 60.736c-19.424 1.952-34.016 9.056-43.36 21.088-21.664 27.904-14.432 68.064 85.504 198.912 19.008 55.616 23.072 84.672 23.072 99.296 0 30.912 15.968 66.368 49.984 110.752l-32 109.504c-28.544 97.792 23.328 224.288 71.616 268.384 25.76 23.552 47.456 20.032 58.176 15.84 21.504-8.448 38.848-29.472 50.048-89.504 5.728 14.112 11.808 29.312 18.208 45.6 34.56 87.744 68.352 136.288 106.336 152.736a32.032 32.032 0 0 0 25.44-58.688c-9.408-4.096-35.328-23.712-72.288-117.504-31.168-79.136-53.856-132.064-69.376-161.856a32.224 32.224 0 0 0-35.328-16.48 32.032 32.032 0 0 0-25.024 29.92c-3.872 91.04-13.056 130.4-19.2 147.008-26.496-30.464-68.128-125.984-47.232-197.536 20.768-71.232 32.992-112.928 36.64-125.248a31.936 31.936 0 0 0-5.888-29.28c-41.664-51.168-46.176-75.584-46.176-83.712 0-29.472-9.248-70.4-28.288-125.152a31.104 31.104 0 0 0-4.768-8.896c-53.824-70.112-73.6-105.216-80.832-121.888 25.632 1.216 74.336 15.04 91.008 29.376a660.8 660.8 0 0 1 49.024 46.304c8 8.448 19.968 11.872 31.232 8.928 100.192-25.92 188.928 21.152 271.072 144 87.808 131.328 146.144 238.048 173.408 317.216a32 32 0 0 0 16.384 18.432 1004.544 1004.544 0 0 1 128.8 75.264c7.392 5.024 14.048 9.696 20.064 14.016h-98.848a32.032 32.032 0 0 0-24.352 52.736 3098.752 3098.752 0 0 0 97.856 110.464 32 32 0 1 0 46.56-43.872 2237.6 2237.6 0 0 1-50.08-55.328h110.08a32.032 32.032 0 0 0 27.84-47.776z" p-id="2512"></path><path d="M320 289.472c12.672 21.76 22.464 37.344 29.344 46.784 8.288 16.256 21.184 29.248 29.44 45.536l2.016-1.984c14.528-9.952 25.92-49.504 2.752-75.488-12.032-18.176-51.04-17.664-63.552-14.848z" p-id="2513"></path></svg>
\ No newline at end of file

src/router/index.js

@@ -125,6 +125,19 @@ export default new Router({
 })
 
 export const asyncRouterMap = [
+  {
+    path: '/dbconfig',
+    component: Layout,
+    redirect: 'noredirect',
+    children: [
+      {
+        path: 'manager',
+        component: () => import('@/views/dbconfig/manager/index'),
+        name: 'DB同步信息管理',
+        meta: { title: 'DB同步信息管理', icon: 'mysql' }
+      }
+    ]
+  },
   {
     path: '/statistics',
     component: Layout,

src/views/dbconfig/manager/index.vue

+<template>
+  <div class="app-container">
+    <div class="filter-container" style="float:right">
+      <el-button class="filter-item" type="primary" icon="el-icon-edit" @click="handleCreate">添加</el-button>
+    </div>
+
+    <el-table
+      v-loading="listLoading"
+      :data="configs"
+      border
+      fit
+      highlight-current-row
+      style="width: 100%;">
+      <el-table-column :label="$t('table.id')" prop="id" align="center" width="65">
+        <template slot-scope="scope">
+          <span>{{ scope.$index + 1 }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="Database" prop="tag" align="center">
+        <template slot-scope="scope">
+          <span >{{ scope.row.dbname }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="Host" align="center">
+        <template slot-scope="scope">
+          <span>{{ scope.row.ip }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="Port" align="center">
+        <template slot-scope="scope">
+          <span>{{ scope.row.port }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="Tables" align="center" min-width="300">
+        <template slot-scope="scope">
+          <span>{{ scope.row.table_list }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column :label="$t('table.actions')" align="center" width="180" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">{{ $t('table.edit') }}</el-button>
+          <el-button v-if="scope.row.status!='deleted'" size="mini" type="danger" @click="handleDelete(scope.row)">{{ $t('table.delete') }}
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" /> -->
+
+    <el-dialog :title="dialogStatus" :visible.sync="dialogFormVisible">
+      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="90px" style="width: 90%; margin-left:40px;">
+        <el-form-item label="Database" prop="dbname" >
+          <el-input v-model="temp.dbname" style="width:100%"/>
+        </el-form-item>
+
+        <el-form :inline="true" :rules="rules" :model="temp" class="demo-form-inline" label-width="90px">
+          <el-form-item label="Host" prop="ip">
+            <el-input v-model="temp.ip" placeholder="数据库同步环境IP" class="input-width"/>
+          </el-form-item>
+          <el-form-item label="Port" prop="port">
+            <el-input v-model="temp.port" placeholder="数据库同步环境端口" class="input-width"/>
+          </el-form-item>
+        </el-form>
+        <el-form :inline="true" :model="temp" class="demo-form-inline" label-width="90px">
+          <el-form-item label="Username">
+            <el-input v-model="temp.username" placeholder="为空则使用默认的用户名" class="input-width"/>
+          </el-form-item>
+          <el-form-item label="Password">
+            <el-input v-model="temp.passwd" placeholder="为空则使用默认的密码" class="input-width"/>
+          </el-form-item>
+        </el-form>
+
+        <el-form-item label="Tables">
+          <el-input :autosize="{ minRows: 5, maxRows: 10}" v-model="temp.table_list" type="textarea" placeholder="需要同步数据的表列表，表名与表名之间使用空格分隔，为空则该数据库下所有的表都不进行表数据同步"/>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">{{ $t('table.cancel') }}</el-button>
+        <el-button type="primary" @click="createData()">{{ $t('table.confirm') }}</el-button>
+      </div>
+    </el-dialog>
+
+    <el-dialog :visible.sync="dialogDeleteVisible" :data="temp" title="Delete">
+      <span >
+        确定要删除{{ temp.dbname }}吗?
+      </span>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogDeleteVisible = false">{{ $t('table.cancel') }}</el-button>
+        <el-button type="primary" @click="deleteData()">{{ $t('table.confirm') }}</el-button>
+      </span>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+import { getConfig, saveConfig, deleteConfig } from '@/api/dbconfig'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+
+export default {
+  name: 'DBConfig',
+  components: { Pagination },
+  filters: {
+  },
+  data() {
+    return {
+      listLoading: true,
+      temp: {
+      },
+      dialogFormVisible: false,
+      dialogDeleteVisible: false,
+      dialogStatus: '',
+      rules: {
+        dbname: [{ required: true, message: '请输入', trigger: 'change' }],
+        ip: [{ required: true, message: '请输入', trigger: 'change' }],
+        port: [{ required: true, message: '请输入', trigger: 'change' }]
+      },
+      configs: []
+    }
+  },
+  computed: {
+
+  },
+  watch: {
+  },
+  created() {
+    this.getConfig()
+  },
+  methods: {
+    getConfig() {
+      getConfig(this.listQuery).then(res => {
+        this.configs = res.data.data
+      })
+      setTimeout(() => {
+        this.listLoading = false
+      }, 0.5 * 1000)
+    },
+
+    resetTemp() {
+      this.temp = {
+        dbname: '',
+        ip: '',
+        port: '',
+        username: '',
+        passwd: '',
+        table_list: ''
+      }
+    },
+
+    handleCreate() {
+      this.resetTemp()
+      this.dialogStatus = '新建'
+      this.dialogFormVisible = true
+    },
+
+    createData() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          saveConfig(this.temp).then(() => {
+            this.dialogFormVisible = false
+            this.$notify({
+              title: '成功',
+              message: '保存成功',
+              type: 'success',
+              duration: 2000
+            })
+            this.getConfig()
+          })
+        }
+      })
+    },
+
+    handleUpdate(row) {
+      this.temp = Object.assign({}, row) // copy obj
+      this.dialogStatus = '编辑'
+      this.dialogFormVisible = true
+    },
+
+    handleDelete(row) {
+      this.temp = row
+      this.dialogDeleteVisible = true
+    },
+
+    deleteData() {
+      const query = { _id: this.temp._id }
+      deleteConfig(query).then(() => {
+        this.dialogDeleteVisible = false
+        this.$notify({
+          title: '成功',
+          message: '删除成功',
+          type: 'success',
+          duration: 2000
+        })
+        this.getConfig()
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.input-width {
+  width: 200px;
+}
+</style>

src/views/layout/components/Navbar.vue

@@ -25,7 +25,7 @@
 
       <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
         <div class="avatar-wrapper">
-          <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
+          <img :src="navGif" class="user-avatar">
           <i class="el-icon-caret-bottom"/>
         </div>
         <el-dropdown-menu slot="dropdown">
@@ -58,6 +58,7 @@ import ErrorLog from '@/components/ErrorLog'
 // import LangSelect from '@/components/LangSelect'
 // import ThemePicker from '@/components/ThemePicker'
 // import Search from '@/components/HeaderSearch'
+import navGif from '@/assets/navbar_images/navbar.gif'
 
 export default {
   components: {
@@ -70,6 +71,11 @@ export default {
     // ThemePicker,
     // Search
   },
+  data() {
+    return {
+      navGif: navGif
+    }
+  },
   computed: {
     ...mapGetters([
       'sidebar',

src/views/login/index.vue

@@ -8,17 +8,21 @@
         <!-- <lang-select class="set-language" /> -->
       </div>
 
-      <el-form-item prop="username">
-        <span class="svg-container">
-          <svg-icon icon-class="user" />
-        </span>
-        <el-input
-          v-model="loginForm.username"
-          :placeholder="$t('login.username')"
-          name="username"
-          type="text"
-          auto-complete="on"
-        />
+      <el-form-item prop="username" >
+        <div>
+          <span class="svg-container">
+            <svg-icon icon-class="user" />
+          </span>
+          <el-input
+            v-model="loginForm.username"
+            :placeholder="$t('login.username')"
+            name="username"
+            type="text"
+            auto-complete="on"
+            style="display:inline-table;width:414px">
+            <template slot="append" style="width:100px">@quantgroup.cn</template>
+          </el-input>
+        </div>
       </el-form-item>
 
       <el-form-item prop="password">