vsyswin-ui 0.2.50 → 0.2.54

package/package.json

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

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

@@ -120,13 +120,16 @@
       border-left: $--border-base;
       background-color: #fafafa;
       overflow: hidden;
+      display: flex;
+      flex-wrap: wrap;
       .el-date-editor {
         border-radius: $--border-radius-small;
       }
     }
 
     @include e(li) {
-      float: left;
+      display: flex;
+      align-items: center;
       padding: 0 12px;
       line-height: 48px;
       color: transparentize($--color-black, 0.35);
@@ -158,7 +161,7 @@
       float: left;
       margin: 0 8px 0 0;
       font-size: $--font-size-base;
-      font-weight: $--font-weight-normal;
+      font-weight: 600;
     }
 
     @include e(subContent) {

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

@@ -43,7 +43,7 @@
                     >
                   </template>
                   <template v-else-if="item.type === 'daterange'">
-                    <span class="syswin-filter-item__name" v-if="item.name">{{ item.name }}</span>
+                    <span class="syswin-filter-item__name" v-if="item.name && !item.hideName">{{ item.name }}</span>
                     <el-date-picker
                       type="daterange"
                       v-model="item.value"
@@ -58,8 +58,20 @@
                     >
                     </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
+                      :type="item.type"
+                      v-model="item.value"
+                      size="small"
+                      :placeholder="`选择${item.type === 'month' ? '月' : '年'}`"
+                      :value-format="`${item.type === 'month' ? 'yyyy-MM' : 'yyyy'}`"
+                      @change="handleChangeDateragne(idx, index)"
+                    >
+                    </el-date-picker>
+                  </template>
                   <template v-else-if="item.type === 'datetimerange'">
-                    <span class="syswin-filter-item__name" v-if="item.name">{{ item.name }}</span>
+                    <span class="syswin-filter-item__name" v-if="item.name && !item.hideName">{{ item.name }}</span>
                     <el-date-picker
                       type="datetimerange"
                       v-model="item.value"
@@ -134,6 +146,18 @@
                     >
                     </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
+                      :type="item.type"
+                      v-model="item.value"
+                      size="small"
+                      :placeholder="`选择${item.type === 'month' ? '月' : '年'}`"
+                      :value-format="`${item.type === 'month' ? 'yyyy-MM' : 'yyyy'}`"
+                      @change="handleChangeDateragne(idx, index)"
+                    >
+                    </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
@@ -275,7 +299,10 @@
       </div>
     </transition>
     <div class="search-condition-list" v-if="tagList.length && !customTagList">
-      <el-tag v-for="tag in tagList" class="tags" :key="`${tag.pId}_${tag.id}`" size="small"> {{ tag.pName }}: {{ tag.name }} </el-tag>
+      <el-tag v-for="tag in tagList" class="tags" :key="`${tag.pId}_${tag.id}`" size="small" closable @close="handleTagClose(tag)">
+        {{ tag.pName }}: {{ tag.name }}
+      </el-tag>
+      <el-tag size="small" class="tags clearall" v-if="tagList.length > 1" @click="handleClearAllTags">清除所有</el-tag>
     </div>
   </div>
 </template>
@@ -352,7 +379,7 @@ export default {
     saveToLocalPosition: {
       type: String,
       default: 'right',
-      validator: function (value) {
+      validator: function(value) {
         return ['left', 'right'].indexOf(value) !== -1
       }
     },
@@ -408,8 +435,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,
@@ -422,6 +449,9 @@ export default {
               }
               if (item.type === 'text') {
                 obj.name = item.name
+              } else if (item.type === 'month' || item.type === 'year') {
+                if (!item.value) return
+                obj.name = item.value + (item.type === 'month' ? '月' : '年')
               } else if (item.type === 'daterange') {
                 if (!item.value || !item.value[0]) {
                   return
@@ -439,10 +469,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()
@@ -498,18 +528,96 @@ export default {
       const filterList = this.createTagList()
       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)
+      parentItem.itemList.forEach((item, index) => {
+        if (parentItem.multiple) {
+          // 多选
+          index === childIndex && (item.isActive = false)
+        } else {
+          // 单选
+          if (index === childIndex) {
+            item.isActive = false
+            ;(item.type === 'daterange' || item.type === 'datetimerange') && (item.value = null)
+            if (item.type === 'month' || item.type === 'year') {
+              item.value = ''
+            }
+            if (item.type === 'select') {
+              item.value = item.multiple ? [] : null
+            }
+            if (item.type === 'slot') {
+              item.setValue({ name: '', value: '' })
+            }
+          }
+        }
+      })
+      this.$set(this.currentSearchList, parentIndex, parentItem)
+      const filterList = this.createTagList()
+      this.tagList = filterList
+      this.$emit('on-search', { keyword: this.keyword, filterList })
+    },
+    // 关闭所有的标签
+    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)
+        parentItem.itemList.forEach((item, index) => {
+          if (parentItem.multiple) {
+            // 多选
+            index === childIndex && (item.isActive = false)
+          } else {
+            // 单选
+            if (index === childIndex) {
+              item.isActive = false
+              ;(item.type === 'daterange' || item.type === 'datetimerange') && (item.value = null)
+              if (item.type === 'month' || item.type === 'year') {
+                item.value = ''
+              }
+              if (item.type === 'select') {
+                item.value = item.multiple ? [] : null
+              }
+              if (item.type === 'slot') {
+                item.setValue({ name: '', value: '' })
+              }
+            }
+          }
+        })
+        this.$set(this.currentSearchList, parentIndex, parentItem)
+      })
+      const filterList = this.createTagList()
+      this.tagList = filterList
+      this.$emit('on-search', { keyword: this.keyword, filterList })
+    },
     // 清除关键字/选中标签/选中条件
     handleClearData() {
       this.conditionValue = ''
       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)
