vsyswin-ui 0.2.58 → 0.2.61

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vsyswin-ui",
-    "version": "0.2.58",
+    "version": "0.2.61",
     "main": "lib/vsyswin-ui.umd.min.js",
     "private": false,
     "description": "Vue2.x的应用组件库.",

package/packages/index.js

@@ -1,3 +1,4 @@
+import './styles/common-old.scss'
 import './styles/common.scss'
 import './styles/iconfont/iconfont.css'
 

package/packages/paging/src/paging.vue

@@ -7,6 +7,7 @@
       prev-text="上一页"
       next-text="下一页"
       size="small"
+      :pager-count="pagerCount"
       @size-change="handleSizeChange"
       @current-change="handlePageChange"
       :current-page="pagination.currentPage"
@@ -53,6 +54,10 @@ export default {
       default() {
         return [10, 20, 50, 100, 200]
       }
+    },
+    pagerCount: {
+      type: Number,
+      default: 7
     }
   },
   computed: {

package/packages/search-bar/src/search-bar.vue

@@ -493,6 +493,18 @@ export default {
         })
       return list
     },
+    // 设置底部标签，比如日期重新设置了值，但是底部没有标签，使用该方法来生成
+    /*
+      this.$set(this.searchList[10].itemList[0], 'value', [1649865600000, 1657727999000])
+      this.$set(this.searchList[10].itemList[0], 'isActive', true)
+      this.$nextTick(() => {
+        this.$refs.searchbarRef.setTagList()
+      })
+    */
+    setTagList() {
+      const filterList = this.createTagList()
+      this.tagList = filterList
+    },
     // 搜索按钮
     handleSearch(skipShrink) {
       if (this.$slots.default) {

package/packages/simple-search-bar/src/simple-search-bar.vue

@@ -10,6 +10,7 @@
           v-model.trim="keyword"
           @input="auto && search"
           @clear="search"
+          @blur="blur"
           clearable
         >
           <el-button type="primary" slot="append" icon="el-icon-search" @click="search()"></el-button>
@@ -58,7 +59,13 @@ export default {
       // 执行搜索事件
       this.$emit('input', this.keyword)
       this.$emit('search', this.keyword)
-    })
+    }),
+    blur() {
+      if (!this.auto) {
+        this.$emit('input', this.keyword)
+        this.$emit('search', this.keyword)
+      }
+    }
   }
 }
 </script>

package/packages/styles/common-old.scss

