|
@@ -509,16 +509,19 @@
|
|
|
title="文件预览"
|
|
title="文件预览"
|
|
|
v-model="fileShow"
|
|
v-model="fileShow"
|
|
|
>
|
|
>
|
|
|
- <div ref="pdfViewer" class="pdf-container"></div>
|
|
|
|
|
|
|
+ <vue-office-docx
|
|
|
|
|
+ :src="fileUrl"
|
|
|
|
|
+ style="height: 600px; margin: 0; padding: 0"
|
|
|
|
|
+ ></vue-office-docx>
|
|
|
</el-dialog>
|
|
</el-dialog>
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
<script setup lang="ts">
|
|
|
-import { ref, reactive, defineEmits, onMounted } from 'vue'
|
|
|
|
|
|
|
+import { ref, defineEmits, onMounted } from 'vue'
|
|
|
import type { AddOperation } from '@/api/modules/operation.ts'
|
|
import type { AddOperation } from '@/api/modules/operation.ts'
|
|
|
import type { FormRules, FormInstance } from "element-plus";
|
|
import type { FormRules, FormInstance } from "element-plus";
|
|
|
-import { Plus } from '@element-plus/icons-vue'
|
|
|
|
|
|
|
+import VueOfficeDocx from "@vue-office/docx";
|
|
|
import api from "@/api";
|
|
import api from "@/api";
|
|
|
import { ElMessage } from "element-plus";
|
|
import { ElMessage } from "element-plus";
|
|
|
|
|
|
|
@@ -526,7 +529,7 @@ import image from '@/assets/images/image.png'
|
|
|
import word from '@/assets/images/word.png'
|
|
import word from '@/assets/images/word.png'
|
|
|
import pdf from '@/assets/images/pdf.png'
|
|
import pdf from '@/assets/images/pdf.png'
|
|
|
|
|
|
|
|
-const pdfViewer = ref(null)
|
|
|
|
|
|
|
+const fileViewer = ref(null)
|
|
|
|
|
|
|
|
interface OperationFormProps extends AddOperation {
|
|
interface OperationFormProps extends AddOperation {
|
|
|
organization: string
|
|
organization: string
|
|
@@ -693,8 +696,10 @@ let dimission = ref('')
|
|
|
// 图片预览地址
|
|
// 图片预览地址
|
|
|
let imageShow = ref(false)
|
|
let imageShow = ref(false)
|
|
|
let imageUrl = ref('')
|
|
let imageUrl = ref('')
|
|
|
|
|
+// word
|
|
|
let fileShow = ref(false)
|
|
let fileShow = ref(false)
|
|
|
|
|
|
|
|
|
|
+
|
|
|
// 限制证件日期
|
|
// 限制证件日期
|
|
|
const disabledDateStart = (time: Date) => {
|
|
const disabledDateStart = (time: Date) => {
|
|
|
return time.getTime() > new Date()
|
|
return time.getTime() > new Date()
|
|
@@ -901,6 +906,13 @@ const uploadImage = async (file, type) => {
|
|
|
|
|
|
|
|
// 人事档案
|
|
// 人事档案
|
|
|
let recordShow = ref(false)
|
|
let recordShow = ref(false)
|
|
|
|
|
+let fileUrl = ref('')
|
|
|
|
|
+// word预览
|
|
|
|
|
+const filePreview = (file) => {
|
|
|
|
|
+ nextTick(() => {
|
|
|
|
|
+ fileUrl.value = file
|
|
|
|
|
+ })
|
|
|
|
|
+}
|
|
|
|
|
|
|
|
// 图片预览
|
|
// 图片预览
|
|
|
const imageView = (type) => {
|
|
const imageView = (type) => {
|
|
@@ -924,7 +936,10 @@ const imageView = (type) => {
|
|
|
if(contract.value.includes('.pdf')) {
|
|
if(contract.value.includes('.pdf')) {
|
|
|
window.open(contract.value, '_blank')
|
|
window.open(contract.value, '_blank')
|
|
|
} else if(contract.value.includes('.doc') || contract.value.includes('.docx')) {
|
|
} else if(contract.value.includes('.doc') || contract.value.includes('.docx')) {
|
|
|
-
|
|
|
|
|
|
|
+ fileShow.value = true
|
|
|
|
|
+ nextTick(() => {
|
|
|
|
|
+ filePreview(contract.value)
|
|
|
|
|
+ })
|
|
|
} else if(contract.value.includes('.jpg') || contract.value.includes('.jpeg') || contract.value.includes('.png')) {
|
|
} else if(contract.value.includes('.jpg') || contract.value.includes('.jpeg') || contract.value.includes('.png')) {
|
|
|
imageShow.value = true
|
|
imageShow.value = true
|
|
|
}
|
|
}
|
|
@@ -937,7 +952,8 @@ const imageView = (type) => {
|
|
|
if(applicant.value.includes('.pdf')) {
|
|
if(applicant.value.includes('.pdf')) {
|
|
|
window.open(applicant.value, '_blank')
|
|
window.open(applicant.value, '_blank')
|
|
|
} else if(applicant.value.includes('.doc') || applicant.value.includes('.docx')) {
|
|
} else if(applicant.value.includes('.doc') || applicant.value.includes('.docx')) {
|
|
|
-
|
|
|
|
|
|
|
+ fileShow.value = true
|
|
|
|
|
+ filePreview(applicant.value)
|
|
|
} else if(applicant.value.includes('.jpg') || applicant.value.includes('.jpeg') || applicant.value.includes('.png')) {
|
|
} else if(applicant.value.includes('.jpg') || applicant.value.includes('.jpeg') || applicant.value.includes('.png')) {
|
|
|
imageShow.value = true
|
|
imageShow.value = true
|
|
|
}
|
|
}
|
|
@@ -950,7 +966,8 @@ const imageView = (type) => {
|
|
|
if(decidePay.value.includes('.pdf')) {
|
|
if(decidePay.value.includes('.pdf')) {
|
|
|
window.open(decidePay.value, '_blank')
|
|
window.open(decidePay.value, '_blank')
|
|
|
} else if(decidePay.value.includes('.doc') || decidePay.value.includes('.docx')) {
|
|
} else if(decidePay.value.includes('.doc') || decidePay.value.includes('.docx')) {
|
|
|
-
|
|
|
|
|
|
|
+ fileShow.value = true
|
|
|
|
|
+ filePreview(decidePay.value)
|
|
|
} else if(decidePay.value.includes('.jpg') || decidePay.value.includes('.jpeg') || decidePay.value.includes('.png')) {
|
|
} else if(decidePay.value.includes('.jpg') || decidePay.value.includes('.jpeg') || decidePay.value.includes('.png')) {
|
|
|
imageShow.value = true
|
|
imageShow.value = true
|
|
|
}
|
|
}
|
|
@@ -963,7 +980,8 @@ const imageView = (type) => {
|
|
|
if(dimission.value.includes('.pdf')) {
|
|
if(dimission.value.includes('.pdf')) {
|
|
|
window.open(dimission.value, '_blank')
|
|
window.open(dimission.value, '_blank')
|
|
|
} else if(dimission.value.includes('.doc') || dimission.value.includes('.docx')) {
|
|
} else if(dimission.value.includes('.doc') || dimission.value.includes('.docx')) {
|
|
|
-
|
|
|
|
|
|
|
+ fileShow.value = true
|
|
|
|
|
+ filePreview(dimission.value)
|
|
|
} else if(dimission.value.includes('.jpg') || dimission.value.includes('.jpeg') || dimission.value.includes('.png')) {
|
|
} else if(dimission.value.includes('.jpg') || dimission.value.includes('.jpeg') || dimission.value.includes('.png')) {
|
|
|
imageShow.value = true
|
|
imageShow.value = true
|
|
|
}
|
|
}
|
|
@@ -1432,5 +1450,12 @@ defineExpose({
|
|
|
:deep(.el-input__inner[type=number]) {
|
|
:deep(.el-input__inner[type=number]) {
|
|
|
-moz-appearance: textfield;
|
|
-moz-appearance: textfield;
|
|
|
}
|
|
}
|
|
|
|
|
+:deep(.vue-office-docx-main){
|
|
|
|
|
+ height: 600px;
|
|
|
|
|
+ overflow-y: auto;
|
|
|
|
|
+}
|
|
|
|
|
+:deep(.docx-wrapper) {
|
|
|
|
|
+ background: white;
|
|
|
|
|
+}
|
|
|
|
|
|
|
|
</style>
|
|
</style>
|