Merge branch 'develop' of https://gitee.com/lockingreal/layui-vue into develop

src/component/datePicker/index.vue

@@ -1,10 +1,14 @@
 <template>
   <div>
     <lay-dropdown>
-      <lay-input :value="dateValue || modelValue" readonly />
+      <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="showPanel === 'date'">
+        <div class="layui-laydate" v-show="showPane === 'date'">
           <div class="layui-laydate-main laydate-main-list-0">
             <div class="layui-laydate-header">
               <i
@@ -18,7 +22,7 @@
               >
               <div class="laydate-set-ym">
                 <span @click="showYearPanel">{{ currentYear }} 年</span
-                ><span @click="showPanel = 'month'"
+                ><span @click="showPane = 'month'"
                   >{{ currentMonth + 1 }} 月</span
                 >
               </div>
@@ -56,7 +60,7 @@
                         :data-unix="item.value"
                         :class="{
                           'laydate-day-prev': item.type !== 'current',
-                          'layui-this': item.value === selectedDay,
+                          'layui-this': item.value === currentDay,
                         }"
                         @click="handleDayClick(item)"
                       >
@@ -71,23 +75,21 @@
           <div class="layui-laydate-footer">
             <span
               v-if="type === 'datetime'"
-              @click="showPanel = 'time'"
-              class="layui-laydate-preview"
-              style="color: rgb(102, 102, 102)"
+              @click="showPane = 'time'"
+              class="laydate-btns-time"
+              >选择时间</span
             >
-              {{ `${hms.hh}:${hms.mm}:${hms.ss}` }}
-            </span>
-
             <div class="laydate-footer-btns">
               <span lay-type="clear" class="laydate-btns-clear">清空</span
-              ><span lay-type="now" class="laydate-btns-now">现在</span
+              ><span lay-type="now" class="laydate-btns-now" @click="now"
+                >现在</span
               ><span lay-type="confirm" class="laydate-btns-confirm">确定</span>
             </div>
           </div>
         </div>
 
         <!-- 年份选择器 -->
-        <div class="layui-laydate" v-show="showPanel === 'year'">
+        <div class="layui-laydate" v-show="showPane === 'year'">
           <div class="layui-laydate-main laydate-main-list-0 laydate-ym-show">
             <div class="layui-laydate-header">
               <div class="laydate-set-ym">
@@ -105,7 +107,7 @@
                   :class="[{ 'layui-this': currentYear === item }]"
                   @click="
                     currentYear = item;
-                    showPanel = 'date';
+                    showPane = 'date';
                   "
                 >
                   {{ item }}
@@ -122,14 +124,15 @@
             >
             <div class="laydate-footer-btns">
               <span lay-type="clear" class="laydate-btns-clear">清空</span
-              ><span lay-type="now" class="laydate-btns-now">现在</span
+              ><span lay-type="now" class="laydate-btns-now" @click="now"
+                >现在</span
               ><span lay-type="confirm" class="laydate-btns-confirm">确定</span>
             </div>
           </div>
         </div>
 
         <!-- 月份选择器 -->
-        <div class="layui-laydate" v-show="showPanel === 'month'">
+        <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
@@ -139,7 +142,7 @@
               >
               <div class="laydate-set-ym">
                 <span @click="showYearPanel">{{ currentYear }} 年</span
-                ><span @click="showPanel = 'month'"
+                ><span @click="showPane = 'month'"
                   >{{ currentMonth + 1 }} 月</span
                 >
               </div>
@@ -159,7 +162,7 @@
                   ]"
                   @click="
                     currentMonth = MONTH_NAME.indexOf(item);
-                    showPanel = 'date';
+                    showPane = 'date';
                   "
                 >
                   {{ item.slice(0, 3) }}
@@ -176,14 +179,15 @@
             >
             <div class="laydate-footer-btns">
               <span lay-type="clear" class="laydate-btns-clear">清空</span
-              ><span lay-type="now" class="laydate-btns-now">现在</span
+              ><span lay-type="now" class="laydate-btns-now" @click="now"
+                >现在</span
               ><span lay-type="confirm" class="laydate-btns-confirm">确定</span>
             </div>
           </div>
         </div>
 
         <!-- 时间选择器 -->
