调整任务分组的样式

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

@@ -120,7 +120,7 @@
                     <!-- 增加侧边栏的点击效果 -->
                     
                     <el-main style="background:#f7f7f7;padding:0px;position: relative;">
-                        <el-row style="color:#999;margin-top:10px;padding: 0px 10px;position: absolute;width: 100%;top: 0;left: 0;" :gutter="10">
+                        <el-row style="color:#999;margin-top:10px;padding: 0px 10px;" :gutter="10">
                             <el-col :span="12">
                                 <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>
@@ -133,88 +133,86 @@
                                 <el-button icon="iconfont firerock-icondaochu" style="margin-left:10px" size="mini" @click="showExportDialog">导出</el-button>
                                 <el-button icon="iconfont firerock-icondaoru" size="mini" @click="importTaskDialog = true;importToStageId = stageList[0].id;">导入</el-button>
                             </el-col>
-                        <!-- <el-col :span="4">
-                            
-                        </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" style="margin-top: 30px">
-
-                        <draggable style="white-space:nowrap;" @update="onMoveStage"
-                        v-model="stageList" group="stage" @start="stageDrag=true" @end="stageDrag=false;" draggable=".taskStage" >
-                            <!--每个阶段的拖拽 -->
-                            <!-- <transition-group > -->
-                                <v-flex class="taskStage"  v-for="stage in stageList" :key="stage.id" :style="'height:'+stageListHeight+'px;'">
-                                    <div :id="stage.id"
-                                    class="taskList" >
-                                        
-                                        <!--头部显示阶段名称，操作 -->
-                                        <div slot="header" style="margin:10px 0px;cursor:move;width:300px" role="task">
-                                            <span class="stage">{{stage.stagesName}}</span><span style="margin-left:10px;color:#303133;font-size:12px;">{{stage.taskList.length}}</span>
-                                            <!-- <i class="el-icon-more" style="float:right;"></i> -->
-                                            <el-dropdown trigger="click" style="float:right;cursor:pointer;">
-                                                    <i class="el-icon-more" ></i>
-                                                    <el-dropdown-menu slot="dropdown">
-                                                        <el-dropdown-item @click.native="addTask(stage)">
-                                                            <i class="el-icon-document-add"></i>
-                                                            创建任务</el-dropdown-item>
-                                                        <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-if="!displayTable">
+                            <div style="width: 100%;overflow-x: auto;">
+                                <draggable style="white-space:nowrap;" @update="onMoveStage"
+                                v-model="stageList" group="stage" @start="stageDrag=true" @end="stageDrag=false;" draggable=".taskStage" >
+                                    <!--每个阶段的拖拽 -->
+                                    <!-- <transition-group > -->
+                                        <v-flex class="taskStage"  v-for="stage in stageList" :key="stage.id" :style="'height:'+stageListHeight+'px;'">
+                                            <div :id="stage.id"
+                                            class="taskList" >
+                                                
+                                                <!--头部显示阶段名称，操作 -->
+                                                <div slot="header" style="margin:10px 0px;cursor:move;width:300px" role="task">
+                                                    <span class="stage">{{stage.stagesName}}</span><span style="margin-left:10px;color:#303133;font-size:12px;">{{stage.taskList.length}}</span>
+                                                    <!-- <i class="el-icon-more" style="float:right;"></i> -->
+                                                    <el-dropdown trigger="click" style="float:right;cursor:pointer;">
+                                                            <i class="el-icon-more" ></i>
+                                                            <el-dropdown-menu slot="dropdown">
+                                                                <el-dropdown-item @click.native="addTask(stage)">
+                                                                    <i class="el-icon-document-add"></i>
+                                                                    创建任务</el-dropdown-item>
+                                                                <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>
 
