app-station-control-frontend_v1/pages/basic-data/index.vue

<template>
	<view class="basic-data">
		<view class="basic-top">
			<view class="times">最近同步时间：{{synchronizationTime || '-'}}</view>
			<view class="sync-btn" @click="syncCloud">云端同步</view>
			<view class="title">车辆管理</view>
		</view>
		<view class="basic-search">
			<uni-forms ref="form" :modelValue="queryParams" class="searchForm">
				<uni-forms-item label="车牌号码:" label-width="72px" label-align="right" name="vehiclePlate">
					<uni-easyinput type="text" v-model="queryParams.vehiclePlate" placeholder="请输入车牌号码" />
				</uni-forms-item>
				<uni-forms-item label="车辆识别码:" label-width="128px" label-align="right" name="vehicleVin">
					<uni-easyinput type="text" v-model="queryParams.vehicleVin" placeholder="请输入车辆识别码" />
				</uni-forms-item>
				<uni-forms-item label="来源:" label-width="80px" label-align="right">
					<uni-data-select v-model="queryParams.source" :localdata="formSelect" style="width: 100px;"
						@change="change"></uni-data-select>
				</uni-forms-item>
			</uni-forms>
			<view class="search-btn" @click="handleQuery">查询</view>
			<view class="reset-btn" @click="resetForm">重置</view>
		</view>
		<view class="basic-table">
			<view class="search-btn marginZero" @click="OpenAddDrawer">新增</view>
			<baseDateTable @DelCarData="DelCarData" @EditCarData="EditCarData" :headerFixed="true"
				:showLoadMore="showLoadMore" :loadMore="loadMore" :columnFixed=1 :contents="datalist" :headers="headers"
				@onPullup="pullup">
			</baseDateTable>
		</view>
		<!-- 顶部公共提示信息 -->
		<uni-popup ref="Exchangepopup" type="message">
			<uni-popup-message :type="popupType" :message="popupMessage" :duration="2000"></uni-popup-message>
		</uni-popup>
		<!-- 顶部提示信息结束-->
		<!--右侧抽屉 -->
		<uni-drawer ref="BasicDrawer" mode="right" :width="400" :mask-click="true">
			<scroll-view style="height: 100%;" scroll-y="true">
				<PublicDrawer :flag="false" :title="dialogType=='new'?'新增车辆':'编辑车辆'" @closeDrawer="closeDrawer"
					@AddCarinfo="AddCarinfo" @EditCarInfo="EditCarInfo">
					<view class="drawer_main">
						<view>
							<BasicDrawer :basicFrom="basicFrom" :range="range"></BasicDrawer>
						</view>
					</view>
				</PublicDrawer>
			</scroll-view>
		</uni-drawer>
		<!-- 右侧抽屉结束 -->
	</view>
</template>

