Commit c6397685 authored by yanzhengyang's avatar yanzhengyang

填报工时页面显示效果修改

parent ff9706a3
......@@ -24,76 +24,83 @@
</el-row>
</div>
<div class="back" >
<div class="cards-container">
<!-- 表单样式 -->
<el-card class="card"
shadow="never"
v-loading="loading"
v-for="(project, index) in personalTimesheetList"
:key="index">
<template #header>
<div class="card-header" >
<p>
<label class="writedate1">{{ project.projectName }}</label>
<lable class="manager">项目经理:{{ project.managerName }}</lable>
<lable class="depart">事业部负责人:{{ project.departmentLeaderName }}</lable>
<label v-if="project.approvalState === 1 " class="state">已通过</label>
<label v-if="project.approvalState === 0 " class="state2">被驳回</label>
<label v-if="project.approvalState === 2 " class="state">待填报</label>
<label v-if="project.approvalState === 3 " class="state">审核中</label>
<label v-show="project.approvalState === 0" class="state2">{{ project.approvalNote }}</label>
</p>
</div>
</template>
<span class="timesheet">工时明细</span>
<label v-if="project.approvalState === 0" class="note">驳回理由:{{ project.approvalNote }}</label>
<!-- 工时明细详情 -->
<div class="timedetile">
<el-row>
<div class="d1"
v-for="day in project.addWorkList"
:key="day.workTime">
<el-row class="d1-1">
<el-col :span="24" class="row-container">
<label class="d1-week1">{{ day.workTime }}</label>
</el-col>
<el-col :span="24" class="row-container">
<label class="d1-date">{{ day.workWeek }}</label>
</el-col>
</el-row>
<el-row class="d1-2">
<el-input class="d1-input"
v-if="project.approvalState === 2 || project.approvalState === 0"
v-model.number="day.hours"
type="number"
min="0"
max="8"
step="0.5"
placeholder="请填入工时"
@input="updateProjectTotalHours(project)">
</el-input>
<!-- 如果项目状态为已提交,只显示工时 -->
<span v-else>{{ day.hours }}</span>
<el-row :gutter="20">
<el-col :span="12"
v-for="(project, index) in personalTimesheetList"
:key="index">
<el-card class="card"
shadow="never"
v-loading="loading">
<template #header>
<div class="card-header" >
<p>
<label class="writedate1">{{ project.projectName }}</label>
<lable class="manager">项目经理:{{ project.managerName }}</lable>
<lable class="depart">事业部负责人:{{ project.departmentLeaderName }}</lable>
</p>
<p>
<label v-if="project.approvalState === 1 " class="state">已通过</label>
<label v-if="project.approvalState === 0 " class="state2">被驳回</label>
<label v-if="project.approvalState === 2 " class="state">待填报</label>
<label v-if="project.approvalState === 3 " class="state">审核中</label>
<label v-show="project.approvalState === 0" class="state2">{{ project.approvalNote }}</label>
</p>
</div>
</template>
<span class="timesheet">工时明细</span>
<label v-if="project.approvalState === 0" class="note">驳回理由:{{ project.approvalNote }}</label>
<!-- 工时明细详情 -->
<div class="timedetile">
<el-row>
<div class="d1"
v-for="day in project.addWorkList"
:key="day.workTime">
<el-row class="d1-1">
<el-col :span="24" class="row-container">
<label class="d1-week1">{{ day.workTime }}</label>
</el-col>
<el-col :span="24" class="row-container">
<label class="d1-date">{{ day.workWeek }}</label>
</el-col>
</el-row>
<el-row class="d1-2">
<el-input class="d1-input"
v-if="project.approvalState === 2 || project.approvalState === 0"
v-model.number="day.hours"
type="number"
min="0"
max="8"
step="0.5"
placeholder="请填入工时"
@input="updateProjectTotalHours(project)">
</el-input>
<!-- 如果项目状态为已提交,只显示工时 -->
<span v-else>{{ day.hours }}</span>
</el-row>
</div>
</el-row>
</div>
</el-row>
</div>
<template #footer>
<div class="foot" >
<label class="foot1">项目总工时:</label>
<label class="foot2">{{ project.totalHours }}</label>
<el-button class="button-submit"
type="primary"
plain
:disabled="!(isAllowedDay.value)"
v-show="project.approvalState === 2 || project.approvalState === 0 || isAllowedDay.value"
@click="submit(project)">
<el-icon><Tickets /></el-icon>提交
</el-button>
</div>
</template>
</el-card>
<template #footer>
<div class="foot" >
<div>
<label class="foot1">项目总工时:</label>
<label class="foot2">{{ project.totalHours }}</label>
</div>
<el-button class="button-submit"
type="primary"
plain
:disabled="!(isAllowedDay.value)"
v-show="project.approvalState === 2 || project.approvalState === 0 || isAllowedDay.value"
@click="submit(project)">
<el-icon><Tickets /></el-icon>提交
</el-button>
</div>
</template>
</el-card>
</el-col>
</el-row>
<!-- 提交弹出框-->
<el-dialog class="dia-tip" v-model="dialogSubmit" title="提示" >
......@@ -445,15 +452,19 @@ function handleExport() {
<style scoped>
.card{
min-width: 770px;
width: 770px;
height: 350px;
background: #F9F9FA;
border: 1px solid #E1E1E1;
margin-left: 28px;
margin-right: 43px;
margin-left: 10px;
margin-top: 18px;
}
.card-header{
display: flex;
justify-content: space-between;
}
.writedate1{
margin-left: 28px;
margin-top: 22px;
......@@ -513,6 +524,11 @@ tbody td {
font-size: 18px; /* 单元格内容字号设为18px */
}
.foot{
display: flex;
justify-content: space-between;
}
.foot1{
margin-left: 28px;
margin-top: auto;
......@@ -550,26 +566,21 @@ tbody td {
background: #F2F6FF;
box-shadow: 0 2px 4px 0 #00000021;
border-radius: 2px;
margin-left: 490px;
}
/*审批状态*/
.state{
margin-left: 217px;
font-family: PingFangSC-Regular;
font-weight: 400;
font-size: 18px;
color: #FF9F0D;
letter-spacing: 0;
line-height: 12px;
}
.state2{
margin-left: 217px;
font-family: PingFangSC-Regular;
font-weight: 400;
font-size: 18px;
color: #FF0000;
letter-spacing: 0;
line-height: 12px;
}
.note{
......@@ -635,10 +646,15 @@ tbody td {
display: flex;
flex-wrap: wrap;
overflow-y: auto;
overflow-x: hidden;
height: 780px;
width: 100%;
}
.cards-container::-webkit-scrollbar {
display: none;
}
/*底部*/
.back{
display: flex;
......@@ -763,7 +779,7 @@ th, td {
.d1-1{
display: flex;
width: 143px;
width: 138px;
height: 70px;
margin-left: 6px;
background: #F0F0F0;
......@@ -776,7 +792,7 @@ th, td {
justify-content: center;
align-items: center;
margin-left: 6px;
width: 143px;
width: 138px;
height: 60px;
background: #F9F9FA;
border: 1px solid #DEDEDE;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment