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 { 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,
});
// 展示
const data = reactive({
  total: 0,
  tableList: [],
  dialogVisible: false,
  loading: false,
  title: "房屋详情",
  formObj: {},
});
// 绑定业主相关变量
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;
    });
};
/**
 * 详情
 * @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("操作成功");
};
/**
 * 监听路由参数变换
 */
watchEffect(() => {
  if (route.path == "/houses") {
    searchData.buildingId = route.query.buildingId ?? null;
    search();
  }
});
</script>

<template>
  <div class="app-container">
    <!-- 搜索 -->
    <el-form :inline="true" :model="searchData" v-loading="data.loading">
      <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>
          <!-- <el-button type="primary">导入</el-button>
          <el-button type="primary">导出</el-button> -->
          <File url="house/importExcel" method="put" @success="search"></File>
        </el-form-item>
      </el-row>
    </el-form>

    <!-- 表格 -->
    <el-table border :data="data.tableList">
      <el-table-column label="所属小区" prop="name">
        <template #default="scope">
          <span>{{ scope.row.building?.neighborhood?.name }}</span></template
        >
      </el-table-column>
      <el-table-column label="楼宇名称" prop="buildingName">
        <template #default="scope">
          <span>{{ scope.row.building?.buildingName }}</span></template
        >
      </el-table-column>
      <el-table-column label="单元数" prop="unitNumber"></el-table-column>
      <el-table-column label="房间号" prop="roomNumber"></el-table-column>
      <el-table-column label="建筑面积" prop="grossArea"></el-table-column>
      <el-table-column label="使用面积" prop="useArea"></el-table-column>
      <el-table-column label="操作" width="380px">
        <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>