feat: 表单设计器新增布局模式/预览模式切换

BoBoooooo · Feb 22, 2021 · bf473ff · bf473ff
1 parent 6d50243
commit bf473ff
Show file tree

Hide file tree

Showing 11 changed files with 57 additions and 29 deletions.
diff --git a/src/component/form-designer/src/FormDesigner.vue b/src/component/form-designer/src/FormDesigner.vue
@@ -15,7 +15,27 @@
         </span>
       </div>
       <div class="btn-bar">
-        <el-button type="primary" size="small" icon="el-icon-view" @click="handlePreview">预览</el-button>
+        <el-button
+          type="primary"
+          size="small"
+          icon="el-icon-picture-outline"
+          @click="changeMode('design')"
+          :class="{
+            active: currentMode === 'design',
+          }"
+          >布局模式</el-button
+        >
+        <el-button
+          type="primary"
+          size="small"
+          icon="el-icon-view"
+          @click="changeMode('preview')"
+          :class="{
+            active: currentMode === 'preview',
+          }"
+          >预览模式</el-button
+        >
+        <el-divider direction="vertical"></el-divider>
         <el-button type="primary" size="small" icon="el-icon-upload2" @click="handleUpload">导入JSON</el-button>
         <el-button type="primary" size="small" icon="el-icon-tickets" @click="handleGenerateJson">生成JSON</el-button>
         <el-button type="primary" size="small" icon="el-icon-document" @click="handleGenerateCode">生成代码</el-button>
@@ -78,7 +98,11 @@
       <el-container class="center-container" direction="vertical">
         <!-- 中间区域中央设计区域，data:widgetForm用于保存生成后的json -->
         <el-main :class="{ 'widget-empty': widgetForm.list.length == 0 }">
-          <WidgetForm ref="widgetForm" :data="widgetForm" :select.sync="widgetFormSelect"></WidgetForm>
+          <WidgetForm v-if="currentMode === 'design'" ref="widgetForm" :data="widgetForm" :select.sync="widgetFormSelect"></WidgetForm>
+          <template v-else>
+            <el-alert type="warning" :closable="false" style="margin-bottom:15px">组件依赖远端数据需要结合代码!</el-alert>
+            <GenerateForm :data="widgetForm" :value="widgetModels" ref="generateForm"> </GenerateForm>
+          </template>
         </el-main>
       </el-container>
       <!-- 右侧边栏 -->
@@ -98,15 +122,6 @@
           </el-main>
         </el-container>
       </el-aside>
-      <!-- 预览对话框 -->
-      <CusDialog :visible="previewVisible" @on-close="previewVisible = false" ref="widgetPreview" @on-submit="handleTest" width="1000px" form>
-        <el-alert type="warning" :closable="false" style="margin-bottom:15px">组件依赖远端数据需要结合代码!</el-alert>
-        <GenerateForm v-if="previewVisible" :data="widgetForm" :value="widgetModels" ref="generateForm">
-          <template slot="blank" slot-scope="scope">
-            宽度：<el-input v-model="scope.model.blank.width" style="width: 100px"></el-input> 高度：<el-input v-model="scope.model.blank.height" style="width: 100px"></el-input>
-          </template>
-        </GenerateForm>
-      </CusDialog>
       <!-- 导入JSON对话框 -->
       <CusDialog :visible="uploadVisible" @on-close="uploadVisible = false" @on-submit="handleUploadJson" ref="uploadJson" width="800px" form>
         <el-alert type="info" title="在此处导入JSON"></el-alert>
@@ -220,8 +235,6 @@ export default {
       },
       configTab: 'widget',
       widgetFormSelect: {},
-      // 预览 对话框显示/隐藏
-      previewVisible: false,
       // 生成json 对话框显示/隐藏
       jsonVisible: false,
       codeVisible: false,
@@ -251,9 +264,16 @@ export default {
         success: [],
       },
       dialogStatus: null,
