xuqiuyun/cattleTransportation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改内容

Browse Source
This commit is contained in:
xuqiuyun
2025-10-27 17:38:20 +08:00
parent a40ce28318
commit 42e0abcbe3
50 changed files with 4240 additions and 1276 deletions
Download Patch File Download Diff File Expand all files Collapse all files

416
pc-cattle-transportation/src/views/userManage/driverDialog.vue
View File

@@ -7,158 +7,38 @@
<el-form-item label="司机手机号" prop="mobile">
<el-input v-model="ruleForm.mobile" placeholder="请输入司机手机号" clearable></el-input>
</el-form-item>
<el-form-item label="账号状态" prop="status">
<el-radio-group v-model="ruleForm.status">
<el-radio :value="0">启用</el-radio>
<el-radio :value="1">禁用</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="车牌号" prop="carNumber">
<el-input v-model="ruleForm.carNumber" placeholder="请输入车牌号" clearable></el-input>
</el-form-item>
<el-form-item label="驾驶证" prop="driverImg">
<el-form-item label="驾驶证照片" prop="driver_license">
<el-upload
:limit="2"
list-type="picture-card"
action="/api/common/upload"
:on-success="
(response, file, fileList) => {
return handleAvatarSuccess(response, file, fileList, 'driverImg');
}
"
:on-success="(response, file, fileList) => handleAvatarSuccess(response, file, fileList, 'driver_license')"
:on-preview="handlePreview"
:on-remove="
(file, fileList) => {
return handleRemove(file, fileList, 'driverImg');
}
"
:on-remove="(file, fileList) => handleRemove(file, fileList, 'driver_license')"
:before-upload="beforeAvatarUpload"
:file-list="ruleForm.driverImg"
:file-list="ruleForm.driver_license"
:headers="importHeaders"
:on-exceed="
(files, uploadFiles) => {
return handleExceed(files, uploadFiles, 2);
}
"
:on-exceed="() => handleExceed(2)"
>
<el-icon><Plus /></el-icon>
</el-upload>
</el-form-item>
<el-form-item label="行驶证" prop="licenseImg">
<el-form-item label="身份证照片" prop="id_card">
<el-upload
:limit="2"
list-type="picture-card"
action="/api/common/upload"
:on-success="
(response, file, fileList) => {
return handleAvatarSuccess(response, file, fileList, 'licenseImg');
}
"
:on-success="(response, file, fileList) => handleAvatarSuccess(response, file, fileList, 'id_card')"
:on-preview="handlePreview"
:on-remove="
(file, fileList) => {
return handleRemove(file, fileList, 'licenseImg');
}
"
:on-remove="(file, fileList) => handleRemove(file, fileList, 'id_card')"
:before-upload="beforeAvatarUpload"
:file-list="ruleForm.licenseImg"
:file-list="ruleForm.id_card"
:headers="importHeaders"
:on-exceed="
(files, uploadFiles) => {
return handleExceed(files, uploadFiles, 2);
}
"
:on-exceed="() => handleExceed(2)"
>
<el-icon><Plus /></el-icon>
</el-upload>
</el-form-item>
<el-form-item label="牧运通备案码" prop="codeImg">
<el-upload
:limit="2"
list-type="picture-card"
action="/api/common/upload"
:on-success="
(response, file, fileList) => {
return handleAvatarSuccess(response, file, fileList, 'codeImg');
}
"
:on-preview="handlePreview"
:on-remove="
(file, fileList) => {
return handleRemove(file, fileList, 'codeImg');
}
"
:before-upload="beforeAvatarUpload"
:file-list="ruleForm.codeImg"
:headers="importHeaders"
:on-exceed="
(files, uploadFiles) => {
return handleExceed(files, uploadFiles, 2);
}
"
>
<el-icon><Plus /></el-icon>
</el-upload>
</el-form-item>
<el-form-item label="车头&车身照片" prop="carImg">
<el-upload
:limit="2"
list-type="picture-card"
action="/api/common/upload"
:on-success="
(response, file, fileList) => {
return handleAvatarSuccess(response, file, fileList, 'carImg');
}
"
:on-preview="handlePreview"
:on-remove="
(file, fileList) => {
return handleRemove(file, fileList, 'carImg');
}
"
:before-upload="beforeAvatarUpload"
:file-list="ruleForm.carImg"
:headers="importHeaders"
:on-exceed="
(files, uploadFiles) => {
return handleExceed(files, uploadFiles, 2);
}
"
>
<el-icon><Plus /></el-icon>
</el-upload>
</el-form-item>
<el-form-item label="身份证前后面" prop="idCardImg">
<el-upload
:limit="2"
list-type="picture-card"
action="/api/common/upload"
:on-success="
(response, file, fileList) => {
return handleAvatarSuccess(response, file, fileList, 'idCardImg');
}
"
:on-preview="handlePreview"
:on-remove="
(file, fileList) => {
return handleRemove(file, fileList, 'idCardImg');
}
"
:before-upload="beforeAvatarUpload"
:file-list="ruleForm.idCardImg"
:headers="importHeaders"
:on-exceed="
(files, uploadFiles) => {
return handleExceed(files, uploadFiles, 2);
}
"
>
<el-icon><Plus /></el-icon>
</el-upload>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="ruleForm.remark" placeholder="请输入备注" clearable></el-input>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
@@ -174,13 +54,15 @@
<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue';
import { ElMessage } from 'element-plus';
import { Plus } from '@element-plus/icons-vue';
import { driverAdd, driverEdit } from '@/api/userManage.js';
import { checkMobile } from '~/utils/validateFuns.js';
import { useUserStore } from '../../store/user';
const userStore = useUserStore();
const importHeaders = reactive({ Authorization: userStore.$state.token });
const emits = defineEmits();
const formDataRef = ref();
const data = reactive({
dialogVisible: false,
@@ -188,18 +70,15 @@ const data = reactive({
saveLoading: false,
dialogVisibleImg: false,
dialogImageUrl: '',
isEdit: false,
});
const ruleForm = reactive({
username: '', // 司机姓名
mobile: '', // 司机手机号
status: '', // 账号状态
carNumber: '', // 车牌号
driverImg: [], // 驾驶证
licenseImg: [], // 行驶证
codeImg: [], // 牧运通备案码
carImg: [], // 车头&车身照片
idCardImg: [], // 身份证前后面
remark: '', // 备注
id: null,
username: '',
mobile: '',
driver_license: [], // 驾驶证照片
id_card: [], // 身份证照片
});
const rules = reactive({
@@ -210,228 +89,141 @@ const rules = reactive({
validator(rule, value, callback) {
if (!value) {
callback(new Error('请输入司机手机号'));
}
if (!checkMobile(value)) {
} else if (!/^1[3-9]\d{9}$/.test(value)) {
callback(new Error('请输入正确的手机号'));
} else {
callback();
}
callback();
},
trigger: 'blur',
},
],
status: [{ required: true, message: '请选择账户状态', trigger: 'change' }],
carNumber: [{ required: true, message: '请输入车牌号', trigger: 'blur' }],
driverImg: [{ required: true, message: '请上传驾驶证', trigger: 'change' }],
licenseImg: [{ required: true, message: '请上传行驶证', trigger: 'change' }],
codeImg: [{ required: true, message: '请上传牧运通备案码', trigger: 'change' }],
carImg: [{ required: true, message: '请上传车头&车身照片', trigger: 'change' }],
idCardImg: [{ required: true, message: '请上传身份证前后面', trigger: 'change' }],
driver_license: [{ required: true, message: '请上传驾驶证照片', trigger: 'change' }],
id_card: [{ required: true, message: '请上传身份证照片', trigger: 'change' }],
});
const handleAvatarSuccess = (res, file, fileList, type) => {
console.log('上传成功响应:', res);
console.log('文件信息:', file);
console.log('类型:', type);
if (ruleForm.hasOwnProperty(type)) {
// 检查响应格式，支持多种可能的响应结构
let imageUrl = null;
if (res && res.data && res.data.src) {
// 格式1: res.data.src
imageUrl = res.data.src;
} else if (res && res.data && typeof res.data === 'string') {
// 格式2: res.data 直接是URL字符串
imageUrl = res.data;
} else if (res && res.url) {
// 格式3: res.url
imageUrl = res.url;
} else if (res && typeof res === 'string') {
// 格式4: res 直接是URL字符串
imageUrl = res;
} else {
console.error('无法解析上传响应:', res);
ElMessage.error('图片上传失败：响应格式不正确');
return;
}
console.log('解析到的图片URL:', imageUrl);
ruleForm[type].push({ url: imageUrl });
if (imageUrl) {
// 直接更新 fileList
file.url = imageUrl;
ruleForm[type] = fileList;
console.log(`${type} 上传成功:`, imageUrl, 'fileList:', fileList);
} else {
console.error('无法解析图片URL:', res);
ElMessage.error('上传失败：无法获取图片URL');
}
}
};
// 移除
const handleRemove = (file, fileList, type) => {
if (ruleForm.hasOwnProperty(type)) {
ruleForm[type] = fileList;
}
};
// 上传时 - 判断
const beforeAvatarUpload = (file) => {
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
const isLt1M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
ElMessage.error('上传头像图片只能是 JPG 格式!');
const beforeAvatarUpload = (file) => {
const isImage = file.type.startsWith('image/');
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isImage) {
ElMessage.error('上传文件只能是图片格式!');
}
if (!isLt1M) {
ElMessage.error('上传头像图片大小不能超过 2MB!');
if (!isLt2M) {
ElMessage.error('上传图片大小不能超过 2MB!');
}
return isJPG && isLt1M;
return isImage && isLt2M;
};
// 超出限制
const handleExceed = (files, uploadFiles, number) => {
ElMessage({
message: `最多上传${number}张照片`,
type: 'warning',
});
const handleExceed = (number) => {
ElMessage.warning(`最多只能上传${number}张图片！`);
};
// 预览
const handlePreview = (file) => {
data.dialogImageUrl = file.url;
data.dialogVisibleImg = true;
};
const handleClose = () => {
if (formDataRef.value) {
formDataRef.value.resetFields();
}
formDataRef.value?.resetFields();
ruleForm.id = null;
ruleForm.username = '';
ruleForm.mobile = '';
ruleForm.driver_license = [];
ruleForm.id_card = [];
data.dialogVisible = false;
data.isEdit = false;
};
// 保存按钮
const onClickSave = () => {
if (formDataRef.value) {
formDataRef.value.validate((valid) => {
if (valid) {
const params = {
username: ruleForm.username,
mobile: ruleForm.mobile,
status: ruleForm.status,
carNumber: ruleForm.carNumber,
remark: ruleForm.remark,
};
params.driverLicense = ruleForm.driverImg.length > 0 ? ruleForm.driverImg.map((item) => item.url).join(',') : '';
params.drivingLicense = ruleForm.licenseImg.length > 0 ? ruleForm.licenseImg.map((item) => item.url).join(',') : '';
params.carImg = ruleForm.carImg.length > 0 ? ruleForm.carImg.map((item) => item.url).join(',') : '';
params.recordCode = ruleForm.codeImg.length > 0 ? ruleForm.codeImg.map((item) => item.url).join(',') : '';
params.idCard = ruleForm.idCardImg.length > 0 ? ruleForm.idCardImg.map((item) => item.url).join(',') : '';
// params.recordCode = ruleForm.codeImg.length > 0 ? ruleForm.codeImg[0].url : '';
data.saveLoading = true;
if (data.title === '新增司机') {
driverAdd(params)
.then((res) => {
data.saveLoading = false;
if (res.code === 200) {
ElMessage({
message: res.msg,
type: 'success',
});
emits('success');
if (formDataRef.value) {
formDataRef.value.resetFields();
data.dialogVisible = false;
} else {
data.saveLoading = false;
ElMessage.error(res.msg);
}
}
})
.catch((err) => {
data.saveLoading = false;
});
formDataRef.value.validate((valid) => {
if (valid) {
data.saveLoading = true;
const params = {
id: ruleForm.id,
username: ruleForm.username,
mobile: ruleForm.mobile,
driverLicense: ruleForm.driver_license.length > 0 ? ruleForm.driver_license.map((item) => item.url).join(',') : '',
idCard: ruleForm.id_card.length > 0 ? ruleForm.id_card.map((item) => item.url).join(',') : '',
};
console.log('提交数据:', params);
const apiCall = data.isEdit ? driverEdit(params) : driverAdd(params);
apiCall.then((res) => {
data.saveLoading = false;
if (res.code === 200) {
ElMessage.success(data.isEdit ? '编辑成功' : '新增成功');
handleClose();
emits('success');
} else {
params.id = ruleForm.id;
driverEdit(params)
.then((res) => {
data.saveLoading = false;
if (res.code === 200) {
ElMessage({
message: res.msg,
type: 'success',
});
emits('success');
if (formDataRef.value) {
formDataRef.value.resetFields();
data.dialogVisible = false;
} else {
data.saveLoading = false;
ElMessage.error(res.msg);
}
}
})
.catch((err) => {
data.saveLoading = false;
});
ElMessage.error(res.msg || '操作失败');
}
} else {
console.log('error submit!');
}
});
}
}).catch((error) => {
data.saveLoading = false;
console.error('保存失败:', error);
ElMessage.error('保存失败，请稍后重试');
});
}
});
};
const onShowDialog = (row) => {
data.title = row ? '编辑司机' : '新增司机';
const onShowDialog = (row = null) => {
data.dialogVisible = true;
if (formDataRef.value) {
formDataRef.value.resetFields();
}
data.isEdit = !!row;
data.title = row ? '编辑司机' : '新增司机';
if (row) {
nextTick(() => {
ruleForm.id = row.id;
ruleForm.username = row.username; // 司机姓名
ruleForm.mobile = row.mobile; // 司机手机号
ruleForm.carNumber = row.car_number; // 车牌号 - 修复字段名
ruleForm.status = row.status || '1'; // 账号状态 - 添加默认值
ruleForm.remark = row.remark; // 备注
ruleForm.driverImg = row.driver_license
? getImageList(row.driver_license).map((item) => {
return {
url: item,
};
})
: [];
ruleForm.licenseImg = row.driving_license
? getImageList(row.driving_license).map((item) => {
return {
url: item,
};
})
: [];
ruleForm.carImg = row.car_img
? getImageList(row.car_img).map((item) => {
return {
url: item,
};
})
: [];
ruleForm.codeImg = row.record_code
? getImageList(row.record_code).map((item) => {
return {
url: item,
};
})
: [];
ruleForm.idCardImg = row.id_card
? getImageList(row.id_card).map((item) => {
return {
url: item,
};
})
: [];
});
ruleForm.id = row.id;
ruleForm.username = row.username || '';
ruleForm.mobile = row.mobile || '';
ruleForm.driver_license = row.driver_license ? row.driver_license.split(',').map(url => ({ url: url.trim() })) : [];
ruleForm.id_card = row.id_card ? row.id_card.split(',').map(url => ({ url: url.trim() })) : [];
}
};
// 处理逗号分隔的图片URL
const getImageList = (imageUrl) => {
if (!imageUrl || imageUrl.trim() === '') {
return [];
}
// 按逗号分割并过滤空字符串
return imageUrl.split(',').map(url => url.trim()).filter(url => url !== '');
};
defineExpose({
onShowDialog,
});
defineExpose({ onShowDialog });
</script>
<style lang="less" scoped></style>
<style scoped>
.dialog-footer {
display: flex;
justify-content: flex-end;
}
</style>