AnalysisSystemForRadionuclide_vue/src/views/abnormalAlarm/components/searchBar.vue

<template>
  <div class="search-bar">
    <a-row type="flex">
      <a-col flex="190px">
        <a-input placeholder="search..." />
      </a-col>
      <a-col flex="270px">
        <a-form-model-item label="Type">
          <a-select :value="queryParams.types" mode="multiple" :maxTagCount="1" :options="typeOptions" show-arrow @change="onTypeChange">
            <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
            <div slot="dropdownRender" slot-scope="menu">
              <v-nodes :vnodes="menu" />
              <a-divider style="margin: 0;" />
              <div
                style="padding: 4px 12px; cursor: pointer;"
                @mousedown="e => e.preventDefault()"
              >
                <a-checkbox v-model="allVal" @change="handleAllClickBox"><span @click.prevent="handleAllClick">ALL</span></a-checkbox>
              </div>
            </div>
          </a-select>
        </a-form-model-item>
      </a-col>
      <a-col flex="270px" v-if="type!=='alarmCenter'">
        <a-form-model-item label="Name">
          <a-select v-bind="$attrs" show-arrow @change="onChange">
            <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
            <div slot="dropdownRender" slot-scope="menu">
              <v-nodes :vnodes="menu" />
              <a-divider style="margin: 0;" />
              <div
                style="padding: 4px 12px; cursor: pointer;"
                @mousedown="e => e.preventDefault()"
              >
                <a-checkbox v-model="allVal" @change="handleAllClick"><span @click.prevent="handleAllClick">ALL</span></a-checkbox>
              </div>
            </div>
          </a-select>
        </a-form-model-item>
      </a-col>
      <a-col flex="380px">
        <a-form-model-item label="Alarm date">
          <a-range-picker
            dropdownClassName="asd"
            :default-value="[moment(queryParams.startDate), moment(queryParams.endDate)]"
            @change="onRangeDateChange" 
          />
        </a-form-model-item>
      </a-col>
      <a-col flex="108px">
        <a-button class="search-btn" type="primary" @click="onSearch">
          <img src="@/assets/images/global/search.png" alt="" />
          Search
        </a-button>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import dateFormat from '@/components/jeecg/JEasyCron/format-date'
import moment from 'moment';
export default {
  props: {
    type: {
      type: String,
      default: ''
    },
  },
  components: {
    VNodes: {
      functional: true,
      render: (h, ctx) => ctx.props.vnodes,
    },
  },
  data() {
    return {
      allVal: true,
      typeOptions: [
        {
          label: "Server",
          value: "Server"
        },
        {
          label: "Database",
          value: "Database"
        },
        {
          label: "E-MAIL",
          value: "Email"
        },
      ],
      queryParams: {
        types: ["Server","Database","Email"],
        name: "",
        startDate: dateFormat(new Date(), 'yyyy-MM-dd'),
        endDate: dateFormat(new Date(), 'yyyy-MM-dd')
      }
    }
  },
  methods: {
    moment,
    handleAllClickBox(e) {
      this.allVal = e.target.checked
      this.setSelectVal()
    },
    handleAllClick(e) {
      this.allVal = !this.allVal
      this.setSelectVal()
    },
    setSelectVal() {
      if (this.allVal) {
        this.queryParams.types = this.typeOptions.map(item => item.value)
      } else {
        this.queryParams.types = []
      }
    },
    onTypeChange(val) {
      this.queryParams.types = val
      let length = this.typeOptions.length
      if (val.length === length) {
        this.allVal = true
      } else {
        this.allVal = false
      }
    },
    onRangeDateChange(date, dateString) {
      this.queryParams.startDate = dateString[0]
      this.queryParams.endDate = dateString[1]
    },
    onSearch() {
      this.$emit("search",this.queryParams)
    }
  },
}
</script>

<style lang="less" scoped>
.search-bar{
  height: 50px;
  border-top: 1px solid rgba(13, 235, 201, 0.3);
  border-bottom: 1px solid rgba(13, 235, 201, 0.3);
  margin-left: 20px;
  padding: 8px 10px;
  background: rgba(12, 235, 201, 0.05);
}
.ant-input{
  width: 166px;
}
.ant-select{
  width: 200px;
}
.ant-calendar-picker{
  width: 270px;
}
.search-btn {
  margin-bottom: 10px;
  img {
    width: 16px;
    height: 17px;
    margin-right: 9px;
  }
}
::v-deep {
  .ant-form-item {
    display: flex;
    margin-bottom: 0;
    .ant-form-item-label,.ant-form-item-control {
      line-height: 32px;
      height: 32px;
    }
    .ant-form-item-label {
      flex-shrink: 0;
      margin-right: 10px;
      label {
        font-size: 16px;
        font-family: ArialMT;
        color: #ade6ee;
        &::after {
          display: none;
        }
      }
    }
    .ant-calendar-range-picker-separator{
      color: white;
    }
    .ant-form-item-control-wrapper {
      width: 100%;
      overflow: hidden;
    }
  }
}
.ant-select {
  .ant-select-arrow-icon {
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  &-open {
    .ant-select-arrow-icon {
      transform: rotate(180deg);
    }
  }
}
.ant-select-dropdown-content{
  position: relative;
  background: #03353f;
}

  // .asd{
  //   .ant-calendar-range .ant-calendar-input ,
  //   .ant-calendar-range .ant-calendar-time-picker-input{
  //     color: red !important;
  //     background: none !important;
  //   }
  // }

</style>