n20-common-lib 3.0.37 → 3.0.39

package/src/components/PageHeader/index.vue

@@ -1,13 +1,18 @@
 <template>
   <div class="n20-page-header">
-    <div v-if="!disable" class="page-header__left" @click="$emit('back')">
-      <i :class="icon"></i>
-      <div class="page-header__title">
-        <slot name="title">{{ title }}</slot>
+    <div class="n20-page-header__wappr">
+      <div v-if="!disable" class="page-header__left" @click="$emit('back')">
+        <i :class="icon"></i>
+        <div class="page-header__title">
+          <slot name="title">{{ title }}</slot>
+        </div>
+      </div>
+      <div class="page-header__content">
+        <slot name="content">{{ content }}</slot>
       </div>
     </div>
-    <div class="page-header__content">
-      <slot name="content">{{ content }}</slot>
+    <div>
+      <slot></slot>
     </div>
   </div>
 </template>

package/src/components/PageLayout/page.vue

@@ -1,16 +1,28 @@
 <template>
   <div class="flex-column">
     <slot name="header"></slot>
-    <div class="n20-page-content flex-item">
+    <div class="n20-page-content flex-item" :class="{ is_padding: padding }">
       <slot></slot>
     </div>
-    <slot name="footer"></slot>
+    <div class="n20-page-content__footer" :class="{ 'n20-page-content__footer--max__padding': maxPadding }">
+      <slot name="footer"></slot>
+    </div>
   </div>
 </template>
 
 <script>
 import { $lc } from '../../utils/i18n/index'
 export default {
-  name: 'Page'
+  name: 'Page',
+  props: {
+    padding: {
+      type: Boolean,
+      default: false
+    },
+    maxPadding: {
+      type: Boolean,
+      default: false
+    }
+  }
 }
 </script>

package/src/components/Pagination/index.vue

@@ -1,12 +1,12 @@
 <script>
 import RemotePagination from './remotePagination.vue'
-import StaticPagination from './staticPagination.vue'
+import Pagination from './main.vue'
 
 export default {
   name: 'Pagination',
   components: {
     RemotePagination,
-    StaticPagination
+    Pagination
   },
   props: {
     size: {
@@ -58,8 +58,11 @@ export default {
             }
           }
         })
