Merge pull request '增加table操作列的tooltip,修改时间选择器的默认width' (#7) from zjl into develop

Reviewed-on: #7

package.json

@@ -1,6 +1,6 @@
 {
   "name": "code-brick-zj",
-  "version": "1.1.1",
+  "version": "1.0.3",
   "private": false,
   "description": "组件封装",
   "main": "index.js"

src/components/SearchBar/SearchBar.vue

@@ -1,9 +1,5 @@
 <template>
-  <div
-    class="searchBarBox"
-    ref="searchBarRef"
-    :style="{ paddingRight: isFold ? '55px' : '0px' }"
-  >
+  <div class="searchBarBox divHeight" ref="searchBarRef" :style="{ paddingRight: isFold ? '55px' : '0px' }">
     <el-form
       :inline="true"
       ref="searchBarForm"
@@ -33,16 +29,14 @@
             :size="item.size ? item.size : 'small'"
             :filterable="item.filterable ? item.filterable : false"
             :multiple="item.multiple ? item.multiple : false"
-            :collapse-tags="item.collapseTags ? item.collapseTags : false"
-            :multiple-limit="item.multipleLimit ? item.multipleLimit : 0"
             :clearable="item.clearable === false ? false : true"
             :style="item.width ? 'width:' + item.width + 'px' : 'width:200px'"
-            :placeholder="item.placeholder ? item.placeholder : item.label"
+            :placeholder="item.label"
             @change="
               item.onchange
                 ? $emit('select-changed', {
                     param: item.param,
-                    value: formInline[item.param],
+                    value: formInline[item.param]
                   })
                 : null
             "
@@ -69,25 +63,7 @@
             :placeholder="item.placeholder"
             :picker-options="item.pickerOptions ? item.pickerOptions : null"
             :clearable="item.clearable === false ? false : true"
-            :style="
-              item.width
-                ? 'width:' + item.width + 'px'
-                : item.dateType === 'datetimerange'
-                ? 'width:350px'
-                : item.dateType === 'daterange'
-                ? 'width:252px'
-                : item.dateType === 'datetime'
-                ? 'width:200px'
-                : 'width:148px'
-            "
-            @change="
-              item.onchange
-                ? $emit('datepicker-change', {
-                    param: item.param,
-                    value: formInline[item.param],
-                  })
-                : null
-            "
+            :style="item.width ? 'width:' + item.width + 'px' : (item.dateType === 'datetimerange' ? 'width:350px' : (item.dateType === 'daterange' ? 'width:252px' : (item.dateType === 'datetime' ? 'width:200px' : 'width:148px')))"
           />
           <el-autocomplete
             v-if="item.type === 'autocomplete'"
@@ -114,7 +90,7 @@
               item.onChange
                 ? $emit('cascader-change', {
                     param: item.param,
-                    value: formInline[item.param],
+                    value: formInline[item.param]
                   })
                 : null
             "
@@ -136,77 +112,81 @@
         <slot></slot>
       </el-form-item>
     </el-form>
+    <span v-if="isFold" class="foldClass" @click='switchMode'>
+      {{ isExpand ? '收起' : '展开' }}
+      <i class="iconfont" :class="isExpand ? 'icon-upward' : 'icon-downward'"></i>
+    </span>
   </div>
 </template>
 <script>
 export default {
-  name: "SearchBar",
+  name: 'SearchBar',
   props: {
     formConfigs: {
       type: Array,
       default: () => {
-        return [];
-      },
+        return []
+      }
     },
     removeBlue: {
       type: Boolean,
-      default: false,
+      default: false
     },
-    isFold: {
-      // 多行模式（默认否）
+    isFold: {// 多行模式（默认否）
       type: Boolean,
-      default: false,
-    },
+      default: false
+    }
   },
   data() {
-    const formInline = {};
-    const formConfig = this.formConfigs;
-    let hasExtraOptions = false;
+    const formInline = {}
+    const formConfig = this.formConfigs
+    let hasExtraOptions = false
     for (const obj of formConfig) {
-      if (obj.type !== "button") {
+      if (obj.type !== 'button') {
         if (obj.defaultSelect === false || obj.defaultSelect === 0) {
-          formInline[obj.param] = obj.defaultSelect;
+          formInline[obj.param] = obj.defaultSelect
         } else {
-          formInline[obj.param] = obj.defaultSelect || ""; // defaultSelect下拉框默认选中项
+          formInline[obj.param] = obj.defaultSelect || '' // defaultSelect下拉框默认选中项
         }
       }
       if (obj.extraOptions) {
-        hasExtraOptions = true;
+        hasExtraOptions = true
       }
     }
     return {
       formInline,
       formConfig,
       hasExtraOptions,
-    };
+      isExpand: false // 是否展开（默认否）
+    }
   },
   watch: {
     formConfig: {
       handler() {
         for (const obj of this.formConfig) {
           if (obj.defaultSelect) {
-            this.formInline[obj.param] = obj.defaultSelect;
+            this.formInline[obj.param] = obj.defaultSelect
           } else if (obj.defaultSelect === null) {
             // 需要手动从外部清除选项缓存的情况，确保在外部配置项中可直接设置null
-            this.formInline[obj.param] = "";
+            this.formInline[obj.param] = ''
           }
         }
       },
       deep: true,
-      immediate: true,
+      immediate: true
     },
     formInline: {
       handler: function () {
-        this.$forceUpdate();
+        this.$forceUpdate()
       },
       deep: true,
-      immediate: true,
-    },
+      immediate: true
+    }
   },
   mounted() {
     this.$nextTick(() => {
-      this.init();
-    });
+      this.init()
+    })
   },
   methods: {
     init() {
@@ -218,52 +198,61 @@ export default {
             this.$watch(
               `formInline.${obj.param}`,
               function (newVal) {
-                let deleteCount = 0;
+                let deleteCount = 0
                 if (obj.index + 1 < this.formConfig.length) {
                   // 如果obj不是最后一个配置
-                  const nextConfig = this.formConfig[obj.index + 1];
+                  const nextConfig = this.formConfig[obj.index + 1]
                   if (nextConfig.parent && nextConfig.parent === obj.param)
-                    deleteCount = 1;
+                    deleteCount = 1
                 }
                 const currentConfig = Object.assign(
                   {},
                   obj.extraOptions[newVal]
-                );
+                )
                 this.formConfig.splice(
                   obj.index + 1,
                   deleteCount,
                   currentConfig
-                );
+                )
                 // 修改 formInline
-                this.$set(this.formInline, currentConfig.param, "");
+                this.$set(this.formInline, currentConfig.param, '')
               },
               { immediate: true }
-            );
+            )
           }
         }
       }
     },
     headBtnClick(btnName) {
-      this.formInline.btnName = btnName;
-      this.$emit("headBtnClick", this.formInline);
+      this.formInline.btnName = btnName
+      this.$emit('headBtnClick', this.formInline)
     },
     resetForm() {
-      this.$refs.searchBarForm.resetFields();
-      const formInline = {};
-      const formConfig = this.formConfigs;
+      this.$refs.searchBarForm.resetFields()
+      const formInline = {}
+      const formConfig = this.formConfigs
       for (const obj of formConfig) {
-        if (obj.type !== "button") {
+        if (obj.type !== 'button') {
           if (obj.defaultSelect === false || obj.defaultSelect === 0) {
-            formInline[obj.param] = obj.defaultSelect;
+            formInline[obj.param] = obj.defaultSelect
           } else {
-            formInline[obj.param] = obj.defaultSelect || ""; // defaultSelect下拉框默认选中项
+            formInline[obj.param] = obj.defaultSelect || '' // defaultSelect下拉框默认选中项
           }
         }
       }
-      this.formInline = formInline;
+      this.formInline = formInline
     },
-  },
-};
+    switchMode() {// 展开和收起切换
+      this.isExpand = !this.isExpand
+      const element = this.$refs.searchBarRef
+      if (this.isExpand) {
+        element.classList.remove('divHeight')
+      } else {
+        element.classList.add('divHeight')
+      }
+    }
+  }
+}
 </script>
 <style>
 .searchBarBox {
@@ -276,12 +265,16 @@ export default {
   display: block;
   clear: both;
 }
+.divHeight {
+  height: 45px;
+  overflow: hidden;
+}
 .searchBar .blue-block {
   display: inline-block;
   float: left;
   width: 4px;
   height: 16px;
-  background-color: #0b58ff;
+  background-color: #0B58FF;
   border-radius: 1px;
   margin-right: 8px;
   margin-top: 12px;
@@ -291,21 +284,32 @@ export default {
 }
 .searchBar .el-date-editor .el-range__icon {
   font-size: 16px;
-  color: #0b58ff;
+  color:#0B58FF;
 }
 .searchBar .el-input__prefix .el-icon-date {
   font-size: 16px;
-  color: #0b58ff;
+  color:#0B58FF;
 }
 .searchBar .el-input__prefix .el-icon-time {
   font-size: 16px;
-  color: #0b58ff;
+  color:#0B58FF;
 }
 .searchBar .separateStyle {
   display: inline-block;
   width: 1px;
   height: 24px;
-  background: #e8e8e8;
+  background: #E8E8E8;
   vertical-align: middle;
 }
+.searchBarBox .foldClass {
+  position: absolute;
+  top: 14px;
+  right: 0;
+  cursor: pointer;
+  font-size: 12px;
+  color:#0B58FF;
+}
+.searchBarBox .foldClass .iconfont {
+  font-size: 14px;
+}
 </style>