1

src/api/index.js

@@ -425,3 +425,44 @@ export function getYunYingData(params) {
 export function getCaiWuData(params) {
 	return request.get('/getCaiWuData', { params })
 }
+// 充电站列表
+export function getStationList(params) {
+	return request.get('/getStationList', { params })
+}
+// 添加充电站
+export function addPosition(params) {
+	return request.post('/addPosition', params)
+}
+// 充电站详情
+export function getStationRead(params) {
+	return request.get('/getStationRead', { params })
+}
+// 充电站修改
+export function getStationUpdate(params) {
+	return request.post('/getStationUpdate', params)
+}
+// 充电站删除
+export function getStationDelete(params) {
+	return request.post('/getStationDelete', params)
+}
+
+// 充电桩列表
+export function getPileList(params) {
+	return request.get('/getPileList', { params })
+}
+// 添加充电桩
+export function addPile(params) {
+	return request.post('/addPile', params)
+}
+// 充电桩详情
+export function getPileRead(params) {
+	return request.get('/getPileRead', { params })
+}
+// 充电桩修改
+export function getPileUpdate(params) {
+	return request.post('/getPileUpdate', params)
+}
+// 充电桩删除
+export function getPileDelete(params) {
+	return request.post('/getPileDelete', params)
+}

src/views/charging_pile/Pile.vue

@@ -11,17 +11,18 @@
 			</Form>
 		</div>
 		<div class="action-btn">
-            <Button type="primary" @click="show_modal = true">添加</Button>
+			<Button type="primary" @click="add">添加</Button>
 			<!-- <Button type="error">删除</Button> -->
 		</div>
 		<div class="table-container">
 			<Table border :columns="columns" stripe :height="tableHeight" :data="data">
 				<template #action="{ row, index }">
-                    <Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">编辑</Button>
-                    <Button type="error" size="small" @click="remove(index)">删除</Button>
+					<Button type="primary" size="small" style="margin-right: 5px" @click="show(row.charge_pile_id)">编辑</Button>
+					<Button type="error" size="small" @click="remove(row.charge_pile_id)">删除</Button>
 				</template>
 			</Table>
-            <Page :total="total" show-total show-sizer class="page" />
+			<Page :total="total" show-total show-sizer class="page" @on-change="onChangePage"
+				@on-page-size-change="onChangePageSize" />
 		</div>
 
 
@@ -81,12 +82,16 @@
 </template>
 
 <script>
-import { GetChargeZ } from '@/api'
+	import {
+		getPileList, addPile, getPileRead, getPileUpdate, getPileDelete,
+	} from '@/api'
 
 	export default {
 		name: 'charging_station',
 		data() {
 			return {
+				age: 1,
+				pageSize: 10,
 				show_modal: false,
 				total: 100,
 				tableHeight: 500,
@@ -95,8 +100,7 @@ export default {
 					password: '',
 				},
 				ruleInline: {},
-            columns: [
-                {
+				columns: [{
 						title: '站点名称',
 						key: 'charge_station_name',
 					},
@@ -131,32 +135,69 @@ export default {
 					desc: '',
 				},
 				ruleValidate: {
-                name: [
-                    { required: true, message: 'The name cannot be empty', trigger: 'blur' },
+					name: [{
+						required: true,
+						message: 'The name cannot be empty',
+						trigger: 'blur',
+					}],
+					mail: [{
+							required: true,
+							message: 'Mailbox cannot be empty',
+							trigger: 'blur',
+						},
+						{
+							type: 'email',
+							message: 'Incorrect email format',
+							trigger: 'blur',
+						},
 					],
-                mail: [
-                    { required: true, message: 'Mailbox cannot be empty', trigger: 'blur' },
-                    { type: 'email', message: 'Incorrect email format', trigger: 'blur' },
+					city: [{
+						required: true,
+						message: 'Please select the city',
+						trigger: 'change',
+					}],
+					gender: [{
+						required: true,
+						message: 'Please select gender',
+						trigger: 'change',
+					}],
+					interest: [{
+							required: true,
+							type: 'array',
+							min: 1,
+							message: 'Choose at least one hobby',
+							trigger: 'change',
+						},
+						{
+							type: 'array',
+							max: 2,
+							message: 'Choose two hobbies at best',
+							trigger: 'change',
+						},
 					],
-                city: [
-                    { required: true, message: 'Please select the city', trigger: 'change' },
-                ],
-                gender: [
-                    { required: true, message: 'Please select gender', trigger: 'change' },
-                ],
-                interest: [
-                    { required: true, type: 'array', min: 1, message: 'Choose at least one hobby', trigger: 'change' },
-                    { type: 'array', max: 2, message: 'Choose two hobbies at best', trigger: 'change' },
-                ],
-                date: [
-                    { required: true, type: 'date', message: 'Please select the date', trigger: 'change' },
-                ],
-                time: [
-                    { required: true, type: 'string', message: 'Please select time', trigger: 'change' },
-                ],
-                desc: [
-                    { required: true, message: 'Please enter a personal introduction', trigger: 'blur' },
-                    { type: 'string', min: 20, message: 'Introduce no less than 20 words', trigger: 'blur' },
+					date: [{
+						required: true,
+						type: 'date',
+						message: 'Please select the date',
+						trigger: 'change',
+					}],
+					time: [{
+						required: true,
+						type: 'string',
+						message: 'Please select time',
+						trigger: 'change',
+					}],
+					desc: [{
+							required: true,
+							message: 'Please enter a personal introduction',
+							trigger: 'blur',
+						},
+						{
+							type: 'string',
+							min: 20,
+							message: 'Introduce no less than 20 words',
+							trigger: 'blur',
+						},
 					],
 				},
 			}
@@ -179,47 +220,83 @@ export default {
 				this.tableHeight = window.innerHeight - actionBtnHeight - searchHeight - pageHeight - margins - 130
 			},
 			async getList() {
-            await GetChargeZ({ page: 1 }).then((res) => {
-                this.total = res.total
-                this.data = res.data
-                this.page = res.current_page
+				await getPileList({
+					page: this.page,
+					pageSize: this.pageSize,
+					...this.formInline,
+				}).then((res) => {
+					this.total = res.data.total
+					this.data = res.data.data
 				})
 			},
-        handleSubmit(name) {
-            this.$refs[name].validate((valid) => {
-                if (valid) {
-                    this.$Message.success('Success!')
-                } else {
-                    this.$Message.error('Fail!')
-                }
-            })
+			handleSubmit() {
+				this.getList()
 			},
-        handleReset(name) {
-            this.$refs[name].resetFields()
-        },
-        handleSubmit2(name) {
-            this.$refs[name].validate((valid) => {
-                if (valid) {
-                    this.$Message.success('Success!')
-                } else {
-                    this.$Message.error('Fail!')
-                }
-            })
-        },
-        show(index) {
-            this.$Modal.info({
-                title: 'User Info',
-                content: `Name：${this.data[index].name}<br>Age：${this.data[index].age}<br>Address：${this.data[index].address}`,
-            })
-        },
-        remove(index) {
-            this.data.splice(index, 1)
-        },
-        ok() {
-            this.$Message.info('Clicked ok')
+			add() {
+				this.show_modal = true
+				this.$refs.formValidate.resetFields()
+				this.formValidate.charge_pile_id = ''
 			},
 			cancel() {
-            this.$Message.info('Clicked cancel')
+				this.$refs.formValidate.resetFields()
+				this.show_modal = false
+			},
+			async show(id) {
+				await getPileRead({ id }).then(res => {
+					this.formValidate = { ...res.data }
+					this.show_modal = true
+				})
+			},
+			async remove(id) {
+				const confirm = await new Promise(resolve => {
+					this.$Modal.confirm({
+						title: '确认删除',
+						content: '您确定要删除此项吗？',
+						onOk: () => resolve(true),
+						onCancel: () => resolve(false),
+					})
+				})
+				if (!confirm) {
+					this.$Message.info('已取消删除')
+					return
+				}
+				await getPileDelete({ id }).then(res => {
+					this.$Message.success(res.msg)
+					this.getList()
+				})
+			},
+			async ok() {
+				const valid = await new Promise(resolve => this.$refs.formValidate.validate(resolve))
+				if (!valid) {
+					this.$Message.error('请正确填写表单')
+					return
+				}
+				if (this.formValidate.charge_station_id) {
+					await getPileUpdate(this.formValidate).then(res => {
+						this.$Message.success(res.msg)
+						this.getList()
+						this.cancel()
+					})
+				} else {
+					await addPile(this.formValidate).then((res) => {
+						this.$Message.success(res.msg)
+						this.cancel()
+						this.getList()
+					})
+				}
+			},
+			onChangePage(e) {
+				if (this.page != e) {
+					this.page = e
+					this.getList()
+				}
+			},
+			onChangePageSize(e) {
+				if (this.pageSize != e) {
+					this.page = 1
+					this.pageSize = e
+					this.getList()
+				}
 			},
 		},
 	}
@@ -241,6 +318,7 @@ export default {
 		border-radius: 15px;
 		display: flex;
 		align-items: center;
+
 		button {
 			margin-right: 20px;
 		}
@@ -256,6 +334,7 @@ export default {
 		margin-top: 10px;
 		text-align: right;
 	}
+
 	.search-area {
 		background-color: white;
 		padding-top: 20px;

src/views/charging_pile/Station.vue

@@ -3,7 +3,7 @@
 		<div class="search-area">
 			<Form ref="formInline" inline :label-width="120" :model="formInline" :rules="ruleInline">
 				<FormItem prop="user" label="站点名称：">
-					<Input type="text" v-model="formInline.user" placeholder="" />
+					<Input type="text" clearable  v-model="formInline.charge_station_name" placeholder="" />
 				</FormItem>
 				<FormItem>
 					<Button type="primary" @click="handleSubmit('formInline')">搜索</Button>
@@ -11,20 +11,20 @@
 			</Form>
 		</div>
 		<div class="action-btn">
-			<Button type="primary" @click="show_modal = true">添加</Button>
+			<Button type="primary" @click="show">添加</Button>
 			<!-- <Button type="error">删除</Button> -->
 		</div>
 		<div class="table-container">
 			<Table border :columns="columns" stripe :height="tableHeight" :data="data">
 				<template #action="{ row, index }">
-					<Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">编辑</Button>
-					<Button type="error" size="small" @click="remove(index)">删除</Button>
+					<Button type="primary" size="small" style="margin-right: 5px" @click="show(row.charge_station_id)">编辑</Button>
+					<Button type="error" size="small" @click="remove(row.charge_station_id)">删除</Button>
 				</template>
 			</Table>
-			<Page :total="total" show-total show-sizer class="page" />
+			<Page :total="total" show-total show-sizer class="page" @on-change="onChangePage"
+				@on-page-size-change="onChangePageSize" />
 		</div>
 
-
 		<!-- 添加、编辑 -->
 		<Modal v-model="show_modal" title="添加站点" :mask-closable="false">
 			<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
@@ -34,15 +34,17 @@
 				<FormItem label="站点编号" prop="charge_station_number">
 					<Input v-model="formValidate.charge_station_number" placeholder="站点编号" />
 				</FormItem>
-				<FormItem label="城市" prop="city">
-					<Select v-model="formValidate.city" placeholder="Select your city">
-						<Option value="beijing">New York</Option>
-						<Option value="shanghai">London</Option>
-						<Option value="shenzhen">Sydney</Option>
-					</Select>
+				<FormItem label="省" prop="city">
+					<Input v-model="formValidate.city" placeholder="省" />
 				</FormItem>
-				<FormItem label="地址" prop="address">
-					<Input v-model="formValidate.address" placeholder="地址" />
+				<FormItem label="市" prop="area">
+					<Input v-model="formValidate.area" placeholder="市" />
+				</FormItem>
+				<FormItem label="县" prop="street">
+					<Input v-model="formValidate.street" placeholder="县" />
+				</FormItem>
+				<FormItem label="详细地址" prop="address">
+					<Input v-model="formValidate.address" placeholder="详细地址" />
 				</FormItem>
 				<FormItem label="联系电话" prop="charge_station_phone">
 					<Input v-model="formValidate.charge_station_phone" placeholder="联系电话" />
@@ -53,12 +55,6 @@
 				<FormItem label="纬度" prop="latitude">
 					<Input v-model="formValidate.latitude" placeholder="纬度" />
 				</FormItem>
-				<FormItem label="电费" prop="ElectricityFee">
-					<Input v-model="formValidate.ElectricityFee" placeholder="电费" />
-				</FormItem>
-				<FormItem label="服务费" prop="ServiceFee">
-					<Input v-model="formValidate.ServiceFee" placeholder="服务费" />
-				</FormItem>
 			</Form>
 			<div slot="footer">
 				<Button type="text" @click="cancel">取消</Button>
@@ -70,7 +66,7 @@
 
 <script>
 	import {
-		GetPosition,
+		getStationList, addPosition, getStationRead, getStationUpdate, getStationDelete,
 	} from '@/api'
 
 	export default {
@@ -78,11 +74,12 @@
 		data() {
 			return {
 				show_modal: false,
+				page: 1,
+				pageSize: 10,
 				total: 100,
 				tableHeight: 500,
 				formInline: {
-					user: '',
-					password: '',
+					charge_station_name: '',
 				},
 				ruleInline: {},
 				columns: [{
@@ -105,14 +102,6 @@
 						title: '纬度',
 						key: 'latitude',
 					},
-					{
-						title: '电价',
-						key: 'ElectricityFee',
-					},
-					{
-						title: '服务费',
-						key: 'ServiceFee',
-					},
 					{
 						title: '操作',
 						slot: 'action',
@@ -125,42 +114,58 @@
 					charge_station_name: '',
 					charge_station_number: '',
 					city: '',
+					area: '',
+					street: '',
+					address: '',
 					charge_station_phone: '',
 					longitude: [],
 					latitude: '',
-					ElectricityFee: '',
-					ServiceFee: '',
 				},
 				ruleValidate: {
 					charge_station_name: [{
 						required: true,
-						message: 'The name cannot be empty',
+						message: '请输入站点名称',
 						trigger: 'blur',
 					}],
 					charge_station_number: [{
 							required: true,
-							message: 'Mailbox cannot be empty',
+							message: '请输入站点编号',
 							trigger: 'blur',
 					}],
 					city: [{
 						required: true,
-						message: 'Please select the city',
+						message: '请输入省',
+						trigger: 'change',
+					}],
+					area: [{
+						required: true,
+						message: '请输入市',
+						trigger: 'change',
+					}],
+					street: [{
+						required: true,
+						message: '请输入县',
 						trigger: 'change',
 					}],
 					address: [{
 						required: true,
-						message: 'Please select gender',
+						message: '请输入详细地址',
+						trigger: 'change',
+					}],
+					charge_station_phone: [{
+						required: true,
+						message: '请输入联系电话',
 						trigger: 'change',
 					}],
 					longitude: [{
 						required: true,
-						message: 'Please select the date',
-						trigger: 'change',
+						message: '请输入精度',
+						trigger: 'blur',
 					}],
 					latitude: [{
 						required: true,
-						message: 'Please select time',
-						trigger: 'change',
+						message: '请输入纬度',
+						trigger: 'blur',
 					}],
 				},
 			}
@@ -183,49 +188,84 @@
 				this.tableHeight = window.innerHeight - actionBtnHeight - searchHeight - pageHeight - margins - 130
 			},
 			async getList() {
-				await GetPosition({
-					page: 1,
+				await getStationList({
+					page: this.page,
+					pageSize: this.pageSize,
+					...this.formInline,
 				}).then((res) => {
-					this.total = res.total
-					this.data = res.data
-					this.page = res.current_page
+					this.total = res.data.total
+					this.data = res.data.data
 				})
 			},
-			handleSubmit(name) {
-				this.$refs[name].validate((valid) => {
-					if (valid) {
-						this.$Message.success('Success!')
-					} else {
-						this.$Message.error('Fail!')
-					}
-				})
+			handleSubmit() {
+				this.getList()
 			},
-			handleReset(name) {
-				this.$refs[name].resetFields()
-			},
-			handleSubmit2(name) {
-				this.$refs[name].validate((valid) => {
-					if (valid) {
-						this.$Message.success('Success!')
-					} else {
-						this.$Message.error('Fail!')
-					}
-				})
-			},
-			show(index) {
-				this.$Modal.info({
-					title: 'User Info',
-					content: `Name：${this.data[index].name}<br>Age：${this.data[index].age}<br>Address：${this.data[index].address}`,
-				})
-			},
-			remove(index) {
-				this.data.splice(index, 1)
-			},
-			ok() {
-				this.$Message.info('Clicked ok')
+			add() {
+				this.show_modal = true
+				this.$refs.formValidate.resetFields()
+				this.formValidate.charge_station_id = ''
 			},
 			cancel() {
-				this.$Message.info('Clicked cancel')
+				this.$refs.formValidate.resetFields()
+				this.show_modal = false
+			},
+			// 详情
+			async show(id) {
+				await getStationRead({ id }).then(res => {
+					this.formValidate = { ...res.data }
+					this.show_modal = true
+				})
+			},
+			async remove(id) {
+				const confirm = await new Promise(resolve => {
+					this.$Modal.confirm({
+						title: '确认删除',
+						content: '您确定要删除此项吗？',
+						onOk: () => resolve(true),
+						onCancel: () => resolve(false),
+					})
+				})
+				if (!confirm) {
+					this.$Message.info('已取消删除')
+					return
+				}
+				await getStationDelete({ id }).then(res => {
+					this.$Message.success(res.msg)
+					this.getList()
+				})
+			},
+			async ok() {
+				const valid = await new Promise(resolve => this.$refs.formValidate.validate(resolve))
+				if (!valid) {
+					this.$Message.error('请正确填写表单')
+					return
+				}
+				if (this.formValidate.charge_station_id) {
+					await getStationUpdate(this.formValidate).then(res => {
+						this.$Message.success(res.msg)
+						this.getList()
+						this.cancel()
+					})
+				} else {
+					await addPosition(this.formValidate).then((res) => {
+						this.$Message.success(res.msg)
+						this.cancel()
+						this.getList()
+					})
+				}
+			},
+			onChangePage(e) {
+				if (this.page != e) {
+					this.page = e
+					this.getList()
+				}
+			},
+			onChangePageSize(e) {
+				if (this.pageSize != e) {
+					this.page = 1
+					this.pageSize = e
+					this.getList()
+				}
 			},
 		},
 	}