vue-insagent-pc/src/views/PeopleManage/Player/SetChannelManager.vue

<template>
    <div class="setupManager">
        <el-main ref="elMain" style="padding: 0px">
            <Split :gutterSize="2" style="height: calc(100vh - 120px)">
                <SplitArea :size="leftSplitWidth" :minSize="240">
                    <div class="container_left">
                        <div class="search">
                            <el-input v-model="filterText" size="small" placeholder="请输入姓名" suffix-icon="el-icon-search"></el-input>
                        </div>
                        <el-tree
                            ref="tree"
                            :data="treeData"
                            :props="{children: 'children', label: 'name'}"
                            :highlight-current="true"
                            :current-node-key="currentKey"
                            :filter-node-method="filterNode"
                            @node-click="handleNodeClick"
                            >
                            <div class="custom-tree-node" slot-scope="{ node, data }">
                                <span>{{ data.name }}</span>
                                <span class="totalNum">{{ data.totalNum }}</span>
                            </div>
                        </el-tree>
                    </div>
                </SplitArea>
                <SplitArea :size="rightSplitWidth">
                    <div class="container_right">
                        <el-row >
                            <el-form ref="queryFormRef" :inline="false" :model="queryFrom" label-position="left" label-width="60px">                      
                                <el-col :span="6">
                                    <el-form-item label="工号">
                                        <el-input size="small" clearable placeholder="请输入工号" v-model="queryFrom.userId"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="姓名">
                                        <el-input size="small" clearable placeholder="请输入姓名" v-model="queryFrom.name"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="手机号">
                                        <el-input size="small" clearable placeholder="请输入手机号" v-model="queryFrom.mobile"></el-input>
                                    </el-form-item>
                                </el-col>
                                <!-- <el-col :span="6">
                                    <el-form-item label="状态">
                                        <el-select  size="small"  clearable v-model="queryFrom.status" placeholder="请选择">
                                            <el-option  v-for="val in user_statusoptions"
                                                        :label="val.label"
                                                        :value="val.value"
                                                        :key="val.id">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col> -->
                                <el-col :span="6">
                                    <el-form-item label>
                                        <el-button  size="small"
                                                    type="primary"
                                                    @click="queryStaffInfo">查询
                                        </el-button>
                                        <el-button  size="small"
                                                    type="default"
                                                    @click="reset">重置
                                        </el-button>
                                    </el-form-item>
                                </el-col>
                            </el-form>
                        </el-row>
                        <el-row style="margin-bottom: 20px">
                            <el-button  size="small"
                                        type="primary"
                                        @click="BatchSettingsDialog">批量设置
                            </el-button>
                            <el-button  size="small"
                                        type="primary"
                                        :disabled="selection.length == 0"
                                        @click="BatchCancellation">批量取消
                            </el-button>
                        </el-row>
                        <kt-common-table    ref="ktcommontable"
                                            :tableHeights="650"
                                            :data="pageResult"
                                            :columns="columns"
                                            :showBatchDelete="false"
                                            :select="true"
                                            :showOperation="false"
                                            :showDefaultPage="false"
                                            @findPage="queryList"
                                            @selectionChange="selectionChange">
                        </kt-common-table>
                    </div>
                    
                </SplitArea>
            </Split>
        </el-main>
        <el-dialog  :title="settingDialog.title"  :visible.sync="settingDialog.visible"  
                    :close-on-press-escape="false"  :modal="true"
                    :show-close="false" 
                    custom-class="settingDialog"
                    v-dialogDrag
                    top="1vh">
            <el-row >
                <el-form ref="queryFormRef" :inline="false" :model="settingDialog.queryFrom" label-position="left" label-width="60px">                      
                    <el-col :span="6">
                        <el-form-item label="工号">
                            <el-input size="small" clearable placeholder="请输入工号" v-model="settingDialog.queryFrom.userId"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="姓名">
                            <el-input size="small" clearable placeholder="请输入姓名" v-model="settingDialog.queryFrom.name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="手机号">
                            <el-input size="small" clearable placeholder="请输入手机号" v-model="settingDialog.queryFrom.mobile"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label>
                            <el-button  size="small"
                                        type="primary"
                                        @click="queryDialogList">查询
                            </el-button>
                            <el-button  size="small"
                                        type="default"
                                        @click="resetDialog">重置
                            </el-button>
                        </el-form-item>
                    </el-col>
                </el-form>
            </el-row>
            <kt-common-table    ref="ktcommontable"
                                :tableHeights="437"
                                :data="settingDialog.pageResult"
                                :columns="columns"
                                :showBatchDelete="false"
                                :select="true"
                                :showOperation="false"
                                @findPage="queryDialogList"
                                @selectionChange="selectionDialogChange">
            </kt-common-table>
            <div class="footerHandle" style="text-align: right">
                <el-button
                size="small"
                style="border: 1px solid #D42426;
                color: #D42426;"
                class="closeBtn"
                @click="closeDialog"
                >取消</el-button
                >
                <el-button size="small" type="primary" :disabled="selectionDialog.length == 0" @click="BatchSettings"
                >确定</el-button
                >
            </div>
        </el-dialog>
    </div>
