dev/dcp-web-gate/src_old/views/NationalregionalCommissions/Approvals.vue

<!-- 审批进度 -->
<template>
    <div class="autoBox box1" style="position: relative; background: #f5f5f5">
        <div class="center" style="margin-top: 20px;height:885px;">
            <div class="left">
                <div class="centerLeft1">
                    <div class="top">
                        <div class="top1"></div>
                        <div class="top2"></div>
                        <div class="allApplication">
              <span>{{
                $t("common.submitapplications")
              }}</span>
                        </div>
                        <div @click="back" class="more">
                            <span>{{ "<" }}{{ $t("common.return") }}</span>
                        </div>
                    </div>
                    <div class="content">
                        <div class="content2">
                            <div class="success_1">
                                <div style="display:flex">
                                    <div class="leftfont">{{ $i18n.locale == 'en' ? 'title ' : '标题' }}：</div><div class="rightfont">{{applytitle}}</div>
                                </div>
                                <div style="display:flex">
                                    <div class="leftfont">{{ $i18n.locale == 'en' ? 'Applynum ' : '申请编号' }}：</div><div class="rightfont">{{applynumber}}</div>
                                </div>
                                <div style="display:flex">
                                    <div class="leftfont">{{ $i18n.locale == 'en' ? 'ApplyName ' : '申请人' }}：</div><div class="rightfont">{{applyer}}</div>
                                </div>
                                <div style="display:flex">
                                   <div class="leftfont"> {{ $i18n.locale == 'en' ? 'Applytime ' : '提交时间' }}：</div><div class="rightfont">{{applytime}}</div>
                                </div>
                            </div>
                            <div class="success_2" style="margin-top:59px;">
                                 <div>
                                        <img  src="@/assets/img/nationaIntorduction/duigou_green.png" alt="" style=" ">
                                 </div>
                                    <div style="color: #67C23A;">{{ $i18n.locale == 'en' ? 'Create Apply ' : '提交申请' }}</div>
                                <div style="margin-top:-4px">
                                 <img  src="@/assets/img/nationaIntorduction/zhixian_green.png" alt="" style="margin-top:-4px">
                                </div>
                                <div>
                                    <img v-if="green_quyu"  src="@/assets/img/nationaIntorduction/duigou_green.png" alt="" style="">
                                    <img v-else src="@/assets/img/nationaIntorduction/duigou_grey.png" alt="" style="">
                                </div>
                                <div v-if="green_quyu" style="color:#67C23A;">{{ $i18n.locale == 'en' ? 'Regional Secretariat Review' : '区域秘书处审核' }}</div>
                                <div v-else style="color:rgba(7, 7, 7, 0.25);">{{ $i18n.locale == 'en' ? 'Regional Secretariat Review' : '区域秘书处审核' }}</div>
                                <div style="margin-top:-4px">
                                    <img v-if="green_quyu"  src="@/assets/img/nationaIntorduction/zhixian_green.png" alt="" style="margin-top:-4px">
                                    <img v-else src="@/assets/img/nationaIntorduction/zhixian_grey.png" alt="" style="margin-top:-4px">
                                </div>
                                <div >
                                    <img v-if="green_zongbu"  src="@/assets/img/nationaIntorduction/duigou_green.png" alt="" style="">
                                    <img v-else src="@/assets/img/nationaIntorduction/duigou_grey.png" alt="" style="">
                                </div>
                                 <div v-if="green_zongbu"  style="color:#67C23A;">{{ $i18n.locale == 'en' ? 'Headquarters Review' : '总部审核' }}</div>
                                <div v-else style="color:rgba(7, 7, 7, 0.25);">{{ $i18n.locale == 'en' ? 'Headquarters Review' : '总部审核' }}</div>
                                <div style="margin-top:-4px">
                                    <img v-if="green_zongbu"  src="@/assets/img/nationaIntorduction/zhixian_green.png" alt="" style="margin-top:-4px">

                                    <img  v-else src="@/assets/img/nationaIntorduction/zhixian_grey.png" alt="" >
                                </div>
                                <div >
                                    <img v-if="green_wancheng"  src="@/assets/img/nationaIntorduction/duigou_green.png" alt="" style="">
                                    <img v-else  src="@/assets/img/nationaIntorduction/duigou_grey.png" alt="" style="">
                                </div>
                                <div v-if="green_wancheng" style="color:#67C23A;">{{ $i18n.locale == 'en' ? 'Complete' : '完成' }}</div>
                                    <div v-else style="color:rgba(7, 7, 7, 0.25);">{{ $i18n.locale == 'en' ? 'Complete' : '完成' }}</div>

                        </div>
                            <div style="margin-top:112px;margin-left:34px;margin-right:41px;">
                                <el-table
                                        :data="tableData"
                                        :header-cell-style="{background:'#FAFAFA',fontSize: '14px',fontWeight:'600',color:'#000000'}"
                                        stripe
                                        border
                                        style="width: 100%;border: 1px solid rgba(0, 0, 0, 0.1); ">
                                    <el-table-column
                                            align="center"
                                            prop="handleNode"
                                            :label="$i18n.locale === 'zh' ? '环节' : 'Link'">
                                    </el-table-column>
                                    <el-table-column
                                            align="center"
                                            prop="handlerName"
                                            :label="$i18n.locale === 'zh' ? '人员' : 'Personnel'"
                                            width="180">
                                    </el-table-column>
                                    <el-table-column
                                            align="center"
                                            prop="handleTime"
                                            :label="$i18n.locale === 'zh' ? '处理时间' : 'Process Time'"
                                            width="180">
                                    </el-table-column>

                                    <el-table-column
                                            align="center"
                                            prop="handleResult"
                                            :label="$i18n.locale === 'zh' ? '处理结果' : 'Process Result'">
                                    </el-table-column>
                                    <el-table-column
                                            align="center"
                                            prop="handleCondition"
                                            :label="$i18n.locale === 'zh' ? '处理情况' : 'Process State'">
                                    </el-table-column>
                                    <el-table-column
                                            align="center"
                                            prop="handleOpinion"
                                            :label="$i18n.locale === 'zh' ? '处理意见' : 'Process Opinion'">
                                    </el-table-column>
                                </el-table>
                            </div>
                            <div style="margin-top:162px;display:flex">
                                <div class="submit" @click="backlist">{{ $i18n.locale == 'en' ? 'backlist ' : '返回列表' }}</div>
                            </div>



                        </div>

                    </div>

                    </div>
                </div>
            </div>
        </div>

