<template>
<el-container>
<el-main>
<el-card style="background-color: #F5F7FA">
<!--工具条-->
<el-row>
<el-form :model="filters" :rules="rules" ref="ruleForm">
<el-col :span="5">
<el-form-item label="" prop="trailerFrameNo">
<el-input v-model="filters.trailerFrameNo" placeholder="车牌号查询" style="width: 170px">
<template slot="prepend">车牌号</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="" prop="veState">
<div class="my-text-area">
<div class="el-input-group__prepend prepand">备案状态</div>
<el-select v-model="filters.veState" placeholder="请选择" style="width: 100px">
<el-option
v-for="item in veStateOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="" prop="veClassFlag">
<div class="my-text-area">
<div class="el-input-group__prepend prepand">业务类型</div>
<el-select v-model="filters.veClassFlag" placeholder="请选择" style="width:100px">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item>
<el-button type="primary" v-on:click="getReCord(1)">查询</el-button>
<el-button type="success" @click="companyAdd">新增</el-button>
</el-form-item>
</el-col>
</el-form>
</el-row>
<!--列表-->
<el-table :data="recordList" highlight-current-row v-loading="listLoading" style="border-radius: 10px 10px 0px 0px;line-height: 25px"
:header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="small">
<el-table-column type="selection" width="55" fixed="left">
</el-table-column>
<el-table-column prop="coCode" label="运输公司名称" width="120px" >
</el-table-column>
<el-table-column prop="proposer" label="挂靠单位" width="120px" >
</el-table-column>
<el-table-column prop="veClassFlag" label="业务类型" :formatter="veClassFlag" width="130px" >
</el-table-column>
<el-table-column prop="domesticLisenceNo" label="国内车牌" width="100px">
</el-table-column>
<el-table-column prop="veOwnerName" label="车主姓名" width="100px" >
</el-table-column>
<el-table-column prop="ownerInsideTel" label="车主联系方式" width="110px" >
</el-table-column>
<el-table-column prop="mainPort" label="关区代码" width="100px" >
</el-table-column>
<el-table-column prop="selfWt" label="自重" width="90px">
</el-table-column>
<el-table-column prop="veTon" label="载重" width="90px">
</el-table-column>
<el-table-column prop="returnmessage" label="备案结果" width="100px">
</el-table-column>
<el-table-column prop="createDate" label="创建时间" width="160px">
</el-table-column>
<el-table-column prop="updateDate" label="更新时间" width="160px">
</el-table-column>
<el-table-column label="操作" align="center" width="240" fixed="right">
<!-- v-if="isAdmin"-->
<template slot-scope="scope">
<el-button type="warning" size="mini" @click="handlOut(scope.$index, scope.row)">出任务</el-button>
<el-button type="success" size="mini" @click="handlEdit(scope.$index, scope.row)">编辑</el-button>
<el-button type="danger" size="mini" @click="handleDel(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页-->
<div style="margin-top: 10px" class="toolbar">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageSize"
:page-sizes="[10, 100, 200, 300]"
:page-size="10"
layout="total, sizes, prev, pager, next, jumper"
:total="this.total">
</el-pagination>
</div>
<el-dialog :title=dialogMap[dialogStatus] :visible.sync="addFormVisible" :close-on-click-modal="false" width="80%" v-dialog-drag>
<el-form :model="addForm" label-width="20px" :rules="addFormRules" ref="addForm" label-position="left">
<el-row>
<el-col :span="7">
<el-row>
<el-form-item label=" " prop="domesticLisenceNo">
<el-input v-model="addForm.domesticLisenceNo" onkeyup="this.value=this.value.replace(/(^\s*)|(\s*$)/g,'')"
@change="findTrailerFrameNo(addForm.domesticLisenceNo)"
auto-complete="on" placeholder="国内车牌">
<template slot="prepend">国内车牌</template>
</el-input>
</el-form-item>
</el-row>
<el-row>
<el-form-item label=" " prop="veOwnerName">
<el-input v-model="addForm.veOwnerName" auto-complete="on" placeholder="车主姓名">
<template slot="prepend">车主姓名</template>
</el-input>
</el-form-item>
</el-row>
<el-row>
<el-form-item label=" " prop="proposer">
<el-input v-model="addForm.proposer" auto-complete="on" placeholder="挂靠单位">
<template slot="prepend">挂靠单位</template>
</el-input>
</el-form-item>
</el-row>
<el-row>
<el-form-item label=" " prop="coCode">
<el-input v-model="addForm.coCode" auto-complete="on" placeholder="运输公司名称">
<template slot="prepend">运输公司名称</template>
</el-input>
</el-form-item>
</el-row>
<el-row>
<el-form-item label=" " prop="veClassFlag">
<div class="my-text-area">
<div class="el-input-group__prepend prepand">业务类型</div>
<el-select v-model="addForm.veClassFlag" placeholder="请选择" style="width: 165px">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</el-form-item>
</el-row>
<el-row>
<el-form-item label="" prop="icCode">
<el-input v-model="addForm.icCode" auto-complete="on" placeholder="IC卡编号">
<template slot="prepend">IC卡编号</template>
</el-input>
</el-form-item>
</el-row>
</el-col>
<el-col :offset="1" :span="7">
<el-row>
<el-form-item label=" " prop="mainPort">
<div class="my-text-area">
<div class="el-input-group__prepend prepand">海关代码</div>
<el-select v-model="addForm.mainPort" placeholder="请选择" style="width: 165px">
<el-option
v-for="item in mainPortOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</el-form-item>
</el-row>
<el-row>
<el-form-item label=" " prop="ownerInsideTel">
<el-input v-model="addForm.ownerInsideTel" auto-complete="on" placeholder="车主联系电话">
<template slot="prepend">车主联系电话</template>
</el-input>
</el-form-item>
</el-row>
<el-row>
<el-form-item label=" " prop="veFactoryDate">
<div class="my-text-area">
<div class="el-input-group__prepend prepand">行驶证有效期</div>
<el-date-picker
style="width: 165px"
v-model="addForm.veFactoryDate"
type="date"
placeholder="选择日期">
</el-date-picker>
</div>
</el-form-item>
</el-row>
<el-row>
<el-form-item label=" " prop="veState">
<div class="my-text-area">
<div class="el-input-group__prepend prepand">备案状态</div>
<el-select v-model="addForm.veState" placeholder="请选择" style="width: 165px">
<el-option
v-for="item in veStateOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</el-form-item>
</el-row>
<el-row>
<el-form-item label=" " prop="selfWt">
<el-input v-model="addForm.selfWt" auto-complete="on" oninput="value=value.replace(/[^\d.+]/g,'')" placeholder="单位为KG">
<template slot="prepend">自重/空车重量</template>
</el-input>
</el-form-item>
</el-row>
<el-row>
<el-form-item label=" " prop="lockNum">
<div class="my-text-area">
<div class="el-input-group__prepend prepand">关锁号</div>
<el-autocomplete
class="inline-input"
v-model="addForm.lockNum"
:fetch-suggestions="querySearch"
value-key="lockNum"
highlight-first-item
clearable
placeholder="请输入内容"
style="width: 165px"
></el-autocomplete>
</div>
</el-form-item>
</el-row>
</el-col>
<el-col :offset="1" :span="7">
<el-row>
<el-form-item label=" " prop="veTon">
<el-input v-model="addForm.veTon" auto-complete="on" placeholder="核定载货重量">
<template slot="prepend">载货重量</template>
</el-input>
</el-form-item>
</el-row>
<el-row>
<el-form-item label=" " prop="trailerLicenseNo">
<el-input v-model="addForm.trailerLicenseNo" auto-complete="on" placeholder="挂车牌号">
<template slot="prepend">挂车牌号</template>
</el-input>
</el-form-item>
</el-row>
<el-row>
<el-form-item label=" " prop="trailerFrameNo">
<el-input v-model="addForm.trailerFrameNo" auto-complete="on" placeholder="挂车车架号">
<template slot="prepend">挂车架号</template>
</el-input>
</el-form-item>
</el-row>
<el-row>
<el-form-item label=" " prop="apprNo">
<el-input v-model="addForm.apprNo" auto-complete="on" placeholder="车辆备案编号">
<template slot="prepend">车辆备案编号</template>
</el-input>
</el-form-item>
</el-row>
<el-row>
<el-form-item label=" " prop="veCustomsNo">
<el-input v-model="addForm.veCustomsNo" auto-complete="on" placeholder="电子车牌编号">
<template slot="prepend">电子车牌编号</template>
</el-input>
</el-form-item>
</el-row>
<el-row>
<el-form-item label=" " prop="memo">
<el-input v-model="addForm.memo" auto-complete="on" placeholder="备注">
<template slot="prepend">备注</template>
</el-input>
</el-form-item>
</el-row>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="addFormVisible = false" type="danger"
style="width: 100px">取消</el-button>
<el-button type="primary" style="width: 100px"
@click="dialogStatus ==='save'? addSubmit():editSubmit()" v-loading="addloading">保存</el-button>
</div>
</el-dialog>
<!-- //出任务-->
<el-dialog title="出任务" :visible.sync="dialogVisible">
<el-form :model="form">
<el-form-item label="" :label-width="formLabelWidth">
<el-col :span="15">
<el-input v-model="form.lisenceNo" autocomplete="off" disabled>
<template slot="prepend">车牌号</template>
</el-input>
</el-col>
</el-form-item>
<el-form-item label="" :label-width="formLabelWidth">
<div class="my-text-area">
<div class="el-input-group__prepend prepand">用户名</div>
<el-col :span="14">
<el-select v-model="form.username"
@click.native="getUsers"
default-first-option
:loading="loading" clearable placeholder="请选择">
<el-option
v-for="item in usernames"
:key="item.departmentid"
:label="item.roleName"
:value="item.departmentid"
:disabled="item.disabled">
</el-option>
</el-select>
</el-col>
</div>
</el-form-item>
<el-form-item label="" :label-width="formLabelWidth">
<el-col :span="14">
<el-tag v-if="lisenceNoSatus=false" type="success">在线</el-tag>
<el-tag v-else type="info">离线</el-tag>
</el-col>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button @click="saveOut()">确 定</el-button>
</div>
</el-dialog>
</el-card>
</el-main>
</el-container>
</template>
<script>
// import {selectDispatchNoteList, dispatch, cancel, getUser} from '../../api/dispatch_api'
import { list, save, remove, edit} from '../../api/road_verecord/verecord';
import {isAdmin, loginedUserInfo} from "../../api/user";
//获取关锁列表
// import {list as lockList} from "../../api/lock_info/lock_info";
import { getList as getCRMList } from '@/api/crm_api';
import { getUserList } from '../../api/user';
import {selectVehicle, insertSelective, selectHistroy} from '../../api/consigner/vehicle';
export default {
data() {
return {
filters: {
trailerFrameNo: '',
veState: '',
veClassFlag: '',
},
rules: {
// trailerFrameNo: [
// { required: true, message: '请输入车牌号', trigger: 'blur' },
// // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
// ],
// veState: [
// { required: true, message: '请选择备案状态', trigger: 'change' }
// ],
// veClassFlag: [
// { required: true, message: '请选择业务类型', trigger: 'change' }
// ],
},
recordList: [],
lockInfoList: [],
total: 0,
pageSize: 1,
limitSize: 10,
listLoading: false,
isAdmin: false,
addFormVisible: false,
disabledOne: true,
dialogMap: {
edit: '编辑',
save: '新增'
},
dialogStatus: undefined,
addloading: false,
addForm: {
mainPort: '4604',
proposer: '',
coCode: '',
domesticLisenceNo: '',
veOwnerName: '',
ownerInsideTel: '',
veFactoryDate: '',
selfWt: '',
veTon: '',
trailerLicenseNo: '',
apprNo: '',
veClassFlag: '',
memo: '',
createBy: '',
veState: 'N',
icCode: '',
lockNum: ''
},
options: [{
value: '0',
label: '普通车辆'
}, {
value: '1',
label: '调拨车辆'
},{
value: '2',
label: '分拨车辆'
}],
mainPortOptions: [{
value: '4604',
label: '4604'
}, {
value: '4620',
label: '4620'
}],
veStateOptions: [{
value: 'Y',
label: '黑名单'
}, {
value: 'N',
label: '白名单'
}],
addFormRules: {
mainPort: [
{ required: true, message: '请输入海关关区', trigger: 'blur' }
],
proposer: [
{ required: true, message: '请输入挂靠单位', trigger: 'blur' }
],
coCode: [
{ required: true, message: '请输入运输公司名称', trigger: 'blur' }
],
domesticLisenceNo: [
{ required: true, message: '请输入国内车牌', trigger: 'blur' }
],
veOwnerName: [
{ required: true, message: '请输入车主姓名', trigger: 'blur' }
],
veClassFlag: [
{ required: true, message: '请选择车辆属性', trigger: 'blur' }
],
ownerInsideTel: [
{ required: true, message: '手机号不能为空', trigger: 'blur' },
{ type: 'number', message: '手机号格式不正确', trigger: 'blur',
transform(value){
var phone = 11 && /^((13|14|15|16|17|18|19)[0-9]{1}\d{8})$/
if (!phone.test(value)){
return false;
}else {
return Number(value);
}
}}
],
veFactoryDate: [
{ required: true, message: '请选择驾驶证有效期', trigger: 'blur' }
],
selfWt: [
{ required: true, message: '请输入车辆自重', trigger: 'blur' }
],
veState: [
{ required: true, message: '请选择备案状态', trigger: 'blur' }
]
},
dialogVisible:false,
form: {
lisenceNo: '',
username: '',
id:'',
starttime:''
},
usernames:[],
queryInfo: {
vno: '',
vnocolor: '2'
},
lisenceNoSatus:'',
formLabelWidth: '120px',
loading:false,
}
},
mounted() {
this.isAdmin = isAdmin();
this.getReCord();
},
methods: {
//出任务
handlOut(index,row){
this.dialogVisible=true;
this.form.lisenceNo=row.domesticLisenceNo;
this.getUsers();
this.getLisenceNoStatus(row.domesticLisenceNo)
},
//确定出任务
saveOut() {
const _this = this
insertSelective(this.form).then((response) => {
const res = response.data
if (res.code !== '200') {
return _this.$message.error('出任务，失败！')
}
_this.$message.success('出任务，成功！')
this.dialogVisible=false;
this.$router.push(
{
path:'conveyance'
}
)
}).catch(error => {
// 关闭加载
_this.$message.warning('车辆已出任务')
})
},
//获取用户名
getUsers:function() {
this.listLoading = true;
getCRMList({"roleName":"","orgtype":"","departmentid":""},1,10000).then((res) => {
this.usernames = res.data.data.list;
}).catch((error) => {
this.$message.error(error.toString());
}).finally(()=>{
this.listLoading = false;
});
},
//车辆状态
getLisenceNoStatus(lisenceNo){
this.queryInfo.vno=lisenceNo;
selectVehicle(this.queryInfo).then((response) => {
const res = response.data;
if (res.code ==='200'){
this.$message.success('获取到车辆状态信息：' + res.data.msg);
if (res.data
&& res.data.data
&& res.data.data.firstVcl
&& res.data.data.firstVcl.offlineState){
this.lisenceNoSatus=res.data.data.firstVcl.offlineState;
}else {
this.$message.error('获取车辆状态失败：' + res.data.msg);
}
}
}).catch(error => {
this.$message.error('获取车辆状态失败：' + error.toString());
}).finally(()=>{
});
},
//获取备案列表
getReCord(val) {
let pageSize = this.pageSize;
if (val != undefined){
pageSize = val;
}
let para = {
pageSize: pageSize,
limitSize: this.limitSize,
trailerFrameNo: this.filters.trailerFrameNo,
veState: this.filters.veState,
veClassFlag: this.filters.veClassFlag,
userId: loginedUserInfo().userId
};
if (isAdmin()){
para.userId = '';
}
this.listLoading = true;
list(para).then((res) => {
this.total = res.data.data.total;
this.recordList = res.data.data.list;
this.listLoading = false;
}).catch((error) => {
this.listLoading = false;
if(null!= error.response && error.response!==undefined){
let status= error.response.status;
let msg = error.response.statusText;
alert(status+msg);
}else {
alert(error);
}
});
},
// 分页
handleSizeChange(val) {
this.limitSize = val;
this.getReCord();
},
handleCurrentChange(val) {
this.pageSize = val;
this.getReCord();
},
findTrailerFrameNo(value){
let para = {
trailerFrameNo: value
};
list(para).then((res) => {
if (res.data.data.total > 0){
this.addForm.mainPort = res.data.data.list[0].mainPort;
this.addForm.proposer = res.data.data.list[0].proposer;
this.addForm.coCode = res.data.data.list[0].coCode;
this.addForm.domesticLisenceNo = res.data.data.list[0].domesticLisenceNo;
this.addForm.veOwnerName = res.data.data.list[0].veOwnerName;
this.addForm.ownerInsideTel = res.data.data.list[0].ownerInsideTel;
this.addForm.veFactoryDate = res.data.data.list[0].veFactoryDate;
this.addForm.selfWt = res.data.data.list[0].selfWt;
this.addForm.veTon = res.data.data.list[0].veTon;
this.addForm.trailerLicenseNo = res.data.data.list[0].trailerLicenseNo;
this.addForm.apprNo = res.data.data.list[0].apprNo;
this.addForm.veClassFlag = res.data.data.list[0].veClassFlag;
this.addForm.memo = res.data.data.list[0].memo;
this.addForm.veState = res.data.data.list[0].veState;
this.$message({
message: '该车辆已有备案',
type: 'error'
});
}else {
this.$message({
message: '该车辆没有备案',
type: 'success'
});
this.addForm.mainPort = '4604';
this.addForm.proposer = '';
this.addForm.coCode = '';
this.addForm.veOwnerName = '';
this.addForm.ownerInsideTel = '';
this.addForm.veFactoryDate = '';
this.addForm.selfWt = '';
this.addForm.veTon = '';
this.addForm.trailerLicenseNo = '';
this.addForm.apprNo = '';
this.addForm.veClassFlag = '';
this.addForm.memo = '';
this.addForm.veState = 'N';
}
}).catch((error) => {
if(null!= error.response && error.response!==undefined){
let status= error.response.status;
let msg = error.response.statusText;
alert(status+msg);
}else {
alert(error);
}
});
},
veClassFlag: function(row, column){
if (row.veClassFlag == '0'){
return "普通车辆"
}else if(row.veClassFlag == '1'){
return "调拨车辆"
}else if (row.veClassFlag == '2'){
return "分拨车辆"
}
},
handleDel(index, row){
this.$confirm('确认删除吗？', '提示', {}).then(() => {
let param = {
id: row.id,
domesticLisenceNo: row.domesticLisenceNo,
mainPort: row.mainPort
}
remove(param).then((res) => {
if (res.data.code == 200){
this.$message({
message: '删除成功',
type: 'success'
});
}else {
this.$message({
message: '删除失败',
type: 'error'
});
}
this.getReCord();
}).catch((error) => {
});
}).catch(() =>{
});
},
companyAdd:function(){
this.dialogStatus= "save";
this.addFormVisible = true;
this.$refs.addForm.resetFields();
if (this.$refs.addForm !==undefined) {
this.$refs.addForm.resetFields();
}
},
handlEdit:function(index, row){
this.dialogStatus = "edit";
this.addFormVisible = true;
this.addForm = Object.assign({}, row);
},
addSubmit:function(){
this.$refs.addForm.validate((valid) => {
if (valid) {
this.$confirm('确认提交吗？', '提示', {}).then(() => {
this.addloading = true;
this.addForm.createBy = JSON.parse(sessionStorage.getItem('user')).id;
let para = Object.assign({}, this.addForm);
save(para).then((res) => {
if (res.data.code == 200){
this.$message({
message: '提交成功',
type: 'success'
});
this.addFormVisible = false;
this.addloading = false;
this.getReCord();
}else {
this.addloading = false;
this.$message({
message: res.data.msg,
type: 'error'
});
}
}).catch((error) => {
alert(error);
this.addloading = false;
});
})
} else {
console.log('error submit!!');
this.addloading = false;
return false;
}
});
},
editSubmit:function(){
this.$refs.addForm.validate((valid) => {
if (valid) {
this.$confirm('确认提交吗？', '提示', {}).then(() => {
this.addloading = true;
let para = Object.assign({}, this.addForm);
edit(para).then((res) => {
if (res.data.code == 200){
this.$message({
message: '修改成功',
type: 'success'
});
this.addFormVisible = false
this.addloading = false;
this.getReCord();
}else {
this.addloading = false;
this.$message({
message: res.data.msg,
type: 'error'
});
}
}).catch((error) => {
alert(error);
this.addloading = false;
});
})
} else {
this.addloading = false;
console.log('error submit!!');
return false;
}
});
},
operationType:function (row, column) {
if (row.operationType == '1'){
return '审批通过'
}else if (row.operationType == '0'){
return '需手动审批通过'
}
},
querySearch(queryString, cb) {
var restaurants = this.lockInfoList;
var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
// 调用 callback 返回建议列表的数据
cb(results);
},
createFilter(queryString) {
return (restaurant) => {
let rs = (restaurant.lockNum.indexOf(queryString) >= 0)
return rs;
};
},
// 获取关锁列表
// getLockInfoList(val) {
// let pageSize = this.pageSize;
// if (val != undefined){
// pageSize = val;
// }
// let para = {
// pageSize: pageSize,
// limitSize: this.limitSize
// };
// this.listLoading = true;
// lockList(para).then((res) => {
// this.lockInfoList = res.data.data.list;
// }).catch((error) => {
// this.listLoading = false;
// if(null!= error.response && error.response!==undefined){
// let status= error.response.status;
// let msg = error.response.statusText;
// alert(status+msg);
// }else {
// alert(error);
// }
// });
// },
},
}
</script>
<style scoped>
.my-text-area .prepand{
float: left;
width:89px;
height: 28px;
font-size: 12px;
line-height: 28px;
}
</style>
<style>
.my-text-area .el-textarea__inner{
min-height: 28px;
height: 28px;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
.rounded-corner {
border-radius: 10px; /* 设置圆角的半径为10像素 */
background-color: #f0f0f0; /* 背景颜色 */
padding: 10px; /* 内边距 */
margin: 10px; /* 外边距 */
box-shadow: 0 0 5px #ddd; /* 盒子阴影效果 */
}
</style>