From 77f96aefe66e9dd48119fbbbc1c2b1e3febe56d1 Mon Sep 17 00:00:00 2001
From: Aaron <427787340@qq.com>
Date: Thu, 29 Aug 2019 18:36:25 +0800
Subject: [PATCH] Scheme支持动态列

---
 examples/views/docs/component/scheme.md |  8 +++++---
 packages/scheme/index.vue               | 55 ++++++++++++++++++++++++++++++++++++++++++++++++-------
 2 files changed, 53 insertions(+), 10 deletions(-)

diff --git a/examples/views/docs/component/scheme.md b/examples/views/docs/component/scheme.md
index 0a79699..517cd1c 100644
--- a/examples/views/docs/component/scheme.md
+++ b/examples/views/docs/component/scheme.md
@@ -10,7 +10,9 @@ Scheme是一个数据驱动的解决方案，通过既定的业务配置参数�
 
 ```html
 <template>
-  <eagle-scheme v-model="tableData" :list="list"></eagle-scheme>
+  <eagle-scheme v-model="tableData" :list="list">
+    <el-table-column type="selection" min-width="40"></el-table-column>
+  </eagle-scheme>
 </template>
 
 <script>
@@ -27,7 +29,7 @@ export default {
         { type: 'el-input', key: 'name', label: '名称', rules: [{ required: true, message: '请输入名称' }] },
         { type: 'el-input', key: 'code', label: '编码', rules: [{ required: true, message: '请输入编码' }], exclude: 'search' },
         { type: 'el-input', key: 'type', label: '类型' },
-        { type: 'el-input-number', key: 'sort', label: '排序', include: ['form', 'table'], sortable: true },
+        { type: 'el-input-number', key: 'sort', label: '排序', include: 'form', sortable: true },
         { type: 'el-input', key: 'status', label: '状态' },
       ],
     }
@@ -47,7 +49,7 @@ export default {
 ```html
 <template>
   <eagle-scheme :list="list"
-    :option="{ $http: $axios, url: 'product', currPageAlias: 'page', pageSizeAlias: 'size', totalCountAlias: 'total' }">
+    :option="{ $http: $axios, url: 'product', currPageAlias: 'page', pageSizeAlias: 'size', totalCountAlias: 'total', dynamicColumn: true }">
   </eagle-scheme>
 </template>
 
