cnlive_project / cnlive-community-web-vue · Commits

Commit 23fe20ae4c46193b6efb0ab05f7c36dad7f14c44

Authored by 杨泽宇
1 parent 65e404ec

物业费

Inline Side-by-side
Showing 5 changed files with 670 additions and 0 deletions
src/api/fee/index.ts 0 → 100644
  View file @23fe20a
  1 +import request from '../request'
  2 +import { deleteEmptyParam } from '@/utils/tool'
  3 +
  4 +/**
  5 + * @description 物业费列表
  6 + * @function propertyFeeList
  7 + */
  8 +export const propertyFeeList = async ( params: any ) => {
  9 + let res: any = await request({
  10 + method: 'get',
  11 + url: '/notify/list',
  12 + params: deleteEmptyParam(params)
  13 + })
  14 + return res
  15 +}
  16 +
  17 +/**
  18 + * @description 删除物业费
  19 + * @function propertyFeeDelete
  20 + */
  21 +export const propertyFeeDelete = async (params: any) => {
  22 + let res: any = await request({
  23 + method: 'get',
  24 + url: '/notify/list',
  25 + params: deleteEmptyParam(params)
  26 + })
  27 + return res
  28 +}
  29 +
  30 +/**
  31 + * @description 物业费现金缴费、撤回
  32 + * @function propertyFeeShift
  33 + */
  34 + export const propertyFeeShift = async (params: any) => {
  35 + let res: any = await request({
  36 + method: 'get',
  37 + url: '/notify/list',
  38 + params: deleteEmptyParam(params)
  39 + })
  40 + return res
  41 +}
  42 +
  43 +/**
  44 + * @description 物业费编辑
  45 + * @function propertyFeeSave
  46 + */
  47 + export const propertyFeeSave = async (params: any) => {
  48 + let res: any = await request({
  49 + method: 'get',
  50 + url: '/notify/list',
  51 + params: deleteEmptyParam(params)
  52 + })
  53 + return res
  54 +}
  55 +
  56 +/**
  57 + * @description 物业费确认
  58 + * @function propertyFeeSure
  59 + */
  60 + export const propertyFeeSure = async (params: any) => {
  61 + let res: any = await request({
  62 + method: 'get',
  63 + url: '/notify/list',
  64 + params: deleteEmptyParam(params)
  65 + })
  66 + return res
  67 +}
0 68 \ No newline at end of file
... ...
src/router/index.ts
  View file @23fe20a
1 1 import { createRouter, createWebHashHistory } from 'vue-router'
  2 +import Fee from './modules/fee'
2 3 import Event from './modules/event'
3 4 import Repair from './modules/repair'
4 5 import Notify from './modules/notify'
... ... @@ -31,6 +32,7 @@ const routes: Array<any> = [
31 32 meta: { title: '欢迎访问' }
32 33 }]
33 34 },
  35 + Fee,
34 36 Event,
35 37 Repair,
36 38 Notify,
... ...
src/router/modules/fee.ts 0 → 100644
  View file @23fe20a
  1 +import Layout from '@/layout/enter.vue'
  2 +const fee = {
  3 + path: '/',
  4 + component: Layout,
  5 + name: 'Fee',
  6 + children: [{
  7 + path: 'fee',
  8 + name: 'propertyFee',
  9 + component: () => import('@/views/fee/index.vue'),
  10 + meta: { title: '物业费' }
  11 + }]
  12 +}
  13 +
  14 +export default fee
... ...
src/views/fee/config.ts 0 → 100644
  View file @23fe20a
  1 +import type { EnumArrayItem } from "@/@type/module/basic"
  2 +
  3 +// 缴费状态
  4 +export const statusData: EnumArrayItem[] = [
  5 + {
  6 + label: '未缴纳',
  7 + value: 0
  8 + },
  9 + {
  10 + label: '已缴纳',
  11 + value: 1
  12 + }
  13 +]
  14 +
  15 +// 缴费方式
  16 +export const payData: EnumArrayItem[] = [
  17 + {
  18 + label: '线上',
  19 + value: 0
  20 + },
  21 + {
  22 + label: '现金',
  23 + value: 1
  24 + }
  25 +]
  26 +
  27 +// 确认状态
  28 +export const payStatus: EnumArrayItem[] = [
  29 + {
  30 + label: '未确认',
  31 + value: 0
  32 + },
  33 + {
  34 + label: '已确认',
  35 + value: 1
  36 + }
  37 +]
