697 lines
20 KiB
TypeScript
697 lines
20 KiB
TypeScript
import {useEffect, useState} from "react";
|
||
import Taro, {useRouter} from '@tarojs/taro'
|
||
import {getHjmCarByCode, pageHjmCar, updateHjmCar} from "@/api/hjm/hjmCar";
|
||
import {HjmCar} from "@/api/hjm/hjmCar/model";
|
||
import './location.scss';
|
||
import { Swiper } from '@nutui/nutui-react-taro'
|
||
import {copyText} from "@/utils/common";
|
||
import {View} from '@tarojs/components'
|
||
import {
|
||
Form,
|
||
Button,
|
||
Input,
|
||
Radio,
|
||
Cell,
|
||
Image
|
||
} from '@nutui/nutui-react-taro'
|
||
import { ImagePreview } from '@nutui/nutui-react-taro'
|
||
import {Scan} from '@nutui/icons-react-taro'
|
||
import {pageDictData} from "@/api/system/dict-data";
|
||
import {DictData} from "@/api/system/dict-data/model";
|
||
import {myUserVerify} from "@/api/system/userVerify";
|
||
import {listUserRole, updateUserRole} from "@/api/system/userRole";
|
||
import {UserRole} from "@/api/system/userRole/model";
|
||
import {updateUser} from "@/api/system/user";
|
||
|
||
// 图片数据接口
|
||
interface UploadedImageData {
|
||
url?: string;
|
||
src?: string;
|
||
name?: string;
|
||
uid?: string;
|
||
message?: string;
|
||
type?: string;
|
||
}
|
||
|
||
/**
|
||
* 文章终极列表
|
||
* @constructor
|
||
*/
|
||
const Query = () => {
|
||
const {params} = useRouter();
|
||
const [keywords, setKeywords] = useState<string>()
|
||
const [dict, setDict] = useState<DictData[]>([])
|
||
const [adminId, setAdminId] = useState<number>()
|
||
const [showPreview, setShowPreview] = useState(false)
|
||
const [userRole, setUserRole] = useState<UserRole>()
|
||
const [fileList, setFileList] = useState<UploadedImageData[]>([]) // 图片文件列表
|
||
const [FormData, setFormData] = useState<HjmCar>(
|
||
{
|
||
// 自增ID
|
||
id: undefined,
|
||
// 车辆名称
|
||
name: undefined,
|
||
// 车辆图片
|
||
image: undefined,
|
||
// 类型 0汽车 1其他车
|
||
type: undefined,
|
||
// 快递公司
|
||
kuaidi: undefined,
|
||
// 管理负责人
|
||
kuaidiAdmin: undefined,
|
||
organization: undefined,
|
||
organizationParentId: undefined,
|
||
parentOrganization: undefined,
|
||
parentOrganizationAdmin: undefined,
|
||
// 车辆编号
|
||
code: undefined,
|
||
// 操作员
|
||
driver: undefined,
|
||
// 保险状态
|
||
insuranceStatus: undefined,
|
||
// GPS设备编号
|
||
gpsNo: undefined,
|
||
// 电子围栏ID
|
||
fenceId: undefined,
|
||
// 电子围栏名称
|
||
fenceName: undefined,
|
||
// 电子围栏
|
||
fence: undefined,
|
||
// 位置
|
||
location: undefined,
|
||
// 经度
|
||
longitude: undefined,
|
||
// 纬度
|
||
latitude: undefined,
|
||
// 地址
|
||
address: undefined,
|
||
// 用户ID
|
||
userId: undefined,
|
||
// 排序(数字越小越靠前)
|
||
sortNumber: undefined,
|
||
// 备注
|
||
comments: undefined,
|
||
// 状态, 0正常, 1冻结
|
||
status: undefined,
|
||
// 是否删除, 0否, 1是
|
||
deleted: undefined,
|
||
// 租户id
|
||
tenantId: undefined,
|
||
// 创建时间
|
||
createTime: undefined,
|
||
// 更新时间
|
||
updateTime: undefined,
|
||
}
|
||
)
|
||
|
||
// 提交表单
|
||
const submitSucceed = (values: any) => {
|
||
console.log(values)
|
||
if(FormData.image == '[]' || !FormData.image){
|
||
Taro.showToast({
|
||
title: '请上传车辆图片',
|
||
icon: 'error'
|
||
});
|
||
return false
|
||
}
|
||
if(!FormData.gpsNo){
|
||
Taro.showToast({
|
||
title: '请绑定GPS',
|
||
icon: 'error'
|
||
});
|
||
return false
|
||
}
|
||
// 升级为快递员
|
||
if(userRole){
|
||
updateHjmCar({
|
||
...FormData,
|
||
status: 1,
|
||
driverId: adminId,
|
||
driverName: Taro.getStorageSync('RealName')
|
||
}).then(() => {
|
||
userRole.roleId = 1738;
|
||
updateUserRole(userRole).then(() => {
|
||
Taro.showToast({title: `绑定成功`, icon: 'success'})
|
||
})
|
||
updateUser({
|
||
userId: Taro.getStorageSync('UserId'),
|
||
organizationId: FormData.organizationId
|
||
}).then(() => {})
|
||
setTimeout(() => {
|
||
reload();
|
||
return Taro.navigateBack()
|
||
}, 1000)
|
||
}).catch(() => {
|
||
Taro.showToast({
|
||
title: '绑定失败',
|
||
icon: 'error'
|
||
});
|
||
})
|
||
}
|
||
}
|
||
|
||
const submitFailed = (error: any) => {
|
||
console.log(error, 'err...')
|
||
}
|
||
|
||
const saveGpsNo = () => {
|
||
Taro.scanCode({
|
||
onlyFromCamera: true,
|
||
scanType: ['barCode', 'qrCode'],
|
||
success: (res) => {
|
||
// 更新表单数据
|
||
setFormData({
|
||
...FormData,
|
||
gpsNo: res.result
|
||
});
|
||
Taro.showToast({
|
||
title: '扫码成功' + res.result,
|
||
icon: 'success',
|
||
duration: 2000
|
||
});
|
||
},
|
||
fail: (err) => {
|
||
console.log('扫码失败', err);
|
||
Taro.showToast({
|
||
title: '扫码失败',
|
||
icon: 'error',
|
||
duration: 2000
|
||
});
|
||
}
|
||
});
|
||
}
|
||
|
||
// 选择并上传图片
|
||
const handleChooseImage = () => {
|
||
if (fileList.length >= 5) {
|
||
Taro.showToast({
|
||
title: '最多只能上传5张图片',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
|
||
Taro.chooseImage({
|
||
count: 5 - fileList.length, // 剩余可选择的数量
|
||
sizeType: ['compressed'],
|
||
sourceType: ['album', 'camera'],
|
||
success: (res) => {
|
||
console.log('选择图片成功:', res)
|
||
|
||
// 逐个上传选中的图片
|
||
res.tempFilePaths.forEach((filePath, index) => {
|
||
uploadSingleImage(filePath, index)
|
||
})
|
||
},
|
||
fail: (err) => {
|
||
console.log('选择图片失败:', err)
|
||
Taro.showToast({
|
||
title: '选择图片失败',
|
||
icon: 'error'
|
||
})
|
||
}
|
||
})
|
||
}
|
||
|
||
// 上传单张图片
|
||
const uploadSingleImage = (filePath: string, index: number) => {
|
||
const TenantId = Taro.getStorageSync('TenantId')
|
||
|
||
Taro.uploadFile({
|
||
url: 'https://server.gxwebsoft.com/api/oss/upload',
|
||
filePath: filePath,
|
||
name: 'file',
|
||
header: {
|
||
'content-type': 'application/json',
|
||
TenantId
|
||
},
|
||
success: (res) => {
|
||
try {
|
||
const data = JSON.parse(res.data);
|
||
console.log('上传成功', data)
|
||
if (data.code === 0) {
|
||
// 更新文件列表
|
||
const newFile = {
|
||
name: `图片${Date.now()}_${index}`,
|
||
url: data.data.url,
|
||
status: 'success',
|
||
message: '上传成功',
|
||
type: 'image',
|
||
uid: `${Date.now()}_${index}`,
|
||
}
|
||
|
||
setFileList(prev => {
|
||
const newList = [...prev, newFile]
|
||
// 同时更新表单数据 - 使用JSON格式存储
|
||
const imageData: UploadedImageData[] = newList.map(f => ({
|
||
url: f.url,
|
||
name: f.name,
|
||
uid: f.uid
|
||
}))
|
||
setFormData(prevForm => ({
|
||
...prevForm,
|
||
image: JSON.stringify(imageData)
|
||
}))
|
||
return newList
|
||
})
|
||
|
||
Taro.showToast({
|
||
title: '上传成功',
|
||
icon: 'success'
|
||
})
|
||
} else {
|
||
Taro.showToast({
|
||
title: data.message || '上传失败',
|
||
icon: 'error'
|
||
})
|
||
}
|
||
} catch (error) {
|
||
console.error('解析响应失败:', error)
|
||
Taro.showToast({
|
||
title: '上传失败',
|
||
icon: 'error'
|
||
})
|
||
}
|
||
},
|
||
fail: (err) => {
|
||
console.log('上传请求失败', err);
|
||
Taro.showToast({
|
||
title: '上传失败',
|
||
icon: 'error'
|
||
})
|
||
}
|
||
})
|
||
}
|
||
|
||
// 处理文件删除
|
||
const handleFileRemove = (file: any) => {
|
||
console.log('删除文件:', file)
|
||
const newFileList = fileList.filter(f => f.uid !== file.uid)
|
||
setFileList(newFileList)
|
||
|
||
// 更新表单数据 - 使用JSON格式存储
|
||
if (newFileList.length === 0) {
|
||
setFormData(prev => ({
|
||
...prev,
|
||
image: undefined
|
||
}))
|
||
} else {
|
||
const imageData: UploadedImageData[] = newFileList.map(f => ({
|
||
url: f.url,
|
||
src: f.url,
|
||
name: f.name,
|
||
uid: f.uid
|
||
}))
|
||
setFormData(prev => ({
|
||
...prev,
|
||
image: JSON.stringify(imageData)
|
||
}))
|
||
}
|
||
}
|
||
|
||
// 打开地图选择位置
|
||
// const chooseLocation = async () => {
|
||
// try {
|
||
// const res = await Taro.chooseLocation({
|
||
// latitude, // 默认纬度
|
||
// longitude // 默认经度
|
||
// })
|
||
// console.log('选择的位置：', res);
|
||
// } catch (err) {
|
||
// console.error('选择位置失败：', err);
|
||
// }
|
||
// }
|
||
const reload = () => {
|
||
const code = params.id;
|
||
// 获取数据字典
|
||
pageDictData({dictCode: 'InsuranceStatus'}).then(res => {
|
||
setDict(res?.list || [])
|
||
})
|
||
// 查询角色
|
||
listUserRole({userId: Taro.getStorageSync('UserId')}).then(res => {
|
||
if(res.length > 0){
|
||
setUserRole(res[0])
|
||
}
|
||
})
|
||
// 检查是否已实名
|
||
myUserVerify({status: 1}).then(data => {
|
||
if (!data) {
|
||
Taro.showToast({
|
||
title: '未实名认证',
|
||
icon: 'error'
|
||
})
|
||
setTimeout(() => {
|
||
Taro.navigateTo({
|
||
url: '/user/userVerify/index'
|
||
})
|
||
}, 1000)
|
||
return false
|
||
}
|
||
if(data){
|
||
setAdminId(data.userId);
|
||
}
|
||
})
|
||
// 获取车辆信息
|
||
if (code) {
|
||
getHjmCarByCode(code).then(data => {
|
||
if(data){
|
||
setFormData(data)
|
||
setKeywords(data.code)
|
||
|
||
// 解析图片数据
|
||
if (data.image) {
|
||
try {
|
||
const parsedImages: UploadedImageData[] = JSON.parse(data.image)
|
||
setFileList(parsedImages.map((img) => ({
|
||
url: img.url,
|
||
src: img.url
|
||
})))
|
||
} catch (error) {
|
||
// 如果解析失败，可能是旧格式的单个URL
|
||
if (typeof data.image === 'string' && data.image.trim()) {
|
||
setFileList([{
|
||
src: data.image,
|
||
url: data.image,
|
||
message: '上传成功',
|
||
type: 'image',
|
||
uid: `legacy_${Date.now()}`,
|
||
}])
|
||
}
|
||
}
|
||
}
|
||
|
||
if (data.status == 0) {
|
||
Taro.setNavigationBarTitle({
|
||
title: '安装设备'
|
||
})
|
||
setFormData({...data, driver: Taro.getStorageSync('RealName')})
|
||
}
|
||
}
|
||
})
|
||
}
|
||
// 执行搜索
|
||
if (keywords) {
|
||
pageHjmCar({keywords}).then(res => {
|
||
if (res?.list && res?.list?.length > 0) {
|
||
const data = res?.list[0];
|
||
// setFormData(data)
|
||
setKeywords(data.code)
|
||
}
|
||
})
|
||
return false;
|
||
}
|
||
}
|
||
|
||
useEffect(() => {
|
||
reload()
|
||
}, [])
|
||
|
||
|
||
return (
|
||
<>
|
||
{/* 未安装 */}
|
||
{FormData?.status == 0 ? (
|
||
<div className={'car-info w-full bg-white'}>
|
||
<div className={'px-0'}>
|
||
<Form
|
||
divider
|
||
initialValues={FormData}
|
||
labelPosition="left"
|
||
onFinish={(values) => submitSucceed(values)}
|
||
onFinishFailed={(errors) => submitFailed(errors)}
|
||
footer={
|
||
<div
|
||
style={{
|
||
display: 'flex',
|
||
justifyContent: 'center',
|
||
width: '100%'
|
||
}}
|
||
>
|
||
<Button nativeType="submit" block type="info">
|
||
提交
|
||
</Button>
|
||
</div>
|
||
}
|
||
>
|
||
<Form.Item
|
||
label={'车辆编号'}
|
||
name="code"
|
||
rules={[{message: '请输入车辆编号'}]}
|
||
>
|
||
<View onClick={() => copyText(`${FormData?.code}`)}>{FormData?.code}</View>
|
||
</Form.Item>
|
||
<Form.Item
|
||
label={'快递公司品牌'}
|
||
name="parentOrganization"
|
||
rules={[{message: '快递公司品牌'}]}
|
||
>
|
||
<Input placeholder="快递公司品牌" disabled type="text"/>
|
||
</Form.Item>
|
||
<Form.Item
|
||
label={'管理责任人'}
|
||
name="parentOrganizationAdmin"
|
||
rules={[{message: '管理责任人'}]}
|
||
>
|
||
<Input placeholder="管理责任人" disabled type="text"/>
|
||
</Form.Item>
|
||
<Form.Item
|
||
label={'电子围栏'}
|
||
name="fenceName"
|
||
rules={[{message: '电子围栏'}]}
|
||
>
|
||
<Input placeholder="电子围栏" type="text"/>
|
||
</Form.Item>
|
||
<Form.Item
|
||
label="保险状态"
|
||
name="insuranceStatus"
|
||
rules={[
|
||
{message: '保险状态'}
|
||
]}
|
||
>
|
||
<Radio.Group value={FormData.insuranceStatus} disabled direction="horizontal">
|
||
{
|
||
dict?.map((item, index) => (
|
||
<Radio key={index} value={item.dictDataCode}>
|
||
{item.dictDataName}
|
||
</Radio>
|
||
))
|
||
}
|
||
</Radio.Group>
|
||
</Form.Item>
|
||
<Form.Item
|
||
label={'GPS编号'}
|
||
name="gpsNo"
|
||
required
|
||
rules={[{message: 'GPS编号'}]}
|
||
>
|
||
<div
|
||
style={{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
background: '#fff',
|
||
}}
|
||
>
|
||
<Input
|
||
placeholder="请填入GPS设备编号"
|
||
value={FormData.gpsNo}
|
||
onChange={(value) => setFormData({...FormData, gpsNo: value})}
|
||
/>
|
||
<div
|
||
className="right"
|
||
style={{display: 'flex', alignItems: 'center'}}
|
||
>
|
||
<Scan onClick={saveGpsNo}/>
|
||
</div>
|
||
</div>
|
||
</Form.Item>
|
||
<Form.Item
|
||
label={'拍照上传'}
|
||
name="image"
|
||
required
|
||
rules={[{message: '请上传照片'}]}
|
||
>
|
||
<div style={{
|
||
display: 'flex',
|
||
flexWrap: 'wrap',
|
||
gap: '12px',
|
||
padding: '8px 0'
|
||
}}>
|
||
{/* 显示已上传的图片 */}
|
||
{fileList.map((file) => (
|
||
<div key={file.uid} style={{
|
||
position: 'relative',
|
||
width: '80px',
|
||
height: '80px',
|
||
borderRadius: '8px',
|
||
overflow: 'hidden',
|
||
border: '1px solid #d9d9d9'
|
||
}}>
|
||
<img
|
||
src={file.url}
|
||
alt={file.name}
|
||
style={{
|
||
width: '100%',
|
||
height: '100%',
|
||
objectFit: 'cover'
|
||
}}
|
||
/>
|
||
<Button
|
||
size="small"
|
||
type="default"
|
||
style={{
|
||
position: 'absolute',
|
||
top: '-8px',
|
||
right: '-8px',
|
||
width: '20px',
|
||
height: '20px',
|
||
borderRadius: '10px',
|
||
fontSize: '12px',
|
||
minWidth: '20px',
|
||
padding: 0,
|
||
lineHeight: '20px'
|
||
}}
|
||
onClick={() => handleFileRemove(file)}
|
||
>
|
||
×
|
||
</Button>
|
||
</div>
|
||
))}
|
||
|
||
{/* 添加图片按钮 */}
|
||
{fileList.length < 5 && (
|
||
<div
|
||
onClick={handleChooseImage}
|
||
style={{
|
||
width: '80px',
|
||
height: '80px',
|
||
borderRadius: '8px',
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
border: '2px dashed #d9d9d9',
|
||
backgroundColor: '#fafafa',
|
||
cursor: 'pointer'
|
||
}}
|
||
>
|
||
<span style={{fontSize: '20px', color: '#d9d9d9'}}>+</span>
|
||
<span style={{fontSize: '10px', marginTop: '2px', color: '#666'}}>
|
||
添加图片
|
||
</span>
|
||
</div>
|
||
)}
|
||
|
||
{/* 显示上传数量提示 */}
|
||
{fileList.length > 0 && (
|
||
<div style={{
|
||
width: '100%',
|
||
fontSize: '12px',
|
||
color: '#52c41a',
|
||
textAlign: 'center',
|
||
marginTop: '4px'
|
||
}}>
|
||
已上传{fileList.length}张图片（最多5张）
|
||
</div>
|
||
)}
|
||
</div>
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
label={'操作员'}
|
||
name="driver"
|
||
rules={[{message: '操作员'}]}
|
||
>
|
||
<Input placeholder="操作员" type="text"/>
|
||
</Form.Item>
|
||
</Form>
|
||
</div>
|
||
</div>
|
||
) : ''}
|
||
|
||
{/* 已安装 */}
|
||
{FormData?.status == 1 ? (
|
||
<div className={'car-info w-full bg-white'}>
|
||
{/* 显示多张图片 */}
|
||
<div style={{
|
||
display: 'flex',
|
||
flexWrap: 'wrap',
|
||
gap: '8px',
|
||
padding: '16px',
|
||
justifyContent: 'center'
|
||
}}>
|
||
<ImagePreview
|
||
autoPlay
|
||
// @ts-ignore
|
||
images={fileList}
|
||
visible={showPreview}
|
||
onClose={() => setShowPreview(false)}
|
||
/>
|
||
<Swiper defaultValue={1} autoPlay indicator>
|
||
{fileList.map((item) => (
|
||
// @ts-ignore
|
||
<Swiper.Item key={item}>
|
||
<Image
|
||
width="100%"
|
||
height="100%"
|
||
mode={'aspectFit'}
|
||
onClick={() => setShowPreview(true)}
|
||
src={item.url}
|
||
/>
|
||
</Swiper.Item>
|
||
))}
|
||
</Swiper>
|
||
</div>
|
||
<div className={'px-2'}>
|
||
<Cell className={'car-info-item-title'} onClick={() => copyText(`${FormData?.code}`)}>
|
||
车辆编号：{FormData?.code}
|
||
</Cell>
|
||
<Cell className={'car-info-item-title'}>
|
||
快递公司品牌：{FormData?.parentOrganization}
|
||
</Cell>
|
||
<Cell className={'car-info-item-title'}>
|
||
所属站点：{FormData?.organization}
|
||
</Cell>
|
||
<Cell className={'car-info-item-title'}>
|
||
管理责任人：{FormData?.parentOrganizationAdmin}
|
||
</Cell>
|
||
<Cell className={'car-info-item-content'}>
|
||
操作员：{FormData?.driver}
|
||
</Cell>
|
||
<Cell className={'car-info-item-content'}>
|
||
保险状态：{FormData?.insuranceStatus}
|
||
</Cell>
|
||
<Cell className={'car-info-item-content'}>
|
||
GPS编号：{FormData?.gpsNo}
|
||
</Cell>
|
||
<Cell className={'car-info-item-content'}>
|
||
电子围栏：{FormData.fenceName}
|
||
</Cell>
|
||
<div className={'flex justify-around py-4'}>
|
||
<Button nativeType="submit" type="info" onClick={
|
||
() => {
|
||
Taro.navigateTo({
|
||
url: `/hjm/location?id=${FormData?.code}`
|
||
})
|
||
}
|
||
}>
|
||
查看定位
|
||
</Button>
|
||
<Button nativeType="submit" type="warning" onClick={
|
||
() => {
|
||
Taro.navigateTo({
|
||
url: `/hjm/trajectory/trajectory?id=${FormData?.code}`
|
||
})
|
||
}
|
||
}>
|
||
播放轨迹
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
) : ''}
|
||
</>
|
||
)
|
||
}
|
||
// @ts-ignore
|
||
export default Query
|