n20-common-lib 3.0.98 → 3.1.0

package/package.json

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

package/src/components/AdvancedFilter/index.vue

@@ -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

@@ -95,16 +95,23 @@
       <div slot="prefix">
         <slot name="prefix"></slot>
       </div>
-      <template
-        v-for="filter in slotFilters"
-        #[filter.slotName]="{ model }"
-      >
+      <template v-for="filter in slotFilters" #[filter.slotName]="{ model }">
+        <!-- 有 value 的 slot：传递单个值及 input 回调 -->
         <slot
+          v-if="filter.value"
           :name="filter.slotName"
           :model="model"
           :value="searchValue[filter.value]"
           :input="(val) => handleSlotInput(filter.value, val)"
         ></slot>
+        <!-- 无 value 的 slot（如 startDate/endDate 多值绑定），传递 searchValue 让父组件自行管理 -->
+        <slot
+          v-else
+          :name="filter.slotName"
+          :model="model"
+          :search-value="searchValue"
+          :update-search-value="(updates) => Object.assign(searchValue, updates)"
+        ></slot>
       </template>
       <div slot="suffix">
         <slot name="suffix"></slot>
@@ -146,16 +153,23 @@
           :check-ids="form.keyIds"
           @saveCheckData="saveCheckData"
         >
-          <template
-            v-for="filter in slotFilters"
-            #[filter.slotName]="{ model }"
-          >
+          <template v-for="filter in slotFilters" #[filter.slotName]="{ model }">
+            <!-- 有 value 的 slot：传递单个值及 input 回调 -->
             <slot
+              v-if="filter.value"
               :name="filter.slotName"
               :model="model"
               :value="searchForm[filter.value]"
               :input="(val) => (searchForm[filter.value] = val)"
             ></slot>
+            <!-- 无 value 的 slot（如 startDate/endDate 多值绑定），传递 searchForm 让父组件自行管理 -->
+            <slot
+              v-else
+              :name="filter.slotName"
+              :model="model"
+              :search-value="searchForm"
+              :update-search-value="(updates) => Object.assign(searchForm, updates)"
+            ></slot>
           </template>
         </cl-advanced-filter>
         <advancedQuery
@@ -166,17 +180,25 @@
           :filter-id="filterId"
           :buss-id="bussId"
         >
-          <template
-            v-for="filter in slotFilters"
-            #[filter.slotName]="{ model, value, input, disabled }"
-          >
+          <template v-for="filter in slotFilters" #[filter.slotName]="{ model, value, input, disabled }">
+            <!-- 有 value 的 slot：传递单个值及 input 回调 -->
             <slot
+              v-if="filter.value"
               :name="filter.slotName"
               :model="model"
               :value="searchForm[filter.value]"
               :input="(val) => (searchForm[filter.value] = val)"
               :disabled="disabled"
             ></slot>
+            <!-- 无 value 的 slot（如 startDate/endDate 多值绑定），传递 searchForm 让父组件自行管理 -->
+            <slot
+              v-else
+              :name="filter.slotName"
+              :model="model"
+              :search-value="searchForm"
+              :update-search-value="(updates) => Object.assign(searchForm, updates)"
+              :disabled="disabled"
+            ></slot>
           </template>
         </advancedQuery>
       </el-form>
@@ -271,15 +293,15 @@ export default {
     },
     // 筛选出类型为 slot 且在父组件提供了对应作用域插槽的筛选项
     slotFilters() {
-      return this.filterList.filter(
-        (item) => item.type === 'slot' && this.$scopedSlots[item.slotName]
-      )
+      return this.filterList.filter((item) => item.type === 'slot' && this.$scopedSlots[item.slotName])
     },
+
     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
         }
       })
