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

<template>
  <div class="create-container">
    <div class="create-body" v-loading="loading">
      <div class="title">测评机构认证</div>
      <el-form :model="authentication" :rules="rules" ref="authentication" label-width="12%" class="demo-report">
        <el-form-item prop="agencyPhoto" label="机构logo">
          <el-upload
            class="avatar-uploader"
            action=""
            :show-file-list="false"
            :http-request="uploadFile"
            :before-upload="beforeFileUpload">
            <img v-if="authentication.agencyPhoto" :src="authentication.agencyPhoto" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </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 label="机构名称" prop="evaluationAgencyName">
          <el-input size="small" v-if="isModifyMode" v-model="authentication.evaluationAgencyName"></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.mobile"></el-input>-->
        <!--&lt;!&ndash;<span v-if="!isModifyMode">{{authentication.name}}</span>&ndash;&gt;-->
        <!--</el-form-item>-->
<!--        <el-form-item label="银行卡账户" prop="bankAccount">-->
<!--          <el-input size="small" v-if="isModifyMode" v-model="authentication.bankAccount"></el-input>-->
<!--          &lt;!&ndash;<span v-if="!isModifyMode">{{authentication.bankAccount}}</span>&ndash;&gt;-->
<!--        </el-form-item>-->
        <el-form-item label="地址" prop="address">
          <el-input size="small" v-if="isModifyMode" v-model="authentication.address"></el-input>
          <!--<span v-if="!isModifyMode">{{authentication.address}}</span>-->
        </el-form-item>
        <el-form-item label="测评机构能力" prop="evaluationAgencyAbilityList">
          <el-checkbox-group v-if="isModifyMode" v-model="authentication.evaluationAgencyAbilityList">
            <span v-for="(item,index) in serviceTypes" :key="index">
              <el-checkbox :label="item" name="type">{{item}}&nbsp;&nbsp;&nbsp;&nbsp;</el-checkbox>
            </span>
          </el-checkbox-group>
          <!--<span v-if="!isModifyMode">{{authentication.ability}}</span>-->
        </el-form-item>
        <el-form-item label="测评机构资源" prop="evaluationAgencyResourceList">
          <span v-for="item in authentication.evaluationAgencyResourceList" :key="item.id">
            资源类型：&nbsp;<el-select size="small" v-model="item.type" placeholder="请选择"
                                  style="width: 150px;margin-bottom: 10px"
                                  :value="item.type">
              <el-option
                v-for="item in resourceTypes"
                :key="item"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
            资源名称：&nbsp;<el-input size="small" v-model="item.name" style="width: 150px"></el-input>
            总量：&nbsp;<el-input-number size="small" :min="0" v-model="item.totalNum"></el-input-number>
            可用数量：&nbsp;<el-input-number size="small" :min="0" :max="item.totalNum"
                                        v-model="item.availableNum"></el-input-number>
            <el-button size="small" type="danger" icon="el-icon-delete"
                       @click="removeAgencyResource(item.id)"></el-button>
            <br/>
          </span>
          <el-button type="primary" icon="el-icon-circle-plus" plain size="small" @click="addAgencyResource">添加资源
          </el-button>
          <!--<span v-if="!isModifyMode">{{authentication.resource}}</span>-->
        </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">
          <el-button type="primary" size="small" @click="submitInfo()">提交</el-button>
          <!--<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'
  import {notify} from '@/constants/index'
  import {
    getAllAgencyResourceTypes,
    getAllServiceTypes,
    getCurrentUser,
    getRolesPermissions,
    storageGet,
    storageSave,
    uploadAgencyAuthenticationInfo
  } from '@/js/index'

  export default {
  name: 'AgencyAuthenticationCreate',
  data () {
    return {
      userId: 0,
      user: {},
      loading: false,
      isModifyMode: true,
      resourceTypes: [],
      serviceTypes: [],
      authentication: {
        mobile: '',
        evaluationAgencyName: '',
        bankAccount: '',
        address: '',
        evaluationAgencyAbilityList: [],
        evaluationAgencyResourceList: [],
        photo: [],
        agencyPhoto: '',
      },
      rules: {
        // agencyPhoto: [
        //   {required: true, message: '请输入机构名称', trigger: 'blur'},
        //   { min: 3, max: 50, message: "机构名称长度在 3 到 50 个字符", trigger: "blur" }
        // ],
        evaluationAgencyName: [
          {required: true, message: '请输入机构名称', trigger: 'blur'},
          {min: 3, max: 50, message: '机构名称长度在 3 到 50 个字符', trigger: 'blur'}
        ],
        bankAccount: [
          {required: true, message: '请输入银行卡账户', trigger: 'blur'},
          {min: 16, max: 19, message: '银行卡账户输入有误', trigger: 'blur'},
          {
            validator: (rule, value, callback) => {
              if (!this.checkNumber(value)) {
                callback(new Error('银行卡账户输入有误'))
              } else {
                callback()
              }
            }, trigger: 'blur'
          },
        ],
        address: [
          {required: true, message: '请输入地址', trigger: 'blur'}
        ],
        evaluationAgencyAbilityList: [
          {
            type: 'array',
            required: true,
            message: '请至少选择一种测试类型',
            trigger: 'change'
          }
        ],
        evaluationAgencyResourceList: [
          {
            validator: (rule, value, callback) => {
              var isError = false
              if (value == null || value.length == 0) {
                callback(new Error('机构资源不可为空'))
              } else {
                for (var i = 0; i < value.length; i++) {
                  if (value[i].name == '') {
                    isError = true
                    break
                  }
                }
              }
              if (isError) {
                callback(new Error('资源名称不可为空'))
              } else {
                callback()
              }
            }, trigger: 'blur'
          },
        ],
        agencyPhoto: [
          {
            validator: (rule, value, callback) => {
              if (value == null || value == '') {
                callback(new Error('机构logo不可为空'))
              } else {
                callback()
              }
            }, trigger: 'blur'
          },
        ]

      }
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    //初始化数据
    init () {
      this.setServiceTypes()
      this.setResourceTypes()
      this.setUserInfo()
    },
    //加载数据
    loadData: function () {
    },
    //表单进入可编辑状态，可修改表单，不再使用
    modifyInfo () {
      this.isModifyMode = true
    },
    //提交认证信息
    submitInfo () {
      //this.isModifyMode = false
      this.$refs['authentication'].validate(valid => {
        if (valid) {
          this.showLoading()
          const newAuthentication = {
            userId: this.user.userVO.id,
            evaluationAgencyName: this.authentication.evaluationAgencyName,
            bankAccount: this.authentication.bankAccount,
            address: this.authentication.address,
            evaluationAgencyAbilityList: this.authentication.evaluationAgencyAbilityList,
            evaluationAgencyResourceList: this.authentication.evaluationAgencyResourceList,
            agencyPhoto: this.authentication.agencyPhoto,
          }
          console.log(newAuthentication)
          uploadAgencyAuthenticationInfo(this.user.userVO.id, newAuthentication, this.submitInfoSuccess, this.submitInfoFail)
        } else {
          notify('error', '表单填写错误!')
          return false
        }
      })
    },
    submitInfoSuccess (res) {
      console.log(res)
      getCurrentUser().then(res => {
        storageSave('user', res)
        this.user = res
        this.sendBusMessage()
        //this.rolesPermissions = getRolesPermissions(res.roleList)
        storageSave('rolesPermissions', getRolesPermissions(res.roleList))
        this.hideLoading()
        this.$alert('认证信息提交成功，将于3个工作日内审核完成', '提交成功', {
          confirmButtonText: '确定',
          callback: action => {
            this.$router.push({
              name: 'AgencyAuthentication',
              params: {userId: this.user.userVO.id}
            })
          }
        });
      }).catch((error) => {
        this.hideLoading()
        notify('error', '重新获取用户信息失败：' + error.data)
      })

    },
    submitInfoFail (error) {
      this.hideLoading()
      notify('error', error.data)
    },
    //取消修改表单，表单进入不可编辑状态，不再使用
    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 (file) {
      // 文件大小不能超过10M
      if (file.size > 10 * 1000 * 1000){
        notify('error', '单个文件大小不能超过10M')
        return false;
      }
      let fileName = file.name
      let index = fileName.lastIndexOf('.');
      // 文件不能没有后缀
      if (index <= 0){
        notify('error', '只能上传png/jpg格式的文件')
        return false;
      }
      let fileSuffix = fileName.substr(index)
      // 文件后缀必须是.png或者.jpg
      if (fileSuffix !== '.jpg' && fileSuffix !== '.png') {
        notify('error', '只能上传png/jpg格式的文件')
        return false;
      }
    },
    //上传文件，此处为上传图片
    uploadFile (param) {
      this.showLoading()
      const formData = new FormData()
      let config = {
        //添加请求头
        headers: {'Content-Type': 'multipart/form-data'},
      }
      formData.append('file', param.file)
      Http.upload(Apis.FILE.UPLOAD_IMAGE.replace('{userId}', this.user.userVO.id), formData, config).then((res) => {
        this.hideLoading()
        this.authentication.agencyPhoto = res.data
        console.log(res.data)
        notify('success', '上传成功')
        this.$refs['authentication'].validateField('agencyPhoto');
      }).catch(error => {
        this.hideLoading()
        try {
          if (error.response.status === 413){
            notify('error', '文件过大，请选择小于20M的图片')
          }else if (error.response.status === 500){
            notify('error', '上传文件发生错误，请稍后重试')
          }
        }catch (e) {
          notify('error', error.data)
        }
      })
    },
    //设置测试类型
    setServiceTypes () {
      getAllServiceTypes().then((res) => {
        this.serviceTypes = res
      }).catch((error) => {
        notify('error', '机构能力加载失败')
      })
    },
    //设置机构资源类型
    setResourceTypes () {
      this.resourceTypes = getAllAgencyResourceTypes()
    },
    //添加一项测评机构资源
    addAgencyResource () {
      const tmpResource = {
        id: this.authentication.evaluationAgencyResourceList.length,
        type: this.resourceTypes[0],
        name: '',
        totalNum: 0,
        availableNum: 0,
      }
      this.authentication.evaluationAgencyResourceList.push(tmpResource)
    },
    //删除一项测评机构资源
    removeAgencyResource (id) {
      this.authentication.evaluationAgencyResourceList.splice(id, 1)
      for (var i = 0; i < this.authentication.evaluationAgencyResourceList.length; i++) {
        this.authentication.evaluationAgencyResourceList[i].id = i
      }
    },
    //检测测评机构资源填写是否有效
    checkAgencyResourceVaild () {
      if (this.authentication.evaluationAgencyResourceList.length === 0) {
        return true
      }
      for (var i = 0; i < this.authentication.evaluationAgencyResourceList.length; i++) {
        const item = this.authentication.evaluationAgencyResourceList[i]
        if (item.type === '') {
          notify('error', '资源类型不能为空')
          return false
        }
        if (item.name === '') {
          notify('error', '资源名称不能为空')
          return false
        }
        if (item.totalNum < item.availableNum) {
          notify('error', '资源总数量不能低于可用数量')
          return false
        }
      }
      return true
    },
    //
    setUserInfo () {
      this.user = storageGet('user')
    },
    //
    showLoading () {
      this.loading = true
    },
    hideLoading () {
      this.loading = false
    },
    submitSuccess () {

    },
    sendBusMessage () {
      this.$root.$emit('user', this.user)
    },
    checkNumber (value) {
      return /^\d+$/.test(value)
    },
  },
  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;
  }

  .el-input {
    width: 400px;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    font-size: 28px;
    color: #8c939d;
    width: 176px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar-uploader-icon:hover {
    border-color: #409EFF;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>