Project-Annex/operationSupport/src/views/ownerManagement/index.vue

<template>
    <div class="content main">
        <organ-tree @organId="currentOrganId" v-if="!ownerStatus" :buildingType="1"></organ-tree>
        <div class="content-right" v-if="!ownerStatus">
            <div class="search">
                <el-input
                    clearable
                    placeholder="输入姓名或身份证号"
                    class="search-input"
                    v-trim
                    v-model.trim="mixins_query.name"
                ></el-input>
                <el-select v-model="mixins_query.householdType" clearable placeholder="住户类型">
                    <el-option v-for="item in householdType" :key="item" :label="item.label" :value="item.status">{{
                        item.label
                    }}</el-option>
                </el-select>
                <el-select v-model="mixins_query.residentStatus" clearable placeholder="住户状态">
                    <el-option v-for="item in residentStatus" :key="item" :label="item.label" :value="item.status">{{
                        item.label
                    }}</el-option>
                </el-select>
                <el-button
                    class="search-btn"
                    type="primary"
                    @click="mixins_search()"
                    :disabled="mixins_onQuery"
                    :loading="mixins_onQuery"
                    icon="el-icon-search"
                    >搜索</el-button
                >
                <div class="search-icon">
                    <template>
                        <el-dropdown type="primary" @command="addCommand">
                            <span class="iconfont">&#xe641;</span>
                            <el-dropdown-menu slot="dropdown" hide-on-click="false" class="device-search-dropdown">
                                <el-dropdown-item command="add">单个添加</el-dropdown-item>
                                <el-dropdown-item command="batchAdd">
                                    <div class="upload_div">
                                        <xk-upload class="upload_class" @callback="mixins_search" :params="{ importType: 'RESIDENT' }">
                                            <span slot="content">批量添加</span>
                                        </xk-upload>
                                    </div>
                                </el-dropdown-item>
                                <el-dropdown-item command="template">下载模板</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                    <el-tooltip class="item" effect="light" placement="bottom" content="删除">
                        <i class="iconfont" @click="deluserbyidsFn">&#xe63b;</i>
                    </el-tooltip>
                    <el-tooltip class="item" effect="light" placement="bottom" content="导出">
                        <i class="zoniot_font zoniot-icon-daochu2" @click="exportExcel"></i>
                    </el-tooltip>
                </div>
            </div>
            <zz-table
                :settings="{ showCheckbox: true, showIndex: true, stripe: true }"
                :cols="cols"
                :loading="mixins_onQuery"
                :data="mixins_list"
                :pageset="mixins_pageset"
                @page-change="pageChange"
                @selection-change="selectionChange"
            >
                <template slot-scope="scope" slot="roomNumber">
                    <div class="table-list" v-for="(item, index) in scope.row.houseList" :key="index">
                        {{ item.buildingName }}-{{ CheckChinese(item.unitName, '单元') }}-{{ item.roomNumber }}
                    </div>
                </template>
                <template slot-scope="scope" slot="householdType">
                    <div class="table-list" v-for="(item, index) in scope.row.houseList" :key="index">
                        <template v-if="item.householdType === 1"> 业主 </template>
                        <template v-else-if="item.householdType === 2"> 亲属 </template>
                        <template v-else> 租客 </template>
                    </div>
                </template>
                <template slot-scope="scope" slot="communityName">
                    <div class="table-list" v-for="(item, index) in scope.row.houseList" :key="index">{{ item.communityName }}</div>
                </template>
                <template slot-scope="scope" slot="checkInDate">
                    <div class="table-list" v-for="(item, index) in scope.row.houseList" :key="index">{{ item.checkInDate || '--' }}</div>
                </template>
                <template slot-scope="scope" slot="residentStatus">
                    <div class="table-list" v-for="(item, index) in scope.row.houseList" :key="index">
                        <span class="statusClass" :class="item.residentStatus === 1 ? 'open' : 'off'">{{
                            item.residentStatus === 1 ? '在住' : '已注销'
                        }}</span>
                        <el-switch
                            :value="item.residentStatus"
                            @change="cancellation(item)"
                            :active-value="1"
                            :inactive-value="0"
                            style="margin-right: 20px"
                        >
                        </el-switch>
                    </div>
                </template>

                <template slot-scope="scope" slot="opt">
                    <div class="opt">
                        <el-tooltip class="item" effect="light" placement="bottom" content="编辑">
                            <i class="zoniot_font zoniot-icon-bianji" @click="addOrEdit('edit', scope.row)"></i>
                        </el-tooltip>

                        <el-tooltip class="item" effect="light" placement="bottom" content="删除">
                            <i class="zoniot_font zoniot-icon-shanchu redText" @click="deleteRow(scope.row)"></i>
                        </el-tooltip>
                        <el-tooltip class="item" effect="light" placement="bottom" content="查看">
                            <i class="zoniot_font zoniot-icon-xiangqing" @click="lookPage(scope.row)"></i>
                        </el-tooltip>
                    </div>
                </template>
            </zz-table>
        </div>

        <add-owner v-else :params="activeData" @clerOwnerStatus="clerOwnerStatus" :isAdd="isAdd"></add-owner>
    </div>
