添加机构页面添加弹窗

src/components/cheat/AgencyAdd.vue

@@ -11,6 +11,10 @@
           <el-input v-if="isModifyMode" v-model="agency.mobile"></el-input>
           <!--<span v-if="!isModifyMode">{{agency.name}}</span>-->
         </el-form-item>
+        <el-form-item label="机构邮箱" prop="name">
+          <el-input v-if="isModifyMode" v-model="agency.email"></el-input>
+          <!--<span v-if="!isModifyMode">{{agency.name}}</span>-->
+        </el-form-item>
         <el-form-item label="银行卡账户" prop="name">
           <el-input v-if="isModifyMode" v-model="agency.bankAccount"></el-input>
           <!--<span v-if="!isModifyMode">{{agency.bankAccount}}</span>-->
@@ -30,24 +34,20 @@
         <el-form-item prop="file" label="头像">
           <el-upload
             v-if="isModifyMode"
-            drag
-            class="upload-demo"
+            class="avatar-uploader"
+            :show-file-list="false"
             action="https://jsonplaceholder.typicode.com/posts/"
-            :on-remove="handleRemove"
-            :before-remove="beforeRemove"
-            multiple
-            :limit="1"
-            :on-exceed="handleExceed"
             :before-upload="beforeFileUpload"
             :http-request="uploadFile"
             :file-list="agency.photo"
           >
-            <i class="el-icon-upload"></i>
-            <div class="el-upload__text">
-              将文件拖到此处，或
-              <em>点击上传</em>
-            </div>
-            <div class="el-upload__tip" slot="tip">请上传报告文件</div>
+            <img v-if="agency.photoUrl" :src="agency.photoUrl" class="avatar">
+            <i v-else class="el-icon-plus avatar-uploader-icon"></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="agency.photo==null">暂无文件</span>-->
@@ -65,6 +65,44 @@
           <!--<div class="btn btn-primary" @click="cancelModify()">取消</div>-->
         </el-form-item>
       </el-form>
+      <el-dialog
+        title="测评机构添加成功"
+        :visible.sync="dialogVisible"
+        width="30%"
+        :before-close="handleDialogClose"
+        center>
+        <span>
+          <el-card class="box-card" shadow="always">
+            <div slot="header" class="clearfix">
+              <span>您添加的机构信息</span>
+            </div>
+            <div class="text item">
+              <ul style="list-style-type:none">
+                <li>机构名称：{{ agency.name }}</li>
+                <li>机构电话：{{ agency.mobile }}</li>
+                <li>银行卡账户：{{ agency.bankAccount }}</li>
+                <li>地址：{{ agency.address }}</li>
+                <li>邮箱：{{ agency.email }}</li>
+              </ul>
+            </div>
+          </el-card>
+          <br/>
+          <el-card class="box-card" shadow="always">
+            <div class="text item">
+              您可以使用以下的账号密码登录系统:
+              <ul style="list-style-type:none">
+                <li>账号：{{ agency.email }}</li>
+                <li>密码：{{ agency.mobile }}</li>
+              </ul>
+              也可以使用手机号{{ agency.mobile }}验证码登录
+            </div>
+          </el-card>
+        </span>
+        <span slot="footer" class="dialog-footer">
+    <el-button @click="handleDialogClose">返 回</el-button>
+    <el-button type="primary" @click="toLogin">去登录</el-button>
+  </span>
+      </el-dialog>
     </div>
   </div>
 </template>
