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

<template>
    <section>
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true">
                <el-form-item label="项目列表">
                    
                </el-form-item>
                <el-form-item >
                    <div>
                    <el-input style="float:left;" v-model="keyword" class="input-with-select" placeholder="请输入项目名称关键字" clearable="true">
                        <el-select v-model="searchField" style="width:120px;"  slot="prepend" placeholder="请选择">
                            <el-option label="项目名称" value=1 ></el-option>
                            <el-option label="项目编码" value=2></el-option>
                        </el-select>
                        <el-button slot="append" @click="searchList" icon="el-icon-search"></el-button>
                    </el-input>
                    </div>
                </el-form-item>

                <el-form-item v-if="user.company.packageProject==1">
                    <span style="margin-left:10px;margin-right:10px;color:#606266;">状态</span>
                    <el-select v-model="status" style="width:120px;"  placeholder="请选择" @change="searchList">
                            <el-option label="全部" value=0 ></el-option>
                            <el-option label="进行中" value=1 ></el-option>
                            <el-option label="已完成" value=2 ></el-option>
                            <el-option label="已撤销" value=3 ></el-option>
                        </el-select>
                </el-form-item>
                <!-- 项目成本基线条目 -->
                <el-form-item style="float:right;" v-if="user.role == 1||user.role == 2||user.role == 5">
                    <el-link type="primary" :underline="false" @click="showBaseCostItemDialog">基线成本项</el-link>
                </el-form-item> 
                <el-form-item style="float:right;" v-if="user.role == 1||user.role == 2||user.role == 5">
                    <el-link type="primary" style="margin-left:5px;" :underline="false" href="./upload/项目导入模板.xlsx" download="项目导入模板.xlsx">模板下载</el-link>
                </el-form-item>
                <el-form-item style="float:right;" v-if="user.role == 1||user.role == 2||user.role == 5">
                    <el-upload ref="upload" style="margin-left:5px;" action="#" :limit="1" :http-request="importProject" :show-file-list="false">
                        <el-link type="primary" :underline="false" >导入项目</el-link>
                    </el-upload>
                </el-form-item> 
                <el-form-item style="float:right;" v-if="user.role == 1||user.role == 2||user.role == 5">
                    <el-link type="primary" :underline="false" @click="handleAdd(-1,null)">新增项目</el-link>
                </el-form-item>
                <el-form-item style="float:right;" v-if="user.company.packageProject==1">
                    <router-link to="/projectGantt" >
                    <el-link type="primary" :underline="false" >甘特图</el-link>
                    </router-link>
                </el-form-item>
            </el-form>
        </el-col>

        <!--列表-->
        <el-table :data="list" highlight-current-row v-loading="listLoading" :height="tableHeight" style="width: 100%;">
            <el-table-column type="index" width="60">
                <template slot-scope="scope" >
                        {{scope.$index+1+(page-1)*size}}
                    </template>
            </el-table-column>
            <el-table-column prop="projectCode" label="项目编码" sortable width="150"></el-table-column>
            <el-table-column prop="projectName" label="项目名称" sortable>
                 <template slot-scope="scope">
                    <el-link type="primary" v-if="user.company.packageProject==1" :href="'#/projectInside/'+scope.row.id">{{scope.row.projectName}}</el-link>
                    <span v-if="user.company.packageProject==0" >{{scope.row.projectName}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="inchargerName" label="负责人" sortable width="150">
                <template slot-scope="scope">
                    <el-link type="primary" @click="showUser(scope.row.inchargerId)">{{scope.row.inchargerName}}</el-link>
                </template>
            </el-table-column>
            <el-table-column prop="participator" label="参与者" sortable v-if="user.company.packageProject==0">
                <template slot-scope="scope">
                    <v-for v-for="par in scope.row.participator" :key="par.id" >
                        <el-link style="margin-right:10px;" type="primary" @click="showUser(par.id)">{{par.name}}</el-link>
                    </v-for>
                </template>
            </el-table-column>
            <!-- 客户管理 -->
            <el-table-column prop="customerName" label="客户"  v-if="user.company.packageCustomer == 1">
            </el-table-column>
            <!--专业项目协作-->
            <el-table-column prop="status" label="状态" width="100" v-if="user.company.packageProject == 1">
                <template slot-scope="scope">
                    {{scope.row.status == null?"-":statusTxt[scope.row.status]}}
                </template>
            </el-table-column>
            <el-table-column prop="progress" label="完成度" width="100"  v-if="user.company.packageProject == 1">
                <template slot-scope="scope">
                    {{scope.row.progress==null?"-":scope.row.progress}}%
                </template>
            </el-table-column>
            <el-table-column label="操作" width="290" v-if="user.role == 1||user.role == 2||user.role == 5 || user.leader">
                <template slot-scope="scope">
                    <el-button v-if="user.role>0" size="mini"  @click="subProject(scope.row)">子项目</el-button>
                    <el-button size="mini" v-if="user.role>0 || user.id==scope.row.inchargerId" type="primary" @click="handleAdd(scope.$index, scope.row)">编辑</el-button>
                    <el-button v-if="user.role>0" size="mini"  @click="deletePro(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--工具条-->
        <el-col :span="24" class="toolbar">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[20 , 50 , 80 , 100]"
                :page-size="20"
                layout="total, sizes, prev, pager, next"
                :total="total"
                style="float:right;"
            ></el-pagination>
        </el-col>

        <!--新增界面-->
        <el-dialog :title="title" v-if="addFormVisible" :visible.sync="addFormVisible" :close-on-click-modal="false" customClass="customWidth" width="800px">
            <el-form ref="form1" :model="addForm" :rules="rules" label-width="120px">
                <el-form-item label="项目编号" >
                    <el-input v-model="addForm.code" :disabled="user.role==0" placeholder="请输入项目编号" clearable></el-input>
                </el-form-item>
                <el-form-item label="项目名称" prop="name">
                    <el-input v-model="addForm.name" :disabled="user.role==0" placeholder="请输入项目名称" clearable></el-input>
                </el-form-item>
                <el-form-item label="客户" v-if="user.company.packageCustomer == 1">
                    <el-select v-model="addForm.customerId" clearable="true" filterable placeholder="请选择客户" style="width:100%;" >
                        <el-option v-for="item in customerList" :key="item.id" :label="item.customerName" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="全部参与者">
                    <el-input  @focus="showChooseMembTree" v-model="addForm.userNames"></el-input>
                    <!-- <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" :disabled="addForm.userId.length==0 ||  user.role==0" filterable placeholder="请选择负责人" style="width:100%;" >
                        <el-option v-for="item in participator" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <!--专业项目协作版本功能 -->
                <el-form-item label="级别" v-if="user.company.packageProject==1">
                    <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;" v-if="user.company.packageProject==1">项目预算</span>
                    <el-input v-model="addForm.budget"    style="width:32%;"
                    placeholder="整数" clearable @keyup.native="number"></el-input><span style="margin-left:10px;">元</span> -->

                <!-- 增加合同金额字段 -->
                        <span style="margin-left:63px;margin-right:10px;" v-if="user.company.packageProject==1">合同金额</span>
                        <el-input id="contractAmount" v-model="addForm.contractAmount" style="width:33%;"
                        placeholder="整数" clearable  @keyup.native="restrictNumber('contractAmount')" ></el-input><span style="margin-left:10px;">元</span>
                <!-- 增加合同金额字段 -->   

                </el-form-item>
                <el-form-item label="开始日期" prop="planStartDate" v-if="user.company.packageProject==1" style="float: left" >
                    <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" v-if="user.company.packageProject==1" style="float: left" >
                    <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>
            <!-- 项目基线 -->
                <!-- <div style="width: 100%;border: 1px solid #ddd"></div> -->
                
                <div style="margin: 90px 0 30px 0" >
                    <el-divider></el-divider>
                    <span class="el-dialog__title">成本基线</span>
                </div>
            <!--新版 -->
            <span class="rg_span" v-for="(item, index) in projectBaseCostData" :key="item.id">
                <span style="width:120px;display: inline-block;" v-if="user.company.packageProject==1">{{item.baseName}}</span>
                <el-input :id="'baseCost'+index" @input="addUpfun()" v-model="item.baseAmount" style="width:200px; margin-bottom: 20px"
                placeholder="整数" clearable  @keyup.native="restrictNumber('baseCost'+index)"></el-input><span style="margin-left:10px;">元</span>
            </span>    

            <!-- <span class="rg_span">
                <span style="width:120px;display: inline-block;" v-if="user.company.packageProject==1">人工成本</span>
                <el-input @input="addUpfun(addForm.baseMan)" v-model="addForm.baseMan" style="width:200px; margin-bottom: 20px"
                placeholder="整数" clearable  @keyup.native="addForm.baseMan=addForm.baseMan.replace(/[^\d]/g,'');"></el-input><span style="margin-left:10px;">元</span>
            </span>
            <span class="rg_span">
                <span style="width:120px;display: inline-block;" v-if="user.company.packageProject==1">费用</span>
                <el-input @input="addUpfun(addForm.baseFee)" v-model="addForm.baseFee" style="width:200px;"
                placeholder="整数" clearable  @keyup.native="addForm.baseFee=addForm.baseFee.replace(/[^\d]/g,'');"></el-input><span style="margin-left:10px;">元</span>
            </span>
            <div class="rg_span" style="margin-bottom: 20px;">
                <span style=" width:120px;display: inline-block;" v-if="user.company.packageProject==1">外包费用</span>
                <el-input @input="addUpfun(addForm.baseOutsourcing)" v-model="addForm.baseOutsourcing" style="width:200px;"
                placeholder="整数" clearable @keyup.native="addForm.baseOutsourcing=addForm.baseOutsourcing.replace(/[^\d]/g,'');"></el-input><span style="margin-left:10px;">元</span>
            </div>
            <div style="display: inline-block;" class="rg_span">
                <span style="width:120px;display: inline-block;text-align: right;" v-if="user.company.packageProject==1">预留风险金额1</span>
                <el-input @input="addUpfun(addForm.baseRisk1)" v-model="addForm.baseRisk1" style="width:200px;"
                placeholder="整数" clearable @keyup.native="addForm.baseRisk1=addForm.baseRisk1.replace(/[^\d]/g,'');"></el-input><span style="margin-left:10px;">元</span>
            </div>
            <div class="rg_span">
                <span style="width:120px;display: inline-block;text-align: right;" v-if="user.company.packageProject==1">预留风险金额2</span>
                <el-input @input="addUpfun(addForm.baseRisk2)" v-model="addForm.baseRisk2" style="width:200px;"
                placeholder="整数" clearable @keyup.native="addForm.baseRisk2=addForm.baseRisk2.replace(/[^\d]/g,'');"></el-input><span style="margin-left:10px;">元</span>
            </div> -->
            <!-- 合计 -->
            <div style="margin-top: 10px;float:right;">
                <span style="margin-right:50px;margin-right:10px;" v-if="user.company.packageProject==1">合计</span>
                 <span v-if="addForm.budget <= 0 || addForm.budget == undefined">0</span>
                 <span v-else>{{addForm.budget | numberToCurrency}}</span>
                <span style="margin-right:50px;margin-left:10px;">元</span>
            </div>
            </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="查看详情" 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>{{roleArray[userDetail.role]}}</span></div>
            <div class="line"><span>部门</span><span>{{userDetail.departmentName}}</span></div>
            <div class="line" v-if="user.role>0&&user.role<=3"><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="子项目列表" show-header="false" v-if="subProjectVisible" :visible.sync="subProjectVisible" :close-on-click-modal="false" customClass="customWidth" width="500px">
            <el-table :data="subProjectList" highlight-current-row  height="400" style="width: 100%;">
            <el-table-column type="index" width="60" label="序号">
                <template slot-scope="scope" >
                        {{scope.$index+1+(page-1)*size}}
                    </template>
            </el-table-column>
            <el-table-column prop="name" label="名称" ></el-table-column>
            <el-table-column label="操作" width="150">
                <template slot-scope="scope" >
                    <el-button size="small" type="primary" @click="addNewSubProject(scope.row)">编辑</el-button>
                    <el-button size="small" type="danger" @click="deleteSubPro(scope.row)">删除</el-button>
                </template>
            </el-table-column>

            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="subProjectVisible = false" >关闭</el-button>
                <el-button type="primary" @click="addNewSubProject()" >新增子项目</el-button>
            </div>
        </el-dialog>


        <!-- 新增子项目弹出框 -->
        <el-dialog title="新增/修改子项目" v-if="addSubProject" :visible.sync="addSubProject" :close-on-click-modal="false" customClass="customWidth" width="500px">
            <el-form ref="form2" :model="addForm" :rules="rules" label-width="100px">
                <el-form-item label="项目名称" prop="name">
                    <el-input v-model="addForm.name" placeholder="请输入项目名称" clearable></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="addSubProject = false">取消</el-button>
                <el-button type="primary" @click="submitInsertSubProject" :loading="addLoading">提交</el-button>
            </div>
        </el-dialog>

        <!-- 项目基线成本项配置弹出框 -->
        <el-dialog title="项目基线成本项管理" show-header="false" v-if="showBaseConfig" :visible.sync="showBaseConfig" :close-on-click-modal="false" customClass="customWidth" width="500px">
            <el-table :data="baseCostItemList" highlight-current-row  height="400" style="width: 100%;">
            <el-table-column type="index" width="60" label="序号">
                <template slot-scope="scope" >
                        {{scope.$index+1+(page-1)*size}}
                    </template>
            </el-table-column>
            <el-table-column prop="name" label="名称" ></el-table-column>
            <el-table-column label="操作" width="150">
                <template slot-scope="scope" >
                    <el-button size="small" type="primary" @click="addNewBaseItem(scope.row)">编辑</el-button>
                    <el-button size="small" type="danger" @click="deleteBaseItem(scope.row)">删除</el-button>
                </template>
            </el-table-column>

            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="showBaseConfig = false" >关闭</el-button>
                <el-button type="primary" @click="addNewBaseItem()" >新增成本项</el-button>
            </div>
        </el-dialog>

        <el-dialog title="新增/修改成本项" v-if="addBaseItemDialog" :visible.sync="addBaseItemDialog" :close-on-click-modal="false" customClass="customWidth" width="500px">
            <el-form ref="form2" :model="addForm" :rules="rules" label-width="100px">
                <el-form-item label="成本项名称" prop="name">
                    <el-input v-model="addForm.name" placeholder="请输入名称" clearable></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="addBaseItemDialog = false">取消</el-button>
                <el-button type="primary" @click="submitInsertBaseItem" :loading="addLoading">提交</el-button>
            </div>
        </el-dialog>

        <!-- 按部门选择人员 -->
        <el-dialog title="选择参与人员"  v-if="chooseParticipVisible" :visible.sync="chooseParticipVisible" :close-on-click-modal="false" customClass="customWidth" width="500px">
            <!-- <el-input style="width:100%" v-model="filterName" placeholder="请输入姓名搜索" @change="findUserInTree"></el-input> -->
            <div class="tree" style="height:400px">
                <el-scrollbar style="height:100%">
                <el-tree :data="deptMembData" show-checkbox :props="defaultProps" node-key="id"
                    ref="chooseMembTree" @check-change="onTreeItemChange" :default-checked-keys="addForm.userId"
                    highlight-current ></el-tree>
                </el-scrollbar>
            </div>
            <div>已选中&nbsp;{{chosenMembCount}}&nbsp;人</div>
            <div slot="footer" class="dialog-footer">
                <el-button  @click="chooseParticipVisible = false" >取消</el-button>
                <el-button type="primary" @click="chooseParticip()" >确定</el-button>
            </div>
        </el-dialog>

    </section>
</template>
<style scoped>
.input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
.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 {
                chosenMembCount:0,
                chosenMembList:[],//选中的人员
                allMembData:[],

                deptMembData: [
                    {
                        id: 0,
                        label: '未分配',
                    }
                ],
                option: [],
                depData: {
                    id: -1,
                    label: '全部人员',
                },
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                filterName:null,
                chooseParticipVisible: false,
                projectBaseCostData:[],
                addBaseItemDialog:false,
                showBaseConfig:false,
                customerList:[],
                roleArray:["普通员工","超级管理员", "系统管理员", "公司高层","人事管理员", "项目管理员"],
                status:null,
                statusTxt:["-","进行中","已完成","已撤销"],
                importanceList:[{id:1,label:'正常'},{id:2,label:'紧急'},{id:3,label:'重要'},{id:4,label:'重要且紧急'}],
                searchField:null,
                keyword:null,
                user: JSON.parse(sessionStorage.getItem("user")),
                userDetailVisible: false,
                userDetail:{},
                date: new Date(),
                users: [],
                participator:[],
                tableHeight: 0,
                listLoading: false,
                total: 0,
                page: 1,
                size: 20,
                list: [],
                subProjectVisible: false,
                subProjectList: [],//子项目列表
                currentProject:{},
                addSubProject: false,
                addFormVisible: false,
                addLoading: false,
                addUp: 0, // 合计
                title: "",
                addForm: {
                    name: '',
                    userId: [],
                    level:1,
                },
                rules: {
                    name: [{ required: true, message: "请输入名称", trigger: "blur" }],
                }
            };
        },
        // 过滤器
        filters: {
            numberToCurrency(value) {
                if (!value) return '0.00'
                // 将数值截取，保留两位小数
                value = value.toFixed(2)
                // 获取整数部分
                const intPart = Math.trunc(value)
                // 整数部分处理，增加,
                const intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
                // 预定义小数部分
                let floatPart = '.00'
                // 将数值截取为小数部分和整数部分
                const valueArray = value.toString().split('.')
                if (valueArray.length === 2) { // 有小数部分
                floatPart = valueArray[1].toString() // 取得小数部分
                return intPartFormat + '.' + floatPart
                }
                return intPartFormat + floatPart
            }
        },
        methods: {
            restrictNumber(targetId) {
                let inpu = document.getElementById(targetId);
                inpu.value = inpu.value.replace(/[^\d.]/g, "");  //仅保留数字和"."
                inpu.value = inpu.value.replace(/\.{2,}/g, "."); //两个连续的"."仅保留第一个"."
                inpu.value = inpu.value.replace(".", "$#*").replace(/\./g,'').replace('$#*','.');//去除其他"."
                inpu.value = inpu.value.replace(/^(\d+)\.(\d\d).*$/, '$1.$2');;//限制只能输入两个小数
                if (inpu.value.indexOf(".") < 0 && inpu.value != "") { //首位是0的话去掉
                    inpu.value = parseFloat(inpu.value);
                }
            },
            showChooseMembTree() {
                this.chosenMembCount = this.participator.length;
                this.chooseParticipVisible = true;
            },
            onTreeItemChange() {
                var chosenList = this.$refs.chooseMembTree.getCheckedNodes();
                var list = chosenList.filter(item=>item.isUser == 1);
                this.chosenMembCount = list.length;
            },
            findUserInTree() {
                if (this.filterName == '') {
                    this.deptMembData = this.allMembData;
                } else {
                    var list = this.findRecursively(this.filterName, this.allMembData);
                    this.deptMembData = list;
                }
            },

            findRecursively(username, list) {
                var filterList = [];
                for (var i=0;i<list.length; i++) {
                    if (list[i].isUser == 1) {
                        if (list[i].label.indexOf(username) >= 0) {
                            //匹配上了
                            filterList.push(list[i]);
                        }
                    } else if (list[i].children != null && list[i].children.length > 0) {
                        var subList = this.findRecursively(username, list[i].children);
                        if (subList.length > 0) {
                            subList.forEach(s=>filterList.push(s));
                        }
                    }
                }
                return filterList;
            },

            //确定选择参与人
            chooseParticip() {
                this.chooseParticipVisible = false;
                var chosenList = this.$refs.chooseMembTree.getCheckedNodes();
                this.chosenMembList = chosenList.filter(item=>item.isUser == 1);
                this.addForm.userNames = '';
                this.addForm.userId = [];
                this.participator = [];
                for (var i=0;i<this.chosenMembList.length; i++) {
                    this.addForm.userId.push(this.chosenMembList[i].id);
                    this.addForm.userNames += this.chosenMembList[i].label+',';
                    var item = {id:this.chosenMembList[i].id, name:this.chosenMembList[i].label};
                    this.participator.push(item);
                }
                if (this.addForm.userNames.length > 0) {
                    this.addForm.userNames = this.addForm.userNames.substring(0, this.addForm.userNames.length-1);
                }
            },
            // 获取部门列表
            getDepartment() {
                this.http.post("/department/listAllMemb", {},
                res => {
                    if (res.code == "ok") {
                        var list = res.data;
                        //设置员工到部门下面
                        this.setUserToDept(list);
                        this.deptMembData = list;
                        //用于筛选过滤
                        this.allMembData = JSON.parse(JSON.stringify(this.deptMembData));
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },
            
            setUserToDept(list) {
                for (var i in list) {
                    if (list[i].children != null) {
                        this.setUserToDept(list[i].children);
                    }
                    
                    if (list[i].userList != null) {
                        if (list[i].children == null) {
                            list[i].children = [];
                        }
                        list[i].userList.forEach(element => {
                            var obj = {id: element.id, label:element.name, parentId:element.departmentId, isUser:1};
                            list[i].children.push(obj);
                        });
                    }
                }
            },
            

            getProjectBaseConfigList() {
                this.http.post('/project-basecost-setting/list',{},
                    res => {
                        if (res.code == "ok") {
                           this.baseCostItemList = res.data;
                           this.$forceUpdate();
                        } else {
                            this.$message({
                                message: res.msg,
                                type: "error"
                            });
                        }
                    },
                    error => {
                        this.$message({
                            message: error,
                            type: "error"
                        });
                        }
                    );
                
            },
            deleteBaseItem(row) {
                this.$confirm("该操作可能造成已有数据丢失，确定要删除吗?","删除成本基线项", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                .then(() => {
                    this.listLoading = true;
                    this.http.post('/project-basecost-setting/delete',{ 
                        id: row.id 
                    },
                    res => {
                        this.listLoading = false;
                        if (res.code == "ok") {
                            this.$message({
                                message: "删除成功",
                                type: "success"
                            });
                            this.getProjectBaseConfigList();
                        } else {
                            this.$message({
                                message: res.msg,
                                type: "error"
                            });
                        }
                    },
                    error => {
                        this.listLoading = false;
                        this.$message({
                            message: error,
                            type: "error"
                        });
                        }
                    );
                })
                .catch(() => {});
            },
            submitInsertBaseItem() {
                this.http.post('/project-basecost-setting/addOrMod',this.addForm,
                    res => {
                        if (res.code == "ok") {
                            this.addBaseItemDialog = false;
                            this.baseCostItemList = res.data;
                            this.$forceUpdate();
                        } else {
                            this.$message({
                                message: res.msg,
                                type: "error"
                            });
                        }
                    },
                    error => {
                        this.$message({
                            message: error,
                            type: "error"
                        });
                        }
                    );
            },
            showBaseCostItemDialog() {
                this.showBaseConfig = true;
            },
            addNewBaseItem(row) {
                this.addBaseItemDialog = true;
                if (row == null) {
                    this.addForm = {}
                } else {
                    this.addForm = row;
                }
            },
            //获取客户列表
            getCustomerList() {
                this.http.post('/customer-info/getAll', {
                },
                res => {
                    if (res.code == "ok") {
                        this.customerList = res.data;
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },
            importProject(item) {
                //首先判断文件类型
                let str = item.file.name.split(".");
                let format = str[str.length - 1];
                if (format != "xls" && format != "xlsx") {
                    this.$message({
                        message: "请选择.xls或.xlsx文件",
                        type: "error"
                    });
                } else {
                    this.listLoading = true;
                    let formData = new FormData();
                    formData.append("file", item.file);
                    formData.append("userId", this.user.id);
                    this.http.uploadFile('/project/importData', formData,
                    res => {
                        this.$refs.upload.clearFiles();
                        this.listLoading = false;
                        if (res.code == "ok") {
                            this.$message({
                                message: "导入成功",
                                type: "success"
                            });
                            this.getList();
                        } else {
                            this.$message({
                                message: res.msg,
                                type: "error"
                            });
                        }
                    },
                    error => {
                        this.$refs.upload.clearFiles();
                        this.listLoading = false;
                        this.$message({
                            message: error,
                            type: "error"
                        });
                    });
                }
            },
            number(){　　
        // 　　　  this.addForm.budget = this.addForm.budget.replace(/[^\.\d]/g,'');
        //         this.addForm.budget = this.addForm.budget.replace('.','');
        　　},
            deleteSubPro(subProject) {
                this.$confirm("确定要删除子项目" + subProject.name + "吗?","删除子项目", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                .then(() => {
                    this.listLoading = true;
                    this.http.post('/sub-project/deleteProject',{ 
                        id: subProject.id 
                    },
                    res => {
                        this.listLoading = false;
                        if (res.code == "ok") {
                            this.$message({
                                message: "删除成功",
                                type: "success"
                            });
                            this.subProject(this.currentProject);
                        } else {
                            this.$message({
                                message: res.msg,
                                type: "error"
                            });
                        }
                    },
                    error => {
                        this.listLoading = false;
                        this.$message({
                            message: error,
                            type: "error"
                        });
                        }
                    );
                })
                .catch(() => {});
            },
            searchList() {
                this.page = 1;
                this.getList();
            },
            addNewSubProject(subProject) {
                console.log(123);
                if (subProject == null) {
                    this.addForm = {projectId: this.currentProject.id, level:1}
                } else {
                    this.addForm = subProject;
                }
                this.addSubProject = true;
            },
            //显示子项目
            subProject(item) {
                this.subProjectVisible = true;
                this.currentProject = item;
                this.http.post('/sub-project/list', {
                    projectId: item.id
                },
                res => {
                    if (res.code == "ok") {
                        this.subProjectList = res.data;
                    } else {
                        this.$message({
                        message: res.msg,
                        type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },
            //显示用户详情
            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"
                    });
                });
            },
            //选择参与人
            changeParticipator() {
                //检查是否在参与人中，如果没有需要加入到参与人中
                this.participator = [];
                this.addForm.userId.forEach(u=>{
                    var list = this.users.filter(au=>au.id == u);
                    if (list.length > 0) {
                        var findUser = list[0];    
                        this.participator.push(findUser);
                    } else {
                        console.log('未找到用户: '+u);
                    }
                    
                })
            },
            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"
                    });
                });
            },

            //分页
            handleCurrentChange(val) {
                this.page = val;
                this.getList();
            },

            handleSizeChange(val) {
                this.size = val;
                this.getList();
            },

            //获取项目列表
            getList() {
                this.listLoading = true;
                this.http.post(this.port.project.listPage, {
                    pageIndex: this.page,
                    pageSize: this.size,
                    keyword:this.keyword,
                    searchField: this.searchField,
                    status: this.status
                },
                res => {
                    this.listLoading = false;
                    if (res.code == "ok") {
                        var list = res.data.records;
                        for(var i in list) {
                            var participator = list[i].participator , str = "";
                            for(var j in participator) {
                                if(j == participator.length-1) {
                                    str += participator[j].name
                                } else {
                                    str += participator[j].name + ','
                                }
                            }
                            list[i].userNames = str;
                        }
                        this.list = list;
                        this.total = res.data.total;
                    } else {
                        this.$message({
                        message: res.msg,
                        type: "error"
                        });
                    }
                },
                error => {
                    this.listLoading = false;
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },

            //显示新增界面
            handleAdd(i, item) {
                if(i == -1) {
                    this.title = "新增项目";
                    this.addForm = {
                        name: '',
                        userId: [],
                        userNames:'',
                        code:'',
                        inchargerId:null,
                        level:1,
                        customerId:null,
                    }
                    this.projectBaseCostData = [];
                    for (var m=0;m<this.baseCostItemList.length; m++) {
                        this.projectBaseCostData.push({baseId: this.baseCostItemList[m].id, baseName:this.baseCostItemList[m].name, baseAmount:0});
                    }
                } else {
                    this.title = "修改项目";
                    var list = item.participator , arr = [];
                    var names = '';
                    for(var j in list) {
                        arr.push(list[j].id)
                        names += list[j].name+',';
                    }
                    if (names.length > 0) {
                        names = names.substring(0, names.length -1);
                    }
                    this.addForm = {
                        id: item.id,
                        name: item.projectName,
                        userId: arr,
                        userNames:names,
                        code:item.projectCode,
                        inchargerId: item.inchargerId,
                        level: item.level,
                        planStartDate: item.planStartDate,
                        planEndDate: item.planEndDate,
                        budget: item.budget,
                        baseMan: item.baseMan,
                        contractAmount: item.contractAmount,
                        baseFee: item.baseFee,
                        baseRisk1: item.baseRisk1,
                        baseRisk2: item.baseRisk2,
                        baseOutsourcing: item.baseOutsourcing,
                        customerId:item.customerId==0?null:item.customerId,
                    }
                    this.changeParticipator();
                    this.getProjectBaseData(item.id);
                }
                this.addFormVisible = true;
            },

            getProjectBaseData(projectId) {
                this.http.post('/project-basecost/get',{projectId: projectId},
                        res => {
                            if (res.code == "ok") {
                               this.projectBaseCostData = res.data;
                            } else {
                                this.$message({
                                    message: res.msg,
                                    type: "error"
                                });
                            }
                        },
                        error => {
                            this.listLoading = false;
                            this.$message({
                                message: error,
                                type: "error"
                            });
                            }
                        );
            },

            //提交子项目创建修改请求
            submitInsertSubProject () {
                this.$refs.form2.validate(valid => {
                    if (valid) {
                        this.http.post('/sub-project/saveOrUpdate',this.addForm,
                        res => {
                            if (res.code == "ok") {
                                this.$message({
                                    message: "操作成功",
                                    type: "success"
                                });
                                this.subProject(this.currentProject);
                                this.addSubProject = false;
                            } else {
                                this.$message({
                                    message: res.msg,
                                    type: "error"
                                });
                            }
                        },
                        error => {
                            this.listLoading = false;
                            this.$message({
                                message: error,
                                type: "error"
                            });
                            }
                        );
                        }
                });
            },
            // 项目基线合计
            addUpfun() {
                var total = 0;
                for (var i=0;i<this.projectBaseCostData.length; i++) {
                    total += parseFloat(this.projectBaseCostData[i].baseAmount);
                }
                this.addForm.budget = total;
                // var a = '0'
                // var q = '0'
                // var w = '0'
                // var e = '0'
                // var r = '0'
                // //  this.addForm.baseMan === undefined || this.addForm.baseMan === NaN ? this.addForm.baseMa = '0' : this.addForm.baseMan
                // if (this.addForm.baseMan == undefined || this.addForm.baseMan == NaN) {
                //     a = 0
                // } else {
                //     a = this.addForm.baseMan
                // }
                // if (this.addForm.baseFee !== undefined) q = this.addForm.baseFee
                // if (this.addForm.baseOutsourcing !== undefined) w = this.addForm.baseOutsourcing
                // if (this.addForm.baseRisk1 !== undefined) e = this.addForm.baseRisk1
                // if (this.addForm.baseRisk2 !== undefined) r = this.addForm.baseRisk2
                // this.addForm.budget = +a + +q + +w + +e + +r
            },
            submitInsert() {
                this.$refs.form1.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.contractAmount != null) {
                            formData.append("contractAmount", this.addForm.contractAmount);
                        }
                        if (this.projectBaseCostData != null) {
                            formData.append("projectBaseCostData", JSON.stringify(this.projectBaseCostData));
                            //计算总预算成本
                            if (this.addForm.budget == null) {
                                this.addForm.budget = 0;
                            }
                            formData.append("budget", this.addForm.budget);
                        }
                        if (this.addForm.customerId == null) {
                            formData.append("customerId", 0);
                        } else {
                            formData.append("customerId", this.addForm.customerId);
                        }
                        
                        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.getList();
                            } else {
                                this.$message({
                                    message: res.msg,
                                    type: "error"
                                });
                            }
                        },
                        error => {
                            this.addLoading = false;
                            this.$message({
                                message: error,
                                type: "error"
                            });
                        });
                        }
                });
            },

            // 删除
            deletePro(i, item) {
                this.$confirm("确定要项目" + item.projectName + "吗?","删除项目", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                .then(() => {
                    this.listLoading = true;
                    this.http.post(this.port.project.delete,{ 
                        id: item.id 
                    },
                    res => {
                        this.listLoading = false;
                        if (res.code == "ok") {
                            this.$message({
                                message: "删除成功",
                                type: "success"
                            });
                            this.getList();
                        } else {
                            this.$message({
                                message: res.msg,
                                type: "error"
                            });
                        }
                    },
                    error => {
                        this.listLoading = false;
                        this.$message({
                            message: error,
                            type: "error"
                        });
                        }
                    );
                })
                .catch(() => {});
            },

            detail(i) {
                this.$router.push("/list/" + this.list[i].id + "/" + this.list[i].projectName);
            }
        },
        created() {
            let height = window.innerHeight;
            this.tableHeight = height - 195;
            const that = this;
            window.onresize = function temp() {
                that.tableHeight = window.innerHeight - 195;
            };
        },
        mounted() {
            this.getDepartment();
            this.getList();
            this.getUsers();
            this.getCustomerList();
            this.getProjectBaseConfigList();
        }
    };
</script>

<style lang="scss" scoped>
.rg_span{
    display: inline-block;
}
.rg_span span {
    text-align: right;
    box-sizing: border-box;
    padding-right: 10px;
}
.el-dialog__title {
    display: inline-table;
    margin-top: 20px;
}
</style>