ybxf-security-ui/src/components/handleSelectedOrg/index.vue

<template>
    <div>
        <!-- 列表 -->
        <el-table v-loading="loading" :data="orgList" @row-click="tableRowClick" height="50vh" v-if="type == 'comInfo'">
            <el-table-column label="用户编号" align="center" key="id" prop="id" v-if="columns[0].visible" />
            <el-table-column label="用户名称" align="center" key="username" prop="username" v-if="columns[1].visible"
                :show-overflow-tooltip="true" />
            <el-table-column label="用户昵称" align="center" key="nickname" prop="nickname" v-if="columns[2].visible"
                :show-overflow-tooltip="true" />
            <el-table-column label="部门" align="center" key="deptName" prop="dept.name" v-if="columns[3].visible"
                :show-overflow-tooltip="true" />
            <el-table-column label="手机号码" align="center" key="mobile" prop="mobile" v-if="columns[4].visible" width="120" />
            <el-table-column label="是否已读" width="120">
                <template slot-scope="scope">
                    <span>{{ scope.row.is_read === 1?'已读':'未读' }}</span>
                </template>
            </el-table-column>
        </el-table>
        <!-- 列表 -->
        <el-table v-loading="loading" :data="orgList" @row-click="tableRowClick" height="50vh" v-else>
            <el-table-column label="ID" align="center" prop="id" />
            <el-table-column label="单位名称" align="center" prop="orgName" />
            <el-table-column label="单位地址" align="center" prop="dwdz" />
            <el-table-column label="监管单位类别" align="center" prop="dwlx">
                <template v-slot="scope">
                    <dict-tag :type="DICT_TYPE.BACKEND_ORG_TYPE" :value="scope.row.dwlx" />
                </template>
            </el-table-column>
            <el-table-column label="上级消防管辖单位" align="center" prop="sjxfgxdw">
                <template v-slot="scope">
                    <span>{{ deptOptionsTrans(scope.row.sjxfgxdw) }}</span>
                </template>
            </el-table-column>
            <!-- <el-table-column label="单位名称" align="center" prop="orgName" />
            <el-table-column label="单位地址" align="center" prop="dwdz" />
            <el-table-column label="单位拼音简称" align="center" prop="dwpyjc" />
            <el-table-column label="监管单位类别" align="center" prop="dwlx" />
            <el-table-column label="经济所有制" align="center" prop="jjsyz" />
            <el-table-column label="单位成立时间" align="center" prop="dwclsj">
                <template v-slot="scope">
                    <span>{{ parseTime(scope.row.dwclsj) }}</span>
                </template>
            </el-table-column> -->
        </el-table>
        <!-- 分页组件 -->
        <!-- <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
            @pagination="getOrgList(userId)" /> -->
    </div>
</template>

<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

import { listSimpleDepts } from "@/api/system/dept";
import { listSimplePosts } from "@/api/system/post";

import { CommonStatusEnum } from "@/utils/constants";
import { DICT_TYPE, getDictDatas } from "@/utils/dict";
import { assignUserRole, listUserRoles } from "@/api/system/permission";
import { listSimpleRoles } from "@/api/system/role";
import { addUserOrgSaveBatch, getOneUser2OrgList } from "@/api/system/org";
import { getBaseHeader } from "@/utils/request";
import { createOrg, updateOrg, deleteOrg, getOrg, getOrgPage, exportOrgExcel } from "@/api/backend/org"
import { createMeeting, updateMeeting, deleteMeeting, getMeeting, getMeetingPage, exportMeetingExcel, getmeetingorg } from "@/api/backend/meeting"
import { getTaskBroadPage } from "@/api/backend/taskBroad";
import { createPoliceStation, updatePoliceStation, deletePoliceStation, getPoliceStation, getPoliceStationPage, exportPoliceStationExcel } from "@/api/backend/policeStation"
import { createTaskInfo, updateTaskInfo, deleteTaskInfo, getTaskorgInfoXin, getTaskInfoPage, exportTaskInfoExcel, createTaskInfoBroad, TaskInfoSetuporg, TaskInfoSetupinspect } from "@/api/backend/taskInfo"
import { getselfComuser } from "@/api/backend/comInfo"


