crowd-test-service-frontend/src/components/authen/Authentication.vue

<template>
  <div class="create-container">
    <div class="create-body">
      <div class="title">测评机构认证</div>
      <el-form :model="authentication" :rules="rules" ref="authentication" label-width="12%" class="demo-report">
        <el-form-item label="机构名称" prop="name">
          <el-input v-if="isModifyMode" v-model="authentication.name"></el-input>
          <span v-if="!isModifyMode">{{authentication.name}}</span>
        </el-form-item>
        <el-form-item label="银行卡账户" prop="name">
          <el-input v-if="isModifyMode" v-model="authentication.bankAccount"></el-input>
          <span v-if="!isModifyMode">{{authentication.bankAccount}}</span>
        </el-form-item>
        <el-form-item label="地址" prop="name">
          <el-input v-if="isModifyMode" v-model="authentication.address"></el-input>
          <span v-if="!isModifyMode">{{authentication.address}}</span>
        </el-form-item>
        <el-form-item label="测评机构能力" prop="name">
          <el-input v-if="isModifyMode" v-model="authentication.ability"></el-input>
          <span v-if="!isModifyMode">{{authentication.ability}}</span>
        </el-form-item>
        <el-form-item label="测评机构资源" prop="name">
          <el-input v-if="isModifyMode" v-model="authentication.resource"></el-input>
          <span v-if="!isModifyMode">{{authentication.resource}}</span>
        </el-form-item>
        <el-form-item prop="file" label="头像">
          <el-upload
            v-if="isModifyMode"
            drag
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="1"
            :on-exceed="handleExceed"
            :before-upload="beforeFileUpload"
            :file-list="authentication.photo"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或
              <em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">请上传报告文件</div>
          </el-upload>
          <div v-if="!isModifyMode">
            <span v-if="authentication.photo==null">暂无文件</span>
            <a :href="authentication.photo" v-if="authentication.photo!=null"><i class="fa fa-file-text-o"></i>
              {{authentication.photo}}</a>
          </div>
        </el-form-item>

        <el-form-item v-if="!isModifyMode">
          <div class="btn btn-medium btn-info" @click="modifyInfo()">修改</div>
          <div class="btn btn-medium" @click="cancelModify()">返回</div>
        </el-form-item>
        <el-form-item v-if="isModifyMode">
          <div class="btn btn-primary btn-info" @click="submitInfo()">确认修改</div>
          <div class="btn btn-primary" @click="cancelModify()">取消</div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import Http from '../../js/http'
import Apis from '../../js/api'

export default {
  name: 'Authentication',
  data () {
    return {
      userId: 0,
      isModifyMode: true,
      authentication: {
        name: '',
        bankAccount: '',
        address: '',
        ability: '',
        resource: '',
        photo: [],
      },
      rules: {
        // name: [
        //   {required: true, message: '请输入报告名称', trigger: 'blur'}
        //   // { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        // ],
        // abstract: [
        //   {
        //     required: true,
        //     message: '请输入摘要信息',
        //     trigger: 'change'
        //   }
        // ],
        // type: [
        //   {required: true, message: '请选择报告类型', trigger: 'change'}
        // ],
        // conclusion: [
        //   {required: true, message: '请输入报告结论', trigger: 'blur'}
        // ]
      }
    }
  },
  methods: {
    //加载数据
    loadData: function () {
    },
    modifyInfo () {
      this.isModifyMode = true
    },
    submitInfo () {
      this.isModifyMode = false
      Http.post(Apis.USER.AGENCY_AUTHENTICATION,this.authentication).then((res) =>{
        console.log(res)
      })
    },
    cancelModify () {
      this.isModifyMode = false
    },
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handleExceed (files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${
          files.length
          } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      )
    },
    beforeRemove (file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    beforeFileUpload () {
    },
  },
  created: function () {
  }
}
</script>

<style scoped>
  .el-radio {
    margin: 10px 20px 10px 0;
  }

  .el-form-item /deep/ .el-tabs__content {
    max-height: 120px !important;
    overflow: auto;
  }

  .el-row {
    margin-bottom: 10px;
  }
</style>