feat: 处理左侧布局删除列逻辑

app/constant/formGenerator.js

@@ -0,0 +1,58 @@
+const BASIC_COMPONENTS = [
+  {
+    type: 'input',
+    name: '输入框'
+  },
+  {
+    type: 'select',
+    name: '选择器'
+  },
+  {
+    type: 'radio',
+    name: '单选框'
+  },
+  {
+    type: 'checkbox',
+    name: '多选框'
+  },
+  {
+    type: 'cascader',
+    name: '级联选择器'
+  },
+  {
+    type: 'switch',
+    name: '开关'
+  },
+  {
+    type: 'slider',
+    name: '滑块'
+  },
+  {
+    type: 'datepicker',
+    name: '日期选择器'
+  },
+  {
+    type: 'timeselect',
+    name: '时间选择器'
+  },
+  {
+    type: 'colorpicker',
+    name: '颜色选择器'
+  },
+  {
+    type: 'progress',
+    name: '进度条'
+  },
+  {
+    type: 'rate',
+    name: '评分'
+  },
+  {
+    type: 'tag',
+    name: '标签'
+  }
+]
+
+export {
+  BASIC_COMPONENTS
+}

app/views/form-generator/aside-panel/index.vue

@@ -35,11 +35,11 @@
         <transition-group type="transition" :name="!dragging ? 'flip-list' : null">
           <li
             class="aside-layout__colitem"
-            v-for="(element) in colitemsGroup"
+            v-for="(element, idx) in colitemsGroup"
             :key="element.prop"
           >
             <span>{{ element.prop }}</span>
-            <div class="colitem-icon colitem-icon--delete" @click="handleRemoveColumn(element)">
+            <div class="colitem-icon colitem-icon--delete" @click="handleRemoveColumn(element, idx)">
               <svg viewBox="0 0 28 28" preserveAspectRatio="xMidYMid meet" shape-rendering="geometricPrecision">
                 <g><path d="M19 9h-3V8a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v1H9a1 1 0 1 0 0 2h10a1 1 0 0 0 .004-2H19zM9 20c.021.543.457.979 1 1h8c.55-.004.996-.45 1-1v-7H9v7zm2.02-4.985h2v4h-2v-4zm4 0h2v4h-2v-4z" fill-rule="evenodd"></path></g>
               </svg>
@@ -148,8 +148,12 @@ export default {
       // TODO 处理添加列业务逻辑
       console.log('add column')
     },
-    handleRemoveColumn (element) {
-      // TODO 处理删除列业务逻辑
+    handleRemoveColumn (element, colIndex) {
+      const oldSection = {
+        isCustom: 'btn-addCol',
+        colGrid: element.colGrid
+      }
+      this.fg.layoutSections[this.activeSection].splice(colIndex, 1, oldSection)
     }
   }
 }

app/views/form-generator/index.vue

@@ -16,7 +16,8 @@
             :options="formOptions"
             :layout="formLayout">
             <template #default="scope">
-              <div class="btn-addCol">
+              <!-- 自定义 form item -->
+              <div class="schema-form-item schema-form-item--custom">
                 <el-popover
                   v-if="scope.col.isCustom === 'btn-addCol'"
                   placement="bottom"
@@ -33,14 +34,16 @@
                   </ul>
                   <el-button type="primary" size="mini" icon="el-icon-plus" circle slot="reference"/>
                 </el-popover>
-                <el-button
-                  class="btn-removeCol"
-                  type="primary"
-                  size="mini"
-                  icon="el-icon-delete"
-                  circle
-                  @click="handleRemoveComponent(scope)"
-                />
+                <template v-else>
+                  <el-button
+                    class="btn-removeCol"
+                    type="primary"
+                    size="mini"
+                    icon="el-icon-delete"
+                    circle
+                    @click="handleRemoveComponent(scope)"
+                  />
+                </template>
               </div>
             </template>
           </schema-form>
@@ -58,6 +61,7 @@
 <script>
 import AsidePanel from './aside-panel'
 import ConfigPanel from './config-panel'
+import { BASIC_COMPONENTS } from '@/constant/formGenerator'
 
 export default {
   name: 'FormGenerator',
@@ -74,44 +78,27 @@ export default {
     return {
       // main
       layoutSections: [],
-      basicComponents: [
-        {
-          type: 'input',
-          name: '输入框'
-        },
-        {
-          type: 'select',
-          name: '选择框'
-        },
-        {
-          type: 'radio',
-          name: '单选按钮'
-        },
-        {
-          type: 'datepicker',
-          name: '日期控件'
-        }
-      ],
+      basicComponents: BASIC_COMPONENTS,
       formFormater: [
         {
           type: 'input',
-          prop: 'name',
-          formItem: { label: 'Label' }
+          prop: 'prop',
+          formItem: { label: 'label' }
         },
         {
           type: 'select',
           prop: 'city',
-          formItem: { label: '城市' }
+          formItem: { label: 'label' }
         },
         {
           type: 'radio',
           prop: 'sex',
-          formItem: { label: '性别' }
+          formItem: { label: 'label' }
         },
         {
           type: 'datepicker',
           prop: 'expire',
-          formItem: { label: '有效期' },
+          formItem: { label: 'label' },
           attrs: {
             type: 'monthrange',
             'range-separator': '至',
@@ -122,9 +109,11 @@ export default {
       ],
       formModel: {},
       formOptions: {},
+      // 表单设置 - 栅格布局
       formLayout: {
         gutter: 16
       },
+      // 表单设置 - 表单属性
       formSettings: {
         labelPosition: 'left',
         size: 'small'
@@ -239,19 +228,17 @@ export default {
             inset 0 0 0 2px @pink,
             0 0 1px rgba(0, 0, 0, 0);
         }
-        // &:after {
-        // }
       }
     }
   }
-  .btn-addCol {
+  .schema-form-item--custom {
     .btn-removeCol {
       display: none;
       position: absolute;
       bottom: 7px;
     }
   }
-  .btn-addCol + .el-form-item {
+  .schema-form-item--custom + .el-form-item {
     margin-bottom: 0;
   }
 }
@@ -283,7 +270,7 @@ export default {
         }
       }
     }
-    .btn-addCol {
+    .schema-form-item--custom {
       display: flex;
       justify-content: center;
     }