|
|
|
<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>
|