cnlive_project / cnlive-community-web-vue · Commits

Commit bb593b892aa6469d739ac1e7bd488cdecada6808

Authored by 张红振
1 parent f60b7a8a

房屋绑定 取消绑定

Inline Side-by-side
Showing 9 changed files with 565 additions and 43 deletions
src/api/community/houses.ts
  View file @bb593b8
... ... @@ -25,3 +25,35 @@ export function deleteHouse(params:any) {
25 25 params: params
26 26 })
27 27 }
  28 +// 可选列表接口
  29 +export function availableResidentList(params:any) {
  30 + return request({
  31 + method: 'get',
  32 + url: '/resident/availableResidentList',
  33 + params: params
  34 + })
  35 +}
  36 +// 可选列表接口
  37 +export function addHouseResident(params:any) {
  38 + return request({
  39 + method: 'PUT',
  40 + url: '/house/addHouseResident',
  41 + data: params
  42 + })
  43 +}
  44 +// 已绑定列表
  45 +export function membersByHouseId(params:any) {
  46 + return request({
  47 + method: 'get',
  48 + url: '/resident/membersByHouseId',
  49 + params: params
  50 + })
  51 +}
  52 +// 取消绑定
  53 +export function deleteHouseResident(params:any) {
  54 + return request({
  55 + method: 'DELETE',
  56 + url: '/house/deleteHouseResident',
  57 + params: params
  58 + })
  59 +}
... ...
src/api/ownerManagement/owner.ts
  View file @bb593b8
... ... @@ -33,11 +33,11 @@ export function deleteResident(params:any) {
33 33 params: params
34 34 })
35 35 }
36   -// 删除
  36 +// 取消绑定
37 37 export function changeBinding(params:any) {
38 38 return request({
39 39 method: 'PUT',
40   - url: '/resident/changeBinding',
  40 + url: '/resident/removeBinding',
41 41 params: params
42 42 })
43 43 }
... ...
src/views/community/housekeeper/changeAdmin.vue
  View file @bb593b8
1 1 <script setup lang="ts">
2   -import { reactive, onMounted, ref, getCurrentInstance, defineProps } from "vue";
  2 +import {
  3 + reactive,
  4 + onMounted,
  5 + ref,
  6 + getCurrentInstance,
  7 + defineProps,
  8 + defineEmits,
  9 + watchEffect,
  10 +} from "vue";
3 11 import { getTableList } from "@/api/housekeeper/buildinMganager.ts";
4 12 import { addOrUpBuildingHouseKeeper } from "@/api/community/housekeeper.ts";
5 13 import Pagination from "@/components/Pagination/index.vue";
6 14  
7 15 let instance: ComponentInternalInstance | null = getCurrentInstance(); //获取app实例
  16 +const multipleTableRef = ref<InstanceType<typeof ElTable>>();
