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

<template>
	<div style="width: 100vw;">
		<scroll-view class="divForm" :style="{height}" scroll-y show-scrollbar>
			<uni-forms ref="formRef" :model="formData" :label-width="80">
				<uni-forms-item label="站点名称" name="name" required :rules="[{'required': true,errorMessage: '请填写站点名称'}]">
					<uni-easyinput v-model="formData.name" />
				</uni-forms-item>
				<uni-forms-item label="站点类型:" name="zdlx" required
					:rules="[{'required': true,errorMessage: '请选择站点类型'}]">
					<uni-data-select v-model="formData.zdlx" :localdata="arrZDLX" />

				</uni-forms-item>
				<uni-forms-item label="站点级别:" name="zdjb" required
					:rules="[{'required': true,errorMessage: '请选择站点级别'}]">
					<div class="divRow">
						<uni-data-checkbox v-model="formData.zdjb" :localdata="arrZDJB" />
					</div>
				</uni-forms-item>
				<!-- 		<uni-forms-item label="调度投放:" name="ddtf" required :rules="[{'required': true,errorMessage: '请选择调度投放'}]">
					<div class="divRow">
						<uni-data-checkbox v-model="formData.ddtf" :localdata="arrDDTF" />
					</div>
		
				</uni-forms-item>
				<uni-forms-item label="用户端显示:" name="zdxs" required :rules="[{'required': true,errorMessage: '请选择用户端显示'}]">
					<div class="divRow">
						<uni-data-checkbox v-model="formData.zdxs" :localdata="arrZDXS" />
						<label style="margin-left: 10px;" @click="showTip('开启后在用户端小程序地图上不会显示站点,但不影响用户在该站点范围内还车')">
							<uni-icons type="info" size="20" color="#5892E3" /></label>
					</div> 
				</uni-forms-item>-->
				<uni-forms-item label="可停车辆:" name="ktcl" required
					:rules="[{'required': true,errorMessage: '请填写可停车辆'}]">
					<div class="divRow">
						<uni-easyinput v-model="formData.ktcl" />
						<label>辆</label>
					</div>
				</uni-forms-item>
				<uni-forms-item label="最大可停:" name="zdkt" required
					:rules="[{'required': true,errorMessage: '请填写最大可停'}]">
					<div class="divRow">
						<uni-easyinput v-model="formData.zdkt" />
						<label>辆</label>
					</div>
				</uni-forms-item>
				<!-- <uni-forms-item label="还车半径:">
					<div class="divRow">
						<uni-easyinput v-model="formData.hcbj" />
						<label>米</label>
					</div>
				</uni-forms-item> -->
				<uni-forms-item label="站点图片:">
					<div>
						<div class="divFontColor" style="margin: 10px 0px;">最多3张</div>
						<uni-file-picker file-mediatype="image" mode="grid" file-extname="png,jpg" :limit="3"
							:value="filevalue" @select="uploadfile" @delete="delfile" />
					</div>
				</uni-forms-item>
				<uni-forms-item label="站点描述:">
					<uni-easyinput type="textarea" v-model="formData.zdms" />
				</uni-forms-item>
				<!-- <uni-forms-item label="站点标签:">
					<uni-data-checkbox mode="button" multiple v-model="formData.zdbq" :localdata="arrZDBQ" />
				</uni-forms-item> -->
			</uni-forms>

		</scroll-view>
		<div class="divBottom">
			<div class="b-btn-white divtBtn" v-if="opentype=='edit'" @click="openMap">重新绘制</div>
			<div class="b-btn-white divtBtn" v-if="opentype=='add'" @click="openMap">返回绘制</div>
			<div class="b-btn-blue divtBtn" style="margin-left: 10px;" @click="SaveData">确认{{opentype=='add'?"新建":"保存"}}
			</div>
		</div>
	</div>

</template>