-        <div class="layui-laydate" v-if="showPanel == 'time'">
+        <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">
@@ -215,12 +219,13 @@
             </div>
           </div>
           <div class="layui-laydate-footer">
-            <span @click="showPanel = 'date'" class="layui-laydate-preview"
-              >返回</span
+            <span @click="showPane = 'date'" class="laydate-btns-time"
+              >返回日期</span
             >
             <div class="laydate-footer-btns">
               <span lay-type="clear" class="laydate-btns-clear">清空</span
-              ><span lay-type="now" class="laydate-btns-now">现在</span
+              ><span lay-type="now" class="laydate-btns-now" @click="now"
+                >现在</span
               ><span lay-type="confirm" class="laydate-btns-confirm">确定</span>
             </div>
           </div>
@@ -231,15 +236,10 @@
 </template>
 
 <script lang="ts" setup>
-import {
-  computed,
-  nextTick,
-  ref,
-  watch,
-  defineProps,
-  defineEmits,
-  onMounted,
-} from "vue";
+import { computed, nextTick, ref, watch, defineProps, defineEmits } from "vue";
+
+import moment from "moment";
+import LayIcon from "../icon/index";
 import LayInput from "../input/index.vue";
 import LayDropdown from "../dropdown/index.vue";
 import { getDayLength, getYears, getDate, getMonth, getYear } from "./day";
@@ -262,7 +262,7 @@ const MONTH_NAME = [
   "12月",
 ];
 
