From 0f9815718a7fe28fdca27e20a3cd0ce969178292 Mon Sep 17 00:00:00 2001
From: Aaron <427787340@qq.com>
Date: Thu, 25 Jul 2019 12:05:14 +0800
Subject: [PATCH] 优化scheme

---
 examples/views/docs/scheme.md |  42 ++++++++++++++++++++++++++++++++----------
 packages/scheme/index.vue     | 120 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------
 packages/table/index.vue      |   3 ++-
 3 files changed, 136 insertions(+), 29 deletions(-)

diff --git a/examples/views/docs/scheme.md b/examples/views/docs/scheme.md
index a58c2b4..a645bd7 100644
--- a/examples/views/docs/scheme.md
+++ b/examples/views/docs/scheme.md
@@ -11,15 +11,32 @@ Scheme是一个数据驱动的解决方案，通过既定的业务配置参数�
 ```html
 <template>
   <eagle-scheme :list="schemeList">
-    <!-- <el-table-column slot="table-append" prop="$operation" label="操作" min-width="140">
-      <el-button class="eagle-scheme__table-btn" type="text" icon="el-icon-edit" title="编辑"></el-button>
-      <eagle-confirm class="eagle-scheme__table-btn" title="是否删除？">
-        <el-button type="text" icon="el-icon-delete" title="删除"></el-button>
-      </eagle-confirm>
-    </el-table-column> -->
-    <template slot="table-append-btn">
-      <el-button class="eagle-scheme__table-btn" type="text" icon="el-icon-view" title="查看"></el-button>
+    <template #search-status="{ model }">
+      <eagle-select v-model="model.status" :dataSource="dataSource"></eagle-select>
+    </template>
+    <template #form-group-setting="{ label }">
+      <div style="padding: 10px 0px;border-bottom: 1px dashed #aaa;display: flex;justify-content: space-between;">
+        <span>哎哟 - {{ label }} - 不错哦</span>
+        <el-button size="mini" type="primary">这是一个按钮</el-button>
+      </div>
     </template>
+    <template #form-item-status="{ model }">
+      <el-input-number v-model="model.status"></el-input-number>
+    </template>
+    <!-- 自定义按钮组 -->
+    <!-- <el-table-column slot="table-operation" prop="$operation" label="操作" min-width="140">
+      <el-tag>自定义按钮组</el-tag>
+    </el-table-column> -->
+    <!-- 在操作按钮组前加上新的按钮 -->
+    <!-- <template slot="table-operation-btn">
+      <el-button class="eagle-scheme__table-btn" type="text" title="启用">启用</el-button>
+      <el-button class="eagle-scheme__table-btn" type="text" title="禁用">禁用</el-button>
+    </template> -->
+    <!-- 在操作按钮组后追加新的按钮 -->
+    <!-- <template slot="table-operation-btn-append">
+      <el-button class="eagle-scheme__table-btn" type="text" title="启用">启用</el-button>
+      <el-button class="eagle-scheme__table-btn" type="text" title="禁用">禁用</el-button>
+    </template> -->
   </eagle-scheme>
 </template>
 
@@ -29,10 +46,15 @@ export default {
     return {
       schemeList: [
         { 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', key: 'code', label: '编码', rules: [{ required: true, message: '请输入编码' }],
+          exclude: 'search', group: { label: '设置', key: 'setting' }, tip: '编码为数字' },
+        { type: 'el-input', key: 'type', label: '类型', group: { label: '设置', key: 'setting' }, tip: '类型随便填' },
         { type: 'el-input-number', key: 'sort', label: '排序', exclude: 'search' },
         { type: 'el-input', key: 'status', label: '状态' },
+      ],
+      dataSource: [
+        { label: '选项A', value: 'A' },
+        { label: '选项B', value: 'B' },
       ]
     }
   },
diff --git a/packages/scheme/index.vue b/packages/scheme/index.vue
index 8a8fb04..15908d1 100644
--- a/packages/scheme/index.vue
+++ b/packages/scheme/index.vue
@@ -17,6 +17,10 @@
 .eagle-scheme__action {
   padding-bottom: 10px;
 }
+.eagle-scheme__table .eagle-scheme__table-operation {
+  display: flex;
+  align-items: center;
+}
 .eagle-scheme__table .eagle-scheme__table-btn:not(:first-child) {
   padding-left: 10px;
   margin-left: 0px;
@@ -30,7 +34,11 @@
 <template>
   <div class="eagle-scheme">
     <div class="eagle-scheme__card">
-      <eagle-search :list="_searchList"></eagle-search>
+      <eagle-search :list="_searchList" v-model="searchModel" @search="handleQuery">
+        <template v-for="item in _searchList">
+          <slot v-if="$scopedSlots[`search-${item.key}`] || $slots[`search-${item.key}`]" :name="`search-${item.key}`" :slot="item.key" :model="searchModel"></slot>
+        </template>
+      </eagle-search>
     </div>
     <div class="eagle-scheme__action">
       <el-button type="primary" size="small" @click="showDialog">新增</el-button>
@@ -38,31 +46,43 @@
     <div class="eagle-scheme__table">
       <eagle-table :list="_tableList" :tableProps="tableProps" :value="tableData">
         <template v-if="$scopedSlots['table-append'] || $slots['table-append']">
-          <slot name="table-append" slot="append"></slot>
+          <slot name="table-append" slot="$append"></slot>
         </template>
-        <template v-else>
-          <el-table-column slot="append" prop="$operation" label="操作" min-width="140">
-            <slot v-if="$scopedSlots['table-append-btn'] || $slots['table-append-btn']" name="table-append-btn"></slot>
+        <template v-if="$scopedSlots['table-operation'] || $slots['table-operation']">
+          <slot name="table-operation" slot="$operation"></slot>
+        </template>
+        <el-table-column v-else slot="$operation" prop="$operation" label="操作" min-width="140" fixed="right">
+          <div class="eagle-scheme__table-operation">
+            <slot v-if="$scopedSlots['table-operation-btn'] || $slots['table-operation-btn']" name="table-operation-btn"></slot>
+            <el-button class="eagle-scheme__table-btn" type="text" icon="el-icon-view" title="查看"></el-button>
             <el-button class="eagle-scheme__table-btn" type="text" icon="el-icon-edit" title="编辑" @click="showDialog"></el-button>
             <eagle-confirm class="eagle-scheme__table-btn" title="是否删除？">
               <el-button type="text" icon="el-icon-delete" title="删除"></el-button>
             </eagle-confirm>
-          </el-table-column>
-        </template>
+            <slot v-if="$scopedSlots['table-operation-btn-append'] || $slots['table-operation-btn-append']" name="table-operation-btn-append"></slot>
+          </div>
+        </el-table-column>
       </eagle-table>
       <div class="eagle-scheme__pagination">
         <el-pagination size="small" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
-        :page-size="100" :total="400" v-bind="paginationProps"></el-pagination>
+          :page-size="pageSize" :total="totalCount" v-bind="paginationProps"></el-pagination>
       </div>
     </div>
     <el-dialog :title="dialogProps.title || '标题'" :visible.sync="dialogVisible" v-bind="dialogProps">
-      <eagle-form :list="_formList" :formProps="formProps" :span="12" @cancel="hideDialog"></eagle-form>
+      <eagle-form :list="_formList" v-model="formModel" :formProps="formProps" :span="12" @submit="handleSubmit" @cancel="handleCancel">
+        <template v-for="key in formGroupSlotsKeys">
+          <slot v-if="$scopedSlots[`form-${key}`] || $slots[`form-${key}`]" :name="`form-${key}`" :slot="key" :model="formModel"></slot>
+        </template>
+        <template v-for="item in _formList">
+          <slot v-if="$scopedSlots[`form-item-${item.key}`] || $slots[`form-item-${item.key}`]" :name="`form-item-${item.key}`" :slot="`item-${item.key}`" :model="formModel"></slot>
+        </template>
+      </eagle-form>
     </el-dialog>
   </div>
 </template>
 
 <script>
-import { format, objExclude, generateListSpace } from './parser';
+import { generateListSpace } from './parser';
 
 export default {
   name: 'Scheme',
@@ -108,47 +128,111 @@ export default {
     return {
       // 搜索表单配置
       _searchList: [],
+      // 搜索表单值
+      searchModel: {},
       // 表单配置
       _formList: [],
+      // 表单值
+      formModel: {},
       // 表格配置
       _tableList: [],
       // 当前页
       currentPage: 1,
+      // 每页最大数据量
+      pageSize: 10,
+      // 数据总量
+      totalCount: 0,
       // 弹出框状态
       dialogVisible: false,
+      // 表格数据
       tableData: [
         { name: '赵伯', code: 'U00001', type: 'admin', sort: 0, status: 'active' },
         { name: '钱仲', code: 'U00002', type: 'user', sort: 1, status: 'active' },
         { name: '孙叔', code: 'U00003', type: 'user', sort: 2, status: 'active' },
         { name: '李季', code: 'U00004', type: 'user', sort: 3, status: 'active' },
+        { name: '赵伯', code: 'U00001', type: 'admin', sort: 0, status: 'active' },
+        { name: '钱仲', code: 'U00002', type: 'user', sort: 1, status: 'active' },
+        { name: '孙叔', code: 'U00003', type: 'user', sort: 2, status: 'active' },
+        { name: '李季', code: 'U00004', type: 'user', sort: 3, status: 'active' },
+        { name: '赵伯', code: 'U00001', type: 'admin', sort: 0, status: 'active' },
+        { name: '钱仲', code: 'U00002', type: 'user', sort: 1, status: 'active' },
+        { name: '孙叔', code: 'U00003', type: 'user', sort: 2, status: 'active' },
+        { name: '李季', code: 'U00004', type: 'user', sort: 3, status: 'active' },
+        { name: '赵伯', code: 'U00001', type: 'admin', sort: 0, status: 'active' },
+        { name: '钱仲', code: 'U00002', type: 'user', sort: 1, status: 'active' },
+        { name: '孙叔', code: 'U00003', type: 'user', sort: 2, status: 'active' },
+        { name: '李季', code: 'U00004', type: 'user', sort: 3, status: 'active' },
       ]
     };
   },
   created() {
-    if (this.list instanceof Array) {
+    if (this.list instanceof Array) { // 如果有总配置列表，则根据总配置列表生成作用域数据
       const { search = [], form = [], table = [] } = generateListSpace(this.list);
       this._searchList = search;
       this._formList = form;
       this._tableList = table;
-    } else {
+    } else { // 没有总配置列表时，单独传入作用域列表
       this._searchList = this.searchList || [];
       this._formList = this.formList || [];
       this._tableList = this.tableList || [];
     }
+    this.totalCount = this.tableData.length;
+  },
+  mounted() {
+    console.log(this.$scopedSlots);
+    console.log(this.$slots);
+    console.log(this.formGroupSlotsKeys);
+    console.log(this.formGroupSlotsKeys);
+  },
+  computed: {
+    formGroupSlotsKeys() {
+      const keys = [...Object.keys(this.$scopedSlots), ...Object.keys(this.$slots)];
+      console.log(keys);
+      return keys.filter(key => key.indexOf('form-group') > -1).map(key => key.substr(5));
+      // return this.$scopedSlots.filter(item => item.);
+      // $scopedSlots[`form-group-${item.key}`] || $slots[`form-group-${item.key}`]
+    }
   },
   methods: {
+    // 查询数据
+    handleQuery(param) {
+      console.log({
+        param,
+        searchModel: this.searchModel,
+        currentPage: this.currentPage,
+        pageSize: this.pageSize
+      });
+    },
+    // 改变每页总数大小
+    handleSizeChange(val) {
+      this.currentPage = 1;
+      this.pageSize = val;
+      this.handleQuery();
+    },
+    // 改变当前页数
+    handleCurrentChange(val) {
+      this.currentPage = val;
+      this.handleQuery();
+    },
+    // 表单提交
+    handleSubmit(param) {
+      console.log({
+        param,
+      });
+    },
+    // 表单取消
+    handleCancel() {
+      this.formModel = {};
+      this.hideDialog();
+    },
+    // 显示弹出框
     showDialog() {
       this.dialogVisible = true;
     },
+    // 隐藏弹出框
     hideDialog() {
       this.dialogVisible = false;
     },
-    handleSizeChange(val) {
-      console.log(`每页 ${val} 条`);
-    },
-    handleCurrentChange(val) {
-      console.log(`当前页: ${val}`);
-    }
   }
 };
 </script>
diff --git a/packages/table/index.vue b/packages/table/index.vue
index 9ae6adf..2f8b113 100644
--- a/packages/table/index.vue
+++ b/packages/table/index.vue
@@ -13,7 +13,8 @@
         <el-table-column v-else v-bind="item" :prop="item.key" :key="index" :min-width="item.minWidth || '120'"></el-table-column>
       </template>
     </template>
-    <slot name="append"></slot>
+    <slot name="$append"></slot>
+    <slot name="$operation"></slot>
   </el-table>
 </template>
 
--
libgit2 0.21.0