From 305eff05e5ab871f54ab7ade156dd2e6859b982a Mon Sep 17 00:00:00 2001
From: castleiMac <castle@tansuyun.cn>
Date: Sun, 3 Apr 2022 20:35:45 +0800
Subject: [PATCH] =?UTF-8?q?[=E4=BF=AE=E6=AD=A3]=20=E9=80=89=E6=8B=A9?=
 =?UTF-8?q?=E5=99=A8=E5=8F=B3=E4=B8=8B=E8=A7=92=E7=9A=84=E5=BD=93=E5=89=8D?=
 =?UTF-8?q?=E5=80=BC=E6=8F=90=E7=A4=BA=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/component/datePicker/index.vue | 338 +++++++++++++++++------------
 1 file changed, 203 insertions(+), 135 deletions(-)

diff --git a/src/component/datePicker/index.vue b/src/component/datePicker/index.vue
index 8f7979ef..749c6be5 100644
--- a/src/component/datePicker/index.vue
+++ b/src/component/datePicker/index.vue
@@ -1,162 +1,205 @@
 <template>
   <div>
     <lay-dropdown ref="dropdownRef">
-      <<<<<<< HEAD <lay-input :name="name" :value="dateValue" readonly="readonly"> ======= <lay-input :name="name"
-          :value="dateValue || modelValue" readonly> >>>>>>> 4c653112a2fca8ef40349518d79c58ec7105e032 <template #prefix>
-            <lay-icon type="layui-icon-date"></lay-icon>
-          </template>
-        </lay-input>
-        <template #content>
-          <!-- 日期选择 -->
-          <div class="layui-laydate" v-show="showPane === 'date' || showPane === 'datetime'">
-            <div class="layui-laydate-main laydate-main-list-0">
-              <div class="layui-laydate-header">
-                <i class="layui-icon laydate-icon laydate-prev-y" @click="changeYearOrMonth('year', -1)"></i><i
-                  class="layui-icon laydate-icon laydate-prev-m" @click="changeYearOrMonth('month', -1)"></i>
-                <div class="laydate-set-ym">
-                  <span @click="showYearPanel">{{ currentYear }} 年</span><span
-                    @click="showPane = 'month'">{{ currentMonth + 1 }} 月</span>
-                </div>
-                <i class="layui-icon laydate-icon laydate-next-m" @click="changeYearOrMonth('month', 1)"></i><i
-                  class="layui-icon laydate-icon laydate-next-y" @click="changeYearOrMonth('year', 1)"></i>
+      <lay-input :name="name" :value="dateValue || modelValue" readonly>
+        <template #prefix>
+          <lay-icon type="layui-icon-date"></lay-icon>
+        </template>
+      </lay-input>
+      <template #content>
+        <!-- 日期选择 -->
+        <div class="layui-laydate" v-show="showPane === 'date' || showPane === 'datetime'">
+          <div class="layui-laydate-main laydate-main-list-0">
+            <div class="layui-laydate-header">
+              <i
+                class="layui-icon laydate-icon laydate-prev-y"
+                @click="changeYearOrMonth('year', -1)"
+              ></i>
+              <i
+                class="layui-icon laydate-icon laydate-prev-m"
+                @click="changeYearOrMonth('month', -1)"
+              ></i>
+              <div class="laydate-set-ym">
+                <span @click="showYearPanel">{{ currentYear }} 年</span>
+                <span @click="showPane = 'month'">{{ currentMonth + 1 }} 月</span>
               </div>
-              <div class="layui-laydate-content">
-                <table>
-                  <thead>
-                    <tr>
-                      <th v-for="item of WEEK_NAME" :key="item">{{ item }}</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    <template v-for="(o, i) of dateList.length % 7 == 0
+              <i
+                class="layui-icon laydate-icon laydate-next-m"
+                @click="changeYearOrMonth('month', 1)"
+              ></i>
+              <i
+                class="layui-icon laydate-icon laydate-next-y"
+                @click="changeYearOrMonth('year', 1)"
+              ></i>
+            </div>
+            <div class="layui-laydate-content">
+              <table>
+                <thead>
+                  <tr>
+                    <th v-for="item of WEEK_NAME" :key="item">{{ item }}</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <template
+                    v-for="(o, i) of dateList.length % 7 == 0
                     ? dateList.length / 7