@@ -342,6 +364,8 @@ export default {
   methods: {
     // 处理 slot 类型字段的输入事件，同时更新 searchValue 和 initialValue
     handleSlotInput(fieldName, val) {
+      // 防御性检查：如果 fieldName 无效，不执行任何操作
+      if (!fieldName) return
       // 更新 searchValue
       this.searchValue[fieldName] = val
       // 同步更新 initialValue，确保双向绑定生效
@@ -410,12 +434,16 @@ export default {
       })
       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')
+      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) => {

package/src/components/ShowColumn/index.vue

@@ -587,7 +587,7 @@ export default {
     },
     reset() {
       const baseCols = this.columns.length
-        ? this.columns
+        ? this.columns.filter((col) => !col.defaultHidden)
         : this.checkColumns.filter((col) => col.static !== 'pre' && col.static !== 'next')
       this.fixedColumns = baseCols.filter((col) => col.fixed)
       this.dragList = baseCols.filter((col) => !col.fixed && !col.static)
@@ -642,14 +642,16 @@ export default {
   }
 }
 
-function saveTransform(list, labelKey, isFilter) {
+export function saveTransform(list, labelKey, isFilter) {
   let listN = []
   if (!isFilter) {
     // 遍历列配置列表，将每列转换为存储格式
     list.forEach((c) => {
       // 普通列：有prop属性、无子列、非新增列、无宽度设置
       if (c.prop && !c.children && !c.isNew && !c.width & !c.isNew) {
-        listN.push({ _colKey: 'prop', _colVal: c.prop })
+        const entry = { _colKey: 'prop', _colVal: c.prop }
+        if (c.fixed) entry.fixed = c.fixed
+        listN.push(entry)
       }
       // 特殊类型列：多选/序号/展开列
       else if (c.type && ['selection', 'index', 'expand'].includes(c.type)) {
@@ -703,8 +705,15 @@ function getTransform(list, columnsT, labelKey = 'label') {
       if (d._colKey) {
         // 从columnsT中找到d._colKey等于d._colVal的项
         let column = columnsT.find((c) => c[d._colKey] === d._colVal)
-        // 如果找到，则将其添加到columns中
-        column && columns.push(column)
+        if (column) {
+          // 将保存的 fixed、width 合并到列对象上（避免直接修改 props）
+          if (d.fixed !== undefined || d.width !== undefined) {
+            column = { ...column }
+            if (d.fixed !== undefined) column.fixed = d.fixed
+            if (d.width !== undefined) column.width = d.width
+          }
+          columns.push(column)
+        }
         // 如果d中没有_colKey属性
       } else {
         // 将d添加到columns中

package/src/components/v3/TablePro/index.vue

@@ -387,7 +387,9 @@
 import empty from '../../Empty'
 import tableOperate from '../../TableOperate/index.vue'
 import tableShowColumn from '../../ShowColumn/index.vue'
+import { saveTransform } from '../../ShowColumn/index.vue'
 import OperateBtns from '../../TableProOperateColumn/OperateBtns.vue'
+import axios from '../../../utils/axios'
 
 import { $lc } from '../../../utils/i18n/index.js'
 
@@ -590,7 +592,7 @@ export default {
       isExpand: false,
       isExport: false, // 是否导出
       dialogVisible: false, // 显示列设置对话框
-      checkColumns: this.columns.slice() // 显示列设置对话框中已选择的列（默认使用 columns prop）
+      checkColumns: this.filterDefaultHidden(this.columns) // 显示列设置对话框中已选择的列（默认过滤 defaultHidden 列）
     }
   },
   computed: {
@@ -648,7 +650,7 @@ export default {
       this.colsKey = this.colsKey + 1
       // 没有 pageId 时，columns 变更同步更新 checkColumns
       if (!this.pageId) {
-        this.checkColumns = this.columns.slice()
+        this.checkColumns = this.filterDefaultHidden(this.columns)
       }
     },
     size(val) {
@@ -684,13 +686,32 @@ export default {
     },
     resizableChange({ resizeWidth, columnIndex }) {
       this.checkColumns[columnIndex].width = resizeWidth
-      if(this.showColumn && this.pageId) {
-        this.$refs.showColumn.saveColumns(this.checkColumns)
+      if (this.showColumn && this.pageId) {
+        this.saveColumns()
       }
     },
+    // 过滤 defaultHidden 列：仅在用户未设置过显示列时作为 fallback 使用
+    filterDefaultHidden(columns) {
+      return columns.filter((col) => !col.defaultHidden)
+    },
+    // 保存列配置到后端（固定列、列宽调整等场景复用）
+    saveColumns() {
+      const userNo = sessionStorage.getItem('userNo')
+      const columns = saveTransform(this.checkColumns, this.labelKey, this.isFilter)
+      axios.post(
+        `/bems/prod_1.0/user/pageHabit?t=${Math.random()}`,
+        {
+          userNo,
+          pageId: this.pageId,
+          showStructure: JSON.stringify(columns)
+        },
+        { loading: false }
+      )
+    },
     setColumns(list) {
       if (this.isExport) {
         this.exportFn(list)
+        this.isExport = false
       } else {
         this.checkColumns = list
       }
@@ -698,10 +719,10 @@ export default {
     async getColumns() {
       try {
         const columns = await this.$refs.showColumn.getColumns(this.pageId)
-        this.checkColumns = columns?.length ? columns : this.columns
+        this.checkColumns = columns?.length ? columns : this.filterDefaultHidden(this.columns)
       } catch (err) {
-        // API 请求失败时回退到 columns prop
-        this.checkColumns = this.columns
+        // API 请求失败时回退到过滤后的 columns prop
+        this.checkColumns = this.filterDefaultHidden(this.columns)
       }
     },
     /**
@@ -742,6 +763,10 @@ export default {
       this.$set(item, 'fixed', 'left')
       // 手动触发 colsKey 刷新，让 vxe-table 重新渲染列配置
       this.colsKey = this.colsKey + 1
+      // 固定列后自动保存到后端
+      if (this.showColumn && this.pageId) {
+        this.saveColumns()
+      }
     },
     // 解锁列：移除 fixed 属性，将该列恢复为普通列
     unlockColumn(item) {
@@ -749,6 +774,10 @@ export default {
       this.$delete(item, 'fixed')
       // 手动触发 colsKey 刷新，让 vxe-table 重新渲染列配置
       this.colsKey = this.colsKey + 1
+      // 取消固定后自动保存到后端
+      if (this.showColumn && this.pageId) {
+        this.saveColumns()
+      }
     },
     // 固定操作列为内联列
     fixOperateColumn() {
@@ -1222,11 +1251,21 @@ export default {
       }
     },
     // ========== 列宽计算相关方法 ==========
-    getRowClassName({ row }) {
+    getRowClassName(args) {
+      const rowClassName = this.$attrs['row-class-name'] || this.$attrs.rowClassName
+      // 用户传入了 row-class-name，以传入的为准
+      if (rowClassName && typeof rowClassName === 'function') {
+        return rowClassName(args)
+      }
+      if (rowClassName && typeof rowClassName === 'string') {
+        return rowClassName
+      }
+      // 用户未传入，选中行高亮
       const checkedRows = this.$refs.vxeTable?.getCheckboxRecords(false) || []
       const checkedSet = new Set(checkedRows)
-      return checkedSet.has(row) ? 'v3-n20-table-pro__row-checked' : ''
+      return checkedSet.has(args.row) ? 'v3-n20-table-pro__row-checked' : ''
     },
+
     calcColumnWidth(columns) {
       // 常量配置
       const CHAR_WIDTH = 20 // 每个字符的平均宽度（像素）

package/src/components/ShowColumn/index copy.vue

@@ -1,551 +0,0 @@
-<template>
-  <dialog-wrap
-    ref="dialog"
-    v-drag
-    class="p-t-0"
-    v-bind="$attrs"
-    :visible.sync="visible"
-    :title="title"
-    :width="width"
-    :close-on-click-modal="false"
-    @open="popOpen"
-  >
-    <div class="dialog-view">
-      <div class="flex-box">
-        <div class="left-c flex-column p-t-m bd-r">
-          <div class="flex-box flex-v p-r m-b">
-            <span>{{ header }}</span>
-            <span class="m-l-m color-999">
-              {{ '已选' | $lc }}
-              <span class="color-main">{{ dragList.length }}</span>
-            </span>
-            <el-link :underline="false" type="primary" class="m-l-auto" @click="setAll">{{
-              setState ? $lc('全部清空') : $lc('全部选中')
-            }}</el-link>
-          </div>
-          <div class="flex-item p-r" style="height: 50%; overflow: auto">
-            <el-checkbox-group :value="dragListN.map((d) => d[labelKey])">
-              <template v-if="!columnsGroups">
-                <el-checkbox
-                  v-for="(column, i) in columnsAs"
-                  :key="i"
-                  v-hover-tooltip="column[labelKey]"
-                  :label="column[labelKey]"
-                  :disabled="column.checked"
-                  class="m-t"
-                  @change="(val) => checkChange(val, column)"
-                  >{{ column[labelKey] }}</el-checkbox
-                >
-              </template>
-              <template v-else>
-                <div v-for="gp in columnsGroups" :key="gp.groupId" class="m-b">
-                  <div class="f-s-b font-w600">{{ gp.groupName }}</div>
-                  <template v-for="(column, i) in columnsAs">
-                    <el-checkbox
-                      v-if="column.groupId === gp.groupId"
-                      :key="i"
-                      v-hover-tooltip="column[labelKey]"
-                      :label="column[labelKey]"
-                      :disabled="column.checked"
-                      class="m-t"
-                      @change="(val) => checkChange(val, column)"
-                      >{{ column[labelKey] }}</el-checkbox
-                    >
-                  </template>
-                </div>
-              </template>
-            </el-checkbox-group>
-          </div>
-        </div>
-        <div v-if="!hasPX" class="right-c flex-column p-t-m">
-          <div class="m-b">
-            {{ '当前选定项' | $lc }}
-            <el-link type="primary" style="visibility: hidden">{{ '当前选定项' | $lc }}</el-link>
-          </div>
-          <div class="flex-1 overflow-y">
-            <drag-list :list="dragList" :label-key="labelKey" :in-show-column="true" />
-          </div>
-        </div>
-        <div v-else class="right-tree flex-column p-t-m">
-          <div class="m-b flex-box flex-lr flex-v">
-            {{ '当前选定项' | $lc }}
-            <el-link class="m-r-s" :underline="false" icon="n20-icon-xinzeng" @click="add">{{
-              '新增字段' | $lc
-            }}</el-link>
-          </div>
-          <el-tree
-            ref="menu-tree"
-            class="menu-tree"
-            :data="dragList"
-            :props="{
-              children: 'children',
-              label: 'label'
-            }"
-            node-key="prop"
-            draggable
-            style="width: 200px"
-            :allow-drop="allowDrop"
-          >
-            <span slot-scope="{ node, data }" class="menu-item flex-item flex-box flex-lr flex-v">
-              <span>
-                <i class="n20-drag-icon n20-icon-tuodong"></i>
-                <span
-                  :class="data.isNew ? 'color-success' : 'color-primary'"
-                  class="text-ellipsis pointer"
-                  @click="clickItem(data)"
-                  >{{ data.label }}</span
-                >
-              </span>
-              <el-link
-                class="n20-icon-shanchu"
-                :underline="false"
-                :disabled="data.checked"
-                @click.stop="() => removeMenu(node, data)"
-              />
-            </span>
-          </el-tree>
-        </div>
-      </div>
-    </div>
-    <dialogWrap
-      v-drag
-      :visible.sync="configVisible"
-      :title="'表头设置' | $lc"
-      width="350px"
-      :close-on-click-modal="false"
-    >
-      <el-form :model="configModel">
-        <el-form-item>
-          {{ configModel.label }}
-        </el-form-item>
-        <el-form-item
-          :label="'表头宽度' | $lc"
-          :rules="[
-            {
-              type: 'number',
-              trigger: ['change', 'blur'],
-              validator: validator
-            }
-          ]"
-          prop="width"
-        >
-          <el-input v-model="configModel.width" class="w-224" />
-        </el-form-item>
-        <el-form-item :label="'是否折行' | $lc">
-          <el-radio-group v-model="configModel.wrap">
-            <el-radio :label="true">{{ $lc('是') }}</el-radio>
-            <el-radio :label="false">{{ $lc('否') }}</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item :label="'是否加粗' | $lc">
-          <el-radio-group v-model="configModel.bold">
-            <el-radio :label="true">{{ $lc('是') }}</el-radio>
-            <el-radio :label="false">{{ $lc('否') }}</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item :label="'对齐方式' | $lc">
-          <el-radio-group v-model="configModel.align">
-            <el-radio :label="'right'">{{ $lc('右对齐') }}</el-radio>
-            <el-radio :label="'left'">{{ $lc('左对齐') }}</el-radio>
-            <el-radio :label="'center'">{{ $lc('居中对齐') }}</el-radio>
-          </el-radio-group>
-        </el-form-item>
-      </el-form>
-      <div slot="footer">
-        <el-button type="primary" @click="configSave">{{ '确定' | $lc }}</el-button>
-      </div>
-    </dialogWrap>
-    <dialogWrap v-drag :visible.sync="configVisibleN" :title="'新增' | $lc" width="350px" :close-on-click-modal="false">
-      <el-form :model="configModelN">
-        <el-form-item :label="'名称' | $lc" required>
-          <el-input v-model="configModelN.label" class="input-w" :placeholder="'请输入' | $lc" />
-        </el-form-item>
-      </el-form>
-      <div slot="footer">
-        <el-button type="primary" @click="configSaveN">{{ '确定' | $lc }}</el-button>
-      </div>
-    </dialogWrap>
-    <div slot="footer" class="text-c">
-      <el-button type="primary" @click="setChange">{{ '确定' | $lc }}</el-button>
-      <el-button plain @click="reset">{{ '恢复默认' | $lc }}</el-button>
-    </div>
-  </dialog-wrap>
-</template>
-
-<script>
-import axios from '../../utils/axios'
-import { $lc } from '../../utils/i18n/index'
-
-import { Message } from 'element-ui'
-import forEachs from '../../utils/forEachs'
-import dialogWrap from '../Dialog/index.vue'
-import dragList from '../DragList/index.vue'
-export default {
-  name: 'ShowColumn',
-  components: { dialogWrap, dragList },
-  inheritAttrs: false,
-  props: {
-    dialogVisible: {
-      type: Boolean,
-      default: false
-    },
-    columns: {
-      type: Array,
-      default: () => []
-    },
-    columnsGroups: {
-      type: Array,
-      default: undefined
-    },
-    checkColumns: {
-      type: Array,
-      default: () => []
-    },
-    isExport: {
-      type: Boolean,
-      default: false
-    },
-    isFilter: {
-      type: Boolean,
-      default: false
-    },
-    labelKey: {
-      type: String,
-      default: 'label'
-    },
-    pageId: {
-      type: String,
-      default: undefined
-    },
-    autoSave: {
-      type: Boolean,
-      default: false
-    },
-    width: {
-      type: String,
-      default: '1000px'
-    },
-    hasPX: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {
-      dragList: [],
-      configVisible: false,
-      enabled: false,
-      configModel: {
-        wrap: false,
-        bold: false,
-        align: 'center'
-      },
-      configModelN: {
-        label: '',
-        prop: '',
-        width: 120,
-        isNew: true,
-        children: []
-      },
-      userNo: sessionStorage.getItem('userNo'),
-      configVisibleN: false,
-      dragListN: []
-    }
-  },
-  computed: {
-    title() {
-      if (this.isExport) {
-        return $lc('导出')
-      } else if (this.isFilter) {
-        return $lc('筛选')
-      } else {
-        return $lc('设置显示列')
-      }
-    },
-    header() {
-      if (this.isExport) {
-        return $lc('导出')
-      } else if (this.isFilter) {
-        return $lc('筛选')
-      } else {
-        return $lc('显示列')
-      }
-    },
-    visible: {
-      get() {
-        return this.dialogVisible
-      },
-      set(val) {
-        this.$emit('update:dialogVisible', val)
-      }
-    },
-    setState() {
-      const columnsAs = []
-      forEachs(this.columnsAs, (item) => {
-        columnsAs.push(item)
-      })
-      return columnsAs.length && columnsAs.length === this.dragListN.length
-      // return this.columnsAs.length && this.columnsAs.length === this.dragListN.length
-    },
-    columnsAs: {
-      get() {
-        return this.columns.filter((col) => !col.static)
-      },
-      set(val) {
-        return val
-      }
-    },
-    columnsN() {
-      return this.columns || []
-    }
-  },
-  watch: {
-    dragList: {
-      handler() {
-        let arr = []
-        forEachs(this.dragList, (item) => {
-          arr.push(item)
-        })
-        this.dragListN = arr
-        /* const newArr = arr.filter((item) => {
-          return item.isNew
-        })
-        newArr.forEach((item) => {
-          const index = this.columns.findIndex((col) => col.prop === item.prop || col.label === item.label)
-          if (index === -1) {
-            this.columns.push(item)
-          }
-        }) */
-      },
-      immediate: true,
-      deep: true
-    }
-  },
-  methods: {
-    validator(rule, value, callback) {
-      if (value) {
-        if (value > 300) {
-          return callback(new Error($lc('输入最大宽度不能大于300')))
-        } else if (!/^[1-9]\d*$/.test(value)) {
-          return callback(new Error($lc('表头宽度只能输入正整数')))
-        }
-      }
-      callback()
-    },
-    add() {
-      this.configVisibleN = true
-      this.configModelN.prop = `prop${Date.now()}`
-    },
-    configSaveN() {
-      if (!this.configModelN.label) {
-        return this.$message.warning($lc('请填写名称'))
-      }
-      const hasLabel = this.dragListN.find((item) => {
-        return item.label === this.configModelN.label
-      })
-      if (hasLabel) {
-        return this.$message.warning($lc('已有重名字段,请修改'))
-      }
-      this.dragList.unshift(this.configModelN)
-      // this.columns = [this.configModelN, ...this.columns]
-      this.$message.success($lc('添加成功'))
-      this.configVisibleN = false
-      this.configModelN = {
-        label: '',
-        prop: '',
-        width: 120,
-        isNew: true,
-        children: []
-      }
-    },
-    removeMenu(node, data) {
-      const parent = node.parent
-      const children = parent.data.children || parent.data
-      const index = children.findIndex((d) => d.prop === data.prop)
-      children.splice(index, 1)
-    },
-    allowDrop(draggingNode, dropNode, type) {
-      if (type === 'inner' && draggingNode.data.isNew) {
-        return !(draggingNode.level <= dropNode.level)
-      } else if (type === 'inner' && !draggingNode.data.isNew) {
-        return !(draggingNode.level <= dropNode.level && !dropNode.data.isNew)
-      } else {
-        return true
-      }
-    },
-    clickItem(item) {
-      this.configModel = item
-      this.configVisible = true
-    },
-    configSave() {
-      this.configVisible = false
-    },
-    popOpen() {
-      this.dragList = this.checkColumns.filter((col) => !col.static)
-    },
-    setAll() {
-      if (this.setState) {
-        this.dragList = this.dragList.filter((c) => c.checked)
-      } else {
-        this.dragList = [...this.columnsAs]
-      }
-    },
-    checkChange(val, column) {
-      if (val === false) {
-        let index = this.dragList.findIndex((d) => d[this.labelKey] === column[this.labelKey])
-        index !== -1 && this.dragList.splice(index, 1)
-      } else {
-        let index = this.dragListN.findIndex((d) => d[this.labelKey] === column[this.labelKey])
-        if (index !== -1) {
-          Message.warning($lc(`子级请在右侧删除!`))
-          return false
-        }
-        this.dragList.push(column)
-      }
-    },
-    reset() {
-      let dragList = this.columns.filter((col) => col.isDefault)
-      this.dragList = dragList.length ? dragList : this.checkColumns.filter((col) => !col.static)
-    },
-    setChange() {
-      if (this.dragList.length < 1) {
-        this.$message.error(
-          `${$lc(`至少设置`)}${
-            this.isExport ? $lc('一列导出数据') : this.isFilter ? $lc('一个筛选条件') : $lc('一列显示列')
-          }!`
-        )
-        return
-      }
-
-      let list = []
-      let preCols = this.columns.filter((col) => col.static === 'pre')
-      let nextCols = this.columns.filter((col) => col.static === 'next')
-      list.push(...preCols, ...this.dragList, ...nextCols)
-      // 新增校验
-      if (!this.isExport) {
-        let state = list.findIndex((c) => c.isNew && c.children && c.children.length === 0)
-        if (state !== -1) {
-          Message.warning($lc(`新增字段必须包含子级!`))
-          return false
-        }
-      }
-      // 自动保存设置的显示列
-      this.userNo = sessionStorage.getItem('userNo')
-      !this.isExport && this.autoSave && this.saveColumns(list)
-
-      this.$emit('setColumns', list)
-      if (this.isExport) {
-        this.visible = false
-      }
-    },
-    saveColumns(list) {
-      let columns = saveTransform(list, this.labelKey, this.isFilter)
-      axios.post(
-        `/bems/prod_1.0/user/pageHabit?t=${Math.random()}`,
-        {
-          userNo: this.userNo,
-          pageId: this.pageId,
-          showStructure: JSON.stringify(columns)
-        },
-        { loading: false }
-      )
-      this.visible = false
-    },
-    getColumns(pageId) {
-      return getColumns(pageId || this.pageId, this.userNo, this.columnsN, this.labelKey)
-    }
-  }
-}
-
-function saveTransform(list, labelKey, isFilter) {
-  let listN = []
-  if (!isFilter) {
-    list.forEach((c) => {
-      if (c.prop && !c.children && !c.isNew && !c.width & !c.isNew) {
-        listN.push({ _colKey: 'prop', _colVal: c.prop })
-      } else if (c.type && ['selection', 'index', 'expand'].includes(c.type)) {
-        listN.push({ _colKey: 'type', _colVal: c.type })
-      } else {
-        let sFn = false
-        for (let k in c) {
-          if (typeof c[k] === 'function') sFn = true
-        }
-        if (sFn && c[labelKey]) {
-          listN.push({ _colKey: labelKey, _colVal: c[labelKey] })
-        } else {
-          listN.push(c)
-        }
-      }
-    })
-  } else {
-    list.forEach((c) => {
-      if (c.value) {
-        listN.push({ _colKey: 'value', _colVal: c.value })
-      } else if (c.startValue) {
-        listN.push({ _colKey: 'startValue', _colVal: c.startValue })
-      } else if (c.startDate) {
-        listN.push({ _colKey: 'startDate', _colVal: c.startDate })
-      } else {
-        listN.push(c)
-      }
-    })
-  }
-  return listN
-}
-
-function getTransform(list, columnsT, labelKey = 'label') {
-  let columns = []
-  list.forEach((d) => {
-    // 如果list中的每一项是字符串
-    if (typeof d === 'string') {
-      // 从columnsT中找到label等于d的项
-      let column = columnsT.find((c) => c[labelKey] === d)
-      // 如果找到，则将其添加到columns中
-      column && columns.push(column)
-      // 如果list中的每一项是对象
-    } else if (typeof d === 'object') {
-      // 如果d中有_colKey属性
-      if (d._colKey) {
-        // 从columnsT中找到d._colKey等于d._colVal的项
-        let column = columnsT.find((c) => c[d._colKey] === d._colVal)
-        // 如果找到，则将其添加到columns中
-        column && columns.push(column)
-        // 如果d中没有_colKey属性
-      } else {
-        // 将d添加到columns中
-        columns.push(d)
-      }
-    }
-  })
-  // 返回columns
-  return columns
-}
-
-// 这段代码在筛选组件中复用
-export function getColumns(pageId, userNo, columnsT, labelKey = 'label') {
-  return new Promise((resolve, reject) => {
-    axios
-      .post(
-        `/bems/prod_1.0/user/pageHabit/list?t=${Math.random()}`,
-        {
-          userNo: userNo,
-          pageId: pageId
-        },
-        { loading: false }
-      )
-      .then(({ data }) => {
-        if (data) {
-          let _data = JSON.parse(data)
-          if (_data && _data.length > 0) {
-            let columns = getTransform(_data, columnsT, labelKey)
-            return resolve(columns)
-          }
-        }
-        return resolve(null)
-      })
-      .catch((err) => {
-        reject(err)
-      })
-  })
-}
-</script>