oa-system/src/components/child/Generalindex.vue

<template>
    <div>
        <!-- <div class="num-ul">
            <div class="num-li">
                <div class="num-tlite">
                    <div>2442</div>
                    <p>市场客户总数量</p>
                    <p>4% Higher than last week</p>
                </div>
                <div class="num-icon">
                    <i class="iconfont icon-renminbi"></i>
                </div>
            </div>
            <div class="num-li">
                <div class="num-tlite">
                    <div>2442</div>
                    <p>当月需对接客户数量</p>
                    <p>1% Higher than last week</p>
                </div>
                <div class="num-icon">
                    <i class="iconfont icon-fuwuqi"></i>
                </div>
            </div>
            <div class="num-li">
                <div class="num-tlite">
                    <div>2442</div>
                    <p>当月出团数量</p>
                    <p>3% Higher than last week</p>
                </div>
                <div class="num-icon">
                    <i class="iconfont icon-HCplanshuliang"></i>
                </div>
            </div>
            <div class="num-li">
                <div class="num-tlite">
                    <div>2442</div>
                    <p>至今未收款项(团组数)</p>
                    <p>5% Higher than last week</p>
                </div>
                <div class="num-icon">
                    <i class="iconfont icon-tongjitu"></i>
                </div>
            </div>
        </div> -->
        <div class="tabular-all">
            <div class="list-groups">
                <div class="groups-list">
                    <div class="list-title">
                        <div>团组列表</div>
                        <div class="search-box">
                            <el-input
                                placeholder="请输入内容"
                                v-model="input"
                                @input="Inquireclick()"
                                clearable>
                            </el-input>
                            <!-- <el-button type="primary"><i class="icon-sousuo"></i></el-button> -->
                        </div>
                    </div>
                    <template>
                        <el-table
                        :data="groupDatas.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                        border
                        style="width: 100%">
                            <el-table-column
                                prop="teamName"
                                label="团组名"
                                width="350">
                            </el-table-column>
                            <el-table-column
                                prop="clientUnit"
                                label="团组单位">
                            </el-table-column>
                            <el-table-column
                                width="120" 
                                prop="visitDate"
                                :formatter="filteryear"
                                label="出访时间">
                            </el-table-column>
                            <el-table-column width="80" label="管控">
                                <template slot-scope="scope">
                                    <el-button type="primary" size="mini" @click="handleEdit(scope.$index, scope.row)">
                                        <i class="iconfont icon-xianchangguankong"></i>
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                    <div class="block">
                        <el-pagination align='center' 
                            @size-change="handleSizeChange" 
                            @current-change="handleCurrentChange"
                            :current-page="currentPage" 
                            :page-sizes="[8,10,15,20]" 
                            :page-size="pageSize" 
                            layout="total, sizes, prev, pager, next" 
                            :total="groupDatas.length">
                        </el-pagination>
                    </div>
                </div>
                <div class="sources-ul">
                    <div class="sources-li" @click="shortcutlink('/MCR')">
                        <div class="sources-tlite">
                            <p>市场客户资源</p>
                        </div>
                        <div class="sources-icon">
                            <i class="iconfont icon-shichangbu"></i>
                        </div>
                    </div>
                    <div class="sources-li" @click="shortcutlink('/LocalGuide')">
                        <div class="sources-tlite">
                            <p>车导地接资源</p>
                        </div>
                        <div class="sources-icon">
                            <i class="iconfont icon-dijie"></i>
                        </div>
                    </div>
                    <div class="sources-li">
                        <div class="sources-tlite">
                            <p>策划活动资源</p>
                        </div>
                        <div class="sources-icon">
                            <i class="iconfont icon-xiangmucehua"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="schedule-box">
                <div class="schedule">
                    <!-- 代办任务  日程表 -->
                    <div class="top" style="background: #fff; padding: 8px 6px">
                        <div class="modelBox">
                        <span class="radis"></span>
                        </div>
                        <div class="tabs" style="width: 100%">
                        <FullCalendar ref="fullCalendar" :options="calendarOptions" class="demo-app-calendar" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="skip-text">
            <div v-if="userId==21" class="text-go">有{{wshcount}}条未审核日常付款申请&nbsp;&nbsp;<span @click="shortcutlink('/DailyFeePayment')" style="color:#409eff;cursor: pointer;">前往审核</span></div>
        </div>
    </div>
</template>

