fj-dc-ui/.svn/pristine/50/50178bec30b3a1d4bfa330ebbdbc64b2b50a9fe4.svn-base

<!-- 人员工作情况 -->
<template>
    <div id="gzqkContainer" class="zgqkTableClass">
        <draagable :title="draagableTitle" @closeDraggable="closeDraggable" initTop=150
            initLeft=20 initWidth=980 initHeight=690 style="z-index: 999">
            <div style="height:450px;" v-if="noData">
                <el-table
                    v-loading="loading"
                    border
                    ref="et"
                    :height="(tableHeight + 50)"
                    :data="searchTableData"
                    tooltip-effect="dark"
                    style="width: 100%"
                    >
                    <el-table-column
                    fixed="left"
                    header-align="center"
                    align="center"
                    min-width="100"
                    prop="year"
                    label="年度"
                    show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                    header-align="center"
                    align="center"
                    min-width="100"
                    prop="batch"
                    label="稽察批次"
                    show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                    header-align="center"
                    align="center"
                    min-width="100"
                    prop="groupNm"
                    sortable
                    label="组别"
                    show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                    header-align="center"
                    align="center"
                    min-width="200"
                    label="开始时间"
                    prop="stTm"
                    ></el-table-column>
                    <el-table-column
                    header-align="center"
                    align="center"
                    min-width="200"
                    label="结束时间"
                    prop="enTm"
                    ></el-table-column>
                    <el-table-column
                    header-align="center"
                    align="center"
                    min-width="250"
                    label="稽察地点"
                    prop="areas"
                    show-overflow-tooltip
                    >
                    </el-table-column>
                    <el-table-column
                    header-align="center"
                    align="center"
                    min-width="250"
                    label="稽察项目"
                    show-overflow-tooltip
                    >
                    <template slot-scope="scope">
                        <transition name="el-fade-in-linear">
                        <div v-if="scope.row['objList'].length" style="width:100%;height:100%;display:flex;flex-direction:row;justify-content:center;align-items:center;">
                            <span>{{scope.row['objList']&&scope.row['objList'].length?testformatterArray(scope.row['objList'],'ojbNm'):''}}</span>
                        </div>
                        </transition>
                    </template>
                    </el-table-column>
                    <el-table-column
                    header-align="center"
                    align="center"
                    min-width="100"
                    prop="workDpNm"
                    label="项目类型"
                    show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                    header-align="center"
                    align="center"
                    min-width="200"
                    label="稽察组长"
                    show-overflow-tooltip
                    >
                    <template slot-scope="scope">
                        <transition name="el-fade-in-linear">
                        <div v-if="scope.row['special'].length" style="width:100%;height:100%;display:flex;flex-direction:row;justify-content:center;align-items:center;">
                            <span>{{scope.row['special']&&scope.row['special'].length?testformatterArray(scope.row['special'],'name'):''}}</span>
                        </div>
                        </transition>
                    </template>
                    </el-table-column>
                    <el-table-column
                    header-align="center"
                    align="center"
                    min-width="200"
                    label="助理"
                    show-overflow-tooltip
                    >
                    <template slot-scope="scope">
                        <transition name="el-fade-in-linear">
                        <div v-if="scope.row['aid'].length" style="width:100%;height:100%;display:flex;flex-direction:row;justify-content:center;align-items:center;">
                            <span>{{scope.row['aid']&&scope.row['aid'].length?testformatterArray(scope.row['aid'],'name'):''}}</span>
                        </div>
                        </transition>
                    </template>
                    </el-table-column>
                    <el-table-column
                    header-align="center"
                    align="center"
                    min-width="200"
                    label="前期专家"
                    show-overflow-tooltip
                    >
                    <template slot-scope="scope">
                        <transition name="el-fade-in-linear">
                        <div v-if="scope.row['qqzj'].length" style="width:100%;height:100%;display:flex;flex-direction:row;justify-content:center;align-items:center;">
                            <span>{{scope.row['qqzj']&&scope.row['qqzj'].length?testformatterArray(scope.row['qqzj'],'name'):''}}</span>
                        </div>
                        </transition>
                    </template>
                    </el-table-column>
                    <el-table-column
                    header-align="center"
                    align="center"
                    min-width="150"
                    label="建管专家"
                    show-overflow-tooltip
                    >
                    <template slot-scope="scope">
                        <transition name="el-fade-in-linear">
                        <div v-if="scope.row['jgzj'].length" style="width:100%;height:100%;display:flex;flex-direction:row;justify-content:center;align-items:center;">
                            <span>{{scope.row['jgzj']&&scope.row['jgzj'].length?testformatterArray(scope.row['jgzj'],'name'):''}}</span>
                        </div>
                        </transition>
                    </template>
                    </el-table-column>
                    <el-table-column
                    header-align="center"
                    align="center"
                    min-width="150"
                    label="计划专家"
                    show-overflow-tooltip
                    >
                    <template slot-scope="scope">
                        <transition name="el-fade-in-linear">
                        <div v-if="scope.row['jhzj'].length" style="width:100%;height:100%;display:flex;flex-direction:row;justify-content:center;align-items:center;">
                            <span>{{scope.row['jhzj']&&scope.row['jhzj'].length?testformatterArray(scope.row['jhzj'],'name'):''}}</span>
                        </div>
                        </transition>
                    </template>
                    </el-table-column>
                    <el-table-column
                    header-align="center"
                    align="center"
                    min-width="150"
                    label="财务专家"
                    show-overflow-tooltip
                    >
                    <template slot-scope="scope">
                        <transition name="el-fade-in-linear">
                        <div v-if="scope.row['cwzj'].length" style="width:100%;height:100%;display:flex;flex-direction:row;justify-content:center;align-items:center;">
                            <span>{{scope.row['cwzj']&&scope.row['cwzj'].length?testformatterArray(scope.row['cwzj'],'name'):''}}</span>
                        </div>
                        </transition>
                    </template>
                    </el-table-column>
                    <el-table-column
                    header-align="center"
                    align="center"
                    min-width="150"
                    label="质量专家"
                    show-overflow-tooltip
                    >
                    <template slot-scope="scope">
                        <transition name="el-fade-in-linear">
                        <div v-if="scope.row['zlzj'].length" style="width:100%;height:100%;display:flex;flex-direction:row;justify-content:center;align-items:center;">
                            <span>{{scope.row['zlzj']&&scope.row['zlzj'].length?testformatterArray(scope.row['zlzj'],'name'):''}}</span>
                        </div>
                        </transition>
                    </template>
                    </el-table-column>
                    <el-table-column
                    header-align="center"
                    align="center"
                    min-width="150"
                    label="安全专家"
                    show-overflow-tooltip
                    >
                    <template slot-scope="scope">
                        <transition name="el-fade-in-linear">
                        <div v-if="scope.row['aqzj'].length" style="width:100%;height:100%;display:flex;flex-direction:row;justify-content:center;align-items:center;">
                            <span style="justify-content:center;">{{scope.row['aqzj']&&scope.row['aqzj'].length?testformatterArray(scope.row['aqzj'],'name'):''}}</span>
                        </div>
                        </transition>
                    </template>
                    </el-table-column>
                    <el-table-column
                    header-align="center"
                    align="center"
                    min-width="220"
                    label="备注"
                    prop="remark"
                    ></el-table-column>
                    <!--<el-table-column-->
                    <!--header-align="center"-->
                    <!--align="center"-->
                    <!--min-width="120"-->
                    <!--label="稽察组长联系"-->
                    <!--&gt;</el-table-column>-->
                    <el-table-column
                    header-align="center"
                    align="center"
                    min-width="220"
                    label="检测单位"
                    prop="audUnits"
                    ></el-table-column>
                    <el-table-column
                    header-align="center"
                    align="center"
                    min-width="220"
                    label="稽察处别"
                    prop="audCategory"
                    ></el-table-column>
                </el-table>
            </div>
            <div style="height:450px;" v-else>
                <p style="padding: 27%;text-align: center;">暂无分组数据！</p>
            </div>
        </draagable>
        <personGzqkPointList
            v-if="showList"
            :currentPersId="currentPersId"
            :lon="lon"
            :lat="lat"
            @closeHandler="closeHandler1"></personGzqkPointList>
    </div>
