Merge branch 'cherry-pick-4429d225' into 'dev-24.01'

feat: CN-1558 开发license页面(未完成：登陆页支持license拦截）

See merge request cyber-narrator/cn-ui!59

src/assets/css/components/index.scss

@@ -80,6 +80,7 @@
 
 @import 'views/administration/AdministrationTabs';
 @import 'views/administration/Appearance.scss';
+@import 'views/administration/License.scss';
 
 @import 'views/system/Plugin';
 

src/assets/css/components/views/administration/License.scss

@@ -0,0 +1,61 @@
+.license{
+  height: 100%;
+  .license-form {
+    padding-top:40px;
+    padding-left:100px;
+    background-color: white;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    .license-file {
+      display: flex;
+      flex-direction: row;
+      height: 100%;
+      margin-top: 3px;
+      .license__btn {
+        height: 30px;
+        min-width: 74px;
+        color: white;
+        background-color: #38ACD2;
+        border: none;
+        border-radius: 4px;
+        outline: none;
+        font-size: 14px;
+        cursor: pointer;
+        transition: background-color linear .2s, color linear .1s;
+      }
+      .license__btn:hover:not(.footer__btn--disabled) {
+        background-color: lighten(#38ACD2, 10%);
+      }
+      .license__btn--light {
+        background-color: #F5F6F7;
+        border: 1px solid $--border-color-primary;
+        color: #333;
+      }
+      .license__btn.license__btn--light:hover:not(.license__btn--disabled) {
+        background-color: white;
+        border-color: lighten(#38ACD2, 40%);
+        color: #38ACD2;
+      }
+      .license__btn--disabled {
+        opacity: .6;
+        cursor: default;
+      }
+    }
+
+    .el-form .el-form-item {
+      margin-bottom: 0;
+      padding:4px 0;
+      font-size: 14px!important;
+      .el-form-item__label {
+        color: #262626 !important;
+        font-weight: bold;
+      }
+      .el-form-item__content {
+        color: #262626 !important;
+        font-weight: 400;
+      }
+    }
+  }
+}

src/assets/css/font/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "cn-icon"; /* Project id 2614877 */
-  src: url('iconfont.woff2?t=1703561754372') format('woff2'),
+  src: url('iconfont.woff2?t=1706606024800') format('woff2'),
-       url('iconfont.woff?t=1703561754372') format('woff'),
+       url('iconfont.woff?t=1706606024800') format('woff'),
-       url('iconfont.ttf?t=1703561754372') format('truetype');
+       url('iconfont.ttf?t=1706606024800') format('truetype');
 }
 
 .cn-icon {
@@ -13,6 +13,26 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.cn-icon-license:before {
+  content: "\e666";
+}
+
+.cn-icon-base-station:before {
+  content: "\e6cf";
+}
+
+.cn-icon-home:before {
+  content: "\e6d0";
+}
+
+.cn-icon-company:before {
+  content: "\e6d1";
+}
+
+.cn-icon-pedestrian:before {
+  content: "\e6d2";
+}
+
 .cn-icon-system:before {
   content: "\e6cc";
 }
@@ -373,7 +393,7 @@
   content: "\e7b4";
 }
 
-.cn-icon-a-GeneralSettings:before {
+.cn-icon-general-setting:before {
   content: "\e7b5";
 }
 

src/permission.js

@@ -179,6 +179,8 @@ export function handleComponent (code) {
       return () => import('@/views/administration/OperationLog')
     case 'appearance':
       return () => import('@/views/administration/Appearance')
+    case 'license':
+      return () => import('@/views/administration/License')
     case 'I18N':
       return () => import('@/views/administration/I18n')
     case 'system':

src/utils/api.js

@@ -15,6 +15,8 @@ export const api = {
   logout: '/logout',
   pin: 'sys/user/pin',
   appearance: '/sys/appearance',
+  license: '/sys/license',
+  downloadLicenseC2v: '/sys/license/download',
   permissions: '/sys/user/permissions',
   operationLog: '/sys/log',
   login: '/sys/login',

src/views/administration/License.vue

@@ -0,0 +1,148 @@
+<template>
+  <div class="license" :class="from">
+    <div class="license-form">
+      <el-form ref="licenseForm" :model="licenseObject"  label-position="left" label-width="134px" size="small">
+        <el-form-item  :label="`${$t('license.type')}：`" prop="type">
+          {{licenseObject.type}}
+        </el-form-item>
+        <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>
+        <el-form-item :label="`${$t('license.dateIssued')}：`" prop="dateIssued">
+          <div class="">{{licenseObject.dateIssued}}</div>
+        </el-form-item>
+        <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">
+          <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`"
+                       ref="licenseUpload"
+                       id="licenseUpload"
+                       :headers="uploadHeaders"
+                       :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>{{$t('license.upload')}}</span>
+              </button>
+            </el-upload>
+          </div>
+        </el-form-item>
+
+      </el-form>
+    </div>
+  </div>
+</template>
+<script>
+import { api } from '@/utils/api'
+import { storageKey} from '@/utils/constants'
+import axios from 'axios'
+import { ref } from 'vue'
+
+export default {
+  name: 'License',
+  data () {
+    return {
+      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
+      }
+    }
+  },
+  mounted () {
+    this.initData()
+  },
+  methods: {
+    initData () {
+      axios.get(this.url, { pageSize: -1 }).then(response => {
+        if (response.status === 200) {
+          //this.licenseObject = response.data.data
+        }
+      })
+    },
+    fileChange (file, fileList) {
+      if(file.status !== 'ready') return
+      if (!_.endsWith(file.name, '.xml')) {
+        this.fileList = []
+        this.$message.error(this.$t('validate.fileTypeLimit', { types: this.fileTypeLimit }))
+      } else {
+        this.fileList = fileList.slice(-1)
+        this.$refs.licenseUpload.submit()
+      }
+    },
+    uploadSuccess (response) {
+      this.$message.success(this.$t('tip.success'))
+    },
+    uploadError (error) {
+      let errorMsg
+      if (error.message) {
+        errorMsg = JSON.parse(error.message).message
+      } else {
+        errorMsg = 'error'
+      }
+      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'
+        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)
+      })
+    }
+  },
+  setup () {
+    return {
+      baseUrl: BASE_CONFIG.baseUrl,
+      apiVersion: BASE_CONFIG.apiVersion,
+      uploadHeaders: {
+        'Cn-Authorization': localStorage.getItem(storageKey.token)
+      },
+      fileTypeLimit: '.xml',
+      fileList: ref([])
+    }
+  },
+}
+</script>