-                                        <draggable class="taskListin" :style="'max-height:' + taskListinH + 'px;'" @start="drag=true" @end="drag=false" draggable=".taskCard" ghostClass="ghost" @update="onChange" @add="onChange" group="task1" :id="stage.id">
-                                            <div v-for="element in stage.taskList" :id="element.id" :key="element.id" class="taskCard" ref="tasks" @click="editTask(element)" :style="element.taskStatus==0?'':'background:#eFeFeF;'">
-                                                <!--任务卡片内容显示 -->
-                                                <div>
-                                                    <div v-if="element.taskLevel == 2" class="taskImg hong"><img src="../../assets/image/hong.png" alt=""></div>
-                                                    <div v-if="element.taskLevel == 1" class="taskImg huang"><img src="../../assets/image/huang.png" alt=""></div>
-                                                    <div v-if="element.taskLevel == 0" class="taskImg hui"><img src="../../assets/image/hui.png" alt=""></div>
-                                                    <el-checkbox :disabled="element.taskStatus==2 || element.subTaskList.length > element.subTaskFinishNum" :checked="element.taskStatus==1?true:false" size="large" class="cb"  
-                                                    @change="finishTask(element)"
-                                                    @click.stop.native=""
-                                                    ></el-checkbox>
-                                                    <el-tooltip class="item" effect="dark" :content="element.name" placement="top">
-                                                    <label class="task_name" :style="'background:'+(element.taskStatus==0?'#ffffff;':'#eFeFeF;')"><span>{{element.name}}</span></label>
-                                                    </el-tooltip>
-                                                    <i :class="taskTypeIcon[element.taskType]" :style="'float:right;color:'+taskTypeColor[element.taskType]+';margin-right:8px;margin-top:8px;'" ></i>
+                                                <draggable class="taskListin" :style="'max-height:' + taskListinH + 'px;'" @start="drag=true" @end="drag=false" draggable=".taskCard" ghostClass="ghost" @update="onChange" @add="onChange" group="task1" :id="stage.id">
+                                                    <div v-for="element in stage.taskList" :id="element.id" :key="element.id" class="taskCard" ref="tasks" @click="editTask(element)" :style="element.taskStatus==0?'':'background:#eFeFeF;'">
+                                                        <!--任务卡片内容显示 -->
+                                                        <div>
+                                                            <div v-if="element.taskLevel == 2" class="taskImg hong"><img src="../../assets/image/hong.png" alt=""></div>
+                                                            <div v-if="element.taskLevel == 1" class="taskImg huang"><img src="../../assets/image/huang.png" alt=""></div>
+                                                            <div v-if="element.taskLevel == 0" class="taskImg hui"><img src="../../assets/image/hui.png" alt=""></div>
+                                                            <el-checkbox :disabled="element.taskStatus==2 || element.subTaskList.length > element.subTaskFinishNum" :checked="element.taskStatus==1?true:false" size="large" class="cb"  
+                                                            @change="finishTask(element)"
+                                                            @click.stop.native=""
+                                                            ></el-checkbox>
+                                                            <el-tooltip class="item" effect="dark" :content="element.name" placement="top">
+                                                            <label class="task_name" :style="'background:'+(element.taskStatus==0?'#ffffff;':'#eFeFeF;')"><span>{{element.name}}</span></label>
+                                                            </el-tooltip>
+                                                            <i :class="taskTypeIcon[element.taskType]" :style="'float:right;color:'+taskTypeColor[element.taskType]+';margin-right:8px;margin-top:8px;'" ></i>
+                                                            </div>
+                                                        <div style="margin: 10px 0px;color:#666;" @click="timess(element.endDate)">
+                                                            <span v-if="element.endDate >= times || element.taskStatus == 1"><i v-if="element.endDate != null" class="el-icon-date" style="margin-left:5px">&nbsp;&nbsp;{{element.endDate}}</i></span>
+                                                            <span v-else><em v-if="element.endDate != null" style="display: inline-block;padding:3px 5px"><i v-if="element.endDate != null" class="el-icon-date"><span  class="element_span"> &nbsp;&nbsp;{{element.endDate}} 截止</span></i></em></span>
+                                                            <span v-if="element.executorName">
+                                                            <span v-for="(exeItem, exeIndex) in element.executorName.split(',')" :key="exeIndex" :style="element.executorColor ? 'background:' + element.executorColor.split(',')[exeIndex] : ''" class="user_name_icon">{{exeItem.length>2?exeItem.substring(exeItem.length-2, exeItem.length):exeItem}}</span>
+                                                            </span>
+                                                            <el-button v-if="!element.executorName" type="primary" @click.stop.native="addAsMyTask(element)" size="mini" style="float:right;width:38px;padding:5px;position: absolute;z-index: 5;right: 5px;">认领</el-button>
+                                                        </div>
+                                                        <!--子任务 -->
+                                                        <div v-if="element.subTaskList.length > 0" class="taskCardCircleBox">
+                                                            <el-progress type="circle" :percentage="(element.subTaskFinishNum/element.subTaskList.length) * 100" width="16" :show-text="false" stroke-linecap="butt" stroke-width="8"></el-progress><span style="margin-left:5px;font-size:12px;">{{element.subTaskFinishNum}}/{{element.subTaskList.length}}</span>
+                                                        </div>
+                                                        <!-- <div v-if="element.taskType == 1 && element.refTaskList != null">
+                                                            <el-tooltip class="item" effect="dark" content="查看关联任务" placement="top">
+                                                            <el-link class="sub_task_num" @click.stop.native="showSubTaskList(element)"><i class="iconfont firerock-icontree" ></i><span style="margin-left:5px;">{{element.finishRefTaskCount}}/{{element.refTaskList.length}}</span></el-link>
+                                                            </el-tooltip>
+                                                        </div> -->
+                                                        <div v-if="element.taskType == 1 && !(element.refTaskList == null || element.refTaskList.length == 0)"  class="taskCardCircleBox">
+                                                            <el-progress type="circle" :percentage="(element.finishRefTaskCount/(element.refTaskList ? element.refTaskList.length : 0)) * 100" width="16" :show-text="false" stroke-linecap="butt" stroke-width="8"></el-progress>
+                                                            <span style="margin-left:5px;font-size:12px">{{element.finishRefTaskCount}}/{{(element.refTaskList ? element.refTaskList.length : 0)}}</span>
+                                                        </div>
                                                     </div>
