授权测试的需求

src/modules/admin/app/AuthorizeFileTest.vue

@@ -13,41 +13,61 @@
     <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
+          <div style="display: flex; align-items: center; margin-bottom: 10px">
+            <span style="color: #f56c6c; font-size: 14px; margin-right: 4px"
+              >*</span
+            >
+            <span
+              class="animate__animated animate__flipInX"
+              v-if="file"
+              style="
+                color: #666;
+                font-size: 12px;
+                padding-right: 4px;
+                max-width: 130px;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                direction: rtl;
+              "
+              >{{ file?.name }}</span
+            >
+            <UploadButton
+              theme="success"
+              btnContent="选择文件"
+              @file-change="getFile"
+              :autoUpload="false"
+              style="margin-right: 10px"
+            />
+
+            <el-input
+              v-model="version"
+              placeholder="版本号，非必填"
+              style="width: 140px"
+            />
+            <el-button
+              type="primary"
+              style="margin-left: 10px"
+              :disabled="!file"
+              @click="see"
+              >解密查看</el-button
+            >
+          </div>
+          <!-- <json-viewer
             v-if="info"
             :value="info"
             :expand-depth="9"
-          ></json-viewer>
+            copyable
+            boxed
+          ></json-viewer> -->
+          <vue-json-editor
+            class="view-json-editor"
+            v-if="info"
+            v-model="info"
+            :showBtns="false"
+            :mode="'code'"
+            :format="['lic']"
+          />
         </div>
       </el-tab-pane>
       <el-tab-pane label="授权信息加密下载" name="tab2">
@@ -86,6 +106,12 @@ import UploadButton from "@/components/UploadButton";
 export default {
   name: "authorize-file-test",
   components: { vueJsonEditor, UploadButton },
+  updated() {
+    let textarea = document.querySelector(
+      ".view-json-editor textarea.ace_text-input"
+    );
+    textarea.setAttribute("readonly", true);
+  },
   data() {
     return {
       modalIsShow: false,
@@ -109,7 +135,6 @@ export default {
         version: this.version,
       })
         .then((res) => {
-          console.log("rrr", res);
           this.info = res || "";
         })
         .finally(() => {
@@ -147,6 +172,7 @@ export default {
       this.loading = false;
       this.version = "";
       this.file = null;
+      this.info = "";
     },
     cancel() {
       this.modalIsShow = false;
@@ -174,7 +200,8 @@ export default {
     padding: 0;
   }
 }
-.jsoneditor-mode-code {
+.jsoneditor-mode-code,
+.jsoneditor-mode-view {
   .jsoneditor-menu {
     display: none;
     // opacity: 0;