From f134d0468580797c184753ce17d9085a71e96516 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E5=84=80=E5=BC=8F?= <854085467@qq.com>
Date: Mon, 18 Jul 2022 09:15:26 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D(select):=20update?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../datePicker/components/DateRange.vue       |  44 ++++---
 .../datePicker/components/MonthRange.vue      | 114 ++++++++++++++----
 .../src/component/datePicker/index.vue        |  91 ++++++++++----
 .../src/document/zh-CN/components/select.md   |   4 +-
 4 files changed, 182 insertions(+), 71 deletions(-)

diff --git a/package/component/src/component/datePicker/components/DateRange.vue b/package/component/src/component/datePicker/components/DateRange.vue
index 3de93e0a..32426d6f 100644
--- a/package/component/src/component/datePicker/components/DateRange.vue
+++ b/package/component/src/component/datePicker/components/DateRange.vue
@@ -279,16 +279,22 @@ const closeRightMonthPanel = () => {
 const footOnOk = () => {
   let format =
     datePicker.type === "datetime" ? "YYYY-MM-DD HH:mm:ss" : "YYYY-MM-DD";
-  let startTimeVal =startTime.day!==-1&&endTime.day!==-1?dayjs(startTime.day)
-    .hour(startTime.hms.hh)
-    .minute(startTime.hms.mm)
-    .second(startTime.hms.ss)
-    .format(format):'';
-  let endTimeVal = startTime.day!==-1&&endTime.day!==-1?dayjs(endTime.day)
-    .hour(endTime.hms.hh)
-    .minute(endTime.hms.mm)
-    .second(endTime.hms.ss)
-    .format(format):'';
+  let startTimeVal =
+    startTime.day !== -1 && endTime.day !== -1
+      ? dayjs(startTime.day)
+          .hour(startTime.hms.hh)
+          .minute(startTime.hms.mm)
+          .second(startTime.hms.ss)
+          .format(format)
+      : "";
+  let endTimeVal =
+    startTime.day !== -1 && endTime.day !== -1
+      ? dayjs(endTime.day)
+          .hour(endTime.hms.hh)
+          .minute(endTime.hms.mm)
+          .second(endTime.hms.ss)
+          .format(format)
+      : "";
   emits("update:startTime", startTimeVal);
   emits("update:endTime", endTimeVal);
   datePicker.ok();
@@ -296,18 +302,18 @@ const footOnOk = () => {
 
 //现在回调
 const footOnNow = () => {
-  startTime.year=dayjs().year();
-  startTime.month=dayjs().month();
-  startTime.day=new Date(new Date().toDateString()).getTime();
-  startTime.hms.hh=dayjs().hour();
-  startTime.hms.mm=dayjs().minute();
-  startTime.hms.ss=dayjs().second();
-  endTime.day=-1;
+  startTime.year = dayjs().year();
+  startTime.month = dayjs().month();
+  startTime.day = new Date(new Date().toDateString()).getTime();
+  startTime.hms.hh = dayjs().hour();
+  startTime.hms.mm = dayjs().minute();
+  startTime.hms.ss = dayjs().second();
+  endTime.day = -1;
 };
 
 //清空回调
 const footOnClear = () => {
-  startTime.day=-1;
-  endTime.day=-1;
+  startTime.day = -1;
+  endTime.day = -1;
 };
 </script>
diff --git a/package/component/src/component/datePicker/components/MonthRange.vue b/package/component/src/component/datePicker/components/MonthRange.vue
index 4f6dba78..6cee2c9a 100644
--- a/package/component/src/component/datePicker/components/MonthRange.vue
+++ b/package/component/src/component/datePicker/components/MonthRange.vue
@@ -3,21 +3,43 @@
     <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>
+          <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 || "--" }}年</span>
+              <span class="laydate-range-time"
+                >{{ startTime.year || "--" }}年</span
+              >
               <template #content>
-                <YearPanel class="time-panel" v-model="startTime.year" @ok="closeLeftYearPanel"></YearPanel>
+                <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')) }"
-              @click="handleMonthClick(getUnix(item, 'left'))" @mouseenter="monthItemMouseEnter($event, item)">
+            <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')
+                ),
+              }"
+              @click="handleMonthClick(getUnix(item, 'left'))"
+              @mouseenter="monthItemMouseEnter($event, item)"
+            >
               {{ item.slice(0, 3) }}
             </li>
           </ul>
@@ -29,17 +51,37 @@
             <lay-dropdown ref="dropdownYearPanelRefRight">
               <span class="laydate-range-time">{{ startTime.year + 1 }}年</span>
               <template #content>
