yos_web/src/WebsiteManagement/dataStatistics/modules/header.vue

<template>
  <div class="cord-header">
    <div v-if="title" class="left" />
    <el-tooltip v-if="title" :content="$t(title)" placement="top-start">
      <div class="title text-ellipsis">{{ $t(title) }}</div>
    </el-tooltip>

    <el-radio-group
      v-model="tabPosition"
      style="margin-right: 20px"
      :size="size"
      @input="changeTab"
    >
      <el-radio-button
        v-for="item in shortcutDate"
        type="primary"
        :key="item.label"
        :label="item.value"
        >{{ $t(item.label) }}</el-radio-button
      >
    </el-radio-group>

    <el-date-picker
      v-model="daterange"
      :clearable="false"
      type="daterange"
      :size="size"
      value-format="yyyy-MM-dd"
      :range-separator="$t('至')"
      :start-placeholder="$t('开始日期')"
      :end-placeholder="$t('结束日期')"
      :picker-options="pickerOptions"
      @change="pickerChange"
    >
    </el-date-picker>
  </div>
</template>

<script>
export default {
  name: "header",
  props: {
    title: String,
    subTitle: String,
    size: {
      type: String,
    },
    shortcutDate: {
      type: Array,
      default: () => [
        {
          label: "近7日",
          value: "近七日",
        },
        {
          label: "近1个月",
          value: "近一月",
        },
        {
          label: "近半年",
          value: "近半年",
        },
      ],
    },
    returnWhere: Function,
  },
  data() {
    return {
      daterange: ["", ""],
      tabPosition: "近七日",
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
    };
  },
  methods: {
    changeTab() {
      this.daterange = ["", ""];
      this.$emit("returnWhere", {
        type: this.tabPosition,
      });
    },
    pickerChange(e) {
      this.tabPosition = "";
      this.$emit("returnWhere", {
        begindate: e[0],
        enddate: e[1],
      });
    },
  },
};
</script>

<style scoped>
.cord-header {
  display: flex;
  height: 32px;
  justify-content: space-between;
  align-items: center;
}

.cord-header div {
  flex-shrink: 0;
}

.left {
  width: 6px;
  height: 26px;
  background: #3874f6;
  margin-right: 22px;
}

.title {
  flex: 1;
  width: 0;
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: bold;
  font-size: 20px;
  color: #333333;
  padding-right: 20px;
}

.text-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}
/deep/ .el-date-editor {
  width: 220px;
}
/deep/ .el-date-editor .el-range__close-icon {
  width: 0 !important;
}
</style>