<!--
|
* @Author: weilGit
|
* @Date: 2025-07-10 09:18:41
|
* @LastEditors: weilGit
|
* @LastEditTime: 2025-07-14 15:11:50
|
* @Description: XXX
|
* @FilePath: \web-admin\src\views\vehicle\registration\index.vue
|
-->
|
<template>
|
<div class="divBox">
|
<el-card class="box-card">
|
<div class="clearfix">
|
<div class="container">
|
<el-form
|
ref="vehicleInfo"
|
size="small"
|
label-width="70px"
|
inline
|
>
|
<el-form-item label="身份证号">
|
<el-input
|
v-model="tableFrom.idCard"
|
placeholder="请输入身份证号"
|
class="selWidth"
|
size="small"
|
clearable
|
/>
|
</el-form-item>
|
<el-form-item label="姓名">
|
<el-input
|
v-model="tableFrom.name"
|
placeholder="请输入姓名"
|
class="selWidth"
|
size="small"
|
clearable
|
/>
|
</el-form-item>
|
<el-form-item label="手机号">
|
<el-input
|
v-model="tableFrom.phone"
|
placeholder="请输入手机号"
|
class="selWidth"
|
size="small"
|
clearable
|
/>
|
</el-form-item>
|
<el-form-item label="车牌号">
|
<el-input
|
v-model="tableFrom.licensePlate"
|
placeholder="请输入车牌号"
|
class="selWidth"
|
size="small"
|
clearable
|
/>
|
</el-form-item>
|
<el-form-item label="装卸区域">
|
<el-select
|
v-model="tableFrom.loadingAreaCode"
|
clearable
|
placeholder="请选择"
|
class="selWidth"
|
>
|
<el-option
|
v-for="item in areaOptions"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="订单类型">
|
<el-select
|
v-model="tableFrom.orderTypeCode"
|
clearable
|
placeholder="请选择"
|
class="selWidth"
|
>
|
<el-option
|
v-for="item in orderTypeOptions"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="装卸数量">
|
<el-input
|
v-model="tableFrom.loadUnloadQtyMin"
|
placeholder="最小值"
|
class="smallSelW"
|
size="small"
|
clearable
|
/>
|
～
|
<el-input
|
v-model="tableFrom.loadUnloadQtyMax"
|
placeholder="最大值"
|
class="smallSelW"
|
size="small"
|
clearable
|
/>
|
</el-form-item>
|
<el-form-item label="单位">
|
<el-select
|
v-model="tableFrom.unitCode"
|
clearable
|
placeholder="请选择"
|
class="selWidth"
|
>
|
<el-option
|
v-for="item in unitOptions"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="车辆状态">
|
<el-select
|
v-model="tableFrom.vehicleStatusCode"
|
clearable
|
placeholder="请选择"
|
class="selWidth"
|
>
|
<el-option
|
v-for="item in vehicleStatusOptions"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="货物状态">
|
<el-select
|
v-model="tableFrom.goodsStatusCode"
|
clearable
|
placeholder="请选择"
|
class="selWidth"
|
>
|
<el-option
|
v-for="item in goodsStatusOptions"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="排队号码">
|
<el-input
|
v-model="tableFrom.queueNumber"
|
placeholder="请输入排队号码"
|
class="selWidth"
|
size="small"
|
clearable
|
/>
|
</el-form-item>
|
<el-form-item label="事由">
|
<el-select
|
v-model="tableFrom.reasonCode"
|
clearable
|
placeholder="请选择"
|
class="selWidth"
|
>
|
<el-option
|
v-for="item in originOptions"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
/>
|
</el-select>
|
</el-form-item>
|
|
<el-form-item label="登记时间">
|
<el-date-picker
|
v-model="timeVal"
|
value-format="yyyy-MM-dd"
|
format="yyyy-MM-dd"
|
size="small"
|
type="daterange"
|
placement="bottom-end"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
style="width: 20vw"
|
/>
|
</el-form-item>
|
<el-form-item>
|
<el-button
|
type="primary"
|
size="small"
|
@click="getList(1)"
|
>
|
查询
|
</el-button>
|
</el-form-item>
|
<el-form-item>
|
<el-button
|
size="small"
|
@click="resetForm('vehicleInfo')"
|
>
|
重置
|
</el-button>
|
</el-form-item>
|
</el-form>
|
<el-button
|
v-hasPermi="['admin:vehicle:add']"
|
size="small"
|
type="primary"
|
class="mr10"
|
@click="handleAddVehicle()"
|
>
|
添加车辆信息
|
</el-button>
|
</div>
|
</div>
|
</el-card>
|
<el-card v-show="showPrint">
|
<div class="print-dom">
|
<div
|
id="printArea"
|
class="print-dom-box"
|
>
|
<div
|
v-for="item in printInfos"
|
:key="item.id"
|
>
|
<div class="title">
|
出入证信息
|
</div>
|
<div class="code-title">
|
排队号码
|
</div>
|
<div class="code-code">
|
{{ item.queueNumber }}
|
</div>
|
<div class="code-wait">
|
前方还有{{ item.currentWaitNum }}辆车排队中...
|
</div>
|
<div class="qrcode-code">
|
<qrcode
|
v-if="item.visible"
|
:size="160"
|
:qr-url="item.url"
|
/>
|
</div>
|
<div class="qrcode-text">
|
微信扫码查看排队进度
|
</div>
|
<div class="line" />
|
<div class="cell">
|
<div class="cell-label">
|
姓名
|
</div>
|
<div class="cell-value">
|
{{ item.name }}
|
</div>
|
</div>
|
<div class="cell">
|
<div class="cell-label">
|
车牌号
|
</div>
|
<div class="cell-value">
|
{{ item.licensePlate }}
|
</div>
|
</div>
|
<div class="cell">
|
<div class="cell-label">
|
手机号
|
</div>
|
<div class="cell-value">
|
{{ item.phone }}
|
</div>
|
</div>
|
<div class="cell">
|
<div class="cell-label">
|
身份证号码
|
</div>
|
<div class="cell-value">
|
{{ item.idCard }}
|
</div>
|
</div>
|
<div class="cell">
|
<div class="cell-label">
|
装卸数量
|
</div>
|
<div class="cell-value">
|
{{ item.loadUnloadQty }}
|
</div>
|
</div>
|
<div class="cell">
|
<div class="cell-label">
|
单位
|
</div>
|
<div class="cell-value">
|
{{ item.unitName }}
|
</div>
|
</div>
|
<div class="cell">
|
<div class="cell-label">
|
装卸区域
|
</div>
|
<div class="cell-value">
|
{{ item.loadingAreaName }}
|
</div>
|
</div>
|
<div class="cell">
|
<div class="cell-label">
|
登记时间
|
</div>
|
<div class="cell-value">
|
{{ item.registerTime }}
|
</div>
|
</div>
|
<div class="cell">
|
<div class="cell-label">
|
备注
|
</div>
|
<div class="cell-value over-line">
|
{{ item.remark }}
|
</div>
|
</div>
|
<!-- <div v-if="printInfos && printInfos.length > 1" class="mb"></div> -->
|
</div>
|
</div>
|
</div>
|
</el-card>
|
<el-card class="box-card list-box">
|
<el-table
|
v-loading="listLoading"
|
:data="tableData.data"
|
style="width: 100%"
|
size="mini"
|
class="table"
|
highlight-current-row
|
:cell-style="{ textAlign: 'center' }"
|
:header-cell-style="{ fontWeight: 'bold', textAlign: 'center' }"
|
>
|
<el-table-column
|
prop="idCard"
|
label="身份证号"
|
width="150"
|
/>
|
<el-table-column
|
prop="name"
|
label="姓名"
|
min-width="80"
|
/>
|
|
<el-table-column
|
prop="phone"
|
label="手机号"
|
min-width="100"
|
/>
|
<el-table-column
|
prop="licensePlate"
|
label="车牌号"
|
min-width="90"
|
/>
|
<el-table-column
|
prop="loadingAreaName"
|
label="装卸区域"
|
min-width="70"
|
/>
|
<el-table-column
|
prop="orderTypeName"
|
label="订单类型"
|
width="70"
|
/>
|
<el-table-column
|
prop="loadUnloadQty"
|
label="装卸数量"
|
min-width="70"
|
/>
|
<el-table-column
|
prop="unitName"
|
label="单位"
|
min-width="50"
|
/>
|
<el-table-column
|
prop="vehicleStatusName"
|
label="车辆状态"
|
min-width="70"
|
/>
|
<el-table-column
|
prop="goodsStatusName"
|
label="货物状态"
|
min-width="70"
|
/>
|
<el-table-column
|
prop="queueNumber"
|
label="排队号码"
|
min-width="80"
|
/>
|
<el-table-column
|
prop="reasonName"
|
label="事由"
|
min-width="60"
|
/>
|
<el-table-column
|
label="登记时间"
|
min-width="135"
|
align="center"
|
>
|
<template slot-scope="scope">
|
<span>{{ scope.row.registerTime | vformatDate }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="remark"
|
label="备注"
|
min-width="60"
|
/>
|
|
<el-table-column
|
label="操作"
|
min-width="120"
|
fixed="right"
|
align="center"
|
>
|
<template slot-scope="scope">
|
<el-button
|
v-hasPermi="['admin:vehicle:edit']"
|
type="text"
|
size="small"
|
class="mr10"
|
@click="handleEditVehicle(scope.row)"
|
>
|
编辑
|
</el-button>
|
|
<el-button
|
v-hasPermi="['admin:vehicle:delete']"
|
type="text"
|
size="small"
|
@click="handleDeleteVehicle(scope.row.masterId)"
|
>
|
删除
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div class="block">
|
<el-pagination
|
:page-sizes="[20, 40, 60, 80]"
|
:page-size="tableFrom.limit"
|
:current-page="tableFrom.page"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="tableData.total"
|
@size-change="handleSizeChange"
|
@current-change="pageChange"
|
/>
|
</div>
|
</el-card>
|
<el-dialog
|
:title="editDialogConfig.isCreate === 0 ? `添加车辆信息` : `编辑车辆信息`"
|
:visible.sync="editDialogConfig.visible"
|
destroy-on-close
|
:close-on-click-modal="false"
|
>
|
<edit
|
v-if="editDialogConfig.visible"
|
:prent="editDialogConfig.prent"
|
:is-create="editDialogConfig.isCreate"
|
:edit-data="editDialogConfig.data"
|
@hideEditDialog="hideEditDialog"
|
@addVehicleSucces="handleReloadData"
|
/>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import * as systemGroupDataApi from "@/api/systemGroupData.js";
|
import { getVehicleListApi, deleteVehicleApi } from "@/api/vehicle";
|
import { checkPermi } from "@/utils/permission"; // 权限判断函数
|
import edit from "./edit";
|
import qrcode from "@/components/qrcode/index.vue";
|
|
import printJS from "print-js";
|
import printCss from "./printCss";
|
export default {
|
name: "SystemLog",
|
components: {
|
edit,
|
qrcode,
|
},
|
data() {
|
return {
|
timeVal: [],
|
tableData: {
|
data: [],
|
total: 0,
|
},
|
listLoading: true,
|
tableFrom: {
|
idCard: "",
|
goodsStatusCode: "",
|
licensePlate: "",
|
loadUnloadQtyMax: "",
|
loadUnloadQtyMin: "",
|
loadingAreaCode: "",
|
name: "",
|
phone: "",
|
queueNumber: "",
|
reasonCode: "",
|
registerTimeEnd: "",
|
registerTimeStart: "",
|
unitCode: "",
|
vehicleStatusCode: "",
|
orderTypeCode: "",
|
page: 1,
|
limit: 20,
|
},
|
cardLists: [],
|
applyId: null,
|
extractType: "",
|
|
areaOptions: [],
|
orderTypeOptions: [],
|
unitOptions: [],
|
vehicleStatusOptions: [],
|
goodsStatusOptions: [],
|
originOptions: [],
|
|
editDialogConfig: {
|
visible: false,
|
isCreate: 0, // 0=创建，1=编辑
|
prent: {},
|
data: {},
|
},
|
showPrint: false,
|
printInfos: [],
|
// printInfo: {
|
// queueNumber: "",
|
// currentWaitNum: "-",
|
// name: "-",
|
// licensePlate: "-",
|
// phone: "-",
|
// idCard: "-",
|
// loadUnloadQty: "-",
|
// unitName: "-",
|
// loadingAreaName: "-",
|
// registerTime: "-",
|
// },
|
};
|
},
|
mounted() {
|
//获取所有的下拉选项
|
this.getList();
|
this.getOptionList(74);
|
this.getOptionList(75);
|
this.getOptionList(76);
|
this.getOptionList(77);
|
this.getOptionList(78);
|
this.getOptionList(79);
|
},
|
methods: {
|
checkPermi,
|
|
getOptionList(id) {
|
// 获取列表数据
|
systemGroupDataApi.groupDataList({ gid: id }).then((data) => {
|
const _selfList = [];
|
data.list.forEach((_lItem) => {
|
_lItem.value = JSON.parse(_lItem.value);
|
const _fields = _lItem.value.fields;
|
const _rowData = {};
|
_fields.map((item) => {
|
_rowData[item.name] = item.value;
|
});
|
_rowData.id = _lItem.id;
|
if (_lItem.status) {
|
_selfList.push(_rowData);
|
}
|
});
|
let model = { id: "", name: "全部" };
|
_selfList.unshift(model);
|
if (id == 74) {
|
this.areaOptions = _selfList;
|
} else if (id == 78) {
|
this.orderTypeOptions = _selfList;
|
} else if (id == 77) {
|
this.goodsStatusOptions = _selfList;
|
} else if (id == 76) {
|
this.vehicleStatusOptions = _selfList;
|
} else if (id == 75) {
|
this.unitOptions = _selfList;
|
} else if (id == 79) {
|
this.originOptions = _selfList;
|
}
|
});
|
},
|
|
hideEditDialog() {
|
this.editDialogConfig.visible = false;
|
},
|
handleDeleteVehicle(id) {
|
this.$modalSure("删除该车辆信息吗？关联的其他区域的车辆信息会一起删除").then(() => {
|
deleteVehicleApi(id)
|
.then(() => {
|
this.$message.success("删除成功");
|
this.getList(1);
|
})
|
.catch(() => {});
|
});
|
},
|
handleEditVehicle(item) {
|
this.editDialogConfig.isCreate = 1;
|
this.editDialogConfig.prent = item;
|
this.editDialogConfig.data = {
|
area: this.areaOptions,
|
orderType: this.orderTypeOptions,
|
unit: this.unitOptions,
|
vehicleStatus: this.vehicleStatusOptions,
|
goodsStauts: this.goodsStatusOptions,
|
origin: this.originOptions,
|
};
|
this.editDialogConfig.visible = true;
|
},
|
|
handleReloadData(res) {
|
this.editDialogConfig.visible = false;
|
this.getList(1);
|
setTimeout(() => {
|
if (res) {
|
if (res.length > 0 && res[0].printPass) {
|
this.setPrintInfo(res);
|
}
|
}
|
}, 100);
|
},
|
// 具体日期
|
onchangeTime(e) {
|
this.timeVal = e;
|
this.tableFrom.dateLimit = e ? this.timeVal.join(",") : "";
|
this.tableFrom.page = 1;
|
this.getList();
|
},
|
// 列表
|
getList(num) {
|
this.listLoading = true;
|
this.tableFrom.page = num ? num : this.tableFrom.page;
|
if (this.timeVal) {
|
this.tableFrom.registerTimeStart = this.timeVal[0];
|
this.tableFrom.registerTimeEnd = this.timeVal[1];
|
} else {
|
this.tableFrom.registerTimeStart = "";
|
this.tableFrom.registerTimeEnd = "";
|
}
|
getVehicleListApi(this.tableFrom)
|
.then((res) => {
|
this.tableData.data = res.list;
|
this.tableData.total = res.total;
|
this.listLoading = false;
|
})
|
.catch(() => {
|
this.listLoading = false;
|
});
|
},
|
handleAddVehicle() {
|
this.editDialogConfig.isCreate = 0;
|
this.editDialogConfig.prent = {};
|
this.editDialogConfig.data = {
|
area: this.areaOptions,
|
orderType: this.orderTypeOptions,
|
unit: this.unitOptions,
|
vehicleStatus: this.vehicleStatusOptions,
|
goodsStauts: this.goodsStatusOptions,
|
origin: this.originOptions,
|
};
|
this.editDialogConfig.visible = true;
|
},
|
resetForm(formName) {
|
this.$refs[formName].resetFields();
|
this.tableFrom = {
|
idCard: "",
|
goodsStatusCode: "",
|
licensePlate: "",
|
loadUnloadQtyMax: "",
|
loadUnloadQtyMin: "",
|
loadingAreaCode: "",
|
name: "",
|
phone: "",
|
queueNumber: "",
|
reasonCode: "",
|
registerTimeEnd: "",
|
registerTimeStart: "",
|
unitCode: "",
|
vehicleStatusCode: "",
|
orderTypeCode: "",
|
|
page: 1,
|
limit: 20,
|
};
|
this.timeVal = [];
|
// this.getList();
|
},
|
pageChange(page) {
|
this.tableFrom.page = page;
|
this.getList();
|
},
|
handleSizeChange(val) {
|
this.tableFrom.limit = val;
|
this.getList();
|
},
|
setPrintInfo(res) {
|
let printArr = [];
|
for (let index = 0; index < res.length; index++) {
|
const element = res[index];
|
let newEl = {};
|
newEl.id = element.id;
|
newEl.queueNumber = element.queueNumber || "-";
|
|
if (element.currentWaitNum && element.currentWaitNum > 0) {
|
newEl.currentWaitNum = element.currentWaitNum;
|
} else {
|
newEl.currentWaitNum = 0;
|
}
|
newEl.name = element.name || "-";
|
newEl.licensePlate = element.licensePlate || "-";
|
newEl.phone = element.phone || "-";
|
newEl.idCard = element.idCard || "-";
|
newEl.loadUnloadQty = element.loadUnloadQty || "-";
|
newEl.unitName = element.unitName || "-";
|
newEl.loadingAreaName = element.loadingAreaName || "-";
|
newEl.registerTime = element.registerTime || "-";
|
newEl.remark = element.remark || "-";
|
// newEl.url = `https://car-manager.truekey.mobi/driver/javaMobile/queryResult/${element.linkCode}`;
|
newEl.url = `http://1.15.17.182:9033/driver/javaMobile/queryResult/${element.linkCode}`;
|
newEl.visible = true;
|
printArr.push(newEl);
|
}
|
this.printInfos = printArr;
|
setTimeout(() => {
|
this.startPrint();
|
}, 200);
|
},
|
startPrint() {
|
printJS({
|
printable: "printArea",
|
type: "html",
|
maxWidth: "100%",
|
// targetStyles: ['*'],
|
style: printCss(),
|
scanStyles: false,
|
// style:".title { font-size: 20px}"
|
});
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.selWidth {
|
width: 20vw;
|
}
|
|
.smallSelW {
|
width: 9.4vw;
|
}
|
</style>
|
<style lang="scss">
|
.print-dom {
|
border: 1px solid #000;
|
padding: 20px;
|
&-btn {
|
margin: 30px;
|
}
|
&-box {
|
width: 375px;
|
padding: 35px 0px;
|
height: auto;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
.title {
|
width: 100%;
|
height: 40px;
|
font-weight: 500;
|
font-size: 30px;
|
color: #000000;
|
text-align: center;
|
}
|
.mb {
|
height: 100px;
|
}
|
.code-title {
|
width: 100%;
|
margin-top: 35px;
|
height: 16px;
|
font-weight: 400;
|
font-size: 12px;
|
color: #000000;
|
text-align: center;
|
}
|
.code-code {
|
width: 100%;
|
height: 62px;
|
font-weight: 500;
|
font-size: 50px;
|
color: #373839;
|
letter-spacing: 2px;
|
text-align: center;
|
}
|
.code-wait {
|
width: 100%;
|
margin-top: 5px;
|
height: 20px;
|
font-weight: 400;
|
font-size: 15px;
|
color: #5f6062;
|
text-align: center;
|
font-style: normal;
|
}
|
.qrcode-code {
|
width: 170px;
|
height: 170px;
|
margin-top: 28px;
|
}
|
.qrcode-text {
|
width: 100%;
|
margin-top: 8px;
|
height: 16px;
|
font-weight: 400;
|
font-size: 12px;
|
color: #717172;
|
text-align: center;
|
}
|
.line {
|
margin-bottom: 20px;
|
width: 100%;
|
height: 20px;
|
// border-bottom: 2px dashed #D1D2D2;
|
border-bottom: 1px dashed #d1d2d2;
|
}
|
.cell {
|
width: 100%;
|
height: auto;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
height: 36px;
|
margin-bottom: 5px;
|
.cell-label {
|
width: 80px;
|
font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
|
font-weight: 400;
|
font-size: 15px;
|
color: #3c3e3f;
|
text-align: left;
|
}
|
.cell-value {
|
width: 200px;
|
font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
|
font-weight: 400;
|
font-size: 15px;
|
color: #5f6062;
|
text-align: right;
|
font-style: normal;
|
text-transform: none;
|
}
|
}
|
}
|
}
|
</style>
|
