From 6d1228a60c0572108ccf7ec125032c0e0ed98cd5 Mon Sep 17 00:00:00 2001
From: Aaron <427787340@qq.com>
Date: Fri, 3 Jan 2020 17:59:56 +0800
Subject: [PATCH] 新增表格型表单

---
 examples/views/page/form-table/index.vue |  94 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 examples/views/page/other copy.vue       | 207 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 examples/views/page/other.vue            |  69 +++++++++++++++++++++++++--------------------------------------------
 3 files changed, 326 insertions(+), 44 deletions(-)
 create mode 100644 examples/views/page/form-table/index.vue
 create mode 100644 examples/views/page/other copy.vue

diff --git a/examples/views/page/form-table/index.vue b/examples/views/page/form-table/index.vue
new file mode 100644
index 0000000..2190f8f
--- /dev/null
+++ b/examples/views/page/form-table/index.vue
@@ -0,0 +1,94 @@
+<style>
+.eagle-form-table .eagle-form-table__body td {
+  padding: 5px;
+}
+.eagle-form-table__label {
+  text-align: right !important;
+  padding: 5px 15px !important;
+  font-weight: bold;
+  background-color: #ecf7ff;
+}
+.eagle-form-table__value {
+  overflow: hidden;
+}
+</style>
+
+<template>
+  <div class="eagle-form-table el-table el-table--fit el-table--border el-table--enable-row-transition el-table--small">
+    <div v-if="fullProps.title || $scopedSlots['title'] || $slots['title']" class="el-table__header-wrapper">
+      <table class="el-table__header w-full" cellspacing="0" cellpadding="0">
+        <thead>
+          <tr class="el-table__row">
+            <!-- 标题插槽 -->
+            <th v-if="$scopedSlots['title'] || $slots['title']">
+              <slot name="title"></slot>
+            </th>
+            <th v-else class="is-center">{{ fullProps.title }}</th>
+          </tr>
+        </thead>
+      </table>
+    </div>
+    <div class="el-table__body-wrapper text-lg">
+      <table class="el-table__body w-full" cellspacing="0" cellpadding="0">
+        <tbody class="eagle-form-table__body">
+          <tr v-for="(item, index) in fullProps.list" :key="index" class="el-table__row">
+            <template v-if="(item instanceof Array)">
+              <template v-for="(col, idx) in item">
+                <td class="eagle-form-table__label" :style="labelStyle" :key="`${index}-${idx}-label`">{{ col.label }}</td>
+                <td class="eagle-form-table__value" :key="`${index}-${idx}-value`" :colspan="getColspan({ item, col, idx })">
+                  <component :is="col.type" v-bind="col.props" size="mini" />
+                </td>
+              </template>
+            </template>
+            <template v-else>
+              <td class="eagle-form-table__label" :style="labelStyle">{{ item.label }}</td>
+              <td class="eagle-form-table__value" :colspan="maxColSpan - 1">
+                <component :is="item.type" v-bind="item.props" size="mini" />
+              </td>
+            </template>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'form-table',
+  data() {
+    return {
+      fullProps: { ...this.$attrs, ...this.$props },
+      labelStyle: { width: '80px' },
+    }
+  },
+  computed: {
+    // 配置列表中的最大列数
+    maxColNum() {
+      let number = 1;
+      this.fullProps.list.forEach(item => {
+        if (item instanceof Array) {
+          if (item.length > number) {
+            number = item.length;
+          }
+        }
+      });
+      return number;
+    },
+    // 配置列表的最大占位数
+    maxColSpan() {
+      return this.maxColNum * 2;
+    },
+  },
+  methods: {
+    getColspan({ item, col, idx }) {
+      // 如果存在列数小于最大列数的行
+      if (item.length < this.maxColNum) {
+        const normalColSpan = Math.floor((this.maxColSpan - item.length) / item.length);
+        return col.colspan || normalColSpan;
+      }
+      return 1;
+    }
+  }
+}
+</script>
diff --git a/examples/views/page/other copy.vue b/examples/views/page/other copy.vue
new file mode 100644
index 0000000..ed3f323
--- /dev/null
+++ b/examples/views/page/other copy.vue
@@ -0,0 +1,207 @@
+<style>
+.custom-form {
+  background: #cfc;
+}
+.custom-title {
+  background: #ccf;
+}
+.custom-content {
+  background: #fcc;
+  margin: 10px;
+}
+.custom-item {
+  background: #fcf;
+}
+.custom-group {
+  background: #ffffff;
+  padding: 0;
+  border: 1px solid grey;
+  margin: 10px;
+  box-shadow: -2px 2px 8px grey;
+}
+
+.page-other .el-input .el-input__inner, .el-textarea__inner {
+  border-radius: 0;
+}
+</style>
+
+<template>
+  <div class="page-other">
+    <pre>{{ model }}</pre>
+    <eg-table v-model="tableData" :list="option.list" :tableProps="{ border: true }" editable
+      @cell-edit="onCellEdit" @row-new="onRowNew" @row-edit="onRowEdit" @row-delete="onRowDelete"
+    >
+      <template #value-location-locationMin="{ value }">
+        <el-tag v-if="value" size="mini" disable-transitions>{{ value }}</el-tag>
+      </template>
+      <template #value-location-district-province="{ value }">
+        <el-tag v-if="value" type="success" size="mini" disable-transitions>{{ value }}</el-tag>
+      </template>
+      <!-- <template #location-district-city>
+        <el-table-column label="城市测试" prop="location-district-city">
+          <el-tag type="danger" size="mini" slot-scope="{ row: { location: { district: { city } = {} } = {} } }">{{ city }}</el-tag>
+        </el-table-column>
+      </template> -->
+    </eg-table>
+    <el-button size="mini" @click="handleGetValue">校验</el-button>
+    <!-- <eg-form ref="form" v-model="model" :list="option.list" @validate="onValidate" label-width="80px" :span="6" type="div"></eg-form> -->
+    <eg-form
+      ref="form" v-model="model" :list="option.list" @validate="onValidate" :span="6" label-width="90px"
+      group-class="custom-group" :just-a-text-props="() => 'test'"
+      form-class="custom-form" title-class="custom-title" content-class="custom-content" item-class="custom-item"
+    ></eg-form>
+  </div>
+</template>
+
+<script>
+import EgForm from './form-new';
+import EgTable from './table-new';
+
+export default {
+  name: 'other',
+  components: { EgForm, EgTable },
+  data() {
+    return {
+      tableData: [],
+      model: {
+        name: 'name',
+        location: {
+          areaName: 'hahhhahaa',
+        },
+      },
+      option: {
+        list: [
+          {
+            group: { title: '基础信息', span: 12 },
+            list: [
+              {
+                type(h, { config }) {
+                  return h(
+                    'el-tooltip',
+                    { props: { content: '这里是提示', placement: 'top', effect: 'dark' } },
+                    [h('el-input', config)]
+                  )
+                },
+                label: '名称',
+                key: 'name'
+              },
+              { type: 'el-input-number', label: '年龄', key: 'age',
+                render(h, { row, value }) {
+                  return h('el-tag', { props: { type: 'warning', size: 'mini' } }, [h('span', `${value}[${row.name}]`)])
+                }
+              },
+            ],
+          },
+          { span: 12 },
+          {
+            group: { title: '住址', key: 'location', span: 24 },
+            list: [
+              { type: 'el-input', label: '地址简称', key: 'locationMin' },
+              {
+                group: { key: 'district' },
+                list: [
+                  { type: 'eagle-select', label: '省', key: 'province', props: { dataSource: [{ label: '新疆', value: '新疆' }, { label: '四川', value: '四川' }] }, rules: [{ required: true, message: '请输入省', trigger: 'change' }], minWidth: 120 },
+                  // { type: 'el-input', label: '市', key: 'city', render: { type: 'el-tag', props: { type: 'danger', size: 'mini' } } },
+                  { type: 'eagle-select', label: '市', key: 'city',
+                    props: { dataSource: [{ label: '上海', value: '上海' }, { label: '北京', value: '北京' }] },
+                    render: {
+                      type: 'a', props: { href: 'https:///www.baidu.com/', target: '_blank' }, style: { color: 'red' },
+                      children({ row }) {
+                        const { location: { district: { city } = {} } = {} } = row;
+                        return city ? `${city}[城市]` : '';
+                      }
+                    }
+                  },
+                ],
+              },
+              {
+                group: { title: '小区信息' },
+                list: [
+                  { type: 'el-input', label: '小区名', key: 'areaName' },
+                  { type: 'el-input', label: '门牌号', key: 'homeNum' },
+                  {
+                    group: { title: 'A栋' },
+                    list: [
+                      { type: 'el-input-number', label: '人数', key: 'anumber',
+                        props: { 'controls-position': 'right' },
+                        on: {
+                          change(value) {
+                            console.log(value);
+                          }
+                        }
+                      },
+                    ],
+                  },
+                  {
+                    group: { title: 'B栋', key: 'bside' },
+                    list: [
+                      { type: 'el-input-number', label: '人数', key: 'bnumber',
+                        on({ model, update }) {
+                          return {
+                            change(value) {
+                              if (value === 18 && model.age === 18) {
+                                console.log(model)
+                                update({ 'location.areaName': 'hehe', name: 'aaa', 'text.0': 'abc', 'ttt.0': 'abc' });
+                              }
+                            }
+                          }
+                        }
+                      },
+                    ],
+                  }
+                ],
+              }
+            ],
+          },
+          { type: 'el-input', label: '身高', key: 'height', props: { type: 'textarea', min: 3 }, style: { width: '100%' }, span: 24 },
+          { type: 'el-input', label: '体重', key: 'weight' },
+        ]
+      }
+    }
+  },
+  mounted() {
+    setTimeout(() => {
+      this.model = {
+        age: 7,
+        name: '1',
+        location: {
+          locationMin: 'a',
+          district: {
+            province: 'p',
+            city: 'c'
+          },
+          areaName: 'a',
+          homeNum: 'n',
+          anumber: '1',
+          bside: {
+            bnumber: '2'
+          }
+        },
+        height: '3',
+        weight: '4'
+      }
+      this.tableData = [this.model];
+    }, 1000);
+  },
+  methods: {
+    onValidate(isValidated, model) {
+      console.log(isValidated, model);
+    },
+    handleGetValue() {
+      this.$refs.form.validate();
+    },
+    onCellEdit(data) {
+      console.log('cell-edit', data);
+    },
+    onRowNew(data) {
+      console.log('row-new', data);
+    },
+    onRowEdit(data) {
+      console.log('row-edit', data);
+    },
+    onRowDelete(data) {
+      console.log('row-delete', data);
+    }
+  }
+}
+</script>
diff --git a/examples/views/page/other.vue b/examples/views/page/other.vue
index c2fe975..a89ceb4 100644
--- a/examples/views/page/other.vue
+++ b/examples/views/page/other.vue
@@ -1,25 +1,7 @@
 <style>
