fj-dc-ui/.svn/pristine/d1/d18ca1e48866304344bcfe2a83f6b6c7467ecef1.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 style="width:120px;" v-model="searchObj.meetingNumber" clearable placeholder="输入名称"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                        <el-button type="primary" @click="toAddRoom('添加')" v-if="ownPriv('manage')">添加</el-button>
                    </el-form-item>
                </el-form>
            </el-header>
            <el-main id="dxryListMain" style="padding:5px 20px;">
                <el-table border stripe :data="roomList" 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="meetingName" label="会议室名称" min-width="100"></el-table-column>
                    <el-table-column align="center" show-overflow-tooltip prop="meetingNumber" label="会议号" min-width="120"></el-table-column>
                    <el-table-column align="center" show-overflow-tooltip prop="usOrgNm" label="分配单位" min-width="100"></el-table-column>
                    <el-table-column align="center" show-overflow-tooltip prop="requirePassword" label="是否需要密码" min-width="110">
                        <template slot-scope="scope">
                            <span>{{scope.row.requirePassword | yesOrNo}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" show-overflow-tooltip prop="inPassword" 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="maxParticipant" label="最大参加人数" min-width="110"></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="autoMute" label="是否静音" min-width="100">
                        <template slot-scope="scope">
                            <span>{{scope.row.autoMute | autoMute}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" show-overflow-tooltip prop="smartMuteperson" label="智能静音人数" min-width="110"></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="intm" label="创建时间" min-width="150"></el-table-column>
                    <el-table-column align="center" show-overflow-tooltip label="操作" v-if="ownPriv('manage')" min-width="160" fixed="right">
                        <template slot-scope="scope">
                            <el-button type="success" plain @click="toAddRoom('编辑',scope.row)" >编辑</el-button>
                            <el-button type="danger" plain @click="deleteRoom(scope.row)" >删除</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+'会议室'" :visible.sync="dialogFormVisible">
                <el-form :model="addObj" :rules="rules" ref="ruleForm" :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="meetingName">
                        <el-input v-model="addObj.meetingName" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="会议号" prop="meetingNumber">
                        <el-input v-model="addObj.meetingNumber" placeholder="选填" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="是否需要密码" prop="requirePassword">
                        <el-select v-model="addObj.requirePassword" 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="inPassword" v-if="addObj.requirePassword == '1'">
                        <el-input v-model="addObj.inPassword" type="password" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="主持会议密码" prop="controlPassword">
                        <el-input v-model="addObj.controlPassword" type="password" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="最大参加人数" prop="maxParticipant">
                        <el-input v-model="addObj.maxParticipant" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="是否静音" prop="autoMute">
                        <el-select v-model="addObj.autoMute" placeholder="请选择">
                            <el-option label="智能静音" value="0"></el-option>
                            <el-option label="全部静音" value="1"></el-option>
                            <el-option label="不静音" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="智能静音人数" prop="smartMuteperson" v-if="addObj.autoMute == '0'">
                        <el-input v-model="addObj.smartMuteperson" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="分配单位" prop="orgNm">
                        <el-input v-model="orgNm" autocomplete="off" placeholder="请选择机构" readonly></el-input>
                        <provTreeList
                            rootCode=""
                            style="max-height:200px"
                            @provTreeSelectChange="selectJigouCode"
                        ></provTreeList>
                    </el-form-item>
                    <el-form-item label="开始时间" prop="startTime">
                        <el-date-picker
                            v-model="addObj.startTime"
                            type="datetime"
                            placeholder="选择日期时间"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            :picker-options="pickerOptions">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="结束时间" prop="endTime">
                        <el-date-picker
                            v-model="addObj.endTime"
                            type="datetime"
                            placeholder="选择日期时间"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            :picker-options="pickerOptions">
                        </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="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>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addRoom">确 定</el-button>
                </div>
            </el-dialog>
        </el-container>
    </div>
</template>

<script>
import provTreeList from "../../widgets/jigouTreeList.vue";
import request from "../../utils/gw_ajax_request.js"
import {formatDateTime2,meetRoomStarTime,meetRoomEndTime} from "../../utils/gw_date.js"
    export default {
        components: {
            provTreeList: provTreeList
        },
        props: [],
        data() {
            return {
                tableHeight: window.innerHeight - 210,
                searchObj: {
                    meetingNumber: '',
                    pageNum: 1,
                    pageSize: 20,
                    persId: ''
                },
                addObj: {
                    meetingName : '',
                    meetingNumber: '',
                    requirePassword: '',
                    inPassword: '',
                    controlPassword: '',
                    maxParticipant: '',
                    autoMute: '',
                    autoRecord : '1',
                    smartMuteperson: '',
                    startTime: '',
                    endTime: '',
                    usOrgId: '',
                    persId: '',
                },
                orgNm: '',
                efficientTime:[],
                ruleForm:{
                    meetingName : '',
                    requirePassword: '',
                    inPassword: '',
                    controlPassword: '',
                    maxParticipant: '',
                    autoMute: '',
                    autoRecord : '',
                    smartMuteperson: '',
                    efficientTime: '',
                    orgNm: ''
                },
                rules: {
                    // meetingName: {required: true,message: '请输入会议室名称',trigger: 'blur'},
                    // requirePassword: {required: true,message: '请选择是否需要密码',trigger: 'change'},
                    // autoMute: {required: true,message: '请选择是否静音',trigger: 'change'},
                    // autoRecord: {required: true,message: '请选择是否自动录制',trigger: 'change'},
                    // maxParticipant: {required: true,message: '请输入最大人数',trigger: 'blur'},
                    // orgNm: {required: true,message: '请选择分配单位',trigger: 'blur'}
                },
                pageIndex: 1,
                pageSize: 20,
                total: 50,
                roomList: [],
                dialogFormVisible: false,
                addform: [],
                formLabelWidth: '120px',
                curOperate: '',
                isSelected: false,
                changeJigou: false,
                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.getRoomList()
        },
        watch: {

        },
        methods: {
            getRoomList(){
                this.searchObj.pageNum = this.pageIndex
                this.searchObj.persId = this.persId
                // this.searchObj.persId = '250'
                let paramsObj = this.searchObj
                request.post('/bis/insp/meet/room/getRoomByPersId',paramsObj).then((res)=>{
                    if(res.success){
                        this.roomList = res.data.list
                        this.total = res.data.total
                    }
                })
            },
            toAddRoom(type,row){
                this.curOperate = type
                if(this.curOperate == '编辑'){
                    let rowObj = {}
                    Object.assign(rowObj,row)
                    request.get(`/bis/insp/meet/room/${rowObj.id}`).then(res=>{
                        if(res.success){
                            this.addObj = res.data
                        }else{
                            this.$message.error(res.message)
                        }
                    })
                }else{
                    for (var obj in this.addObj) {
                        if(obj != 'orgId' && obj != 'orgNm'){
                            this.addObj[obj] = ''
                        }
                    }
                    this.addObj.autoRecord = '1'
                    this.addObj.startTime = meetRoomStarTime()
                    this.addObj.endTime = meetRoomEndTime()
                }
                //是否显示弹框内的机构树
                if(!this.addObj.orgId || this.curOperate == '编辑'){
                    this.changeJigou = true
                }else{
                    this.changeJigou = false
                }
                this.dialogFormVisible = true
            },
            addRoom(){
                for (var obj in this.addObj) {
                    if(this.addObj[obj] == 'null' || !this.addObj[obj]){
                        this.addObj[obj] = ''
                    }
                }
                let insertUrl = `/bis/insp/meet/room/add`
                let editUrl = `/bis/insp/meet/room/update`// 校验
                if(
                    !this.addObj.meetingName || !this.addObj.requirePassword || !this.addObj.controlPassword
                    || !this.addObj.maxParticipant || !this.addObj.autoMute
                    || !this.addObj.startTime || !this.addObj.endTime || !this.addObj.usOrgId
                ){
                    this.$message.warning('请完善必填项信息')
                    return
                }
                if(this.addObj.requirePassword == '1' && !this.addObj.inPassword){
                    this.$message.warning('请输入密码')
                    return
                }
                if(this.addObj.autoMute != '0'){
                    this.addObj.smartMuteperson = ''
                }
                if(this.addObj.requirePassword == '0'){
                    this.addObj.inPassword = ''
                }
                this.$refs['ruleForm'].validate(valid=>{
                    if(valid){
                        if(this.curOperate == '添加'){
                            this.addObj.orgId = this.orgId
                            this.addObj.persId = this.persId
                            request.post(insertUrl,this.addObj).then((res)=>{
                                if(res.success){
                                    this.getRoomList()
                                    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.getRoomList()
                                    this.addObj.orgId = ''
                                    // this.addObj.orgNm = ''
                                    this.dialogFormVisible = false
                                    this.$message.success('修改成功')
                                }else{
                                    this.$message.error(res.message)
                                }
                            })
                        }
                    }else{
                        return false
                    }
                })
            },
            deleteRoom(row){
                this.$confirm('确定删除该会议室吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                request.post(`/bis/insp/meet/room/delete/${row.id}`).then((res)=>{
                    if(res.success){
                    this.getRoomList()
                    this.dialogFormVisible = false
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    }
                })
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
                });
            },
            onSubmit(){
                this.searchObj.orgId = ''
                this.getRoomList()
            },
            handleCurrentChange(val) {
                this.getRoomList()
            },
            handleSizeChange(val){
                this.searchObj.pageSize = val;
                this.pageSize = val
                this.getRoomList();
            },
            provTreeSelectChangeHandler(params) {
                this.isSelected = true
                this.addObj.orgId = params.code
                this.addObj.orgNm = params.name
                this.searchObj.orgId = params.code;
                this.getRoomList();
            },
            selectJigouCode(params){
                this.addObj.usOrgId = params.code
                this.orgNm = params.name
            },
            isOpen(val){
               return val == '0' ? '否' : '是'
            },
            timeFormat(val){
                return formatDateTime2(val)
            }
        },
        filters:{
            yesOrNo(val){
               return val == '0' ? '否' : val == '1' ? '是' : ''
            },
            autoMute (val){
                return val == '0' ? '智能静音' : val == '1' ? '全部静音' : val == '2' ? '不静音' : ''
            }
        },
        watch:{
            efficientTime(val){
                this.addObj.startTime = this.efficientTime[0]
                this.addObj.endTime = this.efficientTime[1]
            }
        }
    }

</script>

<style 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;
    }
</style>