fix: 表单页面增加流程设置按钮

src/views/flow/stFormDesign/packages/StFormDesign/MobileIndex.vue

@@ -1,23 +1,23 @@
 <template>
   <a-config-provider :locale="locale">
     <div class="form-designer-container-9136076486841527">
-      <Header v-if="showHead" :title="title" />
+      <Header v-if="showHead" :title="title"/>
       <!-- 操作区域 start -->
       <operatingArea
-        v-if="toolbarsTop"
-        :showToolbarsText="showToolbarsText"
-        :toolbars="toolbars"
-        @handleSave="handleSave"
-        @handlePreview="handlePreview"
-        @handleOpenImportJsonModal="handleOpenImportJsonModal"
-        @handleOpenCodeModal="handleOpenCodeModal"
-        @handleOpenJsonModal="handleOpenJsonModal"
-        @handleReset="handleReset"
-        @handleClose="handleClose"
-        @handleUndo="handleUndo"
-        @handleRedo="handleRedo"
-        :recordList="recordList"
-        :redoList="redoList"
+          v-if="toolbarsTop"
+          :showToolbarsText="showToolbarsText"
+          :toolbars="toolbars"
+          @handleSave="handleSave"
+          @handlePreview="handlePreview"
+          @handleOpenImportJsonModal="handleOpenImportJsonModal"
+          @handleOpenCodeModal="handleOpenCodeModal"
+          @handleOpenJsonModal="handleOpenJsonModal"
+          @handleReset="handleReset"
+          @handleClose="handleClose"
+          @handleUndo="handleUndo"
+          @handleRedo="handleRedo"
+          :recordList="recordList"
+          :redoList="redoList"
       >
         <template slot="left-action">
           <slot name="left-action"></slot>
@@ -29,8 +29,8 @@
       </operatingArea>
       <!-- 操作区域 end -->
       <div
-        class="content"
-        :class="{
+          class="content"
+          :class="{
           'show-head': showHead,
           'toolbars-top': toolbarsTop,
           'show-head-and-toolbars-top': toolbarsTop && showHead,
@@ -41,21 +41,36 @@
           <a-collapse @change="collapseChange" :defaultActiveKey="collapseDefaultActiveKey">
             <!-- 基础控件 start -->
             <a-collapse-panel v-if="basicsArray.length > 0" header="基础控件" key="1">
-              <collapseItem :list="basicsArray" @generateKey="generateKey" @handleListPush="handleListPush" @start="handleStart" />
+              <collapseItem :list="basicsArray" @generateKey="generateKey" @handleListPush="handleListPush"
+                            @start="handleStart"/>
             </a-collapse-panel>
             <!-- 基础控件 end -->
             <!-- 自定义控件 start -->
             <a-collapse-panel v-if="customComponents.list.length > 0" :header="customComponents.title" key="3">
-              <collapseItem :list="customComponents.list" @generateKey="generateKey" @handleListPush="handleListPush" @start="handleStart" />
+              <collapseItem :list="customComponents.list" @generateKey="generateKey" @handleListPush="handleListPush"
+                            @start="handleStart"/>
             </a-collapse-panel>
             <!-- 自定义控件 end -->
 
             <!-- 布局控件 start -->
             <a-collapse-panel v-if="layoutArray.length > 0" header="布局控件" key="4">
-              <collapseItem :list="layoutArray" @generateKey="generateKey" @handleListPush="handleListPush" @start="handleStart" />
+              <collapseItem :list="layoutArray" @generateKey="generateKey" @handleListPush="handleListPush"
+                            @start="handleStart"/>
             </a-collapse-panel>
             <!-- 布局控件 end -->
           </a-collapse>
+          <a-float-button
+              type="primary"
+              :style="{
+                  left: '24px',
+                }"
+              @click="openSetting"
+          >
+            <template #icon>
+              <SettingOutlined/>
+            </template>
+          </a-float-button>
+          <MainSetting ref="mainSettingRef"/>
         </aside>
         <!-- 左侧控件区域 end -->
 
