添加布局数据预览功能

zkqy-ui/package.json

@@ -98,6 +98,7 @@
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.5.5",
     "vue-json-excel": "^0.3.0",
+    "vue-json-viewer": "^2.2.22",
     "vue-meta": "2.4.0",
     "vue-quill-editor": "^3.0.6",
     "vue-router": "3.4.9",

zkqy-ui/src/views/system/formGroupMange/component/DragPosition.vue

@@ -25,7 +25,11 @@
       <!-- 中间拖拽区域 start-->
       <div class="drag-wrap">
         <!-- 顶部工具 -->
-        <TopToolBar @showJSON="showJSON" @saveJSON="saveJSON"></TopToolBar>
+        <TopToolBar
+          @showJSON="showJSON"
+          @saveJSON="saveJSON"
+          @showJSONData="showJSONData"
+        ></TopToolBar>
         <CenterArea
           :data="layoutData"
           :selectItem="selectItem"
@@ -38,6 +42,8 @@
       <!-- 右侧面板区域 start -->
       <RightPanel class="right-panel" :selectItem="selectItem"></RightPanel>
       <!-- 右侧面板区域 end -->
+      <!-- JSON数据预览 -->
+      <JSONViewer ref="JSONViewerRef"></JSONViewer>
     </div>
   </div>
 </template>
@@ -51,10 +57,18 @@ import collapseItem from "./collapseItem.vue"; //左侧tab
 import RightPanel from "./RightPanel.vue"; //右侧tab
 import TopToolBar from "./TopToolBar.vue"; //右侧tab
 import { updateFormGroup } from "@/api/system/formGroup";
+import JSONViewer from "./JSONViewer.vue";
 export default {
   name: "DragPosition",
   props: ["formGroupData"],
-  components: { LetfPanel, CenterArea, collapseItem, RightPanel, TopToolBar },
+  components: {
+    LetfPanel,
+    CenterArea,
+    collapseItem,
+    RightPanel,
+    TopToolBar,
+    JSONViewer,
+  },
   data() {
     return {
       startType: "",
@@ -157,6 +171,11 @@ export default {
     },
   },
   methods: {
+    // JSON展示回调
+    showJSONData() {
+      this.$refs.JSONViewerRef.setJSONData(JSON.stringify(this.layoutData));
+      this.$refs.JSONViewerRef.showHandler();
+    },
     // 保存布局数据
     async saveJSON() {
       let payLoad = {

zkqy-ui/src/views/system/formGroupMange/component/JSONViewer.vue

@@ -0,0 +1,66 @@
+<template>
+  <!-- <div class=""> -->
+  <el-dialog title="JSON数据" :visible.sync="show" width="800px" append-to-body>
+    <!-- <VueJsonPretty :data="JSONData" :indent-size="2" :enable-clipboard="true">
+      <template slot="copy">
+        <i class="el-icon-document-copy" title="复制"></i>
+      </template>
+    </VueJsonPretty> -->
+    <!-- <div v-html="JSONData"></div> -->
+    <JsonViewer
+      :value="JSONData"
+      :expand-depth="5"
+      copyable
+      boxed
+      sort
+      class="w-100%"
+    ></JsonViewer>
+    <template #footer>
+      <span>
+        <el-button @click="show = false">关 闭</el-button>
+        <el-button type="primary" @click="copyHandler">复 制</el-button>
+      </span>
+    </template>
+  </el-dialog>
+  <!-- </div> -->
+</template>
+
+<script>
+// import VueJsonPretty from "vue-json-pretty";
+// import jsonPrettyHtml from "json-pretty-html";
+import JsonViewer from "vue-json-viewer";
+export default {
+  name: "JSONViewer",
+  props: [],
+  components: { JsonViewer },
+  data() {
+    return {
+      show: false,
+      JSONData: {},
+    };
+  },
+  computed: {},
+  methods: {
+    async copyHandler() {
+      try {
+        await navigator.clipboard.writeText(JSON.stringify(this.JSONData));
+        this.$message.success("复制成功");
+        console.log("复制成功");
+      } catch (err) {
+        console.error("Failed to copy: ", err);
+      }
+    },
+    showHandler() {
+      this.show = true;
+    },
+    setJSONData(data) {
+      if (typeof data === "string") {
+        data = JSON.parse(data);
+      }
+      this.JSONData = data;
+    },
+  },
+};
+</script>
+
+<style scoped></style>

zkqy-ui/src/views/system/formGroupMange/component/LayoutItem.vue

@@ -123,19 +123,12 @@
         :record="record"
       ></form-card>
       <!-- <div
-          class="copy"
-          :class="record.key === selectItem.key ? 'active' : 'unactivated'"
-          @click.stop="$emit('handleCopy')"
-        >
-          <a-icon type="copy" />
-        </div> -->
-      <div
         class="delete"
         :class="record.key === selectItem.key ? 'active' : 'unactivated'"
         @click.stop="deleHandle(record)"
       >
         <i class="el-icon-delete"></i>
-      </div>
+      </div> -->
     </template>
   </div>
 </template>

zkqy-ui/src/views/system/formGroupMange/component/TopToolBar.vue

@@ -1,19 +1,33 @@
 <template>
   <div class="tool-bar-wrap">
-    <el-button
-      type="text"
-      size="medium"
-      @click="$emit('showJSON')"
-      icon="el-icon-document"
-      round
-    ></el-button>
-    <el-button
-      type="text"
-      size="medium"
-      @click="$emit('saveJSON')"
-      icon="el-icon-upload"
-      round
-    ></el-button>
+    <el-tooltip
+      class="item"
+      effect="dark"
+      content="保存布局"
+      placement="top-start"
+    >
+      <el-button
+        type="text"
+        size="medium"
+        @click="$emit('saveJSON')"
+        icon="el-icon-upload"
+        round
+      ></el-button>
+    </el-tooltip>
+    <el-tooltip
+      class="item"
+      effect="dark"
+      content="查看JSON"
+      placement="top-start"
+    >
+      <el-button
+        type="text"
+        size="medium"
+        @click="$emit('showJSONData')"
+        icon="el-icon-document"
+        round
+      ></el-button>
+    </el-tooltip>
   </div>
 </template>