lw-cdp-ui 1.0.19 → 1.0.21

package/dist/components/lwSearch/index.vue

@@ -1,636 +1,636 @@
-<template>
-  <div id="search-wrap">
-    <div class="search-content">
-      <el-form ref="searchForm" :model="form" @submit.prevent :label-align="labelAlign" style="width: 100%">
-        <el-row :class="(options.length - expandNumber === 0) ? 'expand-row' : (options.length - expandNumber < columnNumber) ? '' : isExpandStatus ? ((options.length % columnNumber === 0) ? 'expand-row' : '') : (options.length >= expandNumber ? 'expand-row' : '')" type="flex" justify="start" :gutter="0">
-          <template v-for="(item, index) in options" :key="item.prop">
-            <el-col :class="(!isExpandStatus && item.isExpand) ? '' : (options.length - expandNumber < columnNumber) ? '' : (!isExpandStatus && index > (expandNumber - 1) ? 'hide' : '')" :span="columnNumber ? 24/columnNumber : (item.span || 8)">
-              <el-form-item :label-width="hideLabel ? 0 : labelWidth" :required="item.required" :label="hideLabel ? '' : $t(item.label)">
-                <template v-if="item.dateSection && item.prop && item.prop.length === 2">
-                  <el-row :gutter="10" class="date-section">
-                    <el-col :span="12" :style="{ width: '45%', flex: '0 0 45%' }">
-                      <component :is="setComponent(item.renderType)" :disabled="item.disabled" :item="item" v-model="form[item.prop[0]]" :disabled-date="(date) => disabledDate(date, 'prev', form[item.prop[1]])" :propValueFormat="item.valueFormat || 'YYYY-MM-DD 00:00:00'" />
-                    </el-col>
-                    <span class="date-section-line"> - </span>
-                    <el-col :span="12" :style="{ width: '45%', flex: '0 0 45%' }">
-                      <component :is="setComponent(item.renderType)" :disabled="item.disabled" :item="item" v-model="form[item.prop[1]]" :disabled-date="(date) => disabledDate(date, 'next', form[item.prop[0]])" :propValueFormat="item.valueFormat || 'YYYY-MM-DD 23:59:59'" />
-                    </el-col>
-                  </el-row>
-                </template>
-                <template v-else>
-                  <component v-model="form[item.prop]" :is="setComponent(item.renderType)" :disabled="item.disabled" :item="item" style="width: 100%" />
-                </template>
-              </el-form-item>
-            </el-col>
-          </template>
-        </el-row>
-
-        <div class="control" :style="{bottom: ((options.length%columnNumber === 0) ? '0px' : '16px')}">
-          <el-button class="reset" @click="resetForm('searchForm')">
-            {{$t('btn.reset')}}
-          </el-button>
-          <el-button class="submit" type="primary" @click="submitForm('searchForm')">
-            {{$t('btn.query')}}
-          </el-button>
-
-          <div :class="options.length - expandNumber >= columnNumber ? 'expand-button' : 'hidden'" @click="isExpandStatus = !isExpandStatus">
-            <span>{{ isExpandStatus ? "收起" : "展开" }}</span>
-          </div>
-        </div>
-      </el-form>
-    </div>
-  </div>
-</template>
-
-<script>
-import SearchInput from "./input/input.vue";
-import SearchSelect from "./select/select.vue";
-import SearchDate from "./date/date.vue";
-import SearchDates from "./dates/dates.vue";
-import SearchDateRange from "./dateRange/dateRange.vue";
-import dayjs from "dayjs";
-
-export default {
-  components: {
-    SearchInput,
-    SearchSelect,
-    SearchDate,
-    SearchDates,
-    SearchDateRange,
-  },
-  name: "lwSearch",
-  props: {
-    options: {
-      // 配置项
-      type: Array,
-      default: () => [],
-    },
-    modelValue: {
-      // 绑定的结果对象
-      type: Object,
-      default: () => ({}),
-    },
-    labelWidth: {
-      // label全局宽度
-      type: String,
-      default: "70px",
-    },
-    labelPosition: {
-      // label全局位置
-      type: String,
-      default: "left",
-    },
-    columnNumber: {
-      // 每行列数量
-      type: Number,
-      default: 4,
-    },
-    isSave: {
-      // 是否保存功能
-      type: Boolean,
-      default: false,
-    },
-    isCloud: {
-      // 是否保存功能
-      type: Boolean,
-      default: false,
-    },
-    saveKey: {
-      // 保存功能指定localStorage searchSaveData对象中key
-      type: String,
-      default: "",
-    },
-    isExpand: {
-      // 默认是否展开
-      type: Boolean,
-      default: false,
-    },
-    expandNumber: {
-      // 默认收起展示数量
-      type: Number,
-      default: 4,
-    },
-    hasExpandAll: {
-      // 默认收起展示数量
-      type: Boolean,
-      default: false,
-    },
-    hideLabel: {
-      // 是否隐藏标签
-      type: Boolean,
-      default: false,
-    },
-    labelAlign: {
-      //标签对齐方式
-      type: String,
-      default: "right",
-    },
-  },
-  data() {
-    return {
-      form: {}, // 内部维护数据
-      defaultForm: {}, // 原始数据
-      isExpandStatus: false, // 是否展开搜索条件
-      isChange: false, // 是否展示变式下拉框
-      saveList: [], // 搜索保存数据列表
-      saveFormName: "", // 当前保存数据名称
-      isSaveShow: false, // 是否展示保存操作
-      isSelectShow: false, // 是否展示选择操作
-      selectForm: "", // 当前选中数据
-      currentExpandNumber: 4, // 当前收起展示数量
-      isExpandAll: true,
-      currentTemplate: {},
-      variantList: [],
-      varianId: [],
-      systemName: "shopManagement",
-    };
-  },
-  watch: {
-    modelValue: {
-      handler(newVal) {
-        if (JSON.stringify(newVal) !== JSON.stringify(this.form)) {
-          this.form = JSON.parse(JSON.stringify(newVal));
-        }
-      },
-      deep: true,
-    },
-    form: {
-      handler(newVal) {
-        if (JSON.stringify(newVal) !== JSON.stringify(this.modelValue)) {
-          this.$emit("update:modelValue", newVal);
-        }
-      },
-      deep: true,
-    },
-  },
-  mounted() {
-    this.isExpandStatus = this.isExpand;
-    this.currentExpandNumber = this.expandNumber || this.columnNumber;
-    this.form = JSON.parse(JSON.stringify(this.modelValue));
-    this.defaultForm =
-      JSON.stringify(this.defaultForm) === "{}"
-        ? JSON.parse(JSON.stringify(this.modelValue))
-        : this.defaultForm;
-  },
-  methods: {
-    // 根据renderType设置对应组件
-    setComponent(type) {
-      const typeList = {
-        input: "SearchInput",
-        select: "SearchSelect",
-        date: "SearchDate",
-        dates: "SearchDates",
-        dateRange: "SearchDateRange",
-      };
-      return typeList[type] || "SearchInput";
-    },
-    // 触发提交
-    submitForm(formEl) {
-      if (!this.$refs[formEl]) return;
-      this.$refs[formEl].validate((valid) => {
-        if (valid) {
-          this.$emit("search");
-        }
-      });
-    },
-    // 重置条件
-    resetForm(formEl) {
-      if (!this.$refs[formEl]) return;
-      this.$refs[formEl].resetFields();
-      this.form = JSON.parse(JSON.stringify(this.defaultForm));
-      // 保留页面table分页数据
-      this.form.size = this.modelValue.size;
-      this.form.page = this.modelValue.page;
-      this.$emit("reset");
-    },
-
-    // 关闭变式
-    handleChangeHide(vis) {
-      if (vis === false) {
-        this.isChange = false;
-        this.isSaveShow = false;
-        this.isSelectShow = false;
-        this.saveFormName = "";
-        this.selectForm = "";
-      }
-    },
-    // 保存搜索表单
-    handleSaveSearchForm() {
-      if (this.saveKey && this.isSave) {
-        if (Object.keys(this.form).length === 0) {
-          this.$message.error("搜索条件为空！");
-          return;
-        }
-        let tempObj = Object.assign({}, this.form, {
-          searchSaveName: this.saveFormName,
-          id: dayjs().valueOf() + Math.random() + "",
-        });
-        let obj = {
-          route: this.$route.name,
-          system: this.systemName,
-          variant: [tempObj],
-        };
-        let resObj = this.variantList.find((it) => {
-          return it.route === this.$route.name;
-        });
-        if (resObj) {
-          resObj.variant.push(tempObj);
-        } else {
-          this.variantList.push(obj);
-        }
-        if (this.isCloud) {
-          let params = {
-            id: this.varianId,
-            username: JSON.parse(sessionStorage.userAuthInfo).username,
-            system: this.systemName,
-            menu: this.saveKey,
-            content: JSON.stringify(this.variantList),
-          };
-        } else {
-          localStorage.setItem("variantList", JSON.stringify(this.variantList));
-        }
-      }
-    },
-    // 选择保存过的搜索历史
-    handleSearchSelect(val) {
-      let obj = this.saveList.find((it) => {
-        return it.id === val;
-      });
-      if (obj) {
-        let rObj = JSON.parse(JSON.stringify(obj));
-        delete rObj.id;
-        delete rObj.searchSaveName;
-        this.$emit("update:modelValue", rObj);
-      }
-    },
-    // 删除保存过的搜索历史
-    handleDeleteSearchList(index) {
-      let tempList = JSON.parse(JSON.stringify(this.saveList));
-      tempList.splice(index, 1);
-      if (this.saveKey && this.isSave) {
-        // 更新逻辑，视具体API而定
-      }
-    },
-    // 禁止选择日期
-    disabledDate(date, currentSource, limitDate = "") {
-      if (limitDate) {
-        if (currentSource === "prev") {
-          return dayjs(date.getTime()).isAfter(dayjs(limitDate), "day");
-        }
-        if (currentSource === "next") {
-          return dayjs(date.getTime()).isBefore(dayjs(limitDate), "day");
-        }
-      }
-    },
-    // 一键收缩展开
-    expandAll() {
-      this.isExpandAll = !this.isExpandAll;
-    },
-  },
-};
-</script>
-<style lang="scss" scoped>
-@keyframes slide-animation {
-  from {
-    width: 100%;
-    height: auto;
-    margin-top: 0;
-    padding: 15px 60px 0 15px;
-    // transform: scale(1);
-    opacity: 1;
-  }
-
-  to {
-    width: 0;
-    height: 0;
-    margin-top: -10px;
-    padding: 0;
-    // transform: scale(0);
-    opacity: 0;
-  }
-}
-
-#search-wrap {
-  width: 100%;
-  background: var(--color-bg-2);
-  // position: relative;
-  overflow: hidden;
-  .arco-col {
-    margin: 5px 0;
-    padding: 0 !important;
-  }
-
-  .arco-form-item-label {
-    padding-right: 10px;
-  }
-
-  .el-col-6 {
-    margin: 5px 0;
-    padding: 0 10px !important;
-  }
-  .el-col-6:first-child {
-    padding-left: 0px !important;
-  }
-
-  .el-col-6:nth-child(4n) {
-    padding-right: 0px !important;
-  }
-
-  .control-button {
-    position: absolute;
-    top: 10px;
-    right: 20px;
-    z-index: 99;
-    cursor: pointer;
-
-    .expand-img {
-      width: 24px;
-      height: 24px;
-      cursor: pointer;
-      transition: all 0.5s linear;
-
-      &.close {
-        transform: rotate(180deg);
-      }
-    }
-  }
-
-  .arco-form-item-content-flex {
-    display: block;
-  }
-
-  .search-content {
-    position: relative;
-    // border: 1px solid #e5e5e5;
-    box-sizing: border-box;
-    width: 100%;
-    // transition: width .3s linear;
-    margin-top: 0;
-    padding: 0 0 0px 0;
-
-    &.close {
-      width: 0;
-      height: 0;
-      margin-top: -10px;
-      padding: 0;
-      overflow: hidden;
-      opacity: 0;
-      animation: slide-animation 0.3s;
-    }
-
-    .expand-row {
-      padding-bottom: 44px;
-    }
-
-    .control {
-      position: absolute;
-      right: 0;
-      bottom: 5px;
-      z-index: 9;
-      display: flex;
-      justify-content: flex-end;
-      align-items: flex-end;
-      .reset {
-        width: 90px;
-        height: 32px;
-        margin-right: 0px;
-        border: none;
-        background-color: #eeeefc;
-        color: #3d3ad9;
-        border-radius: 2px;
-        font-size: 12px;
-        & > span {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-
-          .el-icon--left {
-            margin-right: 5px;
-          }
-        }
-      }
-
-      .submit {
-        width: 90px;
-        height: 32px;
-        background-color: #3d3ad9;
-        border: none;
-        border-radius: 2px;
-        & > span {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-
-          .el-icon--left {
-            margin-right: 5px;
-          }
-        }
-      }
-
-      .expand-button {
-        display: flex;
-        align-items: center;
-        justify-content: flex-end;
-        box-sizing: border-box;
-        width: 40px;
-        padding-right: 5px;
-        cursor: pointer;
-
-        & > span {
-          color: #505050;
-          font-size: 12px;
-        }
-      }
-
-      .hidden {
-        visibility: hidden;
-        width: 0px;
-      }
-
-      .save {
-        position: relative;
-        // width: 84px;
-        height: 30px;
-        padding: 0;
-        padding: 0 10px;
-        // background: #bda87c;
-
-        .save-text {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          width: 84px;
-          height: 30px;
-
-          & > span {
-            padding-right: 10px;
-            padding-left: 10px;
-            border-right: 1px solid #fff;
-          }
-
-          & > i {
-            padding-left: 10px;
-          }
-        }
-      }
-    }
-
-    .el-form {
-      position: relative;
-    }
-
-    .el-form-item {
-      margin-bottom: 10px;
-
-      .el-form-item__label {
-        padding-right: 5px;
-        font-size: 12px;
-        user-select: none;
-      }
-      // .arco-select__tags-text {
-      //   max-width: 80px !important;
-      // }
-      .select-trigger {
-        width: 100%;
-
-        .el-select__tags {
-          // max-width: calc(100% - 0px) !important;
-          & > span {
-            max-width: 100%;
-
-            .el-tag--info {
-              max-width: 100% !important;
-
-              &:first-child {
-                .el-select__tags-text {
-                  max-width: 100% !important;
-                }
-              }
-
-              &:nth-child(2) {
-                // display: none;
-                .arco-select__tags-text {
-                  max-width: 100% !important;
-                }
-              }
-            }
-          }
-        }
-      }
-
-      .el-date-editor.el-input,
-      .el-date-editor.el-input__inner {
-        width: 100%;
-      }
-
-      .el-select .el-select__tags {
-        display: flex;
-        flex-wrap: nowrap;
-
-        & > span {
-          display: flex;
-          flex-wrap: nowrap;
-        }
-      }
-
-      .date-section {
-        position: relative;
-        margin-bottom: 0 !important;
-
-        .el-input--small .el-input__inner {
-          padding-right: 20px;
-          padding-left: 15px;
-        }
-
-        .el-input__prefix {
-          display: none;
-        }
-
-        .date-section-line {
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          transform: translate(-50%, -50%);
-        }
-      }
-    }
-  }
-}
-
-.hide {
-  display: none !important;
-}
-
-.search-panel-popover {
-  // background: red;
-  box-sizing: border-box;
-  position: relative;
-  .save-controls {
-    & > div {
-      & > span {
-        cursor: pointer;
-        display: block;
-        padding: 5px 0;
-        &:hover {
-          color: #155752;
-        }
-      }
-    }
-    .save-form {
-      width: 160px;
-      height: 40px;
-      background: #ffffff;
-      display: flex;
-      align-items: center;
-      justify-content: flex-start;
-      transform: translateX(-14px);
-      .save-form-button {
-        margin-left: 10px;
-      }
-      .save-form-input {
-        width: 84px;
-      }
-      .el-button--primary.is-disabled {
-        background: #155752;
-        opacity: 0.6;
-      }
-      .save-form-select {
-        width: 160px;
-      }
-    }
-  }
-}
-
-.select-popper {
-  .el-select-dropdown__item {
-    padding: 0 10px;
-  }
-  .select-content {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    box-sizing: border-box;
-    .select-content-button {
-      border: none;
-      background: none;
-      flex-shrink: 0;
-      box-sizing: border-box;
-      padding: 7px;
-      border-radius: 100%;
-      &:hover {
-        .el-icon--close {
-          opacity: 1;
-        }
-      }
-      .el-icon--close {
-        opacity: 0.6;
-        display: block;
-        color: #155752;
-        width: 12px;
-        height: 12px;
-      }
-    }
-  }
-}
-</style>
-
+<template>
+  <div id="search-wrap">
+    <div class="search-content">
+      <el-form ref="searchForm" :model="form" @submit.prevent :label-align="labelAlign" style="width: 100%">
+        <el-row :class="(options.length - expandNumber === 0) ? 'expand-row' : (options.length - expandNumber < columnNumber) ? '' : isExpandStatus ? ((options.length % columnNumber === 0) ? 'expand-row' : '') : (options.length >= expandNumber ? 'expand-row' : '')" type="flex" justify="start" :gutter="0">
+          <template v-for="(item, index) in options" :key="item.prop">
+            <el-col :class="(!isExpandStatus && item.isExpand) ? '' : (options.length - expandNumber < columnNumber) ? '' : (!isExpandStatus && index > (expandNumber - 1) ? 'hide' : '')" :span="columnNumber ? 24/columnNumber : (item.span || 8)">
+              <el-form-item :label-width="hideLabel ? 0 : labelWidth" :required="item.required" :label="hideLabel ? '' : $t(item.label)">
+                <template v-if="item.dateSection && item.prop && item.prop.length === 2">
+                  <el-row :gutter="10" class="date-section">
+                    <el-col :span="12" :style="{ width: '45%', flex: '0 0 45%' }">
+                      <component :is="setComponent(item.renderType)" :disabled="item.disabled" :item="item" v-model="form[item.prop[0]]" :disabled-date="(date) => disabledDate(date, 'prev', form[item.prop[1]])" :propValueFormat="item.valueFormat || 'YYYY-MM-DD 00:00:00'" />
+                    </el-col>
+                    <span class="date-section-line"> - </span>
+                    <el-col :span="12" :style="{ width: '45%', flex: '0 0 45%' }">
+                      <component :is="setComponent(item.renderType)" :disabled="item.disabled" :item="item" v-model="form[item.prop[1]]" :disabled-date="(date) => disabledDate(date, 'next', form[item.prop[0]])" :propValueFormat="item.valueFormat || 'YYYY-MM-DD 23:59:59'" />
+                    </el-col>
+                  </el-row>
+                </template>
+                <template v-else>
+                  <component v-model="form[item.prop]" :is="setComponent(item.renderType)" :disabled="item.disabled" :item="item" style="width: 100%" />
+                </template>
+              </el-form-item>
+            </el-col>
+          </template>
+        </el-row>
+
+        <div class="control" :style="{bottom: ((options.length%columnNumber === 0) ? '0px' : '16px')}">
+          <el-button class="reset" @click="resetForm('searchForm')">
+            {{$t('btn.reset')}}
+          </el-button>
+          <el-button class="submit" type="primary" @click="submitForm('searchForm')">
+            {{$t('btn.query')}}
+          </el-button>
+
+          <div :class="options.length - expandNumber >= columnNumber ? 'expand-button' : 'hidden'" @click="isExpandStatus = !isExpandStatus">
+            <span>{{ isExpandStatus ? "收起" : "展开" }}</span>
+          </div>
+        </div>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script>
+import SearchInput from "./input/input.vue";
+import SearchSelect from "./select/select.vue";
+import SearchDate from "./date/date.vue";
+import SearchDates from "./dates/dates.vue";
+import SearchDateRange from "./dateRange/dateRange.vue";
+import dayjs from "dayjs";
+
+export default {
+  components: {
+    SearchInput,
+    SearchSelect,
+    SearchDate,
+    SearchDates,
+    SearchDateRange,
+  },
+  name: "lwSearch",
+  props: {
+    options: {
+      // 配置项
+      type: Array,
+      default: () => [],
+    },
+    modelValue: {
+      // 绑定的结果对象
+      type: Object,
+      default: () => ({}),
+    },
+    labelWidth: {
+      // label全局宽度
+      type: String,
+      default: "70px",
+    },
+    labelPosition: {
+      // label全局位置
+      type: String,
+      default: "left",
+    },
+    columnNumber: {
+      // 每行列数量
+      type: Number,
+      default: 4,
+    },
+    isSave: {
+      // 是否保存功能
+      type: Boolean,
+      default: false,
+    },
+    isCloud: {
+      // 是否保存功能
+      type: Boolean,
+      default: false,
+    },
+    saveKey: {
+      // 保存功能指定localStorage searchSaveData对象中key
+      type: String,
+      default: "",
+    },
+    isExpand: {
+      // 默认是否展开
+      type: Boolean,
+      default: false,
+    },
+    expandNumber: {
+      // 默认收起展示数量
+      type: Number,
+      default: 4,
+    },
+    hasExpandAll: {
+      // 默认收起展示数量
+      type: Boolean,
+      default: false,
+    },
+    hideLabel: {
+      // 是否隐藏标签
+      type: Boolean,
+      default: false,
+    },
+    labelAlign: {
+      //标签对齐方式
+      type: String,
+      default: "right",
+    },
+  },
+  data() {
+    return {
+      form: {}, // 内部维护数据
+      defaultForm: {}, // 原始数据
+      isExpandStatus: false, // 是否展开搜索条件
+      isChange: false, // 是否展示变式下拉框
+      saveList: [], // 搜索保存数据列表
+      saveFormName: "", // 当前保存数据名称
+      isSaveShow: false, // 是否展示保存操作
+      isSelectShow: false, // 是否展示选择操作
+      selectForm: "", // 当前选中数据
+      currentExpandNumber: 4, // 当前收起展示数量
+      isExpandAll: true,
+      currentTemplate: {},
+      variantList: [],
+      varianId: [],
+      systemName: "shopManagement",
+    };
+  },
+  watch: {
+    modelValue: {
+      handler(newVal) {
+        if (JSON.stringify(newVal) !== JSON.stringify(this.form)) {
+          this.form = JSON.parse(JSON.stringify(newVal));
+        }
+      },
+      deep: true,
+    },
+    form: {
+      handler(newVal) {
+        if (JSON.stringify(newVal) !== JSON.stringify(this.modelValue)) {
+          this.$emit("update:modelValue", newVal);
+        }
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    this.isExpandStatus = this.isExpand;
+    this.currentExpandNumber = this.expandNumber || this.columnNumber;
+    this.form = JSON.parse(JSON.stringify(this.modelValue));
+    this.defaultForm =
+      JSON.stringify(this.defaultForm) === "{}"
+        ? JSON.parse(JSON.stringify(this.modelValue))
+        : this.defaultForm;
+  },
+  methods: {
+    // 根据renderType设置对应组件
+    setComponent(type) {
+      const typeList = {
+        input: "SearchInput",
+        select: "SearchSelect",
+        date: "SearchDate",
+        dates: "SearchDates",
+        dateRange: "SearchDateRange",
+      };
+      return typeList[type] || "SearchInput";
+    },
+    // 触发提交
+    submitForm(formEl) {
+      if (!this.$refs[formEl]) return;
+      this.$refs[formEl].validate((valid) => {
+        if (valid) {
+          this.$emit("search");
+        }
+      });
+    },
+    // 重置条件
+    resetForm(formEl) {
+      if (!this.$refs[formEl]) return;
+      this.$refs[formEl].resetFields();
+      this.form = JSON.parse(JSON.stringify(this.defaultForm));
+      // 保留页面table分页数据
+      this.form.size = this.modelValue.size;
+      this.form.page = this.modelValue.page;
+      this.$emit("reset");
+    },
+
+    // 关闭变式
+    handleChangeHide(vis) {
+      if (vis === false) {
+        this.isChange = false;
+        this.isSaveShow = false;
+        this.isSelectShow = false;
+        this.saveFormName = "";
+        this.selectForm = "";
+      }
+    },
+    // 保存搜索表单
+    handleSaveSearchForm() {
+      if (this.saveKey && this.isSave) {
+        if (Object.keys(this.form).length === 0) {
+          this.$message.error("搜索条件为空！");
+          return;
+        }
+        let tempObj = Object.assign({}, this.form, {
+          searchSaveName: this.saveFormName,
+          id: dayjs().valueOf() + Math.random() + "",
+        });
+        let obj = {
+          route: this.$route.name,
+          system: this.systemName,
+          variant: [tempObj],
+        };
+        let resObj = this.variantList.find((it) => {
+          return it.route === this.$route.name;
+        });
+        if (resObj) {
+          resObj.variant.push(tempObj);
+        } else {
+          this.variantList.push(obj);
+        }
+        if (this.isCloud) {
+          let params = {
+            id: this.varianId,
+            username: JSON.parse(sessionStorage.userAuthInfo).username,
+            system: this.systemName,
+            menu: this.saveKey,
+            content: JSON.stringify(this.variantList),
+          };
+        } else {
+          localStorage.setItem("variantList", JSON.stringify(this.variantList));
+        }
+      }
+    },
+    // 选择保存过的搜索历史
+    handleSearchSelect(val) {
+      let obj = this.saveList.find((it) => {
+        return it.id === val;
+      });
+      if (obj) {
+        let rObj = JSON.parse(JSON.stringify(obj));
+        delete rObj.id;
+        delete rObj.searchSaveName;
+        this.$emit("update:modelValue", rObj);
+      }
+    },
+    // 删除保存过的搜索历史
+    handleDeleteSearchList(index) {
+      let tempList = JSON.parse(JSON.stringify(this.saveList));
+      tempList.splice(index, 1);
+      if (this.saveKey && this.isSave) {
+        // 更新逻辑，视具体API而定
+      }
+    },
+    // 禁止选择日期
+    disabledDate(date, currentSource, limitDate = "") {
+      if (limitDate) {
+        if (currentSource === "prev") {
+          return dayjs(date.getTime()).isAfter(dayjs(limitDate), "day");
+        }
+        if (currentSource === "next") {
+          return dayjs(date.getTime()).isBefore(dayjs(limitDate), "day");
+        }
+      }
+    },
+    // 一键收缩展开
+    expandAll() {
+      this.isExpandAll = !this.isExpandAll;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+@keyframes slide-animation {
+  from {
+    width: 100%;
+    height: auto;
+    margin-top: 0;
+    padding: 15px 60px 0 15px;
+    // transform: scale(1);
+    opacity: 1;
+  }
+
+  to {
+    width: 0;
+    height: 0;
+    margin-top: -10px;
+    padding: 0;
+    // transform: scale(0);
+    opacity: 0;
+  }
+}
+
+#search-wrap {
+  width: 100%;
+  background: var(--color-bg-2);
+  // position: relative;
+  overflow: hidden;
+  .arco-col {
+    margin: 5px 0;
+    padding: 0 !important;
+  }
+
+  .arco-form-item-label {
+    padding-right: 10px;
+  }
+
+  .el-col-6 {
+    margin: 5px 0;
+    padding: 0 10px !important;
+  }
+  .el-col-6:first-child {
+    padding-left: 0px !important;
+  }
+
+  .el-col-6:nth-child(4n) {
+    padding-right: 0px !important;
+  }
+
+  .control-button {
+    position: absolute;
+    top: 10px;
+    right: 20px;
+    z-index: 99;
+    cursor: pointer;
+
+    .expand-img {
+      width: 24px;
+      height: 24px;
+      cursor: pointer;
+      transition: all 0.5s linear;
+
+      &.close {
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+  .arco-form-item-content-flex {
+    display: block;
+  }
+
+  .search-content {
+    position: relative;
+    // border: 1px solid #e5e5e5;
+    box-sizing: border-box;
+    width: 100%;
+    // transition: width .3s linear;
+    margin-top: 0;
+    padding: 0 0 0px 0;
+
+    &.close {
+      width: 0;
+      height: 0;
+      margin-top: -10px;
+      padding: 0;
+      overflow: hidden;
+      opacity: 0;
+      animation: slide-animation 0.3s;
+    }
+
+    .expand-row {
+      padding-bottom: 44px;
+    }
+
+    .control {
+      position: absolute;
+      right: 0;
+      bottom: 5px;
+      z-index: 9;
+      display: flex;
+      justify-content: flex-end;
+      align-items: flex-end;
+      .reset {
+        width: 90px;
+        height: 32px;
+        margin-right: 0px;
+        border: none;
+        background-color: #eeeefc;
+        color: #3d3ad9;
+        border-radius: 2px;
+        font-size: 12px;
+        & > span {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          .el-icon--left {
+            margin-right: 5px;
+          }
+        }
+      }
+
+      .submit {
+        width: 90px;
+        height: 32px;
+        background-color: #3d3ad9;
+        border: none;
+        border-radius: 2px;
+        & > span {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          .el-icon--left {
+            margin-right: 5px;
+          }
+        }
+      }
+
+      .expand-button {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        box-sizing: border-box;
+        width: 40px;
+        padding-right: 5px;
+        cursor: pointer;
+
+        & > span {
+          color: #505050;
+          font-size: 12px;
+        }
+      }
+
+      .hidden {
+        visibility: hidden;
+        width: 0px;
+      }
+
+      .save {
+        position: relative;
+        // width: 84px;
+        height: 30px;
+        padding: 0;
+        padding: 0 10px;
+        // background: #bda87c;
+
+        .save-text {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 84px;
+          height: 30px;
+
+          & > span {
+            padding-right: 10px;
+            padding-left: 10px;
+            border-right: 1px solid #fff;
+          }
+
+          & > i {
+            padding-left: 10px;
+          }
+        }
+      }
+    }
+
+    .el-form {
+      position: relative;
+    }
+
+    .el-form-item {
+      margin-bottom: 10px;
+
+      .el-form-item__label {
+        padding-right: 5px;
+        font-size: 12px;
+        user-select: none;
+      }
+      // .arco-select__tags-text {
+      //   max-width: 80px !important;
+      // }
+      .select-trigger {
+        width: 100%;
+
+        .el-select__tags {
+          // max-width: calc(100% - 0px) !important;
+          & > span {
+            max-width: 100%;
+
+            .el-tag--info {
+              max-width: 100% !important;
+
+              &:first-child {
+                .el-select__tags-text {
+                  max-width: 100% !important;
+                }
+              }
+
+              &:nth-child(2) {
+                // display: none;
+                .arco-select__tags-text {
+                  max-width: 100% !important;
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .el-date-editor.el-input,
+      .el-date-editor.el-input__inner {
+        width: 100%;
+      }
+
+      .el-select .el-select__tags {
+        display: flex;
+        flex-wrap: nowrap;
+
+        & > span {
+          display: flex;
+          flex-wrap: nowrap;
+        }
+      }
+
+      .date-section {
+        position: relative;
+        margin-bottom: 0 !important;
+
+        .el-input--small .el-input__inner {
+          padding-right: 20px;
+          padding-left: 15px;
+        }
+
+        .el-input__prefix {
+          display: none;
+        }
+
+        .date-section-line {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+        }
+      }
+    }
+  }
+}
+
+.hide {
+  display: none !important;
+}
+
+.search-panel-popover {
+  // background: red;
+  box-sizing: border-box;
+  position: relative;
+  .save-controls {
+    & > div {
+      & > span {
+        cursor: pointer;
+        display: block;
+        padding: 5px 0;
+        &:hover {
+          color: #155752;
+        }
+      }
+    }
+    .save-form {
+      width: 160px;
+      height: 40px;
+      background: #ffffff;
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      transform: translateX(-14px);
+      .save-form-button {
+        margin-left: 10px;
+      }
+      .save-form-input {
+        width: 84px;
+      }
+      .el-button--primary.is-disabled {
+        background: #155752;
+        opacity: 0.6;
+      }
+      .save-form-select {
+        width: 160px;
+      }
+    }
+  }
+}
+
+.select-popper {
+  .el-select-dropdown__item {
+    padding: 0 10px;
+  }
+  .select-content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+    .select-content-button {
+      border: none;
+      background: none;
+      flex-shrink: 0;
+      box-sizing: border-box;
+      padding: 7px;
+      border-radius: 100%;
+      &:hover {
+        .el-icon--close {
+          opacity: 1;
+        }
+      }
+      .el-icon--close {
+        opacity: 0.6;
+        display: block;
+        color: #155752;
+        width: 12px;
+        height: 12px;
+      }
+    }
+  }
+}
+</style>
+