fj-dc-ui/.svn/pristine/89/89ae7fcddf2c705395141816c2d573a8e0e76b10.svn-base

<template>
    <div>
        <el-container>
            <!-- <el-aside id="dxdcAside" width="300px">
                <provTreeList
                rootCode=""
                style="max-height:calc(100vh - 100px)"
                @provTreeSelectChange="provTreeSelectChangeHandler"
                ></provTreeList>
            </el-aside> -->
            <el-container>
            <el-header id="dcdxHeader">
                <el-form :inline="true" class="demo-form-inline" size="mini">
                    <el-form-item label="会议标题">
                        <el-input v-model="searchObj.title" clearable placeholder="输入名称"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                        <el-button type="primary" @click="toAddMeeting('添加')">添加</el-button>
                    </el-form-item>
                </el-form>
            </el-header>
            <el-main id="dxryListMain" style="padding:5px 20px;">
                <el-table border stripe :data="meetingList" tooltip-effect="dark" style="width: 100%" :height="tableHeight">
                    <el-table-column align="center" type="index" label="序号" min-width="45">
                    <template slot-scope="scope">
                        {{ (pageIndex - 1) * pageSize + (scope.$index + 1) }}
                    </template>
                    </el-table-column>
                    <el-table-column align="center" show-overflow-tooltip prop="title" label="会议标题" min-width="100"></el-table-column>
                    <el-table-column align="center" show-overflow-tooltip prop="details" label="会议描述" min-width="120"></el-table-column>
                    <el-table-column align="center" show-overflow-tooltip prop="conferencenumber" label="会议号" min-width="120"></el-table-column>
                    <el-table-column align="center" show-overflow-tooltip prop="password" label="会议密码" min-width="100"></el-table-column>
                    <el-table-column align="center" show-overflow-tooltip prop="controlPersName" label="主持人" min-width="100"></el-table-column>
                    <el-table-column align="center" show-overflow-tooltip prop="controlPassword" label="主持会议密码" min-width="110"></el-table-column>
                    <el-table-column align="center" show-overflow-tooltip prop="participantsList" label="参会人员" min-width="120">
                        <template slot-scope="scope">
                            <span>{{scope.row.participantsList | participantsList}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" show-overflow-tooltip prop="startTime" label="开始时间" min-width="150"></el-table-column>
                    <el-table-column align="center" show-overflow-tooltip prop="endTime" label="结束时间" min-width="150"></el-table-column>
                    <el-table-column align="center" show-overflow-tooltip prop="address" label="会议地址" min-width="100"></el-table-column>
                    <el-table-column align="center" show-overflow-tooltip prop="autoinvite" label="是否自动呼叫小鱼终端" min-width="100">
                        <template slot-scope="scope">
                            <span>{{scope.row.autoinvite | yesOrNo}}</span>
                        </template></el-table-column>
                    <el-table-column align="center" show-overflow-tooltip prop="autorecord" label="是否自动录制" min-width="110">
                        <template slot-scope="scope">
                            <span>{{scope.row.autorecord | yesOrNo}}</span>
                        </template></el-table-column>
                    <el-table-column align="center" show-overflow-tooltip prop="enableofflinerecord" label="是否离线录制" min-width="110">
                        <template slot-scope="scope">
                            <span>{{scope.row.enableofflinerecord | yesOrNo}}</span>
                        </template></el-table-column>
                    <el-table-column align="center" show-overflow-tooltip prop="enablesinglerecord" label="是否单独录制" min-width="110">
                        <template slot-scope="scope">
                            <span>{{scope.row.enablesinglerecord | yesOrNo}}</span>
                        </template></el-table-column>
                    <el-table-column align="center" label="操作" min-width="220" fixed="right">
                        <template slot-scope="scope">
                            <el-button type="success" plain @click="toAddMeeting('编辑',scope.row)" :disabled="scope.row.sms == '1'">编辑</el-button>
                            <el-button type="danger" plain @click="deleteMeeting(scope.row)" :disabled="scope.row.sms == '1'">删除</el-button>
                            <el-button type="warning" plain @click="releaseMeeting(scope.row)" :disabled="scope.row.sms == '1'">通知</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-main>
            <el-footer id="dxdcFooter">
            <el-pagination background @current-change="handleCurrentChange" @size-change="handleSizeChange" :pager-count="5" :current-page.sync="pageIndex"
                :page-size="pageSize" :page-sizes="[10, 20, 30, 40, 50, 100]"
                            layout="sizes, total, prev, pager, next" :total="total"></el-pagination>
            </el-footer>
            </el-container>
            <!-- 添加/编辑会议室弹窗 -->
            <el-dialog :title="curOperate+'会议'" width="55%" :visible.sync="dialogFormVisible">
                <el-form :model="addObj" :rules="rules" ref="conferenceForm" :label-width="formLabelWidth">
                    <p style="margin-top:10px;margin-bottom: 10px">
                        <i class="el-icon-caret-right"></i>
                        <span style="width:120px;padding-left: 8px;color: red">必填</span>
                        <span class="hrs"></span>
                    </p>
                    <el-form-item label="会议标题" prop="title">
                        <el-input style="width:360px;" v-model="addObj.title"></el-input>
                    </el-form-item>
                    <el-form-item label="会议简介" prop="details">
                        <el-input style="width:360px;" type="textarea" row="3" v-model="addObj.details"></el-input>
                    </el-form-item>
                    <el-form-item label="会议地址" prop="address">
                        <el-input style="width:360px;" v-model="addObj.address"></el-input>
                    </el-form-item>
                    <el-form-item label="会议室类型" prop="meetingroomtype">
                        <el-select v-model="addObj.meetingroomtype" placeholder="请选择">
                            <el-option label="随机自动生成" value="1"></el-option>
                            <el-option label="指定会议号" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="会议室" prop="conferencenumber" v-if="addObj.meetingroomtype == '2'">
                        <el-select v-model="addObj.conferencenumber" placeholder="请选择">
                            <el-option :label="room.meetingName" :value="room.meetingNumber" v-for="(room,index) in roomList" :key="index"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="会议密码" prop="password">
                        <el-input style="width:360px;" type="password" v-model="addObj.password"></el-input>
                    </el-form-item>
                    <el-form-item label="主持人" prop="hostName">
                        <el-input style="width:360px;" v-model="hostName" readonly placeholder="请点击右侧选择"></el-input>
                        <span class="choose_member" @click="memberShow('radio')">督查组人员</span>
                        <span class="choose_member" @click="memberShowOrgan('radio')">机构人员</span>
                    </el-form-item>
                    <el-form-item label="主持会议密码" prop="controlPassword">
                        <el-input style="width:360px;" type="password" v-model="addObj.controlPassword"></el-input>
                    </el-form-item>
                    <el-form-item label="参会人员" prop="participants">
                        <el-input style="width:360px;" v-model="participants" readonly clearable placeholder="请点击右侧选择"></el-input>
                        <i class="el-icon-circle-close-outline clearInput" @click="clearMember"></i>
                        <span class="choose_member" @click="memberShow('checkbox')">督查组人员</span>
                        <span class="choose_member" @click="memberShowOrgan('checkbox')">机构人员</span>
                    </el-form-item>
                    <el-form-item label="开始时间" prop="startTime">
                        <el-date-picker
                            v-model="addObj.startTime"
                            type="datetime"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            :picker-options="pickerOptions"
                            placeholder="选择日期时间">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="结束时间" prop="endTime">
                        <el-date-picker
                            v-model="addObj.endTime"
                            type="datetime"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            :picker-options="pickerOptions"
                            placeholder="选择日期时间">
                        </el-date-picker>
                    </el-form-item>
                    <p style="margin-top:10px;margin-bottom: 10px">
                        <i class="el-icon-caret-right"></i>
                        <span style="width:120px;padding-left: 8px;color: #37c448">选填</span>
                        <span class="hrs"></span>
                    </p>
                    <el-form-item label="是否自动呼叫小鱼终端" prop="autoinvite">
                        <el-select v-model="addObj.autoinvite" placeholder="请选择">
                            <el-option label="是" value="1"></el-option>
                            <el-option label="否" value="0"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="是否自动录制" prop="autorecord">
                        <el-select v-model="addObj.autorecord" placeholder="请选择">
                            <el-option label="是" value="1"></el-option>
                            <el-option label="否" value="0"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="是否开启离线录制" prop="enableofflinerecord">
                        <el-select v-model="addObj.enableofflinerecord" placeholder="请选择">
                            <el-option label="是" value="1"></el-option>
                            <el-option label="否" value="0"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="是否单独录制" prop="enablesinglerecord">
                        <el-select v-model="addObj.enablesinglerecord" placeholder="请选择">
                            <el-option label="是" value="1"></el-option>
                            <el-option label="否" value="0"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addMeeting">确 定</el-button>
                </div>
            </el-dialog>
        </el-container>
        <!-- 通过督查组筛选人员  人员单选时  memberType == 'radio'  多选时  memberType == 'checkbox' -->
        <group-member v-if="chooseMemberShow" :members="allInfo" :type="memberType" @sendPersonInfo="sendPersonInfo" @closeMember="closeMember"></group-member>
        <!-- 通过机构筛选人员  同上-->
        <organ-member v-if="chooseMemberShowOrgan && (orgId == '027' || orgId == '029')" :members="allInfo" :type="memberType" @sendPersonInfoOrgan="sendPersonInfoOrgan" @closeMember="closeMemberOrgan"></organ-member>
        <organ-member-organ v-if="chooseMemberShowOrgan && orgId != '027' && orgId != '029'" :members="allInfo" :type="memberType" @sendPersonInfoOrgan="sendPersonInfoOrgan" @closeMember="closeMemberOrgan"></organ-member-organ>
    </div>
</template>

<script>
import provTreeList from "../../widgets/jigouTreeList.vue";
import groupMember from "./Conference/groupMember.vue"
import organMember from "./Conference/organMember.vue"
import organMemberOrgan from "./Conference/organMemberForOrgan.vue"
import request from "../../utils/gw_ajax_request.js"
import {meetingStarTime,meetingEndTime} from "../../utils/gw_date.js"
import JsEncrypt from 'jsencrypt'
    export default {
        components: {
            provTreeList: provTreeList,
            groupMember: groupMember,
            organMember: organMember,
            organMemberOrgan: organMemberOrgan
        },
        props: [],
        data() {
            return {
                tableHeight: window.innerHeight - 210,
                searchObj: {
                    title: '',
                    persId: ''
                },
                addObj: {
                    title: '',
                    details: '',        //会议描述
                    meetingroomtype : '',     //1 随机自动生成，2 指定云会议号
                    address: '', //会议地址
                    conferencenumber: '', //虚拟云会议号
                    password: '',           
                    controlPersId: '',      //主持人ID 
                    controlPassword: '',  //  主持会议密码
                    participantsList: [],    //参会人员列表
                    startTime: '',
                    endTime : '', 
                    autoinvite: '',  //开会时，是否自动呼叫小鱼终端入会。默认为0，不自动；为1，自动
                    autorecord: '',  //0 不自动录制，1 自动录制
                    enableofflinerecord: '',  //是否开启离线录制，0 实时转码录制，1 离线转码录制
                    enablesinglerecord: '',   //开启单独录制，0 整个会议录制一个文件， 1 会议的所有参会方都会录制一个文件。开启单路录制，必须同时开启离线录制
                    persId: '',
                },
                //添加和编辑时输入框的校验
                rules: {
                    // title: {required: true,message: '请输入会议标题',trigger: 'blur'},
                    // details: {required: true,message: '请输入会议简介',trigger: 'blur'},
                    // meetingroomtype: {required: true,message: '请选择会议室类型',trigger: 'change'},
                    // password : {required: true,message: '请输入会议密码',trigger: 'blur'},
                    // conferencenumber: {required: true,message: '请选择会议室',trigger: 'change'},
                    // hostName: {required: true,message: '请选择主持人',trigger: 'change'},
                    // controlPassword: {required: true,message: '请输入主持会议密码',trigger: 'blur'},
                    // participants: {required: true,message: '请选择参会人员',trigger: 'change'},
                    // startTime: {required: true,message: '请选择开始时间',trigger: 'blur'},
                    // endTime: {required: true,message: '请选择结束时间',trigger: 'blur'},
                    // autoinvite: {required: true,message: '请选择是否自动呼叫',trigger: 'change'},
                },
                pageIndex: 1,
                pageSize: 20,
                total: 1,
                meetingList: [],
                dialogFormVisible: false,
                addform: [],
                formLabelWidth: '160px',
                curOperate: '',
                isSelected: false,
                changeJigou: false,
                chooseMemberShow: false,
                chooseMemberShowOrgan: false,
                memberType: 'checkbox',
                participants: '',
                hostName: '',
                roomList: [],
                allInfo: [],
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() < Date.now() - 8.64e7;
                    }
                }
            }
        },
        computed:{
            persId(){
                return localStorage.getItem('userid') ? localStorage.getItem('userid') : ''
            },
            orgId(){
                return localStorage.getItem('guid') ? localStorage.getItem('guid') : ''
            }
        },
        mounted() {
            this.getMeetingList()
            this.getRoomList()
        },
        watch: {
        },
        methods: {
            //获取会议列表
            getMeetingList(){
                this.searchObj.pageNum = this.pageIndex
                this.searchObj.persId = this.persId
                let paramsObj = this.searchObj
                request.post('/bis/insp/meet/recode/getRecodeInfo',paramsObj).then((res)=>{
                    if(res.success){
                        this.meetingList = res.data.list
                        this.total = res.data.total
                    }
                })
            },
            toAddMeeting(type,row){
                let _this = this
                this.curOperate = type
                if(this.curOperate == '编辑'){
                    let rowObj = {}
                    Object.assign(rowObj,row)
                    request.get(`/bis/insp/meet/recode/${rowObj.id}`).then(res=>{
                        if(res.success){
                            this.addObj = res.data
                            this.hostName = res.data.controlPersName
                            this.participants = res.data.participants
                            if(res.data.participantsList.length){
                                let personId = []
                                let personName = []
                                res.data.participantsList.forEach(ele=>{
                                    personName.push(ele.persName)
                                })
                                this.participants = personName.join(',')
                                //所有信息赋值
                                this.allInfo = res.data.participantsList
                            }
                            delete this.addObj.participants
                        }else{
                            this.$message.error(res.message)
                        }
                    })
                }else{
                    for (var obj in this.addObj) {
                        if(obj != 'orgId' && obj != 'orgNm'){
                            this.addObj[obj] = ''
                        }
                    }
                    this.addObj.startTime = meetingStarTime()
                    this.addObj.endTime = meetingEndTime()

                    this.addObj.participantsList = []
                    this.participants = ''
                    this.hostName = ''
                }
                //是否显示弹框内的机构树
                if(!this.addObj.orgId || this.curOperate == '编辑'){
                    this.changeJigou = true
                }else{
                    this.changeJigou = false
                }
                this.dialogFormVisible = true
            },
            //添加/编辑会议
            addMeeting(){
                let insertUrl = `/bis/insp/meet/recode/add`
                let editUrl = `/bis/insp/meet/recode/update`
                // 校验
                if(
                    !this.addObj.title || !this.addObj.details || !this.addObj.meetingroomtype || !this.addObj.password
                    || !this.addObj.controlPersId || !this.addObj.controlPassword || !this.addObj.participantsList || !this.addObj.startTime
                    || !this.addObj.endTime
                ){
                    this.$message.warning('请完善必填项信息')
                    return
                }
                if(this.addObj.meetingroomtype == '2' && !this.addObj.conferencenumber){
                    this.$message.warning('请选择会议室')
                    return
                }
                if(this.curOperate == '添加'){
                    this.addObj.persId = this.persId
                    request.post(insertUrl,this.addObj).then((res)=>{
                        if(res.success){
                            this.getMeetingList()
                            this.addObj.orgId = ''
                            this.addObj.orgNm = ''
                            this.dialogFormVisible = false
                            this.$message.success('添加成功')
                        }else{
                            this.$message.error(res.message)
                        }
                    })
                }else if(this.curOperate == '编辑'){
                    request.post(editUrl,this.addObj).then((res)=>{
                        if(res.success){
                            this.getMeetingList()
                            this.addObj.orgId = ''
                            this.addObj.orgNm = ''
                            this.dialogFormVisible = false
                            this.$message.success('修改成功')
                        }else{
                            this.$message.error(res.message)
                        }
                    })
                }
            },
            deleteMeeting(row){
                this.$confirm('确定删除该会议吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                request.post(`/bis/insp/meet/recode/delete/${row.id}`).then((res)=>{
                    if(res.success){
                    this.getMeetingList()
                    this.dialogFormVisible = false
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    }
                })
                }).catch(() => {
                    
                });
            },
            onSubmit(){
                this.searchObj.orgId = ''
                this.getMeetingList()
            },
            releaseMeeting(row){
                this.$confirm('确认给参会人员发送会议通知吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                request.get(`/bis/insp/meet/recode/sendSms/${row.id}`).then((res)=>{
                    if(res.success){
                    this.getMeetingList()
                    this.dialogFormVisible = false
                    this.$message({
                        type: 'success',
                        message: '通知成功!'
                    });
                    }
                })
                }).catch(() => {
                    
                });
            },
            //获取会议室列表
            getRoomList(){
                let paramsObj = {
                    pageNum: '1',
                    pageSize: '100',
                    persId: '250'
                }
                paramsObj.persId = this.persId
                request.post('/bis/insp/meet/room/getRoomByPersId',paramsObj).then((res)=>{
                    if(res.success){
                        this.roomList = res.data.list
                    }
                })
            },
            handleCurrentChange(val) {
                this.getMeetingList()
            },
            handleSizeChange(val){
                this.searchObj.pageSize = val;
                this.pageSize = val
                this.getMeetingList();
            },
            provTreeSelectChangeHandler(params) {
                this.isSelected = true
                this.addObj.orgId = params.code
                this.addObj.orgNm = params.name
                this.searchObj.orgId = params.code;
                this.getMeetingList();
            },
            selectJigouCode(params){
                this.addObj.orgId = params.code
                this.addObj.orgNm = params.name
            },
            sendPersonInfo(info){
                console.log(info)
                let _this = this
                _this.addObj.participantsList = []
                if(this.memberType == 'checkbox'){
                    this.participants = info.memberNames ? info.memberNames : ''
                    info.memberIds.forEach(ele=>{
                        _this.addObj.participantsList.push({'persId': ele})
                    })
                    //接收所有信息
                    this.allInfo = info.allInfo
                }else{
                    this.hostName = info.memberName ? info.memberName : ''
                    this.addObj.controlPersId = info.memberId
                }
                this.chooseMemberShow = false
            },
            sendPersonInfoOrgan(info){
                console.log(info)
                let _this = this
                _this.addObj.participantsList = []
                if(this.memberType == 'checkbox'){
                    this.participants = info.memberNames ? info.memberNames : ''
                    info.memberIds.forEach(ele=>{
                        _this.addObj.participantsList.push({'persId': ele})
                    })
                    //接收所有信息
                    this.allInfo = info.allInfo
                }else{
                    this.hostName = info.memberName ? info.memberName : ''
                    this.addObj.controlPersId = info.memberId
                }
                this.chooseMemberShowOrgan = false
            },
            clearMember(){
                this.participants = ''
                this.addObj.participantsList = []
            },
            //关闭督查组人员弹窗
            closeMember(){
                this.chooseMemberShow = false
            },
            //关闭督查机构人员弹窗
            closeMemberOrgan(){
                this.chooseMemberShowOrgan = false
            },
            //展示督查机构人员弹窗
            memberShowOrgan(type){
                this.memberType = type
                this.chooseMemberShowOrgan = true 
            },
            //展示督查组人员弹窗
            memberShow(type){
                this.memberType = type
                this.chooseMemberShow = true 
            }
        },
        filters:{
            participantsList(val){
                let person = []
                val.forEach(ele=>{
                    person.push(ele.persName)
                })
                return person.join(',')
            },
            yesOrNo(val){
               return val == '0' ? '否' : val == '1' ? '是' : ''
            }
        }
    }

</script>

<style lang="scss" scoped>
    #dcdxHeader {
        padding: 15px 20px 0;
        height: auto !important;
    }
    #dxdcFooter {
        text-align: center;
    }
    #dxdcAside {
        border:1px solid #d5d5ff;
    }
    #dcdxHeader .el-dialog__wrapper .el-treeWhite{
        max-height: 260px !important;
    }
    .choose_member{
        margin-left: 10px;
        color: #2c7ad6;
        font-size: 12px;
        cursor: pointer;
    }
    .clearInput{
        margin-left: -25px;
        position: relative;
        color: #999;
        cursor: pointer;
    }
</style>