From 4a67fb2baf121b81bb87dcc90d23bd949007f947 Mon Sep 17 00:00:00 2001
From: zhoupzh <zhoupzh@pcl.ac.cn>
Date: Tue, 12 Apr 2022 14:20:13 +0800
Subject: [PATCH] fix issue

---
 templates/repo/cloudbrain/image/edit.tmpl     |  1 +
 templates/repo/cloudbrain/image/submit.tmpl   | 16 ++++++-
 web_src/js/components/images/Images.vue       | 25 ++++++++---
 web_src/js/components/images/selectImages.vue | 13 +++++-
 web_src/js/features/images.js                 | 45 ++++++++++++-------
 5 files changed, 77 insertions(+), 23 deletions(-)

diff --git a/templates/repo/cloudbrain/image/edit.tmpl b/templates/repo/cloudbrain/image/edit.tmpl
index eee5c87b0..e6e7a8192 100644
--- a/templates/repo/cloudbrain/image/edit.tmpl
+++ b/templates/repo/cloudbrain/image/edit.tmpl
@@ -26,6 +26,7 @@
             <div class="submit-image-tmplvalue" style="display: none;" data-link="/image/{{$.Image.ID}}"></div>
             <div class="ui attached segment" style="padding: 2em 3em;padding-bottom: 7rem;">
                 <div class="ui form" id="form_image">
+                    <input type="hidden" name="edit" value="edit">
                     {{.CsrfTokenHtml}}
                     <input type="hidden" name="id" value="{{.Image.ID}}">
                     <div class="inline field">
diff --git a/templates/repo/cloudbrain/image/submit.tmpl b/templates/repo/cloudbrain/image/submit.tmpl
index b64d50caa..1610a8c71 100644
--- a/templates/repo/cloudbrain/image/submit.tmpl
+++ b/templates/repo/cloudbrain/image/submit.tmpl
@@ -83,4 +83,18 @@
         </div>
     </div>
 </div>
-{{template "base/footer" .}}
+
+<!-- 确认模态框 -->
+<div id="deletemodel">
+        <div class="ui modal image_confirm_submit">
+            <div class="header">{{.i18n.Tr "repo.submit_image"}}</div>
+            <div class="content text red center">
+                <p><i class="exclamation icon"></i>{{.i18n.Tr "repo.image_overwrite"}}</p>
+            </div>
+            <div class="actions">
+                <button class="ui deny small button">{{.i18n.Tr "cloudbrain.operate_cancel"}}</button>
+                <button class="ui green small approve button">{{.i18n.Tr "cloudbrain.operate_confirm"}}</button>
+            </div>
+        </div>
+    </div>
+{{template "base/footer" .}}
\ No newline at end of file
diff --git a/web_src/js/components/images/Images.vue b/web_src/js/components/images/Images.vue
index 825946fb2..cc6c93e7d 100644
--- a/web_src/js/components/images/Images.vue
+++ b/web_src/js/components/images/Images.vue
@@ -195,7 +195,7 @@
                         <el-table-column
                             prop="cloudbrainType"
                             label="可用集群"
-                            min-width="10%"
+                            min-width="9%"
                             align="center"
                             >
                             <template slot-scope="scope">
@@ -205,19 +205,34 @@
                         <el-table-column
                             prop="isPrivate"
                             label="状态"
-                            min-width="8%"
+                            min-width="10%"
                             align="center"
                             >
                             <template slot-scope="scope">
