目录代码整合

packages/extra/AppLicence/AppLicence.vue

@@ -0,0 +1,164 @@
+<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>