framework / eagle-web-toolkit

Download as
Browse Code »

Commit 0f9815718a7fe28fdca27e20a3cd0ce969178292

Authored by Aaron
1 parent 6346896a
Exists in master and in 1 other branch legacy

优化scheme

Showing 3 changed files with 136 additions and 29 deletions   Show diff stats
examples/views/docs/scheme.md
  Diff comments   View file @0f98157
... ... @@ -11,15 +11,32 @@ Scheme銝銝芣撽勗圾獢摰蔭嚗
11 11 ```html
12 12 <template>
13 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>
  14 + <template #search-status="{ model }">
  15 + <eagle-select v-model="model.status" :dataSource="dataSource"></eagle-select>
  16 + </template>
  17 + <template #form-group-setting="{ label }">
  18 + <div style="padding: 10px 0px;border-bottom: 1px dashed #aaa;display: flex;justify-content: space-between;">
  19 + <span> - {{ label }} - 銝</span>
  20 + <el-button size="mini" type="primary">餈銝銝芣</el-button>
  21 + </div>
22 22 </template>
  23 + <template #form-item-status="{ model }">
  24 + <el-input-number v-model="model.status"></el-input-number>
  25 + </template>
  26 + <!-- 摰蝏 -->
  27 + <!-- <el-table-column slot="table-operation" prop="$operation" label="" min-width="140">
  28 + <el-tag>摰蝏</el-tag>
  29 + </el-table-column> -->
  30 + <!-- 蝏 -->
  31 + <!-- <template slot="table-operation-btn">
  32 + <el-button class="eagle-scheme__table-btn" type="text" title=""></el-button>
  33 + <el-button class="eagle-scheme__table-btn" type="text" title="蝳">蝳</el-button>
  34 + </template> -->
  35 + <!-- 蝏蕭 -->
  36 + <!-- <template slot="table-operation-btn-append">
  37 + <el-button class="eagle-scheme__table-btn" type="text" title=""></el-button>
  38 + <el-button class="eagle-scheme__table-btn" type="text" title="蝳">蝳</el-button>
  39 + </template> -->
23 40 </eagle-scheme>
24 41 </template>
25 42  
... ... @@ -29,10 +46,15 @@ export default {
29 46 return {
30 47 schemeList: [
31 48 { type: 'el-input', key: 'name', label: '妍', rules: [{ required: true, message: '霂瑁妍' }] },
32   - { type: 'el-input', key: 'code', label: '蝻', rules: [{ required: true, message: '霂瑁蝻' }], exclude: 'search' },
33   - { type: 'el-input', key: 'type', label: '蝐餃' },
  49 + { type: 'el-input', key: 'code', label: '蝻', rules: [{ required: true, message: '霂瑁蝻' }],
  50 + exclude: 'search', group: { label: '霈曄蔭', key: 'setting' }, tip: '蝻蛹摮' },
  51 + { type: 'el-input', key: 'type', label: '蝐餃', group: { label: '霈曄蔭', key: 'setting' }, tip: '蝐餃噶憛' },
34 52 { type: 'el-input-number', key: 'sort', label: '', exclude: 'search' },
35 53 { type: 'el-input', key: 'status', label: '' },
  54 + ],
  55 + dataSource: [
  56 + { label: '★A', value: 'A' },
  57 + { label: '★B', value: 'B' },
36 58 ]
37 59 }
38 60 },
... ...
packages/scheme/index.vue
  Diff comments   View file @0f98157
... ... @@ -17,6 +17,10 @@
17 17 .eagle-scheme__action {
18 18 padding-bottom: 10px;
19 19 }
  20 +.eagle-scheme__table .eagle-scheme__table-operation {
  21 + display: flex;
  22 + align-items: center;
  23 +}
20 24 .eagle-scheme__table .eagle-scheme__table-btn:not(:first-child) {
21 25 padding-left: 10px;
22 26 margin-left: 0px;
... ... @@ -30,7 +34,11 @@
30 34 <template>
31 35 <div class="eagle-scheme">
32 36 <div class="eagle-scheme__card">
33   - <eagle-search :list="_searchList"></eagle-search>
  37 + <eagle-search :list="_searchList" v-model="searchModel" @search="handleQuery">
  38 + <template v-for="item in _searchList">
  39 + <slot v-if="$scopedSlots[`search-${item.key}`] || $slots[`search-${item.key}`]" :name="`search-${item.key}`" :slot="item.key" :model="searchModel"></slot>
  40 + </template>
  41 + </eagle-search>
34 42 </div>
35 43 <div class="eagle-scheme__action">
36 44 <el-button type="primary" size="small" @click="showDialog">新增</el-button>
... ... @@ -38,31 +46,43 @@
38 46 <div class="eagle-scheme__table">
39 47 <eagle-table :list="_tableList" :tableProps="tableProps" :value="tableData">
40 48 <template v-if="$scopedSlots['table-append'] || $slots['table-append']">
41   - <slot name="table-append" slot="append"></slot>
  49 + <slot name="table-append" slot="$append"></slot>
42 50 </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>
  51 + <template v-if="$scopedSlots['table-operation'] || $slots['table-operation']">
  52 + <slot name="table-operation" slot="$operation"></slot>
  53 + </template>
  54 + <el-table-column v-else slot="$operation" prop="$operation" label="操作" min-width="140" fixed="right">
  55 + <div class="eagle-scheme__table-operation">
  56 + <slot v-if="$scopedSlots['table-operation-btn'] || $slots['table-operation-btn']" name="table-operation-btn"></slot>
  57 + <el-button class="eagle-scheme__table-btn" type="text" icon="el-icon-view" title="查看"></el-button>
46 58 <el-button class="eagle-scheme__table-btn" type="text" icon="el-icon-edit" title="编辑" @click="showDialog"></el-button>
47 59 <eagle-confirm class="eagle-scheme__table-btn" title="是否删除？">
48 60 <el-button type="text" icon="el-icon-delete" title="删除"></el-button>
49 61 </eagle-confirm>
50   - </el-table-column>
51   - </template>
  62 + <slot v-if="$scopedSlots['table-operation-btn-append'] || $slots['table-operation-btn-append']" name="table-operation-btn-append"></slot>
  63 + </div>
  64 + </el-table-column>
52 65 </eagle-table>
53 66 <div class="eagle-scheme__pagination">
54 67 <el-pagination size="small" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
55   - :page-size="100" :total="400" v-bind="paginationProps"></el-pagination>
  68 + :page-size="pageSize" :total="totalCount" v-bind="paginationProps"></el-pagination>
56 69 </div>
57 70 </div>
58 71 <el-dialog :title="dialogProps.title || '标题'" :visible.sync="dialogVisible" v-bind="dialogProps">
59   - <eagle-form :list="_formList" :formProps="formProps" :span="12" @cancel="hideDialog"></eagle-form>
  72 + <eagle-form :list="_formList" v-model="formModel" :formProps="formProps" :span="12" @submit="handleSubmit" @cancel="handleCancel">
  73 + <template v-for="key in formGroupSlotsKeys">
  74 + <slot v-if="$scopedSlots[`form-${key}`] || $slots[`form-${key}`]" :name="`form-${key}`" :slot="key" :model="formModel"></slot>
  75 + </template>
  76 + <template v-for="item in _formList">
  77 + <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>
  78 + </template>
  79 + </eagle-form>
60 80 </el-dialog>
61 81 </div>
62 82 </template>
63 83  
64 84 <script>
65   -import { format, objExclude, generateListSpace } from './parser';
  85 +import { generateListSpace } from './parser';
66 86  
67 87 export default {
68 88 name: 'Scheme',
... ... @@ -108,47 +128,111 @@ export default {
108 128 return {
109 129 // 搜索表单配置
110 130 _searchList: [],
  131 + // 搜索表单值
  132 + searchModel: {},
111 133 // 表单配置
112 134 _formList: [],
  135 + // 表单值
  136 + formModel: {},
113 137 // 表格配置
114 138 _tableList: [],
115 139 // 当前页
116 140 currentPage: 1,
  141 + // 每页最大数据量
  142 + pageSize: 10,
  143 + // 数据总量
  144 + totalCount: 0,
117 145 // 弹出框状态
118 146 dialogVisible: false,
  147 + // 表格数据
119 148 tableData: [
120 149 { name: '赵伯', code: 'U00001', type: 'admin', sort: 0, status: 'active' },
121 150 { name: '钱仲', code: 'U00002', type: 'user', sort: 1, status: 'active' },
122 151 { name: '孙叔', code: 'U00003', type: 'user', sort: 2, status: 'active' },
123 152 { name: '李季', code: 'U00004', type: 'user', sort: 3, status: 'active' },
  153 + { name: '赵伯', code: 'U00001', type: 'admin', sort: 0, status: 'active' },
  154 + { name: '钱仲', code: 'U00002', type: 'user', sort: 1, status: 'active' },
  155 + { name: '孙叔', code: 'U00003', type: 'user', sort: 2, status: 'active' },
  156 + { name: '李季', code: 'U00004', type: 'user', sort: 3, status: 'active' },
  157 + { name: '赵伯', code: 'U00001', type: 'admin', sort: 0, status: 'active' },
  158 + { name: '钱仲', code: 'U00002', type: 'user', sort: 1, status: 'active' },
  159 + { name: '孙叔', code: 'U00003', type: 'user', sort: 2, status: 'active' },
  160 + { name: '李季', code: 'U00004', type: 'user', sort: 3, status: 'active' },
  161 + { name: '赵伯', code: 'U00001', type: 'admin', sort: 0, status: 'active' },
  162 + { name: '钱仲', code: 'U00002', type: 'user', sort: 1, status: 'active' },
  163 + { name: '孙叔', code: 'U00003', type: 'user', sort: 2, status: 'active' },
  164 + { name: '李季', code: 'U00004', type: 'user', sort: 3, status: 'active' },
124 165 ]
125 166 };
126 167 },
127 168 created() {
128   - if (this.list instanceof Array) {
  169 + if (this.list instanceof Array) { // 如果有总配置列表，则根据总配置列表生成作用域数据
129 170 const { search = [], form = [], table = [] } = generateListSpace(this.list);
130 171 this._searchList = search;
131 172 this._formList = form;
132 173 this._tableList = table;
133   - } else {
  174 + } else { // 没有总配置列表时，单独传入作用域列表
134 175 this._searchList = this.searchList || [];
135 176 this._formList = this.formList || [];
136 177 this._tableList = this.tableList || [];
137 178 }
  179 + this.totalCount = this.tableData.length;
  180 + },
  181 + mounted() {
  182 + console.log(this.$scopedSlots);
  183 + console.log(this.$slots);
  184 + console.log(this.formGroupSlotsKeys);
  185 + console.log(this.formGroupSlotsKeys);
  186 + },
  187 + computed: {
  188 + formGroupSlotsKeys() {
  189 + const keys = [...Object.keys(this.$scopedSlots), ...Object.keys(this.$slots)];
  190 + console.log(keys);
  191 + return keys.filter(key => key.indexOf('form-group') > -1).map(key => key.substr(5));
  192 + // return this.$scopedSlots.filter(item => item.);
  193 + // $scopedSlots[`form-group-${item.key}`] || $slots[`form-group-${item.key}`]
  194 + }
138 195 },
139 196 methods: {
  197 + // 查询数据
  198 + handleQuery(param) {
  199 + console.log({
  200 + param,
  201 + searchModel: this.searchModel,
  202 + currentPage: this.currentPage,
  203 + pageSize: this.pageSize
  204 + });
  205 + },
  206 + // 改变每页总数大小
  207 + handleSizeChange(val) {
  208 + this.currentPage = 1;
  209 + this.pageSize = val;
  210 + this.handleQuery();
  211 + },
  212 + // 改变当前页数
  213 + handleCurrentChange(val) {
  214 + this.currentPage = val;
  215 + this.handleQuery();
  216 + },
  217 + // 表单提交
  218 + handleSubmit(param) {
  219 + console.log({
  220 + param,
  221 + });
  222 + },
  223 + // 表单取消
  224 + handleCancel() {
  225 + this.formModel = {};
  226 + this.hideDialog();
  227 + },
  228 + // 显示弹出框
140 229 showDialog() {
141 230 this.dialogVisible = true;
142 231 },
  232 + // 隐藏弹出框
143 233 hideDialog() {
144 234 this.dialogVisible = false;
145 235 },
146   - handleSizeChange(val) {
147   - console.log(`每页 ${val} 条`);
148   - },
149   - handleCurrentChange(val) {
150   - console.log(`当前页: ${val}`);
151   - }
152 236 }
153 237 };
154 238 </script>
... ...
packages/table/index.vue
  Diff comments   View file @0f98157
... ... @@ -13,7 +13,8 @@
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 + <slot name="$append"></slot>
  17 + <slot name="$operation"></slot>
17 18 </el-table>
18 19 </template>
19 20  
... ...