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

<template>
	<z-paging ref="paging" v-model="arrData" default-page-no="1" :default-page-size="pageNum" auto-show-back-to-top
		@query="query">
		<template #top>
			<div style="display:flex;padding: 10px;">
				<uni-easyinput v-model="siteName" placeholder="请输入站点名称" suffixIcon="search" @iconClick="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>
		</template>
		<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>

	</z-paging>
	<div style="position:fixed;bottom:30px;right: 15px;z-index: 100;" @click="addSite">
		<uni-icons type="plus" color="#7a6d6d" size="40" />
	</div>
</template>

<script setup>
	import {
		ref,
		onMounted,
		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 paging = ref(null);
	//数据
	const arrData = ref([]);

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

	function query(pageNo, pageSize) {
		let params = {
			zoneId,
			pageNum: pageNo.toString(),
			pageSize: pageSize.toString(),
			siteName: siteName.value
		}
		if(searchIndex.value==0){
			showModelMessage("该功能暂未实现！");
			return;
		}
		else{
			const lx=searchType.value;
			switch(searchIndex.value){
				case "1":
				if(lx=="up"){
					params={...params,borrowingSort: 1}
				}
				else{
					params={...params,borrowingSort: 2}
				}
				break;
				case "2":
				if(lx=="up"){
					params={...params,returnOrder: 1}
				}
				else{
					params={...params,returnOrder: 2}
				}
				break;
			}
		}
		
		uni.showLoading({
			title:"加载中"
		})
		callOperateApi("ebikeRegion/pageSite", params, "get").then(res => {
			const {
				code,
				data,
				message
			} = res;
			if (code != 200) {
				uni.hideLoading();
				console.log("ebikeRegion/pageSite错误", message);
				paging.value.complete(false);
				return;
			}
			const {
				records
			} = data;
			
			const arrNewData = [];
			records.map((item, index) => {
				const {
					siteRegionId,
					siteName,
					createdTime,
					allowedParkingNum,
					siteAdress,
					levelName,
					siteTypeName,
					borrowingOrder,
					returnOrder
				} = item;
				const sindex = (pageNo - 1) * pageSize + index;
				const newdata = {
					id: siteRegionId,
					zdlx: (siteTypeName && siteTypeName.length > 0) ? siteTypeName.substring(0, 1) :"", //站点类型
					zdmc: siteName, //站点名称
					zdjb: levelName, //站点级别
					cjsj: createdTime, //创建时间
					clsl1: 0, //车辆数量
					clsl2: allowedParkingNum, //限制车辆数量
					zcsl: borrowingOrder, //租车数量
					hcsl: returnOrder, //还车数量
					cjdd: siteAdress, //创建地点
					cjr: "创建人", //创建人
					pageNum,
					index: sindex
				}
				arrNewData[index] = newdata;
			});
			paging.value.complete(arrNewData);
			uni.hideLoading();
		})
	}

	function search(e) {
		paging.value.reload();
		searchIndex.value=null;
		searchType.value=null;
	}

	//排序
	function changerOrder(index) {
		if (searchIndex.value == index && searchType.value == "up") {
			searchType.value = "down";

		} else {
			searchType.value = "up";
		}
		searchIndex.value = index;
		paging.value.reload();
	}

	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(obj) {
		const {
			id,
			pageNum: pn,
			index,
			zdmc
		} = obj;
		const params = {
			ids: [id]
		}

		showModelMessage(`确认删除站点：${zdmc}？`, null, true).then((res) => {
			const {
				cancel,
				confirm
			} = res;
			if (cancel) return;
			uni.showLoading({
				title: '加载中'
			})
			callOperateApi("ebikeRegion/delSite", params, "post").then(res => {
				console.log("11111111111111111111111", "ebikeRegion/delSite", res);
				const {
					code,
					data,
					message
				} = res;
				if (code != 200) {
					uni.hideLoading();
					showModelMessage("删除失败！");
					console.log("ebikeRegion/delSite错误", message)
					return;
				}
				// selData = obj;
				// loadType = "del";
				uni.hideLoading();
				showModelMessage("删除成功！");
				paging.value.reload();
			})
		})

	}



	onShow(() => {
		zoneId = selAreaStore.value;
		if (paging && paging.value) paging.value.refresh();
		// loadData(pageNum);
	});

</script>

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