fix: 修复SchemaSelect弹出框

刘汉宸
1 parent 152f14b3
Showing 2 changed files with 31 additions and 10 deletions Show diff stats
packages/schema-page/index.vue
packages/schema-select/index.vue
@@ -10,7 +10,7 @@
     </div>
     <!-- 筛选组件 -->
     <div v-if="schema.filter" class="z-schema-page__filter">
-      <z-schema-filter :size="_size" :schema="schema.filter" :value="valueFilter" @input="e => $emit('update:value-filter', e)" :loading="loading" @search="onSearch">
+      <z-schema-filter :size="_size" :schema="schema.filter" :value="valueFilter" @input="e => $emit('update:value-filter', e)" :loading="tableLoading" @search="onSearch">
         <template v-for="item in getSlotKeys('filter-')" #[item.name]="slotScope">
           <slot :name="item.slot" v-bind="{ ..._slotScope, ...slotScope }"></slot>
         </template>
@@ -26,7 +26,13 @@
     </div>
     <!-- 表格内容 -->
     <div v-if="schema.table" class="z-schema-page__table">
-      <z-schema-table :size="_size" :schema="tableSchemaDefaultProps(schema.table)" v-model="tableData" v-loading="loading" @selection-change="onTableSelectionChange">
+      <z-schema-table
+        :size="_size"
+        :schema="tableSchemaDefaultProps(schema.table)"
+        v-model="tableData"
+        v-loading="schema.loading !== false ? tableLoading : false"
+        @selection-change="onTableSelectionChange"
+      >
         <template #left>
           <el-table-column v-if="schema.selection !== false" type="selection" width="40" align="center"></el-table-column>
         </template>
@@ -165,7 +171,7 @@ setKeysDefault([&#39;value-table&#39;], {
   },
 });
 setKeysDefault(['size', 'dialogTitle', 'dialogType'], String);
