房屋绑定取消绑定

张红振
1 parent f60b7a8a
Showing 9 changed files with 565 additions and 43 deletions
src/api/community/houses.ts
src/api/ownerManagement/owner.ts
src/views/community/housekeeper/changeAdmin.vue
src/views/community/housekeeper/index.vue
src/views/community/houses/buildOwner.vue
src/views/community/houses/index.vue
src/views/community/houses/relieve.vue
src/views/housekeeper/buildinMganager/index.vue
src/views/ownerManagement/owner/index.vue
@@ -25,3 +25,35 @@ export function deleteHouse(params:any) {
     params: params
   })
 }
+// 可选列表接口
+export function availableResidentList(params:any) {
+  return request({
+    method: 'get',
+    url: '/resident/availableResidentList',
+    params: params
+  })
+}
+// 可选列表接口
+export function addHouseResident(params:any) {
+  return request({
+    method: 'PUT',
+    url: '/house/addHouseResident',
+    data: params
+  })
+}
+// 已绑定列表
+export function membersByHouseId(params:any) {
+  return request({
+    method: 'get',
+    url: '/resident/membersByHouseId',
+    params: params
+  })
+}
+// 取消绑定
+export function deleteHouseResident(params:any) {
+  return request({
+    method: 'DELETE',
+    url: '/house/deleteHouseResident',
+    params: params
+  })
+}
@@ -33,11 +33,11 @@ export function deleteResident(params:any) {
     params: params
   })
 }
-// 删除
+// 取消绑定
 export function changeBinding(params:any) {
   return request({
     method: 'PUT',
-    url: '/resident/changeBinding',
+    url: '/resident/removeBinding',
     params: params
   })
 }
 <script setup lang="ts">
-import { reactive, onMounted, ref, getCurrentInstance, defineProps } from "vue";
+import {
+  reactive,
+  onMounted,
+  ref,
+  getCurrentInstance,
+  defineProps,
+  defineEmits,
+  watchEffect,
+} from "vue";
 import { getTableList } from "@/api/housekeeper/buildinMganager.ts";
 import { addOrUpBuildingHouseKeeper } from "@/api/community/housekeeper.ts";
 import Pagination from "@/components/Pagination/index.vue";
 let instance: ComponentInternalInstance | null = getCurrentInstance(); //获取app实例
