KM-Front-Milestone2/src/views/modules/knowledge/map/components/orgPeople.vue

<template>
    <div style="display:flex;width:100%;">
        <div style="width:100%;">
            <a-form layout="inline" style="margin-bottom: 10px;">
                <a-row type="flex">
                    <a-form-item
                        label="姓名"
                        name="name"
                        >
                        <a-input v-model="queryParam.name" placeholder="请输入"/>
                    </a-form-item>
                    <a-form-item
                        label="工号"
                        name="userNo"
                        >
                        <a-input v-model="queryParam.userNo" placeholder="请输入"/>
                    </a-form-item>
                    <div style="flex:1;display:flex;justify-content: flex-end;">
                        <a-button type="primary" style="margin-right: 8px;" @click="search">查询</a-button>
                        <a-button @click="reset">重置</a-button>
                    </div>
                </a-row>
            </a-form>
            <rx-grid
                ref="mapRef"
                style="height:90%!important"
                :allowRowSelect="true"
                :multiSelect="true"
                :columns="columns"
                :defaultPageSize="10"
                :url="api.queryGroupUsers"
                :queryParam="queryParam"
                data-field="result.data"
                :pageSizeOptions="[10,30,40]"
                id-field="userId"
                :showPageJump="false"
                :rowSelection="{selectedRowKeys: selectedRowKeys}"
                @selectChange="onSelectChange">
                <template slot="groupSummary" slot-scope="{text}">
                    <div style="white-space: pre-line">{{ text }}</div>
                </template>
            </rx-grid>
        </div>
    </div>
</template>

