抄表周期及详情

This commit is contained in:
Zy
2026-04-27 11:20:48 +08:00
parent 826b22e206
commit c7e3d9695b
18 changed files with 1086 additions and 287 deletions

View File

@@ -0,0 +1,246 @@
<template>
<div class="AddBuildingBox">
<PageHeader></PageHeader>
<div class="AddBuildingBody">
<div class="title">基本信息</div>
<div class="addBuildingFormBody">
<el-form class="formBody" label-position="right" ref="formRef" :model="form" :rules="rules" label-width="130px">
<el-form-item label="抄表名称" prop="name">
<el-input v-model.trim="form.name" placeholder="请输入抄表名称" />
</el-form-item>
<el-form-item label="抄表设备类型" prop="deviceType">
<el-radio-group v-model="form.deviceType" @change="handlechange">
<el-radio label="电表" value="0"></el-radio>
<el-radio label="水表" value="1"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="抄表项目" prop="payType">
<el-radio-group v-model="form.payType" @change="handlechange2">
<el-radio label="电费" value="0"></el-radio>
<el-radio label="水费" value="1"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="抄表月份" prop="recordMonth">
<el-date-picker v-model="form.recordMonth" :disabled-date="disabledDate" value-format="YYYY-MM" format="YYYY-MM" type="month" />
</el-form-item>
<el-form-item label="起止日期" prop="price">
<el-date-picker
v-model="StartEndDate"
@update:model-value="handleDate"
value-format="YYYY-MM-DD"
format="YYYY-MM-DD"
type="daterange"
range-separator=""
start-placeholder="开始"
:disabled-date="disabledDate"
end-placeholder="结束"
/>
</el-form-item>
<el-form-item style="margin-top: 30px">
<el-button type="primary" @click="submitForm">提交</el-button>
<el-button @click="cancelForm">返回</el-button>
</el-form-item>
</el-form>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import Holder from '@/components/Holder/index.vue';
import PageHeader from '@/components/Pageheader/index.vue';
import { listChargeItem } from '@/api/system/SdbChargeItem';
import { getBill, updateBill, addBill } from '@/api/system/SdbBill';
import type { DatePickerType } from 'element-plus';
import { formatDate, formatDate2 } from '@/utils';
import { Delete } from '@element-plus/icons-vue';
import { func } from 'vue-types';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { com_questionnaire_scope } = toRefs<any>(proxy?.useDict('com_questionnaire_scope'));
const { com_bill_charge_period } = toRefs<any>(proxy?.useDict('com_bill_charge_period'));
const router = useRouter();
const route = useRoute();
const formRef = ref();
const form = ref({
'deviceType': '0', // 设备类型 0电表 1水表
'payType': '0', // 收费项目 0电费 1水费
'name': '测试1', // 项目名称
'recordMonth': '', // 抄表月份
'startTime': '', // 开始时间
'endTime': '' // 结束时间
});
const disabledDate = (time: Date) => {
return time.getTime() > Date.now();
};
// TODO 添加抄表
const rules = ref({
name: [{ required: true, message: '请输入 项目名称', trigger: 'blur' }],
chargeItemId: [{ required: true, message: '请选择 收费项目', trigger: 'blur' }],
chargePeriod: [{ required: true, message: '请选择 费用周期', trigger: 'blur' }],
startDate: [{ required: true, message: '请选择 起止日期', trigger: 'blur' }],
endDate: [{ required: true, message: '请选择 起止日期', trigger: 'blur' }]
});
const userid = ref(null);
// 开始结束日期
const StartEndDate = ref([]);
function handleDate(val: string[]) {
form.value.startTime = val[0];
form.value.endTime = val[1];
}
const chargeitemlist = ref([]);
function init() {
listChargeItem().then((res) => {
chargeitemlist.value = res.rows;
});
if (route.query.id) {
userid.value = route.query.id;
getBill(userid.value).then((res) => {
form.value = {
...form.value,
...res.data
};
});
}
}
init();
function handlechange(val: string) {
form.value.deviceType = val;
form.value.payType = val;
}
function handlechange2(val: string) {
form.value.payType = val;
form.value.deviceType = val;
}
// !== 提交 =============================================================================
// 提交
// TODO 收费项目提交
const submitForm = () => {
formRef.value?.validate(async (valid: boolean) => {
if (valid) {
if (userid.value) {
updateBill(form.value).then((res) => {
ElMessage.success('编辑成功');
cancelForm();
});
} else {
addBill(form.value).then((res) => {
ElMessage.success('添加成功');
cancelForm();
});
}
}
});
};
// 推出
const cancelForm = () => {
router.back();
};
</script>
<style scoped lang="scss">
.AddBuildingBox {
padding: 15px;
height: 100%;
width: 100%;
}
.AddBuildingBody {
margin-top: 20px;
display: flex;
flex-direction: column;
justify-content: center;
background-color: white;
padding: 15px;
.title {
height: 40px;
line-height: 40px;
padding-left: 20px;
background-color: rgba(255, 255, 255, 1);
color: rgba(16, 16, 16, 1);
border-bottom: 1px solid #bbbbbb;
margin-bottom: 60px;
}
.formBody {
width: 650px;
margin: 0 auto;
.residentBox {
max-height: 400px;
overflow-y: auto;
padding: 10px 5px;
}
.checkoutSideUsesbox {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 5px;
li {
display: flex;
align-items: center;
justify-content: space-between;
min-width: 120px;
height: 35px;
padding: 0 10px;
line-height: 35px;
margin-bottom: 10px;
background-color: #f3f9ff;
border: 1px solid #8fc0f1;
@media (max-width: 2000px) {
font-size: 12px;
}
@media (max-width: 1650px) {
font-size: 10px;
}
@media (max-width: 1650px) {
font-size: 8px;
}
.el-icon {
cursor: pointer;
&:hover {
color: red;
}
}
&.add {
cursor: pointer;
justify-content: center;
color: #409eff;
border: 1px dashed #409eff;
background-color: transparent;
&:hover {
background-color: #40a0ff10;
}
span {
margin-left: 10px;
}
}
}
}
&:deep(.el-form-item__content, .el-select, .el-input) {
width: 350px !important;
margin-right: 10px;
.el-cascader {
width: 100%;
}
}
.el-form-item {
margin-bottom: 20px;
align-items: center;
}
.el-button {
width: 80px;
height: 35px;
margin-right: 20px;
}
}
}
</style>

