vsyswin-ui 0.2.69 → 0.2.70

package/package.json

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

package/packages/index.js

@@ -14,11 +14,12 @@ import newSearchBar from './newSearchBar' // 高级筛选
 import table from './table' // 表格组件
 import dragSet from './drag-set'
 import buttonEllipsis from './button-ellipsis'
+import topTabs from './top-tabs'
 export { default as Progress } from './progress';
 const { buttonList, buttonItem } = buttonEllipsis
 
 // 存储组件列表
-const components = [layout, searchTree, selectProject, selectTree, buttonItem, buttonList, SearchBar, simpleSearchBar, inputMore, paging, newSearchBar, table, dragSet]
+const components = [layout, searchTree, selectProject, selectTree, buttonItem, buttonList, SearchBar, simpleSearchBar, inputMore, paging, newSearchBar, table, dragSet, topTabs]
 
 // 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
 const install = function (Vue) {
@@ -49,5 +50,6 @@ export default {
   paging,
   newSearchBar,
   table,
+  topTabs,
   dragSet
 }

package/packages/progress/index.js

@@ -2,63 +2,92 @@ import NProgress from 'nprogress';
 import 'nprogress/nprogress.css';
 
 const ProgressBar = function (config = {}) {
+    // 构造函数配置
     this.options = Object.assign({
+        // 超时时长，超过时长无响应自动完成进度条
         timeout: 8000,
+        // 排除接口，接口路径包含数组中存在的字符串，则请求不启用进度条
         exclude: ['option/getOptions', 'basicsWebData/getTypeOptions', 'menuName/queryMenuName']
     }, config);
+    // 记录进度条状态
     this.state = 'done';
+    // 原计划用于合并请求时使用，暂时用不到
     this.isMerge = false;
+    // 记录调用start次数
     this.count = 0;
+    // 计计时器
     this.timer = null;
     const { timeout, exclude } = this.options;
+    // 启动方法，接收2个参数 opt（配置），url（请求路径，用于过滤不启用进度条的请求）
     this.start = function (opt = {}, url = '') {
-        if (opt.noProgress) {
+        // 如果调用start方法时传入了 noProgress 为 true， 不执行任何操作
+        if (opt && opt.noProgress) {
             return;
         }
         this.count++;
+        // 过滤不启用进度条的请求
         const f = exclude.find(it => url.includes(it));
         if (!f) {
             if (this.state !== 'start') {
+                // 如果状态不是start，才启动进度条，并将状态置位start
                 this.state = 'start';
                 NProgress.start();
             } else {
+                // 如果状态是start，表示进度条已启动，则调用inc将进度条前进随机长度，但不会到100%
                 NProgress.inc();
             }
             clearTimeout(this.timer);
+            // 如果超时，则自动完成进度条
             this.timer = setTimeout(() => {
                 NProgress.done();
             }, timeout);
         }
     };
+    // 完成方法
     this.done = function (opt = {}) {
-        if (opt.noProgress) {
+        // 如果调用 done 方法时传入了 noProgress 为 true， 不执行任何操作
+        if (opt && opt.noProgress) {
             return;
         }
         if (!this.isMerge) {
+            // 如果调用 done 方法时传入了 noEnd 为 true， 即当前done方法中不完成进度条
             if (opt.noEnd) {
+                // 计数减1
                 this.count--;
+                // 如果状态是start，则调用inc将进度条前进随机长度，但不会到100%
                 if (this.state === 'start') {
                     NProgress.inc();
                 }
                 return;
             }
+            // 延迟200ms再执行操作
             setTimeout(() => {
+                // 计数减1
                 this.count--;
                 if (this.count <= 0) {
+                    // 如果计数为0，则表示调用start和调用done方法次数相同，所有请求都已完成
+                    // 则结束进度条
+                    // state 置为 done
                     this.state = 'done';
+                    // 计数置为0
                     this.count = 0;
                     NProgress.done();
                 } else if (this.state === 'start') {
+                    // 如果计数 大于 0，则表示调用start次数 多余 调用done方法次数，
+                    // 则表示仍有请求未结束
+                    // 则调用inc将进度条前进随机长度，但不会到100%
                     NProgress.inc();
                 }
             }, 200);
         }
     };
+    // 原计划用于合并请求时使用，暂时用不到
     this.MStart = function () {
         this.isMerge = true;
         this.state = 'start';
         NProgress.start();
     };
+    // 原计划用于合并请求时使用，暂时用不到
     this.MDone = function () {
         this.isMerge = false;
         this.state = 'done';

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

@@ -837,7 +837,7 @@ export default {
         // 先清空所有标签
         currentSearchList.forEach((ele) => {
           ele.itemList.forEach((item) => {
-            item.isActive = false(['daterange', 'monthrange'].includes(item.type)) && (item.value = null)
+            item.isActive = (['daterange', 'monthrange'].includes(item.type)) && (item.value = null)
           })
         })
 
@@ -854,7 +854,7 @@ export default {
                       v.id === ele.id && ['daterange', 'monthrange'].includes(v.type) && (v.value = ele.value)
                     } else {
                       // 单选
-                      v.isActive = v.id === ele.id[('daterange', 'monthrange')].includes(v.type) && (v.value = v.id === ele.id ? ele.value : null)
+                      v.isActive = v.id === ele.id && [('daterange', 'monthrange')].includes(v.type) && (v.value = v.id === ele.id ? ele.value : null)
                     }
                   } else if (v.type === 'slot') {
                     v.setValue && v.setValue({ value: ele.value, name: ele.name, ...ele })
@@ -876,6 +876,8 @@ export default {
         }
 
         this.currentSearchList = currentSearchList
+        const tList = this.createTagList()
+        this.tagList = tList
       }
     },
     // 编辑保存过滤条件的下拉框选项

package/packages/styles/common.scss

@@ -474,3 +474,47 @@ $alien: left, center, right;
         border-top: 1px solid $borderColor;
     }
 }
+.syswin-top-tabs {
+    display:inline-block;
+    .el-tabs__item {
+        color: #131414;
+        font-weight: 400 !important;
+        font-size: 16px;
+        padding: 0 16px !important;
+        font-family: PingFang SC-Regular, PingFang SC;
+        &:hover {
+            color: $primary-color;
+        }
+    }
+    .el-tabs__nav-wrap::after{
+        height: 0!important;
+    }
+    .el-tabs__item:nth-child(2) {
+        padding-left: 0px !important;
+    }
+    .el-tabs__item::after {
+        content: '';
+        display: inline-block;
+        width: 1px;
+        height: 20px;
+        background-color: #D8DDE5;
+        position: relative;
+        left: 16px;
+        top: 4px;
+    }
+    .el-tabs__item:last-child::after {
+        content: '';
+        display: none;
+    }
+    .is-active {
+        color: $primary-color;
+        font-weight: 600 !important;
+    }
+    .el-tabs__active-bar {
+        display: none;
+    }
+    .el-tabs__item:focus.is-active.is-focus:not(:active) {
+        -webkit-box-shadow: none!important;
+        box-shadow: none!important;
+    }
+}

package/packages/top-tabs/index.js

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

package/packages/top-tabs/src/top-tabs.vue

@@ -0,0 +1,78 @@
+<template>
+    <el-tabs class="syswin-top-tabs" v-model="activeName" @tab-click="handleClick">
+        <el-tab-pane v-for="item in tabs" :key="item.name" :label="item.label" :name="item.name"></el-tab-pane>
+    </el-tabs>
+</template>
+<script>
+export default {
+    name: 'SyTopTabs',
+    props: {
+        value: {
+            type: [Number, String],
+            default: ''
+        },
+        props: {
+            type: Object,
+            default() {
+                return {}
+            }
+        },
+        data: {
+            type: Array,
+            default() {
+                return []
+            }
+        }
+    },
+    data() {
+        return {
+            activeName: ''
+        }
+    },
+    computed: {
+        defaultProps() {
+            return Object.assign({
+                label: 'label',
+                name: 'name'
+            }, this.props)
+        },
+        tabs() {
+            const { name, label } = this.defaultProps
+            return this.data.map(item => {
+                return {
+                    name: item[name],
+                    label: item[label]
+                }
+            })
+        }
+    },
+    watch: {
+        value(name) {
+            this.updateValue(name)
+        }
+    },
+    created() {
+        this.updateValue(this.value)
+    },
+    methods: {
+        updateValue(name) {
+            if (name !== this.activeName) {
+                const tab = this.data.find(it => it.name === name)
+                if (tab) {
+                    this.click(tab)
+                }
+            }
+        },
+        handleClick(tab) {
+            const { name } = this.defaultProps
+            const item = this.data.find(it => it[name] === tab.name)
+            this.click(item)
+        },
+        click(tab) {
+            this.activeName = tab.name
+            this.$emit('input', tab.name)
+            this.$emit('tab-click', tab)
+        }
+    }
+}
+</script>