union-question-web/src/modules/questions/views/License.vue

<template>
  <section class="content">
    <!-- 正文信息 -->
    <div class="part-box">
      <h1 class="part-box-title">授权管理</h1>
      <div class="part-box-action">
        <el-form
          class="padding-tb-20 form-tight"
          :model="info"
          label-width="150px"
        >
          <el-form-item label="当前信息">
            <span class="input">{{ info.activation }}</span>
          </el-form-item>
          <el-form-item label="人数限制">
            <span class="input">{{ info.maxCount }}</span>
          </el-form-item>
          <el-form-item label="当前人数">
            <span class="input">{{ info.onlineCount }}</span>
          </el-form-item>
          <el-form-item label="过期时间">
            <span class="input">{{ info.expire }}</span>
          </el-form-item>
          <el-form-item label="授权模式">
            <span class="input">{{ info.type }}</span>
          </el-form-item>
        </el-form>
      </div>
      <el-form
        ref="form"
        class="padding-tb-20 form-tight"
        :rules="rules"
        :model="form"
        label-width="150px"
      >
        <el-form-item label="授权模式">
          <el-select v-model="form.type" class="input">
            <el-option label="在线激活" value="ONLINE"></el-option>
            <el-option label="离线激活" value="OFFLINE"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          v-show="form.type == 'ONLINE'"
          label="密匙"
          class="input"
          prop="accessKey"
        >
          <el-input v-model="form.accessKey" maxlength="255" />
        </el-form-item>
        <el-form-item
          v-show="form.type == 'ONLINE'"
          label="密钥"
          class="input"
          prop="accessSecret"
        >
          <el-input v-model="form.accessSecret" maxlength="255" />
        </el-form-item>
        <el-form-item v-show="form.type == 'OFFLINE'" label="导入授权文件">
          <el-upload
            ref="upload"
            class="form_left"
            accept=".lic"
            :action="uploadAction"
            :headers="uploadHeaders"
            :data="uploadData"
            :on-success="uploadSuccess"
            :on-error="uploadError"
            :file-list="fileList"
            :auto-upload="false"
            :multiple="false"
          >
            <el-button
              slot="trigger"
              size="small"
              type="primary"
              icon="icon icon-search-white"
            >
              选择文件
            </el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label=" ">
          <el-button
            v-show="form.type == 'OFFLINE'"
            type="primary"
            size="small"
            @click="exportFile"
            >导出硬件信息</el-button
          >
          <el-button type="primary" size="small" @click="submitForm"
            >保存</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </section>
</template>
<script>
import { QUESTION_API } from "@/constants/constants";
import { mapState } from "vuex";
export default {
  data() {
    return {
      uploadAction: QUESTION_API + "/system/auth/offline",
      uploadHeaders: {},
      uploadData: {},
      fileList: [],
      info: {
        activation: "",
        expire: "",
        type: "",
        maxCount: "",
        onlineCount: 0,
      },
      form: {
        type: "ONLINE",
        accessKey: "",
        accessSecret: "",
      },
      rules: {
        accessKey: [
          {
            required: true,
            message: "请输入密匙",
            trigger: ["blur", "change"],
          },
        ],
        accessSecret: [
          {
            required: true,
            message: "请输入密钥",
            trigger: ["blur", "change"],
          },
        ],
      },
    };
  },
  computed: {
    ...mapState({ user: (state) => state.user }),
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.uploadHeaders = {
        key: this.user.key,
        token: this.user.token,
      };
      this.searchForm();
    },
    searchForm() {
      var url = QUESTION_API + "/system/auth/info";
      this.$httpWithMsg.get(url).then((response) => {
        if (response.data.auth == true) {
          this.info.activation = "已授权";
          this.info.expire = response.data.expireTime;
          this.info.maxCount = response.data.maxOnlineUserCount;
          this.info.onlineCount = response.data.onlineUserCount;
          this.info.type =
            response.data.type == "ONLINE" ? "在线激活" : "离线激活";
        } else {
          this.info.activation = "未授权";
        }
      });
    },
    //提交
    submitForm() {
      if (this.form.type == "OFFLINE") {
        this.submitUpload();
      } else {
        var url = QUESTION_API + "/system/auth/online";
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.$httpWithMsg.post(url, this.form).then(() => {
              this.$notify({
                type: "success",
                message: "授权成功",
              });
              this.searchForm();
              this.addingDialog = false;
            });
          } else {
            return false;
          }
        });
      }
    },
    exportFile() {
      window.open(
        QUESTION_API +
          "/system/auth/device/info?$key=" +
          this.user.key +
          "&$token=" +
          this.user.token
      );
    },
    submitUpload() {
      this.$refs.upload.submit();
    },
    uploadSuccess(response) {
      if (!response.hasError) {
        this.$notify({
          message: "授权成功",
          type: "success",
        });
        this.searchForm();
      }
    },
    uploadError(response) {
      var json = JSON.parse(response.message);
      if (response.status == 500) {
        this.$notify({
          message: json.desc,
          type: "error",
        });
      }
    },
  },
};
</script>