添加修改个人认证信息和机构认证信息页面

src/components/authen/AgencyAuthentication.vue

@@ -1,10 +1,11 @@
 <template>
   <div class="create-container">
-    <div class="create-body" v-loading="loading">
+    <div class="create-body" v-loading="loading" style="width: 100%">
       <div class="title">测评机构认证</div>
       <el-form :model="authentication" :rules="rules" ref="authentication" label-width="12%" class="demo-report">
         <el-form-item prop="file" label="机构logo">
           <el-upload
+            v-if="isModifyMode"
             class="avatar-uploader"
             action=""
             :show-file-list="false"
@@ -13,15 +14,16 @@
             <img v-if="authentication.photoUrl" :src="authentication.photoUrl" 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>-->
+          <span v-if="!isModifyMode">
+          <el-image
+            style="width: 100px;"
+            :src="authentication.photoUrl"
+            fit="scale-down"></el-image>
+        </span>
         </el-form-item>
         <el-form-item label="机构名称" prop="name">
           <el-input v-if="isModifyMode" v-model="authentication.name"></el-input>
-          <!--<span v-if="!isModifyMode">{{authentication.name}}</span>-->
+          <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>-->
@@ -29,11 +31,11 @@
         <!--</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>-->
+          <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>-->
+          <span v-if="!isModifyMode">{{authentication.address}}</span>
         </el-form-item>
         <el-form-item label="测评机构能力" prop="name">
           <el-checkbox-group v-if="isModifyMode" v-model="authentication.ability">
@@ -41,11 +43,11 @@
               <el-checkbox :label="item" name="type">{{item}}&nbsp;&nbsp;&nbsp;&nbsp;</el-checkbox>
             </span>
           </el-checkbox-group>
-          <!--<span v-if="!isModifyMode">{{authentication.ability}}</span>-->
+          <span v-if="!isModifyMode" v-for="(item,index) in authentication.ability" :key="index"><span class="badge">{{item}}</span></span>
         </el-form-item>
         <el-form-item label="测评机构资源" prop="name">
-          <span v-for="item in authentication.resource" :key="item.id">
-            资源类型：&nbsp;<el-select v-model="item.type" placeholder="请选择" style="width: 150px;margin-bottom: 10px"
+          <span v-if="isModifyMode" v-for="item in authentication.resource" :key="item.id" style="width: 2000px">
+            资源类型：&nbsp;<el-select v-model="item.type" placeholder="请选择" style="width: 15%;margin-bottom: 10px"
                                   :value="item.type">
               <el-option
                 v-for="item in resourceTypes"
@@ -54,24 +56,27 @@
                 :value="item">
               </el-option>
             </el-select>
-            资源名称：&nbsp;<el-input v-model="item.name" style="width: 150px"></el-input>
-            总量：&nbsp;<el-input-number :min="0" v-model="item.totalNum"></el-input-number>
-            可用数量：&nbsp;<el-input-number :min="0" :max="item.totalNum" v-model="item.availableNum"></el-input-number>
+            资源名称：&nbsp;<el-input v-model="item.name" style="width: 15%"></el-input>
+            总量：&nbsp;<el-input-number :min="0" v-model="item.totalNum" style="width: 15%"></el-input-number>
+            可用数量：&nbsp;<el-input-number :min="0" :max="item.totalNum" style="width: 15%"
+                                        v-model="item.availableNum"></el-input-number>
             <el-button 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 v-if="isModifyMode" type="primary" icon="el-icon-circle-plus" plain size="small"
+                     @click="addAgencyResource">添加资源
           </el-button>
-          <!--<span v-if="!isModifyMode">{{authentication.resource}}</span>-->
+          <span v-if="!isModifyMode" v-for="item in authentication.resource" :key="item">
+            资源类型：{{item.type}}；&nbsp;&nbsp;资源名称：{{item.name}}；&nbsp;&nbsp;资源总量：{{item.totalNum}}；&nbsp;&nbsp;可用资源：{{item.availableNum}}<br/>
+          </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">
+          <div class="btn btn-medium btn-info" @click="modifyInfo()">修改</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>-->
+          <div class="btn btn-primary btn-info" @click="updateAuthInfo()">提交</div>
+          <div class="btn btn-primary" @click="cancelModify()">取消</div>
         </el-form-item>
       </el-form>
     </div>
