vsyswin-ui 0.2.59 → 0.2.62

package/package.json

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

package/packages/button-ellipsis/index.js

@@ -0,0 +1,14 @@
+
+import buttonList from './src/button-list.vue'
+import buttonItem from './src/button-item.vue'
+
+// 为组件提供 install 安装方法，供按需引入
+buttonList.install = function (Vue) {
+  Vue.component(buttonList.name, buttonList)
+}
+buttonItem.install = function (Vue) {
+  Vue.component(buttonItem.name, buttonItem)
+}
+
+// 默认导出组件
+export default { buttonList, buttonItem }

package/packages/button-ellipsis/src/button-container.vue

@@ -0,0 +1,68 @@
+<script>
+export default {
+  name: 'SyButtonContainer',
+  props: {
+    buttons: {
+      type: Array,
+      default: () => []
+    }
+  },
+  computed: {
+      trigger() {
+        return this.$parent.trigger
+      }
+  },
+  render(h) {
+    let contents = []
+    if (this.buttons.length <= 3) {
+      contents = this.buttons.map((btn) => {
+        return btn.$slots.default
+      })
+    } else {
+      const preBtns = this.buttons.slice(0, 2).map((btn) => btn.$slots.default)
+      const moreBtns = this.buttons.slice(2).map((btn) => {
+        const slotDefault = btn.$slots.default
+        const elBtn = slotDefault[0].componentOptions.children[0]
+        const listenersFn = slotDefault[0].componentOptions.listeners.click
+        const icon = slotDefault[0].componentOptions.propsData.icon || ''
+        const text = elBtn.text
+        return h(
+          'el-dropdown-item',
+          {
+            props: { icon },
+            nativeOn: {
+              click: listenersFn
+            }
+          },
+          [text]
+        )
+      })
+      const moreDiv = h('div', { class: 'sy-button-dots' }, [h('i', { class: 'el-icon-more' })])
+      const dropDown = h(
+        'el-dropdown',
+        {
+          props: { trigger: this.trigger, size: 'medium', placement: 'bottom-end' }
+        },
+        [moreDiv, h('el-dropdown-menu', { slot: 'dropdown' }, moreBtns)]
+      )
+      contents = [...preBtns, dropDown]
+    }
+
+    return h(
+      'div',
+      {
+        class: 'sy-buttons'
+      },
+      contents
+    )
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.sy-button-dots {
+  width: 18px;
+  height: 18px;
+  cursor: pointer;
+}
+</style>

package/packages/button-ellipsis/src/button-item.vue

@@ -0,0 +1,15 @@
+<script>
+    export default {
+        name: 'SyButtonItem',
+        mounted() {
+            this.$parent.buttons.push(this)
+        },
+        render(h) {
+            return h('div', { style: { display: 'none' } })
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+
+</style>

package/packages/button-ellipsis/src/button-list.vue

@@ -0,0 +1,30 @@
+<template>
+    <div class="sy-btn-ellipsis">
+        <slot></slot>
+        <button-container :buttons="buttons"></button-container>
+    </div>
+</template>
+
+<script>
+    import buttonContainer from './button-container.vue'
+    export default {
+        name: 'SyButtonList',
+        components: { buttonContainer },
+        props: {
+            trigger: {
+                type: String,
+                default: 'hover',
+                validator: (value) => ['hover', 'click'].includes(value)
+            }
+        },
+        data() {
+            return {
+                buttons: []
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+
+</style>

package/packages/index.js

@@ -1,3 +1,4 @@
+import './styles/common-old.scss'
 import './styles/common.scss'
 import './styles/iconfont/iconfont.css'
 
@@ -12,9 +13,12 @@ import paging from './paging'
 import newSearchBar from './newSearchBar' // 高级筛选
 import table from './table' // 表格组件
 import dragSet from './drag-set'
+import buttonEllipsis from './button-ellipsis'
+
+const { buttonList, buttonItem } = buttonEllipsis
 
 // 存储组件列表
-const components = [layout, searchTree, selectProject, selectTree, SearchBar, simpleSearchBar, inputMore, paging, newSearchBar, table, dragSet]
+const components = [layout, searchTree, selectProject, selectTree, buttonItem, buttonList, SearchBar, simpleSearchBar, inputMore, paging, newSearchBar, table, dragSet]
 
 // 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
 const install = function (Vue) {
@@ -37,6 +41,8 @@ export default {
   searchTree,
   selectProject,
   selectTree,
+  buttonItem,
+  buttonList,
   SearchBar,
   simpleSearchBar,
   inputMore,

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/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;
+  }
+}