LittleBeeSaas/src/views/Basic/EstateInfo/_houseHoldInfo/index.vue

<template>
  <div>
    <div class="cardTitle">住户信息</div>
    <div class="search-box">
      <a-row>
        <a-col :span="20">
          <a-space size="large">
            <a-select 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 style="width: 200px" placeholder="请输入关键字（姓名/手机号）" />
            <a-button type="primary">查 询</a-button>
            <a-button>重 置</a-button>
          </a-space>
        </a-col>
        <a-col :span="4">
          <a-button class="add-btn" @click="drawer.add.show = true">添加住户</a-button>
        </a-col>
      </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="newData"
        :pagination="pagination"
        :scroll="{ x: 1300 }"
        :row-selection="{
          selectedRowKeys: selectedRowKeys,
          onChange: selectionChoosed,
        }"
        :row-key="
          (record, index) => {
            return index;
          }
        "
      >
        <span slot="name" slot-scope="text, row">
          <a-select style="width :200px" @change='changeHouse' placeholder='请选择房屋'>
            <a-select-option v-for="item,index in row.residentListEstateVoList" :key='index' :value="item.id">
              {{
            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">编辑</a>
              <a class="ant-dropdown-link" @click="del(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>
        </span>
      </a-table>
    </div>
  </div>
</template>

<script>
import { columns,pagination,searchForm } from './component/config.js'
import { residentList } from '@/api/basic/resident'
export default {
	data() {
		return {
			imageUrl: '',
			form: {
				identity: 2
			},
			drawer: {
				add: {
					show: false
				},
				detail:{}
			},
			changeId:null,
			pagination: pagination,
			searchForm:searchForm,
			activeAction: undefined,
			loading: false,
			// 选择的index
			selectedRowKeys: [],
			tableChoosed: [],
			// 分页
			//   列
			columns: columns,
			newData:[],
			//   数据
			tableData:[],
			ActionsList: [
				{
					label: "批量删除",
					value: 1,
				},
				{
					label: "批量导出",
					value: 2,
				},
			],
		};
	},
	mounted(){
		this.getData()
	},
	methods: {
		async getData() {
			const res = await residentList({
				pageNum: this.pagination.current,
				size :this.pagination.pageSize,
				sex:this.searchForm.sex,
				keyword:this.searchForm.keyword,
			})
			this.tableData = res.data.rows
			this.newData  =  this.tableData
		},
		addClose(){
			this.drawer.add.show = false;
		},
		handleChange(info){
			console.log(info);
		},
		beforeUpload(file) {
			const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
			if (!isJpgOrPng) {
				this.$message.error('You can only upload JPG file!');
			}
			const isLt2M = file.size / 1024 / 1024 < 2;
			if (!isLt2M) {
				this.$message.error('Image must smaller than 2MB!');
			}
			return isJpgOrPng && isLt2M;
		},
		// 表格行切换房屋
		changeHouse(value){
			// 遍历每行
			this.newData.forEach((item,index)=>{
				// 遍历每行中的所有房子
				item.residentListEstateVoList.forEach(items=>{
					// 当有房子id和changeid相同时
					if(items.id === value){
						// 给newData赋值
						this.$set(this.newData[index],'identity' ,items.identity )
						this.$set(this.newData[index],'manageEstateTypeName' ,items.manageEstateTypeName )
					}
				})
			})
		},
		handleTableChange(pagination) {
			console.log(pagination);
			const pager = { ...this.pagination };
			pager.current = pagination.current;
			pager.pageSize = pagination.pageSize;
			this.pagination = pager;
		},
		del(data) {
			this.$confirm({
				title: "是否删除",
				// okText:'删除',
				// cancelText:'取消',
				icon: "",
				onOk: function () {
					console.log(data);
				},
			});
		},
		Actions(data) {
			console.log(data);
			this.activeAction = undefined;
		},
		selectionChoosed(data) {
			console.log(data);
			this.tableChoosed = data;
		},
	},
	computed: {
		// 是否选择selection
		hasSelected() {
			return this.selectedRowKeys.length > 0;
		},
	},
};
</script>

<style lang="less" scoped>
/deep/.ant-upload.ant-upload-select-picture-card{
  width: 240px;
  height: 160px;
}
/deep/.avatar-uploader > .ant-upload {
  width: 240px;
  height: 160px;
}
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>