-          item.type === 'select' && (item.value = null)
+          if (['month', 'year'].includes(item.type)) {
+            item.value = item.default && item.defaultValue ? item.defaultValue : ''
+          }
+          if (item.type === 'daterange' || 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)
+              } else {
+                item.value = item.defaultValue
+              }
+            } else {
+              item.value = null
+            }
+          }
           item.type === 'slot' && item.setValue({ value: '', name: '' })
         })
       })
@@ -519,8 +627,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 = {
@@ -533,6 +641,9 @@ export default {
               }
               if (item.type === 'text') {
                 obj.name = item.name
+              } else if (item.type === 'month' || item.type === 'year') {
+                if (!item.defaultValue) return
+                obj.name = item.defaultValue + (item.type === 'month' ? '月' : '年')
               } else if (item.type === 'daterange') {
                 if (!item.defaultValue || !item.defaultValue[0]) {
                   return
@@ -550,10 +661,12 @@ 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
+                  const defaultItem = item.options.find(x => x.value === item.defaultValue)
+                  obj.name = defaultItem.label
+                  obj.value = defaultItem
                 }
               } else if (item.type === 'slot') {
                 // slot选项不设置默认值
@@ -576,6 +689,9 @@ export default {
           // 单选
           item.isActive = index === childIndex ? !childItem.isActive : false
           ;(item.type === 'daterange' || item.type === 'datetimerange') && (item.value = null)
+          if (item.type === 'month' || item.type === 'year') {
+            item.value = ''
+          }
           if (item.type === 'select') {
             item.value = item.multiple ? [] : null
           }
@@ -607,7 +723,7 @@ export default {
           this.$set(this.currentSearchList, parentIndex, parentItem)
         }
       } else {
-        item.value = null
+        item.value = item.type === 'month' || item.type === 'year' ? '' : null
         item.isActive = false
         this.$set(this.currentSearchList[parentIndex].itemList, childIndex, item)
       }
@@ -620,15 +736,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)
           })
@@ -636,10 +752,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 })
                   }
@@ -676,7 +792,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))
@@ -697,7 +813,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.scss

@@ -475,6 +475,9 @@ input:focus {
   .tags:not(:first-child) {
     margin-left: 6px;
   }
+  .tags.clearall {
+    cursor: pointer;
+  }
 }
 
 // 右上角的选择年份

package/packages/table/src/table.vue

@@ -266,6 +266,11 @@ export default {
             type: String,
             default: () => ''
         },
+        // 合计功能保留小数位
+        decimalNum: {
+            type: Number,
+            default: () => 2
+        },
         virtual: Boolean
     },
     data () {
@@ -491,6 +496,7 @@ export default {
                             }
                         }, 0);
                     }
+                    sums[index] = (+sums[index]).toFixed(this.decimalNum);
                 } else {
                     sums[index] = '';
                 }
@@ -550,13 +556,13 @@ export default {
     border-color: #027AFF;
     background: #027AFF;
 }
-.el-input__inner {
-    height: 32px !important;
-    line-height: 32px !important;
-    border-radius: 2px !important;
-    box-sizing: border-box !important;
-    border-color: #D9D9D9 !important;
-}
+// .el-input__inner {
+//     height: 32px !important;
+//     line-height: 32px !important;
+//     border-radius: 2px !important;
+//     box-sizing: border-box !important;
+//     border-color: #D9D9D9 !important;
+// }
 
 .el-input__inner:hover {
     border-color: #D0D3D6!important;