n20-common-lib 3.0.22 → 3.0.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "n20-common-lib",
-  "version": "3.0.22",
+  "version": "3.0.24",
   "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": "^3.5.11",
+    "xe-utils": "^4.0.2",
     "ngraph.events": "1.2.2"
   },
   "devDependencies": {
@@ -120,7 +120,8 @@
     "vue-router": "^3.5.2",
     "vue-template-compiler": "^2.6.11",
     "vuex": "^3.6.2",
-    "vxe-table": "3.6.17",
+    "vxe-table": "3.20.0",
+    "vxe-pc-ui": "3.13.2",
     "webpack-bundle-analyzer": "^3.9.0",
     "xlsx": "0.14.1",
     "xlsx-style": "^0.8.13"

package/src/assets/css/drag-list.scss

@@ -1,24 +1,32 @@
 .n20-drag-list-item {
   display: flex;
+  padding: 7px 12px;
   align-items: center;
-  justify-content: space-between;
-  padding: 6px 0;
+  gap: 8px;
+  align-self: stretch;
+  border-radius: 2px;
+  background: var(--bg-5, #fff);
   span {
     flex: 1;
   }
-}
-.n20-drag-icon {
-  margin-right: 12px;
-  font-size: 16px;
-  cursor: move;
   &:hover {
-    color: $--color-primary;
+    background: var(--bg-2, #f7f8fa);
   }
-}
-.n20-drag-remove {
-  margin-left: 6px;
-  cursor: pointer;
-  &:hover {
-    color: $--color-primary;
+
+  .drag-item-text {
+    overflow: hidden;
+    color: var(--text-1, #1d2129);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    font-family: 'PingFang SC';
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 22px;
+  }
+  .icon-class {
+    font-size: 14px;
+    color: #4e5969;
   }
 }

package/src/assets/css/normalize.scss

@@ -515,6 +515,12 @@ iframe {
     }
   }
 
+  &.pa-16 {
+    .el-dialog__body {
+      padding: 16px;
+    }
+  }
+
   &.p-t-0 {
     .el-dialog__body {
       padding-top: 0;

package/src/assets/css/show-column.scss

@@ -1,10 +1,15 @@
 .dialog-view {
-  height: 400px;
-  color: $--color-text-primary;
+  margin: 16px;
+  height: 476px;
+  overflow: hidden;
+
+  &-search {
+    width: 320px;
+  }
 
   .left-c {
     flex: 1;
-    height: 400px;
+    height: 476px;
   }
 
   .m-title {
@@ -13,10 +18,52 @@
   }
 
   .right-c {
-    height: 400px;
-    width: 200px;
-    margin-left: 15px;
-    overflow-y: auto;
+    width: 240px;
+    height: 474px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+    align-self: stretch;
+    border-radius: 4px;
+    border: 1px solid var(--border-1, #f2f3f5);
+    background: var(--bg-2, #fff);
+    .right-header {
+      display: flex;
+      padding: 9px 10px;
+      justify-content: space-between;
+      align-items: center;
+      align-self: stretch;
+      background: var(--fill-1, #f7f8fa);
+    }
+
+    .right-count {
+      color: var(--text-3, #86909c);
+      /* 14/CN-Regular */
+      font-family: 'PingFang SC';
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 22px;
+    }
+
+    .icon-class {
+      font-size: 14px;
+      color: #4e5969;
+    }
+
+    .darg-list-wrap {
+      overflow-y: auto;
+      align-self: stretch;
+
+      /* 隐藏滚动条 */
+      scrollbar-width: none; /* Firefox */
+      -ms-overflow-style: none; /* IE 10+ */
+
+      &::-webkit-scrollbar {
+        display: none; /* Chrome, Safari, Edge */
+      }
+    }
   }
 
   .right-tree {
@@ -24,7 +71,7 @@
     width: 200px;
     margin-left: 15px;
     overflow-y: hidden;
-    .menu-tree{
+    .menu-tree {
       height: 360px;
       overflow-y: auto;
     }
@@ -46,11 +93,22 @@
       color: $--color-text-primary;
     }
   }
+}
 
-  .n20-drag-list-item {
-    a,
-    i {
-      color: $--color-text-placeholder;
-    }
-  }
+.fixed-divider {
+  display: flex;
+  align-items: center;
+  margin: 6px 0;
+  color: #999;
+  font-size: 12px;
+}
+.fixed-divider::before,
+.fixed-divider::after {
+  content: '';
+  flex: 1;
+  border-top: 1px solid #e4e7ed;
+}
+.fixed-divider-text {
+  padding: 0 8px;
+  white-space: nowrap;
 }

package/src/assets/css/table copy.scss

@@ -0,0 +1,234 @@
+.el-table--small {
+  font-size: 14px;
+}
+
+.el-table--mini {
+  font-size: 12px;
+}
+
+.el-table th {
+  font-weight: $--font-weight-primary;
+}
+
+.el-table--small .el-table__cell {
+  padding: 8px 0;
+}
+
+.el-table .cell {
+  padding-left: 8px;
+  padding-right: 8px;
+}
+
+.el-table--small,
+.el-table--mini {
+  .el-table__cell {
+    .el-button--text {
+      padding-top: 2px;
+      padding-bottom: 2px;
+    }
+
+    .el-link {
+      line-height: initial;
+    }
+  }
+}
+
+.el-table--mini {
+  .el-table__cell {
+    padding: 2px 0;
+
+    .cell {
+      padding-left: 4px;
+      padding-right: 4px;
+      // line-height: 18px;
+    }
+
+    .el-button--mini,
+    .el-link {
+      font-size: 12px;
+    }
+  }
+}
+
+.el-table {
+  /* 排序 */
+  .caret-wrapper {
+    display: inline-flex;
+    flex-direction: row-reverse;
+    align-items: center;
+    width: 16px;
+    height: 16px;
+    line-height: 16px;
+    vertical-align: middle;
+  }
+
+  .sort-caret.ascending,
+  .sort-caret.descending {
+    width: 8px;
+    height: 16px;
+    border: none;
+    font-style: normal;
+    position: static;
+
+    &:hover {
+      color: $--color-primary-light-6;
+    }
+
+    &:before {
+      content: '\e61c';
+      font-family: 'core-lib-iconfont';
+      font-size: 12px;
+      line-height: 12px;
+      position: relative;
+      right: 3px;
+      bottom: 1px;
+    }
+  }
+
+  .sort-caret.descending:before {
+    content: '\e61d';
+    position: relative;
+    right: 1px;
+    bottom: 1px;
+  }
+
+  .ascending .sort-caret.ascending,
+  .descending .sort-caret.descending {
+    color: $--color-primary;
+  }
+}
+
+/* 过滤 */
+.el-table-filter__bottom {
+  text-align: center;
+}
+
+.el-table__column-filter-trigger {
+  height: 16px;
+  line-height: 16px;
+  vertical-align: middle;
+  position: relative;
+  bottom: 1px;
+
+  i {
+    font-size: 16px;
+    transform: scale(1);
+  }
+}
+
+.table-header-popover.el-popover {
+  padding: 16px;
+}
+
+/* 附件上传hover颜色 */
+.base-table_default {
+  .el-table__body .hover-active:hover > td {
+    background-color: #ff3c2f10 !important;
+  }
+}
+
+.vxe-table .vxe-cell--sort {
+  display: inline-flex !important;
+  flex-direction: row-reverse !important;
+  align-items: center !important;
+  width: 16px !important;
+  height: 16px !important;
+  line-height: 16px !important;
+  vertical-align: middle !important;
+  cursor: pointer;
+
+  .vxe-sort--asc-btn,
+  .vxe-sort--desc-btn {
+    width: 6px;
+    height: 10px;
+    color: #333;
+    border: none;
+    font-style: normal;
+    position: static;
+  }
+}
+
+.vxe-header--row {
+  color: #333;
+  background-color: #f5f5f5;
+}
+
+.vxe-cell--filter .vxe-filter--btn {
+  color: #666;
+  font-weight: $--font-weight-primary;
+  cursor: pointer;
+  font-size: 16px;
+}
+
+.is--filter-active .vxe-cell--filter .vxe-filter--btn {
+  color: $--color-primary;
+}
+
+.is--filter-active .vxe-cell--title {
+  color: $--color-primary;
+}
+
+.vxe-table--render-default.size--small {
+  font-size: 14px !important;
+}
+
+.vxe-table--render-default.size--mini {
+  font-size: 14px !important;
+}
+
+.vxe-header--row th,
+th.vxe-header--column {
+  position: relative;
+  font-weight: $--font-weight-primary;
+}
+
+.vxe-table--tooltip-wrapper {
+  z-index: 9999 !important;
+}
+
+.cell-default-set-- .vxe-table--body-wrapper .vxe-body--row .vxe-body--column .vxe-cell .vxe-cell--label:empty::before {
+  content: '--';
+}
+
+.n20-table-pro.vxe-table--render-default {
+  font-family: PingFang SC, Microsoft YaHei, Arial, sans-serif !important;
+  color: #333;
+}
+
+.vxe-table-custom-wrap.vxe-body--column.col--ellipsis:not(.col--actived) > .vxe-cell,
+.vxe-table--render-default .vxe-table-custom-wrap.vxe-footer--column.col--ellipsis:not(.col--actived) > .vxe-cell,
+.vxe-table--render-default .vxe-table-custom-wrap.vxe-header--column.col--ellipsis:not(.col--actived) > .vxe-cell {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: wrap !important;
+}
+
+.vxe-table--render-default.size--small .vxe-table-custom-wrap.vxe-body--column.col--ellipsis > .vxe-cell,
+.vxe-table--render-default.size--small .vxe-table-custom-wrap.vxe-footer--column.col--ellipsis > .vxe-cell,
+.vxe-table--render-default.size--small .vxe-table-custom-wrap.vxe-header--column.col--ellipsis > .vxe-cell {
+  max-height: 100%;
+}
+
+.vxe-header--column {
+  .vxe-cell {
+    justify-content: center !important;
+  }
+}
+
+@import '../../components/TableSetSize/style.scss';
+
+.el-table-set-size-item {
+  .icon-mini {
+    background-image: url('../../components/TableSetSize/small.png');
+  }
+
+  .icon-mini {
+    background-image: url('../../components/TableSetSize/mini.png');
+  }
+}
+
+.el-table th.el-table__cell > .cell {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/src/assets/css/table.scss

@@ -50,6 +50,66 @@
   }
 }
 
+/* 骨架屏样式 - 仅覆盖内容区域，表头正常显示 */
+.table-pro-skeleton {
+  position: absolute;
+  top: 40px; /* 表头高度，small 尺寸约 40px */
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: calc(100% - 40px);
+  background: #fff;
+  z-index: 100;
+  overflow: hidden;
+  padding: 0;
+}
+
+.skeleton-row {
+  display: flex;
+  align-items: center;
+  height: 36px;
+  border-bottom: 1px solid #f0f0f0;
+  padding: 0 8px;
+}
+
+.skeleton-cell {
+  height: 14px;
+  background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 50%, #f2f2f2 75%);
+  background-size: 200% 100%;
+  animation: skeleton-loading 1.5s infinite;
+  border-radius: 4px;
+  margin: 0 8px;
+  flex: 1;
+}
+
+.skeleton-checkbox {
+  width: 16px;
+  height: 16px;
+  flex: 0 0 16px;
+  margin-left: 12px;
+  margin-right: 16px;
+}
+
+@keyframes skeleton-loading {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+/* 不同尺寸的表头高度适配 */
+.table-pro-wrapper:has(.vxe-table--render-default.size--mini) .table-pro-skeleton {
+  top: 36px;
+  height: calc(100% - 36px);
+}
+
+.table-pro-wrapper:has(.vxe-table--render-default.size--medium) .table-pro-skeleton {
+  top: 44px;
+  height: calc(100% - 44px);
+}
+
 .el-table {
   /* 排序 */
   .caret-wrapper {
@@ -127,21 +187,101 @@
   }
 }
 
+.vxe-table {
+  .vxe-table--column {
+    &__icon {
+      font-size: 11px;
+      color: #88909b;
+      border: none;
+      font-style: normal;
+      position: static;
+      cursor: pointer;
+      width: 12px;
+      height: 12px;
+      line-height: 12px;
+    }
+  }
+
+  .vxe-header--column.is--padding.fixed-column__static {
+    padding: 0 6px;
+    .vxe-cell {
+      padding: 0;
+    }
+    i {
+      display: inline-block;
+      font-size: 16px;
+      color: #505968;
+      cursor: pointer;
+      margin-left: 10px;
+    }
+  }
+}
+
+/* 悬浮按钮组样式 */
+.table-hover-btns {
+  position: absolute;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 0 12px;
+  z-index: 10;
+  pointer-events: auto;
+
+  .hover-btns-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    white-space: nowrap;
+  }
+
+  .hover-btns-more {
+    margin-left: 4px;
+  }
+
+  .color-danger {
+    color: #f56c6c;
+  }
+}
+
+/* 过渡动画 */
+.hover-btns-fade-enter-active,
+.hover-btns-fade-leave-active {
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.hover-btns-fade-enter,
+.hover-btns-fade-leave-to {
+  opacity: 0;
+  transform: translateX(10px);
+}
+
+.hover-btns-fade-enter-to,
+.hover-btns-fade-leave {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.vxe-table.vxe-table--render-default.border--none,
+.vxe-table.vxe-table--render-default.border--inner .vxe-cell--col-resizable:before {
+  background-color: transparent;
+}
+
 .vxe-table .vxe-cell--sort {
   display: inline-flex !important;
-  flex-direction: row-reverse !important;
+  flex-direction: column !important;
   align-items: center !important;
-  width: 16px !important;
-  height: 16px !important;
-  line-height: 16px !important;
-  vertical-align: middle !important;
+  justify-content: center !important;
+  font-size: 8px !important;
+
   cursor: pointer;
 
   .vxe-sort--asc-btn,
   .vxe-sort--desc-btn {
-    width: 6px;
-    height: 10px;
-    color: #333;
+    width: 10px;
+    height: 8px !important;
+    line-height: 1;
+    color: #88909b;
     border: none;
     font-style: normal;
     position: static;
@@ -176,6 +316,12 @@
   font-size: 14px !important;
 }
 
+.vxe-header-column__right {
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: center;
+}
+
 .vxe-header--row th,
 th.vxe-header--column {
   position: relative;
@@ -209,11 +355,11 @@ th.vxe-header--column {
   max-height: 100%;
 }
 
-.vxe-header--column {
-  .vxe-cell {
-    justify-content: center !important;
-  }
-}
+// .vxe-header--column {
+//   .vxe-cell {
+//     justify-content: center !important;
+//   }
+// }
 
 @import '../../components/TableSetSize/style.scss';
 

package/src/assets/realUrl.js

@@ -9,6 +9,7 @@ export default function realUrl(url, rest = false) {
   } else if (rest) {
     return '/' + url
   } else {
-    return url
+    // 相对路径改为绝对路径，避免被子应用 baseURL 影响
+    return '/' + url
   }
 }

package/src/components/AdvancedFilter/index.vue

@@ -430,7 +430,7 @@ export default {
         }
       })
       this.$refs.advanced_popover.showPopper = false
-      this.$emit('check')
+      this.$emit('check', saveCheckArr)
     },
     check(keys) {
       this.checkList = keys

package/src/components/ApprovalButtons/showOtherAttrNew.vue

@@ -22,11 +22,11 @@
             v-title="item.cfgName"
             style="
               display: inline-block;
-              max-width: 200px;
               white-space: nowrap;
               overflow: hidden;
               text-overflow: ellipsis;
             "
+            :style="{ maxWidth: labelWidth }"
           >
             <span v-if="required" style="color: red">*</span>
             {{ item.cfgName }}

package/src/components/ApprovalRecord/index.vue

@@ -1,6 +1,6 @@
 /* 审批记录 */
 <template>
-  <div v-if="approvalMode === 'dialog' || !approvalMode">
+  <div v-if="approvalMode === 'dialog'">
     <expandableWrap :title="'审批记录' | $lc" :show-expand="false" :icon="false">
       <template slot="tips">
         <el-button plain size="mini" :disabled="false" @click="cardV = true">{{ '审批进度查看' | $lc }}</el-button>
@@ -35,7 +35,7 @@
       <approvalImg class="text-c p-a" :proc-inst-id="procInstIdC" style="height: 70vh; overflow: auto" />
     </el-dialog>
   </div>
-  <div v-else>
+  <div v-else-if="approvalMode === 'title'">
     <expandableWrap :title="'审批记录' | $lc">
       <template slot="tips">
         <el-button size="mini" plain @click="imgV = true">{{ '流程图查看' | $lc }}</el-button>
@@ -50,7 +50,7 @@
         append-to-body
         top="10vh"
       >
-        <approvalImg class="text-c p-a" style="height: 70vh; overflow: auto" />
+        <approvalImg class="text-c p-a" :proc-inst-id="procInstIdC" style="height: 70vh; overflow: auto" />
       </el-dialog>
     </expandableWrap>
   </div>
@@ -86,7 +86,7 @@ export default {
     return {
       cardV: false,
       imgV: false,
-      approvalMode: undefined
+      approvalMode: 'dialog'
     }
   },
   computed: {
@@ -96,7 +96,7 @@ export default {
   },
   mounted() {
     getJsonc('portal/server-config.jsonc').then(({ approvalMode }) => {
-      this.approvalMode = approvalMode
+      this.approvalMode = approvalMode || 'dialog'
     })
   }
 }