View File

@@ -1,11 +1,12 @@
<template>
<div class="p-2">
<div class="h-full flex flex-col p-2">
<pageheader></pageheader>
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
<div v-show="showSearch" class="mb-[10px]">
<el-card shadow="hover">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item label="仪表名称" prop="houseId">
<el-input v-model="queryParams.houseId" placeholder="请输入房屋id" clearable @keyup.enter="handleQuery" />
<el-input v-model="queryParams.houseId" placeholder="请输入仪表名称" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
@@ -16,17 +17,12 @@
</div>
</transition>
<el-card shadow="never">
<el-card class="flex-1" shadow="never">
<template #header>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['payRecord:payRecord:add']">新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['payRecord:payRecord:edit']"
>修改</el-button
>
</el-col>
<el-col :span="1.5">
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['payRecord:payRecord:remove']"
>删除</el-button
@@ -38,18 +34,15 @@
<el-table v-loading="loading" border :data="payRecordList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="设备类型" align="center" prop="deviceType">
<template #default="scope">
<dict-tag :options="com_waterelectricity_topup_type" :value="scope.row.deviceType"></dict-tag>
</template>
<el-table-column label="仪表名称" align="center" prop="name">
<template #default="scope">{{ scope.row.name }} </template>
</el-table-column>
<el-table-column label="房屋id" align="center" prop="houseId" />
<el-table-column label="收费项目" align="center" prop="payType">
<template #default="scope">
<dict-tag :options="com_payrecord_pay_type" :value="scope.row.payType"></dict-tag>
</template>
</el-table-column>
<el-table-column label="抄表月份" align="center" prop="recordMonth" width="180">
<el-table-column label="抄表周期" align="center" prop="recordMonth" width="180">
<template #default="scope">
<span>{{ parseTime(scope.row.recordMonth, '{y}-{m}-{d}') }}</span>
</template>
@@ -64,46 +57,21 @@
<span>{{ parseTime(scope.row.endTime, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column label="创建时间" align="center" prop="recordMonth" width="180">
<template #default="scope">
<span>{{ parseTime(scope.row.recordMonth, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
<template #default="scope">
<el-tooltip content="修改" placement="top">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['payRecord:payRecord:edit']"></el-button>
</el-tooltip>
<el-tooltip content="删除" placement="top">
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['payRecord:payRecord:remove']"></el-button>
</el-tooltip>
<el-button link type="primary" icon="Edit" @click="handleMain(scope.row)" v-hasPermi="['payRecord:payRecord:edit']">明细</el-button>
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['payRecord:payRecord: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-card>
<!-- 添加或修改 抄表周期管理对话框 -->
<el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
<el-form ref="payRecordFormRef" :model="form" :rules="rules" label-width="80px">
<el-form-item label="房屋id" prop="houseId">
<el-input v-model="form.houseId" placeholder="请输入房屋id" />
</el-form-item>
<el-form-item label="抄表月份" prop="recordMonth">
<el-date-picker clearable v-model="form.recordMonth" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择抄表月份">
</el-date-picker>
</el-form-item>
<el-form-item label="开始日期" prop="startTime">
<el-date-picker clearable v-model="form.startTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择开始日期">
</el-date-picker>
</el-form-item>
<el-form-item label="结束日期" prop="endTime">
<el-date-picker clearable v-model="form.endTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择结束日期">
</el-date-picker>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button :loading="buttonLoading" type="primary" @click="submitForm"> </el-button>
<el-button @click="cancel"> </el-button>
</div>
</template>
</el-dialog>
</div>
</template>
@@ -153,13 +121,10 @@ const data = reactive<PageData<PayRecordForm, PayRecordQuery>>({
startTime: undefined,
endTime: undefined,
params: {}
},
rules: {
id: [{ required: true, message: '抄表周期管理表id不能为空', trigger: 'blur' }]
}
});
const { queryParams, form, rules } = toRefs(data);
const { queryParams, form } = toRefs(data);
/** 查询 抄表周期管理列表 */
const getList = async () => {
@@ -170,18 +135,6 @@ const getList = async () => {
loading.value = false;
};
/** 取消按钮 */
const cancel = () => {
reset();
dialog.visible = false;
};
/** 表单重置 */
const reset = () => {
form.value = { ...initFormData };
payRecordFormRef.value?.resetFields();
};
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.value.pageNum = 1;
@@ -201,61 +154,40 @@ const handleSelectionChange = (selection: PayRecordVO[]) => {
multiple.value = !selection.length;
};
const router = useRouter();
/** 新增按钮操作 */
const handleAdd = () => {
reset();
dialog.visible = true;
dialog.title = '添加 抄表周期管理';
};
/** 修改按钮操作 */
const handleUpdate = async (row?: PayRecordVO) => {
reset();
const _id = row?.id || ids.value[0];
const res = await getPayRecord(_id);
Object.assign(form.value, res.data);
dialog.visible = true;
dialog.title = '修改 抄表周期管理';
};
/** 提交按钮 */
const submitForm = () => {
payRecordFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
buttonLoading.value = true;
if (form.value.id) {
await updatePayRecord(form.value).finally(() => (buttonLoading.value = false));
} else {
await addPayRecord(form.value).finally(() => (buttonLoading.value = false));
}
proxy?.$modal.msgSuccess('操作成功');
dialog.visible = false;
await getList();
}
router.push({
path: '/sdb/addPayRecord'
});
};
/** 修改按钮操作 */
const handleMain = async (row?: PayRecordVO) => {
router.push({
path: '/sdb/PayRecordMain',
query: {
id: row?.id
}
});
};
// TODO 抄表名称
/** 删除按钮操作 */
const handleDelete = async (row?: PayRecordVO) => {
const _ids = row?.id || ids.value;
await proxy?.$modal.confirm('是否确认删除 抄表周期管理编号为"' + _ids + '"的数据项').finally(() => (loading.value = false));
await proxy?.$modal.confirm('是否确认删除抄表周期?').finally(() => (loading.value = false));
await delPayRecord(_ids);
proxy?.$modal.msgSuccess('删除成功');
await getList();
};
/** 导出按钮操作 */
const handleExport = () => {
proxy?.download(
'payRecord/payRecord/export',
{
...queryParams.value
},
`payRecord_${new Date().getTime()}.xlsx`
);
};
onMounted(() => {
getList();
});
</script>
<style scoped lang="scss">
.el-table {
height: calc(100% - 80px);
}
</style>

View File

@@ -0,0 +1,303 @@
<template>
<div class="p-2 h-full flex flex-col">
<pageheader></pageheader>
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
<div v-show="showSearch" class="mb-[10px]">
<el-card shadow="hover">
<div class="flex flex-items-center justify-between">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item label="精准查询">
<el-select v-model="queryParamsType" style="width: 160px; margin-right: 20px">
<el-option v-for="item in deviceCodeList" :key="item.value" :label="item.name" :value="item.value"></el-option>
</el-select>
<el-input v-model="queryParamsValue" placeholder="请输入" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-button @click="confimu">返回</el-button>
</div>
</el-card>
</div>
</transition>
<el-card class="flex-1" shadow="never">
<template #header>
<el-row :gutter="10" class="mb8">
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
</template>
<el-table v-loading="loading" border :data="payRecordListList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="房间号" align="center" prop="houseName" />
<el-table-column label="仪表名称" align="center" prop="payType" />
<el-table-column label="收费项目" align="center" prop="payType">
<template #default="scope">
<dict-tag :options="com_payrecord_pay_type" :value="scope.row.payType"></dict-tag>
</template>
</el-table-column>
<el-table-column label="抄表月份" align="center" prop="recordMonth" width="180">
<template #default="scope">
<span>{{ parseTime(scope.row.recordMonth, '{y}-{m}') }}</span>
</template>
</el-table-column>
<el-table-column label="开始时间" align="center" prop="startTime" width="180">
<template #default="scope">
<span>{{ parseTime(scope.row.startTime, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column label="结束时间" align="center" prop="endTime" width="180">
<template #default="scope">
<span>{{ parseTime(scope.row.endTime, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column label="本期用度" align="center" prop="currentCost" />
<el-table-column label="费用合计(元)" align="center" prop="totalCost" />
<el-table-column label="设备编号" align="center" prop="deviceCode" />
<el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
<template #default="scope">
<el-button link type="primary" @click="handleUpdate(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="getList" />
</el-card>
<!-- 添加或修改抄表周期明细对话框 -->
<el-dialog :title="dialog.title" v-model="dialog.visible" width="800px" append-to-body>
<el-form ref="payRecordListFormRef" :model="form" label-position="left">
<el-row>
<el-col :span="12">
<el-form-item label="抄表小区:" prop="recordId">
{{ form.villageName }}
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="房屋号码:" prop="houseName"> {{ form.houseName }}</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="住户姓名:" prop="recordId">
{{ form.residentName }}
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="住户编号:" prop="residentCode"> {{ form.residentCode }}</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="住户性别:" prop="recordId">
{{ form.gender === '1' ? '男' : '女' }}
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="手机号码:" prop="residentCode"> {{ form.phone }}</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="收费项目:" prop="recordId">
<dict-tag :options="com_payrecord_pay_type" :value="form.payType"></dict-tag>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="抄表月份:" prop="residentCode"> {{ form.recordMonth }}</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="收费起止日期:" prop="recordId">
{{ parseTime(form.startTime, '{y}-{m}-{d}') }} -- {{ parseTime(form.endTime, '{y}-{m}-{d}') }}
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="起始读数:" prop="startRead"> {{ form.startRead }} </el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="终止读数:" prop="endRead"> {{ form.endRead }}</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="本期用度:" prop="startRead"> {{ form.currentCost }} </el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="单价:" prop="price"> {{ form.price }} /</el-form-item>
</el-col>
</el-row>
<el-form-item label="费用合计:" prop="totalCost"> {{ form.totalCost }} </el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="cancel"> </el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup name="PayRecordList" lang="ts">
import { listPayRecordList, getPayRecordList, delPayRecordList, addPayRecordList, updatePayRecordList } from '@/api/system/SdbPayRecordMain/index';
import { PayRecordListVO, PayRecordListQuery, PayRecordListForm } from '@/api/system/SdbPayRecordMain/type';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { com_payrecord_pay_type } = toRefs<any>(proxy?.useDict('com_payrecord_pay_type'));
const payRecordListList = ref<PayRecordListVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const router = useRouter();
const queryFormRef = ref<ElFormInstance>();
const payRecordListFormRef = ref<ElFormInstance>();
const dialog = reactive<DialogOption>({
visible: false,
title: ''
});
const initFormData: PayRecordListForm = {
id: undefined,
recordId: undefined,
housenumname: undefined,
payType: undefined,
recordMonth: undefined,
startTime: undefined,
endTime: undefined,
currentCost: undefined,
totalCost: undefined,
deviceCode: undefined,
deviceType: undefined,
villageName: undefined,
houseName: undefined,
residentName: undefined,
gender: undefined,
phone: undefined,
startRead: undefined,
endRead: undefined,
price: undefined,
residentCode: undefined
};
const data = reactive<PageData<PayRecordListForm, PayRecordListQuery>>({
form: { ...initFormData },
queryParams: {
pageNum: 1,
pageSize: 10,
residentName: undefined,
houseName: undefined,
paycordName: undefined
}
});
const queryParamsType = ref('houseName');
const queryParamsValue = ref('');
const deviceCodeList = [
{
name: '房屋号',
value: 'houseName'
},
{
name: '住户姓名',
value: 'residentName'
},
{
name: '仪表名称',
value: 'paycordName'
}
];
const { queryParams, form } = toRefs(data);
/** 查询抄表周期明细列表 */
const getList = async () => {
loading.value = true;
const res = await listPayRecordList(queryParams.value);
payRecordListList.value = res.rows;
total.value = res.total;
loading.value = false;
};
/** 取消按钮 */
const cancel = () => {
reset();
dialog.visible = false;
};
/** 表单重置 */
const reset = () => {
form.value = { ...initFormData };
payRecordListFormRef.value?.resetFields();
};
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.value.pageNum = 1;
queryParams.value[queryParamsType.value] = queryParamsValue.value;
getList();
};
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value?.resetFields();
queryParams.value = {
pageNum: 1,
pageSize: 10,
residentName: undefined,
houseName: undefined,
paycordName: undefined
};
queryParamsType.value = 'houseName';
queryParamsValue.value = '';
handleQuery();
};
/** 修改按钮操作 */
const handleUpdate = async (row?: PayRecordListVO) => {
reset();
const _id = row?.id || ids.value[0];
const res = await getPayRecordList(_id);
Object.assign(form.value, res.data);
console.log(res.data);
dialog.visible = true;
dialog.title = '抄表详细';
};
/** 提交按钮 */
const submitForm = () => {
payRecordListFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
buttonLoading.value = true;
if (form.value.id) {
await updatePayRecordList(form.value).finally(() => (buttonLoading.value = false));
} else {
await addPayRecordList(form.value).finally(() => (buttonLoading.value = false));
}
proxy?.$modal.msgSuccess('操作成功');
dialog.visible = false;
await getList();
}
});
};
const confimu = () => {
router.back();
};
onMounted(() => {
getList();
});
</script>
<style lang="scss" scoped>
.el-table {
height: calc(100% - 80px);
}
</style>

View File

@@ -29,7 +29,7 @@
<template #header>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" plain icon="Plus" @click="handleMain" v-hasPermi="['system:bill:add']">新增</el-button>
<el-button type="primary" plain icon="Plus" @click="handleMain" v-hasPermi="['system:bill:add']">详情</el-button>
<el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:bill:add']">新增</el-button>
</el-col>
<el-col :span="1.5">
@@ -191,6 +191,7 @@ const handleSelectionChange = (selection: BillVO[]) => {
};
const router = useRouter();
// TODO 添加账单
/** 新增按钮操作 */
const handleAdd = () => {
router.push({

View File

@@ -0,0 +1,9 @@
<template>
<div class=" "></div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
</script>
<style scoped lang="scss"></style>

View File

@@ -92,7 +92,7 @@
<span>{{ scope.row.waterRecord ? scope.row.waterRecord.readTime : '--' }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
<!-- <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
<template #default="scope">
<el-button link type="primary" @click="handleRecode(scope.row)">充值记录</el-button>
<el-button link type="primary" @click="handleQrCode(scope.row)">生成条码</el-button>
@@ -102,6 +102,36 @@
>修改</el-button
>
</template>
</el-table-column> -->
<el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
<template #default="scope">
<el-row>
<el-col :span="24" class="flex flex-items-center">
<el-button link type="primary" @click="handleRecode(scope.row)">充值记录</el-button>
<el-button link type="primary" @click="handleQrCode(scope.row)">生成条码</el-button>
<el-dropdown style="vertical-align: text-top">
<el-button link type="primary">
<div>
更多<el-icon><arrow-down /></el-icon>
</div>
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>
<div @click="handleOpenDialog('usedWater', scope.row)">用电量</div>
</el-dropdown-item>
<el-dropdown-item>
<div @click="handleOpenDialog('Upload', scope.row)">更新固件</div>
</el-dropdown-item>
<el-dropdown-item>
<div @click="handleOpenDialog('UpdateHouse', scope.row)" v-hasPermi="['system:waterDevice:edit']">修改</div>
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</el-col>
</el-row>
</template>
</el-table-column>
</el-table>
@@ -110,7 +140,7 @@
<!-- 添加或修改电 设备对话框 -->
<el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
<el-form v-if="dialogType === 'usedWater'" ref="UsedWaterformRef" :model="UsedWaterform" label-width="100px">
<el-form-item label="设备编号" prop="deviceCode"> {{ UsedWaterform.deviceCode }} </el-form-item>
<el-form-item label="设备编号" prop="deviceCode"> {{ UsedWaterform.deviceCode }} </el-form-item>
<el-form-item label="开始时间" prop="startTime">
<el-date-picker
format="YYYY-MM-DD HH:MM:ss"
@@ -159,7 +189,7 @@
</el-upload>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="unSubmit">取消</el-button>
<el-button @click="unSubmit">取消</el-button>
<el-button :loading="buttonLoading" type="primary" @click="submitForm">更新到设备</el-button>
</el-form-item>
</el-form>
@@ -168,7 +198,7 @@
<el-cascader v-model="userHousepath" :options="treedata" @change="handleChange" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="unSubmit">取消</el-button>
<el-button @click="unSubmit">取消</el-button>
<el-button :loading="buttonLoading" type="primary" @click="submitForm">更新到设备</el-button>
</el-form-item>
</el-form>
@@ -258,6 +288,7 @@ const UsedWaterInfo = ref({
// ? 上传固件 ==============================================================================================
const UploadFileformRef = ref(null);
const uploadRef = ref(null);
const UploadFileform = ref({
id: '',
deviceCode: '',
@@ -336,6 +367,7 @@ const handleSelectionChange = (selection: ElectricityDeviceVO[]) => {
multiple.value = !selection.length;
};
// TODO 生成条码
/** 生成二维码 */
const handleQrCode = (row: ElectricityDeviceVO) => {
// 1.电表 2.电表
@@ -392,15 +424,9 @@ function getTree() {
}
/** 电表 启停*/
// TODO 修改水电表 启停
const handleChangeWater = (val: string, row: ElectricityDeviceVO) => {};
/** 编辑房屋 按钮操作 */
const handleUpdate = async (row?: ElectricityDeviceVO) => {
reset();
dialog.visible = true;
dialog.title = '编辑房屋';
};
// TODO 修改电表户号
/** 提交按钮 */
const submitForm = () => {
if (dialogType.value === 'usedWater') {
@@ -434,6 +460,7 @@ const unSubmit = () => {
reset();
dialog.visible = false;
dialog.title = '';
uploadRef?.value.clearFiles();
};
/** 表单重置 */
const reset = () => {
@@ -449,8 +476,11 @@ const reset = () => {
endTime: ''
};
EditHouseform.value = {
houseid: ''
houseId: '',
deviceCode: '',
id: ''
};
UploadFileform.value.file = '';
// 上传 清空
UploadFileformRef.value?.resetFields();
// 使用电量 清空
@@ -472,6 +502,8 @@ const resetQuery = () => {
};
const router = useRouter();
// TODO 充值记录 查询
/** 充值记录 */
const handleRecode = (row: ElectricityDeviceVO) => {
// 1.电表 2.电表
@@ -480,6 +512,7 @@ const handleRecode = (row: ElectricityDeviceVO) => {
query: {
type: '2',
houseName: row.houseName,
deviceCode: row.deviceCode,
id: row.id
}
});

View File

@@ -136,7 +136,7 @@
<el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
<!-- water -->
<el-form v-if="dialogType === 'usedWater'" ref="UsedWaterformRef" :model="UsedWaterform" label-width="100px">
<el-form-item label="设备编号" prop="deviceCode"> {{ UsedWaterform.deviceCode }} </el-form-item>
<el-form-item label="设备编号" prop="deviceCode"> {{ UsedWaterform.deviceCode }} </el-form-item>
<el-form-item label="开始时间" prop="startTime">
<el-date-picker
format="YYYY-MM-DD HH:MM:ss"
@@ -160,7 +160,7 @@
</el-form-item>
</el-form>
<!-- upload file -->
<el-form v-else-if="dialogType === 'Upload'" ref="UploadFileformRef" :model="UploadFileform" :rules="UploadFileformRules" label-width="100px">
<el-form v-else-if="dialogType === 'Upload'" ref="UploadFileformRef" :model="UploadFileform" :rules="UploadFileformRules" label-width="120px">
<el-form-item label="上传更新文件" prop="file">
<el-upload
ref="uploadRef"
@@ -185,7 +185,7 @@
</el-upload>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="unSubmit">取消</el-button>
<el-button @click="unSubmit">取消</el-button>
<el-button :loading="buttonLoading" type="primary" @click="submitForm">更新到设备</el-button>
</el-form-item>
</el-form>
@@ -195,7 +195,7 @@
<el-cascader v-model="userHousepath" :options="treedata" @change="handleChange" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="unSubmit">取消</el-button>
<el-button @click="unSubmit">取消</el-button>
<el-button :loading="buttonLoading" type="primary" @click="submitForm">更新到设备</el-button>
</el-form-item>
</el-form>