From 73b4da2eafad34d54fd33b261d49bcc1877ab26a Mon Sep 17 00:00:00 2001
From: bibi <541660090@qq.com>
Date: Thu, 3 Mar 2022 16:18:07 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BD=8F=E6=88=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../_houseHoldInfo/depend/config.js           |  36 +-
 .../Basic/EstateInfo/_houseHoldInfo/index.vue | 469 +++++++++---------
 2 files changed, 275 insertions(+), 230 deletions(-)

diff --git a/src/views/Basic/EstateInfo/_houseHoldInfo/depend/config.js b/src/views/Basic/EstateInfo/_houseHoldInfo/depend/config.js
index cd5c628..c9e1e3e 100644
--- a/src/views/Basic/EstateInfo/_houseHoldInfo/depend/config.js
+++ b/src/views/Basic/EstateInfo/_houseHoldInfo/depend/config.js
@@ -6,17 +6,14 @@ export const columns = [
 	{
 		title: "住户姓名",
 		dataIndex: "name",
-		width: "8%",
 	},
 	{
 		title: "住户手机号",
 		dataIndex: "tel",
-		width: "10%",
 	},
 	{
 		title: "住户性别",
 		dataIndex: "sex",
-		width: "7%",
 		customRender:function(sex){
 			switch (sex) {
 			case 1:
@@ -33,24 +30,45 @@ export const columns = [
 	{
 		title: "住户身份证号",
 		dataIndex: "idCard",
-		width: "14%",
 	},
+	{
+		title: "操作",
+		dataIndex: "action",
+		key: "action",
+		width: "180",
+		fixed: "right",
+		scopedSlots: { customRender: "action" },
+	},
+]
+export const columns_house = [
 	{
 		title: "房屋名称",
 		dataIndex: "manageBuildingName",
 		scopedSlots: { customRender: "name" },
-		width: "25%",
+		width: "44%",
 	},
 	{
 		title: "房屋类型",
 		dataIndex: "manageEstateTypeName",
-		width: "10%",
+		width: "20%",
 	},
 	{
-		title: "用户身份",
-		key: "tags",
+		title: "住户身份",
 		dataIndex: "identity",
-		scopedSlots: { customRender: "tags" },
+		customRender:function(identity){
+			switch (identity) {
+			case 1:
+				return '业主'
+			case 2:
+				return '业主亲属'
+			case 3:
+				return '租户'
+			case 4:
+				return '租户亲属'
+			default:
+				break;
+			}
+		},width: "20%",
 	},
 	{
 		title: "操作",
diff --git a/src/views/Basic/EstateInfo/_houseHoldInfo/index.vue b/src/views/Basic/EstateInfo/_houseHoldInfo/index.vue
index c535883..f276802 100644
--- a/src/views/Basic/EstateInfo/_houseHoldInfo/index.vue
+++ b/src/views/Basic/EstateInfo/_houseHoldInfo/index.vue
@@ -5,14 +5,22 @@
       <a-row>
         <a-col :span="20">
           <a-space size="large">
-            <a-select v-model='searchForm.sex' style="width: 200px" placeholder="请选择性别" >
+            <a-select
+              v-model="searchForm.sex"
+              style="width: 200px"
+              placeholder="请选择性别"
+            >
               <a-select-option value="1">男</a-select-option>
               <a-select-option value="2">女</a-select-option>
               <a-select-option value="3">保密</a-select-option>
             </a-select>
-            <a-input v-model='searchForm.keyword' style="width: 200px" placeholder="请输入关键字（姓名/手机号）" />
-            <a-button type="primary" @click='getData'>查 询</a-button>
-            <a-button @click='reset'>重 置</a-button>
+            <a-input
+              v-model="searchForm.keyword"
+              style="width: 200px"
+              placeholder="请输入关键字（姓名/手机号）"
+            />
+            <a-button type="primary" @click="getData">查 询</a-button>
+            <a-button @click="reset">重 置</a-button>
           </a-space>
         </a-col>
         <a-col :span="4">
@@ -21,35 +29,13 @@
       </a-row>
     </div>
     <div class="main">
-      <div style="margin-bottom: 16px">
-        <!-- 批量操作 -->
-        <a-select
-          type="primary"
-          v-model="activeAction"
-          :disabled="!hasSelected"
-          :loading="loading"
-          style="width: 120px"
-          @change="Actions"
-          placeholder="请选择操作"
-        >
-          批量
-          <a-select-option v-for="item in ActionsList" :key="item.value">
-            {{ item.label }}
-          </a-select-option>
-        </a-select>
-        <span style="margin-left: 8px">
-          <template v-if="hasSelected">
-            {{ `已选择 ${selectedRowKeys.length} 条` }}
-          </template>
-        </span>
-      </div>
       <!-- 表格 -->
       <a-table
         :columns="columns"
         :data-source="tableData"
         :pagination="pagination"
         :scroll="{ x: 1400 }"
-		@change="handleTableChange"
+        @change="handleTableChange"
         :row-selection="{
           selectedRowKeys: selectedRowKeys,
           onChange: selectionChoosed,
@@ -60,274 +46,315 @@
           }
         "
       >
-        <span slot="name" slot-scope="text, row">
-          <a-select style="width :100%" @change='changeHouse' placeholder='请选择房屋'>
-            <a-select-option v-for="item,index in row.residentListEstateVoList" :key='index' :value="item.id" @click="chooseHouse(row)">
-              {{
-            item.manageBuildingName +
-            "栋/" +
-            item.manageUnitName +
-            "单元/" +
-            item.floorLocation +
-            "层-" +
-            item.manageEstateName +
-            "室"
-          }}
-            </a-select-option>
-          </a-select>
-        </span>
         <span slot="action" slot-scope="text, row">
-            <a-space>
-              <a class="ant-dropdown-link"  @click="edit(row)">编辑</a>
-              <a class="ant-dropdown-link" @click="show.in=true,inform.residentId = row.id">迁入</a>
-              <a class="ant-dropdown-link" @click="out(row)">迁出</a>
-            </a-space>
-        </span>
-        <span slot="tags" slot-scope="tag">
-          <a-tag
-            :color="tag === 1 ? 'volcano' : tag === 2 ? 'geekblue' : tag === 3 ? 'geekblue' : 'red'"
-          >
-            {{ tag === 1 ? "业主" : tag === 2 ? "业主亲属" :tag === 3 ? "租户":tag === 4 ? "租户亲属":'-'  }}
-          </a-tag>
+          <a-space>
+            <a class="ant-dropdown-link" @click="houseManage(row)">房屋管理</a>
+            <a class="ant-dropdown-link" @click="edit(row)">编辑</a>
+            <a
+              class="ant-dropdown-link"
+              @click="(show.in = true), (inform.residentId = row.id)"
+              >迁入</a
+            >
+          </a-space>
         </span>
       </a-table>
     </div>
-	<add-form :show="show.add" :editId="editId" @close='close' @success='success'></add-form>
-	<a-modal
-      title="迁入"
-      :visible="show.in"
-      @ok="insubmit"
-      @cancel="inclose"
-    >
+	<!-- 新增住户 -->
+    <add-form
+      :show="show.add"
+      :editId="editId"
+      @close="close"
+      @success="success"
+    ></add-form>
+	<!-- 迁入提交 -->
+    <a-modal title="迁入" :visible="show.in" @ok="insubmit" @cancel="inclose">
       <div>
-		<a-form-model
-			ref="ruleForm"
-			:model="inform"
-			:rules="rules"
-			layout="vertical"
-		>
-			<a-form-model-item label="关联房屋" prop="estateId">
-				<a-cascader
-                  :options="estateData"
-                  v-model="estateArr"
-                  :field-names="{ label: 'name', value: 'id', children: 'childList' }"
-                  placeholder="楼栋/单元/房间号"
-                  @change="onChange"
-                  style="width: 90%"
-                />
-			</a-form-model-item>
-			<a-form-model-item label="住户身份" prop="identity">
-                <a-select v-model="inform.identity" placeholder="请选择住户身份" style="width: 90%">
-                  <a-select-option v-for="item in options.identity" :key="item.id" :value="item.id">{{item.name}}</a-select-option>
-                </a-select>
-              </a-form-model-item>
-			  <a-form-model-item label="房屋租户" prop="linkUserId" v-if="inform.identity===4">
-				<a-select v-model="inform.linkUserId" placeholder="请选择住户身份" style="width: 90%">
-                  <a-select-option v-for="item in options.tenant" :key="item.id" :value="item.id">{{item.name}}</a-select-option>
-                </a-select>
-              </a-form-model-item>
-		</a-form-model>
-	  </div>
+        <a-form-model
+          ref="ruleForm"
+          :model="inform"
+          :rules="rules"
+          layout="vertical"
+        >
+          <a-form-model-item label="关联房屋" prop="estateId">
+            <a-cascader
+              :options="estateData"
+              v-model="estateArr"
+              :field-names="{
+                label: 'name',
+                value: 'id',
+                children: 'childList',
+              }"
+              placeholder="楼栋/单元/房间号"
+              @change="onChange"
+              style="width: 90%"
+            />
+          </a-form-model-item>
+          <a-form-model-item label="住户身份" prop="identity">
+            <a-select
+              v-model="inform.identity"
+              placeholder="请选择住户身份"
+              style="width: 90%"
+            >
+              <a-select-option
+                v-for="item in options.identity"
+                :key="item.id"
+                :value="item.id"
+                >{{ item.name }}</a-select-option
+              >
+            </a-select>
+          </a-form-model-item>
+          <a-form-model-item
+            label="房屋租户"
+            prop="linkUserId"
+            v-if="inform.identity === 4"
+          >
+            <a-select
+              v-model="inform.linkUserId"
+              placeholder="请选择住户身份"
+              style="width: 90%"
+            >
+              <a-select-option
+                v-for="item in options.tenant"
+                :key="item.id"
+                :value="item.id"
+                >{{ item.name }}</a-select-option
+              >
+            </a-select>
+          </a-form-model-item>
+        </a-form-model>
+      </div>
     </a-modal>
+	<!-- 住户房屋管理 -->
+    <a-drawer
+      title="查看房屋"
+      :width="1000"
+      :visible="show.detail"
+      :body-style="{ paddingBottom: '80px' }"
+      @close="onClose"
+    >
+      <div class="drawer-content">
+        房屋信息
+        <a-divider></a-divider>
+        <a-table
+          :columns="columns_house"
+          :data-source="table_house"
+          :pagination="false"
+          :row-key="
+            (record, index) => {
+              return index;
+            }
+          "
+        >
+          <span slot="name" slot-scope="text, row">
+            {{
+              row.manageBuildingName +
+              "栋/" +
+              row.manageUnitName +
+              "单元/" +
+              row.floorLocation +
+              "层-" +
+              row.name +
+              "室"
+            }}
+          </span>
+          <span slot="action" slot-scope="text, row">
+            <a-space>
+              <a class="ant-dropdown-link" @click="out(row)">迁出</a>
+            </a-space>
+          </span>
+        </a-table>
+      </div>
+      <div class="drawer-footer">
+        <a-button :style="{ marginRight: '8px' }" @click="onClose">
+          关闭
+        </a-button>
+      </div>
+    </a-drawer>
   </div>
 </template>
 
 <script>
-import { columns,pagination,searchForm, rules } from './depend/config.js'
-import { estate } from '@/api/basic/estate'
-import { residentList, moveIn, moveOut, findTenantByEstateId } from '@/api/basic/resident'
-import addForm from './depend/addForm.vue'
+import {
+	columns,
+	pagination,
+	searchForm,
+	rules,
+	columns_house,
+} from "./depend/config.js";
+import { estate } from "@/api/basic/estate";
+import {
+	residentList,
+	moveIn,
+	moveOut,
+	findTenantByEstateId,
+} from "@/api/basic/resident";
+import addForm from "./depend/addForm.vue";
 export default {
-	components:{
-		addForm
+	components: {
+		addForm,
 	},
 	data() {
 		return {
-			editId:null,
-			form: {
-				identity: 2
+			columns_house,
+			editId: null,
+			inform: {
+				estateId: undefined,
+				residentId: undefined,
+				identity: undefined,
+				linkUserId: undefined,
 			},
-			inform:{
-				estateId:undefined,
-				residentId:undefined,
-				identity:undefined,
-				linkUserId:undefined,
-			},
-			estateArr:[],
-			estateData:[],
+			estateArr: [],
+			estateData: [],
 			rules,
 			show: {
 				add: false,
-				in:false,
-				detail:{}
+				in: false,
+				detail: false,
 			},
-			table_row:{},
-			changeId:null,
-			loading: false,
 			pagination,
 			searchForm,
-			activeAction: undefined,
-			
-			// 选择的index
 			selectedRowKeys: [],
 			// 分页
 			//   列
 			columns,
-			newData:[],
+			holderInfo: {},
 			//   数据
-			tableData:[],
-			options:{
-				identity:[
-					{ id:1, name:'业主' },
-					{ id:2, name:'业主亲属' },
-					{ id:3, name:'租户' },
-					{ id:4, name:'租户亲属' },
+			tableData: [],
+			table_house: [],
+			options: {
+				identity: [
+					{ id: 1, name: "业主" },
+					{ id: 2, name: "业主亲属" },
+					{ id: 3, name: "租户" },
+					{ id: 4, name: "租户亲属" },
 				],
-				tenant:[]
+				tenant: [],
 			},
-			ActionsList: [
-				// {
-				// 	label: "批量删除",
-				// 	value: 1,
-				// },
-				// {
-				// 	label: "批量导出",
-				// 	value: 2,
-				// },
-			],
 		};
 	},
-	mounted(){
-		this.getData()
-		this.getEstate()
+	mounted() {
+		this.getData();
+		this.getEstate();
 	},
 	methods: {
 		async getData() {
 			const res = await residentList({
 				pageNum: this.pagination.current,
-				size :this.pagination.pageSize,
-				...this.searchForm
-			})
-			this.tableData = res.data.rows
-			this.pagination.total = res.data.total
+				size: this.pagination.pageSize,
+				...this.searchForm,
+			});
+			this.tableData = res.data.rows;
+			this.pagination.total = res.data.total;
+		},
+		houseManage(data) {
+			console.log(data);
+			this.holderInfo = data;
+			this.table_house = data.residentListEstateVoList;
+			this.show.detail = true;
 		},
 		// 所有房屋
-		async getEstate(){
-			let res = await estate()
-			this.estateData = res.data
-			this.estateDisable(this.estateData)
+		async getEstate() {
+			let res = await estate();
+			this.estateData = res.data;
+			this.estateDisable(this.estateData);
 		},
-		estateDisable(arr){
-			arr.forEach((item,index)=>{
-				if(!item.manageEstateTypeName && item.childList.length === 0){
-					arr[index].disabled = true
-				}else if(item.manageEstateTypeName || item.childList.length > 0){
-					arr[index].disabled = false
-				}else{
-					this.estateDisable(item.childList)
+		estateDisable(arr) {
+			arr.forEach((item, index) => {
+				if (!item.manageEstateTypeName && item.childList.length === 0) {
+					arr[index].disabled = true;
+				} else if (item.manageEstateTypeName || item.childList.length > 0) {
+					arr[index].disabled = false;
+				} else {
+					this.estateDisable(item.childList);
 				}
-			})
+			});
 		},
 		// 重置
-		reset(){
+		reset() {
 			this.searchForm = {
 				keyword: "",
 				sex: undefined,
-			}
-			this.getData()
+			};
+			this.getData();
 		},
 		// 编辑住户
-		edit(data){
-			this.editId = data.id
+		edit(data) {
+			this.editId = data.id;
 			this.show.add = true;
 		},
 		// form提交成功的回调
-		close(){
+		close() {
 			this.show.add = false;
-			this.editId = null
+			this.editId = null;
 		},
 		// form提交成功的回调
-		success(){
-			this.getData()
-		},
-		// 表格行切换房屋
-		changeHouse(value){
-			// 选中的行
-			this.tableData.forEach((item,index)=>{
-				if(item.id === this.table_row.id) {
-					item.residentListEstateVoList.forEach((items)=>{
-						if(items.id === value){
-							this.$set(this.tableData[index],'identity' ,items.identity )
-							this.$set(this.tableData[index],'manageEstateTypeName' ,items.manageEstateTypeName )
-							this.$set(this.tableData[index],'houseId' ,items.id )
-						}
-					})
-				}
-			})
-		},
-		chooseHouse(row){
-			this.table_row  = row
+		success() {
+			this.getData();
 		},
 		handleTableChange(pagination) {
 			const pager = { ...this.pagination };
 			pager.current = pagination.current;
 			pager.pageSize = pagination.pageSize;
 			this.pagination = pager;
-			this.getData()
-		},
-		Actions(data) {
-			console.log(data);
-			this.activeAction = undefined;
+			this.getData();
 		},
 		selectionChoosed(data) {
 			this.selectedRowKeys = data;
 		},
-		async insubmit(){// 迁入提交
+		async insubmit() {
+			// 迁入提交
 			console.log(this.inform);
-			this.$refs.ruleForm.validate(async valid => {
-				if(valid){let res = await moveIn(this.inform)
-					if(res.code === 200){
-						this.$message.success(res.msg)
-						this.getData()
-						this.inclose()
-					}else{
-						this.$message.error(res.msg)
-					}}
-			})
+			this.$refs.ruleForm.validate(async (valid) => {
+				if (valid) {
+					let res = await moveIn(this.inform);
+					if (res.code === 200) {
+						this.$message.success(res.msg);
+						this.getData();
+						this.inclose();
+					} else {
+						this.$message.error(res.msg);
+					}
+				}
+			});
+		},
+		onClose() {
+			this.show.detail = false;
 		},
-		inclose(){
+		inclose() {
 			this.$refs.ruleForm.resetFields();
-			this.estateArr = []
-			this.show.in = false
+			this.estateArr = [];
+			this.show.in = false;
 		},
-		out(data) {// 迁出
-			if(!data.houseId) {
-				this.$message.error('请先选择房屋')
-				return
-			}
+		out(data) {
+			console.log(data);
+			// 迁出
 			this.$confirm({
 				title: "是否迁出",
 				// okText:'删除',
 				// cancelText:'取消',
 				icon: "logout",
-				onOk:async ()=> {
-					let res = await moveOut({estateId:data.houseId,residentId:data.id})
-					if(res.code === 200){
-						this.$message.success(res.msg)
-						this.getData()
-					}else{
-						this.$message.error(res.msg)
+				onOk: async () => {
+					let res = await moveOut({
+						estateId: data.id,
+						residentId: this.holderInfo.id,
+					});
+					if (res.code === 200) {
+						this.$message.success(res.msg);
+						this.getData();
+						this.onClose();
+					} else {
+						this.$message.error(res.msg);
 					}
 				},
 			});
 		},
-		onChange(value, selectedOptions){
-			if(value.length > 0){
+		onChange(value, selectedOptions) {
+			if (value.length > 0) {
 				this.inform.estateId = value[value.length - 1];
-				findTenantByEstateId({estateId:this.inform.estateId}).then(res =>{
-					this.options.tenant = res.data
-				})
-			}else{
+				findTenantByEstateId({ estateId: this.inform.estateId }).then((res) => {
+					this.options.tenant = res.data;
+				});
+			} else {
 				this.inform.estateId = undefined;
 			}
 		},
@@ -342,7 +369,7 @@ export default {
 </script>
 
 <style lang="less" scoped>
-/deep/.ant-upload.ant-upload-select-picture-card{
+/deep/.ant-upload.ant-upload-select-picture-card {
   width: 240px;
   height: 160px;
 }
@@ -359,4 +386,4 @@ export default {
   margin-top: 8px;
   color: #666;
 }
-</style>
\ No newline at end of file
+</style>