zhaoyang/estate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

5.1日 暂定 水电表管理

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

241
src/views/system/Sdb/SdbBill/main.vue
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;