fj-dc-ui/.svn/pristine/ff/ffa17cbcdfc8cc4790313bb813a5399d34f71e91.svn-base

<template>
	<!-- 弹出窗 -->
	<el-dialog title="添加参会人员" :before-close="closeMemberDialog" :visible.sync="dialogFormVisible" width="80%">
		<el-container>
			<el-aside width="200px" style="border:1px solid #d5d5ff">
				<p style="font-weight:bolder;background-color:#d5d5ff;padding:3px;">
					<i class="el-icon-share"></i>所属督查组
				</p>
				<el-tree
                    :highlight-current="true"
                    style="height:100%;"
                    :data="treeData"
                    node-key="id"
                    :expand-on-click-node="false"
                    @node-click = 'treeNodeClickHandler'
                    :props="defaultProps"
                    ref="jigou_tree">
                </el-tree>
			</el-aside>
			<el-main style="border:1px solid #d5d5ff;margin-left:5px;padding:0px;">
				<p style="font-weight:bolder;background-color:#d5d5ff;padding:3px;">督查人员</p>
				<el-form style="padding:10px">
					<div>
						<el-form size="mini" :inline="true" class="demo-form-inline">
							<el-form-item label="人员名称">
								<el-input
									style="width:140px;"
									v-model="searchNameOfMemberName"
									clearable
									placeholder="请输入人员名称"
								></el-input>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="refreshCurrentShow">查询</el-button>
							</el-form-item>
						</el-form>
						<el-table
                            ref="multipleTable"
                            v-if="type == 'checkbox'"
							border
							v-loading="loading"
							:data="currentShowList"
							tooltip-effect="dark"
							style="width: 100%"
                            @select="isSelected"
							@selection-change="handleSelectionChange">
                            <el-table-column align="center" type="selection"  width="70"></el-table-column>
                            <el-table-column align="center" type="index" label="序号" min-width="45">
                                <template slot-scope="scope">
                                    {{ (pageIndex - 1) * pageSize + (scope.$index + 1) }}
                                </template>
                            </el-table-column>
                            <el-table-column align="center" show-overflow-tooltip prop="persName" label="人员姓名" min-width="80"></el-table-column>
                            <el-table-column align="center" show-overflow-tooltip prop="orgNm" label="机构名称" min-width="100"></el-table-column>
                            <el-table-column align="center" show-overflow-tooltip prop="admDuty" label="职务" min-width="100"></el-table-column>
                            <el-table-column align="center" show-overflow-tooltip prop="dpnm" label="部门名称" min-width="100"></el-table-column>
                            <el-table-column align="center" show-overflow-tooltip prop="dppost" label="职称" min-width="100"></el-table-column>
                            <el-table-column align="center" show-overflow-tooltip prop="sex" label="性别" :formatter="sexFormatter" min-width="50"></el-table-column>
                            <el-table-column align="center" show-overflow-tooltip prop="mobilenumb" label="手机号" min-width="100"></el-table-column>
                        </el-table>
						<el-table
                            v-if="type == 'radio'"
							border
							v-loading="loading"
							:data="currentShowList"
							tooltip-effect="dark"
							style="width: 100%">
                            <el-table-column align="center" width="70">
                                <template slot-scope="scope">
                                    <el-radio v-model="radioSelect" :label="scope.row.guid" @change="radioChange(scope.row)">&nbsp;</el-radio>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" type="index" label="序号" min-width="45">
                                <template slot-scope="scope">
                                    {{ (pageIndex - 1) * pageSize + (scope.$index + 1) }}
                                </template>
                            </el-table-column>
                            <el-table-column align="center" show-overflow-tooltip prop="persName" label="人员姓名" min-width="80"></el-table-column>
                            <el-table-column align="center" show-overflow-tooltip prop="orgNm" label="机构名称" min-width="100"></el-table-column>
                            <el-table-column align="center" show-overflow-tooltip prop="admDuty" label="职务" min-width="100"></el-table-column>
                            <el-table-column align="center" show-overflow-tooltip prop="dpnm" label="部门名称" min-width="100"></el-table-column>
                            <el-table-column align="center" show-overflow-tooltip prop="dppost" label="职称" min-width="100"></el-table-column>
                            <el-table-column align="center" show-overflow-tooltip prop="sex" label="性别" :formatter="sexFormatter" min-width="50"></el-table-column>
                            <el-table-column align="center" show-overflow-tooltip prop="mobilenumb" label="手机号" min-width="100"></el-table-column>
                        </el-table>
						<div
							class="block"
							style="display:flex;flex-direction:row;justify-content:center;align-items:center;padding-top: 5px;background-color: #fff;">
							<el-pagination
								small
								@current-change="handleCurrentChange"
								:pager-count="5"
								:current-page.sync="pageIndex"
								:page-size="pageSize"
								layout="total, prev, pager, next"
								:total="total"
							></el-pagination>
						</div>
					</div>
				</el-form>
			</el-main>
		</el-container>
		<div slot="footer" class="dialog-footer">
			<el-button @click="closeMemberDialog">取 消</el-button>
			<el-button type="primary" @click="saveChange">确 定</el-button>
		</div>
	</el-dialog>