-      : h(StaticPagination, {
-          props: this.$props,
+      : h(Pagination, {
+          props: {
+            ...this.$props,
+            static: true
+          },
           on: {
             change: (page) => this.$emit('change', page)
           }

package/src/components/Pagination/main.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="n20-pagination-1">
+    <el-pagination
+      layout="total,prev,pager,next,sizes"
+      :current-page="pageObj[pageKey.no]"
+      :page-size="pageObj[pageKey.size]"
+      :page-sizes="pageSizes"
+      :total="pageObj[pageKey.total]"
+      :size="size"
+      @prev-click="handlePageChange"
+      @next-click="handlePageChange"
+      @current-change="handlePageChange"
+      @size-change="handleSizeChange"
+    />
+    <span class="m-l-s">{{ '前往' | $lc }}</span>
+    <el-input-number
+      v-model="toNo"
+      class="n20-pagination-jumper-1"
+      :min="1"
+      :max="max"
+      :step="1"
+      :step-strictly="true"
+      :controls="false"
+      :size="size"
+      @change="setnoOrsize"
+    />
+  </div>
+</template>
+
+<script>
+import { $lc } from '../../utils/i18n/index'
+export default {
+  name: 'Pagination',
+  props: {
+    size: {
+      type: String,
+      default: 'mini'
+    },
+    pageObj: {
+      type: Object,
+      default: () => ({
+        no: 1,
+        size: 20,
+        total: 0
+      })
+    },
+    pageKey: {
+      type: Object,
+      default: () => ({
+        no: 'no',
+        size: 'size',
+        total: 'total'
+      })
+    },
+    pageSizes: {
+      type: Array,
+      default: () => [20, 50, 100]
+    },
+    sizeMax: {
+      type: Number,
+      default: 1000
+    }
+  },
+  data() {
+    return {
+      settingV: false,
+      noOrsize: ''
+    }
+  },
+  computed: {
+    max() {
+      let total = this.pageObj[this.pageKey.total]
+      let size = this.pageObj[this.pageKey.size]
+
+      return Math.ceil(total / size) || 1
+    },
+    toNo: {
+      get() {
+        return this.pageObj[this.pageKey.no]
+      },
+      set(val) {
+        if (val) {
+          this.pageObj[this.pageKey.no] = Math.ceil(val)
+        } else {
+          this.pageObj[this.pageKey.no] = 1
+        }
+      }
+    }
+  },
+  watch: {
+    noOrsize() {
+      this.$emit('change', { ...this.pageObj })
+      this.$emit('update:pageObj', { ...this.pageObj })
+    }
+  },
+  methods: {
+    handlePageChange(val) {
+      this.$set(this.pageObj, this.pageKey.no, val)
+      this.setnoOrsize()
+    },
+    handleSizeChange(val) {
+      this.$set(this.pageObj, this.pageKey.size, val)
+      this.$set(this.pageObj, this.pageKey.no, 1)
+      this.setnoOrsize()
+    },
+    setnoOrsize() {
+      let no = this.pageObj[this.pageKey.no]
+      let size = this.pageObj[this.pageKey.size]
+      this.noOrsize = no + ',' + size + Date.now()
+    }
+  }
+}
+</script>

package/src/components/SecondaryTab/index.vue

@@ -1,31 +1,43 @@
 <template>
-  <div v-if="data.length === 0" class="n20-secondary-tab m-b-s">
-    <div class="el-tabs__item is-active">{{ init }}</div>
-  </div>
-  <div v-else-if="data.length === 1" class="n20-secondary-tab m-b-s">
-    <div class="el-tabs__item is-active">
-      <span v-if="data[0].icon" :class="data[0].icon"></span>
-      <sup v-if="data[0].badge" class="el-tabs__item-badge"></sup>
-      {{ data[0].name }}
+  <div class="n20-secondary-tab__wrapper">
+    <div v-if="data.length === 0" class="n20-secondary-tab m-b-s">
+      <div class="el-tabs__item is-active">{{ init }}</div>
     </div>
-  </div>
-  <el-tabs v-else :value="init" :class="classes" :tabPosition="tabPosition" :before-leave="beforeFn" @tab-click="clickFn">
-    <el-tab-pane
-      v-for="item of data"
-      :key="item.name"
-      :tab-info="item"
-      :name="item.name"
-      :icon="item.icon"
-      :disabled="item.disabled"
+    <div v-else-if="data.length === 1" class="n20-secondary-tab m-b-s">
+      <div class="el-tabs__item is-active">
+        <span v-if="data[0].icon" :class="data[0].icon"></span>
+        <sup v-if="data[0].badge" class="el-tabs__item-badge"></sup>
+        {{ data[0].name }}
+      </div>
+    </div>
+    <el-tabs
+      v-else
+      :value="init"
+      :class="classes"
+      :tabPosition="tabPosition"
+      :before-leave="beforeFn"
+      @tab-click="clickFn"
     >
-      <template slot="label">
-        <span v-if="item.icon" :class="item.icon"></span>
-        <sup v-if="item.badge" class="el-tabs__item-badge"></sup>
-        <span v-if="item.content" v-title="`${item.content}`"> {{ item.name }}</span>
-        <span v-else>{{ item.name }}</span>
-      </template>
-    </el-tab-pane>
-  </el-tabs>
+      <el-tab-pane
+        v-for="item of data"
+        :key="item.name"
+        :tab-info="item"
+        :name="item.name"
+        :icon="item.icon"
+        :disabled="item.disabled"
+      >
+        <template slot="label">
+          <span v-if="item.icon" :class="item.icon"></span>
+          <sup v-if="item.badge" class="el-tabs__item-badge"></sup>
+          <span v-if="item.content" v-title="`${item.content}`"> {{ item.name }}</span>
+          <span v-else>{{ item.name }}</span>
+        </template>
+      </el-tab-pane>
+    </el-tabs>
+    <div class="n20-secondary-tab__right">
+      <slot></slot>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -51,10 +63,9 @@ export default {
     }
   },
   computed: {
-    classes(){
+    classes() {
       return {
         'n20-secondary-tab': true,
-        'm-b-s': this.tabPosition == 'top',
         'left-css': this.tabPosition == 'left'
       }
     }
@@ -106,17 +117,17 @@ export default {
 .tooltip.show {
   opacity: 1;
 }
-.left-css .el-tabs__item.is-active:after{
+.left-css .el-tabs__item.is-active:after {
   width: 2px;
-  height: 20px!important;
-  margin-top: -22px!important;
+  height: 20px !important;
+  margin-top: -22px !important;
   margin-left: -10px;
 }
 .left-css .el-tabs__item.is-left {
-  text-align: left!important;
+  text-align: left !important;
 }
-.left-css .el-tabs__header.is-left{
-  margin-right: 0!important;
-  margin-left: 10px!important;
+.left-css .el-tabs__header.is-left {
+  margin-right: 0 !important;
+  margin-left: 10px !important;
 }
 </style>

package/src/components/ShowColumn/index.vue

@@ -641,19 +641,29 @@ export default {
 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 })
-      } else if (c.type && ['selection', 'index', 'expand'].includes(c.type)) {
+      }
+      // 特殊类型列：多选/序号/展开列
+      else if (c.type && ['selection', 'index', 'expand'].includes(c.type)) {
         listN.push({ _colKey: 'type', _colVal: c.type })
-      } else {
+      }
+      // 其他列：包含函数或需要完整保留的列
+      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({ _colKey: labelKey, _colVal: c[labelKey], ...c })
+        }
+        // 其他情况直接存储完整列配置
+        else {
           listN.push(c)
         }
       }

package/src/components/TableOperate/index.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="el-table-set-size flex-box" :style="{ '--hover-width': hoverWidth }">
+    <div v-if="showColumn" class="el-table-set-size-item m-r-0">
+      <i
+        v-title="$lc('设置显示列')"
+        class="v3-icon-system-solution pointer color-white"
+        :class="hoverIconKey === 'showColumn' ? 'color-white' : ''"
+        @mouseenter="hoverIconKey = 'showColumn'"
+        @mouseleave="hoverIconKey = null"
+        @click="$emit('visible-column')"
+      ></i>
+    </div>
+    <div v-if="showSetsize" class="el-table-set-size-item m-r-0">
+      <el-dropdown @command="setSize">
+        <i
+          v-title="$lc('行高')"
+          class="v3-icon-line-height pointer color-white"
+          :class="hoverIconKey === 'height' ? 'color-white' : ''"
+          @mouseenter="hoverIconKey = 'height'"
+          @mouseleave="hoverIconKey = null"
+        ></i>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item command="small">{{ _lang === 'zh' ? '默认' : 'small' }}</el-dropdown-item>
+          <el-dropdown-item command="mini">{{ _lang === 'zh' ? '紧凑' : 'mini' }}</el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+    </div>
+    <div v-if="hasExpand" class="el-table-set-size-item m-r-0">
+      <i
+        v-title="!isExpand ? $lc('展开分组') : $lc('折叠分组')"
+        class="pointer"
+        :class="[
+          isExpand ? 'v3-icon-group-collapse' : 'v3-icon-group-expand',
+          hoverIconKey === 'toggleExpand' ? 'color-white' : ''
+        ]"
+        @mouseenter="hoverIconKey = 'toggleExpand'"
+        @mouseleave="hoverIconKey = null"
+        @click="$emit('toggle-expand')"
+      ></i>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TableOperate',
+  props: {
+    showColumn: {
+      type: Boolean,
+      default: false
+    },
+    showSetsize: {
+      type: Boolean,
+      default: true
+    },
+    size: {
+      type: String,
+      default: 'small'
+    },
+    mini: {
+      type: Object,
+      default: () => ({
+        border: false,
+        size: 'mini',
+        stripe: true
+      })
+    },
+    small: {
+      type: Object,
+      default: () => ({
+        border: false,
+        size: 'small',
+        stripe: false
+      })
+    }
+  },
+  computed: {
+    // 是否显示展开/折叠按钮（配置了 treeConfig 才显示）
+    hasExpand() {
+      return !!(this.$attrs.treeConfig || this.$attrs['tree-config'])
+    },
+    // 当前可见操作项数量
+    activeItemCount() {
+      return [this.showColumn, this.showSetsize, this.hasExpand].filter(Boolean).length
+    },
+    // 根据可见项数动态计算宽度
+    hoverWidth() {
+      const widthMap = { 3: '112px', 2: '88px', 1: '40px', 0: '0px' }
+      return widthMap[this.activeItemCount] || '0px'
+    }
+  },
+  data() {
+    let _this = this
+    return {
+      isExpand: false,
+      hoverIconKey: null, // 当前悬停的静态列头图标标识
+      sizeC: localStorage.getItem('table-size') || _this.size
+    }
+  },
+  watch: {
+    size() {
+      this.setSize(localStorage.getItem('table-size') || this.size, 'pasv')
+    }
+  },
+  created() {
+    this.setSize(localStorage.getItem('table-size') || this.size, 'pasv')
+  },
+  methods: {
+    setSize(type, t) {
+      this.sizeC = type
+      localStorage.setItem('table-size', type)
+      if (type === 'mini') {
+        this.$emit('resize', this.mini)
+      } else if (type === 'small') {
+        this.$emit('resize', this.small)
+      }
+
+      if (t !== 'pasv') {
+        this.$emit('update:size', localStorage.getItem('table-size') || type)
+      }
+    }
+  }
+}
+</script>