培训证书查询

ruoyi-ui/src/views/certInquire/train/index.vue

@@ -32,15 +32,42 @@
           </div>
           <div class="btn-box">
               <button class="btn-reset">重置</button>
-              <button class="btn-search" @click="handleSearch">查询</button>
+              <button class="btn-search" @click="handleSearch" v-bind:disabled="iconShow">
+                查询<i class="el-icon-loading" v-show="iconShow"></i>
+              </button>
           </div>
       </div>
     </div>
+    <el-dialog
+        title="证书预览和下载"
+        :visible.sync="dialogVisible"
+        width="fit-content"
+        :before-close="handleClose"
+      >
+        <div id="pdfDom" ref="posterWrap">
+          <div class="proBox" >
+            <img class="proBox-img" :src="data.backurl" >
+            <div class="con train-con" >
+              <p>
+                <span class="con-name heiti">{{data.uesrName}}</span>于<span class="train-span heiti">{{data.trainPeriod}}</span>
+                参加了<span class="train-span heiti">{{data.certName}}</span>学习，已修完教学计划规定的全部课程，计<span class="train-span heiti">{{data.courseHours}}</span>学时，经考核成绩合格，准予结业。
+              </p>
+            </div>
+            <span class="foot-cert train-foot-cert">{{data.certId}}</span>
+            <span class="foot-date train-foot-date">{{data.issueDate}}</span>
+          </div>
+        </div>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="handleClose">取 消</el-button>
+          <el-button type="primary" @click="getPdf('#pdfDom')">下载</el-button>
+        </span>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { getCodeImg } from "@/api/login";
+import { getCodeImg,checkCode} from "@/api/login";
+import { getACert } from "@/api/system/grad";
 export default {
   data() {
     return {
@@ -50,6 +77,37 @@ export default {
       codeUrl:"",
       captchaEnabled:true,
       uuid:"",
+      dialogVisible: false,
+      iconShow:false,
+      dist:"cert_b_type",
+      pageData: null, //接收html格式代码
+      htmlTitle: "结业证书",
+      isShow: true,
+      isCanvas: false,
+      downType: false, // false为 pdf , true为图片
+      data:{
+        certId: "11111111",
+        certName: "222",
+        certType: 0,
+        courseHours: "222",
+        courseName: "222",
+        createBy: null,
+        createTime: null,
+        id: 3,
+        issueDate: "2022-11-29",
+        level: "22",
+        picture: "/profile/2022/222_A00.jpg",
+        remark: null,
+        trainPeriod: "222",
+        uesrName: null,
+        updateBy: null,
+        updateDate: "2022-12-13T15:29:56.000+08:00",
+        updateTime: null,
+        url: "/profile/upload/2022/12/13/pro1_page-0001_20221213151348A006.jpg",
+        userEmail:"222222",
+        userId: "2222",
+        userPhone: "222"
+      }
     };
   },
   methods:{
@@ -63,14 +121,84 @@ export default {
         }
       });
     },
-    handleSearch(){
+    // handleSearch(){
+    //     const form = {
+    //         userName: this.userName,
+    //         certNumber: this.certNumber,
+    //         code: this.code,
+    //         uuid: this.uuid
+    //     }
+    //     console.log(form)
+    // }
+    async handleSearch(){
+       this.iconShow = true
+        if( this.isBlock(this.userName)){
+          this.iconShow = false
+          this.$message.error("请输入持证人姓名或单位名称！")
+          return;
+        }
+        if( this.isBlock(this.certNumber)){
+          this.iconShow = false
+          this.$message.error("请输入证书编码！")
+          return;
+        }
+        if( this.isBlock(this.code)){
+          this.iconShow = false
+          this.$message.error("请输入验证码！")
+          return;
+        }
         const form = {
-            userName: this.userName,
-            certNumber: this.certNumber,
-            code: this.code,
-            uuid: this.uuid
+          userName: this.userName,
+          certNumber: this.certNumber,
+        }
+        const codeForm = {
+          code: this.code,
+          uuid: this.uuid
         }
-        console.log(form)
+        try{
+          let codeRes = await checkCode(codeForm)
+          console.log(codeRes)
+          if(codeRes.code===200){
+            try{
+              getACert(form).then(res=>{
+                this.iconShow = false
+                this.data = res.data
+                console.log(this.data)
+                let backimg = this.realUrl(this.data.url)
+                // this.htmlTitle = this.data.name
+                this.data.backurl = backimg
+                // this.data.headurl = headimg
+                this.dialogVisible = true
+              })
+              setTimeout(()=>{
+                if(this.iconShow){
+                  this.iconShow = false
+                }
+              },10000)
+            }catch(error){
+              this.iconShow = false
+              this.getCode()
+            }
+          }
+        }catch(err){
+          this.iconShow = false
+          this.getCode()
+        }
+    },
+    isBlock(str){
+      if(str===""){
+        return true
+      }else {
+        return false
+      }
+    },
+    handleClose(){
+      // console.log("beforeClose")
+      this.getCode()
+      this.dialogVisible = false
+    },
+    realUrl(val){
+      return process.env.VUE_APP_BASE_API + val
     }
 
   },
@@ -81,5 +209,20 @@ export default {
 </script>
 
 <style>
-
+.train-con{
+  top: 125px;
+  bottom: 0;
+  line-height: 40px;
+}
+.train-span{
+  margin: 0 10px;
+}
+.train-foot-cert{
+  left: 200px;
+  bottom: 103px;
+}
+.train-foot-date{
+  left: 200px;
+  bottom: 78px;
+}
 </style>