energy_storage/web/src/components/SearchBox.vue

<template>
  <div class="search">
    <div class="top" v-if="searchOptions.length">
      <div class="top-left">
        <template v-for="item in searchOptions" :key="item.key">
          <!-- 输入框  @change="handleChange"-->
          <div class="item">
            <span class="label"> {{ item.label }}</span>
            <div class="select" v-if="item.type == 'select'">
              <a-select
                :dropdown-match-select-width="false"
                v-model:value="formData[item.key]"
                allow-clear
                :max-tag-count="2"
                :placeholder="item.label"
                :mode="item.mode ? item.mode : 'combobox'"
              >
                <a-select-option
                  :value="option.value"
                  v-for="option in item.options"
                  :key="option.value"
                >
                  {{ option.label }}
                </a-select-option>
              </a-select>
            </div>
            <!-- 日期选择框 -->
            <div class="date-picker" v-if="item.type == 'datePick'">
              <a-range-picker
                :show-time="{ format: 'HH:mm:ss' }"
                value-format="YYYY-MM-DD HH:mm:ss"
                v-model:value="formData[item.key]"
                @change="$emit('onSearch', formData)"
              />
            </div>
            <!-- 日期选择框 date-->
            <div class="date-picker" v-if="item.type == 'datePick1'">
              
                <a-range-picker v-model:value="formData[item.key]"    value-format="YYYY-MM-DD" @change="$emit('onSearch', formData)" />
            </div>
            <!-- 输入框 -->
            <div class="input" v-if="item.type == 'input'">
              <a-input
                v-model:value="formData[item.key]"
                :placeholder="item.placeholder ? item.placeholder : '请输入' + item.label"
                :disabled="item.disabled"
              >
              </a-input>
            </div>
            <!-- 插槽  -->
            <div class="slot" v-if="item.type == 'slot'">
              <slot :name="item.slotName" v-bind="item"></slot>
            </div>
          </div>
        </template>
      </div>

      <!-- <div :class="[searchOptions.length > 4 ? 'top-right-column' : 'top-right']"> -->
      <div class="top-right">
        <!-- <a-button class="ant-btn-search" @click="changeData">
          <template #icon>
            <i class="iconfont icon-sousu btn-close" />
          </template>
          查询
        </a-button>
        <a-button class="ant-btn-reset" @click="clearData">
          <template #icon>
            <i class="iconfont icon-chongzhi btn-close" />
          </template>
          重置
        </a-button> -->
      </div>
    </div>
    <div class="bottom">
      <div style="display: flex" v-if="btnOptionList.length">
        <div v-for="(item, i) in btnOptionList" :key="i" class="button">
          <a-button
            :class="'btn-' + item.type"
            type="primary"
            @click="handelClick(item.type)"
            :disabled="item.disabled ? item.disabled : false"
          >
            {{ item.label }}
          </a-button>
        </div>
      </div>

      <slot name="searchboxSlot"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SearchBox',
  components: {},
  props: {
    titleOption: {
      type: Object,
      default: () => {
        return {
          title: '',
          info: ''
        }
      }
    },
    btnOptionList: {
      type: Array,
      default: () => {
        return []
      }
    },
    searchOptions: {
      type: Array,
      default: () => {
        return []
      }
    },
    fieldList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      showTableDropMenu: false,
      clearFlag: false,
      selectField: [],
      formData: {},
      options: [],
      searchList: []
    }
  },
  watch: {
    searchOptions: {
      handler(n) {
        // this.formData = {}
        // n.forEach((item) => {
        //   // this.$set(this.formData, item.key, item.value)
        // })
      },
      immediate: true,
      deep: true
    }
  },
  mounted() {
    this.selectField = this.fieldList.map((i) => i.value)
  },
  methods: {
    clear(date) {
      if (date.length == 0) {
        this.$emit('onSearch', this.formData)
      }
    },

    changeData() {
      this.clearFlag = false
      this.$emit('onSearch', this.formData)
    },
    clearData() {
      this.clearFlag = true
      this.formData = {}
      this.$emit('onSearch', this.formData)
    },
    reseatFormData() {
      this.formData = {}
    },
    handelClick(type) {
      this.$emit('operateForm', type)
    }

    // handleChange() {
    //   this.$emit("onSearch", this.formData);
    // },
    // pressEnter() {
    //   this.$emit("onSearch", this.formData);
    // },
  }
}
</script>

<style lang="scss" scoped>
// 输入框自动填充后的背景改色
input:-internal-autofill-previewed,
input:-internal-autofill-selected {
  -webkit-text-fill-color: var(--theme-text-default);
  transition: background-color 500s ease-out 0.5s;
}
:deep(.anticon) {
  color: var(--theme-text-default) !important;
}
.search {
  height:70px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .page-title {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    margin-top: 5px;
    color: var(--theme-text-default);
    .line {
      width: 3px;
      height: 20px;
      background-color: var(--theme-btn3);
      border-radius: 1px;
    }
    .title-text {
      font-size: 18px;
      margin-left: 10px;
    }
    .iconfont {
      margin-left: 10px;
      font-size: 20px;
      color: var(--theme-text3);
    }
  }

  .top {
    display: flex;
    // align-items: center;
    justify-content: space-between;
    border-bottom: 1.5px solid var(--theme-bg);

    .input {
      border-radius: 8px;
      display: flex;
      width: 145px;
      height: 35px;
      align-items: center;
    }

    .date-picker {
      width: 360px;

      .ant-picker {
        background: transparent;
        border: 1px solid #00b9d0;
        .ant-picker-input > input {
          color: #fff !important;
        }
      }
    }

    .ant-select,
    .ant-calendar-picker,
    .ant-input {
      width: 100%;
    }

    :deep(.ant-select-selection--single .ant-select-selection__rendered) {
      height: 35px !important;
      line-height: 35px !important;
    }

    .label {
      width: 40px;
      color: var(--theme-text-default);
    }
    .top-right,
    .top-right-column {
      .ant-btn {
        border-radius: 8px !important;
        color: var(--theme-text2) !important;
        font-weight: 700;
        font-size: 14px !important;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 2px;
        height: 35px !important;
        line-height: 35px !important;
        padding: 7px 10px !important;
        border: none;

        &.ant-btn-reset {
          background-color: var(--theme-btn3) !important;
        }
        &.ant-btn-search {
          background-color: var(--theme-btn1) !important;
        }

        .iconfont {
          color: #fff;
          font-size: 18px;
          margin-right: 15px;
          cursor: pointer;
          margin-right: 8px !important;
        }
      }
    }
    .top-right {
      // width: 10%;
      display: flex;
      justify-content: flex-end;
      flex-wrap: wrap;
      .ant-btn {
        &.ant-btn-reset {
          margin-left: 10px !important;
        }
      }
    }
    .top-right-column {
      display: block;
      .ant-btn {
        &.ant-btn-reset {
          margin-top: 10px !important;
        }
      }
    }

    .top-left {
      // width: 1200px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      .item {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
        margin-right: 20px;
      }
    }
  }
  .bottom {
    display: flex;
    margin-top: 20px;
    margin-bottom: 20px;
    justify-content: space-between;
    align-items: center;
    .button {
      margin-left: 10px;
    }
  }
}
</style>