vue-apps/com.actionsoft.apps.kms.mobile/pages/release-approve.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: '&#xe65a;'
          },
          {
            file: '这里是文件名称',
            icon: '&#xe65a;'
          },
          {
            file: '这里是文件名称',
            icon: '&#xe65a;'
          }
        ],
        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>