From 2d58f60350f75dda9e17ce690beda080e3fb1344 Mon Sep 17 00:00:00 2001
From: gongdi <410827992@qq.com>
Date: Fri, 5 Nov 2021 17:25:13 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=9A=E8=AE=AE=E5=AE=A4=E9=A2=84=E7=BA=A6?=
 =?UTF-8?q?=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../moduleCom/oa/meetingRoom/apply/apply.vue  | 247 +++++++
 .../oa/meetingRoom/apply/meetingRoomApply.vue | 174 +++++
 .../moduleCom/oa/meetingRoom/interConfig.js   |  20 +
 .../moduleCom/oa/meetingRoom/timeBox.vue      | 633 ++++++++++++++++++
 4 files changed, 1074 insertions(+)
 create mode 100644 src/views/superFusionPlatform/mainPlatform/moduleAndLayout/moduleCom/oa/meetingRoom/apply/apply.vue
 create mode 100644 src/views/superFusionPlatform/mainPlatform/moduleAndLayout/moduleCom/oa/meetingRoom/apply/meetingRoomApply.vue
 create mode 100644 src/views/superFusionPlatform/mainPlatform/moduleAndLayout/moduleCom/oa/meetingRoom/interConfig.js
 create mode 100644 src/views/superFusionPlatform/mainPlatform/moduleAndLayout/moduleCom/oa/meetingRoom/timeBox.vue

