应用管理镜像列表优化

src/pages/workbench/yygl/app_detail.vue

@@ -28,14 +28,32 @@
           
           <div v-if="now_service == 1&&now_user == 0">
               <p style="color:#8890a7;">镜像列表：</p>
-            <table-um
+            <!-- <table-um
                 :headers="header_arr"
                 :datas="image_arr"
                 :asyn_load1="asynLoad"
                 isLoad="255px"
                 @load_data="load_data"
                 @actiondelete="actiondelete"
-                ></table-um>
+                ></table-um> -->
+                <div
+                    v-if="image_arr"
+                    class="image_list_container"
+                    v-infinite-scroll="load_data"
+                  >
+                    <apass-table
+                      :header="header_arr"
+                      :data="image_arr"
+                      :padding-left="60"
+                    ></apass-table>
+                    <p style="text-align: center" v-if="image_loading">加载中...</p>
+                    <p
+                      style="text-align: center"
+                      v-if="image_noMore && image_arr.length > 0"
+                    >
+                      没有更多了
+                    </p>
+                  </div>
                 <p>
                     <span class="addimage" @click="addImage">新增镜像</span>
                 </p>
@@ -71,7 +89,7 @@
                 </div>
                 <div class="savebtn" v-if="addImageFlag">
                     <el-button @click="submit_form('form')">保存</el-button>
-                    <el-button @click="addImageFlag=false">取消</el-button>
+                    <el-button @click="close_up_image()">取消</el-button>
                 </div>
           </div>
 
@@ -132,6 +150,7 @@ import uploadFile from '@/components/upload_file'
 import serviceTabComments from '@/components/service-tabs/service-tab-comments'
 import { getRole } from "@/utils/common";
 import { mapGetters,mapState } from 'vuex'
+import apassTable from "@/components/apass-table";
 export default {
   components: {
     infoList,
@@ -140,11 +159,14 @@ export default {
     dialogAction,
     uploadFile,
     serviceTabComments,
+    apassTable
   },
   data() {
     return {
       now_user: 0, //0：普通用户，1：组织管理员，2：超级管理员
       buy_style: 0,
+      image_loading: false,
+      image_noMore: false,
       preview:'preview',
       subfield:false,
       image_arr:[],
@@ -229,32 +251,7 @@ export default {
         url:'',
       },
       now_service: 0,
-      header_arr: [
-        {
-          prop: "name",
-          label: "镜像名称",
-          minWidth: "33.33%",
-          align: "center",
-        },
-        {
-          prop: "tag",
-          label: "版本号",
-          minWidth: "33.33%",
-          align: "center",
-        },
-        {
-          label: "操作",
-          type: "Button",
-          align: "center",
-          minWidth: "33.33%",
-          btnList: [
-            {
-              type: "actiondelete",
-              label: "删除",
-            },
-          ],
-        },
-      ],
+      header_arr: [],
       
       list_arr: '',
       appcode: "",
@@ -284,7 +281,35 @@ export default {
     this.get_options()
     this.get_file_name()
   },
-  mounted() {},
+  mounted() {
+    this.header_arr = [
+        {
+          prop: "name",
+          label: "镜像名称",
+          minWidth: "33.33%",
+          align: "center",
+        },
+        {
+          prop: "tag",
+          label: "版本号",
+          minWidth: "33.33%",
+          align: "center",
+        },
+        {
+          label: "操作",
+          type: "buttons",
+          align: "center",
+          minWidth: "33.33%",
+          actionList: [
+          {
+            label: "删除",
+            class: "warn",
+            callback: this.actiondelete,
+          },
+          ],
+        },
+    ]
+  },
   methods: {
     getCurrentUser() {
       this.$api.user.getNowUser().then(({ data }) => {
@@ -336,6 +361,9 @@ export default {
             console.log(this.anotherData);
             setTimeout(()=>{
               this.$refs['upload'].submit()
+              this.$message.success('开始上传')
+              this.$refs['form'].resetFields();
+              this.addImageFlag = false
             })
           } else {
             console.log('error submit!!');
@@ -343,6 +371,10 @@ export default {
           }
         });
     },
+    close_up_image(){
+      this.$refs['form'].resetFields();
+      this.addImageFlag = false
+    },
     save_zip(){
       this.anotherData1 = {
         app_id:this.$route.params.id
@@ -369,10 +401,12 @@ export default {
       if(5*this.now_page<this.total){
         this.now_page = this.now_page + 1
         this.get_image_list()
+      }else{
+        this.image_noMore = true;
       }
     },
     get_image_list(){
-      this.image_arr = []
+      this.image_loading = true;
       this.$http.get(`/apaas/hubApi/image/imageUpList?page=${this.now_page}&size=5`)
       .then((response)=>{
         if(response.data.success==1){
@@ -380,6 +414,8 @@ export default {
           this.asynLoad=true
           this.image_arr.push(...response.data.data)
           this.total = response.data.total
+          this.image_loading = false;
+          this.image_noMore = false;
         }
       })
     },
@@ -397,6 +433,8 @@ export default {
       .then((response)=>{
         if(response.data.success==1){
           this.$message.success('删除成功')
+          this.now_page = 1
+          this.image_arr = []
           this.get_image_list()
         }else{
           this.$message.error('删除失败')
@@ -414,7 +452,7 @@ export default {
             btnCancelText: "",
             position: "",
         }
-        this.tipsOptions.message="是否删除该数据"
+        this.tipsOptions.message="是否删除该镜像？"
         this.tipsOptions.confirmSubmit = () => {
             console.log("deleteItem - ");
             this.delete_data(n.name)
@@ -662,5 +700,8 @@ export default {
     line-height: 22px;
     margin-bottom: 20px;
 }
-
+.image_list_container {
+  height: 284px;
+  overflow-y: auto;
+}
 </style>