Merge branch 'huhui' into 'master'

Huhui

See merge request QA/qahome-diamond!40

src/api/pipeline.js

@@ -128,3 +128,69 @@ export function getQualiSonar(data) {
     data
   })
 }
+export function find(pipeline_id) {
+  return request({
+    url: `/manage/pipeline/find/${pipeline_id}`,
+    method: 'get'
+  })
+}
+export function createStage(pipeline_id, data) {
+  return request({
+    url: `/manage/pipeline/${pipeline_id}/stage/create`,
+    method: 'post',
+    data
+  })
+}
+export function updateStage(pipeline_id, data) {
+  return request({
+    url: `/manage/pipeline/${pipeline_id} /stage/update`,
+    method: 'put',
+    data
+  })
+}
+export function deleteStage(pipeline_id, stage_id) {
+  return request({
+    url: `/manage/pipeline/${pipeline_id}//stage/delete/${stage_id}`,
+    method: 'delete'
+  })
+}
+export function createTask(pipeline_id, stage_id, data) {
+  return request({
+    url: `/manage/pipeline/${pipeline_id}/${stage_id}/task/create`,
+    method: 'post',
+    data
+  })
+}
+export function updateTask(pipeline_id, stage_index, data) {
+  return request({
+    url: `/manage/pipeline/${pipeline_id}/${stage_index}/task/update`,
+    method: 'put',
+    data
+  })
+}
+export function deleteTask(pipeline_id, stage_index, task_id) {
+  return request({
+    url: `/manage/pipeline/${pipeline_id}/${stage_index}/task/delete/${task_id}`,
+    method: 'delete'
+  })
+}
+export function savePipeline(data) {
+  return request({
+    url: '/manage/pipeline/create',
+    method: 'post',
+    data
+  })
+}
+export function updatePipeline(data) {
+  return request({
+    url: '/manage/pipeline/update',
+    method: 'put',
+    data
+  })
+}
+export function deletePipeline(pipeline_id) {
+  return request({
+    url: `/manage/pipeline/delete/${pipeline_id}`,
+    method: 'delete'
+  })
+}

src/router/index.js

@@ -276,6 +276,13 @@ export const asyncRouterMap = [
         name: 'qualiSonar',
         meta: { title: 'qualiSonar', icon: '' },
         hidden: true
+      },
+      {
+        path: 'managerDetail',
+        component: () => import('@/views/pipeline/managerDetail'),
+        name: 'managerDetail',
+        meta: { title: 'managerDetail', icon: '' },
+        hidden: true
       }
     ]
   },

src/views/pipeline/jobDetail.vue

 <template>
-  <el-container style="height: 400px; border-bottom: 5px solid #B3C0D1">
-    <el-aside width="500px" style="text-align: center; padding-top: 85px; border-right: 5px solid #B3C0D1">
+  <el-container style="margin-top:45px;height: 300px;width: 90%; margin-left:80px;border-bottom: 5px solid #B3C0D1; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
+    <el-aside width="500px" style="text-align: center; padding-top: 45px; border-right: 5px solid #B3C0D1">
       <el-progress :percentage="percentage" :width="220" type="circle" />
     </el-aside>
     <el-container>
@@ -73,11 +73,6 @@
   </el-container>
 </template>
 <style>
-.el-header {
-  background-color: #B3C0D1;
-  color: #333;
-  line-height: 60px;
-}
 .el-aside {
   color: #333
 }

src/views/pipeline/manager.vue

 <template>
   <div class="app-container">
-
-    <tree-table :data="pipes" :columns="pipesColunms" border/>
-
+    <h3 style="overflow: hidden">
+      流水线管理
+      <el-button type="primary" plain style="margin-right:40px;float:right" icon="el-icon-edit" @click="handleCreate">新建</el-button>
+    </h3>
+    <el-table
+      v-loading="listLoading"
+      :data="pipes"
+      border
+      fit
+      highlight-current-row
+      style="width: 100%;margin-top: 10px">
+      <el-table-column type="index" align="center" width="65"/>
+      <el-table-column label="Pipeline Name" prop="name" align="center">
+        <template slot-scope="scope">
+          <!--<a :href="'http://'+scope.row.name" target="_blank"><u>{{ scope.row.name }}</u></a>-->
+          <el-button type="info" plain size="small" @click="handleDetail(scope.row)">{{ scope.row.name }}</el-button>
+        </template>
+      </el-table-column>>
+      <el-table-column label="Pipeline Description" prop="description" width="350" align="center"/>
+      <el-table-column prop="user" label="Update User" align="center"/>
+      <el-table-column :formatter="formatDate" prop="createTime" label="Create Date" align="center"/>
+      <el-table-column label="操作" align="center" width="180">
+        <template slot-scope="scope">
+          <el-button type="primary" plain size="mini" @click="handleUpdate(scope.row)">{{ $t('table.edit') }}</el-button>
+          <el-button v-if="scope.row.status!=='deleted'" size="mini" type="danger" plain @click="handleDelete(scope.row)">{{ $t('table.delete') }}
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-dialog :title="dialogPipeStatus" :visible.sync="dialogFormVisible" width="30%">
+      <el-form label-width="100px" style="width: 80%">
+        <el-form-item label="Name *">
+          <el-input v-model="createDate.name"/>
+        </el-form-item>
+        <el-form-item label="Description *" label-width="100px">
+          <el-input v-model="createDate.description"/>
+        </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="createPipeline">{{ $t('table.confirm') }}</el-button>
+      </div>
+    </el-dialog>
+    <el-dialog :visible.sync="dialogdeletVisible" :data="updateData" title="删除" width="30%">
+      <span >
+        确定要删除 <strong>{{ updateData.name }}</strong> 吗?
+      </span>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogdeletVisible = false">{{ $t('table.cancel') }}</el-button>
+        <el-button type="primary" @click="deletePipeline">{{ $t('table.confirm') }}</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -12,40 +61,29 @@
   Created: 2018/1/19-14:54
 */
 import treeTable from '@/components/TreeTable'
