|
@@ -1,9 +1,78 @@
|
|
|
-import React from 'react'
|
|
|
|
|
-import { View, Text, ScrollView } from '@tarojs/components'
|
|
|
|
|
-import { YongrenTabBarLayout } from '@d8d/yongren-shared-ui/components/YongrenTabBarLayout'
|
|
|
|
|
|
|
+import React, { useState } from 'react'
|
|
|
|
|
+import { View, Text, ScrollView, Button, Input, Textarea } from '@tarojs/components'
|
|
|
import { Navbar } from '@d8d/mini-shared-ui-components/components/navbar'
|
|
import { Navbar } from '@d8d/mini-shared-ui-components/components/navbar'
|
|
|
|
|
|
|
|
|
|
+type OrderStatus = 'draft' | 'confirmed' | 'in_progress' | 'completed' | 'cancelled'
|
|
|
|
|
+
|
|
|
const OrderDetail: React.FC = () => {
|
|
const OrderDetail: React.FC = () => {
|
|
|
|
|
+ const [orderStatus, setOrderStatus] = useState<OrderStatus>('in_progress')
|
|
|
|
|
+ const [note, setNote] = useState('')
|
|
|
|
|
+
|
|
|
|
|
+ // 模拟订单数据
|
|
|
|
|
+ const order = {
|
|
|
|
|
+ id: 1,
|
|
|
|
|
+ orderNumber: 'ALIBABA-2023-11',
|
|
|
|
|
+ name: '阿里巴巴2023-11',
|
|
|
|
|
+ createdAt: '2023-11-01',
|
|
|
|
|
+ updatedAt: '2023-12-15',
|
|
|
|
|
+ status: 'in_progress' as OrderStatus,
|
|
|
|
|
+ statusLabel: '进行中',
|
|
|
|
|
+ statusClass: 'bg-green-100 text-green-800',
|
|
|
|
|
+ company: '阿里巴巴集团',
|
|
|
|
|
+ platform: '残疾人就业平台',
|
|
|
|
|
+ channel: '官方渠道',
|
|
|
|
|
+ expectedPeople: 30,
|
|
|
|
|
+ actualPeople: 24,
|
|
|
|
|
+ expectedStartDate: '2023-11-01',
|
|
|
|
|
+ actualStartDate: '2023-11-01',
|
|
|
|
|
+ expectedEndDate: '2024-10-31',
|
|
|
|
|
+ actualEndDate: null,
|
|
|
|
|
+ checkinStats: { current: 24, total: 30, percentage: 80 },
|
|
|
|
|
+ salaryVideoStats: { current: 22, total: 24, percentage: 92 },
|
|
|
|
|
+ taxVideoStats: { current: 20, total: 24, percentage: 83 },
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ const statusOptions = [
|
|
|
|
|
+ { value: 'draft', label: '草稿', class: 'bg-gray-100 text-gray-800' },
|
|
|
|
|
+ { value: 'confirmed', label: '已确认', class: 'bg-blue-100 text-blue-800' },
|
|
|
|
|
+ { value: 'in_progress', label: '进行中', class: 'bg-green-100 text-green-800' },
|
|
|
|
|
+ { value: 'completed', label: '已完成', class: 'bg-purple-100 text-purple-800' },
|
|
|
|
|
+ { value: 'cancelled', label: '已取消', class: 'bg-red-100 text-red-800' },
|
|
|
|
|
+ ]
|
|
|
|
|
+
|
|
|
|
|
+ const handleStatusChange = (newStatus: OrderStatus) => {
|
|
|
|
|
+ setOrderStatus(newStatus)
|
|
|
|
|
+ console.log('更新订单状态:', newStatus)
|
|
|
|
|
+ // TODO: 调用API更新订单状态
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ const handleSaveNote = () => {
|
|
|
|
|
+ console.log('保存备注:', note)
|
|
|
|
|
+ // TODO: 调用API保存备注
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ const handleEditOrder = () => {
|
|
|
|
|
+ console.log('编辑订单')
|
|
|
|
|
+ // TODO: 跳转到编辑页面
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ const handleDownloadReport = () => {
|
|
|
|
|
+ console.log('下载报告')
|
|
|
|
|
+ // TODO: 下载订单报告
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ const mockPersons = [
|
|
|
|
|
+ { id: 1, name: '张三', gender: '男', disabilityType: '肢体残疾', joinDate: '2023-11-01', workStatus: 'working' },
|
|
|
|
|
+ { id: 2, name: '李四', gender: '女', disabilityType: '听力残疾', joinDate: '2023-11-05', workStatus: 'working' },
|
|
|
|
|
+ { id: 3, name: '王五', gender: '男', disabilityType: '视力残疾', joinDate: '2023-11-10', workStatus: 'pre_working' },
|
|
|
|
|
+ ]
|
|
|
|
|
+
|
|
|
|
|
+ const mockVideos = [
|
|
|
|
|
+ { id: 1, type: 'checkin_video', name: '打卡视频_2023-12-01.mp4', size: '15.2MB', uploadTime: '2023-12-01 09:30' },
|
|
|
|
|
+ { id: 2, type: 'salary_video', name: '工资视频_2023-11-30.mp4', size: '22.5MB', uploadTime: '2023-11-30 16:45' },
|
|
|
|
|
+ { id: 3, type: 'tax_video', name: '个税视频_2023-11-29.mp4', size: '18.7MB', uploadTime: '2023-11-29 14:20' },
|
|
|
|
|
+ ]
|
|
|
|
|
+
|
|
|
return (
|
|
return (
|
|
|
<>
|
|
<>
|
|
|
{/* 导航栏 */}
|
|
{/* 导航栏 */}
|
|
@@ -15,14 +84,230 @@ const OrderDetail: React.FC = () => {
|
|
|
border={true}
|
|
border={true}
|
|
|
fixed={true}
|
|
fixed={true}
|
|
|
placeholder={true}
|
|
placeholder={true}
|
|
|
|
|
+ onClickLeft={() => console.log('返回')}
|
|
|
/>
|
|
/>
|
|
|
<ScrollView
|
|
<ScrollView
|
|
|
className="h-screen overflow-y-auto px-4 pb-4 pt-0"
|
|
className="h-screen overflow-y-auto px-4 pb-4 pt-0"
|
|
|
scrollY
|
|
scrollY
|
|
|
>
|
|
>
|
|
|
- <View className="p-4">
|
|
|
|
|
- <Text className="text-xl font-bold">订单详情</Text>
|
|
|
|
|
- <Text className="text-gray-600 mt-2">订单详细信息页面(待实现)</Text>
|
|
|
|
|
|
|
+ {/* 顶部信息卡片 */}
|
|
|
|
|
+ <View className="card bg-white p-4 mb-4 mt-4">
|
|
|
|
|
+ <View className="flex justify-between items-start mb-3">
|
|
|
|
|
+ <View>
|
|
|
|
|
+ <Text className="text-xl font-bold text-gray-800">{order.name}</Text>
|
|
|
|
|
+ <Text className="text-sm text-gray-500 mt-1">订单编号: {order.orderNumber}</Text>
|
|
|
|
|
+ </View>
|
|
|
|
|
+ <Text className={`text-xs px-2 py-1 rounded-full ${order.statusClass}`}>
|
|
|
|
|
+ {order.statusLabel}
|
|
|
|
|
+ </Text>
|
|
|
|
|
+ </View>
|
|
|
|
|
+
|
|
|
|
|
+ <View className="grid grid-cols-2 gap-3 text-sm">
|
|
|
|
|
+ <View>
|
|
|
|
|
+ <Text className="text-gray-500">创建时间</Text>
|
|
|
|
|
+ <Text className="text-gray-800">{order.createdAt}</Text>
|
|
|
|
|
+ </View>
|
|
|
|
|
+ <View>
|
|
|
|
|
+ <Text className="text-gray-500">更新时间</Text>
|
|
|
|
|
+ <Text className="text-gray-800">{order.updatedAt}</Text>
|
|
|
|
|
+ </View>
|
|
|
|
|
+ <View>
|
|
|
|
|
+ <Text className="text-gray-500">企业名称</Text>
|
|
|
|
|
+ <Text className="text-gray-800">{order.company}</Text>
|
|
|
|
|
+ </View>
|
|
|
|
|
+ <View>
|
|
|
|
|
+ <Text className="text-gray-500">平台</Text>
|
|
|
|
|
+ <Text className="text-gray-800">{order.platform}</Text>
|
|
|
|
|
+ </View>
|
|
|
|
|
+ </View>
|
|
|
|
|
+ </View>
|
|
|
|
|
+
|
|
|
|
|
+ {/* 基本信息卡片 */}
|
|
|
|
|
+ <View className="card bg-white p-4 mb-4">
|
|
|
|
|
+ <Text className="font-semibold text-gray-700 mb-3">基本信息</Text>
|
|
|
|
|
+ <View className="grid grid-cols-2 gap-3 text-sm">
|
|
|
|
|
+ <View>
|
|
|
|
|
+ <Text className="text-gray-500">预计人数</Text>
|
|
|
|
|
+ <Text className="text-gray-800">{order.expectedPeople}人</Text>
|
|
|
|
|
+ </View>
|
|
|
|
|
+ <View>
|
|
|
|
|
+ <Text className="text-gray-500">实际人数</Text>
|
|
|
|
|
+ <Text className="text-gray-800">{order.actualPeople}人</Text>
|
|
|
|
|
+ </View>
|
|
|
|
|
+ <View>
|
|
|
|
|
+ <Text className="text-gray-500">预计开始</Text>
|
|
|
|
|
+ <Text className="text-gray-800">{order.expectedStartDate}</Text>
|
|
|
|
|
+ </View>
|
|
|
|
|
+ <View>
|
|
|
|
|
+ <Text className="text-gray-500">实际开始</Text>
|
|
|
|
|
+ <Text className="text-gray-800">{order.actualStartDate}</Text>
|
|
|
|
|
+ </View>
|
|
|
|
|
+ <View>
|
|
|
|
|
+ <Text className="text-gray-500">预计结束</Text>
|
|
|
|
|
+ <Text className="text-gray-800">{order.expectedEndDate}</Text>
|
|
|
|
|
+ </View>
|
|
|
|
|
+ <View>
|
|
|
|
|
+ <Text className="text-gray-500">实际结束</Text>
|
|
|
|
|
+ <Text className="text-gray-800">{order.actualEndDate || '未结束'}</Text>
|
|
|
|
|
+ </View>
|
|
|
|
|
+ <View>
|
|
|
|
|
+ <Text className="text-gray-500">渠道</Text>
|
|
|
|
|
+ <Text className="text-gray-800">{order.channel}</Text>
|
|
|
|
|
+ </View>
|
|
|
|
|
+ </View>
|
|
|
|
|
+ </View>
|
|
|
|
|
+
|
|
|
|
|
+ {/* 打卡统计卡片 */}
|
|
|
|
|
+ <View className="card bg-white p-4 mb-4">
|
|
|
|
|
+ <Text className="font-semibold text-gray-700 mb-3">打卡数据统计</Text>
|
|
|
|
|
+ <View className="grid grid-cols-3 gap-2 mb-3">
|
|
|
|
|
+ <View className="bg-blue-50 rounded-lg p-2 text-center">
|
|
|
|
|
+ <Text className="text-xs text-gray-600">本月打卡</Text>
|
|
|
|
|
+ <Text className="text-sm font-bold text-gray-800">
|
|
|
|
|
+ {order.checkinStats.current}/{order.checkinStats.total}
|
|
|
|
|
+ </Text>
|
|
|
|
|
+ <Text className="text-xs text-gray-500">{order.checkinStats.percentage}%</Text>
|
|
|
|
|
+ </View>
|
|
|
|
|
+ <View className="bg-green-50 rounded-lg p-2 text-center">
|
|
|
|
|
+ <Text className="text-xs text-gray-600">工资视频</Text>
|
|
|
|
|
+ <Text className="text-sm font-bold text-gray-800">
|
|
|
|
|
+ {order.salaryVideoStats.current}/{order.salaryVideoStats.total}
|
|
|
|
|
+ </Text>
|
|
|
|
|
+ <Text className="text-xs text-gray-500">{order.salaryVideoStats.percentage}%</Text>
|
|
|
|
|
+ </View>
|
|
|
|
|
+ <View className="bg-purple-50 rounded-lg p-2 text-center">
|
|
|
|
|
+ <Text className="text-xs text-gray-600">个税视频</Text>
|
|
|
|
|
+ <Text className="text-sm font-bold text-gray-800">
|
|
|
|
|
+ {order.taxVideoStats.current}/{order.taxVideoStats.total}
|
|
|
|
|
+ </Text>
|
|
|
|
|
+ <Text className="text-xs text-gray-500">{order.taxVideoStats.percentage}%</Text>
|
|
|
|
|
+ </View>
|
|
|
|
|
+ </View>
|
|
|
|
|
+ <Button className="text-blue-500 text-sm">查看详细打卡记录</Button>
|
|
|
|
|
+ </View>
|
|
|
|
|
+
|
|
|
|
|
+ {/* 关联人才卡片 */}
|
|
|
|
|
+ <View className="card bg-white p-4 mb-4">
|
|
|
|
|
+ <View className="flex justify-between items-center mb-3">
|
|
|
|
|
+ <Text className="font-semibold text-gray-700">关联人才</Text>
|
|
|
|
|
+ <Button className="text-blue-500 text-xs">添加人才</Button>
|
|
|
|
|
+ </View>
|
|
|
|
|
+ <View className="space-y-3">
|
|
|
|
|
+ {mockPersons.map((person) => (
|
|
|
|
|
+ <View key={person.id} className="flex justify-between items-center border-b border-gray-100 pb-2">
|
|
|
|
|
+ <View>
|
|
|
|
|
+ <Text className="font-medium text-gray-800">{person.name}</Text>
|
|
|
|
|
+ <Text className="text-xs text-gray-500">
|
|
|
|
|
+ {person.gender} · {person.disabilityType} · 入职: {person.joinDate}
|
|
|
|
|
+ </Text>
|
|
|
|
|
+ </View>
|
|
|
|
|
+ <Text className={`text-xs px-2 py-1 rounded-full ${
|
|
|
|
|
+ person.workStatus === 'working' ? 'bg-green-100 text-green-800' :
|
|
|
|
|
+ person.workStatus === 'pre_working' ? 'bg-yellow-100 text-yellow-800' :
|
|
|
|
|
+ 'bg-gray-100 text-gray-800'
|
|
|
|
|
+ }`}>
|
|
|
|
|
+ {person.workStatus === 'working' ? '已就业' :
|
|
|
|
|
+ person.workStatus === 'pre_working' ? '待就业' : '未就业'}
|
|
|
|
|
+ </Text>
|
|
|
|
|
+ </View>
|
|
|
|
|
+ ))}
|
|
|
|
|
+ </View>
|
|
|
|
|
+ </View>
|
|
|
|
|
+
|
|
|
|
|
+ {/* 视频资料卡片 */}
|
|
|
|
|
+ <View className="card bg-white p-4 mb-4">
|
|
|
|
|
+ <View className="flex justify-between items-center mb-3">
|
|
|
|
|
+ <Text className="font-semibold text-gray-700">视频资料</Text>
|
|
|
|
|
+ <Button className="text-blue-500 text-xs">批量下载</Button>
|
|
|
|
|
+ </View>
|
|
|
|
|
+ <View className="space-y-3">
|
|
|
|
|
+ {mockVideos.map((video) => (
|
|
|
|
|
+ <View key={video.id} className="flex justify-between items-center border-b border-gray-100 pb-2">
|
|
|
|
|
+ <View>
|
|
|
|
|
+ <Text className="font-medium text-gray-800">{video.name}</Text>
|
|
|
|
|
+ <Text className="text-xs text-gray-500">
|
|
|
|
|
+ {video.type === 'checkin_video' ? '打卡视频' :
|
|
|
|
|
+ video.type === 'salary_video' ? '工资视频' : '个税视频'} · {video.size} · {video.uploadTime}
|
|
|
|
|
+ </Text>
|
|
|
|
|
+ </View>
|
|
|
|
|
+ <View className="flex space-x-2">
|
|
|
|
|
+ <Button className="text-blue-500 text-xs">播放</Button>
|
|
|
|
|
+ <Button className="text-gray-500 text-xs">下载</Button>
|
|
|
|
|
+ </View>
|
|
|
|
|
+ </View>
|
|
|
|
|
+ ))}
|
|
|
|
|
+ </View>
|
|
|
|
|
+ </View>
|
|
|
|
|
+
|
|
|
|
|
+ {/* 状态管理卡片 */}
|
|
|
|
|
+ <View className="card bg-white p-4 mb-4">
|
|
|
|
|
+ <Text className="font-semibold text-gray-700 mb-3">状态管理</Text>
|
|
|
|
|
+ <View className="flex space-x-2 mb-3">
|
|
|
|
|
+ {statusOptions.map((option) => (
|
|
|
|
|
+ <Button
|
|
|
|
|
+ key={option.value}
|
|
|
|
|
+ className={`text-xs px-3 py-1 rounded-full ${option.value === orderStatus ? option.class : 'bg-gray-100 text-gray-800'}`}
|
|
|
|
|
+ onClick={() => handleStatusChange(option.value as OrderStatus)}
|
|
|
|
|
+ >
|
|
|
|
|
+ {option.label}
|
|
|
|
|
+ </Button>
|
|
|
|
|
+ ))}
|
|
|
|
|
+ </View>
|
|
|
|
|
+ <Text className="text-xs text-gray-500 mb-3">当前状态: {statusOptions.find(opt => opt.value === orderStatus)?.label}</Text>
|
|
|
|
|
+ </View>
|
|
|
|
|
+
|
|
|
|
|
+ {/* 备注和操作日志卡片 */}
|
|
|
|
|
+ <View className="card bg-white p-4 mb-4">
|
|
|
|
|
+ <Text className="font-semibold text-gray-700 mb-3">添加备注</Text>
|
|
|
|
|
+ <Textarea
|
|
|
|
|
+ className="border border-gray-300 rounded-lg px-3 py-2 text-sm mb-3"
|
|
|
|
|
+ placeholder="请输入备注内容..."
|
|
|
|
|
+ value={note}
|
|
|
|
|
+ onInput={(e) => setNote(e.detail.value)}
|
|
|
|
|
+ />
|
|
|
|
|
+ <Button
|
|
|
|
|
+ className="bg-blue-500 text-white text-xs px-3 py-1 rounded-lg"
|
|
|
|
|
+ onClick={handleSaveNote}
|
|
|
|
|
+ >
|
|
|
|
|
+ 保存备注
|
|
|
|
|
+ </Button>
|
|
|
|
|
+
|
|
|
|
|
+ <Text className="font-semibold text-gray-700 mt-4 mb-3">操作日志</Text>
|
|
|
|
|
+ <View className="space-y-2 text-sm">
|
|
|
|
|
+ <View className="flex justify-between">
|
|
|
|
|
+ <Text className="text-gray-600">状态变更为进行中</Text>
|
|
|
|
|
+ <Text className="text-gray-500">2023-12-15 10:30</Text>
|
|
|
|
|
+ </View>
|
|
|
|
|
+ <View className="flex justify-between">
|
|
|
|
|
+ <Text className="text-gray-600">添加了5名人才</Text>
|
|
|
|
|
+ <Text className="text-gray-500">2023-12-10 14:20</Text>
|
|
|
|
|
+ </View>
|
|
|
|
|
+ <View className="flex justify-between">
|
|
|
|
|
+ <Text className="text-gray-600">订单创建</Text>
|
|
|
|
|
+ <Text className="text-gray-500">2023-11-01 09:00</Text>
|
|
|
|
|
+ </View>
|
|
|
|
|
+ </View>
|
|
|
|
|
+ </View>
|
|
|
|
|
+
|
|
|
|
|
+ {/* 操作按钮区域 */}
|
|
|
|
|
+ <View className="card bg-white p-4 mb-4">
|
|
|
|
|
+ <View className="flex flex-col space-y-2">
|
|
|
|
|
+ <Button
|
|
|
|
|
+ className="bg-blue-500 text-white text-sm px-4 py-2 rounded-lg"
|
|
|
|
|
+ onClick={handleEditOrder}
|
|
|
|
|
+ >
|
|
|
|
|
+ 编辑订单
|
|
|
|
|
+ </Button>
|
|
|
|
|
+ <Button
|
|
|
|
|
+ className="bg-green-500 text-white text-sm px-4 py-2 rounded-lg"
|
|
|
|
|
+ onClick={handleDownloadReport}
|
|
|
|
|
+ >
|
|
|
|
|
+ 下载订单报告
|
|
|
|
|
+ </Button>
|
|
|
|
|
+ <Button className="border border-gray-300 text-gray-700 text-sm px-4 py-2 rounded-lg">
|
|
|
|
|
+ 分享订单
|
|
|
|
|
+ </Button>
|
|
|
|
|
+ </View>
|
|
|
</View>
|
|
</View>
|
|
|
</ScrollView>
|
|
</ScrollView>
|
|
|
</>
|
|
</>
|