NEZ-3475 feat: 下载c2v文件按钮增加confirm弹窗

nezha-fronted/src/assets/css/components/page/config/system/license.scss

@@ -2,8 +2,6 @@
 .license {
   display: flex;
   justify-content: flex-start;
-  height: calc(100% - 20px) !important;
-  //margin: 10px;
   padding: 10px;
   box-sizing: border-box;
   background: $--background-color-empty;
@@ -207,4 +205,47 @@
     border: 1px solid $--border-color-light;
     border-color: $--border-color-light;
   }
+
+  .el-dialog{
+    .el-dialog__header{
+      padding: 16px 20px;
+      border: none;
+      height: unset;
+      line-height: unset;
+      .el-dialog__title{
+        font-size: 14px;
+        font-weight: 600;
+      }
+      .el-dialog__headerbtn{
+        line-height: normal;
+      }
+    }
+    .el-dialog__body{
+      padding-top: 0 !important;
+    }
+    .el-dialog__footer{
+      padding: 20px;
+      .nz-btn.nz-btn-size-normal{
+        height: 32px;
+        line-height: 32px;
+        font-size: 14px;
+      }
+    }
+    .check-tip{
+      word-break: break-word;
+      font-size: 14px;
+      color: $--color-text-regular;
+      line-height: 20px;
+      margin-top: 6px;
+      &:first-of-type{
+        margin-top: 0;
+      }
+      &.isCheck{
+        .el-checkbox__label{
+          color: $--color-text-primary !important;
+          padding-left: 6px;
+        }
+      }
+    }
+  }
 }

nezha-fronted/src/components/page/config/system/license.vue

@@ -44,7 +44,7 @@
         </div>
       </div>
       <div class="license-left-footer">
-        <div class="license-left-footer-download" @click="downloadLicense">
+        <div class="license-left-footer-download" @click="checkVisible = true">
           <i class="nz-icon nz-icon-download"></i><span>{{$t('license.downloadID')}}</span>
         </div>
         <div class="license-left-footer-download" @click="openQrcode" style="margin-left: 5px">
@@ -163,6 +163,28 @@
         </div>
       </div>
     </el-dialog>
+
+    <el-dialog
+      class="nz-dialog"
+      :title="$t('license.downloadID')"
+      :show-close="true"
+      :visible.sync="checkVisible"
+      width="480px"
+      @close="closeCheckDialog"
+      >
+      <p class="check-tip">{{$t('license.check')}}</p>
+      <p class="check-tip">{{$t('license.check1')}}</p>
+      <p class="check-tip">{{$t('license.check2')}}</p>
+      <p class="check-tip">{{$t('license.check3')}}</p>
+      <p class="check-tip">{{$t('license.check4')}}</p>
+      <p class="check-tip isCheck">
+        <el-checkbox v-model="checkCompleted">{{$t('license.checkCompleted')}}</el-checkbox>
+      </p>
+      <div slot="footer">
+        <button @click="checkVisible = false" class="nz-btn nz-btn-size-normal nz-btn-style-light margin-r-10">{{$t("overall.close")}}</button>
+        <button @click="downloadLicense" class="nz-btn nz-btn-size-normal nz-btn-style-normal" :class="{'nz-btn-disabled': (downLoading || !checkCompleted)}" :disabled="(downLoading || !checkCompleted)">{{$t('overall.download')}}</button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -213,10 +235,16 @@ export default {
       boxWidth: '',
       boxHeight: '',
       qrWidth: 10,
-      paddingLeft: 0
+      paddingLeft: 0,
+      checkVisible: false,
+      downLoading: false,
+      checkCompleted: false
     }
   },
   methods: {
+    closeCheckDialog () {
+      this.checkCompleted = false
+    },
     licenseGetData () {
       this.$get('/sys/license/detail').then(res => {
         if (res.code === 200) {
@@ -302,7 +330,9 @@ export default {
       })
     },
     downloadLicense () {
+      this.downLoading = true
       this.$get('/sys/license/token').then(res => {
+        this.downLoading = false
         let fileName = ''
         const resFileName = res.headers['content-disposition'].split('=')[1]
         if (resFileName) {
@@ -322,6 +352,7 @@ export default {
           a.remove() // 将a标签移除
         }
       }, error => {
+        this.downLoading = false
         const $self = this
         const reader = new FileReader()
         reader.onload = function (event) {