</template>
<script>
import request from '@util/gw_ajax_request.js';
import { getTrees } from "@util/gw_formatTree.js";
export default {
	props: ['type','members'],
	data() {
		return {
            treeData: [],
            searchNameOfMemberName: '',
			currentShowList: [],
			dialogFormVisible: true,
			formLabelWidth: "120",
			multipleSelection: [],
            groupId: '',
            memberIds: [],
            memberNames: [],
			pageIndex: 1,
			pageSize: 10,
			total: 0,
            loading:false,
            defaultProps: {
                children: 'children',
                label: 'pnm',
                id: 'id'
            },
            radioSelect: '',
            singleSeclection: {}
		}
	},
	mounted() {
        this.initMember()  //初始化当前已有成员数据，使之为选中状态
        this.getGroupData()
	},
	computed:{
        userId:function(){
            return localStorage.getItem("userid")? localStorage.getItem("userid"): '1098101939614724096'
        },
	},
	methods: {
        //获取当前用户组数据
        getGroupData(){
            request.get(`/dc/organization/base/getAllNode?userId=${this.userId}`).then(res=>{
                if(res.success){
                    this.treeData = getTrees(res.data)
                    this.groupId = this.treeData[0].id
                    this.getMemberList()
                }
            }).catch(res=>{

            })
        },
        getMemberList(){
            let params = {
                inspGroupId: this.groupId,
                pageSize:this.pageSize,
                pageNum:this.pageIndex,
                isAll:1,
                persName: this.searchNameOfMemberName
            }
            request.get(`/dc/pers/base/getListByInspGroupId`,{params:params}).then(res=>{
                if(res.success){
                    let _this = this
                    this.currentShowList = res.data.list
                    this.total = res.data.total
                    this.$nextTick(function () {
                        if(this.multipleSelection.length && this.currentShowList.length){
                            let selectedRows = []
                            this.multipleSelection.forEach(ele=>{
                                let guid = ele.persId ? ele.persId : ele.guid
                                _this.currentShowList.forEach(element=>{
                                    if(guid == element.guid){
                                        selectedRows.push(element)
                                    }
                                })
                            })
                            selectedRows.forEach(row => {
                                _this.$refs.multipleTable.toggleRowSelection(row,true);
                            });
                        }
                    })
                }
            }).catch(res=>{

            })
        },
		addObjectChange: function() {
            //提交当前选中对象
            let _this = this
            if(this.multipleSelection.length && this.type == 'checkbox'){
                this.memberIds = []
                this.memberNames = []
                this.multipleSelection.forEach(ele=>{
                    _this.memberIds.push(ele.guid)
                    _this.memberNames.push(ele.persName)
                })
                let personInfo = {
                    memberIds: [],
                    memberNames: [],
                    allInfo: []
                }
                personInfo.memberIds = this.memberIds
                personInfo.memberNames = this.memberNames.join(',')

                personInfo.allInfo = this.multipleSelection

                this.$emit('sendPersonInfo',personInfo)
            }
            if(Object.keys(this.singleSeclection).length && this.type == 'radio'){
                let personInfo = {
                    memberId: '',
                    memberName: ''
                }
                personInfo.memberId = this.singleSeclection.guid
                personInfo.memberName = this.singleSeclection.persName
                this.$emit('sendPersonInfo',personInfo)
            }
		},
		saveChange() {
			this.addObjectChange();
		},
        initMember(){
            let oldMembers = []
            if(this.members.length){
                this.members.forEach(ele=>{
                    oldMembers.push({'guid':ele.persId ? ele.persId : ele.guid,'persName':ele.persName})
                })
                this.multipleSelection = oldMembers;
            }
        },
		handleSelectionChange(val) {
            //this.multipleSelection不能赋值为[]，因为带的有之前已选中的数据
            if(val.length){
                val.forEach(ele=>{
                    this.multipleSelection.push({'guid':ele.persId ? ele.persId : ele.guid,'persName':ele.persName})
                })
                this.multipleSelection = this.multipleSelection
            }
            let allArr = []
            for(var i=0;i<this.multipleSelection.length;i++){
                let flag = true;
            　　for(var j=0;j<allArr.length;j++){
            　　　　if(this.multipleSelection[i].guid == allArr[j].guid){
            　　　　　　flag = false;
            　　　　};
            　　}; 
            　　if(flag){
            　　　　allArr.push(this.multipleSelection[i]);
            　　};
            };
            this.multipleSelection = allArr
            // this.multipleSelection = Array.from(new Set(this.multipleSelection))
        },
        isSelected(rows,row){
            let _this = this
            let selected = rows.length && rows.indexOf(row) !== -1
            if(!selected){
                this.multipleSelection.forEach((ele,index)=>{
                    if(ele.guid == row.guid){
                        this.multipleSelection.splice(index,1)
                    }
                })
            }
        },
        radioChange(row){
            this.singleSeclection = row
        },
		handleCurrentChange(val) {
			this.refreshCurrentShow();
		},
		refreshCurrentShow: function() {
            this.getMemberList()
		},
        treeNodeClickHandler(param){
            this.groupId = param.id
        },
        sexFormatter: function (row, column) {
            return row.sex == 2 ? "女" : row.sex == 1 ? "男" : '';
        },
        closeMemberDialog(){
            this.$emit('closeMember')
            // this.multipleSelection = []
        },
	},
	watch: {
        groupId(val){
            this.getMemberList()
        }
	}
};
</script>
<style>
</style>