fj-dc-ui/.svn/pristine/8a/8a9138e01c20d96a5da12735b755d48f4bf3c1cb.svn-base

<template>
    <div id="trackTableContainer" class="trackTableClass">
        <draagable :title="draagableTitle" @closeDraggable="closeDraggable" initTop=-15 initLeft=45 initWidth=900 initHeight=500 style="z-index: 999">
            <div style="display: flex;padding: 10px;">
                <treeselect v-model="adCode" :options="treeOptions" :normalizer="normalizer" :show-count="false" placeholder="请选择区划" size="mini" style="width: 130px;height:28px;margin-left: 10px;"/>
                <el-input v-model="persNameViewed" placeHolder="请输入被查看人名称" clearable style="width: 150px;margin-left: 10px;"></el-input>
                <el-input v-model="persName" placeHolder="请输入查看人名称" clearable style="width: 150px;margin-left: 10px;"></el-input>
                <el-date-picker
                  v-model="dateRange"
                  style="width: 200px;margin-left: 10px;"
                  value-format="yyyy-MM-dd"
                  type="daterange"
                  clearable
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
                <el-button type="primary"  @click="clickHandler" style="height:28px;line-height: 28px;padding: 0px 15px;margin-left: 10px;">查询</el-button>
            </div>
            <div style="height:365px;">
                <el-table :data="tableResultData" :height="360">
                    <el-table-column align="center"  prop="adName" min-width="100" label="行政区划"  show-overflow-tooltip></el-table-column>
                    <el-table-column align="center"  prop="persName" min-width="100" label="查看人名称"  show-overflow-tooltip></el-table-column>
                    <el-table-column  align="center"  prop="persNameViewed" min-width="100" label="被查看人名称"  show-overflow-tooltip></el-table-column>
                    <el-table-column  align="center" prop="intm"  min-width="160" label="创建时间"  show-overflow-tooltip></el-table-column>
                    <el-table-column  align="center" prop="note"  min-width="160" label="备注"  show-overflow-tooltip></el-table-column>
                </el-table>
            </div>
            <el-pagination
              background
              :pager-count="3"
              :current-page="pageNum"
              :page-size="pageSize"
              :page-sizes="[10, 20, 30, 40, 50, 100]"
              layout="sizes, total, prev, pager, next"
              :total="total"
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
            ></el-pagination>
        </draagable>
    </div>
</template>
<script>
import request from "@util/gw_ajax_request.js";
import {dateFormat} from "../../../utils/gw_date.js"
import {getPersonTrackRecord} from '../../../api/zhxxAPI.js'
import draagable from './draggable.vue'
import Treeselect from '@riophae/vue-treeselect';
import '@riophae/vue-treeselect/dist/vue-treeselect.css';
export default {
    components:{
        draagable,
        Treeselect
    },
    props:['perId'],
    data(){
        return{
            loading:false,
            draagableTitle:'浏览记录',
            tableResultData:[],
            adCode:undefined,
            persNameViewed:"",
            persName:"",
            dateRange:[],
            treeOptions:undefined,
            pageNum:1,
            pageSize:10,
            total:0
        }
    },
    mounted:function(){
        this.getAdTree();
        this.getTrackList();
    },
    methods:{
        handleCurrentChange(val) {
            this.pageNum = val;
            this.getTrackList();
        },
        handleSizeChange(val) {
            this.pageSize = val;
            this.getTrackList();
        },
        normalizer(node) {
            if (node.adUpDtoList && !node.adUpDtoList.length) {
                delete node.adUpDtoList;
            }
            return {
                id: node.adCode,
                label: node.adName,
                children: node.adUpDtoList
            };
        },
        getAdTree(){
            var _self = this;
            request.get('/dc/ad/base/getTreeByUser').then(res=>{
                if(res.success){
                    _self.treeOptions = res.data;
                }
            })
        },
        formatDate(row,column){
            if(row.intm){
                return (dateFormat(row.intm,'yyyy-MM-dd hh:mm:ss'));
            }
        },
        closeDraggable:function(){
            this.$emit("closeDraggable","trackRecordTable");
        },
        clickHandler(){
            this.getTrackList();
        },
        getTrackList:function(){

            var params = {
               pageNum:this.pageNum,
               pageSize:this.pageSize,
               adCode:this.adCode,
               persNameViewed:this.persNameViewed,
               persName:this.persName,
               sttm:"",
               entm:""
            }
            if(this.dateRange && this.dateRange.length>0){
                params.sttm = this.dateRange[0];
                params.entm = this.dateRange[1];
            }
            getPersonTrackRecord(params).then((res)=>{
                if(res.success){
                    this.tableResultData = res.data.list;
                    this.total = res.data.total;
                }
            });
        },
    }
}
</script>
<style  lang="scss" scoped>
#trackTableContainer .el-table__body-wrapper{
    /* overflow: auto; */
}
.trackTableClass{
    position: fixed;
    left: 20px;
    top: 119px;
    z-index: 590;
    /* width: 390px;
    height: 490px; */
}
#draggableContainer .el-table{
    color:#928f8f;
}
#draggableContainer .el-table thead{
    color: #a29a9a;
}
#draggableContainer .el-table tr{
    background-color: #f9f9f9;
}
.vue-treeselect /deep/.vue-treeselect__control{
  height:26px !important;
  line-height: 26px !important;
}
.vue-treeselect /deep/ .vue-treeselect__placeholder, .vue-treeselect__single-value{
   line-height: 28px !important;
   font-size: 12px;
}
</style>