pj_admin_cloud/src/components/BusinessHours/index.vue

<template>
  <div class="business-hours-container">
    <div class="business-hours-header">
      <span class="title">营业时间设置</span>
      <el-button type="primary" size="small" @click="addBusinessHour" :icon="Plus">
        添加时间段
      </el-button>
    </div>

    <div class="business-hours-list">
      <div v-for="(item, index) in businessHours" :key="item.id" class="business-hour-item">
        <div class="item-header">
          <span class="item-index">{{ index + 1 }}</span>
          <el-button type="danger" size="small" :icon="Delete" circle @click="removeBusinessHour(index)"
            :disabled="businessHours.length <= 1" />
        </div>

        <div class="item-content">
          <el-row :gutter="16">
            <el-col :span="24" class="mb16">
              <el-form-item :label="`时间段${index + 1}标题`" :prop="`businessHours.${index}.title`">
                <el-input v-model="item.title" placeholder="请输入时间段标题(如:工作日、周末、上午、下午等)" @input="handleChange" />
              </el-form-item>
            </el-col>

            <el-col :span="12" class="mb16">
              <el-form-item :label="`开始时间`" :prop="`businessHours.${index}.startTime`">
                <el-time-picker v-model="item.startTime" placeholder="选择开始时间" format="HH:mm" value-format="HH:mm"
                  @change="handleChange" />
              </el-form-item>
            </el-col>

            <el-col :span="12" class="mb16">
              <el-form-item :label="`结束时间`" :prop="`businessHours.${index}.endTime`">
                <el-time-picker v-model="item.endTime" placeholder="选择结束时间" format="HH:mm" value-format="HH:mm"
                  @change="handleChange" />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>

    <div v-if="businessHours.length === 0" class="empty-state">
      <el-empty description="暂无营业时间，请点击上方按钮添加" />
    </div>
  </div>
</template>

<script setup lang="ts" name="BusinessHours">
import { Plus, Delete } from '@element-plus/icons-vue'

// 定义接口
interface BusinessHour {
  id: string
  title: string
  startTime: string
  endTime: string
}

// 定义props
interface Props {
  modelValue?: BusinessHour[]
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: () => []
})

// 定义emits
const emit = defineEmits<{
  'update:modelValue': [value: BusinessHour[]]
  'change': [value: BusinessHour[]]
}>()

// 响应式数据
const businessHours = ref<BusinessHour[]>([])

// 生成唯一ID
const generateId = () => {
  return Date.now().toString(36) + Math.random().toString(36).substr(2)
}

// 创建默认营业时间项
const createDefaultBusinessHour = (): BusinessHour => ({
  id: generateId(),
  title: '',
  startTime: '09:00',
  endTime: '18:00'
})

// 初始化数据
const initData = () => {
  if (props.modelValue && props.modelValue.length > 0) {
    businessHours.value = props.modelValue.map(item => ({
      ...item,
      id: item.id || generateId()
    }))
  } else {
    businessHours.value = [createDefaultBusinessHour()]
  }
}

// 添加营业时间
const addBusinessHour = () => {
  businessHours.value.push(createDefaultBusinessHour())
  handleChange()
}

// 删除营业时间
const removeBusinessHour = (index: number) => {
  if (businessHours.value.length > 1) {
    businessHours.value.splice(index, 1)
    handleChange()
  }
}

// 时间转换为分钟
const timeToMinutes = (time: string): number => {
  const [hours, minutes] = time.split(':').map(Number)
  return hours * 60 + minutes
}

// 处理数据变化
const handleChange = () => {
  const validBusinessHours = businessHours.value.filter(item =>
    item.startTime && item.endTime
  )
  emit('update:modelValue', [...businessHours.value])
  emit('change', validBusinessHours)
}

// 监听props变化
watch(() => props.modelValue, (newValue) => {
  if (JSON.stringify(newValue) !== JSON.stringify(businessHours.value)) {
    initData()
    handleChange()
  }
}, { deep: true })

// 组件挂载时初始化
onMounted(() => {
  initData()
  handleChange()
})

// 暴露验证方法
const validate = (): Promise<boolean> => {
  return new Promise((resolve) => {
    let isValid = true

    for (let i = 0; i < businessHours.value.length; i++) {
      const item = businessHours.value[i]

      if (!item.title || !item.startTime || !item.endTime) {
        isValid = false
        break
      }

      const startMinutes = timeToMinutes(item.startTime)
      const endMinutes = timeToMinutes(item.endTime)

      if (endMinutes <= startMinutes) {
        isValid = false
        break
      }
    }

    resolve(isValid)
  })
}

defineExpose({
  validate
})
</script>

<style scoped lang="scss">
.business-hours-container {
  .business-hours-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;

    .title {
      font-size: 14px;
      font-weight: 500;
      color: #303133;
    }
  }

  .business-hours-list {
    .business-hour-item {
      border: 1px solid #e4e7ed;
      border-radius: 6px;
      padding: 16px;
      margin-bottom: 16px;
      background-color: #fafafa;

      &:last-child {
        margin-bottom: 0;
      }

      .item-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;

        .item-index {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 24px;
          height: 24px;
          background-color: #409eff;
          color: white;
          border-radius: 50%;
          font-size: 12px;
          font-weight: 500;
        }
      }

      .item-content {
        .mb16 {
          margin-bottom: 16px;

          &:last-child {
            margin-bottom: 0;
          }
        }
      }
    }
  }

  .empty-state {
    text-align: center;
    padding: 40px 0;
  }
}

:deep(.el-form-item) {
  margin-bottom: 0;
}

:deep(.el-form-item__label) {
  font-size: 13px;
  color: #606266;
}
</style>