cnlive_project / cnlive-community-web-vue · Files

<script setup lang="ts">
import { reactive, onMounted, ref, getCurrentInstance, watchEffect } from "vue";
import { getTableList, deleteBuilding } from "@/api/community/housekeeper.ts";
import { parseTime } from "@/utils/tool.ts";
import HouseDetail from "./houseDetail.vue";
import ChangeAdmin from "./changeAdmin.vue";
import Pagination from "@/components/Pagination/index.vue";
import { useRoute } from "vue-router";

let instance: ComponentInternalInstance | null = getCurrentInstance(); //获取app实例
const houseDetailRef = ref(null);
let route = useRoute(); // 路由

// 数据筛选
const searchData = reactive({
  neighborhoodId: null,
  type: 0,
  name: null,
  page: 1,
  pageSize: 10,
});
// 展示
const data = reactive({
  total: 0,
  tableList: [],
  dialogVisible: false,
  loading: false,
  title: "新增楼宇",
  formObj: {},
});
// 更换楼管相关数据属性
const changeObj = reactive({
  currBuildingId: null,
  originalId: null,
  changeVisible: false,
});

/**
 * 列表查询
 */
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) => {
      console.log(err);
      data.loading = false;
    });
};
/**
 * 编辑
 * @param { Object } 列表对象
 */
const edit = (row: Object) => {
  data.title = "编辑楼宇";
  data.formObj = JSON.parse(JSON.stringify(row))
  data.dialogVisible = true;
};
/**
 * 删除
 * @param { number } buildingId 楼宇ID
 */
const remove = (buildingId: number) => {
  instance?.proxy?.$messageBox
    .confirm("确认要进行此操作？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
    })
    .then(() => {
      deleteBuilding({ buildingId: buildingId }).then((res) => {
        instance?.proxy?.$message.success("操作成功"); //调用
        search();
      });
    })
    .catch((err) => {});
};
/**
 * 组件操作成功回调
 */
const changeData: void = () => {
  data.dialogVisible = false;
  search();
};

/**
 * 弹框关闭
 */
const dialogClose: void = () => {
  data.title = "新增楼宇";
  data.formObj = {};
  houseDetailRef.value.resetForm();
};
/**
 * 更换楼管
 * @param { Object } row 操作对象
 */
const changeManage: void = (row: Object) => {
  changeObj.currBuildingId = row.id;
  changeObj.originalId = row.housekeeper?.id;
  changeObj.changeVisible = true;
};

/**
 * 更换楼管回调
 */
const changeSuccess: void = () => {
  instance?.proxy?.$message.success("操作成功");
  changeObj.changeVisible = false;
  search();
};
const changeClose = () => {
  changeObj.currBuildingId = null;
  changeObj.originalId = null;
};
/**
 * 监听路由参数变换
 */
watchEffect(() => {
  if (route.path == "/housekeeper") {
    searchData.neighborhoodId = route.query.neighborhoodId ?? 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.name"
          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> -->
          <el-button type="primary" @click="data.dialogVisible = true"
            >新增</el-button
          >
        </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.neighborhood.name }}</span></template
        >
      </el-table-column>
      <el-table-column label="楼宇名称" prop="buildingName"></el-table-column>
      <el-table-column label="单元" prop="unitCount"></el-table-column>
      <el-table-column label="总房屋数量" prop="houseCount"></el-table-column>
      <el-table-column label="建成日期" prop="createTime">
        <template #default="scope">
          <span>{{ parseTime(new Date(scope.row.createTime).getTime()) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="建筑面积" prop="grossArea"></el-table-column>
      <el-table-column label="使用面积" prop="employArea"></el-table-column>
      <el-table-column label="楼管姓名">
        <template #default="scope">
          <span>{{ scope.row.housekeeper?.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="text" size="mini" @click="changeManage(scope.row)"
            >更换楼管</el-button
          >
          <router-link
            :to="{
              name: 'houses',
              query: { buildingId: scope.row.id },
            }"
          >
            <el-button type="text" size="mini">房屋管理</el-button>
          </router-link>
          <el-button type="text" size="mini" @click="edit(scope.row)"
            >编辑</el-button
          >
          <el-button type="text" size="mini" @click="remove(scope.row.id)"
            >删除</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="60%"
      @close="dialogClose"
    >
      <HouseDetail
        ref="houseDetailRef"
        @cancel="data.dialogVisible = false"
        @success="changeData"
        :formObj="data.formObj"
      ></HouseDetail>
    </el-dialog>

    <!-- 更换楼管 -->
    <el-dialog
      v-model="changeObj.changeVisible"
      title="更换楼管"
      width="60%"
      @close="changeClose"
    >
      <ChangeAdmin
        @success="changeSuccess"
        :buildingId="changeObj.currBuildingId"
        :originalIds="changeObj.originalId"
      ></ChangeAdmin>
    </el-dialog>
  </div>
</template>

<style></style>