<template> <div class="publicContainer"> <!-- 搜索区域 --> <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch"> <el-form-item label="台账名称" prop="title"> <el-input v-model="queryParams.title" placeholder="请输入" clearable @keyup.enter="handleQuery" /> </el-form-item> <el-form-item label="年份" prop="year"> <el-date-picker type="year" v-model="queryParams.year" value-format="YYYY" placeholder="请选择日期"></el-date-picker> </el-form-item> <el-form-item> <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button> <el-button type="success" icon="Refresh" @click="resetQuery">重置</el-button> </el-form-item> </el-form> <!-- 按钮区域 --> <el-row :gutter="10" class="mb8"> <el-col :span="1.5"> <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['floodSys:jing:add']">新增</el-button> </el-col> <right-toolbar v-model:showSearch="showSearch" @queryTable="getDataList"></right-toolbar> </el-row> <!-- 表格 --> <el-table v-loading="tableLoading" :data="tableData" max-height="650"> <el-table-column label="序号" type="index" width="55" /> <el-table-column label="日期" prop="date" /> <el-table-column label="污水厂名称" prop="name" /> <el-table-column label="进口BOD浓度(mg/L)" prop="unum" /> <el-table-column label="创建时间" prop="createTime" /> <el-table-column label="操作" width="160" class-name="small-padding fixed-width"> <template #default="scope"> <el-button link type="warning" icon="Edit" @click="handleUpdate(scope.row)">修改</el-button> <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)"> 删除 </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="getDataList" /> <!-- 添加或修改弹窗 --> <el-dialog :title="dialogTitle" v-model="dialogShow" width="700px" append-to-body> <el-form ref="formRef" :model="formData" :rules="rulesForm" label-width="160px" class="publicForm"> <el-form-item label="巡查日期" prop="month"> <el-date-picker type="date" v-model="formData.date" format="YYYY-MM" value-format="YYYY-MM" placeholder="请选择日期" ></el-date-picker> </el-form-item> <el-form-item label="进口BOD浓度(mg/L)" prop="degist"> <el-input type="textarea" v-model="formData.degist" placeholder="请输入进口BOD浓度(mg/L)" /> </el-form-item> </el-form> <template #footer> <div class="dialog-footer"> <el-button type="info" @click="cancelForm">取 消</el-button> <el-button type="primary" @click="submitForm">确 定</el-button> </div> </template> </el-dialog> </div> </template> <script setup name="污水厂数据填报"> import { knowledgePage, knowledgeAdd, knowledgeDel, knowledgeDetail, knowledgeEdit } from '@/api/publicService/index'; const { proxy } = getCurrentInstance(); const tableData = ref([ { date: '2023-12-06', name: '胜园', unum: '10', unit: '由市海绵办牵头(韩)、市城管局(重点办)、市节水型(海绵)城市建设服务中心(张)、中规院(张、钊)、文投公司等相关人员参加', createTime: '2023-12-06 10:23:10', remark: '2023年10月19日下午预验收', }, { date: '2024-03-04', name: '晋安路46号院、综合保税园区一期项目、南城墙(环城公园一期、三期、五期)东郊沟雨水泵站、龙亭北路、铁北街、五福路人行道海绵化改造项目', unum: '9', unit: '市海绵办牵头,联合市节水型(海绵)城市建设服务中心、中规院、市政管理处', createTime: '2024-03-04 10:23:10', remark: '', }, ]); const tableLoading = ref(true); const total = ref(0); const dialogShow = ref(false); const dialogTitle = ref(''); const showSearch = ref(true); const allData = reactive({ formData: { content: '', degist: '', title: '', typeId: '', }, queryParams: { pageNum: 1, pageSize: 10, title: undefined, typeId: undefined, year: proxy.moment().subtract('', 'year').format('YYYY'), }, rulesForm: { postName: [{ required: true, message: '请输入', trigger: 'blur' }], degist: [{ required: true, message: '请输入', trigger: 'blur' }], typeId: [{ required: true, message: '请选择', trigger: 'change' }], }, }); const { queryParams, formData, rulesForm } = toRefs(allData); /** 获取查询数据列表 */ function getDataList() { tableLoading.value = true; knowledgePage(queryParams.value).then(response => { // tableData.value = response.data; total.value = response.total; tableLoading.value = false; }); } /** 取消按钮 */ function cancelForm() { dialogShow.value = false; } /** 搜索按钮操作 */ function handleQuery() { queryParams.value.pageNum = 1; getDataList(); } /** 重置按钮操作 */ function resetQuery() { proxy.resetForm('queryRef'); handleQuery(); } /** 新增按钮操作 */ function handleAdd() { proxy.resetForm('formRef'); //清空表单 formData.value.content = ' '; dialogShow.value = true; dialogTitle.value = '添加污水厂数据'; } /** 修改按钮操作 */ function handleUpdate(row) { dialogShow.value = true; // const postId = row.id; // knowledgeDetail(postId).then(response => { // dialogShow.value = true; // dialogTitle.value = '修改污水厂数据'; // nextTick(() => { // formData.value = response.data; // }); // }); } /** 提交按钮 */ function submitForm() { proxy.$refs['formRef'].validate(valid => { if (valid) { if (dialogTitle.value == '修改污水厂数据') { knowledgeEdit(formData.value).then(response => { proxy.$modal.msgSuccess('修改成功'); dialogShow.value = false; getDataList(); }); } else { if (formData.value.id) delete formData.value.id; knowledgeAdd(formData.value).then(response => { proxy.$modal.msgSuccess('新增成功'); dialogShow.value = false; getDataList(); }); } } }); } /** 删除按钮操作 */ function handleDelete(row) { const postIds = row.id; proxy.$modal .confirm('是否确认删除该数据项?') .then(function () { return knowledgeDel(postIds); }) .then(() => { getDataList(); proxy.$modal.msgSuccess('删除成功'); }) .catch(() => {}); } onMounted(() => { getDataList(); }); </script>