SZHY2.0/src/views/securityCheck/components/securityCheckHeader.vue

<template>
  <div class="security-check-header">
    <template v-if="title">
      <div class="title">{{ title }}</div>
    </template>
    <a-form
      ref="form"
      class="form"
      name="basic"
      :model="formData"
      @keyup.enter.native="search"
    >
      <template v-if="withChangeButton">
        <a-form-item style="margin-right: 16px">
          <a-button
            size="small"
            :class="['btn-icon-only', { 'icon-change': !changeButtonLoading }]"
            :loading="changeButtonLoading"
            @click="change"
          />
        </a-form-item>
      </template>
      <template v-if="withDatePicker">
        <a-form-item prop="beginDate" style="margin-right: 8px">
          <a-date-picker
            v-model="formData.beginDate"
            type="date"
            size="small"
            format="YYYY-MM-DD"
          />
        </a-form-item>
        <a-form-item prop="endDate" style="margin-right: 36px">
          <a-date-picker
            v-model="formData.endDate"
            type="date"
            size="small"
            format="YYYY-MM-DD"
          />
        </a-form-item>
        <a-form-item
          prop="dateRangeRadio"
          class="radio-wrapper"
          style="margin-right: 36px"
        >
          <a-radio-group v-model="formData.dateRangeRadio" size="small">
            <a-radio-button
              value="当日"
              :class="formData.dateRangeRadio == '当日' ? 'btn-mo' : 'btn-mos'"
              style="border-right: none"
              ><div class="btn-day">当日</div></a-radio-button
            >
            <a-radio-button
              value="当月"
              :class="formData.dateRangeRadio == '当月' ? 'btn-mo' : 'btn-mos'"
              ><div class="btn-day">当月</div></a-radio-button
            >
            <a-radio-button
              value="当年"
              style="border-left: none"
              :class="formData.dateRangeRadio == '当年' ? 'btn-mo' : 'btn-mos'"
              ><div class="btn-day">当年</div></a-radio-button
            >
          </a-radio-group>
        </a-form-item>
      </template>
      <template v-if="withSelect">
        <a-form-item prop="selection" style="margin-right: 16px">
          <a-select :default-value="optionLists[0].name" @change="handleChange">
            <a-select-option
              v-for="item in optionLists"
              :key="item.name"
              :value="item.name"
              :title="item.label"
            >
              {{ item.name }}
            </a-select-option>
          </a-select>
          <!-- <a-select
            v-model="formData.selection"
            size="small"
            :default-value="optionLists[0]"
          >
            <a-select-option
              v-for="option in optionList"
              :key="option.value"
              :value="option.value"
              :label="option.label"
            />
          </a-select> -->
        </a-form-item>
      </template>
      <template v-if="withInput">
        <a-form-item prop="searchText" style="margin-right: 8px">
          <a-auto-complete
            ref="autocomplete"
            v-model="formData.searchText"
            size="small"
            prefix-icon="el-icon-search"
            :trigger-on-focus="false"
            :fetch-suggestions="querySearch"
            value-key="name"
            :placeholder="searchPlaceholder"
            clearable
            @clear="inputClearHandler"
          />
        </a-form-item>
      </template>
      <template v-if="withSearchButton">
        <a-form-item style="margin-right: 16px">
          <a-button size="small" type="primary" @click="search">查询</a-button>
        </a-form-item>
        <!-- <a-form-item style="margin-right: 24px">
          <a-button size="small" class="btn-white" @click="resetSearch"
            >重置</a-button
          >
        </a-form-item> -->
      </template>
      <template v-if="withExportButton">
        <a-form-item>
          <a-button size="small" class="btn-icon-only icon-export" />
        </a-form-item>
      </template>
    </a-form>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: "",
    },
    withChangeButton: {
      type: Boolean,
      default: true,
    },
    withDatePicker: {
      type: Boolean,
      default: true,
    },
    withSelect: {
      type: Boolean,
      default: true,
    },
    // 传入下拉选项
    selectOptions: {
      type: Array,
      default: () => [],
    },
    selectPlaceholder: {
      type: String,
      default: "全部代理人等级",
    },
    withInput: {
      type: Boolean,
      default: true,
    },
    searchPlaceholder: {
      type: String,
      default: "请输入代理人名称",
    },
    // 传入输入框自动填充项
    inputOptions: {
      type: Array,
      default: () => [],
    },
    withSearchButton: {
      type: Boolean,
      default: true,
    },
    withExportButton: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      changeButtonLoading: false,
      optionLists: [
        {
          name: "全部",
          lable: "",
        },
        {
          name: "A",
          lable: "A",
        },
        {
          name: "B",
          lable: "B",
        },
        {
          name: "C",
          lable: "C",
        },
        {
          name: "D",
          lable: "D",
        },
      ],
      // optionLists: ["", "A", "B", "C", "D"],
      formData: {
        beginDate: "",
        endDate: "",
        dateRangeRadio: "",
        selection: "",
        searchText: "",
      },
      optionList: [],
      inputList: [
        {
          id: 1,
          name: "陈睿",
        },
        {
          id: 2,
          name: "赵科",
        },
      ],
    };
  },
  watch: {
    "formData.dateRangeRadio": {
      handler(val) {
        function formatNumber(num) {
          return num < 10 ? "0" + num : num;
        }
        function getLastDayOfMonth(year, month) {
          if (month === 2) {
            if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
              return 29;
            } else {
              return 28;
            }
          } else if ([1, 3, 5, 7, 8, 10, 12].includes(month)) {
            return 31;
          } else {
            return 30;
          }
        }
        const now = new Date();
        const year = now.getFullYear();
        const month = now.getMonth() + 1;
        const date = now.getDate();
        switch (val) {
          case "当日":
            this.formData.beginDate =
              this.formData.endDate = `${year}-${formatNumber(
                month
              )}-${formatNumber(date)}`;
            break;
          case "当月":
            this.formData.beginDate = `${year}-${formatNumber(month)}-01`;
            this.formData.endDate = `${year}-${formatNumber(
              month
            )}-${getLastDayOfMonth(year, month)}`;
            break;
          case "当年":
            this.formData.beginDate = `${year}-01-01`;
            this.formData.endDate = `${year}-12-31`;
            break;
          default:
            break;
        }
        this.search();
      },
    },
    "formData.beginDate": {
      handler(val) {
        this.search();
      },
    },
    "formData.endDate": {
      handler(val) {
        this.search();
      },
    },
    selectOptions: {
      handler(val) {
        if (val.length) {
          this.optionList = val;
        }
      },
      deep: true,
      immediate: true,
    },
    inputOptions: {
      handler(val) {
        if (val.length) {
          this.inputList = val;
        }
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {
    this.formData.selection = this.optionLists[0].name;
    this.formData.dateRangeRadio = "当日";
  },
  methods: {
    handleChange(data) {
      this.formData.selection = data;
    },
    change() {
      this.changeButtonLoading = true;
      this.$emit("change");
    },
    querySearch(queryString, callback) {
      const inputList = this.inputList;
      const results = queryString
        ? inputList.filter((option) =>
            option.name.toLowerCase().includes(queryString.toLowerCase())
          )
        : inputList;
      callback(results);
    },
    inputClearHandler() {
      this.$refs["autocomplete"].activated = true;
    },
    search() {
      const searchArray = [];
      this.withDatePicker &&
        searchArray.push([this.formData.beginDate, this.formData.endDate]);
      this.withSelect && searchArray.push(this.formData.selection);
      this.withInput && searchArray.push(this.formData.searchText);
      this.$emit("search", searchArray);
    },
    resetSearch() {
      this.$refs["form"].resetFields();
      this.$nextTick(() => {
        this.formData.dateRangeRadio = "当日";
        this.search();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.security-check-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  ::v-deep .ant-form-item-control {
    // height: 32px;
    // line-height: 30px;
  }
  ::v-deep .ant-calendar-picker-icon {
    display: none;
  }
  .ant-btn-primary {
    background-color: #2d67e3;
  }
  .ant-form-item-control {
    border: 1px solid #a4bdf3;
    color: #2d67e3;
  }
  ::v-deep .ant-select-selection__rendered {
    line-height: 30px;
  }
  ::v-deep .ant-form-item-children {
    height: 30px;
    line-height: 30px;
    .ant-btn {
      padding: 0 10px;
      height: 32px;
      line-height: 30px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      // color: #ffffff;
    }
  }
  .btn-icon-only {
    width: 32px;
    border: none;
    background-color: #383c54;
    background-size: cover;
  }
  .icon-change {
    background-image: url("../../../assets/logo/ic_change_default.png");
  }
  .icon-export {
    background-image: url("../../../assets/logo/ic_export_default.png");
  }
  ::v-deep .ant-radio-group {
    line-height: 1;
    vertical-align: middle;
    display: inline-block;
    .btn-mo {
      background-color: #ffffff;
      color: #303133;
    }
    .btn-mo:hover {
      background-color: #ffffff;
      color: #303133;
    }
    .btn-mos {
      background-color: #383c54;
      color: #ffffff;
    }
    .btn-mos:hover {
      background-color: #ffffff;
      color: #303133;
    }
    .ant-radio-button-wrapper {
      height: 32px;
      padding: 8px 9px;
      // background-color: #383c54;
      border: 2px solid #383c54;
      // border-right: none;
      // color: #ffffff;
      -webkit-box-shadow: unset;
      box-shadow: unset;
      font-size: 14px;
      font-family: Microsoft YaHei;
      .btn-day {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
      }
      .btn-days {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
      }
    }
    .ant-radio-button-checked + .ant-radio-button__inner {
      // background-color: #ffffff;
      color: #303133;
    }
    // .ant-radio-button-wrapper {
    //   .ant-radio-button-inner {
    //     height: 32px;
    //     padding: 8px 9px;
    //     background-color: #383c54;
    //     border: 2px solid #383c54;
    //     border-right: none;
    //     color: #ffffff;
    //     -webkit-box-shadow: unset;
    //     box-shadow: unset;
    //     font-size: 14px;
    //     font-family: Microsoft YaHei;
    //   }
    // }
  }
  ::v-deep .ant-form-item-control {
    height: 32px;
    line-height: 30px;
    .ant-form-item-children {
      height: 100%;
    }
    .ant-calendar-picker-input {
      height: 32px;
      line-height: 30px;
      border: none;
    }
  }
  ::v-deep .ant-select {
    width: 192px;
    height: 32px;
    line-height: 30px;
    .ant-select-selection--single {
      width: 192px;
      height: 32px;
      line-height: 30px;
    }
  }
  ::v-deep .ant-select-search__field__wrap {
    width: 192px;
    height: 32px;
    line-height: 30px;
    .ant-input {
      height: 100%;
    }
  }
  .title {
    margin-right: 24px;
    padding-left: 16px;
    min-width: 176px;
    height: 32px;
    line-height: 32px;
    font-size: 20px;
    font-family: Helvetica, "Microsoft YaHei";
    font-weight: bold;
    position: relative;
    &::before {
      content: "";
      width: 4px;
      height: 20px;
      background: #2d67e3;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      margin: auto;
    }
  }
  ::v-deep .form {
    display: flex;
    flex-wrap: wrap;
    .ant-form {
      margin-bottom: 24px;
      .ant-form-item__content {
        height: 32px;
        line-height: 30px;
        .ant-input .ant-input__inner {
          border-radius: 4px;
        }
        .ant-input .ant-input__inner {
          font-family: Helvetica, "Microsoft YaHei";
          color: #101116;
          border-color: #ffffff;
          &:hover {
            border-color: #c0c4cc;
          }
          &:focus {
            border-color: #409eff;
          }
        }
        .ant-btn {
          padding: 0 10px;
          height: 32px;
          line-height: 30px;
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #ffffff;
          border: none;
          .btn-white {
            background-color: #ffffff;
            border: 1px solid #a4bdf3;
            color: #2d67e3;
          }
        }
        .ant-date-editor {
          .ant-input__inner {
            padding-left: 15px;
          }
          .ant-input__prefix {
            display: none;
          }
        }
        .ant-radio-button {
          .ant-radio-button__inner {
            height: 32px;
            padding: 8px 9px;
            background-color: #383c54;
            border: 2px solid #383c54;
            border-right: none;
            color: #ffffff;
            box-shadow: unset;
            font-size: 14px;
            font-family: Microsoft YaHei;
            &:hover {
              background-color: #ffffff;
              color: #303133;
            }
          }
          &:last-child .ant-radio-button__inner {
            border-right: 2px solid #383c54;
          }
          .ant-radio-button__orig-radio:checked + .ant-radio-button__inner {
            background-color: #ffffff;
            color: #303133;
          }
        }
        .ant-select .ant-input {
          .ant-input__icon::before {
            content: "\e78f";
          }
          .ant-input__icon,
          .ant-input__inner::-webkit-input-placeholder {
            color: #303133;
          }
        }
      }
      &.radio-wrapper .ant-form-item__content {
        line-height: 28px;
      }
    }
  }
}
</style>