<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import zhCnLocale from '@fullcalendar/core/locales/zh-cn'
import tippy from 'tippy.js';
export default {
    components:{
        FullCalendar
    },
    data() {
        return {
            groupData: [
                
            ],
            groupDatas:[],
            currentPage: 1, // 当前页码
            pageSize: 8 ,// 每页的数据条数
            //日程数据
            calendarOptions: {
                plugins: [
                // 加载插件，V5采用插件模块方式加入
                dayGridPlugin,
                timeGridPlugin,
                interactionPlugin, // needed for dateClick
                ],
                height: 660, //日历高度
                width: 600,
                headerToolbar: {
                // 头部toolba
                left: 'prev,next today',
                center: 'title',
                right: 'timeGridDay,timeGridWeek,dayGridMonth',
                // right: 'dayGridMonth'
                },
                handleWindowResize: true, //随浏览器窗口变化
                initialView: 'dayGridMonth', // 初始化插件显示
                // initialDate:""//初始化日期
                // initialEvents: INITIAL_EVENTS, // alternatively, use the `events` setting to fetch from a feed
                //editable: true, //是否可编辑
                // droppable: true,//可拖拽的
                // timeZone: 'local',//采用时区
                selectable: true,
                // selectMirror: true,
                dayMaxEvents: true,
                // weekends: true, // 是否显示一周七天
                // select: this.handleDateSelect,
                // eventClick: this.handleEventClick, // 日程点击事件
                eventMouseEnter: this.handleEventMouseEnter, // 用户将鼠标悬停在事件上时触发
                // eventsSet: this.handleEvents,
                dateClick: this.handleDateClick,//日期方格点击事件
                eventClick: this.handleEventClick, //日程点击事件
                locale: zhCnLocale,
                nextDayThreshold: '01:00:00',
                events: [
                //日程事件的json
                    { title: '雷怡', date: '2023-03-24 12:00:00',color:'#ff9900'},
                    { title: '雷怡', date: '2023-03-24 15:00:00',color:'#ff9900'},
                    { title: 'event 1', start: '2023-03-25 10:59:23',end:'2023-03-26 14:59:23' },
                    { title: 'event 3', date: '2023-03-25 08:23:00' },
                    { title: 'event 4', date: '2023-03-25 09:30:00' },
                    { title: 'event 5', date: '2023-03-26 12:00:00' },
                    { title: 'event 2', date: '2023-03-26 15:00:00' }
                ],
                // datesSet: this.handleDateSet,
                /* you can update a remote database when these fire:
                eventAdd:
                eventChange:
                eventRemove:
                */
            },
            input: '',
            wshcount:0,
            userId:'',
        }
    },
    methods:{
        //每页条数改变时触发 选择一页显示多少行
        handleSizeChange(val) {
            this.currentPage = 1;
            this.pageSize = val;
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            this.currentPage = val;
        },
        handleEventMouseEnter(info) {
            console.log(info, 'yyyy')
            let col = info.event.borderColor
            let eve = info.event._def.extendedProps
            let category = info.event._def.extendedProps.category

            tippy(info.el, {
                // content:"<div style='width: 280px;background-color:#FAFAFA;padding:5px;font-size:14px;z-index:99999'>" +
                //           "<div style='color: #666666;overflow: hidden;'><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>会议名称：" + info.event.title+"</div>" +
                //           "<div style='color: #666666;overflow: hidden;'><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>会议类型："+eve.type+"</div>" +
                //           "<div style='color: #666666;overflow: hidden;'><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>会议时间："+eve.times+"</div>" +
                //           "<div style='color: #666666;overflow: hidden;'><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>会议状态："+eve.status+"</div>" +
                //         "</div>",
                content: `<div style='width: 260px;background-color:#FAFAFA;padding:5px;font-size:14px;z-index:99999;'>
                        <div style='display:flex;color: #666666;overflow: hidden;' class="${ eve.category == 1 ? 'hidden' : ''}">
                            <div><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>会议名称： </div>
                            <div style="width:161px;white-space:normal;overflow: auto;table-layout:fixed; word-break: break-all; height:auto;display:inner-block">${info.event.title}</div>
                        </div>
                        <div style='color: #666666;overflow: hidden;' class="${ eve.category == 1 ? 'hidden' : ''}"><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>会议类型：${eve.type}</div>
                        <div style='color: #666666;overflow: hidden;' class="${ eve.category == 1 ? 'hidden' : ''}"><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>会议时间：${eve.times}</div>
                        <div style='color: #666666;overflow: hidden;' class="${ eve.category == 1 ? 'hidden' : ''}"><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>会议状态：${eve.status}</div>
                        <div style='color: #666666;overflow: hidden;' class="${ eve.category == 0 ? 'hidden' : ''}"><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>年份：${eve.year}</div>
                        <div style='color: #666666;overflow: hidden;' class="${ eve.category == 0 ? 'hidden' : ''}"><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>领域角色：${eve.depRoleName}</div>
                        <div style='color: #666666;overflow: hidden;' class="${ eve.category == 0 ? 'hidden' : ''}"><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>姓名：${eve.name}</div>
                        </div>`,
                theme: 'light', //主题选取
                // trigger: 'click', //触发类型
                interactive: true, //可交互的
                placement: 'top-start', //悬浮框位置
                allowHTML: true, //是否允许html文本
                zIndex: 99999,
            })
        },
        handleEventClick(info){
            console.log(info)
        },
        handleDateClick(inif){
            // console.log(info)
        },
        //快捷跳转
        shortcutlink(val){
            if(val=='/DailyFeePayment'){
                localStorage.setItem("Permissions",JSON.stringify([{"funid":1,"functionCode":"F00001","functionName":"查看"},{"funid":2,"functionCode":"F00002","functionName":"删除"},{"funid":3,"functionCode":"F00003","functionName":"编辑"},{"funid":4,"functionCode":"F00004","functionName":"下载"},{"funid":5,"functionCode":"F00005","functionName":"上传"},{"funid":11,"functionCode":"F00010","functionName":"添加"},{"funid":12,"functionCode":"F00006","functionName":"审核"}]))
            }
            this.$router.push({ path: "/home" + val });
        },

        Grouplist(){
            var url="/api/Groups/GetGroupList"
            var that=this
            that.fullscreenLoading = true;
            this.$axios({
                method: 'post',
                url:url,
                headers:{
                    Authorization:'Bearer '+this.token
                },
                data:{
                    portType: 1,
                }
            }).then(function(res){
                if(res.data.code==200){
                    that.groupData=res.data.data
                    that.groupData.forEach(item=>{
                        if(item.clientName==null){
                            item.clientName = ''
                        } 
                        if(item.clientUnit==null){
                            item.clientUnit = ''
                        } 
                        if(item.id==null){
                            item.id = ''
                        } 
                        if(item.isSure==null){
                            item.isSure = ''
                        } 
                        if(item.jietuanOperator==null){
                            item.jietuanOperator = ''
                        } 
                        if(item.salesQuoteNo==null){
                            item.salesQuoteNo = ''
                        } 
                        if(item.teamName==null){
                            item.teamName = ''
                        } 
                        if(item.teamType==null){
                            item.teamType = ''
                        } 
                        if(item.tourCode==null){
                            item.tourCode = ''
                        } 
                        if(item.visitDate==null){
                            item.visitDate = ''
                        } 
                        if(item.visitDays==null){
                            item.visitDays = ''
                        } 
                        if(item.visitPNumber==null){
                            item.visitPNumber = ''
                        } 
                    })
                    that.groupDatas=that.groupData;
                    console.log(that.groupData)
                    that.fullscreenLoading = false;
                }
            })
        },
        //获取张总未审核条数
        DailyPaymentGMUnAudited(){
            var url="/api/Financial/DailyPaymentGMUnAudited"
            var that=this
            this.$axios({
                method: 'GET',
                url:url,
                headers:{
                    Authorization:'Bearer '+that.token
                },
            }).then(function(res){
                if(res.data.code==200){
                    that.wshcount=res.data.data;
                }
            })
        },
        Inquireclick() {
            var newarr = [];
            if (this.input == "") {
                newarr = this.groupData;
            } else {
                for (var i = 0; i < this.groupData.length; i++) {
                    if (this.groupData[i].teamName.indexOf(this.input) != -1) {
                        newarr.push(this.groupData[i]);
                    }
                    else if (this.groupData[i].clientUnit.indexOf(this.input) != -1) {
                        newarr.push(this.groupData[i]);
                    }
                    else if (this.groupData[i].visitDate.indexOf(this.input) != -1) {
                        newarr.push(this.groupData[i]);
                    }
                }
            }
            this.groupDatas = newarr;
            this.currentPage = 1;
        },
        filteryear(val){
            let gstime=val.visitDate.split(' ')[0]
            return gstime;
        },
        handleEdit(index, row) {
            console.log(index, row);
            localStorage.setItem('OPid', row.grpScheduleId);
            this.$router.push({name:'Controltree'})
        },
    },
    mounted(){
        this.userId=JSON.parse(localStorage.getItem('userinif')).userInfo.userId;
        this.Grouplist();
        this.DailyPaymentGMUnAudited();
        // this.calendarOptions.events.push({
        // color: '#ff9900', 
        // title: "kljkl",
        // date: "yuuyjyu",
        // status: "jtyjtyj",
        // type: "hfghfghfg",
        // times: "gererg",
        // category: "wefwefw"
        // // title: element.name,
        // // date: element.time,
        // // status: this.statusName,
        // // type: element.type,
        // // times: element.time,
        // // category: element.category
        // })
    }
}
</script>
<style>
    .num-ul{
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
    }
    .num-li{
        width: 21%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-radius: 10px;
        padding: 25px 20px;
    }
    .num-li:nth-child(1){
        background-color: #6bafbd !important;
    }
    .num-li:nth-child(2){
        background-color: #fc8675 !important;
    }
    .num-li:nth-child(3){
        background-color: #f3ce85 !important;
    }
    .num-li:nth-child(4){
        background-color: #65cea7 !important;
    }
    .num-icon i{
        width: 70px;
        height: 90px;
        display: inline-block;
        font-size: 70px;
        display: flex;
        align-items: center;
        color: #fff8;
    }
    .num-tlite div{
        font-size: 30px;
        color: #fff;
    }
    .num-tlite p:nth-child(2){
        font-size: 14px;
        margin: 5px  0px;
        color: #fff;
    }
    .num-tlite p:nth-child(3){
        font-size: 12px;
        color: #fff;
    }
    .list-groups{
        width: 60%;
       
    }
    .groups-list{
        background-color: #fff;
        padding: 10px;
        border-radius: 10px;
        box-shadow: 0 0 5px #0003;
        min-height: 520px;
    }
    .list-groups .block{
        margin-top: 20px;
    }
    .list-title{
        display: flex;
        font-size: 17px;
        font-weight:600 ;
        color: #555;
        margin-top: 8px;
        margin-bottom: 2px;
        justify-content: space-between;
        align-items: center;
    }
    .sources-ul{
        margin-top: 25px;
        display: flex;
        justify-content: space-between;
    }
    .sources-li{
        cursor: pointer;
        width: 30%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-radius: 10px;
        padding: 14px 0px;
    }
    .sources-icon i{
        width: 70px;
        height: 90px;
        display: inline-block;
        font-size: 70px;
        display: flex;
        align-items: center;
        color: #fff8;
    }
    .sources-tlite{
        width: 70%;
    }
    .sources-icon{
        margin-right: 20px;
    }
    .sources-tlite p{
        text-align: center;
        color: #fff;
        font-size: 24px;
        font-weight: 600;
    }
    .sources-li:nth-child(1){
        background-color: #6bafbd !important;
    }
    .sources-li:nth-child(2){
        background-color: #f3ce85 !important;
    }
    .sources-li:nth-child(3){
        background-color: #65cea7 !important;
    }
    .tabular-all{
        display: flex;
        justify-content: space-between;
    }
    .schedule-box{
        width: 39%;
    }
    .schedule{
        padding: 10px;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 0 5px #0005;
    }
    .fc-toolbar-chunk .fc-toolbar-title{
        color: #555;
    }
    .search-box{
        display: flex;
    }
    .search-box>button{
        margin-left: 10px;
        padding: 8px 20px;
    }
    .icon-shichangbu{
        font-size: 58px;
    }
    .groups-list .el-table .el-table__cell{
        padding: 8px 0;
    }
    .fc .fc-button-primary{
        background-color: #5EADFF;
        border-color: #5EADFF;
    }
    .fc .fc-button-primary:hover{
        background-color: #108dff;
        border-color: #108dff;
    }
    .fc .fc-button-primary:not(:disabled):active:focus {
        box-shadow: none;
    }
    .fc .fc-button-primary:not(:disabled):active {
        background-color: #108dff;
        border-color: #108dff;
    }
    .fc .fc-button-primary:focus {
        box-shadow: none;
    }
    .fc .fc-button-primary:disabled {
        background-color: #5EADFF;
        border-color: #5EADFF;
    }
    .fc .fc-button-primary:not(:disabled).fc-button-active:focus{
        box-shadow:none;
    }
    .fc .fc-button-primary:not(:disabled).fc-button-active{
        background-color: #108dff;
        border-color: #108dff;
    }
    .fc .fc-toolbar.fc-header-toolbar{
        margin-bottom: 0.1em;
    }
    .skip-text{
        display: flex;
        justify-content: end;
        margin-top: 20px;
        color: #606266;
        font-size:16px ;
    }
    .text-go{
        padding: 20px;
        box-shadow: 0 0 10px #0005;
        background-color:#fff;
        border-radius: 5px;
        width: 20%;
        text-align: center;
    }
    @media screen and (max-width: 1600px) {
        .tabular-all{
            display: inline-block;
            width:100% ;
        }
        .list-groups{
            width:100% ;
        }
        .schedule-box{
            margin-top: 20px;
            width: 100%;
        }
      }
</style>