-const hms = ref({ hh: "00", mm: "00", ss: "00" });
+const hms = ref({ hh: 0, mm: 0, ss: 0 });
 const els = [
   { count: 24, type: "hh" },
   { count: 60, type: "mm" },
@@ -272,6 +272,7 @@ const els = [
 export interface LayDatePickerProps {
   modelValue?: string;
   type: "date" | "datetime" | "year" | "time" | "month";
+  name: string;
 }
 
 const props = withDefaults(defineProps<LayDatePickerProps>(), {
@@ -279,25 +280,39 @@ const props = withDefaults(defineProps<LayDatePickerProps>(), {
   type: "date",
 });
 
-const currentDate = getDate();
 const currentYear = ref(getYear());
 const currentMonth = ref(getMonth());
+const currentDay = ref<number>();
 
 const yearList = ref<number[]>(getYears());
 const dateList = ref<any[]>([]);
-const showPanel = ref("date");
-const selectedDay = ref<number>();
+const showPane = ref("date");
 
-// 最终结果
+// 计算结果日期
 const dateValue = computed<string>(() => {
-  if (!selectedDay.value) return "";
-  const d = new Date(selectedDay.value);
-  const y = d.getFullYear();
-  const m = (d.getMonth() + 1).toString().padStart(2, "0");
-  const day = d.getDate().toString().padStart(2, "0");
-  const currentValue = `${y}-${m}-${day} ${hms.value.hh}:${hms.value.mm}:${hms.value.ss}`;
-  $emits("update:modelValue", currentValue);
-  return currentValue;
+  let 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;
+    default:
+      momentVal = momentObj.format();
+  }
+  $emits("update:modelValue", momentVal);
+  return momentVal;
 });
 
 // 设置日期列表
@@ -353,7 +368,7 @@ watch(
 
 // 点击日期
 const handleDayClick = (item: any) => {
-  selectedDay.value = item.value;
+  currentDay.value = item.value;
   if (item.type !== "current") {
     currentMonth.value =
       item.type === "prev" ? currentMonth.value - 1 : currentMonth.value + 1;
@@ -363,6 +378,14 @@ const handleDayClick = (item: any) => {
 // 确认事件
 const ok = () => {};
 
+// 现在时间
+const now = () => {
+  currentDay.value = moment().valueOf();
+};
+
+// 清空日期
+const clear = () => {};
+
 // 切换年月
 const changeYearOrMonth = (type: "year" | "month", num: number) => {
   if (type === "year") {
@@ -382,7 +405,7 @@ const changeYearOrMonth = (type: "year" | "month", num: number) => {
 
 // 显示年列表面板
 const showYearPanel = () => {
-  showPanel.value = "year";
+  showPane.value = "year";
   nextTick(() => {
     (
       document.querySelector(".year-panel-item.active") as HTMLElement

src/component/table/index.vue

@@ -93,12 +93,16 @@ const change = function (page: any) {
   emit("change", page);
 };
 
-const rowClick = function (data: any) {
-  emit("row", data);
+const rowClick = function (data: any,evt:MouseEvent) {
+  emit("row", data,evt);
 };
 
-const rowDoubleClick = function (data: any) {
-  emit("row-double", data);
+const rowDoubleClick = function (data: any,evt:MouseEvent) {
+  emit("row-double", data,evt);
+};
+
+const contextmenu = function (data: any,evt:MouseEvent) {
+  emit("contextmenu", data,evt);
 };
 
 // 打印 table 数据
@@ -246,12 +250,19 @@ onMounted(() => {
                 </th>
                 <template v-for="column in columns" :key="column">
                   <th v-if="tableColumnKeys.includes(column.key)">
-                    <!-- TODO Table header slot  -->
                     <div
                       class="layui-table-cell"
                       :style="{ width: column.width }"
                     >
-                      <span>{{ column.title }}</span>
+                      <span v-if="column.titleSlot">
+                        <template v-if="column.titleSlot">
+                          <slot :name="column.titleSlot"></slot>
+                        </template>
+                        <template>
+                          {{ column.title }}
+                        </template>
+                      </span>
+                      <span v-else>{{ column.title }}</span>
                       <span
                         v-if="column.sort"
                         class="layui-table-sort layui-inline"
@@ -281,8 +292,9 @@ onMounted(() => {
             <tbody>
               <template v-for="data in tableDataSource" :key="data">
                 <tr
-                  @click.stop="rowClick(data)"
-                  @dblclick.stop="rowDoubleClick(data)"
+                  @click.stop="rowClick(data,$event)"
+                  @dblclick.stop="rowDoubleClick(data,$event)"
+                  @contextmenu.stop="contextmenu(data,$event)"
                 >
                   <!-- 复选框 -->
                   <td v-if="checkbox" class="layui-table-col-special">

src/component/upload/index.vue

@@ -7,7 +7,7 @@ export default {
 import "./index.less";
 import { Recordable } from "../../types";
 import { layer } from "@layui/layer-vue";
-import { ref, useSlots, withDefaults, onMounted, defineExpose } from "vue";
+import { ref, useSlots, withDefaults } from "vue";
 import { templateRef } from "@vueuse/core";
 
 // 组件的参数字段类型
@@ -32,6 +32,7 @@ const props = withDefaults(defineProps<LayUploadProps>(), {
   number: 0,
   drag: false,
 });
+
 const slot = useSlots();
 const slots = slot.default && slot.default();
 const emit = defineEmits(["choose", "before", "done", "error"]);

src/theme/date.less

@@ -22,7 +22,7 @@
   
   /* 主体结构 */
   .layui-laydate, .layui-laydate *{box-sizing: border-box;}
-  .layui-laydate{position: absolute; z-index: 66666666; margin: 5px 0; border-radius: 2px; font-size: 14px; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}
+  .layui-laydate{ z-index: 66666666; border-radius: 2px; font-size: 14px; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}
   .layui-laydate-main{width: 272px;}
   .layui-laydate-header *,
   .layui-laydate-content td,
@@ -92,7 +92,7 @@
   .laydate-time-list ol li{width: 130%; padding-left: 4px; height: 30px; line-height: 30px; text-align: left; cursor: pointer;}
   
   /* 提示 */
-  .layui-laydate-hint{position: absolute; top: 115px; left: 50%; width: 250px; margin-left: -125px; line-height: 20px; padding: 15px; text-align: center; font-size: 12px; color: #FF5722;}
+  .layui-laydate-hint{ top: 115px; left: 50%; width: 250px; margin-left: -125px; line-height: 20px; padding: 15px; text-align: center; font-size: 12px; color: #FF5722;}
   
   
   /* 双日历 */
@@ -103,7 +103,7 @@
   
   
   /* 默认简约主题 */
-  .layui-laydate, .layui-laydate-hint{border: 1px solid #d2d2d2; box-shadow: 0 2px 4px rgba(0,0,0,.12); background-color: #fff; color: #666;}
+  .layui-laydate, .layui-laydate-hint{background-color: #fff; color: #666;}
   .layui-laydate-header{border-bottom: 1px solid #e2e2e2;}
   .layui-laydate-header i:hover,
   .layui-laydate-header span:hover{color: #5FB878;}