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

<template>
    <section>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="主要内容" name="project" @click="null" disabled=true>
                <template slot="label">
                    <el-button type="default" size="mini"  icon="el-icon-arrow-left" @click="toList" style="margin-left:10px;">项目列表</el-button>
                    <el-select v-model="curProjectId"  size="mini" class="projectCls" @change="onProjectChange">
                        <el-option v-for="item in projectList"  :key="item.id" :label="item.projectName" :value="item.id"></el-option>
                    </el-select>
                    <el-dropdown trigger="click" style="margin-right:30px;color:#262626;cursor:pointer;">
                        <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>完成项目
                            </el-dropdown-item>
                            <el-dropdown-item divided v-if="currentProject.status == 1" @click.native="cancelPro()">
                                <i class="el-icon-refresh-left"></i>撤销项目
                            </el-dropdown-item>
                            <el-dropdown-item v-if="currentProject.status == 2 || currentProject.status == 3" @click.native="startPro()">
                                <i class="iconfont firerock-iconqidong"></i>重启项目
                            </el-dropdown-item>
                            </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </el-tab-pane>
            <el-tab-pane label="任务看板" name="projectInside">
                <el-container style="padding: 0px;">
                    <el-aside :style="'padding-left:10px;padding-right:5px;height:'+tableHeight+'px;width:'+groupWidth+'px;'">
                        <el-input v-model="groupSearch" size="small" placeholder="搜索分组" @input="startSearchGroup" style="margin-top:10px"/>
                        <p ><span class="heavyTxt">任务分组</span> <i class="el-icon-plus pull-right" style="color:#666;margin-right:10px;" @click="createGroup"></i></p>
                        <el-menu :default-active="defaultGroupId"  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 >{{item.name}}</span>
                                <el-dropdown trigger="click" style="float:right;margin-right:-10px;">
                                    <i class="iconfont firerock-iconcaidan" ></i>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item @click.native="copyGroup(item)">
                                            <i class="el-icon-document-copy"></i>
                                            复制分组</el-dropdown-item>
                                        <el-dropdown-item divided @click.native="renameGroup(item)">
                                            <i class="el-icon-edit"></i>
                                            修改组名</el-dropdown-item>
                                        <el-dropdown-item divided @click.native="deleteGroup(item)">
                                            <i class="el-icon-delete"></i>删除分组</el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                                </div>
                            </el-menu-item>
                        </el-menu>
                        <!--视图 -->
                        <p ><span class="heavyTxt">视图</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>
                    <span :style="'background:#f0f0f0;width:1px;height:'+tableHeight+'px;'" @click="toggleGroup">
                        
                    </span>
                    <!-- <span :style="'width:10px;height:'+tableHeight+'px;float:left;text-align:center;vertical-align:middle;'" @click="toggleGroup">
                        <span :style="'width:1px;background:#20A0FF;height:'+tableHeight+'px;float:left;'"></span>
                        <i class="el-icon-d-arrow-left" ></i>
                    </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;">
                        <el-row style="color:#999;margin-top:10px;padding: 0px 10px;">
                        <el-col :span="20">
                            <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="4">
                            <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-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">

                        <draggable style="overflow-x:auto;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;'">
                                    <draggable group="task"
                                    
                                    class="taskList" 
                                    :id="stage.id"
                                    dragClass="dragClass"
                                    ghostClass="ghost"
                                    @start="drag=true" @end="drag=false" 
                                    @update="onChange" @add="onChange"
                                    draggable=".taskCard">
                                        
                                        <!--头部显示阶段名称，操作 -->
                                        <div slot="header" style="margin:10px 0px;cursor:move;" 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;">
                                                    <i class="el-icon-more" ></i>
                                                    <el-dropdown-menu slot="dropdown">
                                                        <el-dropdown-item @click.native="renameStage(stage)">
                                                            <i class="el-icon-edit"></i>
                                                            重命名列表</el-dropdown-item>
                                                        <el-dropdown-item divided @click.native="deleteStage(stage)">
                                                            <i class="el-icon-delete"></i>删除列表</el-dropdown-item>
                                                    </el-dropdown-menu>
                                            </el-dropdown>
                                        </div>
                                        <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>
                                                <span v-if="element.executorName != null" :style="'background:'+element.executorColor" class="user_name_icon">{{element.executorName.length>2?element.executorName.substring(element.executorName.length-2, element.executorName.length):element.executorName}}</span>
                                                <el-button v-if="element.executorName == null" type="primary" @click.stop.native="addAsMyTask(element)" size="mini" style="float:right;width:38px;padding:5px;">认领</el-button>
                                            </div>
                                            <div style="margin: 10px 0px;color:#666;">
                                                <i v-if="element.endDate != null" class="el-icon-date">&nbsp;&nbsp;{{element.endDate}}</i>
                                                <i :class="taskTypeIcon[element.taskType]" :style="'float:right;color:'+taskTypeColor[element.taskType]+';margin-right:8px;'" ></i>
                                                
                                            </div>
                                            <!--子任务 -->
                                            <div v-if="element.subTaskList.length > 0">
                                                <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.subTaskFinishNum}}/{{element.subTaskList.length}}</span></el-link>
                                                </el-tooltip>
                                            </div>
                                        </div>
                                        <el-button slot="footer" role="people" @click="addTask(stage)" style="width:100%;" size="small" icon="el-icon-plus"></el-button>
                                    </draggable>
                                </v-flex>
                            <!-- </transition-group > -->
                            <el-button slot="footer" v-if="selectedGroup != null" @click="addStage" class="taskList" icon="el-icon-plus" style="margin-top:30px;">新建任务列表</el-button>
                        </draggable>
                        </div>
                        <!--列表-->
                        <el-table v-if="displayTable" :data="taskDataList" 
                        :header-cell-style="{'font-weight':'normal'}"
                        highlight-current-row v-loading="listLoading" :height="tableHeight" style="width: 100%;margin-top:10px;" @row-click="taskLineClick">
                            <el-table-column fixed label="完成"  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="标题"  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="任务类型"  width="100">
                                <template slot-scope="scope">
                                    {{taskTypeList[scope.row.taskType].name}}
                                </template>
                            </el-table-column>
                            <el-table-column prop="taskStatus" label="任务状态" width="100" >
                                <template slot-scope="scope">
                                    {{taskStatusList[scope.row.taskStatus]}}
                                </template>
                            </el-table-column>
                            <el-table-column prop="parentName" label="父任务"  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="任务列表" width="100" >
                                
                            </el-table-column>
                            <el-table-column prop="executorName" label="执行人" width="100" >
                                <template slot-scope="scope">
                                    {{scope.row.executorName == null?"待分配":scope.row.executorName}}
                                </template>
                            </el-table-column>
                            <el-table-column prop="createDate" label="创建时间" width="100" ></el-table-column>
                            <el-table-column prop="endDate" label="截止时间" width="100" ></el-table-column>
                            <el-table-column prop="taskLevel" label="优先级" width="100" >
                                <template slot-scope="scope">
                                    {{importanceList[scope.row.taskLevel].name}}
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-main>
                </el-container>
            </el-tab-pane>
            <el-tab-pane label="文件中心" name="files"><FileCenter ref="fileCenter"></FileCenter></el-tab-pane>
            <el-tab-pane label="项目概览" name="info"><ProjectInfo ref="projectInfo"></ProjectInfo></el-tab-pane>
            <el-tab-pane label="数据统计" name="summary"><Summary ref="summary"></Summary></el-tab-pane>
            
        </el-tabs>

        <!--新增任务界面-->
        <el-dialog class="jm" :title="title" v-if="addFormVisible" :visible.sync="addFormVisible" :close-on-click-modal="false" customClass="customWidth" width="800px">
            <el-form ref="form1" :model="addForm" :rules="taskRules" label-width="100px">
                <!--子任务需要选择任务列表 -->
                <el-form-item label="任务列表" 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="类型">
                    <el-select v-model="addForm.taskType" style="width:100%;" >
                        <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="任务内容" prop="name">
                    <el-input v-model="addForm.name"  placeholder="请输入任务内容" clearable></el-input>
                </el-form-item>
                
                <el-form-item label="执行人">
                    <el-select v-model="addForm.executorId" filterable placeholder="请选择执行人" style="width:100%;" >
                        <el-option v-for="item in users" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="截止时间" prop="endDate">
                    <el-date-picker v-model="addForm.endDate" type="date" style="width:40%;" value-format="yyyy-MM-dd"  placeholder="请选择日期" ></el-date-picker>
                    <span style="margin-left:30px;margin-right:10px;">计划工时</span><el-input-number  v-model="addForm.planHours" style="width:30%;" :min="1" :max="100"  placeholder="请输入计划工作时长，单位小时" ></el-input-number ><span style="margin-left:10px;">小时</span>
                </el-form-item>
                
                <el-form-item label="优先级">
                    <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="详细描述" 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>
                    <p ><i class="iconfont firerock-icontree" style="color:#20A0ff;margin-left:10px;">子任务</i>
                        <el-link style="float:right;" @click="addSubTask">添加子任务</el-link>
                    </p>
                    <!--子任务列表 -->
                    <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="完成" 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="标题" >
                                <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="执行人" width="100" >
                                <template slot-scope="scope">
                                    {{scope.row.executorName == null?"待分配":scope.row.executorName}}
                                </template>
                            </el-table-column>
                            <el-table-column prop="endDate" label="截止时间" width="100" ></el-table-column>
                        </el-table>
                    </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="deleteTask" style="float:left;">删除</el-button>
                <el-button @click.native="addFormVisible = false">取消</el-button>
                <el-button type="primary" @click="submitInsert" :loading="addLoading">提交</el-button>
            </div>
            <div slot="title" v-if="addForm.parentTid != null" >
                <!-- <el-link @click="backToParentTask"><i class="el-icon-arrow-left single_line">返回父级任务</i> | {{addForm.parentTname}}</el-link> -->
                <el-page-header  @back="backToParentTask" title="返回父任务" :content="addForm.parentTname"></el-page-header>
            </div>
            <!-- 评论 -->
            <div class="remark">
                <span class="zh">
                    <span  v-for="(pl, i) in critic" :key="i">
                        <div class="player" v-if="pl">
                            <p>参与人</p>
                            <div class="bj">
                                <span style="background: #778899">{{pl.length > 2 ? pl.substring(pl.length - 2, pl.length) : pl}}</span>
                                <!-- <span style="background: #778899">{{pl.length}}</span> -->
                            </div>
                        </div>
                    </span>
                    <div class="subject">
                        <div class="sub-all">所有动态</div>
                        <div class="sub-details" ref="main">
                            <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto" 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>屈经理完成了依赖任务</em><span>4月20日</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">
                                        {{item.userName.length > 2 ? item.userName.substring(item.userName.length - 2, item.userName.length) : item.userName}}
                                    </i>
                                    <div>
                                        <!-- <p>{{item.userName}}</p> -->
                                        <p>{{item.userName}}</p>
                                        <em>{{item.content}}</em>
                                    </div>
                                    <span>{{item.createTime | relativeTime}}</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="issue">
                        <!-- <el-input type="textarea" class="textareays" label-width="100%" label-height="140px"></el-input> -->
                        <div class="issue_fixation">
                            <el-input
                            class="issue-input"
                            type="textarea"
                            placeholder="请输入内容"
                            :autosize="{ minRows: 6, maxRows: 6}"
                            v-model.trim="textarea2"
                            >
                            </el-input>
                            <el-button class="issue-button" type="primary" @click="release()">发布</el-button>
                        </div>
                    </div>
                </span>
            </div>
            <!-- 评论 -->
        </el-dialog>
        <!-- 子任务列表 -->
        <el-dialog title="查看子任务" 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="完成" 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="标题" >
                    <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="执行人" width="100" >
                    <template slot-scope="scope">
                        {{scope.row.executorName == null?"待分配":scope.row.executorName}}
                    </template>
                </el-table-column>
                <el-table-column prop="endDate" label="截止时间" width="100" ></el-table-column>
            </el-table>
        </el-dialog>
        <!--用户详细信息弹出框-->
        <el-dialog title="查看详情" v-if="userDetailVisible" :visible.sync="userDetailVisible" :close-on-click-modal="false" customClass="customWidth" width="400px">
            <div class="line"><span>姓名</span><span>{{userDetail.name}}</span></div>
            <div class="line"><span>手机号码</span><span>{{userDetail.phone}}</span></div>
            <div class="line"><span>部门</span><span>{{userDetail.departmentName}}</span></div>
            <div class="line"><span>成本</span><span>{{userDetail.cost}}元/小时</span></div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="userDetailVisible = false" >确定</el-button>
            </div>
        </el-dialog>
        <!-- 新增任务分组弹出框 -->
        <el-dialog 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="新建分组" name="new">
                    <el-form ref="form2" :model="groupForm" :rules="rules" style="margin-top:40px;">
                    <el-form-item prop="name">
                        <el-input v-model="groupForm.name" placeholder="请输入分组名称" maxlength="12"
                            show-word-limit clearable></el-input>
                    </el-form-item>
                    <el-button type="primary" @click="addGroup" style="width:100%;" >创建</el-button>
                </el-form>
                </el-tab-pane>
                <el-tab-pane label="从模板创建" name="template">
                    <el-card class="template_box" :style="t.selected?'border: 1px solid #409eff;':''" v-for="(t,tIndex) in groupTemplateList" :key="t.id"  @click.native="choseTemplate(tIndex)">
                        <el-row >
                            <el-col :span="22">
                                <div >{{t.name}}</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" v-if="t.selected" style="font-size:20px;color:#409eff;margin-top:12px;"></i>
                            </el-col>
                        </el-row>
                    </el-card>
                    <el-button type="primary" @click="addTemplateGroup" style="width:100%;" >创建</el-button>
                </el-tab-pane>
                </el-tabs>
            </div>
        </el-dialog>
        <el-dialog title="修改任务分组" v-if="modGroupDialog" :visible.sync="modGroupDialog" :close-on-click-modal="false" customClass="customWidth" width="300px">
            <el-form ref="form2" :model="groupForm" :rules="rules" style="margin-top:10px;">
                    <el-form-item prop="name">
                        <el-input v-model="groupForm.name" placeholder="请输入分组名称" maxlength="12"
                            show-word-limit clearable></el-input>
                    </el-form-item>
                </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addGroup" style="width:100%;" >保存</el-button>
            </div>
        </el-dialog>
        <!-- 新增任务列表弹出框 -->
        <el-dialog title="新增/修改任务列表" v-if="addStageDialog" :visible.sync="addStageDialog" :close-on-click-modal="false" customClass="customWidth" width="300px">
            <el-form ref="form2" :model="stageForm" :rules="rules2" >
                <el-form-item prop="stagesName">
                    <el-input v-model="stageForm.stagesName" placeholder="请输入任务列表名称" maxlength="12"
                        show-word-limit clearable></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addStagePost" style="width:100%;" >保存</el-button>
            </div>
        </el-dialog>
    </section>
