新增业主管理

张红振
1 parent 3043763b
Showing 5 changed files with 372 additions and 54 deletions
src/api/ownerManagement/owner.ts
src/views/community/housekeeper/index.vue
src/views/community/houses/index.vue
src/views/ownerManagement/owner/detail.vue
src/views/ownerManagement/owner/index.vue
 import request from '../request'
  
-// 列表查询
+// 根据类型查询列表
 export function getTableList(params:any) {
   return request({
     method: 'get',
@@ -8,6 +8,14 @@ export function getTableList(params:any) {
     params: params
   })
 }
+// 根据条件查询列表
+export function residentListByCondition(params:any) {
+  return request({
+    method: 'get',
+    url: '/resident/residentListByCondition',
+    params: params
+  })
+}
  
 // 房屋信息
 export function getHouse(params:any) {
@@ -18,10 +26,34 @@ export function getHouse(params:any) {
   })
 }
 // 删除
-export function deleteHouse(params:any) {
+export function deleteResident(params:any) {
   return request({
     method: 'delete',
-    url: '/house/deleteHouse',
+    url: '/resident/deleteResident',
+    params: params
+  })
+}
+// 删除
+export function changeBinding(params:any) {
+  return request({
+    method: 'PUT',
+    url: '/resident/changeBinding',
     params: params
   })
 }
+// 获取详情
+export function getResidentById(params:any) {
+  return request({
+    method: 'get',
+    url: '/resident/getResidentById',
+    params: params
+  })
+}
+// 修改
+export function update(params:any) {
+  return request({
+    method: 'post',
+    url: '/resident/update',
+    data: params
+  })
+}
@@ -37,7 +37,6 @@ const search = (): void =&gt; {
     .then((res) => {
       data.tableList = res.data.data.list;
       data.total = res.data.data.total;
-      searchData.pageSize = res.data.data.pageSize;
       data.loading = false;
     })
     .catch((err) => {
@@ -89,9 +88,7 @@ const dialogClose: void = () =&gt; {
   houseDetailRef.value.resetForm();
 };
 onMounted(() => {
-  searchData.neighborhoodId = route.query.neighborhoodId
-    ? route.query.neighborhoodId
-    : null;
+  searchData.neighborhoodId = route.query.neighborhoodId??null;
   search();
 });
 </script>
@@ -74,9 +74,7 @@ const remove = (houseId: number) =&gt; {
 };
  
 onMounted(() => {
-  searchData.buildingId = route.query.buildingId
-    ? route.query.buildingId
-    : null;
+  searchData.buildingId = route.query.buildingId??null;
   search();
 });
 </script>
+<script setup lang="ts">
+import { reactive, onMounted, watchEffect } from "vue";
+import { getResidentById, update } from "@/api/ownerManagement/owner.ts";
+
+// 声明props
+const props = defineProps({
+  id: {
+    type: Number,
+    default: null,
+  },
+  isEdit: {
+    type: Boolean,
+    default: false,
+  },
+});
+const data = reactive({
+  formObj: {},
+  genderList: [
+    { label: "男", value: 1 },
+    { label: "女", value: 0 },
+  ],
+  isMarriedList: [
+    { label: "未婚", value: 0 },
+    { label: "已婚", value: 1 },
+    { label: "离异", value: 2 },
+    { label: "丧偶", value: 3 },
+  ],
+  politicalList: [
+    { label: "群众", value: 0 },
+    { label: "党员", value: 1 },
+    { label: "团员", value: 2 },
+  ],
+  censusList: [
+    { label: "非城镇户口", value: 0 },
+    { label: "城镇户口", value: 1 },
+    { label: "外阜", value: 2 },
+  ],
+});
+
+/**
+ * 获取详情
+ * @param { number } id 住户id
+ *
+ */
+const getData = (id: number) => {
+  getResidentById({ id: id }).then((res) => {
+    data.formObj = res.data.data[0];
+  });
+};
+
+/**
+ *
+ * 数据提交
+ */
+const submit = () => {
+  update(data.formObj).then((res) => {
+    console.log(res);
+  });
+};
+/**
+ * 监听改变
+ */
+watchEffect((newValue, oldVlaue) => {
+  if (props.id) {
+    getData(props.id);
+  }
+});
+</script>
+
+<template>
+  <el-form :model="formObj" label-width="120px" :inline="true">
+    <el-form-item label="所属小区:">
+      <el-input v-model="data.formObj.neighborhoodName" disabled></el-input>
+    </el-form-item>
+    <el-form-item label="楼宇名称:" prop="buildingName">
+      <el-input v-model="data.formObj.buildingName" disabled></el-input>
+    </el-form-item>
+    <el-form-item label="姓名:" prop="unitCount">
+      <el-input v-model="data.formObj.name" :disabled="props.isEdit"></el-input>
+    </el-form-item>
+    <el-form-item label="房间号:" prop="unitCount">
+      <el-input v-model="data.formObj.houseName" disabled></el-input>
+    </el-form-item>
+    <el-form-item label="身份证号:" prop="idcard">
+      <el-input
+        v-model="data.formObj.idcard"
+        :disabled="props.isEdit"
+      ></el-input>
+    </el-form-item>
+
+    <el-form-item label="手机号:" prop="grossArea">
+      <el-input
+        v-model="data.formObj.mobile"
+        :disabled="props.isEdit"
+      ></el-input>
+    </el-form-item>
+    <el-form-item label="出生日期:" prop="employArea">
+      <el-date-picker
+        :disabled="props.isEdit"
+        style="width: 200px"
+        v-model="data.formObj.birthdate"
+        type="date"
+        placeholder="Select date and time"
+      >
+      </el-date-picker>
+    </el-form-item>
+    <el-form-item label="性别:" prop="employArea">
+      <el-select
+        disabled
+        v-model="data.formObj.gender"
+        placeholder="请选择"
+        style="width: 200px"
+      >
+        <el-option
+          v-for="item in data.genderList"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="民族:" prop="employArea">
+      <el-input v-model="data.formObj.nationality" disabled></el-input>
+    </el-form-item>
+    <el-form-item label="户籍所在地:" prop="employArea">
+      <el-input
+        v-model="data.formObj.censusRegister"
+        :disabled="props.isEdit"
+      ></el-input>
+    </el-form-item>
+    <el-form-item label="婚姻状态:" prop="employArea">
+      <el-select
+        :disabled="props.isEdit"
+        v-model="data.formObj.isMarried"
+        placeholder="请选择"
+        style="width: 200px"
+      >
+        <el-option
+          v-for="item in data.isMarriedList"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="政治面貌:" prop="employArea">
+      <el-select
+        v-model="data.formObj.politicalStatus"
+        placeholder="请选择"
+        style="width: 200px"
+        :disabled="props.isEdit"
+      >
+        <el-option
+          v-for="item in data.politicalList"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="户口类型:" prop="employArea">
+      <el-select
+        v-model="data.formObj.censusType"
+        placeholder="请选择"
+        style="width: 200px"
+        :disabled="props.isEdit"
+      >
+        <el-option
+          v-for="item in data.censusList"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="居住类型:" prop="employArea">
+      <el-input
+        v-model="data.formObj.useArea"
+        :disabled="props.isEdit"
+      ></el-input>
+    </el-form-item>
+    <el-form-item label="现住地址:" prop="employArea">
+      <el-input
+        v-model="data.formObj.location"
+        :disabled="props.isEdit"
+      ></el-input>
+    </el-form-item>
+    <el-form-item label="暂住证号:" prop="employArea">
+      <el-input
+        v-model="data.formObj.residencePermit"
+        :disabled="props.isEdit"
+      ></el-input>
+    </el-form-item>
+    <el-row>
+      <el-form-item>
+        <el-button type="primary" @click="submit">保存</el-button>
+      </el-form-item>
+    </el-row>
+  </el-form>
+</template>
 <script setup lang="ts">
 import { reactive, onMounted, getCurrentInstance } from "vue";
-import { getTableList } from "@/api/ownerManagement/owner.ts";
-// import CommunityDetail from "./communityDetail.vue";
+import {
+  getTableList,
+  residentListByCondition,
+  deleteResident,
+  changeBinding,
+} from "@/api/ownerManagement/owner.ts";
+import Detail from "./detail.vue";
 import Pagination from "@/components/Pagination/index.vue";
  
 let instance: ComponentInternalInstance | null = getCurrentInstance(); //获取app实例
 // 数据筛选
 const searchData = reactive({
   isOwner: null,
-  pageNum: 1,
+  startTime: "",
+  endTime: "",
+  houseId: null,
+  condition: "",
+  page: 1,
   pageSize: 10,
 });
 // 展示
 const data = reactive({
   total: 0,
   tableList: [],
+  time: [],
   dialogVisible: false,
   loading: false,
-  title: "新增小区",
-  formObj: {},
-  options:[
-    {label:'业主',value:1},
-    {label:'租户',value:2},
-    {label:'住户',value:3}
-  ]
+  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;
-  getTableList(searchData)
+  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;
-      searchData.pageSize = res.data.data.pageSize;
       data.loading = false;
     })
     .catch((err) => {
@@ -43,24 +76,45 @@ const search = (): void =&gt; {
       data.loading = false;
     });
 };
+
 /**
  * 编辑
- * @param { Object } 列表对象
+ * @param { number } id 唯一标识
+ * @param { Boolean } isEdit 是否可编辑 
  */
-const edit = (row: Object) => {
-  data.formObj = row;
+const checkDetail = (id: number,isEdit:Boolean) => {
+  data.currId = id;
+  data.isEdit = isEdit;
   data.dialogVisible = true;
 };
 /**
  * 删除
- * @param { number } neighborhoodId 小区ID
+ * @param { number } houseResidentId 住户ID
+ * @param { type } type 类型 0:删除操作 1:取消绑定
  */
-const remove = (neighborhoodId: number) => {
-  // deleteNeighborhood({ neighborhoodId: neighborhoodId }).then((res) => {
-  //   instance?.proxy?.$message.success('操作成功')//调用
-  //   search();
-  // });
+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) => {});
 };
+
 /**
  * 组件操作成功回调
  */
@@ -73,10 +127,9 @@ const changeData: void = () =&gt; {
  * 弹框关闭
  */
 const dialogClose: void = () => {
-  data.formObj = {};
+  data.currId=null
 };
 onMounted(() => {
-  console.log("11");
   search();
 });
 </script>
@@ -85,7 +138,12 @@ onMounted(() =&gt; {
     <!-- 搜索 -->
     <el-form :inline="true" :model="searchData" v-loading="data.loading">
       <el-form-item>
-        <el-select v-model="searchData.isOwner" placeholder="请选择类型">
+        <el-select
+          v-model="searchData.isOwner"
+          placeholder="请选择类型"
+          clearable
+          @change="chengeType"
+        >
           <el-option
             v-for="item in data.options"
             :key="item.value"
@@ -95,6 +153,23 @@ onMounted(() =&gt; {
           </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
+          v-model="searchData.condition"
+          placeholder="请输入/姓名/手机号/身份证号"
+          clearable
+        ></el-input>
+      </el-form-item>
       <el-form-item
         ><el-button type="primary" @click="search"
           >查询</el-button
@@ -102,32 +177,43 @@ onMounted(() =&gt; {
       >
       <el-row>
         <el-form-item>
-          <el-button type="primary">导入</el-button>
+          <!-- <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"></el-table-column>
-      <el-table-column label="姓名" prop="buildingCount"></el-table-column>
-      <el-table-column label="手机号" prop="storeroomCount"></el-table-column>
-      <el-table-column label="身份证" prop="truckSpaceCount"></el-table-column>
-      <el-table-column label="绑定日期" prop="locality"></el-table-column>
-      <el-table-column label="类型" prop="address"></el-table-column>
+      <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"></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="edit(scope.row)"
-            >编辑</el-button
+          <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="remove(scope.row.id)"
+          <el-button type="text" size="mini" @click="changeInfo(scope.row.id,0)"
             >删除</el-button
           >
-          <el-button type="text" size="mini">楼宇管理</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -136,24 +222,25 @@ onMounted(() =&gt; {
     <Pagination
       v-if="data.total > 0"
       :total="data.total"
-      :currentPage="searchData.pageNum"
+      :currentPage="searchData.page"
       :pageSize="searchData.pageSize"
       @pageChange="search"
     ></Pagination>
  
     <!-- 详情弹框 -->
-    <!-- <el-dialog
+    <el-dialog
       v-model="data.dialogVisible"
       :title="data.title"
-      width="30%"
+      width="80%"
       @close="dialogClose"
-    > -->
-    <!-- <CommunityDetail
+    >
+    <Detail
         @cancel="data.dialogVisible = false"
         @success="changeData"
-        :formObj="data.formObj"
-      ></CommunityDetail> -->
-    <!-- </el-dialog> -->
+        :id="data.currId"
+        :isEdit="data.isEdit"
+      ></Detail>
+    </el-dialog>
   </div>
 </template>