From 1973f19305982e1e9500649af5715b8b9965af1a Mon Sep 17 00:00:00 2001
From: MeSHard <5373476+meshard@user.noreply.gitee.com>
Date: Wed, 19 Nov 2025 16:48:30 +0800
Subject: [PATCH] 1

---
 src/views/charging_pile/Pile.vue    |   4 +-
 src/views/charging_pile/Price.vue   | 659 +++++++++++++++++-----------
 src/views/charging_pile/Station.vue |   2 +-
 3 files changed, 414 insertions(+), 251 deletions(-)

diff --git a/src/views/charging_pile/Pile.vue b/src/views/charging_pile/Pile.vue
index 192be34..a983b0e 100644
--- a/src/views/charging_pile/Pile.vue
+++ b/src/views/charging_pile/Pile.vue
@@ -25,9 +25,9 @@
 				@on-page-size-change="onChangePageSize" />
 		</div>
 
-
-<!-- ConnectorID 充电桩编号 -->
 <!-- charge_station_id 所属充电站 -->
+<!-- ConnectorID 充电桩编号 -->
+<!-- no 位号 -->
 
 		<!-- 添加、编辑 -->
 		<Modal v-model="show_modal" title="Common Modal dialog box title" :mask-closable="false" @on-ok="ok"
diff --git a/src/views/charging_pile/Price.vue b/src/views/charging_pile/Price.vue
index f1b32a0..0a64e00 100644
--- a/src/views/charging_pile/Price.vue
+++ b/src/views/charging_pile/Price.vue
@@ -1,262 +1,425 @@
 <template>