<script>
	import baseDateTable from './baseData-table/baseDateTable'
	import BasicDrawer from './BasicDrawer'
	export default {
		name: 'BasicData',
		components: {
			baseDateTable,
			BasicDrawer
		},
		data() {
			return {
				popupMessage: '成功消息',
				popupType: 'success',
				formSelect: [{
						value: 0,
						text: "站控"
					},
					{
						value: 1,
						text: "云端"
					},
				],
				basicFrom: {
					id: 0,
					CarDistance: null,
					CarPlate: undefined,
					CarVin: undefined,
					state: undefined,
				},
				range: [{
						value: 0,
						text: "停用"
					},
					{
						value: 1,
						text: "启用"
					},
				],
				datalist: [],
				queryParams: {
					page: 1, //当前页
					pageSize: 10, //每页条数
					source: undefined, //来源
					vehiclePlate: undefined, //车牌号
					vehicleVin: undefined, //VIN码
					orderByField: 'id', //排序字段
					orderByWays: 'desc' //排序方式
				},
				total: 0, //总条数，
				loading: false,
				headers: [{
					label: '车牌号',
					key: 'vehiclePlate',
					widtd: 210
				}, {
					label: '车辆识别码(VIN码)',
					key: 'vehicleVin',
					widtd: 315
				}, {
					label: '前端电池距离(mm)',
					key: 'modelDistance',
					widtd: 200
				}, {
					label: '来源',
					key: 'source',
					widtd: 100,
				}, 
				// {
				// 	label: '状态',
				// 	key: 'state',
				// 	widtd: 108,

				// }, 
				{
					label: '操作',
					key: 'id',
					widtd: 108,
				},
				],
				showLoadMore: false,
				loadMore: 'more',
				dialogType: 'new', // 按钮类型(new、edit)
				EditCarForm: {}, //编辑车辆表单数据接收
				synchronizationTime:'',//同步时间
			}
		},
		mounted() {
			this.vehicleList();
			this.getsynchronization()
		},
		methods: {
			//顶部公共消息提示
			ExchangeMessage(type, message) {
				this.popupType = type
				this.popupMessage = message ? message : '后端接口404错误!'
				this.$refs.Exchangepopup.open()
			},
			//获取最近同步时间
			getsynchronization(){
				this.$http.getSyncTime().then(res=>{
					if(res.code == 0){
						this.synchronizationTime = res.data
					}
				})
			},
			//删除车辆
			DelCarData(id) {
				let that = this
				uni.showModal({
					title: `确认删除车辆信息吗?`,
					content: '',
					success: function(res) {
						if (res.confirm) {
							that.$http.delvehicle(id + '')
								.then(res => {
									if (res.code === 0) {
										that.vehicleList()
									}
									that.ExchangeMessage(res.code === 0 ? 'success' : 'error', res.code === 0 ? '删除车辆成功' : '删除车辆失败')
								}).catch(err => {
									console.error(err)
								})
						} else if (res.cancel) {
							return false
							//用户点击取消按钮触发
						}
					}
				})

			},
			// 打开添加车辆抽屉
			OpenAddDrawer() {
				this.dialogType = 'new'
				this.basicFrom = {
					id: 0,
					CarDistance: null,
					CarPlate: undefined,
					CarVin: undefined,
					state: undefined,
				}
				this.$refs.BasicDrawer.open();
			},
			//打开编辑车辆抽屉
			EditCarData(row) {
				console.log(row)
				this.dialogType = 'edit'
				this.$refs.BasicDrawer.open();
				this.basicFrom.CarDistance = row.modelDistance
				this.basicFrom.CarPlate = row.vehiclePlate
				this.basicFrom.CarVin = row.vehicleVin
				this.basicFrom.state = row.state
				this.basicFrom.id = row.id
			},
			//编辑车辆请求接口
			EditCarInfo() {
				if (!this.basicFrom.CarDistance || !this.basicFrom.CarPlate || !this.basicFrom.CarVin) {
					this.ExchangeMessage('warn', '请填写完整!')
				} else {
					const params = {
						modelDistance: this.basicFrom.CarDistance,
						vehiclePlate: this.basicFrom.CarPlate,
						vehicleVin: this.basicFrom.CarVin,
						state: this.basicFrom.state * 1,
						id: this.basicFrom.id
					}
					this.$http.Editvehicle(params)
						.then(res => {
							this.closeDrawer()
							this.ExchangeMessage(res.code === 0 ? 'success' : 'error', res.msg)
							if (res.code === 0) {
								this.vehicleList()
							}
						}).catch(err => {
							console.error(err)
						})
				}
			},
			// 添加车辆请求接口
			AddCarinfo() {
				if (!this.basicFrom.CarDistance || !this.basicFrom.CarPlate || !this.basicFrom.CarVin) {
					this.ExchangeMessage('warn', '请填写完整!')
				} else {
					const params = {
						modelDistance: this.basicFrom.CarDistance,
						vehiclePlate: this.basicFrom.CarPlate,
						vehicleVin: this.basicFrom.CarVin,
						source: 0,
					}
					this.$http.addvehicle(params)
						.then(res => {
							this.closeDrawer()
							this.ExchangeMessage(res.code === 0 ? 'success' : 'error', res.code === 0 ? '新增车辆成功' : '新增车辆失败')
							if (res.code === 0) {
								this.vehicleList()
							}
						}).catch(err => {
							console.error(err)
						})
				}

			},
			//查询
			handleQuery() {
				this.queryParams.page = 1
				this.datalist = []
				this.showLoadMore = false
				this.vehicleList()
			},
			//重置
			resetForm() {
				this.queryParams = {
					page: 1,
					pageSize: 10,
					source: undefined, //来源
					vehiclePlate: undefined, //车牌号
					vehicleVin: undefined, //VIN码
				}
				this.vehicleList()
			},
			//车辆列表，
			vehicleList() {
				console.log(this.queryParams)
				this.$http.vehicleList(this.queryParams).then((res) => {
					this.datalist = res.data.records;
					this.total = res.data.total;
				});
			},
			//关闭抽屉
			closeDrawer() {
				this.$refs.BasicDrawer.close();
			},
			//触底加载数据
			pullup() {
				this.showLoadMore = true
				if (this.total == this.datalist.length) {
					this.loadMore = 'no-more'
					return
				} else {
					this.queryParams.page++
					this.vehicleList()
					this.loadMore = 'loading'
				}
			},
			//同步云端
			syncCloud() {
				let that = this
				uni.showModal({
					title: "是否同步云端",
					content: "",
					success: function(res) {
						if (res.confirm) {
							that.$http.getSync().then(res=>{
									that.ExchangeMessage(res.code === 0 ? 'success' : 'error', res.msg)
							})
							//用户点击确认按钮触发
						} else if (res.cancel) {
							return
							//用户点击取消按钮触发
						}
					}
				})
				

			},
			change(e) {

			},
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-forms-item__content {
		background: rgba(255, 255, 255, 0);
		border-radius: 2px;
		border: 1px solid #263042;

		.uni-select {
			border: none;
		}

		.uni-select__selector {
			background: none;
			border: 1px solid #263042;
		}

		.uni-select__selector-item {
			font-size: 14px;
			font-weight: 400;
			color: #A8ADC8;
		}

		.uni-popper__arrow {
			display: none;
		}

		.uni-select__input-text {
			color: white;
		}

		.uni-easyinput__content {
			background: none !important;
			border: none !important;
			color: #fff;
			width: 188px;
		}
	}

	::v-deep .uni-forms-item__label {
		font-size: 14px;
		font-weight: 400;
		color: #FFFFFF;
	}
::v-deep .uni-select__selector {
		background: #111827 !important;
		border: 1px solid #263042;
		color: #606266;
		z-index: 9999999;
	}
	.basic-data {
		width: 100%;
		height: 100%;
		color: white;
		font-size: 24px;
		overflow: hidden;

		.basic-top {
			display: flex;

			.times {
				font-size: 14px;
				font-weight: 400;
				color: #A8ADC8;
				line-height: 32px;
			}

			.sync-btn {
				width: 88px;
				height: 32px;
				border-radius: 2px;
				line-height: 32px;
				text-align: center;
				border: 1px solid #91FDB9;
				font-size: 14px;
				font-weight: 400;
				color: #91FDB9;
				margin-left: 20px;
			}

			.title {
				margin-left: auto;
				line-height: 32px;
				font-size: 16px;
				font-weight: 600;
				color: rgba(255, 255, 255, 0.85);
				line-height: 19px;
				text-shadow: 0px 0px 4px #0027D8
			}
		}

		.basic-search {
			display: flex;
			padding: 16px 20px;
			width: 100%;
			height: 66px;
			box-sizing: border-box;
			background: #111827;
			box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
			border-radius: 2px;
			border: 1px solid #192337;
			margin-top: 20px;

			::v-deep .searchForm {
				span {
					display: flex;
				}
			}
		}

		.search-btn {
			width: 60px;
			height: 34px;
			background: #91FDB9;
			border-radius: 2px;
			font-size: 14px;
			font-weight: 400;
			color: #000000;
			text-align: center;
			line-height: 34px;
			margin-left: 20px;
			margin-top: 1px;
		}

		.reset-btn {
			width: 60px;
			height: 32px;
			border-radius: 2px;
			font-size: 14px;
			font-weight: 400;
			color: #FFFFFF;
			text-align: center;
			line-height: 32px;
			margin-left: 20px;
			margin-top: 1px;
			border: 1px solid #263042;
		}

		.basic-table {
			width: 100%;
			height: 576px;
			background: #111827;
			box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
			border-radius: 2px;
			border: 1px solid #192337;
			margin-top: 16px;
			box-sizing: border-box;
			padding: 16px 20px;
			display: flex;
			flex-direction: column;

			.marginZero {
				margin-left: 0px;
				margin-bottom: 15px;
			}
		}
	}
</style>