framework / eagle-web-toolkit

Download as
Browse Code »

Commit 6800221bad295db8ff2af476bb529dbd324de854

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

Scheme兼容组件库名称

Showing 2 changed files with 26 additions and 18 deletions   Show diff stats
packages/index.js
  Diff comments   View file @6800221
... ... @@ -42,18 +42,21 @@ const components = {
42 42 const install = function (Vue, opts = {}) {
43 43 Object.values(components).forEach(component => {
44 44 // 组件前缀
45   - const prefix = opts.name || 'eagle'
  45 + const prefix = opts.name || 'eagle';
46 46 // 配置组件名称
47 47 const name = prefix + component.name
48 48 component.name = name
49 49 const defaultI18n = () => undefined;
50   - // if (opts.i18n) {
51   - if (component.methods) {
52   - component.methods.i18n = opts.i18n || defaultI18n;
53   - } else {
54   - component.methods = { i18n: opts.i18n || defaultI18n }
55   - }
56   - // }
  50 + if (component.computed) {
  51 + component.computed.prefix = () => { return prefix };
  52 + } else {
  53 + component.computed = { prefix: () => { return prefix } }
  54 + }
  55 + if (component.methods) {
  56 + component.methods.i18n = opts.i18n || defaultI18n;
  57 + } else {
  58 + component.methods = { i18n: opts.i18n || defaultI18n }
  59 + }
57 60 // 给每个子组件配置install方法
58 61 component.install = function (Vue) {
59 62 Vue.component(name, component)
... ...
packages/scheme/index.vue
  Diff comments   View file @6800221
... ... @@ -57,12 +57,12 @@
57 57 <div class="eagle-scheme">
58 58 <div v-if="option.showSearch !== false" class="eagle-scheme__card">
59 59 <!-- 搜索表单 -->
60   - <eagle-search :list="_searchList" v-model="searchModel" :span="searchProps.span || 6" :formProps="searchProps" @search="handleSearch" :searching="tableLoading">
  60 + <component :is="_searchComponent" :list="_searchList" v-model="searchModel" :span="searchProps.span || 6" :formProps="searchProps" @search="handleSearch" :searching="tableLoading">
61 61 <!-- 搜索表单项具名插槽 -->
62 62 <template v-for="item in _searchList">
63 63 <slot v-if="$scopedSlots[`search-${item.key}`] || $slots[`search-${item.key}`]" :name="`search-${item.key}`" :slot="item.key" :model="searchModel"></slot>
64 64 </template>
65   - </eagle-search>
  65 + </component>
66 66 </div>
67 67 <!-- 操作按钮栏 -->
68 68 <div v-if="option.showActionBar !== false" class="eagle-scheme__action" v-loading="tableLoading" element-loading-spinner="none" element-loading-background="rgba(255, 255, 255, 0.6)">
... ... @@ -83,7 +83,7 @@
83 83 }"
84 84 ></slot>
85 85 <!-- 表格 -->
86   - <eagle-table v-else ref="eagle-table" :list="_tableList" :value="tableData"
  86 + <component v-else :is="_tableComponent" ref="eagle-table" :list="_tableList" :value="tableData"
87 87 v-loading="tableLoading"
88 88 element-loading-background="rgba(255, 255, 255, 0.6)"
89 89 :tableProps="{ border: true, 'row-key': 'id', ...tableProps }"
... ... @@ -113,14 +113,14 @@
113 113 <el-button v-if="option.showViewBtn !== false" class="eagle-scheme__table-btn" type="text" icon="el-icon-view" :title="i18n('eagle.scheme.detail') || '详情'" @click="handleView(slotScope)"></el-button>
114 114 <slot v-if="$scopedSlots['table-operation-btn-edit'] || $slots['table-operation-btn-edit']" name="table-operation-btn-edit" :slotScope="slotScope" v-bind="slotMethod"></slot>
115 115 <el-button v-else-if="option.showEditBtn !== false" class="eagle-scheme__table-btn" type="text" icon="el-icon-edit" :title="i18n('eagle.scheme.edit') || '编辑'" @click="handleEdit(slotScope)"></el-button>
116   - <eagle-confirm v-if="option.showDeleteBtn !== false" class="eagle-scheme__table-btn" :title="i18n('eagle.scheme.deleteConfirm') || '是否删除？'" @confirm="handleDelete('one', slotScope)">
  116 + <component v-if="option.showDeleteBtn !== false" :is="_confirmComponent" class="eagle-scheme__table-btn" :title="i18n('eagle.scheme.deleteConfirm') || '是否删除？'" @confirm="handleDelete('one', slotScope)">
117 117 <el-button type="text" icon="el-icon-delete" :title="i18n('eagle.scheme.delete') || '删除'"></el-button>
118   - </eagle-confirm>
  118 + </component>
119 119 <!-- 表格操作栏插槽 - 后置插槽 -->
120 120 <slot v-if="$scopedSlots['table-operation-btn-append'] || $slots['table-operation-btn-append']" name="table-operation-btn-append" :slotScope="slotScope" v-bind="slotMethod"></slot>
121 121 </div>
122 122 </el-table-column>
123   - </eagle-table>
  123 + </component>
124 124 <!-- 分页器 -->
125 125 <div v-if="option.showPagination !== false" class="eagle-scheme__pagination" :style="{ 'text-align': paginationProps.textAlign || 'right' }">
126 126 <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)"
... ... @@ -128,7 +128,7 @@
128 128 </div>
129 129 </div>
130 130 <el-dialog v-loading="dialogLoading" element-loading-background="rgba(255, 255, 255, 0.3)" :custom-class="dialogProps['custom-class'] || 'eagle-scheme__dialog'" :title="dialogProps.title || dialogTitle" :visible.sync="dialogVisible" v-bind="{ width: '65%', ...dialogProps }">
131   - <eagle-form v-if="dialogType === 'dialog-form' && !$scopedSlots['dialog-form'] && !$slots['dialog-form']" ref="eagle-form" :list="_formList" v-model="formModel" :params="{ formMode }" :span="formProps.span || 12" :formProps="formProps" @submit="handleSubmit" @cancel="handleCancel">
  131 + <component :is="_formComponent" v-if="dialogType === 'dialog-form' && !$scopedSlots['dialog-form'] && !$slots['dialog-form']" ref="eagle-form" :list="_formList" v-model="formModel" :params="{ formMode }" :span="formProps.span || 12" :formProps="formProps" @submit="handleSubmit" @cancel="handleCancel">
132 132 <!-- 表单分组具名插槽 -->
133 133 <template v-for="key in formGroupSlotsKeys">
134 134 <slot v-if="$scopedSlots[`form-${key}`] || $slots[`form-${key}`]" :name="`form-${key}`" :slot="key" :model="formModel"></slot>
... ... @@ -138,8 +138,8 @@
138 138 <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>
139 139 <slot v-if="$scopedSlots[`form-label-${item.key}`] || $slots[`form-label-${item.key}`]" :name="`form-label-${item.key}`" :slot="`label-${item.key}`" :model="formModel" v-bind="item"></slot>
140 140 </template>
141   - </eagle-form>
142   - <eagle-detail v-else-if="dialogType === 'dialog-view' && !$scopedSlots['dialog-view'] && !$slots['dialog-view']" v-model="formModel" :list="list || detailList || _formList" :span="detailProps.span || 8" :formProps="detailProps">
  141 + </component>
  142 + <component :is="_detailComponent" v-else-if="dialogType === 'dialog-view' && !$scopedSlots['dialog-view'] && !$slots['dialog-view']" v-model="formModel" :list="list || detailList || _formList" :span="detailProps.span || 8" :formProps="detailProps">
143 143 <!-- 表单分组具名插槽 -->
144 144 <template v-for="key in formGroupSlotsKeys">
145 145 <slot v-if="$scopedSlots[`view-${key}`] || $slots[`view-${key}`]" :name="`view-${key}`" :slot="key" :model="formModel"></slot>
... ... @@ -148,7 +148,7 @@
148 148 <template v-for="item in _formList">
149 149 <slot v-if="$scopedSlots[`view-item-${item.key}`] || $slots[`view-item-${item.key}`]" :name="`view-item-${item.key}`" :slot="`item-${item.key}`" :model="formModel"></slot>
150 150 </template>
151   - </eagle-detail>
  151 + </component>
152 152 <!-- 自定义弹出框内容插槽 -->
153 153 <slot v-else :name="dialogType" :row="tableCurrentRow" :hideDialog="hideDialog"></slot>
154 154 </el-dialog>
... ... @@ -277,6 +277,11 @@ export default {
277 277 }
278 278 },
279 279 computed: {
  280 + _searchComponent() { return `${this.prefix}-search` },
  281 + _tableComponent() { return `${this.prefix}-table` },
  282 + _formComponent() { return `${this.prefix}-form` },
  283 + _detailComponent() { return `${this.prefix}-detail` },
  284 + _confirmComponent() { return `${this.prefix}-confirm` },
280 285 // 解析表单组件分组具名插槽名称
281 286 formGroupSlotsKeys() {
282 287 const keys = [...new Set([...Object.keys(this.$scopedSlots), ...Object.keys(this.$slots)])];
... ...