-import { getFlow } from '@/api/pipeline'
+import { getFlow, savePipeline, updatePipeline, deletePipeline } from '@/api/pipeline'
+import moment from 'moment'
 
 export default {
   components: { treeTable },
   data() {
     return {
       pipes: [],
-      pipesColunms: [
-        {
-          text: 'Name',
-          value: 'name',
-          width: 200
-        },
-        {
-          text: 'ID',
-          value: 'id',
-          width: 400
-        },
-        {
-          text: 'Type',
-          value: 'type',
-          width: 200
-        },
-        {
-          text: 'Update User',
-          value: 'user',
-          width: 200
-        },
-        {
-          text: 'Create Date',
-          value: 'updateTime',
-          width: 200
-        }
-      ]
+      listLoading: true,
+      dialogPipeStatus: '',
+      dialogFormVisible: false,
+      dialogdeletVisible: false,
+      ditor: null,
+      pipeline: { description: '', name: '', stageMap: {}, type: 'flow' },
+      updateData: { createTime: '', description: '',
+        id: '',
+        logicDel: 0,
+        name: '',
+        stages: [],
+        type: 'flow',
+        updateTime: '',
+        user: '' },
+      createDate: { description: '', name: '' }
     }
   },
   created() {
@@ -71,6 +109,75 @@ export default {
 
         this.listLoading = false
       })
+    },
+    formatDate(row, val) {
+      const pattern = 'YYYY-MM-DD HH:mm:ss'
+      return moment(row.createTime).format(pattern)
+    },
+    handleCreate() {
+      this.dialogFormVisible = true
+      this.dialogPipeStatus = '新建Pipeline'
+      this.createDate = { description: '', name: '' }
+    },
+    createPipeline() {
+      if (this.dialogPipeStatus === '新建Pipeline') {
+        this.pipeline.name = this.createDate.name
+        this.pipeline.description = this.createDate.description
+        savePipeline(this.pipeline).then(res => {
+          this.dialogFormVisible = false
+          if (res.data.code === '0000') {
+            this.getFlow()
+            this.$notify({
+              title: '成功',
+              message: '保存成功',
+              type: 'success',
+              duration: 2000
+            })
+          }
+        })
+      } else {
+        this.updateData.name = this.createDate.name
+        this.updateData.description = this.createDate.description
+        updatePipeline(this.updateData).then(res => {
+          this.dialogFormVisible = false
+          if (res.data.code === '0000') {
+            this.getFlow()
+            this.$notify({
+              title: '成功',
+              message: '保存成功',
+              type: 'success',
+              duration: 2000
+            })
+          }
+        })
+      }
+    },
+    handleUpdate(row) {
+      this.dialogFormVisible = true
+      this.dialogPipeStatus = '编辑Pipeline'
+      this.createDate = JSON.parse(JSON.stringify(row))
+      this.updateData = JSON.parse(JSON.stringify(row))
+    },
+    handleDelete(row) {
+      this.dialogdeletVisible = true
+      this.updateData = Object.assign({}, row)
+    },
+    deletePipeline() {
+      deletePipeline(this.updateData.id).then(res => {
+        this.dialogdeletVisible = false
+        if (res.data.code === '0000') {
+          this.getFlow()
+          this.$notify({
+            title: '成功',
+            message: '保存成功',
+            type: 'success',
+            duration: 2000
+          })
+        }
+      })
+    },
+    handleDetail(row) {
+      this.$router.push({ name: 'managerDetail', query: { pipelineId: row.id }})
     }
   }
 }