-    <div class="container">
-        <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="" />
-                </FormItem>
-                <FormItem>
-                    <Button type="primary" @click="handleSubmit('formInline')">搜索</Button>
-                </FormItem>
-            </Form>
-        </div>
-        <div class="action-btn">
-            <Button type="primary" @click="show_modal = true">添加</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>
-                </template>
-            </Table>
-            <Page :total="total" show-total show-sizer class="page" />
-        </div>
+	<div class="container">
+		<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="" />
+				</FormItem>
+				<FormItem>
+					<Button type="primary" @click="handleSubmit('formInline')">搜索</Button>
+				</FormItem>
+			</Form>
+		</div>
+		<div class="action-btn">
+			<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(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" @on-change="onChangePage"
+				@on-page-size-change="onChangePageSize" />
+
+		</div>
 
 
-        <!-- 添加、编辑 -->
-        <Modal v-model="show_modal" title="Common Modal dialog box title" :mask-closable="false" @on-ok="ok"
-            @on-cancel="cancel">
-            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
-                <FormItem label="Name" prop="name">
-                    <Input v-model="formValidate.name" placeholder="Enter your name" />
-                </FormItem>
-                <FormItem label="E-mail" prop="mail">
-                    <Input v-model="formValidate.mail" placeholder="Enter your e-mail" />
-                </FormItem>
-                <FormItem label="City" 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>
-                <FormItem label="Date">
-                    <Row>
-                        <Col span="11">
-                        <DatePicker type="date" placeholder="Select date" v-model="formValidate.date"></DatePicker>
-                        </Col>
-                        <Col span="2" style="text-align: center">-</Col>
-                        <Col span="11">
-                        <TimePicker type="time" placeholder="Select time" v-model="formValidate.time"></TimePicker>
-                        </Col>
-                    </Row>
-                </FormItem>
-                <FormItem label="Gender" prop="gender">
-                    <RadioGroup v-model="formValidate.gender">
-                        <Radio label="male">Male</Radio>
-                        <Radio label="female">Female</Radio>
-                    </RadioGroup>
-                </FormItem>
-                <FormItem label="Hobby" prop="interest">
-                    <CheckboxGroup v-model="formValidate.interest">
-                        <Checkbox label="Eat"></Checkbox>
-                        <Checkbox label="Sleep"></Checkbox>
-                        <Checkbox label="Run"></Checkbox>
-                        <Checkbox label="Movie"></Checkbox>
-                    </CheckboxGroup>
-                </FormItem>
-                <FormItem label="Desc" prop="desc">
-                    <Input v-model="formValidate.desc" type="textarea" :autosize="{ minRows: 2, maxRows: 5 }"
-                        placeholder="Enter something..." />
-                </FormItem>
-                <FormItem>
-                    <Button type="primary" @click="handleSubmit2('formValidate')">Submit</Button>
-                    <Button @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
-                </FormItem>
-            </Form>
-        </Modal>
-    </div>
+		<!-- 添加、编辑 -->
+		<Modal v-model="show_modal" title="添加" :mask-closable="false" @on-ok="ok" @on-cancel="cancel">
+			<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
+				<FormItem label="站点名称" prop="charge_station_id">
+					<Select v-model="formValidate.charge_station_id" style="width:200px">
+						<Option v-for="item in data" :value="item.charge_station_id" :key="item.charge_station_id">
+							{{ item.charge_station_name }}
+						</Option>
+					</Select>
+				</FormItem>
+				<FormItem label="电费" prop="ElectricityFee">
+					<Row class="header-row">
+						<Col span="6">开始时间</Col>
+						<Col span="6">结束时间</Col>
+						<Col span="6">电费金额（元）</Col>
+						<Col span="3">
+						<Button type="primary" @click="addNewItem" icon="plus">新增时段</Button>
+						</Col>
+					</Row>
+					<Row v-for="(item, index) in electricityFeeArr" :key="item.id || index" class="data-row">
+						<Col span="6">
+						<TimePicker placeholder="开始时间" format="HH:mm" valueFormat="HH:mm" style="width: 100px"
+							v-model="item.startTime" />
+						</Col>
+						<Col span="6">
+						<TimePicker placeholder="结束时间" format="HH:mm" valueFormat="HH:mm" style="width: 100px"
+							v-model="item.endTime" />
+						</Col>
+						<Col span="6">
+						<InputNumber placeholder="金额" style="width: 100px" :min="0" :precision="2"
+							v-model="item.feeAmount" />
+						元
+						</Col>
+						<Col span="3">
+						<Button type="danger" icon="delete" size="small" @click="removeItem(index)"
+							:disabled="electricityFeeArr.length <= 1">
+							删除
+						</Button>
+						</Col>
+					</Row>
+
+					<div v-if="electricityFeeArr.length === 0" class="empty-state">
+						暂无电费时段配置，请点击上方按钮添加
+					</div>
+				</FormItem>
+				<FormItem label="服务费" prop="ServiceFee">
+					<Input v-model="formValidate.ServiceFee" />
+				</FormItem>
+				<div slot="footer">
+					<Button type="text" @click="cancel">取消</Button>
+					<Button type="primary" @click="ok">确定</Button>
+				</div>
+			</Form>
+		</Modal>
+	</div>
 </template>
 
 <script>
-import { GetPerPrice } from '@/api'
+	import {
+		getStationList,
+		addPosition,
+		getStationRead,
+		getStationUpdate,
+		getStationDelete,
+	} from '@/api'
 
-export default {
-    name: 'charging_station',
-    data() {
-        return {
-            show_modal: false,
-            total: 100,
-            tableHeight: 500,
-            formInline: {
-                user: '',
-                password: '',
-            },
-            ruleInline: {},
-            columns: [
-                {
-                    title: '站点名称',
-                    key: 'charge_station_name',
-                },
-                {
-                    title: '电费',
-                    key: 'ElectricityFee',
-                },
-                {
-                    title: '服务费',
-                    key: 'ServiceFee',
-                },
-                {
-                    title: '操作',
-                    slot: 'action',
-                    width: 150,
-                    align: 'center',
-                },
-            ],
-            data: [],
-            formValidate: {
-                name: '',
-                mail: '',
-                city: '',
-                gender: '',
-                interest: [],
-                date: '',
-                time: '',
-                desc: '',
-            },
-            ruleValidate: {
-                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' },
-                ],
-                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' },
-                ],
-            },
-        }
-    },
-    mounted() {
-        this.getList()
-        this.calculateTableHeight()
-        window.addEventListener('resize', this.calculateTableHeight)
-    },
-    beforeDestroy() {
-        window.removeEventListener('resize', this.calculateTableHeight)
-    },
-    methods: {
-        calculateTableHeight() {
-            // 计算表格高度 = 窗口高度 - 搜索区域高度 - 分页高度 - 其他间距
-            const searchHeight = document.querySelector('.search-area').offsetHeight
-            const actionBtnHeight = document.querySelector('.action-btn').offsetHeight
-            const pageHeight = 32 // 分页组件大约高度
-            const margins = 40 // 上下边距总和
-            this.tableHeight = window.innerHeight - actionBtnHeight - searchHeight - pageHeight - margins - 130
-        },
-        async getList() {
-            await GetPerPrice({ page: 1 }).then((res) => {
-                this.total = res.total
+	export default {
+		name: 'charging_station',
+		data() {
+			return {
+				page: 1,
+				pageSize: 10,
+				show_modal: false,
+				total: 100,
+				tableHeight: 500,
+				formInline: {
+					user: '',
+					password: '',
+				},
+				ruleInline: {},
+				columns: [{
+						title: '站点名称',
+						key: 'charge_station_name',
+					},
+					{
+						title: '电费',
+						key: 'ElectricityFee',
+					},
+					{
+						title: '服务费',
+						key: 'ServiceFee',
+					},
+					{
+						title: '操作',
+						slot: 'action',
+						width: 150,
+						align: 'center',
+					},
+				],
+				data: [],
+				formValidate: {
+					charge_station_id: '',
+					ElectricityFee: '',
+					ServiceFee: '',
+				},
+				ruleValidate: {
+					charge_station_id: [{
+						required: true,
+						message: '请选择充电站',
+						trigger: 'blur',
+					}],
+					ElectricityFee: [{
+						required: true,
+						message: '请输入电费',
+						trigger: 'change',
+					}],
+					ServiceFee: [{
+						required: true,
+						message: '请输入服务费',
+						trigger: 'change',
+					}],
+				},
+				electricityFeeArr: [{
+						id: 1,
+						startTime: '00:00',
+						endTime: '08:00',
+						feeAmount: 0.50,
+					},
+					{
+						id: 2,
+						startTime: '08:00',
+						endTime: '18:00',
+						feeAmount: 0.80,
+					},
+				],
+			}
+		},
+		mounted() {
+			this.getList()
+			this.calculateTableHeight()
+			window.addEventListener('resize', this.calculateTableHeight)
+		},
+		beforeDestroy() {
+			window.removeEventListener('resize', this.calculateTableHeight)
+		},
+		methods: {
+			calculateTableHeight() {
+				// 计算表格高度 = 窗口高度 - 搜索区域高度 - 分页高度 - 其他间距
+				const searchHeight = document.querySelector('.search-area').offsetHeight
+				const actionBtnHeight = document.querySelector('.action-btn').offsetHeight
+				const pageHeight = 32 // 分页组件大约高度
+				const margins = 40 // 上下边距总和
+				this.tableHeight = window.innerHeight - actionBtnHeight - searchHeight - pageHeight - margins - 130
+			},
+			async getList() {
+				await getStationList({
+					page: this.page,
+					pageSize: this.pageSize,
+					...this.formInline,
+				}).then((res) => {
+					this.total = res.data.total
+					this.data = res.data.data
+				})
+			},
+			handleSubmit() {
+				this.getList()
+			},
+			add() {
+				this.show_modal = true
+				this.$refs.formValidate.resetFields()
+				this.formValidate.charge_station_id = ''
+			},
+			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()
+				}
+			},
+			// 添加新的电费时段
+			addNewItem() {
+				const lastItem = this.electricityFeeArr[this.electricityFeeArr.length - 1]
 
-                this.data = res.yuan
-                this.page = res.current_page
-            })
-        },
-        handleSubmit(name) {
-            this.$refs[name].validate((valid) => {
-                if (valid) {
-                    this.$Message.success('Success!')
-                } else {
-                    this.$Message.error('Fail!')
-                }
-            })
-        },
-        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')
-        },
-        cancel() {
-            this.$Message.info('Clicked cancel')
-        },
-    },
-}
+				this.electricityFeeArr.push({
+					id: Date.now(), // 使用时间戳作为唯一标识
+					startTime: '',
+					endTime: '',
+					feeAmount: lastItem ? lastItem.feeAmount : 0.60,
+				})
+			},
+			/**
+			 * 删除指定索引的电费时段
+			 */
+			removeItem(index) {
+				if (this.electricityFeeArr.length <= 1) {
+					this.$message.warning('至少保留一个电费时段')
+					return
+				}
+
+				this.$confirm({
+					title: '确认删除',
+					content: '确定要删除这个电费时段吗？',
+					onOk: () => {
+						this.electricityFeeArr.splice(index, 1)
+						this.$message.success('删除成功')
+					},
+				})
+			},
+
+			/**
+			 * 获取完整的电费配置数据
+			 */
+			getFeeConfigData() {
+				return this.electricityFeeArr.map(item => ({
+					start_time: item.startTime,
+					end_time: item.endTime,
+					amount: Number(item.feeAmount || 0),
+				}))
+			},
+			/**
+			 * 校验电费配置数据的有效性
+			 */
+			validateConfig() {
+				const errors = []
+
+				this.electricityFeeArr.forEach((item, index) => {
+					if (!item.startTime) {
+						errors.push(`第${index + 1}行的开始时间为空`)
+					}
+
+					if (!item.endTime) {
+						errors.push(`第${index + 1}行的结束时间为空`)
+					}
+
+					if (!item.feeAmount && item.feeAmount !== 0) {
+						errors.push(`第${index + 1}行的电费金额为空`)
+					}
+
+					if (parseFloat(item.feeAmount) < 0) {
+						errors.push(`第${index + 1}行的电费金额不能为负数`)
+					}
+				})
+				return {
+					isValid: errors.length === 0,
+					errors,
+				}
+			},
+		},
+		watch: {
+			electricityFeeArr: {
+				handler(newVal) {
+					console.log('电费配置发生变化:', newVal)
+					// 如果需要实时提交到父组件
+					// this.$emit('config-change', newVal);
+				},
+				deep: true,
+			},
+		},
+	}
 </script>
 <style scoped>
