添加新的需求
This commit is contained in:
xuqiuyun
437
pc-cattle-transportation/src/views/userManage/driverDialog.vue
Normal file
437
pc-cattle-transportation/src/views/userManage/driverDialog.vue
Normal file
@@ -0,0 +1,437 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user