|
|
|
@@ -0,0 +1,422 @@ |
|
|
|
<template> |
|
|
|
<div> |
|
|
|
<crud-template :ref="(el) => (crudRef = el)" :home-data="field" @btnSearch="btnSearch" :table-data="tableData" v-loading="loading" |
|
|
|
@refreshLeft="refreshLeft" |
|
|
|
@handleInfo="handleInfo" |
|
|
|
@add="add" |
|
|
|
@submit="submit" |
|
|
|
@cancel="cancel" |
|
|
|
@CurrentChange="handleCurrentChange" @pageSizeChange=" |
|
|
|
|
|
|
|
(val) => { |
|
|
|
field.paging.currentPage = 1 |
|
|
|
field.paging.pageSize = val |
|
|
|
getList() |
|
|
|
} |
|
|
|
"> |
|
|
|
<template #search> |
|
|
|
<el-input maxlength="60" v-trim clearable v-model="searchForm.plateNum" placeholder="请输入车牌号" |
|
|
|
:style="{ width: '180px', margin: '0 10px 10px 0' }"> |
|
|
|
</el-input> |
|
|
|
<el-select clearable v-model="searchForm.plateColor" style="width: 180px" placeholder="请选择车牌颜色" |
|
|
|
filterable> |
|
|
|
<el-option v-for="item in VEHICLE_COLOR_TYPE" :key="item.value" :label="item.label" |
|
|
|
:value="item.value"/> |
|
|
|
</el-select> |
|
|
|
|
|
|
|
<el-select clearable v-model="searchForm.state" style="width: 180px" placeholder="请选择状态" |
|
|
|
filterable> |
|
|
|
<el-option v-for="item in stateList" :key="item.value" :label="item.label" |
|
|
|
:value="item.value"/> |
|
|
|
</el-select> |
|
|
|
</template> |
|
|
|
|
|
|
|
<template #operation="{ scope }"> |
|
|
|
<el-button :type="scope.row.state == '有效' ? 'danger' : 'success'" @click="handleState(scope.row)" |
|
|
|
size="small" > |
|
|
|
{{ scope.row.state == '有效' ? '停用' : '启用' }} |
|
|
|
</el-button> |
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
|
|
</crud-template> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<!-- 九州订单信息查询 --> |
|
|
|
<script setup lang="ts"> |
|
|
|
// @ts-ignore crudFrom模板 |
|
|
|
import CrudTemplate from "@/crud/index.vue"; |
|
|
|
import {computed, onMounted, ref, toRaw} from "vue"; |
|
|
|
import $storeinitData from "@/store/initData"; //引入tab vuex |
|
|
|
import BaseService from "@/utils/baseService"; |
|
|
|
import {IObject} from "@/types/interface"; |
|
|
|
import {useRouter} from 'vue-router' |
|
|
|
import type {Action} from 'element-plus' |
|
|
|
import {ElMessage, ElMessageBox} from 'element-plus' |
|
|
|
// 或者在 main.js 中全局注册 |
|
|
|
//车牌颜色 |
|
|
|
const VEHICLE_COLOR_TYPE = computed(() => { |
|
|
|
return $storeinitData.state.dictData["VEHICLE_COLOR_TYPE"] || []; |
|
|
|
}); |
|
|
|
//证件类型 |
|
|
|
const CERTIFICATE_TYPE = computed(() => { |
|
|
|
return $storeinitData.state.dictData["CERTIFICATE_TYPE"] || []; |
|
|
|
}); |
|
|
|
const plateColorMap = { |
|
|
|
'0': '蓝牌', |
|
|
|
'1': '黄牌', |
|
|
|
'2': '黑牌', |
|
|
|
'3': '白色', |
|
|
|
'4': '渐变绿色', |
|
|
|
'5': '黄绿双拼色', |
|
|
|
'6': '蓝白渐变色', |
|
|
|
'9': '未确定', |
|
|
|
'11': '绿色', |
|
|
|
'12': '红色', |
|
|
|
}; |
|
|
|
const stateList = ref([ |
|
|
|
{ |
|
|
|
value: 'NORMAL', |
|
|
|
label: '有效', |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 'INVALID', |
|
|
|
label: '无效', |
|
|
|
} |
|
|
|
]); |
|
|
|
const searchForm: any = ref({ |
|
|
|
plateNum: "", |
|
|
|
plateColor: "", |
|
|
|
|
|
|
|
state: "", |
|
|
|
pageNo: "1", |
|
|
|
pageSize: "10", |
|
|
|
}); |
|
|
|
const agencyOptions = ref<any>([]) |
|
|
|
const getAgencyOptions = () => { |
|
|
|
BaseService.post('/userw/agency/listByNameLike', {}).then( |
|
|
|
(res: any) => { |
|
|
|
if (res && res.code === 0) { |
|
|
|
let bizContent = res.data |
|
|
|
console.log('====interfaceConfig', bizContent) |
|
|
|
agencyOptions.value = bizContent.map((item) => { |
|
|
|
return { |
|
|
|
value: item.key, |
|
|
|
label: item.value, |
|
|
|
} |
|
|
|
|
|
|
|
}) |
|
|
|
} else { |
|
|
|
ElMessage.error(res.message) |
|
|
|
} |
|
|
|
} |
|
|
|
) |
|
|
|
} |
|
|
|
const username = computed(() => { |
|
|
|
return $storeinitData.getters.userName || '' |
|
|
|
}) |
|
|
|
|
|
|
|
const currentRow = ref<IObject | null>(null); |
|
|
|
const detail = ref({}) |
|
|
|
const loading = ref(false) |
|
|
|
// 停用启用 |
|
|
|
function handleState(row: IObject) { |
|
|
|
const rawRow = toRaw(row); |
|
|
|
ElMessageBox.alert(`确定要${rawRow.state == '有效' ? '停用' : '启用'}车牌号为 ${rawRow.plateNum} 的拒付停车场流水限制吗？`, |
|
|
|
rawRow.state == '有效' ? '停用确认' : '启用确认', { |
|
|
|
confirmButtonText: '确认', |
|
|
|
callback: (action: Action) => { |
|
|
|
if (action === 'confirm') { |
|
|
|
loading.value=true |
|
|
|
// 用户点击了确定，执行停用/启用操作 |
|
|
|
rejectPayVehicleId.value = rawRow.id |
|
|
|
BaseService.post("IF01001202508261370", { |
|
|
|
rejectPayVehicleId: rawRow.id, |
|
|
|
vehicleId: rawRow.vehicleId, |
|
|
|
createBy: username.value |
|
|
|
}).then((res: any) => { |
|
|
|
if (res && res.statusCode === 0) { |
|
|
|
getList() |
|
|
|
loading.value=false |
|
|
|
} else { |
|
|
|
loading.value=false |
|
|
|
ElMessage.error(res.errorMsg); |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
}, |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
let rejectPayVehicleId = ref(); |
|
|
|
|
|
|
|
// 搜索重置 |
|
|
|
function refreshLeft() { |
|
|
|
field.value.paging.currentPage = 1; |
|
|
|
field.value.paging.total = 10; |
|
|
|
searchForm.value = { |
|
|
|
plateNum: "", |
|
|
|
plateColor: "", |
|
|
|
state: "", |
|
|
|
pageNo: "1", |
|
|
|
pageSize: "10", |
|
|
|
}; |
|
|
|
tableData.value = []; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
//详情 |
|
|
|
const handleInfo = (idx: any, row: any) => { |
|
|
|
console.log("点击了详情按钮---", idx, row); |
|
|
|
}; |
|
|
|
|
|
|
|
function add() { |
|
|
|
typeOption.value = "add"; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const typeOption = ref(""); |
|
|
|
function cancel() { |
|
|
|
crudRef.value.reset(); |
|
|
|
crudRef.value.dialogFormVisible = false; |
|
|
|
} |
|
|
|
function submit(data: any) { |
|
|
|
let s = isValidPlateNumber(data.plateNum) |
|
|
|
if (!s){ |
|
|
|
ElMessage.error("请输入正确的车牌号"); |
|
|
|
return |
|
|
|
} |
|
|
|
data.opName =username.value |
|
|
|
let datas = JSON.parse(JSON.stringify(toRaw(data))); |
|
|
|
BaseService.post("IF01001202508261369", datas).then((res: any) => { |
|
|
|
if (res && res.statusCode === 0) { |
|
|
|
ElMessage.success("操作成功"); |
|
|
|
getList(); |
|
|
|
cancel(); |
|
|
|
} else { |
|
|
|
ElMessage.error(res.errorMsg); |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
const crudRef = ref(); |
|
|
|
onMounted(() => { |
|
|
|
getAgencyOptions() |
|
|
|
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,2}$/; |
|
|
|
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.plateNum) { |
|
|
|
if (!searchForm.value.plateColor) { |
|
|
|
ElMessage.error("请输入车牌号、车牌颜色进行查询!"); |
|
|
|
return; |
|
|
|
} |
|
|
|
} |
|
|
|
if (searchForm.value.plateColor) { |
|
|
|
if (!searchForm.value.plateNum) { |
|
|
|
ElMessage.error("请输入车牌号、车牌颜色进行查询!"); |
|
|
|
return; |
|
|
|
} |
|
|
|
} |
|
|
|
searchForm.value.pageNo = field.value.paging.currentPage; |
|
|
|
searchForm.value.pageSize = field.value.paging.pageSize; |
|
|
|
BaseService.post("IF01001202508261371", { |
|
|
|
plateNum: searchForm.value.plateNum, |
|
|
|
plateColor: searchForm.value.plateColor, |
|
|
|
state: searchForm.value.state, |
|
|
|
pageNo: searchForm.value.pageNo, |
|
|
|
pageSize: searchForm.value.pageSize |
|
|
|
}).then((res: any) => { |
|
|
|
if (res && res.statusCode === 0) { |
|
|
|
let bizContent = JSON.parse(res.bizContent); |
|
|
|
let data = JSON.parse(bizContent.bizContent); |
|
|
|
|
|
|
|
tableData.value = data.data; |
|
|
|
if (tableData.value.length > 0) { |
|
|
|
tableData.value.forEach((item, index) => { |
|
|
|
const parts = item.vehicleId.split("_") |
|
|
|
item.plateNum = parts[0] |
|
|
|
item.plateColor = parts[1] |
|
|
|
item.state = item.state == 'NORMAL' ? '有效' : '无效' |
|
|
|
}) |
|
|
|
} |
|
|
|
field.value.paging.total = data.totalCount; |
|
|
|
} else { |
|
|
|
ElMessage.error(res.errorMsg); |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
//或取路由传入过来的对象数据 |
|
|
|
const route = useRouter() |
|
|
|
const formLabelWidth = '180px' |
|
|
|
const form = { |
|
|
|
formLabelWidth: "100px", |
|
|
|
width: "100%", |
|
|
|
type: "input", |
|
|
|
}; |
|
|
|
const field = ref({ |
|
|
|
tabSize: "small", //Table 的尺寸 large / default /small (默认default) |
|
|
|
searchShow: true, //是否显示搜索模块(默认false) |
|
|
|
border: true, //是否添加边框(默认false) |
|
|
|
dialogInfoCustom: false, |
|
|
|
dialogCustom: false, //自定义Dialog (默认false) |
|
|
|
dialogFooter: false, //隐藏弹窗页脚显示 (默认false) |
|
|
|
dialogWidth: "40%", //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: true, |
|
|
|
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: "120", //操作栏宽度 |
|
|
|
operate: { |
|
|
|
// edit: tSConstructSignatureDeclaration, //是否编辑(默认true) |
|
|
|
edit: false, //是否编辑(默认true) |
|
|
|
delete: false, //是否删除(默认true) |
|
|
|
announcement: false, // 公告 |
|
|
|
remark: false, // 查看 |
|
|
|
// info: IsPermission(route, 'INFO_LIST'), //详情 |
|
|
|
info: false, //详情 |
|
|
|
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: "plateNum", |
|
|
|
// form: {hide: true}, |
|
|
|
form: { |
|
|
|
formLabelWidth: "110px", |
|
|
|
width: "100%", |
|
|
|
type: "input", |
|
|
|
required: true, |
|
|
|
// disabled: true, |
|
|
|
// readonly: true, // 设置为只读 |
|
|
|
// 其他表单配置（如校验规则等） |
|
|
|
|
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: "车牌颜色", |
|
|
|
prop: "plateColor", |
|
|
|
// form: {hide: true}, |
|
|
|
listData: VEHICLE_COLOR_TYPE, |
|
|
|
form: { |
|
|
|
formLabelWidth: "110px", |
|
|
|
width: "100%", |
|
|
|
// disabled: true, |
|
|
|
// readonly: true, // 设置为只读 |
|
|
|
required: true, |
|
|
|
type: 'select', |
|
|
|
listData: VEHICLE_COLOR_TYPE, |
|
|
|
|
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: "state", |
|
|
|
label: "状态", |
|
|
|
// form, |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: "stateTime", |
|
|
|
label: "状态变化时间", |
|
|
|
// form, |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: "insertTime", |
|
|
|
label: "新增时间", |
|
|
|
// form, |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: "opName", |
|
|
|
label: "操作人", |
|
|
|
// form, |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: "reason", |
|
|
|
label:"原因", |
|
|
|
form: { |
|
|
|
// formLabelWidth: "110px", |
|
|
|
width: "100%", |
|
|
|
type: "input", |
|
|
|
required: true, |
|
|
|
placeholder: "请输入原因说明...", // 占位符 |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
], |
|
|
|
}); |
|
|
|
</script> |
|
|
|
<style lang="scss" scoped></style> |
