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

zkqy-ui/src/assets/js/kFormDesign.js

@@ -575,7 +575,7 @@ let tempData = [
         "icon": "icon-fengexian",
         "options": {
           "orientation": "left",
-          "noFormItem": true
+          "noFormItem": true,
         },
         "key": "",
         "model": ""

zkqy-ui/src/main.js

@@ -41,6 +41,8 @@ import "@packages/theme/index.scss";
 // bpmnPro end
 
 
+
+
 import '@/assets/styles/index.scss' // global css
 import '@/assets/styles/zkqy.scss' // zkqy css
 // require('@/assets/styles/index.scss')  // global css
@@ -93,6 +95,13 @@ import '@/assets/iconfont/iconfont.js'
 import * as echarts from 'echarts'
 Vue.prototype.$echarts = echarts
 
+// 引入并挂载ant-design
+import Antd from 'ant-design-vue';
+import 'ant-design-vue/dist/antd.css';
+Vue.use(Antd);
+
+
+
 
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts

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

@@ -251,7 +251,7 @@ export default {
     processTypeOption() {
       let tenantProfession = this.user.tenant.tenantProfession;
 
-      let isMES = tenantProfession.includes("MES");
+      let isMES = tenantProfession?.includes("MES");
       if (isMES) {
         //mes
         this.processTypeOptions = this.dict.type.bpm_type;

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

@@ -0,0 +1,240 @@
+<template>
+  <div class="center-area">
+    <!-- <p class="hint-text" v-show="data.list.length === 0">
+      <a-empty description="从左侧选择控件添加" />
+    </p> -->
+    <draggable
+      tag="div"
+      class="draggable-box"
+      v-bind="{
+        group: 'form-draggable',
+        ghostClass: 'moving',
+        animation: 180,
+        handle: '.drag-move',
+      }"
+      v-model="data.list"
+      @end="endHandler"
+      @add="deepClone"
+      @start="dragStart($event, data.list)"
+    >
+      <transition-group tag="div" name="list" class="list-main">
+        <LayoutItem
+          v-for="(item, index) in data.list"
+          :key="index"
+          class="drag-move"
+          :record="item"
+          :selectItem.sync="selectItem"
+          @handleColAdd="handleColAdd"
+          @dragStart="dragStart"
+          @handleSelectItem="handleSelectItem"
+          @handleDelete="handleDelete"
+          @handleShowRightMenu="handleShowRightMenu"
+        />
+      </transition-group>
+    </draggable>
+  </div>
+</template>
+
+<script>
+import LayoutItem from "./LayoutItem.vue";
+import draggable from "vuedraggable";
+export default {
+  name: "CenterArea",
+  props: ["selectItem", "data", "noModel"],
+  components: { LayoutItem, draggable },
+  data() {
+    return {};
+  },
+  computed: {},
+  methods: {
+    handleCopy(isCopy = true, data) {
+      const traverse = (array) => {
+        array.forEach((element, index) => {
+          if (element.key === this.selectItem.key) {
+            if (isCopy) {
+              // 复制添加到选择节点后面
+              array.splice(index + 1, 0, element);
+            } else {
+              // 双击添加到选择节点后面
+              array.splice(index + 1, 0, data);
+            }
+            // 复制完成，重置key值
+            const evt = {
+              newIndex: index + 1,
+            };
+            this.handleColAdd(evt, array, true);
+            return;
+          }
+          if (["grid", "tabs", "selectInputList"].includes(element.type)) {
+            // 栅格布局
+            element.columns.forEach((item) => {
+              traverse(item.list);
+            });
+          } else if (element.type === "card") {
+            // 卡片布局
+            traverse(element.list);
+          } else if (element.type === "batch") {
+            // 动态表格内复制
+            if (!isCopy && !this.insertAllowedType.includes(data.type)) {
+              // 插入不允许的字段时，直接return false
+              return false;
+            }
+            traverse(element.list);
+          }
+          if (element.type === "table") {
+            // 表格布局
+            element.trs.forEach((item) => {
+              item.tds.forEach((val) => {
+                traverse(val.list);
+              });
+            });
+          }
+        });
+      };
+      traverse(this.data.list);
+    },
+    // 递归 删除已选择
+    handleDelete(ele) {
+      console.log("删除的元素", ele);
+      // 删除已选择
+      const traverse = (array) => {
+        array = array.filter((element, index) => {
+          if (["grid", "tabs", "selectInputList"].includes(element.type)) {
+            // 栅格布局
+            element.columns.forEach((item) => {
+              item.list = traverse(item.list);
+            });
+          }
+          if (element.type === "card" || element.type === "batch") {
+            // 卡片布局
+            element.list = traverse(element.list);
+          }
+          if (element.type === "table") {
+            // 表格布局
+            element.trs.forEach((item) => {
+              item.tds.forEach((val) => {
+                val.list = traverse(val.list);
+              });
+            });
+          }
+          if (element.key !== ele.key) {
+            return true;
+          } else {
+            if (array.length === 1) {
+              this.handleSelectItem({ key: "" });
+            } else if (array.length - 1 > index) {
+              this.handleSelectItem(array[index + 1]);
+            } else {
+              this.handleSelectItem(array[index - 1]);
+            }
+            return false;
+          }
+        });
+        return array;
+      };
+
+      this.data.list = traverse(this.data.list);
+    },
+    deepClone(evt) {
+      console.log("deepClone", evt);
+      const newIndex = evt.newIndex;
+      // json深拷贝一次
+      const listString = JSON.stringify(this.data.list);
+      this.data.list = JSON.parse(listString);
+      // 删除icon及compoent属性
+      delete this.data.list[newIndex].icon;
+      delete this.data.list[newIndex].component;
+      // this.data.list[newIndex].key =
+      //   this.data.list[newIndex].type + "_" + new Date().getTime();
+      this.$emit("setCurrentTarget", this.data.list[newIndex]);
+    },
+    dragStart(e, list) {
+      this.$emit("setCurrentTarget", list[e.oldIndex]);
+    },
+    handleSelectItem(item) {
+      this.$emit("setCurrentTarget", item);
+    },
+    handleShowRightMenu() {},
+    handleColAdd(evt, columns, isCopy = false) {
+      // 重置或者生成key值
+      const newIndex = evt.newIndex;
+      const key = columns[newIndex].type + "_" + new Date().getTime();
+      if (columns[newIndex].key === "" || isCopy) {
+        this.$set(columns, newIndex, {
+          ...columns[newIndex],
+          key,
+          model: key,
+        });
+        if (this.noModel.includes(columns[newIndex].type)) {
+          // 删除不需要的model属性
+          delete columns[newIndex].model;
+        }
+        if (typeof columns[newIndex].options !== "undefined") {
+          // 深拷贝options
+          const optionsStr = JSON.stringify(columns[newIndex].options);
+          columns[newIndex].options = JSON.parse(optionsStr);
+        }
+        if (typeof columns[newIndex].rules !== "undefined") {
+          // 深拷贝rules
+          const rulesStr = JSON.stringify(columns[newIndex].rules);
+          columns[newIndex].rules = JSON.parse(rulesStr);
+        }
+        if (typeof columns[newIndex].list !== "undefined") {
+          // 深拷贝list
+          columns[newIndex].list = [];
+        }
+        if (typeof columns[newIndex].columns !== "undefined") {
+          // 深拷贝columns
+          const columnsStr = JSON.stringify(columns[newIndex].columns);
+          columns[newIndex].columns = JSON.parse(columnsStr);
+          // 复制时，清空数据
+          columns[newIndex].columns.forEach((item) => {
+            item.list = [];
+          });
+        }
+        if (columns[newIndex].type === "table") {
+          // 深拷贝trs
+          const trsStr = JSON.stringify(columns[newIndex].trs);
+          columns[newIndex].trs = JSON.parse(trsStr);
+          // 复制时，清空数据
+          columns[newIndex].trs.forEach((item) => {
+            item.tds.forEach((val) => {
+              val.list = [];
+            });
+          });
+        }
+      }
+      // 深拷贝数据
+      const listString = JSON.stringify(columns[newIndex]);
+      columns[newIndex] = JSON.parse(listString);
+      this.$emit("handleSetSelectItem", columns[newIndex]);
+    },
+    endHandler(ent) {
+      console.log(ent);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.center-area {
+  // height: calc(100% - 40px);
+  height: 100%;
+  background: rgb(221, 221, 221);
+  padding: 5px;
+  position: relative;
+  .hint-text {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+  .draggable-box {
+    height: 100%;
+    overflow: auto;
+    .list-main {
+      height: 100%;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,263 @@
+<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">
+        <CenterArea
+          :data="layoutData"
+          :selectItem="selectItem"
+          @setCurrentTarget="setCurrentTarget"
+          :noModel="noModel"
+          ref="centerAreaRef"
+        ></CenterArea>
+      </div>
+      <!-- 中间拖拽区域 end-->
+      <!-- 右侧面板区域 start -->
+      <RightPanel class="right-panel" :selectItem="selectItem"></RightPanel>
+      <!-- 右侧面板区域 end -->
+    </div>
+  </div>
+</template>
+
+<script>
+import { formList } from "./tempJson.js";
+
+import LetfPanel from "./LetfPanel.vue";
+import CenterArea from "./CenterArea.vue";
+import collapseItem from "./collapseItem.vue"; //左侧tab
+import RightPanel from "./RightPanel.vue"; //右侧tab
+export default {
+  name: "DragPosition",
+  props: [],
+  components: { LetfPanel, CenterArea, collapseItem, RightPanel },
+  data() {
+    return {
+      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: {
+    handleStart(type) {
+      this.startType = type;
+    },
+    handleListPush(item) {
+      console.log(this.selectItem);
+      console.log(item);
+      // 生成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;
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-wrap: wrap;
+}
+.main-wrap {
+  height: 100%;
+}
+.drag-position {
+  height: 100%;
+  display: flex;
+  .drag-wrap {
+    // box-sizing: border-box;
+    position: relative;
+    // height: 100%;
+    padding: 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/component/FormCard.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="card-wrap">
+    <i class="el-icon-c-scale-to-original mr10"></i>
+    <span>{{ record.label }}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "FormCard",
+  props: ["record"],
+  components: {},
+  data() {
+    return {};
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.card-wrap {
+  height: 56px;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.card-wrap:hover {
+  background: #f5f7fa;
+  color: lightblue;
+}
+</style>

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

@@ -0,0 +1,193 @@
+<template>
+  <div class="layout-width">
+    <template v-if="record.type == 'tabs'">
+      <div
+        class="grid-box"
+        :class="{ active: record.key === selectItem.key }"
+        @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">
+                  <LayoutItem
+                    class="drag-move"
+                    v-for="(item, index) in tabItem.list"
+                    :key="index"
+                    :selectItem.sync="selectItem"
+                    :record="item"
+                    @handleDelete="handleDelete"
+                  />
+                </transition-group>
+              </draggable>
+            </div>
+          </el-tab-pane>
+        </el-tabs>
+        <div
+          class="delete"
+          :class="record.key === selectItem.key ? 'active' : 'unactivated'"
+          @click.stop="deleHandle(record)"
+        >
+          <i class="el-icon-delete"></i>
+        </div>
+      </div>
+    </template>
+    <template v-else-if="record.type == 'grid'">
+      <!-- 栅格布局 -->
+      <div
+        class="grid-box"
+        :class="{ active: record.key === selectItem.key }"
+        @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">
+                  <LayoutItem
+                    class="drag-move"
+                    v-for="(item, index) in colItem.list"
+                    :key="index"
+                    :selectItem.sync="selectItem"
+                    :record="item"
+                    @handleDelete="handleDelete"
+                  />
+                </transition-group>
+              </draggable>
+            </div>
+          </el-col>
+        </el-row>
+        <div
+          class="delete"
+          :class="record.key === selectItem.key ? 'active' : 'unactivated'"
+          @click.stop="deleHandle(record)"
+        >
+          <i class="el-icon-delete"></i>
+        </div>
+      </div>
+    </template>
+    <template v-else-if="record.type == 'divider'">
+      <!-- 分割线 -->
+      <div
+        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>
+      </div>
+    </template>
+    <template v-else-if="record.type == 'form'">
+      <form-card :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>
+    </template>
+  </div>
+</template>
+
+<script>
+import FormCard from "./FormCard.vue";
+import draggable from "vuedraggable";
+export default {
+  name: "LayoutItem",
+  props: ["record", "selectItem"],
+  components: { FormCard, draggable },
+  data() {
+    return {};
+  },
+  computed: {},
+  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>

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

@@ -0,0 +1,153 @@
+<template>
+  <div class="left-panel-wrap">
+    <el-menu default-active="2" class="el-menu-vertical-demo">
+      <el-submenu index="1">
+        <template slot="title">
+          <i class="el-icon-tickets"></i>
+          <span>表单</span>
+        </template>
+        <draggable
+          :value="panelList"
+          v-bind="{
+            group: { name: 'form-draggable', pull: 'clone', put: false },
+            sort: false,
+            animation: 180,
+            ghostClass: 'moving',
+          }"
+        >
+          <!-- <transition-group tag="div" name="list" class="list-main"> -->
+          <el-menu-item
+            @click="handleClick(item)"
+            @dragstart="dragstart"
+            :draggable="true"
+            v-for="(item, index) in panelList"
+            :key="index"
+            >{{ item.dfName }}</el-menu-item
+          >
+          <!-- </transition-group> -->
+        </draggable>
+      </el-submenu>
+      <el-submenu index="2">
+        <template slot="title">
+          <i class="el-icon-s-grid"></i>
+          <span>布局控件</span>
+        </template>
+        <draggable
+          :value="panelList"
+          v-bind="{
+            group: { name: 'form-draggable', pull: 'clone', put: false },
+            sort: false,
+            animation: 180,
+            ghostClass: 'moving',
+          }"
+        >
+          <!-- <transition-group tag="div" name="list" class="list-main"> -->
+          <el-menu-item
+            @click="handleClick(item)"
+            v-for="item in layoutList"
+            :key="item.type"
+            >{{ item.label }}</el-menu-item
+          >
+          <!-- </transition-group> -->
+        </draggable>
+      </el-submenu>
+    </el-menu>
+  </div>
+</template>
+
+<script>
+import draggable from "vuedraggable";
+export default {
+  name: "LetfPanel",
+  props: ["formList"],
+  components: { draggable },
+  data() {
+    return {
+      layoutList: [
+        {
+          label: "标签页布局",
+          type: "tabs",
+          options: {
+            tabBarGutter: null,
+            type: "line",
+            tabPosition: "top",
+            size: "default",
+            noFormItem: true,
+            animated: true,
+          },
+          columns: [
+            {
+              value: "1",
+              label: "选项1",
+              list: [],
+            },
+            {
+              value: "2",
+              label: "选项2",
+              list: [],
+            },
+          ],
+          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: "",
+        },
+      ],
+    };
+  },
+  computed: {
+    panelList() {
+      let list = this.formList.map((item) => {
+        item.type = "form";
+        return item;
+      });
+      return list;
+    },
+  },
+  methods: {
+    handleClick(item) {
+      console.log(item);
+      item.key = item.type + "_" + new Date().getTime();
+      this.$emit("handleClick", item);
+    },
+    // 开始拖拽回调
+    dragstart(evt) {
+      console.log(111);
+      console.log(evt);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss"></style>

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

@@ -0,0 +1,225 @@
+<template>
+  <div class="panel-wrap">
+    <div class="layOut-panel">
+      <a-empty
+        class="hint-box"
+        v-show="!selectItem.key || selectItem.type === 'form'"
+        description="未选择布局控件"
+      />
+      <el-form
+        v-show="selectItem.type != 'form' && selectItem.key"
+        ref="form"
+        label-width="100px"
+        :inline="true"
+        size="mini"
+      >
+        <h3 class="title">{{ selectItem.label }}</h3>
+        <!-- tabs布局配置 start-->
+        <el-form-item v-if="selectItem.type == 'tabs'" label="页签配置:">
+          <el-row
+            :gutter="5"
+            v-for="(column, index) in selectItem.columns"
+            :key="index"
+            class="mb5"
+          >
+            <el-col :span="7">
+              <el-input v-model="column.label" size="mini" clearable></el-input>
+            </el-col>
+            <el-col :span="7"
+              ><el-input v-model="column.value" size="mini" clearable></el-input
+            ></el-col>
+            <el-col :span="7">
+              <!-- <el-input
+                v-model="column.tableName"
+                size="mini"
+                clearable
+              ></el-input> -->
+              <el-select v-model="column.tableName" clearable filterable>
+                <el-option
+                  v-for="item in tableList"
+                  :key="item.tableName"
+                  :label="item.tableComment"
+                  :value="item.tableName"
+                >
+                  <span class="discribe" style="float: left">{{
+                    item.tableComment
+                  }}</span>
+                  <span style="float: right; color: #8492a6; font-size: 13px">{{
+                    item.tableName
+                  }}</span>
+                </el-option>
+              </el-select>
+            </el-col>
+            <el-col :span="3"
+              ><el-button
+                type="danger"
+                size="mini"
+                @click="deleteColumnHandler(index)"
+                icon="el-icon-delete"
+              ></el-button>
+            </el-col>
+          </el-row>
+          <el-button
+            type="success"
+            size="mini"
+            @click="addColumnHandler"
+            icon="el-icon-plus"
+            >添加页签</el-button
+          >
+        </el-form-item>
+        <!-- tabs布局配置 end-->
+
+        <!-- 栅格布局配置  start -->
+        <el-form-item
+          v-if="selectItem.type == 'grid'"
+          label="栅格间距:"
+          size="normal"
+        >
+          <el-input-number
+            v-model="selectItem.options.gutter"
+            size="mini"
+            :min="0"
+            :max="100"
+            label="描述文字"
+          ></el-input-number>
+        </el-form-item>
+        <el-form-item
+          v-if="selectItem.type == 'grid'"
+          label="列配置项:"
+          size="normal"
+        >
+          <el-row
+            v-for="(columns, index) in selectItem.columns"
+            :key="index"
+            :gutter="20"
+          >
+            <el-col :span="19">
+              <el-input-number
+                v-model="columns.span"
+                size="mini"
+                :min="0"
+                :max="100"
+                label="描述文字"
+              ></el-input-number>
+            </el-col>
+            <el-col :span="5">
+              <el-button
+                type="danger"
+                icon="el-icon-delete"
+                size="mini"
+                @click="deleteColumnHandler(index)"
+              ></el-button>
+            </el-col>
+          </el-row>
+          <el-button
+            type="primary"
+            icon="el-icon-plus"
+            size="mini"
+            @click="addOneColumn"
+            >添加一列</el-button
+          >
+        </el-form-item>
+        <!-- 栅格布局配置  end -->
+
+        <!-- 分割线配置  start -->
+        <el-form-item
+          v-if="selectItem.type == 'divider'"
+          label="提示位置:"
+          size="normal"
+        >
+          <el-radio-group v-model="selectItem.options.orientation" size="mini">
+            <el-radio-button label="left">左</el-radio-button>
+            <el-radio-button label="center">中</el-radio-button>
+            <el-radio-button label="right">右</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item
+          v-if="selectItem.type == 'divider'"
+          label="分割信息:"
+          size="normal"
+        >
+          <el-input
+            v-model="selectItem.options.title"
+            size="mini"
+            clearable
+          ></el-input>
+        </el-form-item>
+        <!-- 分割线配置  end -->
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getUncommonTable } from "@/utils/other";
+export default {
+  name: "RightPanel",
+  props: ["selectItem"],
+  components: {},
+  data() {
+    return {
+      tableList: [],
+    };
+  },
+  watch: {
+    mySelectItem: {
+      handler(nval) {
+        console.log("selectItem", nval);
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
+  computed: {
+    mySelectItem() {
+      return this.selectItem;
+    },
+  },
+  created() {
+    this.getFormList();
+  },
+  methods: {
+    // 删除页签回调
+    deleteColumnHandler(index) {
+      console.log(index);
+      this.selectItem.columns.splice(index, index);
+    },
+    // 添加页签回调
+    addColumnHandler() {
+      this.selectItem.columns.push({
+        value: this.selectItem.columns.length + 1 + "",
+        label: `选项${this.selectItem.columns.length}`,
+        list: [],
+        tableName: "",
+      });
+    },
+    // 添加栅格一列数据
+    addOneColumn() {
+      this.selectItem.columns.push({
+        span: 12,
+        list: [],
+      });
+    },
+    async getFormList() {
+      let par = {
+        ...this.$store.state.user.dataSource,
+      };
+      let res = await getUncommonTable();
+      this.tableList = res;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.panel-wrap {
+  .layOut-panel {
+    .title {
+      display: block;
+      height: 30px;
+      text-align: center;
+      line-height: 30px;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,67 @@
+<template>
+  <draggable
+    tag="ul"
+    :value="list"
+    v-bind="{
+      group: { name: 'form-draggable', pull: 'clone', put: false },
+      sort: false,
+      animation: 180,
+      ghostClass: 'moving',
+    }"
+    @start="handleStart($event, list)"
+  >
+    <li
+      v-for="(val, index) in list"
+      :key="index"
+      @dragstart="$emit('generateKey', list, index)"
+      @click="$emit('handleListPush', val)"
+    >
+      <!-- <svg v-if="val.icon" class="icon" aria-hidden="true">
+        <use :xlink:href="`#${val.icon}`"></use>
+      </svg> -->
+      {{ val.label }}
+    </li>
+  </draggable>
+</template>
+<script>
+import draggable from "vuedraggable";
+export default {
+  name: "collapseItem",
+  props: ["list"],
+  components: {
+    draggable,
+  },
+  methods: {
+    handleStart(e, list) {
+      this.$emit("start", list[e.oldIndex].type);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+// .li {
+//   list-style: none;
+// }
+
+li {
+  border-radius: 0;
+  border: 0;
+  -webkit-box-shadow: 1px 0 0 0 #ccc, 0 1px 0 0 #ccc, 1px 1px 0 0 #ccc,
+    1px 0 0 0 #ccc inset, 0 1px 0 0 #ccc inset;
+  box-shadow: 1px 0 0 0 #ccc, 0 1px 0 0 #ccc, 1px 1px 0 0 #ccc,
+    inset 1px 0 0 0 #ccc, inset 0 1px 0 0 #ccc;
+  padding: 8px 12px;
+  width: calc(50% - 6px);
+  margin: 2.7px;
+  height: 36px;
+  line-height: 20px;
+  cursor: move;
+  border: 1px solid transparent;
+  border-radius: 3px;
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
+  box-sizing: border-box;
+  text-align: center;
+}
+</style>

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

@@ -158,6 +158,15 @@
                   >修改
                 </el-button></el-dropdown-item
               >
+              <el-dropdown-item
+                ><el-button
+                  size="mini"
+                  type="text"
+                  icon="el-icon-edit"
+                  @click="handlePosition(scope.row)"
+                  >设置布局
+                </el-button></el-dropdown-item
+              >
               <el-dropdown-item>
                 <el-button
                   size="mini"
@@ -549,7 +558,10 @@
         </span>
       </template>
     </el-dialog>
-    <!-- 新增条件弹窗 -->
+    <!-- 布局弹窗 -->
+    <el-dialog title="布局" :visible.sync="layoutShow" fullscreen>
+      <DragPosition></DragPosition>
+    </el-dialog>
   </div>
 </template>
 
@@ -570,11 +582,12 @@ import {
   getListName,
   dragTablePreview,
 } from "@/api/dragform/form.js";
+import DragPosition from "./component/DragPosition.vue";
 
 export default {
   name: "formRelateMange",
   props: [],
-  components: {},
+  components: { DragPosition },
   data() {
     return {
       // 弹窗相关数据
@@ -670,6 +683,9 @@ export default {
       ],
       conditionTableShow: true,
       // end
+      // 布局数据  start
+      layoutShow: false,
+      // 布局数据  end
     };
   },
   computed: {
@@ -684,6 +700,10 @@ export default {
     this.getList();
   },
   methods: {
+    // 布局回调
+    handlePosition(row) {
+      this.layoutShow = true;
+    },
     //条件编辑确认回调
     conditionConfirmHandler() {
       if (this.flag == "query") {
@@ -1130,4 +1150,9 @@ export default {
 };
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+::v-deep .el-dialog__body {
+  box-sizing: border-box;
+  height: calc(100% - 60px) !important;
+}
+</style>