<script>
  import api from '@/api/knowledge/map/api'
  import OsUserApi from '@/api/user/org/osUser'
  import OsGroupApi from '@/api/user/org/osGroup'
  import {BaseList,Util, RxLayout, RxFit, RxGrid, RxTree} from 'jpaas-common-lib'
  import { getParentNode } from '@/views/modules/knowledge/aJs/getClassifyTree'
  export default {
    name: 'OsUserList',
    mixins: [BaseList],
    components: {
      RxLayout,
      RxFit,
      RxGrid,
      RxTree
    },
    props: {
        groupIds: {
            type: String,
            default: ''
        }
    },
    created() {
        this.queryParam.groupIds = this.groupIds
    },
    data() {
      return {
            api,
            queryParam: {
                groupIds: '',
                name: "",
                userNo: ""
            },
            table: 'table',
            orgData: [],
            userId: '',
            visible: false,
            quitUserIds: [],
            confirmLoading: false,
            quitTime: "",
            osUserTypes:[],
            selectedRowKeys: [],
            // 表头
            columns: [
                {
                    title: '员工ID',
                    align: 'center',
                    dataIndex: 'userId',
                    width: 100
                },
                {
                    title: '工号',
                    align: 'center',
                    dataIndex: 'userNo',
                    width: 100
                },
                {
                    title: '员工姓名',
                    align: 'center',
                    dataIndex: 'fullName',
                    width: 80
                },
                {
                    title: '所属组织',
                    align: 'center',
                    dataIndex: 'groupSummary',
                    scopedSlots: {customRender: 'groupSummary'}
                },
                {
                    title: '职位',
                    align: 'center',
                    dataIndex: 'positionGrade',
                    width: 150
                }
            ],
            // 组织架构
            checkedTarget: {},
            // 职系
            sequencesInfo: {
                gradeId: undefined,
                gradeName: ''
            },
            // 职等
            gradesInfo: {
                gradeLevelId: undefined,
                gradeLevelName: ''
            }
        }
    },
    methods: {
        reset() {
            this.queryParam.name = ""
            this.queryParam.userNo = ""
            this.search()
        },
        search(){
            this.$refs.mapRef.loadData()
        },
        resetQueryParam() {
            this.queryParam = Object.assign({},this.$options.data().queryParam)
        },
        close(){
            //关闭按钮
            this.fitSearch = false ;
        },
        delById(ids) {
            return OsUserApi.delOsUser({ids: ids.join(',')});
        },
        dimissionByIds(ids) {
            this.visible = true;
            this.quitUserIds = ids;
        },
        getListByParams(parameter) {
            return OsUserApi.getOsUserList(parameter)
        },
        //加载部门树
        loadAdminDeps() {
            OsGroupApi.getAdminOrg().then(resp => {
                let data = resp.data;
                let temp = [];
                for (let i = 0; i < data.length; i++) {
                    var rs = data[i];
                    var _isLeaf = rs.childAmount == 0 ? true : false;
                    temp.push({title: rs.name, groupId: rs.groupId, key: rs.key, isLeaf: _isLeaf})
                }

                this.orgData = [...temp];
            })
        },
        //加载左树下的子节点
        onLoadGroupTree(treeNode) {
            if (treeNode.dataRef.children) {
                return;
            }
            console.log(treeNode)
            return OsGroupApi.getParentGroup(treeNode.dataRef.groupId).then(data => {
                let treeData = []
                for (let i = 0; i < data.length; i++) {
                    var rs = data[i]
                    var _isLeaf = rs.childAmount == 0 ? true : false;
                    treeData.push({title: rs.name, groupId: rs.groupId, key: rs.key,isLeaf: _isLeaf})
                }
                var orgData = this.getGroupTree(this.orgData, treeNode.dataRef.groupId, treeData);

                this.orgData = [...orgData];
                console.info("onLoadGroupTree")
                console.info(this.orgData)
            })
        },
        getGroupTree(orgData, groupId, treeData) {
            if (treeData.length > 0) {
                for (var i = 0; i < orgData.length; i++) {
                    if (orgData[i].groupId == groupId) {
                        orgData[i].children = treeData;
                        break;
                    }
                    if (orgData[i].children) {
                        this.getGroupTree(orgData[i].children, groupId, treeData);
                    }
                }
            }
            return orgData;
        },
        //选中树节点
        selectGroupNode(selKeys, e) {
            let node = e.node.dataRef
            if(this.isOnlyOrg) {
                this.checkedTarget['approverId'] = node.groupId
                this.checkedTarget['approverName'] = node.title
                this.$emit('transCheckedTarget',this.checkedTarget)
            } else {
                let organizationTree = getParentNode(e.node)
                this.checkedTarget['organizationId'] = node.groupId
                this.checkedTarget['organizationName'] = node.title
                this.checkedTarget['organizationTree'] = organizationTree
                this.$emit('transCheckedTarget',this.checkedTarget)
            }   
            if(this.isOnlyOrg) {
                //this.selectGroupId=node.groupId;
                //查询左树用户
                if(selKeys.length==0){
                    delete this.queryParam.groupId;
                }else {
                    this.queryParam.groupId = node.groupId;
                }
                this.$refs.table.loadData()
            }
        },
        onSelectChange(keys,rows) {
            this.checkedTarget['approverId'] = rows[0].userNo
            this.checkedTarget['approverName'] = rows[0].fullName
            console.log(this.checkedTarget)
            this.$emit('transCheckedTarget',this.checkedTarget)
        },
        // 选择职系
        handleSequencesChange(arg) {
            if(arg) {
                this.sequencesInfo.gradeName = this.sequencesList.find(item => item.value == arg).label
            } else {
                this.sequencesInfo = {}
            }
            this.$emit('returnSequencesInfo',this.sequencesInfo)
        },
        // 选择职级
        handleGradeChange(arg) {
            if(arg) {
                this.gradesInfo.gradeLevelName = arg
            } else {
                this.gradesInfo = {}
            }
            this.$emit('returnGradeInfo',this.gradesInfo)
        }
    },
}
</script>
<style scoped>
/deep/ .ant-card-head-title {
    padding: 0;
}
</style>