oa-system/src/components/Finance/GroupStatus.vue

<template>
    <div>
        <div class="groupstatus-all">
            <div class="groupstatus-box">
                <div>
                    <el-select style="width:250px" v-model="value" clearable placeholder="请选择" @change="filterStatus(value)">
                        <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                    <el-input
                    style="width:200px;"
                    placeholder="请输入查询内容"
                    v-model="input"
                    clearable>
                    </el-input>
                    <el-button @click="Inquireclick()" type="primary">查 询</el-button>
                </div>
            </div>
            <div class="groupstatus-title">
                <div>团组列表</div>
            </div>
            <template>
                <el-table
                :data="groupData"
                border
                style="width: 100%">
                    <el-table-column
                        prop="num"
                        label="序 号"
                        width="55">
                        <template slot-scope="scope">
                            {{(currentPage - 1) * pageSize + scope.$index + 1}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="tourCode"
                        width="100"
                        label="团 号">
                    </el-table-column>
                    <el-table-column
                        width="100" 
                        prop="salesQuoteNo"
                        label="销售报价号">
                    </el-table-column>
                    <el-table-column
                        prop="teamType"
                        label="团组类型"
                        width="150">
                    </el-table-column>
                    <el-table-column
                        prop="teamName"
                        label="团队名称"
                        >
                    </el-table-column>
                    <el-table-column
                        prop="clientName"
                        label="客户名称"
                        width="100">
                    </el-table-column>
                    <el-table-column
                        prop="clientUnit"
                        label="客户单位">
                    </el-table-column>
                    <el-table-column
                        prop="visitDate"
                        :formatter="filteryear"
                        label="出访时间"
                        width="100">
                    </el-table-column>
                    <el-table-column
                        prop="visitDays"
                        label="出访天数"
                        width="80">
                    </el-table-column>
                    <el-table-column
                        prop="visitPNumber"
                        label="出访人数"
                        width="80">
                    </el-table-column>
                    <el-table-column
                        prop="jietuanOperator"
                        label="接团操作人"
                        width="110">
                    </el-table-column>
                    <el-table-column label="操作" width="110">
                        <template slot-scope="scope">
                          <el-button
                            v-if="scope.row.isSure=0"
                            type="primary"
                            size="mini"
                            @click="Complete(scope.$index, scope.row)">操作完成</el-button>
                            <el-button
                            v-if="scope.row.isSure=1"
                            type="primary"
                            size="mini"
                           >已完成</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="[10,12,15,20]" 
                    :page-size="pageSize" 
                    layout="total, sizes, prev, pager, next" 
                    :total="count">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
import { el } from '@fullcalendar/core/internal-common'
export default {
    data() {
        return {
            token:'',
            userid:'',
            value:'-1',
            options: [
                {
                    value: '-1',
                    label: '全部'
                }, {
                    value: '0',
                    label: '未完成'
                }, {
                    value: '1',
                    label: '已完成'
                }
            ],
            groupData:[],
            count:0,//总条数
            currentPage: 1, // 当前页码
            pageSize: 10 ,// 每页的数据条数
            input:'',
        }
    },
    methods:{
        //分页api
        PostGroupStatusPageList(){
            var url = "/api/Groups/PostGroupStatusPageList"
            var that = this
            console.log(that.value)
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data: {
                    portType: 1,
                    pageIndex: that.currentPage,
                    pageSize: that.pageSize,
                    isSure: that.value,
                    searchCriteria: that.input,
                }
            }).then(function (res) {
                console.log(res)
                if (res.data.code == 200) {
                    that.groupData=res.data.data
                    console.log(that.groupData)
                    
                    that.count=res.data.count
                }else{

                }
            })
        },
         //每页条数改变时触发 选择一页显示多少行
         handleSizeChange(val) {
            this.currentPage = 1;
            this.pageSize = val;
            this.PostGroupStatusPageList()
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            this.currentPage = val;
            this.PostGroupStatusPageList()
        },
        filteryear(val){
            let gstime=val.visitDate.split(' ')[0]
            return gstime;
        },
        //模糊查询
        Inquireclick(){
            this.currentPage=1;
            this.PostGroupStatusPageList()
        },
        //筛选状态
        filterStatus(){
            this.currentPage=1;
            this.PostGroupStatusPageList();
        },
        //操作完成
        Complete(index, row){
            console.log(index, row.id)
            var url = "/api/Groups/PostGroupStatusSetOperationComplete"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data: {
                    id:row.id
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    console.log(res)
                    that.$message({
                        message: '操作成功',
                        type: 'success'
                    });
                    that.PostGroupStatusPageList();
                }else{
                    that.$message.error('操作失败');
                }
            })
        }
    },
    mounted(){
        this.token=JSON.parse(localStorage.getItem('userinif')).token;
        this.userid=JSON.parse(localStorage.getItem('userinif')).userInfo.userId;
        this.PostGroupStatusPageList();
    }
}
</script>
<style>
.groupstatus-all{
    background-color: #fff;
    padding: 10px;
    box-shadow: 0 0 5px #0005;
    border-radius: 10px;
    height: 100%;
    min-height: 840px;
}
.groupstatus-title{
    display: flex;
    font-size: 17px;
    font-weight:600 ;
    color: #555;
    margin-top: 10px;
    margin-bottom: 8px;
    justify-content: space-between;
    align-items: center;
}
.groupstatus-box{
    display: flex;
    justify-content: space-between;
}
.groupstatus-all .block{
    margin-top: 10px;
}
</style>