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.participateUsers">
                        {{item.username}}
                        <span v-if="index != proDetail.participateUsers.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">
                <el-collapse class="activeNames" v-model="activeNames">
                    <el-collapse-item name="1">
                        <template slot="title">
                            <el-col :span="24" class="title">项目模具</el-col>
                        </template>
                        <el-col :span="24" class="detail">
                            <el-table :data="proDetail.models" highlight-current-row v-loading="modelsLoading" style="width: 100%;">
                                <el-table-column type="index" width="40"></el-table-column>
                                <el-table-column prop="modelNo" label="模具编号" width="200" sortable>
                                    <template slot-scope="scope">
                                        <span class="model" @click="toMold(scope.row.id)">{{scope.row.modelNo}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="modelName" label="模具名称" width="500" sortable></el-table-column>
                                <el-table-column prop="produceCompanyName" label="所属生产商" sortable></el-table-column>
                            </el-table>
                        </el-col>
                    </el-collapse-item>

                    <el-collapse-item name="2">
                        <template slot="title">
                            <el-col :span="24" class="title">项目文档
                                <!-- update == 1 -->
                                <span @click='doSomething'>
                                    <el-upload v-if="user.id == proDetail.managerId" ref="upload" action="customize" :http-request="uploadFile" :show-file-list="false" :limit="1" style="float:right;margin-right:20px;">
                                        <el-button size="mini" type="primary" :loading="upLoading">点击上传</el-button>
                                    </el-upload>
                                </span>
                            </el-col>
                        </template>
                        <el-col :span="24" class="detail">
                            <el-table :data="files" highlight-current-row v-loading="listLoading" 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">
                                        <a :href="scope.row.url" :download="scope.row.fileName">
                                            <el-button size="small" @click="dowloadFile(scope.row)">
                                                下载
                                            </el-button>
                                        </a>
                                        <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-collapse-item>

                    <el-collapse-item name="3">
                        <template slot="title">
                            <el-col :span="24" class="title">操作记录</el-col>
                        </template>
                        <el-col :span="24" class="detail">
                            <el-table :data="opers" highlight-current-row v-loading="oplistLoading" 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-collapse-item>
                </el-collapse>
            </el-col>
            
        </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="modelIds">
                        <el-select v-model="editForm.modelIds" @change="companyChange" clearable filterable multiple placeholder="请选择项目模具" value-key='id' style="width:510px">
                            <el-option v-for="item in molds" :key="item.id" :label="item.modelName" :value="item">
                                <span style="float: left">{{ item.modelName }}</span>
                                <span style="float: right; color: #8492a6; font-size: 13px;margin-right:17px;">{{ item.produceCompanyName }}</span>
                            </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" @change="changeStaff(0)" 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" @change="changeStaff(0)" 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" @change="changeStaff(0)" 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.users" @change="changeStaff(1)" clearable filterable multiple placeholder="请选择项目普通用户" style="width:510px">
                            <el-option v-for="item in general" :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.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 size="small" style="float:left;margin-left:20px;" type="primary" @click.native="addStaff" :loading="editLoading">添加人员</el-button>
				<el-button @click.native="editFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="addSubmit" :loading="editLoading">提交</el-button>
			</div>
		</el-dialog>

        <!--新增界面-->
		<el-dialog title="新增人员" v-if="addFormVisible" :visible.sync="addFormVisible" :close-on-click-modal="false" customClass='customWidth'>
			<el-form :model="addForm" label-width="100px" :rules="formRules" ref="addForm" :inline="true" class="demo-form-inline">
				<el-form-item label="姓名" prop="username">
					<el-input v-model="addForm.username" autocomplete="off" placeholder="请输入姓名"></el-input>
				</el-form-item>
				<el-form-item label="手机号" prop="account">
					<el-input v-model="addForm.account" autocomplete="off" placeholder="请输入手机号（登录账号）"></el-input>
				</el-form-item>
                <el-form-item label="公司" prop="companyId">
					<el-select v-model="addForm.companyId" clearable filterable placeholder="请选择所属公司" style="width:202px">
                        <el-option v-for="item in staffComp" :key="item.id" :label="item.companyName" :value="item.id">
                        </el-option>
                    </el-select>
				</el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="addForm.roleName" autocomplete="off" placeholder="请输入备注"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
                <span style="color:#f00;float:left;margin-left:60px;">初始密码：000000</span>
				<el-button @click.native="addFormVisible = false">取消</el-button>
                <el-button type="primary" @click.native="addPeople(1)" :loading="addLoading">提交并新增</el-button>
				<el-button type="primary" @click.native="addPeople(0)" :loading="addLoading">提交</el-button>
			</div>
		</el-dialog>
    </section>
</template>

<script>
    import util from "../../common/js/util";
    export default {
        data() {
            var checkPhone = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('请输入联系方式'));
                } else {
                    const reg = /^1[0-9]\d{9}$/
                    if (reg.test(value)) {
                        callback();
                    } else {
                        return callback(new Error('请输入正确的联系方式'));
                    }
                }
            };
            return {
                activeNames: ['1','2','3'],

                detailId: this.$route.params.id,
                user: JSON.parse(sessionStorage.getItem('user')),
                //临时数据
                proDetail: {},
                files: [],
                opers: [],

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

                listLoading: false,
                modelsLoading: false,
                upLoading: false,
                oplistLoading: false,
                activePage: 0,

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

                company: [],

                staffComp: [],
                allUser: [],
                assets: [],
                produce: [],
                charger: [],
                general: [],

                formRules: {
					projectName: [
						{ required: true, message: '请输入项目名称', trigger: 'blur' }
                    ],
                    customerCompany: [
                        { required: true, message: '请选择客户公司', trigger: 'blur' }
                    ],
                    modelIds: [
                        { required: true, message: '请选择项目模具', trigger: ['blur','change'] }
                    ],
                    managerId: [
                        { required: true, message: '请选择项目经理', trigger: ['blur','change'] }
                    ],
                    ownerApproverId: [
                        { required: true, message: '请选择资产方审批人', trigger: ['blur','change'] }
                    ],
                    customerApproverId: [
                        { required: true, message: '请选择生产方审批人', trigger: ['blur','change'] }
                    ],
                    // 新建人员
                    username: [
						{ required: true, message: '请输入姓名', trigger: 'blur' }
                    ],
                    account: [
						{ required: true, validator: checkPhone, trigger: 'blur'}
                    ],
                    teamName: [
						{ required: true, message: '请选择人员类型', trigger: ["blur",'change'] }
					],
                    companyId: [
						{ required: true, message: '请选择所属公司', trigger: ["blur",'change'] }
					],
                },
                
                editFormVisible: false,//编辑界面是否显示
				editLoading: false,
				//编辑界面数据
				editForm: {
					projectName: '',
                    customerCompany: [],
                    managerId: '',
                    ownerApproverId: '',
                    customerApproverId: '',
                    modelIds: [],
                    users: []
                },

                //新增界面是否显示
                addFormVisible: false,
				addLoading: false,
				//新增界面数据
				addForm: {
					username: '',
                    account: '',
					companyId: '',
                    roleName: '',
                    flag: 0
				},
            };
        },
        methods: {
            //返回
            backToList() {
                this.$router.go(-1);
            },

            toMold(id) {
                this.$router.push('/moldList/' + id + "/0");
            },
            
            handleClick(tab, event) {
            },

            //获取详情
            getDetail() {
                this.modelsLoading = true;
                this.http.post(this.port.project.projectDetail, {
                    id: this.detailId
                }, res => {
                    this.modelsLoading = false;
                    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();
                            this.getStaff();
                        }
                    } else {
                        this.$message({
                            message: res.msg,
                            type: 'error'
                        });
                    }
                }, error => {
                    this.modelsLoading = false;
                    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() {
                // 获取公司
                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.proDetail.ownerCompany){
                                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.chooseModelList, {
                    // parentId: this.user.parentId,
                    // id: this.user.id
                    projectId: this.detailId
                }, res => {
                    if (res.code == "ok") {
                        this.molds = res.data;
                    } else {
                        this.$message({
                            message: res.msg,
                            type: 'error'
                        });
                    }
                }, error => {
                    this.$message({
                        message: error,
                        type: 'error'
                    });
                })

                this.http.post(this.port.base.getCompanyByPro, {
                    projectId: this.detailId
                }, res => {
                    if (res.code == "ok") {
                        this.staffComp = res.data;
                    } else {
                        this.$message({
                            message: res.msg,
                            type: 'error'
                        });
                    }
                }, error => {
                    this.$message({
                        message: error,
                        type: 'error'
                    });
                })
            },

            doSomething(e){
                e.stopPropagation();
            },

            // 获取人员
            getStaff() {
                // 获取人员
                var compIds = this.proDetail.ownerCompany;
                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,
                    projectId: this.detailId
                } , res => {
                    if (res.code == "ok") {
                        var list = res.data , assets = [] , produce = [];
                        for(var i in list) {
                            if(list[i].companyId == this.proDetail.ownerCompany){
                                if(list[i].id != this.user.id){
                                    if(list[i].id != this.proDetail.managerId){
                                        assets.push(list[i])
                                    }
                                }
                            } else {
                                produce.push(list[i])
                            }
                        }

                        this.allUser = res.data;
                        this.charger = res.data;
                        this.assets = assets;
                        this.produce = produce;
                        this.general = res.data;
                        this.setMember();
                    } else {
                        this.$message({
                            message: res.msg,
                            type: 'error'
                        });
                    }
                }, error => {
                    this.$message({
                        message: error,
                        type: 'error'
                    });
                })
            },

            //切换人员
            changeStaff(i) {
                if(i == 0){
                    var list = this.allUser , array = [];
                    for(var i in list){ 
                        if(list[i].id != this.editForm.customerApproverId && list[i].id != this.editForm.managerId.id && list[i].id != this.editForm.ownerApproverId){
                            array.push(list[i])
                        }
                    }
                    
                    this.general = array;
                } else if(i == 1) {
                    var list = this.allUser , str = this.editForm.users.toString() , array = [] , assets = [] , produce = [];
                    for(var i in list) {
                        if(str.indexOf(list[i].id) == -1) {
                            array.push(list[i]);
                        }
                    }

                    for(var i in list) {
                        if(str.indexOf(list[i].id) == -1) {
                            if(list[i].subordinateType == 0){
                                assets.push(list[i])
                            } else {
                                produce.push(list[i])
                            }
                        }
                    }

                    this.charger = array;
                    this.assets = assets;
                    this.produce = produce;
                }
            },

            //选择公司切换人员
            companyChange() {
                var param = {} ,
                    str = this.proDetail.ownerCompany;
                for(var i in this.editForm.modelIds){
                    str += "," + this.editForm.modelIds[i].produceCompanyId;
                }
                param.companyIds = str;
                param.id = this.user.id;
                param.projectId = this.detailId;
                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.proDetail.ownerCompany){
                                if(list[i].id != this.user.id){
                                    if(list[i].id != this.proDetail.managerId){
                                        assets.push(list[i])
                                    }
                                }
                            } else {
                                produce.push(list[i])
                            }
                        }
                        this.editForm.managerId = "";
                        this.editForm.customerApproverId = "";
                        this.editForm.users = [];
                        this.allUser = res.data;
                        this.charger = res.data;
                        this.assets = assets;
                        this.produce = produce;
                        this.general = res.data;
                        this.setMember();
                    } else {
                        this.$message({
                            message: res.msg,
                            type: 'error'
                        });
                    }
                }, error => {
                    this.$message({
                        message: error,
                        type: 'error'
                    });
                })
            },

            //打开编辑页面
            edit() {
                var compArr = [] ,
                    manager = {} ,
                    ownerApproverId = '' ,
                    customerApproverId = '' ,
                    moldArr = [] ,
                    assets = [] ,
                    produce = [] ,
                    users = [];
                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.proDetail.models[j])
                        }
                    }
                }

                for(var i in this.proDetail.participateUsers){
                    users.push(this.proDetail.participateUsers[i].id)
                }

                this.editForm = {
                    id: this.proDetail.id,
                    projectName: this.proDetail.projectName,
                    customerCompany: compArr,
                    managerId: manager,
                    ownerApproverId: ownerApproverId,
                    customerApproverId: customerApproverId,
                    modelIds: moldArr,
                    users: users
                }
                this.setMember();

                this.editFormVisible = true;
            },

            setMember() {
                var list = this.allUser , array = [];
                for(var i in list){ 
                    if(list[i].id != this.editForm.customerApproverId && list[i].id != this.editForm.managerId.id && list[i].id != this.editForm.ownerApproverId){
                        array.push(list[i])
                    }
                }
                this.general = array;

                var list = this.allUser , str = this.editForm.users.toString() , newArray = [] , assets = [] , produce = [];
                for(var i in list) {
                    if(str.indexOf(list[i].id) == -1) {
                        newArray.push(list[i]);
                    }
                }

                for(var i in list) {
                    if(str.indexOf(list[i].id) == -1) {
                        if(list[i].subordinateType == 0){
                            assets.push(list[i])
                        } else {
                            produce.push(list[i])
                        }
                    }
                }

                this.charger = newArray;
                this.assets = assets;
                this.produce = produce;
            },

            //提交
            addSubmit() {
                this.$refs.editForm.validate((valid) => {
					if (valid) {
                        var cId = "",
                            cName = "",
                            modelIds = "",
                            userIds = "";
                        for(var i in this.editForm.modelIds){
                            if(cId.indexOf(this.editForm.modelIds[i].produceCompanyId) == -1){
                                cId += this.editForm.modelIds[i].produceCompanyId + ",";
                                cName += this.editForm.modelIds[i].produceCompanyName + ",";
                            }
                            modelIds += this.editForm.modelIds[i].id + ","
                        }
                        cId = cId.substring(0,cId.length-1);
                        cName = cName.substring(0,cName.length-1);
                        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] + ","
                        //     }
                        // }

                        for(var i in this.editForm.users) {
                            if(i == this.editForm.users.length -1){
                                userIds += this.editForm.users[i]
                            } else {
                                userIds += this.editForm.users[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'
                            });
                        })
					}
				});
            },

            //打开新增人员
            addStaff() {
                this.addFormVisible = true;
				this.addForm = {
                    parentId: this.user.id,
					username: '',
                    account: '',
					companyId: '',
                    roleName: '',
                    projectIds: this.detailId,
                    flag: 0
				};
            },

            addPeople(i) {
                this.$refs.addForm.validate((valid) => {
					if (valid) {
                        if(i == 0){
                            this.addLoading = true;
                        }
                        this.http.post(this.port.project.addUser, this.addForm , res => {
                            if(i == 0){ this.addLoading = false; }
                            else { this.$refs.addForm.resetFields();this.addForm.roleName = "" }
                            if (res.code == "ok") {
                                if(i == 0){ this.addFormVisible = false; }
                                this.getStaff();
                                this.$message({
                                    message: '创建成功',
                                    type: 'success'
                                });
                            } else {
                                this.$message({
                                    message: res.msg,
                                    type: 'error'
                                });
                            }
                        }, error => {
                            if(i == 0){ this.addLoading = false;this.addFormVisible = false; }
                            else { this.$refs.addForm.resetFields();this.addForm.roleName = "" }
                            this.$message({
                                message: error,
                                type: 'error'
                            });
                        })
					}
				});
            },

            //上传
            uploadFile(params) {
                this.upLoading = true;
                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 => {
                    this.upLoading = false;
                    this.$refs.upload.clearFiles();
                    if (res.code == "ok") {
                        this.$message({
                            message: '上传成功',
                            type: 'success'
                        });
                        this.getFileList();
                        this.getOperList();
                    } else {
                        this.$message({
                            message: res.msg,
                            type: 'error'
                        });
                    }
                }, error => {
                    this.upLoading = false;
                    this.$refs.upload.clearFiles();
                    this.$message({
                        message: error,
                        type: 'error'
                    });
                })
            },

            //下载
            dowloadFile(row) {
                this.http.post(this.port.project.dowloadFile, {
                    id: row.id
                } , res => {
                    // const elink = document.createElement('a')
                    // elink.download = row.fileName
                    // elink.style.display = 'none'
                    // const blob = new Blob([res])
                    // elink.href = URL.createObjectURL(blob)
                    // document.body.appendChild(elink)
                    // elink.click()
                    // document.body.removeChild(elink)
                    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;
    }

    .el-collapse {
        border: none;
    }
</style>