-                <YearPanel class="time-panel" v-model="endTime.year" @ok="closeRightYearPanel"></YearPanel>
+                <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>
+          <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')) }"
-              @click="handleMonthClick(getUnix(item, 'right'))" @mouseenter="monthItemMouseEnter($event, item)">
+            <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')
+                ),
+              }"
+              @click="handleMonthClick(getUnix(item, 'right'))"
+              @mouseenter="monthItemMouseEnter($event, item)"
+            >
               {{ item.slice(0, 3) }}
             </li>
           </ul>
@@ -83,11 +125,15 @@ 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,
+  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,
+  unix: props.startTime
+    ? dayjs(props.endTime).hour(0).minute(0).second(0).valueOf()
+    : -1,
 });
 let hoverMonth = ref(-1);
 const MONTH_NAME = [
@@ -134,11 +180,17 @@ const handleMonthClick = (item: number) => {
 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;
+    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;
-  },
+    endTime.unix = props.startTime
+      ? dayjs(props.endTime).hour(0).minute(0).second(0).valueOf()
+      : -1;
+  }
 );
 
 //关闭选择时间的面板
@@ -155,8 +207,14 @@ const closeRightYearPanel = () => {
 //关闭回调
 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) : '';
+  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();
@@ -165,7 +223,9 @@ const footOnOk = () => {
 //现在回调
 const footOnNow = () => {
   startTime.year = dayjs().year();
-  startTime.unix = dayjs(startTime.year + '-' + (dayjs().month() + 1)).valueOf();
+  startTime.unix = dayjs(
+    startTime.year + "-" + (dayjs().month() + 1)
+  ).valueOf();
   endTime.unix = -1;
   hoverMonth.value = -1;
 };
@@ -188,7 +248,9 @@ const monthItemMouseEnter = (event: MouseEvent, item: any) => {
     hoverMonth.value = -1;
     return;
   }
-  hoverMonth.value = parseInt((event.target as HTMLElement).dataset.unix as string);
+  hoverMonth.value = parseInt(
+    (event.target as HTMLElement).dataset.unix as string
+  );
 };
 const ifHasRangeHoverClass = computed(() => {
   return function (item: any) {
@@ -212,10 +274,10 @@ const ifHasRangeHoverClass = computed(() => {
 });
 
 const getUnix = computed(() => {
-  return function (item: any, position: 'left' | 'right') {
+  return function (item: any, position: "left" | "right") {
     let month = MONTH_NAME.indexOf(item);
-    let year = position === 'left' ? startTime.year : startTime.year + 1;
-    return dayjs(year + '-' + (month + 1)).valueOf();
-  }
-})
+    let year = position === "left" ? startTime.year : startTime.year + 1;
+    return dayjs(year + "-" + (month + 1)).valueOf();
+  };
+});
 </script>
diff --git a/package/component/src/component/datePicker/index.vue b/package/component/src/component/datePicker/index.vue
index 94b90200..a2f3c92c 100644
--- a/package/component/src/component/datePicker/index.vue
+++ b/package/component/src/component/datePicker/index.vue
@@ -1,33 +1,74 @@
 <template>
   <div>
-    <lay-dropdown ref="dropdownRef" :disabled="disabled" :autoFitMinWidth="false">
-      <lay-input readonly :name="name" :model-value="(dateValue as string)" :placeholder="placeholder"
-        prefix-icon="layui-icon-date" :disabled="disabled" v-if="!range">
+    <lay-dropdown
+      ref="dropdownRef"
+      :disabled="disabled"
+      :autoFitMinWidth="false"
+    >
+      <lay-input
+        readonly
+        :name="name"
+        :model-value="(dateValue as string)"
+        :placeholder="placeholder"
+        prefix-icon="layui-icon-date"
+        :disabled="disabled"
+        v-if="!range"
+      >
       </lay-input>
       <div class="laydate-range-inputs" v-else>
-        <lay-input readonly :name="name" :model-value="dateValue[0]" :disabled="disabled" class="start-input">
+        <lay-input
+          readonly
+          :name="name"
+          :model-value="dateValue[0]"
+          :disabled="disabled"
+          class="start-input"
+        >
         </lay-input>
         <span class="range-separator">{{ rangeSeparator }}</span>
-        <lay-input readonly :name="name" :model-value="dateValue[1]" :disabled="disabled" class="end-input">
+        <lay-input
+          readonly
+          :name="name"
+          :model-value="dateValue[1]"
+          :disabled="disabled"
+          class="end-input"
+        >
         </lay-input>
       </div>
 
       <template #content>
         <!-- 日期选择 -->
-        <DatePanel v-if="!range && (showPanel === 'date' || showPanel === 'datetime')" v-model="currentDay"></DatePanel>
+        <DatePanel
+          v-if="!range && (showPanel === 'date' || showPanel === 'datetime')"
+          v-model="currentDay"
+        ></DatePanel>
         <!-- 时间选择 -->
-        <TimePanel v-if="!range && showPanel === 'time'" v-model="hms"></TimePanel>
+        <TimePanel
+          v-if="!range && showPanel === 'time'"
+          v-model="hms"
+        ></TimePanel>
         <!-- 年份选择器 -->
-        <YearPanel v-if="!range && (showPanel === 'year' || showPanel === 'yearmonth')" v-model="currentYear">
+        <YearPanel
+          v-if="!range && (showPanel === 'year' || showPanel === 'yearmonth')"
+          v-model="currentYear"
+        >
         </YearPanel>
         <!-- 月份选择器 -->
-        <MonthPanel v-if="!range && showPanel === 'month'" v-model="currentMonth"></MonthPanel>
+        <MonthPanel
+          v-if="!range && showPanel === 'month'"
+          v-model="currentMonth"
+        ></MonthPanel>
         <!-- 范围选择 -->
-        <DateRange v-if="range && (showPanel === 'date' || showPanel === 'datetime')"
-          v-model:startTime="rangeValue.first" v-model:endTime="rangeValue.last"></DateRange>
+        <DateRange
+          v-if="range && (showPanel === 'date' || showPanel === 'datetime')"
+          v-model:startTime="rangeValue.first"
+          v-model:endTime="rangeValue.last"
+        ></DateRange>
 
-        <MonthRange v-if="range && showPanel === 'yearmonth'" v-model:startTime="rangeValue.first"
-          v-model:endTime="rangeValue.last">
+        <MonthRange
+          v-if="range && showPanel === 'yearmonth'"
+          v-model:startTime="rangeValue.first"
+          v-model:endTime="rangeValue.last"
+        >
         </MonthRange>
       </template>
     </lay-dropdown>
@@ -115,10 +156,10 @@ const getDateValue = () => {
       dayjsVal =
         currentDay.value !== -1
           ? dayjs(currentDay.value)
-            .hour(hms.value.hh)
-            .minute(hms.value.mm)
-            .second(hms.value.ss)
-            .format("YYYY-MM-DD HH:mm:ss")
+              .hour(hms.value.hh)
+              .minute(hms.value.mm)
+              .second(hms.value.ss)
+              .format("YYYY-MM-DD HH:mm:ss")
           : "";
       break;
     case "year":
@@ -148,10 +189,10 @@ const getDateValue = () => {
       dayjsVal =
         currentDay.value !== -1
           ? dayjs(currentDay.value)
-            .hour(hms.value.hh)
-            .minute(hms.value.mm)
-            .second(hms.value.ss)
-            .format()
+              .hour(hms.value.hh)
+              .minute(hms.value.mm)
+              .second(hms.value.ss)
+              .format()
           : "";
       break;
   }
@@ -168,16 +209,16 @@ const getDateValueByRange = () => {
     $emits("update:modelValue", dateValue.value);
     return;
   }
-  let format ="YYYY-MM-DD";
+  let format = "YYYY-MM-DD";
   switch (props.type) {
     case "date":
-      format = 'YYYY-MM-DD';
+      format = "YYYY-MM-DD";
       break;
     case "datetime":
-      format = 'YYYY-MM-DD HH:mm:ss';
+      format = "YYYY-MM-DD HH:mm:ss";
       break;
     case "yearmonth":
-      format = 'YYYY-MM';
+      format = "YYYY-MM";
       break;
   }
   dateValue.value = [
diff --git a/package/document-component/src/document/zh-CN/components/select.md b/package/document-component/src/document/zh-CN/components/select.md
index 01cae2ce..4d9806bb 100644
--- a/package/document-component/src/document/zh-CN/components/select.md
+++ b/package/document-component/src/document/zh-CN/components/select.md
@@ -263,6 +263,9 @@ export default {
 ::: demo
 
 <template>
+  <lay-button @click="mvalue=[1,5,7]">点击切换(当前值:{{mvalue.join()}})</lay-button>
+  <br/>
+  <br/>
   <lay-select v-model="mvalue" @change="change" multiple>
     <lay-select-option value="1" label="学习"></lay-select-option>
     <lay-select-option value="2" label="编码" disabled></lay-select-option>
@@ -272,7 +275,6 @@ export default {
     <lay-select-option value="6" label="打篮球"></lay-select-option>
     <lay-select-option value="7" label="rap"></lay-select-option>
   </lay-select>
-  <lay-button @click="mvalue=[1,5,7]">点击切换(当前值:{{mvalue.join()}})</lay-button>
 </template>
 
 <script>