Commit 0f9815718a7fe28fdca27e20a3cd0ce969178292
1 parent
6346896a
Exists in
master
and in
1 other branch
优化scheme
Showing
3 changed files
with
136 additions
and
29 deletions
Show diff stats
examples/views/docs/scheme.md
| @@ -11,15 +11,32 @@ Scheme銝銝芣撽勗圾獢摰蔭嚗 | @@ -11,15 +11,32 @@ Scheme銝銝芣撽勗圾獢摰蔭嚗 | ||
| 11 | ```html | 11 | ```html |
| 12 | <template> | 12 | <template> |
| 13 | <eagle-scheme :list="schemeList"> | 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 | </template> | 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 | </eagle-scheme> | 40 | </eagle-scheme> |
| 24 | </template> | 41 | </template> |
| 25 | 42 | ||
| @@ -29,10 +46,15 @@ export default { | @@ -29,10 +46,15 @@ export default { | ||
| 29 | return { | 46 | return { |
| 30 | schemeList: [ | 47 | schemeList: [ |
| 31 | { type: 'el-input', key: 'name', label: '妍', rules: [{ required: true, message: '霂瑁妍' }] }, | 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 | { type: 'el-input-number', key: 'sort', label: '', exclude: 'search' }, | 52 | { type: 'el-input-number', key: 'sort', label: '', exclude: 'search' }, |
| 35 | { type: 'el-input', key: 'status', label: '' }, | 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
| @@ -17,6 +17,10 @@ | @@ -17,6 +17,10 @@ | ||
| 17 | .eagle-scheme__action { | 17 | .eagle-scheme__action { |
| 18 | padding-bottom: 10px; | 18 | padding-bottom: 10px; |
| 19 | } | 19 | } |
| 20 | +.eagle-scheme__table .eagle-scheme__table-operation { | ||
| 21 | + display: flex; | ||
| 22 | + align-items: center; | ||
| 23 | +} | ||
| 20 | .eagle-scheme__table .eagle-scheme__table-btn:not(:first-child) { | 24 | .eagle-scheme__table .eagle-scheme__table-btn:not(:first-child) { |
| 21 | padding-left: 10px; | 25 | padding-left: 10px; |
| 22 | margin-left: 0px; | 26 | margin-left: 0px; |
| @@ -30,7 +34,11 @@ | @@ -30,7 +34,11 @@ | ||
| 30 | <template> | 34 | <template> |
| 31 | <div class="eagle-scheme"> | 35 | <div class="eagle-scheme"> |
| 32 | <div class="eagle-scheme__card"> | 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 | </div> | 42 | </div> |
| 35 | <div class="eagle-scheme__action"> | 43 | <div class="eagle-scheme__action"> |
| 36 | <el-button type="primary" size="small" @click="showDialog">新增</el-button> | 44 | <el-button type="primary" size="small" @click="showDialog">新增</el-button> |
| @@ -38,31 +46,43 @@ | @@ -38,31 +46,43 @@ | ||
| 38 | <div class="eagle-scheme__table"> | 46 | <div class="eagle-scheme__table"> |
| 39 | <eagle-table :list="_tableList" :tableProps="tableProps" :value="tableData"> | 47 | <eagle-table :list="_tableList" :tableProps="tableProps" :value="tableData"> |
| 40 | <template v-if="$scopedSlots['table-append'] || $slots['table-append']"> | 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 | </template> | 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 | <el-button class="eagle-scheme__table-btn" type="text" icon="el-icon-edit" title="编辑" @click="showDialog"></el-button> | 58 | <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="是否删除？"> | 59 | <eagle-confirm class="eagle-scheme__table-btn" title="是否删除？"> |
| 48 | <el-button type="text" icon="el-icon-delete" title="删除"></el-button> | 60 | <el-button type="text" icon="el-icon-delete" title="删除"></el-button> |
| 49 | </eagle-confirm> | 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 | </eagle-table> | 65 | </eagle-table> |
| 53 | <div class="eagle-scheme__pagination"> | 66 | <div class="eagle-scheme__pagination"> |
| 54 | <el-pagination size="small" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" | 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 | </div> | 69 | </div> |
| 57 | </div> | 70 | </div> |
| 58 | <el-dialog :title="dialogProps.title || '标题'" :visible.sync="dialogVisible" v-bind="dialogProps"> | 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 | </el-dialog> | 80 | </el-dialog> |
| 61 | </div> | 81 | </div> |
| 62 | </template> | 82 | </template> |
| 63 | 83 | ||
| 64 | <script> | 84 | <script> |
| 65 | -import { format, objExclude, generateListSpace } from './parser'; | 85 | +import { generateListSpace } from './parser'; |
| 66 | 86 | ||
| 67 | export default { | 87 | export default { |
| 68 | name: 'Scheme', | 88 | name: 'Scheme', |
| @@ -108,47 +128,111 @@ export default { | @@ -108,47 +128,111 @@ export default { | ||
| 108 | return { | 128 | return { |
| 109 | // 搜索表单配置 | 129 | // 搜索表单配置 |
| 110 | _searchList: [], | 130 | _searchList: [], |
| 131 | + // 搜索表单值 | ||
| 132 | + searchModel: {}, | ||
| 111 | // 表单配置 | 133 | // 表单配置 |
| 112 | _formList: [], | 134 | _formList: [], |
| 135 | + // 表单值 | ||
| 136 | + formModel: {}, | ||
| 113 | // 表格配置 | 137 | // 表格配置 |
| 114 | _tableList: [], | 138 | _tableList: [], |
| 115 | // 当前页 | 139 | // 当前页 |
| 116 | currentPage: 1, | 140 | currentPage: 1, |
| 141 | + // 每页最大数据量 | ||
| 142 | + pageSize: 10, | ||
| 143 | + // 数据总量 | ||
| 144 | + totalCount: 0, | ||
| 117 | // 弹出框状态 | 145 | // 弹出框状态 |
| 118 | dialogVisible: false, | 146 | dialogVisible: false, |
| 147 | + // 表格数据 | ||
| 119 | tableData: [ | 148 | tableData: [ |
| 120 | { name: '赵伯', code: 'U00001', type: 'admin', sort: 0, status: 'active' }, | 149 | { name: '赵伯', code: 'U00001', type: 'admin', sort: 0, status: 'active' }, |
| 121 | { name: '钱仲', code: 'U00002', type: 'user', sort: 1, status: 'active' }, | 150 | { name: '钱仲', code: 'U00002', type: 'user', sort: 1, status: 'active' }, |
| 122 | { name: '孙叔', code: 'U00003', type: 'user', sort: 2, status: 'active' }, | 151 | { name: '孙叔', code: 'U00003', type: 'user', sort: 2, status: 'active' }, |
| 123 | { name: '李季', code: 'U00004', type: 'user', sort: 3, status: 'active' }, | 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 | created() { | 168 | created() { |
| 128 | - if (this.list instanceof Array) { | 169 | + if (this.list instanceof Array) { // 如果有总配置列表，则根据总配置列表生成作用域数据 |
| 129 | const { search = [], form = [], table = [] } = generateListSpace(this.list); | 170 | const { search = [], form = [], table = [] } = generateListSpace(this.list); |
| 130 | this._searchList = search; | 171 | this._searchList = search; |
| 131 | this._formList = form; | 172 | this._formList = form; |
| 132 | this._tableList = table; | 173 | this._tableList = table; |
| 133 | - } else { | 174 | + } else { // 没有总配置列表时，单独传入作用域列表 |
| 134 | this._searchList = this.searchList || []; | 175 | this._searchList = this.searchList || []; |
| 135 | this._formList = this.formList || []; | 176 | this._formList = this.formList || []; |
| 136 | this._tableList = this.tableList || []; | 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 | methods: { | 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 | showDialog() { | 229 | showDialog() { |
| 141 | this.dialogVisible = true; | 230 | this.dialogVisible = true; |
| 142 | }, | 231 | }, |
| 232 | + // 隐藏弹出框 | ||
| 143 | hideDialog() { | 233 | hideDialog() { |
| 144 | this.dialogVisible = false; | 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 | </script> | 238 | </script> |
packages/table/index.vue
| @@ -13,7 +13,8 @@ | @@ -13,7 +13,8 @@ | ||
| 13 | <el-table-column v-else v-bind="item" :prop="item.key" :key="index" :min-width="item.minWidth || '120'"></el-table-column> | 13 | <el-table-column v-else v-bind="item" :prop="item.key" :key="index" :min-width="item.minWidth || '120'"></el-table-column> |
| 14 | </template> | 14 | </template> |
| 15 | </template> | 15 | </template> |
| 16 | - <slot name="append"></slot> | 16 | + <slot name="$append"></slot> |
| 17 | + <slot name="$operation"></slot> | ||
| 17 | </el-table> | 18 | </el-table> |
| 18 | </template> | 19 | </template> |
| 19 | 20 |