Merge remote-tracking branch 'origin/dev' into dev
This commit is contained in:
aixianling
@@ -78,60 +78,72 @@
|
||||
<div class="detail-list" v-if="currIndex == 1">
|
||||
<div class="step-item" v-for="(item, index) in stepList" :key="index">
|
||||
<div class="line"></div>
|
||||
<div class="detail-left">
|
||||
<image class="avatar" v-if="item.stepAvatar && item.userName" :src="item.stepAvatar" />
|
||||
<span v-if="!item.stepAvatar && item.userName">{{ item.userName.substr(item.userName.length - 2) }}</span>
|
||||
<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="index !== 0 && item.candidates && item.candidates.length === 1 && item.candidates[0].avatar" :src="item.candidates[0].avatar" />
|
||||
<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 class="detail-left__icon" src="/static/img/gou.png" v-if="index === 0 || ['0', '1', '6', '5'].indexOf(item.stepType) > -1" />
|
||||
<image class="detail-left__icon" src="/static/img/point.png" v-else-if="item.stepType !== '2'" />
|
||||
</div>
|
||||
<div class="detail-right">
|
||||
<div class="detail-right__title">
|
||||
<h2>{{ item.title }}</h2>
|
||||
<span v-if="item.approvalTime">{{ item.approvalTime }}</span>
|
||||
|
||||
<div class="step-items">
|
||||
<div class="detail-left">
|
||||
<image class="avatar" v-if="item.stepAvatar && item.userName" :src="item.stepAvatar" />
|
||||
<span v-if="!item.stepAvatar && item.userName">{{ item.userName.substr(item.userName.length - 2) }}</span>
|
||||
<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="index !== 0 && item.candidates && item.candidates.length === 1 && item.candidates[0].avatar" :src="item.candidates[0].avatar" />
|
||||
<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 class="detail-left__icon" src="/static/img/gou.png" v-if="index === 0 || ['0', '1', '6', '5'].indexOf(item.stepType) > -1" />
|
||||
<image class="detail-left__icon" src="/static/img/point.png" v-else-if="item.stepType !== '2'" />
|
||||
</div>
|
||||
<div class="detail-right__subtitle" v-if="item.stepType === '0'">
|
||||
<span>{{ item.userName || '-' }}</span>
|
||||
<i>({{ stepTypeList[item.stepType] }})</i>
|
||||
</div>
|
||||
<div class="detail-right__subtitle" v-else-if="item.stepType !== '2'">
|
||||
<span>{{ item.title2 }}</span>
|
||||
<i v-if="item.title2Desc" :style="{ color: mapColor(item.stepType) }">{{ item.title2Desc }}</i>
|
||||
</div>
|
||||
<div class="detail-right__subtitle" v-else-if="item.stepType === '2'">
|
||||
<span>
|
||||
|
||||
<div class="detail-right">
|
||||
<div class="detail-right__title">
|
||||
<h2>{{ item.title }}</h2>
|
||||
<span v-if="item.approvalTime">{{ item.approvalTime }}</span>
|
||||
</div>
|
||||
<div class="detail-right__subtitle" v-if="item.stepType === '0'">
|
||||
<span>{{ item.userName || '-' }}</span>
|
||||
<i>({{ stepTypeList[item.stepType] }})</i>
|
||||
</div>
|
||||
<div class="detail-right__subtitle" v-else-if="item.stepType !== '2'">
|
||||
<span>{{ item.title2 }}</span>
|
||||
<span style="opacity: 1">：</span>
|
||||
</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>
|
||||
<i v-if="item.title2Desc" :style="{ color: mapColor(item.stepType) }">{{ item.title2Desc }}</i>
|
||||
</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 class="detail-right__subtitle" v-else-if="item.stepType === '2'">
|
||||
<span>
|
||||
<span>{{ item.title2 }}</span>
|
||||
<span style="opacity: 1">：</span>
|
||||
</span>
|
||||
<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 class="opinions" v-if="item.opinion && item.stepType != 2">{{ item.opinion }}</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -332,190 +344,210 @@ view {
|
||||
}
|
||||
|
||||
.step-item {
|
||||
display: flex;
|
||||
position: relative;
|
||||
padding-bottom: 88px;
|
||||
position: relative;
|
||||
.step-items {
|
||||
display: flex;
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: 0;
|
||||
&:last-child {
|
||||
padding-bottom: 0;
|
||||
|
||||
.line {
|
||||
display: none;
|
||||
.line {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.detail-right__doc {
|
||||
padding-top: 8px;
|
||||
.detail-right__doc {
|
||||
padding-top: 8px;
|
||||
|
||||
.doc-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
padding: 16px;
|
||||
background: #f7f7f7;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #dddddd;
|
||||
|
||||
&:last-child {
|
||||
.doc-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
padding: 16px;
|
||||
background: #f7f7f7;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #dddddd;
|
||||
|
||||
span {
|
||||
color: #999999;
|
||||
font-size: 24px;
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
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 {
|
||||
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;
|
||||
color: #999999;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
color: #666666;
|
||||
max-width: 444px;
|
||||
line-height: 32px;
|
||||
color: #333333;
|
||||
font-size: 24px;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.detail-right__subtitle {
|
||||
display: flex;
|
||||
margin-bottom: 6px span {
|
||||
margin-right: 10px;
|
||||
color: #666666;
|
||||
font-size: 28px;
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
flex: 1;
|
||||
text-align: justify;
|
||||
word-break: break-all;
|
||||
color: #2ea222;
|
||||
font-size: 28px;
|
||||
.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 {
|
||||
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 {
|
||||
// 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 {
|
||||
.line {
|
||||
position: absolute;
|
||||
top: 48px;
|
||||
right: -4px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
left: 38px;
|
||||
top: 80px;
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
background: #eeeeee;
|
||||
}
|
||||
|
||||
span,
|
||||
.avatar {
|
||||
display: block;
|
||||
.detail-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
color: #fff;
|
||||
font-size: 28px;
|
||||
text-align: center;
|
||||
margin-right: 40px;
|
||||
flex-shrink: 1;
|
||||
border-radius: 50%;
|
||||
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 {
|
||||
|
||||
Reference in New Issue
Block a user