diff --git a/packages/scheme/index.vue b/packages/scheme/index.vue
index a863edc..3b5fcd2 100644
--- a/packages/scheme/index.vue
+++ b/packages/scheme/index.vue
@@ -17,6 +17,30 @@
 .eagle-scheme__action {
   display: flex;
   align-items: center;
+  justify-content: space-between;
+  padding-bottom: 10px;
+}
+.eagle-scheme__action-left {
+  flex: auto;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+.eagle-scheme__action-right {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  min-width: 120px;
+}
+.eagle-scheme__dynamic-column-btn {
+  display: flex;
+  flex-wrap: wrap;
+}
+.eagle-scheme__dynamic-column-btn .item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-right: 10px;
   padding-bottom: 10px;
 }
 .eagle-scheme__action .eagle-scheme__action-btn:not(:first-child) {
@@ -68,11 +92,24 @@
     <div v-if="option.showActionBar !== false" class="eagle-scheme__action" v-loading="tableLoading" element-loading-spinner="none" element-loading-background="rgba(255, 255, 255, 0.6)">
       <slot v-if="$scopedSlots['action-bar'] || $slots['action-bar']" name="action-bar" v-bind="slotMethod" :model="formModel" :selection="tableSelection"></slot>
       <template v-else>
-        <slot v-if="$scopedSlots['action-btn-new'] || $slots['action-btn-new']" name="action-btn-new" v-bind="slotMethod" :model="formModel" :selection="tableSelection"></slot>
-        <el-button v-else-if="option.showActionBtnNew !== false" class="eagle-scheme__action-btn" type="primary" size="small" @click="handleNew">{{ i18n('eagle.scheme.new') || '新增'  }}</el-button>
-        <el-button v-if="hasSelectionSlot && option.showActionBtnDelete !== false" :disabled="tableSelection && tableSelection.length <= 0" class="eagle-scheme__action-btn" plain size="small" @click="handleDelete('more')">{{ i18n('eagle.scheme.delete') || '删除'  }}</el-button>
-        <slot v-if="$scopedSlots['action-button'] || $slots['action-button']" name="action-button" class="eagle-scheme__action-btn" :model="formModel" :selection="tableSelection" v-bind="slotMethod"></slot>
-        <div v-if="hasSelectionSlot && tableSelection && tableSelection.length > 0 && option.showActionBtnDelete !== false" class="eagle-scheme__action-btn eagle-scheme__text-selection">{{ i18n('eagle.scheme.checked') || '已选中'  }}<span class="eagle-scheme__text-selection-highlight">{{ tableSelection.length }}</span>{{ i18n('eagle.scheme.item') || '项'  }}</div>
+        <div class="eagle-scheme__action-left">
+          <slot v-if="$scopedSlots['action-btn-new'] || $slots['action-btn-new']" name="action-btn-new" v-bind="slotMethod" :model="formModel" :selection="tableSelection"></slot>
+          <el-button v-else-if="option.showActionBtnNew !== false" class="eagle-scheme__action-btn" type="primary" size="small" @click="handleNew">{{ i18n('eagle.scheme.new') || '新增'  }}</el-button>
+          <el-button v-if="hasSelectionSlot && option.showActionBtnDelete !== false" :disabled="tableSelection && tableSelection.length <= 0" class="eagle-scheme__action-btn" plain size="small" @click="handleDelete('more')">{{ i18n('eagle.scheme.delete') || '删除'  }}</el-button>
+          <slot v-if="$scopedSlots['action-button'] || $slots['action-button']" name="action-button" class="eagle-scheme__action-btn" :model="formModel" :selection="tableSelection" v-bind="slotMethod"></slot>
+          <div v-if="hasSelectionSlot && tableSelection && tableSelection.length > 0 && option.showActionBtnDelete !== false" class="eagle-scheme__action-btn eagle-scheme__text-selection">{{ i18n('eagle.scheme.checked') || '已选中'  }}<span class="eagle-scheme__text-selection-highlight">{{ tableSelection.length }}</span>{{ i18n('eagle.scheme.item') || '项'  }}</div>
+        </div>
+        <div v-if="option.dynamicColumn === true" class="eagle-scheme__action-right">
+          <el-popover placement="left-end" trigger="click">
+            <div class="eagle-scheme__dynamic-column-btn">
+              <span class="item" v-for="(item, index) in _tableList" :key="index">
+                {{ item.label }}
+                <el-switch style="padding-left: 10px;" v-model="item.visible" @change="dynamicChange"></el-switch>
+              </span>
+            </div>
+            <el-button slot="reference" size="small" plain icon="el-icon-s-operation"></el-button>
+          </el-popover>
+        </div>
       </template>
     </div>
     <div class="eagle-scheme__table">
@@ -278,7 +315,7 @@ export default {
       const { search = [], form = [], table = [] } = generateListSpace(this.list);
       this._searchList = search;
       this._formList = form;
-      this._tableList = table;
+      this._tableList = table.map(item => { return { ...item, visible: true } });
     } else { // 没有总配置列表时，单独传入作用域列表
       this._searchList = this.searchList || [];
       this._formList = this.formList || [];
@@ -346,9 +383,13 @@ export default {
         this.$emit("change", val);
       },
       deep: true
-    }
+    },
   },
   methods: {
+    // 动态改变表格列
+    dynamicChange() {
+      this.$forceUpdate();
+    },
     // 查询数据
     async handleSearch(value) {
       const { currPageAlias = 'currPage', pageSizeAlias = 'pageSize' } = this.option || {};
--
libgit2 0.21.0