<script setup>
|
import { ref } from 'vue'
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
import request from '@/utils/request'
|
|
// 数据定义
|
const formData = ref({
|
recordDate: new Date().toISOString().slice(0, 10),
|
energyValue: null
|
})
|
const loading = ref(false)
|
const energyData = ref([])
|
|
// 日期格式化
|
const formatDate = (dateStr) => {
|
const date = new Date(dateStr)
|
return date.toISOString().slice(0, 10)
|
}
|
|
// 检查日期是否重复
|
const checkDateExists = (date, excludeId = null) => {
|
return energyData.value.some(item =>
|
item.recordDate === date && (!excludeId || item.id !== excludeId)
|
)
|
}
|
|
// API 请求
|
const loadDataFromApi = async () => {
|
loading.value = true
|
try {
|
const { data } = await request({
|
url: '/deviceInteraction/energy/consumption/listEnergy',
|
method: 'post',
|
data: { page: 1, pageSize: 10 }
|
})
|
if (data?.records) {
|
energyData.value = data.records.map(item => ({
|
...item,
|
editing: false,
|
originalData: { ...item }
|
}))
|
}
|
} catch (error) {
|
ElMessage.error('数据加载失败')
|
console.error(error)
|
} finally {
|
loading.value = false
|
}
|
}
|
|
// 表单操作
|
const handleSubmit = async () => {
|
if (!formData.value.recordDate || formData.value.energyValue === null) {
|
ElMessage.error('请填写完整信息')
|
return
|
}
|
|
if (checkDateExists(formData.value.recordDate)) {
|
ElMessage.error('该日期已存在能耗记录')
|
return
|
}
|
|
try {
|
await request({
|
url: '/deviceInteraction/energy/consumption/addEnergy',
|
method: 'post',
|
data: formData.value
|
})
|
ElMessage.success('添加成功')
|
await loadDataFromApi()
|
resetForm()
|
} catch (error) {
|
ElMessage.error('添加失败')
|
console.error(error)
|
}
|
}
|
|
const resetForm = () => {
|
formData.value = {
|
recordDate: new Date().toISOString().slice(0, 10),
|
energyValue: null
|
}
|
}
|
|
// 表格操作
|
const handleRowEdit = async (index, row) => {
|
if (!row.editing) {
|
row.editing = true
|
return
|
}
|
|
if (!row.recordDate || row.energyValue === null) {
|
ElMessage.error('请填写完整信息')
|
return
|
}
|
|
if (checkDateExists(row.recordDate, row.id)) {
|
ElMessage.error('该日期已存在能耗记录')
|
return
|
}
|
|
try {
|
await request({
|
url: '/deviceInteraction/energy/consumption/updateEnergy',
|
method: 'post',
|
data: {
|
id: row.id,
|
recordDate: row.recordDate,
|
energyValue: row.energyValue
|
}
|
})
|
row.editing = false
|
row.originalData = { ...row }
|
ElMessage.success('修改成功')
|
} catch (error) {
|
ElMessage.error('修改失败')
|
console.error(error)
|
}
|
}
|
|
const cancelEdit = (index, row) => {
|
Object.assign(row, row.originalData)
|
row.editing = false
|
}
|
|
const handleDelete = async (index) => {
|
try {
|
await ElMessageBox.confirm('确认删除该记录？', '警告', {
|
type: 'warning'
|
})
|
const id = energyData.value[index].id
|
await request({
|
url: '/deviceInteraction/energy/consumption/deleteEnergy',
|
method: 'post',
|
data: { id }
|
})
|
energyData.value.splice(index, 1)
|
ElMessage.success('删除成功')
|
} catch (error) {
|
if (error !== 'cancel') {
|
ElMessage.error('删除失败')
|
console.error(error)
|
}
|
}
|
}
|
|
// 初始化
|
loadDataFromApi()
|
</script>
|
|
<template>
|
<el-container>
|
<el-header class="header" style="height: auto; margin:20px 0 -10px ; ">
|
<el-form :inline="true" :model="formData" label-width="80px" class="form-container">
|
<el-form-item label="日期" prop="recordDate">
|
<el-date-picker
|
v-model="formData.recordDate"
|
type="date"
|
value-format="YYYY-MM-DD"
|
placeholder="选择日期"
|
:default-value="new Date()"
|
style="width: 200px"
|
/>
|
</el-form-item>
|
<el-form-item label="能耗值" prop="energyValue">
|
<el-input-number
|
v-model="formData.energyValue"
|
:precision="2"
|
:step="0.1"
|
:min="0"
|
controls-position="right"
|
style="width: 200px"
|
/>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="handleSubmit">提交</el-button>
|
<el-button @click="resetForm">重置</el-button>
|
</el-form-item>
|
</el-form>
|
</el-header>
|
|
<el-main class="main">
|
<div class="table-container">
|
<el-table
|
:data="energyData"
|
border
|
style="width: 100%"
|
height="500"
|
v-loading="loading"
|
>
|
<el-table-column prop="recordDate" label="日期" width="180">
|
<template #default="scope">
|
<el-date-picker
|
v-if="scope.row.editing"
|
v-model="scope.row.recordDate"
|
type="date"
|
value-format="YYYY-MM-DD"
|
placeholder="选择日期"
|
style="width: 140px"
|
/>
|
<span v-else>{{ formatDate(scope.row.recordDate) }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="energyValue" label="能耗值" width="180">
|
<template #default="scope">
|
<el-input-number
|
v-if="scope.row.editing"
|
v-model="scope.row.energyValue"
|
:precision="2"
|
:step="0.1"
|
:min="0"
|
controls-position="right"
|
style="width: 140px"
|
/>
|
<span v-else>{{ scope.row.energyValue }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" width="200" fixed="right">
|
<template #default="scope">
|
<el-button-group>
|
<el-button
|
size="small"
|
:type="scope.row.editing ? 'success' : 'primary'"
|
@click="handleRowEdit(scope.$index, scope.row)"
|
>
|
{{ scope.row.editing ? '保存' : '编辑' }}
|
</el-button>
|
<el-button
|
v-if="scope.row.editing"
|
size="small"
|
@click="cancelEdit(scope.$index, scope.row)"
|
>
|
取消
|
</el-button>
|
<el-button
|
v-else
|
size="small"
|
type="danger"
|
@click="handleDelete(scope.$index)"
|
>
|
删除
|
</el-button>
|
</el-button-group>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</el-main>
|
</el-container>
|
</template>
|
|
<style scoped>
|
|
</style>
|