@@ -63,21 +78,21 @@
         <section>
           <!-- 操作区域 start -->
           <operatingArea
-            v-if="!toolbarsTop"
-            :showToolbarsText="showToolbarsText"
-            :toolbars="toolbars"
-            @handleSave="handleSave"
-            @handlePreview="handlePreview"
-            @handleOpenImportJsonModal="handleOpenImportJsonModal"
-            @handleOpenCodeModal="handleOpenCodeModal"
-            @handleOpenJsonModal="handleOpenJsonModal"
-            @handleReset="handleReset"
-            @handleClose="handleClose"
-            @handleUndo="handleUndo"
-            @handleRedo="handleRedo"
-            :recordList="recordList"
-            :redoList="redoList"
-            :isMobile="true"
+              v-if="!toolbarsTop"
+              :showToolbarsText="showToolbarsText"
+              :toolbars="toolbars"
+              @handleSave="handleSave"
+              @handlePreview="handlePreview"
+              @handleOpenImportJsonModal="handleOpenImportJsonModal"
+              @handleOpenCodeModal="handleOpenCodeModal"
+              @handleOpenJsonModal="handleOpenJsonModal"
+              @handleReset="handleReset"
+              @handleClose="handleClose"
+              @handleUndo="handleUndo"
+              @handleRedo="handleRedo"
+              :recordList="recordList"
+              :redoList="redoList"
+              :isMobile="true"
           >
             <template slot="left-action">
               <slot name="left-action"></slot>
@@ -90,22 +105,22 @@
           <!-- 操作区域 end -->
           <div class="mobile-panel">
             <form-component-panel-mobile
-              :class="{ 'no-toolbars-top': !toolbarsTop }"
-              :data="data"
-              :selectItem="selectItem"
-              :noModel="noModel"
-              :hideModel="hideModel"
-              :startType="startType"
-              ref="KFCP"
-              @handleSetSelectItem="handleSetSelectItem"
+                :class="{ 'no-toolbars-top': !toolbarsTop }"
+                :data="data"
+                :selectItem="selectItem"
+                :noModel="noModel"
+                :hideModel="hideModel"
+                :startType="startType"
+                ref="KFCP"
+                @handleSetSelectItem="handleSetSelectItem"
             />
           </div>
 
           <!-- 操作区域 start -->
-          <json-modal ref="jsonModal" />
-          <code-modal ref="codeModal" />
-          <importJsonModal ref="importJsonModal" />
-          <previewModal ref="previewModal" />
+          <json-modal ref="jsonModal"/>
+          <code-modal ref="codeModal"/>
+          <importJsonModal ref="importJsonModal"/>
+          <previewModal ref="previewModal"/>
         </section>
         <!-- 中间面板区域 end -->
 
@@ -113,17 +128,18 @@
         <aside class="right">
           <a-tabs :activeKey="activeKey" @change="changeTab" :tabBarStyle="{ margin: 0 }">
             <a-tab-pane :key="1" tab="表单属性设置">
-              <formProperties :config="data.config" :previewOptions="previewOptions" @saveJsCode="$emit('saveJsCode', $event)" />
+              <formProperties :config="data.config" :previewOptions="previewOptions"
+                              @saveJsCode="$emit('saveJsCode', $event)"/>
             </a-tab-pane>
             <a-tab-pane :key="2" tab="控件属性设置">
               <formItemProperties
-                :formDataList="data.list"
-                class="form-item-properties"
-                :selectItem="selectItem"
-                :hideModel="hideModel"
-                :field-data="fieldData"
-                :dict-data="dictData"
-                @saveJsCode="$emit('saveJsCode', $event)"
+                  :formDataList="data.list"
+                  class="form-item-properties"
+                  :selectItem="selectItem"
+                  :hideModel="hideModel"
+                  :field-data="fieldData"
+                  :dict-data="dictData"
+                  @saveJsCode="$emit('saveJsCode', $event)"
               />
             </a-tab-pane>
           </a-tabs>
@@ -136,449 +152,457 @@
 </template>
 
 <script>
