perf(@0.9.1-5): 布局组件支持嵌套子表单组件

BoBoooooo · Mar 17, 2021 · b36c533 · b36c533
1 parent 5f45081
commit b36c533
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 66 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "element-pro-crud",
-  "version": "0.9.1-4",
+  "version": "0.9.1-5",
   "author": "BoBo<[email protected]>",
   "main": "lib/ProCrud.umd.min.js",
   "files": [

diff --git a/src/component/form-designer/src/WidgetForm.vue b/src/component/form-designer/src/WidgetForm.vue
@@ -24,7 +24,7 @@
                 <el-row
                   class="widget-col widget-view"
                   type="flex"
-                  :class="{ active: selectWidget.key == element.key }"
+                  :class="{ active: selectWidget && selectWidget.key == element.key }"
                   :gutter="element.options.gutter ? element.options.gutter : 0"
                   :justify="element.options.justify"
                   :align="element.options.align"
@@ -47,7 +47,7 @@
                       </transition-group>
                     </Draggable>
                   </el-col>
-                  <div class="widget-view-action widget-col-action" v-if="selectWidget.key == element.key">
+                  <div class="widget-view-action widget-col-action" v-if="selectWidget && selectWidget.key == element.key">
                     <!-- 栅格布局自动加减 -->
                     <template v-if="element.type === 'grid'">
                       <i class="el-icon el-icon-circle-plus" title="添加列" @click.stop="handleGridAdd(element)"></i>
@@ -56,23 +56,12 @@
                     <i class="el-icon el-icon-delete-solid" title="删除" @click.stop="handleWidgetDelete(index)"></i>
                   </div>
 
-                  <div class="drag-widget widget-view-drag widget-col-drag" v-if="selectWidget.key == element.key">
+                  <div class="drag-widget widget-view-drag widget-col-drag" v-if="selectWidget && selectWidget.key == element.key">
                     <i class="el-icon el-icon-rank"></i>
                   </div>
                 </el-row>
               </div>
             </template>
-            <template v-else-if="element.type === 'form'">
-              <WidgetSubForm
-                v-if="element && element.key"
-                :key="element.key"
-                :element="element"
-                :select.sync="selectWidget"
-                :index="index"
-                :data="data"
-                @click.native.stop="handleSelectWidget(index)"
-              ></WidgetSubForm>
-            </template>
             <template v-else-if="element.type === 'tabs'">
               <WidgetTabs
                 v-if="element && element.key"
@@ -156,7 +145,7 @@
                   </tr>
                 </table>
 
-                <div class="widget-view-action widget-col-action" v-if="selectWidget.key == element.key">
+                <div class="widget-view-action widget-col-action" v-if="selectWidget && selectWidget.key == element.key">
                   <!-- 栅格布局自动加减 -->
                   <template v-if="element.type === 'grid-table'">
                     <i class="el-icon el-icon-document-add" title="添加列" @click.stop="handleColAdd(element)"></i>
@@ -165,7 +154,7 @@
                   </template>
                   <i class="el-icon el-icon-delete-solid" title="删除" @click.stop="handleWidgetDelete(index)"></i>
                 </div>
-                <div class="drag-widget widget-view-drag widget-col-drag" v-if="selectWidget.key == element.key">
+                <div class="drag-widget widget-view-drag widget-col-drag" v-if="selectWidget && selectWidget.key == element.key">
                   <i class="el-icon el-icon-rank"></i>
                 </div>
               </div>
@@ -184,14 +173,12 @@
 import Draggable from 'vuedraggable';
 import SvgIcon from '@/icons/SvgIcon.vue';
 import WidgetFormItem from './WidgetFormItem.vue';
-import WidgetSubForm from './components/SubForm/WidgetSubForm.vue';
 import WidgetTabs from './components/Tabs/WidgetTabs.vue';
 
 export default {
   components: {
     Draggable,
     WidgetFormItem,
-    WidgetSubForm,
     WidgetTabs,
     SvgIcon,
   },

diff --git a/src/component/form-designer/src/WidgetFormItem.vue b/src/component/form-designer/src/WidgetFormItem.vue
@@ -2,7 +2,7 @@
   <el-form-item class="widget-view"
                 v-if="element && element.key"
                 :class="{
-                  active: selectWidget.key == element.key,
+                  active:element && selectWidget && selectWidget.key == element.key,
                   'is_req': element.options.required
                   }"
                 :label-width="element.options.hiddenLabel ? '0' : labelWidth"
@@ -237,11 +237,22 @@
         :loop="element.options.loop">
       </Echarts>
     </template>
-    <div class="widget-view-action" v-if="selectWidget.key == element.key">
+    <template v-if="element.type === 'form'">
+          <WidgetSubForm
+            v-if="element && element.key"
+            :key="element.key"
+            :element="element"
+            :select.sync="selectWidget"
+            :index="index"
+            :data="data"
+            @click.native.stop="handleSelectWidget(index)"
+          ></WidgetSubForm>
+    </template>
+    <div class="widget-view-action" v-if="selectWidget && selectWidget.key == element.key">
           <i class="el-icon el-icon-document-copy" @click.stop="handleWidgetClone(index)"></i>
           <i class="el-icon el-icon-delete-solid" @click.stop="handleWidgetDelete(index)"></i>
     </div>
-    <div class="widget-view-drag" v-if="selectWidget.key == element.key">
+    <div class="widget-view-drag" v-if="selectWidget && selectWidget.key == element.key">
       <i class="drag-widget el-icon el-icon-rank"></i>
     </div>
     <div class="widget-view-model"><span>{{element.model}}</span></div>
@@ -255,6 +266,7 @@ import lineChart from './components/Charts/lineChart.vue';
 import pieChart from './components/Charts/pieChart.vue';
 import Echarts from './components/Charts/Echarts.vue';
 import AvatarUpload from './components/AvatarUpload/AvatarUpload.vue';
+import WidgetSubForm from './components/SubForm/WidgetSubForm.vue';
 
 export default {
   name: 'WidgetFormItem',
@@ -287,6 +299,7 @@ export default {
     Echarts,
     AvatarUpload,
     TreeSelect,
+    WidgetSubForm,
   },
   data() {
     return {

diff --git a/src/component/form-designer/src/components/SubForm/WidgetSubForm.vue b/src/component/form-designer/src/components/SubForm/WidgetSubForm.vue
@@ -51,16 +51,6 @@
         </div>
       </transition-group>
     </Draggable>
-    <div class="widget-view-action widget-col-action" v-if="selectWidget.key == element.key">
-      <i class="el-icon el-icon-delete-solid" @click.stop="handleWidgetDelete(index)"></i>
-    </div>
-    <div class="widget-view-drag widget-col-drag" v-if="selectWidget.key == element.key">
-      <i class="drag-widget el-icon el-icon-rank"></i>
-    </div>
-    <div class="widget-view-model">
-      <span>{{ element.model }}</span>
-      <span v-if="element.options.tableName"> | {{ element.options.tableName }}表</span>
-    </div>
   </div>
 </template>
 
@@ -167,11 +157,6 @@ export default class WidgetSubForm extends Vue {
     return null;
   }
 
-  handleWidgetDelete(index) {
-    this.$nextTick(() => {
-      this.data.list.splice(index, 1);
-    });
-  }
 
   get tableColumns() {
     return this.element.tableColumns;

diff --git a/src/component/form-designer/src/components/Tabs/WidgetTabs.vue b/src/component/form-designer/src/components/Tabs/WidgetTabs.vue
@@ -63,7 +63,7 @@
                         </transition-group>
                       </Draggable>
                     </el-col>
-                    <div class="widget-view-action widget-col-action" v-if="selectWidget.key == element.key">
+                    <div class="widget-view-action widget-col-action" v-if="selectWidget && selectWidget.key == element.key">
                       <!-- 栅格布局自动加减 -->
                       <template v-if="element.type === 'grid'">
                         <i class="el-icon el-icon-circle-plus" @click.stop="handleGridAdd(element)"></i>
@@ -72,7 +72,7 @@
                       <i class="el-icon el-icon-delete-solid" @click.stop="handleWidgetDelete(index)"></i>
                     </div>
 
-                    <div class="drag-widget widget-view-drag widget-col-drag" v-if="selectWidget.key == element.key">
+                    <div class="drag-widget widget-view-drag widget-col-drag" v-if="selectWidget && selectWidget.key == element.key">
                       <i class="el-icon el-icon-rank"></i>
                     </div>
                   </el-row>
@@ -93,10 +93,10 @@
         </Draggable>
       </el-tab-pane>
     </el-tabs>
-    <div class="widget-view-drag widget-col-drag" v-if="selectWidget.key == element.key">
+    <div class="widget-view-drag widget-col-drag" v-if="selectWidget && selectWidget.key == element.key">
       <i class="drag-widget el-icon el-icon-rank"></i>
     </div>
-    <div class="widget-view-action" v-if="selectWidget.key == element.key">
+    <div class="widget-view-action" v-if="selectWidget && selectWidget.key == element.key">
       <i class="el-icon el-icon-delete-solid" @click.stop="handleWidgetDelete()"></i>
     </div>
   </div>

diff --git a/src/component/form-designer/src/styles/index.scss b/src/component/form-designer/src/styles/index.scss
@@ -250,14 +250,14 @@ $primary-background-color: #ecf5ff;
         z-index: 9;
         font-weight: 500;
       }
-      &:after {
-        position: absolute;
-        left: 0;
-        right: 0;
-        top: 0;
-        bottom: 0;
-        display: block;
-      }
+      // &:after {
+      //   position: absolute;
+      //   left: 0;
+      //   right: 0;
+      //   top: 0;
+      //   bottom: 0;
+      //   display: block;
+      // }
 
       &:hover {
         background: $primary-background-color;
@@ -333,7 +333,7 @@ $primary-background-color: #ecf5ff;
         z-index: 9;
         i {
           font-size: 14px;
-          color: white;
+          color: $primary-color;
           margin: 0 5px;
           cursor: pointer;
           &:hover {
@@ -398,22 +398,6 @@ $primary-background-color: #ecf5ff;
         }
       }
 
-      &.active {
-        outline: 1px solid #c11e72;
-        border: 1px solid #c11e72;
-      }
-
-      &:hover {
-        background: #fdf6ec;
-        outline: 1px solid #c11e72;
-        outline-offset: 0px;
-
-        &.active {
-          outline: 1px solid #c11e72;
-          border: 1px solid #c11e72;
-          outline-offset: 0;
-        }
-      }
 
       .widget-view-action.widget-col-action {
         background: #c11e72;