</template>
<script>
    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 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'
    let id=1;
    export default {
        name: "two-list-headerslots",
        display: "Two list header slot",
        order: 14,
        components: { 
            draggable,
            // editor,
            FileCenter,
            ProjectInfo,
            Summary,
            quillEditor // 富文本
        },
        
        data() {
            return {
                editorInit: {
                    language_url: '/static/tinymce/zh_CN.js',
                    language: 'zh_CN',
                    skin_url: '/static/tinymce/skins/lightgray',
                    height: 300,
                    branding: false, // 是否禁用“Powered by TinyMCE”
menubar: true, // 顶部菜单栏显示
plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu',
toolbar: 'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat'
                },
                groupTemplateList:[],
                createGroupWay:'new',
                modGroupDialog:false,
                subTaskVisible:false,
                orderList:[{id:"seq",name:"手动拖拽顺序",isDesc:false},{id:"create_date",name:"创建时间最晚",isDesc:true},
                                {id:"end_date",name:"截止时间最晚",isDesc:true},
                                {id:"task_level",name:"优先级最高",isDesc:true}],
                order:"seq",
                isDesc:false,
                taskDataList:[],
                displayTable: false,
                viewList: [{id:1,name:"全部任务"},{id:2,name:"进行中的任务"},{id:3,name:"已完成的任务"},{id:4,name:"待安排任务"},
                {id:5,name:"我创建的任务"},{id:6,name:"我执行的任务"},{id:7,name:"今天的任务"},{id:8,name:"已超期的任务"}],
                importanceList:[{id:0,name:"一般"},{id:1,name:"重要"},{id:2,name:"紧急"},],
                taskTypeList:[{id:0,name:"任务", icon:"iconfont firerock-iconrenwu"},{id:1,name:"里程碑",icon:"iconfont firerock-iconicon-"},{id:2,name:"风险",icon:"iconfont firerock-iconfengxian"}],
                taskTypeColor:['#20A0FF','#8613ad','#bf0404'],
                taskTypeIcon:['iconfont firerock-iconrenwu','iconfont firerock-iconicon-','iconfont firerock-iconfengxian'],
                taskStatusList:['进行中','已完成','已撤销'],
                //优先级
                taskLevelColor:['#262626','#E6A23C','#F56C6C'],
                stageListHeight: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")),
                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: "请输入分组名称", trigger: "blur" }],
                },
                rules2: {
                    stagesName: [{ required: true, message: "请输入任务列表名称", trigger: "blur" }],
                },
                taskRules : {
                    name: [{ required: true, message: "请输入任务内容", trigger: "blur" }],
                },
                sleectId: null,
                sleectProjectId: null,
                sidebarIndex: null, // 侧边栏索引
                url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                count: 0,
                textarea2: '',
                taskId: null,
                commentList: [],
                critic: [], // 评论头像的数组
                editorOption: { // 富文本框里面的默认值
                    placeholder: '请输入文本...',
                     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, // 控制提交 
            };
        },
        methods: {
             load () {
                 if(this.count >= 0) return
                this.count += 2
            },
            onEditorFocus() {
                this.onEditorBlur()
            },
            // 获得焦点时触发
            onEditorBlur(){
                let theEle = this.$refs.text; // 获取元素
                console.log(theEle.value); // 获取到富文本内容
                var img = theEle.value.match(/<img[^>]+>/g); // 赛选 img 标签
                console.log(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);
                console.log(fileSize,"字节");
                var size = "";
	            size = (fileSize/1024/1024).toFixed(2);
                if (size > 2){
                    this.textContent = false
                     this.$message({
                        showClose: true,
                        message: '图片超过了2MB，请重新上传',
                        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;
            },
            //获取分组模板列表
            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: '重启成功',
                            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: '撤销成功',
                            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: '项目完成',
                            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='您确定要删除当前任务及其子任务吗?';
                } else {
                    warning='您确定要删除当前任务吗?';
                }
                this.$confirm(warning, "提示", {
                    //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);
                if (pathModel == 'summary') {
                    //刷新页面
                    this.$router.go(0);
                }
            },
            showSubTaskList(task) {
                this.subTaskVisible = true;
                this.addForm = task;
            },
            backToParentTask() {
                this.getTaskDetail(this.addForm.parentTid);
            },
            //显示子任务创建卡片
            addSubTask() {
                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.addLoading = 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) {
                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();
                }
            },
            //加载视图任务列表
            getViewTaskList() {
                this.http.post('/task/list',{projectId: this.curProjectId, viewId: this.selectedGroup.id, order: this.order, isDesc: this.isDesc},
                res => {
                    if (res.code == "ok") {
                        this.taskDataList = res.data;
                        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 -1, 
                    newIndex: e.newIndex -1,
                    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"
                            });
                        });
            },
                  
            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) {
                console.log(task);
                // this.addForm = JSON.parse(JSON.stringify(task));
                this.addFormVisible = true;
                this.addLoading = false;
                this.title = "编辑任务";
                this.getTaskDetail(task.id);
                this.gain(task); // 获取评论列表
            },  
            // 获取评论列表
            gain (task) {
                console.log(this.stageList, '卡片视图的数据');
                this.taskId = task.id
                this.http.post('/task-comment/getList', {taskId: task.id},
                res => {
                    if (res.code == "ok") {
                        this.commentList = res.data
                        this.sppk(this.commentList) // 获取参与人的方法
                        // this.cppl()
                        // this.commentList.reverse()
                    } 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)
            },

            // 点击发布
            release() {
                if(this.textarea2.length <= 0) return this.$message({message: "请输入内容", type: "error"})
                // console.log(this.taskId);
                this.http.post('/task-comment/add', {taskId: this.taskId, userId: this.user.id, content: this.textarea2},
                res => {
                    if(res.code == "ok"){
                        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(){
                // console.log("滚动到底部");
                this.$nextTick(() => {
                    this.$refs.main.scrollTop = this.$refs.contRoll.scrollHeight;
                })
            },
            getTaskDetail(id) {
                this.http.post('/task/getTask',{id: id},
                res => {
                    if (res.code == "ok") {
                        console.log(res, '点击卡片视图的数据');
                        this.addForm = res.data;
                        this.addForm.createDate = null;
                        this.addForm.indate = null;
                        this.addLoading = false;
                    } else {
                        this.$message({
                        message: res.msg,
                        type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },
            addTask(stage) {
                this.addFormVisible = true;
                this.addForm = {projectId: stage.projectId, groupId: stage.groupId, stagesId: stage.id, taskLevel:0, planHours: 8, taskType: 0};
                this.addLoading = false;
                this.title="创建任务";
            },
            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("确认删除吗?", "提示", {
                    //type: 'warning'
                }).then(() => {
                    this.http.post('/stages/delete',param,
                        res => {
                            if (res.code == "ok") {
                                this.stageList = res.data;
                            } else {
                                this.$message({
                                message: res.msg,
                                type: "error"
                                });
                            }
                        },
                        error => {
                            this.$message({
                                message: error,
                                type: "error"
                            });
                        });
                });
            },
            //加载项目内的任务列表
            getStageList() {
                this.http.post('/stages/list',{groupId: this.selectedGroup.id, projectId: this.selectedGroup.projectId, order: this.order, isDesc: this.isDesc},
                res => {
                    if (res.code == "ok") {
                        this.stageList = res.data;
                        // console.log(this.stageList[0].taskList, '嘀嘀嘀');
                    } else {
                        this.$message({
                        message: res.msg,
                        type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },
            addStagePost() {
                let param = JSON.parse(JSON.stringify(this.stageForm));
                param.taskList = [];
                this.http.post('/stages/save',param,
                res => {
                    if (res.code == "ok") {
                        this.stageList = res.data;
                        this.addStageDialog = false;
                    } 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};
            },
            viewChange(index, indexPath) {
                console.log(index);
                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;
            } ,
            groupChange(index, indexPath) {
                console.log(index);
                this.groupType = 0;
                this.order = "seq";
                this.isDesc = false;
                this.selectedGroup = this.groupList.filter(g=>g.id == index)[0];
                this.getStageList();
                this.displayTable = false;
            },
            //本地搜索组
            startSearchGroup() {
                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;
                }
            },
            renameGroup(item) {
                this.groupForm = JSON.parse(JSON.stringify(item));
                this.modGroupDialog = true;
            },
            deleteGroup(item) {
                var _this = this;
                this.$confirm("确认删除吗?", "提示", {
                    //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];
                                    } else {
                                        this.selectedGroup = {};
                                    }
                                }
                            } 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;
                    return 
                }
                // 
                this.http.post('/task-group/createFromTemplate',param,
                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"
                    });
                });
            },

            // addGroup() {
            //     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.groupForm;
            //             }
            //         } else {
            //             this.$message({
            //             message: res.msg,
            //             type: "error"
            //             });
            //         }
            //     },
            //     error => {
            //         this.$message({
            //             message: error,
            //             type: "error"
            //         });
            //     });
            // },

            // 重新定义了 addGroup 方法
             addGroup() {
                this.http.post('/task-group/save',this.groupForm,
                res => {
                    if (res.code == "ok") {
                        this.groupList = res.data;
                        this.addGroupDialog = false;
                        this.modGroupDialog = false;
                        console.log(this.selectedGroup.id);
                        if (this.selectedGroup.id !== this.groupForm.id) {
                            this.selectedGroup = this.groupForm;
                        }
                        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"
                    });
                });
            },

            createGroup() {
                this.addGroupDialog = true;
                this.groupForm = {projectId: this.curProjectId};
            },
            getInsideData() {
                this.getTaskGroups();
            },
            //加载项目内的任务分组
            getTaskGroups() {
                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.groupList[0].id;
                            this.selectedGroup = this.groupList[0];
                            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"
                    });
                });
            },

            // 额外加的
             getTaskGroup() { 
                this.http.post('/task-group/list',{projectId: this.curProjectId},
                res => {
                    if (res.code == "ok") {
                        console.log(res);
                        console.log(res.data.length)
                        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() {
                let path = this.$route.path;
                path = path.substring(0,path.lastIndexOf('/'))+'/'+this.curProjectId;
                this.$router.push(path);
                console.log('this.activeName=='+this.activeName);
                this.getTaskGroups();
                this.$refs.fileCenter.refreshPage();
                this.$refs.projectInfo.refreshPage();
                this.$refs.summary.refreshPage();
            },
            //获取我的项目列表
            getMyProjectList() {
                this.http.post('/project/getProjectList', {
                },
                res => {
                    if (res.code == "ok") {
                        this.projectList = res.data;
                        console.log(this.projectList);
                    } 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: 99999
                },
                res => {
                    if (res.code == "ok") {
                        this.users = res.data.records;
                    } else {
                        this.$message({
                        message: res.msg,
                        type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },


            //获取项目列表
            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: '图片太大，请重新上传',
          type: 'warning'
        });
                this.$refs.form1.validate(valid => {
                    if (valid) {
                        delete this.addForm.subTaskList;
                        this.http.post('/task/save',this.addForm,
                            res => {
                                if (res.code == "ok") {
                                    this.$message({
                                        message: "提交成功",
                                        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"
                                });
                                }
                            );
                        }
                });
            },

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

            detail(i) {
                this.$router.push("/list/" + this.list[i].id + "/" + this.list[i].projectName);
            },
            getDetail() {
                this.http.post('/project/detail',{ 
                    id: this.curProjectId
                },
                res => {
                    if (res.code == "ok") {
                        this.currentProject = res.data;
                    } else {
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                    }
                );
            },
        },
        created() {
            let height = window.innerHeight;
            this.tableHeight = height - 135;
            this.stageListHeight = this.tableHeight - 45;
            const that = this;
            window.onresize = function temp() {
                that.tableHeight = window.innerHeight - 135;
                that.stageListHeight = that.tableHeight - 45;
                console.log('stageList height=='+that.stageListHeight);
            };
        },
        mounted() {
            this.curProjectId = parseInt(this.$route.params.id);
            this.activeName = this.$route.path.split("/")[1];
            this.getDetail();
            this.getUsers();
            this.getMyProjectList();
            this.getInsideData();
            this.getGroupTemplate();
            // tinymce.init({});
            
        }
    };
</script>


<style >

.flip-list-move {
  transition: transform 0.5s;
}
.no-move {
  transition: transform 0s;
}
.taskStage {
    margin:10px;
    display:inline-block;
    vertical-align:top;
}
.taskList {
    padding:7px;
    width:300px;
}

.taskList .stage {
    font-weight:bold;
}


.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;
}

.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:center;border-radius:50%;color:white;float:right;font-size:10px;width:30px;height:30px;line-height:30px;
    transform: scale(0.8);
}
.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 {
    background: #20a0ff;
}
.sidebar:hover .etui {
    background: #20a0ff;
    border: #20a0ff;
    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: 87%;
    padding-right: 15px;
    box-sizing: border-box;
    overflow: hidden;
    overflow-y: scroll
}
.sub-details li {
    list-style:none
} 

</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;
    }
    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: 0;
    }
}
.issue-input {
    position: absolute;
    bottom: 85px;    
}
</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: -8px;
}
.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: -8px;
}
.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: -6px;
}
</style>