<template>
|
<div class="app-container">
|
<!-- 搜索栏 -->
|
<el-form :model="searchForm" :inline="true" class="search-form">
|
<el-form-item label="时段名称">
|
<el-input
|
v-model="searchForm.periodName"
|
placeholder="请输入时段名称"
|
clearable
|
prefix-icon="Search"
|
@change="handleQuery"
|
/>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="handleQuery">搜索</el-button>
|
<el-button @click="resetQuery">重置</el-button>
|
</el-form-item>
|
</el-form>
|
|
<!-- 操作按钮 -->
|
<div class="table-actions">
|
<el-button
|
type="primary"
|
icon="Plus"
|
@click="handleAdd"
|
v-hasPermi="['energy:period:add']"
|
>新增时段</el-button>
|
</div>
|
|
<!-- 时段列表表格 -->
|
<el-table
|
v-loading="loading"
|
:data="periodList"
|
@selection-change="handleSelectionChange"
|
border
|
>
|
<el-table-column type="selection" width="55" align="center" />
|
<el-table-column label="序号" type="index" width="60" align="center" />
|
<el-table-column
|
label="时段名称"
|
prop="periodName"
|
align="center"
|
:show-overflow-tooltip="true"
|
/>
|
<el-table-column
|
label="时段单价(元/度)"
|
prop="price"
|
align="center"
|
:formatter="formatPrice"
|
/>
|
<el-table-column
|
label="状态"
|
prop="status"
|
align="center"
|
width="100"
|
>
|
<template #default="scope">
|
<dict-tag :options="statusOptions" :value="scope.row.status" />
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="创建时间"
|
prop="createTime"
|
align="center"
|
width="180"
|
/>
|
<el-table-column label="操作" align="center" width="200">
|
<template #default="scope">
|
<el-button
|
link
|
type="primary"
|
icon="Edit"
|
@click="handleUpdate(scope.row)"
|
v-hasPermi="['energy:period:edit']"
|
>修改</el-button>
|
<el-button
|
link
|
type="primary"
|
icon="Delete"
|
@click="handleDelete(scope.row)"
|
v-hasPermi="['energy:period:remove']"
|
>删除</el-button>
|
<el-button
|
link
|
type="primary"
|
icon="Setting"
|
@click="handleTimeConfig(scope.row)"
|
v-hasPermi="['energy:period:config']"
|
>时间配置</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<!-- 分页控件 -->
|
<pagination
|
v-show="total > 0"
|
:total="total"
|
v-model:page="queryParams.pageNum"
|
v-model:limit="queryParams.pageSize"
|
@pagination="getList"
|
/>
|
|
<!-- 新增/编辑时段对话框 -->
|
<el-dialog
|
:title="title"
|
v-model="open"
|
width="500px"
|
append-to-body
|
>
|
<el-form
|
ref="formRef"
|
:model="form"
|
:rules="rules"
|
label-width="100px"
|
>
|
<el-form-item label="时段名称" prop="periodName">
|
<el-input v-model="form.periodName" placeholder="请输入时段名称" />
|
</el-form-item>
|
<el-form-item label="时段单价(元/度)" prop="price">
|
<el-input
|
v-model="form.price"
|
type="number"
|
placeholder="请输入时段单价"
|
step="0.01"
|
min="0"
|
/>
|
</el-form-item>
|
<el-form-item label="状态" prop="status">
|
<el-radio-group v-model="form.status">
|
<el-radio :label="1">启用</el-radio>
|
<el-radio :label="0">禁用</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="备注" prop="remark">
|
<el-input
|
v-model="form.remark"
|
type="textarea"
|
placeholder="请输入备注信息"
|
rows="3"
|
/>
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button @click="cancel">取消</el-button>
|
<el-button type="primary" @click="submitForm">确定</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
|
<!-- 时间段配置对话框 -->
|
<el-dialog
|
title="峰平谷尖时间配置"
|
v-model="timeConfigOpen"
|
width="800px"
|
append-to-body
|
>
|
<el-form ref="timeFormRef" :model="timeForm" label-width="100px">
|
<el-form-item label="时段名称">
|
<el-input v-model="timeForm.periodName" disabled />
|
</el-form-item>
|
|
<el-table
|
:data="timeForm.timeSegments"
|
border
|
style="width: 100%"
|
@selection-change="handleTimeSelectionChange"
|
>
|
<el-table-column type="selection" width="55" align="center" />
|
<el-table-column label="序号" type="index" width="60" align="center" />
|
<el-table-column label="类型" align="center" prop="segmentType" width="100">
|
<template #default="scope">
|
<el-select v-model="scope.row.segmentType" placeholder="请选择">
|
<el-option label="峰" value="peak" />
|
<el-option label="平" value="flat" />
|
<el-option label="谷" value="valley" />
|
<el-option label="尖" value="sharp" />
|
</el-select>
|
</template>
|
</el-table-column>
|
<el-table-column label="开始时间" align="center" prop="startTime" width="140">
|
<template #default="scope">
|
<el-time-picker
|
v-model="scope.row.startTime"
|
format="HH:mm"
|
value-format="HH:mm"
|
placeholder="选择开始时间"
|
/>
|
</template>
|
</el-table-column>
|
<el-table-column label="结束时间" align="center" prop="endTime" width="140">
|
<template #default="scope">
|
<el-time-picker
|
v-model="scope.row.endTime"
|
format="HH:mm"
|
value-format="HH:mm"
|
placeholder="选择结束时间"
|
/>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" align="center" width="100">
|
<template #default="scope">
|
<el-button
|
link
|
type="primary"
|
icon="Delete"
|
@click="handleTimeDelete(scope.row)"
|
>删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<div style="margin-top: 15px; text-align: right;">
|
<el-button type="primary" @click="handleAddTimeSegment">新增时间段</el-button>
|
</div>
|
</el-form>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button @click="cancelTimeConfig">取消</el-button>
|
<el-button type="primary" @click="submitTimeConfig">保存配置</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup name="EnergyPeriodTime">
|
import { ref, reactive, toRefs, getCurrentInstance, onMounted } from 'vue';
|
import { listPeriod, getPeriod, delPeriod, addPeriod, updatePeriod, getTimeSegments, saveTimeSegments } from "@/api/energyManagement/index.js";
|
import { useDict } from '@/hooks/useDict';
|
|
const { proxy } = getCurrentInstance();
|
const { sys_normal_disable } = useDict('sys_normal_disable');
|
import {Search} from "@element-plus/icons-vue";
|
import {onMounted, ref} from "vue";
|
import {ElMessageBox} from "element-plus";
|
import {getToken} from "@/utils/auth.js";
|
import {periodListPage,periodDelete,periodAdd,periodUpdate} from "@/api/energyManagement/index.js";
|
|
// 状态定义
|
const state = reactive({
|
loading: false,
|
open: false,
|
timeConfigOpen: false,
|
title: "",
|
total: 0,
|
periodList: [],
|
timeSegments: [],
|
selectedRows: [],
|
timeSelectedRows: [],
|
statusOptions: sys_normal_disable,
|
|
// 搜索表单
|
searchForm: {
|
periodName: ""
|
},
|
|
// 查询参数
|
queryParams: {
|
pageNum: 1,
|
pageSize: 10,
|
periodName: undefined
|
},
|
|
// 表单参数
|
form: {
|
periodId: undefined,
|
periodName: "",
|
price: 0,
|
status: 1,
|
remark: ""
|
},
|
|
// 时间配置表单
|
timeForm: {
|
periodId: undefined,
|
periodName: "",
|
timeSegments: []
|
},
|
|
// 表单校验
|
rules: {
|
periodName: [
|
{ required: true, message: "请输入时段名称", trigger: "blur" }
|
],
|
price: [
|
{ required: true, message: "请输入时段单价", trigger: "blur" },
|
{ type: "number", message: "请输入有效的数字", trigger: "blur" },
|
{ min: 0, message: "单价不能小于0", trigger: "blur" }
|
]
|
}
|
});
|
|
const {
|
loading, open, timeConfigOpen, title, total, periodList,
|
selectedRows, timeSelectedRows, statusOptions, searchForm,
|
queryParams, form, timeForm, rules
|
} = toRefs(state);
|
|
const formRef = ref(null);
|
const timeFormRef = ref(null);
|
|
// 生命周期 - 挂载完成
|
onMounted(() => {
|
getList();
|
});
|
|
// 获取时段列表
|
const getList = async () => {
|
state.loading = true;
|
try {
|
const response = await listPeriod(state.queryParams);
|
state.periodList = response.rows;
|
state.total = response.total;
|
} catch (error) {
|
proxy.$modal.msgError("获取时段列表失败");
|
} finally {
|
state.loading = false;
|
}
|
};
|
|
// 搜索按钮点击事件
|
const handleQuery = () => {
|
state.queryParams.pageNum = 1;
|
state.queryParams.periodName = state.searchForm.periodName;
|
getList();
|
};
|
|
// 重置按钮点击事件
|
const resetQuery = () => {
|
state.searchForm = {
|
periodName: ""
|
};
|
state.queryParams = {
|
pageNum: 1,
|
pageSize: 10,
|
periodName: undefined
|
};
|
getList();
|
};
|
|
// 新增按钮点击事件
|
const handleAdd = () => {
|
state.form = {
|
periodId: undefined,
|
periodName: "",
|
price: 0,
|
status: 1,
|
remark: ""
|
};
|
state.open = true;
|
state.title = "新增时段";
|
};
|
|
// 修改按钮点击事件
|
const handleUpdate = async (row) => {
|
state.form = { ...row };
|
state.open = true;
|
state.title = "修改时段";
|
};
|
|
// 删除按钮点击事件
|
const handleDelete = async (row) => {
|
await proxy.$modal.confirm("是否确认删除该时段？");
|
try {
|
await delPeriod(row.periodId);
|
getList();
|
proxy.$modal.msgSuccess("删除成功");
|
} catch (error) {
|
proxy.$modal.msgError("删除失败");
|
}
|
};
|
|
// 时间段配置按钮点击事件
|
const handleTimeConfig = async (row) => {
|
state.timeForm.periodId = row.periodId;
|
state.timeForm.periodName = row.periodName;
|
|
try {
|
const response = await getTimeSegments(row.periodId);
|
state.timeForm.timeSegments = response.data || [];
|
} catch (error) {
|
state.timeForm.timeSegments = [];
|
}
|
|
state.timeConfigOpen = true;
|
};
|
|
// 新增时间段
|
const handleAddTimeSegment = () => {
|
state.timeForm.timeSegments.push({
|
segmentId: undefined,
|
periodId: state.timeForm.periodId,
|
segmentType: "flat",
|
startTime: "00:00",
|
endTime: "00:00"
|
});
|
};
|
|
// 删除时间段
|
const handleTimeDelete = (row) => {
|
const index = state.timeForm.timeSegments.indexOf(row);
|
if (index !== -1) {
|
state.timeForm.timeSegments.splice(index, 1);
|
}
|
};
|
|
// 提交时段表单
|
const submitForm = async () => {
|
await proxy.$refs[formRef.value].validate();
|
|
try {
|
if (state.form.periodId) {
|
await updatePeriod(state.form);
|
proxy.$modal.msgSuccess("修改成功");
|
} else {
|
await addPeriod(state.form);
|
proxy.$modal.msgSuccess("新增成功");
|
}
|
state.open = false;
|
getList();
|
} catch (error) {
|
proxy.$modal.msgError(state.form.periodId ? "修改失败" : "新增失败");
|
}
|
};
|
|
// 提交时间段配置
|
const submitTimeConfig = async () => {
|
try {
|
await saveTimeSegments(state.timeForm.timeSegments);
|
proxy.$modal.msgSuccess("时间配置保存成功");
|
state.timeConfigOpen = false;
|
} catch (error) {
|
proxy.$modal.msgError("时间配置保存失败");
|
}
|
};
|
|
// 取消按钮点击事件
|
const cancel = () => {
|
state.open = false;
|
proxy.$refs[formRef.value].resetFields();
|
};
|
|
// 取消时间配置按钮点击事件
|
const cancelTimeConfig = () => {
|
state.timeConfigOpen = false;
|
};
|
|
// 选择项变化事件
|
const handleSelectionChange = (selection) => {
|
state.selectedRows = selection;
|
};
|
|
// 时间段选择项变化事件
|
const handleTimeSelectionChange = (selection) => {
|
state.timeSelectedRows = selection;
|
};
|
|
// 格式化价格显示
|
const formatPrice = (row, column, cellValue) => {
|
return cellValue ? cellValue.toFixed(2) : "0.00";
|
};
|
|
// 导出方法
|
defineExpose({
|
getList
|
});
|
</script>
|
|
<style scoped>
|
.search-form {
|
margin-bottom: 16px;
|
}
|
|
.table-actions {
|
margin-bottom: 16px;
|
display: flex;
|
justify-content: flex-start;
|
}
|
</style>
|
