init

.svn/pristine/74/742d68f654ca59f6612a8c4410754b1fd8f84094.svn-base

@@ -0,0 +1,17 @@
+.layui-tree-select {
+  width: 220px;
+}
+
+.layui-tree-select-content {
+  padding: 10px;
+}
+
+.layui-tree-select .layui-icon-triangle-d {
+  transition: all 0.3s;
+  -webkit-transition: all 0.3s;
+  color: var(--global-neutral-color-8);
+}
+
+.layui-tree-select .layui-icon-triangle-d.triangle {
+  transform: rotate(180deg);
+}

.svn/pristine/74/7449d8e5adc29e1b1147f5beaab8407840031935.svn-base

@@ -0,0 +1 @@
+.layui-backtop{position:fixed;right:30px;bottom:40px;width:50px;height:50px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:40px;background-color:#9f9f9f;color:#fff;border-radius:var(--global-border-radius);opacity:.95;z-index:999999}.layui-backtop :hover{opacity:.85}.layui-backtop-medium{width:40px;height:40px;font-size:30px}.layui-backtop-small{width:30px;height:30px;font-size:20px}

.svn/pristine/74/745800c69e49ebb64813d5905e67169b12a27cc4.svn-base

@@ -0,0 +1,301 @@
+<template>
+  <div class="layui-laydate layui-laydate-range">
+    <div style="display: flex">
+      <div class="layui-laydate-main laydate-main-list-0">
+        <div class="layui-laydate-header">
+          <i
+            class="layui-icon laydate-icon laydate-prev-y"
+            @click="changeYear(-1)"
+            ></i
+          >
+          <div class="laydate-set-ym">
+            <lay-dropdown ref="dropdownYearPanelRefLeft">
+              <span class="laydate-range-time"
+                >{{ startTime.year || "--" }} {{ t("datePicker.year") }}</span
+              >
+              <template #content>
+                <YearPanel
+                  class="time-panel"
+                  v-model="startTime.year"
+                  @ok="closeLeftYearPanel"
+                ></YearPanel>
+              </template>
+            </lay-dropdown>
+          </div>
+        </div>
+        <div class="layui-laydate-content" style="height: 220px">
+          <ul class="layui-laydate-list laydate-month-list">
+            <li
+              v-for="item of MONTH_NAME"
+              :key="item"
+              :data-unix="getUnix(item, 'left')"
+              :class="{
+                'layui-this':
+                  getUnix(item, 'left') === startTime.unix ||
+                  getUnix(item, 'left') === endTime.unix,
+                'laydate-range-hover': ifHasRangeHoverClass(
+                  getUnix(item, 'left')
+                ),
+                'layui-laydate-current':
+                  (startTime.unix === -1 || endTime.unix === -1) &&
+                  getUnix(item, 'left') === dayjs().startOf('month').valueOf(),
+              }"
+              @click="handleMonthClick(getUnix(item, 'left'))"
+              @mouseenter="monthItemMouseEnter($event, item)"
+            >
+              {{ item.slice(0, 3) }}
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="layui-laydate-main laydate-main-list-0">
+        <div class="layui-laydate-header">
+          <div class="laydate-set-ym">
+            <lay-dropdown ref="dropdownYearPanelRefRight">
+              <span class="laydate-range-time"
+                >{{ startTime.year + 1 }} {{ t("datePicker.year") }}</span
+              >
+              <template #content>
+                <YearPanel
+                  class="time-panel"
+                  v-model="endTime.year"
+                  @ok="closeRightYearPanel"
+                ></YearPanel>
+              </template>
+            </lay-dropdown>
+          </div>
+          <i
+            class="layui-icon laydate-icon laydate-next-y"
+            @click="changeYear(1)"
+            ></i
+          >
+        </div>
+        <div class="layui-laydate-content" style="height: 220px">
+          <ul class="layui-laydate-list laydate-month-list">
+            <li
+              v-for="item of MONTH_NAME"
+              :key="item"
+              :data-unix="getUnix(item, 'right')"
+              :class="{
+                'layui-this':
+                  getUnix(item, 'right') === startTime.unix ||
+                  getUnix(item, 'right') === endTime.unix,
+                'laydate-range-hover': ifHasRangeHoverClass(
+                  getUnix(item, 'right')
+                ),
+                'layui-laydate-current':
+                  (startTime.unix === -1 || endTime.unix === -1) &&
+                  getUnix(item, 'right') === dayjs().startOf('month').valueOf(),
+              }"
+              @click="handleMonthClick(getUnix(item, 'right'))"
+              @mouseenter="monthItemMouseEnter($event, item)"
+            >
+              {{ item.slice(0, 3) }}
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <PanelFoot @ok="footOnOk" @now="footOnNow" @clear="footOnClear">
+      <span v-if="startTime.unix !== -1" class="layui-laydate-preview">
+        {{ dayjs(startTime.unix).format("YYYY-MM-DD") }}
+        {{ datePicker.rangeSeparator }}
+        <template v-if="endTime.unix !== -1">
+          {{ dayjs(endTime.unix).format("YYYY-MM-DD") }}
+        </template>
+        <template v-else> -- </template>
+      </span>
+    </PanelFoot>
+  </div>
+</template>
+<script lang="ts">
+export default {
+  name: "MonthRange",
+};
+</script>
+<script lang="ts" setup>
+import { inject, reactive, ref, watch, computed } from "vue";
+import { provideType } from "../interface";
+import PanelFoot from "./PanelFoot.vue";
+import YearPanel from "./YearPanel.vue";
+import dayjs from "dayjs";
+import LayDropdown from "../../dropdown/index.vue";
+import { useI18n } from "../../../language";
+
+export interface DateRangeProps {
+  startTime: string;
+  endTime: string;
+}
+
+const props = withDefaults(defineProps<DateRangeProps>(), {});
+
+const emits = defineEmits([
+  "update:modelValue",
+  "update:startTime",
+  "update:endTime",
+]);
+
+const { t } = useI18n();
+
+const datePicker: provideType = inject("datePicker") as provideType;
+
+const startTime = reactive({
+  year: props.startTime ? dayjs(props.startTime).year() : dayjs().year(),
+  unix: props.startTime
+    ? dayjs(props.startTime).hour(0).minute(0).second(0).valueOf()
+    : -1,
+});
+const endTime = reactive({
+  year: props.endTime ? dayjs(props.endTime).year() : dayjs().year() + 1,
+  unix: props.startTime
+    ? dayjs(props.endTime).hour(0).minute(0).second(0).valueOf()
+    : -1,
+});
+
+let hoverMonth = ref(-1);
+
+const MONTH_NAME = computed(() => [
+  t("datePicker.january"),
+  t("datePicker.february"),
+  t("datePicker.march"),
+  t("datePicker.april"),
+  t("datePicker.may"),
+  t("datePicker.june"),
+  t("datePicker.july"),
+  t("datePicker.august"),
+  t("datePicker.september"),
+  t("datePicker.october"),
+  t("datePicker.november"),
+  t("datePicker.december"),
+]);
+
+// 切换年月
+const changeYear = (num: number) => {
+  startTime.year += num;
+};
+
+// 点击月份
+const handleMonthClick = (item: number) => {
+  if (startTime.unix === -1 && endTime.unix === -1) {
+    startTime.unix = item;
+  } else if (startTime.unix !== -1 && endTime.unix !== -1) {
+    hoverMonth.value = -1;
+    startTime.unix = item;
+    endTime.unix = -1;
+  } else if (startTime.unix !== -1 && endTime.unix === -1) {
+    endTime.unix = item;
+    if (item < startTime.unix) {
+      //swap
+      const first = startTime.unix;
+      const last = item;
+      startTime.unix = last;
+      endTime.unix = first;
+    }
+  }
+};
+
+// 监听年月, 刷新日期
+watch(
+  () => [props.startTime, props.endTime],
+  () => {
+    startTime.year = props.startTime
+      ? dayjs(props.startTime).year()
+      : dayjs().year();
+    startTime.unix = props.startTime
+      ? dayjs(props.startTime).hour(0).minute(0).second(0).valueOf()
+      : -1;
+    endTime.year = props.endTime ? dayjs(props.endTime).year() : dayjs().year();
+    endTime.unix = props.startTime
+      ? dayjs(props.endTime).hour(0).minute(0).second(0).valueOf()
+      : -1;
+  }
+);
+
+//关闭选择时间的面板
+const dropdownYearPanelRefLeft = ref();
+const dropdownYearPanelRefRight = ref();
+const closeLeftYearPanel = () => {
+  if (dropdownYearPanelRefLeft.value) dropdownYearPanelRefLeft.value.hide();
+};
+const closeRightYearPanel = () => {
+  if (dropdownYearPanelRefRight.value) dropdownYearPanelRefRight.value.hide();
+  startTime.year = endTime.year;
+};
+
+//关闭回调
+const footOnOk = () => {
+  let format = "YYYY-MM";
+  let startTimeVal =
+    startTime.unix !== -1 && endTime.unix !== -1
+      ? dayjs(startTime.unix).format(format)
+      : "";
+  let endTimeVal =
+    endTime.unix !== -1 && endTime.unix !== -1
+      ? dayjs(endTime.unix).format(format)
+      : "";
+  emits("update:startTime", startTimeVal);
+  emits("update:endTime", endTimeVal);
+  datePicker.ok();
+};
+
+//现在回调
+const footOnNow = () => {
+  startTime.year = dayjs().year();
+  startTime.unix = dayjs(
+    startTime.year + "-" + (dayjs().month() + 1)
+  ).valueOf();
+  endTime.unix = -1;
+  hoverMonth.value = -1;
+};
+
+//清空回调
+const footOnClear = () => {
+  startTime.unix = -1;
+  endTime.unix = -1;
+  hoverMonth.value = -1;
+};
+
+const monthItemMouseEnter = (event: MouseEvent, item: any) => {
+  if (!datePicker.range) {
+    return;
+  }
+  if (startTime.unix === -1) {
+    return;
+  }
+  if (hoverMonth.value !== -1 && endTime.unix !== -1) {
+    hoverMonth.value = -1;
+    return;
+  }
+  hoverMonth.value = parseInt(
+    (event.target as HTMLElement).dataset.unix as string
+  );
+};
+const ifHasRangeHoverClass = computed(() => {
+  return function (item: any) {
+    if (!datePicker.range) {
+      return false;
+    }
+    if (startTime.unix === -1) {
+      return false;
+    }
+    if (hoverMonth.value === -1 && endTime.unix === -1) {
+      return false;
+    }
+    let hover = endTime.unix !== -1 ? endTime.unix : hoverMonth.value;
+    let max = startTime.unix > hover ? startTime.unix : hover;
+    let min = startTime.unix < hover ? startTime.unix : hover;
+    if (item >= min && item <= max) {
+      return true;
+    }
+    return false;
+  };
+});
+
+const getUnix = computed(() => {
+  return function (item: any, position: "left" | "right") {
+    let month = MONTH_NAME.value.indexOf(item);
+    let year = position === "left" ? startTime.year : startTime.year + 1;
+    return dayjs(year + "-" + (month + 1)).valueOf();
+  };
+});
+</script>

