frontend / zee

Download as
Browse Code »

Commit 2b59b62e7f203fc10b69b92bea786a5e2f492844

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

feat: 优化SchemaSelect组件

Showing 2 changed files with 231 additions and 15 deletions   Show diff stats
examples/views/docs/component/schema-select.md
  Diff comments   View file @2b59b62
@@ -4,13 +4,13 @@ @@ -4,13 +4,13 @@
4 4
5 ## 基础用法 5 ## 基础用法
6 6
7 -`schema`设置配置项。 7 +一个展示内容更多的表格形式的下拉选择器，基本配置项与`z-schema-page`中`schema`相同。
8 8
9 -::: snippet `schema`设置配置项 9 +::: snippet 设置`options`配置选择器数据源，`label-key`设置显示值字段，`value-key`设置绑定值字段。
10 10
11 ```html 11 ```html
12 <template> 12 <template>
13 - <z-schema-select v-model="model" size="small" :schema="schema" :api-search="searchAPI" label-key="name" value-key="id"></z-schema-select> 13 + <z-schema-select v-model="model" :options="options" :schema="schema" label-key="name" value-key="id" @change="onChange"></z-schema-select>
14 </template> 14 </template>
15 15
16 <script> 16 <script>
@@ -18,6 +18,10 @@ export default { @@ -18,6 +18,10 @@ export default {
18 data() { 18 data() {
19 return { 19 return {
20 model: '', 20 model: '',
  21 + options: [
  22 + { id: '0', name: '李饼', age: 32, address: '地址0', status: '正常' },
  23 + { id: '1', name: '陈拾', age: 20, address: '地址1', status: '正常' },
  24 + ],
21 schema: { 25 schema: {
22 table: { 26 table: {
23 props: { 27 props: {
@@ -26,9 +30,175 @@ export default { @@ -26,9 +30,175 @@ export default {
26 items: [ 30 items: [
27 { label: '姓名', prop: 'name', minWidth: 120 }, 31 { label: '姓名', prop: 'name', minWidth: 120 },
28 { label: '年龄', prop: 'age', minWidth: 120 }, 32 { label: '年龄', prop: 'age', minWidth: 120 },
  33 + { label: '地址', prop: 'address', minWidth: 120 },
29 ] 34 ]
30 } 35 }
31 - } 36 + },
  37 + }
  38 + },
  39 + methods: {
  40 + onChange(row) {
  41 + console.log(row);
  42 + }
  43 + }
  44 +}
  45 +</script>
  46 +```
  47 +
  48 +:::
  49 +
  50 +## 远程搜索
  51 +
  52 +配置一个接口查询远程数据。
  53 +
  54 +::: snippet `api-search`设置远程搜索方法。
  55 +
  56 +```html
  57 +<template>
  58 + <div>
  59 + <z-schema-select v-model="model" :schema="schema" :api-search="searchAPI" label-key="name" value-key="id"></z-schema-select>
  60 + <span>{{ model }}</span>
  61 + </div>
  62 +</template>
  63 +
  64 +<script>
  65 +export default {
  66 + data() {
  67 + return {
  68 + model: '',
  69 + schema: {
  70 + table: {
  71 + props: {
  72 + border: false
  73 + },
  74 + items: [
  75 + { label: '姓名', prop: 'name', minWidth: 120 },
  76 + { label: '年龄', prop: 'age', minWidth: 120 },
  77 + { label: '地址', prop: 'address', minWidth: 120 },
  78 + ]
  79 + }
  80 + },
  81 + }
  82 + },
  83 + methods: {
  84 + searchAPI(params) {
  85 + console.log('search', params);
  86 + return new Promise(resolve => {
  87 + setTimeout(() => {
  88 + const list = [
  89 + { id: '0', name: '李饼', age: 32, address: '地址0', status: '正常' },
  90 + { id: '1', name: '陈拾', age: 20, address: '地址1', status: '正常' },
  91 + { id: '3', name: '王七', age: 26, address: '地址3', status: '正常' },
  92 + { id: '4', name: '崔倍', age: 27, address: '地址4', status: '正常' },
  93 + { id: '5', name: '孙豹', age: 38, address: '地址5', status: '正常' },
  94 + ];
  95 + resolve([list, 37]);
  96 + }, 500);
  97 + });
  98 + },
  99 + }
  100 +}
  101 +</script>
  102 +```
  103 +
  104 +:::
  105 +
  106 +## 设置默认文本
  107 +
  108 +通常情况下，编辑表单时，若未加载搜索接口，则需要给定一个对应当前值的默认显示的文本
  109 +
  110 +::: snippet 组件提供了一个`setLabel`可设置当前文本
  111 +
  112 +```html
  113 +<template>
  114 + <div>
  115 + <z-schema-select ref="select" v-model="model" size="small" :schema="schema" :api-search="searchAPI" label-key="name" value-key="id"></z-schema-select>
  116 + <span>{{ model }}</span>
  117 + </div>
  118 +</template>
  119 +
  120 +<script>
  121 +export default {
  122 + data() {
  123 + return {
  124 + model: '6',
  125 + schema: {
  126 + table: {
  127 + props: {
  128 + border: false
  129 + },
  130 + items: [
  131 + { label: '姓名', prop: 'name', minWidth: 120 },
  132 + { label: '年龄', prop: 'age', minWidth: 120 },
  133 + { label: '地址', prop: 'address', minWidth: 120 },
  134 + ]
  135 + }
  136 + },
  137 + options: [
  138 + { id: '6', name: '张三', age: 18, address: '上海市青浦区华新镇纪鹤公路1988号', status: '禁用' },
  139 + ]
  140 + }
  141 + },
  142 + mounted() {
  143 + setTimeout(() => {
  144 + this.$refs.select.setLabel('李四');
  145 + }, 3000);
  146 + },
  147 + methods: {
  148 + searchAPI(params) {
  149 + console.log('search', params);
  150 + return new Promise(resolve => {
  151 + setTimeout(() => {
  152 + const list = [
  153 + { id: '0', name: '李饼', age: 32, address: '地址0', status: '正常' },
  154 + { id: '1', name: '陈拾', age: 20, address: '地址1', status: '正常' },
  155 + { id: '3', name: '王七', age: 26, address: '地址3', status: '正常' },
  156 + { id: '4', name: '崔倍', age: 27, address: '地址4', status: '正常' },
  157 + { id: '5', name: '孙豹', age: 38, address: '地址5', status: '正常' },
  158 + ];
  159 + resolve([list, 37]);
  160 + }, 500);
  161 + });
  162 + },
  163 + }
  164 +}
  165 +</script>
  166 +```
  167 +
  168 +:::
  169 +
  170 +也可以通过设置修正数据源来修正当前显示内容
  171 +
  172 +::: snippet 开启`api-search`远程搜索时，设置`options`，则作为修正数据源使用。注：修正数据源不会出现在搜索数据列表中。
  173 +
  174 +```html
  175 +<template>
  176 + <div>
  177 + <z-schema-select ref="select" v-model="model" size="small" :schema="schema" :options="options" :api-search="searchAPI" label-key="name" value-key="id"></z-schema-select>
  178 + <span>{{ model }}</span>
  179 + </div>
  180 +</template>
  181 +
  182 +<script>
  183 +export default {
  184 + data() {
  185 + return {
  186 + model: '6',
  187 + schema: {
  188 + table: {
  189 + props: {
  190 + border: false
  191 + },
  192 + items: [
  193 + { label: '姓名', prop: 'name', minWidth: 120 },
  194 + { label: '年龄', prop: 'age', minWidth: 120 },
  195 + { label: '地址', prop: 'address', minWidth: 120 },
  196 + ]
  197 + }
  198 + },
  199 + options: [
  200 + { id: '6', name: '张三', age: 18, address: '上海市青浦区华新镇纪鹤公路1988号', status: '禁用' },
  201 + ]
32 } 202 }
33 }, 203 },
34 methods: { 204 methods: {
packages/schema-select/index.vue
  Diff comments   View file @2b59b62
1 <style lang="scss"> 1 <style lang="scss">
2 .z-schema-select { 2 .z-schema-select {
3 - display: inline-block; 3 + display: inline-flex;
4 } 4 }
5 .z-schema-select__popper { 5 .z-schema-select__popper {
6 padding: 0 !important; 6 padding: 0 !important;
7 } 7 }
8 .z-schema-select__popper-content { 8 .z-schema-select__popper-content {
9 padding: 4px; 9 padding: 4px;
  10 + user-select: none;
10 } 11 }
11 </style> 12 </style>
12 13
@@ -14,7 +15,6 @@ @@ -14,7 +15,6 @@
14 <el-popover class="z-schema-select" popper-class="z-schema-select__popper" v-model="visible" trigger="click" placement="bottom-start" transition="el-zoom-in-top"> 15 <el-popover class="z-schema-select" popper-class="z-schema-select__popper" v-model="visible" trigger="click" placement="bottom-start" transition="el-zoom-in-top">
15 <template #reference> 16 <template #reference>
16 <el-input 17 <el-input
17 - class="el-select__input"  
18 v-model="model" 18 v-model="model"
19 :size="selectSize" 19 :size="selectSize"
20 :disabled="selectDisabled" 20 :disabled="selectDisabled"
@@ -34,11 +34,13 @@ @@ -34,11 +34,13 @@
34 </template> 34 </template>
35 <div class="z-schema-select__popper-content" v-clickoutside="onClickoutside"> 35 <div class="z-schema-select__popper-content" v-clickoutside="onClickoutside">
36 <z-schema-page 36 <z-schema-page
  37 + v-if="apiSearch"
37 ref="schema" 38 ref="schema"
38 :value-table.sync="tableData" 39 :value-table.sync="tableData"
39 :value-filter="valueFilter" 40 :value-filter="valueFilter"
40 @update:value-filter="e => $emit('update:value-filter', e)" 41 @update:value-filter="e => $emit('update:value-filter', e)"
41 :schema="selectSchema" 42 :schema="selectSchema"
  43 + :size="selectSize"
42 :auto="auto" 44 :auto="auto"
43 :api-search="apiSearch" 45 :api-search="apiSearch"
44 > 46 >
@@ -47,6 +49,12 @@ @@ -47,6 +49,12 @@
47 <template v-else>{{ value }}</template> 49 <template v-else>{{ value }}</template>
48 </template> 50 </template>
49 </z-schema-page> 51 </z-schema-page>
  52 + <z-schema-table v-else ref="table" :value="options" :schema="selectTableSchema" :size="selectSize">
  53 + <template v-for="(item, index) in tableColumns" #[`cell-${item.prop}`]="{ value }">
  54 + <cell-highlight v-if="highlight" :value="value" :keyword="query" :key="index"></cell-highlight>
  55 + <template v-else>{{ value }}</template>
  56 + </template>
  57 + </z-schema-table>
50 </div> 58 </div>
51 </el-popover> 59 </el-popover>
52 </template> 60 </template>
@@ -54,6 +62,7 @@ @@ -54,6 +62,7 @@
54 <script> 62 <script>
55 import debounce from 'throttle-debounce/debounce'; 63 import debounce from 'throttle-debounce/debounce';
56 import Clickoutside from 'element-ui/src/utils/clickoutside'; 64 import Clickoutside from 'element-ui/src/utils/clickoutside';
  65 +import { get } from '../utils';
57 66
58 export default { 67 export default {
59 name: 'SchemaSelect', 68 name: 'SchemaSelect',
@@ -80,16 +89,18 @@ export default { @@ -80,16 +89,18 @@ export default {
80 return {}; 89 return {};
81 }, 90 },
82 }, 91 },
  92 + options: {
  93 + type: Array,
  94 + default: () => [],
  95 + },
83 auto: { 96 auto: {
84 type: Boolean, 97 type: Boolean,
85 default: true, 98 default: true,
86 }, 99 },
87 - // clearable: Boolean,  
88 clearable: { 100 clearable: {
89 type: Boolean, 101 type: Boolean,
90 default: true, 102 default: true,
91 }, 103 },
92 - // highlight: Boolean,  
93 highlight: { 104 highlight: {
94 type: Boolean, 105 type: Boolean,
95 default: true, 106 default: true,
@@ -123,7 +134,8 @@ export default { @@ -123,7 +134,8 @@ export default {
123 }, 134 },
124 data() { 135 data() {
125 return { 136 return {
126 - model: '', 137 + model: this.value || '',
  138 + currentLabel: '',
127 query: '', 139 query: '',
128 visible: false, 140 visible: false,
129 inputHovering: false, 141 inputHovering: false,
@@ -134,6 +146,7 @@ export default { @@ -134,6 +146,7 @@ export default {
134 this.debouncedOnInput = debounce(300, () => { 146 this.debouncedOnInput = debounce(300, () => {
135 this.onInput(); 147 this.onInput();
136 }); 148 });
  149 + this.model = this.selectedLabel;
137 }, 150 },
138 computed: { 151 computed: {
139 _elFormItemSize() { 152 _elFormItemSize() {
@@ -150,8 +163,8 @@ export default { @@ -150,8 +163,8 @@ export default {
150 }, 163 },
151 selectedLabel() { 164 selectedLabel() {
152 if (this.value) { 165 if (this.value) {
153 - const item = this.tableData.find(item => item[this.valueKey] === this.value) || {};  
154 - return item[this.labelKey]; 166 + const item = [...this.tableData, ...this.options].find(item => item[this.valueKey] === this.value) || {};
  167 + return item[this.labelKey] || this.currentLabel || this.value;
155 } 168 }
156 return ''; 169 return '';
157 }, 170 },
@@ -171,23 +184,55 @@ export default { @@ -171,23 +184,55 @@ export default {
171 }, 184 },
172 }; 185 };
173 }, 186 },
  187 + selectTableSchema() {
  188 + if (!this.schema) {
  189 + return {};
  190 + }
  191 + return {
  192 + on: {
  193 + 'row-click': this.onTableRowClick,
  194 + },
  195 + props: {
  196 + size: 'small',
  197 + 'highlight-current-row': true,
  198 + ...(get(this.schema, 'table.props') || {}),
  199 + },
  200 + items: [...(get(this.schema, 'table.items') || [])],
  201 + };
  202 + },
174 showClose() { 203 showClose() {
175 let hasValue = this.value !== undefined && this.value !== null && this.value !== ''; 204 let hasValue = this.value !== undefined && this.value !== null && this.value !== '';
176 let criteria = this.clearable && !this.selectDisabled && this.inputHovering && hasValue; 205 let criteria = this.clearable && !this.selectDisabled && this.inputHovering && hasValue;
177 return criteria; 206 return criteria;
178 }, 207 },
179 tableColumns() { 208 tableColumns() {
180 - if (this.schema) {  
181 - return this.schema.items; 209 + const tableSchema = this.schema.table;
  210 + if (tableSchema) {
  211 + return tableSchema.items;
182 } 212 }
183 return []; 213 return [];
184 }, 214 },
185 }, 215 },
  216 + watch: {
  217 + value(val) {
  218 + this.model = this.selectedLabel;
  219 + },
  220 + options() {
  221 + this.model = this.selectedLabel;
  222 + },
  223 + },
186 methods: { 224 methods: {
  225 + // 手动设置当前value对应的label
  226 + setLabel(val) {
  227 + this.currentLabel = val;
  228 + this.model = this.selectedLabel;
  229 + },
187 // 输入查询 230 // 输入查询
188 onInput() { 231 onInput() {
189 this.query = this.model; 232 this.query = this.model;
190 - this.$refs.schema.search(); 233 + if (this.$refs.schema) {
  234 + this.$refs.schema.search();
  235 + }
191 }, 236 },
192 onInputFocus() { 237 onInputFocus() {
193 this.model = ''; 238 this.model = '';
@@ -200,12 +245,13 @@ export default { @@ -200,12 +245,13 @@ export default {
200 onClickoutside() { 245 onClickoutside() {
201 if (this.visible) { 246 if (this.visible) {
202 this.model = this.selectedLabel; 247 this.model = this.selectedLabel;
  248 + this.query = '';
203 } 249 }
204 }, 250 },
205 // 点击表格行 251 // 点击表格行
206 onTableRowClick(row) { 252 onTableRowClick(row) {
207 this.query = ''; 253 this.query = '';
208 - this.model = row.name; 254 + this.model = this.selectedLabel;
209 this.visible = false; 255 this.visible = false;
210 this.$emit('input', row[this.valueKey]); 256 this.$emit('input', row[this.valueKey]);
211 this.$emit('change', row); 257 this.$emit('change', row);