-                                                <div style="margin: 10px 0px;color:#666;" @click="timess(element.endDate)">
-                                                    <span v-if="element.endDate >= times || element.taskStatus == 1"><i v-if="element.endDate != null" class="el-icon-date" style="margin-left:5px">&nbsp;&nbsp;{{element.endDate}}</i></span>
-                                                    <span v-else><em v-if="element.endDate != null" style="display: inline-block;padding:3px 5px"><i v-if="element.endDate != null" class="el-icon-date"><span  class="element_span"> &nbsp;&nbsp;{{element.endDate}} 截止</span></i></em></span>
-                                                    <span v-if="element.executorName">
-                                                    <span v-for="(exeItem, exeIndex) in element.executorName.split(',')" :key="exeIndex" :style="element.executorColor ? 'background:' + element.executorColor.split(',')[exeIndex] : ''" class="user_name_icon">{{exeItem.length>2?exeItem.substring(exeItem.length-2, exeItem.length):exeItem}}</span>
-                                                    </span>
-                                                    <el-button v-if="!element.executorName" type="primary" @click.stop.native="addAsMyTask(element)" size="mini" style="float:right;width:38px;padding:5px;position: absolute;z-index: 5;right: 5px;">认领</el-button>
-                                                </div>
-                                                <!--子任务 -->
-                                                <div v-if="element.subTaskList.length > 0" class="taskCardCircleBox">
-                                                    <el-progress type="circle" :percentage="(element.subTaskFinishNum/element.subTaskList.length) * 100" width="16" :show-text="false" stroke-linecap="butt" stroke-width="8"></el-progress><span style="margin-left:5px;font-size:12px;">{{element.subTaskFinishNum}}/{{element.subTaskList.length}}</span>
-                                                </div>
-                                                <!-- <div v-if="element.taskType == 1 && element.refTaskList != null">
-                                                    <el-tooltip class="item" effect="dark" content="查看关联任务" placement="top">
-                                                    <el-link class="sub_task_num" @click.stop.native="showSubTaskList(element)"><i class="iconfont firerock-icontree" ></i><span style="margin-left:5px;">{{element.finishRefTaskCount}}/{{element.refTaskList.length}}</span></el-link>
-                                                    </el-tooltip>
-                                                </div> -->
-                                                <div v-if="element.taskType == 1 && !(element.refTaskList == null || element.refTaskList.length == 0)"  class="taskCardCircleBox">
-                                                    <el-progress type="circle" :percentage="(element.finishRefTaskCount/(element.refTaskList ? element.refTaskList.length : 0)) * 100" width="16" :show-text="false" stroke-linecap="butt" stroke-width="8"></el-progress>
-                                                    <span style="margin-left:5px;font-size:12px">{{element.finishRefTaskCount}}/{{(element.refTaskList ? element.refTaskList.length : 0)}}</span>
-                                                </div>
+                                                </draggable>
+                                                <el-button v-if="canAddTask" slot="footer" role="people" @click="addTask(stage)" style="width:300px;" size="small" icon="el-icon-plus"></el-button>
                                             </div>
-                                        </draggable>
-                                        <el-button v-if="canAddTask" slot="footer" role="people" @click="addTask(stage)" style="width:300px;" size="small" icon="el-icon-plus"></el-button>
-                                    </div>
-                                </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>
+                                        </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>
                         </div>
                         <!--列表-->
                         <el-table v-if="displayTable" :data="taskDataList"