You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
690 lines
20 KiB
690 lines
20 KiB
<template> |
|
<div> |
|
<div class="table-header table-div"> |
|
<ListLayout :table-columns="tableColumns"> |
|
<div slot="search" style="margin-top: 5px"> |
|
<!--这里放顶部搜索--> |
|
<!-- 搜索部分开始 --> |
|
<el-form |
|
label-width="90px" |
|
:inline="true" |
|
:model="page" |
|
class="search-form" |
|
:size="$store.getters.size" |
|
> |
|
<el-form-item> |
|
<el-input |
|
v-model="page.params.plateNumber" |
|
placeholder="车牌号" |
|
clearable |
|
@keyup.enter.native="getByPage" |
|
/> |
|
</el-form-item> |
|
<!-- <el-form-item> |
|
<el-select v-model="page.params.ownership" placeholder="车辆属性" clearable @keyup.enter.native="getByPage"> |
|
<el-option value="DRIVER" label="司机" /> |
|
<el-option value="COMPANY" label="企业" /> |
|
</el-select> |
|
</el-form-item> --> |
|
<el-form-item> |
|
<el-select |
|
v-model="page.params.customerId" |
|
clearable |
|
filterable |
|
remote |
|
reserve-keyword |
|
placeholder="司机编码/手机/名称/昵称" |
|
:remote-method="userRemoteMethod" |
|
@keyup.enter.native="getByPage" |
|
> |
|
<el-option |
|
v-for="item in userList" |
|
:key="item.id" |
|
:label=" |
|
item.phone + |
|
' ( ' + |
|
(item.userName ? item.userName + '-' : '') + |
|
item.userCode + |
|
' ) ' |
|
" |
|
:value="item.id" |
|
/> |
|
</el-select> |
|
</el-form-item> |
|
</el-form> |
|
<!-- 搜索部分结束 --> |
|
</div> |
|
|
|
<el-row slot="button-group" style="margin-top: 5px"> |
|
<el-col :span="16" class="tal"> |
|
<!--这里放添加导出等按钮--> |
|
<!-- <el-button |
|
class="group-item" |
|
:size="$store.getters.size" |
|
@click="toImport" |
|
><svg-icon icon-class="icondaoru" /> 导入</el-button> --> |
|
<!-- <el-button |
|
class="group-item" |
|
:size="$store.getters.size" |
|
@click="toForbid" |
|
><svg-icon icon-class="iconchahao" /> 禁用</el-button> --> |
|
<!-- <el-button |
|
class="group-item" |
|
:size="$store.getters.size" |
|
@click="toStartUsing" |
|
><svg-icon icon-class="iconduihao" /> 启用</el-button> --> |
|
<el-button |
|
class="group-item" |
|
:size="$store.getters.size" |
|
type="primary" |
|
@click="toAdd" |
|
><svg-icon icon-class="iconxinzeng" /> 添加</el-button |
|
> |
|
<el-button |
|
class="group-item" |
|
:size="$store.getters.size" |
|
@click="toOutPut" |
|
><svg-icon icon-class="icondaochu" /> 导出</el-button |
|
> |
|
</el-col> |
|
<el-col :span="8"> |
|
<el-button |
|
type="primary" |
|
:size="$store.getters.size" |
|
icon="el-icon-search" |
|
@click="search" |
|
>查询</el-button |
|
> |
|
<el-button |
|
type="info" |
|
:size="$store.getters.size" |
|
icon="el-icon-refresh" |
|
@click="page.params = {}" |
|
>重置</el-button |
|
> |
|
</el-col> |
|
</el-row> |
|
|
|
<div slot="table"> |
|
<!--这里放表格和分页--> |
|
<!-- 列表开始 --> |
|
<el-table |
|
:max-height="tableHeight" |
|
:data="dataPage.list" |
|
fit |
|
style="width: 100%" |
|
:size="$store.getters.size" |
|
@sort-change="sortHandler" |
|
> |
|
<!-- <el-table-column type="selection" width="55" /> --> |
|
<el-table-column label="序号" type="index" :index="indexMethod" /> |
|
<template v-for="(item, index) in tableColumns"> |
|
<el-table-column |
|
v-if="item.show" |
|
:key="index" |
|
:fixed="item.fixed" |
|
:align="item.align" |
|
:show-overflow-tooltip="true" |
|
:min-width="item.minWidth" |
|
:width="item.width" |
|
:prop="item.prop" |
|
:sortable="item.sortable" |
|
:label="item.label" |
|
:formatter="item.render" |
|
/> |
|
</template> |
|
|
|
<el-table-column |
|
fixed="right" |
|
label="操作" |
|
align="center" |
|
width="350px" |
|
> |
|
<template slot-scope="scope"> |
|
<el-button |
|
:size="$store.getters.size" |
|
type="text" |
|
@click="handleDetail(scope.row.id)" |
|
><svg-icon icon-class="iconxiangqing1" /> 详情</el-button |
|
> |
|
<el-dropdown> |
|
<el-button type="text"> |
|
更多<i class="el-icon-arrow-down el-icon--right" /> |
|
</el-button> |
|
<el-dropdown-menu slot="dropdown"> |
|
<el-dropdown-item @click.native="toUpdate(scope.row.id)"> |
|
<el-button :size="$store.getters.size" type="text" |
|
><svg-icon icon-class="iconicon-" /> 编辑</el-button |
|
> |
|
</el-dropdown-item> |
|
<el-dropdown-item @click.native="toDelete(scope.row.id)"> |
|
<el-button :size="$store.getters.size" type="text" |
|
><svg-icon icon-class="iconlajitong" /> 删除</el-button |
|
> |
|
</el-dropdown-item> |
|
</el-dropdown-menu> |
|
</el-dropdown> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
<!-- 列表结束 --> |
|
|
|
<!-- 分页组件开始 --> |
|
<div class="page-div"> |
|
<el-pagination |
|
:current-page="page.currentPage" |
|
:page-sizes="[10, 15, 20, 30]" |
|
:page-size="page.pageSize" |
|
layout="total, sizes, prev, pager, next, jumper" |
|
:total="page.totalCount" |
|
@size-change="handleSizeChange" |
|
@current-change="handleCurrentChange" |
|
/> |
|
</div> |
|
<!-- 分页组件结束 --> |
|
</div> |
|
</ListLayout> |
|
|
|
<!-- 添加弹窗 --> |
|
<el-drawer |
|
v-el-drag-dialog |
|
title="添加" |
|
:visible.sync="addDialog" |
|
size="55%" |
|
direction="ltr" |
|
destroy-on-close |
|
> |
|
<OilVehicleOwnerAdd @getByPage="getByPage" @closeDialog="closeDialog" /> |
|
</el-drawer> |
|
|
|
<!-- 导出抽屉 --> |
|
<el-drawer |
|
v-el-drag-dialog |
|
title="导出" |
|
:visible.sync="outPutDialog" |
|
size="55%" |
|
direction="ltr" |
|
destroy-on-close |
|
> |
|
<OilVehicleOwnerOutput |
|
@getByPage="getByPage" |
|
@closeDialog="closeDialog" |
|
/> |
|
</el-drawer> |
|
|
|
<!-- 导入弹窗 --> |
|
<el-dialog |
|
v-el-drag-dialog |
|
title="导入" |
|
:visible.sync="importDialog" |
|
width="55%" |
|
> |
|
<OilVehicleOwnerImport |
|
@getByPage="getByPage" |
|
@closeDialog="closeDialog" |
|
/> |
|
</el-dialog> |
|
|
|
<!-- 修改抽屉 --> |
|
<el-drawer |
|
v-el-drag-dialog |
|
title="修改" |
|
:visible.sync="updateDialog" |
|
size="55%" |
|
direction="ltr" |
|
destroy-on-close |
|
> |
|
<OilVehicleOwnerUpdate |
|
v-if="updateDialog" |
|
:oil-vehicle-owner="oilVehicleOwner" |
|
@getByPage="getByPage" |
|
@closeDialog="closeDialog" |
|
/> |
|
</el-drawer> |
|
|
|
<!-- 详情抽屉 --> |
|
<el-drawer |
|
title="详情" |
|
class="table-detail-drawer" |
|
:visible.sync="showTableDrawer" |
|
direction="ltr" |
|
size="55%" |
|
:withHeader="false" |
|
> |
|
<general-details |
|
title="详情" |
|
isHeader="true" |
|
@close="showTableDrawer=false" |
|
:sourceData="oilVehicleOwner" |
|
:mappingData="mappingData" |
|
v-if="showTableDrawer" > |
|
</general-details> |
|
|
|
<!-- <OilVehicleOwnerInfo :oil-vehicle-owner="oilVehicleOwner" /> --> |
|
</el-drawer> |
|
</div> |
|
</div> |
|
</template> |
|
<script> |
|
import oilVehicleOwnerApi from "@/api/user/oilVehicleOwner"; |
|
import OilVehicleOwnerAdd from "./OilVehicleOwnerAdd"; |
|
import OilVehicleOwnerUpdate from "./OilVehicleOwnerUpdate"; |
|
import OilVehicleOwnerInfo from "./OilVehicleOwnerInfo"; |
|
import OilVehicleOwnerImport from "./OilVehicleOwnerImport"; |
|
import OilVehicleOwnerOutput from "./OilVehicleOwnerOutput"; |
|
import oilCompanyInfoApi from "@/api/user/oilCompanyInfo"; |
|
import sysCustomerInfoApi from "@/api/user/sysCustomerInfo"; |
|
import { mapGetters } from "vuex"; |
|
export default { |
|
components: { |
|
OilVehicleOwnerAdd, |
|
OilVehicleOwnerUpdate, |
|
OilVehicleOwnerInfo, |
|
OilVehicleOwnerImport, |
|
OilVehicleOwnerOutput, |
|
}, |
|
data() { |
|
return { |
|
mappingData:[ |
|
{ |
|
carTitle:'基础信息', |
|
carItems:[ |
|
{ |
|
label:'主键', |
|
value:'id' |
|
}, |
|
{ |
|
label:'车牌号', |
|
value:'plateNumber' |
|
}, |
|
{ |
|
label:'车辆所属', |
|
value:'ownership', |
|
remark: 'VEHICLE_OWNERSHIP,司机：DRIVER,企业：COMPANY' |
|
}, |
|
{ |
|
label:'司机id', |
|
value:'customerId', |
|
}, |
|
{ |
|
label:'企业id', |
|
value:'companyId', |
|
}, |
|
{ |
|
label:'车牌颜色，对应编码PLATE_COLOR', |
|
value:'plateColor', |
|
}, |
|
{ |
|
label:'燃油类型，对应FUEL_TYPE', |
|
value:'fuelType', |
|
}, |
|
{ |
|
label:'油箱大小', |
|
value:'tankSize', |
|
}, |
|
{ |
|
label:'车辆类型，对应车型表', |
|
value:'vehicleType', |
|
}, |
|
{ |
|
label:'常用油品，对应油品表', |
|
value:'normsOilNumber', |
|
}, |
|
{ |
|
label:'禁用标识（ENABLE_MARK）', |
|
value:'enableMark', |
|
remark: ' 禁用：0,启用：1' |
|
}, |
|
{ |
|
label:'禁用启用人', |
|
value:'enableUser', |
|
}, |
|
{ |
|
label:'禁用启用时间', |
|
value:'enableTime', |
|
}, |
|
{ |
|
label:'禁用启用来源', |
|
value:'enableSource', |
|
}, |
|
{ |
|
label:'创建人', |
|
value:'createTime', |
|
}, |
|
{ |
|
label:'创建时间', |
|
value:'createTime', |
|
}, |
|
{ |
|
label:'创建来源', |
|
value:'createSource', |
|
}, |
|
{ |
|
label:'修改人', |
|
value:'updateUser', |
|
}, |
|
{ |
|
label:'修改时间', |
|
value:'updateTime', |
|
}, |
|
{ |
|
label:'修改来源', |
|
value:'updateSource', |
|
} |
|
] |
|
} |
|
], |
|
// multipleSelection: [], // 选择表格数据集合 |
|
importDialog: false, // 导入弹窗 |
|
outPutDialog: false, // 导出弹窗 |
|
showTableDrawer: false, |
|
page: { |
|
pageSize: 15, // 每页显示条数 |
|
currentPage: 1, // 默认页 |
|
params: {}, // 查询参数 |
|
sorted: {}, |
|
columns: [], |
|
}, |
|
tableHeight: document.documentElement.clientHeight - 300 - 60, |
|
filters: this.$options.filters, |
|
dataPage: { |
|
// 分页显示page |
|
pageSize: 15, // 每页显示条数 |
|
currentPage: 1, // 默认页 |
|
params: { |
|
// 查询参数 |
|
}, |
|
sorted: {}, |
|
}, |
|
tableColumns: [ |
|
{ |
|
prop: "plateNumber", |
|
minWidth: 120, |
|
label: "车牌号", |
|
show: true, |
|
render: (row, column, cell) => { |
|
if (row.plateColor === "黄色") { |
|
return <el-tag type="warning">{cell}</el-tag>; |
|
} |
|
if (row.plateColor === "绿色") { |
|
return <el-tag type="success">{cell}</el-tag>; |
|
} |
|
if (row.plateColor === "蓝色") { |
|
return <el-tag>{cell}</el-tag>; |
|
} |
|
return ( |
|
<div style="border: 2px solid #000000;width: 100px;text-align: center;height: 32px;vertical-align: middle;line-height: 32px;"> |
|
<div style="border: 1px #ffffff;color: #000000;font-weight: bold; letter-spacing: 2px;background-color: #DCAE00;height: 26px;line-height: 26px;;margin: 1px;"> |
|
{cell} |
|
</div> |
|
</div> |
|
); |
|
}, |
|
}, |
|
{ |
|
prop: "userName", |
|
minWidth: 120, |
|
label: "司机信息", |
|
show: true, |
|
render: (row, column, cell) => { |
|
if (row.ownership === "COMPANY" && !row.customerId) { |
|
return <el-tag type="info">车辆归属企业，无所属司机</el-tag>; |
|
} |
|
return ( |
|
<div> |
|
<div> |
|
{row.userName ? cell + "-" : ""} |
|
{row.userCode ? row.userCode : ""} <br /> {row.phone}{" "} |
|
</div> |
|
</div> |
|
); |
|
}, |
|
}, |
|
// { |
|
// prop: "companyName", |
|
// minWidth: 120, |
|
// label: "企业信息", |
|
// show: true, |
|
// render: (row, column, cell) => { |
|
// if (row.ownership === "DRIVER") { |
|
// return <el-tag type="info">车辆归属个人，无所属企业</el-tag>; |
|
// } |
|
// return ( |
|
// <div> |
|
// <div> |
|
// {row.userName ? cell : ""} <br />{" "} |
|
// {row.companyId ? "编号：" + row.companyId : ""}{" "} |
|
// </div> |
|
// </div> |
|
// ); |
|
// // return cell |
|
// }, |
|
// }, |
|
|
|
// { |
|
// prop: "enableMark", |
|
// label: "禁用启用", |
|
// show: true, |
|
// render: (row, column, cell) => { |
|
// var b = true; |
|
// if (cell === 0) { |
|
// // return '禁用' |
|
// b = false; |
|
// } |
|
// if (cell === 1) { |
|
// // return '启用' |
|
// b = true; |
|
// } |
|
// // return cell |
|
// return ( |
|
// <el-switch |
|
// v-model={b} |
|
// on-change={() => this.enableChange(row, b)} |
|
// active-color="#13ce66" |
|
// inactive-color="#ff4949" |
|
// > |
|
// {" "} |
|
// </el-switch> |
|
// ); |
|
// }, |
|
// }, |
|
|
|
{ |
|
prop: "createTime", |
|
label: "创建时间", |
|
show: true, |
|
render: (row, column, cell) => { |
|
return cell; |
|
}, |
|
}, |
|
], |
|
addDialog: false, // 添加弹窗 |
|
updateDialog: false, // 修改弹窗 |
|
userList: [], |
|
// queryCompanyList: [], |
|
oilVehicleOwner: {}, |
|
}; |
|
}, |
|
computed: { |
|
...mapGetters(["sysUserList"]), |
|
}, |
|
created() { |
|
this.getByPage(); |
|
// 增加监听事件，窗口变化时得到高度。 |
|
window.addEventListener("resize", this.getHeight, false); |
|
}, |
|
methods: { |
|
enableChange(row, b) { |
|
var oilVehicleOwner = {}; |
|
oilVehicleOwner.id = row.id; |
|
if (b === true) { |
|
oilVehicleOwner.enableMark = 1; |
|
this.$confirm("是否启用？", "提示", { |
|
confirmButtonText: "确定", |
|
cancelButtonText: "取消", |
|
type: "warning", |
|
}) |
|
.then(() => { |
|
// 更新 |
|
oilVehicleOwnerApi.update(oilVehicleOwner).then((res) => { |
|
this.$message.success(res.msg); |
|
this.getByPage(); |
|
}); |
|
}) |
|
.catch(() => { |
|
this.getByPage(); |
|
this.$message({ |
|
type: "info", |
|
message: "已取消", |
|
}); |
|
}); |
|
} |
|
if (b === false) { |
|
// 更新 |
|
oilVehicleOwner.enableMark = 0; |
|
|
|
this.$confirm("是否禁用？", "提示", { |
|
confirmButtonText: "确定", |
|
cancelButtonText: "取消", |
|
type: "warning", |
|
}) |
|
.then(() => { |
|
// 这里调用接口 |
|
oilVehicleOwnerApi.update(oilVehicleOwner).then((res) => { |
|
this.$message.success(res.msg); |
|
this.getByPage(); |
|
}); |
|
}) |
|
.catch(() => { |
|
this.getByPage(); |
|
this.$message({ |
|
type: "info", |
|
message: "已取消", |
|
}); |
|
}); |
|
} |
|
}, |
|
indexMethod(index) { |
|
return (index + 1) * 1; |
|
}, |
|
|
|
userRemoteMethod(value) { |
|
// 远程搜索 |
|
if (value) { |
|
sysCustomerInfoApi.liekQuery(value).then((res) => { |
|
this.userList = res.data; |
|
}); |
|
} |
|
}, |
|
|
|
toImport() { |
|
// 导入 |
|
this.importDialog = true; |
|
}, |
|
toOutPut() { |
|
// 导出 |
|
this.outPutDialog = true; |
|
}, |
|
handleDetail(id) { |
|
// 查看行 详情 |
|
oilVehicleOwnerApi.get(id).then((res) => { |
|
this.oilVehicleOwner = res.data; |
|
this.showTableDrawer = true; |
|
}); |
|
}, |
|
getHeight() { |
|
// 获取浏览器高度并计算得到表格所用高度。 |
|
this.tableHeight = document.documentElement.clientHeight - 300 - 60; |
|
}, |
|
search() { |
|
// 搜索 |
|
this.page.currentPage = 1; |
|
this.getByPage(); |
|
}, |
|
toggleSearchAdvance() { |
|
this.searchAdvice = !this.searchAdvice; |
|
}, |
|
handleSizeChange(val) { |
|
this.page.pageSize = val; |
|
this.getByPage(); |
|
}, |
|
handleCurrentChange(val) { |
|
this.page.currentPage = val; |
|
this.getByPage(); |
|
}, |
|
sortHandler(column) { |
|
// 排序查询 |
|
console.log(column); |
|
const key = column.prop; |
|
const value = column.order; |
|
this.page.sorted = {}; |
|
this.page.sorted[key] = value; |
|
this.getByPage(); |
|
}, |
|
toAdd() { |
|
// 跳转到添加 |
|
this.oilVehicleOwner = {}; |
|
this.addDialog = true; |
|
}, |
|
toUpdate(id) { |
|
// 跳转到更新 |
|
oilVehicleOwnerApi.get(id).then((res) => { |
|
this.oilVehicleOwner = res.data; |
|
this.updateDialog = true; |
|
}); |
|
}, |
|
toDelete(id) { |
|
// 删除 |
|
this.$confirm("确定删除?", "提示", { type: "error" }).then(() => { |
|
oilVehicleOwnerApi.deleteById(id).then((res) => { |
|
this.$message.success(res.msg); |
|
this.getByPage(); |
|
}); |
|
}); |
|
}, |
|
getByPage() { |
|
// 分页查询 |
|
this.addDialog = false; |
|
oilVehicleOwnerApi.getDispatchPage(this.page).then((res) => { |
|
this.dataPage = res.data; |
|
this.page.totalCount = this.dataPage.totalCount; |
|
this.page.totalPage = this.dataPage.totalPage; |
|
}); |
|
}, |
|
closeDialog() { |
|
this.addDialog = false; |
|
this.updateDialog = false; |
|
}, |
|
}, |
|
}; |
|
</script> |
|
|
|
<style scoped> |
|
.handle-button-group { |
|
margin-bottom: 10px; |
|
} |
|
.table-div { |
|
min-height: calc(100vh - 150px); |
|
max-height: calc(100vh - 110px); |
|
position: relative; |
|
overflow-y: scroll; |
|
margin-bottom: 20px; |
|
} |
|
.table-div >>> .header-container { |
|
/* position: sticky; |
|
top: 0rem; */ |
|
min-height: 152px; |
|
z-index: 4; |
|
background: #fff; |
|
} |
|
.table-div .el-table__footer-wrapper { |
|
position: fixed !important; |
|
} |
|
.page-div { |
|
/* position: fixed; */ |
|
background: #fff; |
|
bottom: 0rem; |
|
z-index: 4; |
|
min-width: 100%; |
|
} |
|
</style>
|
|
|