</template>

<script>
import mixa from "../mixin";
import KtCommonTable from "@/views/Core/KtCommonTable.vue"; //表格组件
const mixin = new mixa({
    treeTypeNum: null
});
export default {
    name: 'setupManager',
    components: {
        KtCommonTable,
    },
    mixins: [mixin],
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
    data(){
        return {
            treeData: [],   //左侧树数据
            currentKey: '', //选中的左侧节点
            pageResult: {}, //表格数据
            columns: [  //表格列
                {   prop: "deptId", label: "部门编码", minWidth: 80, sortable: false },
                {   prop: "pdeptName",  label: "机构名称",  minWidth: 120,  sortable: false },
                {   prop: "deptName", label: "部门名称", minWidth: 80, sortable: false },
                {   prop: "userId", label: "工号", minWidth: 80, sortable: false },
                {   prop: "name", label: "姓名", minWidth: 120, sortable: false },
                // {   prop: "sex",  label: "性别", minWidth: 80, sortable: false, isSex: true },
                {   prop: "mobile", label: "联系电话", minWidth: 100, sortable: false },
                // {   prop: "roleId", label: "角色", minWidth: 80, sortable: false },
                // {   prop: "submitTime", label: "提交时间", type: "text", minWidth: 100 },
                // {   prop: "approveTime", label: "审核时间", type: "text", minWidth: 100 },
                {   prop: "approveBy", label: "审核人", type: "text", minWidth: 100 },
                {   prop: "leaderName", label: "管理人", type: "text", minWidth: 100 },
                // {   prop: "status", label: "状态", minWidth: 120, sortable: false, isStatus: true },
            ],
            queryFrom: {    //查询参数
                userId: "",
                name: "",
                mobile: "",
                status: "",
                roleId: "21",
                agentFlag: "1"
            },
            pageData: {
                pageNum: 1,
                pageSize: 20,
                totalSize: 0,
            },
            selection: [],
            selectionDialog: [],
            filterText: '',
            leaderName: '',
            settingDialog: {
                title: '设置管理人',
                visible: false,
                columns: [  //表格列
                    {   prop: "deptId", label: "部门编码", minWidth: 80, sortable: false },
                    {   prop: "pdeptName",  label: "机构名称",  minWidth: 120,  sortable: false },
                    {   prop: "deptName", label: "部门名称", minWidth: 80, sortable: false },
                    {   prop: "userId", label: "工号", minWidth: 80, sortable: false },
                    {   prop: "name", label: "姓名", minWidth: 120, sortable: false },
                    // {   prop: "sex",  label: "性别", minWidth: 80, sortable: false, isSex: true },
                    {   prop: "mobile", label: "联系电话", minWidth: 100, sortable: false },
                    // {   prop: "roleId", label: "角色", minWidth: 80, sortable: false },
                    // {   prop: "submitTime", label: "提交时间", type: "text", minWidth: 100 },
                    // {   prop: "approveTime", label: "审核时间", type: "text", minWidth: 100 },
                    {   prop: "approveBy", label: "审核人", type: "text", minWidth: 100 },
                    // {   prop: "leaderName", label: "管理人", type: "text", minWidth: 100 },
                    // {   prop: "status", label: "状态", minWidth: 120, sortable: false, isStatus: true },
                ],
                pageData: {
                    pageNum: 1,
                    pageSize: 20,
                    totalSize: 0,
                },
                queryFrom: {    //查询参数
                    userId: "",
                    name: "",
                    mobile: "",
                    status: "",
                    roleId: "21",
                    agentFlag: "1"
                },
                pageResult: {}, //表格数据
            }
        }
    },
    created(){
        this.$nextTick(() =>{
            this.searchLeaderFun();
        })
    },
    methods: {
        filterNode(value, data) {
            if (!value) return true;
            return data.name.indexOf(value) !== -1;
        },
        queryStaffInfo(){   //按搜索条件搜索右侧列表
            this.pageData = {
                pageNum: 1,
                pageSize: 20,
                totalSize: 0,
            }
            this.queryList(this.currentKey);
        },
        reset(){    //重置搜索条件
            this.queryFrom = {    //查询参数
                userId: "",
                name: "",
                mobile: "",
                status: "",
                roleId: "21",
                agentFlag: "1"
            },
            this.pageData = {
                pageNum: 1,
                pageSize: 20,
                totalSize: 0,
            }
            this.queryList(this.currentKey);
        },
        resetDialog(){  //重置弹窗搜索
            this.settingDialog.queryFrom = {    //查询参数
                userId: "",
                name: "",
                mobile: "",
                status: "",
                roleId: "21",
                agentFlag: "1"
            },
            this.settingDialog.pageData = {
                pageNum: 1,
                pageSize: 20,
                totalSize: 0,
            }
            this.queryDialogList();
        },
        searchLeaderFun(){  //查询左侧树
            this.$api.user.getManageList({
                roleId: "21",
                agentFlag: "1"
            }).then((res) => {
                this.treeData = res.data;
                if(this.treeData.length){
                    this.currentKey = this.treeData[0].id;
                    this.leaderName = this.treeData[0].name;
                    this.queryList(this.currentKey);
                }
            }).catch(e =>{
            });
        },
        handleNodeClick(node){  //点击左侧树节点，查询右侧列表
            this.currentKey = node.id;
            this.pageData = {
                pageNum: 1,
                pageSize: 20,
                totalSize: 0,
            }
            this.queryList();
        },
        queryList(data){    //查询右侧人员列表
            // 获取分页数据
            if (data && data.pageRequest) {
                this.pageData.pageNum = data.pageRequest.pageNum;
                this.pageData.pageSize = data.pageRequest.pageSize;
            }
            this.queryFrom.leaderId = this.currentKey;
            this.$api.user.getManagePersonnel({
                ...this.pageData, dto: {...this.queryFrom}
            })
                .then((res) => {
                    res.data.records.forEach((val) => {
                        if (val.sex && val.sex !== "" && val.sex !== null) {
                        val.sex = this.sexoptions.find(
                            (ele) => ele.value == val.sex
                        ).label;
                        }
                        if (val.status && val.status !== "" && val.status !== null) {
                        val.status = this.user_statusoptions.find(
                            (ele) => ele.value == val.status
                        ).label;
                        }
                        val.roleId = val.roleName;
                    });
                    this.pageResult = {     //表格组件参数
                        content: res.data.records,
                        pageNum: res.data.current,
                        pageSize: res.data.size,
                        totalPages: res.data.pages,
                        totalSize: res.data.total,
                    };
                    // this.$nextTick(() => {
                    //     let arr = [];
                    //     res.data.records.forEach(item =>{
                    //         if(item.selectedNot){
                    //             arr.push(item);
                    //         }
                    //     })
                    //     this.$refs.ktcommontable.setDefaultSelections(arr);
                    // });
                    this.pageData.pageNum = res.data.current;
                    this.pageData.pageSize = res.data.size;
                    this.pageData.totalSize = res.data.total;
                });
        },
        selectionChange(data){  //批量取消表格勾选事件
            this.selection = data.selections;
        },
        selectionDialogChange(data){    //批量设置表格勾选事件
            this.selectionDialog = data.selections;
        },
        BatchSettingsDialog(){  //打开批量设置弹窗
            this.queryDialogList();
            this.settingDialog.visible = true;
        },
        closeDialog(){  //关闭设置管理人弹窗
            this.settingDialog.visible = false;
        },
        async queryDialogList(data){
            // 获取分页数据
            if (data && data.pageRequest) {
                this.settingDialog.pageData.pageNum = data.pageRequest.pageNum;
                this.settingDialog.pageData.pageSize = data.pageRequest.pageSize;
            }else{
                this.settingDialog.pageData = {
                    pageNum: 1,
                    pageSize: 20,
                    totalSize: 0,
                }
            }
            this.settingDialog.queryFrom.notSelected = 0;
            await this.$api.user.getManagePersonnel({
                ...this.settingDialog.pageData, dto: {...this.settingDialog.queryFrom}
            })
                .then((res) => {
                    res.data.records.forEach((val) => {
                        if (val.sex && val.sex !== "" && val.sex !== null) {
                        val.sex = this.sexoptions.find(
                            (ele) => ele.value == val.sex
                        ).label;
                        }
                        if (val.status && val.status !== "" && val.status !== null) {
                        val.status = this.user_statusoptions.find(
                            (ele) => ele.value == val.status
                        ).label;
                        }
                        val.roleId = val.roleName;
                    });
                    this.settingDialog.pageResult = {     //表格组件参数
                        content: res.data.records,
                        pageNum: res.data.current,
                        pageSize: res.data.size,
                        totalPages: res.data.pages,
                        totalSize: res.data.total,
                    };
                    // this.$nextTick(() => {
                    //     let arr = [];
                    //     res.data.records.forEach(item =>{
                    //         if(item.selectedNot){
                    //             arr.push(item);
                    //         }
                    //     })
                    //     this.$refs.ktcommontable.setDefaultSelections(arr);
                    // });
                    this.settingDialog.pageData.pageNum = res.data.current;
                    this.settingDialog.pageData.pageSize = res.data.size;
                    this.settingDialog.pageData.totalSize = res.data.total;
                });
        },
        BatchSettings(){    //批量设置
            let arr = [];
            this.selectionDialog.forEach(item =>{
                arr.push(item.userId);
            })
            let data = {
                leaderId: this.currentKey,
                leaderName: this.leaderName,
                userIds: arr
            }
            this.$api.user.setManage(data).then(res =>{
                if(res.code == 200){
                    this.$message({
                        message: "设置成功",
                        type: "success",
                    });
                    this.reset();
                    this.settingDialog.visible = false;
                }else{
                    this.$message.error(res.msg);
                }
            }).catch(e =>{
                console.log(e);
            })
            // console.log(this.selection);
        },
        BatchCancellation(){    //批量取消
            let arr = [];
            this.selection.forEach(item =>{
                arr.push(item.userId);
            })
            let data = {
                leaderId: this.currentKey,
                leaderName: this.leaderName,
                userIds: arr
            }
            console.log(data);
            this.$api.user.cancleManage(data).then(res =>{
                if(res.code == 200){
                    this.$message({
                        message: "设置成功",
                        type: "success",
                    });
                    this.reset();
                    this.selectionDialog.visible = false;
                }else{
                    this.$message.error(res.msg);
                }
            }).catch(e =>{
                console.log(e);
            })
        },

    }
}
</script>

