shuzhan
/
ipcps-pc


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
							<!DOCTYPE html>
<html>
<head>
	<title>项目进度</title>
    <!--#include file="common/_header.html"-->
    <style>
    .tab-labels{
        border-bottom: 1px solid #e8e8e8;
    }

    .tab-labels::after{
        content:'';
        display: block;
        clear:both;
    }

    .current{
        border-bottom-color: #1890ff !important;
    }

    .tab-label{
        cursor: pointer;
        display: inline-block;
        float: left;
        height: 40px;
        line-height: 40px;
        padding: 0 20px;
        border-bottom: solid 2px #fff;
    }

    .show {
        display: block;
    }

    .hide{
        display: none;
    }

    #app{
        position: absolute;
        top: 0px;
        bottom: 0px;
        left: 0px;
        right: 0px;
        display: flex;
        flex-direction: column;
    }

    #app iframe{
        flex:1;
    }
    </style>
</head>
<body>
    <div id="app">
        <ul class="tab-labels">            
            <li class="tab-label" :class="{current:index==current}" 
            @click="selectTab(index,process.procDefKey,process.procInstId)" v-for="(process,index) in processList">
                {{process.processName}}
            </li>
        </ul>
        <div style="position:absolute;top:5px;right:5px;">
            <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" 
            href="javascript:reloadFrame();" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a>
        </div>
        <div>
            <div style="padding:5px;">
                <input class="btn btn-primary radius" @click="showDiagram" type="button" value="流程图">
                <input class="btn btn-secondary radius" @click="showStepList" type="button" value="步骤列表">                
            </div>
            <div v-show="showModel==1">
                <iframe id="frame1" name="frame1" :src="viewUrl" width="100%" height="600px" frameborder="0"></iframe>
            </div>
            <div v-show="showModel==2">
                <h5>项目名称:<span v-html="project.title"></span>&nbsp;采用模板:<span v-html="template.title"></span></h5>
                <table class="table table-border table-bordered">
                    <thead>
                        <tr>
                            <td>步骤名称</td>
                            <td>待办事项</td>
                            <td>规定完成人天</td>
                            <td>经办人</td>
                            <td>候选人</td>
                            <td>开始时间</td>
                            <td>完成时间</td>
                        </tr>
                    </thead>
                    <tbody v-if="stepList!=null">
                        <template v-for="step in stepList">
                            <tr>
                                <td :rowspan="step.taskList.length" v-html="step.name"></td>
                                <td :rowspan="step.taskList.length">
                                    <ul>
                                        <li v-for="todo,index in step.todoList">{{index+1}}.{{todo.detail}}</li>
                                    </ul>
                                </td>
                                <td :rowspan="step.taskList.length">
                                    <span v-html="step.day"></span>
                                </td>
                                <td v-html="step.taskList[0].assignee"></td>
                                <td v-html="step.taskList[0].candidate"></td>
                                <td v-html="step.taskList[0].startTime"></td>
                                <td v-html="step.taskList[0].endTime"></td>
                            </tr>
                            <template v-for="task,index in step.taskList">
                                <tr v-if="index>0">
                                    <td v-html="task.assignee"></td>
                                    <td v-html="task.candidate"></td>
                                    <td v-html="task.startTime"></td>
                                    <td v-html="task.endTime"></td>
                                </tr>
                            </template>
                        </template>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
<!--_footer 作为公共模版分离出去-->
<!--#include file="common/_footer.html"-->
<!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="scripts/global.js"></script>
<script type="text/javascript" src="lib/vue/vue.js"></script>  
<script type="text/javascript">
    var path = global_backend_url;
    var projectId = getQueryString("projectId");

    function reloadFrame(){
        //vm.viewUrl = vm.viewUrl;
        $("#frame1")[0].contentWindow.location.reload(true);
    }

    var vm = new Vue({
        el:"#app",
        data: {
            project:{},
            template:{},
            processList:[],
            stepList:[],
            current:0,
            showModel:1, // 1-流程图;2-步骤列表
            viewUrl:""
        },
        mounted: function(){
            var self = this;

            $.get(path + "/procInst/activeList",{
                projectId : projectId
            },function(resp){
                if(resp.result){
                    self.processList = resp.data;
                    self.selectTab(0,resp.data[0].procDefKey,resp.data[0].procInstId);
                }
                else{
        			layer.msg(resp.message + "");
                }
            },"json");
        },
        methods: {
            selectTab: function(index,procDefKey,procInstId) {
                this.current = index;
                this.viewUrl = "procinst-diagram.html?procDefKey=" + procDefKey +"&procInstId=" + (procInstId!=null ? procInstId : "");
                
                if(this.showModel==2){
                    this.showStepList();
                }
            },
            showDiagram() {
                this.showModel = 1;
                reloadFrame();
            },
            showStepList() {
                this.showModel = 2;

                var self = this;
                var loadingIndex = layer.load(0, {shade: false});

                // 读取流程步骤列表
                $.get(path + "/procInst/stepList",{
                    projectId : projectId,
                    procDefKey: self.processList[this.current].procDefKey,
                    procInstId: self.processList[this.current].procInstId
                },function(resp){
                    layer.close(loadingIndex);

                    if(resp.result){
                        self.project = resp.data.project;
                        self.template = resp.data.template;
                        self.stepList = resp.data.stepList;
                    }
                    else{
                        layer.msg(resp.message + "");
                    }
                },"json");
            }
        }
    });
</script> 
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>