专业能力证书查询

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

@@ -32,16 +32,50 @@
           </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 z01" :src="data.backurl" />
+            <div class="con z10" style="width: 64px; height: 83px;overflow: hidden;text-indent: 0;padding-right: 0;top: 133px;left: 182px;">
+              <img :src="data.headurl" style="height:100%;position: absolute;left: 50%;transform: translate(-50%, -50%);top: 50%;" />
+            </div>
+            <div class="foot-p z10">
+              <p class="foot-p-name " >{{data.uesrName}}</p>
+              <p class="foot-p-ID ">{{data.userId}}</p>
+              <p class="foot-p-cert ">{{data.certId}}</p>
+              <p class="foot-p-date ">{{data.issueDate}}</p>
+            </div>
+            <div class="content z10" style="position: absolute;left: 450px;width: 230px;top: 85px;font-size: 19px;line-height: 30px;text-indent: 2em;">
+              <p style="margin:0">
+                持证人参加了<span class="heiti" style="margin: 0 15px;font-size: 19px;">{{data.certName}}</span>，已修完教学计划规定的全部课程，合计<span class="heiti" style="margin: 0 15px;font-size: 20px;">{{data.courseHours}}</span>学时。
+              </p>
+              <p style="margin:0">考核合格，准予结业，特发此证。</p>
+            </div>
+          </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 {
@@ -51,6 +85,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:{
@@ -64,14 +129,85 @@ 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)
+                let headimg = this.realUrl(this.data.picture)
+                // 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,6 +217,15 @@ export default {
 };
 </script>
 
-<style>
-
+<style lang="scss" scoped>
+.foot-p{
+  position: absolute;
+  top: 270px;
+  left: 160px;
+  text-align: center;
+  line-height: 42px;
+  p{
+    margin: 0;
+  }
+}
 </style>