export default {
    components: {},
    data() {
        return {
            // =======单位信息==========================

            // 遮罩层
            loading: false,
            // 最终选择的单位信息列表
            orgList: [],
            // 最终选择的单位信息列表总条数
            total: 0,
            // 右侧查询参数
            queryParams: {
                pageNo: 1,
                pageSize: 10,
                // userId: '',
            },
            // 列信息
            columns: [
                { key: 0, label: `用户编号`, visible: true },
                { key: 1, label: `用户名称`, visible: true },
                { key: 2, label: `用户昵称`, visible: true },
                { key: 3, label: `部门`, visible: true },
                { key: 4, label: `手机号码`, visible: true },
                { key: 5, label: `状态`, visible: true },
                { key: 6, label: `创建时间`, visible: true }
            ],
            deptOptionsList: {},
        };
    },
    computed: {},
    created() {

        this.getTreeselect()
        this.Orgreset();
        this.getOrgList(this.userId)
    },
    mounted() {
        console.log(';45653443rhfudhisdv k :>> ');
    },
    props: {
        userId: {
            // type: Number
        },
        type: { // 判断类型
            type: String
        },
    },
    watch: {
        userId: { //深度监听，可监听到对象、数组的变化
            handler(newV, oldV) {
                console.log('userId :>> ', this.userId);
                this.Orgreset();
                this.getOrgList(this.userId)

            },
            deep: true
        }
    },
    methods: {
        /** 查询部门下拉树结构 + 岗位下拉 */
        getTreeselect() {
            listSimpleDepts().then(response => {
                // 处理 deptOptions 参数
                var list = response.data
                list.map(i => {
                    this.deptOptionsList[i.id] = i.name
                })
            });
        },
        deptOptionsTrans(val) {
            return this.deptOptionsList[val];
        },
        // ========单位信息==============================================================
        // 单位信息表单重置
        Orgreset() {
            this.orgList = []
            this.queryParams = {
                pageNo: 1,
                pageSize: 10,
            };
        },
        /** 查询单位信息列表 */
        getOrgList(userId) {
            if (this.userId != undefined || this.userId != null) {
                // 根据父组件传的type不同，获取到的与单位站的关系也不太
                this.loading = true
                if (this.type === 'user') {
                    this.queryParams.userId = userId
                    getOneUser2OrgList(this.queryParams).then(response => {
                        this.orgList = response.data ? response.data : []
                        this.total = response.data ? response.data.length : 0

                        this.loading = false
                    })
                } else if (this.type === 'policeStation') {
                    getPoliceStation(userId).then(response => {
                        this.orgList = response.data ? (response.data.orgDOList ? response.data.orgDOList : []) : []
                        this.total = response.data ? (response.data.orgDOList ? response.data.orgDOList.length : 0) : 0

                        this.loading = false
                    })
                } else if (this.type === 'meeting') {
                    this.queryParams.meetingId = userId
                    getmeetingorg(this.queryParams).then(response => {
                        this.orgList = response.data ? response.data.list : []
                        this.total = response.data ? response.data.total : 0

                        this.loading = false
                    })
                } else if (this.type === 'tackinfo') {
                    // this.queryParams.taskId = userId

                    getTaskorgInfoXin(userId).then(response => {
                        // this.orgList = response.data ? (response.data.orgDOList ? response.data.orgDOList : []) : []
                        // this.total = response.data ? (response.data.orgDOList ? response.data.orgDOList.length : 0) : 0
                        this.orgList = response.data
                        this.loading = false
                    })
                } else if (this.type === 'comInfo') {
                    // this.queryParams.taskId = userId
                    getselfComuser({ comId: userId }).then(response => {
                        this.orgList = response.data ? response.data : []
                        this.total = response.data ? response.data.length : 0

                        this.loading = false
                    })
                } else {

                }
            }

        },

        // 分配分管单位table点击
        tableRowClick(row) {
            console.log('row, column, event :>> ', row);
        },

        confirmMSg() {
            return this.orgList
        }
        // =========表单添加时选单位=================================================

        // =================================================================

    },
};
</script>
<style scoped>
.icon-button {
    border-color: transparent;
    font-size: 23px;
    padding: 0px;
}

.icon-button.is-plain:hover,
.icon-button.is-plain:focus {
    background: #FFFFFF;
    border-color: transparent;
    color: #1890ff;
}
</style>