cnlive_project / cnlive-community-web-vue · Files

<script setup lang="ts">
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
import {
  propertyFeeList,
  propertyFeeDelete,
  propertyFeeSave,
  propertyFeeShift,
  propertyFeeSure,
  propertyFeeSureFast,
  propertyFeeImport,
  propertyFeeExport,
  propertyFeePaper,
} from "@/api/fee";
import { getTableList } from "@/api/community/residence";
import { getTableList as getBuildings } from "@/api/community/housekeeper";
import { getUnitList } from "@/api/community/houses";
import { parseTime, globalFilters, exportData } from "@/utils/tool";
import { price } from "@/utils/validate";
import Pagination from "@/components/Pagination/index.vue";
import File from "@/components/FileUpload/index.vue";
import Paper from "./paper.vue";
import { statusData, payData, payStatus } from "./config";
import { ElMessageBox, ElMessage } from "element-plus";
import type { ElTable } from "element-plus";
interface Form {
  page: number;
  pageSize: number;
  neighborhoodId: number;
  buildingId: number;
  unitNumber: number;
  payStatus: number;
  payType: number;
  status: number;
  payStartTime: string;
  payEndTime: string;
  endTime: string;
}
interface Params {
  total: number;
  query: Form;
}
interface Data {
  loading: boolean;
  list: any[] | null;
  params: Params;
}
/**
 * 单价校验
 * @param {object} rules 验证规则
 * @param {string} value 待验证数值
 * @callback checkPrice~checkCallback
 */
const checkPrice = (rules, value, callback) => {
  if (price(value)) {
    callback();
  } else {
    callback(new Error("请输入正确的数值，小数点后最多两位数字"));
  }
};
const multipleTableRef = ref<InstanceType<typeof ElTable>>();
const ruleFormRef = ref<InstanceType<typeof ElForm>>();
let instance: ComponentInternalInstance | null = getCurrentInstance();
let multipleSelection = ref<any[]>([]);
const value1 = ref([]);
const rules = reactive({
  fakeFee: [
    {
      required: false,
      message: "请输入待缴金额",
      trigger: "change",
    },
    {
      validator: checkPrice,
    },
  ],
});
let form = reactive({
  data: {},
  loading: false,
  visible: false,
});
let data = reactive({
  list: [],
  neighborhoods: [],
  buildings: [],
  units: [],
  paperData: [],
  loading: false,
  paperVisible: false,
  totals: 0, // 一键确认按钮上的总金额数
  params: {
    total: 0, // 分页数据总条数
    query: {
      page: 1,
      pageSize: 10,
      neighborhoodId: null,
      buildingId: null,
      unitNumber: null,
      payStatus: null,
      payType: null,
      status: null,
      payStartTime: null,
      payEndTime: null,
      endTime: null,
    },
  },
});
/**
 * 表格选中响应
 * @param {array} data 选中的一条数据
 */
const handleSelectionChange = (data: array) => {
  multipleSelection.value = data;
};
/**
 * 时间组件回调
 * @param {array} value [开始时间, 结束时间]
 * @param {string} args 区分组件的tag，筛选search，表单form
 */
const handleTimeChange = (value: array, args: string) => {
  if (args === "form") {
    form.data.beginTime = value ? value[0] : "";
    form.data.endTime = value ? value[1] : "";
  } else {
    data.params.query.payStartTime = value ? value[0] : "";
    data.params.query.payEndTime = value ? value[1] : "";
    getList();
  }
};
/**
 * 小区改变获取楼宇
 * @param {number} value 小区id
 * @param {number} pageSize 分页
 */
