vsyswin-ui 0.2.56 → 0.2.59

package/package.json

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

package/packages/index.js

@@ -7,13 +7,14 @@ import selectProject from './select-project' // 项目选择组件
 import selectTree from './select-tree' // 表单树选择器
 import SearchBar from './search-bar' // 搜索工具栏
 import simpleSearchBar from './simple-search-bar' // 简单搜索栏组件
+import inputMore from './input-more' // 简单搜索栏组件
 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, paging, newSearchBar, table, dragSet]
+const components = [layout, searchTree, selectProject, selectTree, SearchBar, simpleSearchBar, inputMore, paging, newSearchBar, table, dragSet]
 
 // 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
 const install = function (Vue) {
@@ -38,6 +39,7 @@ export default {
   selectTree,
   SearchBar,
   simpleSearchBar,
+  inputMore,
   paging,
   newSearchBar,
   table,

package/packages/input-more/index.js

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

package/packages/input-more/src/input-more.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="sy-input-more" :class="{ 'is-active': isActive }" @mouseleave="isActive = false">
+    <!-- <input type="text" :title="str" :value="str" :placeholder="placeholder" :maxlength="maxlength" readonly @focus="open" /> -->
+    <span class="span-input" :title="str" @click="open" @mouseenter="isActive = true">
+      <span class="span-content" v-if="!!str">{{ str }}</span>
+      <span v-else class="span-content placeholder">{{ placeholder }}</span>
+      <i class="el-icon-circle-close" v-if="!!str && isActive" @click.stop="clearChoosed"></i>
+    </span>
+    <i class="el-icon-more more-icon" @click="open"></i>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SyInputMore',
+  props: {
+    placeholder: {
+      type: String,
+      default: '请选择'
+    },
+    str: {
+      type: String,
+      default: ''
+    },
+    maxlength: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      isActive: false
+    }
+  },
+  methods: {
+    clearChoosed() {
+      this.$emit('clear')
+    },
+    open() {
+      this.isActive = true
+      this.$emit('open')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.sy-input-more {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding-right: 4px;
+  height: 32px;
+  line-height: 30px;
+  border-radius: 2px;
+  border: 1px solid #dcdfe6;
+  &.is-active {
+    border-color: #027aff;
+  }
+  .el-input__inner {
+    border: none;
+    height: 30px;
+    line-height: 30px;
+  }
+  .span-input {
+    width: 0;
+    flex: 1;
+    padding-left: 10px;
+    padding-right: 18px;
+    position: relative;
+    .span-content {
+      display: block;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+    .el-icon-circle-close {
+      position: absolute;
+      right: 2px;
+      top: 50%;
+      transform: translateY(-50%);
+      cursor: pointer;
+    }
+    .placeholder {
+      color: #c0c4cc;
+    }
+  }
+  > .el-icon-more {
+    cursor: pointer;
+  }
+}
+</style>

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

@@ -382,7 +382,7 @@ export default {
     saveToLocalPosition: {
       type: String,
       default: 'right',
-      validator: function (value) {
+      validator: function(value) {
         return ['left', 'right'].indexOf(value) !== -1
       }
     },
@@ -438,8 +438,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,
@@ -472,10 +472,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()
@@ -532,9 +532,9 @@ export default {
       this.$emit('on-search', { keyword: this.keyword, filterList })
     },
     handleTagClose(tag) {
-      const parentItem = this.currentSearchList.find((x) => x.id === tag.pId)
-      const parentIndex = this.currentSearchList.findIndex((x) => x.id === tag.pId)
-      const childIndex = parentItem.itemList.findIndex((x) => x.id === tag.id)
+      const parentItem = this.currentSearchList.find(x => x.id === tag.pId)
+      const parentIndex = this.currentSearchList.findIndex(x => x.id === tag.pId)
+      const childIndex = parentItem.itemList.findIndex(x => x.id === tag.id)
       parentItem.itemList.forEach((item, index) => {
         if (parentItem.multiple) {
           // 多选
@@ -563,10 +563,10 @@ export default {
     },
     // 关闭所有的标签
     handleClearAllTags() {
-      this.tagList.forEach((tag) => {
-        const parentItem = this.currentSearchList.find((x) => x.id === tag.pId)
-        const parentIndex = this.currentSearchList.findIndex((x) => x.id === tag.pId)
-        const childIndex = parentItem.itemList.findIndex((x) => x.id === tag.id)
+      this.tagList.forEach(tag => {
+        const parentItem = this.currentSearchList.find(x => x.id === tag.pId)
+        const parentIndex = this.currentSearchList.findIndex(x => x.id === tag.pId)
+        const childIndex = parentItem.itemList.findIndex(x => x.id === tag.id)
         parentItem.itemList.forEach((item, index) => {
           if (parentItem.multiple) {
             // 多选
@@ -600,8 +600,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
           if (['month', 'year'].includes(item.type)) {
             item.value = item.default && item.defaultValue ? item.defaultValue : ''
@@ -612,8 +612,8 @@ export default {
           if (item.type === 'select') {
             if (item.default && item.defaultValue) {
               if (item.multiple) {
-                const valueOptions = item.defaultValue.map((x) => item.options.find((f) => f.value === x))
-                item.value = valueOptions.map((x) => x.value)
+                const valueOptions = item.defaultValue.map(x => item.options.find(f => f.value === x))
+                item.value = valueOptions.map(x => x.value)
               } else {
                 item.value = item.defaultValue
               }
@@ -630,8 +630,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 = {
@@ -664,10 +664,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 {
-                  const defaultItem = item.options.find((x) => x.value === item.defaultValue)
+                  const defaultItem = item.options.find(x => x.value === item.defaultValue)
                   obj.name = defaultItem.label
                   obj.value = defaultItem
                 }
@@ -739,15 +739,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)
           })
@@ -755,10 +755,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 })
                   }
@@ -795,7 +795,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))
@@ -816,7 +816,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)
@@ -826,6 +826,14 @@ export default {
     handleClickOutside(e) {
       // console.log(e)
       const target = e.target
+      // console.log(target)
+      const dialogList = [...document.querySelectorAll('.el-dialog__wrapper')]
+      for (let i = 0; i < dialogList.length; i++) {
+        if (dialogList[i].contains(target)) {
+          return false
+        }
+      }
+
       if (target.classList.contains('el-dialog__wrapper')) {
         // 点击弹窗遮罩时不隐藏
         return false

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

@@ -2,8 +2,17 @@
   <div class="header-filter">
     <div class="header-filter-input">
       <slot name="filterInput">
-        <el-input class="header-filter-input" size="small" :placeholder="placeholder" @keyup.enter.native="search"
-          v-model.trim="keyword" @input="auto && search" @clear="search" clearable>
+        <el-input
+          class="header-filter-input"
+          size="small"
+          :placeholder="placeholder"
+          @keyup.enter.native="search"
+          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>
         </el-input>
       </slot>
@@ -40,12 +49,23 @@ export default {
       default: false
     }
   },
+  watch: {
+    value(nVal) {
+      this.keyword = nVal
+    }
+  },
   methods: {
-    search: debounce(200, function () {
+    search: debounce(200, function() {
       // 执行搜索事件
       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>