vsyswin-ui 0.2.68 → 0.2.71

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vsyswin-ui",
-    "version": "0.2.68",
+    "version": "0.2.71",
     "main": "lib/vsyswin-ui.umd.min.js",
     "private": false,
     "description": "Vue2.x的应用组件库.",
@@ -22,6 +22,7 @@
         "jquery": "^3.5.1",
         "lodash": "^4.17.20",
         "moment": "^2.29.1",
+        "nprogress": "^0.2.0",
         "throttle-debounce": "^3.0.1",
         "vue": "^2.6.12",
         "vuedraggable": "^2.23.2"
@@ -44,4 +45,4 @@
         "vue-template-compiler": "^2.6.11",
         "xe-utils": "^3.0.4"
     }
-}
+}

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

@@ -0,0 +1,98 @@
+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 = '') {
+        // 如果调用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 = {}) {
+        // 如果调用 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';
+        NProgress.done();
+    };
+};
+
+export default ProgressBar

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 })
@@ -864,10 +864,13 @@ export default {
                     } else {
                       v.value = ele.value
                     }
+                    if (ele.value) v.isActive = true
                   } else if (v.type === 'month' || v.type === 'year') {
                     v.value = ele.value
+                    if (ele.value) v.isActive = true
                   } else if (v.type === 'daterange' || v.type === 'monthrange' || v.type === 'datetimerange') {
                     v.value = ele.value
+                    if (ele.value.length && ele.value[0]) v.isActive = true
                   }
                 })
               }
@@ -876,6 +879,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>