<template>
|
<div class="app-container">
|
<!-- 搜索区域 -->
|
<div class="search_form">
|
<el-form :model="searchForm"
|
:inline="true">
|
<el-form-item label="能源类型:">
|
<el-select v-model="searchForm.energyTyep"
|
placeholder="全部"
|
clearable
|
style="width: 120px;"
|
@change="handleQuery">
|
<el-option label="气"
|
value="gas" />
|
<el-option label="电"
|
value="electricity" />
|
<el-option label="水"
|
value="water" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="能源名称:">
|
<el-input v-model="searchForm.energyName"
|
placeholder="请输入"
|
clearable
|
style="width: 160px;"
|
@keyup.enter="handleQuery" />
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary"
|
@click="handleQuery">查询</el-button>
|
<el-button @click="handleReset">重置</el-button>
|
</el-form-item>
|
</el-form>
|
<div>
|
<el-button type="primary"
|
@click="handleAdd">新增</el-button>
|
<!-- <el-button type="success"
|
@click="handleImport">导入</el-button> -->
|
<el-button type="warning"
|
@click="handleExport">导出</el-button>
|
</div>
|
</div>
|
<!-- 数据表格 -->
|
<div class="table_list">
|
<el-table :data="tableData"
|
v-loading="tableLoading"
|
border
|
height="calc(100vh - 350px)"
|
stripe>
|
<el-table-column type="selection"
|
width="55"
|
align="center" />
|
<el-table-column prop="energyTyep"
|
label="能源类型"
|
width="100"
|
align="center">
|
<template #default="scope">
|
<el-tag :type="getEnergyTypeType(scope.row.energyTyep)">
|
{{ scope.row.energyTyep }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column prop="energyName"
|
label="能源名称"
|
align="center" />
|
<el-table-column prop="unitPrice"
|
label="单价"
|
sortable
|
align="right">
|
<template #default="scope">
|
<span>{{ scope.row.unitPrice }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="备注"
|
prop="remark"
|
align="center" />
|
<el-table-column prop="unit"
|
label="单位"
|
align="center" />
|
<el-table-column prop="createUserName"
|
label="创建人"
|
align="center" />
|
<el-table-column prop="createTime"
|
label="创建时间"
|
sortable
|
align="center" />
|
<el-table-column label="操作"
|
align="center"
|
fixed="right">
|
<template #default="scope">
|
<el-button type="primary"
|
link
|
@click="handleDetail(scope.row)">详情</el-button>
|
<el-button type="danger"
|
link
|
@click="handleDelete(scope.row)">删除</el-button>
|
<el-button type="primary"
|
link
|
@click="handleEdit(scope.row)">编辑</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<!-- 分页 -->
|
<div class="pagination-container">
|
<el-pagination v-model:current-page="page.current"
|
v-model:page-size="page.size"
|
:page-sizes="[10, 20, 50, 100]"
|
:total="page.total"
|
layout="total, sizes, prev, pager, next, jumper"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange" />
|
</div>
|
</div>
|
<!-- 新增/编辑弹窗 -->
|
<el-dialog v-model="dialogVisible"
|
:title="dialogTitle"
|
width="600px">
|
<el-form :model="form"
|
:rules="rules"
|
ref="formRef"
|
label-width="100px">
|
<el-form-item label="能源名称"
|
prop="energyName">
|
<el-input v-model="form.energyName"
|
placeholder="请输入" />
|
</el-form-item>
|
<el-form-item label="能源类型"
|
prop="energyTyep">
|
<el-select v-model="form.energyTyep"
|
placeholder="请选择"
|
style="width: 100%;">
|
<el-option label="气"
|
value="气" />
|
<el-option label="电"
|
value="电" />
|
<el-option label="水"
|
value="水" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="备注"
|
prop="remark">
|
<el-input v-model="form.remark"
|
type="textarea"
|
rows="3" />
|
</el-form-item>
|
<el-form-item label="单位"
|
prop="unit">
|
<el-input v-model="form.unit"
|
placeholder="请输入" />
|
</el-form-item>
|
<el-form-item label="单价"
|
prop="unitPrice">
|
<el-input-number v-model="form.unitPrice"
|
:precision="2"
|
:min="0"
|
style="width: 100%;" />
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button type="primary"
|
@click="handleSubmit">确定</el-button>
|
<el-button @click="dialogVisible = false">取消</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
<!-- 详情弹窗 -->
|
<el-dialog v-model="detailDialogVisible"
|
title="能源类型详情"
|
width="600px">
|
<el-form :model="detailForm"
|
label-width="100px"
|
disabled>
|
<el-form-item label="能源类型">
|
<el-tag :type="getEnergyTypeType(detailForm.energyTyep)">
|
{{ detailForm.energyTyep }}
|
</el-tag>
|
</el-form-item>
|
<el-form-item label="能源名称">
|
<el-input v-model="detailForm.energyName" />
|
</el-form-item>
|
<el-form-item label="单价">
|
<el-input v-model="detailForm.unitPrice" />
|
</el-form-item>
|
<el-form-item label="单位">
|
<el-input v-model="detailForm.unit" />
|
</el-form-item>
|
<el-form-item label="备注">
|
<el-input v-model="detailForm.remark"
|
type="textarea"
|
rows="3" />
|
</el-form-item>
|
<el-form-item label="创建人">
|
<el-input v-model="detailForm.createUserName" />
|
</el-form-item>
|
<el-form-item label="创建时间">
|
<el-input v-model="detailForm.createTime" />
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="detailDialogVisible = false">关闭</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, reactive, onMounted, getCurrentInstance } from "vue";
|
import { ElMessage, ElMessageBox } from "element-plus";
|
import {
|
energyTypeListPage,
|
energyTypeAdd,
|
energyTypeDelete,
|
} from "@/api/energyManagement/energyType";
|
|
import { More } from "@element-plus/icons-vue";
|
|
// 搜索表单
|
const searchForm = reactive({
|
energyTyep: "",
|
energyName: "",
|
});
|
|
// 表格数据
|
const tableData = ref([]);
|
const tableLoading = ref(false);
|
|
// 分页
|
const page = reactive({
|
current: 1,
|
size: 10,
|
total: 0,
|
});
|
|
// 弹窗控制
|
const dialogVisible = ref(false);
|
const dialogTitle = ref("新增能源类型");
|
const formRef = ref(null);
|
const isEdit = ref(false);
|
const currentId = ref(null);
|
|
// 表单数据
|
const form = reactive({
|
energyName: "",
|
energyTyep: "",
|
id: "",
|
remark: "",
|
unit: "",
|
unitPrice: 0,
|
});
|
const { proxy } = getCurrentInstance();
|
// 表单校验规则
|
const rules = {
|
energyTyep: [
|
{ required: true, message: "请选择能源类型", trigger: "change" },
|
],
|
energyName: [{ required: true, message: "请输入能源名称", trigger: "blur" }],
|
unitPrice: [{ required: true, message: "请输入单价", trigger: "blur" }],
|
unit: [{ required: true, message: "请输入单位", trigger: "blur" }],
|
};
|
|
// 详情弹窗
|
const detailDialogVisible = ref(false);
|
const detailForm = reactive({
|
energyTyep: "",
|
energyName: "",
|
unitPrice: "",
|
unit: "",
|
remark: "",
|
createUserName: "",
|
createUserNameOrganization: "",
|
createTime: "",
|
updateTime: "",
|
});
|
|
// 获取能源类型样式
|
const getEnergyTypeType = type => {
|
const typeMap = {
|
气: "success",
|
电: "warning",
|
水: "primary",
|
};
|
return typeMap[type] || "info";
|
};
|
|
// 生成模拟数据
|
const generateMockData = () => {
|
const data = [
|
{
|
id: 1,
|
energyTyep: "气",
|
energyName: "蒸汽",
|
unitPrice: "0.00",
|
unit: "T",
|
createUserName: "白洛已痴画",
|
createUserNameOrganization: "宁夏中银绒业实业集团有限公司",
|
createTime: "2022-11-09 14:14:05",
|
updateTime: "2022-11-10 18:14:48",
|
remark: "",
|
},
|
{
|
id: 2,
|
energyTyep: "电",
|
energyName: "电量",
|
unitPrice: "0.00",
|
unit: "度",
|
createUserName: "王琪已痴画",
|
createUserNameOrganization: "宁夏中银绒业实业集团有限公司",
|
createTime: "2022-10-08 17:27:27",
|
updateTime: "2022-11-10 18:14:40",
|
remark: "",
|
},
|
{
|
id: 3,
|
energyTyep: "水",
|
energyName: "中水",
|
unitPrice: "0.00",
|
unit: "m³",
|
createUserName: "王琪已痴画",
|
createUserNameOrganization: "宁夏中银绒业实业集团有限公司",
|
createTime: "2022-10-08 10:03:03",
|
updateTime: "2022-11-10 18:10:31",
|
remark: "",
|
},
|
];
|
return data;
|
};
|
|
// 查询
|
const handleQuery = () => {
|
tableLoading.value = true;
|
let params = {
|
current: page.current,
|
size: page.size,
|
energyTyep: searchForm.energyTyep,
|
energyName: searchForm.energyName,
|
};
|
energyTypeListPage(params)
|
.then(res => {
|
if (res.code === 200) {
|
tableData.value = res.data.records;
|
page.total = res.data.total;
|
tableLoading.value = false;
|
} else {
|
ElMessage.error(res.message || "查询失败");
|
tableLoading.value = false;
|
}
|
})
|
.catch(error => {
|
ElMessage.error("网络错误，请稍后重试");
|
tableLoading.value = false;
|
});
|
};
|
|
// 重置
|
const handleReset = () => {
|
searchForm.energyTyep = "";
|
searchForm.energyName = "";
|
page.current = 1;
|
handleQuery();
|
};
|
|
// 新增
|
const handleAdd = () => {
|
isEdit.value = false;
|
currentId.value = null;
|
dialogTitle.value = "新增能源类型";
|
resetForm();
|
dialogVisible.value = true;
|
};
|
|
// 编辑
|
const handleEdit = row => {
|
isEdit.value = true;
|
currentId.value = row.id;
|
dialogTitle.value = "编辑能源类型";
|
Object.assign(form, row);
|
dialogVisible.value = true;
|
};
|
|
// 详情
|
const handleDetail = row => {
|
Object.assign(detailForm, row);
|
detailDialogVisible.value = true;
|
};
|
|
// 删除
|
const handleDelete = row => {
|
ElMessageBox.confirm("确定要删除该能源类型吗？", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
}).then(() => {
|
tableLoading.value = true;
|
energyTypeDelete([row.id])
|
.then(res => {
|
if (res.code === 200) {
|
ElMessage.success("删除成功");
|
handleQuery();
|
} else {
|
ElMessage.error(res.message || "删除失败");
|
}
|
})
|
.catch(error => {
|
ElMessage.error("网络错误，请稍后重试");
|
})
|
.finally(() => {
|
tableLoading.value = false;
|
});
|
});
|
};
|
|
// 复制
|
const handleCopy = row => {
|
isEdit.value = false;
|
currentId.value = null;
|
dialogTitle.value = "复制能源类型";
|
Object.assign(form, row);
|
delete form.id;
|
dialogVisible.value = true;
|
ElMessage.success("已复制到表单");
|
};
|
|
// 重置表单
|
const resetForm = () => {
|
form.energyName = "";
|
form.energyTyep = "";
|
form.id = "";
|
form.remark = "";
|
form.unit = "";
|
form.unitPrice = 0;
|
};
|
|
// 提交表单
|
const handleSubmit = () => {
|
formRef.value.validate(valid => {
|
if (valid) {
|
tableLoading.value = true;
|
energyTypeAdd(form)
|
.then(res => {
|
if (res.code === 200) {
|
ElMessage.success(isEdit.value ? "编辑成功" : "新增成功");
|
dialogVisible.value = false;
|
handleQuery();
|
} else {
|
ElMessage.error(res.message || "操作失败");
|
}
|
})
|
.catch(error => {
|
ElMessage.error("网络错误，请稍后重试");
|
})
|
.finally(() => {
|
tableLoading.value = false;
|
});
|
}
|
});
|
};
|
|
// 导入
|
const handleImport = () => {
|
ElMessage.success("导入成功");
|
};
|
|
// 导出
|
const handleExport = () => {
|
// proxy.download("/energy/export", { ...searchForm.value }, "能耗类型.xlsx");
|
proxy.download("/energy/export", {}, "能耗类型.xlsx");
|
};
|
|
// 分页大小变化
|
const handleSizeChange = val => {
|
page.size = val;
|
handleQuery();
|
};
|
|
// 页码变化
|
const handleCurrentChange = val => {
|
page.current = val;
|
handleQuery();
|
};
|
|
onMounted(() => {
|
handleQuery();
|
});
|
</script>
|
<style scoped lang="scss">
|
.app-container {
|
padding: 24px;
|
background-color: #f0f2f5;
|
min-height: calc(100vh - 48px);
|
}
|
|
.search_form {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 24px;
|
padding: 20px;
|
background-color: #ffffff;
|
border-radius: 6px;
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
|
transition: all 0.3s ease;
|
|
&:hover {
|
box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.08);
|
}
|
}
|
|
.table_list {
|
// margin-bottom: 24px;
|
background-color: #ffffff;
|
border-radius: 6px;
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
|
overflow: hidden;
|
height: calc(100vh - 250px);
|
}
|
|
:deep(.el-table) {
|
border: none;
|
border-radius: 6px;
|
overflow: hidden;
|
|
.el-table__header-wrapper {
|
background-color: #fafafa;
|
|
th {
|
background-color: #fafafa;
|
font-weight: 600;
|
color: #303133;
|
border-bottom: 1px solid #ebeef5;
|
padding: 14px 0;
|
}
|
}
|
|
.el-table__body-wrapper {
|
tr {
|
transition: all 0.3s ease;
|
|
&:hover {
|
background-color: #f5f7fa;
|
}
|
|
td {
|
border-bottom: 1px solid #ebeef5;
|
padding: 12px 0;
|
}
|
}
|
|
tr.current-row {
|
background-color: #ecf5ff;
|
}
|
}
|
|
.el-table__empty-block {
|
padding: 40px 0;
|
}
|
}
|
|
.pagination-container {
|
display: flex;
|
justify-content: flex-end;
|
padding: 16px 20px;
|
background-color: #ffffff;
|
border-top: 1px solid #ebeef5;
|
border-radius: 0 0 12px 12px;
|
}
|
|
:deep(.el-button) {
|
transition: all 0.3s ease;
|
|
&:hover {
|
transform: translateY(-1px);
|
}
|
}
|
|
:deep(.el-dialog) {
|
border-radius: 6px;
|
overflow: hidden;
|
|
.el-dialog__header {
|
background-color: #fafafa;
|
border-bottom: 1px solid #ebeef5;
|
padding: 20px 24px;
|
|
.el-dialog__title {
|
font-size: 16px;
|
font-weight: 600;
|
color: #303133;
|
}
|
}
|
|
.el-dialog__body {
|
padding: 24px;
|
}
|
|
.el-dialog__footer {
|
padding: 16px 24px;
|
border-top: 1px solid #ebeef5;
|
background-color: #fafafa;
|
}
|
}
|
|
:deep(.el-form) {
|
.el-form-item {
|
margin-bottom: 20px;
|
|
.el-form-item__label {
|
font-weight: 500;
|
color: #303133;
|
}
|
|
.el-input,
|
.el-select,
|
.el-date-picker,
|
.el-input-number {
|
width: 100%;
|
|
// .el-input__inner {
|
// border-radius: 6px;
|
// border: 1px solid #dcdfe6;
|
// transition: all 0.3s ease;
|
|
// &:focus {
|
// border-color: #409eff;
|
// box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
|
// }
|
// }
|
}
|
}
|
}
|
|
:deep(.el-tag) {
|
border-radius: 4px;
|
padding: 2px 8px;
|
font-size: 12px;
|
}
|
|
@media (max-width: 768px) {
|
.app-container {
|
padding: 16px;
|
}
|
|
.search_form {
|
flex-direction: column;
|
align-items: flex-start;
|
gap: 12px;
|
|
.el-form {
|
width: 100%;
|
|
.el-form-item {
|
width: 100%;
|
}
|
}
|
|
> div {
|
width: 100%;
|
display: flex;
|
gap: 12px;
|
|
.el-button {
|
flex: 1;
|
}
|
}
|
}
|
|
:deep(.el-table) {
|
th,
|
td {
|
padding: 10px 0;
|
font-size: 12px;
|
}
|
}
|
|
:deep(.el-dialog) {
|
width: 90% !important;
|
margin: 20px auto !important;
|
}
|
}
|
.consumption-value {
|
font-weight: bold;
|
color: #409eff;
|
}
|
|
.consumption-unit {
|
font-size: 12px;
|
color: #909399;
|
margin-left: 4px;
|
}
|
.search_form {
|
:deep(.el-form-item) {
|
margin-bottom: 0px !important;
|
}
|
}
|
</style>
|