-.container {
-    display: flex;
-    flex-direction: column;
-    height: 100vh;
-    padding: 20px;
-    box-sizing: border-box;
-}
+	.container {
+		display: flex;
+		flex-direction: column;
+		height: 100vh;
+		padding: 20px;
+		box-sizing: border-box;
+	}
 
-.action-btn {
-    margin: 20px 0;
-    background-color: white;
-    padding: 20px;
-    border: 1px solid #F3F7FD;
-    border-radius: 15px;
-    display: flex;
-    align-items: center;
-    button {
-        margin-right: 20px;
-    }
-}
+	.action-btn {
+		margin: 20px 0;
+		background-color: white;
+		padding: 20px;
+		border: 1px solid #F3F7FD;
+		border-radius: 15px;
+		display: flex;
+		align-items: center;
 
-.table-container {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-}
+		button {
+			margin-right: 20px;
+		}
+	}
 
-.page {
-    margin-top: 10px;
-    text-align: right;
-}
-.search-area{
-    background-color: white;
-    padding-top: 20px;
-    border: 1px solid #F3F7FD;
-    border-radius: 15px;
-}
+	.table-container {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.page {
+		margin-top: 10px;
+		text-align: right;
+	}
+
+	.search-area {
+		background-color: white;
+		padding-top: 20px;
+		border: 1px solid #F3F7FD;
+		border-radius: 15px;
+	}
+
+	.electricity-fee-container {
+		padding: 20px;
+		border: 1px solid #e8e8e8;
+		border-radius: 6px;
+	}
+
+	.header-row {
+		font-weight: bold;
+		margin-bottom: 15px;
+		color: #1890ff;
+	}
+
+	.data-row {
+		margin-bottom: 12px;
+		align-items: center;
+		transition: all 0.3s ease;
+	}
+
+	.data-row:hover {
+		background-color: #fafafa;
+	}
+
+	.last-row {
+		margin-bottom: 25px;
+	}
+
+	.empty-state {
+		text-align: center;
+		color: #999;
+		padding: 40px 0;
+		font-style: italic;
+	}
 </style>
\ No newline at end of file
diff --git a/src/views/charging_pile/Station.vue b/src/views/charging_pile/Station.vue
index d199eeb..3da0af0 100644
--- a/src/views/charging_pile/Station.vue
+++ b/src/views/charging_pile/Station.vue
@@ -11,7 +11,7 @@
 			</Form>
 		</div>
 		<div class="action-btn">
-			<Button type="primary" @click="show">添加</Button>
+			<Button type="primary" @click="add">添加</Button>
 			<!-- <Button type="error">删除</Button> -->
 		</div>
 		<div class="table-container">