修改展示

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>