init
This commit is contained in:
551
mdmds/src/views/vehicleManagement/index.vue
Normal file
551
mdmds/src/views/vehicleManagement/index.vue
Normal file
@@ -0,0 +1,551 @@
|
||||
<template>
|
||||
<div class="content">
|
||||
<div class="search">
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="6">
|
||||
<el-row type="flex" align="middle" class="row-margin">
|
||||
<el-col :span="8">
|
||||
<div class="lable-title">Brand:</div>
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
<el-select
|
||||
v-model="brand"
|
||||
placeholder="Please choose Brand!"
|
||||
clearable
|
||||
filterable
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, i) in brandList"
|
||||
:key="i"
|
||||
:label="item"
|
||||
:value="item"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-row type="flex" align="middle" class="row-margin">
|
||||
<el-col :span="8">
|
||||
<div class="lable-title">Model Code:</div>
|
||||
</el-col>
|
||||
<el-col :span="16" class="timers">
|
||||
<el-select
|
||||
v-model="modelCode"
|
||||
placeholder="Please choose Model Code!"
|
||||
clearable
|
||||
filterable
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, i) in modelCodeList"
|
||||
:key="i"
|
||||
:label="item"
|
||||
:value="item"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-row type="flex" align="middle" class="row-margin">
|
||||
<el-col :span="8">
|
||||
<div class="lable-title">Model Year:</div>
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
<el-select
|
||||
v-model="modelYear"
|
||||
placeholder="Please choose Model Year!"
|
||||
clearable
|
||||
filterable
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, i) in modelYearList"
|
||||
:key="i"
|
||||
:label="item"
|
||||
:value="item"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-row type="flex" align="middle" class="row-margin">
|
||||
<el-col :span="8">
|
||||
<div class="lable-title">ADS Version:</div>
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
<el-select
|
||||
v-model="adsVersion"
|
||||
placeholder="Please choose ADS Version!"
|
||||
clearable
|
||||
filterable
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, i) in adsVersionList"
|
||||
:key="i"
|
||||
:label="item"
|
||||
:value="item"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-row type="flex" align="middle">
|
||||
<el-col :span="8">
|
||||
<div class="lable-title">VIN:</div>
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
<el-input
|
||||
v-model="vin"
|
||||
placeholder="Please input VIN!"
|
||||
clearable
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-row type="flex" align="middle">
|
||||
<el-col :span="8">
|
||||
<div class="lable-title">Existing Group:</div>
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
<el-input
|
||||
v-model="existGroup"
|
||||
placeholder="Please input Existing Group!"
|
||||
clearable
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-row type="flex" align="middle">
|
||||
<el-col :span="8">
|
||||
<div class="lable-title">Online Status:</div>
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
<el-select
|
||||
v-model="onlineStatus"
|
||||
placeholder="Please choose Online Status!"
|
||||
clearable
|
||||
filterable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in onlineStatusList"
|
||||
:key="item.code"
|
||||
:label="item.name"
|
||||
:value="item.code"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :span="6" class="btn-group">
|
||||
<el-popconfirm
|
||||
v-if="groupList.length > 0 || ticketList.length > 0"
|
||||
confirm-button-text="confirm"
|
||||
cancel-button-text="cancel"
|
||||
title="There are unsaved vehicles with groups at present, do you want to confirm the operation?"
|
||||
@confirm="search"
|
||||
>
|
||||
<el-button slot="reference" type="primary" size="small">
|
||||
<div class="flex-row-center">
|
||||
Search
|
||||
<div
|
||||
class="icon iconfont icon-sousuo"
|
||||
style="margin-left:5px"
|
||||
></div>
|
||||
</div>
|
||||
</el-button>
|
||||
</el-popconfirm>
|
||||
<el-button v-else type="primary" size="small" @click="search">
|
||||
<div class="flex-row-center">
|
||||
Search
|
||||
<div
|
||||
class="icon iconfont icon-sousuo"
|
||||
style="margin-left:5px"
|
||||
></div>
|
||||
</div>
|
||||
</el-button>
|
||||
|
||||
<el-button
|
||||
style="margin-left:10px"
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="reset"
|
||||
>
|
||||
<div class="flex-row-center">
|
||||
Reset
|
||||
<div
|
||||
class="icon iconfont icon-zhongzhi"
|
||||
style="margin-left:5px"
|
||||
></div>
|
||||
</div>
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="table-wrapper">
|
||||
<div class="title">
|
||||
<h6>Vehicle List</h6>
|
||||
<div>
|
||||
<el-button type="primary" size="small">Add all to ticket</el-button>
|
||||
<el-button :disabled="!isaddGroup" type="primary" size="small"
|
||||
>Add all to group</el-button
|
||||
>
|
||||
<el-button @click="showTickDialog()" type="primary" size="small"
|
||||
>Generate New Ticket ({{ ticketList.length }})</el-button
|
||||
>
|
||||
<el-popover
|
||||
placement="top"
|
||||
width="400"
|
||||
trigger="hover"
|
||||
v-if="!isaddGroup"
|
||||
>
|
||||
<el-alert
|
||||
:closable="false"
|
||||
title="info"
|
||||
type="warning"
|
||||
description="You cannot create a group until the criteria filter is complete."
|
||||
show-icon
|
||||
>
|
||||
</el-alert>
|
||||
<button
|
||||
slot="reference"
|
||||
style="margin-left:10px"
|
||||
class="el-button el-button--primary el-button--small is-disabled el-popover__reference"
|
||||
>
|
||||
<span> Generate New Group ({{ groupList.length }})</span>
|
||||
</button>
|
||||
</el-popover>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
v-else
|
||||
@click="showGroupDialog()"
|
||||
>Generate New Group ({{ groupList.length }})</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<el-table :data="tableData" style="width: 100%">
|
||||
<el-table-column prop="vin" label="VIN" width="220px"></el-table-column>
|
||||
<el-table-column prop="vid" label="VID" width="120px"></el-table-column>
|
||||
<el-table-column
|
||||
prop="brand"
|
||||
label="Brand"
|
||||
width="120px"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="modelCode"
|
||||
label="Model Code"
|
||||
width="120px"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="modelYear"
|
||||
label="Model Year"
|
||||
width="120px"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="modelFamily"
|
||||
label="Model Family"
|
||||
width="150px"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="adsVersion"
|
||||
label="ADS Version"
|
||||
width="150px"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="lifeCycle"
|
||||
label="LifeCycle"
|
||||
width="120px"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="onlineStatus"
|
||||
label="Online Status"
|
||||
width="150px"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="shadowVersion"
|
||||
label="Shadow Version"
|
||||
width="150px"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="existGroup"
|
||||
label="Exit Groups"
|
||||
width="150px"
|
||||
></el-table-column>
|
||||
<el-table-column prop="existIssue" label="Warning" width="120px">
|
||||
<template slot-scope="scope">
|
||||
<span class="red-circle">{{ scope.row.existIssue }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="action"
|
||||
label="Action"
|
||||
width="150px"
|
||||
fixed="right"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-tooltip
|
||||
content="Add to issue ticket"
|
||||
placement="top"
|
||||
effect="light"
|
||||
>
|
||||
<span
|
||||
:style="{ color: getIsColor(scope.row.vin, ticketList) }"
|
||||
class="icon iconfont icon-xinzengruku cursor table-acion"
|
||||
@click="addTicket(scope.row)"
|
||||
>
|
||||
</span>
|
||||
</el-tooltip>
|
||||
<el-tooltip
|
||||
v-if="isaddGroup"
|
||||
content="Add to group"
|
||||
placement="top"
|
||||
effect="light"
|
||||
>
|
||||
<span
|
||||
:style="{ color: getIsColor(scope.row.vin, groupList) }"
|
||||
class="icon iconfont icon-tianjiaqunzu cursor table-acion"
|
||||
@click="addGroup(scope.row)"
|
||||
>
|
||||
</span>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template slot="empty" v-if="tableData.length == 0">
|
||||
<span>No data available</span>
|
||||
</template>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
v-if="totalPage > 1"
|
||||
:current-page.sync="page"
|
||||
:page-size="limit"
|
||||
:total="total"
|
||||
@current-change="handleCurrentChange"
|
||||
@size-change="handleSizeChange"
|
||||
background
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
layout="prev,sizes, pager, next"
|
||||
></el-pagination>
|
||||
</div>
|
||||
<newGroupDialog
|
||||
ref="newGroupDialog"
|
||||
@addSuccess="groupList = []"
|
||||
></newGroupDialog>
|
||||
<newTicketDialog
|
||||
ref="newTicketDialog"
|
||||
@addSuccess="ticketList = []"
|
||||
></newTicketDialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { GetModel, GetVehicleList } from "@/api/vehicle";
|
||||
import { removeNull } from "@/utils/utils";
|
||||
import newGroupDialog from "./newGroupDialog.vue";
|
||||
import newTicketDialog from "./newTicketDialog.vue";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
brandList: [],
|
||||
modelCodeList: [],
|
||||
modelYearList: [],
|
||||
adsVersionList: [],
|
||||
onlineStatusList: [
|
||||
{ code: "1", name: "Off" },
|
||||
{ code: "0", name: "On" },
|
||||
],
|
||||
brand: "",
|
||||
modelCode: "",
|
||||
modelYear: "",
|
||||
adsVersion: "",
|
||||
vin: "",
|
||||
existGroup: "",
|
||||
onlineStatus: "",
|
||||
tableData: [],
|
||||
maxHeight: 0,
|
||||
page: 1,
|
||||
limit: 10,
|
||||
total: 0,
|
||||
totalPage: 10,
|
||||
isaddGroup: false,
|
||||
groupList: [],
|
||||
ticketList: [],
|
||||
};
|
||||
},
|
||||
components: { newGroupDialog, newTicketDialog },
|
||||
created() {
|
||||
this.getModel();
|
||||
this.getTableData();
|
||||
// this.getMaxHeight();
|
||||
// window.addEventListener('resize', () => {
|
||||
// this.getMaxHeight();
|
||||
// })
|
||||
},
|
||||
methods: {
|
||||
getModel() {
|
||||
GetModel().then((res) => {
|
||||
this.modelCodeList = removeNull(res.data.modelCode);
|
||||
this.modelYearList = removeNull(res.data.modelYear);
|
||||
this.adsVersionList = removeNull(res.data.adsVersion);
|
||||
this.brandList = removeNull(res.data.brand);
|
||||
});
|
||||
},
|
||||
getTableData() {
|
||||
let {
|
||||
brand,
|
||||
modelCode,
|
||||
modelYear,
|
||||
adsVersion,
|
||||
vin,
|
||||
existGroup,
|
||||
onlineStatus,
|
||||
page,
|
||||
limit,
|
||||
} = this;
|
||||
GetVehicleList({
|
||||
brand,
|
||||
modelCode,
|
||||
modelYear,
|
||||
adsVersion,
|
||||
vin,
|
||||
existGroup,
|
||||
onlineStatus,
|
||||
currentPage: page,
|
||||
pageSize: limit,
|
||||
}).then((res) => {
|
||||
this.tableData = res.data.records;
|
||||
this.total = res.data.total;
|
||||
this.totalPage = res.data.pages;
|
||||
});
|
||||
},
|
||||
addTicket(additem) {
|
||||
let isadd = true;
|
||||
this.ticketList.map((item, index) => {
|
||||
if (item.vin == additem.vin) {
|
||||
isadd = false;
|
||||
console.log("index", index);
|
||||
this.ticketList.splice(index, 1);
|
||||
// this.removeItem()
|
||||
}
|
||||
});
|
||||
if (isadd) {
|
||||
this.ticketList.push(additem);
|
||||
}
|
||||
},
|
||||
addGroup(additem) {
|
||||
let isadd = true;
|
||||
this.groupList.map((item, index) => {
|
||||
if (item.vin == additem.vin) {
|
||||
isadd = false;
|
||||
this.groupList.splice(index, 1);
|
||||
}
|
||||
});
|
||||
if (isadd) {
|
||||
this.groupList.push(additem);
|
||||
}
|
||||
},
|
||||
showGroupDialog() {
|
||||
let {
|
||||
brand,
|
||||
modelCode,
|
||||
modelYear,
|
||||
adsVersion,
|
||||
vin,
|
||||
existGroup,
|
||||
onlineStatus,
|
||||
groupList,
|
||||
} = this;
|
||||
let data = {
|
||||
brand,
|
||||
modelCode,
|
||||
modelYear,
|
||||
adsVersion,
|
||||
vin,
|
||||
existGroup,
|
||||
onlineStatus,
|
||||
groupList,
|
||||
};
|
||||
this.$refs.newGroupDialog.show(data);
|
||||
},
|
||||
showTickDialog() {
|
||||
if (this.ticketList.length == 0) {
|
||||
this.$message.info("please add frist Vehile");
|
||||
return;
|
||||
}
|
||||
let data = { ticketList: this.ticketList };
|
||||
this.$refs.newTicketDialog.show(data);
|
||||
},
|
||||
search() {
|
||||
let {
|
||||
brand,
|
||||
modelCode,
|
||||
modelYear,
|
||||
adsVersion,
|
||||
vin,
|
||||
existGroup,
|
||||
onlineStatus,
|
||||
page,
|
||||
limit,
|
||||
} = this;
|
||||
if (
|
||||
brand ||
|
||||
modelCode ||
|
||||
modelYear ||
|
||||
adsVersion ||
|
||||
vin ||
|
||||
existGroup ||
|
||||
onlineStatus
|
||||
) {
|
||||
this.isaddGroup = true;
|
||||
}
|
||||
this.ticketList = [];
|
||||
this.groupList = [];
|
||||
this.page = 1;
|
||||
this.getTableData();
|
||||
},
|
||||
reset() {
|
||||
this.brand = "";
|
||||
this.modelCode = "";
|
||||
this.modelYear = "";
|
||||
this.adsVersion = "";
|
||||
this.vin = "";
|
||||
this.existGroup = "";
|
||||
this.onlineStatus = "";
|
||||
this.page = 1;
|
||||
this.ticketList = [];
|
||||
this.groupList = [];
|
||||
this.isaddGroup = false;
|
||||
this.getTableData();
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.page = val;
|
||||
this.getTableData();
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
this.limit = val;
|
||||
this.handleCurrentChange(1);
|
||||
},
|
||||
getMaxHeight() {
|
||||
let bodyHeight =
|
||||
document.documentElement.clientHeight || document.body.clientHeight;
|
||||
this.maxHeight = bodyHeight - 194;
|
||||
},
|
||||
getIsColor(vin, list) {
|
||||
let isin = false;
|
||||
list.map((item) => {
|
||||
if (item.vin == vin) {
|
||||
isin = true;
|
||||
}
|
||||
});
|
||||
if (isin) {
|
||||
return "#0070fb";
|
||||
} else {
|
||||
return "#4a4a4c";
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user