<template>
|
<view class="pages-station-delete">
|
<view class="uni-list">
|
<checkbox-group @change="checkboxChange">
|
<label class="list-item" v-for="item in stationList" :key="item.stationID">
|
<view>
|
<checkbox :value="item.stationID" :checked="item.checked" />
|
</view>
|
<view>
|
|
<view class="item-title">{{item.name}}</view>
|
<view class="item-text">
|
角度：{{Math.round(item.angle *180/3.14)}}，坐标（{{Math.round(Number(item.x)*100)/100}},{{Math.round(Number(item.y)*100)/100}})
|
</view>
|
</view>
|
</label>
|
</checkbox-group>
|
</view>
|
<view class="bottom">
|
<checkbox :checked="checkedAll" @click="onSelectAll">全选</checkbox>
|
<view class="button-group">
|
|
<a-button type="primary" class="button" @click="clickDelelte">删除</a-button>
|
</view>
|
|
|
</view>
|
|
</view>
|
</template>
|
<script>
|
import {
|
showToast,
|
showModal,
|
session,
|
showError,
|
showInfo
|
} from "@/comm/utils.js"
|
import {
|
Button
|
} from 'antd-mobile-vue-next'
|
import {
|
stations,
|
delStation
|
} from "@/api/vehicle.js"
|
export default {
|
name: "PagesStationDelete",
|
components: {
|
'a-button': Button
|
},
|
data() {
|
return {
|
ip: "",
|
checkedAll: false,
|
stationList: [],
|
keyMethod: "",
|
listDel: []
|
}
|
},
|
onLoad(option) {
|
this.ip = option.ip || ""
|
|
this.loadData()
|
},
|
onBackPress() {
|
const eventChannel = this.getOpenerEventChannel();
|
eventChannel.emit('delete_finish', this.listDel);
|
|
},
|
methods: {
|
async loadData() {
|
try {
|
|
this.stationList = await this.loadStations() || []
|
|
} catch (ex) {
|
|
showError(ex)
|
}
|
},
|
async loadStations() {
|
try {
|
const info = await stations(this.ip)
|
return info.station_list || []
|
} catch (ex) {
|
showError(ex)
|
return []
|
}
|
},
|
checkboxChange(e) {
|
var items = this.stationList
|
const values = e.detail.value;
|
for (var i = 0, lenI = items.length; i < lenI; ++i) {
|
const item = items[i]
|
if (values.includes(item.stationID)) {
|
this.$set(item, 'checked', true)
|
} else {
|
this.$set(item, 'checked', false)
|
}
|
}
|
},
|
onSelectAll() {
|
this.checkedAll = !this.checkedAll
|
var items = this.stationList
|
|
console.log(this.checkedAll)
|
for (let i in items) {
|
const item = items[i]
|
this.$set(item, 'checked', this.checkedAll)
|
}
|
|
},
|
clickDelelte() {
|
const _this = this
|
var items = this.stationList
|
const list = []
|
for (var i = 0; i < items.length; ++i) {
|
const item = items[i]
|
if (item.checked) {
|
list.push(item.stationID)
|
}
|
|
}
|
if (list.length === 0) {
|
showInfo("未选择站点！")
|
return
|
}
|
showModal("删除选择的站点", "是否确认删除？").then((res) => {
|
if (res) {
|
_this.stationDelete(list)
|
}
|
})
|
|
|
},
|
async stationDelete(list) {
|
try {
|
uni.showLoading({
|
title: "正在删除站点"
|
})
|
|
await delStation(this.ip, list)
|
this.stationList = await this.loadStations() || []
|
|
this.listDel.push(...list)
|
showToast("删除站点成功")
|
} catch (ex) {
|
|
showError(ex)
|
} finally {
|
uni.hideLoading()
|
}
|
},
|
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.pages-station-delete {
|
display: flex;
|
width: 750rpx;
|
height: 100vh;
|
flex-direction: column;
|
background-color: #F5F5F5;
|
|
.uni-list {
|
flex: 1;
|
overflow-y: auto;
|
|
width: 730rpx;
|
margin: 10rpx;
|
border-radius: 10px;
|
|
background-color: #fff;
|
|
.list-item {
|
display: flex;
|
|
flex-direction: row;
|
padding: 10rpx;
|
border-bottom: 1px solid #ddd;
|
// justify-content: center;
|
align-items: center;
|
|
.item-title {
|
font-size: 32rpx;
|
padding: 10rpx 20rpx;
|
}
|
|
|
.item-text {
|
font-size: 28rpx;
|
color: #888;
|
padding: 10rpx 20rpx;
|
}
|
}
|
|
.list-item:first-child {
|
/* 右下角 */
|
border-top-right-radius: 10px;
|
}
|
|
.list-item:last-child {
|
border-bottom: 0;
|
border-bottom-right-radius: 10px;
|
/* 右下角 */
|
}
|
|
}
|
|
.bottom {
|
margin: 10rpx;
|
width: 730rpx;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
|
.button-group {
|
flex: 1;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
flex-direction: column;
|
font-size: 30rpx !important;
|
|
.am-button {
|
border-radius: 30px;
|
|
}
|
|
.button {
|
|
width: 300rpx;
|
|
}
|
}
|
}
|
|
}
|
</style>
|
