erp-el-element/CommonInput/TimingModule.vue

<template>
  <div class="TimingModule">
    <el-select
      v-model="select"
      placeholder="请选择"
      class="dateselect"
      :size="size"
      @change="selectChange"
    >
      <template slot="prefix">
        {{ (timer.find((e) => e.enName == select) || {}).lable }}
      </template>
      <el-option
        v-for="item in timer"
        :key="item.enName"
        :label="item.lable"
        :value="item.enName"
      >
      </el-option>
    </el-select>
    <el-date-picker
      v-show="timer[Index].TimeType == 'daterange'"
      class="datepicker"
      v-model="DateTime"
      value-format="timestamp"
      :picker-options="pickerOptions"
      :size="size"
      type="daterange"
      range-separator="-"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :default-time="['00:00:00', '23:59:59']"
      @change="timeChange"
    >
    </el-date-picker>
    <el-date-picker
      v-show="timer[Index].TimeType == 'date'"
      v-model="Time"
      :size="size"
      align="right"
      type="date"
      clearable
      value-format="yyyy-MM-dd"
      placeholder="选择日期"
      :picker-options="pickerOption"
      @change="timeChange"
    >
    </el-date-picker>
  </div>
</template>

<script>
export default {
  name:'TimingModule',
  props: {
    default: {
      default: null,
    },
    size: {
      type: String,
      default: "small",
    },
    data: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  components: {},
  data() {
    return {
      select: this.default, //选择
      DateTime: [],
      Time: "",
      pickerOptions: {
        disabledDate(time) {
          return (
            time.getTime() >
            new Date(new Date().toLocaleDateString()).getTime() +
              24 * 60 * 60 * 1000 -
              1
          );
        },
        shortcuts: [
          {
            text: "本月",
            onClick(picker) {
              const end =
                new Date(new Date().toLocaleDateString()).getTime() +
                24 * 60 * 60 * 1000 -
                1;
              const time = new Date();
              time.setDate(1);
              time.setHours(0);
              time.setSeconds(0);
              time.setMinutes(0);
              var start = time.getTime();
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "近六个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "近一年",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 360);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      }, //多选日期
      pickerOption: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "近一周",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 7 * 24 * 60 * 60 * 1000);
              picker.$emit("pick", date);
            },
          },

          {
            text: "近一个月",
            onClick(picker) {
              const date = new Date();
              date.setMonth(date.getMonth() - 1);
              picker.$emit("pick", date);
            },
          },

          {
            text: "近三个月",
            onClick(picker) {
              const date = new Date();
              date.setMonth(date.getMonth() - 3);
              picker.$emit("pick", date);
            },
          },
          {
            text: "近六个月",
            onClick(picker) {
              const date = new Date();
              date.setMonth(date.getMonth() - 6);
              picker.$emit("pick", date);
            },
          },
          {
            text: "近一年",
            onClick(picker) {
              const date = new Date();
              date.setFullYear(date.getFullYear() - 1);
              picker.$emit("pick", date);
            },
          },
        ],
      }, //单选日期
      Index: 0,
    };
  },
  computed: {
    timer() {
      if (!this.data) return;
      return this.data.filter((item) => item.type === "el-date-picker");
    },
  },
  methods: {
    //选择分类
    selectChange(val) {
      this.timer.forEach((e, i) => {
        if (e.enName == val) {
          this.Index = i;
        }
      });
      this.screen();
    },
    //选择日期
    timeChange(e) {
      this.screen();
    },
    //筛选满足条件的返回
    screen() {
      if (
        this.timer.find((e) => e.enName == this.select).TimeType == "daterange"
      ) {
        this.$emit("getDateTime", this.select, this.DateTime);
        console.log(this.select, this.DateTime);
      } else if (
        this.timer.find((e) => e.enName == this.select).TimeType == "date"
      ) {
        this.$emit("getDateTime", this.select, this.Time);
        console.log(this.select, this.Time);
      }
    },
  },
};
</script>

<style scoped lang='scss'>
.TimingModule {
  width: 380px;
  display: flex;
  span {
    width: 100%;
  }

  .el-input__suffix {
    z-index: 1;
  }
  .el-input__inner:hover,
  .el-select:hover .el-input__inner {
    position: relative;
    z-index: 1;
  }
  .el-range-editor.is-active,
  .el-range-editor.is-active:hover,
  .el-select .el-input.is-focus .el-input__inner {
    position: relative;
    z-index: 1;
  }
  .el-range-editor.el-input__inner {
    border-radius: 0px 4px 4px 0px;
    margin-left: -1px;
  }
}
::v-deep .el-date-editor {
  width: 100% !important;

  .el-input__suffix {
    z-index: 1;
  }
  .el-input__prefix {
    z-index: 99;
  }
  .el-input__inner:hover {
    position: relative;
    z-index: 1;
  }
  .el-input__inner:focus {
    position: relative;
    z-index: 50;
  }

  .el-input__inner {
    border-radius: 0px 4px 4px 0px;
    margin-left: -1px;
  }
}
::v-deep .dateselect {
  flex-grow: 0;
  flex-shrink: 0;
  min-width: 105px;
  max-width: 140px;
  color: #fff;
  text-align: start;
  .el-input__prefix {
    position: relative;
    top: 0;
    left: 0;
    padding: 0 35px 0 18px;
    box-sizing: border-box;
    color: #606266;
    visibility: hidden;
  }
  .el-input {
    height: 100%;
  }
  .el-input__inner {
    padding: 0 15px;
    border-radius: 4px 0 0 4px;
    z-index: 1;
  }
  .el-input__inner:hover {
    z-index: 1;
  }
  .el-input__suffix {
    display: flex;
    align-items: flex-start;
    z-index: 50;
  }
  .el-input__inner {
    position: absolute;
    left: 0;
  }
}
</style>