From ab434ceb06ca8c2930969d23bfd0220ed1983899 Mon Sep 17 00:00:00 2001
From: Aaron <427787340@qq.com>
Date: Wed, 25 Dec 2019 18:05:47 +0800
Subject: [PATCH] 新增新式表格

---
 examples/views/page/form-new/form-render.vue |   2 +-
 examples/views/page/form-new/index.vue       |   4 +---
 examples/views/page/other.vue                |  40 +++++++++++++++++++---------------------
 examples/views/page/table-new/index.vue      | 129 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 150 insertions(+), 25 deletions(-)
 create mode 100644 examples/views/page/table-new/index.vue

diff --git a/examples/views/page/form-new/form-render.vue b/examples/views/page/form-new/form-render.vue
index 3af4c9a..ec402ff 100644
--- a/examples/views/page/form-new/form-render.vue
+++ b/examples/views/page/form-new/form-render.vue
@@ -21,7 +21,7 @@
       </component>
       <!-- 正常无分组表单项 -->
       <component :is="colComponent" v-else :span="type === 'div' ? undefined : item.span || span" :key="index"
-        :style="{ width: type === 'div' && item.style && item.style.width.indexOf('%') > -1 ? item.style.width : undefined, paddingRight: '10px' }"
+        :style="{ width: type === 'div' && item.style && item.style.width.includes('%') ? item.style.width : undefined, paddingRight: '10px' }"
       >
         <el-form-item :label="item.label" :label-width="item.labelWidth" :prop="item.fullKey" :rules="item.rules" :class="itemClass || 'eagle-form__item'">
           <!-- 自定义组件 -->
diff --git a/examples/views/page/form-new/index.vue b/examples/views/page/form-new/index.vue
index 4161a36..61314eb 100644
--- a/examples/views/page/form-new/index.vue
+++ b/examples/views/page/form-new/index.vue
@@ -23,12 +23,10 @@
 
 <template>
   <el-form ref="form" size="mini" :class="formClass" :model="formModel" :label-width="labelWidth" :label-position="labelPosition || labelWidth ? 'right' : 'top'">
-    {{ formModel }}
     <form-render :title-class="titleClass" :content-class="contentClass" :item-class="itemClass" :list="formList" :value="model"
       :model="model" :span="span" :type="type"
       @item-change="onItemChange" @form-item-change="onFormItemChange" @item-update="onItemUpdate"
     ></form-render>
-    {{ list }}
   </el-form>
 </template>
 
