n20-common-lib 3.0.97 → 3.0.99

package/package.json

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

package/src/components/AdvancedFilter/index.vue

@@ -7,7 +7,7 @@
         :key="getOnlyKey(item)"
         :class="[prefixCls + '-item', activeClass(item)]"
         :label="item.label"
-        :required="item.required !== undefined || item.required !== null ? item.required : false"
+        :required="!!item.required"
         :disabled="item.props && item.props.disabled"
       >
         <div :class="prefixCls + '-content'">
@@ -313,38 +313,24 @@ export default {
       return this.model
     },
     activeClass(item) {
-      const getFlag = () => {
-        if (Array.isArray(this.model[item.value])) {
-          return this.model[item.value].length > 0 ? this.prefixCls + '-active' : ''
-        } else {
-          return this.model[item.value] !== null &&
-            this.model[item.value] !== undefined &&
-            this.model[item.value] !== ''
-            ? this.prefixCls + '-active'
-            : ''
-        }
+      // 判断值是否有效（非空）
+      const hasValue = (val) => {
+        if (Array.isArray(val)) return val.length > 0
+        return val !== null && val !== undefined && val !== ''
       }
-      let flag = ''
-      switch (item.type) {
-        case 'numberrange':
-          flag =
-            this.model[item.startValue] !== null &&
-            this.model[item.endValue] !== null &&
-            this.model[item.startValue] !== undefined &&
-            this.model[item.endValue] !== undefined
-              ? this.prefixCls + '-active'
-              : ''
-          break
-        case 'daterange':
-        case 'datetimerange':
-        case ' monthrange':
-          flag = this.model[item.startDate] && this.model[item.endDate] ? this.prefixCls + '-active' : ''
-          break
-        default:
-          flag = getFlag()
-          break
+
+      // 判断范围类型是否有效（起止值都存在）
+      const hasRange = (start, end) => hasValue(this.model[start]) && hasValue(this.model[end])
+
+      const rangeTypes = ['daterange', 'datetimerange', 'monthrange']
+
+      if (item.type === 'numberrange') {
+        return hasRange(item.startValue, item.endValue) ? this.prefixCls + '-active' : ''
+      }
+      if (rangeTypes.includes(item.type)) {
+        return hasRange(item.startDate, item.endDate) ? this.prefixCls + '-active' : ''
       }
-      return flag
+      return hasValue(this.model[item.value]) ? this.prefixCls + '-active' : ''
     },
     handleClose(item) {
       switch (item.type) {

package/src/components/Pivot/index.vue

@@ -20,7 +20,7 @@
             @mouseenter="hoveredReportId = report.id"
             @mouseleave="hoveredReportId = null"
           >
-            <i class="v3-icon-report"></i>
+            <i :class="getChartTypeIcon(report.chartType)" class="report-icon"></i>
             <span v-if="editingReportId !== report.id" class="report-name">{{ report.name }}</span>
             <input
               v-else
@@ -70,7 +70,7 @@
         <!-- 内容头部工具栏 -->
         <div class="main-toolbar">
           <div class="toolbar-left">
-            <div >
+            <div>
               <h2 class="report-title">{{ currentReport.name }}</h2>
               <div class="add-to-home-btn" @click="handleAddToHome">
                 <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
@@ -195,13 +195,16 @@
       <!-- 右侧维度配置 -->
       <div class="pivot-sidebar-right" :class="{ collapsed: isRightSidebarCollapsed }">
         <div class="sidebar-header">
-          <span v-if="!isRightSidebarCollapsed" class="sidebar-title">维度配置</span>
+          <template v-if="!isRightSidebarCollapsed">
+            <i class="v3-icon-move-right sidebar-header-collapse" @click="handleToggleRightSidebar"></i>
+            <span class="sidebar-title">维度配置</span>
+          </template>
         </div>
 
         <div class="config-form">
           <!-- 报表名称 -->
           <div class="form-item">
-            <label class="form-label">报表名称</label>
+            <label class="form-label">报表标题</label>
 
             <div class="input-wrapper">
               <input class="form-input" type="text" v-model="currentReport.name" placeholder="请输入报表名称" />
@@ -226,10 +229,7 @@
             <label class="form-label">展示形式</label>
             <div class="select-wrapper" @click="showChartTypeDropdown = !showChartTypeDropdown">
               <div class="select-value">
-                <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
-                  <rect x="1" y="3" width="12" height="8" rx="1" stroke="currentColor" stroke-width="1.5" />
-                  <path d="M3 8V11M7 6V11M11 9V11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
-                </svg>
+                <i :class="getChartTypeIcon(currentReport.chartType)" class="report-icon"></i>
                 <span>{{ getChartTypeLabel(currentReport.chartType) }}</span>
               </div>
               <svg class="select-arrow" width="10" height="10" viewBox="0 0 10 10" fill="none">
@@ -255,6 +255,8 @@
             </div>
           </div>
 
+          <div class="form-divider"></div>
+
           <!-- 分组维度 -->
           <div class="form-item">
             <label class="form-label">
@@ -309,6 +311,8 @@
             </div>
           </div>
 
+          <div class="form-divider"></div>
+
           <!-- 计算指标 -->
           <div class="form-item">
             <div class="form-label-row">
@@ -897,6 +901,17 @@ export default {
       return chart ? chart.label : '柱状图'
     },
 
+    // 获取图表类型图标
+    getChartTypeIcon(type) {
+      const iconMap = {
+        bar: 'v3-icon-chart-histogram',
+        line: 'v3-icon-chart-line',
+        pie: 'v3-icon-chart-pie',
+        horizontalBar: 'v3-icon-histogram'
+      }
+      return iconMap[type] || 'v3-icon-chart-histogram'
+    },
+
     // 获取聚合类型标签
     getAggregateLabel(type) {
       const agg = this.aggregateTypes.find((t) => t.value === type)
@@ -1113,11 +1128,14 @@ export default {
   .el-dialog {
     box-sizing: border-box;
     margin-top: 3vh !important;
-    max-height: 95vh;
+    max-height: 94vh;
     display: flex;
     flex-direction: column;
     .el-dialog__body {
       padding: 0;
+      flex: 1;
+      min-height: 0;
+      overflow: hidden;
     }
   }
 }
@@ -1125,7 +1143,6 @@ export default {
   display: flex;
   background: #fff;
   height: 100%;
-  min-height: 800px;
   border-radius: 8px;
   overflow: hidden;
   font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
@@ -1447,6 +1464,8 @@ export default {
   flex: 1;
   padding: 16px;
   overflow: hidden;
+  border: 1px solid #e5e6eb;
+  border-radius: 4px;
 }
 
 .chart-view,
@@ -1459,7 +1478,6 @@ export default {
 .chart-container {
   width: 100%;
   height: 100%;
-  min-height: 500px;
 }
 
 .table-container {
@@ -1577,14 +1595,34 @@ export default {
   line-height: 22px; /* 157.143% */
 }
 
+.pivot-sidebar-right .sidebar-header-collapse {
+  font-size: 14px;
+  color: #86909c;
+  cursor: pointer;
+  transition: color 0.2s;
+  &:hover {
+    color: #1d2129;
+  }
+}
+
 .config-form {
   flex: 1;
-  padding: 16px;
+  padding: 0 16px;
   overflow-y: auto;
+
+  .form-item:first-child {
+    margin-top: 16px;
+  }
 }
 
 .form-item {
-  margin-bottom: 20px;
+  margin-bottom: 16px;
+}
+
+.form-divider {
+  height: 1px;
+  background-color: #e5e6eb;
+  margin: 16px 0;
 }
 
 .form-label {
@@ -1669,8 +1707,8 @@ export default {
   position: relative;
   display: flex;
   align-items: center;
-  height: 32px;
-  padding: 0 12px;
+  gap: 4px;
+  padding: 4px 12px;
   background: #fff;
   border: 1px solid #e5e6eb;
   border-radius: 4px;
@@ -1689,6 +1727,17 @@ export default {
   gap: 8px;
   font-size: 14px;
   color: #1d2129;
+  .report-icon {
+    width: 16px;
+    height: 16px;
+    font-size: 16px;
+    line-height: 16px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 0;
+    color: #007aff;
+  }
 }
 
 .select-value .placeholder {
@@ -1696,7 +1745,7 @@ export default {
 }
 
 .select-arrow {
-  color: #86909c;
+  color: #4e5969;
   transition: transform 0.2s;
 }
 

package/src/components/ProFilterView/index.vue

@@ -5,7 +5,7 @@
       <div class="flex-box flex-v">
         <el-popover
           v-if="bussId"
-          v-model="stVisible"
+          v-model="viewPopoverVisible"
           popper-class="pro-filter-view-popover"
           placement="bottom-start"
           trigger="click"
@@ -19,10 +19,10 @@
             </div>
           </el-button>
           <div class="p-s">
-            <cl-input-search v-model="val" class="w-100p" placeholder="请输入关键字" />
+            <cl-input-search v-model="searchKeyword" 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">
+              <cl-drag-list class="flex-item" :list="filteredList" :hide-delete="true" @change="handleDragSort">
                 <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)">{{
@@ -67,7 +67,7 @@
           </div>
         </el-button>
         <div class="flex-box flex-v">
-          <el-button icon="v3-icon-filter" class="m-r-s botton" @click="multiple = !multiple">{{
+          <el-button icon="v3-icon-filter" class="m-r-s botton" @click="filterExpanded = !filterExpanded">{{
             '筛选' | $lc
           }}</el-button>
           <slot name="rightContent"></slot>
@@ -77,8 +77,8 @@
     <cl-advanced-filter
       ref="filter"
       class="filter"
-      :class="{ 'is-hidden': !multiple }"
-      :visible.sync="multiple"
+      :class="{ 'is-hidden': !filterExpanded }"
+      :visible.sync="filterExpanded"
       :filter-id="filterId"
       :buss-id="bussId"
       :model="searchValue"
@@ -95,11 +95,7 @@
       <div slot="prefix">
         <slot name="prefix"></slot>
       </div>
-      <!-- 使用作用域插槽传递 searchValue -->
-      <template
-        v-for="filter in filterList.filter((item) => item.type === 'slot' && $scopedSlots[item.slotName])"
-        #[filter.slotName]="{ model }"
-      >
+      <template v-for="filter in slotFiltersWithValue" #[filter.slotName]="{ model }">
         <slot
           :name="filter.slotName"
           :model="model"
@@ -107,6 +103,15 @@
           :input="(val) => handleSlotInput(filter.value, val)"
         ></slot>
       </template>
+      <!-- 无 value 的 slot（如 startDate/endDate 多值绑定），传递 searchValue 让父组件自行管理 -->
+      <template v-for="filter in slotFiltersWithoutValue" #[filter.slotName]="{ model }">
+        <slot
+          :name="filter.slotName"
+          :model="model"
+          :search-value="searchValue"
+          :update-search-value="updateSearchValue"
+        ></slot>
+      </template>
       <div slot="suffix">
         <slot name="suffix"></slot>
       </div>
@@ -131,27 +136,23 @@
           <div>{{ $lc('数据范围') }}</div>
           <div style="color: var(--color-primary); cursor: pointer" @click="typeChange">
             <i class="v3-icon-switch"></i>
-            <span v-if="form.viewType === '0'"> {{ $lc('高级查询') }}</span>
+            <span v-if="form.viewType === VIEW_TYPE.ADVANCED"> {{ $lc('高级查询') }}</span>
             <span v-else> {{ $lc('基础查询') }}</span>
           </div>
         </div>
         <cl-advanced-filter
-          v-if="form.viewType === '0'"
+          v-if="form.viewType === VIEW_TYPE.ADVANCED"
           ref="filter"
-          :key="key"
+          :key="dialogFilterKey"
           class="filter"
-          :visible.sync="multiple"
+          :visible="visible"
           :model="searchForm"
           only-key="id"
           :filter-list="filterList"
           :check-ids="form.keyIds"
           @saveCheckData="saveCheckData"
         >
-          <!-- 使用作用域插槽传递 searchValue -->
-          <template
-            v-for="filter in filterList.filter((item) => item.type === 'slot' && $scopedSlots[item.slotName])"
-            #[filter.slotName]="{ model }"
-          >
+          <template v-for="filter in slotFiltersWithValue" #[filter.slotName]="{ model }">
             <slot
               :name="filter.slotName"
               :model="model"
@@ -159,6 +160,15 @@
               :input="(val) => (searchForm[filter.value] = val)"
             ></slot>
           </template>
+          <!-- 无 value 的 slot（如 startDate/endDate 多值绑定），传递 searchForm 让父组件自行管理 -->
+          <template v-for="filter in slotFiltersWithoutValue" #[filter.slotName]="{ model }">
+            <slot
+              :name="filter.slotName"
+              :model="model"
+              :search-value="searchForm"
+              :update-search-value="(updates) => Object.assign(searchForm, updates)"
+            ></slot>
+          </template>
         </cl-advanced-filter>
         <advancedQuery
           v-else
@@ -168,11 +178,7 @@
           :filter-id="filterId"
           :buss-id="bussId"
         >
-          <!-- 使用作用域插槽传递 slot 类型的过滤器 -->
-          <template
-            v-for="filter in filterList.filter((item) => item.type === 'slot' && $scopedSlots[item.slotName])"
-            #[filter.slotName]="{ model, value, input, disabled }"
-          >
+          <template v-for="filter in slotFiltersWithValue" #[filter.slotName]="{ model, value, input, disabled }">
             <slot
               :name="filter.slotName"
               :model="model"
@@ -181,6 +187,16 @@
               :disabled="disabled"
             ></slot>
           </template>
+          <!-- 无 value 的 slot（如 startDate/endDate 多值绑定），传递 searchForm 让父组件自行管理 -->
+          <template v-for="filter in slotFiltersWithoutValue" #[filter.slotName]="{ model, value, input, disabled }">
+            <slot
+              :name="filter.slotName"
+              :model="model"
+              :search-value="searchForm"
+              :update-search-value="(updates) => Object.assign(searchForm, updates)"
+              :disabled="disabled"
+            ></slot>
+          </template>
         </advancedQuery>
       </el-form>
       <div slot="footer" class="flex-box flex-c flex-v page-button-shadow">
@@ -199,6 +215,8 @@ import ClDragList from '../DragList/index.vue'
 import ClDialog from '../Dialog/index.vue'
 import axios from '../../utils/axios.js'
 
+const VIEW_TYPE = { ADVANCED: '0', BASIC: '1' }
+
 export default {
   name: 'ProFilterView',
   components: {
@@ -234,19 +252,17 @@ export default {
   },
   data() {
     return {
-      val: '',
+      VIEW_TYPE,
+      searchKeyword: '',
       list: ['无视图'],
       selectedItem: '无视图', // 默认选中第一项
-      stVisible: false,
+      viewPopoverVisible: false,
       visible: false,
       isAdd: false,
       form: { userNo: sessionStorage.getItem('userNo'), pageNo: this.filterId },
 
-      multiple: this.defaultExpanded,
-      // 保存的筛选字段
-      checkData: [],
-      key: 0,
-      keyIds: [],
+      filterExpanded: this.defaultExpanded,
+      dialogFilterKey: 0,
       selectItem: '',
       // 高级视图筛选
       conditionGroups: [],
@@ -255,26 +271,41 @@ export default {
       // 普通筛选值
       searchValue: {},
       viewId: undefined,
-      isRefresh: false
+      isRefresh: false,
+      // 视图类型切换时缓存对方数据
+      savedViewConfigs: {}
     }
   },
   computed: {
     /**
      * 本地搜索过滤视图列表
-     * @returns {Array} 根据 val 关键字过滤后的视图列表；val 为空时返回完整列表
+     * @returns {Array} 根据 searchKeyword 过滤后的视图列表；searchKeyword 为空时返回完整列表
      */
     filteredList() {
-      if (!this.val) {
+      if (!this.searchKeyword) {
         return this.list
       }
-      const keyword = this.val.toLowerCase()
+      const keyword = this.searchKeyword.toLowerCase()
       return this.list.filter((item) => item.viewName && item.viewName.toLowerCase().includes(keyword))
     },
+    // 筛选出类型为 slot 且在父组件提供了对应作用域插槽的筛选项
+    slotFilters() {
+      return this.filterList.filter((item) => item.type === 'slot' && this.$scopedSlots[item.slotName])
+    },
+    // 筛选出有 value 字段的 slot 类型筛选项（用于 searchValue 初始化和值传递）
+    slotFiltersWithValue() {
+      return this.slotFilters.filter((item) => item.value)
+    },
+    // 筛选出无 value 字段的 slot 类型筛选项（如 startDate/endDate 多值绑定）
+    slotFiltersWithoutValue() {
+      return this.slotFilters.filter((item) => !item.value)
+    },
     getInitialSearchValue() {
       const obj = {}
-      // 遍历 filterList，为每个 type 为 slot 的项初始化值
+      // 遍历 filterList，为每个 type 为 slot 且有 value 字段的项初始化值
+      // 注意：跳过无 value 的 slot（如 startDate/endDate 多值绑定），这些由父组件在 slot 内部管理
       this.filterList.forEach((item) => {
-        if (item.type === 'slot') {
+        if (item.type === 'slot' && item.value) {
           obj[item.value] = undefined
         }
       })
@@ -335,8 +366,14 @@ export default {
     this.searchValue = { ...this.getInitialSearchValue, ...this.initialValue }
   },
   methods: {
+    updateSearchValue(updates) {
+      console.log(updates, 'updates')
+      Object.assign(searchValue, updates)
+    },
     // 处理 slot 类型字段的输入事件，同时更新 searchValue 和 initialValue
     handleSlotInput(fieldName, val) {
+      // 防御性检查：如果 fieldName 无效，不执行任何操作
+      if (!fieldName) return
       // 更新 searchValue
       this.searchValue[fieldName] = val
       // 同步更新 initialValue，确保双向绑定生效
@@ -381,8 +418,40 @@ export default {
       this.$emit('filter', this.filterObj, 'clean')
     },
     handleClear() {
-      this.searchValue = { ...this.getInitialSearchValue }
-      this.$emit('filter', this.filterObj, 'clear')
+      // 收集 required 项的当前值，清空时保留
+      const preserved = {}
+      this.filterList.forEach((item) => {
+        if (!item.required) return
+        if (item.type === 'daterange' || item.type === 'datetimerange' || item.type === 'monthrange') {
+          if (item.startDate && this.searchValue[item.startDate] !== undefined) {
+            preserved[item.startDate] = this.searchValue[item.startDate]
+          }
+          if (item.endDate && this.searchValue[item.endDate] !== undefined) {
+            preserved[item.endDate] = this.searchValue[item.endDate]
+          }
+        } else if (item.type === 'numberrange') {
+          if (item.startValue && this.searchValue[item.startValue] !== undefined) {
+            preserved[item.startValue] = this.searchValue[item.startValue]
+          }
+          if (item.endValue && this.searchValue[item.endValue] !== undefined) {
+            preserved[item.endValue] = this.searchValue[item.endValue]
+          }
+        } else if (item.value && this.searchValue[item.value] !== undefined) {
+          preserved[item.value] = this.searchValue[item.value]
+        }
+      })
+      this.searchValue = { ...this.getInitialSearchValue, ...preserved }
+      // 直接构建 payload，绕过 filterObj 避免 initialValue 重新注入
+      this.$emit(
+        'filter',
+        {
+          conditionGroups: this.conditionGroups,
+          searchValue: { ...this.searchValue },
+          viewId: this.selectItem ? this.selectItem.viewId : null,
+          viewType: this.selectItem ? this.selectItem.viewType : null
+        },
+        'clear'
+      )
     },
     isEnter() {
       this.$rulesValidateForm('ruleValidate', (valid) => {
@@ -406,7 +475,7 @@ export default {
         .get(`/bems/query/viewColumn/getViewInfo`, { bussId: this.bussId })
         .then((res) => {
           list = res.data.map((item) => {
-            item.keyIds = item.keyIds ? JSON.parse(item.keyIds) : []
+            item.keyIds = this.safeParse(item.keyIds, [])
             return item
           })
           this.list = [
@@ -434,13 +503,13 @@ export default {
     // 新增
     add() {
       this.isRefresh = false
-      this.stVisible = false
+      this.viewPopoverVisible = false
       this.visible = true
       this.isAdd = true
       this.form = {
         userNo: sessionStorage.getItem('userNo'),
         pageNo: this.filterId,
-        viewType: '0' // 明确设置 type 为 1
+        viewType: VIEW_TYPE.ADVANCED
       }
       this.viewId = undefined
       this.form.keyIds = []
@@ -449,30 +518,37 @@ export default {
         ...this.getInitialSearchValue
       }
       // 新建时重置切换缓存
-      this._savedViewConfigs = {}
+      this.savedViewConfigs = {}
     },
     // 修改
     edit(item, isRefresh = false) {
       this.isRefresh = isRefresh
       console.log(item)
-      this.stVisible = false
+      this.viewPopoverVisible = false
       this.visible = true
       this.isAdd = false
-      this.key++
+      this.dialogFilterKey++
       // 赋值操作
       this.form = item
       this.viewId = item.viewId
       // 初始化两种类型的已保存数据缓存，供 typeChange 切换时恢复使用
-      this._savedViewConfigs = {}
-      if (item.viewType === '0') {
-        const parsed = JSON.parse(item.viewConfig || '{}')
+      this.savedViewConfigs = {}
+      if (item.viewType === VIEW_TYPE.ADVANCED) {
+        const parsed = this.safeParse(item.viewConfig)
         this.searchForm = { ...this.getInitialSearchValue, ...parsed }
-        this._savedViewConfigs['0'] = { ...parsed }
+        this.savedViewConfigs[VIEW_TYPE.ADVANCED] = { ...parsed }
       } else {
-        const parsed = JSON.parse(item.viewConfig || '{}')
+        const parsed = this.safeParse(item.viewConfig)
         this.conditionGroups = parsed.conditionGroups || []
 
-        this._savedViewConfigs['1'] = { conditionGroups: this.conditionGroups }
+        this.savedViewConfigs[VIEW_TYPE.BASIC] = { conditionGroups: this.conditionGroups }
+      }
+    },
+    safeParse(str, fallback = {}) {
+      try {
+        return JSON.parse(str || '{}')
+      } catch {
+        return fallback
       }
     },
     // 保存筛选条件
@@ -481,29 +557,31 @@ export default {
         return item.id
       })
     },
-    // 保存视图
-    saveSt() {
-      // 如果没有 bussId，不保存视图
-      if (!this.bussId) {
-        this.$message.warning('缺少业务ID，无法保存视图')
-        return
-      }
-
+    // 构建视图保存请求体
+    buildViewPayload() {
       let viewConfig
       let keyIds
-      if (this.form.viewType === '0') {
+      if (this.form.viewType === VIEW_TYPE.ADVANCED) {
         viewConfig = JSON.stringify(this.searchForm)
         keyIds = this.form.keyIds
       } else {
         viewConfig = JSON.stringify({ conditionGroups: this.conditionGroups })
         keyIds = []
       }
-      console.log(this.conditionGroups)
       this.form.viewConfig = viewConfig
-
-      const hasEmptyValue = this.conditionGroups.some((group) =>
+      return {
+        viewName: this.form.viewName,
+        viewType: this.form.viewType,
+        bussId: this.bussId,
+        viewConfig,
+        keyIds: JSON.stringify(keyIds),
+        viewId: this.viewId
+      }
+    },
+    // 检查基础查询条件是否有空值
+    hasEmptyCondition() {
+      return this.conditionGroups.some((group) =>
         group.conditions.some((condition) => {
-          // operator 5(为空) 和 6(不为空) 不需要填写 value
           if (condition.operator === 5 || condition.operator === 6) {
             return false
           }
@@ -511,35 +589,34 @@ export default {
           return val === null || val === undefined || val === '' || (Array.isArray(val) && val.length === 0)
         })
       )
+    },
+    // 保存视图
+    saveSt() {
+      if (!this.bussId) {
+        this.$message.warning('缺少业务ID，无法保存视图')
+        return
+      }
+
+      const payload = this.buildViewPayload()
+      const hasEmptyValue = this.hasEmptyCondition()
 
       this.$refs.form.validate(async (valid) => {
         if (!valid) {
           this.$message.error('请输入视图名称')
           return
         }
-
-        if (this.form.viewType === '0' && !keyIds.length) {
+        if (this.form.viewType === VIEW_TYPE.ADVANCED && !this.form.keyIds.length) {
           this.$message.warning('至少添加一个条件')
           return
         }
-        if (this.form.viewType === '1') {
+        if (this.form.viewType === VIEW_TYPE.BASIC) {
           if (!this.conditionGroups.length || hasEmptyValue) {
             this.$message.warning('至少添加一个条件')
             return
           }
         }
 
-        // 保存筛选视图
-        const obj = {
-          viewName: this.form.viewName,
-          viewType: this.form.viewType,
-          bussId: this.bussId,
-          viewConfig: this.form.viewConfig,
-          keyIds: JSON.stringify(keyIds),
-          viewId: this.viewId
-        }
-
-        axios.post('/bems/query/viewColumn/saveOrUpdateViewInfo', obj).then((res) => {
+        axios.post('/bems/query/viewColumn/saveOrUpdateViewInfo', payload).then((res) => {
           if (res.code !== 200) {
             return false
           }
@@ -567,7 +644,7 @@ export default {
     // 选中视图
     handleSelect(item) {
       console.log(item)
-      this.stVisible = false
+      this.viewPopoverVisible = false
       this.selectItem = item
       this.selectedItem = item.viewName
       if (item.viewName === '无视图') {
@@ -575,17 +652,18 @@ export default {
         this.searchValue = {}
         this.conditionGroups = []
       }
-      if (item.viewType === '0') {
-        this.searchForm = JSON.parse(item.viewConfig)
-        this.searchValue = JSON.parse(item.viewConfig)
-      } else if (item.viewType === '1') {
-        this.conditionGroups = JSON.parse(item.viewConfig)?.conditionGroups || []
+      if (item.viewType === VIEW_TYPE.ADVANCED) {
+        const config = this.safeParse(item.viewConfig)
+        this.searchForm = config
+        this.searchValue = config
+      } else if (item.viewType === VIEW_TYPE.BASIC) {
+        this.conditionGroups = this.safeParse(item.viewConfig).conditionGroups || []
         this.searchValue = { ...this.getInitialSearchValue }
       }
       this.$emit('filter', this.filterObj, 'filter')
     },
     // 拖动保存视图列表
-    fn(list) {
+    handleDragSort(list) {
       console.log('当前list:', list)
     },
     /**
@@ -594,23 +672,22 @@ export default {
      * 若无已保存数据则重置为初始值
      */
     typeChange() {
-      this.form.viewType = this.form.viewType === '0' ? '1' : '0'
-      // 切换到基础查询（viewType === '0'）
-      if (this.form.viewType === '0') {
+      this.form.viewType = this.form.viewType === VIEW_TYPE.ADVANCED ? VIEW_TYPE.BASIC : VIEW_TYPE.ADVANCED
+      // 切换到高级查询
+      if (this.form.viewType === VIEW_TYPE.ADVANCED) {
         this.conditionGroups = []
         // 若已有保存的 viewConfig 且原始类型也是基础查询，则恢复已保存的搜索条件
-        const savedConfig = this._savedViewConfigs && this._savedViewConfigs['0']
+        const savedConfig = this.savedViewConfigs[VIEW_TYPE.ADVANCED]
         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 }
+        // 切换到基础查询，保存当前高级查询数据
+        this.savedViewConfigs[VIEW_TYPE.ADVANCED] = { ...this.searchForm }
         // 恢复已保存的高级查询数据，若无则重置
-        const savedConfig = this._savedViewConfigs['1']
+        const savedConfig = this.savedViewConfigs[VIEW_TYPE.BASIC]
         if (savedConfig) {
           this.conditionGroups = savedConfig.conditionGroups || []
         } else {
@@ -624,17 +701,15 @@ export default {
      * 供下游调用以恢复组件初始状态
      */
     resetState() {
-      this.val = ''
+      this.searchKeyword = ''
       this.selectedItem = '无视图'
       this.selectItem = ''
       this.searchValue = { ...this.getInitialSearchValue, ...this.initialValue }
       this.searchForm = { ...this.getInitialSearchValue }
       this.conditionGroups = []
-      this.multiple = this.defaultExpanded
-      this.checkData = []
-      this.keyIds = []
+      this.filterExpanded = this.defaultExpanded
       this.viewId = undefined
-      this._savedViewConfigs = {}
+      this.savedViewConfigs = {}
     }
   }
 }