rt-sim-training-client/src/jmapNew/theme/chengdu_01/menus/menuRequest.vue

<template>
  <div class="chengdou-01__system request_box">
    <div class="title-box">
      <div class="title-name">操作请求堆栈</div>
      <div class="icon" :class="{'is-active': unfold}" @click="unflodDiv">
        <i class="el-icon-arrow-down" />
      </div>
    </div>
    <div class="content-box" :class="{'is-active': unfold}">
      <el-table ref="table" :data="tempData" border :cell-style="tableStyle" style="width: 100%;background: #000;border: none;outline: none;" size="mini" height="120" highlight-current-row :show-header="false" @row-click="clickEvent">
        <el-table-column prop="station" style="margin-left:10px" />
        <el-table-column prop="operation" style="margin-left:10px" />
      </el-table>
      <el-row justify="center" class="button-group">
        <el-col :span="2" :offset="4" class="button-top">
          <el-button :id="domIdConfirm" size="mini" style="float: left;" :loading="loading" :disabled="commitDisabled" @click="commit">重做</el-button>
        </el-col>
        <el-col :span="2" :offset="12" class="button-top">
          <el-button :id="domIdCancel" size="mini" style="float: right;" @click="cancel">撤销</el-button>
        </el-col>
      </el-row>
      <el-row justify="center" class="button-group">
        <el-col :span="8" class="button-bottom-left">
          <el-button :id="domIdConfirm" size="mini" style="float: left;" :loading="loading" :disabled="commitDisabled" @click="commit">发送请求</el-button>
        </el-col>
        <el-col :span="8" :offset="8" class="button-bottom-right">
          <el-button :id="domIdCancel" size="mini" style="float: right;" @click="cancel">取消请求</el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import { OperationEvent } from '@/scripts/cmdPlugin/OperationHandler';

export default {
    name: 'CancelMenu',
    components: {
    },
    data() {
        return {
            unfold: false,
            tempData: [],
            tableStyle: {
                'border-bottom': 'none',
                'border-right': 'none'
            },
            row: {}
        };
    },
    computed: {
        ...mapGetters('menuOperation', [
            'requestList'
        ]),
        domIdConfirm() {
            return OperationEvent.Signal.arrangementRoute.menu.domId;
        },
        domIdCancel() {
            return OperationEvent.Command.cancel.menu.domId;
        }
    },
    watch: {
        '$store.state.menuOperation.requestList': function (list) {
            this.tempData = [];
            if (list && list.length) {
                list.forEach(item => {
                    if (item.device && item.device.code) {
                        const station = this.$store.getters['map/getDeviceByCode'](item.device.stationCode);
                        const param = {
                            station: `CP  ${station.name}`,
                            operation: `${item.device.name}   ${item.operation.name}`,
                            operateCode: item.operation.code,
                            deviceCode: item.device.code
                        };
                        this.tempData.push(param);
                    }
                });
            }
        }
    },
    mounted() {
    },
    methods: {
        unflodDiv() {
            this.unfold = !this.unfold;
        },
        clickEvent(row, event, column) {
            this.row = row;
        },
        cancel() {
            if (this.row && this.row.deviceCode) {
                this.$store.dispatch('menuOperation/spliceRequestList', this.row);
            }
        },
        commit(){
            let requestList=this.$store.state.menuOperation.requestList;
            if(requestList && requestList.length>0){
                this.commitEachCommand(requestList,0);
            }
        },
        commitEachCommand(requestList,index){
            let eachCmd=requestList[index];
            const operate = {
                over: true,
                operation: eachCmd.operation.code,
                cmdType: eachCmd.operation.cmdType
            };
            this.$store.dispatch('training/nextNew', operate).then(({ valid }) => {
                this.loading = false;
                if (valid) {
                    this.$store.dispatch('menuOperation/spliceRequestList',{deviceCode:eachCmd.device.code,operateCode:eachCmd.operation.code});
                    let nextIndex=index++;
                    if(nextIndex<requestList.length){
                        this.commitEachCommand(requestList,nextIndex);
                    }
                //     this.doClose();
                }
            }).catch(() => {
                this.loading = false;
                // this.doClose();
                // this.$refs.noticeInfo.doShow(operate);
            });
        }
    }
};
</script>
<style lang="scss" scope>
    .request_box{
        width: 600px;
        height: auto;
        position: absolute;
        bottom: 10px;
        left: 50%;
        background: #fff;
        z-index: 10;
        transform: translateX(-300px);
        background: #518E86;

        .title-box{
            width: 100%;
            height: 25px;
            color: #333;
            background: #94A1A3;
            position: relative;

            .title-name{
                height: 25px;
                line-height: 25px;
                margin: 0 auto;
                display: table;
            }
            .icon{
                position: absolute;
                right: 20px;
                top: 0;
                font-size: 14px;
                color: #333;
                cursor: pointer;
                height: 25px;
                line-height: 25px;
                padding: 0px 6px;
                transition: transform .3s,-webkit-transform .3s;
                font-weight: 300;
                &.is-active{
                    transform: rotate(180deg);
                }
            }
        }

        .content-box{
            height: 210px;
            overflow: hidden;
            padding: 8px;
            box-sizing: border-box;
            transition: height .3s;
            &.is-active{
                height: 0;
                padding: 0;
            }

            .button-group{
                margin-top: 8px;
                .button-top{
                    .el-button{
                        width: 40px;
                        padding: 0;
                        border: 2px outset #B7D4D5;
                        border-radius: 0 !important;
                        color: #000;
                        background: #BBBBBB;
                        span {
                            height: 20px;
                            line-height: 20px;
                        }
                    }
                }
                .button-bottom-left{
                    .el-button{
                        width: 60px;
                        padding: 0;
                        border: 2px outset #B7D4D5;
                        border-radius: 0 !important;
                        color: #000;
                        background: #00FF7F;
                        span {
                            height: 20px;
                            line-height: 20px;
                        }
                    }
                }
                .button-bottom-right{
                    .el-button{
                        width: 60px;
                        padding: 0;
                        border: 2px outset #B7D4D5;
                        border-radius: 0 !important;
                        color: #000;
                        background: #5F9EA0;
                        span {
                            height: 20px;
                            line-height: 20px;
                        }
                    }
                }
            }
        }
    }
</style>