-.custom-form {
-  background: #cfc;
+.w-full {
+  width: 100%;
 }
-.custom-title {
-  background: #ccf;
-}
-.custom-content {
-  background: #fcc;
-  margin: 10px;
-}
-.custom-item {
-  background: #fcf;
-}
-.custom-group {
-  background: #ffffff;
-  padding: 0;
-  border: 1px solid grey;
-  margin: 10px;
-  box-shadow: -2px 2px 8px grey;
-}
-
 .page-other .el-input .el-input__inner, .el-textarea__inner {
   border-radius: 0;
 }
@@ -27,39 +9,18 @@
 
 <template>
   <div class="page-other">
-    <pre>{{ model }}</pre>
-    <eg-table v-model="tableData" :list="option.list" :tableProps="{ border: true }" editable
-      @cell-edit="onCellEdit" @row-new="onRowNew" @row-edit="onRowEdit" @row-delete="onRowDelete"
-    >
-      <template #value-location-locationMin="{ value }">
-        <el-tag v-if="value" size="mini" disable-transitions>{{ value }}</el-tag>
-      </template>
-      <template #value-location-district-province="{ value }">
-        <el-tag v-if="value" type="success" size="mini" disable-transitions>{{ value }}</el-tag>
-      </template>
-      <!-- <template #location-district-city>
-        <el-table-column label="城市测试" prop="location-district-city">
-          <el-tag type="danger" size="mini" slot-scope="{ row: { location: { district: { city } = {} } = {} } }">{{ city }}</el-tag>
-        </el-table-column>
-      </template> -->
-    </eg-table>
-    <el-button size="mini" @click="handleGetValue">校验</el-button>
-    <!-- <eg-form ref="form" v-model="model" :list="option.list" @validate="onValidate" label-width="80px" :span="6" type="div"></eg-form> -->
-    <eg-form
-      ref="form" v-model="model" :list="option.list" @validate="onValidate" :span="4"
-      group-class="custom-group" :just-a-text-props="() => 'test'"
-      form-class="custom-form" title-class="custom-title" content-class="custom-content" item-class="custom-item"
-    ></eg-form>
+    <eg-form-table :list="list"></eg-form-table>
   </div>
 </template>
 
 <script>
 import EgForm from './form-new';
+import EgFormTable from './form-table';
 import EgTable from './table-new';
 
 export default {
   name: 'other',
-  components: { EgForm, EgTable },
+  components: { EgForm, EgFormTable, EgTable },
   data() {
     return {
       tableData: [],
@@ -69,6 +30,26 @@ export default {
           areaName: 'hahhhahaa',
         },
       },
+      list: [
+        [
+          { type: 'el-input', label: '名称', key: 'name' },
+          { type: 'el-input-number', label: '年龄', key: 'age' },
+          { type: 'el-input-number', label: '年龄2', key: 'age2' },
+          { type: 'el-input-number', label: '年龄3', key: 'age3' },
+          { type: 'el-input-number', label: '年龄3', key: 'age3' },
+        ],
+        [
+          { type: 'el-input', label: '名称', key: 'name', colspan: 1 },
+          { type: 'el-input-number', label: '年龄', key: 'age' },
+          { type: 'el-input-number', label: '年龄2', key: 'age2', colspan: 4 },
+        ],
+        [
+          { type: 'el-input', label: '名称1', key: 'name1', colspan: 4 },
+          { type: 'el-input-number', label: '年龄1', key: 'age1' },
+        ],
+        { type: 'el-input', label: '备注', key: 'remark', props: { type: 'textarea', min: 3 } },
+        [{ type: 'el-input', label: '备注1', key: 'remark1', props: { type: 'textarea', min: 2 } }],
+      ],
       option: {
         list: [
           {
--
libgit2 0.21.0