|
|
@@ -0,0 +1,419 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <!-- 搜索区域 -->
|
|
|
+ <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="80px">
|
|
|
+ <el-form-item label="用户编号" prop="userCode">
|
|
|
+ <el-input v-model="queryParams.userCode" placeholder="请输入用户编号" clearable size="small" @keyup.enter="handleQuery" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="用户名称" prop="userName">
|
|
|
+ <el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable size="small" @keyup.enter="handleQuery" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="用户类型" prop="userType">
|
|
|
+ <el-select v-model="queryParams.userType" placeholder="请选择类型" clearable size="small" style="width: 120px">
|
|
|
+ <el-option label="居民" value="居民" />
|
|
|
+ <el-option label="工业" value="工业" />
|
|
|
+ <el-option label="商业" value="商业" />
|
|
|
+ <el-option label="行政事业" value="行政事业" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="用户状态" prop="status">
|
|
|
+ <el-select v-model="queryParams.status" placeholder="请选择状态" clearable size="small" style="width: 120px">
|
|
|
+ <el-option label="正常" value="0" />
|
|
|
+ <el-option label="欠费" value="1" />
|
|
|
+ <el-option label="停用" value="2" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="创建时间">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="dateRange"
|
|
|
+ size="small"
|
|
|
+ style="width: 240px"
|
|
|
+ value-format="YYYY-MM-DD HH:mm:ss"
|
|
|
+ type="datetimerange"
|
|
|
+ range-separator="-"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" icon="Search" size="small" @click="handleQuery">搜索</el-button>
|
|
|
+ <el-button icon="Refresh" size="small" @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" size="small" @click="handleAdd" v-hasPermi="['waterSupply:waterUser:add']">新增</el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button type="danger" plain icon="Delete" size="small" :disabled="multiple" @click="handleDelete" v-hasPermi="['waterSupply:waterUser:remove']">删除</el-button>
|
|
|
+ </el-col>
|
|
|
+ <!-- <el-col :span="1.5">
|
|
|
+ <el-button type="warning" plain icon="Delete" size="small" @click="handleRecycle" v-hasPermi="['waterSupply:waterUser:remove']">回收站</el-button>
|
|
|
+ </el-col> -->
|
|
|
+ <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" />
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <!-- 数据表格 -->
|
|
|
+ <el-table v-loading="loading" :data="tableData" @selection-change="handleSelectionChange">
|
|
|
+ <el-table-column type="selection" width="55" align="center" />
|
|
|
+ <el-table-column label="用户编号" align="center" prop="userCode" :show-overflow-tooltip="true" min-width="120" />
|
|
|
+ <el-table-column label="用户名称" align="center" prop="userName" :show-overflow-tooltip="true" min-width="140" />
|
|
|
+ <el-table-column label="用户类型" align="center" prop="userType" width="100" />
|
|
|
+ <el-table-column label="用水地址" align="center" prop="address" :show-overflow-tooltip="true" min-width="160" />
|
|
|
+ <el-table-column label="联系人" align="center" prop="contactPerson" width="100" />
|
|
|
+ <el-table-column label="联系电话" align="center" prop="contactPhone" width="120" />
|
|
|
+ <el-table-column label="水表编号" align="center" prop="meterNumber" width="120" />
|
|
|
+ <el-table-column label="初始读数(m³)" align="center" prop="initialReading" width="120" />
|
|
|
+ <el-table-column label="当前读数(m³)" align="center" prop="currentReading" width="120" />
|
|
|
+ <el-table-column label="年用水量(m³)" align="center" prop="annualWaterConsumption" width="120" />
|
|
|
+ <el-table-column label="用户状态" align="center" width="100">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-tag :type="statusTagType(row.status)" size="small">{{ statusLabel(row.status) }}</el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="创建时间" align="center" prop="createTime" width="160" />
|
|
|
+ <el-table-column label="操作" align="center" width="180" fixed="right">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-button size="small" type="text" icon="View" @click="handleDetail(row)">详情</el-button>
|
|
|
+ <el-button size="small" type="text" icon="Edit" @click="handleUpdate(row)" v-hasPermi="['waterSupply:waterUser:edit']">修改</el-button>
|
|
|
+ <el-button size="small" type="text" icon="Delete" @click="handleDelete(row)" v-hasPermi="['waterSupply:waterUser:remove']">删除</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="dialogTitle" v-model="dialogVisible" width="750px" append-to-body>
|
|
|
+ <el-form ref="form" :model="form" :rules="rules" label-width="110px">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="用户编号" prop="userCode">
|
|
|
+ <el-input v-model="form.userCode" placeholder="请输入用户编号" maxlength="50" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="用户名称" prop="userName">
|
|
|
+ <el-input v-model="form.userName" placeholder="请输入用户名称" maxlength="100" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="用户类型" prop="userType">
|
|
|
+ <el-select v-model="form.userType" placeholder="请选择用户类型" style="width: 100%">
|
|
|
+ <el-option label="居民" value="居民" />
|
|
|
+ <el-option label="工业" value="工业" />
|
|
|
+ <el-option label="商业" value="商业" />
|
|
|
+ <el-option label="行政事业" value="行政事业" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="用户状态" prop="status">
|
|
|
+ <el-radio-group v-model="form.status">
|
|
|
+ <el-radio label="0">正常</el-radio>
|
|
|
+ <el-radio label="1">欠费</el-radio>
|
|
|
+ <el-radio label="2">停用</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="用水地址" prop="address">
|
|
|
+ <el-input v-model="form.address" placeholder="请输入用水地址" maxlength="200" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="联系人" prop="contactPerson">
|
|
|
+ <el-input v-model="form.contactPerson" placeholder="请输入联系人" maxlength="50" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="联系电话" prop="contactPhone">
|
|
|
+ <el-input v-model="form.contactPhone" placeholder="请输入联系电话" maxlength="20" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="水表编号" prop="meterNumber">
|
|
|
+ <el-input v-model="form.meterNumber" placeholder="请输入水表编号" maxlength="50" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="初始读数(m³)" prop="initialReading">
|
|
|
+ <el-input-number v-model="form.initialReading" :min="0" :precision="2" style="width: 100%" placeholder="请输入初始读数" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="当前读数(m³)" prop="currentReading">
|
|
|
+ <el-input-number v-model="form.currentReading" :min="0" :precision="2" style="width: 100%" placeholder="请输入当前读数" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="年用水量(m³)" prop="annualWaterConsumption">
|
|
|
+ <el-input-number v-model="form.annualWaterConsumption" :min="0" :precision="2" style="width: 100%" placeholder="请输入年用水量" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="备注" prop="remark">
|
|
|
+ <el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入备注" maxlength="500" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <el-button type="primary" @click="submitForm">确 定</el-button>
|
|
|
+ <el-button @click="dialogVisible = false">取 消</el-button>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <!-- 详情对话框 -->
|
|
|
+ <el-dialog title="用水户详情" v-model="detailVisible" width="650px" append-to-body>
|
|
|
+ <el-descriptions :column="2" border>
|
|
|
+ <el-descriptions-item label="用户编号">{{ detailData.userCode }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="用户名称">{{ detailData.userName }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="用户类型">{{ detailData.userType }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="用户状态">
|
|
|
+ <el-tag :type="statusTagType(detailData.status)" size="small">{{ statusLabel(detailData.status) }}</el-tag>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="用水地址" :span="2">{{ detailData.address }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="联系人">{{ detailData.contactPerson }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="联系电话">{{ detailData.contactPhone }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="水表编号">{{ detailData.meterNumber }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="初始读数(m³)">{{ detailData.initialReading }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="当前读数(m³)">{{ detailData.currentReading }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="年用水量(m³)">{{ detailData.annualWaterConsumption }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="备注" :span="2">{{ detailData.remark }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="创建者">{{ detailData.createBy }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="创建时间">{{ detailData.createTime }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="更新者">{{ detailData.updateBy }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="更新时间">{{ detailData.updateTime }}</el-descriptions-item>
|
|
|
+ </el-descriptions>
|
|
|
+ <template #footer>
|
|
|
+ <el-button @click="detailVisible = false">关 闭</el-button>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <!-- 回收站对话框 -->
|
|
|
+ <el-dialog title="回收站" v-model="recycleVisible" width="900px" append-to-body>
|
|
|
+ <el-form :model="recycleQuery" ref="recycleForm" :inline="true" size="small">
|
|
|
+ <el-form-item label="用户编号" prop="userCode">
|
|
|
+ <el-input v-model="recycleQuery.userCode" placeholder="请输入编号" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="用户名称" prop="userName">
|
|
|
+ <el-input v-model="recycleQuery.userName" placeholder="请输入名称" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" icon="Search" @click="getRecycleList">搜索</el-button>
|
|
|
+ <el-button icon="Refresh" @click="resetRecycleQuery">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <el-table v-loading="recycleLoading" :data="recycleData" @selection-change="handleRecycleSelectionChange">
|
|
|
+ <el-table-column type="selection" width="55" align="center" />
|
|
|
+ <el-table-column label="用户编号" align="center" prop="userCode" />
|
|
|
+ <el-table-column label="用户名称" align="center" prop="userName" />
|
|
|
+ <el-table-column label="用户类型" align="center" prop="userType" width="100" />
|
|
|
+ <el-table-column label="用水地址" align="center" prop="address" :show-overflow-tooltip="true" />
|
|
|
+ <el-table-column label="联系电话" align="center" prop="contactPhone" width="120" />
|
|
|
+ <el-table-column label="用户状态" align="center" width="100">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-tag :type="statusTagType(row.status)" size="small">{{ statusLabel(row.status) }}</el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="删除时间" align="center" prop="updateTime" width="160" />
|
|
|
+ <el-table-column label="操作" align="center" width="150">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-button size="small" type="text" icon="RefreshLeft" @click="handleRestore(row)">恢复</el-button>
|
|
|
+ <el-button size="small" type="text" icon="Delete" @click="handleDeletePhysically(row)">
|
|
|
+ <span style="color: #F56C6C">彻底删除</span>
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <pagination v-show="recycleTotal > 0" :total="recycleTotal" v-model:page="recycleQuery.pageNum" v-model:limit="recycleQuery.pageSize" @pagination="getRecycleList" />
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { listWaterUser, getWaterUser, addWaterUser, updateWaterUser, delWaterUser, listRecycleWaterUser, restoreWaterUser, deletePhysicallyWaterUser } from '@/api/pipeNetwork/waterUserInfo'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'WaterUser',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ loading: true,
|
|
|
+ ids: [],
|
|
|
+ single: true,
|
|
|
+ multiple: true,
|
|
|
+ showSearch: true,
|
|
|
+ total: 0,
|
|
|
+ tableData: [],
|
|
|
+ dateRange: [],
|
|
|
+ dialogTitle: '',
|
|
|
+ dialogVisible: false,
|
|
|
+ detailVisible: false,
|
|
|
+ detailData: {},
|
|
|
+ recycleVisible: false,
|
|
|
+ recycleLoading: false,
|
|
|
+ recycleData: [],
|
|
|
+ recycleTotal: 0,
|
|
|
+ recycleIds: [],
|
|
|
+ queryParams: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ userCode: undefined,
|
|
|
+ userName: undefined,
|
|
|
+ userType: undefined,
|
|
|
+ status: undefined
|
|
|
+ },
|
|
|
+ recycleQuery: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ userCode: undefined,
|
|
|
+ userName: undefined
|
|
|
+ },
|
|
|
+ form: {},
|
|
|
+ rules: {
|
|
|
+ userCode: [
|
|
|
+ { required: true, message: '用户编号不能为空', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ userName: [
|
|
|
+ { required: true, message: '用户名称不能为空', trigger: 'blur' }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getList() {
|
|
|
+ this.loading = true
|
|
|
+ listWaterUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
|
|
|
+ this.tableData = response.data.records
|
|
|
+ this.total = response.data.total
|
|
|
+ this.loading = false
|
|
|
+ }).catch(() => {
|
|
|
+ this.loading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ statusTagType(status) {
|
|
|
+ const map = { '0': 'success', '1': 'warning', '2': 'danger' }
|
|
|
+ return map[status] || 'info'
|
|
|
+ },
|
|
|
+ statusLabel(status) {
|
|
|
+ const map = { '0': '正常', '1': '欠费', '2': '停用' }
|
|
|
+ return map[status] || '未知'
|
|
|
+ },
|
|
|
+ handleQuery() {
|
|
|
+ this.queryParams.pageNum = 1
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ resetQuery() {
|
|
|
+ this.dateRange = []
|
|
|
+ this.resetForm('queryForm')
|
|
|
+ this.handleQuery()
|
|
|
+ },
|
|
|
+ handleSelectionChange(selection) {
|
|
|
+ this.ids = selection.map(item => item.id)
|
|
|
+ this.single = selection.length !== 1
|
|
|
+ this.multiple = !selection.length
|
|
|
+ },
|
|
|
+ handleRecycleSelectionChange(selection) {
|
|
|
+ this.recycleIds = selection.map(item => item.id)
|
|
|
+ },
|
|
|
+ handleAdd() {
|
|
|
+ this.reset()
|
|
|
+ this.dialogTitle = '新增用水户信息'
|
|
|
+ this.dialogVisible = true
|
|
|
+ },
|
|
|
+ handleUpdate(row) {
|
|
|
+ this.reset()
|
|
|
+ const id = row.id || this.ids
|
|
|
+ getWaterUser(id).then(response => {
|
|
|
+ this.form = response.data
|
|
|
+ this.dialogTitle = '修改用水户信息'
|
|
|
+ this.dialogVisible = true
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleDetail(row) {
|
|
|
+ getWaterUser(row.id).then(response => {
|
|
|
+ this.detailData = response.data
|
|
|
+ this.detailVisible = true
|
|
|
+ })
|
|
|
+ },
|
|
|
+ submitForm() {
|
|
|
+ this.$refs.form.validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ if (this.form.id != undefined) {
|
|
|
+ updateWaterUser(this.form).then(() => {
|
|
|
+ this.$modal.msgSuccess('修改成功')
|
|
|
+ this.dialogVisible = false
|
|
|
+ this.getList()
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ addWaterUser(this.form).then(() => {
|
|
|
+ this.$modal.msgSuccess('新增成功')
|
|
|
+ this.dialogVisible = false
|
|
|
+ this.getList()
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleDelete(row) {
|
|
|
+ const ids = row.id ? [row.id] : this.ids
|
|
|
+ this.$modal.confirm('是否确认删除用户编号为"' + ids.join(',') + '"的数据项?').then(() => {
|
|
|
+ return delWaterUser(ids.join(','))
|
|
|
+ }).then(() => {
|
|
|
+ this.getList()
|
|
|
+ this.$modal.msgSuccess('删除成功')
|
|
|
+ }).catch(() => {})
|
|
|
+ },
|
|
|
+ handleRecycle() {
|
|
|
+ this.recycleVisible = true
|
|
|
+ this.getRecycleList()
|
|
|
+ },
|
|
|
+ getRecycleList() {
|
|
|
+ this.recycleLoading = true
|
|
|
+ listRecycleWaterUser(this.recycleQuery).then(response => {
|
|
|
+ this.recycleData = response.data.records
|
|
|
+ this.recycleTotal = response.data.total
|
|
|
+ this.recycleLoading = false
|
|
|
+ }).catch(() => {
|
|
|
+ this.recycleLoading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ resetRecycleQuery() {
|
|
|
+ this.resetForm('recycleForm')
|
|
|
+ this.getRecycleList()
|
|
|
+ },
|
|
|
+ handleRestore(row) {
|
|
|
+ const ids = row.id || this.recycleIds
|
|
|
+ this.$modal.confirm('是否确认恢复该数据?').then(() => {
|
|
|
+ return restoreWaterUser(Array.isArray(ids) ? ids.join(',') : ids)
|
|
|
+ }).then(() => {
|
|
|
+ this.getRecycleList()
|
|
|
+ this.getList()
|
|
|
+ this.$modal.msgSuccess('恢复成功')
|
|
|
+ }).catch(() => {})
|
|
|
+ },
|
|
|
+ handleDeletePhysically(row) {
|
|
|
+ const ids = row.id || this.recycleIds
|
|
|
+ this.$modal.confirm('彻底删除后数据不可恢复,是否继续?').then(() => {
|
|
|
+ return deletePhysicallyWaterUser(Array.isArray(ids) ? ids.join(',') : ids)
|
|
|
+ }).then(() => {
|
|
|
+ this.getRecycleList()
|
|
|
+ this.$modal.msgSuccess('彻底删除成功')
|
|
|
+ }).catch(() => {})
|
|
|
+ },
|
|
|
+ reset() {
|
|
|
+ this.form = {
|
|
|
+ status: '0'
|
|
|
+ }
|
|
|
+ this.resetForm('form')
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|