n20-common-lib 3.0.34 → 3.0.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "n20-common-lib",
-  "version": "3.0.34",
+  "version": "3.0.36",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -68,7 +68,7 @@
     "vue-jsonp": "2.0.0",
     "vuedraggable": "*",
     "webpack-duplicate-relano-plugin": "^0.1.0",
-    "xe-utils": "^4.0.2",
+    "xe-utils": "4.0.2",
     "ngraph.events": "1.2.2"
   },
   "devDependencies": {

package/src/assets/css/filter.scss

@@ -7,10 +7,47 @@
   max-height: 300px;
   overflow-y: auto;
 }
+
+.el-popover.pro-filter-view-popover {
+  padding: 8px;
+  margin-top: 4px;
+  max-width: 256px;
+  // .popper__arrow::after {
+  //   border-width: 0;
+  // }
+
+  .filter-view-wrapper {
+    max-height: 300px;
+    overflow-y: auto;
+  }
+  /* more 图标默认隐藏，hover 列表项时显示 */
+  .proFilterView-list-item .proFilterView-list-item__more {
+    visibility: hidden;
+  }
+  .proFilterView-list-item:hover .proFilterView-list-item__more {
+    visibility: visible;
+  }
+  /* 视图名称单行溢出省略 */
+  .proFilterView-list-item__name {
+    flex: 1;
+    width: 180px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+}
+// .pro-filter-view-popover[x-placement^='bottom'] .popper__arrow {
+//   top: 0;
+//   left: 0;
+//   border-bottom-color: transparent;
+// }
+
 // 高级筛选
 .ProFilterView {
   width: 100%;
   font-size: 14px;
+
   .top {
     padding: 12px 0px;
     border-bottom: 1px solid #e5e6eb !important;
@@ -20,7 +57,7 @@
     border-bottom: 1px solid #e5e6eb !important;
   }
   .flex-item {
-    border-bottom: 1px solid var(--button-disabled-background-color);
+    // border-bottom: 1px solid var(--button-disabled-background-color);
     padding: 0 8px;
     margin-top: 8px;
   }
@@ -30,6 +67,14 @@
     border-radius: 4px;
     background: var(--fill-2, #f2f3f5);
     border: none;
+    .popover-title {
+      display: inline-block;
+      max-width: 120px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      cursor: pointer;
+    }
   }
   .activiti {
     background: var(--color-primary-light-9);
@@ -41,16 +86,26 @@
     margin-left: 0;
   }
 }
+.ProFilterView_divider {
+  width: 100%;
+  height: 1px;
+  background-color: #e5e5e5;
+  margin-top: 8px;
+}
+
 .ProFilterView-add {
   cursor: pointer;
   margin-top: 8px;
+
   img {
     margin-right: 12px;
   }
   padding: 8px;
   height: 20px;
   line-height: 20px;
+  position: relative;
 }
+
 .ProFilterView-add:hover {
   border-radius: 2px;
   background: var(--fill-1, #f7f8fa);

package/src/components/AdvancedFilter/index.vue

@@ -95,7 +95,7 @@
           prop="viewName"
           :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
         >
-          <el-input v-model="form.viewName" />
+          <el-input maxlength="30" show-word-limit v-model="form.viewName" />
         </el-form-item>
       </el-form>
       <div slot="footer" class="flex-box flex-c flex-v page-button-shadow">

package/src/components/FileUploadTable/FileUploadTableV3.vue

@@ -54,7 +54,7 @@
             <div v-for="(row, rowIndex) in group.rows" :key="`${group.typeValue}-${rowIndex}`" class="file-card">
               <div class="file-info">
                 <img v-if="matchFileExtension(row[keys.name], ['word', 'doc', 'docx'])" src="./46.svg" class="m-r-s" />
-                <img v-if="matchFileExtension(row[keys.name], ['xlsx', 'xls'])" src="./60.svg" class="m-r-s" />
+                <img v-if="matchFileExtension(row[keys.name], ['xlsx', 'xls', 'csv'])" src="./60.svg" class="m-r-s" />
                 <img v-if="matchFileExtension(row[keys.name], ['pdf'])" src="./37.svg" class="m-r-s" />
                 <div>
                   <div class="file-name" :title="row[keys.name]">{{ row[keys.name] }}</div>
@@ -669,4 +669,4 @@ export default {
     }
   }
 }
-</script>
+</script>

package/src/components/ProFilterView/advancedQuery.vue

@@ -177,7 +177,7 @@
       <el-button v-if="value.length > 0" type="text" class="add-condition-btn" @click.stop="addCondition(0)">
         <i class="v3-icon-add-fill"></i> 添加条件
       </el-button>
-      <el-button type="text" class="add-group-btn" @click.stop="addConditionGroup(groupIndex)">
+      <el-button type="text" class="add-group-btn" @click.stop="addConditionGroup()">
         <i class="v3-icon-add-fill"></i> 添加条件组
       </el-button>
     </div>

package/src/components/ProFilterView/index.vue

@@ -2,43 +2,48 @@
   <div class="ProFilterView">
     <div class="flex-box flex-lr flex-v top">
       <div class="flex-box flex-v">
-        <el-popover v-model="stVisible" placement="bottom" trigger="click" class="m-r">
+        <el-popover
+          v-model="stVisible"
+          popper-class="pro-filter-view-popover"
+          placement="bottom-start"
+          trigger="click"
+          class="m-r"
+        >
           <el-button slot="reference" class="botton" :class="{ activiti: selectedItem !== '所有的' }">
             <div class="flex-box flex-v m-r">
               <i class="v3-icon-inbox"></i>
-              <div style="margin: 0 8px">{{ selectedItem }}</div>
+              <div class="popover-title" style="margin: 0 8px" :title="selectedItem">{{ selectedItem }}</div>
               <i class="n20-icon-xiala-moren"></i>
             </div>
           </el-button>
           <div class="p-s">
-            <cl-input-search v-model="val" class="input-w" placeholder="请输入" />
-            <div style="color: var(--color-text-secondary); margin-top: 8px">{{ $lc('自定义视图') }}</div>
-            <cl-drag-list class="flex-item" :list="filteredList" :hide-delete="true" @change="fn">
-              <template v-slot="{ item }">
-                <div
-                  class="proFilterView-list-item"
-                  :class="{ 'is-selected': selectedItem === item.viewName }"
-                  @click="handleSelect(item)"
-                >
-                  <span>{{ item.viewName }}</span>
-                  <i v-if="selectedItem === item.viewName" class="el-icon-check selected-icon"></i>
-                  <el-button
-                    v-if="selectedItem !== item.viewName && item.viewName !== '所有的'"
-                    type="text"
-                    size="mini"
-                    @click.stop="edit(item)"
-                    >{{ $lc('编辑') }}</el-button
-                  >
-                  <el-button
-                    v-if="selectedItem !== item.viewName && item.viewName !== '所有的'"
-                    type="text"
-                    size="mini"
-                    @click.stop="deleteOne(item)"
-                    >{{ $lc('删除') }}</el-button
-                  >
-                </div>
-              </template>
-            </cl-drag-list>
+            <cl-input-search v-model="val" class="w-100p" placeholder="请输入关键字" />
+            <div style="color: var(--color-text-secondary); margin: 12px 0 8px 0">{{ $lc('自定义视图') }}</div>
+            <div class="filter-view-wrapper">
+              <cl-drag-list class="flex-item" :list="filteredList" :hide-delete="true" @change="fn">
+                <template v-slot="{ item }">
+                  <div class="proFilterView-list-item" :class="{ 'is-selected': selectedItem === item.viewName }">
+                    <span class="proFilterView-list-item__name" :title="item.viewName" @click="handleSelect(item)">{{
+                      item.viewName
+                    }}</span>
+                    <i v-if="selectedItem === item.viewName" class="el-icon-check selected-icon"></i>
+                    <el-dropdown
+                      v-if="selectedItem !== item.viewName && item.viewName !== '所有的'"
+                      trigger="click"
+                      class="proFilterView-list-item__more"
+                      @command="(command) => handleCommand(command, item)"
+                    >
+                      <i class="v3-icon-more"></i>
+                      <el-dropdown-menu slot="dropdown">
+                        <el-dropdown-item command="edit">{{ $lc('编辑') }}</el-dropdown-item>
+                        <el-dropdown-item command="delete">{{ $lc('删除') }}</el-dropdown-item>
+                      </el-dropdown-menu>
+                    </el-dropdown>
+                  </div>
+                </template>
+              </cl-drag-list>
+            </div>
+            <div class="ProFilterView_divider"></div>
             <div class="flex-box flex-v flex-l ProFilterView-add">
               <img src="./plus.svg" alt="" />
               <div @click="add">{{ $lc('新建视图') }}</div>
@@ -104,7 +109,7 @@
           prop="viewName"
           :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
         >
-          <el-input v-model="form.viewName" />
+          <el-input v-model="form.viewName" maxlength="30" show-word-limit />
         </el-form-item>
         <div class="flex-box flex-lr flex-v">
           <div>{{ $lc('数据范围') }}</div>
@@ -225,11 +230,16 @@ export default {
     }
   },
   computed: {
+    /**
+     * 本地搜索过滤视图列表
+     * @returns {Array} 根据 val 关键字过滤后的视图列表；val 为空时返回完整列表
+     */
     filteredList() {
       if (!this.val) {
         return this.list
       }
-      return this.list.filter((item) => item.toLowerCase().includes(this.val.toLowerCase()))
+      const keyword = this.val.toLowerCase()
+      return this.list.filter((item) => item.viewName && item.viewName.toLowerCase().includes(keyword))
     },
     getInitialSearchValue() {
       const obj = {}
@@ -262,6 +272,13 @@ export default {
     this.searchValue = { ...this.getInitialSearchValue }
   },
   methods: {
+    handleCommand(command, item) {
+      const commandMap = {
+        edit: () => this.edit(item),
+        delete: () => this.deleteOne(item)
+      }
+      commandMap[command]()
+    },
     setOptions(id, opts) {
       this.$refs.filter.setOptions(id, opts)
       this.filterList.forEach((item) => {
@@ -342,6 +359,8 @@ export default {
       this.searchForm = {
         ...this.getInitialSearchValue
       }
+      // 新建时重置切换缓存
+      this._savedViewConfigs = {}
     },
     // 修改
     edit(item, isRefresh = false) {
@@ -354,10 +373,16 @@ export default {
       // 赋值操作
       this.form = item
       this.viewId = item.viewId
+      // 初始化两种类型的已保存数据缓存，供 typeChange 切换时恢复使用
+      this._savedViewConfigs = {}
       if (item.viewType === '0') {
-        this.searchForm = { ...this.getInitialSearchValue, ...JSON.parse(item.viewConfig) }
+        const parsed = JSON.parse(item.viewConfig || '{}')
+        this.searchForm = { ...this.getInitialSearchValue, ...parsed }
+        this._savedViewConfigs['0'] = { ...parsed }
       } else {
-        this.conditionGroups = JSON.parse(item.viewConfig)?.conditionGroups || []
+        const parsed = JSON.parse(item.viewConfig || '{}')
+        this.conditionGroups = parsed.conditionGroups || []
+        this._savedViewConfigs['1'] = { conditionGroups: this.conditionGroups }
       }
     },
     // 保存筛选条件
@@ -441,12 +466,34 @@ export default {
     fn(list) {
       console.log('当前list:', list)
     },
-    // 查询切换
+    /**
+     * 查询类型切换（基础查询 <-> 高级查询）
+     * 切换时优先从已保存的 viewConfig 中恢复对应类型的数据，
+     * 若无已保存数据则重置为初始值
+     */
     typeChange() {
       this.form.viewType = this.form.viewType === '0' ? '1' : '0'
+      // 切换到基础查询（viewType === '0'）
       if (this.form.viewType === '0') {
         this.conditionGroups = []
+        // 若已有保存的 viewConfig 且原始类型也是基础查询，则恢复已保存的搜索条件
+        const savedConfig = this._savedViewConfigs && this._savedViewConfigs['0']
+        if (savedConfig) {
+          this.searchForm = { ...this.getInitialSearchValue, ...savedConfig }
+        } else {
+          this.searchForm = { ...this.getInitialSearchValue }
+        }
       } else {
+        // 切换到高级查询（viewType === '1'），先保存当前基础查询数据
+        if (!this._savedViewConfigs) this._savedViewConfigs = {}
+        this._savedViewConfigs['0'] = { ...this.searchForm }
+        // 恢复已保存的高级查询数据，若无则重置
+        const savedConfig = this._savedViewConfigs['1']
+        if (savedConfig) {
+          this.conditionGroups = savedConfig.conditionGroups || []
+        } else {
+          this.conditionGroups = []
+        }
         this.searchForm = { ...this.getInitialSearchValue }
       }
     }