fj-dc-ui/.svn/pristine/f5/f57b0d25a67bf6a0f22a4f22b146e5160183bcc4.svn-base

<!--  -->
<template>
    <div>
        <el-header style="height: 100%;">
            <h5 style="margin-top:10px;">{{"地点：" + meetingInfoRow.address}}</h5>
        </el-header>
        <el-main style="padding:0 20px;">
            <el-row>
                <el-col :span="12">
                     <h5 style="margin-top:10px;">签到、签退基准：</h5>
                </el-col>
                <el-col :span="12" style="text-align: right;">
                    <el-button style="padding: 5px;" size="mini" type="success" icon="el-icon-plus" circle @click="toAddSgin"></el-button>
                </el-col>
            </el-row>
            <el-table
                :data="tableDataSgin"
                :height="ycTableHeight"
                stripe
                border
                style="width: 100%;margin-top:10px;">
                <el-table-column
                    prop="type"
                    show-overflow-tooltip
                    :formatter="typeFormatter"
                    label="类型">
                </el-table-column>
                <el-table-column
                    prop="stTm"
                    show-overflow-tooltip
                    label="基准开始时间"
                    >
                </el-table-column>
                <el-table-column
                    prop="enTm"
                    show-overflow-tooltip
                    label="基准结束时间"
                    >
                </el-table-column>
                <!-- <el-table-column
                    prop="sginCount"
                    show-overflow-tooltip
                    label="签到率"
                    >
                    <template slot-scope="scope">
                        <el-progress 
                            :text-inside="true" 
                            :stroke-width="18" 
                            :percentage="parseInt((scope.row.sginCount/scope.row.meetCount)*100)">
                        </el-progress>
                    </template>
                </el-table-column> -->
                <el-table-column
                    width="180"
                    label="操作">
                    <template slot-scope="scope">
                        <!-- <el-button
                            style="color:#67c23a"
                            size="mini"
                            type="text"
                            icon="el-icon-document"
                            @click.stop="sginDetails(scope.$index, scope.row)">详情</el-button> -->
                        <el-button
                            style="color:#409eff"
                            size="mini"
                            type="text"
                            icon="el-icon-edit"
                            @click.stop="editDataSgin(scope.$index, scope.row)">编辑</el-button>
                        <el-button
                            style="color:#e6a23c"
                            size="mini"
                            type="text"
                            icon="el-icon-delete"
                            @click.stop="handleDeleteSgin(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                style="text-align:center;"
                @size-change="handleSizeChangeSgin"
                @current-change="handleCurrentChangeSgin"
                :current-page.sync="pageNumSgin"
                :page-sizes="[10, 20, 30, 40, 50, 100]"
                :page-size="pageSizeSgin"
                small
                layout="prev, pager, next"
                :total="totalSgin">
            </el-pagination>
            <!-- <el-row style="">
                <el-col :span="10">
                    <h5 style="float:left;margin-top:10px;">{{"参会人数: " + checkin + '/' + notCheckin}}</h5>
                </el-col>
                <el-col :span="14">
                    <div style="width:20%;float:left;margin-top:10px;">
                        <h5>签到率：</h5>
                    </div>
                    <div style="width:80%;float:left;margin-top:10px;">
                        <el-progress :text-inside="true" :stroke-width="18" :percentage="checkinRate"></el-progress>
                    </div>
                </el-col>
            </el-row> -->
            <el-row>
                <el-col :span="12">
                     <h5 style="margin-top:10px;">会议人员管理：</h5>
                </el-col>
                <el-col :span="12" style="text-align: right;">
                </el-col>
            </el-row>

            <el-row style="margin-top: 5px;">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item style="margin-bottom: 0;">
                    <el-input style="width:10vw;" size="mini" v-model="formInline.name" placeholder="请输入姓名" clearable ></el-input>
                </el-form-item>
                <el-form-item style="margin-bottom: 0;">
                    <el-input style="width:10vw;" size="mini" v-model="formInline.mbleNum" placeholder="请输入手机号" clearable ></el-input>
                </el-form-item>
                <el-form-item style="margin-bottom: 0;float: right;">
                    <el-button style="padding: 5px;" size="mini" type="primary" icon="el-icon-search" circle @click="toSearchData"></el-button>
                    <el-button style="padding: 5px;" size="mini" type="success" icon="el-icon-plus" circle @click="toAddPeo"></el-button>
                </el-form-item>
                </el-form>
            </el-row>

            <el-table
                :data="tableData"
                :height="ryTableHeight"
                stripe
                border
                style="width: 100%;margin-top:10px;">
                <el-table-column
                    prop="name"
                    show-overflow-tooltip
                    label="姓名"
                    width="130"
                    >
                </el-table-column>
                <!-- <el-table-column
                    prop="signTm"
                    show-overflow-tooltip
                    label="签到时间"
                    >
                </el-table-column> -->
                <el-table-column
                    prop="unit"
                    show-overflow-tooltip
                    label="单位">
                </el-table-column>
                <el-table-column
                    prop="mbleNum"
                    show-overflow-tooltip
                    label="手机号"
                    width="120">
                </el-table-column>
                <!-- <el-table-column 
                    align="center"
                    label="是否签到" 
                    prop="signState">
                    <template slot-scope="scope">
                        <i 
                        :style="scope.row.ishave == 1 ? 'color:#67c23a':'color:#f56c6c'" 
                        :class="scope.row.ishave == 1 ? 'el-icon-success':'el-icon-error'">
                        </i>
                    </template>
                </el-table-column> -->
                <el-table-column
                    width="150"
                    label="操作">
                    <template slot-scope="scope">
                        <el-button
                            style="color:#409eff"
                            size="mini"
                            type="text"
                            icon="el-icon-edit"
                            @click.stop="editData(scope.$index, scope.row)">编辑</el-button>
                        <el-button
                            style="color:#e6a23c"
                            size="mini"
                            type="text"
                            icon="el-icon-delete"
                            @click.stop="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                style="text-align:center;"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="pageNum"
                :page-sizes="[10, 20, 30, 40, 50, 100]"
                :page-size="pageSize"
                small
                layout="prev, pager, next"
                :total="total">
            </el-pagination>
        </el-main>
        <!-- <el-footer style="margin-top:5px;text-align:right;">
            <el-button @click="beginMetting" :disabled="beginButton" type="primary" size="mini" style="padding: 5px 10px;">会议开始</el-button>
            <el-button @click="endMetting" :disabled="endButton" type="primary" size="mini" style="padding: 5px 10px;">会议结束</el-button>
            <el-button @click="closeMetting" :disabled="closeButton" type="primary" size="mini" style="padding: 5px 10px;">会议关闭</el-button>
        </el-footer> -->

        <addMeetingPeople 
            v-if="addPeoVisiual"
            :meetingInfoRow="meetingInfoRow" 
            :editFormData="editFormData" 
            @cancelHandler="cancelHandler"
            @addSuccessStatus="addSuccessStatusEvent"
        ></addMeetingPeople>

        <addSgin
            v-if="addSginVisiual"
            :meetingInfoRow="meetingInfoRow" 
            :editFormDataSgin="editFormDataSgin" 
            @cancelHandler="cancelHandlerSgin"
            @addSuccessStatus="addSuccessStatusEventSgin"
        ></addSgin>

        <sginDetalis
            v-if="sginDetalisVisiual"
            :meetingInfoRow="meetingInfoRow" 
            :sginId="sginId" 
            @cancelHandler="cancelHandlerSginDetails"
        ></sginDetalis>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { getPeoLists,deletePeople,getSginLists,deleteSgin,addMeetingBase } from "../../api/meetingAPI.js";