const handleChange = (value: number, pageSize: number) => {
  getList();
  if (value) {
    getBuildings({
      neighborhoodId: value,
      page: 1,
      pageSize: pageSize,
      type: 0,
    }).then((res) => {
      data.buildings = res?.data?.data?.list;
      if (res?.data?.data?.total > pageSize) {
        handleChange(value, res?.data?.data?.total);
      }
    });
  } else {
    data.params.query.buildingId = null;
    data.params.query.unitNumber = null;
    data.units = [];
    data.buildings = [];
  }
};
/**
 * 缴费状态改变
 * @param {object} obj 缴费状态改变
 */
const handlePay = (value: number | null) => {
  if (!value) {
    data.params.query.payType = null;
  }
  getList();
};
/**
 * 查看回执单
 * @param {object} obj 一条表格对象
 */
const paper = (obj: any) => {
  propertyFeePaper({
    id: obj.id,
  }).then((res) => {
    data.paperData = res?.data?.data;
    data.paperVisible = true;
  });
};
/**
 * 楼宇改变获取单元数
 * @param {number} value 楼宇id
 */
const handleBuildingChange = (value: number) => {
  getList();
  if (value) {
    getUnitList({
      buildingId: value,
    }).then((res) => {
      data.units = res?.data?.data;
    });
  } else {
    data.params.query.unitNumber = null;
    data.units = [];
  }
};
/**
 * 删除
 * @param {object} obj 要删除的数据对象
 */
const handleDelete = (obj: any) => {
  // 未确认未支付才能删除
  if (
    multipleSelection.value.find(
      (i) => !(~~i.status === 0 && ~~i.payStatus === 0)
    )
  ) {
    ElMessage({
      message: "包含不可删除项，请检查!",
      type: "error",
    });
    return false;
  }
  ElMessageBox.confirm("确认删除吗?", "警告", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      try {
        let res = await propertyFeeDelete({
          ids: obj.id,
        });
        if (res?.data) {
          ElMessage({
            type: "success",
            message: "操作成功",
          });
          getList();
        } else {
          ElMessage({
            type: "error",
            message: "操作失败",
          });
        }
      } catch (e) {
        console.log(e);
      }
    })
    .catch(() => {
      console.log("取消");
    });
};
/**
 * 列表
 */
const getList = async () => {
  data.loading = true;
  try {
    const res = await propertyFeeList(data.params.query);
    data.list = res?.data?.data?.list?.list;
    data.params.total = res?.data?.data?.list?.total;
    // 一键确认按钮上的总金额数
    data.totals = res?.data?.data?.totalFee ?? 0;
  } catch (e) {
    console.log(e);
  } finally {
    data.loading = false;
  }
};
/**
 * 查询条件重置
 */
const reset = () => {
  data.params.query = {};
  data.params.query.page = 1;
  data.params.query.pageSize = 10;
  value1.value = [];
  getList();
};
/**
 * 下载模板
 */
const download = () => {
  window.open(`${import.meta.env.VITE_BASE_URL}fee.xlsx`);
};
/**
 * 导出文件
 */
const exportFile = () => {
  propertyFeeExport(data.params.query)
    .then((res) => {
      exportData(res, `物业费`);
    })
    .catch((error) => {
      console.log(error);
    });
};
/**
 * 确认
 */
const sure = () => {
  ElMessageBox.confirm(
    "是否确认将已选账单同步至用户端(确认后将无法修改)?",
    "确认，请仔细核对账单！ ",
    {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
    }
  )
    .then((res) => {
      propertyFeeSure({
        ids: multipleSelection.value.map((i) => i.id).join(","),
      }).then((res) => {
        if (res) {
          ElMessage({
            type: "success",
            message: "操作成功",
          });
          getList();
        } else {
          ElMessage({
            type: "error",
            message: "操作失败",
          });
        }
      });
    })
    .catch((error) => {
      console.log(error);
    });
};
/**
 * 一键确认
 */
