auth-web/src/pages/data-auth-module/data-permission-manage/data-auth-manage/person-auth.vue

<!--
人员授权
@Author: linqian
@Date: 2021-04-06 14:30
-->
<template>
    <dg-row class="property-wapper" :gutter="2">
        <!-- 属性列表 -->
        <dg-col :span="5" class="property-wapper__left">
            <dg-card header="机构列表" class="org-card box-card">
                <org-tree
                    ref="tree"
                    class="u-pm__left"
                    treeHeight="calc(100vh - 19rem)"
                    paddingRight="15px"
                    :search="true"
                    :isClearSelectedNode="clearSelectedNode"
                    @handleGetNode="handleGetNode"
                    @submitRootNode="submitRootNode"
                    @doClickSearchItem="handleGetNode"
                    @setClearNodesFlag="getClearNodesFlag"
                ></org-tree>
            </dg-card>
        </dg-col>
        <!-- 人员列表区域 -->
        <dg-col :span="7" class="property-wapper__center">
            <dg-card class="box-card" header="人员列表">
                <!-- 搜索栏 -->
                <el-form :inline="true" class="search-form">
                    <el-form-item label="类型">
                        <dg-select
                            style="width: 100px"
                            v-model="searchPersonCondition.userType.value"
                            code="DM_USER_TYPE"
                            clearable
                        ></dg-select>
                    </el-form-item>
                    <el-form-item label="姓名">
                        <el-input
                            style="width: 130px"
                            v-model="searchPersonCondition.name.value"
                            clearable
                            @keyup.enter.native="handleSearch"
                        ></el-input>
                    </el-form-item>
                    <el-form-item>
                        <dg-button type="primary" @click="handleSearch" icon="el-icon-search">查询</dg-button>
                    </el-form-item>
                </el-form>
                <!-- 人员列表 -->
                <dg-table
                    ref="personTable"
                    :url="personUrl"
                    :condition="searchPersonCondition"
                    border
                    row-key="id"
                    @row-click="handleTableRowClick"
                    highlight-current-row
                    :row-style="rowStyle"
                    :lazyLoad="true"
                >
                    <!-- <dg-table-column type="selection" reserve-selection width="55"></dg-table-column> -->
                    <dg-table-column type="index" width="70" label="序号"></dg-table-column>
                    <dg-table-column prop="name" label="姓名"></dg-table-column>
                    <dg-table-column prop="idcard" label="身份证号码"></dg-table-column>
                    <dg-table-column prop="userType" label="类型" code="DM_USER_TYPE"></dg-table-column>
                </dg-table>
            </dg-card>
        </dg-col>
        <!-- 权限设置 -->
        <dg-col :span="12" :key="key">
             <set-auth :subId="subId" subType="USER" saveApi="saveUserDataAuth"></set-auth>   
        </dg-col>
    </dg-row>
</template>
<script>
import orgTree from "@/pages/common/tree";
import { staffUserPage } from "@/api/role-auth-info";
import setAuth from "@/components/data-auth/set-auth"
export default {
    components: { orgTree, setAuth },
    data() {
        return {
            // 激活的tab
            activeName: "tableAuth",
            rowStyle: {
                cursor: "pointer"
            },
            // 查询人员姓名
            personUrl: staffUserPage,
            searchPersonCondition: {
                orgId: { value: "", op: "=" },
                name: { value: "", op: "like" },
                userType: { value: "", op: "=" }
            },
            clearSelectedNode: false,
            key: 0,
            subId: ""
        };
    },
    computed: {},
    methods: {
        /**
         * @description: 搜索人员列表
         */
        handleSearch() {
            this.clearSelectedNode = true;
            this.searchPersonCondition.orgId.value = "";
            this.$refs.personTable.searchForm();
            this.subId = "";
            this.key++
        },

        /**
         * @description: 点击人员列表
         * @param {*} row
         */
        handleTableRowClick(row) {
            this.subId = row.idcard;
            this.key++
        },
        /**
         * @description: 获取机构节点
         * @param {*} node
         */
        handleGetNode({ id }) {
            const oldValue = this.searchPersonCondition.orgId.value;
            if (oldValue !== id) {
                this.searchPersonCondition.orgId.value = id;
                this.$refs.personTable.searchForm();
                this.subId = "";
                this.key++;
            }
        },
        // 默认获取根节点
        submitRootNode({ id }) {
            this.$nextTick(() => {
                this.handleGetNode({ id });
            });
        },
        handleSave() {},
        /**
         * @description: 设置清除选中节点标志
         * @param {*} val
         */
        getClearNodesFlag(val) {
            this.clearSelectedNode = val;
        }
    },
    created() {},
    mounted() {}
};
</script>

<style lang='scss' scoped>
/deep/ .el-card__header {
    display: block;
}
/deep/ .org-card {
    .el-card__body {
        padding: 20px 5px 20px 20px;
    }
}
.user-search {
    display: flex;
    align-items: center;
}

</style>