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

<template>
    <section class="sectionaa">
        <div v-loading="!componentFlg" :style="'width: 100%;height:'+tableHeight+'px'" id="components">
        <div v-if="componentFlg">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane :label="$t('maincontent')" name="project" @click="null" disabled=true>
                <template slot="label">
                    <i type="default" size="mini"  class="el-icon-arrow-left" @click="toList" style="margin-left:10px;cursor:pointer;"></i>
                    <!-- <el-select v-model="curProjectId"  size="mini" class="projectCls" @change="onProjectChange" filterable>
                        <el-option v-for="item in projectList"  :key="item.id" :label="item.projectName + '\u3000' + item.projectCode" :value="item.id">
                            <span style="float: left; color: #8492a6; font-size: 13px;">{{ item.projectCode }}</span>
                            <span style="float: right;margin-left: 20px">{{ item.projectName }}</span>
                        </el-option>
                    </el-select> -->
                    
                    <select-project v-model="curProjectId" class="projectCls" @change="onProjectChange"></select-project>
                    
                    <el-dropdown trigger="click" style="margin-right:30px;color:#262626;cursor:pointer;" v-if="projectCreatorId == user.id || projectInchargerId == user.id || permissions.projectManagement || isManageDept">
                        <i class="iconfont firerock-iconcaidan" ></i>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item v-if="currentProject.status == 1" @click.native="finishPro()">
                                <i class="iconfont firerock-iconwancheng"></i>{{ $t('completeproject') }}
                            </el-dropdown-item>
                            <el-dropdown-item divided v-if="currentProject.status == 1" @click.native="cancelPro()">
                                <i class="el-icon-refresh-left"></i>{{ $t('cancelproject') }}
                            </el-dropdown-item>
                            <el-dropdown-item v-if="currentProject.status == 2 || currentProject.status == 3" @click.native="startPro()">
                                <i class="iconfont firerock-iconqidong"></i>{{ $t('restarttheproject') }}
                            </el-dropdown-item>
                            </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </el-tab-pane>
            <el-tab-pane :label="$t('taskkanban')" name="projectInside">
                <el-container style="padding: 0px;">
                    <el-aside :style="'overflow:auto;padding-left:10px;padding-right:5px;height:'+tableHeight+'px;width:'+groupWidth+'px;'">
                        <el-input v-model="groupSearch" size="small" :placeholder="$t('searchgroup')" @input="startSearchGroup" style="margin-top:10px"/>
                        <p ><span class="heavyTxt">{{ $t('other.taskGroup') }}</span>
                            <i class="el-icon-plus pull-right" style="color:#666;margin-right:10px;" @click="createGroup" v-if="projectCreatorId == user.id || projectInchargerId == user.id || permissions.projectManagement || isManageDept"></i>
                        </p>
                        <p style="color: #ff0b0b;font-size: 18px;font-weight: 700;" v-if="user.companyId == '936'">{{ $t('ruXuXiuGaiQingXianLianXiGuanLiYuan') }}</p>
                        <el-menu :default-active="defaultGroupId" ref="defaultMenu"  class="el-menu-vertical-demo" @select="groupChange" style="border-right:none;">
                            <el-menu-item :index="item.id" v-for="item in groupList" :key="item.id"  class="group_style">
                                <div slot="title">
                                <!-- <span class="taskGroupClass">{{item.name}}</span> -->
                                <div style="display: inline-block;">
                                    <el-tooltip effect="dark" :content="item.name" placement="top" v-if="item.name.length > 12">
                                        <span class="taskGroupClass">{{item.name}}</span>
                                    </el-tooltip> 
                                    <span class="taskGroupClass" v-else>{{item.name}}</span>
                                </div>
                                <!-- <el-button size="mini" @click="test(item)">test</el-button> -->
                                <el-dropdown trigger="click" style="float:right;margin-right:-10px;" :disabled="!(user.id == item.inchargerId || user.id == projectCreatorId || user.id == projectInchargerId || permissions.projectManagement || isManageDept)">
                                    <i class="iconfont firerock-iconcaidan" ></i>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item @click.native="copyGroup(item)" :disabled="!(projectCreatorId == user.id || projectInchargerId == user.id || permissions.projectManagement || isManageDept)">
                                            <i class="el-icon-document-copy"></i>
                                            {{ $t('replicationgroup') }}</el-dropdown-item>
                                        <el-dropdown-item divided @click.native="renameGroup(item)" :disabled="!(projectCreatorId == user.id || projectInchargerId == user.id || permissions.projectManagement || isManageDept)">
                                            <i class="el-icon-edit"></i>
                                            {{ $t('changegroups') }}</el-dropdown-item>
                                        <el-dropdown-item divided @click.native="setManDay()" v-if="user.timeType.projectManDay==1" :disabled="!(projectCreatorId == user.id || projectInchargerId == user.id || permissions.projectManagement || isManageDept)">
                                            <i class="el-icon-time"></i>
                                            {{ $t('yuGuGongShi') }}</el-dropdown-item>
                                        <el-dropdown-item divided @click.native="addToTemplate(item)" :disabled="!(projectCreatorId == user.id || projectInchargerId == user.id || permissions.projectManagement || isManageDept)">
                                            <i class="el-icon-plus"></i>
                                            {{ $t('settemplate') }}</el-dropdown-item>
                                        <el-dropdown-item divided @click.native="editIncharger(item)" 
                                        :disabled="!(projectCreatorId == user.id || projectInchargerId == user.id || permissions.projectManagement || isManageDept)">
                                            <i class="el-icon-user"></i>
                                            {{ $t('sethead') }} </el-dropdown-item>
                                        <el-dropdown-item divided @click.native="setupParticipants(item)" 
                                        :disabled="!(projectCreatorId == user.id || projectInchargerId == user.id || item.inchargerId == user.id || permissions.projectManagement || isManageDept)">
                                            <i class="iconfont firerock-iconusers"></i>
                                            {{ $t('aparticipant') }} </el-dropdown-item>
                                        <el-dropdown-item divided @click.native="deleteGroup(item)" :disabled="!(projectCreatorId == user.id || projectInchargerId == user.id || permissions.projectManagement || isManageDept)">
                                            <i class="el-icon-delete"></i>
                                            {{ $t('deletethegroup') }} </el-dropdown-item>
                                        <el-dropdown-item divided @click.native="getGroupDetails(item)">
                                            <i class="el-icon-tickets"></i>
                                            {{ $t('groupdetails') }} </el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                                </div>
                            </el-menu-item>
                        </el-menu>
                        <!--视图 -->
                        <p ><span class="heavyTxt">{{ $t('shi-tu') }}</span></p>
                        <el-menu :default-active="1"  class="el-menu-vertical-demo" @select="viewChange" style="border-right:none;">
                            <el-menu-item :index="item.id" v-for="item in viewList" :key="item.id"  class="group_style">
                                <div slot="title">
                                <span >{{item.name}}</span>
                                </div>
                            </el-menu-item>
                        </el-menu>
                    </el-aside>
                    <!-- 分组详情 -->
                    <el-dialog :title="groupDetailTil" :visible.sync="groupDetailsShow" width="500px" :before-close="handleClose">
                        <div>
                            <el-form label-width="90px">
                                <el-form-item :label="$t('head') + '：'">
                                    <span v-if="user.userNameNeedTranslate != '1'">{{groupDetailData.incharger}}</span>
                                    <span v-if="user.userNameNeedTranslate == '1'">
                                        <TranslationOpenDataText type='userName' :openid='groupDetailData.incharger'></TranslationOpenDataText>
                                    </span>
                                </el-form-item>
                                <el-form-item :label="$t('participantin') + '：'">
                                    <span v-for="(item, index) in groupDetailData.participators" :key="index">
                                        <span v-if="user.userNameNeedTranslate != '1'">
                                            {{item.userName}} 
                                        </span>
                                        <span v-if="user.userNameNeedTranslate == '1'"> 
                                            <TranslationOpenDataText type='userName' :openid='item.userName'></TranslationOpenDataText>
                                        </span>
                                        <span v-if="index < groupDetailData.participators.length - 1">、</span>
                                    </span>
                                </el-form-item>
                                <el-form-item label="wbsCode：" v-if="user.companyId == 936">
                                    <span>{{groupDetailData.wbsCode}}</span>
                                </el-form-item>
                                <el-form-item :label="$t('yuGuGongShi')" v-if="user.timeType.projectManDay">
                                    <span>{{groupDetailData.manDay}}{{ $t('renTian') }} ({{ (groupDetailData.manDay==null?0:groupDetailData.manDay)*user.timeType.allday }}{{ $t('time.hour') }})</span>
                                </el-form-item>
                            </el-form>
                        </div>
                        <span slot="footer" class="dialog-footer">
                            <el-button type="primary" @click="groupDetailsShow = false">{{ $t('btn.determine') }}</el-button>
                        </span>
                    </el-dialog>
                    <span :style="'background:#f0f0f0;width:1px;height:'+tableHeight+'px;'" @click="toggleGroup">
                        
                    </span>

                    <!-- 增加侧边栏的点击效果 -->
                    <div class="sidebar" @click="retract()">
                        <div class="etui">
                            <i class="el-icon-arrow-left" ref="box"></i>
                        </div>
                    </div>
                    
                    <!-- 增加侧边栏的点击效果 -->
                    
                    <el-main style="background:#f7f7f7;padding:0px;position: relative;">
                        <el-row style="color:#999;margin-top:10px;padding: 0px 10px;" :gutter="10">
                            <el-col :span="8">
                                <el-link @click="toggleGroup"><i v-if="selectedGroup != null" :class="groupWidth==0?'el-icon-d-arrow-right':'el-icon-d-arrow-left'" style="margin-top:10px;">{{selectedGroup.name}}</i></el-link>
                            </el-col>
                            
                            <el-col :span="16" style="float:right;" class="hideCompletedFelx">
                                <!-- 隐藏已完成任务 -->
                                <el-checkbox v-model="hideCompleted" style="margin-right: 10px" @change="editHideTask">{{ $t('yinCangYiWanChengRenWu') }}</el-checkbox>
                                <el-select v-model="order" size="small" style="background:#fff;display:inline-block;" @change="orderChange">
                                    <el-option v-for="item in orderList" :key="item.id" :label="item.name" :value="item.id">
                                        <span>{{item.name}}</span>
                                    </el-option>
                                </el-select>
                                <el-button icon="iconfont firerock-icondaochu" style="margin-left:10px" size="mini" @click="showExportDialog">{{ $t('export.export') }}</el-button>
                                <el-button icon="iconfont firerock-icondaoru" size="mini" @click="importTaskDialog = true;importToStageId = stageList[0].id;">{{ $t('dao-ru') }}</el-button>
                            </el-col>
                        </el-row>
                        <!-- <div style="color:#999;margin-top:10px;">
                            <i v-if="selectedGroup != null" class="el-icon-arrow-left" style="margin-top:10px;">{{selectedGroup.name}}</i>
                        
                        </div> -->
                        <div v-if="!displayTable">
                            <div style="width: 100%;overflow-x: auto;">
                                <draggable style="white-space:nowrap;" @update="onMoveStage"
                                v-model="stageList" group="stage" @start="stageDrag=true" @end="stageDrag=false;" draggable=".taskStage" >
                                    <!--每个阶段的拖拽 -->
                                    <!-- <transition-group > -->
                                        <v-flex class="taskStage"  v-for="stage in stageList" :key="stage.id" :style="'height:'+stageListHeight+'px;'">
                                            <div :id="stage.id"
                                            class="taskList" >
                                                
                                                <!--头部显示阶段名称，操作 -->
                                                <div slot="header" style="margin:10px 0px;cursor:move;width:300px" role="task">
                                                    <span class="stage">{{stage.stagesName}}</span><span style="margin-left:10px;color:#303133;font-size:12px;">{{stage.taskList.length}}</span>
                                                    <!-- <i class="el-icon-more" style="float:right;"></i> -->
                                                    <el-dropdown trigger="click" style="float:right;cursor:pointer;" v-if="canEditStageList">
                                                            <i class="el-icon-more" ></i>
                                                            <el-dropdown-menu slot="dropdown">
                                                                <el-dropdown-item @click.native="addTask(stage)">
                                                                    <i class="el-icon-document-add"></i>
                                                                    {{ $t('createtask ') }}</el-dropdown-item>
                                                                <el-dropdown-item @click.native="renameStage(stage)">
                                                                    <i class="el-icon-edit"></i>
                                                                    {{ $t('renamingalist') }} </el-dropdown-item>
                                                                <el-dropdown-item divided @click.native="deleteStage(stage)">
                                                                    <i class="el-icon-delete"></i>{{$t('deleteList ')}} </el-dropdown-item>
                                                            </el-dropdown-menu>
                                                    </el-dropdown>
                                                </div>

                                                <draggable class="taskListin" :style="'max-height:' + taskListinH + 'px;'" @start="drag=true" @end="drag=false" draggable=".taskCard" ghostClass="ghost" @update="onChange" @add="onChange" group="task1" :id="stage.id">
                                                    <div v-for="element in stage.taskList" :id="element.id" :key="element.id" class="taskCard" ref="tasks" @click="editTask(element)" :style="element.taskStatus==0?'':'background:#eFeFeF;'">
                                                        <!--任务卡片内容显示 -->
                                                        <div>
                                                            <div v-if="element.taskLevel == 2" class="taskImg hong"><img src="../../assets/image/hong.png" alt=""></div>
                                                            <div v-if="element.taskLevel == 1" class="taskImg huang"><img src="../../assets/image/huang.png" alt=""></div>
                                                            <div v-if="element.taskLevel == 0" class="taskImg hui"><img src="../../assets/image/hui.png" alt=""></div>
                                                            <el-checkbox :disabled="element.taskStatus==2 || element.subTaskList.length > element.subTaskFinishNum" :checked="element.taskStatus==1?true:false" size="large" class="cb"  
                                                            @change="finishTask(element)"
                                                            @click.stop.native=""
                                                            ></el-checkbox>
                                                            <el-tooltip class="item" effect="dark" :content="element.name" placement="top">
                                                            <label class="task_name" :style="'background:'+(element.taskStatus==0?'#ffffff;':'#eFeFeF;')"><span>{{element.name}}</span></label>
                                                            </el-tooltip>
                                                            <i :class="taskTypeIcon[element.taskType]" :style="'float:right;color:'+taskTypeColor[element.taskType]+';margin-right:8px;margin-top:8px;'" ></i>
                                                            </div>
                                                        <div style="margin: 10px 0px;color:#666;" @click="timess(element.endDate)">
                                                            <span v-if="element.endDate >= times || element.taskStatus == 1"><i v-if="element.endDate != null" class="el-icon-date" style="margin-left:5px">&nbsp;&nbsp;{{element.endDate}}</i></span>
                                                            <span v-else><em v-if="element.endDate != null" style="display: inline-block;padding:3px 5px"><i v-if="element.endDate != null" class="el-icon-date"><span  class="element_span"> &nbsp;&nbsp;{{element.endDate}}{{ $t('jie-zhi') }}</span></i></em></span>
                                                            <span v-if="element.executorName">
                                                            <span v-for="(exeItem, exeIndex) in element.executorName.split(',')" :key="exeIndex" :style="element.executorColor ? 'background:' + element.executorColor.split(',')[exeIndex] : ''" class="user_name_icon">
                                                                <span v-if="user.userNameNeedTranslate != '1'">
                                                                    {{exeItem.length>2?exeItem.substring(exeItem.length-2, exeItem.length):exeItem}}
                                                                </span>
                                                                <span v-if="user.userNameNeedTranslate == '1'">
                                                                    <TranslationOpenDataText type='userName' :openid='exeItem'></TranslationOpenDataText>
                                                                </span>
                                                            </span>
                                                            </span>
                                                            <el-button v-if="!element.executorName" type="primary" @click.stop.native="addAsMyTask(element)" size="mini" style="float:right;width:38px;padding:5px;position: absolute;z-index: 5;right: 5px;">{{ $t('ren-ling') }}</el-button>
                                                        </div>
                                                        <!--子任务 -->
                                                        <div v-if="element.subTaskList.length > 0" class="taskCardCircleBox">
                                                            <el-progress type="circle" :percentage="(element.subTaskFinishNum/element.subTaskList.length) * 100" width="16" :show-text="false" stroke-linecap="butt" stroke-width="8"></el-progress><span style="margin-left:5px;font-size:12px;">{{element.subTaskFinishNum}}/{{element.subTaskList.length}}</span>
                                                        </div>
                                                        <!-- <div v-if="element.taskType == 1 && element.refTaskList != null">
                                                            <el-tooltip class="item" effect="dark" content="查看关联任务" placement="top">
                                                            <el-link class="sub_task_num" @click.stop.native="showSubTaskList(element)"><i class="iconfont firerock-icontree" ></i><span style="margin-left:5px;">{{element.finishRefTaskCount}}/{{element.refTaskList.length}}</span></el-link>
                                                            </el-tooltip>
                                                        </div> -->
                                                        <div v-if="element.taskType == 1 && !(element.refTaskList == null || element.refTaskList.length == 0)"  class="taskCardCircleBox">
                                                            <el-progress type="circle" :percentage="(element.finishRefTaskCount/(element.refTaskList ? element.refTaskList.length : 0)) * 100" width="16" :show-text="false" stroke-linecap="butt" stroke-width="8"></el-progress>
                                                            <span style="margin-left:5px;font-size:12px">{{element.finishRefTaskCount}}/{{(element.refTaskList ? element.refTaskList.length : 0)}}</span>
                                                        </div>
                                                    </div>
                                                </draggable>
                                                <el-button v-if="canAddTask && user.companyId != '3092'" slot="footer" role="people" @click="addTask(stage)" style="width:300px;" size="small" icon="el-icon-plus"></el-button>
                                                <el-label v-if="!canAddTask && (stage.taskList.length == 0)" style="width:300px;color:#666;">{{ $t('zan-wu-ren-wu') }}</el-label>
                                            </div>
                                        </v-flex>
                                    <!-- </transition-group > -->
                                    <el-button slot="footer" v-if="(selectedGroup != null && canEditStageList)" @click="addStage" class="taskList" icon="el-icon-plus" style="margin-top:30px;">{{ $t('creatingTaskList') }}</el-button>
                                </draggable>
                            </div>
                        </div>
                        <!--列表-->
                        <el-table v-if="displayTable" :data="taskDataList" 
                        :header-cell-style="{'font-weight':'normal'}" border
                        highlight-current-row v-loading="listLoading" :height="tableHeight - 85" style="width: 100%;margin-top:10px;" @row-click="taskLineClick">
                            <el-table-column fixed :label="$t('wan-cheng')"  width="50">
                                <template slot-scope="scope">
                                    <el-checkbox :disabled="scope.row.taskStatus==2" v-model="scope.row.isFinish" size="large" class="cb"  
                                                @change="finishTask(scope.row)"
                                                @click.stop.native=""
                                                ></el-checkbox>
                                </template>
                            </el-table-column>
                            <el-table-column prop="name" fixed :label="$t('biao-ti')"  width="250">
                                <template slot-scope="scope">
                                    <el-tooltip class="item" effect="dark" :content="scope.row.name" placement="top">
                                    <span class="single_line" > {{scope.row.name}}</span>
                                    </el-tooltip>
                                </template>
                            </el-table-column>
                            <el-table-column prop="taskType" :label="$t('ren-wu-lei-xing')"  width="100">
                                <template slot-scope="scope">
                                    {{taskTypeList[scope.row.taskType].name}}
                                </template>
                            </el-table-column>
                            <el-table-column prop="taskStatus" :label="$t('taskstatus')" width="100" >
                                <template slot-scope="scope">
                                    {{taskStatusList[scope.row.taskStatus]}}
                                </template>
                            </el-table-column>
                            <el-table-column prop="parentName" :label="$t('parentsstask')"  width="250">
                                <template slot-scope="scope">
                                    <span style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;"> {{scope.row.parentTname}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="stagesName" :label="$t('tasklist')" width="100" >
                                
                            </el-table-column>
                            <el-table-column prop="executorName" :label="$t('zhi-hang-ren')" width="100" >
                                <template slot-scope="scope">
                                    <span v-if="user.userNameNeedTranslate != '1'">
                                        <!-- {{scope.row.executorName == null?$t('dai-fen-pei'):scope.row.executorName}} -->
                                        <span v-if="scope.row.executorName == null">{{$t('dai-fen-pei')}}</span>
                                        <span v-else>
                                            <span v-for="(item, index) in scope.row.executorName" :key="index">
                                                {{item}}
                                                <span v-if="index < scope.row.executorName.length - 1">,</span>
                                            </span>
                                        </span>
                                    </span>
                                    <span v-if="user.userNameNeedTranslate == '1'">
                                        <span v-if="scope.row.executorName == null">
                                            {{$t('dai-fen-pei')}}
                                        </span>
                                        <span v-else>
                                            <span v-for="(item, index) in scope.row.executorName" :key="index">
                                                <TranslationOpenDataText type='userName' :openid='item'></TranslationOpenDataText>
                                                <span v-if="index < scope.row.executorName.length - 1">,</span>
                                            </span>
                                        </span>
                                    </span>
                                </template>
                            </el-table-column>
                            <!-- <el-table-column prop="endDate" label="截止时间" width="100" ></el-table-column> -->
                            <el-table-column prop="startDate" :label="$t('starttimes')" width="100" >
                                <template slot-scope="scope">
                                    <!-- <p v-if="scope.row.startDate >= times || scope.row.taskStatus != 0">{{scope.row.startDate}}</p>
                                    <p style="border-radius: 3px; text-align: center;background: #e62412; color: #fff;" v-else><span>{{scope.row.startDate}}</span></p> -->
                                    <p>{{scope.row.startDate}}</p>
                                </template>
                            </el-table-column>
                            <el-table-column prop="endDate" :label="$t('deadline')" width="100" >
                                <template slot-scope="scope">
                                    <p v-if="scope.row.endDate >= times || scope.row.taskStatus != 0">{{scope.row.endDate}}</p>
                                    <p style="border-radius: 3px; text-align: center;background: #e62412; color: #fff;" v-else><span>{{scope.row.endDate}}</span></p>
                                </template>
                            </el-table-column>
                            <el-table-column prop="createDate" :label="$t('creationtime')" width="100" ></el-table-column>
                            <el-table-column prop="taskLevel" :label="$t('priority')" width="100" >
                                <template slot-scope="scope">
                                   {{importanceList[scope.row.taskLevel].name}}
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-col :span="24" class="toolbar" v-if="displayTable">
                        <el-pagination
                            @size-change="taskListSizeChange"
                            @current-change="taskListPageChange"
                            :page-sizes="[20 , 50 , 80 , 100]"
                            :page-size="taskListSize"
                            layout="total, sizes, prev, pager, next"
                            :total="taskListTotal"
                            style="float:right;"
                        ></el-pagination>
                        </el-col>
                    </el-main>
                </el-container>
            </el-tab-pane>
            
            <el-tab-pane :label="$t('fileCenter')" name="files">
                <FileCenter ref="fileCenter" v-if="activeName == 'files'"></FileCenter>
            </el-tab-pane>
            <el-tab-pane :label="$t('overviewoftheproject')" name="info">
                <ProjectInfo ref="projectInfo" v-if="activeName == 'info'" @basecost-change="changeBase"></ProjectInfo>
            </el-tab-pane>
            <el-tab-pane :label="$t('datastatistics')" name="summary">
                <Summary ref="summary" v-if="activeName == 'summary'" ></Summary>
            </el-tab-pane>
            <el-tab-pane :label="$t('costmanagement')" name="costbaseline" v-if="permissions.projectBaseline">
                <CostBaseline ref="costbaseline" v-if="activeName == 'costbaseline'"></CostBaseline>
            </el-tab-pane>
            <!--去掉挣值分析模块-->
            <!-- <el-tab-pane :label="$t('valueanalysis')" name="earning" v-if="user.id == currentProject.creator || user.id == currentProject.incharger_id ||permissions.projectBaseline">
                <Earning ref="earning"></Earning>
            </el-tab-pane> -->
        </el-tabs>



        <!-- 设置参与人员界面 -->
        <el-dialog :title="$t('selectingParticipants')"  v-if="participantsDialog" :visible.sync="participantsDialog" :close-on-click-modal="false" customClass="customWidth" width="500px">
            <div class="tree" style="height:400px">
                <el-scrollbar style="height:100%">
                    <el-input v-if="user.userNameNeedTranslate != 1"
                    :placeholder="$t('keywordfiltering')"
                    v-model="participantsFilterText">
                    </el-input>

                    <div v-if="user.userNameNeedTranslate == '1'">
                        <el-input :placeholder="$t('qingShuShuRuGuanJianZiGuoLv')" v-model.trim="participantsFilterText" class="input-with-select" @keyup.enter.native="echartDepartment()">
                            <el-button slot="append" icon="el-icon-search" @click="echartDepartment()"></el-button>
                        </el-input>
                    </div>

                    <el-tree :data="deptMembData" show-checkbox :props="defaultProps" node-key="id"
                        ref="chooseMembTree2" @check-change="onTreeItemChange" :default-checked-keys="alreadyPartArray"
                        highlight-current  :filter-node-method="filterNode" v-loading="filterNodeFlag">
                        <span class="custom-tree-node" slot-scope="{ node, data }">
                            <span v-if="user.userNameNeedTranslate == '1'">
                                <span v-if="node.data.children">
                                    <TranslationOpenDataText type='departmentName' :openid='node.label'></TranslationOpenDataText>
                                </span>
                                <span v-else>
                                    <TranslationOpenDataText type='userName' :openid='node.label'></TranslationOpenDataText>
                                </span>
                            </span>
                            <span v-if="user.userNameNeedTranslate != '1'">
                                {{ node.label }}
                            </span>
                        </span>    
                    </el-tree>
                </el-scrollbar>
            </div>
            <div>{{ $t('btn.choose') }}&nbsp;{{chosenMembCount}}&nbsp;{{ $t('other.people') }}</div>
            <div slot="footer" class="dialog-footer">
                <el-button  @click="participantsDialog = false">{{ $t('btn.cancel') }}</el-button>
                <el-button type="primary" @click="setParticipants()">{{ $t('btn.determine') }}</el-button>
            </div>
        </el-dialog>
        


        <!--新增任务界面-->
        <el-dialog :class="addForm.id==null?'':'jm'" :title="title" v-if="addFormVisible" :visible.sync="addFormVisible" 
        :close-on-click-modal="false" customClass="customWidth" :width="user.companyId == 3092?'1150px':'850px'" ref="addDialog" :top="'6vh'">
            <!-- 整合 -->
            <taskComponent ref="thskComponents" :integrationTask="integrationTask" @closeBounced="closeBounced"></taskComponent>
            <div slot="title" v-if="addForm.parentTid != null || isRelationItem" >
                <!-- <el-link @click="backToParentTask"><i class="el-icon-arrow-left single_line">返回父级任务</i> | {{addForm.parentTname}}</el-link> -->
                <el-page-header  @back="backToParentTask" :title="timelabel ? $t('returnmilestone') : $t('parenttask')" :content="timelabel ? relationPar.name : addForm.parentTname"></el-page-header>
            </div>
            <!-- 未整合 -->
            <div v-if="false">
                <div style="height: 72vh;overflow: auto;">
                    <el-form ref="form1" :model="addForm" :rules="taskRules" label-width="100px">
                        <!--子任务需要选择任务列表 -->
                        <el-form-item :label="$t('tasklist')" prop="stages" v-if="addForm.parentTid != null">
                            <el-select v-model="addForm.stagesId" style="width:100%;" >
                                <el-option v-for="item in stageList" :key="item.id" :label="item.stagesName" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item :label="$t('types')">
                            <!-- <el-button @click="test">test</el-button> -->
                            <!-- 0011 -->
                            <!-- {{groupResponsibleId == user.id}} -->
                            <el-select v-model="addForm.taskType" style="width:100%;" :disabled="((this.addForm.id != null && user.id != this.addForm.createrId && currentProject.inchargerId != user.id) && !permissions.projectManagement) && !(groupResponsibleId == user.id)" @change="selchg()">
                                <el-option v-for="item in taskTypeList" :key="item.id" :label="item.name" :value="item.id">
                                    <i :class="item.icon" ></i>
                                    <span>{{item.name}}</span>
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item :label="$t('taskdefinition')" prop="name">
                            <el-input v-model="addForm.name" :maxlength="40" :disabled="(this.addForm.id != null && user.id != this.addForm.createrId && currentProject.inchargerId != user.id) && !permissions.projectManagement && !(groupResponsibleId == user.id)" :placeholder="$t('enterthetaskcontent')" clearable></el-input>
                        </el-form-item>
                        <!-- {{timelabel}}{{mileageCup}} -->
                        <el-form-item :label="!timelabel ? $t('starttimes') : $t('jie-zhi-shi-jian')" prop="startDate">
                            <el-date-picker v-model="addForm.startDate" type="date" style="width:40%;" value-format="yyyy-MM-dd"  
                            :placeholder="$t('pleaseselectadate')" :disabled="(this.addForm.id != null && user.id != this.addForm.createrId && currentProject.inchargerId != user.id) && !permissions.projectManagement && !(groupResponsibleId == user.id)" @change="DateChange()" v-if="!timelabel"></el-date-picker>
                            <span style="margin-left:30px;margin-right:10px;" v-if="!timelabel">{{ $t('deadline') }}</span>
                            <el-date-picker style="width:40%;" v-model="addForm.endDate" type="date" value-format="yyyy-MM-dd"  
                            :placeholder="$t('pleaseselectadate')" :disabled="(this.addForm.id != null && user.id != this.addForm.createrId && currentProject.inchargerId != user.id) && !permissions.projectManagement && !(groupResponsibleId == user.id)" @change="DateChange()"></el-date-picker>

                            <span style="margin-left:30px;margin-right:10px;" v-if="timelabel && mileageCup">{{ $t('wan-cheng-shi-jian') }}</span>
                            <el-date-picker style="width:40%;" v-if="timelabel && mileageCup" v-model="addForm.finishDate" type="date" value-format="yyyy-MM-dd"  
                            :placeholder="$t('pleaseselectadate')" :disabled="(this.addForm.id != null && user.id != this.addForm.createrId && currentProject.inchargerId != user.id) && !permissions.projectManagement && !(groupResponsibleId == user.id)" @change="DateChange()"></el-date-picker>
                            </el-form-item>

                        <div style="border: 1px solid #ddd;margin:5px 0;padding:5px 0;">
                        <el-form-item :label="$t('zhi-hang-ren') + (index+1)" v-for="(executorItem, index) in addForm.executorListFront" :key="index">

                            <el-select v-if="user.userNameNeedTranslate != 1" v-model="executorItem.executorId" :disabled="(addForm.id != null && user.id != addForm.createrId && currentProject.inchargerId != user.id) && !permissions.projectManagement && !(groupResponsibleId == user.id)" size="small" filterable clearable :placeholder="$t('pleaseselectanexecutor')" style="width:40%;" @change="$forceUpdate()">
                                <el-option v-for="item in users" :key="item.id" :label="item.name" :value="item.id">
                                    <span style="float: left">{{ item.name }}</span>
                                    <span style="float: right; color: #8492a6; font-size: 13px;margin-left: 20px" v-if="item.jobNumber">{{ item.jobNumber }}</span>
                                </el-option>
                            </el-select>

                            <selectCat v-if="user.userNameNeedTranslate == 1" :size="'mini'" :subject="users" :subjectId="executorItem.executorId" :distinction="'1'" @selectCal="selectCal" :index="index" :disabled="(addForm.id != null && user.id != addForm.createrId && currentProject.inchargerId != user.id) && !permissions.projectManagement && !(groupResponsibleId == user.id)"></selectCat>
                            <!-- <selectCat v-if="user.userNameNeedTranslate == '1'" :wxCope="true" :size="'size'" :subjectId="executorItem.executorId" :distinction="'1'" :subject="users"  @selectCal="selectCal" :index="index" :disabled="(addForm.id != null && user.id != addForm.createrId && currentProject.inchargerId != user.id) && !permissions.projectManagement && !(groupResponsibleId == user.id)"></selectCat> -->

                            <span style="margin-left:30px;margin-right:10px;">{{ $t('plantime') }} {{gstimday}} {{gstimhour}} {{index}}</span>
                            <el-input-number size="small" :disabled="(addForm.id != null && user.id != addForm.createrId && currentProject.inchargerId != user.id) && !permissions.projectManagement && !(groupResponsibleId == user.id)" v-model="gstimday[index]" style="width:16%;" :min="1" :max="100"  :placeholder="$t('danweitian')" @change="chggstim(0,index)"></el-input-number ><span style="margin-left:5px;">{{ $t('time.day') }}</span>
                            <el-input-number size="small" :disabled="(addForm.id != null && user.id != addForm.createrId && currentProject.inchargerId != user.id) && !permissions.projectManagement && !(groupResponsibleId == user.id)" v-model="gstimhour[index]" style="width:16%;" :min="1" :max="100"  :placeholder="$t('pleaseentertheplannedworking')" @change="chggstim(1,index)"></el-input-number ><span style="margin-left:5px;">{{ $t('time.hour') }}</span>
                            <!--移除执行人 -->
                            <i class="el-icon-delete" v-if="index>0 && (addForm.id == null|| user.id == addForm.createrId || currentProject.inchargerId == user.id|| permissions.projectManagement || groupResponsibleId == user.id)" style="margin-left:5px" @click="removeExecutorLine(index)"></i>
                        </el-form-item>
                        <el-link type="primary" v-if="(((addForm.executorListFront == null || addForm.executorListFront.length<10) && 
                        (addForm.id == null|| user.id == addForm.createrId || currentProject.inchargerId == user.id || permissions.projectManagement)) || 
                        groupResponsibleId == user.id)" 
                        style="margin-left:35px;" @click="addExecutorLine">{{ $t('addinganexecutor') }}</el-link>
                        </div>
                        <el-form-item :label="$t('priority')">
                            <el-select v-model="addForm.taskLevel" style="width:100%;" >
                                <el-option v-for="item in importanceList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <!-- 富文本 -->
                        <el-form-item :label="$t('detaileddescription')" style="height: 200px">
                            <!-- <Editor id="tinymce" v-model="tinymceHtml" :init="editorInit"></Editor> -->
                            <!-- <el-input type="textarea" v-model="addForm.taskDesc" :rows="3"></el-input> -->
                            <!-- <quill-edito v-model="addForm.taskDesc"></quill-edito> -->
                            <quill-editor style="height: 150px" ref="text" v-model="addForm.taskDesc" class="myQuillEditor" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"/>
                        </el-form-item>
                        <!-- 富文本 -->
                        <div v-if="addForm.id != null">
                            <el-divider ></el-divider>
                            <!-- 任务进展 -->
                            <template v-if="!timelabel || isRelationItem">
                            
                            <p ><i class="iconfont firerock-icontree themeFontColor" style="margin-left:10px;">{{ $t('taskprogress') }}</i>
                                <span ref="addPro" style="display: block; float:right;"><el-link @click="addprogress">{{ $t('addtaskprogress') }}</el-link></span>
                            </p>
                            <!-- 任务进展展示 -->
                            <div style="display: none;" ref="proBox" class="progress">
                                <!-- <el-form :model="> -->
                                <el-radio-group v-model="radio">
                                    <el-radio :label="0" class="rala1">{{ $t('normals') }}</el-radio>
                                    <el-radio :label="1" class="rala2">{{ $t('atrisk') }}</el-radio>
                                    <el-radio :label="2" class="rala3">{{ $t('withinthetimelimit') }}</el-radio>
                                </el-radio-group>

                                <el-input
                                type="textarea"
                                border="0"
                                :autosize="{ minRows: 2, maxRows: 6}"
                                :placeholder="$t('detailedprogressdescription')"
                                v-model="text2"
                                style="margin:10px 0 0 0">
                                </el-input>

                                <h4 style="font-weight: normal;">{{ $t('tixiang') }}{{checkLists.length}}</h4>

                                <i class="el-icon-circle-plus pron_i themeFontColor" style="font-size: 28px;" @click="addI(0)"></i>

                                <div class="remind" ref="addRem" style="display: none">
                                    <el-checkbox-group v-model="checkboxGrounp" v-for="item in users" :key="item.id">
                                        <p>
                                            <el-checkbox :label="item.name" @change="kkk(item)">
                                                <span>
                                                    <span v-if="user.userNameNeedTranslate != '1'">
                                                        {{item.name}}
                                                    </span>
                                                    <span v-if="user.userNameNeedTranslate == '1'">
                                                        <TranslationOpenDataText type='userName' :openid='item.name'></TranslationOpenDataText>
                                                    </span>
                                                </span>
                                            </el-checkbox>
                                        </p>
                                    </el-checkbox-group>
                                </div>
                                <div class="ssp" @click="sss"></div>
                                <!-- </el-form> -->
                                <div class="pro_btn">
                                    <el-button size="mini" @click="shutPro">{{ $t('btn.cancel') }}</el-button>
                                    <el-button size="mini" type="primary" @click="addTaskProgress">{{ $t('fa-bu') }}</el-button>
                                </div>

                            </div>

                            

                            <div class="ddl" v-if="recentProgressInfo != null && recentProgressInfo.id != null">
                                <div class="elCard" style="margin-bottom: 10px; height:" >
                                    <i class="el-icon-success" style="color: #43d14f;" v-if="recentProgressInfo.status == 0"></i>
                                    <i class="el-icon-success" style="color: #fd7624;" v-else-if="recentProgressInfo.status == 1"></i>
                                    <i class="el-icon-success" style="color: #fd4d47;" v-else></i>
                                    <span v-if="recentProgressInfo.status == 0">{{ $t('normals') }}</span>
                                    <span v-else-if="recentProgressInfo.status == 1">{{ $t('normals') }}</span>
                                    <span v-else>{{ $t('withinthetimelimit') }}</span>

                                    <el-dropdown trigger="click" style="float:right;cursor:pointer; float: right;">
                                            <i class="el-icon-more" ></i>
                                            <el-dropdown-menu slot="dropdown">

                                                <el-dropdown-item divided>
                                                    <span @click="deleteTaskProgress(recentProgressInfo.id)"><i class="el-icon-delete"></i>{{ $t('deleteList ') }}</span></el-dropdown-item>
                                            </el-dropdown-menu>
                                    </el-dropdown>
                                    <!-- <div class="elCard_qu">{{recentProgressInfo.creatorName}}{{ $t('geng-xin-yu') }}{{recentProgressInfo.indate | relativeTime}}</div> -->
                                    <div class="elCard_qu">
                                        <span>
                                            <span v-if="user.userNameNeedTranslate != '1'">
                                                {{recentProgressInfo.creatorName}}
                                            </span>
                                            <span v-if="user.userNameNeedTranslate == '1'">
                                                <TranslationOpenDataText type='userName' :openid='recentProgressInfo.creatorName'></TranslationOpenDataText>
                                            </span>
                                        </span>
                                        {{ $t('geng-xin-yu') }}{{recentProgressInfo.indate | relativeTime}}
                                    </div>
                                    <p style="padding-left: 20px;">{{recentProgressInfo.content}}</p>
                                    <div class="examine"><el-button type="text" @click="innerVisibless = true" style="color: #8F87A3;">{{ $t('viewingHistory') }}</el-button></div>
                                </div>
                            </div>

                            <!-- 任务列表没有数据的时候展示 -->
                            <div class="nones" v-if="ProgressList.length <= 0">
                                {{ $t('nodata') }} 
                            </div>

                            <!-- 任务进展完整状态 -->
                            <el-dialog :title="$t('other.prompts')" :visible.sync="innerVisibless" append-to-body width="500px">
                            <div class="integrity">
                                <h3 style="font-weight: normal;display: inline-block;margin: 0 0 20px 0;">{{ $t('taskprogress') }} ：{{ProgressList.length}}</h3>
                                <!-- <span class="write"><i class="el-icon-circle-plus"></i>填写进展</span> -->
                                <el-divider></el-divider>

                                <!--  -->
                                    <div class="block" style="height: 200px;">
                                        <el-timeline style="padding:20px 0 0 0;">
                                            <el-timeline-item
                                            v-for="(activity, index) in ProgressList"
                                            :key="index">
                                            <div class="tb">
                                                <span v-if="activity.status == 0" style="color: #43D14F" class="icon"></span>
                                                <span v-if="activity.status == 1" style="color: #FD7624" class="icon"></span>
                                                <span v-if="activity.status == 2" style="color: red" class="icon"></span>
                                                <div>
                                                    <span v-if="activity.status == 0" style="color: #43D14F">{{ $t('normals') }}</span>
                                                    <span v-if="activity.status == 1" style="color: #FD7624">{{ $t('atrisk') }}</span>
                                                    <span v-if="activity.status == 2" style="color: red">{{ $t('withinthetimelimit') }}</span>
                                                    <span style="display: inline-block; float: right; color: #8C8C8C">{{activity.indate | relativeTime}}</span>
                                                </div>
                                                <p style="color: #8C8C8C">{{activity.content}}</p>
                                                
                                            </div>
                                            </el-timeline-item>
                                        </el-timeline>
                                    </div>
                                <!--  -->
                            </div>
                            <span slot="footer" class="dialog-footer">
                                <el-button type="primary" @click="innerVisibless = false">{{ $t('Shutdown') }}</el-button>
                            </span>
                            </el-dialog>

                            </template>

                            <!-- 子任务/关联任务 -->
                            <p ><i class="iconfont firerock-icontree themeFontColor" style="margin-left:10px;">{{timelabel && !isRelationItem ? $t('guanlian') : $t('zirwu')}}</i>
                                <el-link style="float:right;" @click="addRelation" v-if="timelabel && !isRelationItem">{{ $t('associatedTask') }}</el-link>
                                <el-link style="float:right;" @click="addSubTask" v-else>{{ $t('addingsubtask') }}</el-link>
                            </p>
                            <!-- 关联任务列表 -->
                            <el-table key="guanlian" :data="relationSubTaskList" v-if="timelabel && !isRelationItem"
                            :header-cell-style="{'font-weight':'normal'}"
                            highlight-current-row
                            v-loading="listLoading"
                            style="width: 100%;margin-top:10px;"
                            @row-click="relationTaskClick">
                                <el-table-column prop="taskStatus" :label="$t('wan-cheng')" width="50" >
                                    <template slot-scope="scope">
                                        <el-checkbox :disabled="scope.row.taskStatus==2" :checked="scope.row.taskStatus==1?true:false" size="large" class="cb" @change="relationFinishTask(scope.row)" @click.stop.native=""></el-checkbox>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="taskName" :label="$t('biao-ti')" >
                                    <template slot-scope="scope">
                                        <el-tooltip class="item themeFontColor" effect="dark" :content="scope.row.taskName" placement="top" style="cursor:pointer;">
                                            <span style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;" > {{scope.row.taskName}}</span>
                                        </el-tooltip>
                                    </template>
                                </el-table-column>
                                <el-table-column :label="$t('operation')" width="130" align="left">
                                    <template slot-scope="scope">
                                        <el-button @click.stop.native="deleteRelationItem(scope.row.id)" size="mini">{{ $t('dissociated') }}</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <!--子任务列表 -->
                            <el-table key="zi" :data="addForm.subTaskList" v-else
                                    :header-cell-style="{'font-weight':'normal'}"
                                    highlight-current-row v-loading="listLoading" style="width: 100%;margin-top:10px;" @row-click="taskLineClick">
                                        <el-table-column prop="taskStatus" :label="$t('wan-cheng')" width="50" >
                                        <template slot-scope="scope">
                                        <el-checkbox :disabled="scope.row.taskStatus==2" :checked="scope.row.taskStatus==1?true:false" size="large" class="cb"  
                                                        @click.stop.native=""
                                                        @change="finishTask(scope.row)"
                                                        ></el-checkbox>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="name" :label="$t('biao-ti')" >
                                        <template slot-scope="scope">
                                            <el-tooltip class="item" effect="dark" :content="scope.row.name" placement="top">
                                            <span style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;" > {{scope.row.name}}</span>
                                            </el-tooltip>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="executorName" :label="$t('zhi-hang-ren')" width="100" >
                                        <template slot-scope="scope">
                                            <span v-if="user.userNameNeedTranslate != 1">
                                                {{scope.row.executorName == null?$t('dai-fen-pei'):scope.row.executorName}}
                                            </span>
                                            <span v-if="user.userNameNeedTranslate == 1">
                                                <span v-if="scope.row.executorName == null">
                                                    {{$t('dai-fen-pei')}}
                                                </span>
                                                <span v-else>
                                                    <span v-for="item,index in scope.row.executorName" :key="index">
                                                        <TranslationOpenDataText type='userName' :openid='item'></TranslationOpenDataText>
                                                        <span v-if="index < scope.row.executorName.length - 1">,</span>
                                                    </span>
                                                </span>
                                            </span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="endDate" :label="$t('deadline')" width="100" >
                                        <template slot-scope="scope">
                                            <p v-if="scope.row.endDate >= times">{{scope.row.endDate}}</p>
                                            <p v-else style="background: #e62412; color: #fff;text-align: center; border-radius: 3px;">{{scope.row.endDate}}</p>
                                        </template>
                                    </el-table-column>
                            </el-table>
                        </div>
                    </el-form>

                    <!-- 关联文件列表 -->
                    <template v-if="isEditFile">
                        <div style="width:100%;margin:1em 0;">
                            <i class="iconfont firerock-icontree themeFontColor" style="margin-left:10px;">{{ $t('jiafuchengguo') }}</i>
                            <el-link @click="relationFileClick()" style="float:right;margin-left:10px">{{ $t('associatedfiles') }}</el-link>
                            <el-upload style="float:right;" action="#" :http-request="uploadFileClick" :show-file-list="false" :multiple="false">
                                <el-link>{{ $t('uoloadFiles') }}</el-link>
                            </el-upload>
                            
                        </div>
                        <el-table
                            v-loading="fileListLoading"
                            ref="filetable"
                            :data="taskFileList"
                            :header-cell-style="{'font-weight':'normal'}"
                            highlight-current-row
                            max-height="240"
                            style="width: 100%;margin-top:10px;margin-bottom:15px">
                            <el-table-column :label="$t('headerTop.serialNumber')" prop="documentType" min-width="40" align="center">
                                <template slot-scope="scope">
                                    <div>
                                        {{scope.$index + 1}}
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column :label="$t('filenames')" prop="documentName" min-width="180"></el-table-column>
                            <el-table-column :label="$t('filesize')" prop="size" min-width="60" align="center"></el-table-column>
                            <el-table-column :label="$t('founder')" prop="creatorName" min-width="60" align="center">
                                <template slot-scope="scope">
                                    <div>
                                        <span v-if="user.userNameNeedTranslate != 1">{{scope.row.creatorName}}</span>
                                        <span v-if="user.userNameNeedTranslate == 1">
                                            <TranslationOpenDataText type='userName' :openid='scope.row.creatorName'></TranslationOpenDataText>
                                        </span>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column :label="$t('creationtime')" prop="indate" min-width="120" align="center">
                                <template slot-scope="scope">
                                    <span>{{scope.row.indate[0] + '-' + scope.row.indate[1] + '-' + scope.row.indate[2] + '\u0020\u0020' + scope.row.indate[3] + ':' + scope.row.indate[4] + ':' + scope.row.indate[5]}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column :label="$t('operation')" min-width="90">
                                <template slot-scope="scope">
                                    <el-link :href="scope.row.url" :download="scope.row.documentName" type="primary" style="margin-right:7px">{{ $t('other.download') }}</el-link>
                                    <el-link @click="taskFileDelete(scope.row.id)">{{ $t('btn.delete') }}</el-link>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>

                    <!-- 关联文件dialog -->
                    <el-dialog v-if="relationFileDialog" :visible.sync="relationFileDialog" :title="$t('associatedfiles')" append-to-body>
                        <span>{{ $t('wenjian1guanli') }}</span>
                        <div>
                            <span>{{ $t('xuanzwenjian') }}</span>
                            <el-select v-model="addFileId" filterable >
                                <el-option
                                    v-for="item in projectFileList"
                                    :key="item.id"
                                    :label="item.documentName"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                            <el-button @click="addTaskFile()">{{ $t('btn.determine') }}</el-button>
                            <!-- <el-button @click="relationFileDialog = false">取消</el-button> -->
                        </div>
                    </el-dialog>

                    <el-dialog v-if="isRelationTab" :visible.sync="isRelationTab" :title="$t('associatedTask')" width="800px" append-to-body>
                        <el-form ref="relationItemForm" label-width="100px">
                            <el-form-item :label="$t('selecttask')" prop="taskType">
                                <el-select v-model="relationvalue" multiple style="width:80%">
                                    <el-option
                                    v-for="item in relationdata"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="isRelationTab = false">{{ $t('btn.cancel') }}</el-button>
                            <el-button type="primary" @click="addRelationTask()">{{ $t('btn.determine') }}</el-button>
                        </div>
                    </el-dialog>
                </div>

                <div slot="footer" class="dialog-footer">
                    <el-button v-if="(user.id == addForm.createrId || currentProject.inchargerId == user.id || currentProject.creatorId == user.id || permissions.projectManagement) && canAddTask" @click.native="deleteTask()" style="float:left;">{{ $t('btn.delete') }}</el-button>
                    <el-button @click.native="addFormVisible = false">{{ $t('btn.cancel') }}</el-button>
                    <el-button type="primary" @click="submitInsert" :loading="addLoading">{{ $t('btn.submit') }}</el-button>
                </div>
                <div slot="title" v-if="addForm.parentTid != null || isRelationItem" >
                    <!-- <el-link @click="backToParentTask"><i class="el-icon-arrow-left single_line">返回父级任务</i> | {{addForm.parentTname}}</el-link> -->
                    <el-page-header  @back="backToParentTask" :title="timelabel ? $t('returnmilestone') : $t('parenttask')" :content="timelabel ? relationPar.name : addForm.parentTname"></el-page-header>
                </div>
                <!-- 评论 -->
                <div class="remark" v-show="addForm.id != null">
                    <span class="zh">
                            <div class="player">
                                <p>{{ $t('participantin') }}</p>
                                <div class="bj">
                                    <span  v-for="(pl, i) in critic" :key="i">
                                    <span style="background: #778899" v-if="user.userNameNeedTranslate != 1">{{pl.length > 2 ? pl.substring(pl.length - 2, pl.length) : pl}}</span>
                                    <span v-if="user.userNameNeedTranslate == 1">
                                        <TranslationOpenDataText type='userName' :openid='pl'></TranslationOpenDataText>
                                    </span>
                                    </span>
                                    <!-- <span style="background: #778899">{{pl.length}}</span> -->
                                </div>
                            </div>
                        <div class="subject">
                            <div class="sub-all">
                                <div :class="dynamicTab ? 'subOn' : ''" @click="dynamicTab = true">{{ $t('alldynamic') }}</div>
                                <div :class="dynamicTab ? '' : 'subOn'" @click="dynamicTab = false">{{ $t('xiang-guan-ri-bao') }}</div>
                            </div>
                            <div class="sub-details" ref="main" v-if="dynamicTab">
                                <ul class="infinite-list" v-infinite-scroll="load" ref="contRoll">
                                    <div style="width: 100%" v-if="commentList.length <= 0">
                                        <img src="../../assets/image/xiao.png" alt="">
                                    </div>
                                    <li v-for="i in count" class="infinite-list-item counli" :key="i">
                                        <p><i class="el-icon-s-fold"></i> <em>{{ $t('managerQucompletedthedependencytask') }}</em><span>{{ $t('onApril20') }}</span></p>
                                    </li>
                                    <li class="carts" v-for="item in commentList" :key="item.id">
                                        <!-- <el-image style="width: 30px; height: 30px" :src="url" :fit="fit"></el-image> -->
                                        <!-- <i :style="'background' + item.userColor"> -->
                                        <i :style="'background' + item.userColor">
                                            <i v-if="user.userNameNeedTranslate != 1">
                                                {{item.userName.length > 2 ? item.userName.substring(item.userName.length - 2, item.userName.length) : item.userName}}
                                            </i>   
                                            <i v-if="user.userNameNeedTranslate == 1">
                                                <TranslationOpenDataText type='userName' :openid='item.userName'></TranslationOpenDataText>
                                            </i>
                                        </i>
                                        <div>
                                            <!-- <p>{{item.userName}}</p> -->
                                            <!-- <p> -->
                                                <p v-if="user.userNameNeedTranslate != 1">
                                                    {{item.userName}}
                                                </p>
                                                <p v-if="user.userNameNeedTranslate == 1">
                                                    <TranslationOpenDataText type='userName' :openid='item.userName'></TranslationOpenDataText>
                                                </p>
                                            <!-- </p> -->
                                            <em>
                                                <!-- {{item.content}} -->
                                                <p style="display: inline-block;padding: 0;margin: 0;" v-if="user.userNameNeedTranslate == 1">
                                                    {{item.content.msg1}}
                                                    <TranslationOpenDataText type='userName' :openid='item.content.msg2'></TranslationOpenDataText>
                                                    {{item.content.msg3}}
                                                </p>
                                                <p style="display: inline-block;padding: 0;margin: 0;" v-if="user.userNameNeedTranslate != 1">{{item.content}}</p>
                                            </em>
                                        </div>
                                        <span>{{item.createTime | relativeTime}}</span>
                                    </li>
                                </ul>
                            </div>

                            <div class="Daily" v-if="!dynamicTab">
                                <div class="one_daily_body DailyBody">
                                    <el-card shadow="never" v-for="(item2,index2) in dailyList" :key="index2" style="margin-bottom: 20px;">
                                        <p>
                                            {{ $t('tian-bao-ren') }}： <span v-if="user.userNameNeedTranslate != 1">{{item2.userName}}</span>
                                            <span v-if="user.userNameNeedTranslate == 1">
                                                <TranslationOpenDataText type='userName' :openid='item2.userName'></TranslationOpenDataText>
                                            </span>
                                            <span style="float: right;">{{item2.createDate}}</span>
                                        </p>
                                        <p>{{ $t('other.approvalStatus') }}：
                                            <span v-if="user.company.packageEngineering == 0">
                                                <span style="margin-left:15px;color:#DAA520;"  v-if="item2.state == 0">
                                                    <span v-if="item2.isDeptAudit==0">
                                                        <span v-if="item2.projectAuditState==0">
                                                            <!-- 待项目审核人 --> {{$t('other.waitForTheProjectReviewer')}}
                                                            <span v-if="item2.projectAuditorName != null">(
                                                                <span v-if="user.userNameNeedTranslate == '1'">
                                                                    <TranslationOpenDataText type='userName' :openid='item2.projectAuditorName'></TranslationOpenDataText>
                                                                </span>
                                                                <span v-if="user.userNameNeedTranslate != '1'">{{item2.projectAuditorName}}</span>
                                                                )</span> 
                                                            <!-- 审核 --> {{$t('other.audit')}}
                                                        </span>
                                                        <span style="color:#32CD32;" v-else-if="item2.projectAuditState==1">
                                                            <!-- 项目审核人 --> {{$t('other.projectAuditor')}}
                                                            <span v-if="item2.projectAuditorName != null">(
                                                                <!-- {{item2.projectAuditorName}} -->
                                                                <span v-if="user.userNameNeedTranslate == '1'">
                                                                    <TranslationOpenDataText type='userName' :openid='item2.projectAuditorName'></TranslationOpenDataText>
                                                                </span>
                                                                <span v-if="user.userNameNeedTranslate != '1'">{{item2.projectAuditorName}}</span>
                                                                )</span>
                                                            <!-- 审核通过 --> {{$t('state.approved')}}
                                                        </span>
                                                    </span>
                                                    <span v-else-if="item2.isDeptAudit==1">
                                                        ({{$t('other.await')}}
                                                        <span v-if="user.userNameNeedTranslate == '1'">
                                                            <TranslationOpenDataText type='departmentName' :openid='item2.auditDeptName'></TranslationOpenDataText>
                                                        </span>
                                                        <span v-if="user.userNameNeedTranslate != '1'">{{item2.auditDeptName}}</span>
                                                        {{$t('other.audit')}})
                                                    </span>
                                                    </span> 
                                                <span style="margin-left:15px;color:#DAA520;" v-else-if="item2.state == -1">{{$t('other.importWaitingForReview')}}</span>
                                                <span style="margin-left:15px;color:#32CD32;" v-else-if="item2.state == 1">{{$t('state.alreadyPassed')}}
                                                    <span style="color:#c7e944" v-if="item2.reportAutoApprove == 1">{{$t('other.automaticReview')}}</span>
                                                </span>
                                                
                                                <span style="margin-left:15px;color:#FF0000;" v-else-if="item2.state == 2">{{$t('state.rejected')}} {{$t('other.reason')}}:{{item2.rejectReason}}</span>
                                                <span style="margin-left:15px;color:#FF0000;" v-else-if="item2.state == 3">{{$t('state.waitingsubmit')}}</span>
                                            </span>
                                            <span v-if="user.company.packageEngineering == 1">
                                                <span style="margin-left:15px;color:#DAA520;" v-if="item2.state == -1">{{$t('other.importWaitingForReview')}}</span>
                                                <span style="margin-left:15px;color:#DAA520;" v-if="item2.state == 0 && item2.departmentAuditState == -1">{{$t('other.waitingForProfessionalReview')}}</span>
                                                <span style="margin-left:15px;color:#DAA520;" v-if="item2.state == 0 && item2.departmentAuditState == 0">{{$t('other.waitingForDepartmentReview')}}</span>
                                                <span style="margin-left:15px;color:#DAA520;" v-if="item2.state == 0 && item2.departmentAuditState == 1">{{$t('other.waitForTheProjectReviewer')}}<span v-if="item2.projectAuditorName != null">
                                                    (
                                                        <span v-if="user.userNameNeedTranslate != 1">
                                                            {{item2.projectAuditorName}}
                                                        </span>
                                                        <span v-if="user.userNameNeedTranslate == 1">
                                                            <TranslationOpenDataText type='userName' :openid='item2.projectAuditorName'></TranslationOpenDataText>
                                                        </span>
                                                    )
                                                </span>{{$t('other.audit')}}</span>
                                                <span style="margin-left:15px;color:#32CD32;" v-else-if="item2.state == 1">{{$t('state.alreadyPassed')}}</span>
                                                <span style="margin-left:15px;color:#FF0000;" v-else-if="item2.state == 2">{{$t('state.rejected')}} {{$t('other.reason')}}:{{item2.rejectReason}}</span>
                                                <span style="margin-left:15px;color:#FF0000;" v-else-if="item2.state == 3">{{$t('state.waitingsubmit')}}</span>
                                            </span>
                                        </p>
                                        <p v-if="user.timeType.customDegreeActive==1 && item2.degree_id != null && item2.degree_id != -1">{{user.timeType.customDegreeName}}：{{item2.degreeName}}</p>
                                        <p v-if="user.timeType.customDataActive==1">{{user.timeType.customDataName}}：{{item2.customData}}</p>
                                        <!-- 自定义日报文本 -->
                                        <p v-if="user.timeType.customTextActive==1">{{user.timeType.customTextName}}：{{item2.customText}}</p>
                                        <p v-if="user.company.packageEngineering == 1">
                                            {{$t('other.professionalProgress')}}：
                                            <span style="margin-right:10px;" v-for="progressItem in item2.professionProgress" :key="progressItem.id">{{progressItem.professionName}}({{progressItem.progress}}%) 
                                                <el-tooltip v-if="progressItem.auditState == 0"  :content="$t('state.WaitingAudit')" effect="light" placement="top">
                                                <i class="iconfont firerock-icondaibandengdaishenhe"></i>
                                                </el-tooltip>
                                                <el-tooltip v-if="progressItem.auditState == 1" :content="$t('state.alreadyPassed')" effect="light" placement="top">
                                                <i  class="iconfont firerock-iconshenhetongguo"></i>
                                                </el-tooltip>
                                                <el-tooltip v-if="progressItem.auditState == 2" :content="$t('state.notThrough')" effect="light" placement="top">
                                                <i  class="iconfont firerock-iconshenhebohui"></i>
                                                </el-tooltip>
                                                </span>
                                        </p>
                                        <div v-if="item2.multiWorktime==0">
                                        <p style="display: inline-block;">{{$t('time.duration')}}：
                                            <span v-if="item2.reportTimeType == 0" style="margin-right:10px;">{{typeList[item2.timeType]}}</span>
                                            <span v-if="item2.reportTimeType == 2" style="margin-right:10px;">{{item2.startTime+'-'+item2.endTime}}</span>
                                        {{item2.time.toFixed(1)}}h  
                                        <el-tag type="danger" size="mini" style="margin-left: 65px" v-if="item2.isOvertime === 1">{{$t('other.WorkOvertime')}}<span v-if="item2.overtimeHours">{{item2.overtimeHours.toFixed(1)}}h</span></el-tag>
                                        </p>
                                        <p>{{$t('other.matters')}}：<span v-html="item2.content"></span></p>
                                        </div>
                                        <div v-if="item2.multiWorktime==1" >
                                            <p>{{$t('other.projectDuration')}}：{{item2.time.toFixed(1)}}h  <el-tag type="danger" size="mini" style="margin-left: 65px" v-if="item2.isOvertime === 1">{{ $t('other.WorkOvertime') }}<span v-if="item2.overtimeHours">{{item2.overtimeHours.toFixed(1)}}h</span></el-tag></p>
                                            <div v-for="(timeItem, tIndex) in item2.worktimeList" :key="tIndex"
                                                style="border: 0.5px #ddd solid;margin-bottom:5px;padding:5px;">
                                                <p style="display: inline-block;">{{$t('time.duration')}}：
                                                    <span v-if="item2.reportTimeType == 2" style="margin-right:10px;">{{timeItem.startTime+'-'+timeItem.endTime}}</span>
                                                {{timeItem.time.toFixed(1)}}h  
                                                </p>
                                                <p>{{$t('other.matters')}}：<span v-html="timeItem.content"></span></p>
                                            </div>
                                        </div>
                                        <p v-if="item2.state == 1 && user.timeType.needEvaluate == 1">{{$t('other.evaluation')}}：<span v-html="item2.evaluate"></span></p>
                                        
                                        <!--照片的显示 -->
                                        <p v-if="item2.pics != null && item2.pics.length > 0"> 
                                            <el-image v-for="(pic, index) in item2.pics" :key="index"
                                                style="width: 100px; height: 100px; margin-right:10px;"
                                                :src="pic" 
                                                :preview-src-list="item2.pics">
                                            </el-image>
                                        </p>
                                    </el-card>
                                </div>
                            </div>

                        </div>
                        <div class="issue" v-if="dynamicTab">
                            <!-- <el-input type="textarea" class="textareays" label-width="100%" label-height="140px"></el-input> -->
                            <div class="issue_fixation">
                                <div class="inputDeep"><el-input
                                type="textarea"
                                :placeholder="$t('pleaseentercontent')"
                                :autosize="{ minRows: 6, maxRows: 6}"
                                v-model="textarea2"
                                class="inputDeeps"
                                >
                                </el-input></div>
                                <el-button class="issue-button" type="primary" @click="release()">{{ $t('fa-bu') }}</el-button>
                            </div>
                        </div>
                    </span>
                </div>
            </div>
        </el-dialog>
        <!-- 子任务列表 -->
        <el-dialog :title="addForm.taskType == 1 ? $t('cha-kan-guan-lian-ren-wu') : $t('cha-kan-zi-ren-wu')" v-if="subTaskVisible" :visible.sync="subTaskVisible" :close-on-click-modal="false" customClass="customWidth" width="800px">
            <el-table :data="addForm.subTaskList" 
                :header-cell-style="{'font-weight':'normal'}"
                highlight-current-row v-loading="listLoading" style="width: 100%;margin-top:10px;" @row-click="taskLineClick">
                    <el-table-column prop="taskStatus" label="$t('wan-cheng')" width="50" >
                    <template slot-scope="scope">
                        <el-checkbox :disabled="scope.row.taskStatus==2" :checked="scope.row.taskStatus==1?true:false" size="large" class="cb"  
                                    @click.stop.native="finishTask(scope.row)"
                                    ></el-checkbox>
                    </template>
                </el-table-column>
                <el-table-column prop="name" :label="$t('biao-ti')" >
                    <template slot-scope="scope">
                        <el-tooltip class="item" effect="dark" :content="scope.row.name" placement="top">
                        <span style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;" > {{scope.row.name}}</span>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column prop="executorName" :label="$t('zhi-hang-ren')" width="100" >
                    <template slot-scope="scope">
                        <span v-if="user.userNameNeedTranslate != 1">
                            {{scope.row.executorName == null?$t('dai-fen-pei'):scope.row.executorName}}
                        </span>
                        <span v-if="user.userNameNeedTranslate == 1">
                            <span v-if="scope.row.executorName == null">
                                {{$t('dai-fen-pei')}}
                            </span>
                            <span v-else>
                                <TranslationOpenDataText type='userName' :openid='scope.row.executorName'></TranslationOpenDataText>
                            </span>
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="endDate" :label="$t('deadline')" width="100" ></el-table-column>
            </el-table>
        </el-dialog>
        <!--用户详细信息弹出框-->
        <el-dialog :title="$t('Checkthedetails')" v-if="userDetailVisible" :visible.sync="userDetailVisible" :close-on-click-modal="false" customClass="customWidth" width="400px">
            <div class="line"><span>{{ $t('lable.name') }}</span>
                <span v-if="user.userNameNeedTranslate != 1">{{userDetail.name}}</span>
                <span v-if="user.userNameNeedTranslate == 1"><TranslationOpenDataText type='userName' :openid='userDetail.name'></TranslationOpenDataText></span>
            </div>
            <div class="line"><span>{{ $t('Worknumber') }}</span><span>{{userDetail.jobNumber}}</span></div>
            <div class="line"><span>{{ $t('lable.phone') }}</span><span>{{userDetail.phone}}</span></div>
            <div class="line"><span>{{ $t('lable.department') }}</span>
                <span v-if="user.userNameNeedTranslate != 1">{{userDetail.departmentName}}</span>
                <span v-if="user.userNameNeedTranslate == 1"><TranslationOpenDataText type='departmentName' :openid='userDetail.departmentName'></TranslationOpenDataText></span>
            </div>
            <div class="line"><span>{{ $t('costof') }}</span><span>{{userDetail.cost}}{{ $t('Yuananhour') }}</span></div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="userDetailVisible = false" >{{ $t('btn.determine') }}</el-button>
            </div>
        </el-dialog>
        <!-- 新增任务分组弹出框 -->
        <el-dialog v-if="addGroupDialog" :visible.sync="addGroupDialog" :close-on-click-modal="false" customClass="customWidth" width="600px">
            <div slot="title" >
                <el-tabs v-model="createGroupWay">
                <el-tab-pane :label="$t('newgrouping')" name="new">
                    <el-form ref="formGrouping" :model="groupForm" :rules="formGrouping" style="margin-top:40px;">
                        <el-form-item prop="name">
                            <el-input v-model.trim="groupForm.name" :placeholder="$t('pleaseenteragroupname')" maxlength="50"
                                show-word-limit clearable></el-input>
                        </el-form-item>
                        <el-button type="primary" @click="addGroup('formGrouping')" style="width:100%;" >{{ $t('create') }}</el-button>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane :label="$t('creatintemplate')" name="template">
                    <el-card :class="`template_box ${t.selected ? 'themeBorderColor' : ''}`" :style="t.selected?'border: 1px solid;':''" v-for="(t,tIndex) in groupTemplateList" :key="t.id"  @click.native="choseTemplate(tIndex)">
                        <div>
                        <el-row >
                            <el-col :span="22">
                                <div><span>{{t.name}}</span>
                                <el-link :underline="false" type="primary" style="color:#aaa;margin-left:10px;"
                                 @click="setTemplate(t)"><i class="el-icon-setting" v-show="t.isSystem == 0" ></i>
                                </el-link>
                                <el-link :underline="false" type="primary" style="color:#aaa;margin-left:10px;"
                                 @click="deleteTemplate(t)"><i class="el-icon-delete" v-show="t.isSystem == 0" ></i>
                                </el-link>
                                </div>
                                <div style="margin-top:10px;">
                                    <span style="color:#8c8c8c;font-size:12px;" v-for="(s,index) in t.stagesList" :key="s.id">
                                    <i class="el-icon-arrow-right" v-if="index>0"></i>
                                    {{s.stagesName}}</span>
                                </div>
                            </el-col>
                            <el-col :span="2">
                                <i class="el-icon-check themeFontColor" v-show="t.selected" style="font-size:20px;margin-top:12px;"></i>
                            </el-col>
                            
                        </el-row>
                        
                        </div>
                    </el-card>
                    <el-button type="primary" @click="addTemplateGroup" style="width:100%;" >{{ $t('create') }}</el-button>
                </el-tab-pane>
                </el-tabs>
            </div>
            <el-dialog :title="$t('bian-ji-mo-ban')" append-to-body v-if="setTemplateDialog" :visible.sync="setTemplateDialog" width="500px">
                <el-form label-width="20%">
                    <el-form-item :label="$t('mo-ban-ming-cheng')"><el-input v-model="setTemplateData.name" style="width:80%" clearable></el-input></el-form-item>
                    <el-form-item label=""><el-checkbox v-model="setTemplateData.creWithPro">{{ $t('suixiangmuzidongchuangjian') }}</el-checkbox></el-form-item>
                    <el-form-item v-for="item,index in setTemplateData.stagesList" :key="item.id" :label="index == 0 ? $t('tasklist') : ''">
                        <el-input v-model="item.stagesName"  style="width:70%" clearable></el-input>
                        <el-link :underline="false" type="primary" style="color:#aaa;" @click="deleteStages(item,index)"  v-if="index != 0">
                            <i class="el-icon-delete"></i>
                        </el-link>
                    </el-form-item>
                    <el-link style="margin-left:20%" :underline="false" type="primary" @click="addStages()">{{ $t('xin-zeng-ren-wu-lie-biao') }}</el-link>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="setTemplateDialog = false">{{ $t('btn.cancel') }}</el-button>
                    <el-button type="primary" @click="setTemplateSave()">{{ $t('save') }}</el-button>
                </div>
            </el-dialog>
        </el-dialog>
        <el-dialog :title="$t('taskgroupleader')" v-if="setInchargerDialog" :visible.sync="setInchargerDialog" :close-on-click-modal="false" customClass="customWidth" width="300px">
            <el-form ref="formIncharger" :model="groupForm" :rules="rules" style="margin-top:10px;">
                    <el-form-item prop="taskGpIncharge"> 
                        <el-select v-if="user.userNameNeedTranslate != 1" v-model="groupForm.inchargerId" :placeholder="$t('defaultText.pleaseChoose')" style="width:100%;" clearable filterable>
                            <el-option v-for="item in joinMembList" :key="item.id" :value="item.id" :label="item.name">
                                <span style="float: left">{{ item.name }}</span>
                                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.jobNumber }}</span>
                            </el-option>
                        </el-select>
                        <selectCat v-if="user.userNameNeedTranslate == 1" :filterable="true" :size="'mini'" @selectCal="selectCal" :subject="joinMembList" :subjectId="groupForm.inchargerId" :clearable="true" :distinction="'2'"></selectCat>
                    </el-form-item>
                </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="saveGroupIncharger" style="width:100%;" >{{ $t('save') }}</el-button>
            </div>
        </el-dialog>
        <el-dialog :title="$t('modifyingTaskGroup')" v-if="modGroupDialog" :visible.sync="modGroupDialog" :close-on-click-modal="false" customClass="customWidth" width="450px">
            <el-form ref="form2" :model="groupForm" :rules="rules" style="margin-top:10px;">
                    <el-form-item :label="$t('bian-hao')" label-width="50px">
                        <el-input v-model="groupForm.taskGroupCode" :placeholder="$t('peaseenterthe')" maxlength="20"
                            show-word-limit clearable></el-input>
                    </el-form-item>
                    <el-form-item prop="name" :label="$t('names')" label-width="50px">
                        <el-input type="textarea" :rows="3" v-model="groupForm.name" :placeholder="$t('peaseenterthe')" maxlength="50"
                            show-word-limit clearable></el-input>
                    </el-form-item>
                    
                </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addGroup('form2')" style="width:100%;" >{{ $t('save') }}</el-button>
            </div>
        </el-dialog>
        
        <el-dialog :title="$t('sheZhiFenZuYuGuGongShi')" v-if="modGroupManDayDialog" :visible.sync="modGroupManDayDialog" :close-on-click-modal="false" customClass="customWidth" width="600px">
            <el-table :data="groupList" :key="modGroupManDayKey" size="small" :height="'400px'" show-summary="true">
                <el-table-column prop="name" :label="$t('groupname')">
                </el-table-column>
                <el-table-column prop="manDay" width="200" :label="$t('yuGuGongShiRenTian')" >
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.manDay" type="number" @input="jisuanEstimatedWorkTime(scope.row.manDay,scope.row.id)" :placeholder="$t('peaseenterthe')" maxlength="10" :max="99999" style="width:120px;" :disabled="scope.row.disabled"></el-input>&nbsp;{{ $t('renTian') }}&nbsp;
                        <!-- <i v-if="user.companyId=3092 && scope.row.disabled"  @click="changeBudget(scope.row)"  class="el-icon-circle-plus-outline"></i> -->
                    </template>
                </el-table-column>
                <el-table-column prop="estimatedWorkTime" width="200" :label="$t('yuGuGongShiXiaoShi')" >
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.estimatedWorkTime" type="number"  @input="jisuanManDay(scope.row.estimatedWorkTime,scope.row.id)" :placeholder="$t('peaseenterthe')" maxlength="10" :max="99999" style="width:120px;" :disabled="scope.row.disabled"></el-input>&nbsp;{{ $t('time.hour') }}&nbsp;
                        <i v-if="user.companyId=3092 && scope.row.disabled"  @click="changeBudget(scope.row)"  class="el-icon-circle-plus-outline"></i>
                    </template>
                </el-table-column>
            </el-table>
            <p style="text-align:center;">{{ $t('dangQianXiangMuYuGuGongShiWei') }}{{ currentProject.manDay == null? 0:currentProject.manDay }} {{ $t('renTian') }} {{ currentProject.estimatedWorkTime == null? 0:currentProject.estimatedWorkTime }} {{ $t('time.hour') }}</p>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="setManDayData()" style="width:100%;" >{{ $t('save') }}</el-button>
            </div>
        </el-dialog>

        <el-dialog :title="$t('yuGuGongShiBianGeng')" v-if="changeBudgetDig" :visible.sync="changeBudgetDig" :close-on-click-modal="false" customClass="customWidth" width="500px">
            <el-form :model="groupBudgetData" label-width="120px">
                <el-form-item :label="$t('yuanYuGuGongShi')"><span>{{groupBudgetData.manDay}}{{ $t('renTian') }} / {{groupBudgetData.estimatedWorkTime}}{{ $t('time.hour') }}</span></el-form-item>
                <el-form-item :label="$t('yuGuGongShiXiuGai')" prop="changeManDay">
                   <el-input v-model="groupBudgetData.changeManDay"  type="number"  @input="changeNowManDay(groupBudgetData)" :placeholder="$t('peaseenterthe')" maxlength="10" :max="99999" style="width:120px;"></el-input>&nbsp;{{ $t('renTian') }}
                   <el-input v-model="groupBudgetData.changeEstimatedWorkTime"  type="number" @input="changeEstimatedWorkTime(groupBudgetData)" :placeholder="$t('peaseenterthe')" maxlength="10" :max="99999" style="width:120px;"></el-input>&nbsp;{{$t('time.hour')}}
                </el-form-item>
                <el-form-item :label="$t('bianGengHouYuGuGongShi')"><span>{{nowManDay}}{{$t('renTian')}} / {{nowEstimatedWorkTime}}{{$t('time.hour')}}</span></el-form-item>
                <el-form-item :label="$t('bianGengLiYou')">
                    <el-input
                        type="textarea"
                        :rows="2"
                        :placeholder="$t('pleaseentercontent')"
                        v-model="groupBudgetData.remark">
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="changeBudgetDig = false">{{ $t('btn.cancel') }}</el-button>
                <el-button type="primary" @click="changeBudgetTrue(groupBudgetData)" :loading="addLoading">{{ $t('btn.submit') }}</el-button>
            </div>
        </el-dialog>
        <el-dialog :title="$t('addtemplate')" v-if="addToTmpDialog" :visible.sync="addToTmpDialog" :close-on-click-modal="false" customClass="customWidth" width="500px">
            <el-form ref="formTmp" :model="templateForm" :rules="rules" style="margin-top:10px;">
                    <el-form-item prop="name">
                        <el-input v-model="templateForm.name" :placeholder="$t('entertemplatename')" maxlength="12"
                            show-word-limit clearable></el-input>
                            <div>
                                <span style="margin-right:20px">{{ $t('sametimetosave') }}</span>
                                <el-checkbox v-model="templateForm.saveTask" :label="$t('other.task')"></el-checkbox>
                                <el-checkbox v-model="templateForm.saveMileStone" :label="$t('other.milestone')"></el-checkbox>
                                <el-checkbox v-model="templateForm.saveRisk" :label="$t('risk')"></el-checkbox>
                                <el-checkbox v-model="templateForm.automatically" :label="$t('suixiangmuzidongchuangjian')"></el-checkbox>
                            </div>
                    </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="createTemplate" style="width:100%;" :loading="saveTemplateLoading">{{ $t('savetemplate') }}</el-button>
            </div>
        </el-dialog>
        
        <!-- 新增任务列表弹出框 -->
        <el-dialog :title="$t('modifyingtheTaskList')" v-if="addStageDialog" :visible.sync="addStageDialog" :close-on-click-modal="false" customClass="customWidth" width="500px">
            <el-form ref="form2" :model="stageForm" :rules="rules2" >
                <el-form-item prop="stagesName">
                    <el-input v-model="stageForm.stagesName" :placeholder="$t('pleaseenteratasklistname')" maxlength="60"
                        show-word-limit clearable>
                        <template slot="prepend">
                            <div style="width:90px">{{ $t('ren-wu-lie-biao-ming-cheng') }}</div>
                        </template></el-input>
                    <el-input v-if="user.timeType.stageHasEvtime == 1" id="stageForm_ysgs" v-model="stageForm.stagesTime" style="margin-top:5px" @keyup.native="restrictNumber('stageForm_ysgs')">
                        <template slot="prepend">
                            <div style="width:90px">{{ $t('yu-suan-gong-shi') }}<span>（h）</span></div>
                        </template>
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addStagePost" style="width:100%;" >{{ $t('save') }}</el-button>
            </div>
        </el-dialog>

        <!--导出数据条件选择 -->
        <el-dialog :title="$t('workplanexport')" v-if="exportDialog" :visible.sync="exportDialog" :close-on-click-modal="false" customClass="customWidth" width="500px">
            <el-form ref="form3" >
                <el-form-item :label="$t('choosetype')">
                    <el-select v-model="exportTaskType" :placeholder="$t('typesof')"  clearable style="width:350px;">
                        <el-option :label="$t('other.task')" value="0"></el-option>
                        <el-option :label="$t('other.milestone')" value="1"></el-option>
                        <el-option :label="$t('risk')" value="2"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="exportTask" style="width:100%;" :loading="loadingExport">{{ $t('export.export') }}</el-button>
            </div>
        </el-dialog>

        <!--导入数据，下载模板 -->
        <el-dialog :title="$t('wdorkplanimport')" v-if="importTaskDialog" :visible.sync="importTaskDialog" :close-on-click-modal="false" customClass="customWidth" width="500px">
            <el-form ref="form4" >
                <el-form-item :label="'1. '+$t('qing-xian-xia-zai-mo-ban-bing-tian-xie-hou-shang-chuan')" >
                    <el-link type="primary" :underline="false" href="./upload/项目任务导入模板.xlsx" :download="$t('projectTaskTemplate') + '.xlsx'">{{ $t('projecttasktemplatedownload') }}</el-link>
                </el-form-item>
                <!-- <el-form-item label="2. 选择要导入的任务列表" v-if="false">
                    <el-select v-model="importToStageId" placeholder="任务列表"  style="width:350px;">
                        <el-option v-for="item in stageList" :label="item.stagesName" :value="item.id" :key="item.id"></el-option>
                    </el-select>
                </el-form-item> -->
                <div><span style="font-size:12px;color:#999;">{{ $t('faoesgfavsbxjs') }}</span></div>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-upload ref="upload" action="#" :limit="1" :http-request="importTask" :show-file-list="false">
                        <el-button type="primary" :underline="false" style="width:100%;" :loading="loadingExport">{{ $t('uoloadFiles') }}</el-button>
                </el-upload>
            </div>
        </el-dialog>
        </div>
        </div>
    </section>
