vsyswin-ui 0.2.40 → 0.2.44

package/package.json

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

package/packages/index.js

@@ -7,19 +7,20 @@ import selectProject from './select-project' // 项目选择组件
 import selectTree from './select-tree' // 表单树选择器
 import SearchBar from './search-bar' // 搜索工具栏
 import simpleSearchBar from './simple-search-bar' // 简单搜索栏组件
+import paging from './paging'
 import newSearchBar from './newSearchBar' // 高级筛选
 import table from './table' // 表格组件
 import dragSet from './drag-set'
 
 // 存储组件列表
-const components = [layout, searchTree, selectProject, selectTree, SearchBar, simpleSearchBar, newSearchBar, table, dragSet]
+const components = [layout, searchTree, selectProject, selectTree, SearchBar, simpleSearchBar, paging, newSearchBar, table, dragSet]
 
 // 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
-const install = function(Vue) {
+const install = function (Vue) {
   // 判断是否可以安装
   if (install.installed) return
   // 遍历注册全局组件
-  components.map(component => Vue.component(component.name, component))
+  components.map((component) => Vue.component(component.name, component))
 }
 
 // 判断是否是直接引入文件
@@ -37,6 +38,7 @@ export default {
   selectTree,
   SearchBar,
   simpleSearchBar,
+  paging,
   newSearchBar,
   table,
   dragSet

package/packages/paging/index.js

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

package/packages/paging/src/paging.vue

@@ -0,0 +1,86 @@
+<!-- 分页组件 -->
+<template>
+  <div :style="alignStyle">
+    <el-pagination
+      class="cus-pagination"
+      background
+      prev-text="上一页"
+      next-text="下一页"
+      size="small"
+      @size-change="handleSizeChange"
+      @current-change="handlePageChange"
+      :current-page="pagination.currentPage"
+      :page-sizes="pageSizes"
+      :page-size="pagination.pageSize"
+      :layout="layout"
+      :total="pagination.totals"
+    >
+      <slot>
+        <span class="el-pagination__total">总共 {{ pagination.totals }} 条，{{ Math.ceil(pagination.totals / pagination.pageSize) }} 页</span>
+      </slot>
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+/*
+  pagination: {
+    currentPage: 1,
+    pageSize: 20,
+    totals: 0
+  }
+*/
+export default {
+  name: 'SyPaging',
+  props: {
+    align: {
+      type: String,
+      default: 'right',
+      validator: function (value) {
+        return ['left', 'center', 'right'].indexOf(value) !== -1
+      }
+    },
+    layout: {
+      type: String,
+      default: 'slot, prev, pager, next, sizes, jumper'
+    },
+    pagination: {
+      type: Object,
+      required: true
+    },
+    pageSizes: {
+      type: Array,
+      default() {
+        return [10, 20, 50, 100, 200]
+      }
+    }
+  },
+  computed: {
+    alignStyle() {
+      return {
+        'text-align': this.align
+      }
+    }
+  },
+  methods: {
+    // 每页数量发生改变
+    handleSizeChange(val) {
+      const { currentPage, totals } = this.pagination
+      const maxNum = Math.ceil(totals / val)
+      this.pagination.currentPage = maxNum < currentPage ? maxNum : currentPage
+      this.pagination.pageSize = val
+      this.handleChange('pageSize')
+    },
+    // 页码发生改变
+    handlePageChange(val) {
+      this.pagination.currentPage = val
+      this.handleChange('currentPage')
+    },
+
+    handleChange(type) {
+      const { currentPage, pageSize } = this.pagination
+      this.$emit('change', { currentPage, pageSize }, type)
+    }
+  }
+}
+</script>

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

@@ -3,6 +3,7 @@
   <div class="syswin-searchbar" v-clickoutside="handleClickOutside">
     <div class="syswin-searchbar-container">
       <el-input class="syswin-searchbar-container__input" v-model="keyword" :placeholder="placeholder" clearable size="small" @clear="handleClearInput">
+        <slot slot="suffix" name="suffix"></slot>
       </el-input>
       <el-button v-if="showFilter" type="text" size="small" class="syswin-searchbar-container__filter" @click="handleToggleFilterList">
         {{ shrinkFilterList ? '收起筛选' : '更多筛选' }}
@@ -351,7 +352,7 @@ export default {
     saveToLocalPosition: {
       type: String,
       default: 'right',
-      validator: function(value) {
+      validator: function (value) {
         return ['left', 'right'].indexOf(value) !== -1
       }
     },
@@ -407,8 +408,8 @@ export default {
     createTagList() {
       const list = []
       this.currentSearchList.length &&
-        this.currentSearchList.forEach(ele => {
-          ele.itemList.forEach(item => {
+        this.currentSearchList.forEach((ele) => {
+          ele.itemList.forEach((item) => {
             if (item.isActive || item.type === 'slot') {
               let obj = {
                 pId: ele.id,
@@ -438,10 +439,10 @@ export default {
               } else if (item.type === 'select') {
                 if (!item.value) return
                 if (item.multiple) {
-                  const valueOptions = item.value.map(x => item.options.find(f => f.value === x))
-                  obj.name = valueOptions.map(x => x.label).join(',')
+                  const valueOptions = item.value.map((x) => item.options.find((f) => f.value === x))
+                  obj.name = valueOptions.map((x) => x.label).join(',')
                 } else {
-                  obj.name = item.options.find(x => x.value === item.value).label
+                  obj.name = item.options.find((x) => x.value === item.value).label
                 }
               } else if (item.type === 'slot') {
                 const info = item.getValue()
@@ -503,8 +504,8 @@ export default {
       this.keyword = ''
 
       const currentSearchList = _.cloneDeep(this.currentSearchList)
-      currentSearchList.forEach(ele => {
-        ele.itemList.forEach(item => {
+      currentSearchList.forEach((ele) => {
+        ele.itemList.forEach((item) => {
           item.isActive = !!item.default
           item.type === 'daterange' && (item.value = null)
           item.type === 'datetimerange' && (item.value = null)
@@ -518,8 +519,8 @@ export default {
     setDefaultTagList() {
       const list = []
       if (this.currentSearchList) {
-        this.currentSearchList.forEach(ele => {
-          ele.itemList.forEach(item => {
+        this.currentSearchList.forEach((ele) => {
+          ele.itemList.forEach((item) => {
             if (item.default) {
               // 如果是默认值
               const obj = {
@@ -549,10 +550,10 @@ export default {
               } else if (item.type === 'select') {
                 if (!item.defaultValue) return
                 if (item.multiple) {
-                  const valueOptions = item.defaultValue.map(x => item.options.find(f => f.value === x))
-                  obj.name = valueOptions.map(x => x.label).join(',')
+                  const valueOptions = item.defaultValue.map((x) => item.options.find((f) => f.value === x))
+                  obj.name = valueOptions.map((x) => x.label).join(',')
                 } else {
-                  obj.name = item.options.find(x => x.value === item.defaultValue).label
+                  obj.name = item.options.find((x) => x.value === item.defaultValue).label
                 }
               } else if (item.type === 'slot') {
                 // slot选项不设置默认值
@@ -619,15 +620,15 @@ export default {
     // 切换保存过滤条件的下拉框
     handleChangeCondition(value) {
       this.conditionValue = value
-      const list = this.conditionList.filter(item => item.value === value)
+      const list = this.conditionList.filter((item) => item.value === value)
       if (list.length) {
         const currentSearchList = _.cloneDeep(this.currentSearchList)
         const { keyword = '', filterList = [] } = list[0]
         this.keyword = keyword
 
         // 先清空所有标签
-        currentSearchList.forEach(ele => {
-          ele.itemList.forEach(item => {
+        currentSearchList.forEach((ele) => {
+          ele.itemList.forEach((item) => {
             item.isActive = false
             item.type === 'daterange' && (item.value = null)
           })
@@ -635,10 +636,10 @@ export default {
 
         // 设置选中的标签
         if (filterList && filterList.length) {
-          filterList.forEach(ele => {
-            currentSearchList.forEach(item => {
+          filterList.forEach((ele) => {
+            currentSearchList.forEach((item) => {
               if (ele.pId === item.id) {
-                item.itemList.forEach(v => {
+                item.itemList.forEach((v) => {
                   if (v.type === 'slot') {
                     v.setValue({ value: ele.value, name: ele.name, ...ele })
                   }
@@ -675,7 +676,7 @@ export default {
       let localList = localStorage.getItem(`syswin${this.storageName}`)
       if (!['', undefined, null].includes(localList)) {
         localList = JSON.parse(localList)
-        const idx = localList.findIndex(ele => ele.value === item.value)
+        const idx = localList.findIndex((ele) => ele.value === item.value)
         idx > -1 && localList.splice(idx, 1)
         localList.length > 0
           ? localStorage.setItem(`syswin${this.storageName}`, JSON.stringify(localList))
@@ -696,7 +697,7 @@ export default {
         this.conditionValue = momentValue
       } else {
         // 编辑
-        const index = this.conditionList.findIndex(ele => ele.value === this.currentData.value)
+        const index = this.conditionList.findIndex((ele) => ele.value === this.currentData.value)
         const item = this.conditionList[index]
         item.label = label
         this.$set(this.conditionList, index, item)

package/packages/search-tree/src/zTree.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="ztree-box">
-    <div class="ztree-search" v-if="!searchable">
+    <div class="ztree-search" v-if="searchable">
       <div class="ztree-search-wrapper" :class="searchClass">
         <div class="icon"></div>
         <div class="input-box">
@@ -76,7 +76,7 @@ export default {
     searchable: {
       type: Boolean,
       required: false,
-      default: false
+      default: true
     },
     placeholder: {
       type: String,