Merge branch 'test' into 'master'

Test



See merge request !2

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">

src/views/pipeline/application/index.vue

 <template>
   <div class="app-container">
     <div class="filter-container">
-      <el-input v-model="listQuery.tag" placeholder="应用组名称" clearable style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter"/>
+      <el-input v-model="listQuery.tag" placeholder="应用名称" clearable style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter"/>
       <el-input v-model="listQuery.owner" placeholder="新建用户" clearable style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter"/>
       <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">{{ $t('table.search') }}</el-button>
       <el-button class="filter-item" type="primary" icon="el-icon-edit" @click="handleCreate">添加</el-button>
@@ -19,25 +19,39 @@
           <span>{{ scope.$index + 1 }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="应用组名称" prop="tag" align="center">
+      <el-table-column label="应用名称" prop="tag" align="center">
         <template slot-scope="scope">
           <span class="link-type" @click="handleUpdate(scope.row)">{{ scope.row.tag }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="新建用户->修改用户" align="center">
+
+      <!-- <el-table-column label="状态" align="center">
         <template slot-scope="scope">
-          <span v-if="scope.row.editor">{{ scope.row.owner }}->{{ scope.row.editor }}</span>
-          <span v-if="!scope.row.editor">{{ scope.row.owner }}</span>
+          <span>{{ scope.row.status }}</span>
+        </template>
+      </el-table-column> -->
+
+      <!-- <el-table-column label="通知方式" align="center">
+        <template slot-scope="scope">
+          <span>{{ scope.row.noticeType }}</span>
+        </template>
+      </el-table-column> -->
+      <el-table-column label="项目与分支" align="center">
+        <template slot-scope="scope">
+          <div v-for="item in scope.row.repos" :key="item.id">{{ item.repository.name }} : {{ item.ref.name | replaceeRef }}</div>
         </template>
       </el-table-column>
-      <el-table-column label="状态" align="center">
+
+      <el-table-column label="新建用户->修改用户" align="center">
         <template slot-scope="scope">
-          <span>{{ scope.row.status }}</span>
+          <span v-if="scope.row.editor">{{ scope.row.owner }}->{{ scope.row.editor }}</span>
+          <span v-if="!scope.row.editor">{{ scope.row.owner }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="通知方式" align="center">
+
+      <el-table-column label="更新时间" align="center">
         <template slot-scope="scope">
-          <span>{{ scope.row.noticeType }}</span>
+          <span>{{ scope.row.updateTime | formatDate }}</span>
         </template>
       </el-table-column>
       <el-table-column :label="$t('table.actions')" align="center" width="180" class-name="small-padding fixed-width">
@@ -52,29 +66,28 @@
     <!-- <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="70px" style="width: 400px; margin-left:50px;">
-        <el-form-item label="应用名称" prop="tag">
+      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="80px" style="width: 90%; margin-left:40px;">
+        <el-form-item label="应用名称" prop="tag" >
           <el-input v-model="temp.tag"/>
         </el-form-item>
         <div >
-          <div v-for="(repoAndRefItem,index) in temp.repos" :key="repoAndRefItem.id" style="width:600px;margin-bottom:20px" >
-            <label style="margin-right:35px">项目</label>
-            <el-select v-model="repoAndRefItem.repository.id" style="width:180px" class="filter-item" @change="getRefs">
-              <el-option v-for="item in repos" :value="item.id" :label="item.name" :key="item.id" />
+          <div v-for="(repoAndRefItem,index) in temp.repos" :key="repoAndRefItem.id" style="width:110%;margin-bottom:20px" >
+            <label style="margin-right:20px">项目</label>
+            <el-select v-model="repoAndRefItem.repository" value-key="id" style="width:30%" class="filter-item" @change="getRefs">
+              <el-option v-for="item in repos" :value="item" :label="item.name" :key="item.id" />
             </el-select>
-            <label style="margin:30px">分支</label>
-            <el-select v-model="repoAndRefItem.ref.id" style="width:180px" class="filter-item">
-              <el-option v-for="item in refs" :value="item.id" :label="item.ref | replaceeRef" :key="item.id" />
+            <label style="margin:20px">分支</label>
+            <el-select v-model="repoAndRefItem.ref" value-key="id" style="width:30%" class="filter-item">
+              <el-option v-for="item in refs[repoAndRefItem.repository.id]" :value="item" :label="item.name | replaceeRef" :key="item.id" />
             </el-select>
-            <el-button @click="temp.repos.splice(index, 1)"> 删除</el-button>
+            <el-button :disabled="index===0?true:false" style="margin-left:5px" @click="temp.repos.splice(index, 1)">删除</el-button>
           </div>
-          <div style="width:600px;margin-bottom:20px" >
+          <div style="width:100%;margin-bottom:20px" >
             <el-button type="primary" style="width:100%" @click="newRepoAndRef()"> + 新增项目&分支</el-button>
           </div>
         </div>
         <el-form-item label="通知方式" prop="noticeType">
-          <!-- <label style="margin-right:10px;margin-bottom:20px">通知方式</label> -->
-          <el-select v-model="temp.noticeType" label="通知方式" >
+          <el-select v-model="temp.noticeType" label="通知方式" style="width:100%">
             <el-option v-for="item in noticeTypes" :value="item" :label="item " :key="item" />
           </el-select>
         </el-form-item>
@@ -105,6 +118,7 @@
 import { getApplications, saveApplication, updateApplication, deleteApplication, getRepos, getRefs } from '@/api/pipeline'
 import waves from '@/directive/waves' // Waves directive
 import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import moment from 'moment'
 
 export default {
   name: 'ComplexTable',
@@ -112,7 +126,10 @@ export default {
   directives: { waves },
   filters: {
     replaceeRef(ref) {
-      return ref.replace('refs/heads/', '')
+      return ref ? ref.replace('refs/heads/', '') : ''
+    },
+    formatDate(date, pattern = 'YYYY-MM-DD HH:mm:ss') {
+      return moment(date).format(pattern)
     }
   },
   data() {
@@ -128,7 +145,7 @@ export default {
       dialogDeleteVisible: false,
       dialogStatus: '',
       rules: {
-        // type: [{ required: true, message: 'type is required', trigger: 'change' }],
+        tag: [{ required: true, message: '请输入', trigger: 'change' }]
         // timestamp: [{ type: 'date', required: true, message: 'timestamp is required', trigger: 'change' }],
         // title: [{ required: true, message: 'title is required', trigger: 'blur' }]
       },
@@ -137,7 +154,7 @@ export default {
       application: [],
       repos: [],
       repo: '',
-      refs: [],
+      refs: {},
       ref: undefined
     }
   },
@@ -165,11 +182,16 @@ export default {
       }, 0.5 * 1000)
     },
 
-    getRefs(repoID) {
-      getRefs(repoID).then(res => {
-        this.refs = res.data.data
-        this.refs.push({ id: '0', ref: '请选择' })
-        this.refs.reverse()
+    getRefs(repo) {
+      getRefs(repo.id).then(res => {
+        this.refs[repo.id] = res.data.data.map(item => {
+          return {
+            id: item.id,
+            name: item.ref
+          }
+        })
+        this.refs[repo.id].push({ id: '0', name: '请选择' })
+        this.refs[repo.id].reverse()
       })
     },
 
@@ -247,7 +269,7 @@ export default {
         this.listLoading = false
       })
       row.repos.forEach(item => {
-        this.getRefs(item.repository.id)
+        this.getRefs(item.repository)
       })
     },
 
@@ -271,9 +293,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-.el-form-item {
-  width: 600px;
-}
-</style>