修改布局拖拽页面跳转逻辑/处理初始化时表单初始数据异常问题

zkqy-ui/src/router/index.js

@@ -94,6 +94,30 @@ export const constantRoutes = [
       }
     ]
   },
+  {
+    path: '/dragPositionIndex',
+    component: Layout,
+    hidden: true,
+    name: 'dragPositionIndex',
+    meta: {
+      title: "布局编辑",
+      icon: "form",
+      noCache: false,
+      link: null
+    },
+    children: [
+      {
+        path: 'index',
+        component: () => import('@/views/system/formGroupMange/dragPositionIndex'),
+        meta: {
+          title: "布局编辑",
+          icon: "form",
+          noCache: false,
+          link: null
+        },
+      }
+    ]
+  },
   {
     path: '/progressShow',
     component: Layout,

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

@@ -0,0 +1,424 @@
+<template>
+  <div class="main-wrap">
+    <div class="drag-position">
+      <!-- 左侧面板区域 start-->
+      <!-- <LetfPanel
+        :formList="formList"
+        @handleClick="panelClickHandler"
+        @start="generateKey"
+      ></LetfPanel> -->
+      <a-collapse style="width: 370px">
+        <a-collapse-panel
+          v-for="(item, index) in schemaGroup"
+          :header="item.title"
+          :key="index"
+        >
+          <collapseItem
+            :list="item.list"
+            @generateKey="generateKey"
+            @handleListPush="handleListPush"
+            @start="handleStart"
+          />
+        </a-collapse-panel>
+      </a-collapse>
+      <!-- 左侧面板区域 end-->
+      <!-- 中间拖拽区域 start-->
+      <div class="drag-wrap">
+        <!-- 顶部工具 -->
+        <TopToolBar
+          @showJSON="showJSON"
+          @saveJSON="saveJSON"
+          @showJSONData="showJSONData"
+          @showPreView="showPreView"
+        ></TopToolBar>
+        <CenterArea
+          :data="layoutData"
+          :selectItem="selectItem"
+          @setCurrentTarget="setCurrentTarget"
+          :noModel="noModel"
+          ref="centerAreaRef"
+        ></CenterArea>
+      </div>
+      <!-- 中间拖拽区域 end-->
+      <!-- 右侧面板区域 start -->
+      <RightPanel class="right-panel" :selectItem="selectItem"></RightPanel>
+      <!-- 右侧面板区域 end -->
+      <!-- JSON数据预览 -->
+      <JSONViewer ref="JSONViewerRef"></JSONViewer>
+      <!-- 布局效果预览 -->
+      <PreView ref="PreViewRef"></PreView>
+    </div>
+  </div>
+</template>
+
+<script>
+import { formList } from "./component/tempJson.js";
+
+import LetfPanel from "./component/LetfPanel.vue";
+import CenterArea from "./component/CenterArea.vue";
+import collapseItem from "./component/collapseItem.vue"; //左侧tab
+import RightPanel from "./component/RightPanel.vue"; //右侧tab
+import TopToolBar from "./component/TopToolBar.vue"; //右侧tab
+import { updateFormGroup, getFormGroup } from "@/api/system/formGroup";
+import JSONViewer from "./component/JSONViewer.vue";
+import PreView from "./component/PreView.vue";
+
+export default {
+  name: "dragPositionIndex",
+  props: [],
+  components: {
+    LetfPanel,
+    CenterArea,
+    collapseItem,
+    RightPanel,
+    TopToolBar,
+    JSONViewer,
+    PreView,
+  },
+  data() {
+    return {
+      formGroupData: {},
+      startType: "",
+      layoutData: {
+        list: [],
+      },
+      mainList: [], //拖拽区域数据
+      selectItem: {}, //当前拖拽对象
+      noModel: [
+        "button",
+        "divider",
+        "card",
+        "grid",
+        "tabs",
+        "table",
+        "alert",
+        "text",
+        "html",
+      ],
+      schemaGroup: [
+        {
+          title: "表单控件",
+          list: [],
+        },
+        {
+          title: "布局组件",
+          list: [
+            {
+              label: "标签页布局",
+              type: "tabs",
+              options: {
+                tabBarGutter: null,
+                type: "line",
+                tabPosition: "top",
+                size: "default",
+                noFormItem: true,
+                animated: true,
+              },
+              columns: [
+                {
+                  value: "1",
+                  label: "选项1",
+                  list: [],
+                  tableName: "",
+                },
+                {
+                  value: "2",
+                  label: "选项2",
+                  list: [],
+                  tableName: "",
+                },
+              ],
+              key: "",
+              model: "",
+            },
+            {
+              type: "grid",
+              label: "栅格布局",
+              icon: "icon-zhage",
+              columns: [
+                {
+                  span: 12,
+                  list: [],
+                },
+                {
+                  span: 12,
+                  list: [],
+                },
+              ],
+              options: {
+                noFormItem: true,
+                gutter: 0,
+              },
+              key: "",
+              model: "",
+            },
+            {
+              type: "divider",
+              label: "分割线",
+              icon: "icon-fengexian",
+              options: {
+                orientation: "left",
+                noFormItem: true,
+                title: "提示信息",
+              },
+              key: "",
+              model: "",
+            },
+          ],
+        },
+      ],
+    };
+  },
+  created() {
+    // this.schemaGroup[0].list = formList;
+  },
+  computed: {
+    formList() {
+      return formList;
+    },
+  },
+  methods: {
+    async initData() {
+      let id = this.$route.query.id;
+      let res = await getFormGroup(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.initFormData();
+      } else {
+        this.$message.error(res.msg);
+      }
+    },
+    // 添加表单json数据
+    addFormJSONData(data) {
+      df = (arr) => {
+        arr.forEach((element) => {
+          if (element.type == "form") {
+            // element.dfVueTemplate=
+          }
+        });
+      };
+    },
+    // 预览展示
+    showPreView() {
+      console.log(this.layoutData, formList);
+      let tempLayoutData = JSON.parse(JSON.stringify(this.layoutData));
+
+      this.$refs.PreViewRef.setLayoutData(this.layoutData, formList);
+      this.$nextTick(() => {
+        this.$refs.PreViewRef.showPreView();
+      });
+    },
+    // JSON展示回调
+    showJSONData() {
+      this.$refs.JSONViewerRef.setJSONData(JSON.stringify(this.layoutData));
+      this.$refs.JSONViewerRef.showHandler();
+    },
+    // 保存布局数据
+    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, index) => {
+        let { dfName, dfNickname, dfTableName, formKey, dfVueTemplate } = item;
+        return {
+          key: new Date().getTime() + "_" + index,
+          type: "form",
+          label: dfName,
+          dfNickname,
+          dfTableName,
+          formKey,
+          dfVueTemplate,
+        };
+      });
+      this.$set(this.schemaGroup[0], "list", res);
+      if (layoutJson) {
+        this.layoutData = JSON.parse(layoutJson);
+      } else {
+        this.layoutData.list.push(...res);
+      }
+      console.log(this.layoutData);
+      // this.schemaGroup[0].list = res;
+    },
+    // 预览json
+    showJSON() {
+      console.log("json数据", JSON.stringify(this.layoutData));
+    },
+    handleStart(type) {
+      this.startType = type;
+    },
+    checkIsRepeat(dfNickname) {
+      console.log(dfNickname, this.layoutData);
+      let res = {
+        result: false,
+      };
+      let checkDF = (list, res) => {
+        for (let i = 0; i < list.length; i++) {
+          let temp = list[i];
+          if (temp.type == "form") {
+            console.log(temp.dfNickname, dfNickname);
+            if (temp.dfNickname == dfNickname) {
+              res.result = true;
+            }
+          } else if (temp.type == "tabs" || temp.type == "grid") {
+            for (let k = 0; k < temp.columns.length; k++) {
+              checkDF(temp.columns[k].list, res);
+            }
+          }
+        }
+      };
+      checkDF(this.layoutData.list, res);
+      return res.result;
+    },
+    // 校验当前表单是否已存在
+    handleListPush(item) {
+      console.log(this.selectItem);
+      console.log(item);
+      if (item.type == "form") {
+        let isRepeat = this.checkIsRepeat(item.dfNickname);
+        console.log("isRepeat", isRepeat);
+        if (isRepeat) {
+          this.$message.error("该表单已存在!");
+          return;
+        }
+      }
+      // 生成key值
+      // if (!this.selectItem?.key) {
+      // 在没有选择表单时，将数据push到this.data.list
+      const key = item.type + "_" + new Date().getTime();
+      item = {
+        ...item,
+        key,
+        model: key,
+      };
+      if (this.noModel.includes(item.type)) {
+        // 删除不需要的model属性
+        delete item.model;
+      }
+      const itemString = JSON.stringify(item);
+      const record = JSON.parse(itemString);
+      // 删除icon及compoent属性
+      delete record.icon;
+      delete record.component;
+      this.layoutData.list.push(record);
+      this.handleSetSelectItem(record);
+      return false;
+      // }
+      // this.$refs.centerAreaRef.handleCopy(false, item);
+    },
+    handleSetSelectItem(record) {
+      // 操作间隔不能低于100毫秒
+      const newTime = new Date().getTime();
+      if (newTime - this.updateTime < 100) {
+        return false;
+      }
+
+      this.updateTime = newTime;
+
+      // 设置selectItem的值
+      this.selectItem = record;
+      console.log("this.selectItem", this.selectItem);
+
+      // 判断是否选中控件，如果选中则弹出属性面板，否则关闭属性面板
+      // if (record.key) {
+      //   this.startType = record.type;
+      //   this.changeTab(2);
+      // } else {
+      //   this.changeTab(1);
+      // }
+    },
+    panelClickHandler(item) {
+      this.selectItem = item;
+      this.mainList.push(item);
+      this.layoutData.list.push(item);
+      console.log(this.mainList);
+    },
+    setCurrentTarget(item) {
+      console.log("this.selectItem", item);
+      this.selectItem = item;
+      console.log("layoutData", this.layoutData);
+    },
+    generateKey(list, index) {
+      const key = list[index].type + "_" + new Date().getTime();
+      this.$set(list, index, {
+        ...list[index],
+        key,
+        model: key,
+      });
+      if (this.noModel.includes(list[index].type)) {
+        // 删除不需要的model属性
+        delete list[index].model;
+      }
+    },
+  },
+  mounted() {
+    this.initData();
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-wrap: wrap;
+}
+.main-wrap {
+  height: calc(100vh - 140px);
+}
+.drag-position {
+  height: calc(100% - 30px);
+  display: flex;
+  .drag-wrap {
+    // box-sizing: border-box;
+    position: relative;
+    // height: 100%;
+    padding: 0 10px;
+    flex: 1;
+  }
+}
+.right-panel {
+  width: 350px;
+  border: 1px solid #dddddd;
+  height: 100%;
+  padding: 5px;
+  border-radius: 5px;
+}
+</style>

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

@@ -706,6 +706,13 @@ export default {
   methods: {
     // 布局回调
     async handlePosition(row) {
+      this.$router.push({
+        path: "/dragPositionIndex/index",
+        query: {
+          id: row.id,
+        },
+      });
+      return;
       let res = await getFormGroup(row.id);
       console.log(res);
       if (res.code == 200) {