yunsu/ys_vue/src/views/project/projectDetail.vue

<template>
    <section>
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true">
                <el-form-item>
                    <el-button type="text" @click="backToList" icon="el-icon-back" class="back">返回</el-button>
                </el-form-item>
                <el-form-item class="divLine">
                </el-form-item>
                <el-form-item>
                    <span class="projectTitle">{{proDetail.projectName}}</span>
                </el-form-item>
            </el-form>
        </el-col>
        <el-col :span="24" :style="allDetail">
            <el-col :span="24" class="title">项目基本信息
                <i class="el-icon-edit editDetail" v-if="user.id == proDetail.managerId || user.id == proDetail.creatorId" @click="edit"></i>
            </el-col>
            <el-col :span="24" class="main">
                <el-col :span="6" class="detail">
                    项目编号：
                    <span class="info">{{proDetail.projectNo}}</span>
                </el-col>
                <el-col :span="6" class="detail">
                    项目经理：
                    <span class="info">{{proDetail.manager}}</span>
                </el-col>
                <el-col :span="6" class="detail">
                    资产方审批人：
                    <span class="info">{{proDetail.ownerApprover}}</span>
                </el-col>
                <el-col :span="6" class="detail">
                    生产方审批人：
                    <span class="info">{{proDetail.customerApprover}}</span>
                </el-col>
                <el-col :span="24" class="detail">
                    生产方公司：
                    <span class="info" v-for="(item, index) in proDetail.customCompanies">
                        {{item.companyName}}
                        <span v-if="index != proDetail.customCompanies.length-1">、</span>
                    </span>
                </el-col>
                <el-col :span="24" class="detail">
                    项目模具：
                    <span class="info model" v-for="(item, index) in proDetail.models">
                        <span @click="toMold(item.id)">{{item.modelName}}({{item.modelNo}})</span>
                        <span v-if="index != proDetail.models.length-1">、</span>
                    </span>
                </el-col>
                <el-col :span="24" class="detail">
                    资产方人员：
                    <span class="info" v-for="(item, index) in proDetail.ownerUsers">
                        {{item.username}}
                        <span v-if="index != proDetail.ownerUsers.length-1">、</span>
                    </span>
                </el-col>
                <el-col :span="24" class="detail">
                    生产方人员：
                    <span class="info" v-for="(item, index) in proDetail.customUsers">
                        {{item.username}}
                        <span v-if="index != proDetail.customUsers.length-1">、</span>
                    </span>
                </el-col>
            </el-col>

            <el-col :span="24" class="title">项目文档
                <!-- update == 1 -->
                <el-upload v-if="user.id == proDetail.managerId" class="upload-demo" action="customize" :http-request="uploadFile" :show-file-list="false" multiple :limit="5" style="float:right;">
                    <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
            </el-col>
            <el-col :span="24">
                <el-table :data="files" highlight-current-row v-loading="listLoading" height="400" style="width: 100%;">
                    <el-table-column type="index" width="40"></el-table-column>
                    <el-table-column prop="fileName" label="名称" sortable></el-table-column>
                    <el-table-column prop="fileSize" label="大小" width="150" align="center" sortable></el-table-column>
                    <el-table-column prop="uploader" label="上传者" width="120" align="center" sortable></el-table-column>
                    <el-table-column prop="indate" label="上传时间" width="200" align="center" sortable></el-table-column>
                    <el-table-column label="操作" width="220" align="center" sortable>
                        <template slot-scope="scope" v-if="download == 1">
                            <el-button size="small" @click="dowloadFile(scope.row.id)">
                                <a :href="scope.row.url" :download="scope.row.fileName">下载</a>
                            </el-button>
                            <el-button size="small" type="danger" @click="fileDel(scope.row.id)" v-if="scope.row.uploaderId == user.id">删除</el-button>
                        </template>
                        <template slot-scope="scope" v-else>
                            -
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>

            <el-col :span="24" class="title">操作记录</el-col>
            <el-table :data="opers" highlight-current-row v-loading="oplistLoading" height="400" style="width: 100%;">
                <el-table-column type="index" width="40"></el-table-column>
                <el-table-column prop="content" label="操作" width="120" sortable></el-table-column>
                <el-table-column prop="fileName" label="操作文档名称" sortable></el-table-column>
                <el-table-column prop="operator" label="操作人" width="120" align="center" sortable></el-table-column>
                <el-table-column prop="indate" label="操作时间" width="200" align="center" sortable></el-table-column>
            </el-table>
        </el-col>

        <!--编辑界面-->
		<el-dialog title="编辑项目" v-if="editFormVisible" :visible.sync="editFormVisible" :close-on-click-modal="false" customClass='customWidth'>
			<el-form :model="editForm" label-width="120px" :rules="formRules" ref="editForm">
                <el-col :span="24">
                    <el-form-item label="项目名称" prop="projectName">
                        <el-input v-model="editForm.projectName" autocomplete="off" placeholder="请输入项目名称" style="width:510px"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="生产方公司" prop="customerCompany">
                        <el-select v-model="editForm.customerCompany" clearable filterable multiple placeholder="请选择生产方公司" @change="companyChange" value-key='id' style="width:510px">
                            <el-option v-for="item in company" :key="item.companyName" :label="item.companyName" :value="item">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="项目经理" prop="managerId">
                        <el-select v-model="editForm.managerId" clearable filterable placeholder="请选择项目经理" value-key='id' style="width:510px">
                            <el-option v-for="item in charger" :key="item.id" :label="item.username" :value="item">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="资产方审批人" prop="ownerApproverId">
                        <el-select v-model="editForm.ownerApproverId" clearable filterable placeholder="请选择资产方审批人" value-key='id' style="width:190px">
                            <el-option v-for="item in assets" :key="item.id" :label="item.username" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="生产方审批人" prop="customerApproverId">
                        <el-select v-model="editForm.customerApproverId" clearable filterable placeholder="请选择生产方审批人" value-key='id' style="width:190px">
                            <el-option v-for="item in produce" :key="item.id" :label="item.username" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="项目模具">
                        <el-select v-model="editForm.modelIds" clearable filterable multiple placeholder="请选择项目模具" style="width:510px">
                            <el-option v-for="item in molds" :key="item.id" :label="item.modelName" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="资产方参与人">
                        <el-select v-model="editForm.assets" clearable filterable multiple placeholder="请选择资产方参与人" style="width:510px">
                            <el-option v-for="item in assets" :key="item.id" :label="item.username" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="生产方参与人">
                        <el-select v-model="editForm.produce" clearable filterable multiple placeholder="请选择生产方参与人" style="width:510px">
                            <el-option v-for="item in produce" :key="item.id" :label="item.username" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="editFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="addSubmit" :loading="editLoading">提交</el-button>
			</div>
		</el-dialog>
    </section>
