vsyswin-ui 0.2.64 → 0.2.67

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vsyswin-ui",
-    "version": "0.2.64",
+    "version": "0.2.67",
     "main": "lib/vsyswin-ui.umd.min.js",
     "private": false,
     "description": "Vue2.x的应用组件库.",
@@ -9,6 +9,7 @@
         "syswin-ui"
     ],
     "scripts": {
+        "dev": "vue-cli-service serve",
         "serve": "vue-cli-service serve",
         "build": "vue-cli-service build",
         "lint": "vue-cli-service lint",

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

@@ -28,6 +28,11 @@
       margin-left: 8px;
       color: $--color-primary;
       font-size: $--font-size-base;
+      &:hover {
+        background: transparent !important;
+        color: #027aff !important;
+        border-color: transparent !important;
+      }
       .el-icon-caret-bottom {
         transition: $--all-transition;
 
@@ -50,12 +55,17 @@
       }
     }
 
-    @include e(reset) {
+    @include e(reset) {      
       padding: 0;
       width: $--button-width-base;
       height: $--button-height-base;
       font-size: $--button-font-size;
       border-radius: $--button-border-radius-small;
+      &:hover {
+        color: #606266 !important;
+        border-color: #DCDFE6 !important;
+        background: #fff !important;
+      }
     }
 
     @include e(listBtns) {

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

@@ -58,6 +58,22 @@
                     >
                     </el-date-picker>
                   </template>
+                  <template v-else-if="item.type === 'monthrange'">
+                    <span class="syswin-filter-item__name" v-if="item.name && !item.hideName">{{ item.name }}</span>
+                    <el-date-picker
+                      type="monthrange"
+                      v-model="item.value"
+                      size="small"
+                      range-separator="至"
+                      start-placeholder="开始月份"
+                      end-placeholder="结束月份"
+                      :editable="false"
+                      :unlink-panels="true"
+                      value-format="timestamp"
+                      @change="handleChangeDateragne(idx, index)"
+                    >
+                    </el-date-picker>
+                  </template>
                   <template v-else-if="item.type === 'month' || item.type === 'year'">
                     <span class="syswin-filter-item__name" v-if="item.name && !item.hideName">{{ item.name }}</span>
                     <el-date-picker
@@ -147,6 +163,22 @@
                     >
                     </el-date-picker>
                   </template>
+                  <template v-else-if="item.type === 'monthrange'">
+                    <span class="syswin-filter-item__name" v-if="item.name">{{ item.name }}</span>
+                    <el-date-picker
+                      type="monthrange"
+                      v-model="item.value"
+                      size="small"
+                      range-separator="至"
+                      start-placeholder="开始月份"
+                      end-placeholder="结束月份"
+                      :editable="false"
+                      :unlink-panels="true"
+                      value-format="timestamp"
+                      @change="handleChangeDateragne(idx, index)"
+                    >
+                    </el-date-picker>
+                  </template>
                   <template v-else-if="item.type === 'month' || item.type === 'year'">
                     <span class="syswin-filter-item__name" v-if="item.name && !item.hideName">{{ item.name }}</span>
                     <el-date-picker
@@ -232,6 +264,22 @@
                         >
                         </el-date-picker>
                       </template>
+                      <template v-else-if="item.type === 'monthrange'">
+                        <span class="syswin-filter-item__name" v-if="item.name">{{ item.name }}</span>
+                        <el-date-picker
+                          type="monthrange"
+                          v-model="item.value"
+                          size="small"
+                          range-separator="至"
+                          start-placeholder="开始月份"
+                          end-placeholder="结束月份"
+                          :editable="false"
+                          :unlink-panels="true"
+                          value-format="timestamp"
+                          @change="handleChangeDateragne(idx, index + maxConditionLength)"
+                        >
+                        </el-date-picker>
+                      </template>
                       <template v-else-if="item.type === 'datetimerange'">
                         <span class="syswin-filter-item__name" v-if="item.name">{{ item.name }}</span>
                         <el-date-picker
@@ -314,6 +362,22 @@
 import _ from 'lodash'
 import moment from 'moment'
 import saveLocal from './save-local'
+
+function deepCopyFunction(arr1, arr2) {
+  for (let i = 0; i < arr1.length; i++) {
+    const father1 = arr1[i]
+    const father2 = arr2[i]
+    for (let j = 0; j < father1.itemList.length; j++) {
+      const item1 = father1.itemList[j]
+      const item2 = father2.itemList[j]
+      if (item1.type === 'slot') {
+        item1.getValue = item2.getValue
+        item1.setValue = item2.setValue
+      }
+    }
+  }
+}
+
 export default {
   name: 'SySearchbar',
   components: {
@@ -382,7 +446,7 @@ export default {
     saveToLocalPosition: {
       type: String,
       default: 'right',
-      validator: function(value) {
+      validator: function (value) {
         return ['left', 'right'].indexOf(value) !== -1
       }
     },
@@ -411,6 +475,7 @@ export default {
     searchList: {
       handler(value) {
         this.currentSearchList = _.cloneDeep(value)
+        deepCopyFunction(this.currentSearchList, value)
         if (!this.hasSetDefaultTag) {
           this.setDefaultTagList()
           this.hasSetDefaultTag = true
@@ -438,8 +503,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,
@@ -460,6 +525,11 @@ export default {
                   return
                 }
                 obj.name = `${moment(item.value[0]).format('YYYY-MM-DD')}至${moment(item.value[1]).format('YYYY-MM-DD')}`
+              } else if (item.type === 'monthrange') {
+                if (!item.value || !item.value[0]) {
+                  return
+                }
+                obj.name = `${moment(item.value[0]).format('YYYY-MM')}至${moment(item.value[1]).format('YYYY-MM')}`
               } else if (item.type === 'datetimerange') {
                 if (!item.value || !item.value[0]) {
                   return
@@ -472,13 +542,14 @@ 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()
+                if (!item.getValue) return
+                const info = item.getValue() // 这里不能直接调，因为是深拷贝过来的
                 if (!info.name || !info.value) {
                   // 如果没有选择数据，则不处理
                   return
@@ -544,9 +615,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) {
           // 多选
@@ -555,7 +626,7 @@ export default {
           // 单选
           if (index === childIndex) {
             item.isActive = false
-            ;(item.type === 'daterange' || item.type === 'datetimerange') && (item.value = null)
+            ;(item.type === 'daterange' || item.type === 'monthrange' || item.type === 'datetimerange') && (item.value = null)
             if (item.type === 'month' || item.type === 'year') {
               item.value = ''
             }
@@ -575,10 +646,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) {
             // 多选
@@ -587,7 +658,7 @@ export default {
             // 单选
             if (index === childIndex) {
               item.isActive = false
-              ;(item.type === 'daterange' || item.type === 'datetimerange') && (item.value = null)
+              ;(item.type === 'daterange' || item.type === 'monthrange' || item.type === 'datetimerange') && (item.value = null)
               if (item.type === 'month' || item.type === 'year') {
                 item.value = ''
               }
@@ -612,20 +683,20 @@ 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 : ''
           }
-          if (item.type === 'daterange' || item.type === 'datetimerange') {
+          if (item.type === 'daterange' || item.type === 'monthrange' || item.type === 'datetimerange') {
             item.value = item.default && item.defaultValue ? item.defaultValue : null
           }
           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
               }
@@ -642,8 +713,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,6 +735,11 @@ export default {
                   return
                 }
                 obj.name = `${moment(item.defaultValue[0]).format('YYYY-MM-DD')}至${moment(item.defaultValue[1]).format('YYYY-MM-DD')}`
+              } else if (item.type === 'monthrange') {
+                if (!item.defaultValue || !item.defaultValue[0]) {
+                  return
+                }
+                obj.name = `${moment(item.defaultValue[0]).format('YYYY-MM')}至${moment(item.defaultValue[1]).format('YYYY-MM')}`
               } else if (item.type === 'datetimerange') {
                 if (!item.defaultValue || !item.defaultValue[0]) {
                   return
@@ -676,10 +752,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
                 }
@@ -703,7 +779,7 @@ export default {
         } else {
           // 单选
           item.isActive = index === childIndex ? !childItem.isActive : false
-          ;(item.type === 'daterange' || item.type === 'datetimerange') && (item.value = null)
+          ;(item.type === 'daterange' || item.type === 'monthrange' || item.type === 'datetimerange') && (item.value = null)
           if (item.type === 'month' || item.type === 'year') {
             item.value = ''
           }
@@ -751,37 +827,47 @@ 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)
+        deepCopyFunction(currentSearchList, this.currentSearchList)
         const { keyword = '', filterList = [] } = list[0]
         this.keyword = keyword
 
         // 先清空所有标签
-        currentSearchList.forEach(ele => {
-          ele.itemList.forEach(item => {
-            item.isActive = false
-            item.type === 'daterange' && (item.value = null)
+        currentSearchList.forEach((ele) => {
+          ele.itemList.forEach((item) => {
+            item.isActive = false(['daterange', 'monthrange'].includes(item.type)) && (item.value = null)
           })
         })
 
         // 设置选中的标签
         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 => {
-                  if (v.type === 'slot') {
-                    v.setValue({ value: ele.value, name: ele.name, ...ele })
-                  }
-                  if (item.multiple) {
-                    // 多选
-                    v.id === ele.id && (v.isActive = true)
-                    v.id === ele.id && v.type === 'daterange' && (v.value = ele.value)
-                  } else {
-                    // 单选
-                    v.isActive = v.id === ele.id
-                    v.type === 'daterange' && (v.value = v.id === ele.id ? ele.value : null)
+                item.itemList.forEach((v) => {
+                  if (v.type === 'text') {
+                    if (item.multiple) {
+                      // 多选
+                      v.id === ele.id && (v.isActive = true)
+                      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)
+                    }
+                  } else if (v.type === 'slot') {
+                    v.setValue && v.setValue({ value: ele.value, name: ele.name, ...ele })
+                  } else if (v.type === 'select') {
+                    if (v.multiple) {
+                      v.value = ele.value
+                    } else {
+                      v.value = ele.value
+                    }
+                  } else if (v.type === 'month' || v.type === 'year') {
+                    v.value = ele.value
+                  } else if (v.type === 'daterange' || v.type === 'monthrange' || v.type === 'datetimerange') {
+                    v.value = ele.value
                   }
                 })
               }
@@ -807,7 +893,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))
@@ -828,7 +914,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/styles/common-old.scss

@@ -508,10 +508,13 @@ input:focus {
 .sy-btn-ellipsis {
   .el-button {
       outline: none !important;
+      &.el-button--text {
+        color: $primary-color;
+      }
   }
   .el-button:hover, .el-button:active, .el-button:focus {
       background: none !important;
-      color: #66b1ff !important;
+      color: $primary-color !important;
       border: 1px solid transparent !important;
   }
 }