ag-element-ui/packages/agDatePicker/src/index.vue

<template>
  <el-date-picker
    :style="{ width }"
    :prefix-icon="iconClass"
    clear-icon="ag-icon-clear"
    v-model="dateArr"
    v-bind="attrs"
    v-on="Listeners"
    @mouseenter.native="mousetrue = true"
    @mouseleave.native="mousetrue = false"
  />
</template>

<script>
/**
 * agDatePicker 时间选择器
 */
import isEmpty from "../../../src/utils/isEmpty";

export default {
  name: "agDatePicker",
  props: {
    value: {
      default: "",
    },
  },
  data() {
    return {
      width: "160px",
      dateArr: "",
      date_picker: false,
      mousetrue: true,
    };
  },
  computed: {
    attrs() {
      let config = {};
      if (this.$attrs.type === "daterange" || !this.$attrs.type) {
        config = {
          "start-placeholder": "开始日期",
          "end-placeholder": "结束日期",
          "range-separator": "-",
          "picker-options": {
            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]);
                },
              },
            ],
          }, //多选日期
        };
      } else {
        config = {
          align: "right",
          placeholder: "选择日期",
          "picker-options": {
            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);
                },
              },
            ],
          },
        };
      }
      return {
        size: "small",
        type: "daterange",
        format: "yyyy-MM-dd",
        "value-format": "yyyy-MM-dd",
        ...config,
        ...this.$attrs,
      };
    },
    // 所有父级事件
    Listeners() {
      return Object.assign({}, this.$listeners, {
        input: (value) => {
          if (this.attrs.type === "daterange") {
            if (!isEmpty(value) && value.length === 2 && value[0] && value[1]) {
              this.$emit("input", [
                `${value[0]} 00:00:00`,
                `${value[1]} 23:59:59`,
              ]);
            } else {
              this.$emit("input", []);
            }
          } else {
            this.$emit("input", value);
          }
        },
      });
    },
    iconClass() {
      return this.date_picker && this.mousetrue
        ? "ag-icon-prefix-hide"
        : "ag-icon-prefix-show";
    },
  },
  watch: {
    value: {
      handler(newVal) {
        if (this.attrs.type === "daterange") {
          if (!Array.isArray(newVal)) {
            throw new Error("agDatePicker date请传入数组");
          }
          const [date1, date2] = newVal.slice(0, 2);
          this.dateArr = [date1 || "", date2 || ""];
        } else {
          this.dateArr = newVal;
        }
      },
      immediate: true,
    },
    dateArr: {
      handler(newVal) {
        let defaultWidth = this.attrs.type === "daterange" ? "170px" : "140px";
        if (this.attrs.type === "daterange") {
          this.date_picker =
            newVal &&
            newVal.length > 0 &&
            newVal.some((item) => item != null && item !== "");
          this.width =
            newVal &&
            newVal.length > 0 &&
            newVal.some((item) => item != null && item !== "")
              ? "205px"
              : defaultWidth;
        } else {
          this.width = defaultWidth;
          this.date_picker = !!newVal; // 使用逻辑非操作来转换newVal为布尔值
        }
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
::v-deep {
  [class*="ag-icon-"] {
    font-family: element-icons !important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: baseline;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .el-input__icon,
  .ag-icon-prefix-show,
  .ag-iconfont,
  .ag-icon-clear {
    position: absolute;
    width: 16px !important;
    font-size: 16px;
    margin-left: -5px;
    line-height: 1 !important;
    right: 6px;
    top: 1px;
    z-index: 1;
  }
  .el-input__prefix {
    position: absolute;
    left: 98%;
  }
  .ag-icon-clear {
    &:before {
      content: "\e6db";
    }
  }
  .ag-icon-prefix-show {
    &:before {
      content: "\e78e";
    }
  }
  .ag-icon-prefix-hide {
    display: none;
  }
}
</style>