165 lines
4.2 KiB
Vue
165 lines
4.2 KiB
Vue
<template>
|
||
<section class="AppLicence">
|
||
<ai-list>
|
||
<ai-title slot="title" title="产品许可" isShowBottomBorder :instance="instance"></ai-title>
|
||
<template #content>
|
||
<div class="licence-content">
|
||
<img class="left-img" src="https://cdn.cunwuyun.cn/dvcp/key.png" alt="" />
|
||
<div class="content-right">
|
||
<h3 class="title">产品许可信息</h3>
|
||
<p class="mini-title">您当前的版本为Saas专业版，非常感谢您对我们产品的认可与支持！</p>
|
||
<div class="info">
|
||
<span class="label">过期时间</span>
|
||
<span class="value color-f46" v-if="info.isExpired == 1">{{info.expireDate ? info.expireDate+'(已过期)' : '未激活'}}</span>
|
||
<span class="value color-26f" v-else>{{info.expireDate}}</span>
|
||
</div>
|
||
<div class="info">
|
||
<span class="label">主板序列号</span>
|
||
<span class="value">{{info.mainBoard}}</span>
|
||
</div>
|
||
<div class="info">
|
||
<span class="label">CPU</span>
|
||
<span class="value">{{info.cpu}}</span>
|
||
</div>
|
||
<div class="info">
|
||
<span class="label">MAC地址</span>
|
||
<span class="value">{{info.mac}}</span>
|
||
</div>
|
||
<div class="info mar-b32">
|
||
<span class="label">IP地址</span>
|
||
<span class="value">{{info.ip}}</span>
|
||
</div>
|
||
<el-upload
|
||
class="upload-demo"
|
||
action
|
||
multiple
|
||
accept=".lic"
|
||
:http-request="uploadFile">
|
||
<div class="btn">上传许可</div>
|
||
</el-upload>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</ai-list>
|
||
</section>
|
||
</template>
|
||
<script>
|
||
|
||
export default {
|
||
name: "AppLicence",
|
||
label: "产品许可",
|
||
props: {
|
||
instance: Function,
|
||
dict: Object,
|
||
permissions: Function
|
||
},
|
||
data() {
|
||
return {
|
||
files: [],
|
||
info: {}
|
||
}
|
||
},
|
||
mounted() {
|
||
this.getDetail()
|
||
},
|
||
methods: {
|
||
getDetail() {
|
||
this.instance.post(`/admin/license/detail`).then(res => {
|
||
if (res?.data) {
|
||
this.info = res.data
|
||
}
|
||
})
|
||
},
|
||
uploadFile: function (file) {
|
||
let formData = new FormData();
|
||
formData.append("file", file.file);
|
||
this.instance.post(`/admin/license/save`, formData, {withoutToken: false}).then(res => {
|
||
if (res && res.code == 0) {
|
||
this.$message.success("证书上传成功!");
|
||
this.getDetail()
|
||
}
|
||
});
|
||
},
|
||
},
|
||
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.AppLicence {
|
||
width: 100%;
|
||
height: 100%;
|
||
::v-deep .ai-list{
|
||
background-color: #F5F6F9;
|
||
}
|
||
::v-deep .ai-list .ai-list__content--right .ai-list__content--right-wrapper{
|
||
background-color: #F5F6F9;
|
||
box-shadow: 0 0 0 0;
|
||
margin: 0!important;
|
||
padding: 0!important;
|
||
}
|
||
::v-deep .el-upload-list{
|
||
display: none;
|
||
}
|
||
.licence-content{
|
||
display: flex;
|
||
margin-top: 30px;
|
||
.left-img{
|
||
width: 200px;
|
||
height: 200px;
|
||
}
|
||
.content-right{
|
||
width: 800px;
|
||
.title{
|
||
font-size: 24px;
|
||
font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
|
||
font-weight: bold;
|
||
color: #222;
|
||
line-height: 24px;
|
||
margin-bottom: 8px;
|
||
}
|
||
.mini-title{
|
||
font-size: 14px;
|
||
font-family: MicrosoftYaHei;
|
||
color: #555;
|
||
line-height: 22px;
|
||
margin-bottom: 20px;
|
||
}
|
||
.info{
|
||
font-size: 14px;
|
||
font-family: MicrosoftYaHei;
|
||
line-height: 22px;
|
||
margin-bottom: 8px;
|
||
display: flex;
|
||
color: #222;
|
||
.label{
|
||
width: 164px;
|
||
}
|
||
.value{
|
||
width: calc(100% - 164px);
|
||
}
|
||
.color-26f{
|
||
color: #26f;
|
||
}
|
||
.color-f46{
|
||
color: #f46;
|
||
}
|
||
}
|
||
.mar-b32{
|
||
margin-bottom: 32px;
|
||
}
|
||
.btn{
|
||
width: 88px;
|
||
height: 32px;
|
||
line-height: 32px;
|
||
text-align: center;
|
||
background: linear-gradient(90deg, #299FFF 0%, #0C61FF 100%);
|
||
border-radius: 2px;
|
||
cursor: pointer;
|
||
color: #fff;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|