438 lines
17 KiB
Vue
438 lines
17 KiB
Vue
|
<template>
|
||
|
|
<el-dialog v-model="data.dialogVisible" :title="data.title" :before-close="handleClose" style="width: 650px; padding-bottom: 20px">
|
||
|
|
<el-form ref="formDataRef" :model="ruleForm" :rules="rules" label-width="auto">
|
||
|
|
<el-form-item label="司机姓名" prop="username">
|
||
|
|
<el-input v-model="ruleForm.username" placeholder="请输入司机姓名" clearable></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
<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-upload
|
||
|
|
:limit="2"
|
||
|
|
list-type="picture-card"
|
||
|
|
action="/api/common/upload"
|
||
|
|
:on-success="
|
||
|
|
(response, file, fileList) => {
|
||
|
|
return handleAvatarSuccess(response, file, fileList, 'driverImg');
|
||
|
|
}
|
||
|
|
"
|
||
|
|
:on-preview="handlePreview"
|
||
|
|
:on-remove="
|
||
|
|
(file, fileList) => {
|
||
|
|
return handleRemove(file, fileList, 'driverImg');
|
||
|
|
}
|
||
|
|
"
|
||
|
|
:before-upload="beforeAvatarUpload"
|
||
|
|
:file-list="ruleForm.driverImg"
|
||
|
|
: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="licenseImg">
|
||
|
|
<el-upload
|
||
|
|
:limit="2"
|
||
|
|
list-type="picture-card"
|
||
|
|
action="/api/common/upload"
|
||
|
|
:on-success="
|
||
|
|
(response, file, fileList) => {
|
||
|
|
return handleAvatarSuccess(response, file, fileList, 'licenseImg');
|
||
|
|
}
|
||
|
|
"
|
||
|
|
:on-preview="handlePreview"
|
||
|
|
:on-remove="
|
||
|
|
(file, fileList) => {
|
||
|
|
return handleRemove(file, fileList, 'licenseImg');
|
||
|
|
}
|
||
|
|
"
|
||
|
|
:before-upload="beforeAvatarUpload"
|
||
|
|
:file-list="ruleForm.licenseImg"
|
||
|
|
: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="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">
|
||
|
|
<el-button :loading="data.saveLoading" type="primary" @click="onClickSave">保存</el-button>
|
||
|
|
<el-button @click="handleClose">取消</el-button>
|
||
|
|
</span>
|
||
|
|
</template>
|
||
|
|
<el-dialog v-model="data.dialogVisibleImg">
|
||
|
|
<img w-full :src="data.dialogImageUrl" alt="Preview Image" />
|
||
|
|
</el-dialog>
|
||
|
|
</el-dialog>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { ref, reactive, onMounted, nextTick } from '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,
|
||
|
|
title: '',
|
||
|
|
saveLoading: false,
|
||
|
|
dialogVisibleImg: false,
|
||
|
|
dialogImageUrl: '',
|
||
|
|
});
|
||
|
|
const ruleForm = reactive({
|
||
|
|
username: '', // 司机姓名
|
||
|
|
mobile: '', // 司机手机号
|
||
|
|
status: '', // 账号状态
|
||
|
|
carNumber: '', // 车牌号
|
||
|
|
driverImg: [], // 驾驶证
|
||
|
|
licenseImg: [], // 行驶证
|
||
|
|
codeImg: [], // 牧运通备案码
|
||
|
|
carImg: [], // 车头&车身照片
|
||
|
|
idCardImg: [], // 身份证前后面
|
||
|
|
remark: '', // 备注
|
||
|
|
});
|
||
|
|
|
||
|
|
const rules = reactive({
|
||
|
|
username: [{ required: true, message: '请输入司机姓名', trigger: 'blur' }],
|
||
|
|
mobile: [
|
||
|
|
{
|
||
|
|
required: true,
|
||
|
|
validator(rule, value, callback) {
|
||
|
|
if (!value) {
|
||
|
|
callback(new Error('请输入司机手机号'));
|
||
|
|
}
|
||
|
|
if (!checkMobile(value)) {
|
||
|
|
callback(new Error('请输入正确的手机号'));
|
||
|
|
}
|
||
|
|
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' }],
|
||
|
|
});
|
||
|
|
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 });
|
||
|
|
}
|
||
|
|
};
|
||
|
|
// 移除
|
||
|
|
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 格式!');
|
||
|
|
}
|
||
|
|
if (!isLt1M) {
|
||
|
|
ElMessage.error('上传头像图片大小不能超过 2MB!');
|
||
|
|
}
|
||
|
|
return isJPG && isLt1M;
|
||
|
|
};
|
||
|
|
// 超出限制
|
||
|
|
const handleExceed = (files, uploadFiles, number) => {
|
||
|
|
ElMessage({
|
||
|
|
message: `最多上传${number}张照片`,
|
||
|
|
type: 'warning',
|
||
|
|
});
|
||
|
|
};
|
||
|
|
// 预览
|
||
|
|
const handlePreview = (file) => {
|
||
|
|
data.dialogImageUrl = file.url;
|
||
|
|
data.dialogVisibleImg = true;
|
||
|
|
};
|
||
|
|
const handleClose = () => {
|
||
|
|
if (formDataRef.value) {
|
||
|
|
formDataRef.value.resetFields();
|
||
|
|
}
|
||
|
|
data.dialogVisible = 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;
|
||
|
|
});
|
||
|
|
} 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;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
console.log('error submit!');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
const onShowDialog = (row) => {
|
||
|
|
data.title = row ? '编辑司机' : '新增司机';
|
||
|
|
data.dialogVisible = true;
|
||
|
|
if (formDataRef.value) {
|
||
|
|
formDataRef.value.resetFields();
|
||
|
|
}
|
||
|
|
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,
|
||
|
|
};
|
||
|
|
})
|
||
|
|
: [];
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// 处理逗号分隔的图片URL
|
||
|
|
const getImageList = (imageUrl) => {
|
||
|
|
if (!imageUrl || imageUrl.trim() === '') {
|
||
|
|
return [];
|
||
|
|
}
|
||
|
|
// 按逗号分割并过滤空字符串
|
||
|
|
return imageUrl.split(',').map(url => url.trim()).filter(url => url !== '');
|
||
|
|
};
|
||
|
|
|
||
|
|
defineExpose({
|
||
|
|
onShowDialog,
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="less" scoped></style>
|