添加 json view.

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 {

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>

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 = () => {

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',