Merge branch 'master' of http://62.234.61.92:3000/wjm/mec-cloud_IntelligentManufacturing_CRM

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,12 @@
       <!-- 中间拖拽区域 start-->
       <div class="drag-wrap">
         <!-- 顶部工具 -->
-        <TopToolBar @showJSON="showJSON" @saveJSON="saveJSON"></TopToolBar>
+        <TopToolBar
+          @showJSON="showJSON"
+          @saveJSON="saveJSON"
+          @showJSONData="showJSONData"
+          @showPreView="showPreView"
+        ></TopToolBar>
         <CenterArea
           :data="layoutData"
           :selectItem="selectItem"
@@ -38,6 +43,10 @@
       <!-- 右侧面板区域 start -->
       <RightPanel class="right-panel" :selectItem="selectItem"></RightPanel>
       <!-- 右侧面板区域 end -->
+      <!-- JSON数据预览 -->
+      <JSONViewer ref="JSONViewerRef"></JSONViewer>
+      <!-- 布局效果预览 -->
+      <PreView ref="PreViewRef"></PreView>
     </div>
   </div>
 </template>
@@ -51,10 +60,21 @@ 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";
+import PreView from "./PreView.vue";
+
 export default {
   name: "DragPosition",
   props: ["formGroupData"],
-  components: { LetfPanel, CenterArea, collapseItem, RightPanel, TopToolBar },
+  components: {
+    LetfPanel,
+    CenterArea,
+    collapseItem,
+    RightPanel,
+    TopToolBar,
+    JSONViewer,
+    PreView,
+  },
   data() {
     return {
       startType: "",
@@ -157,6 +177,16 @@ export default {
     },
   },
   methods: {
+    // 预览展示
+    showPreView() {
+      this.$refs.PreViewRef.setLayoutData(this.layoutData, formList);
+      this.$refs.PreViewRef.showPreView();
+    },
+    // JSON展示回调
+    showJSONData() {
+      this.$refs.JSONViewerRef.setJSONData(JSON.stringify(this.layoutData));
+      this.$refs.JSONViewerRef.showHandler();
+    },
     // 保存布局数据
     async saveJSON() {
       let payLoad = {
@@ -177,13 +207,14 @@ export default {
       console.log(this.formGroupData);
       let { dragFormList, layoutJson } = this.formGroupData;
       res = dragFormList.map((item) => {
-        let { dfName, dfNickname, dfTableName, formKey } = item;
+        let { dfName, dfNickname, dfTableName, formKey, dfVueTemplate } = item;
         return {
           type: "form",
           label: dfName,
           dfNickname,
           dfTableName,
           formKey,
+          dfVueTemplate,
         };
       });
       console.log(res);

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

@@ -122,13 +122,6 @@
         @handleSelectItem="handleSelectItem(record)"
         :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'"

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

@@ -0,0 +1,51 @@
+<template>
+  <el-dialog
+    title="预览弹窗"
+    :visible.sync="show"
+    width="1000px"
+    append-to-body
+  >
+    <preViewItem
+      v-for="(item, index) in layoutData.list"
+      :key="index"
+      class="drag-move"
+      :record="item"
+    />
+    <template #footer>
+      <span>
+        <el-button @click="show = false">取消</el-button>
+        <!-- <el-button type="primary" @click="() => {}">确认</el-button> -->
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import preViewItem from "../preView/preViewItem";
+export default {
+  name: "PreView",
+  props: [],
+  components: { preViewItem },
+  data() {
+    return {
+      show: false,
+      layoutData: {},
+      formData: {},
+    };
+  },
+  computed: {},
+  methods: {
+    showPreView() {
+      this.show = true;
+    },
+    setLayoutData(data, formData) {
+      this.layoutData = data;
+      this.formData = formData;
+      console.log("this.layoutData", this.layoutData);
+      console.log("this.formData", this.formData);
+    },
+  },
+};
+</script>
+
+<style scoped></style>

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

@@ -188,7 +188,7 @@ export default {
     addColumnHandler() {
       this.selectItem.columns.push({
         value: this.selectItem.columns.length + 1 + "",
-        label: `选项${this.selectItem.columns.length}`,
+        label: `选项${this.selectItem.columns.length + 1}`,
         list: [],
         tableName: "",
       });

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

@@ -1,19 +1,47 @@
 <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>
+    <el-tooltip
+      class="item"
+      effect="dark"
+      content="布局效果预览"
+      placement="top-start"
+    >
+      <el-button
+        type="text"
+        size="medium"
+        @click="$emit('showPreView')"
+        icon="el-icon-document"
+        round
+      ></el-button>
+    </el-tooltip>
   </div>
 </template>
 

zkqy-ui/src/views/system/formGroupMange/preView/KFormDesign.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="form-wrap">
+    <k-form-build class="formBuild" ref="addFromRef" :value="myJsonData" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "KFormDesign",
+  props: ["jsonData"],
+  components: {},
+  data() {
+    return {};
+  },
+  computed: {
+    myJsonData() {
+      console.log(JSON.parse(this.jsonData));
+      return JSON.parse(this.jsonData);
+    },
+  },
+  methods: {},
+};
+</script>
+
+<style scoped></style>

zkqy-ui/src/views/system/formGroupMange/preView/preViewItem.vue

@@ -0,0 +1,158 @@
+<template>
+  <div class="layout-width">
+    <template v-if="record.type == 'tabs'">
+      <div class="grid-box" @click.stop="handleSelectItem(record)">
+        <el-tabs value="1">
+          <el-tab-pane
+            v-for="(tabItem, index) in record.columns"
+            :key="index"
+            :label="tabItem.label"
+            :name="index + ''"
+          >
+            <div class="grid-box-content">
+              <draggable
+                tag="div"
+                class="draggable-box"
+                v-bind="{
+                  group: 'form-draggable',
+                  ghostClass: 'moving',
+                  animation: 180,
+                  handle: '.drag-move',
+                }"
+                v-model="tabItem.list"
+                @start="$emit('dragStart', $event, tabItem.list)"
+                @add="$emit('handleColAdd', $event, tabItem.list)"
+              >
+                <!-- @start="$emit('dragStart', $event, tabItem.list)"
+                @add="$emit('handleColAdd', $event, tabItem.list)" -->
+                <transition-group tag="div" name="list" class="list-main">
+                  <preViewItem
+                    class="drag-move"
+                    v-for="(item, index) in tabItem.list"
+                    :key="index"
+                    :record="item"
+                    @handleDelete="handleDelete"
+                  />
+                </transition-group>
+              </draggable>
+            </div>
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+    </template>
+    <template v-else-if="record.type == 'grid'">
+      <!-- 栅格布局 -->
+      <div class="grid-box" @click.stop="handleSelectItem(record)">
+        <el-row class="grid-row" :gutter="record.options.gutter">
+          <el-col
+            class="grid-col"
+            v-for="(colItem, idnex) in record.columns"
+            :key="idnex"
+            :span="colItem.span || 0"
+          >
+            <div class="grid-box-content">
+              <draggable
+                tag="div"
+                class="draggable-box"
+                v-bind="{
+                  group: 'form-draggable',
+                  ghostClass: 'moving',
+                  animation: 180,
+                  handle: '.drag-move',
+                }"
+                v-model="colItem.list"
+                @start="$emit('dragStart', $event, colItem.list)"
+                @add="$emit('handleColAdd', $event, colItem.list)"
+              >
+                <transition-group tag="div" name="list" class="list-main">
+                  <preViewItem
+                    class="drag-move"
+                    v-for="(item, index) in colItem.list"
+                    :key="index"
+                    :record="item"
+                    @handleDelete="handleDelete"
+                  />
+                </transition-group>
+              </draggable>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+    </template>
+    <template v-else-if="record.type == 'divider'">
+      <!-- 分割线 -->
+      <div class="grid-box divider-wrap" style="width: 100%">
+        <el-divider
+          @click.stop="handleSelectItem(record)"
+          :content-position="record.options.orientation"
+          >{{ record.options.title || "" }}</el-divider
+        >
+      </div>
+    </template>
+    <template v-else-if="record.type == 'form'">
+      <KFormDesign :jsonData="record.dfVueTemplate"></KFormDesign>
+    </template>
+  </div>
+</template>
+
+<script>
+import FormCard from "../component/FormCard.vue";
+import KFormDesign from "./KFormDesign.vue";
+import draggable from "vuedraggable";
+export default {
+  name: "preViewItem",
+  props: ["record"],
+  components: { FormCard, draggable, KFormDesign },
+  data() {
+    return {};
+  },
+  computed: {},
+  watch: {
+    record() {
+      console.log("record", this.record);
+    },
+  },
+  methods: {
+    // 删除
+    deleHandle(record) {
+      console.log("dele", record);
+      this.$emit("handleDelete", record);
+    },
+    handleSelectItem(record) {
+      this.$emit("handleSelectItem", record);
+    },
+    handleDelete(record) {
+      this.$emit("handleDelete", record);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.grid-box-content {
+  min-height: 60px !important;
+  min-width: 50px !important;
+  border: 1px dashed #ccc;
+  background: #fff;
+}
+.layout-width {
+  position: relative;
+  .delete {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 30px;
+    height: 30px;
+    line-height: 30px;
+    text-align: center;
+    color: #ee88e5;
+  }
+}
+.divider-wrap {
+  height: 50px;
+  background: #fff;
+  display: flex;
+  border: 1px dashed #ccc;
+  justify-content: center;
+}
+</style>