-                    : Math.floor(dateList.length / 7) + 1" :key="i">
-                      <tr>
-                        <td v-for="(item, index) of dateList.slice(
+                    : Math.floor(dateList.length / 7) + 1"
+                    :key="i"
+                  >
+                    <tr>
+                      <td
+                        v-for="(item, index) of dateList.slice(
                           i * 7,
                           i * 7 + 7
-                        )" :key="index" :data-unix="item.value" :class="{
-  'laydate-day-prev': item.type !== 'current',
-  'layui-this': item.value === currentDay,
-}" @click="handleDayClick(item)">
-                          {{ item.day }}
-                        </td>
-                      </tr>
-                    </template>
-                  </tbody>
-                </table>
-              </div>
-            </div>
-            <div class="layui-laydate-footer">
-              <span v-if="type === 'datetime'" @click="showPane = 'time'" class="laydate-btns-time">选择时间</span>
-              <div class="laydate-footer-btns">
-                <span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span><span lay-type="now"
-                  class="laydate-btns-now" @click="now">现在</span><span lay-type="confirm" class="laydate-btns-confirm"
-                  @click="ok">确定</span>
-              </div>
+                        )"
+                        :key="index"
+                        :data-unix="item.value"
+                        :class="{
+                          'laydate-day-prev': item.type !== 'current',
+                          'layui-this': item.value === currentDay,
+                        }"
+                        @click="handleDayClick(item)"
+                      >{{ item.day }}</td>
+                    </tr>
+                  </template>
+                </tbody>
+              </table>
             </div>
           </div>
-          <!-- 年份选择器 -->
-          <div class="layui-laydate" v-show="showPane === 'year' || showPane === 'yearmonth'">
-            <div class="layui-laydate-main laydate-main-list-0 laydate-ym-show">
-              <div class="layui-laydate-header">
-                <div class="laydate-set-ym">
-                  <span class="laydate-time-text">选择年份</span>
-                </div>
-              </div>
-              <div class="layui-laydate-content" style="height: 220px; overflow-y: auto">
-                <ul class="layui-laydate-list laydate-year-list">
-                  <li v-for="item of yearList" :key="item" :class="[{ 'layui-this': currentYear === item }]"
-                    @click="handleYearClick(item)">
-                    {{ item }}
-                  </li>
-                </ul>
+          <div class="layui-laydate-footer">
+            <span
+              v-if="type === 'datetime'"
+              @click="showPane = 'time'"
+              class="laydate-btns-time"
+            >选择时间</span>
+            <div class="laydate-footer-btns">
+              <span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span>
+              <span lay-type="now" class="laydate-btns-now" @click="now">现在</span>
+              <span lay-type="confirm" class="laydate-btns-confirm" @click="ok">确定</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 年份选择器 -->
+        <div class="layui-laydate" v-show="showPane === 'year' || showPane === 'yearmonth'">
+          <div class="layui-laydate-main laydate-main-list-0 laydate-ym-show">
+            <div class="layui-laydate-header">
+              <div class="laydate-set-ym">
+                <span class="laydate-time-text">选择年份</span>
               </div>
             </div>
-            <div class="layui-laydate-footer">
-              <!-- <span
+            <div class="layui-laydate-content" style="height: 220px; overflow-y: auto">
+              <ul class="layui-laydate-list laydate-year-list">
+                <li
+                  v-for="item of yearList"
+                  :key="item"
+                  :class="[{ 'layui-this': currentYear === item }]"
+                  @click="handleYearClick(item)"
+                >{{ item }}</li>
+              </ul>
+            </div>
+          </div>
+          <div class="layui-laydate-footer">
+            <span
               class="layui-laydate-preview"
               title="当前选中的结果"
               style="color: rgb(102, 102, 102)"