-setKeysDefault(['dialogVisible', 'auto'], Boolean);
+setKeysDefault(['dialogVisible', 'auto', 'loading'], Boolean);
 setKeysDefault(['api-search', 'api-submit', 'api-new', 'api-edit', 'api-get', 'api-detail', 'api-delete'], Function);
  
 export default {
@@ -198,7 +204,7 @@ export default {
       detailSchema: filterout(cloneDeep(this.schema.form || {}), ['is', 'rules']),
       detail: this.valueDetail || {},
       tableData: this.valueTable || [],
-      loading: false,
+      tableLoading: this.loading || false,
       submitting: false,
       dialogLoading: false,
     };
@@ -239,6 +245,9 @@ export default {
     tableData(val) {
       this.$emit('update:value-table', val);
     },
+    tableLoading(val) {
+      this.$emit('update:loading', val);
+    },
   },
   computed: {
     slotKeys() {
@@ -248,10 +257,11 @@ export default {
       return this.size || get(this.schema, 'props.size') || (this.$ELEMENT || {}).size;
     },
     _slotScope() {
-      const properties = ['selection', 'currentPage', 'pageSizes', 'pageSize', 'layout', 'total', 'loading'];
+      const properties = ['selection', 'currentPage', 'pageSizes', 'pageSize', 'layout', 'total'];
       const methods = ['search', 'onSearch', 'onDelete', 'onDeleteMultiple', 'openNew', 'openEdit', 'openDetail', 'openDialog', 'closeDialog'];
       const defaultScope = {
         size: this._size,
+        loading: this.tableLoading,
       };
       return [...properties, ...methods].reduce((result, current) => {
         result[current] = this[current];
@@ -327,8 +337,8 @@ export default {
     },
     // 查询
     search() {
-      if (!this.loading) {
-        this.loading = true;
+      if (!this.tableLoading) {
+        this.tableLoading = true;
         const params = {
           ...this.valueFilter,
           currentPage: this.currentPage,
@@ -342,7 +352,7 @@ export default {
             this.total = response[1] || 0;
           })
           .finally(() => {
-            this.loading = false;
+            this.tableLoading = false;
           });
       }
     },
@@ -12,7 +12,7 @@
 </style>
  
 <template>
-  <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" @show="onTriggerShow">
+  <el-popover class="z-schema-select" popper-class="z-schema-select__popper" v-model="visible" trigger="manual" placement="bottom-start" transition="el-zoom-in-top" @show="onTriggerShow">
     <template #reference>
       <el-input
         v-model="model"
@@ -38,6 +38,7 @@
         ref="schema"
         :value-table.sync="tableData"
         :value-filter="valueFilter"
+        :loading.sync="loading"
         @update:value-filter="e => $emit('update:value-filter', e)"
         :schema="selectSchema"
         :size="selectSize"
@@ -80,6 +81,9 @@ export default {
         const props = context.props || {};
         const keyword = props.keyword;
         const value = props.value || '';
+        if (!keyword) {
+          return h('span', value);
+        }
         const reg = new RegExp(`(${keyword})`, 'g');
         const result = `${value}`.replace(reg, '<font style="color: red;">$1</font>');
         return h('span', { domProps: { innerHTML: result } });
@@ -149,7 +153,9 @@ export default {
       visible: false,
       inputHovering: false,
       tableData: [],
+      loading: false,
       loaded: false,
+      inFocus: false,
     };
   },
   created() {
@@ -283,16 +289,22 @@ export default {
       }
     },
     onInputFocus() {
+      this.visible = true;
+      this.inFocus = true;
       if (!this.allowCreate) {
         this.model = '';
       }
     },
     onInputBlur() {
+      this.inFocus = false;
       if (!this.visible) {
         this.model = this.selectedLabel;
       }
     },
     onClickoutside() {
+      if (!this.inFocus) {
+        this.visible = false;
+      }
       if (this.visible) {
         this.model = this.selectedLabel;
         this.query = '';
@@ -311,7 +323,6 @@ export default {
       event.stopPropagation();
       this.query = '';
       this.model = '';
-      this.visible = false;
       this.$emit('input', '');
       this.$emit('clear');
       this.$emit('change', '');
...	...	@@ -10,7 +10,7 @@
10	10	</div>
11	11	<!-- 筛选组件 -->
12	12	<div v-if="schema.filter" class="z-schema-page__filter">
13		- <z-schema-filter :size="_size" :schema="schema.filter" :value="valueFilter" @input="e => $emit('update:value-filter', e)" :loading="loading" @search="onSearch">
	13	+ <z-schema-filter :size="_size" :schema="schema.filter" :value="valueFilter" @input="e => $emit('update:value-filter', e)" :loading="tableLoading" @search="onSearch">
14	14	<template v-for="item in getSlotKeys('filter-')" #[item.name]="slotScope">
15	15	<slot :name="item.slot" v-bind="{ ..._slotScope, ...slotScope }"></slot>
16	16	</template>
...	...	@@ -26,7 +26,13 @@
26	26	</div>
27	27	<!-- 表格内容 -->
28	28	<div v-if="schema.table" class="z-schema-page__table">
29		- <z-schema-table :size="_size" :schema="tableSchemaDefaultProps(schema.table)" v-model="tableData" v-loading="loading" @selection-change="onTableSelectionChange">
	29	+ <z-schema-table
	30	+ :size="_size"
	31	+ :schema="tableSchemaDefaultProps(schema.table)"
	32	+ v-model="tableData"
	33	+ v-loading="schema.loading !== false ? tableLoading : false"
	34	+ @selection-change="onTableSelectionChange"
	35	+ >
30	36	<template #left>
31	37	<el-table-column v-if="schema.selection !== false" type="selection" width="40" align="center"></el-table-column>
32	38	</template>
...	...	@@ -165,7 +171,7 @@ setKeysDefault(['value-table'], {
165	171	},
166	172	});
167	173	setKeysDefault(['size', 'dialogTitle', 'dialogType'], String);
168		-setKeysDefault(['dialogVisible', 'auto'], Boolean);
	174	+setKeysDefault(['dialogVisible', 'auto', 'loading'], Boolean);
169	175	setKeysDefault(['api-search', 'api-submit', 'api-new', 'api-edit', 'api-get', 'api-detail', 'api-delete'], Function);
170	176
171	177	export default {
...	...	@@ -198,7 +204,7 @@ export default {
198	204	detailSchema: filterout(cloneDeep(this.schema.form \|\| {}), ['is', 'rules']),
199	205	detail: this.valueDetail \|\| {},
200	206	tableData: this.valueTable \|\| [],
201		- loading: false,
	207	+ tableLoading: this.loading \|\| false,
202	208	submitting: false,
203	209	dialogLoading: false,
204	210	};
...	...	@@ -239,6 +245,9 @@ export default {
239	245	tableData(val) {
240	246	this.$emit('update:value-table', val);
241	247	},
	248	+ tableLoading(val) {
	249	+ this.$emit('update:loading', val);
	250	+ },
242	251	},
243	252	computed: {
244	253	slotKeys() {
...	...	@@ -248,10 +257,11 @@ export default {
248	257	return this.size \|\| get(this.schema, 'props.size') \|\| (this.$ELEMENT \|\| {}).size;
249	258	},
250	259	_slotScope() {
251		- const properties = ['selection', 'currentPage', 'pageSizes', 'pageSize', 'layout', 'total', 'loading'];
	260	+ const properties = ['selection', 'currentPage', 'pageSizes', 'pageSize', 'layout', 'total'];
252	261	const methods = ['search', 'onSearch', 'onDelete', 'onDeleteMultiple', 'openNew', 'openEdit', 'openDetail', 'openDialog', 'closeDialog'];
253	262	const defaultScope = {
254	263	size: this._size,
	264	+ loading: this.tableLoading,
255	265	};
256	266	return [...properties, ...methods].reduce((result, current) => {
257	267	result[current] = this[current];
...	...	@@ -327,8 +337,8 @@ export default {
327	337	},
328	338	// 查询
329	339	search() {
330		- if (!this.loading) {
331		- this.loading = true;
	340	+ if (!this.tableLoading) {
	341	+ this.tableLoading = true;
332	342	const params = {
333	343	...this.valueFilter,
334	344	currentPage: this.currentPage,
...	...	@@ -342,7 +352,7 @@ export default {
342	352	this.total = response[1] \|\| 0;
343	353	})
344	354	.finally(() => {
345		- this.loading = false;
	355	+ this.tableLoading = false;
346	356	});
347	357	}
348	358	},
...	...
...	...	@@ -12,7 +12,7 @@
12	12	</style>
13	13
14	14	<template>
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" @show="onTriggerShow">
	15	+ <el-popover class="z-schema-select" popper-class="z-schema-select__popper" v-model="visible" trigger="manual" placement="bottom-start" transition="el-zoom-in-top" @show="onTriggerShow">
16	16	<template #reference>
17	17	<el-input
18	18	v-model="model"
...	...	@@ -38,6 +38,7 @@
38	38	ref="schema"
39	39	:value-table.sync="tableData"
40	40	:value-filter="valueFilter"
	41	+ :loading.sync="loading"
41	42	@update:value-filter="e => $emit('update:value-filter', e)"
42	43	:schema="selectSchema"
43	44	:size="selectSize"
...	...	@@ -80,6 +81,9 @@ export default {
80	81	const props = context.props \|\| {};
81	82	const keyword = props.keyword;
82	83	const value = props.value \|\| '';
	84	+ if (!keyword) {
	85	+ return h('span', value);
	86	+ }
83	87	const reg = new RegExp(`(${keyword})`, 'g');
84	88	const result = `${value}`.replace(reg, '<font style="color: red;">$1</font>');
85	89	return h('span', { domProps: { innerHTML: result } });
...	...	@@ -149,7 +153,9 @@ export default {
149	153	visible: false,
150	154	inputHovering: false,
151	155	tableData: [],
	156	+ loading: false,
152	157	loaded: false,
	158	+ inFocus: false,
153	159	};
154	160	},
155	161	created() {
...	...	@@ -283,16 +289,22 @@ export default {
283	289	}
284	290	},
285	291	onInputFocus() {
	292	+ this.visible = true;
	293	+ this.inFocus = true;
286	294	if (!this.allowCreate) {
287	295	this.model = '';
288	296	}
289	297	},
290	298	onInputBlur() {
	299	+ this.inFocus = false;
291	300	if (!this.visible) {
292	301	this.model = this.selectedLabel;
293	302	}
294	303	},
295	304	onClickoutside() {
	305	+ if (!this.inFocus) {
	306	+ this.visible = false;
	307	+ }
296	308	if (this.visible) {
297	309	this.model = this.selectedLabel;
298	310	this.query = '';
...	...	@@ -311,7 +323,6 @@ export default {
311	323	event.stopPropagation();
312	324	this.query = '';
313	325	this.model = '';
314		- this.visible = false;
315	326	this.$emit('input', '');
316	327	this.$emit('clear');
317	328	this.$emit('change', '');
...	...