feat: CN-1558 开发license页面，支持license拦截

2024-02-02 18:16:44 +08:00
parent 4429d225f1
commit 06a8bd9626
4 changed files with 179 additions and 28 deletions
--- a/src/Login.vue
+++ b/src/Login.vue
@@ -22,16 +22,40 @@
          ></el-input>
        </el-form-item>
        <el-form-item>
-          <el-button
+          <el-button :disabled="licenseStatus === 0"
              v-loading="loading"
              type="primary"
              class="login--input login--button"
+              :class="{'login-btn__license-error':licenseStatus === 0}"
              @click="login"
              @keyup.enter="login"
              style="font-size: 16px;"
            >Login</el-button
          >
        </el-form-item>
+        <el-form-item v-if="licenseStatus === 0">
+          <div class="license-error-msg">{{licenseStatusErrMsg}}</div>
+          <div class="license-file">
+            <button style="position: relative;" class="license__btn margin-r-20" @click.prevent="downloadFile">
+              <i class="cn-icon-download1 cn-icon margin-r-6"></i><span>Download c2v file</span>
+            </button>
+            <el-upload :action="`${baseUrl}sys/license/upload`"
+                       ref="licenseUpload"
+                       id="licenseUpload"
+                       :multiple="false"
+                       :show-file-list="false"
+                       :accept="fileTypeLimit"
+                       :file-list="fileList"
+                       :auto-upload="false"
+                       :on-change="fileChange"
+                       :on-success="uploadSuccess"
+                       :on-error="uploadError">
+              <button style="position: relative;" class="license__btn" @click.prevent="">
+                <i class="cn-icon-upload1 cn-icon margin-r-6"></i><span>Upload license</span>
+              </button>
+            </el-upload>
+          </div>
+        </el-form-item>
      </el-form>
    </div>
  </div>
@@ -46,6 +70,7 @@ import { api } from '@/utils/api'
 import dayjs from 'dayjs'
 import _ from 'lodash'
 import utc from 'dayjs/plugin/utc'
+import { ref } from 'vue'
 dayjs.extend(utc)

 export default {
@@ -55,7 +80,11 @@ export default {
      loading: false,
      username: '',
      pin: '',
-      language: ''
+      language: '',
+      licenseStatus: 1,
+      licenseStatusErrMsg: '',
+      downloadC2vUrl: api.downloadLicenseC2v,
+      supportID: ''
    }
  },
  methods: {
@@ -103,6 +132,70 @@ export default {
        }
      })
    },