@@ -82,7 +87,14 @@
 import Http from '@/js/http'
 import Apis from '@/js/api'
 import {notify} from '@/constants/index'
-import {getAllAgencyResourceTypes, getAllServiceTypes, storageGet} from '@/js/index'
+import {
+  defaultValue,
+  getAllAgencyResourceTypes,
+  getAllServiceTypes,
+  getCurrentAuthenInfo,
+  storageGet,
+  updateAgencyAuthInfo
+} from '@/js/index'
 
 export default {
   name: 'AgencyAuthentication',
@@ -91,7 +103,7 @@ export default {
       userId: 0,
       user: {},
       loading: false,
-      isModifyMode: true,
+      isModifyMode: false,
       resourceTypes: [],
       serviceTypes: [],
       authentication: {
@@ -102,7 +114,7 @@ export default {
         ability: [],
         resource: [],
         photo: [],
-        photoUrl: '',
+        photoUrl: defaultValue.image,
       },
       rules: {
         // name: [
@@ -136,16 +148,32 @@ export default {
       this.setServiceTypes()
       this.setResourceTypes()
       this.setUserInfo()
+      this.getAuthInfo()
     },
     //加载数据
-    loadData: function () {
+    getAuthInfo () {
+      this.showLoading()
+      getCurrentAuthenInfo().then((res) => {
+        this.authentication.photo = []
+        this.authentication.photoUrl = res.agencyPhoto == null ? defaultValue.image : res.agencyPhoto
+        this.authentication.name = res.evaluationAgencyName == null ? '暂未填写' : res.evaluationAgencyName
+        this.authentication.ability = res.evaluationAgencyAbilityList == null ? [] : res.evaluationAgencyAbilityList
+        this.authentication.resource = res.evaluationAgencyResourceList == null ? [] : res.evaluationAgencyResourceList
+        this.authentication.bankAccount = res.bankAccount == null ? '暂未填写' : res.bankAccount
+        this.authentication.address = res.address == null ? '暂未填写' : res.address
+        this.hideLoading()
+        console.log(this.authentication)
+      }).catch((error) => {
+        this.hideLoading()
+        notify('error', '加载认证信息失败：' + error.data)
+      })
     },
     //表单进入可编辑状态，可修改表单，不再使用
     modifyInfo () {
       this.isModifyMode = true
     },
     //提交认证信息
-    submitInfo () {
+    updateAuthInfo () {
       //this.isModifyMode = false
       this.showLoading()
       const newAuthentication = {
@@ -157,12 +185,14 @@ export default {
         evaluationAgencyResourceList: this.authentication.resource,
         agencyPhoto: this.authentication.photoUrl,
       }
-      console.log(newAuthentication)
-      Http.post(Apis.USER.SUBMIT_AGENCY_AUTHENTICATION_INFO.replace('{userId}', this.user.userVO.id), newAuthentication).then((res) => {
+      //console.log(newAuthentication)
+      updateAgencyAuthInfo(this.user.userVO.id, newAuthentication).then((res) => {
         console.log(res)
         this.hideLoading()
-        notify('success', '认证信息上传成功')
+        this.cancelModify()
+        notify('success', '认证信息修改成功')
       }).catch(error => {
+        this.hideLoading()
         notify('error', error.data)
       })
     },

src/components/authen/AgencyAuthenticationCreate.vue

@@ -0,0 +1,331 @@
+<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="file" label="机构logo">
+          <el-upload
+            class="avatar-uploader"
+            action=""
+            :show-file-list="false"
+            :http-request="uploadFile"
+            :before-upload="beforeFileUpload">
+            <img v-if="authentication.photoUrl" :src="authentication.photoUrl" 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="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.mobile"></el-input>-->
+        <!--&lt;!&ndash;<span v-if="!isModifyMode">{{authentication.name}}</span>&ndash;&gt;-->
+        <!--</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-checkbox-group v-if="isModifyMode" v-model="authentication.ability">
+            <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="name">
+          <span v-for="item in authentication.resource" :key="item.id">
+            资源类型：&nbsp;<el-select 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 v-model="item.name" style="width: 150px"></el-input>
+            总量：&nbsp;<el-input-number :min="0" v-model="item.totalNum"></el-input-number>
+            可用数量：&nbsp;<el-input-number :min="0" :max="item.totalNum" v-model="item.availableNum"></el-input-number>
+            <el-button 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">
+          <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, storageGet} from '@/js/index'
+
+export default {
+  name: 'AgencyAuthenticationCreate',
+  data () {
+    return {
+      userId: 0,
+      user: {},
+      loading: false,
+      isModifyMode: true,
+      resourceTypes: [],
+      serviceTypes: [],
+      authentication: {
+        mobile: '',
+        name: '',
+        bankAccount: '',
+        address: '',
+        ability: [],
+        resource: [],
+        photo: [],
+        photoUrl: '',
+      },
+      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'}
+        // ]
+      }
+    }
+  },
+  mounted () {
+    this.$nextTick(() => {
+      this.init()
+    })
+  },
+  methods: {
+    //初始化数据
+    init () {
+      this.setServiceTypes()
+      this.setResourceTypes()
+      this.setUserInfo()
+    },
+    //加载数据
+    loadData: function () {
+    },
+    //表单进入可编辑状态，可修改表单，不再使用
+    modifyInfo () {
+      this.isModifyMode = true
+    },
+    //提交认证信息
+    submitInfo () {
+      //this.isModifyMode = false
+      this.showLoading()
+      const newAuthentication = {
+        mobile: this.authentication.mobile,
+        evaluationAgencyName: this.authentication.name,
+        bankAccount: this.authentication.bankAccount,
+        address: this.authentication.address,
+        evaluationAgencyAbilityList: this.authentication.ability,
+        evaluationAgencyResourceList: this.authentication.resource,
+        agencyPhoto: this.authentication.photoUrl,
+      }
+      console.log(newAuthentication)
+      Http.post(Apis.USER.SUBMIT_AGENCY_AUTHENTICATION_INFO.replace('{userId}', this.user.userVO.id), newAuthentication).then((res) => {
+        console.log(res)
+        this.hideLoading()
+        notify('success', '认证信息上传成功')
+      }).catch(error => {
+        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 () {
+    },
+    //上传文件，此处为上传图片
+    uploadFile (param) {
+      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) => {
+        console.log('上传成功')
+        this.authentication.photoUrl = res.data
+        console.log(res.data)
+        notify('success', '上传成功')
+      }).catch(error => {
+        notify('error', error.data.msg)
+      })
+    },
+    //设置服务类型
+    setServiceTypes () {
+      getAllServiceTypes().then((res) => {
+        this.serviceTypes = res
+      }).catch((error) => {
+        notify('error', '机构能力加载失败')
+      })
+    },
+    //设置机构资源类型
+    setResourceTypes () {
+      this.resourceTypes = getAllAgencyResourceTypes()
+    },
+    //添加一项测评机构资源
+    addAgencyResource () {
+      const tmpResource = {
+        id: this.authentication.resource.length,
+        type: this.resourceTypes[0],
+        name: '',
+        totalNum: 0,
+        availableNum: 0,
+      }
+      this.authentication.resource.push(tmpResource)
+    },
+    //删除一项测评机构资源
+    removeAgencyResource (id) {
+      this.authentication.resource.splice(id, 1)
+      for (var i = 0; i < this.authentication.resource.length; i++) {
+        this.authentication.resource[i].id = i
+      }
+    },
+    //检测测评机构资源填写是否有效
+    checkAgencyResourceVaild () {
+      if (this.authentication.resource.length === 0) {
+        return true
+      }
+      for (var i = 0; i < this.authentication.resource.length; i++) {
+        const item = this.authentication.resource[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 () {
+
+    }
+  },
+  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>

src/components/authen/AuthenticationIndex.vue

@@ -48,19 +48,19 @@ export default {
     },
     toIndividualAuthentication () {
       this.$router.push({
-        name: 'IndividualAuthentication',
+        name: 'IndividualAuthenticationCreate',
         // params: {projectId: projectId, taskId: taskId}
       })
     },
     toEnterpriseAuthentication () {
       this.$router.push({
-        name: 'EnterpriseAuthentication',
+        name: 'EnterpriseAuthenticationCreate',
         // params: {projectId: projectId, taskId: taskId}
       })
     },
     toAgencyAuthentication () {
       this.$router.push({
-        name: 'AgencyAuthentication',
+        name: 'AgencyAuthenticationCreate',
         // params: {projectId: projectId, taskId: taskId}
       })
     }

src/components/authen/EnterpriseAuthenticationCreate.vue

@@ -0,0 +1,235 @@
+<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.enterpriseName"></el-input>
+          <!--<span v-if="!isModifyMode">{{authentication.name}}</span>-->
+        </el-form-item>
+        <el-form-item label="公司营业执照" prop="file">
+          <el-upload
+            class="avatar-uploader"
+            action="https://jsonplaceholder.typicode.com/posts/"
+            :show-file-list="false"
+            :http-request="uploadFile"
+            :before-upload="beforeFileUpload">
+            <img v-if="authentication.businessLicense" :src="authentication.businessLicense" 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="name">
+          <el-input v-if="isModifyMode" v-model="authentication.enterpriseBossName"></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.name}}</span>-->
+        </el-form-item>
+        <el-form-item label="统一社会信用代码" prop="name">
+          <el-input v-if="isModifyMode" v-model="authentication.USCC"></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.enterpriseAddress"></el-input>
+          <!--<span v-if="!isModifyMode">{{authentication.address}}</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">
+          <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 {storageGet} from '@/js/index'
+
+export default {
+  name: 'EnterpriseAuthenticationCreate',
+  data () {
+    return {
+      userId: 0,
+      user: {},
+      isModifyMode: true,
+      authentication: {
+        enterpriseName: '',
+        enterpriseBossName: '',
+        bankAccount:'',
+        businessLicense: '',
+        USCC: '',
+        enterpriseAddress: ''
+      },
+      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'}
+        // ]
+      }
+    }
+  },
+  mounted () {
+    this.$nextTick(() => {
+      this.init()
+    })
+  },
+  methods: {
+    //初始化数据
+    init () {
+      this.setUserInfo()
+    },
+    //加载数据
+    loadData: function () {
+    },
+    //表单进入可编辑状态，可修改表单，不再使用
+    modifyInfo () {
+      this.isModifyMode = true
+    },
+    //提交认证信息
+    submitInfo () {
+      //this.isModifyMode = false
+      const newAuthentication = {
+        mobile: this.authentication.mobile,
+        evaluationAgencyName: this.authentication.name,
+        bankAccount: this.authentication.bankAccount,
+        address: this.authentication.address,
+        abilities: this.authentication.ability,
+        resources: this.authentication.resource,
+        agencyPhoto: this.authentication.photoUrl,
+      }
+      Http.post(Apis.USER.SUBMIT_ENTERPRISE_AUTHENTICATION_INFO.replace('{userId}', this.user.userVO.id), newAuthentication).then((res) => {
+        console.log(res)
+        notify('success', '认证信息上传成功')
+      }).catch(error => {
+        notify('error', error.data.msg)
+      })
+    },
+    //取消修改表单，表单进入不可编辑状态，不再使用
+    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 () {
+    },
+    //上传文件，此处为上传图片
+    uploadFile (param) {
+      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) => {
+        console.log('上传成功')
+        this.authentication.photoUrl = res.data
+        console.log(res.data)
+        notify('success', '上传成功')
+      }).catch(error => {
+        notify('error', error.data.msg)
+      })
+    },
+    //
+    setUserInfo () {
+      this.user = storageGet('user')
+    },
+    //测试用函数
+    test () {
+
+    },
+  },
+}
+</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>

src/components/authen/IndividualAuthentication.vue

@@ -1,14 +1,15 @@
 <template>
-  <div class="create-container">
+  <div class="create-container" v-loading="loading">
     <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>-->
+          <span v-if="!isModifyMode">{{authentication.name}}</span>
         </el-form-item>
         <el-form-item prop="file" label="手持身份证照片">
           <el-upload
+            v-if="isModifyMode"
             class="avatar-uploader"
             action=""
             :show-file-list="false"
@@ -17,33 +18,33 @@
             <img v-if="authentication.photoUrl" :src="authentication.photoUrl" 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>-->
+          <span v-if="!isModifyMode">
+          <el-image
+            style="width: 100px;"
+            :src="authentication.photoUrl"
+            fit="scale-down"></el-image>
+        </span>
         </el-form-item>
         <el-form-item label="身份证号" prop="name">
           <el-input v-if="isModifyMode" v-model="authentication.idNumber"></el-input>
-          <!--<span v-if="!isModifyMode">{{authentication.name}}</span>-->
+          <span v-if="!isModifyMode">{{authentication.idNumber}}</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>-->
+          <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>-->
+          <span v-if="!isModifyMode">{{authentication.address}}</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">
+          <div class="btn btn-medium btn-info" @click="modifyInfo()">修改</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>-->
+          <div class="btn btn-primary btn-info" @click="updateAuthInfo()">提交</div>
+          <div class="btn btn-primary" @click="cancelModify()">取消</div>
         </el-form-item>
       </el-form>
     </div>
@@ -55,11 +56,14 @@ import Http from '@/js/http'
 import Apis from '@/js/api'
 import {notify} from '@/constants/index'
 import {
+  defaultValue,
   getAllAgencyResourceTypes,
   getAllServiceTypes,
+  getCurrentAuthenInfo,
   getProvinceCodeByProvinceName,
   getProvinceNameByProvinceCode,
   storageGet,
+  updateIndividualAuthInfo,
 } from '@/js/index'
 
 export default {
@@ -68,10 +72,11 @@ export default {
     return {
       userId: 0,
       user: {},
-      isModifyMode: true,
+      loading: false,
+      isModifyMode: false,
       authentication: {
         photo: [],
-        photoUrl: '',
+        photoUrl: defaultValue.image,
         name: '',
         idNumber: '',
         bankAccount: '',
@@ -103,34 +108,57 @@ export default {
       this.init()
     })
   },
+  watch: {
+    authentication (val) {
+      this.authentication = val
+    },
+    deep: true
+  },
   methods: {
     //初始化数据
     init () {
       this.setUserInfo()
+      this.getAuthInfo()
     },
     //加载数据
-    loadData: function () {
+    getAuthInfo () {
+      this.showLoading()
+      getCurrentAuthenInfo().then((res) => {
+        this.authentication.photo = []
+        this.authentication.photoUrl = res.IDCardPhoto == null ? defaultValue.image : res.IDCardPhoto
+        this.authentication.name = res.realName == null ? '暂未填写' : res.realName
+        this.authentication.idNumber = res.IDCard == null ? '暂未填写' : res.IDCard
+        this.authentication.bankAccount = res.bankAccount == null ? '暂未填写' : res.bankAccount
+        this.authentication.address = res.address == null ? '暂未填写' : res.address
+        this.hideLoading()
+        console.log(this.authentication)
+      }).catch((error) => {
+        this.hideLoading()
+        notify('error', '加载认证信息失败：' + error.data)
+      })
     },
-    //表单进入可编辑状态，可修改表单，不再使用
+    //表单进入可编辑状态，可修改表单
     modifyInfo () {
       this.isModifyMode = true
     },
     //提交认证信息
-    submitInfo () {
+    updateAuthInfo() {
       //this.isModifyMode = false
+      this.showLoading()
       const newAuthentication = {
-        mobile: this.authentication.mobile,
-        evaluationAgencyName: this.authentication.name,
+        realName: this.authentication.name,
         bankAccount: this.authentication.bankAccount,
         address: this.authentication.address,
-        abilities: this.authentication.ability,
-        resources: this.authentication.resource,
-        agencyPhoto: this.authentication.photoUrl,
+        IDCardPhoto: this.authentication.photoUrl,
+        IDCard: this.authentication.idNumber,
       }
-      Http.post(Apis.USER.SUBMIT_INDIVIDUAL_AUTHENTICATION_INFO.replace('{userId}', this.user.userVO.id), newAuthentication).then((res) => {
-        console.log(res)
-        notify('success', '认证信息上传成功')
+      updateIndividualAuthInfo(this.user.userVO.id, newAuthentication).then((res) => {
+        //console.log(res)
+        this.hideLoading()
+        this.cancelModify()
+        notify('success', '认证信息修改成功')
       }).catch(error => {
+        this.hideLoading()
         notify('error', error.data.msg)
       })
     },
@@ -177,6 +205,13 @@ export default {
     //
     setUserInfo () {
       this.user = storageGet('user')
+    },
+    //
+    showLoading () {
+      this.loading = true
+    },
+    hideLoading () {
+      this.loading = false
     }
   },
   created: function () {

src/components/authen/IndividualAuthenticationCreate.vue

@@ -0,0 +1,237 @@
+<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 prop="file" label="手持身份证照片">
+          <el-upload
+            class="avatar-uploader"
+            action=""
+            :show-file-list="false"
+            :http-request="uploadFile"
+            :before-upload="beforeFileUpload">
+            <img v-if="authentication.photoUrl" :src="authentication.photoUrl" 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="name">
+          <el-input v-if="isModifyMode" v-model="authentication.idNumber"></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 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'
+import {notify} from '@/constants/index'
+import {
+  getAllAgencyResourceTypes,
+  getAllServiceTypes,
+  getProvinceCodeByProvinceName,
+  getProvinceNameByProvinceCode,
+  storageGet,
+} from '@/js/index'
+
+export default {
+  name: 'IndividualAuthenticationCreate',
+  data () {
+    return {
+      userId: 0,
+      user: {},
+      isModifyMode: true,
+      authentication: {
+        photo: [],
+        photoUrl: '',
+        name: '',
+        idNumber: '',
+        bankAccount: '',
+        address: '',
+      },
+      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'}
+        // ]
+      }
+    }
+  },
+  mounted () {
+    this.$nextTick(() => {
+      this.init()
+    })
+  },
+  methods: {
+    //初始化数据
+    init () {
+      this.setUserInfo()
+    },
+    //加载数据
+    loadData: function () {
+    },
+    //表单进入可编辑状态，可修改表单，不再使用
+    modifyInfo () {
+      this.isModifyMode = true
+    },
+    //提交认证信息
+    submitInfo () {
+      //this.isModifyMode = false
+      const newAuthentication = {
+        mobile: this.authentication.mobile,
+        evaluationAgencyName: this.authentication.name,
+        bankAccount: this.authentication.bankAccount,
+        address: this.authentication.address,
+        abilities: this.authentication.ability,
+        resources: this.authentication.resource,
+        agencyPhoto: this.authentication.photoUrl,
+      }
+      Http.post(Apis.USER.SUBMIT_INDIVIDUAL_AUTHENTICATION_INFO.replace('{userId}', this.user.userVO.id), newAuthentication).then((res) => {
+        console.log(res)
+        notify('success', '认证信息上传成功')
+      }).catch(error => {
+        notify('error', error.data.msg)
+      })
+    },
+    //取消修改表单，表单进入不可编辑状态，不再使用
+    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 () {
+    },
+    //上传文件，此处为上传图片
+    uploadFile (param) {
+      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) => {
+        console.log('上传成功')
+        this.authentication.photoUrl = res.data
+        console.log(res.data)
+        notify('success', '上传成功')
+      }).catch(error => {
+        notify('error', error.data.msg)
+      })
+    },
+    //
+    setUserInfo () {
+      this.user = storageGet('user')
+    }
+  },
+  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>

src/components/cheat/AgencyAdd.vue

@@ -45,7 +45,7 @@
         </el-form-item>
         <el-form-item label="测评机构资源" prop="resource">
           <span v-for="item in agency.evaluationAgencyResourceList" :key="item.id">
-            资源类型：&nbsp;<el-select v-model="item.type" placeholder="请选择" style="width: 150px;margin-bottom: 10px"
+            资源类型：&nbsp;<el-select v-model="item.type" placeholder="请选择" style="width: 15%;margin-bottom: 10px"
                                   :value="item.type">
               <el-option
                 v-for="item in resourceTypes"
@@ -54,7 +54,7 @@
                 :value="item">
               </el-option>
             </el-select>
-            资源名称：&nbsp;<el-input v-model="item.name" style="width: 150px"></el-input>
+            资源名称：&nbsp;<el-input v-model="item.name" style="width: 15%"></el-input>
             总量：&nbsp;<el-input-number :min="0" v-model="item.totalNum"></el-input-number>
             可用数量：&nbsp;<el-input-number :min="0" :max="item.totalNum" v-model="item.availableNum"></el-input-number>
             <el-button type="danger" icon="el-icon-delete" @click="removeAgencyResource(item.id)"></el-button>

src/components/commons/Header.vue

@@ -484,16 +484,25 @@ export default {
       if (this.authInfo.type == '个人') {
         this.$router.push({
           name: 'IndividualAuthentication',
+          params: {
+            userId: this.authInfo.userId
+          }
         })
       }
       if (this.authInfo.type == '企业') {
         this.$router.push({
           name: 'EnterpriseAuthentication',
+          params: {
+            userId: this.authInfo.userId
+          }
         })
       }
       if (this.authInfo.type == '机构') {
         this.$router.push({
           name: 'AgencyAuthentication',
+          params: {
+            userId: this.authInfo.userId
+          }
         })
       }
     }

src/js/api.js

@@ -45,7 +45,10 @@ export default {
     LOGOUT: '/api/common/logout',
     SUBMIT_INDIVIDUAL_AUTHENTICATION_INFO: '/api/user/{userId}/individual/',
     SUBMIT_ENTERPRISE_AUTHENTICATION_INFO: '/api/user/{userId}/enterprise/',
-    SUBMIT_AGENCY_AUTHENTICATION_INFO: '/api/user/{userId}/agency/'
+    SUBMIT_AGENCY_AUTHENTICATION_INFO: '/api/user/{userId}/agency/',
+    UPDATE_INDIVIDUAL_AUTHENTICATION_INFO: '/api/user/{userId}/individual/',
+    UPDATE_ENTERPRISE_AUTHENTICATION_INFO: '/api/user/{userId}/enterprise/',
+    UPDATE_AGENCY_AUTHENTICATION_INFO: '/api/user/{userId}/agency/',
   },
   PAGE: {
     HOME_PAGE: '/api/common/index/',

src/js/index.js

@@ -372,8 +372,8 @@ export const getCurrentAuthenInfo = () => {
     createTime: '2019.13.12',
     //个人
     realName: '李白',
-    IDCard: '',
-    IDCardPhoto: '',
+    IDCard: '32092111111111',
+    IDCardPhoto: 'http://www.mooctest.net/assets/img/mooctest.png',
   }
   const enterpriseData = {
     type: '企业',//企业、机构、个人
@@ -397,19 +397,34 @@ export const getCurrentAuthenInfo = () => {
     //共有
     id: 1,
     userId: 3,
-    bankAccount: '',
-    address: '',
+    bankAccount: '100000000086',
+    address: '江苏科技大厦1901',
     status: '',
-    rejectReason: '',
+    rejectReason: '123123123',
     createTime: '',
     //机构
-    evaluationAgencyName: '',
-    evaluationAgencyAbilityList: [],
-    evaluationAgencyResourceList: [],
-    agencyPhoto: '',
+    evaluationAgencyName: '慕测科技',
+    evaluationAgencyAbilityList: ['接口测试', '安全漏洞扫描', '风险评估服务', '源代码安全审计服务', '功能测试服务', '性能测试', '功能和易用性测试'],
+    evaluationAgencyResourceList: [
+      {
+        id: 0,
+        type: '人力资源',
+        name: '专家',
+        totalNum: 100,
+        availableNum: 3,
+      },
+      {
+        id: 1,
+        type: '人力资源',
+        name: '程序员',
+        totalNum: 100,
+        availableNum: 3,
+      }
+    ],
+    agencyPhoto: 'http://www.mooctest.net/assets/img/mooctest.png',
   }
   return new Promise((resolve) => {
-    resolve(individualData)
+    resolve(agencyData)
   })
 }
 //放弃认证
@@ -420,3 +435,25 @@ export const deleteAuthInfo = () => {
   })
   //return Http.get(Apis.GENERAL.GET_ALL_ABILITIES)
 }
+//
+export const updateIndividualAuthInfo = (userId, authInfo) => {
+  // const data = {}
+  // return new Promise((resolve) => {
+  //   resolve(data)
+  // })
+  return Http.put(Apis.USER.UPDATE_INDIVIDUAL_AUTHENTICATION_INFO.replace('{userId}', userId), authInfo)
+}
+export const updateAgencyAuthInfo = (userId, authInfo) => {
+  // const data = {}
+  // return new Promise((resolve) => {
+  //   resolve(data)
+  // })
+  return Http.put(Apis.USER.UPDATE_AGENCY_AUTHENTICATION_INFO.replace('{userId}', userId), authInfo)
+}
+export const updateEnterpriseAuthInfo = (userId, authInfo) => {
+  // const data = {}
+  // return new Promise((resolve) => {
+  //   resolve(data)
+  // })
+  return Http.put(Apis.USER.UPDATE_ENTERPRISE_AUTHENTICATION_INFO.replace('{userId}', userId), authInfo)
+}

src/main.js

@@ -27,6 +27,7 @@ import {
   DropdownMenu,
   Form,
   FormItem,
+  Image,
   Input,
   InputNumber,
   Link,
@@ -160,6 +161,7 @@ Vue.use(Tooltip)
 Vue.use(Dropdown)
 Vue.use(DropdownItem)
 Vue.use(DropdownMenu)
+Vue.use(Image)
 
 Vue.prototype.$msgbox = MessageBox
 Vue.prototype.$alert = MessageBox.alert

src/router/index.js

@@ -147,7 +147,34 @@ export default new Router({
       },
     },
     {
-      path: '/authentication/individual',
+      path: '/authentication/individual/create',
+      name: 'IndividualAuthenticationCreate',
+      component: resolve => require(['@/components/authen/IndividualAuthenticationCreate.vue'], resolve),
+      meta: {
+        title: '',
+        requireAuth: false,
+      },
+    },
+    {
+      path: '/authentication/enterprise/create',
+      name: 'EnterpriseAuthenticationCreate',
+      component: resolve => require(['@/components/authen/EnterpriseAuthenticationCreate.vue'], resolve),
+      meta: {
+        title: '',
+        requireAuth: false,
+      },
+    },
+    {
+      path: '/authentication/agency/create',
+      name: 'AgencyAuthenticationCreate',
+      component: resolve => require(['@/components/authen/AgencyAuthenticationCreate.vue'], resolve),
+      meta: {
+        title: '',
+        requireAuth: false,
+      },
+    },
+    {
+      path: '/authentication/individual/:userId',
       name: 'IndividualAuthentication',
       component: resolve => require(['@/components/authen/IndividualAuthentication.vue'], resolve),
       meta: {
@@ -156,7 +183,7 @@ export default new Router({
       },
     },
     {
-      path: '/authentication/enterprise',
+      path: '/authentication/enterprise/:userId',
       name: 'EnterpriseAuthentication',
       component: resolve => require(['@/components/authen/EnterpriseAuthentication.vue'], resolve),
       meta: {
@@ -165,7 +192,7 @@ export default new Router({
       },
     },
     {
-      path: '/authentication/agency',
+      path: '/authentication/agency/:userId',
       name: 'AgencyAuthentication',
       component: resolve => require(['@/components/authen/AgencyAuthentication.vue'], resolve),
       meta: {