|
|
|
@@ -0,0 +1,501 @@ |
|
|
|
<template> |
|
|
|
<div> |
|
|
|
<crud-template |
|
|
|
:home-data="field" |
|
|
|
@btnSearch="btnSearch" |
|
|
|
:table-data="tableData" |
|
|
|
@refreshLeft="refreshLeft" |
|
|
|
@handleInfo="handleInfo" |
|
|
|
@CurrentChange="handleCurrentChange" |
|
|
|
@pageSizeChange=" |
|
|
|
(val) => { |
|
|
|
field.paging.currentPage = 1; |
|
|
|
field.paging.pageSize = val; |
|
|
|
getList(); |
|
|
|
} |
|
|
|
" |
|
|
|
> |
|
|
|
<template #search> |
|
|
|
<div class="date-label">车牌号:</div> |
|
|
|
<el-input |
|
|
|
maxlength="60" |
|
|
|
v-trim |
|
|
|
clearable |
|
|
|
v-model="searchForm.plateNum" |
|
|
|
placeholder="请输入车牌号" |
|
|
|
:style="{ width: '180px', margin: '0 10px 10px 0' }" |
|
|
|
> |
|
|
|
</el-input> |
|
|
|
|
|
|
|
<div class="date-label">手机号:</div> |
|
|
|
<el-input |
|
|
|
maxlength="60" |
|
|
|
v-trim |
|
|
|
clearable |
|
|
|
v-model="searchForm.mobile" |
|
|
|
placeholder="请输入手机号" |
|
|
|
:style="{ width: '180px', margin: '0 10px 10px 0' }" |
|
|
|
> |
|
|
|
</el-input> |
|
|
|
</template> |
|
|
|
<template #cardNum="slotProps"> |
|
|
|
<el-text class="mx-1" style="font-weight: normal">{{ |
|
|
|
cardHide(slotProps.scope.data) |
|
|
|
}}</el-text> |
|
|
|
</template> |
|
|
|
<template #gender="slotProps"> |
|
|
|
<el-text class="mx-1" style="font-weight: normal">{{ |
|
|
|
slotProps.scope.data == "1" ? "男" : "女" |
|
|
|
}}</el-text> |
|
|
|
</template> |
|
|
|
<template #useCharacter="slotProps"> |
|
|
|
<el-text class="mx-1" style="font-weight: normal">{{ |
|
|
|
getVehicleType(slotProps.scope.data) |
|
|
|
}}</el-text> |
|
|
|
</template> |
|
|
|
</crud-template> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<script setup lang="ts"> |
|
|
|
// @ts-ignore crudFrom模板 |
|
|
|
import CrudTemplate from "@/crud/index.vue"; |
|
|
|
import { ref, computed, onMounted } from "vue"; |
|
|
|
import $storeinitData from "@/store/initData"; //引入tab vuex |
|
|
|
import BaseService from "@/utils/baseService"; |
|
|
|
import { ElMessage } from "element-plus"; |
|
|
|
//车牌颜色 |
|
|
|
const VEHICLE_COLOR_TYPE = computed(() => { |
|
|
|
return $storeinitData.state.dictData["VEHICLE_COLOR_TYPE"] || []; |
|
|
|
}); |
|
|
|
const searchForm: any = ref({ |
|
|
|
plateNum: "", |
|
|
|
mobile: "", |
|
|
|
pageNo: "1", |
|
|
|
pageSize: "10", |
|
|
|
}); |
|
|
|
// 搜索重置 |
|
|
|
function refreshLeft() { |
|
|
|
field.value.paging.currentPage = 1; |
|
|
|
field.value.paging.total = 10; |
|
|
|
searchForm.value = { |
|
|
|
plateNum: "", |
|
|
|
mobile: "", |
|
|
|
pageNo: "1", |
|
|
|
pageSize: "10", |
|
|
|
}; |
|
|
|
tableData.value = []; |
|
|
|
} |
|
|
|
function cardHide(card) { |
|
|
|
const reg = /^(.{6})(?:\d+)(.{4})$/; |
|
|
|
const maskedIdCard = card.replace(reg, "$1******$2"); |
|
|
|
return maskedIdCard; |
|
|
|
} |
|
|
|
|
|
|
|
// 定义枚举对象 |
|
|
|
const vehicleType = { |
|
|
|
"1": "营运", |
|
|
|
"2": "非营运", |
|
|
|
"6": "特种车", |
|
|
|
"7": "挂车", |
|
|
|
"8": "应急救援车", |
|
|
|
"9": "J1 集装箱", |
|
|
|
"10": "J2集装箱", |
|
|
|
}; |
|
|
|
|
|
|
|
// 函数，用于根据 key 获取对应的 value |
|
|
|
function getVehicleType(key) { |
|
|
|
return vehicleType[key] || "未知类型"; // 如果 key 不存在，返回 "未知类型" |
|
|
|
} |
|
|
|
|
|
|
|
//详情 |
|
|
|
const handleInfo = (idx: any, row: any) => { |
|
|
|
console.log("点击了详情按钮---", idx, row); |
|
|
|
}; |
|
|
|
|
|
|
|
onMounted(() => { |
|
|
|
getList(); |
|
|
|
}); |
|
|
|
|
|
|
|
function handleCurrentChange(val: number) { |
|
|
|
field.value.paging.currentPage = val; |
|
|
|
getList(); |
|
|
|
} |
|
|
|
|
|
|
|
const tableData = ref([]); |
|
|
|
function btnSearch() { |
|
|
|
getList(); |
|
|
|
} |
|
|
|
|
|
|
|
function isChineseMobile(mobile) { |
|
|
|
const regex = /^1[3-9]\d{9}$/; |
|
|
|
return regex.test(mobile); |
|
|
|
} |
|
|
|
|
|
|
|
function isValidPlateNumber(plateNumber) { |
|
|
|
const regex = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/; |
|
|
|
return regex.test(plateNumber); |
|
|
|
} |
|
|
|
|
|
|
|
function isValidPlateNumber2(plateNumber) { |
|
|
|
const regex = /^([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[a-zA-Z](([DF]((?![IO])[a-zA-Z0-9](?![IO]))[0-9]{4})|([0-9]{5}[DF]))|[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1})$/; |
|
|
|
return regex.test(plateNumber); |
|
|
|
} |
|
|
|
|
|
|
|
function getList() { |
|
|
|
// if (!searchForm.value.plateNumber) { |
|
|
|
// ElMessage.error("请输入车牌号进行查询!"); |
|
|
|
// return; |
|
|
|
// } |
|
|
|
|
|
|
|
if (searchForm.value.plateNum) { |
|
|
|
if (!isValidPlateNumber(searchForm.value.plateNum) && !isValidPlateNumber2(searchForm.value.plateNum)) { |
|
|
|
ElMessage.error("车牌号格式错误!"); |
|
|
|
return; |
|
|
|
} |
|
|
|
} |
|
|
|
if (searchForm.value.mobile) { |
|
|
|
if (!isChineseMobile(searchForm.value.mobile)) { |
|
|
|
ElMessage.error("手机号格式错误!"); |
|
|
|
return; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
searchForm.value.pageNo = field.value.paging.currentPage; |
|
|
|
searchForm.value.pageSize = field.value.paging.pageSize; |
|
|
|
BaseService.post("IF01001202411271275", searchForm.value).then((res: any) => { |
|
|
|
if (res && res.statusCode === 0) { |
|
|
|
let bizContent = JSON.parse(res.bizContent); |
|
|
|
let data = JSON.parse(bizContent.bizContent); |
|
|
|
console.log("===================================="); |
|
|
|
console.log(data); |
|
|
|
console.log("===================================="); |
|
|
|
tableData.value = data.data; |
|
|
|
field.value.paging.total = data.totalCount; |
|
|
|
} else { |
|
|
|
ElMessage.error(res.errorMsg); |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
const form = { |
|
|
|
formLabelWidth: "100px", |
|
|
|
width: "50%", |
|
|
|
type: "input", |
|
|
|
}; |
|
|
|
const field = ref({ |
|
|
|
tabSize: "small", //Table 的尺寸 large / default /small (默认default) |
|
|
|
searchShow: true, //是否显示搜索模块(默认false) |
|
|
|
border: true, //是否添加边框(默认false) |
|
|
|
// dialogInfoCustom: true, |
|
|
|
dialogCustom: true, //自定义Dialog (默认false) |
|
|
|
dialogFooter: true, //隐藏弹窗页脚显示 (默认false) |
|
|
|
dialogWidth: "50%", //dialog宽度 (默认40%) |
|
|
|
crudChildShow: true, //是否显示CURD子操作栏 (默认true) |
|
|
|
paginStart: true, //是否显示分页查询 (默认false) |
|
|
|
isPageSizes: true, |
|
|
|
pageLayout: "total, sizes, prev, pager, next", |
|
|
|
titleDialog: "", //table 标题 |
|
|
|
pageSizes: [10, 20, 30, 100], //pagesize的值 |
|
|
|
paging: { |
|
|
|
pageSize: 10, |
|
|
|
currentPage: 1, |
|
|
|
total: 0, |
|
|
|
}, |
|
|
|
crudShow: true, //是否显示CURD操作栏 (默认true) |
|
|
|
crud: { |
|
|
|
//配合crudShow，为true是可配置此 |
|
|
|
add: false, |
|
|
|
edit: false, |
|
|
|
delete: false, |
|
|
|
derive: false, //导出 |
|
|
|
search: false, |
|
|
|
refresh: false, |
|
|
|
}, |
|
|
|
searchOperation: { |
|
|
|
isTransferMachine: false, |
|
|
|
minioBucket: { bucket: "sett-minio" }, //指定桶为sett-minio |
|
|
|
}, |
|
|
|
tableSize: -1, |
|
|
|
operateShow: true, //是否为表格添加操作栏(默认true) |
|
|
|
operateTitle: "操作", //操作栏标题(默认为"") |
|
|
|
operateFixed: false, //操作栏是否固定(默认false) |
|
|
|
operateWidth: "80", //操作栏宽度 |
|
|
|
operate: { |
|
|
|
edit: false, //是否编辑(默认true) |
|
|
|
delete: false, //是否删除(默认true) |
|
|
|
announcement: false, // 公告 |
|
|
|
remark: false, // 查看 |
|
|
|
// info: IsPermission(route, 'INFO_LIST'), //详情 |
|
|
|
info: true, //详情 |
|
|
|
forbidden: false, // 禁用 |
|
|
|
enable: false, // 启用 |
|
|
|
authorization: false, // 授权 |
|
|
|
cancel: false, // 取消订单 |
|
|
|
writeOff: false, // 注销 |
|
|
|
make: false, // 补缴 |
|
|
|
// isSettleToLead: IsPermission(route, "TO_LEAD_LIST"), // 结算导入 |
|
|
|
// isAnnexDetails: IsPermission(route, "DETAILED_ATTACHMENT"), // 附件详情 |
|
|
|
}, |
|
|
|
extend: [ |
|
|
|
{ |
|
|
|
type: "index", |
|
|
|
label: "序号", |
|
|
|
}, |
|
|
|
], |
|
|
|
field: [ |
|
|
|
{ |
|
|
|
label: "路网-用户编号", |
|
|
|
prop: "openId", |
|
|
|
width: "250px", |
|
|
|
hide: true, |
|
|
|
form, |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: "mobile", |
|
|
|
label: "手机号", |
|
|
|
width: "100px", |
|
|
|
form, |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: "姓名", |
|
|
|
prop: "realName", |
|
|
|
form, |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: "address", |
|
|
|
label: "地址", |
|
|
|
width: "100px", |
|
|
|
hide: true, |
|
|
|
form, |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: "birthday", |
|
|
|
label: "生日", |
|
|
|
width: "100px", |
|
|
|
hide: true, |
|
|
|
form, |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: "gender", |
|
|
|
label: "性别", |
|
|
|
width: "100px", |
|
|
|
hide: true, |
|
|
|
form: { |
|
|
|
// type: "input", |
|
|
|
slotSetEdit: true, |
|
|
|
formLabelWidth: "100px", |
|
|
|
width: "50%", |
|
|
|
slotSetInfo: true, |
|
|
|
slotSetNameInfo: "gender", |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: "nation", |
|
|
|
label: "民族", |
|
|
|
width: "100px", |
|
|
|
hide: true, |
|
|
|
form, |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: "signOrg", |
|
|
|
label: "签发机关", |
|
|
|
width: "100px", |
|
|
|
hide: true, |
|
|
|
form, |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: "startDate", |
|
|
|
label: "有效限制开始", |
|
|
|
width: "100px", |
|
|
|
hide: true, |
|
|
|
form, |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: "endDate", |
|
|
|
label: "有效限制结束", |
|
|
|
width: "100px", |
|
|
|
hide: true, |
|
|
|
form, |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: "身份证号", |
|
|
|
prop: "cardNum", |
|
|
|
hide: true, |
|
|
|
form: { |
|
|
|
// type: "input", |
|
|
|
slotSetEdit: true, |
|
|
|
formLabelWidth: "100px", |
|
|
|
width: "50%", |
|
|
|
slotSetInfo: true, |
|
|
|
slotSetNameInfo: "cardNum", |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
{ |
|
|
|
label: "身份证正面照", |
|
|
|
prop: "identPoimageUrl", |
|
|
|
type: "img", |
|
|
|
style: "width:120px;height:120px", |
|
|
|
form: { |
|
|
|
formLabelWidth: "100px", |
|
|
|
width: "50%", |
|
|
|
type: "uploadImg", |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: "身份证反面照", |
|
|
|
prop: "identNeimageUrl", |
|
|
|
type: "img", |
|
|
|
style: "width:120px;height:120px", |
|
|
|
// isAmount: true, |
|
|
|
form: { |
|
|
|
formLabelWidth: "100px", |
|
|
|
width: "50%", |
|
|
|
type: "uploadImg", |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
{ |
|
|
|
prop: "vin", |
|
|
|
label: "车架号", |
|
|
|
width: "100px", |
|
|
|
hide: true, |
|
|
|
form, |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: "engineNum", |
|
|
|
label: "发动机号", |
|
|
|
width: "100px", |
|
|
|
hide: true, |
|
|
|
form, |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: "issueDate", |
|
|
|
label: "发证日期", |
|
|
|
width: "100px", |
|
|
|
hide: true, |
|
|
|
form, |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: "vehicleName", |
|
|
|
label: "姓名（车辆所有人）", |
|
|
|
width: "100px", |
|
|
|
hide: true, |
|
|
|
form, |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: "主页车牌号", |
|
|
|
prop: "frontPlateNum", |
|
|
|
form, |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: "副页车牌号", |
|
|
|
prop: "reversePlateNum", |
|
|
|
form, |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: "注册日期", |
|
|
|
prop: "registerDate", |
|
|
|
hide: true, |
|
|
|
form, |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: "useCharacter", |
|
|
|
label: "使用性质", |
|
|
|
width: "100px", |
|
|
|
hide: true, |
|
|
|
form: { |
|
|
|
// type: "input", |
|
|
|
slotSetEdit: true, |
|
|
|
formLabelWidth: "100px", |
|
|
|
width: "50%", |
|
|
|
slotSetInfo: true, |
|
|
|
slotSetNameInfo: "useCharacter", |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: "车辆类型", |
|
|
|
prop: "vehicleType", |
|
|
|
hide: true, |
|
|
|
form, |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: "品牌型号", |
|
|
|
prop: "model", |
|
|
|
hide: true, |
|
|
|
form, |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: "档案编号", |
|
|
|
prop: "fileNum", |
|
|
|
hide: true, |
|
|
|
form, |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: "核定人数", |
|
|
|
prop: "approvedCount", |
|
|
|
hide: true, |
|
|
|
form, |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: "总质量", |
|
|
|
prop: "totalMass", |
|
|
|
hide: true, |
|
|
|
form, |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: "整备质量", |
|
|
|
prop: "maintenanceMass", |
|
|
|
hide: true, |
|
|
|
form, |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: "核定载质量", |
|
|
|
prop: "permittedWeight", |
|
|
|
hide: true, |
|
|
|
form, |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: "车辆尺寸", |
|
|
|
prop: "outsideDimensions", |
|
|
|
hide: true, |
|
|
|
form, |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: "准牵引总质量", |
|
|
|
prop: "permittedTowWeight", |
|
|
|
hide: true, |
|
|
|
form, |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: "行驶证主页", |
|
|
|
prop: "licensePoimageUrl", |
|
|
|
type: "img", |
|
|
|
style: "width:120px;height:120px", |
|
|
|
form: { |
|
|
|
formLabelWidth: "100px", |
|
|
|
width: "50%", |
|
|
|
type: "uploadImg", |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: "行驶证副页", |
|
|
|
prop: "licenseNeimageUrl", |
|
|
|
type: "img", |
|
|
|
style: "width:120px;height:120px", |
|
|
|
form: { |
|
|
|
formLabelWidth: "100px", |
|
|
|
width: "50%", |
|
|
|
type: "uploadImg", |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
{ |
|
|
|
label: "创建时间", |
|
|
|
prop: "insertTime", |
|
|
|
form, |
|
|
|
}, |
|
|
|
], |
|
|
|
}); |
|
|
|
</script> |
|
|
|
<style lang="scss" scoped></style> |