@@ -0,0 +1,506 @@
+@import './variables.scss';
+// 重置样式
+* {
+  margin: 0;
+  padding: 0;
+}
+
+html,
+body,
+#app {
+  height: 100%;
+}
+
+body {
+  color: #000;
+  background: #fff;
+  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 微软雅黑, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -webkit-text-size-adjust: none;
+  font-size: 14px;
+}
+
+ol,
+ul,
+li {
+  list-style: none;
+}
+
+/* 滑动条 */
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #cccccc;
+  border-radius: 8px;
+}
+
+::-webkit-scrollbar-track-piece {
+  background-color: transparent;
+  border-radius: 8px;
+}
+
+a:focus,
+input:focus {
+  outline: none;
+}
+
+/* 一些共用的样式 */
+
+.main-container {
+  height: 100%;
+  overflow: hidden;
+  background: #f2f5f9;
+  padding: 0 24px;
+  box-sizing: border-box;
+  &.no-head {
+    .bd {
+      height: calc(100% - 20px);
+    }
+  }
+  .hd {
+    height: 44px;
+    display: flex;
+    padding: 0 20px;
+    align-items: center;
+    justify-content: space-between;
+    > h2 {
+      font-size: 14px;
+      margin: 0;
+      color: $header-color;
+      font-weight: 700;
+    }
+    > .hd-right {
+      color: $header-color;
+      display: flex;
+      align-items: center;
+    }
+  }
+  .bd {
+    /* 本来想使用flex布局，但是vxe-table支持不友好，还是需要改成 calc计算的方式 */
+    height: calc(100% - 64px);
+    padding: 4px 20px 10px;
+    box-sizing: border-box;
+    background-color: #fff;
+    &.west-east-wrap {
+      // 左右结构的布局，去掉padding，使用flex布局
+      padding: 0;
+      display: flex;
+    }
+    .con-main {
+      height: calc(100% - 46px);
+      .con-scroll-wrapper {
+        height: 100%;
+        overflow: hidden;
+      }
+    }
+    .west-tree-box {
+      /* 左侧树盒子 */
+      width: 260px;
+      height: 100%;
+      background: #fff;
+      border-right: 1px solid #e3e3e3;
+      // overflow-x: scroll;
+      position: relative;
+      transition: all 0.5s;
+      .west-tree-content {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        padding: 0;
+        overflow-x: hidden;
+        overflow-y: auto;
+        box-sizing: border-box;
+      }
+      .pick-left {
+        position: absolute;
+        width: 21px;
+        height: 54px;
+        right: 0;
+        top: 50%;
+        margin-top: -27px;
+        cursor: pointer;
+      }
+    }
+    .east-content {
+      /* 右侧表格内容区域盒子 */
+      &.no-padding {
+        padding: 0;
+      }
+      height: 100%;
+      padding: 4px 20px 10px;
+      box-sizing: border-box;
+      transition: all 0.5s;
+      position: relative;
+      .pick-right {
+        position: absolute;
+        width: 21px;
+        height: 54px;
+        left: 0;
+        top: 50%;
+        margin-top: -27px;
+        cursor: pointer;
+      }
+    }
+  }
+  .tab-content-container {
+    // tab的内容区域
+    height: calc(100% - 64px);
+    overflow: hidden;
+    background: #fff;
+    display: flex;
+    &.no-left {
+      display: block;
+    }
+    .west-tree-box {
+      /* 左侧树盒子 */
+      width: 260px;
+      height: 100%;
+      background: #fff;
+      border-right: 1px solid #e3e3e3;
+      // overflow-x: scroll;
+      position: relative;
+      transition: all 0.5s;
+      .pick-left {
+        position: absolute;
+        width: 21px;
+        height: 54px;
+        right: 0;
+        top: 50%;
+        margin-top: -27px;
+        cursor: pointer;
+      }
+    }
+    .east-content {
+      /* 右侧表格内容区域盒子 */
+      height: 100%;
+      transition: all 0.5s;
+      position: relative;
+      .pick-right {
+        position: absolute;
+        width: 21px;
+        height: 54px;
+        left: 0;
+        top: 50%;
+        margin-top: -27px;
+        cursor: pointer;
+      }
+    }
+    .tab-bd {
+      /* 还是需要改成 calc计算的方式 vxe-table的max-height才会生效有滚动条*/
+      height: calc(100% - 0px);
+      padding: 4px 20px 10px;
+      box-sizing: border-box;
+      background-color: #fff;
+      .tab-search {
+        height: 46px;
+        display: flex;
+        justify-content: space-between;
+      }
+      .tab-main {
+        height: calc(100% - 46px);
+        &.footer-btns {
+          height: calc(100% - 96px);
+        }
+        .tab-scroll-wrapper {
+          height: 100%;
+          overflow: hidden;
+        }
+      }
+      .tab-footer-btns {
+        padding-top: 16px;
+        text-align: center;
+      }
+    }
+  }
+  .subpage-container {
+    // 子页面布局
+    height: 100%;
+    &.no-head {
+      .sub-bd {
+        height: 100%;
+      }
+    }
+    .sub-hd {
+      height: 44px;
+      display: flex;
+      padding: 0 20px;
+      align-items: center;
+      justify-content: space-between;
+      background-color: var(--page-bg);
+      > h2 {
+        font-size: 14px;
+        margin: 0;
+        color: $header-color;
+        font-weight: 700;
+      }
+    }
+    .sub-bd {
+      height: calc(100% - 44px);
+      box-sizing: border-box;
+      background-color: #fff;
+      .sub-main {
+        height: calc(100% - 0px);
+        .sub-scroll-wrapper {
+          height: 100%;
+          overflow: hidden;
+        }
+      }
+    }
+  }
+  .el-textarea {
+    position: relative;
+    .txtCount {
+      position: absolute;
+      right: 10px;
+      bottom: 5px;
+      color: #afbacb;
+    }
+  }
+}
+
+.title-tabs {
+  // 自定义的tabs
+  &.el-tabs {
+    height: 44px !important;
+    .el-tabs__header {
+      padding-bottom: 0px !important;
+      // padding-left: 20px;
+      padding-right: 20px;
+      .el-tabs__active-bar {
+        background-color: $primary-color;
+      }
+      .el-tabs__item {
+        height: 44px;
+        line-height: 44px;
+        font-weight: 600;
+        &.is-active,
+        &:hover {
+          color: $primary-color;
+        }
+      }
+      .el-tabs__nav-wrap::after {
+        background-color: transparent;
+      }
+    }
+    .el-tab-pane {
+      height: 0 !important;
+    }
+  }
+}
+
+// 简单搜栏样式
+.header-filter {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  // padding-top: 6px;
+  margin-bottom: 16px;
+  .el-input-group__append {
+    background-color: $primary-color !important;
+    border: 1px solid $primary-color !important;
+    .el-button {
+      padding-left: 12px;
+      padding-right: 10px;
+      color: #fff;
+    }
+  }
+  .el-input__icon {
+    line-height: 32px;
+  }
+  .header-filter-btns {
+    min-height: 40px;
+    .el-button--text {
+      color: $primary-color;
+    }
+  }
+  .el-input__inner {
+    height: 32px !important;
+    line-height: 32px !important;
+    border-radius: 0px !important;
+  }
+}
+
+.dialog-inner-content {
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  padding: 40px 20px 10px;
+  position: relative;
+  box-sizing: border-box;
+  > h3 {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    height: 40px;
+    line-height: 40px;
+    background-color: rgba(0, 0, 0, 0.08);
+    padding-left: 20px;
+    color: $primary-color;
+    font-weight: 600;
+  }
+}
+
+.vxe-modal--wrapper.type--modal.no-body-scroll .vxe-modal--body .vxe-modal--content {
+  overflow: hidden;
+}
+
+.dialog-footer-btns {
+  text-align: center;
+}
+
+.accessory {
+  // 上传附件的样式
+  .title {
+    height: 40px;
+    line-height: 40px;
+    .label {
+      float: left;
+      font-size: 14px;
+      color: #777e8c;
+    }
+    .upload {
+      float: right;
+    }
+  }
+}
+
+// 弹出选择窗口
+.el-input-group__append.select-append {
+  padding: 0 8px;
+  .el-button {
+    margin-left: -8px;
+    margin-right: -8px;
+    padding-left: 5px;
+    padding-right: 5px;
+  }
+}
+
+/* 自定义分页样式 */
+
+.el-pagination.cus-pagination .el-input__inner {
+  padding-left: 0px !important;
+}
+
+.cus-pagination.el-pagination span:not([class*='suffix']),
+.el-pagination button {
+  padding: 0 6px;
+}
+
+.cus-pagination.el-pagination.is-background .btn-prev:disabled,
+.el-pagination.is-background .btn-next:disabled {
+  background-color: transparent !important;
+  border: 1px solid #eaedf1;
+}
+
+.el-pagination.is-background .btn-prev,
+.el-pagination.is-background .btn-next,
+.el-pagination.is-background .el-pager li {
+  margin: 0 2px;
+}
+
+.el-pagination.is-background.cus-pagination .btn-prev,
+.el-pagination.is-background.cus-pagination .btn-next {
+  background-color: transparent !important;
+  border: 1px solid #eaedf1;
+}
+
+.el-pagination.is-background.cus-pagination .btn-prev,
+.el-pagination.is-background.cus-pagination .btn-next,
+.el-pagination.is-background.cus-pagination .el-pager li {
+  background-color: transparent;
+  border: 1px solid #eaedf1;
+  border-radius: 2px;
+}
+
+.el-pagination.is-background.cus-pagination .el-pager li:not(.disabled).active {
+  border-radius: 2px;
+  border-color: transparent;
+}
+
+.cus-pagination .el-pagination__jump {
+  margin-left: 0;
+}
+
+.cus-pagination .el-input__inner {
+  height: 28px !important;
+  line-height: 28px !important;
+}
+
+// 使表格树的单元格radio不显示
+.vxe-table .select-disable .vxe-cell--radio {
+  &.is--disabled {
+    color: #666;
+  }
+  padding-left: 0;
+  .vxe-radio--icon {
+    display: none;
+  }
+}
+
+/* 对 element-ui 样式的一些扩展 及自定义样式*/
+
+.el-button {
+  .iconfont {
+    // .el-button下使用iconfont图标
+    font-size: 14px;
+    + span {
+      margin-left: 5px;
+    }
+  }
+  + .el-dropdown {
+    // 此样式主要是searchbar 右侧的下拉按钮
+    margin-left: 10px;
+  }
+}
+
+// 表格的操作按钮样式
+.operation-a {
+  color: $primary-color;
+  cursor: pointer;
+}
+
+.operation-a + .operation-a {
+  margin-left: 10px;
+}
+
+.search-condition-list {
+  // 搜索条件的标签列表
+  .el-tag {
+    margin-bottom: 10px;
+  }
+  
+  .tags:not(:first-child) {
+    margin-left: 6px;
+  }
+  .tags.clearall {
+    cursor: pointer;
+  }
+}
+
+// 右上角的选择年份
+.drop-select-year {
+  position: relative;
+  .el-input--prefix .el-input__inner {
+    font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 微软雅黑, Arial, sans-serif;
+    padding-left: 10px;
+    padding-right: 10px;
+    border: none;
+    background: none;
+    cursor: pointer;
+    color: #000;
+    font-weight: 600;
+  }
+  .el-input__icon {
+    width: 0;
+    display: none;
+  }
+  .right-p {
+    position: absolute;
+    top: 9px;
+    right: -2px;
+    color: #000;
+  }
+}