n20-common-lib 3.0.1 → 3.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "n20-common-lib",
-  "version": "3.0.1",
+  "version": "3.0.3",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -59,7 +59,7 @@
     "normalize.css": "^8.0.1",
     "numerify": "*",
     "nzh": "^1.0.12",
-    "panzoom": "*",
+    "panzoom": "9.4.2",
     "qrcode": "*",
     "resize-detector": "*",
     "strip-json-comments": "*",
@@ -68,7 +68,8 @@
     "vue-jsonp": "2.0.0",
     "vuedraggable": "*",
     "webpack-duplicate-relano-plugin": "^0.1.0",
-    "xe-utils": "^3.5.11"
+    "xe-utils": "^3.5.11",
+    "ngraph.events": "1.2.2"
   },
   "devDependencies": {
     "@babel/plugin-proposal-optional-chaining": "^7.14.5",

package/src/assets/css/filter.scss

@@ -7,3 +7,283 @@
   max-height: 300px;
   overflow-y: auto;
 }
+// 高级筛选
+.ProFilterView {
+  width: 100%;
+  font-size: 14px;
+  .top {
+    padding: 12px 16px;
+    border-bottom: 1px solid #e5e6eb !important;
+  }
+  .filter {
+    padding: 12px 16px 4px;
+    border-bottom: 1px solid #e5e6eb !important;
+  }
+  .flex-item {
+    border-bottom: 1px solid var(--button-disabled-background-color);
+    padding: 0 8px;
+    margin-top: 8px;
+  }
+  .add {
+    cursor: pointer;
+    margin-top: 8px;
+    img {
+      margin-right: 12px;
+    }
+    padding: 8px;
+    height: 20px;
+    line-height: 20px;
+  }
+  .add:hover {
+    border-radius: 2px;
+    background: var(--fill-1, #f7f8fa);
+  }
+  .botton {
+    padding: 8px;
+    border-radius: 4px;
+    background: var(--fill-2, #f2f3f5);
+    border: none;
+  }
+  .activiti {
+    background: var(--color-primary-light-9);
+    border: var(--color-primary-light-9);
+    color: var(--color-primary);
+  }
+  /deep/.n20-drag-list-item {
+    justify-content: start;
+    padding: 2px 0;
+    height: 28px;
+  }
+  .list-item {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: start;
+    padding: 4px;
+    cursor: pointer;
+    border-radius: 2px;
+
+    &:hover {
+      color: var(--color-primary);
+    }
+
+    &.is-selected {
+      color: var(--color-primary);
+    }
+
+    .selected-icon {
+      color: var(--color-primary);
+    }
+  }
+  /deep/.el-form-item__content {
+    margin-left: 0;
+  }
+}
+// 高级查询
+.data-scope {
+  background: var(--fill-1, #f5f7fa);
+  padding: 16px;
+  border-radius: 4px;
+  max-height: 450px;
+  overflow-y: auto;
+  .children {
+    margin-left: 80px;
+    border: 1px dashed #e5e6eb;
+  }
+  .view-name {
+    margin-bottom: 16px;
+  }
+
+  .view-name-input {
+    width: 100%;
+  }
+
+  .condition-group {
+    margin-bottom: 16px;
+    padding-left: 32px;
+    position: relative;
+  }
+
+  .delete-group-btn-top {
+    position: absolute;
+    top: -16px;
+    right: -6px;
+    color: #4e5969;
+    z-index: 1;
+  }
+
+  .delete-group-btn-top :hover {
+    background: var(--color-danger-light-9, #fef0f0);
+  }
+  .conditions {
+    padding: 12px;
+    position: relative;
+    display: flex;
+    height: calc(44px * var(--condition-count, 1) - 12px);
+    .line {
+      width: 1px;
+      height: calc(44px * var(--line-condition-count, 1) - 36px);
+      background-color: #606266;
+      margin-right: 48px;
+      opacity: calc(1 - var(--is-single, 0));
+      margin-top: 12px;
+      position: relative;
+      .logic-select {
+        width: 60px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        display: flex;
+        border-radius: 4px;
+        overflow: hidden;
+        border: 1px solid #dcdfe6;
+
+        .logic-option {
+          flex: 1;
+          text-align: center;
+          padding: 4px 0;
+          font-size: 12px;
+          cursor: pointer;
+          background-color: #fff;
+
+          &.active {
+            background-color: var(--color-primary);
+            color: #fff;
+          }
+        }
+      }
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 8px;
+        height: 1px;
+        background-color: #606266;
+      }
+
+      &::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 8px;
+        height: 1px;
+        background-color: #606266;
+      }
+    }
+    .condition-item {
+      margin-bottom: 12px;
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    .condition-row {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+  }
+
+  .group-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 12px;
+    padding: 8px;
+    background: var(--fill-2, #f2f3f5);
+    border-radius: 4px;
+  }
+
+  .header-left {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+
+  .group-logic-label,
+  .condition-logic-label {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .logic-text {
+    font-size: 14px;
+    color: var(--color-text-regular, #606266);
+  }
+
+  .delete-group-btn {
+    color: var(--color-danger, #f56c6c);
+    padding: 4px 8px;
+  }
+
+  .delete-group-btn:hover {
+    background: var(--color-danger-light-9, #fef0f0);
+  }
+
+  .field-select,
+  .operator-select {
+    width: 150px;
+  }
+
+  .value-inputs {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .value-select,
+  .text-input {
+    width: 200px;
+  }
+
+  .date-picker {
+    width: 300px;
+  }
+
+  .number-input {
+    width: 200px;
+  }
+
+  .number-range {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .delete-btn {
+    padding: 8px 2px;
+    margin-left: 0;
+    color: #4e5969;
+  }
+
+  .delete-btn:hover {
+    background: var(--color-danger-light-9, #fef0f0);
+  }
+
+  .add-btn {
+    padding: 8px 2px;
+    margin-right: -8px;
+    color: #4e5969;
+  }
+
+  .add-btn:hover {
+    background: var(--color-primary-light-9, #ecf5ff);
+  }
+  .group-actions {
+    display: flex;
+    gap: 12px;
+    margin-top: 8px;
+  }
+
+  .add-condition-btn,
+  .add-group-btn {
+    color: var(--color-primary, #409eff);
+    font-size: 14px;
+  }
+}

package/src/assets/css/font-icon.scss

@@ -1,7 +1,6 @@
 @import url('../iconFont/font.css');
 @import url('../iconFont/iconfont.css');
 
-
 .n20-icon- {
   font-family: 'core-lib-iconfont' !important;
   font-style: normal;
@@ -32,12 +31,12 @@
   content: '\e602';
 }
 
-.el-button [class*='n20-icon-']+span {
+.el-button [class*='n20-icon-'] + span {
   margin-left: 5px;
 }
 
-
 @import url('../iconFont2/iconfont.css');
+@import url('../iconFont3/iconfont.css');
 
 .iconfont {
   font-family: 'iconfont' !important;
@@ -50,4 +49,4 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   -webkit-text-stroke-width: 0.2px;
-}
+}

package/src/assets/css/normalize.scss

@@ -3,8 +3,6 @@
 // .button-4em{min-width: 72px;}
 /* 格式化样式 */
 
-
-
 html {
   height: 100%;
 }
@@ -12,7 +10,7 @@ html {
 body {
   height: 100%;
   font-size: $--font-size-base;
-  font-family: PingFang SC, Microsoft YaHei, SUN, Arial, sans-serif;
+  font-family: PingFang SC, Microsoft YaHei, SUN, Arial, sans-serif !important;
 }
 
 li {
@@ -263,7 +261,7 @@ iframe {
 .b-center {
   text-align: center;
 
-  &>* {
+  & > * {
     display: inline-block;
     vertical-align: bottom;
   }
@@ -272,7 +270,7 @@ iframe {
 .b-vertical {
   font-size: 0;
 
-  &>* {
+  & > * {
     vertical-align: middle;
     display: inline-block;
     font-size: 14px;
@@ -335,13 +333,11 @@ iframe {
   flex-direction: column;
 }
 
-.flex-box>*,
-.flex-column>* {
+.flex-box > *,
+.flex-column > * {
   flex: none;
 }
 
-
-
 .flex {
   &-wrap {
     flex-wrap: wrap;
@@ -394,12 +390,6 @@ iframe {
   }
 }
 
-
-
-
-
-
-
 /* 旋转图标90度
 -------------- */
 .rotate90 {
@@ -486,7 +476,6 @@ iframe {
 /* 边框
 -------------- */
 .bd {
-
   &-none,
   &-0 {
     border: none !important;
@@ -835,7 +824,6 @@ $list: 45, 60, 80, 100, 110, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 2
 }
 
 @keyframes ping {
-
   75%,
   100% {
     transform: scale(2);
@@ -844,7 +832,6 @@ $list: 45, 60, 80, 100, 110, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 2
 }
 
 @keyframes pulse {
-
   0%,
   100% {
     opacity: 1;
@@ -856,7 +843,6 @@ $list: 45, 60, 80, 100, 110, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 2
 }
 
 @keyframes bounce {
-
   0%,
   100% {
     transform: translateY(-25%);
@@ -867,4 +853,4 @@ $list: 45, 60, 80, 100, 110, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 2
     transform: translateY(0);
     animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
   }
-}
+}