Goats-Cloud-ui/src/views/system/license/activation.vue

<!--  -->
<template>
  <div class="activation">
    <!-- <el-steps class="steps" :active="active" finish-status="success"  align-center>
      <el-step title="服务器选择"></el-step>
      <el-step title="步骤 2"></el-step>
      <el-step title="步骤 3"></el-step>
    </el-steps>
    <div class="step-content" v-if="active == 0">
      <Server  @next="next"></Server>
    </div>
    <div class="step-content" v-if="active == 1">
      1111
    </div> -->
    <el-form ref="form" :model="form" label-width="150px">
      <el-form-item label="获取服务器信息">
        <el-select v-model="form.osName" placeholder="请选择服务器">
          <el-option label="windows" value="windows"></el-option>
          <el-option label="linux" value="linux"></el-option>
        </el-select>
        <el-button @click="getInfos">确定</el-button>
      </el-form-item>
      <el-form-item label="">
        <div>
          <div style="width:400px; margin-top: 10px;">

            <el-upload ref="upload" :limit="1"  name="uploadFile" accept=".lic" :action="upload.url"
              :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess"
              :auto-upload="false" drag>
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              <!-- <div class="el-upload__tip text-center" slot="tip">
                <span>仅允许导入txt格式文件。</span>
              </div> -->
            </el-upload>
          <el-button type="primary" @click="submitFileForm">注册</el-button>


          </div>
        </div>



      </el-form-item>
      <el-form-item label="有效期">
        <div class="time-end" v-if="!time.check">
          <h1>{{ time.issuedTime }}</h1>
          <span>-</span>
          <h1>{{ time.expiryTime }}</h1>
        </div>
        <div class="time-end" v-else>
          <h1>尚未注册</h1>
        </div>
      </el-form-item>
    </el-form>



  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
// import server from '@/views/activationStepltem/serverInformation.vue'
import Server from "./serverInformation.vue";
import {
  getServerInfos,
  getLicenceDate,
  uploadLicense,
} from "@/api/activation.js";
import { getToken } from "@/utils/auth";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    Server,
  },
  data() {
    //这里存放数据
    return {
      active: 0,
      form: {
        osName: "linux",
      },
      fileList: [],
      //到期时间显示
      time: {
        expiryTime: "",
        issuedTime: "",
        check: 1,
      },
      //激活文件上传
      upload: {
        // 是否禁用上传
        isUploading: false,
        // 上传的地址
        url: import.meta.env.VITE_APP_BASE_API + "/license/uploadLicense"
      }
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() { },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getDate();
  },
  //生命周期 - 创建之前
  beforeCreate() { },
  //生命周期 - 挂载之前
  beforeMount() { },
  //生命周期 - 更新之前
  beforeUpdate() { },
  //生命周期 - 更新之后
  updated() { },
  //生命周期 - 销毁之前
  beforeDestroy() { },
  //生命周期 - 销毁完成
  destroyed() { },
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() { },
  //方法集合
  methods: {
    next() {
      if (this.active++ > 2) this.active = 0;
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },
    getDate() {
      getLicenceDate().then((res) => {
        this.time.check = res.check;
        if (!res.check) {
          this.time.expiryTime = res.expiryTime;
          this.time.issuedTime = res.issuedTime;
        }
      });
    },
    getInfos() {
      this.$modal.loading("正在导出数据，请稍后...");
      getServerInfos(this.form).then((res) => {
        console.log(res);
        if (res.code == 200) {
          const blob = new Blob([res.data], { type: 'text/plain;charset=utf-8' })
          this.$download.saveAs(blob, "serverInfo.txt")
        } else {
          this.$modal.msgError(res.msg);
        }
        this.$modal.closeLoading();
      })
    },
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      if (response.code == 200) {
        this.upload.isUploading = false;
        this.$refs.upload.clearFiles();
        this.time.check = response.check;
        this.time.expiryTime = response.expiryTime;
        this.time.issuedTime = response.issuedTime;
        this.$modal.msgSuccess(response.msg);
      } else {
        this.$modal.msgError(response.msg);
      }

    },
  },
};
</script>
<style scoped>
.activation {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 50px;
}

.steps {
  width: 70%;
}

.step-content {
  width: 100%;
}

.time-end {
  color: red;
  display: flex;
  align-items: center;
  height: 36px;
  
  font-size: 50px;
  /* justify-content: center; */
}

.time-end {
  font-size: 20px;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px #000;
}

.time-end span {
  margin: 0 20px;
}
</style>