feat(@0.8.8-7): 新增表格布局,合并后删除行列逻辑待优化

BoBoooooo · Mar 1, 2021 · 6c2c3c6 · 6c2c3c6
1 parent 69482e8
commit 6c2c3c6
Show file tree

Hide file tree

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

diff --git a/src/component/form-designer/src/FormDesigner.vue b/src/component/form-designer/src/FormDesigner.vue
@@ -262,7 +262,7 @@ export default {
         "list": [],
         "config": {
           "labelWidth": 100,
-          "labelPosition": "top",
+          "labelPosition": "right",
           "size": "small"
         }
       }`,
@@ -279,7 +279,6 @@ export default {
   methods: {
     // 切换布局
     changeMode(mode) {
-      console.log(mode);
       this.currentMode = mode;
     },
     // 深拷贝防止拖拽clone后污染原组件,统一给所有拖拽出来的组件设置key,model
@@ -302,6 +301,27 @@ export default {
         cloneOrigin.options.remoteFunc = `func_${key}`;
       }
 
+      // 如果为表格布局,默认添加一个 <td></td>
+      if (type === 'grid-table') {
+        const tdKey = `td_${Math.ceil(Math.random() * 99999)}`;
+        cloneOrigin.rows[0].columns.push(
+          {
+            type: 'td',
+            options: {
+              colspan: 1,
+              rowspan: 1,
+              align: 'left',
+              valign: 'top',
+              width: '',
+              height: '',
+            },
+            list: [],
+            key: tdKey,
+            model: tdKey,
+          },
+        );
+      }
+
       return cloneOrigin;
     },
     // 返回当前表单设计器对象

diff --git a/src/component/form-designer/src/GenerateForm.vue b/src/component/form-designer/src/GenerateForm.vue
@@ -73,6 +73,46 @@
                   :widget="item"></slot>
           </el-form-item>
         </template>
+        <!-- 表格布局 -->
+          <template v-else-if="item.type === 'grid-table'">
+            <table class="grid-table"
+            :key="item.key"
+            style="width: 100%;border: solid"
+            :style="{
+              'border-width':item.options.borderWidth.toString()+'px',
+              borderColor:item.options.borderColor,
+            }">
+              <tr v-for="(row,rowIndex) in item.rows" :key="rowIndex">
+                <td
+                  v-for="(col,colIndex) in row.columns" :key="colIndex"
+                  :colspan="col.options.colspan || 1"
+                  :rowspan="col.options.rowspan || 1"
+                  valign="middle"
+                  align="left"
+                  class="grid-table-td"
+                  :style="{
+                    'border-width':item.options.borderWidth.toString()+'px',
+                    borderColor:item.options.borderColor,
+                    width: col.options.width,
+                    height: col.options.height
+                  }">
+                  <GenerateFormItem
+                    v-for="(citem) in col.list"
+                    @selection-change="getTableSelection($event,citem)"
+                    :key="citem.key"
+                    :models="models"
+                    :remote="remote"
+                    :widget="citem"
+                    :readOnly="readOnly"
+                    @btnOnClick="btnOnClick"
+                    @chartOnClick="chartOnClick"
+                    v-show="!citem.hidden"
+                    :formTableConfig="formTableConfig">
+                </GenerateFormItem>
+                </td>
+              </tr>
+            </table>
+        </template>
         <!-- 普通行布局方式 -->
         <template v-else>
           <GenerateFormItem :key="item.key"
@@ -430,4 +470,17 @@ export default class GenerateForm extends Vue {
 .no-border{
   border:none!important;
 }
+
+.grid-table{
+  border-collapse: collapse;
+}
+.grid-table-td{
+  border-right-width: 1px;
+    border-right-color: rgb(153, 153, 153);
+    border-bottom-width: 1px;
+    border-bottom-color: rgb(153, 153, 153);
+        border-bottom-style: solid;
+    border-right-style: solid;
+    padding: 5px;
+}
 </style>
diff --git a/src/component/form-designer/src/WidgetConfig.vue b/src/component/form-designer/src/WidgetConfig.vue
@@ -20,7 +20,7 @@
       >
         <el-input size="mini" v-model="elementConfig.model"></el-input>
       </el-form-item>
-      <el-form-item label="标题" v-if="elementConfig.type !== 'grid' && elementConfig.type !== 'button'">
+      <el-form-item label="标题" v-if="!elementConfig.type.includes('grid') && elementConfig.type !== 'td' && elementConfig.type !== 'button'">
         <el-input size="mini" v-model="elementConfig.name"></el-input>
       </el-form-item>
       <el-form-item label="自定义className" v-if="Object.keys(elementConfig.options).indexOf('className') >= 0">
@@ -82,7 +82,7 @@
       <el-form-item label="隐藏标签" v-if="elementConfig.options.hiddenLabel !== undefined">
         <el-switch :disabled="elementConfig.type === 'button'" v-model="elementConfig.options.hiddenLabel"></el-switch>
       </el-form-item>
-      <el-form-item label="组件宽度" v-if="Object.keys(elementConfig.options).indexOf('width') >= 0">
+      <el-form-item label="宽度" v-if="Object.keys(elementConfig.options).indexOf('width') >= 0">
         <el-input size="mini" v-model="elementConfig.options.width"></el-input>
       </el-form-item>
       <el-form-item label="大小" v-if="Object.keys(elementConfig.options).indexOf('size') >= 0">
@@ -437,7 +437,9 @@
               elementConfig.type !== 'text' &&
               elementConfig.type !== 'button' &&
               elementConfig.type !== 'avatar' &&
-              elementConfig.type !== 'tabs'
+              elementConfig.type !== 'tabs' &&
+              elementConfig.type !== 'grid-table' &&
+              elementConfig.type !== 'td'
           "
         >
           <el-checkbox v-model="elementConfig.options.readonly" v-if="Object.keys(elementConfig.options).indexOf('readonly') >= 0">完全只读</el-checkbox>
@@ -459,7 +461,9 @@
               elementConfig.type != 'upload' &&
               elementConfig.type != 'text' &&
               elementConfig.type !== 'avatar' &&
-              elementConfig.type !== 'tabs'
+              elementConfig.type !== 'tabs' &&
+              elementConfig.type !== 'grid-table' &&
+              elementConfig.type !== 'td'
           "
           label="校验"
         >
@@ -538,6 +542,17 @@
             <el-radio-button v-for="align in ['left', 'center', 'right']" :label="align" :key="align">{{ align }}</el-radio-button>
           </el-radio-group>
         </template>
+        <!-- 表格布局table属性配置 支持配置边框宽度 边框颜色  -->
+        <template v-if="elementConfig.type === 'grid-table'">
+          <el-form-item label="边框宽度">
+            <el-input v-model.number="elementConfig.options.borderWidth" placeholder="请输入边框宽度">
+              <template slot="append">px</template>
+            </el-input>
+          </el-form-item>
+          <el-form-item label="边框颜色">
+            <el-color-picker v-model="elementConfig.options.borderColor"></el-color-picker>
+          </el-form-item>
+        </template>
       </template>
     </el-form>
   </div>