</template>

<script>
  import {
    formatterArrayToLabel
  } from "@util/gw_formatter";
import request from '@util/gw_ajax_request'
import draagable from './draggable.vue'
import {dateFormat} from "../../../utils/gw_date.js"
import {getPersonGzqk,getPersonGzqkPointList} from '../../../api/jcOneMapApi.js'
export default {
    components: {
        draagable,
        personGzqkPointList: resolve => {require(['./personGzqkPointList'], resolve)},
    },
    props:['currentPersId','select_nd','select_pc'],
    data() {
        return {
            searchTableData:[],
            tableHeight: window.innerHeight * .6 + 15,
            draagableTitle:'工作情况',
            group:'',
            tableResultData:[],
            selectDataList:[],
            loading:false,
            lon:'',
            lat:'',
            showList:false,
            formShow:false,//人员所在组的下拉框
            noData:true,//无数据展示内容控制
        };
    },
    computed: {
        roleTypeData(){
            return this.$store.state.jcState.roleTypeData;
        }
    },
    watch: {
        currentPersId(){
            this.getLishiJiHuaSearch();
        },
        select_nd(){
            this.getLishiJiHuaSearch();
        },
        select_pc(){
            this.getLishiJiHuaSearch();
        },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        this.getLishiJiHuaSearch();
    },
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
    methods: {
        //角色
          roleTypeFy(row){
            if(row){
              this.roleTypeData.forEach(ele => {
                if (ele.value == row) {
                  row = ele.label;
                }
              });
              return row;
            }else{
              return '';
            }
          },
        //改变组事件
        groupChangEvent(item){
            this.getPersonDetailsData(item);
        },
        // //获取人员所在组数据
        // getLishiJiHuaSearch(){
        //     var _self = this;
        //     console.log(_self.currentPersId)
        //     let params = {
        //         "loginId":_self.currentPersId,
        //         "year":_self.select_nd,
        //         "batch":_self.select_pc,
        //     }
        //     getPersonGzqk(params).then((res)=>{
        //         _self.loading = false;
        //         if(res.success){
        //             _self.selectDataList = res.data;
        //             if(_self.selectDataList.length == 0){
        //                 _self.noData = false;//处理没有数据情况
        //             }else{
        //                 _self.noData = true;
        //                 if(_self.selectDataList.length == 1){
        //                     _self.formShow = false;//处理人员只在一个组中的情况，不显示下拉框
        //                 }else{
        //                     _self.formShow = true;
        //                     _self.group = _self.selectDataList[0].audContent ? _self.selectDataList[0].audContent:_self.selectDataList[0].groupNm
        //                 }
        //                  _self.getPersonDetailsData(_self.selectDataList[0].id)//表格数据默认用第一组的组id请求，获取其他组员
        //             }

        //         }
        //     })
        // },
        getLishiJiHuaSearch(){
            var _self = this;
            this.loading = true;
            let params = {
                "loginId":_self.currentPersId,
                "year":_self.select_nd,
                "batch":_self.select_pc,
            }
            request.post(`/tac/insp/year/batch/group/getGroupList`,params).then(res =>{
            if(res.success){
                this.loading = false;
                this.$nextTick(() =>{
                this.searchTableData = res.data;
                this.getPerFl(this.searchTableData);
                    this.searchTableData.forEach(item =>{
                        item.stTm = dateFormat(item.stTm, "yyyy-MM-dd");
                        item.enTm = dateFormat(item.enTm, "yyyy-MM-dd");
                    })
                })
            }
            })
        },
        getPerFl(arr){
            // 为列表分开稽察组长,助理,前期专家
            arr.forEach(element => {
                element["qqzj"] = [];//前期专家
                element["jgzj"] = [];//建管专家
                element["jhzj"] = [];//计划专家
                element["cwzj"] = [];//财务专家
                element["zlzj"] = [];//质量专家
                element["aqzj"] = [];//安全专家
                element["aid"] = [];//助理
                element["special"] = [];//稽察组长
                element["workersList"].forEach(per => {
                    if (per.roleType == "11") {
                    element["qqzj"].push(per);
                    } else if (per.roleType == "12") {
                    element["jgzj"].push(per);
                    } else if (per.roleType == "13") {
                    element["jhzj"].push(per);
                    } else if (per.roleType == "14") {
                    element["cwzj"].push(per);
                    }else if (per.roleType == "15") {
                    element["zlzj"].push(per);
                    } else if (per.roleType == "16") {
                    element["aqzj"].push(per);
                    } else if (per.roleType == "19") {
                    element["aid"].push(per);
                    } else if (per.roleType == "20") {
                    element["special"].push(per);
                    }
                });
            });
        },
        testformatterArray: function(
            arr,
            labelPropName,
            splitMark = ",",
            nonLabel = "",
            isAddNonLabel = true
        ) {
            let r = formatterArrayToLabel(
            arr,
            labelPropName,
            (splitMark = ","),
            (nonLabel = ""),
            (isAddNonLabel = true)
            );
            return r;
        },
        //根据人员所在组id查询其他组员
        getPersonDetailsData(item){
            var _self = this;
            request.post(`/tac/worker/b/getWorkerbsListById`,{
            "groupId": item
            }).then(res =>{
                if(res.success){
                    // res.data.forEach(ele =>{
                    //     ele.year = _self.select_nd
                    //     ele.batch = _self.select_pc
                    // })
                    this.tableResultData = res.data;
                    console.log(this.tableResultData)
                }
            })
        },
        guijiDetail(item,type){
            var _self = this;
            getPersonGzqkPointList(_self.currentPersId,item.lon,item.lat).then((res)=>{
                if(res.success){
                    _self.$emit('showPerGzqkOnMap',res.data);
                }
            })
        },
        guijiList(item,type){
            this.lon = item.lon;
            this.lat = item.lat;
            this.showList = true;
        },
        closeDraggable:function(){
            this.showList = false;
            this.$emit("closeHandler","groupInfo");
        },
        closeHandler1(){
            this.showList = false;
        }
    },
}
</script>
<style>
/*@import url(); 引入公共css类*/

</style>