解读学习代码：
<script setup>
import {
carManGetService,
carManStartService,
carManStopService,
carManDelService,
vidallDataGetService
} from '@/api/cloud.js'
import { Plus, Delete, Edit, Search, Refresh } from '@element-plus/icons-vue'
import { ref } from 'vue'
import AddCar from './components/AddCar.vue'
import SureDevice from './components/SureDevice.vue'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import CarvidSelect from '@/views/manage/components/CarvidSelect.vue'
import DevcidSelect from '@/views/manage/components/DevcidSelect.vue'
import { Picture as IconPicture } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox, ElEmpty } from 'element-plus'
const tableRef = ref([])
const carManDataList = ref([])
const total = ref(0)
const updateDialog = ref()
const deviceDialog = ref()
// const editDialog = ref()
const tableSelection = ref([])
const loading = ref(true)
//定义请求参数对象
const params = ref({
pageNum: 1,
pageSize: 10,
cid: '',
vid: '',
key: '',
status: '',
enableStatus: ''
})
//导入列表数据
const getCarManDataList = async () => {
const res = await carManGetService(params.value)
// 增加健壮性判断
if (res && res.data && res.data.data) {
carManDataList.value = res.data.data.records
total.value = res.data.data.total
} else {
carManDataList.value = []
total.value = 0
}
loading.value = false
}
getCarManDataList()
// 获取所属车辆
const vidDataList = ref([])
const getRoleDataList = async () => {
const res = await vidallDataGetService()
vidDataList.value = res.data.data
}
getRoleDataList()
//搜索
const onSearch = () => {
params.value.pageNum = 1
getCarManDataList()
}
//重置
const onReset = () => {
params.value.pageNum = 1
params.value.cid = ''
params.value.vid = ''
params.value.key = ''
params.value.enableStatus = ''
params.value.status = ''
getCarManDataList()
}
//多选框
let ids = []
const handleSelectionChange = (selects) => {
ids = []
tableSelection.value = selects
selects.
forEach((rows) => {
ids.push(rows.id)
})
console.log(ids)
console.log(tableSelection.value)
}
// 表格样式
// const rowStyle = (val) => {
// // console.log('1111', val)
//
if (val.rowIndex % 2
=== 0) {
// // 奇数行
//
return {
// 'text-align': 'center',
// color: '#fff',
// background: '#2e3a54'
// // color: 'red'
// }
// }
// // 偶数行
// else
//
return {
// 'text-align': 'center',
// color: '#fff',
// backgroundColor: '#1f2940'
// }
// }
// 搜索式输入框
const handleSearch = () => {}
//新增
const onAddMessage = () => {
updateDialog.value.open({})
}
//编辑
const onEditTable = (row) => {
console.log(row.status)
updateDialog.value.open(row)
}
// 添加或者编辑 成功的回调
const onSuccess = (type) => {
if (type
=== 'add') {
// // 如果是添加，最好渲染最后一页
// const lastPage = Math.ceil((total.value + 1) / params.value.pageSize)
// // 更新成最大页码数，再渲染
// params.value.pageNum = lastPage
params.value.pageNum = 1
}
getCarManDataList()
}
//启用禁用
const onStart = async (row) => {
// console.log(row.status)
// console.log(row.id)
if (row.enableStatus
=== 0) {
// params.value.id = row.id
const res = await carManStartService({ id: row.id })
if (res.data.code
=== 200) {
// console.log('错误', res)
ElMessage.success('车辆已启用')
} else
if (res.data.code !
== 200) {
ElMessage.error(`${res.data.msg}`)
}
} else
if (row.enableStatus
=== 1) {
// params.value.id = row.id
const res = await carManStopService({ id: row.id })
if (res.data.code
=== 200) {
// console.log('错误', res)
ElMessage.success('车辆已禁用')
} else
if (res.data.code !
== 200) {
ElMessage.error(`${res.data.msg}`)
}
}
getCarManDataList()
}
// 绑定台架
const inSureDevice = async (row) => {
deviceDialog.value.open(row)
}
// 删除逻辑
const onDeleteMessage = async () => {
// 提示用户是否要删除
await ElMessageBox.confirm('此操作将永久删除该数据, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
const res = await carManDelService(ids)
if (res.data.code
== 200) {
ElMessage.success('删除成功')
getCarManDataList()
tableRef.value.clearSelection()
} else
if (res.data.code !
== 200) {
ElMessage.error(`${res.data.msg}`)
}
}
//处理分页逻辑
const handleSizeChange = (size) => {
//每页条数改变后，从第一页开始渲染
params.value.pageNum = 1
params.value.pageSize = size
getCarManDataList()
}
const handleCurrentChange = (page) => {
params.value.pageNum = page
getCarManDataList()
}
zhCn.el.pagination = {
goto: '跳至',
pageClass
ifier: '页',
total: '共 {total} 条',
pagesize: '条/页'
}
</script>
<template>
<div class="bread">
<el-breadcrumb separator="/">
<el-breadcrumb-item
><img src="@/assets/车辆管理i.png" style="width: 20px"
/></el-breadcrumb-item>
<el-breadcrumb-item>车辆管理</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/manage/car' }"
>车辆信息</el-breadcrumb-item
>
</el-breadcrumb>
</div>
<page-container>
<AddCar ref="updateDialog" @success="onSuccess"></AddCar>
<SureDevice ref="deviceDialog" @success="onSuccess"></SureDevice>
<el-form inline class="search_form">
<el-form-item label="关键字：">
<el-input
v-model="params.key"
placeholder="请输入车辆名称、车牌号"
clearable
@input="handleSearch"
></el-input>
</el-form-item>
<el-form-item label="车辆编号：">
<CarvidSelect
v-model="params.vid"
placeholder="请选择车辆编号"
clearable
@input="handleSearch"
></CarvidSelect>
</el-form-item>
<el-form-item label="驾驶舱编号：">
<DevcidSelect
v-model="params.cid"
placeholder="请选择驾驶舱编号"
clearable
@input="handleSearch"
></DevcidSelect>
</el-form-item>
<el-form-item label="在线状态：">
<el-select
v-model="params.status"
placeholder="请选择在线状态"
clearable
>
<el-option label="离线" :value="0"></el-option>
<el-option label="在线" :value="1"></el-option>
</el-select>
</el-form-item>
<el-form-item label="启用状态：">
<el-select
v-model="params.enableStatus"
placeholder="请选择启用状态"
clearable
>
<el-option label="禁用" :value="0"></el-option>
<el-option label="启用" :value="1"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button
@click="onSearch"
style="background-color: #165dff; color: #fff"
><el-icon style="padding-right: 5px"><Search /></el-icon>
搜索</el-button
>
<el-button @click="onReset" style="background-color: #fff; color: #000">
<el-icon style="padding-right: 5px"><Refresh /></el-icon>
重置</el-button
>
</el-form-item>
</el-form>
<el-form
class="function_form"
inline
style="just
ify-content: end; display: flex"
>
<el-form-item style="margin-right: 0">
<!-- <el-button
style="background-color: #366ef4; color: #fff"
@click="onUpdate"
:disabled="tableSelection.length
=== 0"
><el-icon style="padding-right: 5px"><Upload /></el-icon
>一键升级</el-button
> -->
<el-button
@click="onAddMessage"
style="background-color: #165dff; color: #fff"
>
<el-icon style="padding-right: 5px"><Plus /></el-icon>
新增</el-button
>
<el-button
@click="onDeleteMessage"
:disabled="tableSelection.length
=== 0"
style="background-color: #f53f3f; color: #fff"
>
<el-icon style="padding-right: 5px"><Delete /></el-icon>
删除</el-button
>
</el-form-item>
</el-form>
<el-table
id="table"
ref="tableRef"
:row-key="(row) => row.id"
@selection-change="handleSelectionChange"
:data="carManDataList"
style="width: 100%; margin-top: 10px"
:header-cell-style="{
'text-align': 'center',
background: '#f2f3f5',
color: '#000'
}"
:cell-style="{ 'text-align': 'center', color: '#000' }"
>
<el-table-column
fixed
type="selection"
:reserve-selection="true"
width="40"
/>
<el-table-column
prop="vid"
label="车辆编号"
min-width="160"
:show-overflow-tooltip="true"
><template #default="{ row }">
<div>
{{ vidDataList.find((item) => row.vid
== item.id)?.name || '-' }}
</div>
<div
v-
if="row.vid
=== '' || row.vid
=== null || row.vid
=== undefined"
>
-
</div>
</template>
</el-table-column>
<el-table-column
prop="cid"
label="驾驶舱编号"
min-width="100"
:show-overflow-tooltip="true"
><template #default="{ row }">
<div
v-
if="row.cid
=== '' || row.cid
=== null || row.cid
=== undefined"
>
-
</div>
</template>
</el-table-column>
<el-table-column
prop="name"
label="车辆名称"
min-width="120"
:show-overflow-tooltip="true"
><template #default="{ row }">
<div
v-
if="
row.name
=== '' || row.name
=== null || row.name
=== undefined
"
>
-
</div>
</template>
</el-table-column>
<el-table-column
prop="plateNumber"
label="车辆牌照"
min-width="120"
:show-overflow-tooltip="true"
><template #default="{ row }">
<div
v-
if="
row.plateNumber
=== '' ||
row.plateNumber
=== null ||
row.plateNumber
=== undefined
"
>
-
</div>
</template>
</el-table-column>
<!-- <el-table-column
prop="abilities"
label="车辆能力集"
min-width="120"
:show-overflow-tooltip="true"
><template #default="{ row }">
<div v-for="item in row.abilities" :key="item.id">
{{ item.name }},
</div>
<div
v-
if="
row.abilities
=== '' ||
row.abilities
=== null ||
row.abilities
=== undefined ||
row.abilities.length
=== 0
"
>
-
</div>
</template>
</el-table-column>
<el-table-column
prop="onboardDevices"
label="车载设备"
min-width="120"
:show-overflow-tooltip="true"
><template #default="{ row }">
<div v-for="item in row.onboardDevices" :key="item.id">
{{ item.name }},
</div>
<div
v-
if="
row.onboardDevices
=== '' ||
row.onboardDevices
=== null ||
row.onboardDevices
=== undefined ||
row.onboardDevices.length
=== 0
"
>
-
</div>
</template>
</el-table-column> -->
<el-table-column
prop="picture"
label="车辆图片"
min-width="110"
:show-overflow-tooltip="true"
>
<template #default="{ row }">
<el-image
v-
if="row.picture"
:src="row.picture"
alt=""
style="width: 50px; height: 50px"
>
<template #error>
<div class="image-slot">
<el-icon><icon-picture /></el-icon>
</div>
</template>
</el-image>
<div
v-
if="
row.picture
=== '' ||
row.picture
=== null ||
row.picture
=== undefined
"
>
-
</div>
</template>
</el-table-column>
<el-table-column
prop="status"
label="在线状态"
min-width="110"
:show-overflow-tooltip="true"
>
<template #default="{ row }">
<el-tag v-
if="row.status
=== 0" type="info">离线</el-tag>
<el-tag v-
if="row.status
=== 1" type="success">在线</el-tag>
<div
v-
if="
row.status
=== '' ||
row.status
=== null ||
row.status
=== undefined
"
>
-
</div>
</template>
</el-table-column>
<el-table-column
prop="enableStatus"
label="启用状态"
min-width="110"
:show-overflow-tooltip="true"
>
<template #default="{ row }">
<el-tag v-
if="row.enableStatus
=== 0" type="danger">禁用</el-tag>
<el-tag v-
if="row.enableStatus
=== 1" type="success">启用</el-tag>
<div
v-
if="
row.enableStatus
=== '' ||
row.enableStatus
=== null ||
row.enableStatus
=== undefined
"
>
-
</div>
</template>
</el-table-column>
<el-table-column
prop="hasGateway"
label="是否具备网关"
min-width="110"
:show-overflow-tooltip="true"
>
<template #default="{ row }">
<div v-
if="row.hasGateway
=== 0">否</div>
<div v-
if="row.hasGateway
=== 1">是</div>
<div
v-
if="
row.hasGateway
=== '' ||
row.hasGateway
=== null ||
row.hasGateway
=== undefined
"
>
-
</div>
</template>
</el-table-column>
<el-table-column
prop="model"
label="型号"
min-width="110"
:show-overflow-tooltip="true"
>
<template #default="{ row }">
<div
v-
if="
row.model
=== '' || row.model
=== null || row.model
=== undefined
"
>
-
</div>
</template>
</el-table-column>
<el-table-column
prop="manufactureDate"
label="出厂日期"
min-width="110"
:show-overflow-tooltip="true"
>
<template #default="{ row }">
<div
v-
if="
row.manufactureDate
=== '' ||
row.manufactureDate
=== null ||
row.manufactureDate
=== undefined
"
>
-
</div>
</template>
</el-table-column>
<el-table-column
prop="organizeId"
label="组织号"
min-width="110"
:show-overflow-tooltip="true"
>
<template #default="{ row }">
<div
v-
if="
row.organizeId
=== '' ||
row.organizeId
=== null ||
row.organizeId
=== undefined
"
>
-
</div>
</template>
</el-table-column>
<el-table-column prop="created" label="创建时间" min-width="170" />
<el-table-column prop="last" label="更新时间" min-width="170" />
<el-table-column label="操作" width="260" fixed="right">
<template #default="{ row }">
<el-button
class="operate"
style="color: #165dff"
link
@click="onEditTable(row)"
><el-icon style="padding-right: 3px"><Edit /></el-icon
>编辑</el-button
>
<el-text class="mx-1" style="color: #165dff; padding-left: 3px"
>|</el-text
>
<el-button link @click="onStart(row)">
<el-button link v-
if="row.enableStatus
=== 0" style="color: #00ff48"
><img
style="width: 14px; padding-right: 3px"
src="@/assets/logo.png"
/>启用</el-button
>
<el-button
class="operate"
link
v-
if="row.enableStatus
=== 1"
style="color: #ff4646"
><img
style="width: 13px; padding-right: 3px"
src="@/assets/logo.png"
/>禁用</el-button
>
</el-button>
<el-text class="mx-1" style="color: #165dff; padding-left: 3px"
>|</el-text
>
<el-button link @click="inSureDevice(row)">
<el-button link style="color: #165dff"
><img
style="width: 14px; padding-right: 3px"
src="@/assets/logo.png"
/>绑定驾驶舱</el-button
>
</el-button>
</template>
</el-table-column>
<template #empty>
<el-empty description="没有数据"></el-empty>
</template>
</el-table>
<el-pagination
:teleported="false"
v-model:current-page="params.pageNum"
v-model:page-size="params.pageSize"
:page-sizes="[5, 10]"
layout="total,prev, pager, next,sizes"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
style="margin-top: 40px; margin-bottom: 40px; just
ify-content: end"
/>
</page-container>
</template>
<style lang="scss" scoped>
.operate {
margin-left: 0px !important;
}
// :deep .el-input__wrapper {
// background-color: #f2f3f5;
// }
// 面包屑
.bread {
height: 50px;
display: flex;
align-items: center;
padding-left: 20px;
:deep .el-breadcrumb__item:last-child .el-breadcrumb__inner {
cursor: pointer !important;
}
}
:deep .el-breadcrumb {
display: flex;
align-items: center;
.el-breadcrumb__inner {
color: #4e5969;
}
.el-breadcrumb__item {
&:nth-child(1),
&:last-child {
.el-breadcrumb__inner {
color: #1d2129;
}
}
}
}
// 表格
:deep .el-scrollbar__wrap {
max-height: 48vh;
}
// 分页
:deep .el-pagination {
.el-pager li {
// background-color: #fff;
color: #000;
// border: 1px solid #e5e5ea;
border-radius: 2px;
min-width: 32px;
height: 32px;
margin: 0 5px;
}
.el-pager li:hover {
background-color: #e8f3ff;
color: #165dff;
}
.el-pager li.is-active {
background-color: #e8f3ff !important;
color: #165dff !important;
font-size: medium;
}
.btn-next,
.btn-prev {
// background-color: #fff;
// border: 1px solid #e5e5ea;
// border-radius: 5px;
width: 32px;
height: 32px;
}
}
:deep .image-slot {
display: flex;
just
ify-content: center;
align-items: center;
width: 100%;
height: 100%;
background: var(--el-fill-color-light);
color: var(--el-text-color-secondary);
font-size: 20px;
}
</style>
本文介绍了一段用于检查购物车项是否重复的代码片段。通过遍历购物车项集合，比较每项商品ID来判断是否存在重复的商品。如果找到相同的商品ID，则停止处理。
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