8 17 // 声明props
9 18 const props = defineProps({
10 19 buildingId: {
... ... @@ -32,7 +41,7 @@ const data = reactive({
32 41 { label: "选举", value: 0 },
33 42 { label: "派驻", value: 1 },
34 43 ],
35   - selectList: []
  44 + selectList: [],
36 45 });
37 46  
38 47 /**
... ... @@ -42,7 +51,6 @@ const search = (): void =&gt; {
42 51 data.loading = true;
43 52 getTableList(searchData)
44 53 .then((res) => {
45   - console.log(res);
46 54 data.tableList = res.data.data;
47 55 data.total = res.data.data.length;
48 56 data.loading = false;
... ... @@ -52,29 +60,54 @@ const search = (): void =&gt; {
52 60 data.loading = false;
53 61 });
54 62 };
  63 +
  64 +const emit = defineEmits<{
  65 + (e: "success"): void;
  66 +}>();
55 67 /**
56 68 * 表格选择回调
57 69 */
58   -const handleSelectionChange = (val:Array) => {
59   - data.selectList=val.map((val: any) =>{
60   - return val.id
61   - })
62   -}
63   -
64   -const submit=()=>{
65   - console.log(data.selectList.length)
66   - if(data.selectList.length==0){
67   - instance?.proxy?.$message.error('请选择新的楼管')
68   - }else{
69   - addOrUpBuildingHouseKeeper({buildingId:props.buildingId,houseKeeperIds:data.selectList[0],originalIds:props.originalIds}).then((res)=>{
70   - console.log(res)
71   - })
  70 +const handleSelectionChange = (val: Array) => {
  71 + data.selectList = val.map((val: any) => {
  72 + return val.id;
  73 + });
  74 +};
  75 +/**
  76 + * 数据提交
  77 + */
  78 +const submit = () => {
  79 + if (data.selectList.length == 0) {
  80 + instance?.proxy?.$message.error("请选择新的楼管");
  81 + } else if (data.selectList.length > 1) {
  82 + instance?.proxy?.$message.error("只能选择一个楼管");
  83 + } else {
  84 + instance?.proxy?.$messageBox
  85 + .confirm("确认要进行此操作？", "提示", {
  86 + confirmButtonText: "确定",
  87 + cancelButtonText: "取消",
  88 + })
  89 + .then(() => {
  90 + addOrUpBuildingHouseKeeper({
  91 + buildingId: props.buildingId,
  92 + houseKeeperIds: data.selectList[0],
  93 + originalIds: props.originalIds,
  94 + }).then((res) => {
  95 + multipleTableRef.value!.clearSelection();
  96 + data.selectList = [];
  97 + emit("success");
  98 + });
  99 + })
  100 + .catch((err) => {});
  101 + }
  102 +};
  103 +watchEffect(() => {
  104 + if (props.buildingId) {
  105 + search();
72 106 }
73   -}
74   -
75   -onMounted(() => {
76   - search();
77 107 });
  108 +// onMounted(() => {
  109 +// search();
  110 +// });
78 111 </script>
79 112 <template>
80 113 <div>
... ... @@ -101,8 +134,13 @@ onMounted(() =&gt; {
101 134 </el-form>
102 135  
103 136 <!-- 表格 -->
104   - <el-table border :data="data.tableList" @selection-change="handleSelectionChange">
105   - <el-table-column type="selection" width="55"/>
  137 + <el-table
  138 + border
  139 + :data="data.tableList"
  140 + @selection-change="handleSelectionChange"
  141 + ref="multipleTableRef"
  142 + >
  143 + <el-table-column type="selection" width="55" />
106 144 <el-table-column label="姓名" prop="name"></el-table-column>
107 145 <el-table-column label="手机号" prop="mobile"></el-table-column>
108 146 <el-table-column label="身份证号" prop="idcard"></el-table-column>
... ...
src/views/community/housekeeper/index.vue
  View file @bb593b8
... ... @@ -30,8 +30,8 @@ const data = reactive({
30 30 });
31 31 // 更换楼管相关数据属性
32 32 const changeObj = reactive({
33   - currBuildingId:null,
34   - originalId:null,
  33 + currBuildingId: null,
  34 + originalId: null,
35 35 changeVisible: false,
36 36 });
37 37  
... ... @@ -98,10 +98,23 @@ const dialogClose: void = () =&gt; {
98 98 * 更换楼管
99 99 * @param { Object } row 操作对象
100 100 */
101   -const changeManage:void = (row:Object) => {
102   - changeObj.currBuildingId=row.id;
103   - changeObj.originalId=row.housekeeper.id
104   - changeObj.changeVisible=true
  101 +const changeManage: void = (row: Object) => {
  102 + changeObj.currBuildingId = row.id;
  103 + changeObj.originalId = row.housekeeper.id;
  104 + changeObj.changeVisible = true;
  105 +};
  106 +
  107 +/**
  108 + * 更换楼管回调
  109 + */
  110 +const changeSuccess: void = () => {
  111 + instance?.proxy?.$message.success("操作成功");
  112 + changeObj.changeVisible = false;
  113 + search();
  114 +};
  115 +const changeClose=()=>{
  116 + changeObj.currBuildingId =null;
  117 + changeObj.originalId =null;
105 118 }
106 119 /**
107 120 * 监听路由参数变换
... ... @@ -165,7 +178,9 @@ watchEffect(() =&gt; {
165 178 </el-table-column>
166 179 <el-table-column label="操作">
167 180 <template #default="scope">
168   - <el-button type="text" size="mini" @click="changeManage(scope.row)">更换楼管</el-button>
  181 + <el-button type="text" size="mini" @click="changeManage(scope.row)"
  182 + >更换楼管</el-button
  183 + >
169 184 <router-link
170 185 :to="{
171 186 name: 'houses',
... ... @@ -213,8 +228,13 @@ watchEffect(() =&gt; {
213 228 v-model="changeObj.changeVisible"
214 229 title="更换楼管"
215 230 width="60%"
  231 + @close="changeClose"
216 232 >
217   - <ChangeAdmin :buildingId="changeObj.currBuildingId" :originalIds="changeObj.originalId"></ChangeAdmin>
  233 + <ChangeAdmin
  234 + @success="changeSuccess"
  235 + :buildingId="changeObj.currBuildingId"
  236 + :originalIds="changeObj.originalId"
  237 + ></ChangeAdmin>
218 238 </el-dialog>
219 239 </div>
220 240 </template>
... ...
src/views/community/houses/buildOwner.vue 0 → 100644
  View file @bb593b8
  1 +<script setup lang="ts">
  2 +import {
  3 + reactive,
  4 + onMounted,
  5 + ref,
  6 + getCurrentInstance,
  7 + defineProps,
  8 + defineEmits,
  9 + watchEffect,
  10 +} from "vue";
  11 +import {
  12 + availableResidentList,
  13 + addHouseResident,
  14 + membersByHouseId,
  15 +} from "@/api/community/houses.ts";
  16 +import { addOrUpBuildingHouseKeeper } from "@/api/community/housekeeper.ts";
  17 +import Pagination from "@/components/Pagination/index.vue";
  18 +
  19 +let instance: ComponentInternalInstance | null = getCurrentInstance(); //获取app实例
  20 +const multipleTableRef = ref<InstanceType<typeof ElTable>>();
  21 +// 声明props
  22 +const props = defineProps({
  23 + houseId: {
  24 + type: Number,
  25 + default: null,
  26 + },
  27 +});
  28 +
  29 +// 数据筛选
  30 +const searchData = reactive({
  31 + condition: "",
  32 + page: 1,
  33 + pageSize: 10,
  34 +});
  35 +// 展示
  36 +const data = reactive({
  37 + total: 0,
  38 + tableList: [],
  39 + loading: false,
  40 + livingList: [
  41 + { label: "不在住", value: 0 },
  42 + { label: "在住", value: 1 },
  43 + ],
  44 + ownerList: [
  45 + { label: "租户", value: 0 },
  46 + { label: "业主", value: 1 },
  47 + { label: "家人", value: 2 },
  48 + { label: "朋友", value: 3 },
  49 + ],
  50 + selectList: [],
  51 +});
  52 +
  53 +/**
  54 + * 列表查询
  55 + */
  56 +const search = (): void => {
  57 + data.loading = true;
  58 + searchData.houseId = props.houseId;
  59 + availableResidentList(searchData)
  60 + .then((res) => {
  61 + data.tableList = res.data.data;
  62 + data.tableList.map((item) => {
  63 + item.houseId = props.houseId;
  64 + item.residentId = item.id;
  65 + });
  66 + data.total = res.data.data.length;
  67 + data.loading = false;
  68 + data.selectList = [];
  69 + })
  70 + .catch((err) => {
  71 + data.loading = false;
  72 + });
  73 +};
  74 +
  75 +const emit = defineEmits<{
  76 + (e: "success"): void;
  77 +}>();
  78 +/**
  79 + * 表格选择回调
  80 + */
  81 +const setCurrentRow = (selection, row) => {
  82 + if (
  83 + [null, undefined].includes(row.isOwner) ||
  84 + [null, undefined].includes(row.isLiving)
  85 + ) {
  86 + instance?.proxy?.$message.error("请完当前业主信息");
  87 + multipleTableRef.value.toggleRowSelection(row);
  88 + }
  89 +};
  90 +/**
  91 + * 全选回调
  92 + */
  93 +const selectAll = (selection) => {
  94 + const status = selection.every((item) => {
  95 + return (
  96 + ![null, undefined].includes(item.isOwner) &&
  97 + ![null, undefined].includes(item.isLiving)
  98 + );
  99 + });
  100 + if (!status) {
  101 + instance?.proxy?.$message.error("请完当前业主信息");
  102 + }
  103 +};
  104 +const handleSelectionChange = (val) => {
  105 + data.selectList = val;
  106 +};
  107 +/**
  108 + * 数据提交
  109 + */
  110 +const submit = () => {
  111 + if (data.selectList.length == 0) {
  112 + instance?.proxy?.$message.error("请选择业主");
  113 + } else {
  114 + instance?.proxy?.$messageBox
  115 + .confirm("确认要进行此操作？", "提示", {
  116 + confirmButtonText: "确定",
  117 + cancelButtonText: "取消",
  118 + })
  119 + .then(() => {
  120 + let params = [];
  121 + data.selectList.map((item) => {
  122 + let obj = {};
  123 + obj.houseId = item.houseId;
  124 + obj.isLiving = item.isLiving;
  125 + obj.isOwner = item.isOwner;
  126 + obj.residentId = item.residentId;
  127 + params.push(obj);
  128 + });
  129 + addHouseResident(params).then((res) => {
  130 + multipleTableRef.value!.clearSelection();
  131 + data.selectList = [];
  132 + emit("success");
  133 + });
  134 + })
  135 + .catch((err) => {});
  136 + }
  137 +};
  138 +watchEffect(() => {
  139 + if (props.houseId) {
  140 + search();
  141 + }
  142 +});
  143 +</script>
  144 +<template>
  145 + <div>
  146 + <!-- 搜索 -->
  147 + <el-form :inline="true" :model="searchData" v-loading="data.loading">
  148 + <el-form-item>
  149 + <el-input
  150 + style="width: 280px"
  151 + placeholder="请输入姓名/手机号/身份证号"
  152 + v-model="searchData.condition"
  153 + clearable
  154 + ></el-input>
  155 + </el-form-item>
  156 + <el-form-item
  157 + ><el-button type="primary" @click="search"
  158 + >查询</el-button
  159 + ></el-form-item
  160 + >
  161 + <el-form-item
  162 + ><el-button type="primary" @click="submit"
  163 + >确认选择</el-button
  164 + ></el-form-item
  165 + >
  166 + </el-form>
  167 +
  168 + <!-- 表格 -->
  169 + <el-table
  170 + border
  171 + :data="data.tableList"
  172 + @select="setCurrentRow"
  173 + @select-all="selectAll"
  174 + @selection-change="handleSelectionChange"
  175 + ref="multipleTableRef"
  176 + >
  177 + <el-table-column type="selection" width="55" />
  178 + <el-table-column label="姓名" prop="name"></el-table-column>
  179 + <el-table-column label="是否居住" prop="isLiving">
  180 + <template #default="scope">
  181 + <el-select v-model="scope.row.isLiving" placeholder="请选择">
  182 + <el-option
  183 + v-for="item in data.livingList"
  184 + :key="item.value"
  185 + :label="item.label"
  186 + :value="item.value"
  187 + >
  188 + </el-option>
  189 + </el-select>
  190 + </template>
  191 + </el-table-column>
  192 + <el-table-column label="类型" prop="isOwner">
  193 + <template #default="scope">
  194 + <el-select v-model="scope.row.isOwner" placeholder="请选择">
  195 + <el-option
  196 + v-for="item in data.ownerList"
  197 + :key="item.value"
  198 + :label="item.label"
  199 + :value="item.value"
  200 + >
  201 + </el-option>
  202 + </el-select> </template
  203 + ></el-table-column>
  204 + </el-table>
  205 +
  206 + <!-- 分页 -->
  207 + <Pagination
  208 + v-if="data.total > 0"
  209 + :total="data.total"
  210 + :currentPage="searchData.pageNum"
  211 + :pageSize="searchData.pageSize"
  212 + @pageChange="search"
  213 + ></Pagination>
  214 + </div>
  215 +</template>
  216 +
  217 +<style></style>
... ...
src/views/community/houses/index.vue
  View file @bb593b8
1 1 <script setup lang="ts">
2   -import { reactive, onMounted, getCurrentInstance,watchEffect } from "vue";
  2 +import { reactive, onMounted, getCurrentInstance, watchEffect } from "vue";
3 3 import { getTableList, deleteHouse, getHouse } from "@/api/community/houses.ts";
4 4 import { parseTime } from "@/utils/tool.ts";
5 5 import Detail from "./detail.vue";
  6 +import BuildOwner from "./buildOwner.vue";
  7 +import Relieve from "./relieve.vue";
6 8 import Pagination from "@/components/Pagination/index.vue";
7 9 import { useRoute } from "vue-router";
8 10  
... ... @@ -25,8 +27,25 @@ const data = reactive({
25 27 title: "房屋详情",
26 28 formObj: {},
27 29 });
  30 +// 绑定业主相关变量
  31 +const build = reactive({
  32 + builDialog: false,
  33 + relieveDialog: false,
  34 + currHouseId: null,
  35 + relieveId: null,
  36 +});
28 37  
29 38 /**
  39 + * 绑定业主
  40 + * @param { number } id 房屋ID
  41 + * @param { boolean } type true:绑定 false 取消
  42 + */
  43 +const buildPeople = (id: number, type: boolean): void => {
  44 + // build.currHouseId = id;
  45 + type ? (build.currHouseId = id) : (build.relieveId = id);
  46 + type ? (build.builDialog = true) : (build.relieveDialog = true);
  47 +};
  48 +/**
30 49 * 列表查询
31 50 */
32 51 const search = (): void => {
... ... @@ -38,7 +57,6 @@ const search = (): void =&gt; {
38 57 data.loading = false;
39 58 })
40 59 .catch((err) => {
41   - console.log(err);
42 60 data.loading = false;
43 61 });
44 62 };
... ... @@ -72,6 +90,22 @@ const remove = (houseId: number) =&gt; {
72 90 .catch((err) => {});
73 91 };
74 92 /**
  93 + * 绑定成功回调
  94 + */
  95 +const buildSuccess = () => {
  96 + build.currHouseId = null;
  97 + build.builDialog = false;
  98 + instance?.proxy?.$message.success("操作成功");
  99 +};
  100 +/**
  101 + * 取消绑定
  102 + */
  103 +const relieveSuccess = () => {
  104 + build.relieveId = null;
  105 + build.relieveDialog = false;
  106 + instance?.proxy?.$message.success("操作成功");
  107 +};
  108 +/**
75 109 * 监听路由参数变换
76 110 */
77 111 watchEffect(() => {
... ... @@ -124,9 +158,19 @@ watchEffect(() =&gt; {
124 158 <el-table-column label="使用面积" prop="useArea"></el-table-column>
125 159 <el-table-column label="操作" width="350px">
126 160 <template #default="scope">
127   - <el-button type="text" size="mini">绑定业主</el-button>
128   - <el-button type="text" size="mini">取消绑定</el-button>
129   -
  161 + <el-button
  162 + type="text"
  163 + size="mini"
  164 + @click="buildPeople(scope.row.id, true)"
  165 + >绑定业主</el-button
  166 + >
  167 + <el-button
  168 + type="text"
  169 + size="mini"
  170 + @click="buildPeople(scope.row.id, false)"
  171 + >取消绑定</el-button
  172 + >
  173 +
130 174 <el-button type="text" size="mini" @click="check(scope.row.id)"
131 175 >查看房屋</el-button
132 176 >
... ... @@ -138,7 +182,7 @@ watchEffect(() =&gt; {
138 182 >
139 183 <el-button type="text" size="mini">查看业主</el-button>
140 184 </router-link>
141   -
  185 +
142 186 <el-button type="text" size="mini" @click="remove(scope.row.id)"
143 187 >删除</el-button
144 188 >
... ... @@ -164,6 +208,19 @@ watchEffect(() =&gt; {
164 208 >
165 209 <Detail :formObj="data.formObj"></Detail>
166 210 </el-dialog>
  211 +
  212 + <!-- 绑定业主 -->
  213 + <el-dialog v-model="build.builDialog" title="绑定业主">
  214 + <BuildOwner
  215 + :houseId="build.currHouseId"
  216 + @success="buildSuccess"
  217 + ></BuildOwner>
  218 + </el-dialog>
  219 +
  220 + <!-- 取消绑定 -->
  221 + <el-dialog v-model="build.relieveDialog" title="已绑定列表">
  222 + <Relieve :houseId="build.relieveId" @success="relieveSuccess"></Relieve>
  223 + </el-dialog>
167 224 </div>
168 225 </template>
169 226  
... ...
src/views/community/houses/relieve.vue 0 → 100644
  View file @bb593b8
  1 +<script setup lang="ts">
  2 +import {
  3 + reactive,
  4 + ref,
  5 + getCurrentInstance,
  6 + defineProps,
  7 + defineEmits,
  8 + watchEffect,
  9 +} from "vue";
  10 +import {
  11 + deleteHouseResident,
  12 + membersByHouseId,
  13 +} from "@/api/community/houses.ts";
  14 +import { addOrUpBuildingHouseKeeper } from "@/api/community/housekeeper.ts";
  15 +import Pagination from "@/components/Pagination/index.vue";
  16 +
  17 +let instance: ComponentInternalInstance | null = getCurrentInstance(); //获取app实例
  18 +const multipleTableRef = ref<InstanceType<typeof ElTable>>();
  19 +// 声明props
  20 +const props = defineProps({
  21 + houseId: {
  22 + type: Number,
  23 + default: null,
  24 + },
  25 +});
  26 +
  27 +// 数据筛选
  28 +const searchData = reactive({
  29 + condition: "",
  30 + page: 1,
  31 + pageSize: 10,
  32 +});
  33 +// 展示
  34 +const data = reactive({
  35 + total: 0,
  36 + tableList: [],
  37 + loading: false,
  38 + selectList: [],
  39 +});
  40 +
  41 +/**
  42 + * 列表查询
  43 + */
  44 +const search = (): void => {
  45 + data.loading = true;
  46 + searchData.houseId = props.houseId;
  47 + membersByHouseId(searchData)
  48 + .then((res) => {
  49 + data.tableList = res.data.data;
  50 + data.tableList.map((item) => {
  51 + item.houseId = props.houseId;
  52 + item.residentId = item.id;
  53 + });
  54 + data.total = res.data.data.length;
  55 + data.loading = false;
  56 + data.selectList = [];
  57 + })
  58 + .catch((err) => {
  59 + console.log(err);
  60 + data.loading = false;
  61 + });
  62 +};
  63 +
  64 +const emit = defineEmits<{
  65 + (e: "success"): void;
  66 +}>();
  67 +
  68 +const handleSelectionChange = (val) => {
  69 + data.selectList = val.map((val: any) => {
  70 + return val.id;
  71 + });
  72 +};
  73 +/**
  74 + * 数据提交
  75 + */
  76 +const submit = () => {
  77 + if (data.selectList.length == 0) {
  78 + instance?.proxy?.$message.error("请选择业主");
  79 + } else {
  80 + instance?.proxy?.$messageBox
  81 + .confirm("确认要进行此操作？", "提示", {
  82 + confirmButtonText: "确定",
  83 + cancelButtonText: "取消",
  84 + })
  85 + .then(() => {
  86 + deleteHouseResident({houseId:props.houseId,residentIds:data.selectList.toString()}).then((res) => {
  87 + multipleTableRef.value!.clearSelection();
  88 + data.selectList = [];
  89 + emit("success");
  90 + });
  91 + })
  92 + .catch((err) => {});
  93 + }
  94 +};
  95 +watchEffect(() => {
  96 + if (props.houseId) {
  97 + search();
  98 + }
  99 +});
  100 +</script>
  101 +<template>
  102 + <div>
  103 + <!-- 搜索 -->
  104 + <el-form :inline="true" :model="searchData" v-loading="data.loading">
  105 + <el-form-item>
  106 + <el-input
  107 + style="width: 280px"
  108 + placeholder="请输入姓名/手机号/身份证号"
  109 + v-model="searchData.condition"
  110 + clearable
  111 + ></el-input>
  112 + </el-form-item>
  113 + <el-form-item
  114 + ><el-button type="primary" @click="search"
  115 + >查询</el-button
  116 + ></el-form-item
  117 + >
  118 + <el-form-item
  119 + ><el-button type="primary" @click="submit"
  120 + >确认选择</el-button
  121 + ></el-form-item
  122 + >
  123 + </el-form>
  124 +
  125 + <!-- 表格 -->
  126 + <el-table
  127 + border
  128 + :data="data.tableList"
  129 + @selection-change="handleSelectionChange"
  130 + ref="multipleTableRef"
  131 + >
  132 + <el-table-column type="selection" width="55" />
  133 + <el-table-column label="姓名" prop="name"></el-table-column>
  134 + <el-table-column label="手机号" prop="mobile"></el-table-column>
  135 + </el-table>
  136 + <!-- 分页 -->
  137 + <Pagination
  138 + v-if="data.total > 0"
  139 + :total="data.total"
  140 + :currentPage="searchData.pageNum"
  141 + :pageSize="searchData.pageSize"
  142 + @pageChange="search"
  143 + ></Pagination>
  144 + </div>
  145 +</template>
  146 +
  147 +<style></style>
... ...
src/views/housekeeper/buildinMganager/index.vue
  View file @bb593b8
... ... @@ -35,7 +35,6 @@ const search = (): void =&gt; {
35 35 data.loading = true;
36 36 getTableList(searchData)
37 37 .then((res) => {
38   - console.log(res)
39 38 data.tableList = res.data.data;
40 39 data.total = res.data.data.total;
41 40 data.loading = false;
... ...
src/views/ownerManagement/owner/index.vue
  View file @bb593b8
1 1 <script setup lang="ts">
2   -import { reactive, onMounted, getCurrentInstance } from "vue";
  2 +import { reactive, onMounted, getCurrentInstance,watchEffect } from "vue";
3 3 import {
4 4 getTableList,
5 5 residentListByCondition,
... ... @@ -9,8 +9,10 @@ import {
9 9 import { parseTime } from "@/utils/tool.ts";
10 10 import Detail from "./detail.vue";
11 11 import Pagination from "@/components/Pagination/index.vue";
  12 +import { useRoute } from "vue-router";
12 13  
13 14 let instance: ComponentInternalInstance | null = getCurrentInstance(); //获取app实例
  15 +let route = useRoute(); // 路由
14 16 // 数据筛选
15 17 const searchData = reactive({
16 18 isOwner: null,
... ... @@ -130,9 +132,19 @@ const changeData: void = () =&gt; {
130 132 const dialogClose: void = () => {
131 133 data.currId=null
132 134 };
133   -onMounted(() => {
134   - search();
  135 +
  136 +/**
  137 + * 监听路由参数变换
  138 + */
  139 +watchEffect(() => {
  140 + if (route.path == "/owner") {
  141 + searchData.houseId = route.query.houseId ?? null;
  142 + search();
  143 + }
135 144 });
  145 +// onMounted(() => {
  146 +// search();
  147 +// });
136 148 </script>
137 149 <template>
138 150 <div class="app-container">
... ...