SZJCFLFJ/src/views/system/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">
        <div class="but" @click="change"></div>
        <!-- <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"
            valueFormat="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"
            valueFormat="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
            :mode="mode"
            :placeholder="selectPlaceholder"
            :value="formData.selection ? formData.selection : undefined"
            @change="handleChange"
            allowClear
          >
            <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> -->
        <!-- <a-form-item prop="searchText" style="margin-right: 16px">
          <a-select
            mode="multiple"
            :placeholder="searchPlaceholder"
            :value="formData.searchText ? formData.searchText : undefined"
            @change="handleChange"
            allowClear
          >
            <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-form-item> -->
        <a-select
          :placeholder="searchPlaceholder"
          v-model="formData.searchTexts"
          allowClear
          style="width: 200px"
          show-search
          mode="combobox"
          :filter-option="filterManager"
          @change="changeManager"
        >
          <a-select-option
            :value="item.agentName"
            v-for="(item, index) in locationsData"
            :key="index"
            :data_mobile="item.agentName"
          >
            {{ item.agentName }}
          </a-select-option>
        </a-select>
      </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">
        <div class="buts" @click="exportexcel"></div>
        <!-- <a-form-item>
          <a-button size="small" class="btn-icon-only icon-export" />
        </a-form-item> -->
      </template>
    </a-form>
  </div>
</template>

<script>
import { routepage } from '@/api/statistics/statistics.js'
export default {
  props: {
    mode: {
      type: String,
      default: '',
    },
    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,
    },
    optionLists: {
      type: Array,
      default: () => [
        {
          name: '全部',
          lable: '',
        },
        {
          name: 'A',
          lable: 'A',
        },
        {
          name: 'B',
          lable: 'B',
        },
        {
          name: 'C',
          lable: 'C',
        },
        {
          name: 'D',
          lable: 'D',
        },
      ],
    },
  },
  data() {
    return {
      changeButtonLoading: false,
      locationsData: [],
      locationsDatacopy: [],
      // 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: null,
        endDate: null,
        dateRangeRadio: '',
        selection: '',
        searchText: '',
        searchTexts: '',
      },
      optionList: [],
      inputList: [],
    }
  },
  watch: {
    // "$router": {
    //   // handler(val) {
    //   //   debugger;
    //   //   if (val) {
    //   //     this.formData = this.$route.query;
    //   //     this.formData.beginDate = this.$route.query.startTime;
    //   //   }
    //   // },
    // },
    // 'formData.searchText': {
    //   handler(val) {
    //     if (!val) {
    //       this.locationsData = []
    //     } else {
    //       this.locationsData = this.locationsDatacopy
    //       debugger
    //     }
    //   },
    // },
    '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, oldVal) {
    //     if (oldVal) {
    //       this.search();
    //     }
    //   },
    // },
    // "formData.endDate": {
    //   handler(val, oldVal) {
    //     if (oldVal) {
    //       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,
    },
  },
  activated() {
    this.routepageall()
    if (Object.keys(this.$route.params).length == 0) {
      if (!this.formData.beginDate || !this.formData.endDate) {
        this.formData.dateRangeRadio = '当日'
      }
    } else {
      this.formData.dateRangeRadio = ''
      this.formData.beginDate = this.$route.params.startTime
      this.formData.endDate = this.$route.params.endTime
      if (this.$route.params.beginDate) {
        this.formData.beginDate = this.$route.params.beginDate
      }
      if (this.$route.params.endDate) {
        this.formData.endDate = this.$route.params.endDate
      }
      // this.formData.selection = this.$route.query.levelId
      //   ? this.$route.query.levelId
      //   : this.$route.query.agentLevel;
      this.formData.selection = this.$route.params.places
        ? this.$route.params.places
        : this.$route.params.levelId
        ? this.$route.params.levelId
        : this.$route.params.agentLevel
      this.formData.searchText = this.$route.params.proxyId ? this.$route.params.proxyId : this.$route.params.agentCode
      this.locationsDatacopy.forEach((element) => {
        if (element.agentId == this.formData.searchText) {
          this.formData.searchTexts = element.agentName
        }
      })
      // this.formData.agentLevel = this.$route.query.agentLevel;
      // this.formData.agentCode = this.$route.query.agentCode;
    }
  },
  mounted() {},
  methods: {
    changeManager(e) {
      if (e) {
        this.locationsData = JSON.parse(JSON.stringify(this.locationsDatacopy))
        this.locationsDatacopy.forEach((element) => {
          if (element.agentName == e) {
            this.formData.searchText = element.agentId
          }
        })
      } else {
        this.locationsData = []
        this.formData.searchText = ''
        this.formData.searchTexts = ''
      }
    },
    filterManager(input, option) {
      // option.componentOptions.children[0].text.toLowerCase()为内容值
      // option.data.attrs.data_mobile为绑定的属性值，可自行定义
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
        option.data.attrs.data_mobile.indexOf(input.toLowerCase()) >= 0
      )
    },
    //代理人等级
    async routepageall() {
      try {
        let params = {
          pageNum: '1',
          pageSize: '20',
        }
        const result = await routepage(params)
        // this.locationsData = result.data.list
        this.locationsDatacopy = JSON.parse(JSON.stringify(result.data.list))
      } catch (error) {
        console.log(error)
      }
    },
    //导出
    exportexcel() {
      this.$emit('exportex')
    },
    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.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;
  }
  .form {
    z-index: 999;
    > .but {
      width: 32px;
      height: 32px;
      background-image: url('../../../../assets/logo/ic_change_default.png');
      cursor: pointer;
      margin-right: 16px;
    }
    > .buts {
      width: 32px;
      height: 32px;
      background-image: url('../../../../assets/logo/ic_export_default.png');
      cursor: pointer;
    }
  }
  ::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 {
      width: 32px !important;
      padding: 0 10px;
      height: 32px;
      line-height: 30px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      // color: #ffffff;
    }
  }
  ::v-deep .btn-icon-only {
    width: 32px;
    border: none;
    background-color: #383c54;
    background-size: cover;
  }
  ::v-deep .icon-change {
    width: 32px;
    height: 32px;
    // background-image: url('../../../../assets/logo/ic_change_default.png');
  }
  ::v-deep .icon-export {
    width: 32px;
    height: 32px;
    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>