fix: 实现pdf文件预览

src/api/modules/operation.ts

@@ -78,7 +78,7 @@ export interface GetUser {
 }
 // 业务员管理相关接口
 const operationApi = (axiosInstance: ApiInstance) => ({
-  addOperation: (data: AddOperation) => axiosInstance.post('/userInfo/add', data), // 新赠
+  addOperation: (data: any) => axiosInstance.post('/userInfo/add', data), // 新赠
   updateOperation: (data: any) => axiosInstance.post('/userInfo/update', data), //编辑
   operationList: (data: OperationSearch) => axiosInstance.post('/userInfo/getUserInfoList', data), // 列表
   operationDelete: (data: {

src/api/modules/role.ts

@@ -12,7 +12,7 @@ const roleApi = (axiosInstance: ApiInstance) => ({
   roleAdd: (data: roleData) => axiosInstance.post('userRole/roleAdd', data, {}),
 
   //角色列表
-  roleList:(data: roleData) => axiosInstance.post('userRole/roleList', data, {}),
+  roleList:(data: any) => axiosInstance.post('userRole/roleList', data, {}),
 
   //查询角色信息
   roleInfo:(params: roleData) => axiosInstance.get('userRole/roleGet', {params}),

src/views/operationManagement/modules/addOperation.vue

@@ -496,9 +496,21 @@
         <el-button type="primary" @click="onSubmit(OperationFormRef, 1)">确定</el-button>
       </div>
     </el-form>
-    <div class="image-view" v-if="imageShow" @click="imageShow = false">
+<!--    <div class="image-view" v-if="imageShow" @click="imageShow = false">
       <img :src="imageUrl" />
-    </div>
+    </div>-->
+    <el-dialog
+      title="图片预览"
+      v-model="imageShow"
+    >
+      <img class="image-view" :src="imageUrl" />
+    </el-dialog>
+    <el-dialog
+      title="文件预览"
+      v-model="fileShow"
+    >
+      <div ref="pdfViewer" class="pdf-container"></div>
+    </el-dialog>
   </div>
 </template>
 
@@ -509,10 +521,13 @@ import type { FormRules, FormInstance } from "element-plus";
 import { Plus } from '@element-plus/icons-vue'
 import api from "@/api";
 import { ElMessage } from "element-plus";
+
 import image from '@/assets/images/image.png'
 import word from '@/assets/images/word.png'
 import pdf from '@/assets/images/pdf.png'
 
+const pdfViewer = ref(null)
+
 interface OperationFormProps extends AddOperation {
   organization: string
   organizationId: string,
@@ -678,6 +693,7 @@ let dimission = ref('')
 // 图片预览地址
 let imageShow = ref(false)
 let imageUrl = ref('')
+let fileShow = ref(false)
 
 // 限制证件日期
 const disabledDateStart = (time: Date) => {
@@ -888,28 +904,70 @@ let recordShow = ref(false)
 
 // 图片预览
 const imageView = (type) => {
-  imageShow.value = true
   switch (type) {
     case 1:
+      imageShow.value = true
       imageUrl.value = IDCardFront.value
       break;
     case 2:
+      imageShow.value = true
       imageUrl.value = IDCardBack.value
       break;
     case 3:
+      imageShow.value = true
       imageUrl.value = certification.value
       break;
     case 4:
       imageUrl.value = contract.value
+      nextTick(() => {
+        // loadPdf(contract.value)
+        if(contract.value.includes('.pdf')) {
+          window.open(contract.value, '_blank')
+        } else if(contract.value.includes('.doc') || contract.value.includes('.docx')) {
+
+        } else if(contract.value.includes('.jpg') || contract.value.includes('.jpeg') || contract.value.includes('.png')) {
+          imageShow.value = true
+        }
+      })
       break;
     case 5:
       imageUrl.value = applicant.value
+      nextTick(() => {
+        // loadPdf(applicant.value)
+        if(applicant.value.includes('.pdf')) {
+          window.open(applicant.value, '_blank')
+        } else if(applicant.value.includes('.doc') || applicant.value.includes('.docx')) {
+
+        } else if(applicant.value.includes('.jpg') || applicant.value.includes('.jpeg') || applicant.value.includes('.png')) {
+          imageShow.value = true
+        }
+      })
       break;
     case 6:
       imageUrl.value = decidePay.value
+      nextTick(() => {
+        // loadPdf(decidePay.value)
+        if(decidePay.value.includes('.pdf')) {
+          window.open(decidePay.value, '_blank')
+        } else if(decidePay.value.includes('.doc') || decidePay.value.includes('.docx')) {
+
+        } else if(decidePay.value.includes('.jpg') || decidePay.value.includes('.jpeg') || decidePay.value.includes('.png')) {
+          imageShow.value = true
+        }
+      })
       break;
     case 7:
       imageUrl.value = dimission.value
+      nextTick(() => {
+        // loadPdf(dimission.value)
+        if(dimission.value.includes('.pdf')) {
+          window.open(dimission.value, '_blank')
+        } else if(dimission.value.includes('.doc') || dimission.value.includes('.docx')) {
+
+        } else if(dimission.value.includes('.jpg') || dimission.value.includes('.jpeg') || dimission.value.includes('.png')) {
+          imageShow.value = true
+        }
+      })
       break;
   }
 }
@@ -1270,6 +1328,7 @@ const institutionList = () => {
   })
 }
 
+
 onMounted(() => {
   initInfo()
   getArea()
@@ -1356,21 +1415,11 @@ defineExpose({
 
 }
 .image-view{
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0,0,0,.6);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 9999;
-  img{
-    width: 800px;
-    height: 800px;
-    border-radius: 5px;
-  }
+  display: block;
+  width: 400px;
+  height: 260px;
+  border-radius: 5px;
+  margin: 0 auto;
 }
 :deep(.el-input__inner[type=number]::-webkit-outer-spin-button) {
   -webkit-appearance: none;

src/views/operationManagement/operation.vue

@@ -676,7 +676,7 @@ onMounted(() => {
 </script>
 
 <style scoped lang="scss">
-@import "@/assets/styles/common/style.scss";
+@use "@/assets/styles/common/style.scss";
 .operation{
   margin: 0 20px;
   background: white;