</template>
<script>
    import Screen from "@/components/screen";
    import {getwaitdetail,getcommittee1,getwaitacceser,editwaitapply,editwaittijiao,uploadfile} from '@/api/committee/nrc';

    export default {
        name: "Submitapplication",
        props: ["detailids","logo"],
        components: {
            Screen,
        },
        data() {
            return {
                applytitle:undefined,
                applynumber:undefined,
                applyer:undefined,
                applytime:undefined,
                tableData:[],
                green_quyu:false,
                green_zongbu:false,
                green_wancheng:false,
            };
        },
        watch: {
            "$i18n.locale"() {
              this.tableData.forEach(item=>{
                if(this.$i18n.locale=='en'){
                  if(item.handleNode=="申请人修改"){
                    item.handleNode="Applicant Modification";
                  }
                  if(item.handleNode=="区域秘书处审核"){
                    item.handleNode="Regional Secretariat Review";
                  }
                  if(item.handleNode=="总部流转"){
                    item.handleNode="Headquarters Processing";
                  }
                  if(item.handleNode=="秘书处修改"){
                    item.handleNode="Secretariat  Modification";
                  }
                  if(item.handleCondition=="发起申请"){
                    item.handleCondition="Create Apply";
                  }
                  if(item.handleCondition=="对内容进行了修改"){
                    item.handleCondition="Modified content";
                  }
                  if(item.handleResult=="驳回"){
                    item.handleResult="Reject";
                  }
                  if(item.handleResult=="通过"){
                    item.handleResult="Pass";
                  }
                }else {
                  if(item.handleNode=="Applicant Modification"){
                    item.handleNode="申请人修改";
                  }
                  if(item.handleNode=="Regional Secretariat Review"){
                    item.handleNode="区域秘书处审核";
                  }
                  if(item.handleNode=="Headquarters Processing"){
                    item.handleNode="总部流转";
                  }
                  if(item.handleNode=="Secretariat  Modification"){
                    item.handleNode="秘书处修改";
                  }
                  if(item.handleCondition=="Create Apply"){
                    item.handleCondition="发起申请";
                  }
                  if(item.handleCondition=="Modified content"){
                    item.handleCondition="对内容进行了修改";
                  }
                  if(item.handleResult=="Reject"){
                    item.handleResult="驳回";
                  }
                  if(item.handleResult=="Pass"){
                    item.handleResult="通过";
                  }
                }
              })
            },
            CountryId() {},
        },
        updated(){


        },
        mounted() {
            getwaitdetail(this.detailids).then(res => {
                this.applyer = res.data.nrcApply.applyPeopleName;
                this.applynumber = res.data.nrcApply.applyNumber
                this.applytime = res.data.nrcApply.createDate
                this.applytitle=res.data.nrcApply.title
                this.tableData=res.data.nrcApprovalHistorys
              this.tableData.forEach(item=>{
                if(item.handleCondition==''||item.handleCondition==undefined){
                  item.handleCondition='--'
                }
                if(this.$i18n.locale=='en'){
                  if(item.handleNode=="申请人修改"){
                    item.handleNode="Applicant Modification";
                  }
                  if(item.handleNode=="区域秘书处审核"){
                    item.handleNode="Regional Secretariat Review";
                  }
                  if(item.handleNode=="总部流转"){
                    item.handleNode="Headquarters Processing";
                  }
                  if(item.handleNode=="秘书处修改"){
                    item.handleNode="Secretariat  Modification";
                  }
                  if(item.handleCondition=="发起申请"){
                    item.handleCondition="Create Apply";
                  }
                  if(item.handleCondition=="对内容进行了修改"){
                    item.handleCondition="Modified content";
                  }
                  if(item.handleResult=="驳回"){
                    item.handleResult="Reject";
                  }
                  if(item.handleResult=="通过"){
                    item.handleResult="Pass";
                  }
                }

              })
                if(res.data.nrcApply.applyStatus==6||res.data.nrcApply.applyStatus==11){
                        this.green_quyu=false
                        this.green_zongbu=false
                        this.green_wancheng=false
                }
                else if(res.data.nrcApply.applyStatus==7||res.data.nrcApply.applyStatus==10){
                    this.green_quyu=true
                    this.green_zongbu=false
                    this.green_wancheng=false
                }
                else if(res.data.nrcApply.applyStatus==2){
                    this.green_quyu=true
                    this.green_zongbu=true
                    this.green_wancheng=true
                }
                else{
                    this.green_quyu=false
                    this.green_zongbu=false
                    this.green_wancheng=false
                }
            })
        },
        destroyed() {},
        methods: {
            handleCurrentChange() {},
            back() {
                if(this.logo == "my"){
                    var params = {
                        name: "application",
                        type: true,
                    };
                    this.$emit("applicationType", params);
                }else {
                    var params = {
                        name: "application",
                        type: false,
                    };
                    this.$emit("applicationType", params);
                }
            },
            screenBack() {},
            backlist(){
                if(this.logo == "my"){
                    var params = {
                        name: "application",
                        type: true,
                    };
                    this.$emit("applicationType", params);
                }else {
                    var params = {
                        name: "application",
                        type: false,
                    };
                    this.$emit("applicationType", params);
                }
            }

        },
    };