</template>

<script>
import list from '@/js/list.js';
// import addOwner from './stepPage/add.vue';
import addOwner from './stepPage/newAdd.vue';

import Index from '../../components/mapPopup/index.vue';
export default {
    mixins: [list],
    name: 'ownerManagement',
    components: { addOwner, Index },
    data() {
        return {
            ownerStatus: '',
            statusOptions: [],
            currentId: '',
            cols: [
                {
                    label: '姓名',
                    prop: 'name'
                },
                {
                    label: '手机号',
                    prop: 'phone'
                },
                {
                    label: '身份证号',
                    prop: 'idNumber'
                },
                {
                    label: '住户类型',
                    prop: 'householdType',
                    slot: 'householdType',
                    format(val) {
                        if (val == 1) {
                            return '业主';
                        } else if (val == 2) {
                            return '亲属';
                        } else if (val == 3) {
                            return '租客';
                        }
                    }
                },
                {
                    label: '社区名称',
                    prop: 'communityName',
                    slot: 'communityName'
                },
                {
                    label: '房屋地址',
                    prop: 'roomNumber',
                    slot: 'roomNumber'
                },
                {
                    label: '状态',
                    prop: 'residentStatus',
                    slot: 'residentStatus',
                    format(val) {
                        if (val == 1) {
                            return '在住';
                        } else {
                            return '已注销';
                        }
                    }
                },
                {
                    label: '入住时间',
                    prop: 'checkInDate',
                    slot: 'checkInDate'
                },
                {
                    label: '操作',
                    prop: 'id',
                    slot: 'opt',
                    width: '200'
                }
            ],
            householdType: [
                {
                    status: 1,
                    label: '业主'
                },
                {
                    status: 2,
                    label: '亲属'
                },
                {
                    status: 3,
                    label: '租客'
                }
            ],
            residentStatus: [
                {
                    status: 0,
                    label: '已注销'
                },
                {
                    status: 1,
                    label: '在住'
                }
            ],
            activeData: {},
            isAdd: true,
            selectRow: [],
            thisLeftData: {}
        };
    },
    methods: {
        clerOwnerStatus() {
            this.ownerStatus = '';
            this.activeData = {};
            this.isAdd = true;
            this.mixins_search();
        },
        addOrEdit(todo, row) {
            if (todo == 'edit') {
                this.activeData = row;
                this.isAdd = false;
            }
            this.ownerStatus = todo;
        },
        deleteRow(row) {
            const { name } = row;
            let title = `您确定要删除住户“${name}”`;
            this.$msgBox(title)
                .then(() => {
                    this.$http
                        .postForm('/sc-community/scResident/delete', { id: row.id })
                        .then(({ status, msg }) => {
                            this.$delete(row, 'onDelete');
                            if (0 === status) {
                                this.$message.success(msg);
                                this.mixins_search('del');
                            } else {
                                this.$message.error(msg);
                            }
                        })
                        .catch(() => {
                            this.$delete(row, 'onDelete');
                        });
                })
                .catch(() => {});
        },
        lookPage(row) {
            this.$router.push({
                path: '/ownerManagement/details',
                query: {
                    id: row.id
                }
            });
        },
        cancellation(row) {
            const { buildingName, unitName, roomNumber } = row;
            let status = 0;
            if (row.residentStatus === 0) {
                status = 1;
            }
            let title = `您确定要修改状态住户“${buildingName}${
                unitName.indexOf('单元') === -1 ? unitName + '单元' : unitName
            }${roomNumber}”`;
            this.$msgBox('是否修改住户状态', title)
                .then(() => {
                    this.$http
                        .postForm('/sc-community/scResident/operationResident', { type: status, id: row.id })
                        .then(({ status, msg }) => {
                            if (0 === status) {
                                this.$message.success(msg);
                                this.mixins_search('del');
                            } else {
                                this.$message.error(msg);
                            }
                        })
                        .catch(() => {});
                })
                .catch(() => {});
        },
        currentOrganId(data) {
            this.currentId = data || '';
        },
        selectionChange(val) {
            this.selectRow = val;
        },
        deluserbyidsFn() {
            //获取选中列表的ids
            let ids = [];
            if (!this.selectRow.length) {
                this.$message.error('您尚未选择要删除的记录，请选择后再操作批量删除');
                return;
            }
            this.selectRow.forEach((v) => {
                ids.push(v.id);
            });
            this.$msgBox(`删除`, '删除后将无法恢复，请问是否继续?')
                .then(() => {
                    this.$http.post('/sc-community/scResident/batchDelete', ids).then(({ status, data, msg }) => {
                        if (0 === status) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.mixins_search();
                        }
                    });
                })
                .catch(() => {});
        },
        addCommand(command) {
            if (command === 'add') {
                this.addOrEdit('add');
                return;
            }
            if (command === 'template') {
                this.__exportExcel('/sc-community/scResident/downTemplate');
                return;
            }
        },
        exportExcel() {
            this.__exportExcel('/sc-community/scResident/getDataExcel', this.mixins_query);
        },
        getNationArray(type) {
            this.$http.postForm('/sc-community/scResident/option', { type: type }).then(({ status, data, msg }) => {
                if (status === 0 && data) {
                    if (type == 'nation') {
                        this.$store.commit('setNationArray', data);
                    } else if (type == 'native') {
                        this.$store.commit('setNativeArray', data);
                    }
                }
            });
        },
        CheckChinese(val, name) {
            var reg = new RegExp('[\\u4E00-\\u9FFF]+', 'g');
            let newVal = val;
            if (!reg.test(val)) {
                newVal = val + name;
            }
            return newVal;
        }
    },
    watch: {
        currentId(newValue, oldValue) {
            this.mixins_query.communityId = '';
            this.mixins_query.buildingId = '';
            this.mixins_query.unitName = '';
            this.mixins_query.roomNumber = '';
            if (newValue.type) {
                let newValueIds = newValue.id.split('-');
                if (newValue.type === 'community') {
                    this.mixins_query.communityId = newValueIds[0];
                } else if (newValue.type === 'building') {
                    this.mixins_query.buildingId = newValueIds[1];
                } else if (newValue.type === 'unit') {
                    this.mixins_query.buildingId = newValueIds[1];
                    this.mixins_query.unitName = newValueIds[2];
                } else if (newValue.type === 'room') {
                    this.mixins_query.roomNumber = newValueIds[newValueIds.length - 1];
                }
            }
            this.thisLeftData = newValue;
            this.mixins_search();
        }
    },
    created() {
        if (this.$store.getters['getNationArray'].length === 0) {
            this.getNationArray('nation');
        }
        if (this.$store.getters['getNativeArray'].length === 0) {
            this.getNationArray('native');
        }
        this.mix_path = ''; // 权限
        this.mixins_dataUrl = '/sc-community/scResident/page'; // 分页查询接口
        this.mixins_query = {
            questParams: ''
        };
        this.mixins_search('search');
        if (this.$route.query.showDialog && !this.$route.query.closeDialog) {
            this.addOrEdit('add');
        }
    }
};
</script>
<style lang="scss" scoped>
@import './style.scss';
.table-list {
    padding-bottom: 16px;
    display: flex;
    justify-content: space-between;
    &:last-child {
        padding: 0;
    }
}
.statusClass {
    margin-right: 15px;
    &.open {
        color: $greenColor;
    }
    &.off {
        color: $redColor;
    }
}
</style>