manHourHousekeeper/fhKeeper/formulahousekeeper/timesheet/src/views/project/info.vue

<template>
        <div :style="'padding:20px 50px;background:#f7f7f7;min-height:'+tableHeight+'px;'">
        <div style="margin: 0 auto;width:900px;">
            <el-row :gutter="20">
            <el-col :span="16" >
                <div class="box info">
                    <label>基本信息<el-link v-if="user.id == project.creatorId || user.id == project.inchargerId" @click="showEdit" style="float:right;"><i class="el-icon-edit"  ></i></el-link></label>
                    <el-row :gutter="10" >
                        <el-col :span="5" ><span class="gray_label">项目名称:</span></el-col><el-col :span="19" ><span >{{project.projectName}}</span></el-col>
                    </el-row>
                    <el-row :gutter="10">
                        <el-col :span="5" ><span class="gray_label">状态:</span></el-col><el-col :span="7" ><span >{{statusTxt[project.status]}}</span></el-col>
                        <el-col :span="5" ><span class="gray_label">完成度: </span></el-col><el-col :span="7" ><span>
                            <el-progress :percentage="project.progress"></el-progress></span></el-col>
                    </el-row>
                    <el-row :gutter="10">
                        <el-col :span="5" ><span class="gray_label">项目编码: </span></el-col><el-col :span="7" ><span >{{project.projectCode}}</span></el-col>
                        <el-col :span="5" ><span class="gray_label">项目预算：</span></el-col><el-col :span="7" >
                        <span >{{project.budget == null?'-':project.budget}} 元</span></el-col>
                    </el-row>
                    <el-row :gutter="10">
                        <el-col :span="5" ><span class="gray_label">项目级别: </span></el-col><el-col :span="7" ><span >{{levelTxt[project.level]}}</span></el-col>
                        <el-col :span="5" ><span class="gray_label">创建日期:</span></el-col><el-col :span="7" ><span>{{project.createDate}}</span></el-col>
                    </el-row>
                    <el-row :gutter="10">
                        <el-col :span="5" ><span class="gray_label">计划开始日期：</span></el-col><el-col :span="7" >
                            <span >{{project.planStartDate==null?'-':project.planStartDate}}</span></el-col>
                        <el-col :span="5" ><span class="gray_label">计划结束日期:</span></el-col><el-col :span="7" ><span>
                            {{project.planEndDate == null?'-':project.planEndDate}}</span></el-col>
                    </el-row>
                    <el-row :gutter="10">
                        <el-col :span="5" ><span class="gray_label">实际完成日期:</span></el-col><el-col :span="7" ><span>
                            {{project.finishDate==null?'-':project.finishDate}}</span></el-col>
                    </el-row>
                </div>

                <div class="box" style="margin-top:10px;">
                    <div><label>相关人员</label>
                    <el-link v-if="user.id == project.creatorId || user.id == project.inchargerId" @click="showEditPar" style="float:right;"><i class="el-icon-edit"  ></i></el-link>
                    </div>
                    <div style="margin-top:10px;color:#999;">负责人</div>
                    <div><el-link style="margin:10px" @click="showUser(project.inchargerId)">{{project.inchargerName}}</el-link></div>
                    <div style="color:#999;">参与人</div>
                    <div>
                        <el-link v-for="item in project.participationList" :key="item.id" style="margin:10px;" @click="showUser(item.id)">{{item.name}}</el-link>
                        <el-button class="el-icon-plus" @click="addMembVisible=true" size="mini"></el-button>
                    </div>
                </div>
                <div class="box" style="margin-top:10px;">
                    <label>项目统计</label>
                    <div>
                        <el-row :gutter="10">
                        <el-col :span="4" style="text-align:center;">
                            <p style="color:#666;font-size:12px;">已完成</p>
                            <p style="font-size:20px;font-weight:bold;color:green;">{{taskSum.finishCount}}</p>
                        </el-col>
                        <el-col :span="4" style="text-align:center;">
                            <p style="color:#666;font-size:12px;">未完成</p>
                            <p style="font-size:20px;color:blue;font-weight:bold;">{{taskSum.unfinishCount}}</p>
                        </el-col>
                        <el-col :span="4" style="text-align:center;">
                            <p style="color:#666;font-size:12px;">已逾期</p>
                            <p style="font-size:20px;color:red;font-weight:bold;">{{taskSum.timeupCount}}</p>
                        </el-col>
                        <el-col :span="4" style="text-align:center;">
                            <p style="color:#666;font-size:12px;">待认领</p>
                            <p style="font-size:20px;color:#orange;font-weight:bold;">{{taskSum.unassignCount}}</p>
                        </el-col>
                        <el-col :span="4" style="text-align:center;">
                            <p style="color:#666;font-size:12px;">今日到期</p>
                            <p style="font-size:20px;font-weight:bold;color:pink;">{{taskSum.todayTimeupCount}}</p>
                        </el-col>
                        <el-col :span="4" style="text-align:center;">
                            <p style="color:#666;font-size:12px;">逾期完成</p>
                            <p style="font-size:20px;font-weight:bold;color:gray;">{{taskSum.timeupFinishCount}}</p>
                        </el-col>
                        </el-row>
                    </div>
                </div>
            </el-col>
            <el-col :span="8" style="background:#fff;border: 1px solid #eeeeee;border-radius:5px;min-height:547px;">
                <div>
                    <p><i class="el-icon-trophy"></i><span style="margin-left:5px;">里程碑</span></p>
                </div>
                <div>
                <el-timeline :reverse="reverse" style="padding-left: 3px;">
                    <el-timeline-item
                    v-for="(task, index) in mileStoneList"
                    :key="index"
                    :color="task.taskStatus==0?'#ddd':'#830BE2'"
                    size="large"
                    :timestamp="task.endDate">
                    {{task.name}}
                    </el-timeline-item>
                </el-timeline>
                </div>
            </el-col>
            </el-row>
        </div>
        <!--用户详细信息弹出框-->
        <el-dialog title="查看详情" v-if="userDetailVisible" :visible.sync="userDetailVisible" :close-on-click-modal="false" customClass="customWidth" width="400px">
            <div class="line"><span>姓名</span><span>{{userDetail.name}}</span></div>
            <div class="line"><span>手机号码</span><span>{{userDetail.phone}}</span></div>
            <div class="line"><span>部门</span><span>{{userDetail.departmentName}}</span></div>
            <div class="line" v-if="user.role==1||user.role==2"><span>成本</span><span>{{userDetail.cost}}元/小时</span></div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="userDetailVisible = false" >确定</el-button>
            </div>
        </el-dialog>

        
        <!--编辑基本信息界面-->
        <el-dialog :title="title" v-if="addFormVisible" :visible.sync="addFormVisible" :close-on-click-modal="false" customClass="customWidth" width="600px">
            <el-form ref="basicInfoForm" :model="addForm" :rules="rules" label-width="120px">
                <el-form-item label="项目编号" >
                    <el-input v-model="addForm.code"  placeholder="请输入项目编号" clearable></el-input>
                </el-form-item>
                <el-form-item label="项目名称" prop="name">
                    <el-input v-model="addForm.name"  placeholder="请输入项目名称" clearable></el-input>
                </el-form-item>
                <el-form-item label="级别" >
                    <el-select v-model="addForm.level"  placeholder="请选择级别" style="width:32%;" >
                        <el-option v-for="item in importanceList" :key="item.id" :label="item.label" :value="item.id"></el-option>
                    </el-select>
                    <span style="margin-left:50px;margin-right:10px;">项目预算</span>
                    <el-input v-model="addForm.budget"    style="width:32%;"
                    placeholder="整数" clearable @keyup.native="number"></el-input><span style="margin-left:10px;">元</span>
                </el-form-item>
                <el-form-item label="开始日期" prop="planStartDate">
                    <el-date-picker v-model="addForm.planStartDate" 
                     :editable="false" 
                     format="yyyy-MM-dd" 
                     value-format="yyyy-MM-dd"
                     :clearable="false" type="date" 
                     placeholder="选择日期"></el-date-picker>
                </el-form-item>
                <el-form-item label="截止日期" prop="planEndDate">
                    <el-date-picker v-model="addForm.planEndDate" 
                     :editable="false" 
                     format="yyyy-MM-dd" 
                     value-format="yyyy-MM-dd"
                     :clearable="false" type="date" 
                     placeholder="选择日期"></el-date-picker>
                </el-form-item>
               
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="addFormVisible = false">取消</el-button>
                <el-button type="primary" @click="submitInsert" :loading="addLoading">提交</el-button>
            </div>
        </el-dialog>

        <!--编辑参与人界面-->
        <el-dialog :title="title" v-if="pVisible" :visible.sync="pVisible" :close-on-click-modal="false" customClass="customWidth" width="600px">
            <el-form ref="participForm" :model="addForm" :rules="rules" label-width="120px">
                <el-form-item label="全部参与者">
                    <el-select v-model="addForm.userId" multiple filterable placeholder="请选择参与者" style="width:100%;" @change="changeParticipator">
                        <el-option v-for="item in users" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="主要负责人" >
                    <el-select v-model="addForm.inchargerId"  filterable placeholder="请选择负责人" style="width:100%;" >
                        <el-option v-for="item in project.participationList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="pVisible = false">取消</el-button>
                <el-button type="primary" @click="submitParticip" :loading="addLoading">提交</el-button>
            </div>
        </el-dialog>

        <!--添加参与人界面-->
        <el-dialog title="添加参与人" v-if="addMembVisible" :visible.sync="addMembVisible" :close-on-click-modal="false" customClass="customWidth" width="600px">
            <el-form ref="addMembForm" :model="addMembForm"  label-width="120px">
                <el-form-item label="新增参与者">
                    <el-select v-model="addMembForm.userId" multiple filterable placeholder="请选择参与者" style="width:100%;" >
                        <el-option v-for="item in users" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="addMembVisible = false">取消</el-button>
                <el-button type="primary" @click="submitAddMemb" :loading="addLoading">提交</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<style scoped>
