vue2-client 1.16.86 → 1.16.88

package/src/base-client/components/his/XTimeSelect/XTimeSelect.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="x-time-select" :class="wrapperClassObject">
+  <div class="x-time-select" :class="[{ 'has-nav-arrows': navArrows }, wrapperClassObject]">
     <div class="time-select-container">
       <div v-if="type === 'range'" class="picker-wrapper">
         <span v-if="showCalendarIcon" class="left-calendar-icon"><a-icon type="calendar" /></span>
@@ -14,7 +14,7 @@
           @change="handleDateChange"
         />
       </div>
-      <div v-if="type === 'date'" class="picker-wrapper">
+      <div v-if="type === 'date' && !navArrows" class="picker-wrapper">
         <span v-if="showCalendarIcon" class="left-calendar-icon"><a-icon type="calendar" /></span>
         <a-date-picker
           :value="dateRange[0]"
@@ -25,6 +25,29 @@
           @change="handleDateChange"
         />
       </div>
+      <div v-if="type === 'date' && navArrows" class="picker-wrapper nav-arrows-wrapper">
+        <span
+          v-if="!disabled"
+          class="nav-arrow nav-arrow-left"
+          @mousedown.prevent.stop
+          @click.stop="handleShiftDay(-1)"
+        ><a-icon type="left" /></span>
+        <a-date-picker
+          :value="dateRange[0]"
+          :format="format"
+          :disabled="disabled"
+          :allowClear="allowClear"
+          :showTime="showTime"
+          :suffixIcon="null"
+          @change="handleDateChange"
+        />
+        <span
+          v-if="!disabled"
+          class="nav-arrow nav-arrow-right"
+          @mousedown.prevent.stop
+          @click.stop="handleShiftDay(1)"
+        ><a-icon type="right" /></span>
+      </div>
 
     </div>
   </div>
@@ -61,6 +84,10 @@ export default {
     format: {
       type: String,
       default: 'YYYY-MM-DD'
+    },
+    navArrows: {
+      type: Boolean,
+      default: false
     }
   },
   data () {
@@ -158,6 +185,8 @@ export default {
           }
           // 处理图标开关配置（默认关闭）
           this.showCalendarIcon = res && res.showCalendarIcon === true
+          // 处理左右箭头开关配置（默认关闭）
+          this.navArrows = !!(res && (res.navArrows === true || res.showNavArrows === true))
           // 处理defaultTime配置
           if (res.defaultTime !== undefined) {
             if (res.defaultTime === 'now') {
@@ -176,6 +205,14 @@ export default {
           this.convertValueToMoment(this.value)
         })
       }
+    },
+    handleShiftDay (delta) {
+      if (this.type !== 'date') return
+      const current = this.dateRange && this.dateRange[0] ? this.dateRange[0].clone() : moment()
+      const unit = this.showTime ? 'day' : 'day'
+      const next = current.add(delta, unit)
+      this.dateRange = [next]
+      this.$emit('change', next ? next.format(this.format) : '')
     }
   }
 }
@@ -199,6 +236,34 @@ export default {
   position: relative;
 }
 
+.nav-arrows-wrapper {
+  position: relative;
+}
+
+.nav-arrow {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  color: #848484;
+  cursor: pointer;
+  user-select: none;
+  z-index: 3;
+}
+.nav-arrow:hover {
+  color: #515151;
+}
+.nav-arrow-left {
+  left: 6px;
+}
+.nav-arrow-right {
+  right: 6px;
+}
+
 .x-time-select :deep(.ant-picker-range),
 .x-time-select :deep(.ant-picker) {
   width: 100%;
@@ -209,6 +274,9 @@ export default {
   box-sizing: border-box;
   opacity: 1;
 }
+.x-time-select.has-nav-arrows :deep(.ant-picker-suffix) {
+  display: none; /* 仅箭头模式隐藏后缀图标容器 */
+}
 .x-time-select :deep(.ant-calendar-picker) {
   width: 100%;
   display: block;
@@ -262,6 +330,11 @@ export default {
   text-align: center;
   color: #313131;
 }
+.x-time-select.has-nav-arrows :deep(.ant-calendar-picker-icon),
+.x-time-select.has-nav-arrows :deep(.ant-calendar-picker-clear),
+.x-time-select.has-nav-arrows :deep(.anticon-calendar) {
+  display: none; /* 仅箭头模式隐藏旧版图标节点 */
+}
 
 .x-time-select.xtime-yizhu-date {
   margin: 5px 11px auto 24px;
@@ -295,7 +368,11 @@ export default {
   text-align: left;
   padding-left: 28px;
 }
-
+/* 箭头模式下，让输入有左右内边距以避让箭头 */
+.x-time-select.has-nav-arrows :deep(.ant-picker-input > input) {
+  padding-left: 30px;
+  padding-right: 30px;
+}
 /* 分隔符与清除按钮占位优化，减少遮挡概率 */
 .x-time-select.xtime-yizhu-date :deep(.ant-picker-range .ant-picker-separator) {
   margin: 0 4px;