添加顶部工具栏/布局交互优化

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

@@ -24,6 +24,8 @@
       <!-- 左侧面板区域 end-->
       <!-- 中间拖拽区域 start-->
       <div class="drag-wrap">
+        <!-- 顶部工具 -->
+        <TopToolBar @showJSON="showJSON" @saveJSON="saveJSON"></TopToolBar>
         <CenterArea
           :data="layoutData"
           :selectItem="selectItem"
@@ -47,10 +49,12 @@ import LetfPanel from "./LetfPanel.vue";
 import CenterArea from "./CenterArea.vue";
 import collapseItem from "./collapseItem.vue"; //左侧tab
 import RightPanel from "./RightPanel.vue"; //右侧tab
+import TopToolBar from "./TopToolBar.vue"; //右侧tab
+import { updateFormGroup } from "@/api/system/formGroup";
 export default {
   name: "DragPosition",
-  props: [],
-  components: { LetfPanel, CenterArea, collapseItem, RightPanel },
+  props: ["formGroupData"],
+  components: { LetfPanel, CenterArea, collapseItem, RightPanel, TopToolBar },
   data() {
     return {
       startType: "",
@@ -145,7 +149,7 @@ export default {
     };
   },
   created() {
-    this.schemaGroup[0].list = formList;
+    // this.schemaGroup[0].list = formList;
   },
   computed: {
     formList() {
@@ -153,6 +157,48 @@ export default {
     },
   },
   methods: {
+    // 保存布局数据
+    async saveJSON() {
+      let payLoad = {
+        ...this.formGroupData,
+        layoutJson: JSON.stringify(this.layoutData),
+      };
+      let res = await updateFormGroup(payLoad);
+      if (res.code == 200) {
+        this.$message.success("保存成功!");
+      } else {
+        this.$message.error("网络异常,保存失败!");
+      }
+    },
+    // 初始化表单数据
+    initFormData() {
+      let res = [];
+      this.layoutData.list = [];
+      console.log(this.formGroupData);
+      let { dragFormList, layoutJson } = this.formGroupData;
+      res = dragFormList.map((item) => {
+        let { dfName, dfNickname, dfTableName, formKey } = item;
+        return {
+          type: "form",
+          label: dfName,
+          dfNickname,
+          dfTableName,
+          formKey,
+        };
+      });
+      console.log(res);
+      this.$set(this.schemaGroup[0], "list", res);
+      if (layoutJson) {
+        this.layoutData = JSON.parse(layoutJson);
+      } else {
+        this.layoutData.list.push(...res);
+      }
+      // this.schemaGroup[0].list = res;
+    },
+    // 预览json
+    showJSON() {
+      console.log("json数据", JSON.stringify(this.layoutData));
+    },
     handleStart(type) {
       this.startType = type;
     },
@@ -243,13 +289,13 @@ ul {
   height: 100%;
 }
 .drag-position {
-  height: 100%;
+  height: calc(100% - 30px);
   display: flex;
   .drag-wrap {
     // box-sizing: border-box;
     position: relative;
     // height: 100%;
-    padding: 10px;
+    padding: 0 10px;
     flex: 1;
   }
 }

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="card-wrap">
+  <div class="card-wrap" @click.stop="$emit('handleSelectItem', record)">
     <i class="el-icon-c-scale-to-original mr10"></i>
     <span>{{ record.label }}</span>
   </div>

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

@@ -109,15 +109,19 @@
         class="grid-box divider-wrap"
         style="width: 100%"
         :class="{ active: record.key === selectItem.key }"
-        @click.stop="handleSelectItem(record)"
       >
-        <el-divider :content-position="record.options.orientation">{{
-          record.options.title || ""
-        }}</el-divider>
+        <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'">
-      <form-card :record="record"></form-card>
+      <form-card
+        @handleSelectItem="handleSelectItem(record)"
+        :record="record"
+      ></form-card>
       <!-- <div
           class="copy"
           :class="record.key === selectItem.key ? 'active' : 'unactivated'"

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

@@ -0,0 +1,40 @@
+<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>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "TopToolBar",
+  props: [],
+  components: {},
+  data() {
+    return {};
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.tool-bar-wrap {
+  height: 30px;
+  background-color: #f5f5f5;
+  display: flex;
+  align-content: center;
+}
+</style>

zkqy-ui/src/views/system/formGroupMange/index.vue

@@ -560,7 +560,10 @@
     </el-dialog>
     <!-- 布局弹窗 -->
     <el-dialog title="布局" :visible.sync="layoutShow" fullscreen>
-      <DragPosition></DragPosition>
+      <DragPosition
+        ref="DragPositionRef"
+        :formGroupData="formGroupData"
+      ></DragPosition>
     </el-dialog>
   </div>
 </template>
@@ -685,6 +688,7 @@ export default {
       // end
       // 布局数据  start
       layoutShow: false,
+      formGroupData: {},
       // 布局数据  end
     };
   },
@@ -701,8 +705,39 @@ export default {
   },
   methods: {
     // 布局回调
-    handlePosition(row) {
-      this.layoutShow = true;
+    async handlePosition(row) {
+      let res = await getFormGroup(row.id);
+      console.log(res);
+      if (res.code == 200) {
+        let {
+          fGName,
+          formKeys,
+          groupKey,
+          mainTable,
+          id,
+          relationJson,
+          remark,
+          dragFormList,
+          layoutJson,
+        } = res.data;
+        this.formGroupData = {
+          fGName,
+          formKeys,
+          groupKey,
+          mainTable,
+          id,
+          relationJson,
+          remark,
+          dragFormList,
+          layoutJson,
+        };
+        this.layoutShow = true;
+        this.$nextTick(() => {
+          this.$refs.DragPositionRef.initFormData();
+        });
+      } else {
+        this.$message.error(res.msg);
+      }
     },
     //条件编辑确认回调
     conditionConfirmHandler() {
@@ -1086,7 +1121,6 @@ export default {
         this.isEdit = true;
         this.editRow = JSON.parse(JSON.stringify(row));
         getFormGroup(row.id).then((response) => {
-          console.log("回显数据", response);
           let { fGName, remark, relationJson } = response.data;
           // this.groupForm.fGName = fGName;
           // this.groupForm.groupDesc = remark;