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-aside :style="'height:'+tableHeight+'px;width:'+groupWidth+'px;'">
                        <div class="task">
                            <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>
                        </div>
                    </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" @click="editTask(element)" :style="element.taskStatus==0?'':'background:#eFeFeF;'">
                                            <!--任务卡片内容显示 -->
                                            <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;')">{{element.name}}</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:5px;'" ></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 :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="详细描述" >
                    <!-- <Editor id="tinymce" v-model="tinymceHtml" :init="editorInit"></Editor> -->
                    <el-input type="textarea" v-model="addForm.taskDesc" :rows="3"></el-input>
                </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>
        </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'
    let id=1;
    export default {
        name: "two-list-headerslots",
        display: "Two list header slot",
        order: 14,
        components: { 
            draggable,
            // editor,
            FileCenter,
            ProjectInfo,
            Summary,
        },
        
        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:true,
                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" }],
                }
            };
        },
        methods: {
            // 侧边栏的点击事件
            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.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() {
                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) {
                // this.addForm = JSON.parse(JSON.stringify(task));
                this.addFormVisible = true;
                this.addLoading = false;
                this.title = "编辑任务";
                this.getTaskDetail(task.id);
            },
            getTaskDetail(id) {
                this.http.post('/task/getTask',{id: id},
                res => {
                    if (res.code == "ok") {
                        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},
                res => {
                    if (res.code == "ok") {
                        this.stageList = res.data;
                    } 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.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;
                this.http.post('/task-group/createFromTemplate',param,
                res => {
                    if (res.code == "ok") {
                        this.addGroupDialog = false;
                        this.getTaskGroups();
                    } 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"
                    });
                });
            },
            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"
                    });
                });
            },
            //切换项目
            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() {
                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;
}
.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;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.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: 24px;
    height: 40px;
    background: #fff;
    border: 1px solid #dddddd;
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(6%, -50%);
    color: rgb(192, 191, 191);
}
.etui i {
    display: inline-block;
    padding-top: 50%;
    padding-left: 15%;
    font-weight: bold;
}

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