324 lines
7.2 KiB
Vue
324 lines
7.2 KiB
Vue
<template>
|
|
<div class="approve">
|
|
<van-form @submit="onSubmit" style="padding:0 16px;">
|
|
<van-field
|
|
v-model="applyName"
|
|
label="申请人"
|
|
/>
|
|
<van-field
|
|
v-model="knwlName"
|
|
label="知识名称"
|
|
/>
|
|
<van-field
|
|
v-model="knwlPath"
|
|
label="知识路径"
|
|
/>
|
|
<van-field
|
|
v-model="admin"
|
|
label="管理员"
|
|
/>
|
|
<van-field
|
|
v-model="documentClass"
|
|
label="文档类别"
|
|
/>
|
|
<van-field
|
|
v-model="projectProcess"
|
|
label="项目过程"
|
|
/>
|
|
<van-field
|
|
v-model="tags"
|
|
label="标签"
|
|
/>
|
|
<van-field
|
|
v-model="remarks"
|
|
label="备注"
|
|
/>
|
|
</van-form>
|
|
<div class="divide"></div>
|
|
<ul class="list">
|
|
<li v-for="(item,index) in list" :key="index">
|
|
<div class="icon">
|
|
<i class="awsui-iconfont" v-html="item.icon"></i>
|
|
</div>
|
|
<div class="title">
|
|
{{index+1}}、{{item.file}}
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<div class="divide"></div>
|
|
<div class="steps" :class="recordList.length==1?'center':''">
|
|
<span class="title" style="margin-bottom: 15px;">审批记录</span>
|
|
<div class="items" v-for="(item,index) in recordList" :key="index">
|
|
<span class="left">
|
|
<label class="head">
|
|
<img :src="item.headImg" alt="">
|
|
</label>
|
|
<label class="name">{{item.name}}</label>
|
|
</span>
|
|
<span class="right">
|
|
<label class="title" :style="index==recordList.length-1?'padding:0':''">{{item.title}}</label>
|
|
<label class="date">{{item.date}}</label>
|
|
<label class="circle" :class="{'active':currentActive==index}"></label>
|
|
<label class="line" :style="index==recordList.length-1?'height:30px;':''"></label>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="footer">
|
|
<van-button type="danger">不同意</van-button>
|
|
<van-button type="info">同意</van-button>
|
|
<van-button type="default">更多</van-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import vanFieldSelect from '@/components/fieldSelect'
|
|
import vanFieldDate from '@/components/fieldDate'
|
|
|
|
export default {
|
|
name: 'release-approve',
|
|
components: {
|
|
vanFieldSelect,
|
|
vanFieldDate
|
|
},
|
|
data() {
|
|
return {
|
|
applyName: '司马懿',
|
|
knwlName: 'AWS访问连接池参数调整',
|
|
knwlPath: '知识目录 > 公司 > 重要文件',
|
|
admin: '张飞',
|
|
documentClass: '销售；流程管理方案库；流程管理；项目管理',
|
|
projectProcess:'流程管理方案库；流程管理；项目管理; 流程管理方案库；流程管理；项目管理',
|
|
tags:'这里是标签内容；标签的内容；',
|
|
remarks: '申请发布',
|
|
list: [
|
|
{
|
|
file: '这里是文件名称',
|
|
icon: ''
|
|
},
|
|
{
|
|
file: '这里是文件名称',
|
|
icon: ''
|
|
},
|
|
{
|
|
file: '这里是文件名称',
|
|
icon: ''
|
|
}
|
|
],
|
|
currentActive: 1,
|
|
recordList: [
|
|
{
|
|
headImg: require('../assets/header.png'),
|
|
name: '司马懿',
|
|
title: '发布申请 （提交）',
|
|
date: '2019-12-10 08:22:23'
|
|
},
|
|
{
|
|
headImg: require('../assets/logo.png'),
|
|
name: '司马懿',
|
|
title: '发布审批 （正在办理）',
|
|
date: '2019-12-10 09:32:17'
|
|
},
|
|
{
|
|
headImg: require('../assets/header.png'),
|
|
name: '司马懿',
|
|
title: '发布审批 （办理中）',
|
|
date: '2019-12-10 08:22:23'
|
|
},
|
|
{
|
|
headImg: require('../assets/header.png'),
|
|
name: '司马懿',
|
|
title: '办理成功',
|
|
date: '2019-12-10 08:22:23'
|
|
},
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
onSubmit(values) {
|
|
console.log('submit', values)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.approve {
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.approve .van-form .van-cell {
|
|
border-bottom: 1px solid #EFEFEF;
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.approve .van-form .van-cell:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.footer {
|
|
padding: 12px;
|
|
position: fixed;
|
|
border-top: 0.33px solid #e9e9e9;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: #fff;
|
|
z-index: 1;
|
|
}
|
|
|
|
.footer .van-button {
|
|
height: 38px;
|
|
line-height: 38px;
|
|
width: calc(100% / 3 - 12px);
|
|
margin-right: 12px;
|
|
border-radius: 2px;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.footer .van-button:last-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.approve .steps {
|
|
position: relative;
|
|
overflow-y: auto;
|
|
padding: 16px 14px 0;
|
|
margin-bottom: 63px;
|
|
}
|
|
|
|
.approve .center {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.approve .steps .items {
|
|
color: #333;
|
|
}
|
|
|
|
/*.approve .steps .active {
|
|
color: #3CA772;
|
|
background-color: #3CA772;
|
|
}*/
|
|
.approve .steps .left {
|
|
width: 46px;
|
|
font-size: 14px;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
text-align: center;
|
|
}
|
|
|
|
.approve .steps .left .head {
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: 50%;
|
|
border: 1px solid #e0e0e0;
|
|
position: relative;
|
|
}
|
|
|
|
.approve .steps .left .head img {
|
|
max-width: 70%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background-color: white;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.approve .steps .left .name {
|
|
line-height: 20px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.approve .steps .right {
|
|
width: calc(100% - 90px);
|
|
padding: 10px 0 40px 40px;
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.approve .steps .title {
|
|
font-size: 14px;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
min-height: 20px;
|
|
line-height: 20px;
|
|
font-weight: bold;
|
|
width: 100%;
|
|
}
|
|
|
|
.approve .steps .date {
|
|
color: #666;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.approve .steps .items .circle, .approve .steps .active .circle {
|
|
position: absolute;
|
|
top: 15px;
|
|
left: 11px;
|
|
background-color: #3CA772;
|
|
width: 11px;
|
|
height: 11px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.approve .steps .active .circle {
|
|
background-color: #3CA772;
|
|
}
|
|
|
|
.approve .steps .items .line {
|
|
position: absolute;
|
|
top: 25px;
|
|
left: 16px;
|
|
width: 1px;
|
|
height: 100%;
|
|
background: #e0e0e0;
|
|
}
|
|
.list {
|
|
padding: 7px 12px;
|
|
width: calc(100% - 24px);
|
|
float: left;
|
|
}
|
|
|
|
.list span, .list label {
|
|
display: inline-block;
|
|
}
|
|
|
|
.list li {
|
|
float: left;
|
|
padding: 5px 0;
|
|
width: 100%;
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.list li .icon {
|
|
float: left;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
.list li .icon .awsui-iconfont {
|
|
font-size: 23px;
|
|
color: #FFB800;
|
|
}
|
|
|
|
.list li .title {
|
|
width: calc(100% - 33px);
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
float: left;
|
|
line-height: 20px;
|
|
color: #565656;
|
|
font-size: 14px;
|
|
}
|
|
</style>
|