应用管理

config/dev.env.js

@@ -2,5 +2,6 @@ module.exports = {
   NODE_ENV: '"development"',
   ENV_CONFIG: '"dev"',
   QA_API: '"http://172.30.220.22:3003"',
-  TESTDATA_API: '"http://172.30.220.22:3333"'
+  TESTDATA_API: '"http://172.30.220.22:3333"',
+  PIPELINE_API:'"http://pipes.liangkebang.com"'
 }

config/prod.env.js

@@ -2,5 +2,6 @@ module.exports = {
   NODE_ENV: '"production"',
   ENV_CONFIG: '"prod"',
   QA_API: '"http://172.30.220.22:3003"',
-  TESTDATA_API: '"http://172.30.220.22:3333"'
+  TESTDATA_API: '"http://172.30.220.22:3333"',
+  PIPELINE_API: '"http://pipes.liangkebang.com"'
 }

src/api/pipeline.js

+import request from '@/utils/requestPipeline'
+
+export function getApplications(data) {
+  return request({
+    url: '/manage/application/find',
+    method: 'post',
+    data
+  })
+}
+
+export function saveApplication(data) {
+  return request({
+    url: '/manage/application',
+    method: 'post',
+    data
+  })
+}
+
+export function updateApplication(data) {
+  return request({
+    url: '/manage/application',
+    method: 'put',
+    data
+  })
+}
+
+export function getRepos() {
+  return request({
+    url: '/manage/git/find/repo/all',
+    method: 'get'
+  })
+}
+
+export function getRefs(ref) {
+  return request({
+    url: `/manage/git/find/repo/${ref}/ref`,
+    method: 'get'
+  })
+}
+
+export function deleteApplication(params) {
+  return request({
+    url: `/manage/application/${params}`,
+    method: 'delete'
+  })
+}

src/router/index.js

