vue2-client 1.15.84 → 1.15.86

package/src/base-client/components/common/XTimeline/XTimeline.vue

@@ -1,358 +1,358 @@
-<template>
-  <!-- 时间轴主容器 -->
-  <div class="x-timeline">
-    <!-- 时间轴导航栏 -->
-    <div class="x-timeline-nav">
-      <!-- 导航按钮：前一周、前一天 -->
-      <a-button type="link" @click="goToPrevWeek">
-        <a-icon type="double-left" />
-        {{ config?.prevWeekText || '前一周' }}
-      </a-button>
-      <a-button type="link" @click="goToPrevDay">
-        <a-icon type="left" />
-        {{ config?.prevDayText || '前一天' }}
-      </a-button>
-      <!-- 日期显示区域 -->
-      <div class="timeline-dates">
-        <div
-          v-for="(date, index) in displayDates"
-          :key="index"
-          class="date-item"
-          :class="{
-            &quot;ant-btn-primary&quot;: isCurrentDate(date),
-            &quot;date-weekend&quot;: isWeekend(date),
-            &quot;ant-btn-disabled&quot;: isDisabled(date)
-          }"
-          @click="selectDate(date)"
-        >
-          <div class="weekday">{{ getWeekDay(date) }}</div>
-          <div class="date">{{ formatDate(date) }}</div>
-        </div>
-      </div>
-      <!-- 导航按钮：后一天、后一周 -->
-      <a-button type="link" @click="goToNextDay">
-        {{ config?.nextDayText || '后一天' }}
-        <a-icon type="right" />
-      </a-button>
-      <a-button type="link" @click="goToNextWeek">
-        {{ config?.nextWeekText || '后一周' }}
-        <a-icon type="double-right" />
-      </a-button>
-    </div>
-  </div>
-</template>
-
-<script>
-import moment from 'moment'
-import { getConfigByName, runLogic } from '@vue2-client/services/api/common'
-
-// 设置 moment 为中文语言环境
-moment.locale('zh-cn')
-
-export default {
-  name: 'XTimeline',
-  components: {
-  },
-  props: {
-    // 当前选中日期，默认为空（不选中）
-    modelValue: {
-      type: String,
-      default: ''
-    },
-    // 配置参数名称，用于获取时间轴配置
-    queryParamsName: {
-      type: String,
-      default: ''
-    }
-  },
-
-  // 定义组件事件
-  emits: ['update:modelValue', 'change', 'prev-week', 'next-week', 'prev-day', 'next-day', 'init'],
-
-  data () {
-    return {
-      currentDate: this.modelValue, // 当前选中日期
-      baseDate: moment().format('YYYY-MM-DD'), // 基准日期，默认今天，用于计算显示范围
-      config: null,
-      disabledDates: [] // 禁用日期列表
-    }
-  },
-  computed: {
-    // 计算需要显示的日期范围，固定显示周一到周日
-    displayDates () {
-      const dates = []
-      // 计算当前日期所在周的周一
-      const currentDay = moment(this.baseDate)
-      const dayOfWeek = currentDay.day() || 7 // 获取星期几，将周日的0转换为7
-      const mondayOfWeek = currentDay.clone().subtract(dayOfWeek - 1, 'day') // 减去相应的天数得到周一
-
-      // 从周一开始，生成一周的日期
-      dates.push(mondayOfWeek.format('YYYY-MM-DD')) // 周一
-      for (let i = 1; i <= 6; i++) {
-        dates.push(mondayOfWeek.clone().add(i, 'day').format('YYYY-MM-DD'))
-      }
-
-      return dates
-    }
-  },
-
-  watch: {
-    // 监听外部传入的选中日期变化
-    modelValue: {
-      handler (newVal) {
-        this.currentDate = newVal
-        if (newVal) {
-          this.baseDate = newVal
-        }
-      },
-      immediate: true
-    },
-    // 监听配置参数名称变化
-    queryParamsName: {
-      handler (newValue) {
-        this.getData(newValue)
-      },
-      immediate: true
-    }
-  },
-
-  created () {
-    // 组件创建时获取配置
-    this.getData(this.queryParamsName)
-  },
-
-  methods: {
-    // 获取时间轴配置数据
-    async getData (data) {
-      getConfigByName(data, 'af-his', res => {
-        this.config = res
-        // 触发初始化事件，传递配置和默认日期
-        this.$emit('init', this.baseDate)
-        if (res.defaultValue) {
-          // 如果有默认值，则设置当前选中日期和基准日期
-          this.currentDate = res.defaultValue
-          this.baseDate = res.defaultValue
-          this.$emit('update:modelValue', res.defaultValue)
-        } else {
-          // 如果没有默认值，则设置今天日期为基准日期
-          this.modelValue = this.baseDate
-        }
-
-        // 执行配置中指定的业务逻辑
-        if (res.logicName) {
-           runLogic(res.logicName, res.parameter, 'af-his').then(result => {
-            if (result) {
-              this.handleLogicResult(result)
-            }
-           })
-        }
-       })
-    },
-
-    // 处理业务逻辑返回结果
-    handleLogicResult (result) {
-      if (result.disabledDates) {
-        this.disabledDates = result.disabledDates
-      }
-      if (result.currentDate) {
-        this.currentDate = result.currentDate
-        this.baseDate = result.currentDate
-        this.$emit('update:modelValue', result.currentDate)
-      }
-    },
-
-    // 格式化日期显示
-    formatDate (date) {
-      const format = this.config?.dateFormat || 'MM/DD'
-      return moment(date).format(format)
-    },
-
-    // 获取星期显示
-    getWeekDay (date) {
-      const format = this.config?.weekFormat || '周dd'
-      return moment(date).format(format)
-    },
-
-    // 判断是否为周末
-    isWeekend (date) {
-      if (!this.config?.highlightWeekend) return false
-      const day = moment(date).day()
-      return day === 0 || day === 6
-    },
-
-    // 判断日期是否禁用
-    isDisabled (date) {
-      if (this.config?.minDate && moment(date).isBefore(this.config.minDate)) {
-        return true
-      }
-      if (this.config?.maxDate && moment(date).isAfter(this.config.maxDate)) {
-        return true
-      }
-      return this.disabledDates.includes(date)
-    },
-
-    // 判断是否为当前选中日期
-    isCurrentDate (date) {
-      if (!this.currentDate) return false
-      return moment(date).format('YYYY-MM-DD') === moment(this.currentDate).format('YYYY-MM-DD')
-    },
-
-    // 选择日期
-    selectDate (date) {
-      if (this.isDisabled(date)) return
-      this.currentDate = date
-      this.$emit('update:modelValue', date)
-      this.$emit('change', date)
-    },
-
-    // 前一天
-    goToPrevDay () {
-      const newDate = moment(this.currentDate).subtract(1, 'day')
-      if (this.config?.minDate && newDate.isBefore(this.config.minDate)) {
-        return
-      }
-      // 更新基准日期
-      this.baseDate = newDate.format('YYYY-MM-DD')
-      // 同时选中新的日期
-      this.currentDate = this.baseDate
-      this.$emit('update:modelValue', this.currentDate)
-      // 触发前一天事件
-      this.$emit('prev-day', this.baseDate)
-      // 触发变更事件
-      this.$emit('change', this.currentDate)
-    },
-
-    // 后一天
-    goToNextDay () {
-      const newDate = moment(this.currentDate).add(1, 'day')
-      if (this.config?.maxDate && newDate.isAfter(this.config.maxDate)) {
-        return
-      }
-      // 更新基准日期
-      this.baseDate = newDate.format('YYYY-MM-DD')
-      // 同时选中新的日期
-      this.currentDate = this.baseDate
-      this.$emit('update:modelValue', this.currentDate)
-      // 触发后一天事件
-      this.$emit('next-day', this.baseDate)
-      // 触发变更事件
-      this.$emit('change', this.currentDate)
-    },
-
-    // 前一周
-    goToPrevWeek () {
-      // 计算当前日期所在周的周一
-      const currentDay = moment(this.baseDate)
-      const dayOfWeek = currentDay.day() || 7 // 获取星期几，将周日的0转换为7
-      const mondayOfWeek = currentDay.clone().subtract(dayOfWeek - 1, 'day') // 减去相应的天数得到周一
-
-      // 前一周的周一
-      const newDate = mondayOfWeek.subtract(7, 'day')
-
-      if (this.config?.minDate && newDate.isBefore(this.config.minDate)) {
-        return
-      }
-      this.baseDate = newDate.format('YYYY-MM-DD')
-      this.$emit('prev-week', this.baseDate)
-    },
-
-    // 后一周
-    goToNextWeek () {
-      // 计算当前日期所在周的周一
-      const currentDay = moment(this.baseDate)
-      const dayOfWeek = currentDay.day() || 7 // 获取星期几，将周日的0转换为7
-      const mondayOfWeek = currentDay.clone().subtract(dayOfWeek - 1, 'day') // 减去相应的天数得到周一
-      // 后一周的周一
-      const newDate = mondayOfWeek.add(7, 'day')
-      if (this.config?.maxDate && newDate.isAfter(this.config.maxDate)) {
-        return
-      }
-      this.baseDate = newDate.format('YYYY-MM-DD')
-      this.$emit('next-week', this.baseDate)
-    }
-  }
-}
-</script>
-
-<style scoped>
-.x-timeline {
-  width: 100%;
-  border: 1px solid #f0f0f0;
-  border-radius: 2px;
-}
-
-.x-timeline-nav {
-  display: flex;
-  align-items: center;
-  padding: 16px;
-  border-bottom: 1px solid #f0f0f0;
-  width: 100%;
-  justify-content: space-between;
-}
-
-.timeline-dates {
-  display: flex;
-  flex: 1;
-  justify-content: space-around;
-  align-items: center;
-  margin: 0 16px;
-}
-
-.date-item {
-  padding: 8px 12px;
-  text-align: center;
-  cursor: pointer;
-  border-radius: 2px;
-  flex: 1;
-  margin: 0 8px;
-  transition: all 0.3s;
-}
-
-/* 非选中日期的悬浮效果 */
-.date-item:hover:not(.ant-btn-disabled):not(.ant-btn-primary) {
-  background: #e6f7ff;
-  color: #1890ff;
-}
-
-/* 选中日期不需要悬浮效果 */
-.date-item.ant-btn-primary:hover {
-  background: #1890ff;
-}
-
-.date-item.ant-btn-primary {
-  background: #1890ff;
-  color: #fff;
-}
-
-.date-item.ant-btn-primary .weekday,
-.date-item.ant-btn-primary .date {
-  color: #fff;
-}
-
-/* 非选中日期悬浮时的字体颜色 */
-.date-item:hover:not(.ant-btn-disabled):not(.ant-btn-primary) .weekday,
-.date-item:hover:not(.ant-btn-disabled):not(.ant-btn-primary) .date {
-  color: #1890ff;
-}
-
-.date-item.date-weekend:not(.ant-btn-disabled):not(.ant-btn-primary) {
-  color: #ff4d4f;
-}
-
-.date-item.ant-btn-disabled {
-  color: rgba(0, 0, 0, 0.25);
-  background: #f5f5f5;
-  cursor: not-allowed;
-}
-
-.weekday {
-  font-size: 12px;
-  margin-bottom: 8px;
-  color: rgba(0, 0, 0, 0.45);
-}
-
-.date {
-  font-size: 14px;
-  color: rgba(0, 0, 0, 0.85);
-}
-</style>
+<template>
+  <!-- 时间轴主容器 -->
+  <div class="x-timeline">
+    <!-- 时间轴导航栏 -->
+    <div class="x-timeline-nav">
+      <!-- 导航按钮：前一周、前一天 -->
+      <a-button type="link" @click="goToPrevWeek">
+        <a-icon type="double-left" />
+        {{ config?.prevWeekText || '前一周' }}
+      </a-button>
+      <a-button type="link" @click="goToPrevDay">
+        <a-icon type="left" />
+        {{ config?.prevDayText || '前一天' }}
+      </a-button>
+      <!-- 日期显示区域 -->
+      <div class="timeline-dates">
+        <div
+          v-for="(date, index) in displayDates"
+          :key="index"
+          class="date-item"
+          :class="{
+            &quot;ant-btn-primary&quot;: isCurrentDate(date),
+            &quot;date-weekend&quot;: isWeekend(date),
+            &quot;ant-btn-disabled&quot;: isDisabled(date)
+          }"
+          @click="selectDate(date)"
+        >
+          <div class="weekday">{{ getWeekDay(date) }}</div>
+          <div class="date">{{ formatDate(date) }}</div>
+        </div>
+      </div>
+      <!-- 导航按钮：后一天、后一周 -->
+      <a-button type="link" @click="goToNextDay">
+        {{ config?.nextDayText || '后一天' }}
+        <a-icon type="right" />
+      </a-button>
+      <a-button type="link" @click="goToNextWeek">
+        {{ config?.nextWeekText || '后一周' }}
+        <a-icon type="double-right" />
+      </a-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import moment from 'moment'
+import { getConfigByName, runLogic } from '@vue2-client/services/api/common'
+
+// 设置 moment 为中文语言环境
+moment.locale('zh-cn')
+
+export default {
+  name: 'XTimeline',
+  components: {
+  },
+  props: {
+    // 当前选中日期，默认为空（不选中）
+    modelValue: {
+      type: String,
+      default: ''
+    },
+    // 配置参数名称，用于获取时间轴配置
+    queryParamsName: {
+      type: String,
+      default: ''
+    }
+  },
+
+  // 定义组件事件
+  emits: ['update:modelValue', 'change', 'prev-week', 'next-week', 'prev-day', 'next-day', 'init'],
+
+  data () {
+    return {
+      currentDate: this.modelValue, // 当前选中日期
+      baseDate: moment().format('YYYY-MM-DD'), // 基准日期，默认今天，用于计算显示范围
+      config: null,
+      disabledDates: [] // 禁用日期列表
+    }
+  },
+  computed: {
+    // 计算需要显示的日期范围，固定显示周一到周日
+    displayDates () {
+      const dates = []
+      // 计算当前日期所在周的周一
+      const currentDay = moment(this.baseDate)
+      const dayOfWeek = currentDay.day() || 7 // 获取星期几，将周日的0转换为7
+      const mondayOfWeek = currentDay.clone().subtract(dayOfWeek - 1, 'day') // 减去相应的天数得到周一
+
+      // 从周一开始，生成一周的日期
+      dates.push(mondayOfWeek.format('YYYY-MM-DD')) // 周一
+      for (let i = 1; i <= 6; i++) {
+        dates.push(mondayOfWeek.clone().add(i, 'day').format('YYYY-MM-DD'))
+      }
+
+      return dates
+    }
+  },
+
+  watch: {
+    // 监听外部传入的选中日期变化
+    modelValue: {
+      handler (newVal) {
+        this.currentDate = newVal
+        if (newVal) {
+          this.baseDate = newVal
+        }
+      },
+      immediate: true
+    },
+    // 监听配置参数名称变化
+    queryParamsName: {
+      handler (newValue) {
+        this.getData(newValue)
+      },
+      immediate: true
+    }
+  },
+
+  created () {
+    // 组件创建时获取配置
+    this.getData(this.queryParamsName)
+  },
+
+  methods: {
+    // 获取时间轴配置数据
+    async getData (data) {
+      getConfigByName(data, 'af-his', res => {
+        this.config = res
+        // 触发初始化事件，传递配置和默认日期
+        this.$emit('init', this.baseDate)
+        if (res.defaultValue) {
+          // 如果有默认值，则设置当前选中日期和基准日期
+          this.currentDate = res.defaultValue
+          this.baseDate = res.defaultValue
+          this.$emit('update:modelValue', res.defaultValue)
+        } else {
+          // 如果没有默认值，则设置今天日期为基准日期
+          this.modelValue = this.baseDate
+        }
+
+        // 执行配置中指定的业务逻辑
+        if (res.logicName) {
+           runLogic(res.logicName, res.parameter, 'af-his').then(result => {
+            if (result) {
+              this.handleLogicResult(result)
+            }
+           })
+        }
+       })
+    },
+
+    // 处理业务逻辑返回结果
+    handleLogicResult (result) {
+      if (result.disabledDates) {
+        this.disabledDates = result.disabledDates
+      }
+      if (result.currentDate) {
+        this.currentDate = result.currentDate
+        this.baseDate = result.currentDate
+        this.$emit('update:modelValue', result.currentDate)
+      }
+    },
+
+    // 格式化日期显示
+    formatDate (date) {
+      const format = this.config?.dateFormat || 'MM/DD'
+      return moment(date).format(format)
+    },
+
+    // 获取星期显示
+    getWeekDay (date) {
+      const format = this.config?.weekFormat || '周dd'
+      return moment(date).format(format)
+    },
+
+    // 判断是否为周末
+    isWeekend (date) {
+      if (!this.config?.highlightWeekend) return false
+      const day = moment(date).day()
+      return day === 0 || day === 6
+    },
+
+    // 判断日期是否禁用
+    isDisabled (date) {
+      if (this.config?.minDate && moment(date).isBefore(this.config.minDate)) {
+        return true
+      }
+      if (this.config?.maxDate && moment(date).isAfter(this.config.maxDate)) {
+        return true
+      }
+      return this.disabledDates.includes(date)
+    },
+
+    // 判断是否为当前选中日期
+    isCurrentDate (date) {
+      if (!this.currentDate) return false
+      return moment(date).format('YYYY-MM-DD') === moment(this.currentDate).format('YYYY-MM-DD')
+    },
+
+    // 选择日期
+    selectDate (date) {
+      if (this.isDisabled(date)) return
+      this.currentDate = date
+      this.$emit('update:modelValue', date)
+      this.$emit('change', date)
+    },
+
+    // 前一天
+    goToPrevDay () {
+      const newDate = moment(this.currentDate).subtract(1, 'day')
+      if (this.config?.minDate && newDate.isBefore(this.config.minDate)) {
+        return
+      }
+      // 更新基准日期
+      this.baseDate = newDate.format('YYYY-MM-DD')
+      // 同时选中新的日期
+      this.currentDate = this.baseDate
+      this.$emit('update:modelValue', this.currentDate)
+      // 触发前一天事件
+      this.$emit('prev-day', this.baseDate)
+      // 触发变更事件
+      this.$emit('change', this.currentDate)
+    },
+
+    // 后一天
+    goToNextDay () {
+      const newDate = moment(this.currentDate).add(1, 'day')
+      if (this.config?.maxDate && newDate.isAfter(this.config.maxDate)) {
+        return
+      }
+      // 更新基准日期
+      this.baseDate = newDate.format('YYYY-MM-DD')
+      // 同时选中新的日期
+      this.currentDate = this.baseDate
+      this.$emit('update:modelValue', this.currentDate)
+      // 触发后一天事件
+      this.$emit('next-day', this.baseDate)
+      // 触发变更事件
+      this.$emit('change', this.currentDate)
+    },
+
+    // 前一周
+    goToPrevWeek () {
+      // 计算当前日期所在周的周一
+      const currentDay = moment(this.baseDate)
+      const dayOfWeek = currentDay.day() || 7 // 获取星期几，将周日的0转换为7
+      const mondayOfWeek = currentDay.clone().subtract(dayOfWeek - 1, 'day') // 减去相应的天数得到周一
+
+      // 前一周的周一
+      const newDate = mondayOfWeek.subtract(7, 'day')
+
+      if (this.config?.minDate && newDate.isBefore(this.config.minDate)) {
+        return
+      }
+      this.baseDate = newDate.format('YYYY-MM-DD')
+      this.$emit('prev-week', this.baseDate)
+    },
+
+    // 后一周
+    goToNextWeek () {
+      // 计算当前日期所在周的周一
+      const currentDay = moment(this.baseDate)
+      const dayOfWeek = currentDay.day() || 7 // 获取星期几，将周日的0转换为7
+      const mondayOfWeek = currentDay.clone().subtract(dayOfWeek - 1, 'day') // 减去相应的天数得到周一
+      // 后一周的周一
+      const newDate = mondayOfWeek.add(7, 'day')
+      if (this.config?.maxDate && newDate.isAfter(this.config.maxDate)) {
+        return
+      }
+      this.baseDate = newDate.format('YYYY-MM-DD')
+      this.$emit('next-week', this.baseDate)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.x-timeline {
+  width: 100%;
+  border: 1px solid #f0f0f0;
+  border-radius: 2px;
+}
+
+.x-timeline-nav {
+  display: flex;
+  align-items: center;
+  padding: 16px;
+  border-bottom: 1px solid #f0f0f0;
+  width: 100%;
+  justify-content: space-between;
+}
+
+.timeline-dates {
+  display: flex;
+  flex: 1;
+  justify-content: space-around;
+  align-items: center;
+  margin: 0 16px;
+}
+
+.date-item {
+  padding: 8px 12px;
+  text-align: center;
+  cursor: pointer;
+  border-radius: 2px;
+  flex: 1;
+  margin: 0 8px;
+  transition: all 0.3s;
+}
+
+/* 非选中日期的悬浮效果 */
+.date-item:hover:not(.ant-btn-disabled):not(.ant-btn-primary) {
+  background: #e6f7ff;
+  color: #1890ff;
+}
+
+/* 选中日期不需要悬浮效果 */
+.date-item.ant-btn-primary:hover {
+  background: #1890ff;
+}
+
+.date-item.ant-btn-primary {
+  background: #1890ff;
+  color: #fff;
+}
+
+.date-item.ant-btn-primary .weekday,
+.date-item.ant-btn-primary .date {
+  color: #fff;
+}
+
+/* 非选中日期悬浮时的字体颜色 */
+.date-item:hover:not(.ant-btn-disabled):not(.ant-btn-primary) .weekday,
+.date-item:hover:not(.ant-btn-disabled):not(.ant-btn-primary) .date {
+  color: #1890ff;
+}
+
+.date-item.date-weekend:not(.ant-btn-disabled):not(.ant-btn-primary) {
+  color: #ff4d4f;
+}
+
+.date-item.ant-btn-disabled {
+  color: rgba(0, 0, 0, 0.25);
+  background: #f5f5f5;
+  cursor: not-allowed;
+}
+
+.weekday {
+  font-size: 12px;
+  margin-bottom: 8px;
+  color: rgba(0, 0, 0, 0.45);
+}
+
+.date {
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.85);
+}
+</style>