ebike-ui/ebike-maintenance/pages/devops/bikesite/bikesite-list.vue

<template>
	<div style="background-color:#F2F2F2;height: 100vh;">
		<div style="display:flex;padding: 10px;">
			<uni-easyinput placeholder="请输入站点名称" suffixIcon="search" />
			<label style="margin-left: 10px;" @click="openMap">
				<uni-icons custom-prefix="iconfont" type="icon-ebikeditu2" color="#1b1a1a" size="40" />
			</label>
		</div>

		<div class="divSearch">
			<div v-for="(item,index) in arrSearch " :key="index"
				:class="'divSearchTab'+(searchIndex==index?' divSearchTabSel':'')" @click="changerOrder(index)">
				<label>{{item}}</label>
				<div class="divSearchRow">
					<div class="divSearchCel">
						<uni-icons custom-prefix="iconfont" type="icon-ebikesanjiaoxing"
							:color="(searchIndex==index&&searchType=='up')?iconColorSel:iconColor" size="8" />
					</div>
					<div class="divSearchCel">
						<uni-icons custom-prefix="iconfont" type="icon-ebikesanjiaoxing-copy"
							:color="(searchIndex==index&&searchType=='down')?iconColorSel:iconColor" size="8" />
					</div>
				</div>
			</div>
		</div>
		<div>
			<uni-card v-for="(item,index) in arrData" :key="'c'+index">
				<div style="display: flex;align-items: center;">
					<div class="divListItemType">
						{{item.zdlx}}
					</div>
					<div class="divListItemSite">
						{{item.zdmc}}
					</div>
					<div class="divTool">
						<label style="padding-left: 10px;" @click="editSite(item)">
							<uni-icons custom-prefix="iconfont" type="icon-ebikebianji" color="rgb(121 116 116)"
								size="20" />
						</label>
						<label style="padding-left: 10px;" @click="delSite(item)">
							<uni-icons custom-prefix="iconfont" type="icon-ebikeshanchu" color="rgb(121 116 116)"
								size="20" />
						</label>
					</div>
				</div>
				<div class="divListItem">
					<div class="divListItemTitle">站点级别</div>
					<div class="divListItemValue" style="color: red;">{{item.zdjb}}</div>
				</div>
				<div class="divListItem">
					<div class="divListItemTitle">创建时间</div>
					<div class="divListItemValue">{{item.cjsj}}</div>
				</div>
				<div class="divListItem">
					<div class="divListItemTitle">车辆数量</div>
					<div class="divListItemValue">{{item.clsl1}}/{{item.clsl2}}</div>
				</div>
				<div class="divListItem">
					<div class="divListItemTitle">租/还车辆数</div>
					<div class="divListItemValue">{{item.zcsl}}/{{item.hcsl}}</div>
				</div>
				<div class="divListItem">
					<div class="divListItemTitle">创建地点</div>
					<div class="divListItemValue" style="line-height: 18px;">{{item.cjdd}}</div>
				</div>
				<div class="divListItem">
					<div class="divListItemTitle">创建人</div>
					<div class="divListItemValue">{{item.cjr}}</div>
				</div>
			</uni-card>
			<div v-if="arrData.length==0" class="divNoData">
				暂无数据
			</div>
		</div>
		<div style="position:absolute;bottom:30px;right: 15px;" @click="addSite">
			<uni-icons type="plus" color="#7a6d6d" size="40" />
		</div>
	</div>

</template>

<script setup>
	import {
		ref,
		onUnmounted
	} from 'vue';
	import {
		showModelMessage
	} from "@/utils/tools.js";
	import {
		useSelarea
	} from "@/stores/selarea.js";
	import {
		onShow
	} from "@dcloudio/uni-app";
	import {
		callOperateApi
	} from '../../../utils/api';
	import { cloneDeep } from 'lodash';

	const arrSearch = ["实时车辆", "借车订单量", "还车订单量"]
	const iconColor = " #BDBDBD";
	const iconColorSel = "#000";
	const searchIndex = ref(null);
	const searchType = ref("");
	//数据
	const arrData = ref([]);

	const showBtn = ref(false); //显示按钮
	const btnContent = [{
		text: '编辑',
		active: false
	}, {
		text: '删除',
		active: false
	}];
	const selAreaStore = useSelarea();
	let zoneId = null;
	let pageNum = 1;
	let pageSize = 10;
	let selData=null;
	let loadType="";
	let siteName = ""; //查询条件

	function search(e) {
		console.log("111111111111111", e);
	}

	//排序
	function changerOrder(index) {
		showModelMessage("该功能暂未实现！");
		if (searchIndex.value == index && searchType.value == "up") {
			searchType.value = "down";

		} else {
			searchType.value = "up";
		}
		searchIndex.value = index;
	}

	function openMap() {
		uni.navigateTo({
			url: "/pages/map/map-bikesite?type=view"
		})
	}

	//添加站点
	function addSite() {
		uni.navigateTo({
			url: "/pages/map/map-bikesite?type=add&k=" + Date.now()
		});
	}

	//编辑
	function editSite(data) {
		const {
			id,
			radius
		} = data;
		uni.navigateTo({
			url: `/pages/devops/bikesite/bikesite-info?type=edit&id=${id}&k=${Date.now()}`
		});
	}

	function delSite(data) {
		console.log("0000000000000",data);
		const{id,pageNum:pn,index}=data;
		const params={
			ids:[id]
		}
		callOperateApi("ebikeRegion/delSite",params,"post").then(res=>{
			console.log("11111111111111111111111", "ebikeRegion/delSite", res);
			const {
				code,
				data,
				message
			} = res;
			if (code != 200) {
				console.log("ebikeRegion/delSite错误", message)
				return;
			}
			selData=data;
			loadType="del";
			loadData(pn);
		})
	}

	function loadData(pn,callbak) {
		const params = {
			zoneId,
			pageNum:pn,
			pageSize,
			siteName
		}
		callOperateApi("ebikeRegion/pageSite", params, "get").then(res => {
			console.log("11111111111111111111111", "ebikeRegion/pageSite", res);
			const {
				code,
				data,
				message
			} = res;
			if (code != 200) {
				console.log("ebikeRegion/pageSite错误", message)
				return;
			}
			const {
				records
			} = data;
			const arrNewData=_.cloneDeep(arrData.value);
			if(loadType=="del"){
				const{index}=selData;
				if(pageNum>pn){
					// arrNewData.splice(index,);
				}
				
			}
			records.map((item,index) => {
				const {
					siteRegionId,
					siteName,
					createdTime,
					allowedParkingNum,
					siteAdress
				} = item;
				const sindex=(pn-1)*pageSize+index;
				const newdata = {
					id: siteRegionId,
					zdlx: "停", //站点类型
					zdmc: siteName, //站点名称
					zdjb: "1级", //站点级别
					cjsj: createdTime, //创建时间
					clsl1: 0, //车辆数量
					clsl2: allowedParkingNum, //限制车辆数量
					zcsl: 0, //租车数量
					hcsl: 0, //还车数量
					cjdd: siteAdress, //创建地点
					cjr: "创建人", //创建人
					pageNum,
					index:sindex
				}
				arrNewData[sindex]=newdata;
			});
			arrData.value=arrNewData;
			if(callbak) callbak();
		})
	}

	onShow(() => {
		zoneId = selAreaStore.value;
		loadData(pageNum);
	});

	onUnmounted(() => {
		console.log("9999999999999999999999999onUnmounted")
	})
</script>

<style scoped>
	@import url("bikesite-list.css");
</style>