vue-apps/com.actionsoft.apps.kms.mobile/pages/borrow-approve.vue

<template>
  <div class="borrow-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="control"
        label="借阅控制"
      />
      <van-field
        v-model="startDate"
        label="开始日期"
      />
      <van-field
        v-model="endDate"
        label="结束日期"
      />
      <van-field
        v-model="remarks"
        type="textarea"
        label="备注"
        :autosize="{ maxHeight: 30, minHeight: 30 }"
      />
    </van-form>
    <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: 'borrow-approve',
    components: {
      vanFieldSelect,
      vanFieldDate
    },
    data () {
      return {
        applyName: '司马懿',
        knwlName: 'AWS访问连接池参数调整',
        knwlPath: '知识目录 > 公司 > 重要文件',
        admin: '张飞',
        control: '有效日期',
        showDate: true,
        startDate: '2020-05-01',
        endDate: '2020-05-30',
        remarks: '申请借阅',
        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'
          }
        ]
      }
    },
    methods: {
      onSubmit (values) {
        console.log('submit', values)
      }
    }
  }
</script>

<style scoped>
  .borrow-approve {
    height: 100%;
    overflow-y: auto;
  }

  .borrow-approve .van-form .van-cell {
    border-bottom: 1px solid #EFEFEF;
    padding: 10px 0;
  }

  .borrow-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;
  }

  .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;
  }

  .borrow-approve .steps {
    position: relative;
    overflow-y: auto;
    padding: 16px 14px 0;
    margin-bottom: 63px;
  }

  .borrow-approve .center {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .borrow-approve .steps .items {
    color: #333;
  }

  /*.borrow-approve .steps .active {
    color: #3CA772;
    background-color: #3CA772;
  }*/
  .borrow-approve .steps .left {
    width: 46px;
    font-size: 14px;
    display: inline-block;
    vertical-align: top;
    text-align: center;
  }

  .borrow-approve .steps .left .head {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid #e0e0e0;
    position: relative;
  }

  .borrow-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%;
  }

  .borrow-approve .steps .left .name {
    line-height: 20px;
    font-size: 12px;
  }

  .borrow-approve .steps .right {
    width: calc(100% - 90px);
    padding: 10px 0 40px 40px;
    position: relative;
    display: inline-block;
  }

  .borrow-approve .steps .title {
    font-size: 14px;
    display: inline-block;
    vertical-align: top;
    min-height: 20px;
    line-height: 20px;
    font-weight: bold;
    width: 100%;
  }

  .borrow-approve .steps .date {
    color: #666;
    line-height: 20px;
  }

  .borrow-approve .steps .items .circle, .borrow-approve .steps .active .circle {
    position: absolute;
    top: 15px;
    left: 11px;
    background-color: #3CA772;
    width: 11px;
    height: 11px;
    border-radius: 50%;
  }

  .borrow-approve .steps .active .circle {
    background-color: #3CA772;
  }

  .borrow-approve .steps .items .line {
    position: absolute;
    top: 25px;
    left: 16px;
    width: 1px;
    height: 100%;
    background: #e0e0e0;
  }
</style>