-            >2022</span>-->
-              <div class="laydate-footer-btns">
-                <span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span><span lay-type="now"
-                  class="laydate-btns-now" @click="now">现在</span><span lay-type="confirm" class="laydate-btns-confirm"
-                  @click="ok">确定</span>
-              </div>
+            >{{ dateValue }}</span>
+            <div class="laydate-footer-btns">
+              <span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span>
+              <span lay-type="now" class="laydate-btns-now" @click="now">现在</span>
+              <span lay-type="confirm" class="laydate-btns-confirm" @click="ok">确定</span>
             </div>
           </div>
-          <!-- 月份选择器 -->
-          <div class="layui-laydate" v-show="showPane === 'month'">
-            <div class="layui-laydate-main laydate-main-list-0 laydate-ym-show">
-              <div class="layui-laydate-header">
-                <i class="layui-icon laydate-icon laydate-prev-y" @click="changeYearOrMonth('year', -1)"></i>
-                <div class="laydate-set-ym">
-                  <span @click="showYearPanel" v-if="showPane === 'date' || showPane === 'datetime'">{{ currentYear }}
-                    年</span>
-                  <span @click="showPane = 'month'">{{ currentMonth + 1 }} 月</span>
-                </div>
-                <i class="layui-icon laydate-icon laydate-next-y" @click="changeYearOrMonth('year', 1)"></i>
+        </div>
+
+        <!-- 月份选择器 -->
+        <div class="layui-laydate" v-show="showPane === 'month'">
+          <div class="layui-laydate-main laydate-main-list-0 laydate-ym-show">
+            <div class="layui-laydate-header">
+              <i
+                class="layui-icon laydate-icon laydate-prev-y"
+                @click="changeYearOrMonth('year', -1)"
+              ></i>
+              <div class="laydate-set-ym">
+                <span
+                  @click="showYearPanel"
+                  v-if="showPane === 'date' || showPane === 'datetime'"
+                >{{ currentYear }} 年</span>
+                <span @click="showPane = 'month'">{{ currentMonth + 1 }} 月</span>
               </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" :class="[
+              <i
+                class="layui-icon laydate-icon laydate-next-y"
+                @click="changeYearOrMonth('year', 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"
+                  :class="[
                     { 'layui-this': MONTH_NAME.indexOf(item) === currentMonth },
-                  ]" @click="handleMonthClick(item)">
-                    {{ item.slice(0, 3) }}
-                  </li>
-                </ul>
-              </div>
+                  ]"
+                  @click="handleMonthClick(item)"
+                >{{ item.slice(0, 3) }}</li>
+              </ul>
             </div>
-            <div class="layui-laydate-footer">
-              <!-- <span
+          </div>
+          <div class="layui-laydate-footer">
+            <span
               class="layui-laydate-preview"
               title="当前选中的结果"
               style="color: rgb(102, 102, 102)"
-            >2021-03</span>-->
-              <div class="laydate-footer-btns">
-                <span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span><span lay-type="now"
-                  class="laydate-btns-now" @click="now">现在</span><span lay-type="confirm" class="laydate-btns-confirm"
-                  @click="ok">确定</span>
-              </div>
+            >{{ dateValue }}</span>
+            <div class="laydate-footer-btns">
+              <span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span>
+              <span lay-type="now" class="laydate-btns-now" @click="now">现在</span>
+              <span lay-type="confirm" class="laydate-btns-confirm" @click="ok">确定</span>
             </div>
           </div>
