- 页面及样式
<style>
#proProgressRecord {
display: flex;
flex-direction: column;
}
#proProgressRecord .proRec-container {
height: 100% !important;
display: flex;
flex-direction: column;
}
#proProgressRecord .LineStyle {
width: 3px;
height: 16px;
background: rgba(1, 193, 164, 1);
margin: 10px;
}
#proProgressRecord .LineGrey {
width: 1px;
height: 17px;
background: rgba(104, 152, 149, 1);
}
#proProgressRecord table thead tr th {
background-color: #fff;
}
#proProgressRecord .titleTask {
font-size: 15px;
font-family: Source Han Sans CN;
font-weight: 500;
color: rgba(51, 51, 51, 1);
}
#proProgressRecord .oafileNumTable {
position: absolute;
width: 20px;
height: 15px;
background: rgba(2, 200, 170, 1);
border-radius: 7px;
color: #fff;
top: 13px;
left: 50%;
pointer-events: none !important;
font-size: 12px;
}
#proProgressRecord .modifiable-item:hover {
cursor: pointer;
}
#proProgressRecord input {
height: 24px;
display: none;
padding-left: 8px;
border-radius: 4px;
border: 1px solid #CCCCCC;
}
#proProgressRecord input:hover {
border-color: #66afe9;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px #25BC9E;
}
#proProgressRecord .change-task-executor:hover {
color: #25BC9E;
}
#proProgressRecord .peogressBox input[type=range]:hover{
border-color: none;
box-shadow: none;
}
#proProgressRecord .peogressBox input[type=range] {
cursor: pointer;
-webkit-appearance: none;
width: 117px;
background: -webkit-linear-gradient(#25BC9E, #25BC9E) no-repeat, #E5EBEB;
height: 4px;
padding: 0;
border: none;
border-radius: 2px;
}
#proProgressRecord .peogressBox input[type=range]::-webkit-slider-thumb {
cursor: pointer;
-webkit-appearance: none;
height: 16px;
width: 16px;
background: #fff;
border-radius: 50%;
border: 1px solid #25BC9E;
}
#proProgressRecord .ProgressBar {
width: 117px;
height: 4px;
background: rgba(238, 243, 243, 1);
border-radius: 2px;
display: flex;
flex-flow: row nowrap;
}
#proProgressRecord .timeClass {
width: 104px;
border: 1px solid #DFE4E4;
border-radius: 10px;
}
#proProgressRecord .timeClass:hover {
cursor: pointer;
}
#proProgressRecord .over-time {
width: 104px;
background-color: #FEE2E6;
border-radius: 10px;
border: 1px solid #FE2747;
color: #FE2747;
}
#proProgressRecord .over-time:hover {
cursor: pointer;
}
#proProgressRecord .overTime {
border: 1px solid #FE2848;
background-color: #FEE2E6;
border-radius: 10px;
}
#proProgressRecord .RunPart {
height: 4px;
background: rgba(37, 188, 158, 1);
border-radius: 2px;
}
#proProgressRecord .bar-inli {
display: inline-flex;
}
#proProgressRecord .second-num {
position: relative;
width: 20px;
height: 13px;
background: rgba(2, 200, 170, 1);
border-radius: 7px;
color: #fff;
margin-top: -25px;
margin-left: 52%;
font-size: 12px;
}
#proProgressRecord .second-list {
background-color: #F8FAFA;
}
#proProgressRecord .time-td {
text-align: center !important;
text-align: -webkit-center !important;
text-align: -moz-center !important;
}
#proProgressRecord .Butt:hover {
cursor: pointer;
}
#proProgressRecord .complete-img {
width: 18px;
height: 18px;
margin-right: 10px;
}
#proProgressRecord .spot {
display: inline-block;
width: 20px;
height: 16px;
background: #25bc9e;
color: #fff;
border-radius: 10px;
top: 0;
left: 50%;
position: absolute;
}
#proProgressRecord .stageName {
overflow: hidden;
text-overflow: ellipsis;
}
#proProgressRecord .stageName:hover {
cursor: pointer;
color: #25BC9E;
text-align: left;
}
#proProgressRecord .width-limit {
overflow: hidden;
text-align: left;
white-space: nowrap;
text-overflow: ellipsis;
}
#proProgressRecord table thead>tr {
height: 40px;
line-height: 40px !important;
border-bottom: 1px solid rgba(235, 235, 235);
}
</style>
<div id="proProgressRecord" class="box table-v4 civTable oa" style="height: 100%;width: 100%;">
<div class="proRec-container">
<table class="table table-v5" style="height: 100% !important;">
<thead class="_thead" style="height: 40px;">
<tr>
<th style="width: 40px;">序号</th>
<th>
类别
<img
class="addStage" code="" stage="" name=""
stagename="" src="assets/images/oa/集团OA/新增任务.png"
style="cursor: pointer; margin: -2px 0 0 5px;"
onmouseover="this.src='assets/images/oa/集团OA/新增任务选中.png'"
onmouseout="this.src='assets/images/oa/集团OA/新增任务.png'">
</img>
</th>
<th>目标类型</th>
<th style="width: 200px;">目标任务名称</th>
<th style="width: 200px;">任务进度</th>
<th style="width: 112px;">输出</th>
<th style="width: 64px;">负责人</th>
<th>开始时间</th>
<th>结束时间</th>
<th style="width: 104px;">操作</th>
</tr>
</thead>
<tbody class="_tbody" style="height: calc(100% - 40px);">
<%for(let i = 0; i < tableData.length; i++){%>
<%let data1 = tableData[i] %>
<tr>
<td style="width: 40px;"><%= i + 1%></td>
<td style="white-space: nowrap;">
<%if(data1.idArrs){ %>
<%if(data1.idArrs.split(',').some(val => openedTr.includes(val))){%>
<img
class="Butt" type="close-tree_all"
TaskLevelOneID="<%= data1.idArrs%>"
name="<%= data1.StageName%>"
id="container<%= i%>"
src="assets/images/oa/任务工作台/箭头下.png">
</img>
<%} else {%>
<img
class="Butt" type="expand-tree_node1"
TaskLevelOneID="<%= data1.idArrs%>"
name="<%= data1.StageName%>"
id="container<%= i%>"
src="assets/images/oa/任务工作台/箭头右.png">
</img>
<%}%>
<%}%>
<span class="stageName" taskName="<%= data1.StageName%>"><%= data1.StageName%></span>
<input class="taskName" editType="阶段信息" type="text" taskCode="<%= data1.StageNumber%>" value="<%= data1.StageName%>"></input>
</td>
<td>
<img src="assets/images/oa/新增.png" style="cursor: pointer;"
code="<%= data1.StageNumber%>"
stage="<%= data1.StageName%>"
StageName="<%= data1.StageName%>"
class="addOneLevel"
name="addTaskLevelOne"></img>
<span style="font-weight: 300;">点击添加一级任务</span>
</td>
<td style="width: 200px"></td>
<td style="width: 200px" class="peogressBox">
<div class="ProgressBar bar-inli">
<div class="RunPart"
style="width: <%= data1.StageCompleteness%>%; display: flex; flex:none"></div>
</div>
<% if(data1.StageCompleteness == 100) { %>
<span class="progress-count"><%= data1.StageCompleteness %>%</span>
<% } else if(!data1.StageCompleteness) { %>
<span class="progress-count"> 0%</span>
<% } else { %>
<span class="progress-count"> <%= data1.StageCompleteness %>%</span>
<% } %>
</td>
<td style="width: 112px;">
<div class="progressDoc">
<%if(data1.StageFile) {%>
<img style="height: 80%; cursor: pointer;" class="scanStageFile" name="files"
path="<%=data1.StageFile%>" src="assets/images/oa/项目进度管理新/文件夹亮.png" alt="">
<div class="second-num"><%= data1.StageFile.split(",").length%></div>
<%}%>
</div>
</td>
<td
style="width: 64px;"
class="modifiable-item change-task-executor"
editType="阶段信息"
executor="<%= data1.StagePrincipal%>"
taskCode="<%= data1.StageNumber%>"
>
<%= data1.StagePrincipal%>
</td>
<td class="time-td">
<div class="timeClass plan-time" time="<%= data1.PlanDateFrom%>"><%= data1.PlanDateFrom%></div>
<input
class="plan-input" style="width: 100px;" timeType="开始时间"
taskCode="<%= data1.StageNumber%>" type="text" editType="阶段信息"
value="<%= data1.PlanDateFrom %>"
></input>
</td>
<td class="time-td">
<% if(data1.PlanDateTo.indexOf("逾期") == -1) { %>
<div class="timeClass end-time" time="<%= data1.PlanDateTo %>"><%= data1.PlanDateTo %></div>
<% } else { %>
<div class="over-time end-time" time="<%= data1.PlanDateTo %>"><%= data1.PlanDateTo %></div>
<% } %>
<input
class="end-input" style="width: 100px;" timeType="结束时间"
taskCode="<%= data1.StageNumber%>" type="text" editType="阶段信息"
value="<%= data1.PlanDateTime %>"></input>
</td>
<td style="width: 104px;">
<div style="display: flex;flex-flow: row nowrap;justify-content: center;">
<img
src="assets/images/oa/ProjectManage/编辑.png"
alt="" code="" style="padding-right: 10px;cursor: pointer;"
title="编辑阶段"
operid="<%= data1.ID%>"
class="editStage" name="edit">
<div class="LineGrey"></div>
<img
src="assets/images/oa/ProjectManage/删除.png"
delType="阶段信息" code="<%= data1.StageNumber%>"
alt="" style="padding-left: 10px;cursor: pointer;"
class="delTask">
</div>
</td>
</tr>
<%for(let j = 0; j < data1.ProjectTwoScheduleModel.length; j++){%>
<%let data2 = data1.ProjectTwoScheduleModel[j] %>
<tr style="<%= !openedTr.includes(String(data2.ID)) ? 'display: none;' : ''%>" class="container<%= i%> tree-node1" name="<%= data1.StageName%>">
<td style="width: 40px;"></td>
<td></td>
<td>
<span class="stageName" taskName="<%= data2.TaskName%>"><%= data2.TaskName%></span>
<input class="taskName" type="text" editType="阶段任务" taskCode="<%= data2.TaskNumber%>" value="<%= data2.TaskName%>"></input>
<%if(data2.idArrs) {%>
<%if(data2.idArrs.split(',').some(val => openedTr.includes(val))){%>
<img
class="Butt" type="close-tree_node2"
TaskLevelOneID="<%= data2.idArrs%>"
name="<%= data2.TaskName%>"
id="sec_container<%= i%>"
src="assets/images/oa/任务工作台/箭头下.png">
</img>
<%} else {%>
<img
class="Butt" type="expand-tree_node2"
TaskLevelOneID="<%= data2.idArrs%>"
name="<%= data2.TaskName%>"
id="sec_container<%= i%>"
src="assets/images/oa/任务工作台/箭头右.png">
</img>
<%}%>
<%}%>
</td>
<td style="width: 200px">
<img src="assets/images/oa/新增.png" style="cursor: pointer;"
code="<%= data2.TaskNumber%>"
stagecode="<%= data1.StageNumber%>"
StageName="<%= data1.StageName%>"
taskleveloneid=""
class="addTwoLevel"
name="addTask"></img>
<span style="font-weight: 300;">点击添加二级任务</span>
</td>
<td style="width: 200px" class="peogressBox">
<div class="ProgressBar bar-inli">
<div class="RunPart"
style="width: <%= data2.TaskCompleteness%>%; display: flex; flex:none"></div>
</div>
<% if(data2.TaskCompleteness == 100) { %>
<span class="progress-count"><%= data2.TaskCompleteness %>%</span>
<% } else if(!data2.TaskCompleteness) { %>
<span class="progress-count"> 0%</span>
<% } else { %>
<span class="progress-count"> <%= data2.TaskCompleteness %>%</span>
<% } %>
</td>
<td style="width: 112px;">
<div class="progressDoc">
<% if(data2.TaskFile) {%>
<img style="height: 80%; cursor: pointer;" class="scanStageFile" name="files"
path="<%=data2.TaskFile%>" src="assets/images/oa/项目进度管理新/文件夹亮.png" alt="">
<div class="second-num"><%=data2.TaskFile.split(",").length%></div>
<%}%>
</div>
</td>
<td
style="width: 64px;"
class="modifiable-item change-task-executor"
editType="阶段任务"
executor="<%= data2.TaskExecutor %>"
taskCode="<%= data2.TaskNumber%>"
><%= data2.TaskExecutor %></td>
<td class="time-td">
<div class="timeClass plan-time" time="<%= data2.PlanDateFrom %>"><%= data2.PlanDateFrom %></div>
<input
class="plan-input" style="width: 100px;" timeType="开始时间"
taskCode="<%= data2.TaskNumber%>" type="text" editType="阶段任务"
value="<%= data2.PlanDateFrom %>"
></input>
</td>
<td class="time-td">
<% if(data2.PlanDateTo.indexOf("逾期") == -1) { %>
<div class="timeClass end-time" time="<%= data2.PlanDateTo %>"><%= data2.PlanDateTo %></div>
<% } else { %>
<div class="over-time end-time" time="<%= data2.PlanDateTo %>"><%= data2.PlanDateTo %></div>
<% } %>
<input
class="end-input" style="width: 100px;"
taskCode="<%= data2.TaskNumber%>" type="text" editType="阶段任务"
value="<%= data2.PlanDateTime %>"
></input>
</td>
<td style="width: 104px;">
<div style="display: flex;flex-flow: row nowrap;justify-content: center;">
<img
src="assets/images/oa/ProjectManage/编辑.png"
alt="" code="" style="padding-right: 10px;cursor: pointer;"
state="一级阶段子任务"
title="编辑"
operid="<%= data2.ID%>"
code="<%= data2.TaskNumber%>"
stagename="<%= data1.StageName%>"
class="editLevel" name="edit">
<div class="LineGrey"></div>
<img src="assets/images/oa/ProjectManage/删除.png"
delType="阶段任务" code="<%= data2.TaskNumber%>" alt=""
style="padding-left: 10px;cursor: pointer;" class="delTask">
</div>
</td>
</tr>
<%for(let k = 0; k < data2.ProjectThreeScheduleModel.length; k++){%>
<%let data3 = data2.ProjectThreeScheduleModel[k] %>
<tr style="<%= !openedTr.includes(String(data3.ID)) ? 'display: none;' : ''%>" class="sec_container<%= i%> tree-node2" name="<%= data2.TaskName%>">
<td style="width: 40px;"></td>
<td></td>
<td></td>
<td style="width: 200px">
<span class="stageName" taskName="<%= data3.TaskName%>"><%= data3.TaskName%></span>
<input class="taskName" editType="阶段任务" type="text" taskCode="<%= data3.TaskNumber%>" value="<%= data3.TaskName%>"></input>
</td>
<td style="width: 200px" class="peogressBox">
<input type="range" class="waterprogress-bar" name="range_speed" min="0" max="100"
style="display:inline; background-size: <%= data3.TaskCompleteness%>%, 100%" value="<%= data3.TaskCompleteness%>"
TaskNumber="<%= data3.TaskNumber%>" step='20'>
<span class="waterprogress_num"><%= data3.TaskCompleteness%>%</span>
</td>
<td style="width: 112px;">
<div class="progressDoc">
<% if(data3.TaskFile) {%>
<img style="height: 80%; cursor: pointer;" class="scanStageFile" name="files"
path="<%=data3.TaskFile%>" src="assets/images/oa/项目进度管理新/文件夹亮.png" alt="">
<div class="second-num"><%= data3.TaskFile.split(",").length%></div>
<%}%>
</div>
</td>
<td
style="width: 64px;"
editType="阶段任务"
class="modifiable-item change-task-executor"
executor="<%= data3.TaskExecutor%>"
taskCode="<%= data3.TaskNumber%>"
><%= data3.TaskExecutor%></td>
<td class="time-td">
<div class="timeClass plan-time" time="<%= data3.PlanDateFrom%>"><%= data3.PlanDateFrom%></div>
<input
class="plan-input" style="width: 100px;" timeType="开始时间"
taskCode="<%= data3.TaskNumber%>" type="text" editType="阶段任务"
value="<%= data3.PlanDateFrom%>"
></input>
</td>
<td class="time-td">
<% if(data3.PlanDateTo.indexOf("逾期") == -1) { %>
<div class="timeClass end-time" time="<%= data3.PlanDateTo %>"><%= data3.PlanDateTo %></div>
<% } else { %>
<div class="over-time end-time" time="<%= data3.PlanDateTo %>"><%= data3.PlanDateTo %></div>
<% } %>
<input
class="end-input" style="width: 100px;" timeType="结束时间"
taskCode="<%= data3.TaskNumber%>" type="text" editType="阶段任务"
value="<%= data3.PlanDateTime %>"></input>
</td>
<td style="width: 104px;">
<div style="display: flex;flex-flow: row nowrap;justify-content: center;">
<img
src="assets/images/oa/ProjectManage/编辑.png"
alt="" code="" style="padding-right: 10px;cursor: pointer;"
state="阶段子任务"
title="编辑"
operid="<%= data3.ID%>"
code="<%= data3.TaskNumber%>"
stagename="<%= data1.StageName%>"
class="editLevel" name="edit">
<div class="LineGrey"></div>
<img
alt=""
title="反馈"
class="AddReport"
src="assets/images/oa/ReportManager/汇报.png"
style="padding-right: 10px;cursor: pointer;padding-left: 10px;"
onMouseOver="this.src='assets/images/oa/ReportManager/汇报1.png'"
onMouseOut="this.src='assets/images/oa/ReportManager/汇报.png'"
desc="<%= data3.TaskDescribe%>"
ProjectProcess="<%= data3.TaskCompleteness || 0%>"
StageTaskName="<%= data3.TaskName%>"
Executor="<%= data3.TaskExecutor%>"
STime="<%= data3.PlanDateFrom%>"
ETime="<%= data3.PlanDateTime%>"
stageName="<%= data3.StageName%>"
operId="<%= data3.ID%>"
Code="<%= data3.TaskNumber%>"
TaskFile="<%= data3.TaskFile%>"
>
<div class="LineGrey"></div>
<img
src="assets/images/oa/ProjectManage/删除.png"
alt="" code="<%= data3.TaskNumber%>" delType="阶段任务"
style="padding-left: 10px;cursor: pointer;" class="delTask">
</div>
</td>
</tr>
<%}%>
<%}%>
<%}%>
</tbody>
</table>
</div>
</div>
- js交互
expandTable: function(e) {
const type = $(e.currentTarget).attr('type')
const id = $(e.currentTarget).attr('id')
const name = $(e.currentTarget).attr('name')
const taskleveloneid = $(e.currentTarget).attr('taskleveloneid')
switch (type) {
case 'expand-tree_node1':
$(e.currentTarget).attr('src','assets/images/oa/任务工作台/箭头下.png')
$(e.currentTarget).attr('type','close-tree_all')
if(taskleveloneid) this.openedTr = Array.from(new Set(this.openedTr.concat([...taskleveloneid.split(',')])))
this.$el.find(`tr.${id}.tree-node1`).show()
break;
case 'close-tree_all':
$(e.currentTarget).attr('src','assets/images/oa/任务工作台/箭头右.png')
$(e.currentTarget).attr('type','expand-tree_node1')
this.openedTr = []
this.$el.find(`tr.${id} td>img#sec_${id}`).attr('src','assets/images/oa/任务工作台/箭头右.png')
this.$el.find(`tr.${id} td>img#sec_${id}`).attr('type','expand-tree_node2')
this.$el.find(`tr.${id}, tr.sec_${id}`).hide()
break;
case 'expand-tree_node2':
$(e.currentTarget).attr('src','assets/images/oa/任务工作台/箭头下.png')
$(e.currentTarget).attr('type','close-tree_node2')
if(taskleveloneid) this.openedTr = Array.from(new Set(this.openedTr.concat([...taskleveloneid.split(',')])))
this.$el.find(`tr.${id}.tree-node2[name="${name}"]`).show()
break;
case 'close-tree_node2':
$(e.currentTarget).attr('src','assets/images/oa/任务工作台/箭头右.png')
$(e.currentTarget).attr('type','expand-tree_node2')
this.openedTr = this.openedTr.filter(val => !taskleveloneid.split(',').includes(val))
this.$el.find(`tr.${id}.tree-node2[name="${name}"]`).hide()
break;
default:
break;
}
},
1500
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
