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 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="checkedAll"><span @click.prevent="handleClick">ALL</span></a-checkbox>
              </div>
            </div>
          </a-select>
        </a-form-model-item>
      </a-col>
      <a-col flex="270px">
        <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="checkedAll"><span @click.prevent="handleClick">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 @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>
export default {
  components: {
    VNodes: {
      functional: true,
      render: (h, ctx) => ctx.props.vnodes,
    },
  },
  data() {
    return {
      allVal: false
    }
  },
  methods: {
    checkedAll(val) {
      console.log(val);
      // this.$emit('changeAll', val.target.checked)
    },
    handleClick(e) {
      console.log(e);
      this.allVal = !this.allVal
      // this.$emit('changeAll', this.allVal)
    },
    onChange(val) {
      console.log(val);
      // this.$emit('change', val)
    },
    onRangeDateChange(date, dateString) {
      console.log(date, dateString);
    },
    onSearch() {
      console.log("qwerq");
      // this.$emit('search', this.formModel)
    }
  },
}
</script>

<style lang="less" scoped>
.search-bar{
  height: 50px;
  color: rgb(13, 235, 201);
  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;
}
.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-form-item-control-wrapper {
    width: 100%;
    overflow: hidden;
  }
}
</style>