n20-common-lib 2.22.72 → 2.22.73

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "n20-common-lib",
-  "version": "2.22.72",
+  "version": "2.22.73",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/components/AdvancedFilter/filterItem.vue

@@ -1,8 +1,9 @@
 <template>
-  <el-checkbox-group v-model="checkArrayCalc" :max="maxLength" class="popover-check-box" @change="checkChange">
+  <el-checkbox-group v-model="checkArrayCalc" :disabled="disabled" :max="maxLength" class="popover-check-box" @change="checkChange">
     <vue-draggable
       :list="filterList"
       :animation="200"
+      :disabled="disabled"
       group="dragBox"
       :handle="'.n20-icon-tuodong'"
       @change="dragChange"
@@ -24,6 +25,11 @@ export default {
     vueDraggable: () => importGlobal('vuedraggable', () => import(/*webpackChunkName: "vuedraggable"*/ 'vuedraggable'))
   },
   props: {
+    // 忙碌时禁用勾选和拖拽，保留列表实例及其当前草稿。
+    disabled: {
+      type: Boolean,
+      default: false
+    },
     filterList: {
       type: Array,
       default: () => []

package/src/components/AdvancedFilter/index.vue

@@ -26,29 +26,30 @@
           v-if="!item.isNotClose"
           :key="getOnlyKey(item)"
           :class="['filter_remove', 'n20-icon-yichu']"
-          @click="handleClose(item)"
+          @click="!filterBusy && handleClose(item)"
         ></i>
       </el-form-item>
       <slot name="suffix"></slot>
       <el-form-item :class="prefixCls + '-add'">
-        <el-button v-popover:advanced_popover onlyicon plain icon="el-icon-plus" />
-        <el-popover ref="advanced_popover" placement="bottom-start" trigger="click">
-          <el-input v-model="keyword" clearable class="input-w m-b-s" :placeholder="$lc('搜索筛选条件')" />
+        <el-button v-popover:advanced_popover :loading="filterBusy" :disabled="filterBusy" onlyicon plain icon="el-icon-plus" />
+        <el-popover ref="advanced_popover" :disabled="filterBusy" placement="bottom-start" trigger="click">
+          <el-input v-model="keyword" :disabled="filterBusy" clearable class="input-w m-b-s" :placeholder="$lc('搜索筛选条件')" />
           <div class="flex-box flex-lr">
-            <el-button type="text" @click="allCheck">{{
+            <el-button type="text" :disabled="filterBusy" @click="!filterBusy && allCheck()">{{
               checkList.length === filterListS.length ? $lc('取消全选') : $lc('全选')
             }}</el-button>
-            <el-button type="text" @click="defaultCheck">{{ $lc('恢复默认') }}</el-button>
+            <el-button type="text" :disabled="filterBusy" @click="!filterBusy && defaultCheck()">{{ $lc('恢复默认') }}</el-button>
           </div>
           <filterItem
+            :disabled="filterBusy"
             :filter-list="filterListS"
             :max-length="maxLength"
             :check-array.sync="checkList"
             @checked="check"
           />
           <div class="flex-box flex-c m-t-m">
-            <el-button size="mini" type="primary" @click="savaCheck">{{ $lc('确认') }}</el-button>
-            <el-button plain type="primary" @click="cancel">{{ $lc('取消') }}</el-button>
+            <el-button size="mini" type="primary" :disabled="filterBusy" @click="!filterBusy && savaCheck()">{{ $lc('确认') }}</el-button>
+            <el-button plain type="primary" :disabled="filterBusy" @click="!filterBusy && cancel()">{{ $lc('取消') }}</el-button>
           </div>
         </el-popover>
         <el-link class="m-l-s color-primary" :underline="false" icon="n20-icon-query" @click="$emit('search')">
@@ -123,6 +124,7 @@ export default {
   },
   data() {
     return {
+      pendingFilterOperations: 0,
       keyword: '',
       prefixCls,
       remoteList: [],
@@ -133,7 +135,14 @@ export default {
       userNo: sessionStorage.getItem('userNo')
     }
   },
+  beforeCreate() {
+    // Promise 队列和请求令牌无需响应式，避免 Vue 观察异步控制对象。
+    this.filterRuntime = { tail: Promise.resolve(), readId: 0, revision: 0, contextId: 0, destroyed: false, selection: null }
+  },
   computed: {
+    filterBusy() {
+      return this.pendingFilterOperations > 0
+    },
     filterListS: {
       get() {
         if (!this.keyword) {
@@ -149,16 +158,22 @@ export default {
     }
   },
   watch: {
+    filterId: 'invalidateFilterContext',
+    userNo: 'invalidateFilterContext',
     visible: {
       handler(val) {
-        val && this.getFilterList()
+        val && this.loadFilterList()
       }
     }
   },
   created() {
-    this.getFilterList()
+    this.loadFilterList()
     this.getDefaultCheck()
   },
+  beforeDestroy() {
+    this.filterRuntime.destroyed = true
+    this.invalidateFilterContext()
+  },
   methods: {
     getDefaultCheck() {
       let _checkList = this.filterList
@@ -261,15 +276,15 @@ export default {
           break
         }
       }
-      let data = this.GroupData.filter((s) => {
+      // 连续实例调用从上一笔提交快照删除，避免后一笔把已删除条件带回来。
+      const selection = this.filterRuntime.selection
+      const source = selection && this.isFilterContextCurrent(selection.context) ? selection.data : this.GroupData
+      let data = source.filter((s) => {
         return s.id !== item.id
       })
-      this.saveFilter(data).then(({ code }) => {
-        if (code === 200) {
-          this.getFilterList()
-        }
-      })
+      const operation = this.queueFilterSave(data)
       this.$emit('clean', this.model)
+      return operation
     },
     cleared() {
       this.$emit('clear')
@@ -330,15 +345,10 @@ export default {
         })
       }
       this.setModelData(saveCheckArr)
-      this.saveFilter(saveCheckArr).then(({ code }) => {
-        // 如果保存成功
-        if (code === 200) {
-          // 重新获取过滤条件列表
-          this.getFilterList()
-        }
-      })
+      const operation = this.queueFilterSave(saveCheckArr)
       this.$refs.advanced_popover.showPopper = false
       this.$emit('check', saveCheckArr)
+      return operation
     },
     check(keys) {
       this.checkList = keys
@@ -347,83 +357,148 @@ export default {
      * 保存筛选条件
      * @param data
      */
-    saveFilter(data) {
-      return new Promise((resolve) => {
-        axios
-          .post(
-            `/bems/prod_1.0/user/pageHabit?t=${Date.now()}`,
-            {
-              userNo: this.userNo,
-              pageId: this.filterId,
-              showStructure: JSON.stringify(data)
-            },
-            { loading: false, noMsg: true }
-          )
-          .then((res) => {
-            resolve(res)
-          })
+    saveFilter(data, context = this.getFilterContext()) {
+      return axios.post(
+        `/bems/prod_1.0/user/pageHabit?t=${Date.now()}`,
+        { userNo: context.userNo, pageId: context.pageId, showStructure: JSON.stringify(data) },
+        { loading: false, noMsg: true }
+      )
+    },
+    getFilterContext() {
+      return { userNo: this.userNo, pageId: this.filterId, contextId: this.filterRuntime.contextId }
+    },
+    isFilterContextCurrent(context) {
+      return !this.filterRuntime.destroyed && context.userNo === this.userNo &&
+        context.pageId === this.filterId && context.contextId === this.filterRuntime.contextId
+    },
+    invalidateFilterContext() {
+      this.filterRuntime.contextId++
+      this.filterRuntime.readId++
+      this.filterRuntime.selection = null
+    },
+    finishFilterOperation() {
+      if (!this.filterRuntime.destroyed) this.pendingFilterOperations--
+    },
+    reportFilterError(context, message) {
+      if (this.isFilterContextCurrent(context)) this.$message.error(this.$lc(message))
+    },
+    // 生命周期入口消费异常；公开读取方法仍返回可拒绝的 Promise，供实例调用者处理。
+    loadFilterList() {
+      const context = this.getFilterContext()
+      return this.getFilterList().catch(() => {
+        this.reportFilterError(context, '筛选条件加载失败，请重试')
       })
     },
-    /**
-     * 获取筛选条件
-     */
+    queueFilterSave(data) {
+      const runtime = this.filterRuntime
+      if (runtime.destroyed) return Promise.resolve()
+      const context = this.getFilterContext()
+      const snapshot = XEUtils.clone(data, true)
+      const revision = ++runtime.revision
+      runtime.readId++
+      runtime.selection = { context, data: snapshot }
+      this.pendingFilterOperations++
+      // 一笔操作覆盖保存、回读及配置回调；失败不能阻断后续提交。
+      const operation = runtime.tail.then(async () => {
+        if (runtime.destroyed) return
+        let saved = false
+        try {
+          const result = await this.saveFilter(snapshot, context)
+          if (result.code !== 200) throw new Error('Filter save failed')
+          saved = true
+          await this.readFilterList(context, revision)
+        } catch (error) {
+          this.reportFilterError(context, saved
+            ? '筛选条件已保存，但加载失败，请重试'
+            : '筛选条件保存失败，请重试')
+        }
+      }).finally(() => {
+        if (runtime.revision === revision) runtime.selection = null
+        this.finishFilterOperation()
+      })
+      runtime.tail = operation.catch(() => {})
+      return operation
+    },
+    /** 获取筛选条件，外部读取等待已排队的提交，避免读到保存前的配置。 */
     async getFilterList() {
+      if (this.filterRuntime.destroyed) return
+      const context = this.getFilterContext()
+      const revision = this.filterRuntime.revision
+      this.pendingFilterOperations++
+      try {
+        await this.filterRuntime.tail
+        await this.readFilterList(context, revision)
+      } finally {
+        this.finishFilterOperation()
+      }
+    },
+    async readFilterList(context, revision) {
+      const runtime = this.filterRuntime
+      if (!this.isFilterContextCurrent(context)) return
+      const readId = ++runtime.readId
+      const isCurrent = () => this.isFilterContextCurrent(context) &&
+        readId === runtime.readId && revision === runtime.revision
       try {
         const { data } = await axios.post(
           `/bems/prod_1.0/user/pageHabit/list?t=${Date.now()}`,
-          {
-            userNo: this.userNo,
-            pageId: this.filterId
-          },
+          { userNo: context.userNo, pageId: context.pageId },
           { loading: false, noMsg: true }
         )
-
-        const _data = JSON.parse(data)
-
-        await Promise.resolve(this.beforeFilterList(_data))
-
-        if (_data && _data.length > 0) {
-          this.GroupData = _data.map((item) => {
-            for (let i = 0; i < this.filterList.length; i++) {
-              const originItem = this.filterList[i]
-              if (originItem[this.onlyKey] === item[this.onlyKey]) {
-                item.label = originItem.label
-                if (item.options && originItem.options) {
-                  item.options = originItem.options
-                }
+        if (!isCurrent()) return
+        const list = JSON.parse(data)
+        // null 是历史接口的未配置状态；其他非数组内容不能覆盖当前显示。
+        if (list !== null && !Array.isArray(list)) throw new Error('Invalid filter configuration')
+        await Promise.resolve(this.beforeFilterList(list))
+        if (!isCurrent()) return
+        this.applyFilterList(list)
+        this.applyFilterOptions()
+      } catch (error) {
+        // 旧请求失败不干扰当前页面，也不产生过期错误提示。
+        if (isCurrent()) throw error
+      }
+    },
+    applyFilterList(_data) {
+      if (_data && _data.length > 0) {
+        this.GroupData = _data.map((item) => {
+          for (let i = 0; i < this.filterList.length; i++) {
+            const originItem = this.filterList[i]
+            if (originItem[this.onlyKey] === item[this.onlyKey]) {
+              item.label = originItem.label
+              if (item.options && originItem.options) {
+                item.options = originItem.options
               }
             }
-            return item
+          }
+          return item
+        })
+      } else {
+        if (this.removeLoad) {
+          this.GroupData = this.filterList.filter((item) => {
+            if (item.isDefault) {
+              return item
+            }
           })
         } else {
-          if (this.removeLoad) {
-            this.GroupData = this.filterList.filter((item) => {
-              if (item.isDefault) {
-                return item
-              }
-            })
-          } else {
-            this.GroupData = []
-          }
+          this.GroupData = []
         }
-        this.checkList = this.GroupData.map((res) => res.id)
-        this.cancelCheck = XEUtils.clone(this.checkList, true)
-        // 查找排序，在this.filterList中查找this.checkList中的每一项，并将其排在前面
-        this.filterList = this.filterList.sort((a, b) => {
-          if (this.checkList.includes(a[this.onlyKey]) && !this.checkList.includes(b[this.onlyKey])) {
-            return -1
-          }
-          if (!this.checkList.includes(a[this.onlyKey]) && this.checkList.includes(b[this.onlyKey])) {
-            return 1
-          }
-          return 0
-        })
-      } finally {
-        for (const key in getOptionsMap()) {
-          if (Object.hasOwnProperty.call(getOptionsMap(), key)) {
-            const data = getOptionsMap()[key]
-            this.setChoices(key, data)
-          }
+      }
+      this.checkList = this.GroupData.map((res) => res.id)
+      this.cancelCheck = XEUtils.clone(this.checkList, true)
+      // 查找排序，在this.filterList中查找this.checkList中的每一项，并将其排在前面
+      this.filterList.sort((a, b) => {
+        if (this.checkList.includes(a[this.onlyKey]) && !this.checkList.includes(b[this.onlyKey])) {
+          return -1
+        }
+        if (!this.checkList.includes(a[this.onlyKey]) && this.checkList.includes(b[this.onlyKey])) {
+          return 1
+        }
+        return 0
+      })
+    },
+    applyFilterOptions() {
+      for (const key in getOptionsMap()) {
+        if (Object.hasOwnProperty.call(getOptionsMap(), key)) {
+          this.setChoices(key, getOptionsMap()[key])
         }
       }
     }