const sureAll = () => {
  let msg = `是否确认将${
    data.params.query.neighborhoodId ? data.list[0].nbhdName : "全部小区"
  }${data.params.query.buildingId ? data.list[0].buildingName : ""}${
    data.params.query.unitNumber ? data.params.query.unitNumber + "单元" : ""
  }所有账单同步至用户端(确认后将无法修改)?`;
  ElMessageBox.confirm(msg, "一键确认，请仔细核对账单！ ", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then((res) => {
      propertyFeeSureFast(data.params.query).then((res) => {
        if (res.data.data !== false) {
          ElMessage({
            type: "success",
            message: "操作成功",
          });
          getList();
        } else {
          ElMessage({
            type: "error",
            message: "操作失败",
          });
        }
      });
    })
    .catch((error) => {
      console.log(error);
    });
};
/**
 * 变更付费状态
 * @param {object} obj 要变更的数据对象
 * @param {number} type 1为现金缴费，0为撤销现金缴费
 */
const shiftPayment = (obj: any, type: number) => {
  let msg = `是否将【${obj.nbhdName}】小区【${obj.buildingName}】【${
    obj.unitNumber
  }】单元【${obj.roomNumber}】房间账单${type ? "设置为" : "撤回"}现金缴费?`;
  ElMessageBox.confirm(msg, `${type ? "" : "撤回"}现金缴费，请谨慎操作！`, {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then((res) => {
      propertyFeeShift({
        id: obj.id,
      })
        .then((res) => {
          if (res) {
            instance?.proxy?.$message.success("操作成功");
            getList();
          } else {
            instance?.proxy?.$message.error("操作失败");
          }
        })
        .catch((error) => {
          console.log(error);
        });
    })
    .catch((error) => {
      console.log(error);
    });
};
/**
 * 关闭表单蒙版
 */
const handleClose = () => {
  form.data = {};
  getList();
};
/**
 * 编辑
 */
const edit = (obj: any) => {
  form.data = obj;
  form.visible = true;
  form.data.fakeFee = (obj.totalFee / 100).toFixed(2);
  form.data.period = [obj.beginTime, obj.endTime];
};
/**
 * 表单取消
 */
const handleCancel = () => {
  form.visible = false;
};
/**
 * 表单提交
 */
const submitForm = (formEl: InstanceType<typeof ElForm> | undefined) => {
  form.loading = true;
  if (!formEl) return;
  formEl.validate(async (valid) => {
    if (valid) {
      form.data.totalFee = form.data.fakeFee * 100;
      propertyFeeSave(form.data)
        .then((res) => {
          getList();
          form.visible = false;
        })
        .catch((error) => {
          console.log(error);
          form.loading = false;
        });
    } else {
      instance?.proxy?.$message.error("请检查表单格式");
      form.loading = false;
      return false;
    }
  });
};
// 获取小区、楼宇、单元
const getData = (pageSize = 100) => {
  getTableList({
    page: 1,
    pageSize: pageSize,
    type: 0,
  }).then((res) => {
    data.neighborhoods = res?.data?.data?.list;
    if (res?.data?.data?.total > pageSize) {
      getData(res?.data?.data?.total);
    }
  });
};
onMounted(() => {
  getList();
  getData();
});
</script>
<template>
  <div class="page-container">
    <h1>物业费管理</h1>
    <el-row style="padding-bottom: 20px">
      <el-form :inline="true" label-width="70px">
        <el-form-item label="小区">
          <el-select
            v-model="data.params.query.neighborhoodId"
            placeholder="请选择小区"
            @change="handleChange($event, 100)"
            clearable
          >
            <el-option
              v-for="(item, index) in data.neighborhoods"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="楼宇">
          <el-select
            v-model="data.params.query.buildingId"
            placeholder="请选择楼宇"
            value-key="key"
            :disabled="!data.buildings.length"
            @change="handleBuildingChange($event)"
            clearable
          >
            <el-option
              v-for="(item, index) in data.buildings"
              :label="item.buildingName"
              :key="item"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="单元">
          <el-select
            v-model="data.params.query.unitNumber"
            placeholder="请选择单元"
            :disabled="!data.units.length"
            @change="getList"
            clearable
          >
            <el-option
              v-for="(item, index) in data.units"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="缴费状态">
          <el-select
            v-model="data.params.query.payStatus"
            placeholder="请选择缴费状态"
            @change="handlePay"
            clearable
          >
            <el-option
              v-for="(item, index) in statusData"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="缴费方式">
          <el-select
            v-model="data.params.query.payType"
            placeholder="请选择缴费方式"
            @change="getList"
            :disabled="~~data.params.query.payStatus === 0"
            clearable
          >
            <el-option
              v-for="(item, index) in payData"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="确认状态">
          <el-select
            v-model="data.params.query.status"
            placeholder="请选择确认状态"
            @change="getList"
            clearable
          >
            <el-option
              v-for="(item, index) in payStatus"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="到期时间">
          <el-date-picker
            v-model="data.params.query.endTime"
            type="month"
            value-format="YYYY-MM-DD"
            @change="getList"
            placeholder="到期月份"
          />
        </el-form-item>
        <el-form-item label="缴费时间">
          <el-date-picker
            v-model="value1"
            type="datetimerange"
            range-separator="至"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            @change="handleTimeChange($event, 'search')"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getList">筛选</el-button>
          <el-button type="info" @click="reset">重置</el-button>
        </el-form-item>
        <el-row>
          <el-form-item>
            <File
              url="housePropertyFee/importExcel"
              method="put"
              @success="getList"
            ></File>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="exportFile">导出</el-button>
            <el-button type="primary" @click="download">下载模板</el-button>
            <el-button
              type="success"
              @click="sure"
              :disabled="!multipleSelection.length"
              >确认</el-button
            >
            <el-button
              type="success"
              @click="sureAll"
              :disabled="!data.list.length"
              >一键确认(总计：{{ (data.totals / 100).toFixed(2) }}￥)</el-button
            >
            <el-button
              type="danger"
              @click="
                handleDelete({
                  id: multipleSelection.map((i) => i.id).join(','),
                })
              "
              :disabled="!multipleSelection.length"
              >批量删除</el-button
            >
          </el-form-item>
        </el-row>
      </el-form>
    </el-row>
    <el-table
      :data="data.list"
      style="width: 100%"
      border
      v-loading="data.loading"
      align="center"
      element-loading-text="拼命加载中"
      ref="multipleTableRef"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" align="center" />
      <el-table-column prop="id" label="ID" align="center"></el-table-column>
      <el-table-column
        prop="nbhdName"
        label="所属小区"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="buildingName"
        label="楼宇名称"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="unitNumber"
        label="单元"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="roomNumber"
        label="房间号"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="grossArea"
        label="房屋面积(㎡)"
        align="center"
      ></el-table-column>
      <el-table-column prop="id" label="账单周期" align="center">
        <template #default="scope">
          {{ parseTime(new Date(scope.row.beginTime).getTime()).slice(0, 7) }} ~
          {{ parseTime(new Date(scope.row.endTime).getTime()).slice(0, 7) }}
        </template>
      </el-table-column>
      <el-table-column prop="totalFee" label="待缴金额(￥)" align="center">
        <template #default="scope">
          {{ (~~scope.row.totalFee / 100).toFixed(2) }}
        </template>
      </el-table-column>
      <el-table-column prop="payStatus" label="缴费状态" align="center">
        <template #default="scope">
          {{ globalFilters(scope.row.payStatus, statusData) }}
        </template>
      </el-table-column>
      <el-table-column prop="payTime" label="缴费时间" align="center">
        <template #default="scope">
          <!-- 现金缴费，缴费时间精确到天。 线上缴费，缴费时间精确到秒。 -->
          <span v-show="~~scope.row.payType === 1">{{
            scope.row.payTime
              ? parseTime(new Date(scope.row.payTime).getTime()).slice(0, 10)
              : ""
          }}</span>
          <span v-show="~~scope.row.payType === 2">{{
            scope.row.payTime
              ? parseTime(new Date(scope.row.payTime).getTime())
              : ""
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="payType" label="缴费方式" align="center">
        <template #default="scope">
          {{ globalFilters(scope.row.payType, payData) }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="确认状态" align="center">
        <template #default="scope">
          {{ globalFilters(scope.row.status, payStatus) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="residentName"
        label="缴费人"
        align="center"
      ></el-table-column>
      <el-table-column prop="id" label="操作" align="center" fixed="right">
        <!-- status 确认状态 0未1已 -->
        <!-- payStatus 支付状态 0未1已 -->
        <!-- payType 支付方式 1现金 2线上  -->

        <!-- 未缴纳 已确认 现金缴费 -->
        <!-- 未缴纳 未确认 现金缴费&&编辑&&删除 -->
        <!-- 已缴纳 已确认 线上 回执单 -->
        <!-- 已缴纳 已确认 现金 撤回现金&&回执单 -->
        <!-- 已缴纳 未确认 现金 撤回现金&&回执单 -->
        <template #default="scope">
          <el-button
            type="text"
            @click="shiftPayment(scope.row, 0)"
            v-show="~~scope.row.payStatus === 1 && ~~scope.row.payType === 1"
            >撤回现金缴费</el-button
          >
          <el-button
            type="text"
            @click="shiftPayment(scope.row, 1)"
            v-show="~~scope.row.payStatus === 0 && ~~scope.row.status === 1"
            >现金缴费</el-button
          >
          <el-button
            type="text"
            @click="paper(scope.row)"
            v-show="~~scope.row.payStatus === 1 && ~~scope.row.payType === 2"
            >回执单</el-button
          >
          <el-button
            type="text"
            @click="edit(scope.row)"
            v-show="~~scope.row.status === 0 && ~~scope.row.payStatus === 0"
            >编辑</el-button
          >
          <el-button
            type="text"
            @click="handleDelete(scope.row)"
            v-show="~~scope.row.status === 0 && ~~scope.row.payStatus === 0"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <Pagination
      :total="data.params.total"
      v-model:currentPage="data.params.query.page"
      v-model:pageSize="data.params.query.pageSize"
      @pageChange="getList"
    ></Pagination>
    <el-dialog v-model="data.paperVisible" title="回执单">
      <Paper :paperData="data.paperData"></Paper>
    </el-dialog>
    <el-dialog v-model="form.visible" title="编辑" @close="handleClose">
      <el-form
        :model="form.data"
        :inline="true"
        :rules="rules"
        ref="ruleFormRef"
        label-width="120px"
        class="card-form"
      >
        <el-form-item label="所属小区">
          <el-input v-model="form.data.nbhdName" disabled />
        </el-form-item>
        <el-form-item label="楼宇名称">
          <el-input v-model="form.data.buildingName" disabled />
        </el-form-item>
        <el-form-item label="房间号">
          <el-input v-model="form.data.roomNumber" disabled />
        </el-form-item>
        <el-form-item label="单元">
          <el-input v-model="form.data.unitNumber" disabled />
        </el-form-item>
        <el-form-item label="面积">
          <el-input v-model="form.data.grossArea" disabled>
            <template #append>㎡</template>
          </el-input>
        </el-form-item>
        <el-form-item label="费用周期">
          <el-date-picker
            v-model="form.data.period"
            type="monthrange"
            range-separator="至"
            @change="handleTimeChange($event, 'form')"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </el-form-item>
        <el-form-item label="待缴金额" prop="fakeFee">
          <el-input v-model="form.data.fakeFee" placeholder="待缴金额">
            <template #append>元</template>
          </el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click.prevent="submitForm(ruleFormRef)"
            >保存</el-button
          >
          <el-button type="info" @click="handleCancel">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>