-          <!-- 时间选择器 -->
-          <div class="layui-laydate" v-if="showPane == 'time'">
-            <div class="layui-laydate-main laydate-main-list-0 laydate-time-show">
-              <div class="layui-laydate-header">
-                <div class="laydate-set-ym">
-                  <span class="laydate-time-text">选择时间</span>
-                </div>
-              </div>
-              <div class="layui-laydate-content" style="height: 210px">
-                <ul class="layui-laydate-list laydate-time-list">
-                  <li class="num-list" v-for="item in els" :key="item.type">
-                    <ol class="scroll" @click="choseTime">
-                      <li v-for="(it, index) in item.count" :id="item.type + index.toString()"
-                        :data-value="index.toString().padStart(2, '0')" :data-type="item.type" :key="it" :class="[
-                          'num',
-                          index.toString().padStart(2, '0') == hms[item.type]
-                            ? 'layui-this'
-                            : '',
-                        ]">
-                        {{ index.toString().padStart(2, "0") }}
-                      </li>
-                    </ol>
-                  </li>
-                </ul>
+        </div>
+
+        <!-- 时间选择器 -->
+        <div class="layui-laydate" v-if="showPane == 'time'">
+          <div class="layui-laydate-main laydate-main-list-0 laydate-time-show">
+            <div class="layui-laydate-header">
+              <div class="laydate-set-ym">
+                <span class="laydate-time-text">选择时间</span>
               </div>
             </div>
-            <div class="layui-laydate-footer">
-              <span @click="showPane = 'date'" v-if="type != 'time'" class="laydate-btns-time">返回日期</span>
-              <div class="laydate-footer-btns">
-                <span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span><span lay-type="now"
-                  class="laydate-btns-now" @click="now">现在</span><span lay-type="confirm" class="laydate-btns-confirm"
-                  @click="ok">确定</span>
-              </div>
+            <div class="layui-laydate-content" style="height: 210px">
+              <ul class="layui-laydate-list laydate-time-list">
+                <li class="num-list" v-for="item in els" :key="item.type">
+                  <ol class="scroll" @click="choseTime">
+                    <li
+                      v-for="(it, index) in item.count"
+                      :id="item.type + index.toString()"
+                      :data-value="index.toString().padStart(2, '0')"
+                      :data-type="item.type"
+                      :key="it"
+                      :class="[
+                        'num',
+                        index.toString().padStart(2, '0') == hms[item.type]
+                          ? 'layui-this'
+                          : '',
+                      ]"
+                    >{{ index.toString().padStart(2, "0") }}</li>
+                  </ol>
+                </li>
+              </ul>
             </div>
           </div>
-        </template>
+          <div class="layui-laydate-footer">
+            <span @click="showPane = 'date'" v-if="type != 'time'" class="laydate-btns-time">返回日期</span>
+            <div class="laydate-footer-btns">
+              <span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span>
+              <span lay-type="now" class="laydate-btns-now" @click="now">现在</span>
+              <span lay-type="confirm" class="laydate-btns-confirm" @click="ok">确定</span>
+            </div>
+          </div>
+        </div>
+      </template>
     </lay-dropdown>
   </div>
 </template>
@@ -240,10 +283,35 @@ const dateValue = computed<string>(() => {
     return "";
   }
   let momentVal;
-  let momentObj = moment(currentDay.value || props.modelValue)
-  momentVal = momentObj.format(fmtMap[props.type])
-  if (momentVal != props.modelValue)
-    $emits("update:modelValue", momentVal);
+  let momentObj = moment(currentDay.value)
+    .hour(hms.value.hh)
+    .minute(hms.value.mm)
+    .second(hms.value.ss);
+
+  switch (props.type) {
+    case "date":
+      momentVal = momentObj.format("YYYY-MM-DD");
+      break;
+    case "datetime":
+      momentVal = momentObj.format("YYYY-MM-DD HH:mm:ss");
+      break;
+    case "year":
+      momentVal = momentObj.format("YYYY");
+      break;
+    case "month":
+      momentVal = momentObj.format("MM");
+      break;
+    case "time":
+      momentVal = momentObj.format("HH:mm:ss");
+      break;
+    case "yearmonth":
+      momentVal = momentObj.format("YYYY-MM");
+      break;
+    default:
+      momentVal = momentObj.format();
+      break;
+  }
+  $emits("update:modelValue", momentVal);
   return momentVal;
 });