frontend / zee

Download as
Browse Code »

Commit 2c3347401db5b54a1921e6c814a32416db8fa364

Authored by 刘汉宸
1 parent 8657d1e9
Exists in master and in 2 other branches Feature-渲染优化, Refactor-2.0

feat: 优化部分组件

Showing 13 changed files with 126 additions and 52 deletions   Show diff stats
examples/views/docs/component/select.md
  Diff comments   View file @2c33474
... ... @@ -433,7 +433,7 @@ export default {
433 433 },
434 434 methods: {
435 435 beforeQuery(query) {
436   - console.log(query.length);
  436 + // 输入两个字符以上才执行查询
437 437 return query.length > 2;
438 438 },
439 439 queryAPI(val) {
... ...
examples/views/docs/component/table.md
  Diff comments   View file @2c33474
... ... @@ -47,7 +47,14 @@ export default {
47 47 <el-form size="mini">
48 48 <el-row>
49 49 <el-col :span="18">
50   - <z-table :value="tableData" type="editable" border :columns="columns"></z-table>
  50 + <z-table v-model="tableData" type="editable" border :columns="columns">
  51 + <template #column-editor-gender="{ value, onInput }">
  52 + <el-radio-group size="mini" :value="value" @input="onInput">
  53 + <el-radio-button label="男">男</el-radio-button>
  54 + <el-radio-button label="女">女</el-radio-button>
  55 + </el-radio-group>
  56 + </template>
  57 + </z-table>
51 58 </el-col>
52 59 <el-col :span="6" style="padding-left: 10px">
53 60 <pre class="demo-model">{{ tableData }}</pre>
... ... @@ -61,12 +68,12 @@ export default {
61 68 data() {
62 69 return {
63 70 tableData: [
64   - { name: '张三', age: '31', gender: '男' },
65   - { name: '李四', age: '27', gender: '女' },
66   - { name: '王五', age: '16', gender: '男' },
  71 + { name: '张三', age: 31, gender: '男' },
  72 + { name: '李四', age: 27, gender: '女' },
  73 + { name: '王五', age: 16, gender: '男' },
67 74 ],
68 75 columns: [
69   - { prop: 'name', label: '姓名' },
  76 + { prop: 'name', label: '姓名', editable: false },
70 77 { type: 'el-input-number', prop: 'age', label: '年龄' },
71 78 { prop: 'gender', label: '性别' },
72 79 ]
... ...
packages/form/index.vue
  Diff comments   View file @2c33474
1 1 <template>
2   - <el-form ref="form" :model="model" class="zee-form" v-bind="$attrs">
  2 + <el-form ref="form" :model="model" class="z-form" v-bind="$attrs">
3 3 <slot v-if="$slots.row" name="row"></slot>
4 4 <el-row v-else v-bind="row">
5 5 <slot></slot>
... ...
packages/scheme-filter/index.vue
  Diff comments   View file @2c33474
1 1 <template>
2 2 <z-scheme-form
3 3 v-model="model"
4   - class="zee-scheme-filter"
  4 + class="z-scheme-filter"
5 5 :list="formattedList"
6 6 :span="span"
7 7 :labelWidth="labelWidth"
... ... @@ -16,7 +16,7 @@
16 16 </template>
17 17 <slot v-else :name="key" :slot="key"></slot>
18 18 </template>
19   - <div v-if="!slotKeys.includes('operation')" slot="operation" class="zee-scheme-filter__button-group">
  19 + <div v-if="!slotKeys.includes('operation')" slot="operation" class="z-scheme-filter__button-group">
20 20 <el-button-group :size="size">
21 21 <el-button type="primary" @click="handleSearch" :loading="loading" icon="el-icon-search"><span>查询</span></el-button>
22 22 <el-button @click="handleReset"><span>重置</span></el-button>
... ... @@ -96,9 +96,9 @@ export default {
96 96 colVisibleRender(item, index) {
97 97 if (this.collapsed) {
98 98 const visibleNumber = this.visibleNum ? this.visibleNum - 1 : 2;
99   - return index > visibleNumber && index < this.list.length ? 'zee-scheme-filter__item hidden' : 'zee-scheme-filter__item';
  99 + return index > visibleNumber && index < this.list.length ? 'z-scheme-filter__item hidden' : 'z-scheme-filter__item';
100 100 }
101   - return 'zee-scheme-filter__item';
  101 + return 'z-scheme-filter__item';
102 102 },
103 103 // 搜索
104 104 handleSearch() {
... ... @@ -118,10 +118,10 @@ export default {
118 118 </script>
119 119  
120 120 <style>
121   -.zee-scheme-filter__item.hidden {
  121 +.z-scheme-filter__item.hidden {
122 122 display: none;
123 123 }
124   -.zee-scheme-filter__button-group {
  124 +.z-scheme-filter__button-group {
125 125 width: 100%;
126 126 box-sizing: border-box;
127 127 text-align: right;
... ...
packages/scheme-form/index.vue
  Diff comments   View file @2c33474
1 1 <style lang="scss">
2   -.zee-scheme-form {
  2 +.z-scheme-form {
3 3 &__flex-wrap {
4 4 display: flex;
5 5 flex-wrap: wrap;
... ... @@ -26,7 +26,7 @@
26 26 <template>
27 27 <el-form
28 28 ref="form"
29   - class="zee-scheme-form"
  29 + class="z-scheme-form"
30 30 :size="size"
31 31 :class="formClass"
32 32 :model="formModel"
... ... @@ -52,7 +52,7 @@
52 52 >
53 53 <slot v-for="key in slotKeys" :name="key" :slot="key"></slot>
54 54 </scheme-form-render>
55   - <div v-if="$scopedSlots.footer" class="zee-scheme-form__footer">
  55 + <div v-if="$scopedSlots.footer" class="z-scheme-form__footer">
56 56 <slot name="footer" :size="size" :validate="validate" :reset="reset" :model="model"></slot>
57 57 </div>
58 58 </el-form>
... ...
packages/scheme-form/scheme-form-render.vue
  Diff comments   View file @2c33474
1 1 <template>
2 2 <!-- 在row上使用flex，防止表单组件大小不一导致错位 -->
3   - <component :is="rowComponent" class="zee-scheme-form__flex-wrap">
  3 + <component :is="rowComponent" class="z-scheme-form__flex-wrap">
4 4 <template v-for="(item, index) in list">
5 5 <!-- 表单项有设置分组时 -->
6 6 <component
... ... @@ -11,9 +11,9 @@
11 11 :style="{ width: type === 'div' ? '100%' : undefined }"
12 12 :class="colClassRender(item, index, colClass)"
13 13 >
14   - <component :is="rowComponent" class="zee-scheme-form__flex-wrap" :class="groupClass || 'zee-scheme-form__group'">
  14 + <component :is="rowComponent" class="z-scheme-form__flex-wrap" :class="groupClass || 'z-scheme-form__group'">
15 15 <!-- 表单分组标题 -->
16   - <component :is="rowComponent" :class="titleClass || 'zee-scheme-form__group-title'" v-if="item.group.title" style="width: 100%;">
  16 + <component :is="rowComponent" :class="titleClass || 'z-scheme-form__group-title'" v-if="item.group.title" style="width: 100%;">
17 17 {{ item.group.title || item.group }}
18 18 </component>
19 19 <!-- 递归本组件 -->
... ... @@ -22,7 +22,7 @@
22 22 :item-class="itemClass"
23 23 :content-class="contentClass"
24 24 :group-class="groupClass"
25   - :class="contentClass || 'zee-scheme-form__group-content'"
  25 + :class="contentClass || 'z-scheme-form__group-content'"
26 26 :list="item.list"
27 27 :value="value"
28 28 :model="itemKey ? model[itemKey] || {} : model"
... ... @@ -46,7 +46,7 @@
46 46 :style="{ width: type === 'div' && item.style && item.style.width.includes('%') ? item.style.width : undefined, paddingRight: '10px' }"
47 47 :class="colClassRender(item, index, colClass)"
48 48 >
49   - <el-form-item :label="item.label" :label-width="item.labelWidth" :prop="item.fullKey" :rules="item | bindItemRulesFilter(model)" :class="itemClass || 'zee-scheme-form__item'">
  49 + <el-form-item :label="item.label" :label-width="item.labelWidth" :prop="item.fullKey" :rules="item | bindItemRulesFilter(model)" :class="itemClass || 'z-scheme-form__item'">
50 50 <slot v-if="$scopedSlots[item.fullKey]" :name="item.fullKey" :value="itemValue(item)" :model1="value"></slot>
51 51 <template v-else>
52 52 <!-- 自定义组件 -->
... ...
packages/scheme-table/cell-editable.vue
  Diff comments   View file @2c33474
1 1 <style>
2   -.zee-table-cell-editable {
  2 +.z-table-cell-editable {
3 3 display: flex;
4 4 align-items: center;
5 5 }
6   -.zee-table-cell-editable .zee-table-cell-editable__icon {
  6 +.z-table-cell-editable .z-table-cell-editable__icon {
7 7 cursor: pointer;
8 8 vertical-align: middle;
9 9 padding-left: 5px;
... ... @@ -14,10 +14,10 @@
14 14 <template>
15 15 <div>
16 16 <!-- 可编辑状态 -->
17   - <div v-if="editable" class="zee-table-cell-editable">
  17 + <div v-if="editable" class="z-table-cell-editable">
18 18 <component :value="$_get(row, item.fullKey)" :is="item.type" v-bind="item.props" :style="item.style" size="mini" @input="onInput"></component>
19 19 <span v-if="btnVisible !== false" @click="onConfirm">
20   - <svg class="zee-table-cell-editable__icon" viewBox="0 0 1024 1024" width="24" height="24">
  20 + <svg class="z-table-cell-editable__icon" viewBox="0 0 1024 1024" width="24" height="24">
21 21 <path d="M235.946667 472.938667l-45.226667 45.312 210.090667 209.514666 432.362666-427.690666-45.013333-45.482667-387.157333 382.976z"></path>
22 22 </svg>
23 23 </span>
... ...
packages/scheme-table/editable.vue
  Diff comments   View file @2c33474
1 1 <style>
2   -.zee-table {
  2 +.z-table {
3 3 width: 100%;
4 4 }
5 5 </style>
... ... @@ -14,7 +14,7 @@
14 14 <el-button @click="handleDelete" size="mini" type="danger" v-if="tableSelection.length > 0">删除</el-button>
15 15 </div>
16 16 <el-table
17   - class="zee-table"
  17 + class="z-table"
18 18 ref="table"
19 19 :data="tableData"
20 20 v-bind="{ size: 'small', ...tableProps }"
... ...
packages/scheme-table/index.vue
  Diff comments   View file @2c33474
1 1 <style>
2   -.zee-scheme-table {
  2 +.z-scheme-table {
3 3 width: 100%;
4 4 }
5 5 </style>
6 6  
7 7 <template>
8 8 <el-table
9   - class="zee-scheme-table"
  9 + class="z-scheme-table"
10 10 ref="table"
11 11 :data="tableData"
12 12 v-bind="{ size, ...tableProps }"
... ...
packages/scheme/index.scss
  Diff comments   View file @2c33474
1   -.zee-scheme {
  1 +.z-scheme {
2 2 &__header {
3 3 margin-bottom: 10px;
4 4 }
... ...
packages/scheme/index.vue
  Diff comments   View file @2c33474
... ... @@ -3,13 +3,13 @@
3 3 </style>
4 4  
5 5 <template>
6   - <div class="zee-scheme">
  6 + <div class="z-scheme">
7 7 <!-- 头部内容 -->
8   - <div v-if="$scopedSlots.header || $slots.header" class="zee-scheme__header">
  8 + <div v-if="$scopedSlots.header || $slots.header" class="z-scheme__header">
9 9 <slot name="header" :filterModel="filterModel" v-bind="_slotScope"></slot>
10 10 </div>
11 11 <!-- 筛选组件 -->
12   - <div v-if="filter" class="zee-scheme__filter">
  12 + <div v-if="filter" class="z-scheme__filter">
13 13 <z-scheme-filter
14 14 :value="_filterModel"
15 15 :list="filterList || listMap.filter | noRulesFilter"
... ... @@ -22,7 +22,7 @@
22 22 ></z-scheme-filter>
23 23 </div>
24 24 <!-- 按钮区 -->
25   - <div v-if="action" class="zee-scheme__action">
  25 + <div v-if="action" class="z-scheme__action">
26 26 <slot v-if="hadSlot('action')" name="action" v-bind="_slotScope"></slot>
27 27 <template v-else>
28 28 <el-button :size="size" type="primary" @click="openNew">新增</el-button>
... ... @@ -31,7 +31,7 @@
31 31 </template>
32 32 </div>
33 33 <!-- 表格内容 -->
34   - <div class="zee-scheme__table">
  34 + <div class="z-scheme__table">
35 35 <z-scheme-table
36 36 ref="table"
37 37 v-model="tableData"
... ... @@ -65,7 +65,7 @@
65 65 <template #column-end>
66 66 <slot slot="column-end" name="column-end" v-bind="_slotScope"></slot>
67 67 <el-table-column v-if="operation" prop="$operation" label="操作" v-bind="{ width: 100, fixed: 'right', ...operationProps }">
68   - <div class="zee-scheme__table-operation" slot-scope="slotScope">
  68 + <div class="z-scheme__table-operation" slot-scope="slotScope">
69 69 <slot name="operation-button" v-bind="{ ..._slotScope, slotScope }"></slot>
70 70 <el-button type="text" icon="el-icon-edit" title="编辑" @click="openEdit(slotScope.row)"></el-button>
71 71 <el-popconfirm confirmButtonText="确定" cancelButtonText="取消" title="确定删除吗？" placement="top" @confirm="handleDelete([slotScope.row])">
... ... @@ -78,7 +78,7 @@
78 78 </z-scheme-table>
79 79 </div>
80 80 <!-- 底部区域 -->
81   - <div class="zee-scheme__footer">
  81 + <div class="z-scheme__footer">
82 82 <div v-if="selection.length > 0" class="selection-info">
83 83 <span>已选中</span>
84 84 <span class="num">{{ selection.length }}</span>
... ... @@ -142,7 +142,7 @@
142 142 <template v-else>
143 143 <z-form
144 144 ref="form"
145   - class="zee-scheme__view"
  145 + class="z-scheme__view"
146 146 :value="_formModel"
147 147 :list="viewList || listMap.form | viewTypeFilter | noRulesFilter"
148 148 v-bind="{ span: 12, 'label-width': '110px', ...viewProps }"
... ... @@ -161,7 +161,7 @@
161 161 </template>
162 162 </template>
163 163 <!-- 内置弹出框新增修改按钮 -->
164   - <div class="zee-scheme__dialog-button" v-if="['new', 'edit'].includes(dialogType)">
  164 + <div class="z-scheme__dialog-button" v-if="['new', 'edit'].includes(dialogType)">
165 165 <el-button :size="size" type="primary" @click="handleConfirm" :loading="submitting">确定</el-button>
166 166 <el-button :size="size" plain @click="closeDialog">取消</el-button>
167 167 </div>
... ...
packages/select/index.bak.vue
  Diff comments   View file @2c33474
1 1 <template>
2 2 <el-select
3   - class="zee-select"
  3 + class="z-select"
4 4 :disabled="disabled"
5 5 :value-key="valueKey"
6 6 :filterable="filterable"
... ... @@ -254,7 +254,7 @@ export default {
254 254 </script>
255 255  
256 256 <style lang="scss">
257   -.zee-select {
  257 +.z-select {
258 258 .el-input__prefix {
259 259 height: 100%;
260 260 display: flex;
... ...
packages/table/editable.vue
  Diff comments   View file @2c33474
  1 +<style lang="scss">
  2 +.z-table-column__cell-editable {
  3 + display: inline-flex;
  4 + align-items: center;
  5 + justify-content: space-between;
  6 + width: 100%;
  7 + .el-icon-edit {
  8 + color: rgba(151, 151, 151, 0.5);
  9 + &:hover {
  10 + color: $primary;
  11 + }
  12 + }
  13 + .el-icon-check {
  14 + color: $green;
  15 + }
  16 + .el-icon-close {
  17 + color: $red;
  18 + }
  19 + .el-icon-edit,
  20 + .el-icon-check,
  21 + .el-icon-close {
  22 + cursor: pointer;
  23 + margin-left: 5px;
  24 + font-size: 14px;
  25 + }
  26 +}
  27 +</style>
  28 +
1 29 <template>
2 30 <el-table :data="tableData | tableDataFilter" :size="tableSize" v-bind="_props" @header-click="onHeaderClick" @cell-click="onCellClick" @cell-dblclick="onCellDblclick">
3 31 <template v-for="(item, index) in columns">
4 32 <el-table-column v-bind="item" :key="index">
  33 + <template #header>
  34 + <span>{{ item.label }}</span>
  35 + </template>
5 36 <template #default="{ row, column }">
6 37 <table-column-cell
7   - :editable="row.$editable || (tableEditCell.index === row.$index && tableEditCell.prop === item.prop)"
  38 + :disabled="item.editable === false"
  39 + :editable="item.editable !== false && (row.$editable || (tableEditCell.index === row.$index && tableEditCell.prop === item.prop))"
8 40 :type="item.type"
9 41 :value="row[column.property]"
10 42 @input="onCellInput"
11   - ></table-column-cell>
  43 + @edit-click="onCellDblclick(row, column)"
  44 + @edit-confirm="onHeaderClick"
  45 + >
  46 + <template v-if="$scopedSlots[`column-editor-${item.prop}`]">
  47 + <slot :name="`column-editor-${item.prop}`" :value="row[column.property]" :onInput="onCellInput"></slot>
  48 + </template>
  49 + </table-column-cell>
12 50 </template>
13 51 </el-table-column>
14 52 </template>
... ... @@ -29,28 +67,49 @@ export default {
29 67 value: [String, Number, Array, Object],
30 68 type: { type: String, default: 'el-input' },
31 69 editable: Boolean,
  70 + disabled: Boolean,
  71 + showHandler: {
  72 + type: Boolean,
  73 + default: true,
  74 + },
32 75 },
33 76 watch: {
34 77 editable(val) {
35 78 if (val && this.type === 'el-input') {
36 79 this.$nextTick(() => {
37   - this.$children[0].focus();
  80 + this.$children[0] && this.$children[0].focus && this.$children[0].focus();
38 81 });
39 82 }
40 83 },
41 84 },
42 85 render(h) {
43 86 if (this.editable) {
44   - return h(this.type, {
45   - props: { value: this.value, size: 'mini' },
46   - on: {
47   - input: value => {
48   - this.$emit('input', value);
  87 + let editRender = [
  88 + h(this.type, {
  89 + props: { value: this.value, size: 'mini' },
  90 + on: {
  91 + input: value => {
  92 + this.$emit('input', value);
  93 + },
49 94 },
50   - },
51   - });
  95 + }),
  96 + ];
  97 + if (this.$scopedSlots.default) {
  98 + editRender = [this.$scopedSlots.default()];
  99 + }
  100 + if (this.showHandler !== false) {
  101 + const handlerItems = [h('i', { attrs: { title: '确定', class: 'el-icon-check' }, on: { click: () => this.$emit('edit-confirm') } })];
  102 + // handlerItems.push(h('i', { attrs: { title: '取消', class: 'el-icon-close' }, on: { click: () => this.$emit('edit-confirm') } }));
  103 + const handler = h('span', handlerItems);
  104 + editRender.push(handler);
  105 + }
  106 + return h('span', { class: 'z-table-column__cell-editable' }, editRender);
  107 + }
  108 + const defauleRender = [this.value];
  109 + if (!this.disabled && this.showHandler !== false) {
  110 + defauleRender.push(h('i', { attrs: { title: '编辑', class: 'el-icon-edit' }, on: { click: () => this.$emit('edit-click') } }));
52 111 }
53   - return h('span', this.value);
  112 + return h('span', { class: 'z-table-column__cell-editable' }, defauleRender);
54 113 },
55 114 },
56 115 },
... ... @@ -69,6 +128,11 @@ export default {
69 128 },
70 129 ...tableProps,
71 130 },
  131 + watch: {
  132 + value(val) {
  133 + this.tableData = val || [];
  134 + },
  135 + },
72 136 data() {
73 137 return {
74 138 tableData: this.value,
... ... @@ -82,6 +146,9 @@ export default {
82 146 return value.map((item, index) => ({ ...item, $index: index }));
83 147 },
84 148 },
  149 + // mounted() {
  150 + // console.log(this.$scopedSlots);
  151 + // },
85 152 methods: {
86 153 onHeaderClick() {
87 154 this.tableEditCell = {};
... ...