fj-dc-ui/.svn/pristine/38/385f1aa0811ee893f2fd06db7afd5b4b4848e80b.svn-base

<!--  -->
<template>
    <div>
        <el-container>
             <el-header style="padding: 20px;">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="会议主题">
                        <el-input v-model="formInline.title" placeholder="会议主题" clearable ></el-input>
                    </el-form-item>
                    <el-form-item label="计划开始时间">
                        <el-date-picker
                            clearable
                            v-model="formInline.stTm"
                            value-format="yyyy-MM-dd HH:mm"
                            format="yyyy-MM-dd HH:mm"
                            type="datetime"
                            placeholder="选择日期时间">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button icon="el-icon-search" type="primary" @click="searchData">查询</el-button>
                        <el-button icon="el-icon-circle-plus-outline" type="success" @click="addMeetingBaseInfo">添加</el-button>
                    </el-form-item>
                </el-form>
            </el-header>
            <el-main>
                <el-table
                    @row-click="rowClick"
                    :data="tableData"
                    :height="tableHight"
                    stripe
                    border
                    style="width: 100%">
                <el-table-column
                    prop="title"
                    label="会议主题"
                    show-overflow-tooltip
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="address"
                    label="会议地点"
                    show-overflow-tooltip
                    width="180">
                </el-table-column>
                <!-- <el-table-column
                    prop="content"
                    label="会议内容"
                    show-overflow-tooltip>
                </el-table-column> -->
                <el-table-column
                    prop="stTm"
                    label="计划开始时间"
                    show-overflow-tooltip>
                </el-table-column>
                <!-- <el-table-column
                    show-overflow-tooltip
                    label="签到率"
                    >
                    <template slot-scope="scope">
                        <el-progress 
                            :text-inside="true" 
                            :stroke-width="18" 
                            :percentage="25">
                        </el-progress>
                    </template>
                </el-table-column> -->
                <el-table-column
                    prop="enTm"
                    label="计划结束时间"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    :formatter="isHasQuesFormatter"
                    prop="isHasQues"
                    label="是否有问卷">
                </el-table-column>
                <el-table-column
                    :formatter="isOutFormatter"
                    prop="isOut"
                    label="是否签退">
                </el-table-column>
                <el-table-column
                    :formatter="stateFormatter"
                    prop="state"
                    label="会议状态">
                </el-table-column>
                <el-table-column
                    width="380"
                    label="操作">
                    <template slot-scope="scope">
                    <!-- <el-button
                        style="color:#67c23a"
                        size="mini"
                        type="text"
                        icon="el-icon-caret-right"
                        @click.stop="beginMetting(scope.$index, scope.row)">开始</el-button> -->
                    <el-button
                        :disabled="scope.row.isHasQues == '1' ? false:true"
                        size="mini"
                        type="text"
                        icon="el-icon-plus"
                        @click.stop="addQueNaire(scope.$index, scope.row)">添加问卷</el-button>
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-plus"
                        @click.stop="addAgenda(scope.$index, scope.row)">添加议程</el-button>
                    <el-button
                        style="color:#409eff"
                        size="mini"
                        type="text"
                        icon="el-icon-document"
                        @click.stop="showMeetingDetailsEvent(scope.$index, scope.row)">详情</el-button>
                    <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-main>
            <el-footer>
                 <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"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </el-footer>
        </el-container> 
        <!-- <meetingBaseinfoDialog
            v-if="showAddMeetingBaseInfoDialog"
            :editFormData="editFormData"
            @cancelHandler="cancelHandler"
            @addSuccessStatus="addSuccessStatusEvent"
        ></meetingBaseinfoDialog>  -->
        <!-- <meetingBaseinfo
            v-if="showMeetingBaseInfo"
            :editFormData="editFormData"
            @cancelHandler="cancelHandler"
            @addSuccessStatus="addSuccessStatusEvent"
        ></meetingBaseinfo>  -->
        <meetingDetails
            v-if="showDetails"
            @cancelHandler="cancelHandler"
            :meetingInfoRow="meetingInfoRow"
        ></meetingDetails> 
        <QueNaireDialog
            v-if="showQueNaireDialog"
            @cancelHandler="cancelHandler"
            :meetingInfoRow="meetingInfoRow"
        ></QueNaireDialog> 
        <AgendaDialog
            v-if="showAddAgendaDialog"
            @cancelHandler="cancelHandler"
            :meetingInfoRow="meetingInfoRow"
        ></AgendaDialog> 
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { getMeetingTableDataLists,deleteMeetingDataBase,addMeetingBase} from "../../../api/meetingAPI.js";
import meetingManagePage from "../meetingManagePage"
import meetingDetails from "../meetingDetails"
export default {
    //import引入的组件需要注入到对象中才能使用
    components: {
        meetingBaseinfoDialog: resolve => {
            require(["../meetingBaseinfoDialog.vue"], resolve);
        },
        // meetingBaseinfo: resolve => {
        //     require(["../meetingBaseinfo.vue"], resolve);
        // },
        meetingDetails: resolve => {
            require(["../meetingDetails.vue"], resolve);
        },
        QueNaireDialog: resolve => {
            require(["../QueNaireDialog.vue"], resolve);
        },
        AgendaDialog: resolve => {
            require(["../AgendaDialog.vue"], resolve);
        },
    },
    props:['changeTabName'],
    data() {
    //这里存放数据
        return {
            meetingInfoRow:{},
            showDetails:false,
            showQueNaireDialog:false,
            showAddAgendaDialog:false,
            showAddMeetingBaseInfoDialog:false,
            showMeetingBaseInfo:false,
            formInline: {
                title: '',
                stTm: ''
            },
            tableHight:window.innerHeight - 360,
            tableData: [],
            pageNum:1,
            pageSize:10,
            total:0,
            editFormData:{}//用于传递给
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {
        changeTabName(){
            this.getMeetingTableData();
        }
    },
    //方法集合
    methods: {
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageSize = val;
            this.getMeetingTableData();
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.pageNum = val;
            this.getMeetingTableData();
        },
        // 表格行点击事件
        rowClick(row, column, event){
            console.log(row);
            console.log(column);
            console.log(event);
            this.$emit('tableRowClick',row)
        },
        getMeetingTableData(){
            var _self = this;
            let obj = {
                "pageNum":_self.pageNum,
                "pageSize":_self.pageSize,
                "title":_self.formInline.title,
                "stTm":_self.formInline.stTm,
                // "state":"1",
            }
            getMeetingTableDataLists(obj).then(response => {
                _self.tableData = response.data.list;
                _self.total = response.data.total;
            });
        },
         //查询按钮事件
        searchData(){
            this.getMeetingTableData();
        },
        addMeetingBaseInfo(){
            this.editFormData = {};
            // this.showAddMeetingBaseInfoDialog = true;
            // this.showMeetingBaseInfo = true;
            this.$emit('addMeetingBase',this.editFormData)
            // this.meetingInfoRow = row;
        },
        
        cancelHandler(){
            this.showAddMeetingBaseInfoDialog = false;
            this.showQueNaireDialog = false;
            this.showDetails = false;
            this.showAddAgendaDialog = false;
        },
         //添加会议后冒上来的事件
        addSuccessStatusEvent(item){
            if(item.success = true){
                this.cancelHandler();
                this.$message.success('操作成功！');
                this.getMeetingTableData();
            }else{
                this.$message.error(res.message);
            }
        },
        isHasQuesFormatter:function(row, column){
            return row.isHasQues == "1" ? '是':'否'
        },
        isOutFormatter:function(row, column){
            return row.isOut == "1" ? '是':'否'
        },
        stateFormatter:function(row, column){
            return row.state == "1" ? '未开始': row.state == "2" ? '进行中' : row.state == "3" ? '已结束':'已关闭'
        },
        editData(index,row){
            // var _self = this;
            this.editFormData = row;
            this.$emit('addMeetingBase',row)
        },
        //删除会议基本信息
        handleDeleteEvent(index,row){
            var _self = this;
            deleteMeetingDataBase(row.id).then(response => {
                if(response.success == true){
                    _self.$message.success('删除成功！');
                    _self.getMeetingTableData();
                }else{
                    _self.$message.error(item.message);
                }
            });
        },
        handleDelete(index,row) {
            var _self = this;
            this.$confirm('此操作将删除该会议, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.handleDeleteEvent(index,row);
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        beginMetting(index,row){
            var _self = this;
            let obj = {
                "id":row.id,
                "state":"2",
            };
            addMeetingBase(obj).then(response => {
                if(response.success == true){
                    _self.$message.success('操作成功');
                    _self.getMeetingTableData();
                }else{
                    _self.$message.error(item.message);
                }
            });
        },
        showMeetingDetailsEvent(index,row){
            // this.showDetails = true;
            this.$emit('tableDetails',row)
            this.meetingInfoRow = row;
        },
        addQueNaire(index,row){
            this.$emit('addQueNaire',row)
            this.meetingInfoRow = row;
        },
        showQueNaire(index,row){
            this.meetingInfoRow = row;
            this.showQueNaireDialog = true;
        },
        addAgenda(index,row){
            this.meetingInfoRow = row;
            this.showAddAgendaDialog = true;
        }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

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

</style>