0 38 \ No newline at end of file
... ...
src/views/fee/index.vue 0 → 100644
  View file @23fe20a
  1 +<script setup lang="ts">
  2 +import { reactive, ref, onMounted, getCurrentInstance } from "vue";
  3 +import {
  4 + propertyFeeList,
  5 + propertyFeeDelete,
  6 + propertyFeeSave,
  7 + propertyFeeShift,
  8 + propertyFeeSure,
  9 +} from "@/api/fee";
  10 +import { parseTime, back } from "@/utils/tool";
  11 +import Pagination from "@/components/Pagination/index.vue";
  12 +import { statusData, payData, payStatus } from "./config";
  13 +import { ElMessageBox } from "element-plus";
  14 +import type { ElTable } from "element-plus";
  15 +interface Form {
  16 + page: number;
  17 + pageSize: number;
  18 + communityId: number;
  19 + building: number;
  20 + unit: number;
  21 + payStatus: number;
  22 + payment: number;
  23 + sureStatus: number;
  24 + beginTime: string;
  25 + endTime: string;
  26 + endMonth: string;
  27 +}
  28 +interface Params {
  29 + total: number;
  30 + query: Form;
  31 +}
  32 +interface Data {
  33 + loading: boolean;
  34 + list: any[] | null;
  35 + params: Params;
  36 +}
  37 +const multipleTableRef = ref<InstanceType<typeof ElTable>>();
  38 +const ruleFormRef = ref<InstanceType<typeof ElForm>>();
  39 +let instance: ComponentInternalInstance | null = getCurrentInstance();
  40 +let multipleSelection = ref<any[]>([]);
  41 +const value1 = ref([]);
  42 +const value2 = ref([]);
  43 +let form = reactive({
  44 + data: {},
  45 + loading: false,
  46 + visible: false,
  47 +});
  48 +let data = reactive({
  49 + list: [],
  50 + loading: false,
  51 + params: {
  52 + total: 0,
  53 + query: {
  54 + page: 1,
  55 + pageSize: 10,
  56 + communityId: null,
  57 + building: null,
  58 + unit: null,
  59 + payStatus: null,
  60 + payment: null,
  61 + sureStatus: null,
  62 + beginTime: null,
  63 + endTime: null,
  64 + endMonth: null,
  65 + },
  66 + },
  67 +});
  68 +/**
  69 + * 表单验证规则
  70 + */
  71 +const rules = reactive({});
  72 +/**
  73 + * 表格选中响应
  74 + * @param {array} data 选中的一条数据
  75 + */
  76 +const handleSelectionChange = (data: array) => {
  77 + multipleSelection.value = data;
  78 +};
  79 +/**
  80 + * 时间组件回调
  81 + * @param {array} value [开始时间, 结束时间]
  82 + */
  83 +const handleTimeChange = (value: array) => {
  84 + data.params.query.beginTime = value ? value[0] : "";
  85 + data.params.query.endTime = value ? value[1] : "";
  86 + getList();
  87 +};
  88 +/**
  89 + * 删除
  90 + * @param {object} obj 要删除的数据对象
  91 + */
  92 +const handleDelete = (obj: any) => {
  93 + ElMessageBox.confirm("确认删除吗?", "警告", {
  94 + confirmButtonText: "确认",
  95 + cancelButtonText: "取消",
  96 + type: "warning",
  97 + })
  98 + .then(async () => {
  99 + try {
  100 + let res = await propertyFeeDelete({
  101 + ids: obj.id,
  102 + });
  103 + if (res?.data) {
  104 + ElMessage({
  105 + type: "success",
  106 + message: "操作成功",
  107 + });
  108 + getList();
  109 + } else {
  110 + ElMessage({
  111 + type: "error",
  112 + message: "操作失败",
  113 + });
  114 + }
  115 + } catch (e) {
  116 + console.log(e);
  117 + }
  118 + })
  119 + .catch(() => {
  120 + console.log("取消");
  121 + });
  122 +};
  123 +/**
  124 + * 列表
  125 + */
  126 +const getList = async () => {
  127 + data.loading = true;
  128 + try {
  129 + const res = await propertyFeeList(data.params.query);
  130 + data.list = res?.data?.data?.list;
  131 + data.params.total = res?.data?.data?.total;
  132 + } catch (e) {
  133 + console.log(e);
  134 + } finally {
  135 + data.loading = false;
  136 + }
  137 +};
  138 +/**
  139 + * 查询条件重置
  140 + */
  141 +const reset = () => {
  142 + data.params.query = {};
  143 + data.params.query.page = 1;
  144 + data.params.query.pageSize = 10;
  145 +};
  146 +/**
  147 + * 下载模板
  148 + */
  149 +const download = () => {
  150 + console.log("download");
  151 +};
  152 +/**
  153 + * 导出文件
  154 + */
  155 +const exportFile = () => {
  156 + console.log("export");
  157 +};
  158 +/**
  159 + * 导入文件
  160 + */
  161 +const importFile = () => {
  162 + console.log("import");
  163 +};
  164 +/**
  165 + * 确认
  166 + */
  167 +const sure = () => {
  168 + console.log("sure");
  169 + ElMessageBox.confirm(
  170 + "是否确认将已选账单同步至用户端(确认后将无法修改)?",
  171 + "确认，请仔细核对账单！ ",
  172 + {
  173 + confirmButtonText: "确认",
  174 + cancelButtonText: "取消",
  175 + type: "warning",
  176 + }
  177 + )
  178 + .then((res) => {
  179 + console.log("goes api");
  180 + })
  181 + .catch((error) => {
  182 + console.log(error);
  183 + });
  184 +};
  185 +/**
  186 + * 一键确认
  187 + */
  188 +const sureAll = () => {
  189 + console.log("sureall");
  190 + ElMessageBox.confirm(
  191 + "是否确认将银地家园1号楼2单元所有账单同步至用户端(确认后将无法修改)?",
  192 + "一键确认，请仔细核对账单！ ",
  193 + {
  194 + confirmButtonText: "确认",
  195 + cancelButtonText: "取消",
  196 + type: "warning",
  197 + }
  198 + )
  199 + .then((res) => {
  200 + console.log("goes api");
  201 + })
  202 + .catch((error) => {
  203 + console.log(error);
  204 + });
  205 +};
  206 +/**
  207 + * 变更付费状态
  208 + */
  209 +const shiftPayment = (obj: any) => {
  210 + console.log("变更付费状态");
  211 + ElMessageBox.confirm(
  212 + "是否将银地家园1号楼2单元1-101账单撤回现金缴费?",
  213 + "撤回现金缴费，请谨慎操作！ ",
  214 + {
  215 + confirmButtonText: "确认",
  216 + cancelButtonText: "取消",
  217 + type: "warning",
  218 + }
  219 + )
  220 + .then((res) => {
  221 + console.log("goes api");
  222 + })
  223 + .catch((error) => {
  224 + console.log(error);
  225 + });
  226 +};
  227 +/**
  228 + * 编辑
  229 + */
  230 +const edit = (obj: any) => {
  231 + console.log("编辑");
  232 + form.visible = true;
  233 +};
  234 +/**
  235 + * 表单取消
  236 + */
  237 +const handleCancel = () => {
  238 + form.visible = false;
  239 +};
  240 +/**
  241 + * 表单提交
  242 + */
  243 +const submitForm = (formEl: InstanceType<typeof ElForm> | undefined) => {
  244 + form.loading = true;
  245 + if (!formEl) return;
  246 + formEl.validate(async (valid) => {
  247 + if (valid) {
  248 + console.log("ok post");
  249 + } else {
  250 + instance?.proxy?.$message.error("请检查表单格式");
  251 + form.loading = false;
  252 + return false;
  253 + }
  254 + });
  255 +};
  256 +onMounted(() => {
  257 + getList();
  258 +});
  259 +</script>
  260 +<template>
  261 + <div class="page-container">
  262 + <h1>物业费管理</h1>
  263 + <el-row style="padding-bottom: 20px">
  264 + <el-form :inline="true" label-width="70px">
  265 + <el-form-item label="小区">
  266 + <el-select
  267 + v-model="data.params.query.communityId"
  268 + placeholder="请选择小区"
  269 + @change="getList"
  270 + clearable
  271 + >
  272 + <el-option label="测试小区" value="5290"></el-option>
  273 + <!-- <el-option
  274 + v-for="(item, index) in statusData"
  275 + :label="item.label"
  276 + :value="item.value"
  277 + ></el-option> -->
  278 + </el-select>
  279 + </el-form-item>
  280 + <el-form-item label="楼宇">
  281 + <el-select
  282 + v-model="data.params.query.building"
  283 + placeholder="请选择楼宇"
  284 + @change="getList"
  285 + clearable
  286 + >
  287 + <el-option label="测试楼宇" value="5290"></el-option>
  288 + <!-- <el-option
  289 + v-for="(item, index) in statusData"
  290 + :label="item.label"
  291 + :value="item.value"
  292 + ></el-option> -->
  293 + </el-select>
  294 + </el-form-item>
  295 + <el-form-item label="单元">
  296 + <el-select
  297 + v-model="data.params.query.unit"
  298 + placeholder="请选择单元"
  299 + @change="getList"
  300 + clearable
  301 + >
  302 + <el-option label="测试单元" value="5290"></el-option>
  303 + <!-- <el-option
  304 + v-for="(item, index) in statusData"
  305 + :label="item.label"
  306 + :value="item.value"
  307 + ></el-option> -->
  308 + </el-select>
  309 + </el-form-item>
  310 + <el-form-item label="缴费状态">
  311 + <el-select
  312 + v-model="data.params.query.payStatus"
  313 + placeholder="请选择缴费状态"
  314 + @change="getList"
  315 + clearable
  316 + >
  317 + <el-option
  318 + v-for="(item, index) in statusData"
  319 + :label="item.label"
  320 + :value="item.value"
  321 + ></el-option>
  322 + </el-select>
  323 + </el-form-item>
  324 + <el-form-item label="缴费方式">
  325 + <el-select
  326 + v-model="data.params.query.payment"
  327 + placeholder="请选择缴费方式"
  328 + @change="getList"
  329 + clearable
  330 + >
  331 + <el-option
  332 + v-for="(item, index) in payData"
  333 + :label="item.label"
  334 + :value="item.value"
  335 + ></el-option>
  336 + </el-select>
  337 + </el-form-item>
  338 + <el-form-item label="确认状态">
  339 + <el-select
  340 + v-model="data.params.query.sureStatus"
  341 + placeholder="请选择确认状态"
  342 + @change="getList"
  343 + clearable
  344 + >
  345 + <el-option
  346 + v-for="(item, index) in payStatus"
  347 + :label="item.label"
  348 + :value="item.value"
  349 + ></el-option>
  350 + </el-select>
  351 + </el-form-item>
  352 + <el-form-item label="到期时间">
  353 + <el-date-picker
  354 + v-model="value2"
  355 + type="month"
  356 + placeholder="到期月份"
  357 + />
  358 + </el-form-item>
  359 + <el-form-item label="缴费日期">
  360 + <el-date-picker
  361 + v-model="value1"
  362 + type="datetimerange"
  363 + range-separator="至"
  364 + format="YYYY-MM-DD HH:mm:ss"
  365 + value-format="YYYY-MM-DD HH:mm:ss"
  366 + start-placeholder="开始时间"
  367 + end-placeholder="结束时间"
  368 + @change="handleTimeChange"
  369 + >
  370 + </el-date-picker>
  371 + </el-form-item>
  372 + <el-form-item>
  373 + <el-button type="primary" @click="getList">筛选</el-button>
  374 + <el-button type="info" @click="reset">重置</el-button>
  375 + <el-button type="primary" @click="download">下载模板</el-button>
  376 + <el-button type="primary" @click="exportFile">导出</el-button>
  377 + <el-button type="primary" @click="importFile">导入</el-button>
  378 + <el-button type="success" @click="sure">确认</el-button>
  379 + <el-button type="success" @click="sureAll"
  380 + >一键确认(总计：327864￥)</el-button
  381 + >
  382 + <el-button
  383 + type="danger"
  384 + @click="
  385 + handleDelete({ id: multipleSelection.map((i) => i.id).join(',') })
  386 + "
  387 + :disabled="!multipleSelection.length"
  388 + >批量删除</el-button
  389 + >
  390 + </el-form-item>
  391 + </el-form>
  392 + </el-row>
  393 + <el-table
  394 + :data="data.list"
  395 + style="width: 100%"
  396 + border
  397 + v-loading="data.loading"
  398 + align="center"
  399 + element-loading-text="拼命加载中"
  400 + ref="multipleTableRef"
  401 + @selection-change="handleSelectionChange"
  402 + >
  403 + <el-table-column type="selection" align="center" />
  404 + <el-table-column prop="id" label="ID" align="center"></el-table-column>
  405 + <el-table-column
  406 + prop="id"
  407 + label="所属小区"
  408 + align="center"
  409 + ></el-table-column>
  410 + <el-table-column
  411 + prop="id"
  412 + label="楼宇名称"
  413 + align="center"
  414 + ></el-table-column>
  415 + <el-table-column prop="id" label="单元" align="center"></el-table-column>
  416 + <el-table-column
  417 + prop="id"
  418 + label="房间号"
  419 + align="center"
  420 + ></el-table-column>
  421 + <el-table-column
  422 + prop="id"
  423 + label="房屋面积"
  424 + align="center"
  425 + ></el-table-column>
  426 + <el-table-column
  427 + prop="id"
  428 + label="费用周期"
  429 + align="center"
  430 + ></el-table-column>
  431 + <el-table-column
  432 + prop="id"
  433 + label="代缴金额"
  434 + align="center"
  435 + ></el-table-column>
  436 + <el-table-column
  437 + prop="id"
  438 + label="缴费状态"
  439 + align="center"
  440 + ></el-table-column>
  441 + <el-table-column
  442 + prop="id"
  443 + label="缴费日期"
  444 + align="center"
  445 + ></el-table-column>
  446 + <el-table-column
  447 + prop="id"
  448 + label="缴费方式"
  449 + align="center"
  450 + ></el-table-column>
  451 + <el-table-column
  452 + prop="id"
  453 + label="确认状态"
  454 + align="center"
  455 + ></el-table-column>
  456 + <el-table-column
  457 + prop="id"
  458 + label="缴费人"
  459 + align="center"
  460 + ></el-table-column>
  461 + <el-table-column prop="id" label="操作" align="center">
  462 + <template #default="scope">
  463 + <el-button type="text" @click="shiftPayment(scope.row)"
  464 + >撤回现金缴费</el-button
  465 + >
  466 + <el-button type="text" @click="edit(scope.row)">编辑</el-button>
  467 + <el-button type="text" @click="handleDelete(scope.row)"
  468 + >删除</el-button
  469 + >
  470 + </template>
  471 + </el-table-column>
  472 + </el-table>
  473 + <Pagination
  474 + :total="data.params.total"
  475 + v-model:currentPage="data.params.query.page"
  476 + v-model:pageSize="data.params.query.pageSize"
  477 + @pageChange="getList"
  478 + ></Pagination>
  479 + <el-dialog v-model="form.visible" title="编辑">
  480 + <el-form
  481 + :model="form.data"
  482 + :inline="true"
  483 + :rules="rules"
  484 + ref="ruleFormRef"
  485 + label-width="120px"
  486 + class="card-form"
  487 + >
  488 + <el-form-item label="所属小区">
  489 + <el-input v-model="form.data.neighborHoodName" disabled />
  490 + </el-form-item>
  491 + <el-form-item label="楼宇名称">
  492 + <el-input v-model="form.data.buildingName" disabled />
  493 + </el-form-item>
  494 + <el-form-item label="房间号">
  495 + <el-input v-model="form.data.roomName" disabled />
  496 + </el-form-item>
  497 + <el-form-item label="单元">
  498 + <el-input v-model="form.data.unit" disabled />
  499 + </el-form-item>
  500 + <el-form-item label="面积">
  501 + <el-input v-model="form.data.area" disabled />
  502 + </el-form-item>
  503 + <el-form-item label="缴费状态">
  504 + <el-select
  505 + v-model="form.data.payStatus"
  506 + placeholder="缴费状态"
  507 + clearable
  508 + >
  509 + <el-option
  510 + v-for="(item, index) in statusData"
  511 + :label="item.label"
  512 + :value="item.value"
  513 + ></el-option>
  514 + </el-select>
  515 + </el-form-item>
  516 + <el-form-item label="费用周期">
  517 + <el-date-picker
  518 + v-model="form.data.period"
  519 + type="datetimerange"
  520 + range-separator="至"
  521 + format="YYYY-MM-DD HH:mm:ss"
  522 + value-format="YYYY-MM-DD HH:mm:ss"
  523 + start-placeholder="开始时间"
  524 + end-placeholder="结束时间"
  525 + >
  526 + </el-date-picker>
  527 + </el-form-item>
  528 + <el-form-item label="待缴金额">
  529 + <el-input v-model="form.data.price" placeholder="待缴金额"></el-input>
  530 + </el-form-item>
  531 + <el-form-item label="缴费日期">
  532 + <el-input
  533 + v-model="form.data.date"
  534 + placeholder="缴费日期"
  535 + disabled
  536 + ></el-input>
  537 + </el-form-item>
  538 + </el-form>
  539 + <template #footer>
  540 + <span class="dialog-footer">
  541 + <el-button type="primary" @click="dialogFormVisible = false"
  542 + >保存</el-button
  543 + >
  544 + <el-button type="info" @click="handleCancel">取消</el-button>
  545 + <el-button type="info" @click="back">返回</el-button>
  546 + </span>
  547 + </template>
  548 + </el-dialog>
  549 + </div>
  550 +</template>
... ...