feat:自提点
This commit is contained in:
dzc committed
1 parent
44c38d71a8
commit
36ccf25974
4 files changed
+407
-198
No files matched your search
@@ -0,0 +1,251 @@
|
||||
<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>
|
||||
Reference in new issue
Block a user