添加布局效果预览功能

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

@@ -29,6 +29,7 @@
           @showJSON="showJSON"
           @saveJSON="saveJSON"
           @showJSONData="showJSONData"
+          @showPreView="showPreView"
         ></TopToolBar>
         <CenterArea
           :data="layoutData"
@@ -44,6 +45,8 @@
       <!-- 右侧面板区域 end -->
       <!-- JSON数据预览 -->
       <JSONViewer ref="JSONViewerRef"></JSONViewer>
+      <!-- 布局效果预览 -->
+      <PreView ref="PreViewRef"></PreView>
     </div>
   </div>
 </template>
@@ -58,6 +61,8 @@ 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"],
@@ -68,6 +73,7 @@ export default {
     RightPanel,
     TopToolBar,
     JSONViewer,
+    PreView,
   },
   data() {
     return {
@@ -171,6 +177,11 @@ 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));
@@ -196,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/LayoutItem.vue

@@ -122,13 +122,13 @@
         @handleSelectItem="handleSelectItem(record)"
         :record="record"
       ></form-card>
-      <!-- <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/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

@@ -28,6 +28,20 @@
         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>