-                                <span v-if="scope.row.isPrivate" style="color: rgb(250, 140, 22);">私有</span>
-                                <span v-else style="color: rgb(19, 194, 141);">公开</span>
+                                <div style="display:flex;align-items: center;justify-content: center;">
+                                    <span v-if="scope.row.isPrivate" style="color: rgb(250, 140, 22);">私有</span>
+                                    <span v-else style="color: rgb(19, 194, 141);">公开</span>
+                                    <el-tooltip class="item" effect="dark" content="镜像提交中..." placement="top">
+                                        <i v-if="scope.row.status===0" class="CREATING" style="margin-left:0.3rem"></i>
+                                    </el-tooltip>
+                                    
+                                    <el-tooltip class="item" effect="dark" content="检测提交镜像是否大小超过20G!" placement="top">
+                                        <i v-if="scope.row.status===2" class="FAILED" style="margin-left:0.3rem"></i>
+                                    </el-tooltip>
+                                    
+                                    <el-tooltip class="item" effect="dark" content="镜像提交成功" placement="top">
+                                        <i v-if="scope.row.status===1" class="SUCCEEDED" style="margin-left:0.3rem"></i>
+                                    </el-tooltip>
+                                    
+                                </div>
+                                
                             </template>
                         </el-table-column>
                         <el-table-column
                             prop="createdUnix"
                             label="创建时间"
                             align="center"
-                            min-width="14%"
+                            min-width="13%"
                             >
                             <template slot-scope="scope">
                                 {{scope.row.createdUnix | transformTimestamp}}
diff --git a/web_src/js/components/images/selectImages.vue b/web_src/js/components/images/selectImages.vue
index 1e38e1ea9..f18c9d3bd 100644
--- a/web_src/js/components/images/selectImages.vue
+++ b/web_src/js/components/images/selectImages.vue
@@ -65,7 +65,18 @@
                             </div>
                         </div>
                         <div>
-                            <button  class="ui primary basic button mini" @click.stop.prevent="selectImages(customData.place,customData.tag)">使用</button>
+                            <button  v-if="customData.status===1" class="ui primary basic button mini" @click.stop.prevent="selectImages(customData.place,customData.tag)">使用</button>
+                            <span v-if="customData.status===0" style="display: flex;align-items: center;">
+                                <i class="CREATING"></i>
+                                <span style="margin-left: 0.4em;font-size: 12px;color: #5A5A5A;">提交中</span>
+                            </span>
+                            <span v-if="customData.status===2" style="display: flex;align-items: center;">
+                                <i class="FAILED"></i>
+                                <el-tooltip class="item" effect="dark" content="检测提交镜像是否大小超过20G！" placement="left">
+                                    <span style="margin-left: 0.4em;font-size: 12px;color:red;">提交失败</span>
+                                </el-tooltip>
+                                
+                            </span>
                         </div>
                     </div>
                     <div class="ui container" style="margin-top:50px;text-align:center">
diff --git a/web_src/js/features/images.js b/web_src/js/features/images.js
index 26179ba80..dfbb5c47b 100644
--- a/web_src/js/features/images.js
+++ b/web_src/js/features/images.js
@@ -127,23 +127,36 @@ export default async function initImage(){
         console.log(postData)
         let formData = $params(postData)
         console.log(formData)
-
-        $.ajax({
-            url:link+'/check',
-            type:'POST',
-            data:formData,
-            success:function(res){
-                console.log("res",res)
-                if(res.Code===1){
-                    $('.alert').html(res.Message).removeClass('alert-success').addClass('alert-danger').show().delay(1500).fadeOut();
-                }else if(res.Code==0){
-                    postImage(formData)
+        console.log()
+        if($("input[name='edit']").val()=="edit"){
+            postImage(formData)
+        }
+        else{
+            $.ajax({
+                url:link+'/check',
+                type:'POST',
+                data:formData,
+                success:function(res){
+                    console.log("res",res)
+                    if(res.Code===1){
+                        $('.ui.modal.image_confirm_submit')
+                        .modal({
+                            onApprove: function() {
+                                postImage(formData)
+                            },
+                            
+                        })
+                        .modal('show')
+                    }else if(res.Code==0){
+                        postImage(formData)
+                    }
+                },
+                error: function(xhr){
+                    $('.alert').html(xhr.responseText).removeClass('alert-success').addClass('alert-danger').show().delay(1500).fadeOut();
                 }
-            },
-            error: function(xhr){
-                $('.alert').html(xhr.responseText).removeClass('alert-success').addClass('alert-danger').show().delay(1500).fadeOut();
-            }
-        })
+            })
+        }
+        
     })
     $('#cancel_submit_image').click(()=>{
         if(link.includes('cloudbrain')){