+const multipleTableRef = ref<InstanceType<typeof ElTable>>();
 // 声明props
 const props = defineProps({
   buildingId: {
@@ -32,7 +41,7 @@ const data = reactive({
     { label: "选举", value: 0 },
     { label: "派驻", value: 1 },
   ],
-  selectList: []
+  selectList: [],
 });
 /**
@@ -42,7 +51,6 @@ const search = (): void =&gt; {
   data.loading = true;
   getTableList(searchData)
     .then((res) => {
-      console.log(res);
       data.tableList = res.data.data;
       data.total = res.data.data.length;
       data.loading = false;
@@ -52,29 +60,54 @@ const search = (): void =&gt; {
       data.loading = false;
     });
 };
+
+const emit = defineEmits<{
+  (e: "success"): void;
+}>();
 /**
  * 表格选择回调
  */
-const handleSelectionChange = (val:Array) => {
-  data.selectList=val.map((val: any) =>{
-    return val.id
-  })
-}
-
-const submit=()=>{
-  console.log(data.selectList.length)
-  if(data.selectList.length==0){
-    instance?.proxy?.$message.error('请选择新的楼管')
-  }else{
-    addOrUpBuildingHouseKeeper({buildingId:props.buildingId,houseKeeperIds:data.selectList[0],originalIds:props.originalIds}).then((res)=>{
-      console.log(res)
-    })
+const handleSelectionChange = (val: Array) => {
+  data.selectList = val.map((val: any) => {
+    return val.id;
+  });
+};
+/**
+ * 数据提交
+ */
+const submit = () => {
+  if (data.selectList.length == 0) {
+    instance?.proxy?.$message.error("请选择新的楼管");
+  } else if (data.selectList.length > 1) {
+    instance?.proxy?.$message.error("只能选择一个楼管");
+  } else {
+    instance?.proxy?.$messageBox
+      .confirm("确认要进行此操作？", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+      })
+      .then(() => {
+        addOrUpBuildingHouseKeeper({
+          buildingId: props.buildingId,
+          houseKeeperIds: data.selectList[0],
+          originalIds: props.originalIds,
+        }).then((res) => {
+          multipleTableRef.value!.clearSelection();
+          data.selectList = [];
+          emit("success");
+        });
+      })
+      .catch((err) => {});
+  }
+};
+watchEffect(() => {
+  if (props.buildingId) {
+    search();
   }
-}
-
-onMounted(() => {
-  search();
 });
+// onMounted(() => {
+//   search();
+// });
 </script>
 <template>
   <div>
@@ -101,8 +134,13 @@ onMounted(() =&gt; {
     </el-form>
     <!-- 表格 -->
-    <el-table border :data="data.tableList"  @selection-change="handleSelectionChange">
-    <el-table-column type="selection" width="55"/>
+    <el-table
+      border
+      :data="data.tableList"
+      @selection-change="handleSelectionChange"
+      ref="multipleTableRef"
+    >
+      <el-table-column type="selection" width="55" />
       <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>
@@ -30,8 +30,8 @@ const data = reactive({
 });
 // 更换楼管相关数据属性
 const changeObj = reactive({
-  currBuildingId:null,
-  originalId:null,
+  currBuildingId: null,
+  originalId: null,
   changeVisible: false,
 });
@@ -98,10 +98,23 @@ const dialogClose: void = () =&gt; {
  * 更换楼管
  * @param { Object } row 操作对象
  */
-const changeManage:void = (row:Object) => {
-   changeObj.currBuildingId=row.id;
-   changeObj.originalId=row.housekeeper.id
-   changeObj.changeVisible=true
+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;
 }
 /**
  * 监听路由参数变换
@@ -165,7 +178,9 @@ watchEffect(() =&gt; {
       </el-table-column>
       <el-table-column label="操作">
         <template #default="scope">
-          <el-button type="text" size="mini" @click="changeManage(scope.row)">更换楼管</el-button>
+          <el-button type="text" size="mini" @click="changeManage(scope.row)"
+            >更换楼管</el-button
+          >
           <router-link
             :to="{
               name: 'houses',
@@ -213,8 +228,13 @@ watchEffect(() =&gt; {
       v-model="changeObj.changeVisible"
       title="更换楼管"
       width="60%"
+       @close="changeClose"
     >
-      <ChangeAdmin :buildingId="changeObj.currBuildingId" :originalIds="changeObj.originalId"></ChangeAdmin>
+      <ChangeAdmin
+         @success="changeSuccess"
+        :buildingId="changeObj.currBuildingId"
+        :originalIds="changeObj.originalId"
+      ></ChangeAdmin>
     </el-dialog>
   </div>
 </template>
+<script setup lang="ts">
+import {
+  reactive,
+  onMounted,
+  ref,
+  getCurrentInstance,
+  defineProps,
+  defineEmits,
+  watchEffect,
+} from "vue";
+import {
+  availableResidentList,
+  addHouseResident,
+  membersByHouseId,
+} from "@/api/community/houses.ts";
+import { addOrUpBuildingHouseKeeper } from "@/api/community/housekeeper.ts";
+import Pagination from "@/components/Pagination/index.vue";
+
+let instance: ComponentInternalInstance | null = getCurrentInstance(); //获取app实例
+const multipleTableRef = ref<InstanceType<typeof ElTable>>();
+// 声明props
+const props = defineProps({
+  houseId: {
+    type: Number,
+    default: null,
+  },
+});
+
+// 数据筛选
+const searchData = reactive({
+  condition: "",
+  page: 1,
+  pageSize: 10,
+});
+// 展示
+const data = reactive({
+  total: 0,
+  tableList: [],
+  loading: false,
+  livingList: [
+    { label: "不在住", value: 0 },
+    { label: "在住", value: 1 },
+  ],
+  ownerList: [
+    { label: "租户", value: 0 },
+    { label: "业主", value: 1 },
+    { label: "家人", value: 2 },
+    { label: "朋友", value: 3 },
+  ],
+  selectList: [],
+});
+
+/**
+ * 列表查询
+ */
+const search = (): void => {
+  data.loading = true;
+  searchData.houseId = props.houseId;
+  availableResidentList(searchData)
+    .then((res) => {
+      data.tableList = res.data.data;
+      data.tableList.map((item) => {
+        item.houseId = props.houseId;
+        item.residentId = item.id;
+      });
+      data.total = res.data.data.length;
+      data.loading = false;
+      data.selectList = [];
+    })
+    .catch((err) => {
+      data.loading = false;
+    });
+};
+
+const emit = defineEmits<{
+  (e: "success"): void;
+}>();
+/**
+ * 表格选择回调
+ */
+const setCurrentRow = (selection, row) => {
+  if (
+    [null, undefined].includes(row.isOwner) ||
+    [null, undefined].includes(row.isLiving)
+  ) {
+    instance?.proxy?.$message.error("请完当前业主信息");
+    multipleTableRef.value.toggleRowSelection(row);
+  }
+};
+/**
+ * 全选回调
+ */
+const selectAll = (selection) => {
+  const status = selection.every((item) => {
+    return (
+      ![null, undefined].includes(item.isOwner) &&
+      ![null, undefined].includes(item.isLiving)
+    );
+  });
+  if (!status) {
+    instance?.proxy?.$message.error("请完当前业主信息");
+  }
+};
+const handleSelectionChange = (val) => {
+  data.selectList = val;
+};
+/**
+ * 数据提交
+ */
+const submit = () => {
+  if (data.selectList.length == 0) {
+    instance?.proxy?.$message.error("请选择业主");
+  } else {
+    instance?.proxy?.$messageBox
+      .confirm("确认要进行此操作？", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+      })
+      .then(() => {
+        let params = [];
+        data.selectList.map((item) => {
+          let obj = {};
+          obj.houseId = item.houseId;
+          obj.isLiving = item.isLiving;
+          obj.isOwner = item.isOwner;
+          obj.residentId = item.residentId;
+          params.push(obj);
+        });
+        addHouseResident(params).then((res) => {
+          multipleTableRef.value!.clearSelection();
+          data.selectList = [];
+          emit("success");
+        });
+      })
+      .catch((err) => {});
+  }
+};
+watchEffect(() => {
+  if (props.houseId) {
+    search();
+  }
+});
+</script>
+<template>
+  <div>
+    <!-- 搜索 -->
+    <el-form :inline="true" :model="searchData" v-loading="data.loading">
+      <el-form-item>
+        <el-input
+          style="width: 280px"
+          placeholder="请输入姓名/手机号/身份证号"
+          v-model="searchData.condition"
+          clearable
+        ></el-input>
+      </el-form-item>
+      <el-form-item
+        ><el-button type="primary" @click="search"
+          >查询</el-button
+        ></el-form-item
+      >
+      <el-form-item
+        ><el-button type="primary" @click="submit"
+          >确认选择</el-button
+        ></el-form-item
+      >
+    </el-form>
+
+    <!-- 表格 -->
+    <el-table
+      border
+      :data="data.tableList"
+      @select="setCurrentRow"
+      @select-all="selectAll"
+      @selection-change="handleSelectionChange"
+      ref="multipleTableRef"
+    >
+      <el-table-column type="selection" width="55" />
+      <el-table-column label="姓名" prop="name"></el-table-column>
+      <el-table-column label="是否居住" prop="isLiving">
+        <template #default="scope">
+          <el-select v-model="scope.row.isLiving" placeholder="请选择">
+            <el-option
+              v-for="item in data.livingList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </template>
+      </el-table-column>
+      <el-table-column label="类型" prop="isOwner">
+        <template #default="scope">
+          <el-select v-model="scope.row.isOwner" placeholder="请选择">
+            <el-option
+              v-for="item in data.ownerList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select> </template
+      ></el-table-column>
+    </el-table>
+
+    <!-- 分页 -->
+    <Pagination
+      v-if="data.total > 0"
+      :total="data.total"
+      :currentPage="searchData.pageNum"
+      :pageSize="searchData.pageSize"
+      @pageChange="search"
+    ></Pagination>
+  </div>
+</template>
+
+<style></style>
 <script setup lang="ts">
-import { reactive, onMounted, getCurrentInstance,watchEffect } from "vue";
+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 Pagination from "@/components/Pagination/index.vue";
 import { useRoute } from "vue-router";
@@ -25,8 +27,25 @@ const data = reactive({
   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 => {
@@ -38,7 +57,6 @@ const search = (): void =&gt; {
       data.loading = false;
     })
     .catch((err) => {
-      console.log(err);
       data.loading = false;
     });
 };
@@ -72,6 +90,22 @@ const remove = (houseId: number) =&gt; {
     .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(() => {
@@ -124,9 +158,19 @@ watchEffect(() =&gt; {
       <el-table-column label="使用面积" prop="useArea"></el-table-column>
       <el-table-column label="操作" width="350px">
         <template #default="scope">
-          <el-button type="text" size="mini">绑定业主</el-button>
-          <el-button type="text" size="mini">取消绑定</el-button>
-          
+          <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)"
             >查看房屋</el-button
           >
@@ -138,7 +182,7 @@ watchEffect(() =&gt; {
           >
             <el-button type="text" size="mini">查看业主</el-button>
           </router-link>
-    
+
           <el-button type="text" size="mini" @click="remove(scope.row.id)"
             >删除</el-button
           >
@@ -164,6 +208,19 @@ watchEffect(() =&gt; {
     >
       <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>
+<script setup lang="ts">
+import {
+  reactive,
+  ref,
+  getCurrentInstance,
+  defineProps,
+  defineEmits,
+  watchEffect,
+} from "vue";
+import {
+  deleteHouseResident,
+  membersByHouseId,
+} from "@/api/community/houses.ts";
+import { addOrUpBuildingHouseKeeper } from "@/api/community/housekeeper.ts";
+import Pagination from "@/components/Pagination/index.vue";
+
+let instance: ComponentInternalInstance | null = getCurrentInstance(); //获取app实例
+const multipleTableRef = ref<InstanceType<typeof ElTable>>();
+// 声明props
+const props = defineProps({
+  houseId: {
+    type: Number,
+    default: null,
+  },
+});
+
+// 数据筛选
+const searchData = reactive({
+  condition: "",
+  page: 1,
+  pageSize: 10,
+});
+// 展示
+const data = reactive({
+  total: 0,
+  tableList: [],
+  loading: false,
+  selectList: [],
+});
+
+/**
+ * 列表查询
+ */
+const search = (): void => {
+  data.loading = true;
+  searchData.houseId = props.houseId;
+  membersByHouseId(searchData)
+    .then((res) => {
+      data.tableList = res.data.data;
+      data.tableList.map((item) => {
+        item.houseId = props.houseId;
+        item.residentId = item.id;
+      });
+      data.total = res.data.data.length;
+      data.loading = false;
+      data.selectList = [];
+    })
+    .catch((err) => {
+      console.log(err);
+      data.loading = false;
+    });
+};
+
+const emit = defineEmits<{
+  (e: "success"): void;
+}>();
+
+const handleSelectionChange = (val) => {
+  data.selectList = val.map((val: any) => {
+    return val.id;
+  });
+};
+/**
+ * 数据提交
+ */
+const submit = () => {
+  if (data.selectList.length == 0) {
+    instance?.proxy?.$message.error("请选择业主");
+  } else {
+    instance?.proxy?.$messageBox
+      .confirm("确认要进行此操作？", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+      })
+      .then(() => {
+        deleteHouseResident({houseId:props.houseId,residentIds:data.selectList.toString()}).then((res) => {
+          multipleTableRef.value!.clearSelection();
+          data.selectList = [];
+          emit("success");
+        });
+      })
+      .catch((err) => {});
+  }
+};
+watchEffect(() => {
+  if (props.houseId) {
+    search();
+  }
+});
+</script>
+<template>
+  <div>
+    <!-- 搜索 -->
+    <el-form :inline="true" :model="searchData" v-loading="data.loading">
+      <el-form-item>
+        <el-input
+          style="width: 280px"
+          placeholder="请输入姓名/手机号/身份证号"
+          v-model="searchData.condition"
+          clearable
+        ></el-input>
+      </el-form-item>
+      <el-form-item
+        ><el-button type="primary" @click="search"
+          >查询</el-button
+        ></el-form-item
+      >
+      <el-form-item
+        ><el-button type="primary" @click="submit"
+          >确认选择</el-button
+        ></el-form-item
+      >
+    </el-form>
+
+    <!-- 表格 -->
+    <el-table
+      border
+      :data="data.tableList"
+      @selection-change="handleSelectionChange"
+      ref="multipleTableRef"
+    >
+      <el-table-column type="selection" width="55" />
+      <el-table-column label="姓名" prop="name"></el-table-column>
+      <el-table-column label="手机号" prop="mobile"></el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      v-if="data.total > 0"
+      :total="data.total"
+      :currentPage="searchData.pageNum"
+      :pageSize="searchData.pageSize"
+      @pageChange="search"
+    ></Pagination>
+  </div>
+</template>
+
+<style></style>
@@ -35,7 +35,6 @@ const search = (): void =&gt; {
   data.loading = true;
   getTableList(searchData)
     .then((res) => {
-      console.log(res)
       data.tableList = res.data.data;
       data.total = res.data.data.total;
       data.loading = false;
 <script setup lang="ts">
-import { reactive, onMounted, getCurrentInstance } from "vue";
+import { reactive, onMounted, getCurrentInstance,watchEffect } from "vue";
 import {
   getTableList,
   residentListByCondition,
@@ -9,8 +9,10 @@ import {
 import { parseTime } from "@/utils/tool.ts";
 import Detail from "./detail.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,
@@ -130,9 +132,19 @@ const changeData: void = () =&gt; {
 const dialogClose: void = () => {
   data.currId=null
 };
-onMounted(() => {
-  search();
+
+/**
+ * 监听路由参数变换
+ */
+watchEffect(() => {
+  if (route.path == "/owner") {
+    searchData.houseId = route.query.houseId ?? null;
+    search();
+  }
 });
+// onMounted(() => {
+//   search();
+// });
 </script>
 <template>
   <div class="app-container">