SmartCommunity/accessControlSystem/src/views/accessControlAuthorization/employeeAuthorization/index.vue

<template>
    <div class="content main">
        <organ-tree @organId="currentOrganId" :buildingType="1"></organ-tree>
        <div class="content-right">
            <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-button
                    class="search-btn"
                    type="primary"
                    @click="mixins_search()"
                    :disabled="mixins_onQuery"
                    :loading="mixins_onQuery"
                    icon="el-icon-search"
                    >搜索</el-button
                >
            </div>
            <zz-table
                :settings="{ showIndex: true, stripe: true }"
                :cols="cols"
                :loading="mixins_onQuery"
                :data="mixins_list"
                :pageset="mixins_pageset"
                @page-change="pageChange"
            >
                <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="faceStatus">
                    <span v-if="scope.row.faceStatus == 1" class="mainText">启用</span>
                    <span v-else-if="scope.row.faceStatus == 0" class="redText">禁用</span>
                </template>
                <template slot-scope="scope" slot="appStatus">
                    <span v-if="scope.row.appStatus == 1" class="mainText">启用</span>
                    <span v-else-if="scope.row.appStatus == 0" class="redText">禁用</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-xiangqing" @click="lookPage(scope.row)"></i>
                        </el-tooltip>
                    </div>
                </template>
            </zz-table>
        </div>
    </div>
</template>

<script>
import list from '@utils/list.js';

export default {
    mixins: [list],
    data() {
        return {
            currentId: '',
            cols: [
                {
                    label: '姓名',
                    prop: 'name'
                },
                {
                    label: '手机号',
                    prop: 'phone'
                },
                {
                    label: '身份证号',
                    prop: 'idNumber'
                },
                {
                    label: '社区名称',
                    prop: 'communityName'
                },
                {
                    label: '住户类型',
                    prop: 'householdType',
                    slot: 'householdType'
                },
                {
                    label: '房屋地址',
                    prop: 'roomNumber',
                    slot: 'roomNumber'
                },
                {
                    label: '人脸授权',
                    prop: 'faceStatus',
                    slot: 'faceStatus'
                },
                {
                    label: 'app授权',
                    prop: 'appStatus',
                    slot: 'appStatus'
                },
                {
                    label: '门禁卡数量',
                    prop: 'cardNum',
                },

                {
                    label: '操作',
                    slot: 'opt',
                    width: 130
                }
            ],
            householdType: [
                {
                    status: 1,
                    label: '业主'
                },
                {
                    status: 2,
                    label: '亲属'
                },
                {
                    status: 3,
                    label: '租客'
                }
            ],
            thisLeftData: {},
            mixins_post: 'get'
        };
    },
    methods: {
        lookPage(row) {
            this.$router.push({
                path: '/ownerManagement/details',
                query: {
                    id: row.id
                }
            });
        },
        currentOrganId(data) {
            this.currentId = data || '';
        },
        CheckChinese(val, name) {
            var reg = new RegExp('[\\u4E00-\\u9FFF]+', 'g');
            let newVal = val;
            if (!reg.test(val)) {
                newVal = val + name;
            }
            return newVal;
        },
        checkDateType(time) {
            return !!time ? this.$moment(new Date(time)).format('YYYY-MM-DD') : '--';
        }
    },
    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() {
        this.mixins_dataUrl = '/sc-gate-web/auth/userPage'; // 分页查询接口
        this.mixins_query = {};
        this.mixins_search('search');
    }
};
</script>
<style lang="scss" scoped>
@import '../style.scss';
.table-list {
    padding-bottom: 16px;
    display: flex;
    justify-content: space-between;
    &:last-child {
        padding: 0;
    }
}
</style>