charge123/charge-pile-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
MeSHard
2025-11-20 17:32:46 +08:00
parent 1973f19305
commit 26ecddea1e
9 changed files with 1132 additions and 684 deletions
Download Patch File Download Diff File Expand all files Collapse all files

235
src/views/charging_pile/Price.vue
View File

@@ -2,8 +2,8 @@
<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 prop="charge_station_name" label="站点名称：">
<Input type="text" clearable v-model="formInline.charge_station_name" placeholder="" />
</FormItem>
<FormItem>
<Button type="primary" @click="handleSubmit('formInline')">搜索</Button>
@@ -11,7 +11,7 @@
</Form>
</div>
<div class="action-btn">
<Button type="primary" @click="add">添加</Button>
<!-- <Button type="primary" @click="add">添加</Button> -->
<!-- <Button type="error">删除</Button> -->
</div>
<div class="table-container">
@@ -29,7 +29,7 @@
<!-- 添加、编辑 -->
<Modal v-model="show_modal" title="添加" :mask-closable="false" @on-ok="ok" @on-cancel="cancel">
<Modal v-model="show_modal" title="添加" :mask-closable="false">
<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">
@@ -57,9 +57,8 @@
v-model="item.endTime" />
</Col>
<Col span="6">
<InputNumber placeholder="金额" style="width: 100px" :min="0" :precision="2"
v-model="item.feeAmount" />
元
<Input placeholder="金额" style="width: 100px" :precision="2"
v-model="item.amount" />
</Col>
<Col span="3">
<Button type="danger" icon="delete" size="small" @click="removeItem(index)"
@@ -68,19 +67,48 @@
</Button>
</Col>
</Row>
<div v-if="electricityFeeArr.length === 0" class="empty-state">
暂无电费时段配置，请点击上方按钮添加
</div>
</FormItem>
<FormItem label="服务费" prop="ServiceFee">
<Input v-model="formValidate.ServiceFee" />
<Row class="header-row">
<Col span="6">开始时间</Col>
<Col span="6">结束时间</Col>
<Col span="6">服务费金额（元）</Col>
<Col span="3">
<Button type="primary" @click="addNewServeItem" icon="plus">新增时段</Button>
</Col>
</Row>
<Row v-for="(item, index) in serverFeeArr" :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">
<Input placeholder="金额" style="width: 100px" :min="0" :precision="2"
v-model="item.amount" />
</Col>
<Col span="3">
<Button type="danger" icon="delete" size="small" @click="removeServeItem(index)"
:disabled="serverFeeArr.length <= 1">
删除
</Button>
</Col>
</Row>
<div v-if="serverFeeArr.length === 0" class="empty-state">
暂无
</div>
</FormItem>
<div slot="footer">
<Button type="text" @click="cancel">取消</Button>
<Button type="primary" @click="ok">确定</Button>
</div>
</Form>
<div slot="footer">
<Button type="text" @click="cancel">取消</Button>
<Button type="primary" @click="ok">确定</Button>
</div>
</Modal>
</div>
</template>
@@ -104,8 +132,7 @@
total: 100,
tableHeight: 500,
formInline: {
user: '',
password: '',
charge_station_name: '',
},
ruleInline: {},
columns: [{
@@ -130,8 +157,6 @@
data: [],
formValidate: {
charge_station_id: '',
ElectricityFee: '',
ServiceFee: '',
},
ruleValidate: {
charge_station_id: [{
@@ -139,30 +164,9 @@
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,
},
],
electricityFeeArr: [],
serverFeeArr: [],
}
},
mounted() {
@@ -203,15 +207,43 @@
cancel() {
this.$refs.formValidate.resetFields()
this.show_modal = false
this.electricityFeeArr = []
this.serverFeeArr = []
},
// 详情
async show(id) {
await getStationRead({
id,
}).then(res => {
this.formValidate = {
...res.data,
}
let ElectricityFee = res.data.ElectricityFee.split('电费:')[1].split(',')
let ServiceFee = res.data.ServiceFee.split('服务费:')[1].split(',')
let ElectricityFeeArr = []
let ServiceFeeArr = []
ElectricityFeeArr = ElectricityFee.map(item => {
const parts = item.split(':')
const amount = parts.pop()
const timePart = parts.join(':')
const times = timePart.split('~')
return {
startTime: times[0],
endTime: times[1],
amount,
}
})
ServiceFeeArr = ServiceFee.map(item => {
const parts = item.split(':')
const amount = parts.pop()
const timePart = parts.join(':')
const times = timePart.split('~')
return {
startTime: times[0],
endTime: times[1],
amount,
}
})
this.electricityFeeArr = ElectricityFeeArr
this.serverFeeArr = ServiceFeeArr
this.formValidate.charge_station_id = res.data.charge_station_id
this.show_modal = true
})
},
@@ -236,11 +268,29 @@
})
},
async ok() {
const valid = await new Promise(resolve => this.$refs.formValidate.validate(resolve))
if (!valid) {
this.$Message.error('请正确填写表单')
if (this.electricityFeeArr.length < 1) {
this.$Message.error('请正确填写电费')
return
}
this.validateConfig()
if (this.serverFeeArr.length < 1) {
this.$Message.error('请正确填写服务费')
return
}
this.validateServeConfig()
if (!this.formValidate.charge_station_id) {
this.$Message.error('请选择充电站')
return
}
// console.log(this.formValidate)
// const valid = await new Promise(resolve => this.$refs.formValidate.validate(resolve))
// console.log(this.valid)
// if (!valid) {
// this.$Message.error('请正确填写表单')
// return
// }
this.formValidate.electricityFee = this.electricityFeeArr
this.formValidate.serverFee = this.serverFeeArr
if (this.formValidate.charge_station_id) {
await getStationUpdate(this.formValidate).then(res => {
this.$Message.success(res.msg)
@@ -271,12 +321,11 @@
// 添加新的电费时段
addNewItem() {
const lastItem = this.electricityFeeArr[this.electricityFeeArr.length - 1]
this.electricityFeeArr.push({
id: Date.now(), // 使用时间戳作为唯一标识
startTime: '',
endTime: '',
feeAmount: lastItem ? lastItem.feeAmount : 0.60,
amount: lastItem ? lastItem.amount : 0.00,
})
},
/**
@@ -287,26 +336,8 @@
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),
}))
this.electricityFeeArr.splice(index, 1)
this.$message.success('删除成功')
},
/**
* 校验电费配置数据的有效性
@@ -323,11 +354,11 @@
errors.push(`第${index + 1}行的结束时间为空`)
}
if (!item.feeAmount && item.feeAmount !== 0) {
if (!item.amount && item.amount !== 0) {
errors.push(`第${index + 1}行的电费金额为空`)
}
if (parseFloat(item.feeAmount) < 0) {
if (parseFloat(item.amount) < 0) {
errors.push(`第${index + 1}行的电费金额不能为负数`)
}
})
@@ -336,11 +367,72 @@
errors,
}
},
// 添加新的服务费费时段
addNewServeItem() {
const lastItem = this.serverFeeArr[this.serverFeeArr.length - 1]
this.serverFeeArr.push({
id: Date.now(), // 使用时间戳作为唯一标识
startTime: '',
endTime: '',
amount: lastItem ? lastItem.amount : 0.00,
})
},
/**
* 删除指定索引的服务费时段
*/
removeServeItem(index) {
if (this.serverFeeArr.length <= 1) {
this.$message.warning('至少保留一个服务费时段')
return
}
this.serverFeeArr.splice(index, 1)
this.$message.success('删除成功')
},
/**
* 获取完整的服务费配置数据
*/
getServeFeeConfigData() {
return this.serverFeeArr.map(item => ({
start_time: item.startTime,
end_time: item.endTime,
amount: Number(item.amount || 0),
}))
},
/**
* 校验服务费配置数据的有效性
*/
validateServeConfig() {
const errors = []
this.serverFeeArr.forEach((item, index) => {
if (!item.startTime) {
errors.push(`第${index + 1}行的开始时间为空`)
}
if (!item.endTime) {
errors.push(`第${index + 1}行的结束时间为空`)
}
if (!item.amount && item.amount !== 0) {
errors.push(`第${index + 1}行的服务费金额为空`)
}
if (parseFloat(item.amount) < 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,
},
serverFeeArr: {
handler(newVal) {
// 如果需要实时提交到父组件
// this.$emit('config-change', newVal);
},
@@ -400,6 +492,7 @@
font-weight: bold;
margin-bottom: 15px;
color: #1890ff;
font-size: 12px;
}
.data-row {