ops-web/src/modules/admin/app/AuthorizeFileTest.vue

<template>
  <el-dialog
    class="page-dialog"
    :visible.sync="modalIsShow"
    width="800px"
    top="10px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    title="授权测试"
    @open="visibleChange"
  >
    <el-tabs v-model="tabType" type="card" v-loading="loading">
      <el-tab-pane label="授权文件解密查看" name="tab1">
        <div class="tab1-wrap">
          <el-form>
            <el-form-item>
              <div style="display: flex; align-items: flex-start">
                <span style="color: #f56c6c; font-size: 14px; margin-right: 4px"
                  >*</span
                >
                <UploadButton
                  theme="success"
                  btnContent="选择文件"
                  @file-change="getFile"
                  showFileList
                  :autoUpload="false"
                  style="margin-right: 10px"
                />
              </div>
            </el-form-item>
            <el-form-item>
              <version-select
                v-model="version"
                placeholder="版本号，非必填"
              ></version-select>
              <el-button
                type="primary"
                style="margin-left: 10px"
                :disabled="!file"
                @click="see"
                >解密查看</el-button
              >
            </el-form-item>
          </el-form>
          <json-viewer
            v-if="info"
            :value="info"
            :expand-depth="9"
          ></json-viewer>
        </div>
      </el-tab-pane>
      <el-tab-pane label="授权信息加密下载" name="tab2">
        <vue-json-editor
          v-model="resultInfo"
          :showBtns="false"
          :mode="'code'"
          @json-change="onJsonChange"
          @json-save="onJsonSave"
          @has-error="onError"
          :format="['lic']"
        />
        <br />
        <div style="text-align: right">
          <el-button type="primary" :disabled="!hasJsonFlag" @click="createFile"
            >确定</el-button
          >
        </div>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script>
import {
  orgQuery,
  appDeployOrgList,
  appDeployOrgUpdate,
  authorizeFileDownload,
  appDeployDeviceView,
} from "../api";
import vueJsonEditor from "vue-json-editor";
import { downloadBlob } from "@/plugins/utils";
import UploadButton from "@/components/UploadButton";

export default {
  name: "authorize-file-test",
  components: { vueJsonEditor, UploadButton },
  data() {
    return {
      modalIsShow: false,
      tabType: "tab1",
      info: "",
      resultInfo: {},
      hasJsonFlag: true,
      loading: false,
      version: "",
      file: null,
    };
  },
  methods: {
    getFile(obj) {
      this.file = obj.file;
    },
    see() {
      this.loading = true;
      appDeployDeviceView({
        file: this.file,
        version: this.version,
      })
        .then((res) => {
          console.log("rrr", res);
          this.info = res || "";
        })
        .finally(() => {
          this.loading = false;
        });
    },
    onJsonChange(value) {
      // 实时保存
      this.onJsonSave(value);
    },
    onJsonSave(value) {
      this.resultInfo = value;
      this.hasJsonFlag = true;
    },
    onError(value) {
      this.hasJsonFlag = false;
    },
    // 检查json
    async createFile() {
      this.loading = true;
      const res = await downloadBlob(() => {
        return authorizeFileDownload(this.resultInfo || {});
      }).catch(() => {});
      this.loading = false;
      if (res) {
        this.$message.success("文件下载成功！");
      } else {
        this.$message.error("文件下载失败，请重新尝试！");
      }
    },
    visibleChange() {
      this.tabType = "tab1";
      this.resultInfo = {};
      this.hasJsonFlag = true;
      this.loading = false;
      this.version = "";
      this.file = null;
    },
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
  },
};
</script>
<style scoped lang="scss">
.tab1-wrap {
  min-height: 300px;
}
.tab1-form {
  display: flex;
  align-items: center;
}
</style>
<style lang="scss">
.jsoneditor-vue {
  height: calc(100vh - 280px);
  .jsoneditor-outer {
    margin: 0;
    padding: 0;
  }
}
.jsoneditor-mode-code {
  .jsoneditor-menu {
    display: none;
    // opacity: 0;
  }
}
</style>