<style lang="scss" scoped>
.setupManager{
    width: 100%;
    height: 100%;
    position: relative;
    .container_left{
        height: 100%;
        // border-top: 1px solid #DCDFE6;
        padding-right: 10px;
        .search{
            padding-bottom: 15px;
        }
        .el-tree{
            height: calc(100% - 55px);
            overflow: auto;
            .el-tree-node__content{
                width: 100%;
                .custom-tree-node{
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    padding-right: 20px;
                    .totalNum{
                        color: #999;
                    }
                }
            }
        }
    }
    .container_right{
        padding: 20px;
        .el-form-item{
            display: flex;
        }
        >>>.el-form-item__content{
            margin: 0 !important;
            width: calc(100% - 70px);
            .el-input,.el-select{
                width: 100%;
            }
        }
    }
    .el-button{
        // width: 90px;
        // height: 36px;
        // font-size: 16px;
        // font-weight: 300 !important;
    }
    .el-button--default{
        &:hover{
            background: transparent;
            border: 1px solid #D42426;
        }
        &:focus{
            background: transparent;
            border: 1px solid #D42426;
        }
    }
    .el-dialog__wrapper{
        width: 100%;
        height: 100%;
        position: absolute;
    }
    >>>.settingDialog{
        width: calc(85%);
        // height: 100%;
        // position: absolute;
        // right: 0;
        // bottom: 0;
        // margin: 0;
        .el-dialog__header{
            height: 50px;
            line-height: 50px;
            padding: 0;
            text-align: center;
            border-top-left-radius: 6px;
            border-top-right-radius: 6px;
            .el-dialog__title{
                color: #333;
                font-weight: 500;
            }
        }
        .el-dialog__body{
            background: #fff;
            border-radius: 6px;
            padding-bottom: 0;
            height: 600px;
            .bottomFixed{
                position: absolute;
                bottom: -50px;
            }
            .el-col-6{
                padding-right: 10px;
            }
            .footerHandle{
                position: absolute;
                bottom: 20px;
                right: 20px;
                .el-button{
                    width: 90px;
                    height: 36px;
                    font-size: 16px;
                    margin-left: 24px;
                    font-weight: 310;
                }
            }
        }
    }
}
</style>