From 6c4e588f920708f63025549f92e379ebfd89baba Mon Sep 17 00:00:00 2001
From: lijiahang <ljh1553488six@139.com>
Date: Thu, 26 Oct 2023 14:57:09 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20json=20view.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 orion-ops-ui/src/components/index.ts          |  2 +
 .../src/components/view/editor/core.ts        | 13 +++-
 .../src/components/view/editor/index.vue      |  5 +-
 .../components/host-identity-card-list.vue    |  4 +-
 .../components/host-identity-table.vue        |  2 +-
 .../asset/host/components/host-card-list.vue  |  2 +-
 .../asset/host/components/host-table.vue      |  2 +-
 .../dict-key/components/dict-key-table.vue    | 18 +++--
 .../components/dict-key-view-modal.vue        | 72 +++++++++++++++++++
 .../src/views/system/dict-key/index.vue       |  7 +-
 .../system/dict-key/types/table.columns.ts    |  4 +-
 11 files changed, 110 insertions(+), 21 deletions(-)
 create mode 100644 orion-ops-ui/src/views/system/dict-key/components/dict-key-view-modal.vue

diff --git a/orion-ops-ui/src/components/index.ts b/orion-ops-ui/src/components/index.ts
index 511964c0..f671547b 100644
--- a/orion-ops-ui/src/components/index.ts
+++ b/orion-ops-ui/src/components/index.ts
@@ -13,6 +13,7 @@ import {
 import Breadcrumb from './app/breadcrumb/index.vue';
 import Chart from './view/chart/index.vue';
 import CardList from './view/card-list/index.vue';
+import Editor from './view/editor/index.vue';
 
 use([
   CanvasRenderer,
@@ -33,5 +34,6 @@ export default {
     Vue.component('Breadcrumb', Breadcrumb);
     Vue.component('a-query-header', AQueryHeader);
     Vue.component('card-list', CardList);
+    Vue.component('Editor', Editor);
   },
 };
diff --git a/orion-ops-ui/src/components/view/editor/core.ts b/orion-ops-ui/src/components/view/editor/core.ts
index 44f59685..65c8f20a 100644
--- a/orion-ops-ui/src/components/view/editor/core.ts
+++ b/orion-ops-ui/src/components/view/editor/core.ts
@@ -27,6 +27,12 @@ export type RenderLineHighlight = 'all' | 'line' | 'none' | 'gutter'
 export interface Options {
   // 自适应布局
   automaticLayout?: boolean;
+  // 只读提示
+  readOnlyMessage?: {
+    value?: string,
+
+    [key: string]: unknown;
+  };
   // 是否折叠
   folding?: boolean;
   // 折叠方式
@@ -44,7 +50,9 @@ export interface Options {
   placeholder?: string;
   minimap?: {
     // 关闭小地图
-    enabled?: boolean
+    enabled?: boolean;
+
+    [key: string]: unknown;
   };
   fontSize?: number;
   // 取消代码后面一大段空白
@@ -63,6 +71,9 @@ export interface Options {
 export const createDefaultOptions = (): Options => {
   return {
     automaticLayout: true,
+    readOnlyMessage: {
+      value: '当前为只读状态'
+    },
     folding: true,
     foldingHighlight: true,
     foldingStrategy: 'indentation',
diff --git a/orion-ops-ui/src/components/view/editor/index.vue b/orion-ops-ui/src/components/view/editor/index.vue
index a4cfdce9..1a38616d 100644
--- a/orion-ops-ui/src/components/view/editor/index.vue
+++ b/orion-ops-ui/src/components/view/editor/index.vue
@@ -71,7 +71,8 @@
       language: props.language,
       readOnly: props.readonly,
       theme: props.theme === true ? (appStore.theme === 'dark' ? 'vs-dark' : 'vs') : props.theme,
-      options: { ...createDefaultOptions(), ...props.options },
+      ...createDefaultOptions(),
+      ...props.options,
     };
     // 创建编辑器
     editor = monaco.editor.create(editorContainer.value, options);
@@ -101,7 +102,7 @@
     }
   });
 
-  // 监听配置
+  // 监听配置变更
   watch(() => props.options, (v) => {
     if (editor) {
       editor.updateOptions(v);
diff --git a/orion-ops-ui/src/views/asset/host-identity/components/host-identity-card-list.vue b/orion-ops-ui/src/views/asset/host-identity/components/host-identity-card-list.vue
index 28b1def8..6fdb9f16 100644
--- a/orion-ops-ui/src/views/asset/host-identity/components/host-identity-card-list.vue
+++ b/orion-ops-ui/src/views/asset/host-identity/components/host-identity-card-list.vue
@@ -21,7 +21,7 @@
     <template #username="{ record }">
       <a-tooltip content="点击复制">
           <span class="pointer span-blue" @click="copy(record.username)">
-            <icon-copy class="mr4" />{{ record.username }}
+            <icon-copy /> {{ record.username }}
           </span>
       </a-tooltip>
     </template>
@@ -226,6 +226,6 @@
 
 </script>
 
-<style  lang="less" scoped>
+<style lang="less" scoped>
 
 </style>
diff --git a/orion-ops-ui/src/views/asset/host-identity/components/host-identity-table.vue b/orion-ops-ui/src/views/asset/host-identity/components/host-identity-table.vue
index 0de69365..a369f750 100644
--- a/orion-ops-ui/src/views/asset/host-identity/components/host-identity-table.vue
+++ b/orion-ops-ui/src/views/asset/host-identity/components/host-identity-table.vue
@@ -68,7 +68,7 @@
       <template #username="{ record }">
         <a-tooltip content="点击复制">
           <span class="pointer span-blue" @click="copy(record.username)">
-            <icon-copy class="mr4" />{{ record.username }}
+            <icon-copy /> {{ record.username }}
           </span>
         </a-tooltip>
       </template>
diff --git a/orion-ops-ui/src/views/asset/host/components/host-card-list.vue b/orion-ops-ui/src/views/asset/host/components/host-card-list.vue
index 09927941..bd15fef6 100644
--- a/orion-ops-ui/src/views/asset/host/components/host-card-list.vue
+++ b/orion-ops-ui/src/views/asset/host/components/host-card-list.vue
@@ -25,7 +25,7 @@
     <template #address="{ record }">
       <a-tooltip content="点击复制">
           <span class="host-address" @click="copy(record.address)">
-            <icon-copy class="mr4" />{{ record.address }}
+            <icon-copy /> {{ record.address }}
           </span>
       </a-tooltip>
     </template>
diff --git a/orion-ops-ui/src/views/asset/host/components/host-table.vue b/orion-ops-ui/src/views/asset/host/components/host-table.vue
index a25ebe0d..30d2eddb 100644
--- a/orion-ops-ui/src/views/asset/host/components/host-table.vue
+++ b/orion-ops-ui/src/views/asset/host/components/host-table.vue
@@ -94,7 +94,7 @@
       <template #address="{ record }">
         <a-tooltip content="点击复制">
           <span class="host-address" @click="copy(record.address)">
-            <icon-copy class="mr4" />{{ record.address }}
+            <icon-copy /> {{ record.address }}
           </span>
         </a-tooltip>
       </template>
diff --git a/orion-ops-ui/src/views/system/dict-key/components/dict-key-table.vue b/orion-ops-ui/src/views/system/dict-key/components/dict-key-table.vue
index f4c069e1..dfd96501 100644
--- a/orion-ops-ui/src/views/system/dict-key/components/dict-key-table.vue
+++ b/orion-ops-ui/src/views/system/dict-key/components/dict-key-table.vue
@@ -53,6 +53,12 @@
              @page-change="(page) => fetchTableData(page, pagination.pageSize)"
              @page-size-change="(size) => fetchTableData(1, size)"
              :bordered="false">
+      <!-- 配置项 -->
+      <template #keyName="{ record }">
+        <span class="pointer" @click="copy(record.keyName)">
+          <icon-copy class="span-blue" /> {{ record.keyName }}
+        </span>
+      </template>
       <!-- 配置值类型 -->
       <template #valueType="{ record }">
         <a-tag :color="getEnumValue(record.valueType, ValueTypeEnum, 'color')">
@@ -80,7 +86,7 @@
           <!-- 查看 -->
           <a-button type="text"
                     size="mini"
-                    @click="viewDictKey(record.keyName)">
+                    @click="emits('openView', record)">
             查看
           </a-button>
           <!-- 修改 -->
@@ -125,12 +131,11 @@
   import {} from '../types/const';
   import { ValueTypeEnum } from '../types/enum.types';
   import { getEnumValue } from '@/utils/enum';
-  import { getDictValueEnum } from '@/api/system/dict-value';
   import useCopy from '@/hooks/copy';
 
   const tableRenderData = ref<DictKeyQueryResponse[]>([]);
   const { loading, setLoading } = useLoading();
-  const emits = defineEmits(['openAdd', 'openUpdate']);
+  const emits = defineEmits(['openAdd', 'openUpdate', 'openView']);
 
   const { copy } = useCopy();
   const pagination = usePagination();
@@ -172,13 +177,6 @@
     addedCallback, updatedCallback
   });
 
-  // 查看
-  const viewDictKey = async (keyName: string) => {
-    const { data } = await getDictValueEnum(keyName);
-    // fixme 后续改为 jsonView
-    await copy(JSON.stringify(data), '复制成功');
-  };
-
   // 加载数据
   const doFetchTableData = async (request: DictKeyQueryRequest) => {
     try {
diff --git a/orion-ops-ui/src/views/system/dict-key/components/dict-key-view-modal.vue b/orion-ops-ui/src/views/system/dict-key/components/dict-key-view-modal.vue
new file mode 100644
index 00000000..1e8f9c1c
--- /dev/null
+++ b/orion-ops-ui/src/views/system/dict-key/components/dict-key-view-modal.vue
@@ -0,0 +1,72 @@
+<template>
+  <a-modal v-model:visible="visible"
+           title-align="start"
+           width="60%"
+           :body-style="{padding: '16px 4px'}"
+           :top="80"
+           :title="title"
+           :align-center="false"
+           :draggable="true"
+           :mask-closable="false"
+           :unmount-on-close="true"
+           :footer="false"
+           @close="handleClose">
+    <a-spin :loading="loading" style="width: 100%; height: calc(100vh - 240px)">
+      <editor v-model="value" readonly />
+    </a-spin>
+  </a-modal>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'dict-key-view-modal'
+  };
+</script>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import useLoading from '@/hooks/loading';
+  import useVisible from '@/hooks/visible';
+  import { getDictValueEnum } from '@/api/system/dict-value';
+
+  const { visible, setVisible } = useVisible();
+  const { loading, setLoading } = useLoading();
+
+  const title = ref<string>();
+  const value = ref<string>();
+
+  // 打开新增
+  const open = (e: any) => {
+    title.value = e.keyName;
+    value.value = undefined;
+    render(e.keyName);
+    setVisible(true);
+  };
+
+  // 渲染
+  const render = async (keyName: string) => {
+    try {
+      setLoading(true);
+      // 查看
+      const { data } = await getDictValueEnum(keyName);
+      value.value = JSON.stringify(data, undefined, 4);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  defineExpose({ open });
+
+  // 关闭
+  const handleClose = () => {
+    setLoading(false);
+    setVisible(false);
+  };
+
+</script>
+
+<style lang="less" scoped>
+  :deep(.arco-modal-title) {
+    font-size: 14px;
+  }
+</style>
diff --git a/orion-ops-ui/src/views/system/dict-key/index.vue b/orion-ops-ui/src/views/system/dict-key/index.vue
index aaad75d8..87ebc7e8 100644
--- a/orion-ops-ui/src/views/system/dict-key/index.vue
+++ b/orion-ops-ui/src/views/system/dict-key/index.vue
@@ -3,11 +3,14 @@
     <!-- 列表-表格 -->
     <dict-key-table ref="table"
                     @openAdd="() => modal.openAdd()"
-                    @openUpdate="(e) => modal.openUpdate(e)" />
+                    @openUpdate="(e) => modal.openUpdate(e)"
+                    @openView="(e) => view.open(e)" />
     <!-- 添加修改模态框 -->
     <dict-key-form-modal ref="modal"
                          @added="modalAddCallback"
                          @updated="modalUpdateCallback" />
+    <!-- json 查看器模态框 -->
+    <dict-key-view-modal ref="view" />
   </div>
 </template>
 
@@ -21,9 +24,11 @@
   import { ref } from 'vue';
   import DictKeyTable from './components/dict-key-table.vue';
   import DictKeyFormModal from './components/dict-key-form-modal.vue';
+  import DictKeyViewModal from './components/dict-key-view-modal.vue';
 
   const table = ref();
   const modal = ref();
+  const view = ref();
 
   // 添加回调
   const modalAddCallback = () => {
diff --git a/orion-ops-ui/src/views/system/dict-key/types/table.columns.ts b/orion-ops-ui/src/views/system/dict-key/types/table.columns.ts
index 36d73a54..b785284f 100644
--- a/orion-ops-ui/src/views/system/dict-key/types/table.columns.ts
+++ b/orion-ops-ui/src/views/system/dict-key/types/table.columns.ts
@@ -16,7 +16,7 @@ const columns = [
     ellipsis: true,
     tooltip: true,
   }, {
-    title: '配置值类型',
+    title: '类型',
     dataIndex: 'valueType',
     slotName: 'valueType',
     align: 'left',
@@ -29,7 +29,7 @@ const columns = [
     ellipsis: true,
     tooltip: true,
   }, {
-    title: '额外配置类型',
+    title: '额外配置',
     dataIndex: 'extraSchema',
     slotName: 'extraSchema',
     align: 'left',