5.1日 暂定 水电表管理

This commit is contained in:
Zy
2026-05-01 18:36:37 +08:00
parent 7b89144dd4
commit a8bb4e66ad
103 changed files with 1071 additions and 533 deletions

View File

@@ -118,8 +118,6 @@ if (route.query.id) {
}
// !== 提交 =============================================================================
// 提交
// TODO 收费项目提交
const submitForm = () => {
formRef.value?.validate(async (valid: boolean) => {
if (valid) {

View File

@@ -5,8 +5,8 @@
<div v-show="showSearch" class="mb-[10px]">
<el-card shadow="hover">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item label="项目名称" prop="name">
<el-input v-model="queryParams.name" placeholder="请输入项目名称" clearable @keyup.enter="handleQuery" />
<el-form-item label="项目名称" prop="itemName">
<el-input v-model="queryParams.itemName" placeholder="请输入项目名称" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
@@ -21,10 +21,10 @@
<template #header>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['chargeItem:chargeItem:add']">新增</el-button>
<el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['sdb:add:chargeitem']">新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['chargeItem:chargeItem:edit']"
<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['sdb:edit:chargeitem']"
>修改</el-button
>
</el-col>
@@ -85,7 +85,7 @@
</el-table-column>
<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)" v-hasPermi="['chargeItem:chargeItem:edit']">修改</el-button>
<el-button link type="primary" @click="handleUpdate(scope.row)" v-hasPermi="['sdb:edit:chargeitem']">修改</el-button>
<el-button link type="primary" @click="handleDelete(scope.row)" v-hasPermi="['chargeItem:chargeItem:remove']">删除</el-button>
</template>
</el-table-column>
@@ -126,34 +126,16 @@ const dialog = reactive<DialogOption>({
const initFormData: ChargeItemForm = {
id: undefined,
name: undefined,
billingMethod: undefined,
price: undefined,
unit: undefined,
precision: undefined,
carryMethod: undefined,
lateFee: undefined,
remark: undefined,
villageId: undefined
itemName: undefined
};
const data = reactive<PageData<ChargeItemForm, ChargeItemQuery>>({
form: { ...initFormData },
queryParams: {
pageNum: 1,
pageSize: 10,
name: undefined,
billingMethod: undefined,
price: undefined,
unit: undefined,
precision: undefined,
carryMethod: undefined,
lateFee: undefined,
villageId: undefined,
params: {}
itemName: undefined
},
rules: {
id: [{ required: true, message: '收费项目管理表id不能为空', trigger: 'blur' }]
}
rules: {}
});
const { queryParams, form, rules } = toRefs(data);
@@ -217,7 +199,6 @@ const handleUpdate = async (row?: ChargeItemVO) => {
};
const handleSwitch = (val: string, row: ChargeItemVO) => {
console.log(val, typeof val, row);
// 1停用 0 启用
updateChargeItem({
id: row.id,

View File

@@ -5,23 +5,19 @@
<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-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 label="电表" value="1"></el-radio>
<el-radio label="水表" value="2"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="抄表项目" prop="payType">
<!-- <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 v-for="(item, index) in chargeitemlist" :key="index" :label="item.itemName" :value="item.id"></el-radio>
</el-radio-group>
</el-form-item>
</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-date-picker @update:model-value="handleMonth" v-model="form.recordMonth" value-format="YYYY-MM" format="YYYY-MM" type="month" />
</el-form-item>
<el-form-item label="起止日期" prop="price">
<el-date-picker
@@ -29,10 +25,10 @@
@update:model-value="handleDate"
value-format="YYYY-MM-DD"
format="YYYY-MM-DD"
:disabled-date="disabledDate"
type="daterange"
range-separator=""
start-placeholder="开始"
:disabled-date="disabledDate"
end-placeholder="结束"
/>
</el-form-item>
@@ -48,39 +44,23 @@
<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';
import { addPayRecord, getPayRecord, updatePayRecord } from '@/api/system/SdbPayRecord';
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', // 项目名称
'deviceType': '1', // 设备类型 1电表 2水表
'payType': '1', // 设备类型 1电表 2水表
'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' }]
});
@@ -88,18 +68,58 @@ const userid = ref(null);
// 开始结束日期
const StartEndDate = ref([]);
function handleDate(val: string[]) {
form.value.startTime = val[0];
form.value.endTime = val[1];
if (val) {
form.value.startTime = val[0];
form.value.endTime = val[1];
} else {
form.value.endTime = '';
form.value.startTime = '';
}
}
const chargeitemlist = ref([]);
// 限制日期区间
const chooseStart = ref<Date | null>(null);
const chooseEnd = ref<Date | null>(null);
// =====================================
// 月份选择后触发修复时区BUG版
// =====================================
function handleMonth(val: string) {
form.value.recordMonth = val;
if (!val) {
chooseStart.value = null;
chooseEnd.value = null;
return;
}
// ✅ 修复时区问题:强制解析为本地时间
const [year, month] = val.split('-');
const firstDay = new Date(Number(year), Number(month) - 1, 1); // 当月1号
const lastDay = new Date(Number(year), Number(month), 0); // 当月最后1天
chooseStart.value = firstDay;
chooseEnd.value = lastDay;
}
// =====================================
// 日期禁用逻辑(正确版)
// =====================================
const disabledDate = (time: Date) => {
if (!chooseStart.value || !chooseEnd.value) return false;
// 不在 [当月1号 ~ 当月最后1号] 之间 → 禁用
return time < chooseStart.value || time > chooseEnd.value;
};
// const chargeitemlist = ref([]);
function init() {
listChargeItem().then((res) => {
chargeitemlist.value = res.rows;
});
// listChargeItem().then((res) => {
// chargeitemlist.value = res.rows;
// });
if (route.query.id) {
userid.value = route.query.id;
getBill(userid.value).then((res) => {
getPayRecord(userid.value).then((res) => {
form.value = {
...form.value,
...res.data
@@ -114,26 +134,19 @@ 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 = () => {
form.value.startTime = form.value.startTime.split(' ')[0] + ' 00:00:00';
form.value.endTime = form.value.endTime.split(' ')[0] + ' 23:59:59';
formRef.value?.validate(async (valid: boolean) => {
if (valid) {
if (userid.value) {
updateBill(form.value).then((res) => {
updatePayRecord(form.value).then((res) => {
ElMessage.success('编辑成功');
cancelForm();
});
} else {
addBill(form.value).then((res) => {
addPayRecord(form.value).then((res) => {
ElMessage.success('添加成功');
cancelForm();
});

View File

@@ -21,7 +21,7 @@
<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-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['sdb:add:payrecord']">新增</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']"
@@ -34,17 +34,19 @@
<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="name">
<template #default="scope">{{ scope.row.name }} </template>
<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>
<el-table-column label="收费项目" align="center" prop="payType">
<template #default="scope">
<dict-tag :options="com_payrecord_pay_type" :value="scope.row.payType"></dict-tag>
<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}-{d}') }}</span>
<span>{{ parseTime(scope.row.recordMonth, '{y}-{m}') }}</span>
</template>
</el-table-column>
<el-table-column label="开始日期" align="center" prop="startTime" width="180">
@@ -64,8 +66,8 @@
</el-table-column>
<el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
<template #default="scope">
<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>
<el-button link type="primary" @click="handleMain(scope.row)" v-hasPermi="['sdb:main:payrecord']">明细</el-button>
<el-button link type="primary" @click="handleDelete(scope.row)" v-hasPermi="['payRecord:payRecord:remove']">删除</el-button>
</template>
</el-table-column>
</el-table>
@@ -171,7 +173,6 @@ const handleMain = async (row?: PayRecordVO) => {
}
});
};
// TODO 抄表名称
/** 删除按钮操作 */
const handleDelete = async (row?: PayRecordVO) => {
const _ids = row?.id || ids.value;

View File

@@ -267,7 +267,6 @@ const handleUpdate = async (row?: PayRecordListVO) => {
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 = '抄表详细';
};

View File

@@ -5,39 +5,42 @@
<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 label="账单名称" prop="billName">
<el-input v-model.trim="form.billName" placeholder="请输入账单名称" />
</el-form-item>
<el-form-item label="收费项目" prop="chargeItemId">
<el-select v-model="form.chargeItemId">
<el-select v-model="form.chargeItemId" @change="handleChange">
<el-option v-for="(item, index) in chargeitemlist" :key="index" :value="item.id" :label="item.itemName"></el-option>
</el-select>
</el-form-item>
<el-form-item label="收费范围" prop="chargeScope">
<el-radio-group v-model="form.chargeScope">
<el-radio v-for="(item, index) in com_questionnaire_scope" :key="index" :value="item.value" :label="item.label"></el-radio>
<el-radio v-for="(item, index) in com_bill_charge_scope_house" :key="index" :value="item.value" :label="item.label"></el-radio>
</el-radio-group>
<div @click="() => handleClearCheckout" v-if="form.chargeScope === '1'" class="ml-10px cursor-pointer color-red">清空</div>
<div @click="handleClearCheckout" v-if="form.chargeScope === '1'" class="ml-10px cursor-pointer color-red">清空</div>
</el-form-item>
<el-form-item v-if="form.chargeScope === '1'">
<div class="residentBox">
<ul class="checkoutSideUsesbox">
<li v-for="(item, index) in checkoutUses" :key="index">
<span>{{ item.name }}</span>
<el-icon @click="delteUse(item.id)">
<span>{{ item.buildingName }}/</span>
<span>{{ item.unitNo }}单元/</span>
<span>{{ item.floorNo }}/</span>
<span>{{ item.houseNo }}</span>
<el-icon @click="delteUse(item.houseId)">
<Delete></Delete>
</el-icon>
</li>
<Holder returnvalue="*" ref="HolderRef" :isMultiple="true" :userid="checkoutUses" @change="handleSelect">
<House returnvalue="*" ref="HolderRef" :isMultiple="true" :userid="form.houseIds.join(',')" @change="handleSelect">
<template #default>
<li @click="OpenUseTablesfun" class="add justify-center">
<el-icon>
<DocumentAdd></DocumentAdd>
</el-icon>
<span>添加业主</span>
<span>添加房屋</span>
</li>
</template>
</Holder>
</House>
</ul>
</div>
</el-form-item>
@@ -74,16 +77,16 @@
<script setup lang="ts">
import { ref } from 'vue';
import Holder from '@/components/Holder/index.vue';
import House from '@/components/Holder/house.vue';
import PageHeader from '@/components/Pageheader/index.vue';
import { listChargeItem } from '@/api/system/SdbChargeItem';
import { getBill, updateBill, addBill } from '@/api/system/SdbBill';
import { getBill, updateBill, addBill, BillHouse, listBillHouse } from '@/api/system/SdbBill';
import type { DatePickerType } from 'element-plus';
import { formatDate, formatDate2 } from '@/utils';
import { Delete } from '@element-plus/icons-vue';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { com_questionnaire_scope } = toRefs<any>(proxy?.useDict('com_questionnaire_scope'));
const { com_bill_charge_scope_house } = toRefs<any>(proxy?.useDict('com_bill_charge_scope_house'));
const { com_bill_charge_period } = toRefs<any>(proxy?.useDict('com_bill_charge_period'));
type PickerConfig = {
@@ -101,19 +104,18 @@ const route = useRoute();
const formRef = ref();
const form = ref({
'id': null,
'name': '',
'billName': '',
'chargeItemId': '', // 收费项目
'chargeScope': '0', // 业主范围
'chargePeriod': '2', // 费用周期
residents: '', // 部分业主
houseIds: [], // 部分业主
charegeTypeId: '', // typeid
'startDate': '', // 开始
'endDate': '', // 结束
'remark': ''
});
// TODO 添加账单
// TODO 账单详情
const rules = ref({
name: [{ required: true, message: '请输入 项目名称', trigger: 'blur' }],
billName: [{ required: true, message: '请输入 项目名称', trigger: 'blur' }],
chargeItemId: [{ required: true, message: '请选择 收费项目', trigger: 'blur' }],
chargePeriod: [{ required: true, message: '请选择 费用周期', trigger: 'blur' }],
startDate: [{ required: true, message: '请选择 起止日期', trigger: 'blur' }],
@@ -126,13 +128,21 @@ const StartEndDate = ref([]);
function handleDate(val: string[]) {
form.value.startDate = formatDate2(val[0]);
form.value.endDate = formatDate2(val[1]);
console.log(formatDate2(val[0]), formatDate2(val[1]));
}
// 收费类型
const chargeitemlist = ref([]);
function init() {
// 房屋列表
const houselist = ref([]);
async function init() {
listChargeItem().then((res) => {
chargeitemlist.value = res.rows;
});
const res = await listBillHouse({ pageNum: 1, pageSize: 999999 });
houselist.value = res.rows;
if (route.query.id) {
userid.value = route.query.id;
getBill(userid.value).then((res) => {
@@ -140,38 +150,65 @@ function init() {
...form.value,
...res.data
};
form.value.houseIds = res.data.houseIds || [];
form.value.startDate = formatDate2(form.value.startDate);
form.value.endDate = formatDate2(form.value.endDate);
StartEndDate.value = [form.value.startDate, form.value.endDate];
checkoutUses.value = form.value.houseIds
.map((item) => {
if (item) {
const find = houselist.value.find((it) => it.houseId === item);
if (find) {
return find;
} else {
return null;
}
}
})
.filter((item) => item !== null);
});
}
}
init();
onMounted(() => {
init();
});
// 获取收费类型id
function handleChange(val) {
const find = chargeitemlist.value.find((item) => item.id === val);
if (find) {
form.value.charegeTypeId = find.typeId;
}
}
// !== 业主 =============================================================================
// 打开
const HolderRef = ref<InstanceType<typeof Holder>>();
const HolderRef = ref<InstanceType<typeof House>>();
function OpenUseTablesfun() {
HolderRef.value.open();
}
// 多选
const checkoutUses = ref([]);
function handleSelect(val) {
const checkoutUses = ref<BillHouse[]>([]);
function handleSelect(val: BillHouse[]) {
checkoutUses.value = val;
form.value.residents = checkoutUses.value.join(',');
form.value.houseIds = checkoutUses.value.map((item) => item.houseId);
}
// 删除
/** 删除房屋 */
function delteUse(id: string | number) {
checkoutUses.value = checkoutUses.value.filter((item) => item.id !== id);
checkoutUses.value = checkoutUses.value.filter((item) => item.houseId !== id);
}
/** 清空 */
function handleClearCheckout() {
checkoutUses.value = [];
form.value.residents = '';
form.value.houseIds = [];
}
// !== 业主 =============================================================================
// !== 提交 =============================================================================
// 提交
// TODO 收费项目提交
const submitForm = () => {
formRef.value?.validate(async (valid: boolean) => {
if (valid) {
@@ -219,7 +256,7 @@ const cancelForm = () => {
}
.formBody {
width: 650px;
width: 950px;
margin: 0 auto;
.residentBox {
@@ -228,21 +265,31 @@ const cancelForm = () => {
padding: 10px 5px;
}
.checkoutSideUsesbox {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 5px;
// display: grid;
// grid-template-columns: repeat(3, 1fr);
// gap: 5px;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
justify-content: space-between;
padding: 10px 5px;
li {
margin-right: 10px;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: space-between;
min-width: 120px;
min-width: 240px;
height: 35px;
padding: 0 10px;
line-height: 35px;
margin-bottom: 10px;
background-color: #f3f9ff;
border: 1px solid #8fc0f1;
margin-bottom: 10px;
@media (max-width: 2000px) {
font-size: 12px;
}
@@ -253,6 +300,7 @@ const cancelForm = () => {
font-size: 8px;
}
.el-icon {
margin-left: 20px;
cursor: pointer;
&:hover {
color: red;

View File

@@ -10,12 +10,12 @@
<el-option v-for="(item, index) in chargeItems" :key="index" :value="item.id" :label="item.itemName"></el-option>
</el-select>
</el-form-item>
<el-form-item label="精确查询" prop="type">
<!-- <el-form-item label="精确查询" prop="type">
<el-select style="width: 150px; margin-right: 10px" v-model="queryParams.type">
<el-option v-for="(item, index) in com_bill_search_filter" :key="index" :value="item.value" :label="item.label"></el-option>
</el-select>
<el-input v-model="queryParams.billCode" placeholder="请输入" clearable @keyup.enter="handleQuery" />
</el-form-item>
</el-form-item> -->
<el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
@@ -29,10 +29,10 @@
<template #header>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:bill:add']">新增</el-button>
<el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['bill:bill:add']">新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['system:bill:edit']">修改</el-button>
<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['bill:bill:edit']">修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['system:bill:remove']"
@@ -46,14 +46,14 @@
<el-table v-loading="loading" border :data="billList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="账单编号" align="center" prop="billCode" />
<el-table-column label="账单名称" align="center" prop="billCode" />
<el-table-column label="收费范围" align="center" prop="chargeScope">
<el-table-column label="账单名称" align="center" prop="billName" />
<el-table-column label="收费范围" align="center" prop="chargeScope" width="100">
<template #default="scope">
<dict-tag :options="com_questionnaire_scope" :value="scope.row.chargeScope"></dict-tag>
<dict-tag :options="com_bill_charge_scope_house" :value="scope.row.chargeScope"></dict-tag>
</template>
</el-table-column>
<el-table-column label="收费项目" align="center" prop="chargeItemName" />
<el-table-column label="收费周期" align="center" prop="chargePeriod">
<el-table-column label="收费周期" align="center" prop="chargePeriod" width="80">
<template #default="scope">
<dict-tag :options="com_bill_charge_period" :value="scope.row.chargePeriod"></dict-tag>
</template>
@@ -75,11 +75,11 @@
</el-table-column>
<!-- <el-table-column label="数量" align="center" prop="chargePeriod" />
<el-table-column label="费用合计" align="center" prop="chargePeriod" /> -->
<el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
<el-table-column label="操作" width="120" align="center" fixed="right" class-name="small-padding fixed-width">
<template #default="scope">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:bill:edit']">修改</el-button>
<el-button link type="primary" icon="Edit" @click="handleMain(scope.row)" v-hasPermi="['system:bill:edit']">详情</el-button>
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:bill:remove']">删除</el-button>
<el-button link type="primary" @click="handleUpdate(scope.row)" v-hasPermi="['bill:bill:edit']">修改</el-button>
<el-button link type="primary" @click="handleMain(scope.row)" v-hasPermi="['bill:bill:query']">详情</el-button>
<!-- <el-button link type="primary" @click="handleDelete(scope.row)" v-hasPermi="['system:bill:remove']">删除</el-button> -->
</template>
</el-table-column>
</el-table>
@@ -98,6 +98,7 @@ const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { com_bill_search_filter } = toRefs<any>(proxy?.useDict('com_bill_search_filter'));
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 { com_bill_charge_scope_house } = toRefs<any>(proxy?.useDict('com_bill_charge_scope_house'));
const billList = ref<BillVO[]>([]);
const buttonLoading = ref(false);
@@ -152,10 +153,14 @@ init();
/** 查询账单管理列表 */
const getList = async () => {
loading.value = true;
const res = await listBill(queryParams.value);
billList.value = res.rows;
total.value = res.total;
loading.value = false;
listBill(queryParams.value)
.then((res) => {
billList.value = res.rows;
total.value = res.total;
})
.finally(() => {
loading.value = false;
});
};
/** 搜索按钮操作 */
@@ -178,7 +183,6 @@ const handleSelectionChange = (selection: BillVO[]) => {
};
const router = useRouter();
// TODO 添加账单
/** 新增按钮操作 */
const handleAdd = () => {
router.push({

View File

@@ -5,28 +5,47 @@
<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 disabled v-model.trim="form.name" placeholder="请输入账单名称" />
<el-form-item label="账单名称" prop="billName">
<el-input disabled v-model.trim="form.billName" placeholder="请输入账单名称" />
</el-form-item>
<el-form-item label="收费项目" prop="materialName">
<el-select disabled v-model="form.formula">
<el-option v-for="(item, index) in com_charge_item_formula" :key="index" :value="item.value" :label="item.label"></el-option>
<el-form-item label="收费项目" prop="chargeItemId">
<el-select disabled v-model="form.chargeItemId" @change="handleChange">
<el-option v-for="(item, index) in chargeitemlist" :key="index" :value="item.id" :label="item.itemName"></el-option>
</el-select>
</el-form-item>
<el-form-item label="收费范围" prop="billingMethod">
<el-radio-group disabled v-model="form.billingMethod">
<el-radio value="0">固定单价</el-radio>
<el-form-item label="收费范围" prop="chargeScope">
<el-radio-group disabled v-model="form.chargeScope">
<el-radio v-for="(item, index) in com_questionnaire_scope" :key="index" :value="item.value" :label="item.label"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="费用周期" prop="unit">
<el-select disabled v-model="form.unit">
<el-option v-for="(item, index) in com_charge_item_unit" :key="index" :value="item.value" :label="item.label"></el-option>
<el-form-item v-if="form.chargeScope === '1'">
<div class="residentBox">
<ul class="checkoutSideUsesbox">
<li v-for="(item, index) in checkoutUses" :key="index">
<span>{{ item.buildingName }} </span> / <span>{{ item.unitNo }}单元 </span> / <span>{{ item.floorNo }} </span> /
<span>{{ item.houseNo }}</span>
</li>
</ul>
</div>
</el-form-item>
<el-form-item label="费用周期" prop="chargePeriod">
<el-select disabled v-model="form.chargePeriod">
<el-option v-for="(item, index) in com_bill_charge_period" :key="index" :value="item.value" :label="item.label"></el-option>
</el-select>
</el-form-item>
<el-form-item label="起止日期" prop="price">
<el-input disabled v-model.trim="form.price" placeholder="请输入费用单价" />
<el-date-picker
disabled
v-model="StartEndDate"
@update:model-value="handleDate"
:value-format="datepicker[form.chargePeriod].format"
:format="datepicker[form.chargePeriod].format"
:type="datepicker[form.chargePeriod].type"
range-separator=""
start-placeholder="开始"
end-placeholder="结束"
/>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input disabled type="textarea" :rows="5" v-model.trim="form.remark" placeholder="请输入" />
</el-form-item>
@@ -42,70 +61,105 @@
<script setup lang="ts">
import { ref } from 'vue';
import Holder from '@/components/Holder/index.vue';
import PageHeader from '@/components/Pageheader/index.vue';
import { getChargeItem, updateChargeItem, addChargeItem } from '@/api/system/SdbChargeItem';
import { listChargeItem } from '@/api/system/SdbChargeItem';
import { getBill, updateBill, addBill, listBillHouse } from '@/api/system/SdbBill';
import type { DatePickerType } from 'element-plus';
import { formatDate, formatDate2 } from '@/utils';
import { Delete } from '@element-plus/icons-vue';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { com_charge_item_unit } = toRefs<any>(proxy?.useDict('com_charge_item_unit'));
const { com_charge_item_precision } = toRefs<any>(proxy?.useDict('com_charge_item_precision'));
const { com_charge_item_carry_method } = toRefs<any>(proxy?.useDict('com_charge_item_carry_method'));
const { com_charge_item_formula } = toRefs<any>(proxy?.useDict('com_charge_item_formula'));
const { com_questionnaire_scope } = toRefs<any>(proxy?.useDict('com_questionnaire_scope'));
const { com_bill_charge_period } = toRefs<any>(proxy?.useDict('com_bill_charge_period'));
type PickerConfig = {
type: DatePickerType;
format: string;
};
const datepicker: Record<string, PickerConfig> = {
'0': { type: 'yearrange', format: 'YYYY' },
'1': { type: 'monthrange', format: 'YYYY-MM' },
'2': { type: 'daterange', format: 'YYYY-MM-DD' }
};
const router = useRouter();
const route = useRoute();
const formRef = ref();
const form = ref({
'id': null,
'name': '',
'billingMethod': '0',
'price': null,
'unit': '',
'precision': '',
'carryMethod': '',
'remark': '',
'formula': ''
'billName': '',
'chargeItemId': '', // 收费项目
'chargeScope': '0', // 业主范围
'chargePeriod': '2', // 费用周期
houseIds: [], // 部分业主
charegeTypeId: '', // typeid
'startDate': '', // 开始
'endDate': '', // 结束
'remark': ''
});
const rules = ref({
name: [{ required: true, message: '请输入 项目名称', trigger: 'blur' }],
billingMethod: [{ required: true, message: '请输入 计费方式', trigger: 'blur' }],
price: [{ required: true, message: '请输入 费用单价', trigger: 'blur' }],
formula: [{ required: true, message: '请选择 计费公式', trigger: 'blur' }],
unit: [{ required: true, message: '请选择 计费单位', trigger: 'blur' }],
precision: [{ required: true, message: '选择 计算精度', trigger: 'blur' }],
carryMethod: [{ required: true, message: '请选择 进位方式', trigger: 'blur' }]
billName: [{ 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);
if (route.query.id) {
userid.value = route.query.id;
getChargeItem(userid.value).then((res) => {
form.value = {
...form.value,
...res.data
};
});
}
// !== 提交 =============================================================================
// 提交
// TODO 收费项目提交
const submitForm = () => {
formRef.value?.validate(async (valid: boolean) => {
if (valid) {
if (userid.value) {
updateChargeItem(form.value).then((res) => {
ElMessage.success('编辑成功');
cancelForm();
});
} else {
addChargeItem(form.value).then((res) => {
ElMessage.success('添加成功');
cancelForm();
});
}
}
// 开始结束日期
const StartEndDate = ref([]);
function handleDate(val: string[]) {
form.value.startDate = formatDate2(val[0]);
form.value.endDate = formatDate2(val[1]);
}
const chargeitemlist = ref([]);
const houselist = ref([]);
const checkoutUses = ref([]);
async function init() {
listChargeItem().then((res) => {
chargeitemlist.value = res.rows;
});
};
const res = await listBillHouse({ pageNum: 1, pageSize: 999999 });
houselist.value = res.rows;
if (route.query.id) {
userid.value = route.query.id;
getBill(userid.value).then((res) => {
form.value = {
...form.value,
...res.data
};
form.value.houseIds = res.data.houseIds || [];
StartEndDate.value = [formatDate(res.data.startDate), formatDate(res.data.endDate)];
checkoutUses.value = form.value.houseIds
.map((item) => {
if (item) {
const find = houselist.value.find((it) => it.houseId === item);
if (find) {
return find;
} else {
return null;
}
}
})
.filter((item) => item !== null);
});
}
}
init();
// 获取收费类型id
function handleChange(val) {
const find = chargeitemlist.value.find((item) => item.id === val);
if (find) {
form.value.charegeTypeId = find.typeId;
}
}
// !== 提交 =============================================================================
// 推出
const cancelForm = () => {
router.back();
@@ -138,6 +192,69 @@ const cancelForm = () => {
.formBody {
width: 650px;
margin: 0 auto;
.residentBox {
max-height: 400px;
overflow-y: auto;
padding: 10px 5px;
}
.checkoutSideUsesbox {
// display: grid;
// grid-template-columns: repeat(3, 1fr);
// gap: 5px;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
justify-content: space-between;
padding: 10px 5px;
li {
margin-right: 10px;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: space-between;
min-width: 240px;
height: 35px;
padding: 0 10px;
line-height: 35px;
background-color: #f3f9ff;
border: 1px solid #8fc0f1;
margin-bottom: 10px;
@media (max-width: 2000px) {
font-size: 12px;
}
@media (max-width: 1650px) {
font-size: 10px;
}
@media (max-width: 1650px) {
font-size: 8px;
}
.el-icon {
margin-left: 20px;
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;

View File

@@ -5,8 +5,8 @@
<div v-show="showSearch" class="mb-[10px]">
<el-card shadow="hover">
<el-form ref="queryFormRef" label-width="100px" :model="queryParams" :inline="true">
<el-form-item label="设备状态" prop="status">
<el-select v-model="queryParams.status">
<!-- <el-form-item label="设备状态" prop="eleStatus">
<el-select v-model="queryParams.eleStatus">
<el-option v-for="(item, index) in com_waterdevice_on_status" :key="index" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-form-item>
@@ -19,7 +19,7 @@
:value="item.value"
></el-option>
</el-select>
</el-form-item>
</el-form-item> -->
<el-form-item label="房间号" prop="houseName">
<el-input v-model="queryParams.houseName" placeholder="请输入房间号" clearable @keyup.enter="handleQuery" />
</el-form-item>
@@ -36,7 +36,7 @@
<template #header>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" plain icon="Plus" @click="handleMarkqrcode" v-hasPermi="['waterRecord:waterRecord:add']"
<el-button type="primary" plain icon="Plus" @click="handleMarkqrcode" v-hasPermi="['equipment:addqrcode:electricitydevice']"
>批量生成条形码</el-button
>
</el-col>
@@ -49,7 +49,7 @@
<el-table v-loading="loading" border :data="ElectricityDeviceList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="电表设备编码" align="center" prop="deviceCode" />
<el-table-column label="电表设备编码" width="250" align="center" prop="deviceCode" />
<el-table-column label="设备状态" width="100" align="center" prop="status">
<template #default="scope">
<dict-tag :options="com_waterdevice_on_status" :value="scope.row.status"></dict-tag>
@@ -63,14 +63,14 @@
<span v-else>-----</span>
</template>
</el-table-column>
<el-table-column label="户号" align="center" prop="houseName" />
<el-table-column label="房屋" align="center" prop="houseName" />
<el-table-column label="余额" width="100" align="center" prop="elePrice">
<template #defaul="scope">
<span v-if="scope.row.electricityRecord">{{ scope.row.electricityRecord.balance }}</span>
<span v-else>-----</span>
</template>
</el-table-column>
<el-table-column label="条形码" width="140" align="center" prop="deleted">
<el-table-column label="条形码" width="250" align="center" prop="deleted">
<template #default="scope">
<el-image
v-if="scope.row.url && scope.row.url.includes('http')"
@@ -92,24 +92,44 @@
<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 width="150" label="启停" align="center" prop="deleted" v-hasPermi="['equipment:isUse:electricitydevice']">
<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>
<el-button link type="primary" @click="handleOpenDialog('usedWater', scope.row)">用电量</el-button>
<el-button link type="primary" @click="handleOpenDialog('Upload', scope.row)">更新固件</el-button>
<el-button link type="primary" @click="handleOpenDialog('UpdateHouse', scope.row)" v-hasPermi="['system:waterDevice:edit']"
>修改</el-button
>
<el-switch
@change="(val: string) => handleChangeWater(val, scope.row)"
v-model="scope.row.deleted"
active-text="启用"
inactive-text="停止"
active-value="0"
inactive-value="1"
></el-switch>
</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" @click="handleRecode(scope.row)" v-hasPermi="['equipment:view:electricitydevice']">充值记录</el-button>
<el-button link type="primary" @click="handleQrCode(scope.row)" v-hasPermi="['equipment:addqrcode:electricitydevice']"
>生成条码</el-button
>
<el-button link type="primary" @click="handleOpenDialog('usedWater', scope.row)" v-hasPermi="['equipment:useWater:electricitydevice']"
>用水量</el-button
>
<el-button
link
type="primary"
@click="handleOpenDialog('Upload', scope.row)"
v-hasPermi="['equipment:updatehardware:electricitydevice']"
>更新固件</el-button
>
<el-button
link
type="primary"
@click="handleOpenDialog('UpdateHouse', scope.row)"
v-hasPermi="['equipment:edithouse:electricitydevice']"
>修改</el-button
>
<!-- <el-dropdown style="vertical-align: text-top">
<el-button link type="primary">
<div>
更多<el-icon><arrow-down /></el-icon>
@@ -118,17 +138,17 @@
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>
<div @click="handleOpenDialog('usedWater', scope.row)">用电量</div>
<div @click="handleOpenDialog('usedWater', scope.row)" v-hasPermi="['equipment:used:electricitydevice']">用电量</div>
</el-dropdown-item>
<el-dropdown-item>
<div @click="handleOpenDialog('Upload', scope.row)">更新固件</div>
<div @click="handleOpenDialog('Upload', scope.row)" v-hasPermi="['equipment:updatehardware:electricitydevice']">更新固件</div>
</el-dropdown-item>
<el-dropdown-item>
<div @click="handleOpenDialog('UpdateHouse', scope.row)" v-hasPermi="['system:waterDevice:edit']">修改</div>
<div @click="handleOpenDialog('UpdateHouse', scope.row)" v-hasPermi="['equipment:edithouse:electricitydevice']">修改</div>
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</el-dropdown> -->
</el-col>
</el-row>
</template>
@@ -306,7 +326,6 @@ function headerToken() {
}
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) => {
// 1. 校验后缀
console.log(rawFile);
if (!rawFile.name.endsWith('.bin')) {
ElMessage.warning('请上传 .bin 后缀的文件');
return false;
@@ -367,7 +386,6 @@ const handleSelectionChange = (selection: ElectricityDeviceVO[]) => {
multiple.value = !selection.length;
};
// TODO 生成条码
/** 生成二维码 */
const handleQrCode = (row: ElectricityDeviceVO) => {
// 1.电表 2.电表
@@ -426,7 +444,6 @@ function getTree() {
/** 电表 启停*/
// TODO 修改水电表 启停
const handleChangeWater = (val: string, row: ElectricityDeviceVO) => {};
// TODO 修改电表户号
/** 提交按钮 */
const submitForm = () => {
if (dialogType.value === 'usedWater') {
@@ -503,7 +520,6 @@ const resetQuery = () => {
const router = useRouter();
// TODO 充值记录 查询
/** 充值记录 */
const handleRecode = (row: ElectricityDeviceVO) => {
// 1.电表 2.电表
@@ -522,7 +538,6 @@ onMounted(() => {
});
const download = (url: string) => {
console.log(url);
if (!url) return;
if (!url.includes('http')) return;
// 创建一个隐藏的 a 标签,直接跳转下载

View File

@@ -5,16 +5,16 @@
<div v-show="showSearch" class="mb-[10px]">
<el-card shadow="hover">
<el-form ref="queryFormRef" label-width="100px" :model="queryParams" :inline="true">
<el-form-item label="设备状态" prop="eleStatus">
<!-- <el-form-item label="设备状态" prop="eleStatus">
<el-select v-model="queryParams.eleStatus">
<el-option v-for="(item, index) in com_waterdevice_on_status" :key="index" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="分合状态" prop="status">
</el-form-item> -->
<!-- <el-form-item label="分合状态" prop="status">
<el-select v-model="queryParams.status">
<el-option v-for="(item, index) in com_water_readrecord_status" :key="index" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-form-item>
</el-form-item> -->
<el-form-item label="房间号" prop="houseName">
<el-input v-model="queryParams.houseName" placeholder="请输入房间号" clearable @keyup.enter="handleQuery" />
</el-form-item>
@@ -31,7 +31,7 @@
<template #header>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" plain icon="Plus" @click="handleMarkqrcode" v-hasPermi="['waterRecord:waterRecord:add']"
<el-button type="primary" plain icon="Plus" @click="handleMarkqrcode" v-hasPermi="['equipment:addqrcode:waterdevice']"
>批量生成条形码</el-button
>
</el-col>
@@ -53,11 +53,11 @@
</el-table-column>
<el-table-column label="分合状态" width="100" align="center">
<template #default="scope">
<dict-tag v-if="scope.row.status" :options="com_water_readrecord_status" :value="scope.row.status"></dict-tag>
<dict-tag v-if="scope.row.status" :options="com_electricity_readrecord_status" :value="scope.row.waterRecord.status"></dict-tag>
<span v-else>-------</span>
</template>
</el-table-column>
<el-table-column label="户号" align="center" prop="houseName" />
<el-table-column label="房屋" align="center" prop="houseName" />
<el-table-column label="余额" width="120" align="center" prop="deviceCode">
<template #default="scope">
<span v-if="scope.row.waterRecord">{{ scope.row.waterRecord.balance }}</span>
@@ -81,12 +81,12 @@
<span v-else>暂未生成</span>
</template>
</el-table-column>
<el-table-column label="抄表时间" width="200" align="center">
<el-table-column label="抄表时间" align="center">
<template #default="scope">
<span>{{ scope.row.waterRecord ? scope.row.waterRecord.readTime : '--' }}</span>
</template>
</el-table-column>
<!-- <el-table-column width="150" label="启停" align="center" prop="deleted">
<!-- <el-table-column width="150" label="启停" align="center" prop="deleted" v-hasPermi="['equipment:isUse:waterdevice']">
<template #default="scope">
<el-switch
@change="(val: string) => handleChangeWater(val, scope.row)"
@@ -98,13 +98,22 @@
></el-switch>
</template>
</el-table-column> -->
<el-table-column label="操作" align="center" width="250" 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-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" @click="handleRecode(scope.row)" v-hasPermi="['equipment:view:waterdevice']">充值记录</el-button>
<el-button link type="primary" @click="handleQrCode(scope.row)" v-hasPermi="['equipment:addqrcode:waterdevice']">生成条码</el-button>
<el-button link type="primary" @click="handleOpenDialog('usedWater', scope.row)" v-hasPermi="['equipment:useWater:waterdevice']"
>用水量</el-button
>
<el-button link type="primary" @click="handleOpenDialog('Upload', scope.row)" v-hasPermi="['equipment:updatehardware:waterdevice']"
>更新固件</el-button
>
<el-button link type="primary" @click="handleOpenDialog('UpdateHouse', scope.row)" v-hasPermi="['equipment:edithouse:waterdevice']"
>绑定房屋</el-button
>
<!-- <el-dropdown style="vertical-align: text-top">
<el-button link type="primary">
<div>
更多<el-icon><arrow-down /></el-icon>
@@ -113,17 +122,17 @@
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>
<div @click="handleOpenDialog('usedWater', scope.row)">用水量</div>
<div @click="handleOpenDialog('usedWater', scope.row)" v-hasPermi="['equipment:useWater:waterdevice']">用水量</div>
</el-dropdown-item>
<el-dropdown-item>
<div @click="handleOpenDialog('Upload', scope.row)">更新固件</div>
<div @click="handleOpenDialog('Upload', scope.row)" v-hasPermi="['equipment:updatehardware:waterdevice']">更新固件</div>
</el-dropdown-item>
<el-dropdown-item>
<div @click="handleOpenDialog('UpdateHouse', scope.row)" v-hasPermi="['system:waterDevice:edit']">修改</div>
<div @click="handleOpenDialog('UpdateHouse', scope.row)" v-hasPermi="['equipment:edithouse:waterdevice']">修改</div>
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</el-dropdown> -->
</el-col>
</el-row>
</template>
@@ -139,8 +148,8 @@
<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"
value-format="YYYY-MM-DD HH:MM:ss"
format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
v-model="UsedWaterform.startTime"
type="datetime"
placeholder="开始时间"
@@ -148,8 +157,8 @@
</el-form-item>
<el-form-item label="结束时间" prop="endTime">
<el-date-picker
format="YYYY-MM-DD HH:MM:ss"
value-format="YYYY-MM-DD HH:MM:ss"
format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
v-model="UsedWaterform.endTime"
type="datetime"
placeholder="结束时间"
@@ -160,24 +169,47 @@
</el-form-item>
</el-form>
<!-- upload file -->
<el-form v-else-if="dialogType === 'Upload'" ref="UploadFileformRef" :model="UploadFileform" :rules="UploadFileformRules" label-width="120px">
<el-form-item label="上传更新文件" prop="file">
<el-form v-else-if="dialogType === 'Upload'" ref="UploadFileformRef" :model="UploadFileform" :rules="UploadFileformRules" label-width="140px">
<el-form-item label="上传 A槽更新 文件" prop="fileA">
<el-upload
ref="uploadRef"
accept=".bin"
:action="uploadUrl"
:action="uploadAUrl"
name="file"
:headers="headerToken()"
:show-file-list="true"
class="upload-demo"
:on-success="handleAvatarSuccess"
:on-success="handleAvatarSuccessA"
:before-upload="beforeAvatarUpload"
>
<div class="uploadFileBox flex flex-items-center">
<el-icon>
<upload></upload>
</el-icon>
<div style="margin-left: 10px">上传文件</div>
<div style="margin-left: 10px">上传A文件</div>
</div>
<template #tip>
<div class="el-upload__tip">文件格式必须是 bin 格式</div>
</template>
</el-upload>
</el-form-item>
<el-form-item label="上传 B槽更新 文件" prop="fileB">
<el-upload
ref="uploadRef"
accept=".bin"
:action="uploadBUrl"
name="file"
:headers="headerToken()"
:show-file-list="true"
class="upload-demo"
:on-success="handleAvatarSuccessB"
:before-upload="beforeAvatarUpload"
>
<div class="uploadFileBox flex flex-items-center">
<el-icon>
<upload></upload>
</el-icon>
<div style="margin-left: 10px">上传B文件</div>
</div>
<template #tip>
<div class="el-upload__tip">文件格式必须是 bin 格式</div>
@@ -214,20 +246,28 @@
<script setup name="WaterDevice" lang="ts">
import 'element-plus/theme-chalk/display.css';
import { listWaterDevice, getWaterDeviceTimeRangeUsedWater, WaterDeviceMakerQrcode, updateWaterDevice } from '@/api/system/SdbWaterDevice/index';
import {
listWaterDevice,
getWaterDeviceTimeRangeUsedWater,
WaterDeviceMakerQrcode,
updateWaterDevice,
WaterDeviceUpdateBin
} from '@/api/system/SdbWaterDevice/index';
import { WaterDeviceVO, WaterDeviceQuery, WaterDeviceForm } from '@/api/system/SdbWaterDevice/type';
import { useHouseStore } from '@/store/modules/house';
import { useUserStore } from '@/store/modules/user';
import { getHousePathById } from '@/utils/house';
import { Upload } from '@element-plus/icons-vue';
import { CascaderValue, tourEmits, UploadProps, UploadRawFile } from 'element-plus';
import { formatDate } from '@/utils/time';
const huhao = 3096371295;
const uploadUrl = import.meta.env.VITE_APP_BASE_API + '/waterDevice/upload';
const uploadAUrl = import.meta.env.VITE_APP_BASE_API + '/waterDevice/uploadA';
const uploadBUrl = import.meta.env.VITE_APP_BASE_API + '/waterDevice/uploadB';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { com_waterdevice_on_status } = toRefs<any>(proxy?.useDict('com_waterdevice_on_status'));
const { com_water_readrecord_status } = toRefs<any>(proxy?.useDict('com_water_readrecord_status'));
const { com_electricity_readrecord_status } = toRefs<any>(proxy?.useDict('com_electricity_readrecord_status'));
const waterDeviceList = ref<WaterDeviceVO[]>([]);
const buttonLoading = ref(false);
@@ -284,9 +324,9 @@ const UsedWaterInfo = ref({
const UploadFileformRef = ref(null);
const uploadRef = ref();
const UploadFileform = ref({
id: '',
deviceCode: '',
file: ''
deviceCodes: [],
urlA: '',
urlB: ''
});
const UploadFileformRules = {
file: [{ required: true, message: '更新文件不能为空', trigger: 'blur' }]
@@ -299,7 +339,6 @@ function headerToken() {
}
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) => {
// 1. 校验后缀
console.log(rawFile);
if (!rawFile.name.endsWith('.bin')) {
ElMessage.warning('请上传 .bin 后缀的文件');
return false;
@@ -318,8 +357,11 @@ const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile)
}
return true;
};
const handleAvatarSuccess: UploadProps['onSuccess'] = (response: any) => {
UploadFileform.value.file = response.data.url;
const handleAvatarSuccessA: UploadProps['onSuccess'] = (response: any) => {
UploadFileform.value.urlA = response.data.url;
};
const handleAvatarSuccessB: UploadProps['onSuccess'] = (response: any) => {
UploadFileform.value.urlB = response.data.url;
};
// ? 上传固件 ==============================================================================================
@@ -328,7 +370,8 @@ const handleAvatarSuccess: UploadProps['onSuccess'] = (response: any) => {
// 编辑房屋
const EditHouseformRef = ref(null);
const EditHouseformRules = {
file: [{ required: true, message: '更新文件不能为空', trigger: 'blur' }]
fileA: [{ required: true, message: 'A文件不能为空', trigger: 'blur' }],
fileB: [{ required: true, message: 'B文件不能为空', trigger: 'blur' }]
};
const EditHouseform = ref({
id: '',
@@ -388,13 +431,11 @@ const handleOpenDialog = (type: 'usedWater' | 'Upload' | 'UpdateHouse', row: Wat
reset();
if (type === 'usedWater') {
UsedWaterform.value.deviceCode = row.deviceCode;
UsedWaterform.value.startTime = new Date().toLocaleString();
UsedWaterform.value.endTime = new Date().toLocaleString();
UsedWaterform.value.startTime = '';
UsedWaterform.value.endTime = '';
usedWaterInfo.value = true;
} else if (type === 'Upload') {
UploadFileform.value.file = '';
UploadFileform.value.deviceCode = row.deviceCode;
UploadFileform.value.id = row.id;
UploadFileform.value.deviceCodes = [row.deviceCode];
} else if (type === 'UpdateHouse') {
EditHouseform.value.id = row.id;
EditHouseform.value.deviceCode = row.deviceCode;
@@ -444,6 +485,8 @@ const submitForm = () => {
unSubmit();
}
});
} else if (dialogType.value === 'Upload') {
WaterDeviceUpdateBin(UploadFileform.value);
}
};
const unSubmit = () => {
@@ -469,6 +512,11 @@ const reset = () => {
deviceCode: '',
houseId: ''
};
UploadFileform.value.deviceCodes = [];
UploadFileform.value.urlA = '';
UploadFileform.value.urlB = '';
// 上传 清空
UploadFileformRef.value?.resetFields();
// 使用水量 清空
@@ -508,7 +556,6 @@ onMounted(() => {
});
const download = (url: string) => {
console.log(url);
if (!url) return;
if (!url.includes('http')) return;
// 创建一个隐藏的 a 标签,直接跳转下载