diff --git a/src/views/superFusionPlatform/mainPlatform/moduleAndLayout/moduleCom/oa/meetingRoom/apply/apply.vue b/src/views/superFusionPlatform/mainPlatform/moduleAndLayout/moduleCom/oa/meetingRoom/apply/apply.vue
new file mode 100644
index 0000000..77afe17
--- /dev/null
+++ b/src/views/superFusionPlatform/mainPlatform/moduleAndLayout/moduleCom/oa/meetingRoom/apply/apply.vue
@@ -0,0 +1,247 @@
+<template>
+    <div class="meeting-room-apply-page-div">
+        <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
+            <a-form-item label="选择会议室" class="form-row-style">
+                <a-select :value="roomId" @change="onChange">
+                    <a-select-option v-for="item in dataList" :key="item.room_id">
+                        {{ item.room_name }}
+                    </a-select-option>
+                </a-select>
+            </a-form-item>
+            <a-form-item label="会议主题">
+                <a-input placeholder="请输入会议主题" :maxLength="50" v-bind="theme"/>
+            </a-form-item>
+            <a-form-item label="申请人员">
+                <div>{{applyPersonName}}</div>
+            </a-form-item>
+            <a-form-item label="参会人员" style="display:flex;">
+                <a-icon type="user-add" :style="{ fontSize: '16px', color: '#31a8fa' }" @click="showPerson"/>
+                <span style="margin-left: 10px;width: calc(100% - 35px);overflow-x: hidden;text-overflow: ellipsis;white-space: nowrap" :title="personNames">{{personNames}}</span>
+            </a-form-item>
+            <a-form-item label="开始时间">
+                <a-date-picker style="width: 100%;" :showTime="true" @change="beginTimeChange" placeholder="请选择时间"/>
+            </a-form-item>
+            <a-form-item label="结束时间">
+                <a-date-picker style="width: 100%;" :showTime="true" @change="endTimeChange" placeholder="请选择时间"/>
+            </a-form-item>
+            <a-form-item label="会议内容">
+                <a-input-textarea placeholder="请输入会议内容" v-bind="meetingContent"/>
+            </a-form-item>
+            <a-form-item label="附件上传">
+                <Upload :type="1" :multiple="true" title="点击上传" :option="{}"  :canDownload="false" :fileData="fileList"
+                @uploadComplete="uploadComplete"
+                />
+                <!--<a-icon type="paper-clip" :style="{ fontSize: '16px', color: '#31a8fa' }"/>-->
+            </a-form-item>
+            <a-form-item label="审批人" v-if="hasNext === 1">
+                <a-icon type="paper-clip" :style="{ fontSize: '16px', color: '#31a8fa' }"/>
+            </a-form-item>
+            <a-form-item label="抄送人" v-if="copyPersonType === 1">
+                <a-icon type="paper-clip" :style="{ fontSize: '16px', color: '#31a8fa' }"/>
+            </a-form-item>
+            <a-form-item style="display: flex;justify-content: center">
+                <a-button type="primary" @click="submit">
+                    提交
+                </a-button>
+                <a-button type="default" style="margin-left: 0.5rem" @click="cancel">
+                    取消
+                </a-button>
+            </a-form-item>
+        </a-form>
+        <select-people :show="showPeoplePanel" :dataRange="['3']" modalTitle="请选择人员" ref="selectPeoplePanel"
+                       @cancel="closePanel" @selectComplete="selectComplete"/>
+    </div>
+</template>
+<script>
+    import {Select, Spin, Icon, Empty, Form, Input, DatePicker, Button} from 'ant-design-vue';
+    import InterConfig from '../interConfig';
+    import SelectPeople from '../../../../../../../../components/common/selectPeople/SelectPeople';
+    import Upload from '../../../../../../../../components/common/uploader/Upload.vue';
+    import moment from 'moment';
+    export default{
+        data(){
+            return {
+                applyPersonId: this.BaseConfig.userInfo.person_id,
+                applyPersonName: this.BaseConfig.person_info_my.person_name,
+                roomId: "",
+                theme: "",//会议主题
+                participantPersonIds: "",//与会人员ID
+                participantPersonList: [],//与会人员
+                personNames:"",//参会人员名称
+                startTime: "",//开始时间
+                endTime: "",//结束时间
+                meetingContent: "",//会议内容
+                fileList: [],//附件
+                ruleId: "",
+                hasRule: "",
+                hasNext: 0,//是否有下一步
+                checkPersonList: [],//审批人
+                nextLevelId: "",//下一节点ID
+                openCopyFlag: "",//是否开启抄送
+                copyPersonType: "",//"copy_person_type": "选择抄送人的方式（0-自选，1-申请部门领导，2-指定），【int(11)】",
+                copyPersonList: [],//
+                paramCopyList: [],//
+                showPeoplePanel: false,//是否展开参会人面板
+                labelCol: {
+                    xs: {span: 24},
+                    sm: {span: 5},
+                },
+                wrapperCol: {
+                    xs: {span: 24},
+                    sm: {span: 15},
+                },
+            }
+        },
+        props: ['dataList', 'currentRoom'],
+        mounted(){
+            this.roomId = this.currentRoom.room_id;
+            this.getPersonRule();
+        },
+        methods: {
+            //切换会议室
+            onChange: function (value) {
+                if (this.roomId !== value) {
+                    this.roomId = value;
+                }
+            },
+            //设置参会人员
+            showPerson: function () {
+                this.showPeoplePanel = true;
+            },
+            //人员选择
+            selectComplete: function (ary) {
+                let ids = "";
+                let names = "";
+                if (ary.length > 0 && ary[0].length > 0) {
+                    for (let i = 0, len = ary[0].length; i < len; i++) {
+                        if(ary[0][i]){
+                            ids = ids + ary[0][i].person_id + ",";
+                            names = names + ary[0][i].person_name + ",";
+                        }
+                    }
+                }
+                if (ids !== "") {
+                    ids = ids.substring(0, ids.length - 1);
+                    names = names.substring(0, names.length - 1);
+                }
+                //构造与会人员信息
+                this.participantPersonIds = ids;
+                this.participantPersonList = ary;
+                this.personNames = names;
+                this.showPeoplePanel = false;
+            },
+            //关闭人员选择面板
+            closePanel: function () {
+                this.showPeoplePanel = false;
+            },
+            /*
+             * 取消
+             * */
+            cancel: function () {
+                this.$emit("cancel");
+            },
+            //开始时间
+            beginTimeChange: function (time) {
+                let startTime = moment(time).format("YYYY-MM-DD HH:mm");
+                this.startTime = startTime;
+            },
+            //结束时间
+            endTimeChange: function (time) {
+                let endTime = moment(time).format("YYYY-MM-DD HH:mm");
+                this.endTime = endTime;
+            },
+            //附件上传完毕
+            uploadComplete:function (file) {
+                this.fileList = file;
+            },
+            //表单提交
+            submit: function () {
+                console.log("fileList:",this.fileList)
+            },
+            //获取流程规则
+            getPersonRule: function () {
+                let param = {
+                    bureau_id: this.BaseConfig.person_info_my.bureau_id,
+                    person_id: this.BaseConfig.userInfo.person_id_cookie,
+                    rule_type: 10
+                }
+                this.InterfaceConfig.callInterface([{
+                    url: InterConfig.getPersonRule.url,
+                    params: param,
+                    method: InterConfig.getPersonRule.method,
+                    isTestLogin: InterConfig.getPersonRule.isTestLogin,
+                }], (result) => {
+                    console.log(result)
+                    let resData = result[0].data;
+                    if (resData.code === 2000) {
+                        let res = resData.data;
+                        this.hasRule = res.has_rule;//是否设置流程
+                        this.ruleId = res.rule.rule_id;
+                        if (parseInt(this.hasRule) === 1) {
+                            this.hasNext = res.has_next;//是否有下一步骤
+                            if (parseInt(this.hasNext) === 1) {
+                                this.checkPersonList = res.next_level.check_person_list;
+                                this.nextLevelId = res.next_level.level_id;
+                                //是否开启抄送
+                                this.openCopyFlag = res.current_level.open_copy_flag;
+                                if (parseInt(this.openCopyFlag) === 1) {
+                                    this.copyPersonType = res.current_level.copy_person_type;
+                                    this.copyPersonList = res.current_level.copy_person_list;
+                                    if (parseInt(this.copyPersonType) === 1) {
+                                        this.paramCopyList = res.current_level.copy_person_list;
+                                    }
+                                }
+                            }
+                        }
+                    }
+                })
+            }
+        },
+        components: {
+            ASelect: Select,
+            ASelectOption: Select.Option,
+            AForm: Form,
+            AFormItem: Form.Item,
+            AInput: Input,
+            AInputTextarea: Input.TextArea,
+            AIcon: Icon,
+            ADatePicker: DatePicker,
+            AButton: Button,
+            SelectPeople,
+            Upload
+        }
+    }
+</script>
+<style scoped lang="scss">
+    .meeting-room-apply-page-div {
+        width: 100%;
+        min-height: 20rem;
+        padding: 0.5rem;
+        display: flex;
+        flex-direction: column;
+        /deep/ .ant-form-item-control {
+            position: relative;
+            .ant-form-item-children {
+                display: block;
+                width: 100%;
+                position: relative;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                .upload-container-style {
+                    .file-style {
+                        .file-name-style {
+                            height: 1.2rem !important;
+                            line-height: 1.2rem !important;
+                        }
+                    }
+                }
+            }
+            /deep/ .ant-select-dropdown {
+                position: absolute;
+                top: 0;
+                left: 0;
+            }
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/views/superFusionPlatform/mainPlatform/moduleAndLayout/moduleCom/oa/meetingRoom/apply/meetingRoomApply.vue b/src/views/superFusionPlatform/mainPlatform/moduleAndLayout/moduleCom/oa/meetingRoom/apply/meetingRoomApply.vue
new file mode 100644
index 0000000..0ae1e3a
--- /dev/null
+++ b/src/views/superFusionPlatform/mainPlatform/moduleAndLayout/moduleCom/oa/meetingRoom/apply/meetingRoomApply.vue
@@ -0,0 +1,174 @@
+<template>
+    <div class="meeting-room-apply-div">
+        <div v-if="pageType === 0">
+            <DateChange @changeDate="changeDate" type="day" :callBackNow="true"></DateChange>
+            <div class="data-list-div">
+                <vue-scroll :ops="listScroll" style="height:25rem">
+                    <div class="data-row-div" v-for="item,index in dataList" :key="item.room_id">
+                        <div class="room-img-div"><img :src="item.src" style="width: 100%;height: 100%"/></div>
+                        <div class="room-info-div">
+                            <div class="top-info-row-div">
+                                <span class="room-type-div">{{item.room_type_str}}</span>
+                                <span class="default-span-div" :title="item.room_location">{{item.room_location}}</span>
+                            </div>
+                            <div class="info-row-div">
+                                <span class="room-other-info-div">{{item.person_number + '人'}}</span>
+                                <span class="room-other-info-div">{{item.network_situation === 1?'wifi覆盖':(item.network_situation === 2?'有线网络':(item.network_situation === 3?'无网络':''))}}</span>
+                                <span :class="'room-other-info-div ' + (item.media_title == ''?' no-data-tips':'')">{{item.media_title == ''?'无多媒体':item.media_title}}</span>
+                            </div>
+                            <div class="info-row-div">
+                                <TimeBox :currentDate="currentDate" :itemData="item"  :dataIndex="index" @boxClick="toApply"></TimeBox>
+                            </div>
+                        </div>
+                    </div>
+                </vue-scroll>
+            </div>
+        </div>
+        <div v-if="pageType === 1">
+            <Apply :dataList="dataList" :currentRoom="currentRoom" @cancel="cancel"/>
+        </div>
+    </div>
+</template>
+<script>
+    import DateChange from '../../common/dateChange';
+    import InterConfig from '../interConfig';
+    import StaticParams from '../../../../../../../../global-llibs/staticParams';
+    import TimeBox from '../timeBox.vue';
+    import Apply from './apply.vue';
+    export default{
+        data(){
+            return {
+                pageType:0,//0 列表 1 申请
+                listScroll: this.StaticParams.scrollOption,
+                showLoading: true,
+                currentDate: "",
+                dataList: [],
+                currentRoom:{},
+            }
+        },
+        methods: {
+            changeDate: function (value) {
+                this.currentDate = value;
+                this.getAppointment();
+            },
+            getAppointment: function () {
+                let param = {
+                    org_id: this.BaseConfig.person_info_my.bureau_id,
+                    search_date: this.currentDate,
+                }
+                this.showLoading = true;
+                this.InterfaceConfig.callInterface([{
+                    url: InterConfig.getAppointment.url,
+                    params: param,
+                    method: InterConfig.getAppointment.method,
+                    isTestLogin: InterConfig.getAppointment.isTestLogin,
+                }], (result) => {
+                    this.showLoading = false;
+                    let resData = result[0].data;
+                    if (resData.code === 2000) {
+                        let dataList = resData.data;
+                        if (dataList && dataList.length > 0) {
+                            for (let i = 0, len = dataList.length; i < len; i++) {
+                                let src = "";
+                                let attachment_json = dataList[i].attachment_json;
+                                if(attachment_json && attachment_json.length > 0){
+                                    let attachmentArray = JSON.parse(attachment_json);
+                                    if(attachmentArray.length > 0){
+                                        src = StaticParams.getThumbUrl(JSON.parse(attachment_json)[0].file_id +"."+JSON.parse(attachment_json)[0].resource_format,100,100,100);
+                                        src = src.substring(0,src.lastIndexOf("@"))
+                                    }
+                                }
+                                dataList[i]["src"] = src;
+                            }
+                        }
+                       this.dataList = dataList;
+                    }
+                })
+            },
+            //跳转申请页面
+            toApply:function (room) {
+                this.currentRoom = room;
+                this.pageType = 1;
+            },
+            //跳转列表页面
+            cancel:function () {
+                this.pageType = 0;
+            }
+        },
+        components: {
+            DateChange,
+            TimeBox,
+            Apply
+        }
+    }
+</script>
+<style scoped lang="scss">
+    .meeting-room-apply-div {
+        width: 100%;
+        min-height: 20rem;
+        padding: 0.5rem;
+        display: flex;
+        flex-direction: column;
+        .data-list-div {
+            width: 100%;
+            min-height: 20rem;
+            .data-row-div {
+                width: 100%;
+                min-height: 5rem;
+                border-bottom: 1px solid #f2f2f2;
+                padding: 0.5rem 0 0.5rem 0;
+                display: flex;
+                font-size: 12px;
+                .room-img-div {
+                    width: 5rem;
+                    height: auto;
+                }
+                .room-info-div {
+                    width: calc(100% - 5rem);
+                    height: 100%;
+                    display: flex;
+                    flex-direction: column;
+                    padding:0 0.5rem ;
+                    .top-info-row-div{
+                        width: 100%;
+                        display: flex;
+                        margin-bottom: 0.2rem;
+                        .room-type-div{
+                            border: 1px solid #31a8fa;
+                            color: #31a8fa;
+                            padding: 0 0.2rem;
+                            border-radius: 5px;
+                        }
+                        .default-span-div{
+                            width: calc(100% - 10rem);
+                            overflow: hidden;
+                            text-overflow: ellipsis;
+                            white-space: nowrap;
+                            margin-left: 0.5rem;
+                        }
+                    }
+                    .info-row-div{
+                        width: 100%;
+                        height: 100%;
+                        display: flex;
+                        flex-wrap: wrap;
+                        justify-content: flex-start;
+                        margin-bottom: 0.2rem;
+                        .room-other-info-div{
+                            padding: 0 0.5rem;
+                            background-color: #f59a23;
+                            color: white;
+                            border-radius: 10px;
+                            margin-right: 0.5rem;
+                            margin-bottom: 0.2rem;
+                        }
+                        .no-data-tips{
+                            background-color: #f2f2f2;
+                            color: black;
+                        }
+                    }
+                }
+            }
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/views/superFusionPlatform/mainPlatform/moduleAndLayout/moduleCom/oa/meetingRoom/interConfig.js b/src/views/superFusionPlatform/mainPlatform/moduleAndLayout/moduleCom/oa/meetingRoom/interConfig.js
new file mode 100644
index 0000000..62052e5
--- /dev/null
+++ b/src/views/superFusionPlatform/mainPlatform/moduleAndLayout/moduleCom/oa/meetingRoom/interConfig.js
@@ -0,0 +1,20 @@
+export default {
+    /*
+     * 获取会议室预约情况
+     * */
+    "getAppointment":{
+        url:'/intellioa/meetingRoom/apply/getAppointment',
+        method:'get',
+        isTestLogin:true
+    },
+
+    /*
+     * 流程规则
+     * */
+    "getPersonRule":{
+        url:'/intellioa/soflow/rule/getPersonRule',
+        method:'get',
+        isTestLogin:true
+    },
+
+}
diff --git a/src/views/superFusionPlatform/mainPlatform/moduleAndLayout/moduleCom/oa/meetingRoom/timeBox.vue b/src/views/superFusionPlatform/mainPlatform/moduleAndLayout/moduleCom/oa/meetingRoom/timeBox.vue
new file mode 100644
index 0000000..0bb992d
--- /dev/null
+++ b/src/views/superFusionPlatform/mainPlatform/moduleAndLayout/moduleCom/oa/meetingRoom/timeBox.vue
@@ -0,0 +1,633 @@
+<template>
+    <div class="apply-time-box-div">
+        <div v-for="box,index in times0_24" :key="box.begin"
+             :title="box.inTime && box.occupyNum === 3?box.title:''"
+             :class="'time-box-div ' +
+                    (box.inTime?(box.occupyNum === 3?caseApplyFlag(box.apply_flag):(box.timeAry && box.timeAry.length > 0?' can-not-click':'')):'')"
+             @click="boxClick(box)"
+        >
+            <div v-if="box.inTime && box.timeAry && box.timeAry.length > 0" class="time-box-list-div">
+                <div :class="'time-box ' + (getBoxClass(box,index,1))" :title="getBoxTitle(box,index,1)"></div>
+                <div :class="'time-box ' + (getBoxClass(box,index,2))" :title="getBoxTitle(box,index,2)"></div>
+                <div :class="'time-box ' + (getBoxClass(box,index,3))" :title="getBoxTitle(box,index,3)"></div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    import moment from 'moment';
+    import _ from 'lodash';
+    export default{
+        props: ['currentDate', 'itemData', 'dataIndex'],
+        data(){
+            return {
+                times0_24: [
+                    {begin: "00:00", end: "00:30", inTime: false, showTime: true, time: 0},
+                    {begin: "00:30", end: "01:00", inTime: false},
+                    {begin: "01:00", end: "01:30", inTime: false, showTime: true, time: 1},
+                    {begin: "01:30", end: "02:00", inTime: false},
+                    {begin: "02:00", end: "02:30", inTime: false, showTime: true, time: 2},
+                    {begin: "02:30", end: "03:00", inTime: false},
+                    {begin: "03:00", end: "03:30", inTime: false, showTime: true, time: 3},
+                    {begin: "03:30", end: "04:00", inTime: false},
+                    {begin: "04:00", end: "04:30", inTime: false, showTime: true, time: 4},
+                    {begin: "04:30", end: "05:00", inTime: false},
+                    {begin: "05:00", end: "05:30", inTime: false, showTime: true, time: 5},
+                    {begin: "05:30", end: "06:00", inTime: false},
+                    {begin: "06:00", end: "06:30", inTime: false, showTime: true, time: 6},
+                    {begin: "06:30", end: "07:00", inTime: false},
+                    {begin: "07:00", end: "07:30", inTime: false, showTime: true, time: 7},
+                    {begin: "07:30", end: "08:00", inTime: false},
+                    {begin: "08:00", end: "08:30", inTime: false, showTime: true, time: 8},
+                    {begin: "08:30", end: "09:00", inTime: false},
+                    {begin: "09:00", end: "09:30", inTime: false, showTime: true, time: 9},
+                    {begin: "09:30", end: "10:00", inTime: false},
+                    {begin: "10:00", end: "10:30", inTime: false, showTime: true, time: 10},
+                    {begin: "10:30", end: "11:00", inTime: false},
+                    {begin: "11:00", end: "11:30", inTime: false, showTime: true, time: 11},
+                    {begin: "11:30", end: "12:00", inTime: false},
+                    {begin: "12:00", end: "12:30", inTime: false, showTime: true, time: 12},
+                    {begin: "12:30", end: "13:00", inTime: false},
+                    {begin: "13:00", end: "13:30", inTime: false, showTime: true, time: 13},
+                    {begin: "13:30", end: "14:00", inTime: false},
+                    {begin: "14:00", end: "14:30", inTime: false, showTime: true, time: 14},
+                    {begin: "14:30", end: "15:00", inTime: false},
+                    {begin: "15:00", end: "15:30", inTime: false, showTime: true, time: 15},
+                    {begin: "15:30", end: "16:00", inTime: false},
+                    {begin: "16:00", end: "16:30", inTime: false, showTime: true, time: 16},
+                    {begin: "16:30", end: "17:00", inTime: false},
+                    {begin: "17:00", end: "17:30", inTime: false, showTime: true, time: 17},
+                    {begin: "17:30", end: "18:00", inTime: false},
+                    {begin: "18:00", end: "18:30", inTime: false, showTime: true, time: 18},
+                    {begin: "18:30", end: "19:00", inTime: false},
+                    {begin: "19:00", end: "19:30", inTime: false, showTime: true, time: 19},
+                    {begin: "19:30", end: "20:00", inTime: false},
+                    {begin: "20:00", end: "20:30", inTime: false, showTime: true, time: 20},
+                    {begin: "20:30", end: "21:00", inTime: false},
+                    {begin: "21:00", end: "21:30", inTime: false, showTime: true, time: 21},
+                    {begin: "21:30", end: "22:00", inTime: false},
+                    {begin: "22:00", end: "22:30", inTime: false, showTime: true, time: 22},
+                    {begin: "22:30", end: "23:00", inTime: false},
+                    {begin: "23:00", end: "23:30", inTime: false, showTime: true, time: 23},
+                    {begin: "23:30", end: "23:59", inTime: false},
+                ]
+            }
+        },
+        mounted(){
+            //let currentDate = this.currentDate;
+            let room = this.itemData;
+            //let dataIndex = this.dataIndex;
+            this.buildTimeArrInTime(room);
+        },
+        computed: {
+            rules() {
+                const {currentDate, itemData,dataIndex} = this;
+                return {
+                    currentDate,
+                    itemData,
+                    dataIndex
+                }
+            }
+        },
+        watch: {
+            rules(nval){
+                this.currentDate = nval.currentDate;
+                let room = nval.itemData;
+                this.buildTimeArrInTime(room);
+            }
+        },
+        methods: {
+            //构造时间盒子是否在预约时间段内
+            buildTimeArrInTime: function (room) {
+                let times = room.times ? room.times : [];
+                room.times0_24 = _.cloneDeep(this.times0_24);
+                if (times && times.length > 0) {
+                    for (let j = 0, timeLen = times.length; j < timeLen; j++) {
+                        let time = times[j];
+                        let boxes = this.getBoxesByTime(time);
+                        for (let m = 0, boxLen = boxes.length; m < boxLen; m++) {
+                            let applyFlag = this.getApplyFlag(time, boxes[m]);
+                            boxes[m].inTime = applyFlag.inTime;
+                            if (boxes[m].inTime) {
+                                boxes[m].apply_flag = applyFlag.apply_flag;
+                            }
+                        }
+                    }
+                }
+            },
+            /**
+             * 根据时间段定位时间盒子
+             * （要考虑跨天）
+             */
+            getBoxesByTime: function (times, room) {
+                let boxAry = [];
+                let begin_time = times.begin_time.split(" ")[1];
+                let end_time = times.end_time.split(" ")[1];
+                //开始时间时分
+                let begin_time_h = parseInt(begin_time.split(":")[0]);
+                let begin_time_m = parseInt(begin_time.split(":")[1]);
+                //结束时间时分
+                let end_time_h = parseInt(end_time.split(":")[0]);
+                let end_time_m = parseInt(end_time.split(":")[1]);
+
+                let box_start_index = begin_time_h * 2 + (begin_time_m >= 0 && begin_time_m < 30 ? 0 : 1);//开始盒子
+                let box_end_index = end_time_m === 0 ? end_time_h * 2 - 1 : (end_time_m > 0 && end_time_m <= 30 ? end_time_h * 2 : end_time_h * 2 + 1);//结束盒子
+                //跨天情况
+                let day_start_time = Date.parse(this.currentDate + " " + "00:00:00");
+                let day_end_time = Date.parse(this.currentDate + " " + "23:59:59");
+                if (day_start_time >= Date.parse(times.begin_time) && day_start_time < Date.parse(times.end_time)) {
+                    box_start_index = 0;
+                }
+                if (day_end_time >= Date.parse(times.begin_time) && day_start_time < Date.parse(times.end_time)) {
+                    box_end_index = 47;
+                }
+                for (let i = box_start_index; i <= box_end_index; i++) {
+                    boxAry.push(this.times0_24[i]);
+                }
+                return boxAry;
+            },
+            /**
+             * 构造时间盒子申请状态
+             * @param times 占用时间集合
+             * @param time_box 时间盒子
+             */
+            getApplyFlag: function (times, time_box) {
+                let apply_flag = "";
+                let inTime = false;
+                let box_begin_time = Date.parse(this.currentDate + " " + time_box.begin);//格子开始时间
+                let box_end_time = Date.parse(this.currentDate + " " + time_box.end);//格子结束时间
+                let compare_begin = Date.parse(times.begin_time);//占用开始时间 分钟取值范围：0 9 10 19 20 29 30 39 40 49 50 59
+                let compare_end = Date.parse(times.end_time);//占用结束时间 分钟取值范围：0 9 10 19 20 29 30 39 40 49 50 59
+                let title = moment(times.begin_time).format("YYYY-MM-DD HH:mm") + " - " + moment(times.end_time).format("YYYY-MM-DD HH:mm") + " 此时间段被占用，无法申请";
+
+                //1、盒子开始时间等于占用开始时间
+                if (box_begin_time === compare_begin) {
+                    if (box_end_time <= compare_end) {
+                        //全部占用
+                        inTime = true;
+                        apply_flag = times.apply_check_flag;
+                        time_box.occupyNum = 3;//占用100%
+                        time_box.title = title;
+                    } else {
+                        //部分占用
+                        inTime = true;
+                        //apply_flag = times.apply_check_flag;
+                        //time_box.title = moment(times.begin_time).format("HH:mm") + "-" +  moment(times.end_time).format("HH:mm") + " 此时间段被占用，无法申请";
+                        //time_box.left = 0;//偏移量是0
+                        let timeFlag = times.end_time.split(" ")[1].split(":")[1];//获取具体分钟 10、40、9、39  20、50、19、49 分别占用1、2个小格子
+                        if (parseInt(timeFlag) === 10 || parseInt(timeFlag) === 40 || parseInt(timeFlag) === 9 || parseInt(timeFlag) === 39) {
+                            //time_box.occupyNum = 1;//占用1个小格子
+                            if (time_box.timeAry) {
+                                time_box.timeAry.push({
+                                    occupyNum: 1,
+                                    left: 0,
+                                    apply_flag: times.apply_check_flag,
+                                    title: title
+                                })
+                            } else {
+                                let timeAry = [{
+                                    occupyNum: 1,
+                                    left: 0,
+                                    apply_flag: times.apply_check_flag,
+                                    title: title
+                                }]
+                                time_box.timeAry = timeAry;
+                            }
+                        }
+                        if (parseInt(timeFlag) === 20 || parseInt(timeFlag) === 50 || parseInt(timeFlag) === 19 || parseInt(timeFlag) === 49) {
+                            //time_box.occupyNum = 2;//占用2个小格子
+                            if (time_box.timeAry) {
+                                time_box.timeAry.push({
+                                    occupyNum: 2,
+                                    left: 0,
+                                    apply_flag: times.apply_check_flag,
+                                    title: title
+                                })
+                            } else {
+                                let timeAry = [{
+                                    occupyNum: 2,
+                                    left: 0,
+                                    apply_flag: times.apply_check_flag,
+                                    title: title
+                                }]
+                                time_box.timeAry = timeAry;
+                            }
+                        }
+                        if (parseInt(timeFlag) === 29 || parseInt(timeFlag) === 59) {
+                            //time_box.occupyNum = 3;//占用3个小格子
+                            inTime = true;
+                            apply_flag = times.apply_check_flag;
+                            time_box.occupyNum = 3;//占用100%
+                            time_box.title = title
+                        }
+                    }
+                }
+
+                //2、盒子开始时间小于占用开始时间 并且盒子结束时间必须大于占用开始时间 有效
+                if (box_begin_time < compare_begin) {
+                    if (box_end_time > compare_begin && box_end_time <= compare_end) {
+                        //部分占用
+                        inTime = true;
+                        //apply_flag = times.apply_check_flag;
+                        let timeFlag = times.begin_time.split(" ")[1].split(":")[1];//获取具体分钟 10、40 20、50 分别占用1、2个小格子
+                        if (parseInt(timeFlag) === 10 || parseInt(timeFlag) === 40 || parseInt(timeFlag) === 9 || parseInt(timeFlag) === 39) {
+                            /*time_box.occupyNum = 2;//占用2个小格子
+                             time_box.left = 1;//偏移量是1*/
+                            if (time_box.timeAry) {
+                                time_box.timeAry.push({
+                                    occupyNum: 2,
+                                    left: 1,
+                                    apply_flag: times.apply_check_flag,
+                                    title: title
+                                })
+                            } else {
+                                let timeAry = [{
+                                    occupyNum: 2,
+                                    left: 1,
+                                    apply_flag: times.apply_check_flag,
+                                    title: title
+                                }]
+                                time_box.timeAry = timeAry;
+                            }
+                        }
+                        if (parseInt(timeFlag) === 20 || parseInt(timeFlag) === 50 || parseInt(timeFlag) === 19 || parseInt(timeFlag) === 49) {
+                            /*time_box.occupyNum = 1;//占用1个小格子
+                             time_box.left = 2;//偏移量是2*/
+                            if (time_box.timeAry) {
+                                time_box.timeAry.push({
+                                    occupyNum: 1,
+                                    left: 2,
+                                    apply_flag: times.apply_check_flag,
+                                    title: title
+                                })
+                            } else {
+                                let timeAry = [{
+                                    occupyNum: 1,
+                                    left: 2,
+                                    apply_flag: times.apply_check_flag,
+                                    title: title
+                                }]
+                                time_box.timeAry = timeAry;
+                            }
+                        }
+                        //time_box.title = moment(times.begin_time).format("HH:mm") + "-" +  moment(times.end_time).format("HH:mm") + " 此时间段被占用，无法申请";
+                    }
+                    if (box_end_time > compare_begin && box_end_time > compare_end) {
+                        //部分占用
+                        inTime = true;
+                        //apply_flag = times.apply_check_flag;
+                        //time_box.occupyNum = 1;//占用1个小格子
+                        //time_box.left = 1;//偏移量是1
+                        //time_box.title = moment(times.begin_time).format("HH:mm") + "-" +  moment(times.end_time).format("HH:mm") + " 此时间段被占用，无法申请";
+                        //根据分钟跨度判断，超过10分钟 占用2个小格子 ，不超过10分钟 再判断开始时间
+                        if (Math.abs(compare_begin - compare_end) / 1000 / 60 > 10) {
+                            if (time_box.timeAry) {
+                                time_box.timeAry.push({
+                                    occupyNum: 2,
+                                    left: 1,
+                                    apply_flag: times.apply_check_flag,
+                                    title: title
+                                })
+                            } else {
+                                let timeAry = [{
+                                    occupyNum: 2,
+                                    left: 1,
+                                    apply_flag: times.apply_check_flag,
+                                    title: title
+                                }]
+                                time_box.timeAry = timeAry;
+                            }
+                        } else {
+                            let timeFlag = times.begin_time.split(" ")[1].split(":")[1];//获取具体分钟 10、40 20、50 分别占用1、2个小格子
+                            if (parseInt(timeFlag) === 10 || parseInt(timeFlag) === 40 || parseInt(timeFlag) === 9 || parseInt(timeFlag) === 39) {
+                                if (time_box.timeAry) {
+                                    time_box.timeAry.push({
+                                        occupyNum: 1,
+                                        left: 1,
+                                        apply_flag: times.apply_check_flag,
+                                        title: title
+                                    })
+                                } else {
+                                    let timeAry = [{
+                                        occupyNum: 1,
+                                        left: 1,
+                                        apply_flag: times.apply_check_flag,
+                                        title: title
+                                    }]
+                                    time_box.timeAry = timeAry;
+                                }
+                            }
+                            if (parseInt(timeFlag) === 20 || parseInt(timeFlag) === 50 || parseInt(timeFlag) === 19 || parseInt(timeFlag) === 49) {
+                                if (time_box.timeAry) {
+                                    time_box.timeAry.push({
+                                        occupyNum: 1,
+                                        left: 2,
+                                        apply_flag: times.apply_check_flag,
+                                        title: title
+                                    })
+                                } else {
+                                    let timeAry = [{
+                                        occupyNum: 1,
+                                        left: 2,
+                                        apply_flag: times.apply_check_flag,
+                                        title: title
+                                    }]
+                                    time_box.timeAry = timeAry;
+                                }
+                            }
+                        }
+                    }
+                }
+
+                //3、盒子开始时间大于占用开始时间 并且盒子开始时间必须小于占用结束时间 有效
+                if (box_begin_time > compare_begin) {
+                    if (box_begin_time < compare_end && box_end_time <= compare_end) {
+                        //全部占用
+                        inTime = true;
+                        apply_flag = times.apply_check_flag;
+                        time_box.occupyNum = 3;//占用100%
+                        time_box.title = title
+                    }
+                    if (box_begin_time < compare_end && box_end_time > compare_end) {
+
+                        //部分占用
+                        inTime = true;
+                        //apply_flag = times.apply_check_flag;
+                        //time_box.title = moment(times.begin_time).format("HH:mm") + "-" +  moment(times.end_time).format("HH:mm") + " 此时间段被占用，无法申请";
+                        //time_box.left = 0;//偏移量是0
+                        let timeFlag = times.end_time.split(" ")[1].split(":")[1];//获取具体分钟 10、40 20、50 分别占用1、2个小格子
+                        if (parseInt(timeFlag) === 10 || parseInt(timeFlag) === 40 || parseInt(timeFlag) === 9 || parseInt(timeFlag) === 39) {
+                            //time_box.occupyNum = 1;//占用1个小格子
+                            if (time_box.timeAry) {
+                                time_box.timeAry.push({
+                                    occupyNum: 1,
+                                    left: 0,
+                                    apply_flag: times.apply_check_flag,
+                                    title: title
+                                })
+                            } else {
+                                let timeAry = [{
+                                    occupyNum: 1,
+                                    left: 0,
+                                    apply_flag: times.apply_check_flag,
+                                    title: title
+                                }]
+                                time_box.timeAry = timeAry;
+                            }
+                        }
+                        if (parseInt(timeFlag) === 20 || parseInt(timeFlag) === 50 || parseInt(timeFlag) === 19 || parseInt(timeFlag) === 49) {
+                            //time_box.occupyNum = 2;//占用2个小格子
+                            if (time_box.timeAry) {
+                                time_box.timeAry.push({
+                                    occupyNum: 2,
+                                    left: 0,
+                                    apply_flag: times.apply_check_flag,
+                                    title: title
+                                })
+                            } else {
+                                let timeAry = [{
+                                    occupyNum: 2,
+                                    left: 0,
+                                    apply_flag: times.apply_check_flag,
+                                    title: title
+                                }]
+                                time_box.timeAry = timeAry;
+                            }
+                        }
+                        if (parseInt(timeFlag) === 29 || parseInt(timeFlag) === 59) {
+                            //time_box.occupyNum = 3;//占用3个小格子
+                            inTime = true;
+                            apply_flag = times.apply_check_flag;
+                            time_box.occupyNum = 3;//占用100%
+                            time_box.title = title
+                        }
+                    }
+                }
+                return {
+                    inTime: inTime,
+                    apply_flag: apply_flag
+                }
+            },
+            //0：待审批 1：审批通过 -1：审批不通过
+            caseApplyFlag: function (flag) {
+                let classFlag = "";
+                if (flag !== undefined) {
+                    switch (parseInt(flag)) {
+                        case 0:
+                            classFlag = "wait-for-check";
+                            break;
+                        case 1:
+                            classFlag = "check-pass";
+                            break;
+                        case -1:
+                            classFlag = "check-not-pass";
+                            break;
+                        default:
+                            break;
+                    }
+                }
+                return classFlag;
+            },
+            //小格样式
+            getBoxClass: function (box, index, type) {
+                //根据 occupyNum = 1,2 left = 0,1,2 计算位置
+                let timeAry = box.timeAry;
+                //第一小格的取值条件
+                let showFirst = timeAry[0] && timeAry[0].left === 0 && (timeAry[0].occupyNum  === 1 || timeAry[0].occupyNum  === 2)?true:false;
+                let showFirstDom = timeAry[0];
+                //第二小格的取值条件
+                let showSecond = false;
+                let showSecondDom = "";
+                if(timeAry[0]){
+                    if(timeAry[0].left === 0){
+                        if(timeAry[0].occupyNum  === 2){
+                            showSecond = true;
+                            showSecondDom = timeAry[0];
+                        }
+                    }
+                    if(timeAry[0].left === 1){
+                        if(timeAry[0].occupyNum  === 1 || timeAry[0].occupyNum  === 2){
+                            showSecond = true;
+                            showSecondDom = timeAry[0];
+                        }
+                    }
+                }
+                if(timeAry[1]){
+                    if(timeAry[1].left === 1){
+                        if(timeAry[1].occupyNum  === 1 || timeAry[1].occupyNum  === 2){
+                            showSecond = true;
+                            showSecondDom = timeAry[1];
+                        }
+                    }
+                }
+                //第三小格的取值条件
+                let showThird = false;
+                let showThirdDom = "";
+                if(timeAry[0]){
+                    if(timeAry[0].left === 1){
+                        if(timeAry[0].occupyNum  === 2){
+                            showThird = true;
+                            showThirdDom = timeAry[0];
+                        }
+                    }
+                    if(timeAry[0].left === 2){
+                        if(timeAry[0].occupyNum  === 1){
+                            showThird = true;
+                            showThirdDom = timeAry[0];
+                        }
+                    }
+                }
+                if(timeAry[1]){
+                    if(timeAry[1].left === 1){
+                        if(timeAry[1].occupyNum  === 2){
+                            showThird = true;
+                            showThirdDom = timeAry[1];
+                        }
+                    }
+                    if(timeAry[1].left === 2){
+                        if(timeAry[1].occupyNum  === 1){
+                            showThird = true;
+                            showThirdDom = timeAry[1];
+                        }
+                    }
+                }
+                let className = "";
+                if(type == 1){
+                    className = showFirst?this.caseApplyFlag(showFirstDom.apply_flag):"";
+                }else if(type == 2){
+                    className = showSecond?this.caseApplyFlag(showSecondDom.apply_flag):"";
+                }else {
+                    className = showThird?this.caseApplyFlag(showThirdDom.apply_flag):"";
+                }
+                return className;
+            },
+            //小格title
+            getBoxTitle: function (box, index, type) {
+                //根据 occupyNum = 1,2 left = 0,1,2 计算位置
+                let timeAry = box.timeAry;
+                //第一小格的取值条件
+                let showFirst = timeAry[0] && timeAry[0].left === 0 && (timeAry[0].occupyNum  === 1 || timeAry[0].occupyNum  === 2)?true:false;
+                let showFirstDom = timeAry[0];
+                //第二小格的取值条件
+                let showSecond = false;
+                let showSecondDom = "";
+                if(timeAry[0]){
+                    if(timeAry[0].left === 0){
+                        if(timeAry[0].occupyNum  === 2){
+                            showSecond = true;
+                            showSecondDom = timeAry[0];
+                        }
+                    }
+                    if(timeAry[0].left === 1){
+                        if(timeAry[0].occupyNum  === 1 || timeAry[0].occupyNum  === 2){
+                            showSecond = true;
+                            showSecondDom = timeAry[0];
+                        }
+                    }
+                }
+                if(timeAry[1]){
+                    if(timeAry[1].left === 1){
+                        if(timeAry[1].occupyNum  === 1 || timeAry[1].occupyNum  === 2){
+                            showSecond = true;
+                            showSecondDom = timeAry[1];
+                        }
+                    }
+                }
+                //第三小格的取值条件
+                let showThird = false;
+                let showThirdDom = "";
+                if(timeAry[0]){
+                    if(timeAry[0].left === 1){
+                        if(timeAry[0].occupyNum  === 2){
+                            showThird = true;
+                            showThirdDom = timeAry[0];
+                        }
+                    }
+                    if(timeAry[0].left === 2){
+                        if(timeAry[0].occupyNum  === 1){
+                            showThird = true;
+                            showThirdDom = timeAry[0];
+                        }
+                    }
+                }
+                if(timeAry[1]){
+                    if(timeAry[1].left === 1){
+                        if(timeAry[1].occupyNum  === 2){
+                            showThird = true;
+                            showThirdDom = timeAry[1];
+                        }
+                    }
+                    if(timeAry[1].left === 2){
+                        if(timeAry[1].occupyNum  === 1){
+                            showThird = true;
+                            showThirdDom = timeAry[1];
+                        }
+                    }
+                }
+                let title = "";
+                if(type == 1){
+                    title = showFirst?showFirstDom.title:"";
+                }else if(type == 2){
+                    title = showSecond?showSecondDom.title:"";
+                }else {
+                    title = showThird?showThirdDom.title:"";
+                }
+                return title;
+            },
+            //格子点击事件
+            boxClick:function (box) {
+                if(!box.inTime){
+                    this.$emit("boxClick",this.itemData);
+                }
+            }
+        }
+    }
+</script>
+<style scoped lang="scss">
+    .apply-time-box-div {
+        display: flex;
+        height: 2rem;
+        width: 100%;
+        .time-box-div {
+            width: 5%;
+            background-color: #e3f2fd;
+            display: flex;
+            .time-box-list-div {
+                width: 100%;
+                height: 2rem;
+                display: flex;
+                .time-box {
+                    width: 33%;
+                }
+                .wait-for-check {
+                    background-color: #31a8fa;
+                    cursor: text;
+                    .wait-for-check {
+                        background-color: #31a8fa;
+                        cursor: text;
+                    }
+                }
+                .check-pass {
+                    background-color: #a5c94b;
+                    cursor: text;
+                    background-color: #a5c94b;
+                    cursor: text;
+                }
+            }
+        }
+        .wait-for-check {
+            background-color: #31a8fa;
+            cursor: text;
+            .wait-for-check {
+                background-color: #31a8fa;
+                cursor: text;
+            }
+        }
+        .check-pass {
+            background-color: #a5c94b;
+            cursor: text;
+            background-color: #a5c94b;
+            cursor: text;
+        }
+    }
+</style>
\ No newline at end of file