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,6 +2,7 @@ import Vue from 'vue'; | ||
| 2 | import App from '@/App.vue'; | 2 | import App from '@/App.vue'; |
| 3 | import router from '@/router'; | 3 | import router from '@/router'; |
| 4 | import store from '@/store'; | 4 | import store from '@/store'; |
| 5 | +import axios from 'axios'; | ||
| 5 | 6 | ||
| 6 | import ElementUI from 'element-ui'; | 7 | import ElementUI from 'element-ui'; |
| 7 | import EagleWebToolkit from '../packages'; | 8 | import EagleWebToolkit from '../packages'; |
| @@ -12,6 +13,8 @@ import '@/styles/theme/index.css'; | @@ -12,6 +13,8 @@ import '@/styles/theme/index.css'; | ||
| 12 | import '@/styles/nprogress.scss'; | 13 | import '@/styles/nprogress.scss'; |
| 13 | import "highlight.js/styles/color-brewer.css"; | 14 | import "highlight.js/styles/color-brewer.css"; |
| 14 | 15 | ||
| 16 | +Vue.prototype.$axios = axios; | ||
| 17 | + | ||
| 15 | // 进度条配置 | 18 | // 进度条配置 |
| 16 | NProgress.configure({ showSpinner: false }); | 19 | NProgress.configure({ showSpinner: false }); |
| 17 | 20 |
examples/views/docs/scheme.md
| @@ -11,18 +11,23 @@ Scheme是一个数æ®é©±åŠ¨çš„解决方案，通过既定的业务é…ç½®å‚æ•°ï¼ | @@ -11,18 +11,23 @@ Scheme是一个数æ®é©±åŠ¨çš„解决方案，通过既定的业务é…ç½®å‚æ•°ï¼ | ||
| 11 | ```html | 11 | ```html |
| 12 | <template> | 12 | <template> |
| 13 | <eagle-scheme :list="schemeList"> | 13 | <eagle-scheme :list="schemeList"> |
| 14 | + <el-table-column type="selection" width="50" align="center"></el-table-column> | ||
| 14 | <template #search-status="{ model }"> | 15 | <template #search-status="{ model }"> |
| 15 | <eagle-select v-model="model.status" :dataSource="dataSource"></eagle-select> | 16 | <eagle-select v-model="model.status" :dataSource="dataSource"></eagle-select> |
| 16 | </template> | 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 | <el-button size="mini" type="primary">这是一个按钮</el-button> | 21 | <el-button size="mini" type="primary">这是一个按钮</el-button> |
| 21 | </div> | 22 | </div> |
| 22 | </template> | 23 | </template> |
| 23 | <template #form-item-status="{ model }"> | 24 | <template #form-item-status="{ model }"> |
| 24 | <el-input-number v-model="model.status"></el-input-number> | 25 | <el-input-number v-model="model.status"></el-input-number> |
| 25 | </template> | 26 | </template> |
| 27 | + <template #dialog-view="{ row }"> | ||
| 28 | + <div>这是一个自定义弹出框内容</div> | ||
| 29 | + <div>{{ row }}</div> | ||
| 30 | + </template> | ||
| 26 | <!-- 自定义按钮组 --> | 31 | <!-- 自定义按钮组 --> |
| 27 | <!-- <el-table-column slot="table-operation" prop="$operation" label="æ“作" min-width="140"> | 32 | <!-- <el-table-column slot="table-operation" prop="$operation" label="æ“作" min-width="140"> |
| 28 | <el-tag>自定义按钮组</el-tag> | 33 | <el-tag>自定义按钮组</el-tag> |
| @@ -47,15 +52,15 @@ export default { | @@ -47,15 +52,15 @@ export default { | ||
| 47 | schemeList: [ | 52 | schemeList: [ |
| 48 | { type: 'el-input', key: 'name', label: 'å称', rules: [{ required: true, message: '请输入å称' }] }, | 53 | { type: 'el-input', key: 'name', label: 'å称', rules: [{ required: true, message: '请输入å称' }] }, |
| 49 | { type: 'el-input', key: 'code', label: 'ç¼–ç ', rules: [{ required: true, message: '请输入编ç ' }], | 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 | { type: 'el-input', key: 'type', label: '类型', group: { label: '设置', key: 'setting' }, tip: '类型éšä¾¿å¡«' }, | 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 | dataSource: [ | 60 | dataSource: [ |
| 56 | { label: '选项A', value: 'A' }, | 61 | { label: '选项A', value: 'A' }, |
| 57 | { label: '选项B', value: 'B' }, | 62 | { label: '选项B', value: 'B' }, |
| 58 | - ] | 63 | + ], |
| 59 | } | 64 | } |
| 60 | }, | 65 | }, |
| 61 | } | 66 | } |
examples/views/docs/table.md
| @@ -39,7 +39,7 @@ export default { | @@ -39,7 +39,7 @@ export default { | ||
| 39 | } | 39 | } |
| 40 | }, | 40 | }, |
| 41 | mounted() { | 41 | mounted() { |
| 42 | - console.log(this.$refs.table.tableInstance); | 42 | + console.log(this.$refs.table.instance); |
| 43 | }, | 43 | }, |
| 44 | methods: { | 44 | methods: { |
| 45 | handleSubmit(value) { | 45 | handleSubmit(value) { |
package.json
| @@ -9,6 +9,7 @@ | @@ -9,6 +9,7 @@ | ||
| 9 | "lib": "vue-cli-service build --target lib --name eagle-web-toolkit --dest lib packages/index.js" | 9 | "lib": "vue-cli-service build --target lib --name eagle-web-toolkit --dest lib packages/index.js" |
| 10 | }, | 10 | }, |
| 11 | "dependencies": { | 11 | "dependencies": { |
| 12 | + "axios": "^0.19.0", | ||
| 12 | "core-js": "^2.6.5", | 13 | "core-js": "^2.6.5", |
| 13 | "element-ui": "^2.10.0", | 14 | "element-ui": "^2.10.0", |
| 14 | "nprogress": "^0.2.0", | 15 | "nprogress": "^0.2.0", |
packages/form/index.vue
| @@ -21,11 +21,13 @@ | @@ -21,11 +21,13 @@ | ||
| 21 | <el-row :gutter="15"> | 21 | <el-row :gutter="15"> |
| 22 | <template v-for="(data, index) in listOption.dataList"> | 22 | <template v-for="(data, index) in listOption.dataList"> |
| 23 | <template v-if="listOption.isGroup"> | 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 | </template> | 31 | </template> |
| 30 | <el-row :class="{ 'eagle-form__group-content': listOption.isGroup }" :key="'group-content-' + index" :gutter="15"> | 32 | <el-row :class="{ 'eagle-form__group-content': listOption.isGroup }" :key="'group-content-' + index" :gutter="15"> |
| 31 | <template v-for="(item, index) in data.list"> | 33 | <template v-for="(item, index) in data.list"> |
| @@ -42,7 +44,7 @@ | @@ -42,7 +44,7 @@ | ||
| 42 | </template> | 44 | </template> |
| 43 | </el-row> | 45 | </el-row> |
| 44 | <slot v-if="$scopedSlots['footer'] || $slots['footer']" name="footer" :model="model" :submit="handleSubmit" :cancel="handleCancel"></slot> | 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 | <el-button type="primary" size="small" :loading="submitting" @click="handleSubmit">确定</el-button> | 48 | <el-button type="primary" size="small" :loading="submitting" @click="handleSubmit">确定</el-button> |
| 47 | <el-button plain size="small" @click="handleCancel" style="margin-left: 8px">取消</el-button> | 49 | <el-button plain size="small" @click="handleCancel" style="margin-left: 8px">取消</el-button> |
| 48 | </el-row> | 50 | </el-row> |
| @@ -85,7 +87,7 @@ export default { | @@ -85,7 +87,7 @@ export default { | ||
| 85 | // 底部样式 | 87 | // 底部样式 |
| 86 | footerStyle: { | 88 | footerStyle: { |
| 87 | type: [String, Object], | 89 | type: [String, Object], |
| 88 | - default: 'center' | 90 | + default: 'text-align: center' |
| 89 | }, | 91 | }, |
| 90 | // 表单项占位 | 92 | // 表单项占位 |
| 91 | span: { | 93 | span: { |
| @@ -137,6 +139,7 @@ export default { | @@ -137,6 +139,7 @@ export default { | ||
| 137 | groupSet[`group-${data.group.key}`] = { | 139 | groupSet[`group-${data.group.key}`] = { |
| 138 | icon: data.group.icon, | 140 | icon: data.group.icon, |
| 139 | label: data.group.label, | 141 | label: data.group.label, |
| 142 | + tip: data.group.tip, | ||
| 140 | list: [] | 143 | list: [] |
| 141 | }; | 144 | }; |
| 142 | } | 145 | } |
packages/scheme/index.vue
| @@ -15,8 +15,20 @@ | @@ -15,8 +15,20 @@ | ||
| 15 | padding-bottom: 10px; | 15 | padding-bottom: 10px; |
| 16 | } | 16 | } |
| 17 | .eagle-scheme__action { | 17 | .eagle-scheme__action { |
| 18 | + display: flex; | ||
| 19 | + align-items: center; | ||
| 18 | padding-bottom: 10px; | 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 | .eagle-scheme__table .eagle-scheme__table-operation { | 32 | .eagle-scheme__table .eagle-scheme__table-operation { |
| 21 | display: flex; | 33 | display: flex; |
| 22 | align-items: center; | 34 | align-items: center; |
| @@ -29,54 +41,83 @@ | @@ -29,54 +41,83 @@ | ||
| 29 | text-align: right; | 41 | text-align: right; |
| 30 | padding-top: 10px; | 42 | padding-top: 10px; |
| 31 | } | 43 | } |
| 44 | +.eagle-scheme__dialog .el-dialog__body { | ||
| 45 | + padding: 30px 40px; | ||
| 46 | +} | ||
| 32 | </style> | 47 | </style> |
| 33 | 48 | ||
| 34 | <template> | 49 | <template> |
| 35 | <div class="eagle-scheme"> | 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 | <template v-for="item in _searchList"> | 55 | <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> | 56 | <slot v-if="$scopedSlots[`search-${item.key}`] || $slots[`search-${item.key}`]" :name="`search-${item.key}`" :slot="item.key" :model="searchModel"></slot> |
| 40 | </template> | 57 | </template> |
| 41 | </eagle-search> | 58 | </eagle-search> |
| 42 | </div> | 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 | </div> | 65 | </div> |
| 46 | <div class="eagle-scheme__table"> | 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 | <template v-if="$scopedSlots['table-append'] || $slots['table-append']"> | 79 | <template v-if="$scopedSlots['table-append'] || $slots['table-append']"> |
| 49 | <slot name="table-append" slot="$append"></slot> | 80 | <slot name="table-append" slot="$append"></slot> |
| 50 | </template> | 81 | </template> |
| 82 | + <!-- 表格操作栏插槽 - 自定义 --> | ||
| 51 | <template v-if="$scopedSlots['table-operation'] || $slots['table-operation']"> | 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 | </template> | 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 | <slot v-if="$scopedSlots['table-operation-btn'] || $slots['table-operation-btn']" name="table-operation-btn"></slot> | 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 | <el-button type="text" icon="el-icon-delete" title="删除"></el-button> | 94 | <el-button type="text" icon="el-icon-delete" title="删除"></el-button> |
| 61 | </eagle-confirm> | 95 | </eagle-confirm> |
| 96 | + <!-- 表格操作栏插槽 - 后置插槽 --> | ||
| 62 | <slot v-if="$scopedSlots['table-operation-btn-append'] || $slots['table-operation-btn-append']" name="table-operation-btn-append"></slot> | 97 | <slot v-if="$scopedSlots['table-operation-btn-append'] || $slots['table-operation-btn-append']" name="table-operation-btn-append"></slot> |
| 63 | </div> | 98 | </div> |
| 64 | </el-table-column> | 99 | </el-table-column> |
| 65 | </eagle-table> | 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 | </div> | 105 | </div> |
| 70 | </div> | 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 | <template v-for="key in formGroupSlotsKeys"> | 110 | <template v-for="key in formGroupSlotsKeys"> |
| 74 | <slot v-if="$scopedSlots[`form-${key}`] || $slots[`form-${key}`]" :name="`form-${key}`" :slot="key" :model="formModel"></slot> | 111 | <slot v-if="$scopedSlots[`form-${key}`] || $slots[`form-${key}`]" :name="`form-${key}`" :slot="key" :model="formModel"></slot> |
| 75 | </template> | 112 | </template> |
| 113 | + <!-- 表单项具名插槽 --> | ||
| 76 | <template v-for="item in _formList"> | 114 | <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> | 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 | </template> | 116 | </template> |
| 79 | </eagle-form> | 117 | </eagle-form> |
| 118 | + <template v-else> | ||
| 119 | + <slot :name="dialogType" :row="tableCurrentRow"></slot> | ||
| 120 | + </template> | ||
| 80 | </el-dialog> | 121 | </el-dialog> |
| 81 | </div> | 122 | </div> |
| 82 | </template> | 123 | </template> |
| @@ -89,6 +130,11 @@ export default { | @@ -89,6 +130,11 @@ export default { | ||
| 89 | props: { | 130 | props: { |
| 90 | // 配置列表 | 131 | // 配置列表 |
| 91 | list: Array, | 132 | list: Array, |
| 133 | + // 配置选项 | ||
| 134 | + option: { | ||
| 135 | + type: Object, | ||
| 136 | + default() { return {} } | ||
| 137 | + }, | ||
| 92 | // 搜索表单配置 | 138 | // 搜索表单配置 |
| 93 | searchList: Array, | 139 | searchList: Array, |
| 94 | // 表单配置 | 140 | // 表单配置 |
| @@ -98,30 +144,27 @@ export default { | @@ -98,30 +144,27 @@ export default { | ||
| 98 | // 表格参数 | 144 | // 表格参数 |
| 99 | tableProps: { | 145 | tableProps: { |
| 100 | type: Object, | 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 | formProps: { | 155 | formProps: { |
| 107 | type: Object, | 156 | type: Object, |
| 108 | - default() { | ||
| 109 | - return { size: 'small', 'label-width': '90px' } | ||
| 110 | - } | 157 | + default() { return {} } |
| 111 | }, | 158 | }, |
| 112 | // 分页参数 | 159 | // 分页参数 |
| 113 | paginationProps: { | 160 | paginationProps: { |
| 114 | type: Object, | 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 | dialogProps: { | 165 | dialogProps: { |
| 121 | type: Object, | 166 | type: Object, |
| 122 | - default() { | ||
| 123 | - return { width: '65%' } | ||
| 124 | - } | 167 | + default() { return {} } |
| 125 | } | 168 | } |
| 126 | }, | 169 | }, |
| 127 | data() { | 170 | data() { |
| @@ -144,6 +187,10 @@ export default { | @@ -144,6 +187,10 @@ export default { | ||
| 144 | totalCount: 0, | 187 | totalCount: 0, |
| 145 | // 弹出框状态 | 188 | // 弹出框状态 |
| 146 | dialogVisible: false, | 189 | dialogVisible: false, |
| 190 | + // 弹出框标题 | ||
| 191 | + dialogTitle: '', | ||
| 192 | + // 弹出框类型 | ||
| 193 | + dialogType: '', | ||
| 147 | // 表格数据 | 194 | // 表格数据 |
| 148 | tableData: [ | 195 | tableData: [ |
| 149 | { name: '赵伯', code: 'U00001', type: 'admin', sort: 0, status: 'active' }, | 196 | { name: '赵伯', code: 'U00001', type: 'admin', sort: 0, status: 'active' }, |
| @@ -162,7 +209,13 @@ export default { | @@ -162,7 +209,13 @@ export default { | ||
| 162 | { name: '钱仲', code: 'U00002', type: 'user', sort: 1, status: 'active' }, | 209 | { name: '钱仲', code: 'U00002', type: 'user', sort: 1, status: 'active' }, |
| 163 | { name: '孙叔', code: 'U00003', type: 'user', sort: 2, status: 'active' }, | 210 | { name: '孙叔', code: 'U00003', type: 'user', sort: 2, status: 'active' }, |
| 164 | { name: '李季', code: 'U00004', type: 'user', sort: 3, status: 'active' }, | 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 | created() { | 221 | created() { |
| @@ -179,52 +232,106 @@ export default { | @@ -179,52 +232,106 @@ export default { | ||
| 179 | this.totalCount = this.tableData.length; | 232 | this.totalCount = this.tableData.length; |
| 180 | }, | 233 | }, |
| 181 | mounted() { | 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 | computed: { | 241 | computed: { |
| 242 | + // 解析表单组件分组具名插槽名称 | ||
| 188 | formGroupSlotsKeys() { | 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 | return keys.filter(key => key.indexOf('form-group') > -1).map(key => key.substr(5)); | 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 | methods: { | 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 | handleSizeChange(val) { | 312 | handleSizeChange(val) { |
| 208 | this.currentPage = 1; | 313 | this.currentPage = 1; |
| 209 | this.pageSize = val; | 314 | this.pageSize = val; |
| 210 | - this.handleQuery(); | 315 | + this.handleSearch(); |
| 211 | }, | 316 | }, |
| 212 | // 改变当前页数 | 317 | // 改变当前页数 |
| 213 | handleCurrentChange(val) { | 318 | handleCurrentChange(val) { |
| 214 | this.currentPage = val; | 319 | this.currentPage = val; |
| 215 | - this.handleQuery(); | 320 | + this.handleSearch(); |
| 216 | }, | 321 | }, |
| 217 | // 表单提交 | 322 | // 表单提交 |
| 218 | handleSubmit(param) { | 323 | handleSubmit(param) { |
| 219 | - console.log({ | ||
| 220 | - param, | ||
| 221 | - }); | 324 | + console.log({ param }); |
| 222 | }, | 325 | }, |
| 223 | // 表单取消 | 326 | // 表单取消 |
| 224 | handleCancel() { | 327 | handleCancel() { |
| 225 | - this.formModel = {}; | ||
| 226 | this.hideDialog(); | 328 | this.hideDialog(); |
| 227 | }, | 329 | }, |
| 330 | + // 表格选择 | ||
| 331 | + handleTableSelectionChange(selection) { | ||
| 332 | + this.tableSelection = selection; | ||
| 333 | + console.log(selection); | ||
| 334 | + }, | ||
| 228 | // 显示弹出框 | 335 | // 显示弹出框 |
| 229 | showDialog() { | 336 | showDialog() { |
| 230 | this.dialogVisible = true; | 337 | this.dialogVisible = true; |
| @@ -232,6 +339,14 @@ export default { | @@ -232,6 +339,14 @@ export default { | ||
| 232 | // 隐藏弹出框 | 339 | // 隐藏弹出框 |
| 233 | hideDialog() { | 340 | hideDialog() { |
| 234 | this.dialogVisible = false; | 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,11 +49,11 @@ export function generateListSpace(fields = []) { | ||
| 49 | _list_space.forEach((name) => { | 49 | _list_space.forEach((name) => { |
| 50 | if (name === 'search') { | 50 | if (name === 'search') { |
| 51 | const filterField = objExclude(field, ['rules']); // 默认搜索表单去除校验规则 | 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 | } else if (name === 'form') { | 53 | } else if (name === 'form') { |
| 54 | - array[name].push({ ...field, ...(field.$form || {}) }); // 配置列表可通过$form单独为form域做配置 | 54 | + array[name].push({ ...field, ...(field.formScheme || {}) }); // 配置列表可通过$form单独为form域做配置 |
| 55 | } else if (name === 'table') { | 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,7 +14,7 @@ | ||
| 14 | </template> | 14 | </template> |
| 15 | </template> | 15 | </template> |
| 16 | <slot name="$append"></slot> | 16 | <slot name="$append"></slot> |
| 17 | - <slot name="$operation"></slot> | 17 | + <slot name="$end"></slot> |
| 18 | </el-table> | 18 | </el-table> |
| 19 | </template> | 19 | </template> |
| 20 | 20 | ||
| @@ -52,7 +52,7 @@ export default { | @@ -52,7 +52,7 @@ export default { | ||
| 52 | }, | 52 | }, |
| 53 | computed: { | 53 | computed: { |
| 54 | // 表格实体 | 54 | // 表格实体 |
| 55 | - tableInstance: { | 55 | + instance: { |
| 56 | get() { | 56 | get() { |
| 57 | return this.$refs.table; | 57 | return this.$refs.table; |
| 58 | } | 58 | } |
yarn.lock
| @@ -1437,6 +1437,14 @@ aws4@^1.8.0: | @@ -1437,6 +1437,14 @@ aws4@^1.8.0: | ||
| 1437 | resolved "https://registry.npm.taobao.org/aws4/download/aws4-1.8.0.tgz#f0e003d9ca9e7f59c7a508945d7b2ef9a04a542f" | 1437 | resolved "https://registry.npm.taobao.org/aws4/download/aws4-1.8.0.tgz#f0e003d9ca9e7f59c7a508945d7b2ef9a04a542f" |
| 1438 | integrity sha1-8OAD2cqef1nHpQiUXXsu+aBKVC8= | 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 | babel-code-frame@^6.26.0: | 1448 | babel-code-frame@^6.26.0: |
| 1441 | version "6.26.0" | 1449 | version "6.26.0" |
| 1442 | resolved "https://registry.npm.taobao.org/babel-code-frame/download/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b" | 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,6 +2564,13 @@ debug@2.6.9, debug@^2.2.0, debug@^2.3.3: | ||
| 2556 | dependencies: | 2564 | dependencies: |
| 2557 | ms "2.0.0" | 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 | debug@^3.2.5, debug@^3.2.6: | 2574 | debug@^3.2.5, debug@^3.2.6: |
| 2560 | version "3.2.6" | 2575 | version "3.2.6" |
| 2561 | resolved "https://registry.npm.taobao.org/debug/download/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b" | 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,6 +3317,13 @@ flush-write-stream@^1.0.0: | ||
| 3302 | inherits "^2.0.3" | 3317 | inherits "^2.0.3" |
| 3303 | readable-stream "^2.3.6" | 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 | follow-redirects@^1.0.0: | 3327 | follow-redirects@^1.0.0: |
| 3306 | version "1.7.0" | 3328 | version "1.7.0" |
| 3307 | resolved "https://registry.npm.taobao.org/follow-redirects/download/follow-redirects-1.7.0.tgz#489ebc198dc0e7f64167bd23b03c4c19b5784c76" | 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,6 +4055,11 @@ is-buffer@^1.1.5: | ||
| 4033 | resolved "https://registry.npm.taobao.org/is-buffer/download/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be" | 4055 | resolved "https://registry.npm.taobao.org/is-buffer/download/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be" |
| 4034 | integrity sha1-76ouqdqg16suoTqXsritUf776L4= | 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 | is-callable@^1.1.4: | 4063 | is-callable@^1.1.4: |
| 4037 | version "1.1.4" | 4064 | version "1.1.4" |
| 4038 | resolved "https://registry.npm.taobao.org/is-callable/download/is-callable-1.1.4.tgz#1e1adf219e1eeb684d691f9d6a05ff0d30a24d75" | 4065 | resolved "https://registry.npm.taobao.org/is-callable/download/is-callable-1.1.4.tgz#1e1adf219e1eeb684d691f9d6a05ff0d30a24d75" |