</template>
<script>
    // 自定义select组件
    import selectCat from "@/components/select.vue"
    import util from "../../common/js/util";
    import draggable from 'vuedraggable';
    import tinymce from 'tinymce/tinymce'
    import 'tinymce/themes/silver/theme'
    import 'tinymce/skins/ui/oxide/skin.css';
    import FileCenter from './fileCenter.vue';
    import ProjectInfo from './info.vue';
    import Summary from './summary.vue';
    import Earning from './earning.vue';
    import CostBaseline from './CostBaseline.vue'

    import taskComponent from "@/components/taskComponent.vue"
    import selectProject from "../../components/selectProject.vue";
    
    // import editor from '@tinymce/tinymce-vue'
    // 富文本样式
    import 'quill/dist/quill.core.css'
    import 'quill/dist/quill.snow.css'
    import 'quill/dist/quill.bubble.css'
    // 导入富文本
    import { quillEditor } from 'vue-quill-editor'
    import { error } from 'dingtalk-jsapi';
    import delete$ from 'dingtalk-jsapi/api/biz/cspace/delete';

    import { getThemeColor } from '@/utils/commonMethod.js'
    let id=1;
    export default {
        name: "two-list-headerslots",
        display: "Two list header slot",
        order: 14,
        components: { 
            draggable,
            // editor,
            FileCenter,
            ProjectInfo,
            Summary,
            CostBaseline,
            Earning,
            quillEditor, // 富文本
            selectCat,
            taskComponent,
            selectProject
        },
        
        data() {
            return {
                modGroupManDayDialog: false,
                isManageDept: false,
                componentFlg: false,
                mileageCup: false,
                loadingExport : false,
                saveTemplateLoading: false,
                joinMembList:[],
                setInchargerDialog: false,
                recentProgressInfo:{},
                addToTmpDialog:false,
                templateForm:{},
                importTaskDialog:false,
                importToStageId:null,
                exportDialog: false,
                exportTaskType:null,
                groupTemplateList:[],
                createGroupWay:'new',
                modGroupDialog:false,
                subTaskVisible:false,
                orderList:[{id:"seq",name:this.$t('manuallydragthesequence'),isDesc:false},{id:"create_date",name:this.$t('creationtimeisthelatest'),isDesc:true},
                                {id:"end_date",name:this.$t('deadlineisthelatest'),isDesc:true},
                                {id:"task_level",name:this.$t('highestpriority'),isDesc:true}],
                order:"seq",
                isDesc:false,
                taskDataList:[],
                displayTable: false,
                viewList: [{id:1,name:this.$t('alltaskss')},{id:2,name:this.$t('taskinprogress')},{id:3,name:this.$t('missionscompleted')},{id:4,name:this.$t('taskscheduled')},
                {id:5,name:this.$t('createdthetask')},{id:6,name:this.$t('missionIwason')},{id:7,name:this.$t('todaytask')},{id:8,name:this.$t('taskthatisoverdue')}],
                importanceList:[{id:0,name:this.$t('yi-ban')},{id:1,name:this.$t('zhong-yao')},{id:2,name:this.$t('jin-ji')},],
                taskTypeList:[{id:0,name:this.$t('other.task'), icon:"iconfont firerock-iconrenwu"},{id:1,name:this.$t('other.milestone'),icon:"iconfont firerock-iconicon-"},{id:2,name:this.$t('risk'),icon:"iconfont firerock-iconfengxian"}],
                taskTypeColor:[getThemeColor(),'#8613ad','#bf0404'],
                taskTypeIcon:['iconfont firerock-iconrenwu','iconfont firerock-iconicon-','iconfont firerock-iconfengxian'],
                taskStatusList:[this.$t('ongoing'),this.$t('state.completed'),this.$t('state.undone')],
                //优先级
                taskLevelColor:['#262626','#E6A23C','#F56C6C'],
                stageListHeight:0,
                taskListinH:0,
                groupWidth:260,
                drag: false,
                stageDrag: false,
                dragging: false,
                stageList:[],
                selectedGroup:{},
                allGroupData:[],
                defaultGroupId:null,
                addGroupDialog: false,
                addStageDialog: false,
                groupSearch:null,
                groupType:0,//0-分组，1-视图
                groupList: [],
                groupForm:{},
                stageForm:[],
                curProjectId:null,
                projectList:null,
                activeIndex:"1",
                activeName:"projectInside",
                searchField:null,
                keyword:null,
                user: JSON.parse(sessionStorage.getItem("user")),
                permissions: JSON.parse(sessionStorage.getItem("permissions")),
                userDetailVisible: false,
                userDetail:{},
                date: new Date(),
                users: [],
                tableHeight: 0,
                listLoading: false,
               
                subProjectVisible: false,
                subProjectList: [],//子项目列表
                currentProject:{},
                addSubProject: false,
                addFormVisible: false,
                addLoading: false,
                title: "",
                addForm: {
                    name: '',
                },
                rules: {
                    name: [{ required: true, message: this.$t('pleaseenteragroupname'), trigger: "blur" }],
                },
                rulesManDay: {
                    manDay: [{ required: true, message: this.$t('qingShuRuYuGuGongShi'), trigger: "blur" }],
                },
                rules2: {
                    stagesName: [{ required: true, message: this.$t('pleaseenteratasklistname'), trigger: "blur" }],
                },
                taskRules : {
                    name: [{ required: true, message: this.$t('enterthetaskcontent'), trigger: "blur" }],
                },
                formGrouping: {
                    name: [{ required: true, message: this.$t('pleaseenteragroupname'), trigger: "blur" }],
                },
                sleectId: null,
                sleectProjectId: null,
                sidebarIndex: 0, // 侧边栏索引
                url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                count: 0,
                textarea2: '',
                taskId: null,
                commentList: [],
                radio: 0,
                critic: [], // 评论头像的数组
                editorOption: { // 富文本框里面的默认值
                    placeholder: this.$t('pleaseentethetext'),
                     modules: {
                        toolbar:[
                            ['bold', 'italic', 'underline', 'strike'],    //加粗，斜体，下划线，删除线
                            // ['blockquote', 'code-block'],     //引用，代码块
                    
                            [{ 'header': 1 }, { 'header': 2 }],        // 标题，键值对的形式；1、2表示字体大小
                            // [{ 'list': 'ordered'}, { 'list': 'bullet' }],     //列表
                            // [{ 'script': 'sub'}, { 'script': 'super' }],   // 上下标
                            // [{ 'indent': '-1'}, { 'indent': '+1' }],     // 缩进
                            // [{ 'direction': 'rtl' }],             // 文本方向
                    
                            [{ 'size': ['small', false, 'large', 'huge'] }], // 字体大小
                            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],     //几级标题
                    
                            [{ 'color': [] }, { 'background': [] }],     // 字体颜色，字体背景颜色
                            // [{ 'font': [] }],     //字体
                            [{ 'align': [] }],    //对齐方式
                    
                            ['clean'],    //清除字体样式
                            // ['image','video']    //上传图片、上传视频
                            ['image']    //上传图片、上传视频
                        ], //工具栏设置
                    },
                    theme: 'snow',
                },
                textContent: true, // 控制提交 
                times: null,
                text2: '',
                innerVisibless: false, // 任务展示弹出层
                activities: [{
                    content: this.$t('normals'),
                    timestamp: this.$t('hoursago'),
                    size: 'large',
                    type: 'primary',
                    icon: 'el-icon-circle-check',
                    color: '#409EFF'
                    }, {
                    content: this.$t('withinthetimelimit'),
                    timestamp: this.$t('hoursago8'),
                    color: '#F87872'
                    }],
                ProgressList: [],
                checkboxGrounp: [], // 选中人的数据
                checkLists: [], // 选中人数据的ID
                taskIid: null,
                gstimday:[],
                gstimhour:[],
                timelabel: false,
                relationdata: [],
                isRelationTab: false,
                relationvalue:[],
                relationSubTaskList:[],
                relationItemData: null,
                relationPar:{name: ''},
                isRelationItem: false,

                // 关联文件
                fileListLoading:false,
                projectFileList:[],
                taskFileList:[],
                relationFileDialog: false,
                addFileId: null,
                isEditFile: false,

                // 设置项目参与人
                participantsDialog: false,
                participantsFilterText: '',
                deptMembData: [
                    {
                        id: 0,
                        label: this.$t('lable.unassigned'),
                    }
                ],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                chosenMembCount: 0,
                ididid:null,
                alreadyPartArray: [],

                projectCreatorId: null,
                projectInchargerId: null,

                canAddTask: false, // 是否可创建任务的判断标志
                canEditStageList: false, //是否可编辑列表的判断标志
                groupResponsibleId: '', // 分组负责人的id
                groupDetailsShow: false,
                groupDetailData: {},
                groupDetailTil: '',
                setTemplateData: {},
                setTemplateDialog: false,
                
                taskListPage: 1,
                taskListSize: 20,
                taskListTotal: 0,
                dynamicTab: true,
                dailyList: [],

                taskComponentFlg: false,
                integrationTask: {},
                integrationTaskNingwai: {},

                hideCompleted: false,

                wxFilterText: '',

                filterNodeFlag: false,
                filterNodePersonnel: [],

                changeBudgetDig:false,
                groupBudgetData:{},
                nowManDay:0,
                nowEstimatedWorkTime:0,

                modGroupManDayKey: 1,
            };
            
        },
        watch: {
            participantsFilterText(val) {
                let { userNameNeedTranslate } = JSON.parse(sessionStorage.getItem("user"))
                if(userNameNeedTranslate != 1) {
                    this.$refs.chooseMembTree2.filter(val);
                }
                if(!val) {
                    this.$refs.chooseMembTree2.filter(val);
                }
            }
        },
        methods: {
            closeBounced(obj) {
                console.log('触发了')
                if(!obj.backToParentTaskSub) {
                    this.addFormVisible = false
                    this.taskComponentFlg = false
                    if(obj.submitInsert) {
                        if (this.groupType == 0) {
                            this.getStageList();
                        } else {
                            this.getViewTaskList();
                        }
                    }

                    if(obj.addSubTask) {
                        this.addSubTask()
                    }

                    if(obj.deleteTask) {
                        this.getStageList();
                    }

                    if(obj.taskLineClickAbs) {
                        this.taskLineClick(obj.items)
                    }
                } else {
                    this.backToParentTask()
                }
            },
            // 获取来自日报
            getDailyList(id) {
                this.http.post('/report/getTaskReportList',{ 
                    // taskId: '22131'
                    taskId: id
                },
                res => {
                    if (res.code == "ok") {
                        this.dailyList = res.data
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },
            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);
                }
            },
            test(item){
                // let pro = this.$route
                console.log('test',this.projectList);
                
            },
            setParticipants(){
                let chosenList = this.$refs.chooseMembTree2.getCheckedNodes();
                let chose2 = chosenList.filter(item=>item.isUser == 1)
                let chose3 = []
                for(let i=0;i<chose2.length;i++){chose3.push(chose2[i].id)}
                console.log('test',chose2,chose3);
                this.http.post('/group-participator/save',{
                    groupId: this.ididid,
                    idsJson: JSON.stringify(chose3)
                },res => {
                    if(res.code == 'ok'){
                        this.participantsDialog = false
                        this.$message({
                            message: this.$t('setupthesuccess'),
                            type: 'success'
                        })
                    }else {
                        this.$message({
                            message: res.msg,
                            type: 'error'
                        })
                    }
                },error => {
                    this.$message({
                        message: error,
                        type: 'error'
                    })
                })
            },
            // 设置项目参与人
            setupParticipants(item){
                this.ididid = item.id
                this.participantsFilterText = ''
                this.wxFilterText = ''
                console.log(item);
                this.participantsDialog = true
                this.getAlreadyPartArray(item.id)
                this.getDepartmentList()
            },
            // 获取用于设置参与人的列表
            getDepartmentList(){
                this.http.post('/department/listAllMemb',{
                },res => {
                    if(res.code == 'ok'){
                        let list = res.data
                        this.haveUsersList(list)
                        this.deptMembData = JSON.parse(JSON.stringify(list))
                        console.log('123',this.deptMembData);
                    }else {
                        this.$message({
                            message: res.msg,
                            type: 'error'
                        })
                    }
                },error => {
                    this.$message({
                        message: error,
                        type: 'error'
                    })
                })
            },
            haveUsersList(list){
                for (var i in list) {
                    if (list[i].children != null) {
                        this.haveUsersList(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);
                        });
                    }
                }
            },
            // 获取已参与人员
            getAlreadyPartArray(eid){
                this.http.post('/group-participator/get',{
                    groupId: eid
                },res => {
                    if(res.code == 'ok'){
                        this.alreadyPartArray = res.data
                        this.chosenMembCount = res.data.length
                        // console.log('get',res.data, this.alreadyPartArray)
                    }else {
                        this.$message({
                            message: res.msg,
                            type: 'error'
                        })
                    }
                },error => {
                    this.$message({
                        message: error,
                        type: 'error'
                    })
                })
            },
            // 筛选逻辑
            filterNode(value, data) {
                let { userNameNeedTranslate } = this.user
                if (!value) return true;
                if(userNameNeedTranslate != '1') {
                    return data.label.indexOf(value) !== -1;
                } else {
                    return this.filterNodePersonnel.some(item => item.includes(data.label))
                }
            },
            // 选中改变
            onTreeItemChange() {
                var chosenList = this.$refs.chooseMembTree2.getCheckedNodes();
                var list = chosenList.filter(item=>item.isUser == 1);
                this.chosenMembCount = list.length;
            },


            
            // 关联文件按钮
            relationFileClick(){
                this.relationFileDialog = true
                this.addFileId = null
                this.getProjectFileList()
            },
            // 确认关联文件
            addTaskFile(){
                if(this.addFileId == null){
                    this.$message({message: this.$t('xuanzguanlianwenjian') , type: 'warning'})
                    return
                }
                this.http.post('/task-files/addDocumentRef',{
                    documentId: this.addFileId,
                    taskId: this.addForm.id,
                    projectId: this.curProjectId
                },res => {
                    if(res.code == 'ok'){
                        this.$message({
                            message: this.$t('guan-lian-cheng-gong'),
                            type: 'success'
                        })
                        this.relationFileDialog = false
                        this.getTaskFileList()
                    }else {
                        this.$message({
                            message: res.msg,
                            type: 'error'
                        })
                    }
                },error => {
                    this.$message({
                        message: error,
                        type: 'error'
                    })
                })
            },
            // 获取项目下的文档列表
            getProjectFileList(){
                this.http.post('/task-files/getDocumentList',{
                    projectId: this.curProjectId
                },res => {
                    if(res.code == 'ok'){
                        this.projectFileList = res.data
                        console.log('list',res.data);
                    }else {
                        this.$message({
                            message: res.msg,
                            type: 'error'
                        })
                    }
                },error => {
                    this.$message({
                        message: error,
                        type: 'error'
                    })
                })
            },
            // 获取任务下的文档列表
            getTaskFileList(e,eid){
                let etaskId
                if(e == 1){etaskId = eid}
                else{etaskId = this.addForm.id}
                this.fileListLoading = true
                this.http.post('/task-files/getTaskFiles',{
                    taskId: etaskId
                },res => {
                    if(res.code == 'ok'){
                        this.fileListLoading = false
                        this.taskFileList = res.data
                        console.log('taskFileList',res.data);
                    }else {
                        this.fileListLoading = false
                        this.$message({
                            message: res.msg,
                            type: 'error'
                        })
                    }
                },error => {
                    this.fileListLoading = false
                    this.$message({
                        message: error,
                        type: 'error'
                    })
                })
            },
            // 列表的删除按钮
            taskFileDelete(eid){
                this.$confirm(this.$t('shiFouYiChuCiWenJian'), this.$t('other.prompts'), {
                    confirmButtonText: this.$t('btn.determine'),
                    cancelButtonText: this.$t('btn.cancel'),
                    type: 'warning'
                }).then(()=>{
                    this.http.post('/task-files/delete',{
                        id: eid
                    },res => {
                        if(res.code == 'ok'){
                            this.$message({
                                message: res.data,
                                type: 'success'
                            })
                            this.getTaskFileList()
                        }else {
                            this.$message({
                                message: res.msg,
                                type: 'error'
                            })
                        }
                    },error => {
                        this.$message({
                            message: error,
                            type: 'error'
                        })
                    })
                }).catch(()=>{
                    this.$message({
                        message: this.$t('thedeletionhasbeencancelled'),
                        type: 'info'
                    })
                })
            },
            // 列表的上传按钮
            uploadFileClick(item){
                console.log("upload",item.file);
                let files = new FormData()
                files.append("projectId",this.curProjectId);
                files.append("taskId", this.addForm.id);
                files.append("file", item.file);
                this.http.uploadFile('/task-files/uploadFile',files,
                res => {
                    if(res.code == 'ok'){
                        console.log(res);
                        this.$message({
                            message: this.$t('yi-shang-chuan'),
                            type: 'success'
                        })
                        this.getTaskFileList()
                    }else {
                        this.$message({
                            message: res.msg,
                            type: 'error'
                        })
                    }
                },error => {
                    this.$message({
                        message: error,
                        type: 'error'
                    })
                })
            },


            selchg(){   //类型切换
                if(this.addForm.taskType == 1){
                    this.timelabel = true
                    if(!this.addForm.executorListFront[0].executorId) {
                        console.log(this.currentProject)
                        this.addForm.executorListFront[0].executorId = this.currentProject.inchargerId
                    }
                }else{
                    this.timelabel = false
                }
            },
            addRelation(){  //关联任务卡片
                this.relationvalue = []
                this.isRelationTab = true
                this.getrelation()
            },
            addRelationTask(){  //添加关联任务
                this.http.post('/task/addMileStoneTask',{
                    milestoneId: this.addForm.id,
                    taskIds: JSON.stringify(this.relationvalue)
                },
                res =>{
                    if(res.code == "ok") {
                        this.isRelationTab = false
                        this.$message({
                            message: this.$t('addsuccessful'),
                            type: 'success'
                        })
                        this.getRelationTaskList()
                        this.$forceUpdate()
                    }else {
                        this.$message({
                            message: res.msg,
                            type: 'error'
                        })
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: 'error'
                    })
                })
            },
            getRelationTaskList(i,e){  //获取关联任务列表
                let eid = null
                if(i){
                    eid = e
                }else{
                    eid = this.addForm.id
                }
                this.http.post('/task/getMilestoneTaskList',{
                    milestoneId: eid
                },res => {
                    if(res.code == 'ok') {
                        this.relationSubTaskList = res.data
                        // console.log('res',res.data);
                    }else {
                        this.$message({
                            message: res.msg,
                            type: 'error'
                        })
                    }
                },error => {
                    this.$message({
                        message: error,
                        type: 'error'
                    })
                })
            },
            getrelation(){  //获取选择关联列表
                this.http.post('/task/getTaskOnlyList',{
                    projectId: this.curProjectId
                },
                res => {
                    if (res.code == "ok") {
                        this.relationdata = []
                        res.data.forEach( (item) =>{
                            if(item.taskType != 1){
                                this.relationdata.push(item)
                            }
                        })
                        
                        // console.log('map',this.relationdata);
                    } else {
                        this.$message({
                        message: res.msg,
                        type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },
            // 里程碑关联任务列表

            // 解除关联
            deleteRelationItem(eid){
                this.listLoading = true
                this.http.post('/task/removeMileStoneTask',{
                    id: eid
                },res => {
                    if(res.code == 'ok') {
                        this.getRelationTaskList()
                        this.listLoading = false
                        this.$message({
                            message: this.$t('jie-chu-cheng-gong'),
                            type: 'success'
                        })
                    }else {
                        this.listLoading = false
                        this.$message({
                            message: res.msg,
                            type: 'error'
                        })
                    }
                },error => {
                    this.listLoading = false
                    this.$message({
                        message: error,
                        type: 'error'
                    })
                })
            },
            // 关联任务列表是否完成修改
            relationFinishTask(row){
                this.http.post('/task/finish',{
                    id: row.taskId,
                    taskStatus: row.taskStatus
                },res => {
                    if(res.code == 'ok'){
                        if(this.groupType == 0){
                            this.getStageList();
                        }else {
                            this.getViewTaskList();
                        }
                    }else{
                        this.$message({
                            message: res.msg,
                            type: 'error'
                        })
                    }
                },error => {
                    this.$message({
                        message: error,
                        type: 'error'
                    })
                })
            },


            //保存分组负责人
            saveGroupIncharger() {
                this.http.post('/task-group/saveGroupIncharger', {id: this.groupForm.id, inchargerId: this.groupForm.inchargerId, projectId: this.curProjectId},
                        res => {
                            this.setInchargerDialog = false;
                            if (res.code == "ok") {
                                this.$message({
                                    message: this.$t('setupthesuccess'),
                                    type: "success"
                                });
                                //更新原始分组数据
                                this.groupList.filter(g=>g.id == this.groupForm.id)[0].inchargerId = this.groupForm.inchargerId;
                            } else {
                                this.$message({
                                    message: res.msg,
                                    type: "error"
                                });
                            }
                        }
                    );
                
            },
            // 编辑模板
            setTemplate(t){
                console.log(t);
                this.setTemplateData = t
                this.setTemplateData.needDelete = []
                this.setTemplateDialog = true
            },
            setTemplateSave(){
                if(this.setTemplateData.name == '' || this.setTemplateData.name == null){
                    this.$message({
                        message: this.$t('mo-ban-ming-cheng-bu-neng-wei-kong'),
                        type: 'error'
                    })
                    return
                }
                for(let i in this.setTemplateData.stagesList){
                    if(this.setTemplateData.stagesList[i].stagesName == '' || this.setTemplateData.stagesList[i].stagesName == null){
                        this.$message({
                            message: this.$t('ren-wu-lie-biao-ming-cheng-bu-neng-wei-kong'),
                            type: 'error'
                        })
                        return
                    }
                }
                this.http.post('/task-group/setTemplate',this.setTemplateData,
                res => {
                    if(res.code == 'ok'){
                        this.$message({
                            message: this.$t('message.modifyTheSuccess'),
                            type: 'success'
                        })
                        this.getGroupTemplate()
                        this.setTemplateDialog = false
                    }else{
                        this.$message({
                            message: res.msg,
                            type: 'error'
                        })
                    }
                },err => {
                    this.$message({
                        message: err,
                        type: 'error'
                    })
                })
            },
            deleteStages(item,index){
                this.setTemplateData.needDelete.push(item.id)
                this.setTemplateData.stagesList.splice(index,1)
                console.log('deletestages',item.id);
            },
            addStages(){
                this.setTemplateData.stagesList.push({
                    stagesName: '',
                    templateId: this.setTemplateData.id
                })
            },
            //删除模板
            deleteTemplate(t) {
                var that = this;
                this.$confirm(this.$t('que-ren-yao-shan-chu')+"["+t.name+"]"+this.$t('ma'), this.$t('other.prompts'), {
                    //type: 'warning'
                }).then(() => {
                    this.http.post('/group-template/deleteTemplate', {id: t.id},
                        res => {
                            if (res.code == "ok") {
                                this.getGroupTemplate();
                                this.$message({
                                    message: this.$t('deletingTemplateSuccessfully'),
                                    type: "success"
                                });
                            } else {
                                this.$message({
                                    message: res.msg,
                                    type: "error"
                                });
                            }
                        }
                    );
                });
            },
            //创建模板
            createTemplate() {
                this.saveTemplateLoading = true;
                this.http.post('/group-template/addTemplate', this.templateForm,
                    res => {
                        this.saveTemplateLoading = false;
                        if (res.code == "ok") {
                            this.addToTmpDialog = false;
                            this.getGroupTemplate();
                            this.$message({
                                message: this.$t('addTemplateSuccessfully'),
                                type: "success"
                            });
                        } else {
                            this.$message({
                                message: res.msg,
                                type: "error"
                            });
                        }
                    }
                );
            },
            addToTemplate(item) {
                this.addToTmpDialog = true;
                this.templateForm = {groupId: item.id, name:item.name, saveTask:false, saveMileStone:false, saveRisk:false};
            },
            changeBase() {
                // this.$refs.earning.refreshPage();
            },
            // 批量导入人员
            importTask(item) {
                //首先判断文件类型
                this.loadingExport = true
                let str = item.file.name.split(".");
                let format = str[str.length - 1];
                if (format != "xls" && format != "xlsx") {
                    this.loadingExport = false
                    this.$message({
                        message: this.$t('other.PleaseselecttheXLSorXLSXfile'),
                        type: "error"
                    });
                } else {
                    this.listLoading = true;
                    let formData = new FormData();
                    formData.append("file", item.file);
                    formData.append("projectId", this.curProjectId);
                    formData.append("groupId", this.selectedGroup.id);
                    // formData.append("stagesId", this.importToStageId);
                    this.http.uploadFile('/task/importTask', formData,
                    res => {
                        this.$refs.upload.clearFiles();
                        this.listLoading = false;
                        this.loadingExport = false
                        if (res.code == "ok") {
                            this.$message({
                                message: this.$t('other.importSuccess'),
                                type: "success"
                            });
                            //重新读取列表
                            this.getStageList();
                            this.importTaskDialog = false;
                        } else {
                            this.$message({
                                message: res.msg,
                                type: "error"
                            });
                        }
                    },
                    error => {
                        this.$refs.upload.clearFiles();
                        this.listLoading = false;
                        this.loadingExport = false
                        this.$message({
                            message: error,
                            type: "error"
                        });
                    });
                }
            },
            //删除任务进展
            deleteTaskProgress(id) {
                this.http.post('/task-progress/deleteProgress', {id: id},
                    res => {
                        if (res.code == "ok") {
                            this.getTaskProgressList(this.taskIid)
                            this.$message({
                                message: this.$t('message.successfullyDeleted'),
                                type: "success"
                            });
                        } else {
                            this.$message({
                                message: res.msg,
                                type: "error"
                            });
                        }
                    }
                );
            },
            //创建任务进展
            addTaskProgress() {
                var param = {
                    taskId: this.taskIid,
                    status: this.radio,
                    content: this.text2,
                    participatorIds: this.checkLists.toString()
                };
                this.http.post('/task-progress/addProgress', param,
                    res => {
                        if (res.code == "ok") {
                            this.shutPro()
                            this.getTaskProgressList(this.taskIid)
                            this.$message({
                                message: this.$t('releasesuccess'),
                                type: "success"
                            });
                            this.checkboxGrounp = [],
                            this.checkLists = [],
                            this.text2 = '',
                            this.radio = 0
                            let obj = {
                                id: this.taskIid
                            }
                            this.gain(obj)
                        } else {
                            this.$message({
                                message: res.msg,
                                type: "error"
                            });
                        }
                    }
                );
            },
            //获取任务进展列表
            getTaskProgressList(taskId) {
                this.taskIid = taskId
                this.http.post('/task-progress/list', {taskId: taskId},
                    res => {
                        if (res.code == "ok") {
                            this.ProgressList = res.data;
                            this.recentProgressInfo = res.data[0]

                        } else {
                            this.$message({
                                message: res.msg,
                                type: "error"
                            });
                        }
                    }
                );
            },
            kkk(el){
                var k = this.checkLists.indexOf(el.id)
                if (k == -1) {
                    this.checkLists.push(el.id)
                } else {
                    this.checkLists.splice(k, 1)
                }
            },
            showExportDialog() {
                this.exportDialog = true;
            },
            exportTask() {
                let _this = this;
                this.loadingExport = true
                this.http.post('/task/exportTask', {projectId: this.curProjectId, taskType: this.exportTaskType},
                res => {
                    this.loadingExport = false
                    if (res.code == "ok") {
                        location.href = res.data;
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        });
                    }
                }
                );
            },
            sss(){
                this.$refs.addRem.style.display="none" 
            },
            addprogress(){ // 添加子任务进展事件
                this.$refs.proBox.style.display="block"
                this.$refs.addPro.style.display="none"
            },
            shutPro() { // 关闭任务进展
                this.$refs.addPro.style.display="block"
                this.$refs.addRem.style.display="none" 
                this.$refs.proBox.style.display="none" 
            },
            addI() { // 打开选择查看
                this.$refs.addRem.style.display="block" 
            },
            load() {
                 if(this.count >= 0) return
                this.count += 2
            },
            onEditorFocus() {
                this.onEditorBlur()
            },
            subMission() { // 添加

            },
            handleCheckedCitiesChange(value) {
                let checkedCount = value.length;
                this.checkAll = checkedCount === this.cities.length;
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
            },
            // 获得焦点时触发
            onEditorBlur(){
                let theEle = this.$refs.text; // 获取元素
                var img = theEle.value.match(/<img[^>]+>/g); // 赛选 img 标签
                var arrImg = ''
                for (var j = 0; j < img.length; j++) {
                    // 正则匹配，摘出img标签下的src里的内容，即capture
                    img[j].replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function(match, capture) {
                        arrImg += capture
                    });
                }
                // 原来的字符流大小，单位为字节
                var strLen = arrImg.length;
                // 计算后得到的文件流大小，单位为字节
                var fileSize=parseInt(strLen-(strLen/8)*2);
                var size = "";
	            size = (fileSize/1024/1024).toFixed(2);
                if (size > 2){
                    this.textContent = false
                     this.$message({
                        showClose: true,
                        message: this.$t('imageexceeds2MBpleaseuploaditagain'),
                        type: 'warning'
                    });
                }
                this.textContent = true
            },
            // 侧边栏的点击事件
            retract() {
                if (this.$refs.box.className == 'el-icon-arrow-left') {
                    this.$refs.box.className = 'el-icon-arrow-right'
                } else {
                    this.$refs.box.className = 'el-icon-arrow-left'
                }
                // this.$refs.box.className === 'el-icon-arrow-left' ? this.$refs.box.className = 'el-icon-arrow-right' || this.$refs.box.className = 'el-icon-arrow-left'
                this.toggleGroup()
            },
            // 
            choseTemplate(tIndex) {
                // this.groupTemplateList.forEach((g)=>{
                //     g.selected = false;
                // })
                this.sidebarIndex = tIndex
                // this.groupTemplateList[tIndex].selected = true;
                this.groupTemplateList.forEach((g, i)=>{
                    if(tIndex == i) {
                        g.selected = !g.selected;
                    }
                })
            },
            //获取分组模板列表
            getGroupTemplate() {
                this.http.post('/group-template/getList',{},
                    res => {
                        if (res.code == "ok") {
                            this.groupTemplateList = res.data;
                            this.groupTemplateList[0].selected = true;
                        } else {
                            this.$message({
                            message: res.msg,
                            type: "error"
                            });
                        }
                    },
                    error => {
                        this.$message({
                            message: error,
                            type: "error"
                        });
                    });
                
            },
            copyGroup(item) {
                this.http.post('/task-group/copy',{id: item.id},
                    res => {
                        if (res.code == "ok") {
                            this.getTaskGroups();
                        } else {
                            this.$message({
                            message: res.msg,
                            type: "error"
                            });
                        }
                    },
                    error => {
                        this.$message({
                            message: error,
                            type: "error"
                        });
                    });
            },
            //重启项目
            startPro() {
                this.http.post('/project/start',{id: this.curProjectId},
                    res => {
                        if (res.code == "ok") {
                            this.$message({
                            message: this.$t('restartthesuccess'),
                            type: "success"
                            });
                            this.currentProject.status = 1;
                        } else {
                            this.$message({
                            message: res.msg,
                            type: "error"
                            });
                        }
                    },
                    error => {
                        this.$message({
                            message: error,
                            type: "error"
                        });
                    });
            },
            //撤销项目
            cancelPro() {
                this.http.post('/project/cancel',{id: this.curProjectId},
                    res => {
                        if (res.code == "ok") {
                            this.$message({
                            message: this.$t('Revocationofsuccess'),
                            type: "success"
                            });
                            this.currentProject.status = 3;
                        } else {
                            this.$message({
                            message: res.msg,
                            type: "error"
                            });
                        }
                    },
                    error => {
                        this.$message({
                            message: error,
                            type: "error"
                        });
                    });
            },
            //完成项目
            finishPro() {
                this.http.post('/project/finish',{id: this.curProjectId},
                    res => {
                        if (res.code == "ok") {
                            this.$message({
                            message: this.$t('projectcompletion'),
                            type: "success"
                            });
                            this.currentProject.status = 2;
                        } else {
                            this.$message({
                            message: res.msg,
                            type: "error"
                            });
                        }
                    },
                    error => {
                        this.$message({
                            message: error,
                            type: "error"
                        });
                    });
            },
            //删除当前编辑的任务
            deleteTask() {
                var warning='';
                if (this.addForm.subTaskList.length > 0) {
                    warning=this.$t('currenttaskanditssubtasks');
                } else {
                    warning=this.$t('wanttodeletethecurrent task');
                }
                this.$confirm(warning, this.$t('other.prompts'), {
                    //type: 'warning'
                }).then(() => {
                    this.http.post('/task/delete',{id: this.addForm.id},
                    res => {
                        if (res.code == "ok") {
                            this.addFormVisible = false;
                            this.getStageList();
                        } else {
                            this.$message({
                            message: res.msg,
                            type: "error"
                            });
                        }
                    },
                    error => {
                        this.$message({
                            message: error,
                            type: "error"
                        });
                    });
                });
            },
            //tab页签切换
            handleClick(tab, event) {
                let pathModel = tab.name;
                this.$router.push('/'+pathModel+'/'+this.curProjectId);
                setTimeout(() => {
                    if(tab.name == 'costbaseline'){
                        this.$refs.costbaseline.refreshPage();
                    }
                    if(tab.name == 'info') {
                        this.$refs.projectInfo.getMileStoneList()
                    }

                    const name = tab.name || '';
                    const refreshActions = {
                        files: () => this.$refs.fileCenter.refreshPage(),
                        info: () => {
                            this.$refs.projectInfo.refreshPage();
                            if(this.user.companyId === '936') {
                                this.$refs.projectInfo.getKeyNodes();
                            }
                        },
                        summary: () => this.$refs.summary.refreshPage(),
                        costbaseline: () => {
                            if(this.permissions.projectBaseline) {
                                this.$refs.costbaseline.refreshPage();
                            }
                        }
                    };

                    if(name in refreshActions) {
                        refreshActions[name]();
                    }
                }, 500)
            },
            showSubTaskList(task) {
                this.subTaskVisible = true;
                this.addForm = task;
                // console.log('click',task.subTaskList);
            },
            backToParentTask() {
                // this.getTaskDetail(this.addForm.parentTid);
                this.getTaskDetail(this.timelabel ? this.relationPar.id : this.addForm.parentTid);
                this.isEditFile = true;
                this.$refs.thskComponents.backToParentTask()
                if(this.timelabel){
                    this.isRelationItem = false
                    // this.relationPar = {name: ''}
                    this.getRelationTaskList(1, this.relationPar.id)
                    this.gain(this.relationPar)
                }
            },
            //显示子任务创建卡片
            addSubTask() {
                if(this.isRelationItem){return}
                this.addFormVisible = true;
                this.addForm = {parentTname: this.addForm.name,parentTid: this.addForm.id,projectId: this.addForm.projectId, groupId: this.addForm.groupId,  taskLevel:0, planHours: 8, taskType: 0};
                this.addForm.executorListFront = [{executorId:null, planHours:8}];
                this.addLoading = false;

                //创建子任务，非编辑状态
                this.isEditFile = false;
            },
            //认领任务
            addAsMyTask(task) {
                this.http.post('/task/addAsMyTask',{id: task.id},
                res => {
                    if (res.code == "ok") {
                        this.getStageList();
                    } else {
                        this.$message({
                        message: res.msg,
                        type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },
            taskLineClick(row, column, event) {
                if(this.isRelationItem){return}
                this.editTask(row);
            },
            //排序发生改变
            orderChange() {
                this.isDesc = this.orderList.filter(o=>o.id == this.order)[0].isDesc;
                if (this.groupType == 0) {
                    this.getStageList();
                } else {
                    this.getViewTaskList();
                }
            },

            taskListPageChange(val){
                this.taskListPage = val
                this.getViewTaskList()
            },
            taskListSizeChange(val){
                this.taskListSize = val
                this.taskListPage = 1
                this.getViewTaskList()
            },
            //加载视图任务列表
            getViewTaskList() {
                this.http.post('/task/list',{projectId: this.curProjectId, viewId: this.selectedGroup.id, order: this.order, isDesc: this.isDesc,pageIndex: this.taskListPage,pageSize:this.taskListSize},
                res => {
                    if (res.code == "ok") {
                        // this.taskDataList = res.data;
                        // console.log(this.taskDataList, '任务视图的列表')
                        for(var i in res.data.records) {
                            if(res.data.records[i].executorName != null) {
                                res.data.records[i].executorName = res.data.records[i].executorName.split(',')
                            }
                        }
                        this.taskDataList = res.data.records;
                        this.taskListTotal = res.data.total
                        console.log(this.taskDataList, '任务视图的列表')
                        this.taskDataList.forEach(t=>{
                            t.isFinish = t.taskStatus==1?true:false;
                        });
                    } else {
                        this.$message({
                        message: res.msg,
                        type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },
  
            //阶段拖拽
            onMoveStage(e) {
                var data = {
                    groupId:this.selectedGroup.id,
                    oldIndex: e.oldIndex, 
                    newIndex: e.newIndex,};
                this.http.post('/stages/changeStageOrder',data,
                        res => {
                            if (res.code == "ok") {
                                this.getStageList();
                            } else {
                                this.$message({
                                    message: res.msg,
                                    type: "error"
                                });
                            }
                        },
                        error => {
                            this.$message({
                                message: error,
                                type: "error"
                            });
                        });
            },
            onChange(e) {
                var data = {
                    id:e.item.id,
                    oldIndex: e.oldIndex , 
                    newIndex: e.newIndex ,
                    oldStagesId: e.from.id,
                    newStagesId: e.to.id};
                this.http.post('/task/changeOrder',data,
                        res => {
                            if (res.code == "ok") {
                                this.getStageList();
                            } else {
                                this.$message({
                                    message: res.msg,
                                    type: "error"
                                });
                            }
                        },
                        error => {
                            this.$message({
                                message: error,
                                type: "error"
                            });
                        });
            },
            //计算预估工时
            jisuanEstimatedWorkTime(manDay,groupId){
                if(groupId){
                    this.groupList.forEach(item=>{
                        if(item.id==groupId){
                            item.estimatedWorkTime=manDay*this.user.timeType.allday
                        }
                    })
                }
                
            },
            //计算预估工时
            jisuanManDay(estimatedWorkTime,groupId){
                if(groupId){
                    this.groupList.forEach(item=>{
                        if(item.id==groupId){
                            item.manDay=estimatedWorkTime/this.user.timeType.allday
                        }
                    })
                }
            
            },    
            toggleGroup() {
                if (this.groupWidth == 0) {
                    this.groupWidth = 260;
                } else {
                    this.groupWidth = 0;
                }
            },
            finishTask(task) {
                this.http.post('/task/finish',{id: task.id, taskStatus: task.taskStatus},
                        res => {
                            if (res.code == "ok") {
                                if (this.groupType == 0) {
                                    this.getStageList();
                                } else {
                                    this.getViewTaskList();
                                }
                            } else {
                                this.$message({
                                    message: res.msg,
                                    type: "error"
                                });
                            }
                        },
                        error => {
                            this.$message({
                                message: error,
                                type: "error"
                            });
                        });
            },
            // 点击卡片事件
            editTask(task) {
                this.mileageCup = true
                // console.log('editTask',task)
                if(task.taskType == 1){
                    this.timelabel = true
                    this.isRelationItem = false
                }else{
                    this.timelabel = false
                }
                this.addFormVisible = true;
                this.isEditFile = true;
                this.addLoading = false;
                this.title = this.$t('editingtasks');

                // 自定义组件
                this.integrationTask = {
                    id: task.id,
                    task: task,
                    num: 1,
                    curProjectId: this.curProjectId,
                    create: false,
                    integrationTaskNingwai: this.integrationTaskNingwai
                }
                this.taskComponentFlg = true

                this.getTaskDetail(task.id);
                this.getTaskProgressList(task.id); // 获取任务进展列表 
                this.getUsers(); // 获取名单数据
                this.gain(task); // 获取评论列表
                this.getDailyList(task.id) // 获取来自日报
                this.getRelationTaskList(1, task.id)
                this.getTaskFileList(1,task.id)
            },  
            // 关联任务点击事件
            relationTaskClick(row,column,event){
                // console.log('relationTaskClick',row);
                this.relationPar = JSON.parse(JSON.stringify(this.addForm))
                // console.log(this.relationPar);
                this.addFormVisible = true;
                this.addLoading = false;
                this.isRelationItem = true;
                this.isEditFile = true;
                this.title = this.$t('editingtasks');
                this.getTaskDetail(row.taskId);
                this.getUsers();
                this.gain(row,1);
                this.getRelationTaskList(1, row.taskId)
                this.getTaskFileList(1,row.taskId)
            },
            // 获取评论列表
            gain (task,e) {
                this.commentList = [];
                this.taskId = e == 1 ? task.taskId : task.id;
                this.http.post('/task-comment/getList', {taskId: e == 1 ? task.taskId : task.id},
                res => {
                    if (res.code == "ok") {
                        for(var i in res.data) {
                            if(res.data[i].content.indexOf('$userName=') != '-1') {
                                let obj = {
                                    msg1: res.data[i].content.split('$')[0],
                                    msg2: res.data[i].content.split('$')[1].split('=')[1],
                                    msg3: res.data[i].content.split('$')[2]
                                }
                                res.data[i].content = obj
                            } else {
                                if(this.user.userNameNeedTranslate == 1) {
                                    let obj = {
                                        msg1: res.data[i].content,
                                        msg2: '',
                                        msg3: ''
                                    }
                                    res.data[i].content = obj
                                }
                            }
                        }
                        this.commentList = res.data
                        this.sppk(this.commentList) // 获取参与人的方法
                    } else {
                        this.$message({
                        message: res.msg,
                        type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },
            // 获取评论参与人
            sppk(comit) {
                var sk = []
                comit.forEach(function(e){
                    sk.push(e.userName)
                })
                this.critic = new Set(sk)
                console.log(this.critic, '参与人',this.critic.length)
            },

            // 点击发布
            release() {
                if(this.textarea2.length <= 0) return this.$message({message: this.$t('pleaseentercontent'), type: "error"})
                this.http.post('/task-comment/add', {taskId: this.taskId, userId: this.user.id, content: this.textarea2},
                res => {
                    if(res.code == "ok"){
                        if(res.data.content.indexOf('$userName=') != '-1') {
                            let obj = {
                                msg1: res.data.content.split('$')[0],
                                msg2: res.data.content.split('$')[1].split('=')[1],
                                msg3: res.data.content.split('$')[2]
                            }
                            res.data.content = obj
                        } else {
                            if(this.user.userNameNeedTranslate == 1) {
                                let obj = {
                                    msg1: res.data.content,
                                    msg2: '',
                                    msg3: ''
                                }
                                res.data.content = obj
                            }
                        }
                        this.commentList.push(res.data)
                        this.sppk(this.commentList)
                        this.textarea2 = ""
                        this.contRoll() // 滚动到底部
                    } else {
                        this.$message({
                        message: res.msg,
                        type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                })
            },
            // 滚动到底部
            contRoll(){
                this.$nextTick(() => {
                    this.$refs.main.scrollTop = this.$refs.contRoll.scrollHeight;
                })
            },
            chggstim(e,i){
                if(e){
                    this.gstimday[i] = Math.ceil(this.gstimhour[i] / this.user.timeType.allday)
                }else{
                    this.gstimhour[i] = this.gstimday[i] * this.user.timeType.allday
                }
            },
            getTaskDetail(id) {
                this.http.post('/task/getTask',{id: id},
                res => {
                    if (res.code == "ok") {
                        if(this.user.userNameNeedTranslate == 1) {
                            for(var i in res.data.subTaskList) {
                                if(res.data.subTaskList[i].executorName) {
                                    res.data.subTaskList[i].executorName = res.data.subTaskList[i].executorName.split(',')
                                }
                            }
                        }
                        this.addForm = res.data;
                        this.addForm.createDate = null;
                        this.addForm.indate = null;
                        this.addLoading = false;
                        this.recentProgressInfo = this.addForm.progress;
                        this.addForm.executorListFront = this.addForm.executorList;

                        this.gstimday = []
                        this.gstimhour = []
                        for(let i=0;i<this.addForm.executorListFront.length;i++){
                            this.gstimhour.push(this.addForm.executorListFront[i].planHours),
                            this.gstimday.push(Math.ceil(this.addForm.executorListFront[i].planHours / this.user.timeType.allday))
                        }
                        //删除中间传值的变量数组
                        delete this.addForm.executorList;
                    } else {
                        this.$message({
                        message: res.msg,
                        type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },
            //预估工时变更
            changeBudget(task){
                this.changeBudgetDig=true,
                this.groupBudgetData=task,
                this.nowManDay=(this.groupBudgetData.changeManDay==null?0:parseInt(this.groupBudgetData.changeManDay))+(this.groupBudgetData.manDay==null?0:parseInt(this.groupBudgetData.manDay))
                this.nowEstimatedWorkTime=(this.groupBudgetData.changeEstimatedWorkTime==null?0:parseInt(this.groupBudgetData.changeEstimatedWorkTime))+(this.groupBudgetData.estimatedWorkTime==null?0:parseInt(this.groupBudgetData.estimatedWorkTime))
            },
            //预估工时变更
            changeNowManDay(task){
                this.nowManDay=(this.groupBudgetData.changeManDay==null||this.groupBudgetData.changeManDay==''?0:parseInt(this.groupBudgetData.changeManDay))+(this.groupBudgetData.manDay==null||this.groupBudgetData.manDay==''?0:parseInt(this.groupBudgetData.manDay))
                this.groupBudgetData.changeEstimatedWorkTime=(this.groupBudgetData.changeManDay==null||this.groupBudgetData.changeManDay==''?0:this.groupBudgetData.changeManDay)*this.user.timeType.allday
                this.nowEstimatedWorkTime=this.nowManDay*this.user.timeType.allday
                
            },
            //预估工时变更
            changeEstimatedWorkTime(task){
                this.nowEstimatedWorkTime=(this.groupBudgetData.changeEstimatedWorkTime==null||this.groupBudgetData.changeEstimatedWorkTime==''?0:parseInt(this.groupBudgetData.changeEstimatedWorkTime))+(this.groupBudgetData.estimatedWorkTime==null||this.groupBudgetData.estimatedWorkTime==''?0:parseInt(this.groupBudgetData.estimatedWorkTime))
                this.groupBudgetData.changeManDay=(this.groupBudgetData.changeEstimatedWorkTime==null||this.groupBudgetData.changeEstimatedWorkTime==''?0:this.groupBudgetData.changeEstimatedWorkTime)/this.user.timeType.allday
                this.nowManDay=this.nowEstimatedWorkTime/this.user.timeType.allday
            },
            changeBudgetTrue(groupBudgetData){
                let param;
                if(groupBudgetData){
                    param={
                        groupId:groupBudgetData.id,
                        oldManDay:groupBudgetData.manDay,
                        changeManDay:groupBudgetData.changeManDay,
                        nowManDay:this.nowManDay,
                        remark:groupBudgetData.remark,
                    }
                }
                if(!groupBudgetData.remark) {
                    this.$message({
                        message: this.$t('qingShuRuBianGengLiYou'),
                        type: "error"
                    });
                    return
                }
                this.http.post('/group-budget-review/add',param,
                res => {
                    if (res.code == "ok") {
                        this.$message({
                        message: this.$t('operationissuccessful'),
                        type: "success"
                        });
                        this.changeBudgetDig=false
                    } else {
                        this.$message({
                        message: res.msg,
                        type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },
            addTask(stage) {
                this.mileageCup = false
                this.addFormVisible = true;
                this.addForm = {projectId: stage.projectId, groupId: stage.groupId, stagesId: stage.id, taskLevel:0, planHours: 8, taskType: 0};
                this.addForm.executorListFront = [{executorId:null, planHours:this.user.timeType.allday}];
                this.gstimhour = [this.user.timeType.allday]
                this.gstimday = [1]
                this.addLoading = false;
                this.isEditFile = false;
                this.title=this.$t('createtask ');
                this.commentList = [];
                this.timelabel = false
                let obj = {
                    create: true,
                    addForm: this.addForm,
                    executorListFront: [{executorId:null, planHours:8}],
                    stage: stage,
                    integrationTaskNingwai: this.integrationTaskNingwai
                }
                this.integrationTask = obj

                this.taskComponentFlg = true
            },
            addExecutorLine(e) {
                if(e == 1){
                    if (this.relationItemData.executorList == null) {
                        this.relationItemData.executorList = [];//初始化
                    }
                    this.relationItemData.executorList.push({executorId:null, planHours:this.user.timeType.allday});
                    this.gstimday.push(1)
                    this.gstimhour.push(this.user.timeType.allday)
                    this.$forceUpdate();
                }else{
                    if (this.addForm.executorListFront == null) {
                        this.addForm.executorListFront = [];//初始化
                    }
                    this.addForm.executorListFront.push({executorId:null, planHours:this.user.timeType.allday});
                    this.gstimday.push(1)
                    this.gstimhour.push(this.user.timeType.allday)
                    this.$forceUpdate();
                    }
                
            },
            removeExecutorLine(index,e) {
                if(e == 1){
                    this.relationItemData.executorList.splice(index,1);
                    this.gstimday.splice(index,1)
                    this.gstimhour.splice(index,1)
                    this.$forceUpdate();
                }else{
                    this.addForm.executorListFront.splice(index,1);
                    this.gstimday.splice(index,1)
                    this.gstimhour.splice(index,1)
                    this.$forceUpdate();
                }
                
            },
            renameStage(item) {
                this.stageForm = JSON.parse(JSON.stringify(item));
                this.addStageDialog = true;
            },
            deleteStage(item) {
                var _this = this;
                var param = {id:item.id, groupId: item.groupId};
                this.$confirm(this.$t('detelecesTask'), this.$t('other.prompts'), {
                    //type: 'warning'
                }).then(() => {
                    this.http.post('/stages/delete',param,
                        res => {
                            if (res.code == "ok") {
                                // this.stageList = res.data;
                                this.getStageList();
                            } else {
                                this.$message({
                                message: res.msg,
                                type: "error"
                                });
                            }
                        },
                        error => {
                            this.$message({
                                message: error,
                                type: "error"
                            });
                        });
                });
            },
            //加载项目内的任务列表
            getStageList() {
                this.integrationTaskNingwai = {
                    groupId: this.selectedGroup.id,
                    projectId: this.selectedGroupprojectId,
                    order: this.order,
                    isDesc: this.isDesc
                }
                this.http.post('/stages/list',{groupId: this.selectedGroup.id, projectId: this.selectedGroup.projectId, order: this.order, isDesc: this.isDesc,hideCompleted: this.hideCompleted},
                res => {
                    if (res.code == "ok") {
                        this.stageList = res.data.list;
                        this.canAddTask = res.data.canAddTask
                        this.canEditStageList = res.data.canEditStageList
                        this.timess() // 处理时间的方法
                    } else {
                        this.$message({
                        message: res.msg,
                        type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },
            timess(){
                // console.log('timess');
                var date = new Date()
                let Y = date.getFullYear()
                let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1)
                let D = date.getDate() < 10 ? ('0' + date.getDate()) : date.getDate()
                this.times = `${Y}-${M}-${D}`
            },
            addStagePost() {
                console.log('新增任务列表');
                let param = JSON.parse(JSON.stringify(this.stageForm));
                param.taskList = [];
                this.http.post('/stages/save',param,
                res => {
                    if (res.code == "ok") {
                        this.addStageDialog = false;
                        this.stageList = res.data;
                        
                    } else {
                        this.$message({
                        message: res.msg,
                        type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },
            addStage() {
                this.addStageDialog = true;
                this.stageForm = {groupId: this.selectedGroup.id, projectId: this.curProjectId, stagesTime: 0};
            },
            viewChange(index, indexPath) {
                this.groupType = 1;
                this.order = "create_date";
                this.isDesc = true;
                this.selectedGroup = this.viewList.filter(g=>g.id == index)[0];
                this.getViewTaskList();
                this.displayTable = true;
                this.taskListPage = 1
            } ,
            groupChange(index, indexPath) {
                console.log('店家了')
                this.groupType = 0;
                this.order = "seq";
                this.isDesc = false;
                this.selectedGroup = this.groupList.filter(g=>g.id == index)[0];
                this.groupResponsibleId = this.selectedGroup.inchargerId
                this.getStageList();
                this.displayTable = false;
                this.$forceUpdate()
            },
            //本地搜索组
            startSearchGroup() {
                console.log(this.curProjectId, '<===== this.curProjectId')
                if (this.groupSearch != null || this.groupSearch.length > 0) {
                    this.groupList = this.allGroupData.filter(g=>g.name.indexOf(this.groupSearch) >= 0);
                } else {
                    this.groupList = this.allGroupData;
                }
            },
            editIncharger(item) {
                this.groupForm = JSON.parse(JSON.stringify(item));
                this.setInchargerDialog = true;
            },
            setManDay() {
                this.modGroupManDayKey++
                // this.groupForm = JSON.parse(JSON.stringify(item));
                this.modGroupManDayDialog = true;
            },
            renameGroup(item) {
                this.groupForm = JSON.parse(JSON.stringify(item));
                this.modGroupDialog = true;
            },
            deleteGroup(item) {
                var _this = this;
                this.$confirm(this.$t('tasksgroupsDetalses'), this.$t('other.prompts'), {
                    type: 'warning'
                }).then(() => {
                    this.http.post('/task-group/delete',item,
                        res => {
                            if (res.code == "ok") {
                                this.groupList = res.data;
                                if (item.id == this.selectedGroup.id) {
                                    //之前选中的分组被删除了
                                    if (this.groupList.length > 0) {
                                        this.defaultGroupId = this.groupList[0].id;
                                        this.selectedGroup = this.groupList[0];
                                        this.groupChange(this.defaultGroupId)
                                    } else {
                                        this.selectedGroup = {};
                                    }
                                }
                            } else {
                                this.$message({
                                message: res.msg,
                                type: "error"
                                });
                            }
                        },
                        error => {
                            this.$message({
                                message: error,
                                type: "error"
                            });
                        });
                });
            },
            getGroupDetails(obj) {
                this.http.post('/task-group/detail',{
                    groupId: obj.id
                },
                res => {
                    if (res.code == "ok") {
                        this.groupDetailsShow = true
                        this.groupDetailData = res.data
                        this.groupDetailTil = obj.name + ' - '+this.$t('groupdetails')
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },
            addTemplateGroup() {
                // var param = JSON.parse(JSON.stringify(this.groupTemplateList.filter(g=>g.selected)[0]));
                // delete param.stagesList;
                // param.projectId = this.curProjectId;
                // var k = this.groupTemplateList[this.sidebarIndex].name
                // var s = null;
                // var xmz = this.groupList.forEach(function(a, b, c){
                //     if (a.name == k) {
                //         s = true
                //         return
                //     }
                // })
                // if (s){ 
                //     this.addGroupDialog = false;
                //     this.$message({
                //         message: '当前项目已存在分组['+k+'],请修改组名后重试。',
                //         type: "error"
                //         });
                //     return 
                // }
                var param = JSON.parse(JSON.stringify(this.groupTemplateList.filter(g=>g.selected)))
                console.log(param, '你看看啊')
                for(var i in param) {
                    delete param[i].stagesList
                }
                if(param.length < 1) {
                    this.$message({
                        message: this.$t('qngxuanz'),
                        type: "error"
                    });
                    return
                }
                console.log(this.groupList)
                var s = null
                var k = ''
                var xmz = this.groupList.forEach(function(a, b, c){
                    param.forEach((g, i) =>{
                        if(a.name == g.name) {
                            s = true
                            k = g.name
                            return
                        }
                    })
                })
                if (s){ 
                    this.addGroupDialog = false;
                    this.$message({
                        message: this.$t('projectalreadyhasgroup')+'['+k+'],'+this.$t('changethegroupname'),
                        type: "error"
                        });
                    return 
                }
                console.log('将要闯过去的值', param)
                // return
                // this.http.post('/task-group/createFromTemplate',param,
                this.http.post('/task-group/createFromTemplate',{
                    templateJson: JSON.stringify(param),
                    projectId: this.curProjectId
                },
                res => {
                    if (res.code == "ok") {
                        this.selectedGroup = res.data
                        this.sleectId = res.data.id
                        this.sleectProjectId = res.data.projectId

                        this.addGroupDialog = false;
                        // this.getTaskGroups();
                        this.getTaskGroup();
                    } else {
                        this.$message({
                        message: res.msg,
                        type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },
            setManDayData() {
                this.http.post('/task-group/saveManDay',{data:JSON.stringify(this.groupList)},
                res => {
                    if (res.code == "ok") {
                        this.modGroupManDayDialog = false;
                        const { companyId } = JSON.parse(sessionStorage.getItem("user"))
                        console.log(companyId)
                        if(companyId == '3092') {
                            res.data.forEach(item => {
                                item.disabled = Boolean(item.manDay);
                            });
                            this.groupList = res.data;
                        } else {
                            this.groupList = res.data;
                        }
                        console.log(this.groupList, '返回的值')
                    } else {
                        this.$message({
                        message: res.msg,
                        type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },
            // 重新定义了 addGroup 方法
             addGroup(formName) {
                // return
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.http.post('/task-group/save',this.groupForm,
                        res => {
                            if (res.code == "ok") {
                                this.groupList = res.data;
                                this.addGroupDialog = false;
                                this.modGroupDialog = false;
                                if (this.selectedGroup.id !== this.groupForm.id) {
                                    this.selectedGroup = this.groupList.filter(g=>g.new)[0];
                                }
                                this.defaultGroupId = this.groupList[this.groupList.length - 1].id
                                // this.getTaskGroup();
                                this.getStageList()
                            } else {
                                this.$message({
                                message: res.msg,
                                type: "error"
                                });
                            }
                        },
                        error => {
                            this.$message({
                                message: error,
                                type: "error"
                            });
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },

            createGroup() {
                this.addGroupDialog = true;
                this.groupForm = {projectId: this.curProjectId};
            },
            getInsideData(action) {
                var targetGpId = null;
                if (action) {
                    targetGpId = action.split('-')[1];
                }
                this.getTaskGroups(targetGpId);
            },
            //加载项目内的任务分组
            getTaskGroups(errorGroupId) {
                this.http.post('/task-group/list',{projectId: this.curProjectId},
                res => {
                    if (res.code == "ok") {
                        const { companyId } = this.user
                        this.allGroupData = res.data;
                        if(companyId == '3092') {
                            res.data.forEach(item => {
                                item.disabled = Boolean(item.manDay);
                            });
                            this.groupList = res.data;
                        } else {
                            this.groupList = res.data;
                        }
                        if (errorGroupId != null) {
                            //需要修正分组工时
                            this.setManDay();
                        }
                        console.log(this.groupList, '返回的数据')
                        console.log(this.groupList,'grouplist');
                        if (this.groupList.length > 0) {
                            this.defaultGroupId = this.groupList[0].id;
                            this.selectedGroup = this.groupList[0];
                            this.groupResponsibleId = this.groupList[0].inchargerId;
                            this.getUserConfig();
                        } else {
                            //清空任务列表
                            this.defaultGroupId = null;
                            this.selectedGroup = null;
                            this.stageList = [];
                        }
                    } else {
                        this.$message({
                        message: res.msg,
                        type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },

            // 获取用户配置
            getUserConfig() {
                this.http.post('/user-config/getUserConfig',{},
                res => {
                    if (res.code == "ok") {
                        if(res.data != undefined){
                            if(res.data.hideCompletedTask == 0){
                                this.hideCompleted = false;
                            }else if(res.data.hideCompletedTask == 1){
                                this.hideCompleted = true;
                            }
                        }
                        this.getStageList();
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },
            
            //更改隐藏已完成任务选项
            editHideTask() {
                this.getStageList();
                var hideSwitch;
                if(this.hideCompleted == false){
                    hideSwitch = 0;
                }else if(this.hideCompleted == true){
                    hideSwitch = 1;
                }
                this.http.post('/user-config/editUserConfig',{hideCompletedTask: hideSwitch},
                res => {
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },

            // 额外加的
             getTaskGroup() { 
                this.http.post('/task-group/list',{projectId: this.curProjectId},
                res => {
                    if (res.code == "ok") {
                        this.allGroupData = res.data;
                        this.groupList = res.data;
                        if (this.groupList.length > 0) {
                            this.defaultGroupId = this.sleectId;
                            this.selectedGroup = this.groupList[res.data.length - 1];
                            this.getStageList();
                        } else {
                            //清空任务列表
                            this.defaultGroupId = null;
                            this.selectedGroup = null;
                            this.stageList = [];
                        }
                    } else {
                        this.$message({
                        message: res.msg,
                        type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },

            //切换项目
            onProjectChange() {
                console.log('<===== 开始切换项目')
                let path = this.$route.path;
                path = path.substring(0,path.lastIndexOf('/'))+'/'+this.curProjectId;
                this.$router.push(path);
                this.getTaskGroups();
                this.getDetail()

                console.log(this.pathModel, '<==== 看看数据')
                const name = this.pathModel || '';
                const refreshActions = {
                    files: () => this.$refs.fileCenter.refreshPage(),
                    info: () => {
                        this.$refs.projectInfo.refreshPage();
                        if(this.user.companyId === '936') {
                            this.$refs.projectInfo.getKeyNodes();
                        }
                    },
                    summary: () => this.$refs.summary.refreshPage(),
                    costbaseline: () => {
                        if(this.permissions.projectBaseline) {
                            this.$refs.costbaseline.refreshPage();
                        }
                    }
                };

                if(name in refreshActions) {
                    refreshActions[name]();
                }

                // this.$refs.fileCenter.refreshPage();
                // this.$refs.projectInfo.refreshPage();
                // this.$refs.summary.refreshPage();
                // if(this.permissions.projectBaseline) {
                //     this.$refs.costbaseline.refreshPage();
                // }
                // if(this.user.companyId == '936') {
                //     this.$refs.projectInfo.getKeyNodes()
                // }
            },
            //获取我的项目列表
            getMyProjectList() {
                this.http.post('/project/getProjectList', {
                },
                res => {
                    if (res.code == "ok") {
                        this.projectList = res.data;
                    } else {
                        this.$message({
                        message: res.msg,
                        type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },
            menuSelect() {

            },
            toList() {
                this.$router.push("/list");
            },
            searchList() {
                this.page = 1;
                this.getList();
            },
            
            //显示用户详情
            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"
                    });
                });
            },
           
            getUsers() {
                // this.http.post(this.port.manage.list, {
                //     departmentId: -1,
                //     pageIndex: 1,
                //     pageSize: -1
                // },
                this.http.post('/user/getSimpleActiveUserList', {},
                res => {
                    if (res.code == "ok") {
                        this.users = res.data;
                    } else {
                        this.$message({
                        message: res.msg,
                        type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },


            //获取项目列表
            getList() {
                this.listLoading = true;
                this.http.post(this.port.project.listPage, {
                    pageIndex: this.page,
                    pageSize: this.size,
                    keyword:this.keyword,
                    searchField: this.searchField,
                },
                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"
                    });
                });
            },

            submitInsert() {
                if (this.textContent !== true) return  this.$message({
                    showClose: true,
                    message: this.$t('pictureistoolargepleaseuploaditagain'),
                    type: 'warning'
                });
                //检查是有重名的执行人
                var exeList = this.addForm.executorListFront;
                // for(let i=0;i<this.gstimhour.length;i++){
                //     exeList[i].planHours = this.gstimhour[i]
                // }
                
                for (var i=0;i<exeList.length;i++) {
                    var findSameUser = false;
                    exeList[i].planHours = this.gstimhour[i]
                    for (var j=i+1;j<exeList.length; j++) {
                        if (exeList[i].executorId && exeList[j].executorId && exeList[i].executorId == exeList[j].executorId) {
                            findSameUser = true;
                            break;
                        }
                    }
                    if (findSameUser) {
                        return this.$message({
                            showClose: true,
                            message: this.$t('executorhasduplication'),
                            type: 'error'
                        });
                    }
                }
                if(this.addForm.startDate && this.addForm.endDate) {
                    if(this.addForm.endDate < this.addForm.startDate) {
                        return this.$message({
                            showClose: true,
                            message: this.$t('ren-wu-jie-zhi-shi-jian-bu-neng-xiao-yu-kai-shi-shi-jian'),
                            type: 'error'
                        });
                    }
                }
                
                this.$refs.form1.validate(valid => {
                    if (valid) {
                        delete this.addForm.subTaskList;
                        delete this.addForm.refTaskList;
                        delete this.addForm.progress;
                        //去掉没有执行人的.(因为要有计划工时，执行人可以暂不设置)
                        // this.addForm.executorListFront = this.addForm.executorListFront.filter(exe=>exe.executorId);
                        this.addForm.executorListStr = JSON.stringify(this.addForm.executorListFront);
                        this.addLoading = true;
                        this.http.post('/task/save',this.addForm,
                            res => {
                                this.addLoading = false;
                                if (res.code == "ok") {
                                    this.$message({
                                        message: this.$t('message.submittedSuccessfully'),
                                        type: "success"
                                    });
                                    
                                    if (this.addForm.parentTid == null) {
                                        this.addFormVisible = false;
                                        if (this.groupType == 0) {
                                            this.getStageList();
                                        } else {
                                            this.getViewTaskList();
                                        }
                                    } else {
                                        this.backToParentTask();
                                    }
                                } else {
                                    this.$message({
                                        message: res.msg,
                                        type: "error"
                                    });
                                }
                            },
                            error => {
                                this.$message({
                                    message: error,
                                    type: "error"
                                });
                                }
                            );
                        }
                });
            },
            DateChange(){
                if(this.addForm.startDate != undefined && this.addForm.endDate != undefined){
                    let stdate = Date.parse(this.addForm.startDate)
                    let eddate = Date.parse(this.addForm.endDate)
                    if(stdate <= eddate){
                        let days = (eddate - stdate) / (1*24*60*60*1000) + 1
                        for (let i=0;i<this.gstimday.length;i++) {
                            this.gstimday[i] = days
                            this.gstimhour[i] = days * this.user.timeType.allday
                        }
                        this.$forceUpdate()
                    }
                    // console.log("gstimday",this.gstimday);
                    
                }
                
            },

            // 删除
            deletePro(i, item) {
                this.$confirm(this.$t('identifytheproject') + item.projectName + this.$t('ma'),this.$t('deletetheproject'), {
                    confirmButtonText: this.$t('btn.determine'),
                    cancelButtonText: this.$t('btn.cancel'),
                    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: this.$t('message.successfullyDeleted'),
                                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);
            },
            getDetail() {
                this.http.post('/project/detail',{ 
                    id: this.curProjectId
                },
                res => {
                    if (res.code == "ok") {
                        this.currentProject = res.data;
                        this.getjurisdictionIds(this.currentProject)
                        this.joinMembList = this.currentProject.participationList;
                        this.isManageDept = this.currentProject.manageDept;
                    } else {
                        
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                    }
                );
            },
            getjurisdictionIds(pro){
                console.log('pro',pro.creatorId);
                this.projectCreatorId = pro.creatorId
                this.projectInchargerId = pro.inchargerId
            },
            // 自定义组件事件
            selectCal(obj) {
                if(obj.distinction == '1') {
                    this.addForm.executorListFront[obj.index].executorId = obj.id
                } else if(obj.distinction == '2') {
                    this.groupForm.inchargerId = obj.id
                }
            },
            // 企业微信搜索
            echartDepartment() {
                if(this.participantsFilterText != '') {
                    this.filterNodeFlag = true
                    this.http.post("/user/getEmployeeList", {
                        keyword: this.participantsFilterText,
                        cursor: '',
                        departmentId: -1,
                        pageIndex: 1,
                        pageSize: 1000
                    },
                    res => {
                        if (res.code == "ok") {
                            // var list = res.data.data;
                            // this.setUserToDept(list);
                            // this.deptMembData = list;
                            // this.$forceUpdate()
                            this.filterNodePersonnel = res.data.records.map(item => item.name)
                            this.$refs.chooseMembTree2.filter(this.participantsFilterText);
                        } else {
                            this.$message({
                                message: res.msg,
                                type: "error"
                            });
                        }
                        this.filterNodeFlag = false
                    },
                    error => {
                        this.filterNodeFlag = false
                        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);
                        });
                    }
                }
            }
        },
        created() {
            let height = window.innerHeight;
            this.tableHeight = height - 135;
            this.stageListHeight = this.tableHeight - 45;
            this.taskListinH = this.stageListHeight - 75;
            const that = this;
            window.onresize = function temp() {
                that.tableHeight = window.innerHeight - 135;
                that.stageListHeight = that.tableHeight - 45;
                that.taskListinH = that.stageListHeight - 75;
            };

            setTimeout(function(){
                that.componentFlg = true
            }, 1000)
        },
        mounted() {
            this.curProjectId = parseInt(this.$route.params.id);
            this.activeName = this.$route.path.split("/")[1];
            this.getDetail();
            this.getUsers();
            this.getMyProjectList();
            console.log('action==params='+sessionStorage.action);
            var action = sessionStorage.action
            this.getInsideData(action);
            sessionStorage.removeItem('action');
            this.getGroupTemplate();
        }
    };
</script>

<style lang="scss" scoped>
@import "../../assets/scss/handle";

.themeFontColor {
    @include font_color("color");
}

.themeBorderColor {
    @include border_color("border_color");
}

.hideCompletedFelx {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
    .Daily p {
        margin: 0 !important;
        padding: 0 0 10px 0 !important;
    }
    .sub-all {
        div {
            display: inline-block;
            padding: 0 20px;
            font-size: 20px;
            cursor: pointer;
        }
        .subOn {
            color: #66b1ff;
        }
    }
    .DailyBody {
        margin: 0 20px;
    }
    .Daily{
        height: 120%;
        overflow: auto;
    }
</style>

<style lang="scss">
@import "../../assets/scss/handle";
.taskCardCircleBox{
    padding-left: 5px;
    display: flex;
    justify-content: left;
    align-items: center;
}
.flip-list-move {
  transition: transform 0.5s;
}
.no-move {
  transition: transform 0s;
}
.taskStage {
    margin:10px;
    display:inline-block;
    vertical-align:top;
    width: 331px;
}
.taskList {
    padding:7px;
    width:331px;
}
.taskListin{
    width: 317px;
    overflow: auto;
}

.taskList .stage {
    font-weight:bold;
display:block;
float:left;
width:260px;
overflow: auto;
}
.taskGroupClass {
    width: 180px;
    display: inline-block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap; 
}


.taskCard {
    background: #fff;
    margin: 5px 0px;
    padding:5px;
    border: 1px solid #e6e6e6;
    border-radius: 3px;
    box-shadow: 3px 3px 3px #e6e6e6;
    min-height:60px;
    position: relative;
    border-radius: 3px;
    overflow: hidden;
    width: 288px;
}

.taskImg {
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.taskImg img{
    position: absolute;
    top: -1px;
}

.hong:hover {
    border-top: 1px solid #ff0000;
}

.huang:hover {
    border-top: 1px solid #ff9600;
}
.hui:hover {
    border-top: 1px solid #c9c9c9;
}

.taskCard:hover {
                cursor: move;
}

.chosen {
            background-color: #000 !important;
            color: #fff;
        }

        .ghost {
            background-color: #fafafa !important;
        }
.taskCard .cb {
    margin-right:5px;
}
.item {
    background:#fff;
}
.input-with-select .el-input-group__prepend {
    background-color: #fff;
  }

.el-tabs__item {
    height:45px ;
}

.projectCls {
    margin-left:10px;margin-right:10px;
}
.heavyTxt {
    font-weight:bold;
}
.el-tabs__nav-wrap::after {
    height:0.5px;
}
.user_name_icon {
    text-align: right;
    border-radius: 50%;
    color: #fff;
    float: right;
    font-size: 10px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    transform: scale(.8);
    overflow: hidden;
    letter-spacing: 1px;
    box-sizing: border-box;
    padding-right: 1.5px;
    direction: rtl;
    letter-spacing: 1.5px;
}
.task_name {
    color:#262626;
    display:inline-block;
    max-width: 235px;
    height: 25px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.task_name span{
    position: relative;
    top: 8px;
}
.cb {
    position: relative;
    top: -2px;
}
.group_style {
    border-radius: 5px;margin:2px 0px 2px 0px;height:40px;line-height:40px;
}
.el-tabs__nav-wrap::after {
    height:1px;
}
.el-tabs__header {
    margin:0 !important;
}
.single_line {
    overflow: hidden;text-overflow:ellipsis;white-space: nowrap;
}
.sub_task_num {
    font-size:10px;
    color:#666;
}
.template_box {
    margin:20px 0px;
}

/* 项目阶段侧边栏样式 */
.sidebar {
    width: 2px;
    background: #dddddd;
    position: relative;
}
.sidebar:hover {
    @include background_color("background_color");
}
.sidebar:hover .etui {
    @include background_color("background_color");
    @include border_color("border_color");
    color: #fff;
}
.etui {
    width: 15px;
    height: 40px;
    background: #fff;
    border: 1px solid #dddddd;
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(6%, -50%);
    color: rgb(192, 191, 191);
    box-sizing: border-box;
}
.etui i {
    display: inline-block;
    padding-top: 90%;
    /* padding-left: 15%; */
    font-weight: bold;
}

/* bug问题 */
.task {
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 5px;
}

/* 评论部分 */
.remark {
    width: 500px;
    height: 100%;
    background: #fff;
    position: absolute;
    top: 0;
    right: -500px;
    border-left: 3px solid #dddddd;
}
.jm {
    margin-left: -500px;
    
}

.bj {
    float: left;
    width: 90%;
    overflow: hidden;
    height: 65px;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.bj span {
    width: 50px;
    height: 50px;
    display: inline-block;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    float: left;
    margin-right: 20px;
    /* margin-top: 10px; */
    line-height: 50px;
}
.player {
    height: 15%;
    box-sizing: border-box;
    padding-left: 15px;
    border-bottom: 1px solid #dddddd;
}
.player p {
    margin: 0;
    padding: 2% 0;
    font-size: 18px;
} 
.player .el-image {
    border-radius: 50%;
    margin-right: 10px;
}
.subject {
    height: 60%;
    box-sizing: border-box;
}
.sub-all {
    font-size: 20px;
    padding: 15px 0 15px 15px;
}
.sub-details {
    width: 100%;
    height: 38vh;
    padding-right: 15px;
    box-sizing: border-box;
    overflow: hidden;
    overflow-y: scroll
}
.sub-details li {
    list-style:none
} 
/* 红色背景显示日期 */
.element_span {
    display: inline-block;
    background: #e62412;
    color: #fff;
    border-radius: 3px;
    padding: 3px;
    /* text-align: center; */
    font-size: 12px;
    margin-left: 5px;
}

.pro_btn{
    display: inline-block;
    float: right;
}

</style>
<style lang="scss" scoped>
.counli {
    em {
        font-style: normal;
        display: inline-block;
        margin-left: 9%;
    }
    span {
        float: right;
    }
}
.carts {
    position: relative;
    .el-image{
        border-radius: 50%;
        float: left;
        width: 20%;
    }
    i {
        width: 30px; 
        height: 30px; 
        // background: #778899; 
        display: inline-block; 
        float: left; 
        border-radius:50%; 
        font-style:normal;
        font-size: 12px;
        line-height: 30px;
        text-align: center;
        color: #fff;
        background: #778899;
        overflow: hidden;
        direction: rtl;
    }
    div {
        text-align: left;
        p {
            text-align: left;
            margin-left: 10px;
            margin-left: 13%;
        }
        em {
            display: block;
            font-style: normal;
            margin-left: 13%;
        }
    }
    span {
        font-size: 10px;
        float: right;
        margin-top: -40px;
    }
}
.issue {
    // height: 20%;
    // position: relative;
    // z-index: 4;
    .zh{
        position: relative;
        width: 100%;
        height: 100%;
    }
    .textareays {
        background: #000;
        height: 140px;
        border: 0;
        .el-textarea__inner {
            height: 85%;
        }
    }
    .issue-button {
        position: absolute;
        bottom: 20px;
        right: 20px;
    }
}
.inputDeep {
    position: absolute;
    bottom: 85px;
    width: 95%;
    margin: 0 12px;
}
.inputDeep .el-textarea .el-textarea__inner{
    border: 0 !important;
    resize: none !important;
}
.inputDeeps .el-textarea__inner {
    border: 0 !important;
    resize: none !important;
}
.scop_span {
    display: inline-block;
    padding: 2px 5px;
}
</style>
<style>
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: "14px" !important;
  position: relative;
  top: 0px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
  content: "10px" !important;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
  content: "18px" !important;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
  content: "32px" !important;
}

.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: "文本" !important;
  position: relative;
  top: 0px;
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: "标题1" !important;
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: "标题2" !important;
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: "标题3" !important;
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: "标题4" !important;
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: "标题5" !important;
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: "标题6" !important;
}

.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: "标准字体" !important;
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
  content: "衬线字体" !important;
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
  content: "等宽字体" !important;
}


/* .ql-picker-label {
    position: relative;
} */
.ql-picker-label svg {
    position: relative;
    top: 0px;
}

/* 任务进展 */
.progress {
    border: 1px solid #ddd;
    border-radius: 5px;
    width: 100%;
    box-sizing: border-box;
    padding: 15px;
    position: relative;
    margin-bottom: 20px;
}
.remind {
    width: 95px;
    height: 60%;
    overflow-y:auto;
    position: absolute;
    background: #fff;
    padding: 10px;
    left: 0;
    top: 0;
    border: 1px solid #ddd;
    z-index: 999999;
}

.rala1 .el-radio__input.is-checked + .el-radio__label {
       color: #43d14f !important;
   }
.rala1 .el-radio__input.is-checked .el-radio__inner {
       background: #43d14f !important;
       border-color: #43d14f !important;
   }

.rala2 .el-radio__input.is-checked + .el-radio__label {
       color: #fd7624 !important;
   }
.rala2 .el-radio__input.is-checked .el-radio__inner {
       background: #fd7624 !important;
       border-color: #fd7624 !important;
   }

.rala3 .el-radio__input.is-checked + .el-radio__label {
       color: #fd4d47 !important;
   }
.rala3 .el-radio__input.is-checked .el-radio__inner {
       background: #fd4d47 !important;
       border-color: #fd4d47 !important;
   }

/* 任务进展列表 */
.elCard {
    width: 100%;
    padding: 15px;
    box-sizing: border-box;
    border: 1px solid #EBEEF5;
}
.elCard_qu {
    float: right;
    margin-right: 15px;
}
.integrity {
    padding: 15px;
    overflow-y: auto;
    max-height: 300px;
}
.write {
    float: right;
    color: #1B9AEE;
}
.ssp {
    position: absolute;
    right: 140px;
    top: 95px;
    width: 66%;
    height: 80%;
}
.examine {
    width: 100%;
    text-align: center;
}
.nones {
    width: 100%;
    height: 50px;
    text-align: center;
    color: #909399;
    line-height: 50px;
    border-top: 1px solid #EBEEF5;
    border-bottom: 1px solid #EBEEF5;
    font-size: 16px;
}

.icon {
    /* color: rgb(67, 209, 79); */
    display: block;
    width: 12px;
    height: 12px;
    background: #fff;
    position: absolute;
    top: 0;
    left: -33px;
    border-radius: 50%;
    border: 4px solid;
}

/* ddl */
.ddl {
    height: 136px;
    overflow: hidden;
    border: 1px solid #EBEEF5
}
.tb{
    position: relative;
}
.dpl{
    position: absolute;
    font-size: 20px;
    left: -32px;
    top: 0px;
}
</style>