.fileTypeIcon {
    color:#20a0ff;font-size:20px;

}
.box {
    background:#fff;border: 1px solid #eeeeee;border-radius:5px;padding:10px;
}
.info span {
    color:#303133;
}
.gray_label {
    color:#999 !important;
}

.el-row {
    margin-top:10px;
}
.line {
    padding:10px;
}
.line span{
    font-size:15px;
}
.line span:nth-child(even){
    float:right;
}
</style>
<script>
    import util from "../../common/js/util";
    export default {
        data() {
            return {
                addMembVisible:false,
                addMembForm:{},
                pVisible:false,
                taskSum:{},
                participator:[],
                users:[],
                addForm:{},
                addFormVisible:false,
                userDetail:{},
                userDetailVisible: false,
                importanceList:[{id:1,label:'一般'},{id:2,label:'紧急'},{id:3,label:'重要'},{id:4,label:'重要且紧急'}],
                //1-一般,2-紧急,3-重要,4-重要且紧急
                levelTxt:["全部","一般","紧急","重要","重要且紧急"],
                //1-进行中,2-已完成,3-已撤销
                statusTxt: ["全部","进行中","已完成","已撤销"],
                mileStoneList:[],
                reverse:false,
                project:{},
                addFolderDialog: false,
                upLoading:false,
                keyword:null,
                user: JSON.parse(sessionStorage.getItem("user")),
                recentFiles: [],
                addLoading: false,
                curProjectId:null,
                title: "",
                rules: {
                    name: [{ required: true, message: "请输入项目名称", trigger: "blur" }],
                }
            };
        },
        methods: {
            //提交添加参与人的请求
            submitAddMemb() {
                this.addLoading = true;
                let formData = new FormData();
                formData.append("id", this.curProjectId);
                if(this.addMembForm.userId.length != 0) {
                    for(var j in this.addMembForm.userId) {
                        formData.append("userId", this.addMembForm.userId[j]);
                    }
                }
                this.http.uploadFile('/project/addMemb',formData,
                res => {
                    this.addLoading = false;
                    if (res.code == "ok") {
                        this.$message({
                            message: "添加成功",
                            type: "success"
                        });
                        this.addMembVisible = false;
                        this.getProjectInfo();
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        });
                    }
                },
                error => {
                    this.addLoading = false;
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },
            editTask(task) {
                // this.addForm = JSON.parse(JSON.stringify(task));
                this.addFormVisible = true;
                this.addLoading = false;
                this.title = "编辑任务";
                this.getTaskDetail(task.id);
            },
            getProjectTaskSum() {
                this.http.post('/project/taskSum', {
                    id: this.curProjectId
                },
                res => {
                    if (res.code == "ok") {
                        this.taskSum = res.data;
                    } else {
                        this.$message({
                        message: res.msg,
                        type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },
            number(){　　
        　　　  this.addForm.budget = this.addForm.budget.replace(/[^\.\d]/g,'');
                this.addForm.budget = this.addForm.budget.replace('.','');
        　　},
            //选择参与人
            changeParticipator() {
                //检查是否在参与人中，如果没有需要加入到参与人中
                console.log(this.addForm.userId);
                var find = false;
                this.project.participationList = [];
                this.addForm.userId.forEach(u=>{
                    var findUser = this.users.filter(au=>au.id == u)[0];
                    this.project.participationList.push(findUser);
                })
                
            },
            getUsers() {
                this.http.post(this.port.manage.list, {
                    departmentId: -1,
                    pageIndex: 1,
                    pageSize: 99999
                },
                res => {
                    if (res.code == "ok") {
                        this.users = res.data.records;
                    } else {
                        this.$message({
                        message: res.msg,
                        type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },
            submitParticip() {
                this.addLoading = true;
                let formData = new FormData();
                if(this.addForm.id != null) {
                    formData.append("id", this.addForm.id);
                }
                formData.append("name", this.addForm.name);
                if(this.addForm.userId.length != 0) {
                    for(var j in this.addForm.userId) {
                        formData.append("userId", this.addForm.userId[j]);
                    }
                }
                if(this.addForm.inchargerId != null) {
                    formData.append("inchargerId", this.addForm.inchargerId);
                }
                
                this.http.uploadFile(this.port.project.add,formData,
                res => {
                    this.addLoading = false;
                    if (res.code == "ok") {
                        this.$message({
                            message: '修改成功',
                            type: "success"
                        });
                        this.pVisible = false;
                        this.getProjectInfo();
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        });
                    }
                },
                error => {
                    this.addLoading = false;
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },
            submitInsert() {
                this.$refs.basicInfoForm.validate(valid => {
                    if (valid) {
                        this.addLoading = true;
                        let formData = new FormData();
                        formData.append("name", this.addForm.name);
                        if(this.addForm.id != null) {
                            formData.append("id", this.addForm.id);
                        }
                        if(this.addForm.userId.length != 0) {
                            for(var j in this.addForm.userId) {
                                formData.append("userId", this.addForm.userId[j]);
                            }
                        }
                        if(this.addForm.inchargerId != null) {
                            formData.append("inchargerId", this.addForm.inchargerId);
                        }
                        if(this.addForm.code != null) {
                            formData.append("code", this.addForm.code);
                        }
                        if(this.addForm.planStartDate != null) {
                            formData.append("planStartDate", this.addForm.planStartDate);
                        }
                        if(this.addForm.planEndDate != null) {
                            formData.append("planEndDate", this.addForm.planEndDate);
                        }
                        if(this.addForm.level != null) {
                            formData.append("level", this.addForm.level);
                        }
                        if(this.addForm.budget != null) {
                            formData.append("budget", this.addForm.budget);
                        }
                        
                        this.http.uploadFile(this.port.project.add,formData,
                        res => {
                            this.addLoading = false;
                            if (res.code == "ok") {
                                this.$message({
                                    message: this.addForm.id!=null?'修改':'创建'+"成功",
                                    type: "success"
                                });
                                this.addFormVisible = false;
                                this.getProjectInfo();
                            } else {
                                this.$message({
                                    message: res.msg,
                                    type: "error"
                                });
                            }
                        },
                        error => {
                            this.addLoading = false;
                            this.$message({
                                message: error,
                                type: "error"
                            });
                        });
                        }
                });
            },
            showEdit() {
                this.addForm = JSON.parse(JSON.stringify(this.project));
                console.log('---'+this.addForm);
                console.log(this.addForm.projectCode);
                
                var list = this.project.participationList , arr = [];
                for(var j in list) {
                    arr.push(list[j].id)
                }
                this.addForm.userId = arr;
                this.addForm.code = this.addForm.projectCode;
                this.addForm.name = this.addForm.projectName;
                this.addFormVisible = true;

            },
            showEditPar() {
                this.addForm = JSON.parse(JSON.stringify(this.project));
                this.addForm.code = this.addForm.projectCode;
                this.addForm.name = this.addForm.projectName;
                //设置参与人
                var list = this.project.participationList , arr = [];
                for(var j in list) {
                    arr.push(list[j].id)
                }
                this.addForm.userId = arr;
                console.log(this.addForm.userId );

                this.pVisible = true;
                
            },
            //显示用户详情
            showUser(userId) {
                this.userDetailVisible = true;
                this.http.post(this.port.manage.userDetail, {
                    userId: userId
                },
                res => {
                    if (res.code == "ok") {
                        this.userDetail = res.data;
                    } else {
                        this.$message({
                        message: res.msg,
                        type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },
            cursorOver(row, column, cell, event) {
                this.currentDataId = row.id;
            },
            viewOnline(row) {
                this.http.post('/pdf-file/getProjectFile', {fileId: row.id},
                res => {
                    if (res.code == "ok") {
                        console.log(res.data+'----'+row.documentName);
                        let routeUrl = this.$router.resolve({
                            path: "/viewonline",
                            params: {serverFname:res.data, fileName:row.documentName}
                        });
                        sessionStorage.setItem("serverFname",res.data);
                        sessionStorage.setItem("fileName",row.documentName);
                        console.log(routeUrl.href);
                        window.open(routeUrl.href, '_blank');
                    } else {
                        this.$message({
                            message: res.msg,
                            type: 'error'
                        });
                    }
                }, error => {
                    this.$message({
                        message: error,
                        type: 'error'
                    });
                })
            },
            

            openWin(url) {
                var el = document.createElement("a");
                document.body.appendChild(el);
                el.href = encodeURI(url); 
                el.target = '_blank'; 
                el.click();
                document.body.removeChild(el);
            },

            //获取里程碑文件
            getMileStoneList() {
                this.http.post('/task/getMileStoneList', {
                    projectId: this.curProjectId,
                },
                res => {
                    if (res.code == "ok") {
                        this.mileStoneList = res.data;
                        this.mileStoneList.unshift( {id:-1, name:'开始', taskStatus:1});
                        
                        
                    } else {
                        this.$message({
                        message: res.msg,
                        type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },
            getUsers() {
                this.http.post(this.port.manage.list, {
                    departmentId: -1,
                    pageIndex: 1,
                    pageSize: 99999
                },
                res => {
                    if (res.code == "ok") {
                        this.users = res.data.records;
                    } else {
                        this.$message({
                        message: res.msg,
                        type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },


            //获取列表
            getProjectInfo() {
                this.listLoading = true;
                this.http.post('/project/detail', {
                    id: this.curProjectId
                },
                res => {
                    this.listLoading = false;
                    if (res.code == "ok") {
                        this.project = res.data;
                    } else {
                        this.$message({
                        message: res.msg,
                        type: "error"
                        });
                    }
                },
                error => {
                    this.listLoading = false;
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },
            refreshPage() {
                this.curProjectId = parseInt(this.$route.params.id);
                this.getMileStoneList();
                this.getProjectInfo();
                this.getProjectTaskSum();
            }
        },
        created() {
            console.log('created===');
            let height = window.innerHeight;
            this.tableHeight = height - 160;
            const that = this;
            window.onresize = function temp() {
                that.tableHeight = window.innerHeight - 160;
            };
        },
        mounted() {
            console.log('mounted===');
            this.curProjectId = parseInt(this.$route.params.id);
            this.getMileStoneList();
            this.getProjectInfo();
            this.getUsers();
            this.getProjectTaskSum();
        }
    };
</script>