import addMeetingPeople from './addMeetingPeople'
import addSgin from './addSgin'
import sginDetalis from './sginDetalis'
export default {
    //import引入的组件需要注入到对象中才能使用
    components: {
        addMeetingPeople,
        addSgin,
        sginDetalis,
    },
    props:['meetingInfoRow'],
    data() {
    //这里存放数据
        return {
            // ryTableHeight:window.innerHeight -600,
            sginId:'',
            sginDetalisVisiual:false,
            addPeoVisiual:false,
            addSginVisiual:false,
            search:'',
            formInline:{
                name:'',
                mbleNum:'',
            },
            readyPeo:0,
            allpeo:35,
            meetingPlace:'北京市西城区广安门内大街水利综合楼433',
            meetingStatus:'进行中',
            tableData: [],
            pageNum:1,
            pageSize:10,
            total:0,
            editFormData:{},
            editFormDataSgin:{},
            checkin:0,
            notCheckin:0,
            checkinRate:0,

            pageNumSgin:1,
            pageSizeSgin:10,
            totalSgin:0,
            tableDataSgin: [],
        };
    },
    //监听属性 类似于data概念
    computed: {
        ycTableHeight(){
            if(window.innerWidth <= 1366){
                return window.innerHeight - 500;
            }else{
                return window.innerHeight - 660;
            }
        },
        ryTableHeight(){
            if(window.innerWidth <= 1366){
                return window.innerHeight - 500;
            }else{
                return window.innerHeight - 660;
            }
        },
        beginButton(){
            if(this.meetingInfoRow.state == '1'){
                return false;
            }else{
                return true;
            }
        },
        endButton(){
            if(this.meetingInfoRow.state == '2'){
                return false;
            }else{
                return true;
            }
        },
        closeButton(){
            if(this.meetingInfoRow.state == '3'){
                return false;
            }else{
                return true;
            }
        },
        
    },
    //监控data中的数据变化
    watch: {
        // meetingInfoRow(n,o){
        //     this.meetingInfoRow = n
        // }
    },
    //方法集合
    methods: {
        
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageSize = val;
            this.getPeoTableData();
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.pageNum = val;
            this.getPeoTableData();
        },
        handleSizeChangeSgin(val) {
            console.log(`每页 ${val} 条`);
            this.pageSizeSgin = val;
            this.getPeoTableData();
        },
        handleCurrentChangeSgin(val) {
            console.log(`当前页: ${val}`);
            this.pageNumSgin = val;
            this.getPeoTableData();
        },
        //展示添加资料弹窗
        toAddPeo(){
            this.editFormData = {};
            this.addPeoVisiual = true
        },
        
        toAddSgin(){
            this.editFormDataSgin = {};
            this.addSginVisiual = true
        },
        cancelHandler(){
            this.addPeoVisiual = false
            this.getPeoTableData();
        },
        cancelHandlerSgin(){
            this.addSginVisiual = false
            this.getSginTableData();
        },
        cancelHandlerSginDetails(){
            this.sginDetalisVisiual = false
        },
        //添加人员后冒上来的事件
        addSuccessStatusEvent(item){
            if(item.success = true){
                this.cancelHandler();
                this.$message.success('操作成功！');
            }else{
                this.$message.error(res.message);
            }
        },
        //添加人员后冒上来的事件
        addSuccessStatusEventSgin(item){
            if(item.success = true){
                this.cancelHandlerSgin();
                this.$message.success('操作成功！');
            }else{
                this.$message.error(res.message);
            }
        },
        //获取会议人员数据
        getPeoTableData(){
            var _self = this;
            let obj = {
                "pageNum":_self.pageNum,
                "pageSize":_self.pageSize,
                "meetingId":_self.meetingInfoRow.id,
                "name":_self.formInline.name,
                "mbleNum":_self.formInline.mbleNum,
            }
            getPeoLists(obj).then(response => {
                _self.tableData = response.data.list;
                _self.tableData.forEach((element, index) => {
                    if(element.signState == "1"){
                        _self.checkin ++ ;
                    }
                });
                _self.total = response.data.total;
                if(_self.total == 0){
                    _self.checkinRate = 0
                }else{
                    _self.notCheckin = _self.total - _self.checkin;//未签到
                    _self.checkinRate = parseInt((_self.checkin /_self.total)*100);
                }
                // alert(typeof _self.checkinRate)
            });
        },
        //获取签到基准数据
        getSginTableData(){
            var _self = this;
            let obj = {
                "pageNum":_self.pageNumSgin,
                "pageSize":_self.pageSizeSgin,
                "meetId":_self.meetingInfoRow.id,
            }
            getSginLists(obj).then(response => {
                _self.tableDataSgin = response.data.list;
                _self.totalSgin = response.data.total;
            });
        },
        toSearchData(){
            this.getPeoTableData();
        },
        editData(index,row){
            this.editFormData = row;
            this.addPeoVisiual = true;
        },
        handleDelete(index,row) {
            var _self = this;
            this.$confirm('此操作将删除该人员, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deletePeople(row.id).then(response => {
                    if(response.success == true){
                        _self.$message.success('删除成功！');
                        _self.getPeoTableData();
                    }else{
                        _self.$message.error(item.message);
                    }
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        editDataSgin(index,row){
            this.editFormDataSgin = row;
            this.addSginVisiual = true;
        },
        handleDeleteSgin(index,row) {
            var _self = this;
            this.$confirm('此操作将删除该基准, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteSgin(row.id).then(response => {
                    if(response.success == true){
                        _self.$message.success('删除成功！');
                        _self.getSginTableData();
                    }else{
                        _self.$message.error(item.message);
                    }
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        typeFormatter:function(row, column){
            return row.type == "1" ? '签到':'签退'
        },
        beginMetting(){
            var _self = this;
            this.$confirm('此操作将开始此会议, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let obj = {
                    "id":_self.meetingInfoRow.id,
                    "state":"2",
                };
                addMeetingBase(obj).then(response => {
                    if(response.success == true){
                        _self.$message.success('会议开始！');
                        _self.meetingInfoRow.state = '2';
                    }else{
                        _self.$message.error(item.message);
                    }
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消开始'
                });          
            });
        },
//         endMetting
// closeMetting
        endMetting(){
            var _self = this;
            this.$confirm('此操作将结束此会议, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let obj = {
                    "id":_self.meetingInfoRow.id,
                    "state":"3",
                };
                addMeetingBase(obj).then(response => {
                    if(response.success == true){
                        _self.$message.success('会议结束！');
                        _self.meetingInfoRow.state = '3';
                    }else{
                        _self.$message.error(item.message);
                    }
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消开始'
                });          
            });
        },
        closeMetting(){
            var _self = this;
            this.$confirm('此操作将关闭此会议, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let obj = {
                    "id":_self.meetingInfoRow.id,
                    "state":"4",
                };
                addMeetingBase(obj).then(response => {
                    if(response.success == true){
                        _self.$message.success('会议结束！');
                        _self.meetingInfoRow.state = '4';
                    }else{
                        _self.$message.error(item.message);
                    }
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消开始'
                });          
            });
        },
        sginDetails(index,row){
            this.sginDetalisVisiual = true;
            this.sginId = row.id;
        }
        
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        this.getPeoTableData();
        this.getSginTableData();
    },
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>

</style>