SmartCommunity/operationSupport/src/views/ownerManagement/index.vue

<template>
    <div class="content main">
        <organ-tree @organId="currentOrganId" v-if="!ownerStatus"></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, index) in householdType" :key="index" :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, index) in residentStatus" :key="index" :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="transactionsNumber">
                    <span v-if="scope.row.transactionsNumber" class="el-link" @click="toTransactionDetails(scope.row)">{{
                        scope.row.transactionsNumber
                    }}</span>
                    <span v-else>{{ scope.row.transactionsNumber }}</span>
                </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="scope.row.residentStatus === 1 ? '注销' : '启用'"
                        >
                            <i
                                class="zoniot_font zoniot-icon-zhuxiao"
                                @click="cancellation(scope.row)"
                                :class="scope.row.residentStatus === 1 ? 'redText' : 'greenText'"
                            ></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';
export default {
    mixins: [list],
    components: { addOwner },
    data() {
        return {
            ownerStatus: '',
            statusOptions: [],
            currentId: '',
            cols: [
                {
                    label: '姓名',
                    prop: 'name'
                },
                {
                    label: '住户类型',
                    prop: 'householdType',
                    format(val) {
                        if (val == 1) {
                            return '业主';
                        } else if (val == 2) {
                            return '亲属';
                        } else if (val == 3) {
                            return '租客';
                        }
                    }
                },
                {
                    label: '社区名称',
                    prop: 'communityName'
                },
                {
                    label: '房屋地址',
                    prop: 'roomNumber'
                },
                {
                    label: '手机号',
                    prop: 'phone'
                },
                {
                    label: '身份证号',
                    prop: 'idNumber'
                },
                {
                    label: '状态',
                    prop: 'residentStatus',
                    format(val) {
                        if (val == 1) {
                            return '在住';
                        } else {
                            return '已注销';
                        }
                    }
                },
                {
                    label: '入住时间',
                    prop: '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: []
        };
    },
    methods: {
        toTransactionDetails(row) {
            const { id, type } = row;
            this.$router.push({
                name: 'main',
                query: {
                    url: '/BillingManage/FinancialManage/ReconciliationManage/TransactionDetails',
                    agentbranchId: id,
                    payType: type,
                    prevName: '支付管理'
                }
            });
        },
        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('/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 { name } = row;
            let status = 0;
            if (row.residentStatus === 0) {
                status = 1;
            }
            let title = `您确定要修改状态住户“${name}”`;
            this.$msgBox('确认提示', title)
                .then(() => {
                    this.$http
                        .postForm('/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('/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('/scResident/downTemplate');
                return;
            }
        },
        exportExcel() {
            this.__exportExcel('/scResident/getDataExcel', this.mixins_query);
        }
    },
    watch: {
        currentId(newValue, oldValue) {
            this.mixins_query.communityId = '';
            this.mixins_query.buildingId = '';
            this.mixins_query.unitName = '';
            this.mixins_query.roomNumber = '';
            if (newValue.type) {
                if (newValue.type === 'community') {
                    this.mixins_query.communityId = newValue.value;
                } else if (newValue.type === 'building') {
                    this.mixins_query.buildingId = newValue.value;
                } else if (newValue.type === 'unit') {
                    this.mixins_query.buildingId = newValue.parentValue;
                    this.mixins_query.unitName = newValue.value;
                } else if (newValue.type === 'room') {
                    this.mixins_query.roomNumber = newValue.value;
                }
            }

            this.mixins_search();
        }
    },
    created() {
        this.mix_path = ''; // 权限
        this.mixins_dataUrl = '/scResident/page'; // 分页查询接口
        this.mixins_query = {
            questParams: ''
        };
        this.mixins_search('search');
    }
};
</script>
<style lang='scss' scoped >
@import './style.scss';
</style>