</template>

<script>
    import util from "../../common/js/util";
    export default {
        data() {
            return {
                detailId: this.$route.params.id,
                user: JSON.parse(sessionStorage.getItem('user')),
                //临时数据
                proDetail: {},
                files: [],
                opers: [],

                allDetail: {
                    overflow: 'auto',
                    padding: '0px 5px',
                    height: 0
                },

                listLoading: false,
                oplistLoading: false,
                activePage: 0,

                update: 0,
                download: 0,
                view: 0,
                approve: 0,

                company:[],
                assets: [],
                produce: [],
                charger: [],
                formRules: {
					projectName: [
						{ required: true, message: '请输入项目名称', trigger: 'blur' }
                    ],
                    customerCompany: [
                        { required: true, message: '请选择客户公司', trigger: 'blur' }
                    ],
                    managerId: [
                        { required: true, message: '请选择项目经理', trigger: ['blur','change'] }
                    ],
                    ownerApproverId: [
                        { required: true, message: '请选择资产方审批人', trigger: ['blur','change'] }
                    ],
                    customerApproverId: [
                        { required: true, message: '请选择生产方审批人', trigger: ['blur','change'] }
                    ]
                },
                
                editFormVisible: false,//新增界面是否显示
				editLoading: false,
				//新增界面数据
				editForm: {
					projectName: '',
                    customerCompany: [],
                    managerId: '',
                    ownerApproverId: '',
                    customerApproverId: '',
                    modelIds: [],
                    assets: [],
                    produce: []
				}
            };
        },
        methods: {
            //返回
            backToList() {
                this.$router.push("/project");
            },
            toMold(id) {
                this.$router.push('/moldList/' + id);
            },
            handleClick(tab, event) {
            },
            //获取详情
            getDetail() {
                this.http.post(this.port.project.projectDetail, {
                    id: this.detailId
                }, res => {
                    if (res.code == "ok") {
                        this.update = res.data.update;
                        this.download = res.data.download;
                        this.view = res.data.view;
                        this.approve = res.data.approve;

                        var list = res.data.vo;
                        var approves = res.data.vo.approves;

                        for(var i in approves){
                            if(approves[i].subordinateType == 0){
                                list.ownerApprover = approves[i].approverName;
                            } else {
                                list.customerApprover = approves[i].approverName;
                            }
                        }
                        this.proDetail = list;
                        if(this.user.parentId != 0){
                            this.getMsg();
                        }
                    } else {
                        this.$message({
                            message: res.msg,
                            type: 'error'
                        });
                    }
                }, error => {
                    this.$message({
                        message: error,
                        type: 'error'
                    });
                })
            },
            getFileList() {
                this.listLoading = true;
                // 获取文档列表
                this.http.post(this.port.project.fileList, {
                    projectId: this.detailId
                }, res => {
                    this.listLoading = false;
                    if (res.code == "ok") {
                        this.files = res.data;
                    } else {
                        this.$message({
                            message: res.msg,
                            type: 'error'
                        });
                    }
                }, error => {
                    this.listLoading = false;
                    this.$message({
                        message: error,
                        type: 'error'
                    });
                })
            },
            getOperList() {
                this.oplistLoading = true;
                // 获取文档列表
                this.http.post(this.port.project.operList, {
                    projectId: this.detailId
                }, res => {
                    this.oplistLoading = false;
                    if (res.code == "ok") {
                        this.opers = res.data;
                    } else {
                        this.$message({
                            message: res.msg,
                            type: 'error'
                        });
                    }
                }, error => {
                    this.oplistLoading = false;
                    this.$message({
                        message: error,
                        type: 'error'
                    });
                })
            },
            //获取信息
            getMsg() {
                // 获取人员
                var compIds = this.user.companyId;
                for(var i in this.proDetail.customCompanies){
                    compIds += "," + this.proDetail.customCompanies[i].companyId;
                }
                this.http.post(this.port.project.getUserById, {
                    companyIds: compIds,
                    id: this.user.id
                } , res => {
                    if (res.code == "ok") {
                        var list = res.data , assets = [] , produce = [];
                        for(var i in list) {
                            if(list[i].companyId == this.user.companyId){
                                if(list[i].id != this.user.id){
                                    assets.push(list[i])
                                }
                            } else {
                                produce.push(list[i])
                            }
                        }
                        this.charger = res.data;
                        this.assets = assets;
                        this.produce = produce;
                    } else {
                        this.$message({
                            message: res.msg,
                            type: 'error'
                        });
                    }
                }, error => {
                    this.$message({
                        message: error,
                        type: 'error'
                    });
                })

                // 获取公司
                this.http.post(this.port.base.addCompanyListToProject, {
                    parentId: this.user.parentId,
                    id: this.user.id
                }, res => {
                    if (res.code == "ok") {
                        var list = res.data , array = [];
                        for(var i in list){
                            if(list[i].id != this.user.companyId){
                                array.push(list[i])
                            }
                        }
                        this.company = array;
                    } else {
                        this.$message({
                            message: res.msg,
                            type: 'error'
                        });
                    }
                }, error => {
                    this.$message({
                        message: error,
                        type: 'error'
                    });
                })

                // 获取模具
                this.http.post(this.port.mold.modelList, {
                    parentId: this.user.parentId,
                    id: this.user.id
                }, res => {
                    if (res.code == "ok") {
                        this.molds = res.data;
                    } else {
                        this.$message({
                            message: res.msg,
                            type: 'error'
                        });
                    }
                }, error => {
                    this.$message({
                        message: error,
                        type: 'error'
                    });
                })
            },
            //选择公司切换人员
            companyChange() {
                var param = {} ,
                    str = this.user.companyId;
                for(var i in this.editForm.customerCompany){
                    str += "," + this.editForm.customerCompany[i].id;
                }
                param.companyIds = str;
                param.id = this.user.id
                this.http.post(this.port.project.getUserById, param , res => {
                    if (res.code == "ok") {
                        var list = res.data , assets = [] , produce = [];
                        for(var i in list) {
                            if(list[i].companyId == this.user.companyId){
                                assets.push(list[i])
                            } else {
                                produce.push(list[i])
                            }
                        }
                        this.charger = res.data;
                        this.assets = assets;
                        this.produce = produce;
                    } else {
                        this.$message({
                            message: res.msg,
                            type: 'error'
                        });
                    }
                }, error => {
                    this.$message({
                        message: error,
                        type: 'error'
                    });
                })
            },
            //打开编辑页面
            edit() {
                this.editFormVisible = true;
                var compArr = [] ,
                    manager = {} ,
                    ownerApproverId = '' ,
                    customerApproverId = '' ,
                    moldArr = [] ,
                    assets = [] ,
                    produce = [];
                for(var i in this.proDetail.customCompanies){
                    for(var j in this.company){
                        if(this.company[j].id == this.proDetail.customCompanies[i].companyId){
                            compArr.push(this.company[j])
                        }
                    }
                }

                for(var i in this.charger){
                    if(this.charger[i].id == this.proDetail.managerId){
                        manager = this.charger[i];
                    }
                }

                for(var i in this.proDetail.approves) {
                    if(this.proDetail.approves[i].subordinateType == 0){
                        ownerApproverId = this.proDetail.approves[i].approverId;
                    } else {
                        customerApproverId = this.proDetail.approves[i].approverId;
                    }
                }

                for(var i in this.molds){
                    for(var j in this.proDetail.models){
                        if(this.molds[i].id == this.proDetail.models[j].id){
                            moldArr.push(this.molds[i].id)
                        }
                    }
                }

                for(var i in this.proDetail.ownerUsers){
                    assets.push(this.proDetail.ownerUsers[i].id)
                }

                for(var i in this.proDetail.customUsers){
                    produce.push(this.proDetail.customUsers[i].id)
                }

                this.editForm = {
                    id: this.proDetail.id,
                    projectName: this.proDetail.projectName,
                    customerCompany: compArr,
                    managerId: manager,
                    ownerApproverId: ownerApproverId,
                    customerApproverId: customerApproverId,
                    modelIds: moldArr,
                    assets: assets,
                    produce: produce
                }
            },
            //提交
            addSubmit() {
                this.$refs.editForm.validate((valid) => {
					if (valid) {
                        var cId = "",
                            cName = "",
                            modelIds = "",
                            userIds = "";
                        for(var i in this.editForm.customerCompany){
                            cId += this.editForm.customerCompany[i].id + ",";
                            cName += this.editForm.customerCompany[i].companyName + ",";
                        }
                        cId = cId.substring(0,cId.length-1);
                        cName = cName.substring(0,cName.length-1);

                        for(var i in this.editForm.modelIds){
                            modelIds += this.editForm.modelIds[i] + ","
                        }
                        modelIds = modelIds.substring(0,modelIds.length-1);

                        for(var i in this.editForm.assets){
                            if(i == this.editForm.assets.length -1){
                                userIds += this.editForm.assets[i]
                            } else {
                                userIds += this.editForm.assets[i] + ","
                            }
                        }
                        
                        if(userIds != "" && this.editForm.produce.length != 0){
                            userIds += ","
                        }

                        for(var i in this.editForm.produce){
                            if(i == this.editForm.produce.length -1){
                                userIds += this.editForm.produce[i]
                            } else {
                                userIds += this.editForm.produce[i] + ","
                            }
                        }

                        this.editLoading = true;
                        this.http.post(this.port.project.addProject, {
                            id: this.editForm.id,
                            projectName: this.editForm.projectName,
                            customerCompanyIds: cId,
                            customerCompanyNames: cName,
                            manager: this.editForm.managerId.username,
                            managerId: this.editForm.managerId.id,
                            ownerApproverId: this.editForm.ownerApproverId,
                            customerApproverId: this.editForm.customerApproverId,
                            modelIds: modelIds,
                            userIds: userIds,
                            flag: 1
                        } , res => {
                            this.editLoading = false;
                            this.editFormVisible = false;
                            if (res.code == "ok") {
                                this.$message({
                                    message: '修改成功',
                                    type: 'success'
                                });
                                this.getDetail();
                            } else {
                                this.$message({
                                    message: res.msg,
                                    type: 'error'
                                });
                            }
                        }, error => {
                            this.editLoading = false;
                            this.editFormVisible = false;
                            this.$message({
                                message: error,
                                type: 'error'
                            });
                        })
					}
				});
            },
            //上传
            uploadFile(params) {
                var fileObj = params.file;
                var form = new FormData();
                form.append("projectId", this.proDetail.id);
                form.append("file", fileObj);
                this.http.uploadFile(this.port.project.uploadFile, form , res => {
                    if (res.code == "ok") {
                        this.$message({
                            message: '上传成功',
                            type: 'success'
                        });
                        this.getFileList();
                        this.getOperList();
                    } else {
                        this.$message({
                            message: res.msg,
                            type: 'error'
                        });
                    }
                }, error => {
                    this.$message({
                        message: error,
                        type: 'error'
                    });
                })
            },
            //下载
            dowloadFile(id) {
                this.http.post(this.port.project.dowloadFile, {
                    id: id
                }, res => {
                    this.getOperList();
                }, error => {
                })
            },
            //删除上传文件
			fileDel(id) {
                this.$confirm('确认删除该文档吗?', '提示', {
					type: 'warning'
				}).then(() => {
                    this.http.post(this.port.project.delFile, {
                        id: id
                    }, res => {
                        if (res.code == "ok") {
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            this.getFileList();
                            this.getOperList();
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'error'
                            });
                        }
                    }, error => {
                        this.$message({
                            message: error,
                            type: 'error'
                        });
                    })
				});
            },
        },
        created() {
            let height = window.innerHeight;
            this.allDetail.height = height - 170 + "px";
            const that = this;
            window.onresize = function temp() {
                that.allDetail.height = window.innerHeight - 170;    
            };
        },
        mounted() {
            this.getDetail();
            this.getFileList();
            this.getOperList();
        }
    };
</script>

<style scoped>
    a {
        text-decoration:none;
        color: #333;
    }

    .allDetail {
        overflow-y: auto;
    }

    .toolbar .el-form-item {
        font-size: 14px;
        vertical-align: middle;
    }

    .back {
       font-size:16px; 
    }

    .divLine {
        width: 2px;
        background: #c3c3c3;
        height: 100%;
    }

    .projectTitle {
        font-size: 18px;
        color: #333;
    }

    .title {
        padding-left: 10px;
        padding-bottom: 0px;
        margin: 20px 0;
        font-size: 16px;
        line-height: 24px;
        border-left: 1px #20a0ff solid;
        position: relative;
    }

    .upload-demo {
        position: absolute;
        right: 0;
        top: -5px;
    }

    .editDetail {
        margin-left: 10px;
        color:#20a0ff;
        cursor: pointer;
    }

    .info {
        color: grey;
    }

    .model {
        cursor: pointer;
        color:#20a0ff;
    }

    .main {
        padding-left: 10px;
    }

    .detail {
        margin-bottom: 20px;
    }
</style>