新增scheme组件

Aaron
1 parent 1c0a5026
Showing 8 changed files with 229 additions and 15 deletions Show diff stats
examples/components/code-snippet.vue
examples/views/docs/scheme.md
packages/confirm/index.vue
packages/form/index.vue
packages/scheme/index.vue
packages/scheme/parser.js
packages/search/index.vue
packages/table/index.vue
@@ -47,6 +47,12 @@ export default {
   box-shadow: 0 6px 12px -2px #e6e6e6, 0 0 0 1px #f0f2f7;
   background-color: #ffffff;
   text-align: left;
+  // element-ui样式冲突
+  ul > li {
+    list-style-type: none;
+    margin: 0px;
+    padding: 0px;
+  }
 }
 .eagle-code-snippet--demo {
   box-sizing: border-box;
@@ -10,7 +10,17 @@ Schemeæ˜¯ä¸€ä¸ªæ•°æ®é©±åŠ¨çš„è§£å†³æ–¹æ¡ˆï¼Œé€šè¿‡æ—¢å®šçš„ä¸šåŠ¡é…ç½®å‚æ•°ï¼
  
 ```html
 <template>
-  <eagle-scheme :list="schemeList"></eagle-scheme>
+  <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>
+  </eagle-scheme>
 </template>
  
 <script>
@@ -19,9 +29,10 @@ export default {
     return {
       schemeList: [
         { type: 'el-input', key: 'name', label: 'åç§°', rules: [{ required: true, message: 'è¯·è¾“å…¥åç§°' }] },
-        { type: 'eagle-select', key: 'address', label: 'ä½å€', props: { dataSource: [{ label: 'å¤§è¡—ä¸Š', value: 'S' }, { label: 'å°åŒºé‡Œ', value: 'H' }] } },
-        { type: 'el-input', key: 'postcode', label: 'é‚®ç¼–', span: 12, tip: { content: 'é‚®æ”¿ç¼–ç ', placement: "left" } },
-        { type: 'el-input', key: 'number', label: 'æ¥¼æ ‹å·', span: 12, visible: (model) => model.address === 'H' },
+        { 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: 'æŽ’åº', exclude: 'search' },
+        { type: 'el-input', key: 'status', label: 'çŠ¶æ€' },
       ]
     }
   },
@@ -15,7 +15,7 @@
 </style>
  
 <template>
-  <el-popover :placement="placement" :trigger="trigger" v-model="visible">
+  <el-popover class="eagle-confirm" :placement="placement" :trigger="trigger" v-model="visible">
     <div>
       <p class="eagle-confirm-title">
         <i class="el-icon-info eagle-confirm-icon"></i>
@@ -22,14 +22,14 @@
       <template v-for="(data, index) in listOption.dataList">
         <template v-if="listOption.isGroup">
           <slot v-if="$scopedSlots[data.key] || $slots[data.key]" :name="data.key" v-bind="data"></slot>
-          <el-col v-else class="eagle-form__group-title" :key="data.key" :span="24">
+          <el-col v-else class="eagle-form__group-title" :key="data.key" :span="span">
             <i v-if="data.icon" :class="`el-icon-${data.icon} eagle-form__group-icon`"></i>
             <span>{{ data.label }}</span>
           </el-col>
         </template>
         <el-row :class="{ 'eagle-form__group-content': listOption.isGroup }" :key="'group-content-' + index" :gutter="15">
           <template v-for="(item, index) in data.list">
-            <el-col v-if="bindItemVisible(item.visible)" v-show="bindItemShow(item.show)" :key="index + 'data'" :span="!item.span ? 24 : item.span">
+            <el-col v-if="bindItemVisible(item.visible)" v-show="bindItemShow(item.show)" :key="index + 'data'" :span="!item.span ? span : item.span">
               <el-form-item :label="item.label" :label-width="item.label ? undefined : item.labelWidth || '0px'" :prop="item.key" :rules="item.rules">
                 <el-tooltip :disabled="!item.tip" v-bind="bindItemTip(item.tip)">
                   <slot v-if="$scopedSlots[`item-${item.key}`] || $slots[`item-${item.key}`]" :name="`item-${item.key}`" :model="model" v-bind="item"></slot>
@@ -86,6 +86,11 @@ export default {
     footerStyle: {
       type: [String, Object],
       default: 'center'
+    },
+    // 表单项占位
+    span: {
+      type: Number,
+      default: 24
     }
   },
   data() {
@@ -2,29 +2,153 @@
 .eagle-scheme {
   padding: 0px;
 }
+.eagle-scheme__card {
+  border: 1px solid #F5F5F5;
+  border-radius: 2px;
+  background-color: #fff;
+  padding: 10px;
+  transition: all .3s ease;
+  margin-bottom: 10px;
+}
+.eagle-scheme__card  .eagle-search {
+  padding-top: 20px;
+  padding-bottom: 10px;
+}
+.eagle-scheme__action {
+  padding-bottom: 10px;
+}
+.eagle-scheme__table .eagle-scheme__table-btn:not(:first-child) {
+  padding-left: 10px;
+  margin-left: 0px;
+}
+.eagle-scheme__pagination {
+  text-align: right;
+  padding-top: 10px;
+}
 </style>
  
 <template>
   <div class="eagle-scheme">
-    Scheme
+    <div class="eagle-scheme__card">
+      <eagle-search :list="_searchList"></eagle-search>
+    </div>
+    <div class="eagle-scheme__action">
+      <el-button type="primary" size="small" @click="showDialog">新增</el-button>
+    </div>
+    <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>
+        </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>
+            <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>
+      </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>
+      </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>
+    </el-dialog>
   </div>
 </template>
  
 <script>
+import { format, objExclude, generateListSpace } from './parser';
+
 export default {
   name: 'Scheme',
   props: {
     // 配置列表
-    list: {
-      type: Array,
-      required: true
+    list: Array,
+    // 搜索表单配置
+    searchList: Array,
+    // 表单配置
+    formList: Array,
+    // 表格配置
+    tableList: Array,
+    // 表格参数
+    tableProps: {
+      type: Object,
+      default() {
+        return { size: 'small', border: true }
+      }
     },
+    // 表单参数
+    formProps: {
+      type: Object,
+      default() {
+        return { size: 'small', 'label-width': '90px' }
+      }
+    },
+    // 分页参数
+    paginationProps: {
+      type: Object,
+      default() {
+        return { 'page-sizes': [10, 20, 50], layout: 'total, sizes, prev, pager, next, jumper' }
+      }
+    },
+    // 弹出框参数
+    dialogProps: {
+      type: Object,
+      default() {
+        return { width: '65%' }
+      }
+    }
   },
   data() {
     return {
-      // 编辑器表单模型
-      model: {}
+      // 搜索表单配置
+      _searchList: [],
+      // 表单配置
+      _formList: [],
+      // 表格配置
+      _tableList: [],
+      // 当前页
+      currentPage: 1,
+      // 弹出框状态
+      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' },
+      ]
     };
   },
+  created() {
+    if (this.list instanceof Array) {
+      const { search = [], form = [], table = [] } = generateListSpace(this.list);
+      this._searchList = search;
+      this._formList = form;
+      this._tableList = table;
+    } else {
+      this._searchList = this.searchList || [];
+      this._formList = this.formList || [];
+      this._tableList = this.tableList || [];
+    }
+  },
+  methods: {
+    showDialog() {
+      this.dialogVisible = true;
+    },
+    hideDialog() {
+      this.dialogVisible = false;
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    }
+  }
 };
-</script>
 \ No newline at end of file
+</script>
@@ -0,0 +1,67 @@
+// 简单格式化掉Vue监听器存于Object中的属性
+export function format(obj) {
+  return JSON.parse(JSON.stringify(obj));
+}
+
+// 去除Object中不需要包含的属性
+export function objExclude(obj = {}, exclude = []) {
+  const result = {};
+  Object.keys(obj).forEach((key) => {
+    if (exclude.indexOf(key) < 0) {
+      result[key] = obj[key];
+    }
+  });
+  return result;
+}
+
+// 默认作用域
+const LIST_SPACE = ['search', 'form', 'table'];
+
+// 根据配置列表拆分作用域
+export function generateListSpace(fields = []) {
+  const array = {
+    search: [], // 搜索表单
+    form: [], // 表单
+    table: [], // 表格
+  };
+  fields.forEach((field) => {
+    // 可以在列表中通过include或exclude设置当前配置的作用域
+    const { include = LIST_SPACE, exclude = [] } = field;
+    // 判断include
+    let _inclue = [];
+    if (include instanceof String || typeof include === 'string') {
+      _inclue = [include];
+    } else if (include instanceof Array && typeof include === 'object') {
+      _inclue = include;
+    }
+    // 判断exclude转换为include的情况
+    let _exclude_include = [];
+    if (exclude instanceof String || typeof exclude === 'string') {
+      _exclude_include = LIST_SPACE.filter(item => item !== exclude);
+    } else if (exclude instanceof Array && typeof exclude === 'object') {
+      _exclude_include = LIST_SPACE.filter(item => exclude.indexOf(item) < 0 );
+    }
+    // 作用域交集
+    const _intersection = _inclue.filter((v) => { return _exclude_include.indexOf(v) !== -1; });
+    // 返回改配置项的作用域
+    const _list_space = [...new Set(_intersection)];
+    // 将配置项按需分配至各作用域下
+    _list_space.forEach((name) => {
+      if (name === 'search') {
+        const filterField = objExclude(field, ['rules']);  // 默认搜索表单去除校验规则
+        array[name].push({ ...filterField, ...(field.$search || {}) }); // 配置列表可通过$search单独为search域做配置
+      } else if (name === 'form') {
+        array[name].push({ ...field, ...(field.$form || {}) }); // 配置列表可通过$form单独为form域做配置
+      } else if (name === 'table') {
+        array[name].push({ ...field, ...(field.$table || {}) }); // 配置列表可通过$table单独为table域做配置
+      }
+    });
+  });
+  return array;
+}
+
+export default {
+  format,
+  objExclude,
+  generateListSpace,
+}
 \ No newline at end of file
@@ -20,7 +20,7 @@
           </el-form-item>
         </el-col>
       </template>
-      <el-col :span="list.length > visibleColNum ? collapse ? span : 24 : span" class="eagle-search__btn-col">
+      <el-col :span="list.length >= visibleColNum ? collapse ? span : 24 : span" class="eagle-search__btn-col">
         <slot v-if="$scopedSlots['button-group'] || $slots['button-group']" name="button-group"
           :model="model" :collapse="collapse" :doSearch="handleSearch" :doReset="handleReset" :doCollapse="handleCollapse"
         ></slot>
@@ -13,6 +13,7 @@
         <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>
   </el-table>
 </template>
...	...	@@ -47,6 +47,12 @@ export default {
47	47	box-shadow: 0 6px 12px -2px #e6e6e6, 0 0 0 1px #f0f2f7;
48	48	background-color: #ffffff;
49	49	text-align: left;
	50	+ // element-ui样式冲突
	51	+ ul > li {
	52	+ list-style-type: none;
	53	+ margin: 0px;
	54	+ padding: 0px;
	55	+ }
50	56	}
51	57	.eagle-code-snippet--demo {
52	58	box-sizing: border-box;
...	...
...	...	@@ -10,7 +10,17 @@ Schemeæ˜¯ä¸€ä¸ªæ•°æ®é©±åŠ¨çš„è§£å†³æ–¹æ¡ˆï¼Œé€šè¿‡æ—¢å®šçš„ä¸šåŠ¡é…ç½®å‚æ•°ï¼
10	10
11	11	```html
12	12	<template>
13		- <eagle-scheme :list="schemeList"></eagle-scheme>
	13	+ <eagle-scheme :list="schemeList">
	14	+ <!-- <el-table-column slot="table-append" prop="$operation" label="æ“ä½œ" min-width="140">
	15	+ <el-button class="eagle-scheme__table-btn" type="text" icon="el-icon-edit" title="ç¼–è¾‘"></el-button>
	16	+ <eagle-confirm class="eagle-scheme__table-btn" title="æ˜¯å¦åˆ é™¤ï¼Ÿ">
	17	+ <el-button type="text" icon="el-icon-delete" title="åˆ é™¤"></el-button>
	18	+ </eagle-confirm>
	19	+ </el-table-column> -->
	20	+ <template slot="table-append-btn">
	21	+ <el-button class="eagle-scheme__table-btn" type="text" icon="el-icon-view" title="æŸ¥çœ‹"></el-button>
	22	+ </template>
	23	+ </eagle-scheme>
14	24	</template>
15	25
16	26	<script>
...	...	@@ -19,9 +29,10 @@ export default {
19	29	return {
20	30	schemeList: [
21	31	{ type: 'el-input', key: 'name', label: 'åç§°', rules: [{ required: true, message: 'è¯·è¾“å…¥åç§°' }] },
22		- { type: 'eagle-select', key: 'address', label: 'ä½å€', props: { dataSource: [{ label: 'å¤§è¡—ä¸Š', value: 'S' }, { label: 'å°åŒºé‡Œ', value: 'H' }] } },
23		- { type: 'el-input', key: 'postcode', label: 'é‚®ç¼–', span: 12, tip: { content: 'é‚®æ”¿ç¼–ç ', placement: "left" } },
24		- { type: 'el-input', key: 'number', label: 'æ¥¼æ ‹å·', span: 12, visible: (model) => model.address === 'H' },
	32	+ { type: 'el-input', key: 'code', label: 'ç¼–ç ', rules: [{ required: true, message: 'è¯·è¾“å…¥ç¼–ç ' }], exclude: 'search' },
	33	+ { type: 'el-input', key: 'type', label: 'ç±»åž‹' },
	34	+ { type: 'el-input-number', key: 'sort', label: 'æŽ’åº', exclude: 'search' },
	35	+ { type: 'el-input', key: 'status', label: 'çŠ¶æ€' },
25	36	]
26	37	}
27	38	},
...	...
...	...	@@ -15,7 +15,7 @@
15	15	</style>
16	16
17	17	<template>
18		- <el-popover :placement="placement" :trigger="trigger" v-model="visible">
	18	+ <el-popover class="eagle-confirm" :placement="placement" :trigger="trigger" v-model="visible">
19	19	<div>
20	20	<p class="eagle-confirm-title">
21	21	<i class="el-icon-info eagle-confirm-icon"></i>
...	...
...	...	@@ -22,14 +22,14 @@
22	22	<template v-for="(data, index) in listOption.dataList">
23	23	<template v-if="listOption.isGroup">
24	24	<slot v-if="$scopedSlots[data.key] \|\| $slots[data.key]" :name="data.key" v-bind="data"></slot>
25		- <el-col v-else class="eagle-form__group-title" :key="data.key" :span="24">
	25	+ <el-col v-else class="eagle-form__group-title" :key="data.key" :span="span">
26	26	<i v-if="data.icon" :class="`el-icon-${data.icon} eagle-form__group-icon`"></i>
27	27	<span>{{ data.label }}</span>
28	28	</el-col>
29	29	</template>
30	30	<el-row :class="{ 'eagle-form__group-content': listOption.isGroup }" :key="'group-content-' + index" :gutter="15">
31	31	<template v-for="(item, index) in data.list">
32		- <el-col v-if="bindItemVisible(item.visible)" v-show="bindItemShow(item.show)" :key="index + 'data'" :span="!item.span ? 24 : item.span">
	32	+ <el-col v-if="bindItemVisible(item.visible)" v-show="bindItemShow(item.show)" :key="index + 'data'" :span="!item.span ? span : item.span">
33	33	<el-form-item :label="item.label" :label-width="item.label ? undefined : item.labelWidth \|\| '0px'" :prop="item.key" :rules="item.rules">
34	34	<el-tooltip :disabled="!item.tip" v-bind="bindItemTip(item.tip)">
35	35	<slot v-if="$scopedSlots[`item-${item.key}`] \|\| $slots[`item-${item.key}`]" :name="`item-${item.key}`" :model="model" v-bind="item"></slot>
...	...	@@ -86,6 +86,11 @@ export default {
86	86	footerStyle: {
87	87	type: [String, Object],
88	88	default: 'center'
	89	+ },
	90	+ // 表单项占位
	91	+ span: {
	92	+ type: Number,
	93	+ default: 24
89	94	}
90	95	},
91	96	data() {
...	...
...	...	@@ -2,29 +2,153 @@
2	2	.eagle-scheme {
3	3	padding: 0px;
4	4	}
	5	+.eagle-scheme__card {
	6	+ border: 1px solid #F5F5F5;
	7	+ border-radius: 2px;
	8	+ background-color: #fff;
	9	+ padding: 10px;
	10	+ transition: all .3s ease;
	11	+ margin-bottom: 10px;
	12	+}
	13	+.eagle-scheme__card .eagle-search {
	14	+ padding-top: 20px;
	15	+ padding-bottom: 10px;
	16	+}
	17	+.eagle-scheme__action {
	18	+ padding-bottom: 10px;
	19	+}
	20	+.eagle-scheme__table .eagle-scheme__table-btn:not(:first-child) {
	21	+ padding-left: 10px;
	22	+ margin-left: 0px;
	23	+}
	24	+.eagle-scheme__pagination {
	25	+ text-align: right;
	26	+ padding-top: 10px;
	27	+}
5	28	</style>
6	29
7	30	<template>
8	31	<div class="eagle-scheme">
9		- Scheme
	32	+ <div class="eagle-scheme__card">
	33	+ <eagle-search :list="_searchList"></eagle-search>
	34	+ </div>
	35	+ <div class="eagle-scheme__action">
	36	+ <el-button type="primary" size="small" @click="showDialog">新增</el-button>
	37	+ </div>
	38	+ <div class="eagle-scheme__table">
	39	+ <eagle-table :list="_tableList" :tableProps="tableProps" :value="tableData">
	40	+ <template v-if="$scopedSlots['table-append'] \|\| $slots['table-append']">
	41	+ <slot name="table-append" slot="append"></slot>
	42	+ </template>
	43	+ <template v-else>
	44	+ <el-table-column slot="append" prop="$operation" label="操作" min-width="140">
	45	+ <slot v-if="$scopedSlots['table-append-btn'] \|\| $slots['table-append-btn']" name="table-append-btn"></slot>
	46	+ <el-button class="eagle-scheme__table-btn" type="text" icon="el-icon-edit" title="编辑" @click="showDialog"></el-button>
	47	+ <eagle-confirm class="eagle-scheme__table-btn" title="是否删除？">
	48	+ <el-button type="text" icon="el-icon-delete" title="删除"></el-button>
	49	+ </eagle-confirm>
	50	+ </el-table-column>
	51	+ </template>
	52	+ </eagle-table>
	53	+ <div class="eagle-scheme__pagination">
	54	+ <el-pagination size="small" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
	55	+ :page-size="100" :total="400" v-bind="paginationProps"></el-pagination>
	56	+ </div>
	57	+ </div>
	58	+ <el-dialog :title="dialogProps.title \|\| '标题'" :visible.sync="dialogVisible" v-bind="dialogProps">
	59	+ <eagle-form :list="_formList" :formProps="formProps" :span="12" @cancel="hideDialog"></eagle-form>
	60	+ </el-dialog>
10	61	</div>
11	62	</template>
12	63
13	64	<script>
	65	+import { format, objExclude, generateListSpace } from './parser';
	66	+
14	67	export default {
15	68	name: 'Scheme',
16	69	props: {
17	70	// 配置列表
18		- list: {
19		- type: Array,
20		- required: true
	71	+ list: Array,
	72	+ // 搜索表单配置
	73	+ searchList: Array,
	74	+ // 表单配置
	75	+ formList: Array,
	76	+ // 表格配置
	77	+ tableList: Array,
	78	+ // 表格参数
	79	+ tableProps: {
	80	+ type: Object,
	81	+ default() {
	82	+ return { size: 'small', border: true }
	83	+ }
21	84	},
	85	+ // 表单参数
	86	+ formProps: {
	87	+ type: Object,
	88	+ default() {
	89	+ return { size: 'small', 'label-width': '90px' }
	90	+ }
	91	+ },
	92	+ // 分页参数
	93	+ paginationProps: {
	94	+ type: Object,
	95	+ default() {
	96	+ return { 'page-sizes': [10, 20, 50], layout: 'total, sizes, prev, pager, next, jumper' }
	97	+ }
	98	+ },
	99	+ // 弹出框参数
	100	+ dialogProps: {
	101	+ type: Object,
	102	+ default() {
	103	+ return { width: '65%' }
	104	+ }
	105	+ }
22	106	},
23	107	data() {
24	108	return {
25		- // 编辑器表单模型
26		- model: {}
	109	+ // 搜索表单配置
	110	+ _searchList: [],
	111	+ // 表单配置
	112	+ _formList: [],
	113	+ // 表格配置
	114	+ _tableList: [],
	115	+ // 当前页
	116	+ currentPage: 1,
	117	+ // 弹出框状态
	118	+ dialogVisible: false,
	119	+ tableData: [
	120	+ { name: '赵伯', code: 'U00001', type: 'admin', sort: 0, status: 'active' },
	121	+ { name: '钱仲', code: 'U00002', type: 'user', sort: 1, status: 'active' },
	122	+ { name: '孙叔', code: 'U00003', type: 'user', sort: 2, status: 'active' },
	123	+ { name: '李季', code: 'U00004', type: 'user', sort: 3, status: 'active' },
	124	+ ]
27	125	};
28	126	},
	127	+ created() {
	128	+ if (this.list instanceof Array) {
	129	+ const { search = [], form = [], table = [] } = generateListSpace(this.list);
	130	+ this._searchList = search;
	131	+ this._formList = form;
	132	+ this._tableList = table;
	133	+ } else {
	134	+ this._searchList = this.searchList \|\| [];
	135	+ this._formList = this.formList \|\| [];
	136	+ this._tableList = this.tableList \|\| [];
	137	+ }
	138	+ },
	139	+ methods: {
	140	+ showDialog() {
	141	+ this.dialogVisible = true;
	142	+ },
	143	+ hideDialog() {
	144	+ this.dialogVisible = false;
	145	+ },
	146	+ handleSizeChange(val) {
	147	+ console.log(`每页 ${val} 条`);
	148	+ },
	149	+ handleCurrentChange(val) {
	150	+ console.log(`当前页: ${val}`);
	151	+ }
	152	+ }
29	153	};
30		-</script>
31	154	\ No newline at end of file
	155	+</script>
...	...
...	...	@@ -0,0 +1,67 @@
	1	+// 简单格式化掉Vue监听器存于Object中的属性
	2	+export function format(obj) {
	3	+ return JSON.parse(JSON.stringify(obj));
	4	+}
	5	+
	6	+// 去除Object中不需要包含的属性
	7	+export function objExclude(obj = {}, exclude = []) {
	8	+ const result = {};
	9	+ Object.keys(obj).forEach((key) => {
	10	+ if (exclude.indexOf(key) < 0) {
	11	+ result[key] = obj[key];
	12	+ }
	13	+ });
	14	+ return result;
	15	+}
	16	+
	17	+// 默认作用域
	18	+const LIST_SPACE = ['search', 'form', 'table'];
	19	+
	20	+// 根据配置列表拆分作用域
	21	+export function generateListSpace(fields = []) {
	22	+ const array = {
	23	+ search: [], // 搜索表单
	24	+ form: [], // 表单
	25	+ table: [], // 表格
	26	+ };
	27	+ fields.forEach((field) => {
	28	+ // 可以在列表中通过include或exclude设置当前配置的作用域
	29	+ const { include = LIST_SPACE, exclude = [] } = field;
	30	+ // 判断include
	31	+ let _inclue = [];
	32	+ if (include instanceof String \|\| typeof include === 'string') {
	33	+ _inclue = [include];
	34	+ } else if (include instanceof Array && typeof include === 'object') {
	35	+ _inclue = include;
	36	+ }
	37	+ // 判断exclude转换为include的情况
	38	+ let _exclude_include = [];
	39	+ if (exclude instanceof String \|\| typeof exclude === 'string') {
	40	+ _exclude_include = LIST_SPACE.filter(item => item !== exclude);
	41	+ } else if (exclude instanceof Array && typeof exclude === 'object') {
	42	+ _exclude_include = LIST_SPACE.filter(item => exclude.indexOf(item) < 0 );
	43	+ }
	44	+ // 作用域交集
	45	+ const _intersection = _inclue.filter((v) => { return _exclude_include.indexOf(v) !== -1; });
	46	+ // 返回改配置项的作用域
	47	+ const _list_space = [...new Set(_intersection)];
	48	+ // 将配置项按需分配至各作用域下
	49	+ _list_space.forEach((name) => {
	50	+ if (name === 'search') {
	51	+ const filterField = objExclude(field, ['rules']); // 默认搜索表单去除校验规则
	52	+ array[name].push({ ...filterField, ...(field.$search \|\| {}) }); // 配置列表可通过$search单独为search域做配置
	53	+ } else if (name === 'form') {
	54	+ array[name].push({ ...field, ...(field.$form \|\| {}) }); // 配置列表可通过$form单独为form域做配置
	55	+ } else if (name === 'table') {
	56	+ array[name].push({ ...field, ...(field.$table \|\| {}) }); // 配置列表可通过$table单独为table域做配置
	57	+ }
	58	+ });
	59	+ });
	60	+ return array;
	61	+}
	62	+
	63	+export default {
	64	+ format,
	65	+ objExclude,
	66	+ generateListSpace,
	67	+}
0	68	\ No newline at end of file
...	...
...	...	@@ -20,7 +20,7 @@
20	20	</el-form-item>
21	21	</el-col>
22	22	</template>
23		- <el-col :span="list.length > visibleColNum ? collapse ? span : 24 : span" class="eagle-search__btn-col">
	23	+ <el-col :span="list.length >= visibleColNum ? collapse ? span : 24 : span" class="eagle-search__btn-col">
24	24	<slot v-if="$scopedSlots['button-group'] \|\| $slots['button-group']" name="button-group"
25	25	:model="model" :collapse="collapse" :doSearch="handleSearch" :doReset="handleReset" :doCollapse="handleCollapse"
26	26	></slot>
...	...
...	...	@@ -13,6 +13,7 @@
13	13	<el-table-column v-else v-bind="item" :prop="item.key" :key="index" :min-width="item.minWidth \|\| '120'"></el-table-column>
14	14	</template>
15	15	</template>
	16	+ <slot name="append"></slot>
16	17	</el-table>
17	18	</template>
18	19
...	...