dvcp_v2_webapp/packages/system/AppLicence/AppLicence.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>