+      // 当前模式
+      currentMode: 'design',
     };
   },
   methods: {
+    // 切换布局
+    changeMode(mode) {
+      console.log(mode);
+      this.currentMode = mode;
+    },
     // 深拷贝防止拖拽clone后污染原组件,统一给所有拖拽出来的组件设置key,model
     handleClone(origin) {
       const {
@@ -504,4 +524,7 @@ export default {
 .form {
   margin-top: 6px;
 }
+.el-divider--vertical {
+  background: #333;
+}
 </style>
diff --git a/src/component/form-designer/src/components/Charts/Echarts.vue b/src/component/form-designer/src/components/Charts/Echarts.vue
@@ -158,7 +158,7 @@ export default {
 
 <style lang="scss" scoped>
 .card {
-  ::v-deep {
+  /deep/ {
     .el-card__header {
       padding: 5px 20px;
     }

diff --git a/src/component/form-designer/src/components/Charts/lineChart.vue b/src/component/form-designer/src/components/Charts/lineChart.vue
@@ -283,7 +283,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 .card{
-  ::v-deep {
+  /deep/ {
     .el-card__header{
       padding: 5px 20px;
     }

diff --git a/src/component/form-designer/src/components/Charts/pieChart.vue b/src/component/form-designer/src/components/Charts/pieChart.vue
@@ -228,7 +228,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 .card{
-  ::v-deep {
+  /deep/ {
     .el-card__header{
       padding: 5px 20px;
     }

diff --git a/src/component/form-designer/src/components/SubForm/GenerateSubForm.vue b/src/component/form-designer/src/components/SubForm/GenerateSubForm.vue
@@ -351,7 +351,7 @@ export default class GenerateSubForm extends Vue {
   }
 }
 .subTableForm {
-  ::v-deep.el-form-item__error {
+  /deep/.el-form-item__error {
     top: 23px;
     right: 28px;
     text-align: right;

diff --git a/src/component/form-designer/src/components/Tinymce/components/editorImage.vue b/src/component/form-designer/src/components/Tinymce/components/editorImage.vue
@@ -108,7 +108,7 @@ export default {
 <style rel="stylesheet/scss" lang="scss" scoped>
 .editor-slide-upload {
   margin-bottom: 20px;
-  ::v-deep .el-upload--picture-card {
+  /deep/ .el-upload--picture-card {
     width: 100%;
   }
 }

diff --git a/src/component/form-designer/src/styles/index.scss b/src/component/form-designer/src/styles/index.scss
@@ -67,7 +67,7 @@ $primary-background-color: #ecf5ff;
   .el-main {
     padding: 0;
     position: relative;
-    background: #f7f7f7;
+    background: white;
   }
 }
 
@@ -699,11 +699,12 @@ $primary-background-color: #ecf5ff;
     // flex-direction: column;
     align-items: center;
     justify-content: center;
-    ::v-deep.el-button{
-      margin:0;
+    /deep/.el-button{
+      margin-right:5px;
       background: none!important;
       border: none!important;
-      color: #666;
+      color: #666!important;
+      padding: 9px!important;
       flex: 1;
       i{
         display: block;
@@ -713,6 +714,10 @@ $primary-background-color: #ecf5ff;
       &:hover{
         color: #333!important;
       }
+      &.active{
+        background: #2d88f8!important;
+        color: #fff!important;
+      }
     }
   }  
 }
diff --git a/src/component/form-designer/src/styles/table-form.scss b/src/component/form-designer/src/styles/table-form.scss
@@ -12,7 +12,7 @@
       border-#{$position}: $style;
     }
   }
-  ::v-deep.table-form {
+  /deep/.table-form {
     .el-row {
       @include border-style('left');
       margin: 0 !important;

diff --git a/src/component/pro-table/src/ProTable.vue b/src/component/pro-table/src/ProTable.vue
@@ -489,7 +489,7 @@ export default defineComponent({
   background: white;
   padding: 10px;
   position: relative;
-  ::v-deep {
+  /deep/ {
     .el-table__empty-text {
       line-height: 10px;
       margin-bottom: 15px;

diff --git a/src/component/pro-table/src/SearchForm.vue b/src/component/pro-table/src/SearchForm.vue
@@ -228,13 +228,13 @@ export default class SearchForm extends Vue {
     height: 29px;
     border-radius: 0;
   }
-  ::v-deep.el-input__suffix {
+  /deep/.el-input__suffix {
     top: -5px;
   }
   .input {
     display: inline-block;
     width: 300px;
-    ::v-deep .el-input__inner {
+    /deep/ .el-input__inner {
       height: 29px;
       line-height: 29px;
       border-radius: 0;
@@ -245,7 +245,7 @@ export default class SearchForm extends Vue {
     display: inline-block;
     vertical-align: 1px;
     margin-left: 5px;
-    ::v-deep.el-tag {
+    /deep/.el-tag {
       border-radius: 0;
       margin-right: 5px;
     }

diff --git a/src/demo/component/Dashboard.vue b/src/demo/component/Dashboard.vue
@@ -513,7 +513,7 @@ h3 {
   .demo-actions {
     text-align: left;
     padding: 20px;
-    ::v-deep {
+    /deep/ {
       .el-switch {
         margin-right: 10px;
       }
@@ -545,7 +545,7 @@ h3 {
 }
 
 .dialog {
-  ::v-deep {
+  /deep/ {
     .el-dialog__body {
       height: 100%;
       padding: 0;