<template>
<div class="sewage-persent-page">
<div class="top">
<el-form label-width="auto" inline ref="ruleForm" :model="formData">
<!-- <el-form-item label-width="auto" prop="warningValue" label="水质类别:" >
<el-select v-model="typeVal" @change="onTypeChange" >
<el-option label="地下水" :value="1"></el-option>
<el-option label="排口" :value="2"></el-option>
<el-option label="饮用水" :value="3"></el-option>
</el-select>
</el-form-item> -->
<!-- <el-form-item label-width="auto" prop="warningValue" label="污水资源点编号:" clearable>
<el-select clearable v-model="formData.pointNo" @change="onSiteChange">
<el-option v-for="(item, index) in siteList" :key="index" :label="item.pointNo"
:value="item.id"></el-option>
</el-select>
</el-form-item> -->
<el-form-item>
<el-button type="primary" icon="Refresh" @click="onSearch">刷新</el-button>
<el-button type="primary" icon="Plus" plain @click="onAdd">新增</el-button>
</el-form-item>
</el-form>
</div>
<el-table :data="tableData" v-loading="tableLoading" stripe max-height="700">
<el-table-column type="index" width="55" :index="getIndex" label="序号" align="center" />
<el-table-column prop="year" label="污水年份" align="center"></el-table-column>
<el-table-column prop="treatmentCapacity" label="污水总量" align="center"></el-table-column>
<el-table-column prop="totalAmount" label="污水再生回用总量" align="center"></el-table-column>
<el-table-column prop="treatmentRate" label="污水资源利用率" align="center"></el-table-column>
<el-table-column prop="totalWastewater" label="污水处理总量" align="center"></el-table-column>
<el-table-column fixed="right" label="操作" width="120">
<template #default="{ row }">
<el-button link type="primary" @click="onEdit(row)">修改</el-button>
<el-button link type="danger" @click="onDelete(row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div style="float: right;">
<el-pagination :page-sizes="[10, 20, 30, 50]" layout="total,sizes, prev, pager, next,jumper"
style="margin-top: 15px;" @size-change="sizeChange" @current-change="handleCurrentChange" v-model::current-page="pageNum"
v-model:page-size="pageSize" background :total="total"></el-pagination>
</div>
<el-dialog v-model="visible" title="操作" :close-on-click-modal="false" :modal-append-to-body="false"
@close="onModalClose">
<el-form label-width="auto" :rules="rules" :model="formData" ref="ruleForm">
<el-form-item label="年份：" prop="year">
<el-date-picker style="width: 100%;" v-model="formData.year" type="year" :clearable="false"
placeholder="选择年" value-format="YYYY" format="YYYY"></el-date-picker>
</el-form-item>
<el-form-item label="污水资源点编号：" prop="pointNo">
<el-input placeholder="污水资源点编号" v-model="formData.pointNo"></el-input>
</el-form-item>
<el-form-item label="污水总量：" prop="treatmentCapacity">
<el-input placeholder="污水总量" v-model="formData.treatmentCapacity"></el-input>
</el-form-item>
<el-form-item label="污水再生回用总量：" prop="totalAmount">
<el-input placeholder="污水再生回用总量" v-model="formData.totalAmount">
</el-input>
</el-form-item>
<el-form-item label="污水资源利用率：" prop="treatmentRate">
<el-input placeholder="污水资源利用率" v-model="formData.treatmentRate">
<template slot="append">%</template>
</el-input>
</el-form-item>
<el-form-item label="污水处理总量：" prop="totalWastewater">
<el-input placeholder="污水处理总量" v-model="formData.totalWastewater"></el-input>
</el-form-item>
</el-form>
<div style="text-align: right;padding: 10px;">
<el-button @click="closed" :loading="formLoading">关闭</el-button>
<el-button type="primary" @click="onSubmit" :loading="formLoading">确定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { proutilizationrateData, proutilizationrateSave, deleteProUtili, putProUtili,proUtilizationRateList } from "@/services";
import { ElMessage, ElMessageBox } from 'element-plus'
export default {
data() {
return {
isAdd: true,
tableHeight: 0,
pageNum: 1,
pageSize: 10,
total: 0,
tableData: [], // 表格数据
tableLoading: false, // 表格加载状态
visible: false,
formData: {
year: "",
pointNo: "",
treatmentCapacity: "",
totalAmount: "",
treatmentRate: "",
totalWastewater: ""
},
rules: {
year: [{ required: true, message: "请选择年份" }],
pointNo: [{ required: true, message: "请输入污水资源点编号" }],
treatmentCapacity: [
{ required: true, message: "请输入污水总量" }
],
totalAmount: [
{ required: true, message: "请输入污水再生回用总量" }
],
treatmentRate: [
{ required: true, message: "请输入资源利用率" }
],
totalWastewater: [
{ required: true, message: "请输入污水处理总量" }
]
},
formLoading: false
};
},
methods: {
// 获取站点列表
async getSiteList() {
let res = await proUtilizationRateList(this.typeVal);
if (res.code === 200) {
this.siteList = res.data;
}
},
getIndex (index) {
return (this.pageNum - 1) * this.pageSize + index + 1
},
onSearch(){
this.getTableData();
},
closed() {
this.visible = false;
},
// 点击修改站点
onEdit(val) {
this.visible = true;
this.dialogTitle1 = "操作";
console.log(val, 5555);
this.siteNoDisable = true;
this.formData = val
this.isAdd = false
},
//编辑
async editConfig(v) {
let { code } = await putProUtili(v)
if (code == 200) {
this.visible = false;
this.getTableData();
}
},
//删除
async deleteConfig(v) {
let { code } = await deleteProUtili(v)
if (code == 200) {
this.getTableData();
}
},
// 点击s删除
onDelete(v) {
console.log(v, 333);
ElMessageBox.confirm(
'您确定删除吗？',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}
)
.then(() => {
this.deleteConfig(v)
ElMessage({
type: 'success',
message: '删除成功',
})
})
},
// 点击新增按钮
onAdd() {
this.isAdd = true
this.visible = true;
},
// 获取表格数据
async getTableData() {
let _data = {
pageNum: this.pageNum,
pageSize: this.pageSize,
// ...this.formData
};
this.tableLoading = true;
let res = await proutilizationrateData(_data);
this.tableLoading = false;
if (res.code === 200) {
this.tableData = res.data;
this.total=res.total
}
},
// 切换分页
handleCurrentChange(pageNum) {
this.pageNum = pageNum;
this.getTableData();
},
sizeChange(pageSize){
this.pageSize = pageSize;
this.getTableData();
},
// 关闭弹框
onModalClose() {
this.visible = false;
this.formData={}
// this.$refs["ruleForm"].clearValidate();
this.$refs["ruleForm"].resetFields();
},
// 点击表单提交按钮
onSubmit() {
this.$refs["ruleForm"].validate(valid => {
if (valid) {
this.onSave();
} else {
return false;
}
});
},
// 提交新增
async onSave() {
if (this.isAdd) {
this.formLoading = true;
let res = await proutilizationrateSave(this.formData);
this.formLoading = false;
if (res.code === 200) {
this.$message({
type: "success",
message: "新增成功"
});
this.onModalClose();
this.getTableData();
} else if (res.code && res.code !== 200) {
this.$message({
type: "error",
message: res.msg
});
}
} else {
this.editConfig(this.formData)
}
},
// 重置高度
resetHeight() {
return new Promise((resolve, reject) => {
this.tableH = 0
resolve()
})
},
// 设置table高度
// fetTableHeight() {
// this.resetHeight().then(res => {
// let bodyH = document.documentElement.clientHeight; // 屏幕高度
// let h = document.getElementsByClassName('top-menu')[0].clientHeight + 100; // 二级菜单栏高度
// let topH = document.getElementsByClassName('top')[0].clientHeight; // 二级菜单栏高度
// this.tableHeight = bodyH - h - topH - 100 + "px";
// })
// }
},
mounted() {
this.getTableData();
this.getSiteList();
// this.fetTableHeight();
}
};
</script>
<style lang="less" scoped>
.sewage-persent-page {
padding: 20px;
border: 1px solid #ddd;
height: 90vh;
.top {
margin-bottom: 15px;
}
.el-input__inner {
// color: #fff;
}
}
</style>