@@ -125,6 +125,30 @@ export default new Router({
 })
 
 export const asyncRouterMap = [
+  {
+    path: '/pipeline',
+    component: Layout,
+    redirect: 'application',
+    name: 'Pipeline',
+    meta: {
+      title: 'Pipeline',
+      icon: 'nested'
+    },
+    children: [
+      {
+        path: '/application',
+        component: () => import('@/views/pipeline/application/index'),
+        name: 'application',
+        meta: { title: '应用管理', icon: 'example' }
+      },
+      {
+        path: '/quali',
+        component: () => import('@/views/testdata/index'),
+        name: 'quali',
+        meta: { title: '质效管理', icon: 'tab' }
+      }
+    ]
+  },
   {
     path: '/permission',
     component: Layout,

src/utils/requestPipeline.js

+import axios from 'axios'
+import { Message } from 'element-ui'
+import store from '@/store'
+import { getToken } from '@/utils/auth'
+
+// create an axios instance
+const serviceTestData = axios.create({
+  baseURL: process.env.PIPELINE_API,
+  timeout: 5000 // request timeout
+})
+
+// request interceptor
+serviceTestData.interceptors.request.use(
+  config => {
+    // Do something before request is sent
+    if (store.getters.token) {
+      // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
+      config.headers['Auth-Token'] = getToken()
+    }
+    return config
+  },
+  error => {
+    // Do something with request error
+    console.log(error) // for debug
+    Promise.reject(error)
+  }
+)
+
+// response interceptor
+serviceTestData.interceptors.response.use(
+  response => response,
+  error => {
+    console.log('err' + error) // for debug
+    Message({
+      message: error.message,
+      type: 'error',
+      duration: 5 * 1000
+    })
+    return Promise.reject(error)
+  }
+)
+
+export default serviceTestData

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.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>
+    </div>
+
+    <el-table
+      v-loading="listLoading"
+      :data="applications"
+      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="应用组名称" 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">
+        <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>
+        </template>
+      </el-table-column>
+      <el-table-column label="状态" align="center">
+        <template slot-scope="scope">
+          <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="$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="70px" style="width: 400px; margin-left:50px;">
+        <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" />
+            </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" />
+            </el-select>
+            <el-button @click="temp.repos.splice(index, 1)"> 删除</el-button>
+          </div>
+          <div style="width:600px;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-option v-for="item in noticeTypes" :value="item" :label="item " :key="item" />
+          </el-select>
+        </el-form-item>
+        <el-form-item v-if="temp.noticeType === 'dingding'" label="通知地址">
+          <el-input :autosize="{ minRows: 3, maxRows: 4}" v-model="temp.noticeAddress" type="textarea" placeholder="Please input"/>
+        </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.tag }}吗?
+      </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 { 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
+
+export default {
+  name: 'ComplexTable',
+  components: { Pagination },
+  directives: { waves },
+  filters: {
+    replaceeRef(ref) {
+      return ref.replace('refs/heads/', '')
+    }
+  },
+  data() {
+    return {
+      repository: '',
+      total: 0,
+      listLoading: true,
+      listQuery: {
+      },
+      temp: {
+      },
+      dialogFormVisible: false,
+      dialogDeleteVisible: false,
+      dialogStatus: '',
+      rules: {
+        // type: [{ required: true, message: 'type is required', trigger: 'change' }],
+        // timestamp: [{ type: 'date', required: true, message: 'timestamp is required', trigger: 'change' }],
+        // title: [{ required: true, message: 'title is required', trigger: 'blur' }]
+      },
+      noticeTypes: ['dingding', 'mail'],
+      applications: [],
+      application: [],
+      repos: [],
+      repo: '',
+      refs: [],
+      ref: undefined
+    }
+  },
+  computed: {
+
+  },
+  watch: {
+  },
+  created() {
+    this.getApplications()
+  },
+  methods: {
+    getApplications() {
+      for (const prop in this.listQuery) {
+        if (this.listQuery[prop] === '') {
+          delete this.listQuery[prop]
+        }
+      }
+      getApplications(this.listQuery).then(res => {
+        this.applications = res.data.data
+        this.listLoading = false
+      })
+      setTimeout(() => {
+        this.listLoading = false
+      }, 0.5 * 1000)
+    },
+
+    getRefs(repoID) {
+      getRefs(repoID).then(res => {
+        this.refs = res.data.data
+        this.refs.push({ id: '0', ref: '请选择' })
+        this.refs.reverse()
+      })
+    },
+
+    newRepoAndRef() {
+      this.temp.repos.push({ repository: {}, ref: {}})
+    },
+
+    handleFilter() {
+      this.getApplications()
+    },
+
+    resetTemp() {
+      this.temp = {
+        id: 0,
+        noticeAddress: '',
+        noticeType: '',
+        repos: [{ repository: { id: '请选择' }, ref: { id: '请选择' }}],
+        status: 'run',
+        tag: ''
+      }
+    },
+
+    handleCreate() {
+      this.resetTemp()
+      this.dialogStatus = '新建'
+      getRepos().then(res => {
+        this.repos = res.data.data
+        this.repos.sort((s1, s2) => {
+          return s1.name.localeCompare(s2.name)
+        })
+        this.listLoading = false
+      })
+      this.dialogFormVisible = true
+    },
+
+    createData() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          if (this.dialogStatus === '新建') {
+            saveApplication(this.temp).then(() => {
+              this.dialogFormVisible = false
+              this.$notify({
+                title: '成功',
+                message: '保存成功',
+                type: 'success',
+                duration: 2000
+              })
+              this.getApplications()
+            })
+          } else {
+            updateApplication(this.temp).then(() => {
+              this.dialogFormVisible = false
+              this.$notify({
+                title: '成功',
+                message: '保存成功',
+                type: 'success',
+                duration: 2000
+              })
+              this.getApplications()
+            })
+          }
+        }
+      })
+    },
+
+    handleUpdate(row) {
+      this.temp = Object.assign({}, row) // copy obj
+      this.dialogStatus = '编辑'
+      this.dialogFormVisible = true
+      getRepos().then(res => {
+        this.repos = res.data.data
+        this.repos.sort((s1, s2) => {
+          return s1.name.localeCompare(s2.name)
+        })
+        this.listLoading = false
+      })
+      row.repos.forEach(item => {
+        this.getRefs(item.repository.id)
+      })
+    },
+
+    handleDelete(row) {
+      this.temp = row
+      this.dialogDeleteVisible = true
+    },
+
+    deleteData() {
+      deleteApplication(this.temp.id).then(() => {
+        this.dialogDeleteVisible = false
+        this.$notify({
+          title: '成功',
+          message: '删除成功',
+          type: 'success',
+          duration: 2000
+        })
+        this.getApplications()
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.el-form-item {
+  width: 600px;
+}
+</style>