+    downloadFile () {
+      axios.get(this.downloadC2vUrl, { responseType: 'blob' }).then(res => {
+        const fileName = 'CN-' + this.supportID + '-license-apply.xml'
+        if (window.navigator.msSaveOrOpenBlob) {
+          // 兼容ie11
+          const blobObject = new Blob([res.data])
+          window.navigator.msSaveOrOpenBlob(blobObject, fileName)
+        } else {
+          const url = URL.createObjectURL(new Blob([res.data]))
+          const a = document.createElement('a')
+          document.body.appendChild(a) // 此处增加了将创建的添加到body当中
+          a.href = url
+          a.download = fileName
+          a.target = '_blank'
+          a.click()
+          a.remove() // 将a标签移除
+        }
+      }, error => {
+        const $self = this
+        const reader = new FileReader()
+        reader.onload = function (event) {
+          const responseText = reader.result
+          const exception = JSON.parse(responseText)
+          if (exception.message) {
+            $self.$message.error(exception.message)
+          } else {
+            console.error(error)
+          }
+        }
+        reader.readAsText(error.response.data)
+      })
+    },
+    fileChange (file, fileList) {
+      if (file.status !== 'ready') return
+      if (!_.endsWith(file.name, '.xml')) {
+        this.fileList = []
+        this.$message.error('Only support '+ this.fileTypeLimit + ' files')
+      } else {
+        this.fileList = fileList.slice(-1)
+        this.$refs.licenseUpload.submit()
+      }
+    },
+    uploadSuccess (response) {
+      this.$message.success('Success')
+      this.licenseStatus = 1
+    },
+    uploadError (error) {
+      let errorMsg
+      if (error.message) {
+        errorMsg = JSON.parse(error.message).message
+      } else {
+        errorMsg = 'error'
+      }
+      this.$message.error('Upload failed: ' + errorMsg)
+    },
+    checkLicenseStatus () {
+      axios.get(api.licenseStatus).then(res => {
+        if (res.status === 200) {
+          this.licenseStatus = res.data.status
+        }
+      }).catch(e => {
+        this.licenseStatusErrMsg = this.errorMsgHandler(e)
+      })
+    },
    queryAppearance () {
      axios.get(api.appearance).then(res => {
        if (res.status === 200) {
@@ -128,13 +221,24 @@ export default {
      localStorage.setItem(storageKey.sysLogo, data.system_logo)
    }
  },
-  mounted () {
+  async mounted () {
    this.queryAppearance()
+    this.checkLicenseStatus()
+    await axios.get(api.license).then(res => {
+      if (res.status === 200) {
+        this.supportID = res.data.data.license.supportID
+      }
+    }).catch(e => {
+      console.log(e)
+    })
  },
  setup (props) {
    const { currentRoute } = useRouter()
    return {
-      loginSuccessPath: currentRoute.value.query.redirect
+      loginSuccessPath: currentRoute.value.query.redirect,
+      baseUrl: BASE_CONFIG.baseUrl,
+      fileTypeLimit: '.xml',
+      fileList: ref([])
    }
  }
 }
@@ -181,7 +285,7 @@ export default {
 }
 .inside {
  width: 414px;
-  height: 524px;
+  height: fit-content;/*524*/
  background: #0B325C;
  border: 1px solid rgba(103,179,245,0.65);
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.38);
@@ -198,6 +302,7 @@ export default {

 .title {
  margin-top: 65px;
+  margin-bottom: 44px;
  text-align: center;
 }
 .title > img {
@@ -208,6 +313,39 @@ export default {
  justify-content: center;
  flex-direction: column;
  align-items: center;
+  .is-disabled {
+    background: #21B4ED;
+    color: #FFFFFF;
+    opacity: 0.6;
+  }
+  .license-error-msg {
+    color:#c73249;
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    height:40px;
+  }
+  .license-file {
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+    align-items: center;
+    justify-content: space-between;
+    .license__btn {
+      height: 40px;
+      padding-left:10px;
+      padding-right:10px;
+      min-width: 74px;
+      color: white;
+      background-color: #21B4ED;
+      border: none;
+      border-radius: 4px;
+      outline: none;
+      font-size: 14px;
+      cursor: pointer;
+      transition: background-color linear .2s, color linear .1s;
+    }
+  }
 }
 :deep .el-form-item {
  width: 334px;
@@ -220,9 +358,8 @@ export default {
  width: 17px;
  font-size: 17px;
 }
-.login__box .el-form-item:nth-of-type(3) {
-  margin-top: 25px;
-  margin-bottom: 65px;
+.login__box .el-form-item:nth-child(3){
+  margin-bottom: 0px;
 }
 .login--button {
  background: #21B4ED;
@@ -234,5 +371,12 @@ export default {
  line-height: 22px;
  width: 334px;
  height: 52px;
+  margin-top: 25px;
+  margin-bottom:65px;
+}
+.login-btn__license-error {
+  margin-top: 25px;
+  margin-bottom: 10px;
+  height:40px;
 }
 </style>
--- a/src/assets/css/font/iconfont.js
+++ b/src/assets/css/font/iconfont.js
--- a/src/utils/api.js
+++ b/src/utils/api.js
@@ -15,7 +15,8 @@ export const api = {
  logout: '/logout',
  pin: 'sys/user/pin',
  appearance: '/sys/appearance',
-  license: '/sys/license',
+  license: '/sys/license/detail',
+  licenseStatus: '/sys/license/status',
  downloadLicenseC2v: '/sys/license/download',
  permissions: '/sys/user/permissions',
  operationLog: '/sys/log',
--- a/src/views/administration/License.vue
+++ b/src/views/administration/License.vue
@@ -8,8 +8,8 @@
        <el-form-item :label="`${$t('license.organization')}：`" prop="organization">
          <div class="">{{licenseObject.organization}}</div>
        </el-form-item>
-        <el-form-item :label="`${$t('license.supportId')}：`" prop="supportId">
-          <div class="">{{licenseObject.supportId}}</div>
+        <el-form-item :label="`${$t('license.supportId')}：`" prop="supportID">
+          <div class="">{{licenseObject.supportID}}</div>
        </el-form-item>
        <el-form-item :label="`${$t('license.dateIssued')}：`" prop="dateIssued">
          <div class="">{{licenseObject.dateIssued}}</div>
@@ -17,12 +17,12 @@
        <el-form-item :label="`${$t('license.dateExpires')}：`" prop="dateExpires">
          <div class="">{{licenseObject.dateExpires}}</div>
        </el-form-item>
-        <el-form-item :label="`${$t('license.licenseFile')}：`" prop="licenseFile">
+        <el-form-item :label="`${$t('license.licenseFile')}：`" >
          <div class="license-file">
            <button style="position: relative;" class="license__btn margin-r-20" @click.prevent="downloadFile">
              <i class="cn-icon-download1 cn-icon margin-r-6"></i><span>{{$t('license.download')}}</span>
            </button>
-            <el-upload :action="`${baseUrl}${apiVersion}/sys/license/upload`"
+            <el-upload :action="`${baseUrl}sys/license/upload`"
                       ref="licenseUpload"
                       id="licenseUpload"
                       :headers="uploadHeaders"
@@ -50,6 +50,7 @@ import { api } from '@/utils/api'
 import { storageKey } from '@/utils/constants'
 import axios from 'axios'
 import { ref } from 'vue'
+import { dateFormat } from '@/utils/date-util'

 export default {
  name: 'License',
@@ -58,12 +59,11 @@ export default {
      url: api.license,
      downloadC2vUrl: api.downloadLicenseC2v,
      licenseObject: { // 对象
-        type: 'Evaluation',
-        organization: 'Geedge Networks',
-        supportId: 'GN-4896037090286046',
-        dateIssued: '2023-12-13 18:52:33 (UTC+08:00)',
-        dateExpires: '2024-11-24 07:59:59 (UTC+08:00)',
-        licenseFile: null
+        type: '',
+        organization: '',
+        supportID: '',
+        dateIssued: '',
+        dateExpires: ''
      }
    }
  },
@@ -74,10 +74,16 @@ export default {
    initData () {
      axios.get(this.url, { pageSize: -1 }).then(response => {
        if (response.status === 200) {
-          //this.licenseObject = response.data.data
+          this.licenseObject = response.data.data.license
+          this.licenseObject.dateExpires = dateFormat(new Date(this.licenseObject.hasp.feature.license.exp_date * 1000))
+          this.licenseObject.dateIssued = dateFormat(new Date(this.licenseObject.hasp.production_date * 1000))
        }
+      }).catch(e => {
+        console.error(e)
+        this.$message.error(this.errorMsgHandler(e))
      })
    },
+
    fileChange (file, fileList) {
      if (file.status !== 'ready') return
      if (!_.endsWith(file.name, '.xml')) {
@@ -101,8 +107,8 @@ export default {
      this.$message.error(this.$t('tip.uploadFailed', { msg: errorMsg }))
    },
    downloadFile () {
-      axios.get('/sys/license/download', { responseType: 'blob'}).then(res => {
-        let fileName = 'CN-GDNT-'+this.licenseObject.supportId.substring(this.licenseObject.supportId.indexOf('-')+1)+'-license-apply.xml'
+      axios.get(this.downloadC2vUrl, { responseType: 'blob' }).then(res => {
+        const fileName = 'CN-' + this.licenseObject.supportID + '-license-apply.xml'
        if (window.navigator.msSaveOrOpenBlob) {
          // 兼容ie11
          const blobObject = new Blob([res.data])
@@ -143,6 +149,6 @@ export default {
      fileTypeLimit: '.xml',
      fileList: ref([])
    }
-  },
+  }
 }
 </script>