vue-apps/com.actionsoft.apps.kms.mobile/pages/release-apply.vue

<template>
  <div class="apply">
    <van-form>
      <van-field
        class="background"
        v-model="applyName"
        required
        label="申请人"
        placeholder="请输入申请人"
        :rules="[{ required: true, message: '申请人不能为空' }]"
      />
      <van-field
        class="background"
        v-model="knwlName"
        label="知识名称"
        placeholder="请输入知识名称"
      />
      <van-field
        class="background"
        v-model="knwlPath"
        label="知识路径"
        placeholder=""
      />
      <van-field
        class="background"
        v-model="admin"
        label="管理员"
        placeholder=""
      />
      <van-field
        class="border"
        v-model="remarks"
        required
        :autosize="{ maxHeight: 100, minHeight: 100 }"
        type="textarea"
        label="备注"
        placeholder=""
      />
    </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="footer">
      <van-button type="danger">作废</van-button>
      <van-button plain type="info" @click="onSave">保存</van-button>
      <van-button type="info" @click="onHandle">办理</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-apply',
    components: {
      vanFieldSelect,
      vanFieldDate
    },
    data() {
      return {
        applyName: '司马懿',
        knwlName: 'AWS访问连接池参数调整',
        knwlPath: '知识目录 > 公司 > 重要文件',
        admin: '张飞',
        remarks: '',
        list: [
          {
            file: '这里是文件名称',
            icon: '&#xe65a;'
          },
          {
            file: '这里是文件名称',
            icon: '&#xe65a;'
          },
          {
            file: '这里是文件名称',
            icon: '&#xe65a;'
          }
        ],
        approveName: '诸葛亮'
      }
    },
    methods: {
      onSave(values) {
        console.log('submit', values)
      },
      onHandle() {
        this.$toast({
          message: '已发送给【' + this.approveName + '】审批',
          overlay: true,
          onClose: (() => {
            this.$router.push({
              name: 'release-approve'
            })
          })
        })
      }
    },
    watch: {
      control: function () {
        if (this.control === '阅读次数') {
          this.showReadTimes = true
          this.showDate = false
        } else {
          this.showReadTimes = false
          this.showDate = true
        }
      }
    }
  }
</script>

<style scoped>
  .apply {
    height: calc(100% - 64px);
    overflow-y: auto;
  }

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

  .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% / 4 - 12px);
    margin-right: 12px;
    border-radius: 2px;
    padding: 0 !important;
  }

  .footer .van-button:last-child {
    margin-right: 0;
  }
</style>