cnlive_project / cnlive-community-web-vue · Files

<script setup lang="ts">
import { reactive, onMounted, getCurrentInstance,watchEffect } from "vue";
import {
  getTableList,
  residentListByCondition,
  deleteResident,
  changeBinding,
} from "@/api/ownerManagement/owner.ts";
import { parseTime } from "@/utils/tool.ts";
import Detail from "./detail.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({
  isOwner: null,
  startTime: "",
  endTime: "",
  houseId: null,
  condition: "",
  page: 1,
  pageSize: 10,
});
// 展示
const data = reactive({
  total: 0,
  tableList: [],
  time: [],
  dialogVisible: false,
  loading: false,
  title: "详情",
  currId: null,
  isEdit:false,
  options: [
    { label: "业主", value: 1 },
    { label: "租户", value: 2 },
    { label: "住户", value: 3 },
  ],
});

/**
 * 类型变化监听
 */
const chengeType = (e: Event) => {
  data.loading = true;
  getTableList({
    page: searchData.page,
    pageSize: searchData.pageSize,
    isOwner: e == "" ? null : e,
    houseId: searchData.houseId,
  })
    .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;
    });
};
/**
 * 列表查询
 */
const search = (): void => {
  data.loading = true;
  searchData.startTime = data.time?.[0] ?? null;
  searchData.endTime = data.time?.[1] ?? null;
  residentListByCondition(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 { number } id 唯一标识
 * @param { Boolean } isEdit 是否可编辑 
 */
const checkDetail = (id: number,isEdit:Boolean) => {
  data.currId = id;
  data.isEdit = isEdit;
  data.dialogVisible = true;
};
/**
 * 删除
 * @param { number } houseResidentId 住户ID
 * @param { type } type 类型 0:删除操作 1:取消绑定
 */
const changeInfo = (houseResidentId: number, type: number) => {
  instance?.proxy?.$messageBox
    .confirm("确认要进行此操作？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
    })
    .then(() => {
      let pram = { houseResidentId: houseResidentId };
      if (type == 0) {
        deleteResident({ houseResidentId: houseResidentId }).then((res) => {
          instance?.proxy?.$message.success("操作成功");
          search();
        });
      } else {
        changeBinding({ houseResidentId: houseResidentId }).then((res) => {
          instance?.proxy?.$message.success("操作成功"); 
          search();
        });
      }
    })
    .catch((err) => {});
};

/**
 * 组件操作成功回调
 */
const changeData: void = () => {
  data.dialogVisible = false;
  search();
};

/**
 * 弹框关闭
 */
const dialogClose: void = () => {
  data.currId=null
};

/**
 * 监听路由参数变换
 */
watchEffect(() => {
  if (route.path == "/owner") {
    searchData.houseId = route.query.houseId ?? null;
    search();
  }
});
// onMounted(() => {
//   search();
// });
</script>
<template>
  <div class="app-container">
    <!-- 搜索 -->
    <el-form :inline="true" :model="searchData" v-loading="data.loading">
      <el-form-item>
        <el-select
          v-model="searchData.isOwner"
          placeholder="请选择类型"
          clearable
          @change="chengeType"
        >
          <el-option
            v-for="item in data.options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="data.time"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-input
        style="width:280px"
          v-model="searchData.condition"
          placeholder="请输入/姓名/手机号/身份证号"
          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
          > -->
          <File url="resident/poiInsert" method="post" @success="search"></File>
        </el-form-item>
      </el-row>
    </el-form>

    <!-- 表格 -->
    <el-table border :data="data.tableList">
      <el-table-column label="房产名称">
        <template #default="scope">
          <span>{{
            `${scope.row.neighborhoodName} ${scope.row.buildingName}${scope.row.houseName}`
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="姓名" prop="name"></el-table-column>
      <el-table-column label="手机号" prop="mobile"></el-table-column>
      <el-table-column label="身份证" prop="idcard"></el-table-column>
      <el-table-column label="绑定日期" prop="bindDate">
       <template #default="scope">
          <span>{{ parseTime(new Date(scope.row.bindDate).getTime()) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="类型" prop="isOwner"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="text" size="mini" @click="checkDetail(scope.row.id,true)">
            查看</el-button
          >
          <el-button type="text" size="mini" @click="changeInfo(scope.row.id,1)"
            >取消绑定</el-button
          >
          <el-button type="text" size="mini" @click="checkDetail(scope.row.id,false)">
            编辑</el-button
          >
          <el-button type="text" size="mini" @click="changeInfo(scope.row.id,0)"
            >删除</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="80%"
      @close="dialogClose"
    >
    <Detail
        @cancel="data.dialogVisible = false"
        @success="changeData"
        :id="data.currId"
        :isEdit="data.isEdit"
      ></Detail>
    </el-dialog>
  </div>
</template>

<style></style>