@@ -80,7 +78,7 @@ export default {
               if (item.group.key) {
                 item.fullKey = `${parentKey ? `${parentKey}-${item.group.key}` : item.group.key}`;
               } else {
-                item.fullKey = item.key;
+                item.fullKey = parentKey || item.key;
               }
               generateFullKey(item.list, item.fullKey);
             } else {
diff --git a/examples/views/page/other.vue b/examples/views/page/other.vue
index 0c51c40..48830b8 100644
--- a/examples/views/page/other.vue
+++ b/examples/views/page/other.vue
@@ -12,10 +12,25 @@
 
 <template>
   <div>
-    <p>这是一个非markdown页面</p>
+    <pre>{{ model }}</pre>
+    <eg-table :value="[this.model]" :list="option.list" :tableProps="{ border: true }">
+      <el-table-column type="selection"></el-table-column>
+      <template #value-location-locationMin="{ value }">
+        <el-tag size="mini">{{ value }}</el-tag>
+      </template>
+      <template #value-location-district-province="{ value }">
+        <el-tag type="success" size="mini">{{ 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>
+    <!-- <p>这是一个非markdown页面</p>
     <pre>{{ model }}</pre>
     <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" label-width="80px" :span="6" type="div"></eg-form> -->
     <eg-form
       ref="form" v-model="model" :list="option.list" @validate="onValidate" :span="4"
       form-class="custom-form" title-class="custom-title" content-class="custom-content" item-class="custom-item"
@@ -25,10 +40,11 @@
 
 <script>
 import EgForm from './form-new';
+import EgTable from './table-new';
 
 export default {
   name: 'other',
-  components: { EgForm },
+  components: { EgForm, EgTable },
   data() {
     return {
       model: {
@@ -101,24 +117,6 @@ export default {
           },
           { type: 'el-input', label: '身高', key: 'height', props: { type: 'textarea', min: 3 }, style: { width: '100%' }, span: 24 },
           { type: 'el-input', label: '体重', key: 'weight' },
-          { type: 'el-input', label: '身高', key: 'height' },
-          { type: 'el-input', label: '体重', key: 'weight' },
-          { type: 'el-input', label: '身高', key: 'height' },
-          { type: 'el-input', label: '体重', key: 'weight' },
-          { type: 'el-input', label: '身高', key: 'height' },
-          { type: 'el-input', label: '体重', key: 'weight' },
-          { type: 'el-input', label: '身高', key: 'height' },
-          { type: 'el-input', label: '体重', key: 'weight' },
-          { type: 'el-input', label: '身高', key: 'height' },
-          { type: 'el-input', label: '体重', key: 'weight' },
-          { type: 'el-input', label: '身高', key: 'height' },
-          { type: 'el-input', label: '体重', key: 'weight' },
-          { type: 'el-input', label: '身高', key: 'height' },
-          { type: 'el-input', label: '体重', key: 'weight' },
-          { type: 'el-input', label: '身高', key: 'height' },
-          { type: 'el-input', label: '体重', key: 'weight' },
-          { type: 'el-input', label: '身高', key: 'height' },
-          { type: 'el-input', label: '体重', key: 'weight' },
         ]
       }
     }
diff --git a/examples/views/page/table-new/index.vue b/examples/views/page/table-new/index.vue
new file mode 100644
index 0000000..1d30567
--- /dev/null
+++ b/examples/views/page/table-new/index.vue
@@ -0,0 +1,129 @@
+<style>
+.eagle-table {
+  width: 100%;
+}
+</style>
+
+<template>
+  <div>
+    <pre>{{ tableList }}</pre>
+    <el-table class="eagle-table" ref="table" :data="tableData" v-bind="{ size: 'small', ...tableProps }" v-on="tableEvents">
+      <slot name="default"></slot>
+      <template v-if="tableList && tableList.length > 0">
+        <template v-for="(item, index) in tableList">
+          <template v-if="bindItemVisible(item.visible)">
+            <slot v-if="$scopedSlots[item.keyPath.join('-')] || $slots[item.keyPath.join('-')]" :name="item.keyPath.join('-')" v-bind="item"></slot>
+            <el-table-column v-else-if="$scopedSlots[`value-${item.keyPath.join('-')}`] || $slots[`value-${item.keyPath.join('-')}`]"
+              v-bind="item" :prop="item.agentKey || item.fullKey || item.key" :key="index"
+              :min-width="item.minWidth || item['min-width']"
+            >
+              <slot slot-scope="{ row, column, $index }" :name="`value-${item.keyPath.join('-')}`" v-bind="item"
+                :row="row" :value="$_get(row, item.fullKey)" :column="column" :index="$index"
+              ></slot>
+            </el-table-column>
+            <el-table-column v-else v-bind="item" :prop="item.agentKey || item.fullKey || item.key"
+              :key="index" :min-width="item.minWidth || item['min-width']"
+            ></el-table-column>
+          </template>
+        </template>
+      </template>
+      <slot name="column-append"></slot>
+      <slot name="column-end"></slot>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import { cloneDeep, get } from '../form-new/util';
+
+export default {
+  name: 'TableNew',
+  props: {
+    // 用于实例化本组件绑定v-model的值
+    value: Array,
+    // 配置列表
+    list: {
+      type: Array,
+      required: true
+    },
+    // 表格参数
+    tableProps: {
+      type: Object,
+      default() { return {} }
+    },
+    // 表格事件
+    tableEvents: Object,
+  },
+  data() {
+    return {
+      tableList: [],
+      tableData: [],
+    };
+  },
+  computed: {
+    // 表格实体
+    instance: {
+      get() {
+        return this.$refs.table;
+      }
+    }
+  },
+  watch: {
+    value: {
+      handler(val = []) {
+        this.tableData = val;
+      },
+      immediate: true
+    },
+    list: {
+      handler(val) {
+        // 深度克隆传入的列表，避免原始值被修改
+        const newList = cloneDeep(this.list);
+        // 生成列表值的全路径key，即列表项为对象时，对象内的key与上一级的key合并作为全路径key
+        const generateFullKey = (list, parentKey) => {
+          list.forEach(item => {
+            if (item.group && item.list) {
+              if (item.group.key) {
+                item.fullKey = `${parentKey ? `${parentKey}.${item.group.key}` : item.group.key}`;
+              } else {
+                item.fullKey = parentKey || item.key;
+              }
+              generateFullKey(item.list, item.fullKey);
+            } else {
+              item.fullKey = `${parentKey ? `${parentKey}.${item.key}` : item.key}`;
+            }
+          });
+        };
+        // 生成fullKey
+        generateFullKey(newList);
+        // 创建输出列表
+        const result = [];
+        // 生成列表值的全路径key，即列表项为对象时，对象内的key与上一级的key合并作为全路径key
+        const generateFlatList = (list) => {
+          list.forEach(item => {
+            if (item.group && item.list) {
+              generateFlatList(item.list);
+            } else if (!item.group && !item.list) {
+              result.push({ ...item, keyPath: item.fullKey.split('.') });
+            }
+          });
+        };
+        generateFlatList(newList);
+        this.tableList = result;
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    $_get: get,
+    // 绑定表格列显示隐藏状态
+    bindItemVisible(visible = true) {
+      let result = visible;
+      if (typeof visible === 'function') {
+        result = visible(this.tableData);
+      }
+      return result;
+    },
+  }
+};
+</script>
\ No newline at end of file
--
libgit2 0.21.0