.svn/pristine/74/74947eb135d00c0095eb2f78c299683eb4af9b40.svn-base

@@ -0,0 +1,61 @@
+.layui-dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.layui-dropdown-content {
+  position: absolute;
+  z-index: 99999;
+  background-color: #fff;
+  box-sizing: border-box;
+  border: 1px solid #e4e7ed;
+  border-radius: 2px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
+}
+
+.layui-dropdown-content > .layui-dropdown-menu {
+  border-radius: var(--global-border-radius);
+  margin: 5px 0;
+}
+
+.layui-dropdown-content .layui-menu {
+  position: relative;
+  background-color: #fff;
+}
+
+.layui-dropdown-content .layui-menu li,
+.layui-dropdown-content .layui-menu-body-title a {
+  padding: 5px 15px;
+}
+
+.layui-dropdown-content .layui-menu li {
+  position: relative;
+  display: flex;
+  margin: 1px 0;
+  line-height: 26px;
+  color: rgba(0, 0, 0, 0.8);
+  font-size: 14px;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.layui-dropdown-content .layui-menu li:hover {
+  background-color: var(--global-neutral-color-2);
+}
+
+.layui-dropdown-content .layui-menu-body-title {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.layui-dropdown-menu-prefix{
+  margin-right: 8px;
+}
+.layui-dropdown-menu-suffix{
+  margin-left: 15px;
+}
+
+.layui-dropdown-content .layui-menu li.layui-disabled:hover {
+  background-color: inherit;
+}