</script>
<style scoped>
    /deep/ .el-table .el-table__cell.is-center{
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 22px;
        color: rgba(0, 0, 0, 0.85);
    }
    .submit{
        box-sizing: border-box;
        margin-left: 568px;
        width: 120px;
        height: 40px;
        background: #3A8EE6;
        border: 1px solid #3A8EE6;
        border-radius: 4px;
        /* Bold/Body */
        padding-left:32px;
        font-family: 'Noto Sans SC';
        font-style: normal;
        font-weight: 500;
        font-size: 14px;
        line-height: 22px;
        /* identical to box height, or 157% */
        cursor:pointer;
        display: flex;
        align-items: center;
        text-align: center;
        font-feature-settings: 'tnum' on, 'lnum' on;

        /* Neutral Color/White */

        color: #FFFFFF;
    }
    .box1 {
        padding: 0 0 20px 0;
        position: absolute;
    }
    .successfont{
        font-family: 'PingFang SC';
        font-style: normal;
        font-weight: bold;
        font-size: 20px;
        line-height: 0px;
        /* identical to box height, or 0% */
        color: rgba(0, 0, 0, 0.85);

    }
    .successfont1{
        font-family: 'PingFang SC';
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 0px;
        /* identical to box height, or 0% */
        color: rgba(0, 0, 0, 0.65);

    }
    .success_1{
        margin-top:40px;
        margin-left:465px;
    }
    .leftfont{
        width:105px;
        font-family: 'PingFang SC';
        font-style: normal;
        font-weight: bold;
        font-size: 14px;
        line-height: 30px;
        /* or 214% */


        color: rgba(0, 0, 0, 0.85);

    }
    .success_2{
        display:flex;
        flex-wrap: wrap;
        justify-content:space-around;
        /*padding-left:30%;
        padding-right:30%;*/
        margin-top:30px;
        font-size:15px;
        padding-left:150px;
        padding-right:150px;
    }
    .right_two_4_div{
        position:relative;height:35px;width:35px;border-radius: 50%;border:1px solid #1890ff
    }
    .right_two_4_i{
        position:absolute;top:50%;left:20%;transform:translateY(-50%)
    }
    .rightfont{
        width:180px;
        margin-left:19px;
        font-family: 'PingFang SC';
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 30px;
        /* or 214% */
        color: rgba(0, 0, 0, 0.65);

    }
    .center {
        display: flex;
    }
    .topImg img {
        display: inline-block;
        width: 1200px;
        height: 324px;
    }
    .centerLeft1 {
        border-radius: 0px;

        width: 1198px;
        height: 877px;
        left: 360px;
        top: 317px;

        background: #FFFFFF;
    }
    .left {
        position: relative;
    }

    .top .top1 {
        position: absolute;
        width: 5.5px;
        height: 10.5px;
        left: 20px;
        top: 35px;
        background: #376ac7;
        z-index: 1;
    }
    .top .top2 {
        position: absolute;
        width: 5.5px;
        height: 15px;
        left: 20px;
        top: 35px;
        background: #83bd50;
    }
    .top .allApplication {
        position: absolute;
        height: 22px;
        left: 34px;
        top: 31px;
    }
    .top .allApplication span {
        font-family: "PingFang SC";
        font-style: normal;
        font-weight: 600;
        font-size: 16px;
        line-height: 22px;
        color: #375586;
    }
    .top .notice {
        position: absolute;
        height: 22px;
        left: 160px;
        top: 32px;
    }
    .top .notice span {
        font-family: "PingFang SC";
        font-style: normal;
        font-weight: 600;
        font-size: 16px;
        line-height: 22px;
        color: rgba(10, 10, 10, 0.85);
    }
    .top .more {
        position: absolute;
        height: 16px;
        right: 21px;
        top: 31px;
    }
    .top .more span {
        font-family: "Roboto";
        font-style: normal;
        font-weight: 500;
        font-size: 14px;
        line-height: 16px;
        color: #4790f7;
    }
    .content .content1 {
        position: absolute;
        width: 1198px;
        height: 39px;
        left: 0px;
        top: 136px;
    }
    .content .content2 {
        position: absolute;
        width:1198px;
        height:844px;
        top:51px;


    }
    .content .title {
        font-family: "PingFang SC";
        font-style: normal;
        font-weight: 600;
        font-size: 14px;
        line-height: 20px;
        color: rgba(0, 0, 0, 0.85);
        position: absolute;
        left: 16px;
        top: 16px;
        right: 14px;
        bottom: 113px;
    }
    .content .time {
        font-family: "Roboto";
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        line-height: 14px;
        color: rgba(0, 0, 0, 0.65);
        position: absolute;
        left: 16px;
        top: 61px;
    }
    .content .type {
        font-family: "PingFang SC";
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        color: rgba(0, 0, 0, 0.85);
        position: absolute;
        left: 16px;
        top: 89px;
    }
    .content .toView {
        margin-left: 100px;
        font-family: "Roboto";
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 16px;
        color: #274e92;
    }
    .content .toProgress {
        font-family: "Roboto";
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 16px;
        color: #274e92;
    }
    .centerLeft2 {
        position: relative;
        margin-top: 20px;
        height: 177px;
        width: 850px;
        border-radius: 0px;
        background: #fff;
    }
    .content .audit {
        position: absolute;
        right: 5%;
    }
    .area {
        position: absolute;
        top: 100px;
    }
    .pag {
        position: absolute;
        bottom: 0;
        right: 0;
    }


</style>