From 870aaa5f8061a7017592d43945c804522682cb01 Mon Sep 17 00:00:00 2001
From: juzi <819872918@qq.com>
Date: Wed, 10 Apr 2024 14:38:56 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8E=BB=E9=99=A4=E5=B1=95=E5=BC=80=E6=94=B6?=
 =?UTF-8?q?=E8=B5=B7=E5=8A=9F=E8=83=BD=EF=BC=8C=E6=90=9C=E7=B4=A2=E6=A1=86?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E4=B8=8D=E4=B8=8B=E8=87=AA=E5=8A=A8=E6=8D=A2?=
 =?UTF-8?q?=E8=A1=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                           |   2 +-
 src/components/SearchBar/SearchBar.vue | 146 +++++++++++--------------
 2 files changed, 67 insertions(+), 81 deletions(-)

diff --git a/package.json b/package.json
index 3375a07..9818932 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "code-brick-zj",
-  "version": "1.0.5",
+  "version": "1.1.0",
   "private": false,
   "description": "组件封装",
   "main": "index.js"
diff --git a/src/components/SearchBar/SearchBar.vue b/src/components/SearchBar/SearchBar.vue
index 78d0b7e..a7ae406 100644
--- a/src/components/SearchBar/SearchBar.vue
+++ b/src/components/SearchBar/SearchBar.vue
@@ -1,5 +1,9 @@
 <template>
-  <div class="searchBarBox divHeight" ref="searchBarRef" :style="{ paddingRight: isFold ? '55px' : '0px' }">
+  <div
+    class="searchBarBox"
+    ref="searchBarRef"
+    :style="{ paddingRight: isFold ? '55px' : '0px' }"
+  >
     <el-form
       :inline="true"
       ref="searchBarForm"
@@ -33,12 +37,12 @@
             :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.placeholder ? item.placeholder : item.label"
             @change="
               item.onchange
                 ? $emit('select-changed', {
                     param: item.param,
-                    value: formInline[item.param]
+                    value: formInline[item.param],
                   })
                 : null
             "
@@ -65,7 +69,17 @@
             :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')))"
+            :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'"
@@ -92,7 +106,7 @@
               item.onChange
                 ? $emit('cascader-change', {
                     param: item.param,
-                    value: formInline[item.param]
+                    value: formInline[item.param],
                   })
                 : null
             "
@@ -114,81 +128,77 @@
         <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() {
@@ -200,61 +210,52 @@ 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 {
@@ -267,16 +268,12 @@ 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;
@@ -286,32 +283,21 @@ 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>