|
|
@@ -0,0 +1,428 @@
|
|
|
+<script setup lang="ts">
|
|
|
+import { clientDel, clientGet, clientPost, clientPut } from '@/utils/request.ts'
|
|
|
+import { onMounted, ref, reactive } from 'vue'
|
|
|
+import type { BaseResponse } from '@/utils/type.ts'
|
|
|
+import { ElMessage, ElMessageBox, ElUpload } from 'element-plus'
|
|
|
+import { Search, Plus, Edit, Delete, RefreshCw, Upload, Download } from 'lucide-vue-next'
|
|
|
+
|
|
|
+interface WaterUsage {
|
|
|
+ id: number;
|
|
|
+ customerCode: number;
|
|
|
+ customerName: string;
|
|
|
+ waterVolume: number;
|
|
|
+ amount: number;
|
|
|
+ statisticalTime: string;
|
|
|
+ createTime: string;
|
|
|
+}
|
|
|
+
|
|
|
+interface WaterUsageReponse extends BaseResponse{
|
|
|
+ data:WaterUsage
|
|
|
+}
|
|
|
+
|
|
|
+interface WaterUsageList extends BaseResponse {
|
|
|
+ data: {
|
|
|
+ records: WaterUsage[];
|
|
|
+ total: number;
|
|
|
+ };
|
|
|
+}
|
|
|
+
|
|
|
+const loading = ref(false)
|
|
|
+const tableData = ref<WaterUsage[]>([])
|
|
|
+const total = ref(0)
|
|
|
+const dialogVisible = ref(false)
|
|
|
+const dialogTitle = ref('新增用水记录')
|
|
|
+const isEdit = ref(false)
|
|
|
+const selectedIds = ref<number[]>([])
|
|
|
+const BASE_URL = import.meta.env.VITE_APP_BASE_API
|
|
|
+
|
|
|
+const uploadRef = ref() // 上传组件引用
|
|
|
+
|
|
|
+// 分页参数
|
|
|
+const pagination = reactive({
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10
|
|
|
+})
|
|
|
+
|
|
|
+// 搜索参数
|
|
|
+const searchForm = reactive({
|
|
|
+ customerCode: '',
|
|
|
+ customerName: '',
|
|
|
+ statisticalTime: ''
|
|
|
+})
|
|
|
+
|
|
|
+// 表单数据
|
|
|
+const formData = ref<Partial<WaterUsage>>({
|
|
|
+ customerCode: 0,
|
|
|
+ customerName: '',
|
|
|
+ waterVolume: 0,
|
|
|
+ amount: 0,
|
|
|
+ statisticalTime: ''
|
|
|
+})
|
|
|
+
|
|
|
+const getList = async () => {
|
|
|
+ loading.value = true
|
|
|
+ try {
|
|
|
+ const arr:{
|
|
|
+ value:string,
|
|
|
+ column: string,
|
|
|
+ type:string
|
|
|
+ }[] = [];
|
|
|
+ if(searchForm.customerCode){
|
|
|
+ arr.push({
|
|
|
+ value: searchForm.customerCode,
|
|
|
+ column: 'customer_code',
|
|
|
+ type: 'like'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if(searchForm.customerName){
|
|
|
+ arr.push({
|
|
|
+ value: searchForm.customerName,
|
|
|
+ column: 'customer_name',
|
|
|
+ type: 'like'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if(searchForm.statisticalTime){
|
|
|
+ arr.push({
|
|
|
+ value: searchForm.statisticalTime,
|
|
|
+ column: 'statistical_time',
|
|
|
+ type: 'like'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ const res = await clientGet<{pageNum: number, pageSize: number, conditionJson: string},WaterUsageList>('/park/waterUsageData/findByPage',{
|
|
|
+ params: {
|
|
|
+ pageNum: pagination.pageNum,
|
|
|
+ pageSize: pagination.pageSize,
|
|
|
+ conditionJson: encodeURIComponent(JSON.stringify(arr))
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if(res.code !== 200){
|
|
|
+ ElMessage.error(res.msg)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ tableData.value = res.data.records
|
|
|
+ total.value = res.data.total
|
|
|
+ } finally {
|
|
|
+ loading.value = false
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const handleSearch = () => {
|
|
|
+ pagination.pageNum = 1
|
|
|
+ getList()
|
|
|
+}
|
|
|
+
|
|
|
+const handleReset = () => {
|
|
|
+ Object.assign(searchForm, {
|
|
|
+ customerCode: '',
|
|
|
+ customerName: '',
|
|
|
+ statisticalTime: ''
|
|
|
+ })
|
|
|
+ pagination.pageNum = 1
|
|
|
+ getList()
|
|
|
+}
|
|
|
+
|
|
|
+const handleAdd = () => {
|
|
|
+ dialogTitle.value = '新增用水记录'
|
|
|
+ isEdit.value = false
|
|
|
+ formData.value = {
|
|
|
+ customerCode: 0,
|
|
|
+ customerName: '',
|
|
|
+ waterVolume: 0,
|
|
|
+ amount: 0,
|
|
|
+ statisticalTime: ''
|
|
|
+ }
|
|
|
+ dialogVisible.value = true
|
|
|
+}
|
|
|
+
|
|
|
+const getById = async (id: number) => {
|
|
|
+ const res = await clientGet<null,WaterUsageReponse>(`/park/waterUsageData/getById/${id}`)
|
|
|
+ return res.data // res.data 就是 WaterUsage
|
|
|
+}
|
|
|
+
|
|
|
+const handleEdit = async (row: WaterUsage) => {
|
|
|
+ dialogTitle.value = '编辑用水记录'
|
|
|
+ isEdit.value = true
|
|
|
+ loading.value = true
|
|
|
+ try {
|
|
|
+ const data = await getById(row.id)
|
|
|
+ formData.value = { ...data }
|
|
|
+ dialogVisible.value = true
|
|
|
+ } catch (error) {
|
|
|
+ ElMessage.error('获取用水记录详情失败')
|
|
|
+ } finally {
|
|
|
+ loading.value = false
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const handleSave = async () => {
|
|
|
+ loading.value = true
|
|
|
+ try {
|
|
|
+ let res: BaseResponse
|
|
|
+ if (isEdit.value) {
|
|
|
+ res = await clientPut<WaterUsage,BaseResponse>('/park/waterUsageData/updateById', formData.value as WaterUsage)
|
|
|
+ } else {
|
|
|
+ res = await clientPost<WaterUsage,BaseResponse>('/park/waterUsageData/save', formData.value as WaterUsage)
|
|
|
+ }
|
|
|
+ if(res.code !== 200){
|
|
|
+ ElMessage.error(res.msg)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ ElMessage.success(res.msg)
|
|
|
+ dialogVisible.value = false
|
|
|
+ getList()
|
|
|
+ } finally {
|
|
|
+ loading.value = false
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const handleDelete = async (row: WaterUsage) => {
|
|
|
+ try {
|
|
|
+ await ElMessageBox.confirm('确定要删除这个用水记录吗？', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ })
|
|
|
+
|
|
|
+ const res = await clientDel<string[],BaseResponse>('/park/waterUsageData/deleteBatchById',{
|
|
|
+ params:{
|
|
|
+ ids: [row.id]
|
|
|
+ }
|
|
|
+ },'comma')
|
|
|
+
|
|
|
+ if(res.code !== 200){
|
|
|
+ ElMessage.error(res.msg)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ ElMessage.success(res.msg)
|
|
|
+ getList()
|
|
|
+ } catch {}
|
|
|
+}
|
|
|
+
|
|
|
+const handleBatchDelete = async () => {
|
|
|
+ if (selectedIds.value.length === 0) {
|
|
|
+ ElMessage.warning('请选择要删除的用水记录')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ try {
|
|
|
+ await ElMessageBox.confirm(`确定要删除选中的 ${selectedIds.value.length} 个用水记录吗？`, '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ })
|
|
|
+ const res = await clientDel<string[],BaseResponse>('/park/waterUsageData/deleteBatchById',{
|
|
|
+ params:{
|
|
|
+ ids: selectedIds.value
|
|
|
+ }
|
|
|
+ },'comma')
|
|
|
+ if(res.code !== 200){
|
|
|
+ ElMessage.error(res.msg)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ ElMessage.success(res.msg)
|
|
|
+ selectedIds.value = []
|
|
|
+ getList()
|
|
|
+ } catch {}
|
|
|
+}
|
|
|
+
|
|
|
+const handleSelectionChange = (selection: WaterUsage[]) => {
|
|
|
+ selectedIds.value = selection.map(item => item.id)
|
|
|
+}
|
|
|
+
|
|
|
+const handlePageChange = (page: number) => {
|
|
|
+ pagination.pageNum = page
|
|
|
+ getList()
|
|
|
+}
|
|
|
+
|
|
|
+const handleSizeChange = (size: number) => {
|
|
|
+ pagination.pageSize = size
|
|
|
+ pagination.pageNum = 1
|
|
|
+ getList()
|
|
|
+}
|
|
|
+
|
|
|
+/** ===== Excel 相关接口 ===== **/
|
|
|
+
|
|
|
+// 导出 Excel
|
|
|
+const handleExport = async () => {
|
|
|
+ try {
|
|
|
+ const conditionJson = encodeURIComponent(JSON.stringify([]))
|
|
|
+ const res = await clientGet<null, Blob>('/park/waterUsageData/exportExcel', {
|
|
|
+ params: { conditionJson },
|
|
|
+ responseType: 'blob'
|
|
|
+ })
|
|
|
+ const blob = new Blob([res as any], { type: 'application/vnd.ms-excel' })
|
|
|
+ const url = window.URL.createObjectURL(blob)
|
|
|
+ const a = document.createElement('a')
|
|
|
+ a.href = url
|
|
|
+ a.download = '智慧用水信息.xlsx'
|
|
|
+ a.click()
|
|
|
+ window.URL.revokeObjectURL(url)
|
|
|
+ } catch (e) {
|
|
|
+ ElMessage.error('导出失败')
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 下载模板
|
|
|
+const handleDownloadTemplate = async () => {
|
|
|
+ try {
|
|
|
+ const res = await clientGet<null, Blob>('/park/waterUsageData/downloadTemplateWord', {
|
|
|
+ responseType: 'blob'
|
|
|
+ })
|
|
|
+ const blob = new Blob([res as any], { type: 'application/vnd.ms-excel' })
|
|
|
+ const url = window.URL.createObjectURL(blob)
|
|
|
+ const a = document.createElement('a')
|
|
|
+ a.href = url
|
|
|
+ a.download = '智慧用水信息模板.xlsx'
|
|
|
+ a.click()
|
|
|
+ window.URL.revokeObjectURL(url)
|
|
|
+ } catch (e) {
|
|
|
+ ElMessage.error('下载模板失败')
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 导入 Excel
|
|
|
+const handleImportSuccess = (res: any) => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ ElMessage.success('导入成功')
|
|
|
+ getList()
|
|
|
+ } else {
|
|
|
+ ElMessage.error(res.msg || '导入失败')
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(()=>{
|
|
|
+ getList();
|
|
|
+})
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <div class="p-6 bg-gray-50 min-h-screen">
|
|
|
+ <!-- 页面标题 -->
|
|
|
+ <div class="mb-6">
|
|
|
+ <h1 class="text-2xl font-bold text-gray-800 mb-2">智慧用水管理</h1>
|
|
|
+ <p class="text-gray-600">管理企业用水情况</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 搜索区域 -->
|
|
|
+ <el-card class="mb-4" shadow="never">
|
|
|
+ <el-form :model="searchForm" inline class="search-form">
|
|
|
+ <el-form-item label="公司名称">
|
|
|
+ <el-input v-model="searchForm.customerCode" placeholder="请输入客户代码" clearable style="width: 200px" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="用水记录名称">
|
|
|
+ <el-input v-model="searchForm.customerName" placeholder="请输入客户名称" clearable style="width: 200px" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="统计时间">
|
|
|
+ <el-input v-model="searchForm.statisticalTime" placeholder="请输入统计时间" clearable style="width: 200px" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="handleSearch" :icon="Search">搜索</el-button>
|
|
|
+ <el-button @click="handleReset" :icon="RefreshCw">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ <!-- 操作按钮区域 -->
|
|
|
+ <el-card shadow="never">
|
|
|
+ <div class="mb-4 flex justify-between items-center">
|
|
|
+ <div class="flex gap-2">
|
|
|
+ <el-button type="primary" @click="handleAdd" :icon="Plus">新增用水记录</el-button>
|
|
|
+ <el-button type="danger" @click="handleBatchDelete" :disabled="selectedIds.length === 0" :icon="Delete">批量删除</el-button>
|
|
|
+ <el-button type="success" @click="handleExport" :icon="Download">导出Excel</el-button>
|
|
|
+ <el-upload
|
|
|
+ ref="uploadRef"
|
|
|
+ :action="BASE_URL+'/park/waterUsageData/importExcel'"
|
|
|
+ :show-file-list="false"
|
|
|
+ accept=".xls,.xlsx"
|
|
|
+ :on-success="handleImportSuccess"
|
|
|
+ >
|
|
|
+ <el-button type="warning" :icon="Upload">导入Excel</el-button>
|
|
|
+ </el-upload>
|
|
|
+ <el-button @click="handleDownloadTemplate" :icon="Download">下载模板</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="text-sm text-gray-500">共 {{ total }} 条记录</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 数据表格 -->
|
|
|
+ <el-table :data="tableData" :loading="loading" @selection-change="handleSelectionChange" stripe class="w-full">
|
|
|
+ <el-table-column type="selection" width="55" />
|
|
|
+ <el-table-column prop="customerCode" label="客户代码" min-width="120" />
|
|
|
+ <el-table-column prop="customerName" label="客户名称" min-width="120" />
|
|
|
+ <el-table-column prop="waterVolume" label="用水量(单位/吨)" min-width="150" show-overflow-tooltip />
|
|
|
+ <el-table-column prop="statisticalTime" label="统计时间" min-width="120" />
|
|
|
+ <el-table-column prop="amount" label="金额" width="100" />
|
|
|
+ <el-table-column prop="createTime" label="创建时间" width="180" />
|
|
|
+ <el-table-column label="操作" width="150" fixed="right">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-button type="primary" size="small" @click="handleEdit(row)" :icon="Edit" link>编辑</el-button>
|
|
|
+ <el-button type="danger" size="small" @click="handleDelete(row)" :icon="Delete" link>删除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <!-- 分页组件 -->
|
|
|
+ <div class="mt-4 flex justify-end">
|
|
|
+ <el-pagination
|
|
|
+ v-model:current-page="pagination.pageNum"
|
|
|
+ v-model:page-size="pagination.pageSize"
|
|
|
+ :page-sizes="[10, 20, 50, 100]"
|
|
|
+ :total="total"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handlePageChange"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ <!-- 新增/编辑对话框 -->
|
|
|
+ <el-dialog v-model="dialogVisible" :title="dialogTitle" width="800px" :close-on-click-modal="false">
|
|
|
+ <el-form :model="formData" label-width="100px" class="px-4">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="客户代码" required>
|
|
|
+ <el-input v-model="formData.customerCode" type="number" placeholder="请输入客户代码" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="客户名称" required>
|
|
|
+ <el-input v-model="formData.customerName" placeholder="请输入客户名称" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="用水量">
|
|
|
+ <el-input v-model="formData.waterVolume" type="number" placeholder="请输入用水量" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="金额">
|
|
|
+ <el-input v-model="formData.amount" type="number" placeholder="请输入金额" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="统计时间">
|
|
|
+ <el-input v-model="formData.statisticalTime" placeholder="请输入统计时间" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <div class="dialog-footer">
|
|
|
+ <el-button @click="dialogVisible = false">取消</el-button>
|
|
|
+ <el-button type="primary" @click="handleSave" :loading="loading">确定</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.search-form .el-form-item {
|
|
|
+ margin-bottom: 16px;
|
|
|
+}
|
|
|
+.dialog-footer {
|
|
|
+ text-align: right;
|
|
|
+}
|
|
|
+</style>
|
