添加企业认证、机构认证、认证索引页面

src/components/authen/Authentication.vue → src/components/authen/AgencyAuthentication.vue

@@ -98,7 +98,7 @@ import {notify} from '@/constants/index'
 import {getAllAgencyResourceTypes, getAllServiceTypes} from '@/js/index'
 
 export default {
-  name: 'Authentication',
+  name: 'AgencyAuthentication',
   data () {
     return {
       userId: 0,
@@ -168,7 +168,7 @@ export default {
       }
       Http.post(Apis.USER.AGENCY_AUTHENTICATION.replace('{userId}', 3), newAuthentication).then((res) => {
         console.log(res)
-        notify('success', '测评机构成功')
+        notify('success', '认证信息上传成功')
       }).catch(error => {
         notify('error', error.data.msg)
       })

src/components/authen/AuthenticationIndex.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="create-container">
+    <div class="create-body">
+      <div class="title">选择认证类型</div>
+      <el-row style="margin-top: 100px;margin-bottom: 100px">
+        <el-col :span="6" style="margin-right: 100px;margin-left: 80px">
+          <el-card :body-style="{ padding: '0px' }" style="cursor: pointer;">
+            <i class="el-icon-user-solid image" style="color:#909399" @click="toIndividualAuthentication"></i>
+            <div style="text-align: center;font-size: 12px"><span>认证为个人用户，可以创建项目</span></div>
+            <div @click="toIndividualAuthentication" style="padding: 14px;text-align: center;font-size: 20px">
+              <span>个人认证</span>
+            </div>
+          </el-card>
+        </el-col>
+        <el-col :span="6" style="margin-right: 100px">
+          <el-card :body-style="{ padding: '0px' }" style="cursor: pointer;">
+            <i class="el-icon-s-cooperation image" style="color:#909399" @click="toEnterpriseAuthentication"></i>
+            <div style="text-align: center;font-size: 12px"><span>认证为企业用户，可以创建项目</span></div>
+            <div @click="toEnterpriseAuthentication" style="padding: 14px;text-align: center;font-size: 20px">
+              <span>企业认证</span>
+            </div>
+          </el-card>
+        </el-col>
+        <el-col :span="6">
+          <el-card :body-style="{ padding: '0px' }" style="cursor: pointer;">
+            <i class="el-icon-s-tools image" style="color:#909399;" @click="toAgencyAuthentication"></i>
+            <div style="text-align: center;font-size: 12px"><span>认证为测评机构，可以创建项目或接受任务</span></div>
+            <div @click="toAgencyAuthentication" style="padding: 14px;text-align: center;font-size: 20px">
+              <span>机构认证</span>
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
+
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AuthenticationIndex',
+  data () {
+    return {}
+  },
+  methods: {
+    test () {
+      console.log('click')
+    },
+    toIndividualAuthentication () {
+      this.$router.push({
+        name: 'IndividualAuthentication',
+        // params: {projectId: projectId, taskId: taskId}
+      })
+    },
+    toEnterpriseAuthentication () {
+      this.$router.push({
+        name: 'EnterpriseAuthentication',
+        // params: {projectId: projectId, taskId: taskId}
+      })
+    },
+    toAgencyAuthentication () {
+      this.$router.push({
+        name: 'AgencyAuthentication',
+        // params: {projectId: projectId, taskId: taskId}
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .image {
+    font-size: 150px;
+    text-align: center;
+    display: block;
+  }
+</style>

src/components/authen/EnterpriseAuthentication.vue

@@ -0,0 +1,215 @@
+<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"
+            :on-success="test"
+            :before-upload="test">
+            <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.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>
+export default {
+  name: 'EnterpriseAuthentication',
+  data () {
+    return {
+      userId: 0,
+      isModifyMode: true,
+      authentication: {
+        enterpriseName: '',
+        enterpriseBossName: '',
+        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 () {
+    },
+    //加载数据
+    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.AGENCY_AUTHENTICATION.replace('{userId}', 3), 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}', 3), formData, config).then((res) => {
+        console.log('上传成功')
+        this.authentication.photoUrl = res.data
+        console.log(res.data)
+        notify('success', '上传成功')
+      }).catch(error => {
+        notify('error', error.data.msg)
+      })
+    },
+    //测试用函数
+    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

@@ -0,0 +1,205 @@
+<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
+            v-if="isModifyMode"
+            drag
+            class="upload-demo"
+            action="https://jsonplaceholder.typicode.com/posts/"
+            :on-remove="handleRemove"
+            :before-remove="beforeRemove"
+            multiple
+            :limit="1"
+            :show-file-list="false"
+            :on-exceed="handleExceed"
+            :before-upload="beforeFileUpload"
+            :http-request="uploadFile"
+            :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 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} from '@/js/index'
+
+export default {
+  name: 'IndividualAuthentication',
+  data () {
+    return {
+      userId: 0,
+      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 () {
+    },
+    //加载数据
+    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.AGENCY_AUTHENTICATION.replace('{userId}', 3), 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}', 3), formData, config).then((res) => {
+        console.log('上传成功')
+        this.authentication.photoUrl = res.data
+        console.log(res.data)
+        notify('success', '上传成功')
+      }).catch(error => {
+        notify('error', error.data.msg)
+      })
+    },
+  },
+  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;
+  }
+</style>

src/router/index.js

@@ -138,9 +138,36 @@ export default new Router({
       },
     },
     {
-      path: '/authentication',
-      name: 'Authentications',
-      component: resolve => require(['@/components/authen/Authentication.vue'], resolve),
+      path: '/authentication/individual',
+      name: 'IndividualAuthentication',
+      component: resolve => require(['@/components/authen/IndividualAuthentication.vue'], resolve),
+      meta: {
+        title: '',
+        requireAuth: false,
+      },
+    },
+    {
+      path: '/authentication/enterprise',
+      name: 'EnterpriseAuthentication',
+      component: resolve => require(['@/components/authen/EnterpriseAuthentication.vue'], resolve),
+      meta: {
+        title: '',
+        requireAuth: false,
+      },
+    },
+    {
+      path: '/authentication/agency',
+      name: 'AgencyAuthentication',
+      component: resolve => require(['@/components/authen/AgencyAuthentication.vue'], resolve),
+      meta: {
+        title: '',
+        requireAuth: false,
+      },
+    },
+    {
+      path: '/authentication/index',
+      name: 'AuthenticationIndex',
+      component: resolve => require(['@/components/authen/AuthenticationIndex.vue'], resolve),
       meta: {
         title: '',
         requireAuth: false,