@@ -80,15 +118,19 @@ export default {
     return {
       userId: 0,
       isModifyMode: true,
+      dialogVisible: false,
       agency: {
         mobile: '',
+        email: '',
         name: '',
         bankAccount: '',
         address: '',
         ability: '',
         resource: '',
         photo: [],
-        photoUrl: ''
+        photoUrl: '',
+        password: '',
+        username: '',
       },
       rules: {
         // name: [
@@ -119,23 +161,26 @@ export default {
       this.isModifyMode = true
     },
     submitInfo () {
-      this.$router.push({
-        name: 'AgencyAddSuccess',
+      //this.showDialog()
+      const newAgency = {
+        mobile: this.agency.mobile,
+        evaluationAgencyName: this.agency.name,
+        bankAccount: this.agency.bankAccount,
+        address: this.agency.address,
+        abilities: this.agency.ability,
+        resources: this.agency.resource,
+        agencyPhoto: this.agency.photoUrl,
+        email: this.agency.email
+      }
+      Http.post(Apis.USER.ADD_AGENCY, newAgency).then((res) => {
+        console.log(res)
+        this.agency.password = res.userVO.password
+        this.agency.username = res.userVO.userName
+        this.agency.mobile = res.userVO.mobileNum
+        this.showDialog()
+      }).catch(error => {
+        notify('error', error.data.msg)
       })
-      // const newAgency = {
-      //   mobile: this.agency.mobile,
-      //   evaluationAgencyName: this.agency.name,
-      //   bankAccount: this.agency.bankAccount,
-      //   address: this.agency.address,
-      //   abilities: this.agency.ability,
-      //   resources: this.agency.resource,
-      //   agencyPhoto: this.agency.photoUrl,
-      // }
-      // Http.post(Apis.USER.ADD_AGENCY, newAgency).then((res) => {
-      //   notify('success', '测评机构添加成功')
-      // }).catch(error => {
-      //   notify('error', error.data.msg)
-      // })
     },
     cancelModify () {
       this.isModifyMode = false
@@ -171,6 +216,44 @@ export default {
       }).catch(error => {
         notify('error', error.data.msg)
       })
+    },
+    handleDialogClose (done) {
+      this.$confirm('确认退出？退出前请记录下登录账号和密码，否则无法找回！！！')
+        .then(_ => {
+          //done()
+          this.hideDialog()
+        })
+        .catch(_ => {
+        })
+    },
+    showDialog () {
+      this.dialogVisible = true
+    },
+    hideDialog () {
+      this.dialogVisible = false
+      this.resetForm()
+    },
+    toLogin () {
+      this.hideDialog()
+      this.$router.push({
+        name: 'Home',
+        // params: {projectId: projectId, taskId: taskId}
+      })
+    },
+    resetForm () {
+      this.agency = {
+        mobile: '',
+        email: '',
+        name: '',
+        bankAccount: '',
+        address: '',
+        ability: '',
+        resource: '',
+        photo: [],
+        photoUrl: '',
+        password: '',
+        username: '',
+      }
     }
   },
   created: function () {
@@ -195,4 +278,36 @@ export default {
   .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 {
+    font-size: 28px;
+    color: #8c939d;
+    width: 178px;
+    height: 178px;
+    line-height: 178px;
+    text-align: center;
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .avatar {
+    width: 178px;
+    height: 178px;
+    display: block;
+  }
 </style>

src/main.js

@@ -8,7 +8,7 @@ import './style/main.scss';
 
 
 import {
-  Carousel, CarouselItem, Row, Col, Table, TableColumn, Form, FormItem, Button, ButtonGroup,
+  Carousel,Tag, Card, CarouselItem,Dialog, Row, Col, Table, TableColumn, Form, FormItem, Button, ButtonGroup,
   Menu, Submenu, MenuItem, MenuItemGroup, Input, InputNumber, Radio, RadioGroup, RadioButton,
   Checkbox, CheckboxButton, CheckboxGroup, DatePicker, TimeSelect, TimePicker, Switch, Select,
   Option, Upload, Tabs, TabPane, Collapse, CollapseItem, MessageBox, Message, Notification,
@@ -47,6 +47,9 @@ Vue.use(Tabs);
 Vue.use(TabPane);
 Vue.use(Collapse);
 Vue.use(CollapseItem);
+Vue.use(Dialog)
+Vue.use(Card)
+Vue.use(Tag)
 
 Vue.prototype.$msgbox = MessageBox;
 Vue.prototype.$alert = MessageBox.alert;