Commit cb43ed7d7b393f74d8cf73950b504261538718be
1 parent
0f981571
Exists in
master
and in
1 other branch
完善scheme组件
Showing
9 changed files
with
223 additions
and
69 deletions
Show diff stats
examples/main.js
| ... | ... | @@ -2,6 +2,7 @@ import Vue from 'vue'; |
| 2 | 2 | import App from '@/App.vue'; |
| 3 | 3 | import router from '@/router'; |
| 4 | 4 | import store from '@/store'; |
| 5 | +import axios from 'axios'; | |
| 5 | 6 | |
| 6 | 7 | import ElementUI from 'element-ui'; |
| 7 | 8 | import EagleWebToolkit from '../packages'; |
| ... | ... | @@ -12,6 +13,8 @@ import '@/styles/theme/index.css'; |
| 12 | 13 | import '@/styles/nprogress.scss'; |
| 13 | 14 | import "highlight.js/styles/color-brewer.css"; |
| 14 | 15 | |
| 16 | +Vue.prototype.$axios = axios; | |
| 17 | + | |
| 15 | 18 | // 进度条配置 |
| 16 | 19 | NProgress.configure({ showSpinner: false }); |
| 17 | 20 | ... | ... |
examples/views/docs/scheme.md
| ... | ... | @@ -11,18 +11,23 @@ Scheme是一个数æ®é©±åŠ¨çš„解决方案，通过既定的业务é…ç½®å‚æ•°ï¼ |
| 11 | 11 | ```html |
| 12 | 12 | <template> |
| 13 | 13 | <eagle-scheme :list="schemeList"> |
| 14 | + <el-table-column type="selection" width="50" align="center"></el-table-column> | |
| 14 | 15 | <template #search-status="{ model }"> |
| 15 | 16 | <eagle-select v-model="model.status" :dataSource="dataSource"></eagle-select> |
| 16 | 17 | </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> | |
| 18 | + <template #form-group-setting > | |
| 19 | + <div style="padding: 10px 0px;margin-bottom: 30px;border-bottom: 1px dashed #aaa;display: flex;justify-content: space-between;"> | |
| 20 | + <span>å“Žå“Ÿ - 设置 - ä¸é”™å“¦</span> | |
| 20 | 21 | <el-button size="mini" type="primary">这是一个按钮</el-button> |
| 21 | 22 | </div> |
| 22 | 23 | </template> |
| 23 | 24 | <template #form-item-status="{ model }"> |
| 24 | 25 | <el-input-number v-model="model.status"></el-input-number> |
| 25 | 26 | </template> |
| 27 | + <template #dialog-view="{ row }"> | |
| 28 | + <div>这是一个自定义弹出框内容</div> | |
| 29 | + <div>{{ row }}</div> | |
| 30 | + </template> | |
| 26 | 31 | <!-- 自定义按钮组 --> |
| 27 | 32 | <!-- <el-table-column slot="table-operation" prop="$operation" label="æ“作" min-width="140"> |
| 28 | 33 | <el-tag>自定义按钮组</el-tag> |
| ... | ... | @@ -47,15 +52,15 @@ export default { |
| 47 | 52 | schemeList: [ |
| 48 | 53 | { type: 'el-input', key: 'name', label: 'å称', rules: [{ required: true, message: '请输入å称' }] }, |
| 49 | 54 | { type: 'el-input', key: 'code', label: 'ç¼–ç ', rules: [{ required: true, message: '请输入编ç ' }], |
| 50 | - exclude: 'search', group: { label: '设置', key: 'setting' }, tip: 'ç¼–ç 为数å—' }, | |
| 55 | + exclude: 'search', group: { label: '设置', key: 'setting', tip: { content: '哇哦', placement: 'left' } }, tip: 'ç¼–ç 为数å—' }, | |
| 51 | 56 | { type: 'el-input', key: 'type', label: '类型', group: { label: '设置', key: 'setting' }, tip: '类型éšä¾¿å¡«' }, |
| 52 | - { type: 'el-input-number', key: 'sort', label: '排åº', exclude: 'search' }, | |
| 53 | - { type: 'el-input', key: 'status', label: '状æ€' }, | |
| 57 | + { type: 'el-input-number', key: 'sort', label: '排åº', include: ['form', 'table'], sortable: true }, | |
| 58 | + { type: 'el-input', key: 'status', label: '状æ€', formScheme: { label: '状æ€ç ' } }, | |
| 54 | 59 | ], |
| 55 | 60 | dataSource: [ |
| 56 | 61 | { label: '选项A', value: 'A' }, |
| 57 | 62 | { label: '选项B', value: 'B' }, |
| 58 | - ] | |
| 63 | + ], | |
| 59 | 64 | } |
| 60 | 65 | }, |
| 61 | 66 | } | ... | ... |
examples/views/docs/table.md
package.json
packages/form/index.vue
| ... | ... | @@ -21,11 +21,13 @@ |
| 21 | 21 | <el-row :gutter="15"> |
| 22 | 22 | <template v-for="(data, index) in listOption.dataList"> |
| 23 | 23 | <template v-if="listOption.isGroup"> |
| 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="span"> | |
| 26 | - <i v-if="data.icon" :class="`el-icon-${data.icon} eagle-form__group-icon`"></i> | |
| 27 | - <span>{{ data.label }}</span> | |
| 28 | - </el-col> | |
| 24 | + <el-tooltip :disabled="!data.tip" v-bind="bindItemTip(data.tip)" :key="data.key"> | |
| 25 | + <slot v-if="$scopedSlots[data.key] || $slots[data.key]" :name="data.key" v-bind="data"></slot> | |
| 26 | + <el-col v-else class="eagle-form__group-title" :span="24"> | |
| 27 | + <i v-if="data.icon" :class="`el-icon-${data.icon} eagle-form__group-icon`"></i> | |
| 28 | + <span>{{ data.label }}</span> | |
| 29 | + </el-col> | |
| 30 | + </el-tooltip> | |
| 29 | 31 | </template> |
| 30 | 32 | <el-row :class="{ 'eagle-form__group-content': listOption.isGroup }" :key="'group-content-' + index" :gutter="15"> |
| 31 | 33 | <template v-for="(item, index) in data.list"> |
| ... | ... | @@ -42,7 +44,7 @@ |
| 42 | 44 | </template> |
| 43 | 45 | </el-row> |
| 44 | 46 | <slot v-if="$scopedSlots['footer'] || $slots['footer']" name="footer" :model="model" :submit="handleSubmit" :cancel="handleCancel"></slot> |
| 45 | - <el-row :gutter="15" v-else style="text-align: center" :style="footerStyle"> | |
| 47 | + <el-row :gutter="15" v-else :style="footerStyle"> | |
| 46 | 48 | <el-button type="primary" size="small" :loading="submitting" @click="handleSubmit">确定</el-button> |
| 47 | 49 | <el-button plain size="small" @click="handleCancel" style="margin-left: 8px">取消</el-button> |
| 48 | 50 | </el-row> |
| ... | ... | @@ -85,7 +87,7 @@ export default { |
| 85 | 87 | // 底部样式 |
| 86 | 88 | footerStyle: { |
| 87 | 89 | type: [String, Object], |
| 88 | - default: 'center' | |
| 90 | + default: 'text-align: center' | |
| 89 | 91 | }, |
| 90 | 92 | // 表单项占位 |
| 91 | 93 | span: { |
| ... | ... | @@ -137,6 +139,7 @@ export default { |
| 137 | 139 | groupSet[`group-${data.group.key}`] = { |
| 138 | 140 | icon: data.group.icon, |
| 139 | 141 | label: data.group.label, |
| 142 | + tip: data.group.tip, | |
| 140 | 143 | list: [] |
| 141 | 144 | }; |
| 142 | 145 | } | ... | ... |
packages/scheme/index.vue
| ... | ... | @@ -15,8 +15,20 @@ |
| 15 | 15 | padding-bottom: 10px; |
| 16 | 16 | } |
| 17 | 17 | .eagle-scheme__action { |
| 18 | + display: flex; | |
| 19 | + align-items: center; | |
| 18 | 20 | padding-bottom: 10px; |
| 19 | 21 | } |
| 22 | +.eagle-scheme__action .eagle-scheme__action-btn:not(:first-child) { | |
| 23 | + margin-left: 10px; | |
| 24 | +} | |
| 25 | +.eagle-scheme__text-selection { | |
| 26 | + font-size: 14px; | |
| 27 | +} | |
| 28 | +.eagle-scheme__text-selection-highlight { | |
| 29 | + color: #f5222d; | |
| 30 | + padding: 0 5px; | |
| 31 | +} | |
| 20 | 32 | .eagle-scheme__table .eagle-scheme__table-operation { |
| 21 | 33 | display: flex; |
| 22 | 34 | align-items: center; |
| ... | ... | @@ -29,54 +41,83 @@ |
| 29 | 41 | text-align: right; |
| 30 | 42 | padding-top: 10px; |
| 31 | 43 | } |
| 44 | +.eagle-scheme__dialog .el-dialog__body { | |
| 45 | + padding: 30px 40px; | |
| 46 | +} | |
| 32 | 47 | </style> |
| 33 | 48 | |
| 34 | 49 | <template> |
| 35 | 50 | <div class="eagle-scheme"> |
| 36 | - <div class="eagle-scheme__card"> | |
| 37 | - <eagle-search :list="_searchList" v-model="searchModel" @search="handleQuery"> | |
| 51 | + <div v-if="!option.showSearch" class="eagle-scheme__card"> | |
| 52 | + <!-- 搜索表单 --> | |
| 53 | + <eagle-search :list="_searchList" v-model="searchModel" @search="handleSearch" :searching="tableLoading"> | |
| 54 | + <!-- 搜索表单项具名插槽 --> | |
| 38 | 55 | <template v-for="item in _searchList"> |
| 39 | 56 | <slot v-if="$scopedSlots[`search-${item.key}`] || $slots[`search-${item.key}`]" :name="`search-${item.key}`" :slot="item.key" :model="searchModel"></slot> |
| 40 | 57 | </template> |
| 41 | 58 | </eagle-search> |
| 42 | 59 | </div> |
| 43 | - <div class="eagle-scheme__action"> | |
| 44 | - <el-button type="primary" size="small" @click="showDialog">新增</el-button> | |
| 60 | + <!-- 操作按钮栏 --> | |
| 61 | + <div v-if="!option.showActionBar" class="eagle-scheme__action" v-loading="tableLoading" element-loading-spinner="none" element-loading-background="rgba(255, 255, 255, 0.6)"> | |
| 62 | + <el-button class="eagle-scheme__action-btn" type="primary" size="small" @click="handleNew">新增</el-button> | |
| 63 | + <el-button v-if="hasSelectionSlot" class="eagle-scheme__action-btn" plain size="small" @click="handleDelete('more')">删除</el-button> | |
| 64 | + <div v-if="hasSelectionSlot && tableSelection && tableSelection.length > 0" class="eagle-scheme__action-btn eagle-scheme__text-selection">已选中<span class="eagle-scheme__text-selection-highlight">{{ tableSelection.length }}</span>项</div> | |
| 45 | 65 | </div> |
| 46 | 66 | <div class="eagle-scheme__table"> |
| 47 | - <eagle-table :list="_tableList" :tableProps="tableProps" :value="tableData"> | |
| 67 | + <!-- 表格 --> | |
| 68 | + <eagle-table ref="eagle-table" :list="_tableList" :value="tableData" | |
| 69 | + v-loading="tableLoading" | |
| 70 | + element-loading-background="rgba(255, 255, 255, 0.6)" | |
| 71 | + :tableProps="{ size: 'small', border: true, 'row-key': 'id', ...tableProps }" | |
| 72 | + :tableEvents="{ | |
| 73 | + 'selection-change': handleTableSelectionChange, | |
| 74 | + ...tableEvents, | |
| 75 | + }" | |
| 76 | + > | |
| 77 | + <slot></slot> | |
| 78 | + <!-- 表格后置插槽 --> | |
| 48 | 79 | <template v-if="$scopedSlots['table-append'] || $slots['table-append']"> |
| 49 | 80 | <slot name="table-append" slot="$append"></slot> |
| 50 | 81 | </template> |
| 82 | + <!-- 表格操作栏插槽 - 自定义 --> | |
| 51 | 83 | <template v-if="$scopedSlots['table-operation'] || $slots['table-operation']"> |
| 52 | - <slot name="table-operation" slot="$operation"></slot> | |
| 84 | + <slot name="table-operation" slot="$end"></slot> | |
| 53 | 85 | </template> |
| 54 | - <el-table-column v-else slot="$operation" prop="$operation" label="操作" min-width="140" fixed="right"> | |
| 55 | - <div class="eagle-scheme__table-operation"> | |
| 86 | + <!-- 表格操作栏插槽 - 默认 --> | |
| 87 | + <el-table-column v-else slot="$end" prop="$operation" label="操作" min-width="140" fixed="right"> | |
| 88 | + <div class="eagle-scheme__table-operation" slot-scope="slotScope"> | |
| 89 | + <!-- 表格操作栏插槽 - 前置插槽 --> | |
| 56 | 90 | <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> | |
| 58 | - <el-button class="eagle-scheme__table-btn" type="text" icon="el-icon-edit" title="编辑" @click="showDialog"></el-button> | |
| 59 | - <eagle-confirm class="eagle-scheme__table-btn" title="是否删除？"> | |
| 91 | + <el-button class="eagle-scheme__table-btn" type="text" icon="el-icon-view" title="查看" @click="handleView(slotScope)"></el-button> | |
| 92 | + <el-button class="eagle-scheme__table-btn" type="text" icon="el-icon-edit" title="编辑" @click="handleEdit(slotScope)"></el-button> | |
| 93 | + <eagle-confirm class="eagle-scheme__table-btn" title="是否删除？" @confirm="handleDelete('one', slotScope)"> | |
| 60 | 94 | <el-button type="text" icon="el-icon-delete" title="删除"></el-button> |
| 61 | 95 | </eagle-confirm> |
| 96 | + <!-- 表格操作栏插槽 - 后置插槽 --> | |
| 62 | 97 | <slot v-if="$scopedSlots['table-operation-btn-append'] || $slots['table-operation-btn-append']" name="table-operation-btn-append"></slot> |
| 63 | 98 | </div> |
| 64 | 99 | </el-table-column> |
| 65 | 100 | </eagle-table> |
| 66 | - <div class="eagle-scheme__pagination"> | |
| 67 | - <el-pagination size="small" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" | |
| 68 | - :page-size="pageSize" :total="totalCount" v-bind="paginationProps"></el-pagination> | |
| 101 | + <!-- 分页器 --> | |
| 102 | + <div v-if="!option.showPagination" class="eagle-scheme__pagination"> | |
| 103 | + <el-pagination size="small" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" v-loading="tableLoading" element-loading-spinner="none" element-loading-background="rgba(255, 255, 255, 0.6)" | |
| 104 | + :page-size="pageSize" :total="totalCount" v-bind="{ 'page-sizes': [10, 20, 50], layout: 'total, sizes, prev, pager, next, jumper', ...paginationProps }"></el-pagination> | |
| 69 | 105 | </div> |
| 70 | 106 | </div> |
| 71 | - <el-dialog :title="dialogProps.title || '标题'" :visible.sync="dialogVisible" v-bind="dialogProps"> | |
| 72 | - <eagle-form :list="_formList" v-model="formModel" :formProps="formProps" :span="12" @submit="handleSubmit" @cancel="handleCancel"> | |
| 107 | + <el-dialog :custom-class="dialogProps['custom-class'] || 'eagle-scheme__dialog'" :title="dialogProps.title || dialogTitle" :visible.sync="dialogVisible" v-bind="{ width: '65%', ...dialogProps }"> | |
| 108 | + <eagle-form v-if="dialogType === 'dialog-form'" :list="_formList" v-model="formModel" :span="formProps.span || 12" :formProps="{ size: 'small', 'label-width': '90px', ...formProps }" @submit="handleSubmit" @cancel="handleCancel"> | |
| 109 | + <!-- 表单分组具名插槽 --> | |
| 73 | 110 | <template v-for="key in formGroupSlotsKeys"> |
| 74 | 111 | <slot v-if="$scopedSlots[`form-${key}`] || $slots[`form-${key}`]" :name="`form-${key}`" :slot="key" :model="formModel"></slot> |
| 75 | 112 | </template> |
| 113 | + <!-- 表单项具名插槽 --> | |
| 76 | 114 | <template v-for="item in _formList"> |
| 77 | 115 | <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 | 116 | </template> |
| 79 | 117 | </eagle-form> |
| 118 | + <template v-else> | |
| 119 | + <slot :name="dialogType" :row="tableCurrentRow"></slot> | |
| 120 | + </template> | |
| 80 | 121 | </el-dialog> |
| 81 | 122 | </div> |
| 82 | 123 | </template> |
| ... | ... | @@ -89,6 +130,11 @@ export default { |
| 89 | 130 | props: { |
| 90 | 131 | // 配置列表 |
| 91 | 132 | list: Array, |
| 133 | + // 配置选项 | |
| 134 | + option: { | |
| 135 | + type: Object, | |
| 136 | + default() { return {} } | |
| 137 | + }, | |
| 92 | 138 | // 搜索表单配置 |
| 93 | 139 | searchList: Array, |
| 94 | 140 | // 表单配置 |
| ... | ... | @@ -98,30 +144,27 @@ export default { |
| 98 | 144 | // 表格参数 |
| 99 | 145 | tableProps: { |
| 100 | 146 | type: Object, |
| 101 | - default() { | |
| 102 | - return { size: 'small', border: true } | |
| 103 | - } | |
| 147 | + default() { return {} } | |
| 148 | + }, | |
| 149 | + // 表格事件 | |
| 150 | + tableEvents: { | |
| 151 | + type: Object, | |
| 152 | + default() { return {} } | |
| 104 | 153 | }, |
| 105 | 154 | // 表单参数 |
| 106 | 155 | formProps: { |
| 107 | 156 | type: Object, |
| 108 | - default() { | |
| 109 | - return { size: 'small', 'label-width': '90px' } | |
| 110 | - } | |
| 157 | + default() { return {} } | |
| 111 | 158 | }, |
| 112 | 159 | // 分页参数 |
| 113 | 160 | paginationProps: { |
| 114 | 161 | type: Object, |
| 115 | - default() { | |
| 116 | - return { 'page-sizes': [10, 20, 50], layout: 'total, sizes, prev, pager, next, jumper' } | |
| 117 | - } | |
| 162 | + default() { return {} } | |
| 118 | 163 | }, |
| 119 | 164 | // 弹出框参数 |
| 120 | 165 | dialogProps: { |
| 121 | 166 | type: Object, |
| 122 | - default() { | |
| 123 | - return { width: '65%' } | |
| 124 | - } | |
| 167 | + default() { return {} } | |
| 125 | 168 | } |
| 126 | 169 | }, |
| 127 | 170 | data() { |
| ... | ... | @@ -144,6 +187,10 @@ export default { |
| 144 | 187 | totalCount: 0, |
| 145 | 188 | // 弹出框状态 |
| 146 | 189 | dialogVisible: false, |
| 190 | + // 弹出框标题 | |
| 191 | + dialogTitle: '', | |
| 192 | + // 弹出框类型 | |
| 193 | + dialogType: '', | |
| 147 | 194 | // 表格数据 |
| 148 | 195 | tableData: [ |
| 149 | 196 | { name: '赵伯', code: 'U00001', type: 'admin', sort: 0, status: 'active' }, |
| ... | ... | @@ -162,7 +209,13 @@ export default { |
| 162 | 209 | { name: '钱仲', code: 'U00002', type: 'user', sort: 1, status: 'active' }, |
| 163 | 210 | { name: '孙叔', code: 'U00003', type: 'user', sort: 2, status: 'active' }, |
| 164 | 211 | { name: '李季', code: 'U00004', type: 'user', sort: 3, status: 'active' }, |
| 165 | - ] | |
| 212 | + ], | |
| 213 | + // 表格选中项 | |
| 214 | + tableSelection: [], | |
| 215 | + // 表格加载状态 | |
| 216 | + tableLoading: false, | |
| 217 | + // 表格当前操作列 | |
| 218 | + tableCurrentRow: null, | |
| 166 | 219 | }; |
| 167 | 220 | }, |
| 168 | 221 | created() { |
| ... | ... | @@ -179,52 +232,106 @@ export default { |
| 179 | 232 | this.totalCount = this.tableData.length; |
| 180 | 233 | }, |
| 181 | 234 | mounted() { |
| 182 | - console.log(this.$scopedSlots); | |
| 183 | - console.log(this.$slots); | |
| 184 | - console.log(this.formGroupSlotsKeys); | |
| 185 | - console.log(this.formGroupSlotsKeys); | |
| 235 | + this.$axios.get('http://47.110.137.80:7102/article/categoryCode') | |
| 236 | + .then((response) => { | |
| 237 | + // handle success | |
| 238 | + console.log(response); | |
| 239 | + }); | |
| 186 | 240 | }, |
| 187 | 241 | computed: { |
| 242 | + // 解析表单组件分组具名插槽名称 | |
| 188 | 243 | formGroupSlotsKeys() { |
| 189 | - const keys = [...Object.keys(this.$scopedSlots), ...Object.keys(this.$slots)]; | |
| 190 | - console.log(keys); | |
| 244 | + const keys = [...new Set([...Object.keys(this.$scopedSlots), ...Object.keys(this.$slots)])]; | |
| 191 | 245 | 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}`] | |
| 246 | + }, | |
| 247 | + // 判断设置全选插槽 | |
| 248 | + hasSelectionSlot() { | |
| 249 | + const slots = this.$slots || {}; | |
| 250 | + const defaultSlot = slots.default || []; | |
| 251 | + let result = false; | |
| 252 | + for (let slot of defaultSlot) { | |
| 253 | + if (slot.componentOptions && slot.componentOptions.tag === 'el-table-column' && slot.componentOptions.propsData && slot.componentOptions.propsData.type === 'selection') { | |
| 254 | + result = true; | |
| 255 | + break; | |
| 256 | + } | |
| 257 | + } | |
| 258 | + return result; | |
| 194 | 259 | } |
| 195 | 260 | }, |
| 196 | 261 | methods: { |
| 197 | 262 | // 查询数据 |
| 198 | - handleQuery(param) { | |
| 199 | - console.log({ | |
| 200 | - param, | |
| 201 | - searchModel: this.searchModel, | |
| 202 | - currentPage: this.currentPage, | |
| 203 | - pageSize: this.pageSize | |
| 263 | + handleSearch(param) { | |
| 264 | + this.tableLoading = true; | |
| 265 | + setTimeout(() => { | |
| 266 | + this.tableLoading = false; | |
| 267 | + console.log({ | |
| 268 | + param, | |
| 269 | + searchModel: this.searchModel, | |
| 270 | + currentPage: this.currentPage, | |
| 271 | + pageSize: this.pageSize | |
| 272 | + }); | |
| 273 | + }, 2000); | |
| 274 | + }, | |
| 275 | + // 查看按钮 | |
| 276 | + handleView({ row }) { | |
| 277 | + this.dialogTitle = '详情'; | |
| 278 | + this.dialogType = 'dialog-view'; | |
| 279 | + this.tableCurrentRow = row; | |
| 280 | + this.showDialog(); | |
| 281 | + }, | |
| 282 | + // 新增按钮 | |
| 283 | + handleNew({ row }) { | |
| 284 | + this.dialogTitle = '新增'; | |
| 285 | + this.dialogType = 'dialog-form'; | |
| 286 | + this.tableCurrentRow = row; | |
| 287 | + this.showDialog(); | |
| 288 | + }, | |
| 289 | + // 编辑按钮 | |
| 290 | + handleEdit({ row }) { | |
| 291 | + this.dialogTitle = '编辑'; | |
| 292 | + this.dialogType = 'dialog-form'; | |
| 293 | + this.tableCurrentRow = row; | |
| 294 | + this.showDialog(); | |
| 295 | + // 设置表单值 | |
| 296 | + this.$nextTick(() => { | |
| 297 | + Object.keys(row).forEach(key => { | |
| 298 | + this.formModel[key] = row[key]; | |
| 299 | + }); | |
| 300 | + this.formModel.test = 'test' | |
| 204 | 301 | }); |
| 205 | 302 | }, |
| 303 | + // 删除按钮 | |
| 304 | + handleDelete(type, scope) { | |
| 305 | + if (type === 'one') { | |
| 306 | + console.log(type, [scope.row]); | |
| 307 | + } else if (type === 'more') { | |
| 308 | + console.log(type, this.tableSelection); | |
| 309 | + } | |
| 310 | + }, | |
| 206 | 311 | // 改变每页总数大小 |
| 207 | 312 | handleSizeChange(val) { |
| 208 | 313 | this.currentPage = 1; |
| 209 | 314 | this.pageSize = val; |
| 210 | - this.handleQuery(); | |
| 315 | + this.handleSearch(); | |
| 211 | 316 | }, |
| 212 | 317 | // 改变当前页数 |
| 213 | 318 | handleCurrentChange(val) { |
| 214 | 319 | this.currentPage = val; |
| 215 | - this.handleQuery(); | |
| 320 | + this.handleSearch(); | |
| 216 | 321 | }, |
| 217 | 322 | // 表单提交 |
| 218 | 323 | handleSubmit(param) { |
| 219 | - console.log({ | |
| 220 | - param, | |
| 221 | - }); | |
| 324 | + console.log({ param }); | |
| 222 | 325 | }, |
| 223 | 326 | // 表单取消 |
| 224 | 327 | handleCancel() { |
| 225 | - this.formModel = {}; | |
| 226 | 328 | this.hideDialog(); |
| 227 | 329 | }, |
| 330 | + // 表格选择 | |
| 331 | + handleTableSelectionChange(selection) { | |
| 332 | + this.tableSelection = selection; | |
| 333 | + console.log(selection); | |
| 334 | + }, | |
| 228 | 335 | // 显示弹出框 |
| 229 | 336 | showDialog() { |
| 230 | 337 | this.dialogVisible = true; |
| ... | ... | @@ -232,6 +339,14 @@ export default { |
| 232 | 339 | // 隐藏弹出框 |
| 233 | 340 | hideDialog() { |
| 234 | 341 | this.dialogVisible = false; |
| 342 | + this.$nextTick(() => { | |
| 343 | + this.tableSelection = []; | |
| 344 | + this.tableLoading = false; | |
| 345 | + this.tableCurrentRow = null; | |
| 346 | + this.formModel = {}; | |
| 347 | + this.dialogTitle = ''; | |
| 348 | + this.dialogType = ''; | |
| 349 | + }); | |
| 235 | 350 | }, |
| 236 | 351 | } |
| 237 | 352 | }; | ... | ... |
packages/scheme/parser.js
| ... | ... | @@ -49,11 +49,11 @@ export function generateListSpace(fields = []) { |
| 49 | 49 | _list_space.forEach((name) => { |
| 50 | 50 | if (name === 'search') { |
| 51 | 51 | const filterField = objExclude(field, ['rules']); // 默认搜索表单去除校验规则 |
| 52 | - array[name].push({ ...filterField, ...(field.$search || {}) }); // 配置列表可通过$search单独为search域做配置 | |
| 52 | + array[name].push({ ...filterField, ...(field.searchScheme || {}) }); // 配置列表可通过$search单独为search域做配置 | |
| 53 | 53 | } else if (name === 'form') { |
| 54 | - array[name].push({ ...field, ...(field.$form || {}) }); // 配置列表可通过$form单独为form域做配置 | |
| 54 | + array[name].push({ ...field, ...(field.formScheme || {}) }); // 配置列表可通过$form单独为form域做配置 | |
| 55 | 55 | } else if (name === 'table') { |
| 56 | - array[name].push({ ...field, ...(field.$table || {}) }); // 配置列表可通过$table单独为table域做配置 | |
| 56 | + array[name].push({ ...field, ...(field.tableScheme || {}) }); // 配置列表可通过$table单独为table域做配置 | |
| 57 | 57 | } |
| 58 | 58 | }); |
| 59 | 59 | }); | ... | ... |
packages/table/index.vue
| ... | ... | @@ -14,7 +14,7 @@ |
| 14 | 14 | </template> |
| 15 | 15 | </template> |
| 16 | 16 | <slot name="$append"></slot> |
| 17 | - <slot name="$operation"></slot> | |
| 17 | + <slot name="$end"></slot> | |
| 18 | 18 | </el-table> |
| 19 | 19 | </template> |
| 20 | 20 | |
| ... | ... | @@ -52,7 +52,7 @@ export default { |
| 52 | 52 | }, |
| 53 | 53 | computed: { |
| 54 | 54 | // 表格实体 |
| 55 | - tableInstance: { | |
| 55 | + instance: { | |
| 56 | 56 | get() { |
| 57 | 57 | return this.$refs.table; |
| 58 | 58 | } | ... | ... |
yarn.lock
| ... | ... | @@ -1437,6 +1437,14 @@ aws4@^1.8.0: |
| 1437 | 1437 | resolved "https://registry.npm.taobao.org/aws4/download/aws4-1.8.0.tgz#f0e003d9ca9e7f59c7a508945d7b2ef9a04a542f" |
| 1438 | 1438 | integrity sha1-8OAD2cqef1nHpQiUXXsu+aBKVC8= |
| 1439 | 1439 | |
| 1440 | +axios@^0.19.0: | |
| 1441 | + version "0.19.0" | |
| 1442 | + resolved "https://registry.npm.taobao.org/axios/download/axios-0.19.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Faxios%2Fdownload%2Faxios-0.19.0.tgz#8e09bff3d9122e133f7b8101c8fbdd00ed3d2ab8" | |
| 1443 | + integrity sha1-jgm/89kSLhM/e4EByPvdAO09Krg= | |
| 1444 | + dependencies: | |
| 1445 | + follow-redirects "1.5.10" | |
| 1446 | + is-buffer "^2.0.2" | |
| 1447 | + | |
| 1440 | 1448 | babel-code-frame@^6.26.0: |
| 1441 | 1449 | version "6.26.0" |
| 1442 | 1450 | resolved "https://registry.npm.taobao.org/babel-code-frame/download/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b" |
| ... | ... | @@ -2556,6 +2564,13 @@ debug@2.6.9, debug@^2.2.0, debug@^2.3.3: |
| 2556 | 2564 | dependencies: |
| 2557 | 2565 | ms "2.0.0" |
| 2558 | 2566 | |
| 2567 | +debug@=3.1.0: | |
| 2568 | + version "3.1.0" | |
| 2569 | + resolved "https://registry.npm.taobao.org/debug/download/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261" | |
| 2570 | + integrity sha1-W7WgZyYotkFJVmuhaBnmFRjGcmE= | |
| 2571 | + dependencies: | |
| 2572 | + ms "2.0.0" | |
| 2573 | + | |
| 2559 | 2574 | debug@^3.2.5, debug@^3.2.6: |
| 2560 | 2575 | version "3.2.6" |
| 2561 | 2576 | resolved "https://registry.npm.taobao.org/debug/download/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b" |
| ... | ... | @@ -3302,6 +3317,13 @@ flush-write-stream@^1.0.0: |
| 3302 | 3317 | inherits "^2.0.3" |
| 3303 | 3318 | readable-stream "^2.3.6" |
| 3304 | 3319 | |
| 3320 | +follow-redirects@1.5.10: | |
| 3321 | + version "1.5.10" | |
| 3322 | + resolved "https://registry.npm.taobao.org/follow-redirects/download/follow-redirects-1.5.10.tgz#7b7a9f9aea2fdff36786a94ff643ed07f4ff5e2a" | |
| 3323 | + integrity sha1-e3qfmuov3/NnhqlP9kPtB/T/Xio= | |
| 3324 | + dependencies: | |
| 3325 | + debug "=3.1.0" | |
| 3326 | + | |
| 3305 | 3327 | follow-redirects@^1.0.0: |
| 3306 | 3328 | version "1.7.0" |
| 3307 | 3329 | resolved "https://registry.npm.taobao.org/follow-redirects/download/follow-redirects-1.7.0.tgz#489ebc198dc0e7f64167bd23b03c4c19b5784c76" |
| ... | ... | @@ -4033,6 +4055,11 @@ is-buffer@^1.1.5: |
| 4033 | 4055 | resolved "https://registry.npm.taobao.org/is-buffer/download/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be" |
| 4034 | 4056 | integrity sha1-76ouqdqg16suoTqXsritUf776L4= |
| 4035 | 4057 | |
| 4058 | +is-buffer@^2.0.2: | |
| 4059 | + version "2.0.3" | |
| 4060 | + resolved "https://registry.npm.taobao.org/is-buffer/download/is-buffer-2.0.3.tgz#4ecf3fcf749cbd1e472689e109ac66261a25e725" | |
| 4061 | + integrity sha1-Ts8/z3ScvR5HJonhCaxmJhol5yU= | |
| 4062 | + | |
| 4036 | 4063 | is-callable@^1.1.4: |
| 4037 | 4064 | version "1.1.4" |
| 4038 | 4065 | resolved "https://registry.npm.taobao.org/is-callable/download/is-callable-1.1.4.tgz#1e1adf219e1eeb684d691f9d6a05ff0d30a24d75" | ... | ... |