<script setup>
|
import {ref, onMounted, watch} from "vue";
|
import {ElMessage, ElMessageBox} from "element-plus";
|
import {
|
allDrivesModule, changeDriveInfoModule,
|
driveInfModule
|
} from "@/views/moudle/driveInf/driveInf";
|
import EditDriveParams from "@/components/params/editDriveParams.vue";
|
import AddDriveParams from "@/components/params/addDriveParams.vue";
|
const editVisible = ref(false);
|
const addVisible = ref(false);
|
const {
|
page,
|
pageSize,
|
total,
|
driveList,
|
carName,
|
getDriveList
|
} = driveInfModule();
|
const loading = ref(false);
|
const svg = `
|
<path class="path" d="
|
M 30 15
|
L 28 17
|
M 25.61 25.61
|
A 15 15, 0, 0, 1, 15 30
|
A 15 15, 0, 1, 1, 27.99 7.5
|
L 15 15
|
" style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
|
`;
|
/**
|
* 查询汽车列表
|
* @return {Promise<void>}
|
*/
|
const searchDriveList = async ()=>{
|
// 开启等待框
|
loading.value = true;
|
|
let res = await getDriveList();
|
driveList.value = res.result;
|
// 关闭等待框
|
loading.value = false;
|
}
|
|
watch(carName, ()=>{
|
searchDriveList();
|
});
|
|
/**
|
* 每页查询个数变更
|
* @param value 每页查询个数
|
*/
|
const sizeChange = (value)=>{
|
pageSize.value = value;
|
searchDriveList();
|
}
|
|
/**
|
* 当前页个数
|
* @param value 当前页页码
|
*/
|
const currentChange = (value)=>{
|
page.value = value;
|
searchDriveList();
|
}
|
|
const {
|
allDriveList,
|
getAllDriveList
|
} = allDrivesModule();
|
|
const searchAllDrives = async ()=>{
|
const res = await getAllDriveList();
|
console.log(res);
|
}
|
|
const {
|
deleteDrive
|
} = changeDriveInfoModule();
|
const handleDeleteDrive = (row)=>{
|
ElMessageBox.confirm(
|
"确认删除当前车辆",
|
"系统提示"
|
).then(async ()=>{
|
const rs = await deleteDrive(row.id);
|
if (rs.code === 1) {
|
ElMessage({
|
message: rs.message,
|
type: "success"
|
});
|
searchDriveList();
|
}else {
|
ElMessage.error(rs.message);
|
}
|
}).catch(()=>{});
|
}
|
|
import useBoxListSearch from "@/views/user/hooks/useBoxListSearch";
|
|
// 模糊查询模块
|
const {loading: boxSearchLoading, selectBox, boxList, boxListSearch} = useBoxListSearch();
|
watch(selectBox, (name)=>{
|
carName.value = name;
|
console.log(carName.value);
|
})
|
|
onMounted(()=>{
|
searchDriveList();
|
searchAllDrives();
|
boxListSearch();
|
});
|
</script>
|
|
<template>
|
<div class="page-container">
|
<div class="page-content">
|
<div class="page-header">
|
<div class="input-list">
|
<!-- <div class="input-item">-->
|
<!-- <div class="input-wrapper">-->
|
<!-- <div class="input-label">车辆名称:</div>-->
|
<!-- <div class="input-content">-->
|
<!-- <el-select v-model="carName" filterable>-->
|
<!-- <el-option-->
|
<!-- v-for="(item, key) in allDriveList.data" :key="'key'+key"-->
|
<!-- :value="item.key" :label="item.label"></el-option>-->
|
<!-- </el-select>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<div class="input-item">
|
<el-select
|
v-model="selectBox"
|
clearable
|
filterable
|
remote
|
reserve-keyword
|
placeholder="请输入车辆名称"
|
remote-show-suffix
|
:remote-method="boxListSearch"
|
:loading="boxSearchLoading">
|
<el-option
|
v-for="(item, key) in boxList"
|
:key="'key'+key"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
<span class="w16-block"></span>
|
<el-button type="success" icon="Plus" @click="addVisible=true">添加</el-button>
|
<el-button type="primary" icon="Search" @click="searchDriveList">查询</el-button>
|
</div>
|
</div>
|
</div>
|
<div class="page-content">
|
<el-table
|
v-loading="loading"
|
element-loading-text="数据加载中..."
|
:element-loading-spinner="svg"
|
element-loading-svg-view-box="-10, -10, 50, 50"
|
element-loading-background="rgba(122, 122, 122, 0.5)"
|
:data="driveList"
|
height="100%">
|
<el-table-column min-width="120" align="center" prop="name" label="车辆名称" />
|
<el-table-column min-width="120" align="center" prop="boxSn" label="车辆编码"></el-table-column>
|
<el-table-column align="center" prop="online" label="车辆状态">
|
<template #default="{row}">
|
<el-tag v-if="row.online" type="success">在线</el-tag>
|
<el-tag v-else type="danger">离线</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column min-width="170" align="center" prop="createTime1" label="创建日期"></el-table-column>
|
<el-table-column min-width="170" align="center" prop="onlineTime1" label="在线时间"></el-table-column>
|
<el-table-column min-width="170" align="center" prop="updateTime1" label="数据更新日期"></el-table-column>
|
<el-table-column align="center" fixed="right" label="操作" width="120">
|
<template #default="{row}">
|
<!-- <el-button link type="primary" size="small" @click="editVisible = true">编辑</el-button>-->
|
<el-button link type="primary" size="small" @click="handleDeleteDrive(row)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<div class="page-footer">
|
<div class="el-pagination-container">
|
<el-pagination
|
background
|
layout="total, sizes, prev, pager, next, jumper"
|
@size-change="sizeChange"
|
@current-change="currentChange"
|
:total="total"></el-pagination>
|
</div>
|
</div>
|
</div>
|
</div>
|
<el-dialog
|
v-model="editVisible"
|
title="车辆信息编辑"
|
width="auto"
|
draggable
|
destroy-on-close
|
align-center>
|
<edit-drive-params v-model:visible="editVisible"></edit-drive-params>
|
</el-dialog>
|
|
<el-dialog
|
v-model="addVisible"
|
title="车辆信息添加"
|
width="auto"
|
draggable
|
destroy-on-close
|
align-center>
|
<add-drive-params v-model:visible="addVisible" @success="searchDriveList"></add-drive-params>
|
</el-dialog>
|
</template>
|
|
<style scoped lang="less">
|
.page-container {
|
height: 100%;
|
padding: 12px;
|
.page-content {
|
display: flex;
|
height: 100%;
|
border-radius: 4px;
|
box-shadow: 0 0 12px rgba(0, 0, 0, .16);
|
flex-direction: column;
|
.page-header {
|
padding: 8px;
|
}
|
.page-content {
|
flex: 1;
|
overflow-y: auto;
|
}
|
.page-footer {
|
padding: 8px 0;
|
text-align: center;
|
.el-pagination-container {
|
display: inline-block;
|
}
|
}
|
}
|
}
|
|
.input-list {
|
.input-item {
|
display: inline-block;
|
margin-left: 8px;
|
vertical-align: top;
|
}
|
}
|
.input-wrapper {
|
display: flex;
|
.input-content {
|
width: 160px;
|
}
|
.input-label {
|
font-size: 14px;
|
line-height: 32px;
|
vertical-align: bottom;
|
margin-right: 8px;
|
}
|
}
|
span.w16-block {
|
display: inline-block;
|
width: 16px;
|
}
|
</style>
|