<script setup>
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		showModelMessage,
		getScreenHeightNoTabBar
	} from "@/utils/tools.js";
	import {
		ref
	} from "vue";
	import * as map from "@/utils/map.js";
	import AMapWX from "@/utils/amap-wx.130.js";
	import {
		callOperateApi,
		fileUploadApi
	} from "../../../utils/api";
	import config from "../../../utils/config";
	import {
		findIndex,
		lastIndexOf
	} from "lodash";

	var qqmapsdk = new AMapWX({
		key: map.sdkKey
	});

	const formRef = ref("formRef");
	let height = ref("100%");
	const opentype = ref("add");

	const arrZDLX = ref([]);

	const arrZDJB = ref([]);

	/* const arrDDTF = ref([{
		text: "开启",
		value: 1
	}, {
		text: "关闭",
		value: 2
	}]);

	const arrZDXS = ref([{
		text: "隐藏",
		value: 1
	}, {
		text: "显示",
		value: 2
	}]);

	const arrZDBQ = ref([{
		text: "早高峰",
		value: 1
	}, {
		text: "午高峰",
		value: 2
	}, {
		text: "晚高峰",
		value: 2
	}]); */

	let arrPoint = [];
	let radius = null;
	let regionid = null;
	let arrFile = [];
	const filevalue = ref([]);
	const formData = ref({
		id: "",
		name: "",
		address: "",
		zdlx: 1,
		zdjb: 1,
		ktcl: 10,
		zdkt: 20,
		hcbj: 10,
		zdms: "",
		zdbq: [1],
		zdtf: 1,
		zdxs: 1
	});

	function openMap() {
		const type = opentype.value;
		if (type == "add") {
			uni.navigateBack();
			return;
		}
		if (type == "edit") {
			const id = formData.value.id;
			const points = JSON.stringify(arrPoint);
			uni.navigateTo({
				url: `/pages/map/map-bikesite?type=edit&id=${id}&points=${points}&k=${Date.now()}`
			})
		}
	}

	function SaveData() {
		formRef.value.validate().then(res => {
			const {
				name,
				zdlx,
				zdjb,
				ktcl,
				zdkt,
				zdms
			} = res;
			const {
				id,
				address
			} = formData.value;
			let shapeType = 2;
			let points = null;
			let siteLng = null;
			let siteLat = null;
			let r = null;
			if (arrPoint.length == 1) {
				shapeType = 1;
				siteLng = arrPoint[0].longitude;
				siteLat = arrPoint[0].latitude;
				r = radius;
			} else {
				points = arrPoint;
			}
			const params = {
				siteRegionId: id,
				operationRegionId: regionid,
				siteName: name,
				siteAdress: address,
				siteType: zdlx,
				siteLevel: zdjb,
				allowedParkingNum: ktcl,
				allowedParkingMax: zdkt,
				radius: r,
				shapeType,
				points,
				siteLng,
				siteLat,
				imageIds: arrFile,
				describe: zdms
			}
			let url = "ebikeRegion/saveSite"
			if (opentype.value == "edit") {
				url = "ebikeRegion/updateSite";
			}
			callOperateApi(url, params, "post").then(res => {
				console.log("1111111111111111111", "/ebikeRegion/saveSite", params, res);
				const {
					code,
					data,
					message
				} = res;
				if (code != 200) {
					showModelMessage("保存失败！");
					console.log("ebikeRegion/saveSite", message);
					return;
				} else {
					showModelMessage("保存成功！");
					uni.reLaunch({
						url: "/pages/devops/bikesite/bikesite-list"
					})
				}
			})

		})
	}

	function showTip(title) {
		showModelMessage(title);
	}

	//站点类型
	function getZDLX() {
		callOperateApi("ebikeRegion/siteType", null, "get").then(res => {
			const {
				code,
				data,
				message
			} = res;
			if (code != 200) {
				console.log("ebikeRegion/siteType", message)
			}
			const arrData = [];
			data.map(item => {
				const {
					siteTypeName,
					siteTypeValue
				} = item;
				arrData.push({
					text: siteTypeName,
					value: siteTypeValue
				})
			})
			arrZDLX.value = arrData;
		})
	}

	//站点级别
	function getZDJB() {
		callOperateApi("ebikeRegion/siteLevelList", null, "get").then(res => {
			const {
				code,
				data,
				message
			} = res;
			if (code != 200) {
				console.log("ebikeRegion/siteLevelList", message)
			}
			const arrData = [];
			data.map(item => {
				const {
					levelName,
					levelValue
				} = item;
				arrData.push({
					text: levelName,
					value: levelValue
				})
			})
			arrZDJB.value = arrData;
		});

	}

	function uploadfile(e) {
		fileUploadApi("operate/ebikeRegion/siteImagesUpload", e.tempFiles[0]).then(res => {
			const {
				code,
				message,
				data
			} = res;
			if (code != 200) {
				console.log("uploadfile", message);
				showModelMessage("上传失败！")
			}
			arrFile.push(data);
		})
	}

	function delfile(e) {
		const {
			index
		} = e;
		arrFile.splice(index, 1);
		console.log("99999999999999999999999", e);
	}

	function getSiteInfo(id) {
		const params = {
			siteRegionId: id
		}
		callOperateApi("ebikeRegion/siteInfo", params, "get").then(res => {
			const {
				code,
				data,
				message
			} = res;
			if (code != 200) {
				showModelMessage("获取数据失败！");
				console.log("ebikeRegion/siteInfo", message);
			}
			const {
				siteRegionId: id,
				operationRegionId,
				siteName,
				siteAdress,
				siteType,
				siteLevel,
				siteLng,
				siteLat,
				shapeType,
				radius: r,
				points,
				allowedParkingNum,
				allowedParkingMax,
				describe,
				images = []
			} = data;
			regionid = operationRegionId;
			radius = r;
			const arrFileData = [];
			images.map(item => {
				const {
					imageId,
					imageBucket,
					imageName
				} = item;
				const extname = imageName.substring(lastIndexOf(imageName, ".") + 1);
				const obj = {
					url: `${config.filePath}/${imageBucket}/${imageName}`,
					name: imageName,
					extname
				}
				arrFileData.push(obj);
				arrFile.push(imageId);
			});
			if (arrPoint.length == 0) {
				if (shapeType == "2") {
					arrPoint = points;
				} else {
					arrPoint = [{
						longitude: siteLng,
						latitude: siteLat
					}]
				}
			}


			filevalue.value = arrFileData;
			formData.value = {
				id,
				name: siteName,
				address: siteAdress,
				zdlx: siteType,
				zdjb: siteLevel,
				ktcl: allowedParkingNum,
				zdkt: allowedParkingMax,
				//hcbj: 10,
				zdms: describe,
				//zdbq: [1],
				// zdtf: 1,
				// zdxs: 1
			}

		})
	}
	onLoad(options => {
		const {
			id,
			points,
			radius: r,
			type,
			regionid: rid
		} = options;
		console.log("111111111111111111111", options)
		opentype.value = type;
		regionid = rid;

		let title = "";
		switch (type) {
			case "add":
				title = "新建站点";
				break;
			case "edit":
				title = "编辑站点";
				break;
		}
		uni.setNavigationBarTitle({
			title
		});
		getScreenHeightNoTabBar(res => {
			height.value = (res - 60) + "px";
		});
		arrPoint = [];
		if (points) {

			arrPoint = JSON.parse(points);
			radius = r;
			const {
				latitude,
				longitude
			} = arrPoint[0];
			if (type == "add") {
				map.reverseGeocoder(qqmapsdk, longitude, latitude, (res) => {
					const {
						name,
						formatted_address,
						adcode,
						province,
						city,
						district
					} = res;
					// const {
					// 	address,
					// 	formatted_addresses: {
					// 		recommend
					// 	}
					// } = res;
					formData.value = {
						...formData.value,
						name: name,
						address: formatted_address
					}
				}, (res) => {
					console.log("fail", res);
				})
			}
		}
		if (arrZDLX.value.length == 0) {
			getZDLX();
		}
		if (arrZDJB.value.length == 0) {
			getZDJB();
		}
		if (id) {
			getSiteInfo(id);
		}
	});
</script>

<style scoped>
	.divForm {
		width: 100vw;
		padding: 10px 20px 10px 15px;
	}

	/* .divForm /deep/ .uni-forms-item {
		margin-bottom: 10px !important;
	} */

	.divFontColor {
		color: #606266;
	}

	.divRow {
		display: flex;
		align-items: center;
		font-size: 14px;
		color: #606266;
		height: 36px;
	}

	.divRow label {
		margin-left: 10px;
	}

	.divBottom {
		position: absolute;
		bottom: 10px;
		background-color: white;
		padding: 10px;
		display: flex;
		justify-content: space-evenly;
		width: 100vw;
	}

	.divBottom .divtBtn {
		width: 100vw;
		text-align: center;
	}
</style>