kubbo/dvcp_v2_wechat_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

28093

Browse Source
This commit is contained in:
changjinpeng
2022-03-08 10:43:23 +08:00
parent cf43abb95b
commit ded932c002
1 changed files with 232 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

432
src/mods/AppMyPlan/progressDetail.vue
View File

@@ -78,60 +78,72 @@
<div class="detail-list" v-if="currIndex == 1"> <div class="detail-list" v-if="currIndex == 1">
<div class="step-item" v-for="(item, index) in stepList" :key="index"> <div class="step-item" v-for="(item, index) in stepList" :key="index">
<div class="line"></div> <div class="line"></div>
<div class="detail-left">
<image class="avatar" v-if="item.stepAvatar && item.userName" :src="item.stepAvatar" /> <div class="step-items">
<span v-if="!item.stepAvatar && item.userName">{{ item.userName.substr(item.userName.length - 2) }}</span> <div class="detail-left">
<image v-if="index !== 0 && item.candidates && item.candidates.length > 1" class="detail-left__statusicon" src="/static/img/notice.png" /> <image class="avatar" v-if="item.stepAvatar && item.userName" :src="item.stepAvatar" />
<image class="avatar" v-if="index !== 0 && item.candidates && item.candidates.length === 1 && item.candidates[0].avatar" :src="item.candidates[0].avatar" /> <span v-if="!item.stepAvatar && item.userName">{{ item.userName.substr(item.userName.length - 2) }}</span>
<span v-if="index !== 0 && item.candidates && item.candidates.length === 1 && !item.candidates[0].avatar">{{ item.candidates[0].name.substr(item.candidates[0].name - 2) }}</span> <image v-if="index !== 0 && item.candidates && item.candidates.length > 1" class="detail-left__statusicon" src="/static/img/notice.png" />
<image class="detail-left__icon" src="/static/img/gou.png" v-if="index === 0 || ['0', '1', '6', '5'].indexOf(item.stepType) > -1" /> <image class="avatar" v-if="index !== 0 && item.candidates && item.candidates.length === 1 && item.candidates[0].avatar" :src="item.candidates[0].avatar" />
<image class="detail-left__icon" src="/static/img/point.png" v-else-if="item.stepType !== '2'" /> <span v-if="index !== 0 && item.candidates && item.candidates.length === 1 && !item.candidates[0].avatar">{{ item.candidates[0].name.substr(item.candidates[0].name - 2) }}</span>
</div> <image class="detail-left__icon" src="/static/img/gou.png" v-if="index === 0 || ['0', '1', '6', '5'].indexOf(item.stepType) > -1" />
<div class="detail-right"> <image class="detail-left__icon" src="/static/img/point.png" v-else-if="item.stepType !== '2'" />
<div class="detail-right__title">
<h2>{{ item.title }}</h2>
<span v-if="item.approvalTime">{{ item.approvalTime }}</span>
</div> </div>
<div class="detail-right__subtitle" v-if="item.stepType === '0'">
<span>{{ item.userName || '-' }}</span> <div class="detail-right">
<i>({{ stepTypeList[item.stepType] }})</i> <div class="detail-right__title">
</div> <h2>{{ item.title }}</h2>
<div class="detail-right__subtitle" v-else-if="item.stepType !== '2'"> <span v-if="item.approvalTime">{{ item.approvalTime }}</span>
<span>{{ item.title2 }}</span> </div>
<i v-if="item.title2Desc" :style="{ color: mapColor(item.stepType) }">{{ item.title2Desc }}</i> <div class="detail-right__subtitle" v-if="item.stepType === '0'">
</div> <span>{{ item.userName || '-' }}</span>
<div class="detail-right__subtitle" v-else-if="item.stepType === '2'"> <i>({{ stepTypeList[item.stepType] }})</i>
<span> </div>
<div class="detail-right__subtitle" v-else-if="item.stepType !== '2'">
<span>{{ item.title2 }}</span> <span>{{ item.title2 }}</span>
<span style="opacity: 1">：</span> <i v-if="item.title2Desc" :style="{ color: mapColor(item.stepType) }">{{ item.title2Desc }}</i>
</span>
<i style="color: #f14242"> {{ item.title2Desc }}</i>
</div>
<div class="detail-right__subtitle" v-if="item.stepType === '2'">
<span>审批意见：</span>
<i style="color: #333">{{ item.opinion || '-' }}</i>
</div>
<div class="detail-right__subtitle detail-right__text" style="display: block" v-if="item.candidateFieldInfos && item.candidateFieldInfos.length" v-for="(candidateField, z) in item.candidateFieldInfos" :key="z">
<span>{{ candidateField.fieldName }}</span>
<i style="color: #343d65; display: contents">{{ candidateField.dictionaryCode ? $dict.getLabel(candidateField.dictionaryCode, candidateField.fieldValue) || '-' : candidateField.fieldValue || '-' }}</i>
</div>
<div class="detail-right__imgs" v-if="item.pictureFiles && item.pictureFiles.length">
<image :src="img.url" mode="aspectFill" v-for="(img, i) in item.pictureFiles" :key="i" @click="previewPic(item.pictureFiles, img.url)" />
</div>
<div class="detail-right__doc" v-if="item.annexFiles && item.annexFiles.length">
<div class="doc-item" v-for="(file, j) in item.annexFiles" :key="j" @click="saveFile(file)">
<h2>{{ file.name }}</h2>
<span>{{ (file.size / 1024).toFixed(2) }}KB</span>
</div> </div>
</div> <div class="detail-right__subtitle" v-else-if="item.stepType === '2'">
<div class="detail-right__userlist" v-if="item.candidates && item.candidates.length"> <span>
<div class="detail-right__userinfo" v-for="(user, z) in item.candidates" :key="z"> <span>{{ item.title2 }}</span>
<image v-if="user.avatar" :src="user.avatar" /> <span style="opacity: 1">：</span>
<span v-else>{{ user.name.substr(user.name.length - 2) }}</span> </span>
<h2>{{ user.name }}</h2> <i style="color: #f14242"> {{ item.title2Desc }}</i>
</div>
<div class="detail-right__subtitle" v-if="item.opinion && item.stepType === '2'" style="padding: 5px 0">
<span>审批意见：</span>
<i style="color: #333">{{ item.opinion }}</i>
</div>
<div class="detail-right__subtitle" v-if="item.stepType != 2 && item.opinion" style="padding: 5px 0">
<i style="color: #333">{{ item.opinion }}</i>
</div>
<div class="detail-right__subtitle detail-right__text" style="display: block" v-if="item.candidateFieldInfos && item.candidateFieldInfos.length" v-for="(candidateField, z) in item.candidateFieldInfos" :key="z">
<span>{{ candidateField.fieldName }}</span>
<i style="color: #343d65; display: contents">{{ candidateField.dictionaryCode ? $dict.getLabel(candidateField.dictionaryCode, candidateField.fieldValue) || '-' : candidateField.fieldValue || '-' }}</i>
</div>
<div class="detail-right__imgs" v-if="item.pictureFiles && item.pictureFiles.length">
<image :src="img.url" mode="aspectFill" v-for="(img, i) in item.pictureFiles" :key="i" @click="previewPic(item.pictureFiles, img.url)" />
</div>
<div class="detail-right__doc" v-if="item.annexFiles && item.annexFiles.length">
<div class="doc-item" v-for="(file, j) in item.annexFiles" :key="j" @click="saveFile(file)">
<h2>{{ file.name }}</h2>
<span>{{ (file.size / 1024).toFixed(2) }}KB</span>
</div>
</div>
<div class="detail-right__userlist" v-if="item.candidates && item.candidates.length">
<div class="detail-right__userinfo" v-for="(user, z) in item.candidates" :key="z">
<image v-if="user.avatar" :src="user.avatar" />
<span v-else>{{ user.name.substr(user.name.length - 2) }}</span>
<h2>{{ user.name }}</h2>
</div>
</div> </div>
</div> </div>
</div> </div>
<!-- <div class="opinions" v-if="item.opinion && item.stepType != 2">{{ item.opinion }}</div> -->
</div> </div>
</div> </div>
</div> </div>
@@ -332,190 +344,210 @@ view {
} }
.step-item { .step-item {
display: flex;
position: relative;
padding-bottom: 88px; padding-bottom: 88px;
position: relative;
.step-items {
display: flex;
&:last-child { &:last-child {
padding-bottom: 0; padding-bottom: 0;
.line { .line {
display: none; display: none;
}
} }
}
.detail-right__doc { .detail-right__doc {
padding-top: 8px; padding-top: 8px;
.doc-item { .doc-item {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
margin-bottom: 16px;
padding: 16px;
background: #f7f7f7;
border-radius: 4px;
border: 1px solid #dddddd;
&:last-child {
margin-bottom: 16px; margin-bottom: 16px;
} padding: 16px;
background: #f7f7f7;
border-radius: 4px;
border: 1px solid #dddddd;
span { &:last-child {
color: #999999; margin-bottom: 16px;
font-size: 24px; }
}
h2 {
max-width: 444px;
line-height: 32px;
color: #333333;
font-size: 24px;
word-break: break-all;
}
}
}
.detail-right {
flex: 1;
.detail-right__title {
display: flex;
justify-content: space-between;
margin-bottom: 6px;
span {
color: #999999;
font-size: 28px;
}
& > h2 {
color: #333333;
font-size: 32px;
font-weight: 600;
}
}
.detail-right__userlist {
margin-top: 16px;
font-size: 0;
.detail-right__userinfo {
display: inline-block;
margin-right: 32px;
margin-bottom: 32px;
text-align: center;
image,
span { span {
display: inline-block; color: #999999;
width: 64px; font-size: 24px;
height: 64px;
line-height: 64px;
border-radius: 50%;
margin-bottom: 8px;
text-align: center;
color: #ffffff;
font-size: 26px;
border-radius: 50%;
background: #2266ff;
} }
h2 { h2 {
overflow: hidden; max-width: 444px;
white-space: nowrap; line-height: 32px;
text-overflow: ellipsis; color: #333333;
color: #666666;
font-size: 24px; font-size: 24px;
word-break: break-all;
} }
} }
} }
.detail-right__subtitle { .detail-right {
display: flex; flex: 1;
margin-bottom: 6px span {
margin-right: 10px; .detail-right__title {
color: #666666; display: flex;
font-size: 28px; justify-content: space-between;
margin-bottom: 6px;
span {
color: #999999;
font-size: 28px;
}
& > h2 {
color: #333333;
font-size: 32px;
font-weight: 600;
}
} }
i { .detail-right__userlist {
flex: 1; margin-top: 16px;
text-align: justify; font-size: 0;
word-break: break-all;
color: #2ea222; .detail-right__userinfo {
font-size: 28px; display: inline-block;
margin-right: 32px;
margin-bottom: 32px;
text-align: center;
image,
span {
display: inline-block;
width: 64px;
height: 64px;
line-height: 64px;
border-radius: 50%;
margin-bottom: 8px;
text-align: center;
color: #ffffff;
font-size: 26px;
border-radius: 50%;
background: #2266ff;
}
h2 {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #666666;
font-size: 24px;
}
}
}
.detail-right__subtitle {
display: flex;
margin-bottom: 6px span {
margin-right: 10px;
color: #666666;
font-size: 28px;
}
i {
flex: 1;
text-align: justify;
word-break: break-all;
color: #2ea222;
font-size: 28px;
}
}
.detail-right__text {
// color: #343D65;
// font-size: 28px;
// margin: 6px 0;
}
.detail-right__imgs {
font-size: 0;
image {
display: inline-block;
width: 136px;
height: 136px;
margin-right: 8px;
margin-bottom: 8px;
margin-top: 8px;
border-radius: 4px;
}
} }
} }
.detail-right__text { .line {
// color: #343D65;
// font-size: 28px;
// margin: 6px 0;
}
.detail-right__imgs {
font-size: 0;
image {
display: inline-block;
width: 136px;
height: 136px;
margin-right: 8px;
margin-bottom: 8px;
margin-top: 8px;
border-radius: 4px;
}
}
}
.line {
position: absolute;
left: 38px;
top: 80px;
width: 4px;
height: 100%;
background: #eeeeee;
}
.detail-left {
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 80px;
height: 80px;
margin-right: 40px;
flex-shrink: 1;
border-radius: 50%;
background: #2266ff;
.detail-left__statusicon {
width: 48px;
height: 48px;
}
.detail-left__icon {
position: absolute; position: absolute;
top: 48px; left: 38px;
right: -4px; top: 80px;
width: 36px; width: 4px;
height: 36px; height: 100%;
background: #eeeeee;
} }
span, .detail-left {
.avatar { display: flex;
display: block; align-items: center;
justify-content: center;
position: relative;
width: 80px; width: 80px;
height: 80px; height: 80px;
line-height: 80px; margin-right: 40px;
color: #fff; flex-shrink: 1;
font-size: 28px;
text-align: center;
border-radius: 50%; border-radius: 50%;
background: #2266ff; background: #2266ff;
.detail-left__statusicon {
width: 48px;
height: 48px;
}
.detail-left__icon {
position: absolute;
top: 48px;
right: -4px;
width: 36px;
height: 36px;
}
span,
.avatar {
display: block;
width: 80px;
height: 80px;
line-height: 80px;
color: #fff;
font-size: 28px;
text-align: center;
border-radius: 50%;
background: #2266ff;
z-index: 999;
}
} }
} }
.line {
position: absolute;
height: 100%;
width: 1px;
left: 40px;
background: #eee;
}
.opinions {
padding-top: 10px;
margin-left: 120px;
line-height: 46px;
}
}
.step-item:last-child {
.line {
background: none;
}
} }
.status { .status {