cnlive_project / cnlive-community-web-vue · Files

<script setup lang="ts">
import { reactive, onMounted, getCurrentInstance, watchEffect } from "vue";
import { getTableList, deleteHouse, getHouse } from "@/api/community/houses.ts";
import * as residence from "@/api/community/residence.ts";
import * as housekeeper from "@/api/community/housekeeper.ts";
import { parseTime } from "@/utils/tool.ts";
import Detail from "./detail.vue";
import BuildOwner from "./buildOwner.vue";
import Relieve from "./relieve.vue";
import File from "@/components/FileUpload/index.vue";
import Pagination from "@/components/Pagination/index.vue";
import { useRoute } from "vue-router";

let instance: ComponentInternalInstance | null = getCurrentInstance(); //获取app实例
let route = useRoute(); // 路由
// 数据筛选
const searchData = reactive({
  buildingId: null,
  type: 0,
  roomNumber: null,
  page: 1,
  pageSize: 10,
  neighborhoodId: null,
});
// 展示
const data = reactive({
  total: 0,
  tableList: [],
  dialogVisible: false,
  loading: false,
  title: "房屋详情",
  formObj: {},
  communityList: [],
  buildingList: [],
});
// 绑定业主相关变量
const build = reactive({
  builDialog: false,
  relieveDialog: false,
  currHouseId: null,
  relieveId: null,
});

/**
 * 绑定业主
 * @param { number } id 房屋ID
 * @param { boolean } type true:绑定 false 取消
 */
const buildPeople = (id: number, type: boolean): void => {
  // build.currHouseId = id;
  type ? (build.currHouseId = id) : (build.relieveId = id);
  type ? (build.builDialog = true) : (build.relieveDialog = true);
};
/**
 * 列表查询
 */
const search = (): void => {
  data.loading = true;
  getTableList(searchData)
    .then((res) => {
      data.tableList = res.data.data.list;
      data.total = res.data.data.total;
      data.loading = false;
    })
    .catch((err) => {
      data.loading = false;
    });
};

/**
 * 小区下拉列表查询
 */
const getSelectList = (): void => {
  residence.getTableList({ page: 1, pageSize: 10000, type: 0 }).then((res) => {
    data.communityList = res.data.data.list;
  });
};

/**
 * 监听小区改变
 */
const getHousekeeper = (event: Event): void => {
  if (event) {
    housekeeper
      .getTableList({
        page: 1,
        pageSize: 10000,
        type: 0,
        neighborhoodId: event,
      })
      .then((res) => {
        data.buildingList = res.data.data.list;
        searchData.buildingId = data.buildingList[0].id;
      });
  } else {
    data.buildingList = [];
    searchData.buildingId = null;
  }
};
/**
 * 详情
 * @param { number } houseId 房屋ID
 */
const check = (houseId: number) => {
  getHouse({ houseId: houseId }).then((res) => {
    data.formObj = res.data.data;
    data.dialogVisible = true;
  });
};

/**
 * 删除
 * @param { number } houseId 房屋ID
 */
const remove = (houseId: number) => {
  instance?.proxy?.$messageBox
    .confirm("确认要进行此操作？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
    })
    .then(() => {
      deleteHouse({ houseId: houseId }).then((res) => {
        instance?.proxy?.$message.success("操作成功"); //调用
        search();
      });
    })
    .catch((err) => {});
};
/**
 * 绑定成功回调
 */
const buildSuccess = () => {
  build.currHouseId = null;
  build.builDialog = false;
  instance?.proxy?.$message.success("操作成功");
};
/**
 * 取消绑定
 */
const relieveSuccess = () => {
  build.relieveId = null;
  build.relieveDialog = false;
  instance?.proxy?.$message.success("操作成功");
};
/**
 * 下载模板
 */
const down = () => {
  window.open(`${import.meta.env.VITE_BASE_URL}house.xlsx`);
};
/**
 * 监听路由参数变换
 */
watchEffect(() => {
  if (route.path == "/houses") {
    searchData.buildingId = route.query.buildingId ?? null;
    searchData.neighborhoodId = route.query.neighborhoodId?Number(route.query.neighborhoodId) : null;
    getHousekeeper(route.query.neighborhoodId);
    search();
  }
});

onMounted(() => {
  getSelectList();
});
</script>

<template>
  <div class="app-container">
    <!-- 搜索 -->
    <el-form :inline="true" :model="searchData" @submit.native.prevent>
      <el-form-item prop="neighborhoodId">
        <el-select
          v-model="searchData.neighborhoodId"
          placeholder="请选择所属小区"
          @change="getHousekeeper"
          clearable
        >
          <el-option
            v-for="item in data.communityList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="buildingId">
        <el-select
          v-model="searchData.buildingId"
          placeholder="请选择楼宇"
          clearable
        >
          <el-option
            v-for="item in data.buildingList"
            :key="item.id"
            :label="item.buildingName"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input
          placeholder="请输入房间号"
          v-model="searchData.roomNumber"
          clearable
        ></el-input>
      </el-form-item>

      <el-form-item
        ><el-button type="primary" @click="search"
          >查询</el-button
        ></el-form-item
      >
      <el-row>
        <el-form-item>
          <File url="house/importExcel" method="put" @success="search"></File>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="down">下载模板</el-button>
        </el-form-item>
      </el-row>
    </el-form>

    <!-- 表格 -->
    <el-table border :data="data.tableList" v-loading="data.loading">
      <el-table-column label="所属小区" prop="name" align="center">
        <template #default="scope">
          <span>{{ scope.row.building?.neighborhood?.name }}</span></template
        >
      </el-table-column>
      <el-table-column label="楼宇名称" prop="buildingName" align="center">
        <template #default="scope">
          <span>{{ scope.row.building?.buildingName }}</span></template
        >
      </el-table-column>
      <el-table-column
        label="单元"
        prop="unitNumber"
        align="center"
      ></el-table-column>
      <el-table-column
        label="房间号"
        prop="roomNumber"
        align="center"
      ></el-table-column>
      <el-table-column label="建筑面积" prop="grossArea" align="center">
        <template #default="scope">
          <span>{{
            [0, null].includes(scope.row.grossArea) ? "--" : scope.row.grossArea
          }}</span>
        </template>
      </el-table-column>

      <el-table-column label="使用面积" prop="useArea" align="center">
        <template #default="scope">
          <span>{{
            [0, null].includes(scope.row.useArea) ? "--" : scope.row.useArea
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="380px" align="center">
        <template #default="scope">
          <el-button
            type="text"
            size="mini"
            @click="buildPeople(scope.row.id, true)"
            >绑定居民</el-button
          >
          <el-button
            type="text"
            size="mini"
            @click="buildPeople(scope.row.id, false)"
            >取消绑定</el-button
          >
          <!-- <el-button
            type="text"
            size="mini"
            @click="check(scope.row.id)"
            style="margin-left: 10px"
            >查看房屋</el-button
          > -->
          <router-link
            :to="{
              name: 'owner',
              query: { houseId: scope.row.id },
            }"
          >
            <el-button type="text" size="mini" style="margin-left: 10px"
              >查看居民</el-button
            >
          </router-link>

          <el-button
            type="text"
            size="mini"
            @click="remove(scope.row.id)"
            style="margin-left: 10px"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <Pagination
      v-if="data.total > 0"
      :total="data.total"
      v-model:currentPage="searchData.page"
      v-model:pageSize="searchData.pageSize"
      @pageChange="search"
    ></Pagination>

    <!-- 详情弹框 -->
    <el-dialog
      v-model="data.dialogVisible"
      :title="data.title"
      width="40%"
      @close="data.dialogClose"
    >
      <Detail :formObj="data.formObj"></Detail>
    </el-dialog>

    <!-- 绑定业主 -->
    <el-dialog v-model="build.builDialog" title="绑定居民">
      <BuildOwner
        :houseId="build.currHouseId"
        @success="buildSuccess"
      ></BuildOwner>
    </el-dialog>

    <!-- 取消绑定 -->
    <el-dialog v-model="build.relieveDialog" title="已绑定列表">
      <Relieve :houseId="build.relieveId" @success="relieveSuccess"></Relieve>
    </el-dialog>
  </div>
</template>

<style></style>