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', '');