-  import { defineComponent, h } from 'vue';
-  import Header from './module/header.vue';
-  import operatingArea from './module/operatingArea.vue';
-  import formComponentPanel from './module/formComponentPanel.vue';
-  import formComponentPanelMobile from './module/formComponentPanelMobile.vue';
-  import JsonModal from './module/jsonModal.vue';
-  import CodeModal from './module/codeModal.vue';
-  import collapseItem from './module/collapseItem.vue';
-  import importJsonModal from './module/importJsonModal.vue';
-  import previewModal from '../StFormPreview/index.vue';
-  import zhCN from 'ant-design-vue/es/locale/zh_CN';
+import {defineComponent, h} from 'vue';
+import Header from './module/header.vue';
+import operatingArea from './module/operatingArea.vue';
+import formComponentPanel from './module/formComponentPanel.vue';
+import formComponentPanelMobile from './module/formComponentPanelMobile.vue';
+import JsonModal from './module/jsonModal.vue';
+import CodeModal from './module/codeModal.vue';
+import collapseItem from './module/collapseItem.vue';
+import importJsonModal from './module/importJsonModal.vue';
+import previewModal from '../StFormPreview/index.vue';
+import zhCN from 'ant-design-vue/es/locale/zh_CN';
 
-  import { Revoke } from '../core/revoke';
-  import { basicsList, layoutList, customComponents } from './config/formItemsConfig';
-  import formItemProperties from './module/formItemProperties.vue';
-  import formProperties from './module/formProperties.vue';
-  import _ from 'lodash';
-  import { useFlowStore } from '/@/store/modules/flow';
-  import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons-vue';
+import {Revoke} from '../core/revoke';
+import {basicsList, layoutList, customComponents} from './config/formItemsConfig';
+import formItemProperties from './module/formItemProperties.vue';
+import formProperties from './module/formProperties.vue';
+import _ from 'lodash';
+import {useFlowStore} from '/@/store/modules/flow';
+import {MailOutlined, AppstoreOutlined, SettingOutlined} from '@ant-design/icons-vue';
+import MainSetting from '/@/views/flow/setting/mainSetting.vue';
 
