refactor(dealer): 重构日期处理逻辑并提取到工具库- 将日期处理相关函数提取到单独的工具库文件中- 重命名相关变量和函数以提高可读性
-优化日期格式化和解析逻辑- 更新组件中日期相关代码以使用新的工具函数
This commit is contained in:
@@ -11,6 +11,11 @@ import {
|
|||||||
addShopDealerApply, getShopDealerApply,
|
addShopDealerApply, getShopDealerApply,
|
||||||
updateShopDealerApply
|
updateShopDealerApply
|
||||||
} from "@/api/shop/shopDealerApply";
|
} from "@/api/shop/shopDealerApply";
|
||||||
|
import {
|
||||||
|
formatDateForDatabase,
|
||||||
|
extractDateForCalendar,
|
||||||
|
formatDateForDisplay
|
||||||
|
} from "@/utils/dateUtils";
|
||||||
|
|
||||||
const AddShopDealerApply = () => {
|
const AddShopDealerApply = () => {
|
||||||
const {user} = useUser()
|
const {user} = useUser()
|
||||||
@@ -23,9 +28,9 @@ const AddShopDealerApply = () => {
|
|||||||
|
|
||||||
// 日期选择器状态
|
// 日期选择器状态
|
||||||
const [showApplyTimePicker, setShowApplyTimePicker] = useState<boolean>(false)
|
const [showApplyTimePicker, setShowApplyTimePicker] = useState<boolean>(false)
|
||||||
const [showContractDatePicker, setShowContractDatePicker] = useState<boolean>(false)
|
const [showContractTimePicker, setShowContractTimePicker] = useState<boolean>(false)
|
||||||
const [applyTime, setApplyTime] = useState<string>('')
|
const [applyTime, setApplyTime] = useState<string>('')
|
||||||
const [contractDate, setContractDate] = useState<string>('')
|
const [contractTime, setContractTime] = useState<string>('')
|
||||||
|
|
||||||
// 获取审核状态文字
|
// 获取审核状态文字
|
||||||
const getApplyStatusText = (status?: number) => {
|
const getApplyStatusText = (status?: number) => {
|
||||||
@@ -41,61 +46,10 @@ const AddShopDealerApply = () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 格式化日期为数据库格式 YYYY-MM-DD HH:mm:ss
|
|
||||||
const formatDateForDatabase = (dateStr: string): string => {
|
|
||||||
if (!dateStr) return ''
|
|
||||||
|
|
||||||
let parts: string[] = []
|
|
||||||
|
|
||||||
// 处理不同的日期格式
|
|
||||||
if (dateStr.includes('/')) {
|
|
||||||
// 处理 YYYY/MM/DD 或 YYYY/M/D 格式
|
|
||||||
parts = dateStr.split('/')
|
|
||||||
} else if (dateStr.includes('-')) {
|
|
||||||
// 处理 YYYY-MM-DD 或 YYYY-M-D 格式
|
|
||||||
parts = dateStr.split('-')
|
|
||||||
} else {
|
|
||||||
return dateStr
|
|
||||||
}
|
|
||||||
|
|
||||||
if (parts.length !== 3) return dateStr
|
|
||||||
|
|
||||||
const year = parts[0]
|
|
||||||
const month = parts[1].padStart(2, '0')
|
|
||||||
const day = parts[2].padStart(2, '0')
|
|
||||||
|
|
||||||
return `${year}-${month}-${day} 00:00:00`
|
|
||||||
}
|
|
||||||
|
|
||||||
// 从数据库格式提取日期部分用于显示和Calendar组件
|
|
||||||
const extractDateFromDatabase = (dateTimeStr: string): string => {
|
|
||||||
if (!dateTimeStr) return ''
|
|
||||||
|
|
||||||
// 处理不同的输入格式
|
|
||||||
let dateStr = ''
|
|
||||||
if (dateTimeStr.includes(' ')) {
|
|
||||||
// 从 "YYYY-MM-DD HH:mm:ss" 格式中提取日期部分
|
|
||||||
dateStr = dateTimeStr.split(' ')[0]
|
|
||||||
} else {
|
|
||||||
dateStr = dateTimeStr
|
|
||||||
}
|
|
||||||
|
|
||||||
// 转换为Calendar组件需要的格式 (YYYY-M-D)
|
|
||||||
if (dateStr.includes('-')) {
|
|
||||||
const parts = dateStr.split('-')
|
|
||||||
if (parts.length === 3) {
|
|
||||||
const year = parts[0]
|
|
||||||
const month = parseInt(parts[1]).toString() // 去掉前导0
|
|
||||||
const day = parseInt(parts[2]).toString() // 去掉前导0
|
|
||||||
return `${year}-${month}-${day}`
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return dateStr
|
|
||||||
}
|
|
||||||
|
|
||||||
// 处理签约时间选择
|
// 处理签约时间选择
|
||||||
const handleApplyTimeConfirm = (param: string[]) => {
|
const handleApplyTimeConfirm = (param: string) => {
|
||||||
const selectedDate = param[3] // 选中的日期字符串 (YYYY-M-D)
|
const selectedDate = param[3] // 选中的日期字符串 (YYYY-M-D)
|
||||||
const formattedDate = formatDateForDatabase(selectedDate) // 转换为数据库格式
|
const formattedDate = formatDateForDatabase(selectedDate) // 转换为数据库格式
|
||||||
setApplyTime(selectedDate) // 保存原始格式用于显示
|
setApplyTime(selectedDate) // 保存原始格式用于显示
|
||||||
@@ -110,16 +64,16 @@ const AddShopDealerApply = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 处理合同日期选择
|
// 处理合同日期选择
|
||||||
const handleContractDateConfirm = (param: string[]) => {
|
const handleContractTimeConfirm = (param: string) => {
|
||||||
const selectedDate = param[3] // 选中的日期字符串 (YYYY-M-D)
|
const selectedDate = param[3] // 选中的日期字符串 (YYYY-M-D)
|
||||||
const formattedDate = formatDateForDatabase(selectedDate) // 转换为数据库格式
|
const formattedDate = formatDateForDatabase(selectedDate) // 转换为数据库格式
|
||||||
setContractDate(selectedDate) // 保存原始格式用于显示
|
setContractTime(selectedDate) // 保存原始格式用于显示
|
||||||
setShowContractDatePicker(false)
|
setShowContractTimePicker(false)
|
||||||
|
|
||||||
// 更新表单数据(使用数据库格式)
|
// 更新表单数据(使用数据库格式)
|
||||||
if (formRef.current) {
|
if (formRef.current) {
|
||||||
formRef.current.setFieldsValue({
|
formRef.current.setFieldsValue({
|
||||||
contractDate: formattedDate
|
contractTime: formattedDate
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -136,12 +90,12 @@ const AddShopDealerApply = () => {
|
|||||||
setIsEditMode(true);
|
setIsEditMode(true);
|
||||||
setExistingApply(dealerApply)
|
setExistingApply(dealerApply)
|
||||||
|
|
||||||
// 初始化日期数据(从数据库格式转换为显示格式)
|
// 初始化日期数据(从数据库格式转换为Calendar组件格式)
|
||||||
if (dealerApply.applyTime) {
|
if (dealerApply.applyTime) {
|
||||||
setApplyTime(extractDateFromDatabase(dealerApply.applyTime))
|
setApplyTime(extractDateForCalendar(dealerApply.applyTime))
|
||||||
}
|
}
|
||||||
if (dealerApply.contractTime) {
|
if (dealerApply.contractTime) {
|
||||||
setContractDate(extractDateFromDatabase(dealerApply.contractTime))
|
setContractTime(extractDateForCalendar(dealerApply.contractTime))
|
||||||
}
|
}
|
||||||
|
|
||||||
Taro.setNavigationBarTitle({title: '签约'})
|
Taro.setNavigationBarTitle({title: '签约'})
|
||||||
@@ -167,7 +121,7 @@ const AddShopDealerApply = () => {
|
|||||||
auditTime: undefined,
|
auditTime: undefined,
|
||||||
// 确保日期数据正确提交(使用数据库格式)
|
// 确保日期数据正确提交(使用数据库格式)
|
||||||
applyTime: values.applyTime || (applyTime ? formatDateForDatabase(applyTime) : ''),
|
applyTime: values.applyTime || (applyTime ? formatDateForDatabase(applyTime) : ''),
|
||||||
contractDate: values.contractDate || (contractDate ? formatDateForDatabase(contractDate) : '')
|
contractTime: values.contractTime || (contractTime ? formatDateForDatabase(contractTime) : '')
|
||||||
};
|
};
|
||||||
|
|
||||||
// 如果是编辑模式,添加现有申请的id
|
// 如果是编辑模式,添加现有申请的id
|
||||||
@@ -262,15 +216,15 @@ const AddShopDealerApply = () => {
|
|||||||
<View className="flex items-center">
|
<View className="flex items-center">
|
||||||
<CalendarIcon size={16} color="#999" className="mr-2" />
|
<CalendarIcon size={16} color="#999" className="mr-2" />
|
||||||
<Text style={{ color: applyTime ? '#333' : '#999' }}>
|
<Text style={{ color: applyTime ? '#333' : '#999' }}>
|
||||||
{applyTime || '请选择签约时间'}
|
{applyTime ? formatDateForDisplay(applyTime) : '请选择签约时间'}
|
||||||
</Text>
|
</Text>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
<Form.Item name="contractDate" label="合同日期" initialValue={FormData?.contractTime} required>
|
<Form.Item name="contractTime" label="合同日期" initialValue={FormData?.contractTime} required>
|
||||||
<View
|
<View
|
||||||
className="flex items-center justify-between py-2"
|
className="flex items-center justify-between py-2"
|
||||||
onClick={() => !isEditMode && setShowContractDatePicker(true)}
|
onClick={() => !isEditMode && setShowContractTimePicker(true)}
|
||||||
style={{
|
style={{
|
||||||
cursor: isEditMode ? 'not-allowed' : 'pointer',
|
cursor: isEditMode ? 'not-allowed' : 'pointer',
|
||||||
opacity: isEditMode ? 0.6 : 1
|
opacity: isEditMode ? 0.6 : 1
|
||||||
@@ -278,8 +232,8 @@ const AddShopDealerApply = () => {
|
|||||||
>
|
>
|
||||||
<View className="flex items-center">
|
<View className="flex items-center">
|
||||||
<CalendarIcon size={16} color="#999" className="mr-2" />
|
<CalendarIcon size={16} color="#999" className="mr-2" />
|
||||||
<Text style={{ color: contractDate ? '#333' : '#999' }}>
|
<Text style={{ color: contractTime ? '#333' : '#999' }}>
|
||||||
{contractDate || '请选择合同生效起止时间'}
|
{contractTime ? formatDateForDisplay(contractTime) : '请选择合同生效起止时间'}
|
||||||
</Text>
|
</Text>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
@@ -300,10 +254,10 @@ const AddShopDealerApply = () => {
|
|||||||
|
|
||||||
{/* 合同日期选择器 */}
|
{/* 合同日期选择器 */}
|
||||||
<Calendar
|
<Calendar
|
||||||
visible={showContractDatePicker}
|
visible={showContractTimePicker}
|
||||||
defaultValue={contractDate}
|
defaultValue={contractTime}
|
||||||
onClose={() => setShowContractDatePicker(false)}
|
onClose={() => setShowContractTimePicker(false)}
|
||||||
onConfirm={handleContractDateConfirm}
|
onConfirm={handleContractTimeConfirm}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{/* 审核状态显示(仅在编辑模式下显示) */}
|
{/* 审核状态显示(仅在编辑模式下显示) */}
|
||||||
|
|||||||
126
src/utils/dateUtils.ts
Normal file
126
src/utils/dateUtils.ts
Normal file
@@ -0,0 +1,126 @@
|
|||||||
|
/**
|
||||||
|
* 日期格式化工具函数
|
||||||
|
* 用于处理各种日期格式转换
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 格式化日期为数据库格式 YYYY-MM-DD HH:mm:ss
|
||||||
|
* @param dateStr 输入的日期字符串,支持多种格式
|
||||||
|
* @returns 数据库格式的日期字符串
|
||||||
|
*/
|
||||||
|
export const formatDateForDatabase = (dateStr: string): string => {
|
||||||
|
if (!dateStr) return ''
|
||||||
|
|
||||||
|
let parts: string[] = []
|
||||||
|
|
||||||
|
// 处理不同的日期格式
|
||||||
|
if (dateStr.includes('/')) {
|
||||||
|
// 处理 YYYY/MM/DD 或 YYYY/M/D 格式
|
||||||
|
parts = dateStr.split('/')
|
||||||
|
} else if (dateStr.includes('-')) {
|
||||||
|
// 处理 YYYY-MM-DD 或 YYYY-M-D 格式
|
||||||
|
parts = dateStr.split('-')
|
||||||
|
} else {
|
||||||
|
return dateStr
|
||||||
|
}
|
||||||
|
|
||||||
|
if (parts.length !== 3) return dateStr
|
||||||
|
|
||||||
|
const year = parts[0]
|
||||||
|
const month = parts[1].padStart(2, '0')
|
||||||
|
const day = parts[2].padStart(2, '0')
|
||||||
|
|
||||||
|
return `${year}-${month}-${day} 00:00:00`
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 从数据库格式提取日期部分用于Calendar组件显示
|
||||||
|
* @param dateTimeStr 数据库格式的日期时间字符串
|
||||||
|
* @returns Calendar组件需要的格式 (YYYY-M-D)
|
||||||
|
*/
|
||||||
|
export const extractDateForCalendar = (dateTimeStr: string): string => {
|
||||||
|
if (!dateTimeStr) return ''
|
||||||
|
|
||||||
|
// 处理不同的输入格式
|
||||||
|
let dateStr = ''
|
||||||
|
if (dateTimeStr.includes(' ')) {
|
||||||
|
// 从 "YYYY-MM-DD HH:mm:ss" 格式中提取日期部分
|
||||||
|
dateStr = dateTimeStr.split(' ')[0]
|
||||||
|
} else {
|
||||||
|
dateStr = dateTimeStr
|
||||||
|
}
|
||||||
|
|
||||||
|
// 转换为Calendar组件需要的格式 (YYYY-M-D)
|
||||||
|
if (dateStr.includes('-')) {
|
||||||
|
const parts = dateStr.split('-')
|
||||||
|
if (parts.length === 3) {
|
||||||
|
const year = parts[0]
|
||||||
|
const month = parseInt(parts[1]).toString() // 去掉前导0
|
||||||
|
const day = parseInt(parts[2]).toString() // 去掉前导0
|
||||||
|
return `${year}-${month}-${day}`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return dateStr
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 格式化日期为用户友好的显示格式 YYYY-MM-DD
|
||||||
|
* @param dateStr 输入的日期字符串
|
||||||
|
* @returns 用户友好的日期格式
|
||||||
|
*/
|
||||||
|
export const formatDateForDisplay = (dateStr: string): string => {
|
||||||
|
if (!dateStr) return ''
|
||||||
|
|
||||||
|
// 如果是数据库格式,先提取日期部分
|
||||||
|
let dateOnly = dateStr
|
||||||
|
if (dateStr.includes(' ')) {
|
||||||
|
dateOnly = dateStr.split(' ')[0]
|
||||||
|
}
|
||||||
|
|
||||||
|
// 如果已经是标准格式,直接返回
|
||||||
|
if (/^\d{4}-\d{2}-\d{2}$/.test(dateOnly)) {
|
||||||
|
return dateOnly
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理其他格式
|
||||||
|
let parts: string[] = []
|
||||||
|
if (dateOnly.includes('/')) {
|
||||||
|
parts = dateOnly.split('/')
|
||||||
|
} else if (dateOnly.includes('-')) {
|
||||||
|
parts = dateOnly.split('-')
|
||||||
|
} else {
|
||||||
|
return dateStr
|
||||||
|
}
|
||||||
|
|
||||||
|
if (parts.length !== 3) return dateStr
|
||||||
|
|
||||||
|
const year = parts[0]
|
||||||
|
const month = parts[1].padStart(2, '0')
|
||||||
|
const day = parts[2].padStart(2, '0')
|
||||||
|
|
||||||
|
return `${year}-${month}-${day}`
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取当前日期的字符串格式
|
||||||
|
* @param format 'database' | 'display' | 'calendar'
|
||||||
|
* @returns 格式化的当前日期
|
||||||
|
*/
|
||||||
|
export const getCurrentDate = (format: 'database' | 'display' | 'calendar' = 'display'): string => {
|
||||||
|
const now = new Date()
|
||||||
|
const year = now.getFullYear()
|
||||||
|
const month = now.getMonth() + 1
|
||||||
|
const day = now.getDate()
|
||||||
|
|
||||||
|
switch (format) {
|
||||||
|
case 'database':
|
||||||
|
return `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')} 00:00:00`
|
||||||
|
case 'display':
|
||||||
|
return `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`
|
||||||
|
case 'calendar':
|
||||||
|
return `${year}-${month}-${day}`
|
||||||
|
default:
|
||||||
|
return `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user