-  export default defineComponent({
-    name: 'StFormMobileDesign',
-    props: {
-      fieldData: {
-        type: Array,
-        default: () => [], // 提供一个默认值，以防父组件没有传递该属性
-      },
-      dictData: {
-        type: Array,
-        default: () => [], // 提供一个默认值，以防父组件没有传递该属性
-      },
-      title: {
-        type: String,
-        default: '表单设计器',
-      },
-      showHead: {
-        type: Boolean,
-        default: true,
-      },
-      hideResetHint: {
-        type: Boolean,
-        default: false,
-      },
-      toolbarsTop: {
-        type: Boolean,
-        default: false,
-      },
-      toolbars: {
-        type: Array,
-        default: () => [
-          'save',
-          'preview',
-          //'importJson',
-          //'exportJson',
-          'exportCode',
-          // 'reset',
-          // 'close',
-          'undo',
-          'redo',
-        ],
-      },
-      showToolbarsText: {
-        type: Boolean,
-        default: true,
-      },
-      fields: {
-        type: Array,
-        default: () => [
-          'input',
-          'textarea',
-          'number',
-          'select',
-          'checkbox',
-          'radio',
-          'date',
-          'time',
-          //"rate",
-          //"slider",
-          'uploadFile',
-          "uploadImg",
-          "cascader",
-          'treeSelect',
-          'deptAndPersonSelect',
-          'popUpSelect',
-          'batch',
-          //"selectInputList",
-          'editor',
-          //"switch",
-          'button',
-          //"alert",
-          //'text',
-           "html",
-          'divider',
-          'card',
-          'tabs',
-          'grid',
-          'table',
-          // "template"
-        ],
-      },
-      hideModel: {
-        // 隐藏数据字段
-        type: Boolean,
-        default: false,
-      },
+export default defineComponent({
+  name: 'StFormMobileDesign',
+  props: {
+    fieldData: {
+      type: Array,
+      default: () => [], // 提供一个默认值，以防父组件没有传递该属性
     },
-
-    data() {
-      return {
-        locale: zhCN,
-        customComponents,
-        activeKey: 1,
-        updateTime: 0,
-        updateRecordTime: 0,
-        startType: '',
-        revoke: null,
-        recordList: [],
-        redoList: [],
-        currentFormType: 'PC',
-        noModel: ['button', 'divider', 'card', 'grid', 'tabs', 'table', 'alert', 'text', 'html'],
-        data: {
-          list: [],
-          config: {
-            layout: 'horizontal',
-            labelCol: { xs: 4, sm: 4, md: 4, lg: 4, xl: 4, xxl: 4 },
-            labelWidth: 80,
-            labelLayout: 'flex',
-            wrapperCol: { xs: 18, sm: 18, md: 18, lg: 18, xl: 18, xxl: 18 },
-            hideRequiredMark: false,
-            customStyle: '',
-          },
-        },
-        previewOptions: {
-          width: 850,
-        },
-        selectItem: {
-          key: '',
-        },
-        items: [
-          {
-            key: 'PC',
-            title: 'PC端界面设计',
-          },
-          {
-            key: 'Mobile',
-            title: '移动端界面设计',
-          },
-        ],
-      };
+    dictData: {
+      type: Array,
+      default: () => [], // 提供一个默认值，以防父组件没有传递该属性
+    },
+    title: {
+      type: String,
+      default: '表单设计器',
+    },
+    showHead: {
+      type: Boolean,
+      default: true,
+    },
+    hideResetHint: {
+      type: Boolean,
+      default: false,
+    },
+    toolbarsTop: {
+      type: Boolean,
+      default: false,
+    },
+    toolbars: {
+      type: Array,
+      default: () => [
+        'save',
+        'preview',
+        //'importJson',
+        //'exportJson',
+        'exportCode',
+        // 'reset',
+        // 'close',
+        'undo',
+        'redo',
+      ],
+    },
+    showToolbarsText: {
+      type: Boolean,
+      default: true,
+    },
+    fields: {
+      type: Array,
+      default: () => [
+        'input',
+        'textarea',
+        'number',
+        'select',
+        'checkbox',
+        'radio',
+        'date',
+        'time',
+        //"rate",
+        //"slider",
+        'uploadFile',
+        "uploadImg",
+        "cascader",
+        'treeSelect',
+        'deptAndPersonSelect',
+        'popUpSelect',
+        'batch',
+        //"selectInputList",
+        'editor',
+        //"switch",
+        'button',
+        //"alert",
+        //'text',
+        "html",
+        'divider',
+        'card',
+        'tabs',
+        'grid',
+        'table',
+        // "template"
+      ],
     },
-    components: {
-      Header,
-      // kFooter,
-      operatingArea,
-      collapseItem,
-      JsonModal,
-      CodeModal,
-      importJsonModal,
-      previewModal,
-      formComponentPanel,
-      formComponentPanelMobile,
-      formItemProperties,
-      formProperties,
-    },
-    watch: {
+    hideModel: {
+      // 隐藏数据字段
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  data() {
+    return {
+      locale: zhCN,
+      customComponents,
+      activeKey: 1,
+      updateTime: 0,
+      updateRecordTime: 0,
+      startType: '',
+      revoke: null,
+      recordList: [],
+      redoList: [],
+      currentFormType: 'PC',
+      noModel: ['button', 'divider', 'card', 'grid', 'tabs', 'table', 'alert', 'text', 'html'],
       data: {
-        handler(e) {
-          this.$nextTick(() => {
-            this.revoke.push(e);
-          });
+        list: [],
+        config: {
+          layout: 'horizontal',
+          labelCol: {xs: 4, sm: 4, md: 4, lg: 4, xl: 4, xxl: 4},
+          labelWidth: 80,
+          labelLayout: 'flex',
+          wrapperCol: {xs: 18, sm: 18, md: 18, lg: 18, xl: 18, xxl: 18},
+          hideRequiredMark: false,
+          customStyle: '',
         },
-        deep: true,
-        immediate: true,
-      },
-    },
-    computed: {
-      currentFlowModal() {
-        return useFlowStore().StFlowModal;
       },
-      basicsArray() {
-        // 计算需要显示的基础字段
-        return basicsList.filter((item) => this.fields.includes(item.type));
+      previewOptions: {
+        width: 850,
       },
-      layoutArray() {
-        // 计算需要显示的布局字段
-        return layoutList.filter((item) => this.fields.includes(item.type));
+      selectItem: {
+        key: '',
       },
-      collapseDefaultActiveKey() {
-        // 计算当前展开的控件列表
-        const defaultActiveKey = window.localStorage.getItem('collapseDefaultActiveKey');
-        if (defaultActiveKey) {
-          return defaultActiveKey.split(',');
-        } else {
-          return ['1'];
-        }
+      items: [
+        {
+          key: 'PC',
+          title: 'PC端界面设计',
+        },
+        {
+          key: 'Mobile',
+          title: '移动端界面设计',
+        },
+      ],
+    };
+  },
+  components: {
+    Header,
+    // kFooter,
+    operatingArea,
+    collapseItem,
+    JsonModal,
+    CodeModal,
+    importJsonModal,
+    previewModal,
+    MainSetting,
+    formComponentPanel,
+    formComponentPanelMobile,
+    formItemProperties,
+    formProperties,
+  },
+  watch: {
+    data: {
+      handler(e) {
+        this.$nextTick(() => {
+          this.revoke.push(e);
+        });
       },
+      deep: true,
+      immediate: true,
+    },
+  },
+  computed: {
+    currentFlowModal() {
+      return useFlowStore().StFlowModal;
+    },
+    basicsArray() {
+      // 计算需要显示的基础字段
+      return basicsList.filter((item) => this.fields.includes(item.type));
+    },
+    layoutArray() {
+      // 计算需要显示的布局字段
+      return layoutList.filter((item) => this.fields.includes(item.type));
+    },
+    collapseDefaultActiveKey() {
+      // 计算当前展开的控件列表
+      const defaultActiveKey = window.localStorage.getItem('collapseDefaultActiveKey');
+      if (defaultActiveKey) {
+        return defaultActiveKey.split(',');
+      } else {
+        return ['1'];
+      }
+    },
+  },
+  mounted() {
+  },
+  methods: {
+    openSetting() {
+      this.$refs.mainSettingRef.show()
     },
-    mounted() {},
-    methods: {
-      generateKey(list, index) {},
-      handleListPush(item) {
-        //TODO: 以后再说
+    generateKey(list, index) {
+    },
+    handleListPush(item) {
+      //TODO: 以后再说
 
-        return false;
+      return false;
 
-        console.log('handleListPush', item);
-        // 双击控件按钮push到list
-        // 生成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.data.list.push(record);
-          this.handleSetSelectItem(record);
-          return false;
+      console.log('handleListPush', item);
+      // 双击控件按钮push到list
+      // 生成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;
         }
-        this.$refs.KFCP.handleCopy(false, item);
-      },
-      handleOpenJsonModal() {
-        // 打开json预览模态框
-        this.$refs.jsonModal.jsonData = this.data;
-        this.$refs.jsonModal.visible = true;
-      },
-      handleOpenCodeModal() {
-        // 打开代码预览模态框
-        this.$refs.codeModal.jsonData = this.data;
-        this.$refs.codeModal.visible = true;
-      },
-      handleOpenImportJsonModal() {
-        // 打开json预览模态框
-        this.$refs.importJsonModal.jsonData = this.data;
-        this.$refs.importJsonModal.handleSetSelectItem = this.handleSetSelectItem;
-        this.$refs.importJsonModal.visible = true;
-      },
+        const itemString = JSON.stringify(item);
+        const record = JSON.parse(itemString);
+        // 删除icon及compoent属性
+        delete record.icon;
+        delete record.component;
+        this.data.list.push(record);
+        this.handleSetSelectItem(record);
+        return false;
+      }
+      this.$refs.KFCP.handleCopy(false, item);
+    },
+    handleOpenJsonModal() {
+      // 打开json预览模态框
+      this.$refs.jsonModal.jsonData = this.data;
+      this.$refs.jsonModal.visible = true;
+    },
+    handleOpenCodeModal() {
+      // 打开代码预览模态框
+      this.$refs.codeModal.jsonData = this.data;
+      this.$refs.codeModal.visible = true;
+    },
+    handleOpenImportJsonModal() {
+      // 打开json预览模态框
+      this.$refs.importJsonModal.jsonData = this.data;
+      this.$refs.importJsonModal.handleSetSelectItem = this.handleSetSelectItem;
+      this.$refs.importJsonModal.visible = true;
+    },
 
-      handlePreview() {
-        // 打开预览模态框
-        this.$refs.previewModal.jsonData = this.data;
-        this.$refs.previewModal.previewWidth = this.previewOptions.width;
-        this.$refs.previewModal.visible = true;
-      },
-      handleReset() {
-        // 清空
-        if (this.hideResetHint) {
-          // 不显示提示直接清空
-          this.resetData();
-          return;
-        }
+    handlePreview() {
+      // 打开预览模态框
+      this.$refs.previewModal.jsonData = this.data;
+      this.$refs.previewModal.previewWidth = this.previewOptions.width;
+      this.$refs.previewModal.visible = true;
+    },
+    handleReset() {
+      // 清空
+      if (this.hideResetHint) {
+        // 不显示提示直接清空
+        this.resetData();
+        return;
+      }
 
-        this.$confirm({
-          title: '警告',
-          content: '是否确认清空内容?',
-          okText: '是',
-          okType: 'danger',
-          cancelText: '否',
-          onOk: () => {
-            this.resetData();
-          },
-        });
-      },
-      resetData() {
-        // TODO 这里需要将config中的值还原,event中的值还原
-        this.data = {
-          list: [],
-          config: {
-            layout: 'horizontal',
-            labelCol: { xs: 4, sm: 4, md: 4, lg: 4, xl: 4, xxl: 4 },
-            labelWidth: 80,
-            labelLayout: 'flex',
-            wrapperCol: { xs: 18, sm: 18, md: 18, lg: 18, xl: 18, xxl: 18 },
-            hideRequiredMark: false,
-            customStyle: '',
-          },
-        };
-        this.handleSetSelectItem({ key: '' });
-        this.$message.success('已清空');
-      },
-      handleSetSelectItem(record) {
-        // console.log("record", record);
+      this.$confirm({
+        title: '警告',
+        content: '是否确认清空内容?',
+        okText: '是',
+        okType: 'danger',
+        cancelText: '否',
+        onOk: () => {
+          this.resetData();
+        },
+      });
+    },
+    resetData() {
+      // TODO 这里需要将config中的值还原,event中的值还原
+      this.data = {
+        list: [],
+        config: {
+          layout: 'horizontal',
+          labelCol: {xs: 4, sm: 4, md: 4, lg: 4, xl: 4, xxl: 4},
+          labelWidth: 80,
+          labelLayout: 'flex',
+          wrapperCol: {xs: 18, sm: 18, md: 18, lg: 18, xl: 18, xxl: 18},
+          hideRequiredMark: false,
+          customStyle: '',
+        },
+      };
+      this.handleSetSelectItem({key: ''});
+      this.$message.success('已清空');
+    },
+    handleSetSelectItem(record) {
+      // console.log("record", record);
 
-        // 操作间隔不能低于100毫秒
-        const newTime = new Date().getTime();
-        if (newTime - this.updateTime < 100) {
-          return false;
-        }
+      // 操作间隔不能低于100毫秒
+      const newTime = new Date().getTime();
+      if (newTime - this.updateTime < 100) {
+        return false;
+      }
 
-        this.updateTime = newTime;
+      this.updateTime = newTime;
 
-        // 设置selectItem的值
-        this.selectItem = record;
+      // 设置selectItem的值
+      this.selectItem = record;
 
-        // 判断是否选中控件，如果选中则弹出属性面板，否则关闭属性面板
-        if (record.key) {
-          this.startType = record.type;
-          this.changeTab(2);
-        } else {
-          this.changeTab(1);
-        }
-      },
-      /**
-       * @description: 切换属性设置面板
-       * @param {*}
-       * @return {*}
-       */
+      // 判断是否选中控件，如果选中则弹出属性面板，否则关闭属性面板
+      if (record.key) {
+        this.startType = record.type;
+        this.changeTab(2);
+      } else {
+        this.changeTab(1);
+      }
+    },
+    /**
+     * @description: 切换属性设置面板
+     * @param {*}
+     * @return {*}
+     */
 
-      changeTab(e) {
-        this.activeKey = e;
-      },
-      /**
-       * @description: 遍历json结构，获取所有字段
-       */
-      getFieldSchema() {
-        const fields = [];
-        const traverse = (array) => {
-          array.forEach((element) => {
-            if (element.type === 'grid' || element.type === 'tabs') {
-              // 栅格布局
-              element.columns.forEach((item) => {
-                traverse(item.list);
-              });
-            } else if (element.type === 'card') {
-              // 卡片布局
-              traverse(element.list);
-            } else if (element.type === 'batch') {
-              // 动态表格内复制
-              traverse(element.list);
-            } else if (element.type === 'table') {
-              // 表格布局
-              element.trs.forEach((item) => {
-                item.tds.forEach((val) => {
-                  traverse(val.list);
-                });
+    changeTab(e) {
+      this.activeKey = e;
+    },
+    /**
+     * @description: 遍历json结构，获取所有字段
+     */
+    getFieldSchema() {
+      const fields = [];
+      const traverse = (array) => {
+        array.forEach((element) => {
+          if (element.type === 'grid' || element.type === 'tabs') {
+            // 栅格布局
+            element.columns.forEach((item) => {
+              traverse(item.list);
+            });
+          } else if (element.type === 'card') {
+            // 卡片布局
+            traverse(element.list);
+          } else if (element.type === 'batch') {
+            // 动态表格内复制
+            traverse(element.list);
+          } else if (element.type === 'table') {
+            // 表格布局
+            element.trs.forEach((item) => {
+              item.tds.forEach((val) => {
+                traverse(val.list);
               });
-            } else {
-              if (element.model) {
-                fields.push(element);
-              }
-            }
-          });
-        };
-        traverse(this.data.list);
-        return fields;
-      },
-      handleSetData(data) {
-        // 用于父组件赋值
-        try {
-          if (typeof data !== 'object') {
-            return false;
+            });
           } else {
-            this.data = data;
-            // 导入json数据后，需要清除已选择key
-            this.handleSetSelectItem({ key: '' });
+            if (element.model) {
+              fields.push(element);
+            }
           }
-          return true;
-        } catch (error) {
-          console.error(error);
+        });
+      };
+      traverse(this.data.list);
+      return fields;
+    },
+    handleSetData(data) {
+      // 用于父组件赋值
+      try {
+        if (typeof data !== 'object') {
           return false;
+        } else {
+          this.data = data;
+          // 导入json数据后，需要清除已选择key
+          this.handleSetSelectItem({key: ''});
         }
-      },
-      collapseChange(val) {
-        // 点击collapse时，保存当前collapse状态
-        window.localStorage.setItem('collapseDefaultActiveKey', val);
-      },
-      handleStart(type) {
-        this.startType = type;
-      },
+        return true;
+      } catch (error) {
+        console.error(error);
+        return false;
+      }
+    },
+    collapseChange(val) {
+      // 点击collapse时，保存当前collapse状态
+      window.localStorage.setItem('collapseDefaultActiveKey', val);
+    },
+    handleStart(type) {
+      this.startType = type;
+    },
 
-      /**
-       * @description: 撤销
-       * @param {*}
-       * @return {*}
-       */
-      handleUndo() {
-        const record = this.revoke.undo();
-        if (!record) {
-          return false;
-        }
-        this.data = record;
+    /**
+     * @description: 撤销
+     * @param {*}
+     * @return {*}
+     */
+    handleUndo() {
+      const record = this.revoke.undo();
+      if (!record) {
+        return false;
+      }
+      this.data = record;
 
-        this.handleSetSelectItem({ key: '' });
-      },
+      this.handleSetSelectItem({key: ''});
+    },
 
-      /**
-       * @description: 重做
-       * @param {*}
-       * @return {*}
-       */
-      handleRedo() {
-        const record = this.revoke.redo();
-        if (!record) {
-          return false;
-        }
-        this.data = record;
-      },
+    /**
+     * @description: 重做
+     * @param {*}
+     * @return {*}
+     */
+    handleRedo() {
+      const record = this.revoke.redo();
+      if (!record) {
+        return false;
+      }
+      this.data = record;
+    },
 
-      handleSave() {
-        // 保存函数
-        this.$emit('save', JSON.stringify(this.data));
-      },
-      getValue() {
-        // 获取数据
-        return this.data;
-      },
-      handleClose() {
-        this.$emit('close');
-      },
+    handleSave() {
+      // 保存函数
+      this.$emit('save', JSON.stringify(this.data));
+    },
+    getValue() {
+      // 获取数据
+      return this.data;
     },
-    created() {
-      this.revoke = new Revoke();
-      this.recordList = this.revoke.recordList;
-      this.redoList = this.revoke.redoList;
+    handleClose() {
+      this.$emit('close');
     },
-  });
+  },
+  created() {
+    this.revoke = new Revoke();
+    this.recordList = this.revoke.recordList;
+    this.redoList = this.revoke.redoList;
+  },
+});
 </script>
 <style lang="less" scoped>
-  .right {
-    :deep(.ant-tabs-nav-wrap) {
-      justify-content: center;
-    }
-  }
-  :deep(.ant-tabs) {
-    width: fit-content;
-    padding: 0 20px;
-    margin: 0 auto;
+.right {
+  :deep(.ant-tabs-nav-wrap) {
+    justify-content: center;
   }
+}
 
-  .mobile-panel {
-    height: calc(100vh - 170px);
-    margin-bottom: 60px;
-    overflow: auto;
-    background: #f5f6f7;
-  }
+:deep(.ant-tabs) {
+  width: fit-content;
+  padding: 0 20px;
+  margin: 0 auto;
+}
+
+.mobile-panel {
+  height: calc(100vh - 170px);
+  margin-bottom: 60px;
+  overflow: auto;
+  background: #f5f6f7;
+}
 </style>

src/views/flow/stFormDesign/packages/StFormDesign/index.vue

@@ -56,6 +56,18 @@
             </a-collapse-panel>
             <!-- 布局控件 end -->
           </a-collapse>
+          <a-float-button
+              type="primary"
+              :style="{
+                  left: '24px',
+                }"
+              @click="openSetting"
+          >
+            <template #icon>
+              <SettingOutlined/>
+            </template>
+          </a-float-button>
+          <MainSetting ref="mainSettingRef"/>
         </aside>
         <!-- 左侧控件区域 end -->
 
@@ -153,6 +165,7 @@
   import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons-vue';
   import {initJsonContent} from "/@/views/flow/stFormSetting/initContent.js";
   import {v1 as uuidv1} from "uuid";
+  import MainSetting from "/@/views/flow/setting/mainSetting.vue";
 
   export default defineComponent({
     name: 'StFormDesign',
@@ -296,6 +309,7 @@
       formComponentPanel,
       formItemProperties,
       formProperties,
+      MainSetting,
     },
     watch: {
       data: {
@@ -332,6 +346,9 @@
     },
     mounted() {},
     methods: {
+      openSetting() {
+        this.$refs.mainSettingRef.show()
+      },
       generateKey(list, index) {},
       handleListPush(item) {
         //TODO: 以后再说