492 lines
14 KiB
Java
492 lines
14 KiB
Java
<template>
|
||
<div class="ocr">
|
||
<a-card :bordered="false">
|
||
<a-spin :spinning="loading">
|
||
<div class="table-page-search-wrapper">
|
||
<search :flag="'2'" :url="url"/>
|
||
</div>
|
||
<div class="table-operator">
|
||
<div class="operator-text" @click="handleUpload" v-has="'ocr:ocrRestful:addOcrRecord'">
|
||
<a-icon type="plus" />
|
||
{{ $t('upload1') }}
|
||
</div>
|
||
<div class="operator-text" @click="handleFileExport" v-has="'document:ocrPageInfo'">
|
||
<a-icon type="export" />
|
||
{{ $t('RetrieveFiles') }}
|
||
</div>
|
||
<div class="operator-text" @click="handleDel" v-has="'ocr:ocrRecord:deleteBatch'">
|
||
<a-icon type="delete" />
|
||
{{ $t('BatchDelete') }}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 上传弹框-->
|
||
<a-modal
|
||
class="show-content"
|
||
:title="$t('UploadFile')"
|
||
:visible="fileVisible"
|
||
:confirm-loading="confirmLoading"
|
||
@ok="modalOk"
|
||
@cancel="handleCancel"
|
||
>
|
||
<addForm
|
||
ref="fileForm"
|
||
@addFormClick="addFormClick"
|
||
:flag="'2'"
|
||
v-if="fileVisible"
|
||
:url="url">
|
||
</addForm>
|
||
</a-modal>
|
||
|
||
<!-- 同步弹框-->
|
||
<a-modal
|
||
class="show-content"
|
||
:title="$t('SyncLibrary')"
|
||
v-if="toVisible"
|
||
:visible="toVisible"
|
||
:confirm-loading="confirmLoading"
|
||
@ok="handleOkTo"
|
||
@cancel="handleCancelTo"
|
||
>
|
||
<p style="text-align: center">{{$t('sureSynchronize')}}</p>
|
||
</a-modal>
|
||
<!-- 校核弹框-->
|
||
<a-modal
|
||
class="show-content"
|
||
:title="$t('check')"
|
||
v-if="checkVisible"
|
||
:visible="checkVisible"
|
||
:confirm-loading="confirmLoading"
|
||
@ok="handleOkCheck"
|
||
@cancel="handleCancelCheck"
|
||
>
|
||
<p style="text-align: center">{{$t('sureVerified')}}</p>
|
||
</a-modal>
|
||
<div class="table-detail">
|
||
<tableData
|
||
:flag="'2'"
|
||
:OperationList="OperationList"
|
||
@actionSynchron="actionSynchron"
|
||
:url="url"
|
||
showAction
|
||
@actionDown="actionDown"
|
||
@onSelectChange="onSelectChange"
|
||
@actionDelete="actionDelete"
|
||
@detailClick="detailClick"
|
||
/>
|
||
</div>
|
||
|
||
<doc-table v-if="drawVisible" :drawVisible="drawVisible" :drawTableSorce="drawTableSorce" @visible="docVisible" @exportVisible="exportVisible"></doc-table>
|
||
<!-- <ocr-upload ref="uploadFile1" :disabled="disabled" :accept="accept" :listType='listType' @uploadSuccess="uploadSuccess"></ocr-upload>-->
|
||
</a-spin>
|
||
</a-card>
|
||
</div>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import { getAction, postAction, deleteAction, downloadFile } from '@/api/manage'
|
||
import search from '@/components/search/index'
|
||
import TableData from '@/components/OcrTable/index'
|
||
import AddForm from '@/components/OcrAddForm/index'
|
||
import DocTable from './modules/DocTable'
|
||
// import OcrUpload from '@/components/OcrUpload/index'
|
||
import store from '@/store/'
|
||
import { ACCESS_TOKEN } from '@/store/mutation-types'
|
||
import Vue from 'vue'
|
||
import eventBUs from '../../../common/event'
|
||
import axios from 'axios'
|
||
import { mapGetters } from 'vuex'
|
||
|
||
export default {
|
||
name: 'ocr',
|
||
components:{
|
||
search,
|
||
TableData,
|
||
AddForm,
|
||
// OcrUpload,
|
||
DocTable
|
||
},
|
||
data(){
|
||
return{
|
||
OperationList: [
|
||
{
|
||
text: this.$t('SyncLibrary'),
|
||
ClickEvent: 'actionSynchron'
|
||
}, //同步至文档库
|
||
// {
|
||
// text: this.$t('check'),
|
||
// ClickEvent: 'actionCheck'
|
||
// }, //校核
|
||
{
|
||
text: this.$t('download'),
|
||
ClickEvent: 'actionDown'
|
||
}, //下载
|
||
{
|
||
text: this.$t('delete'),
|
||
ClickEvent: 'actionDelete'
|
||
} //删除
|
||
],
|
||
pageSize:10,
|
||
labelCol: { span:4 },
|
||
wrapperCol: { span: 18 },
|
||
disabled:false,
|
||
drawVisible:false,
|
||
toVisible:false, //同步弹框
|
||
checkVisible:false, //校核弹框
|
||
file:'',
|
||
form:{}, //表单数据
|
||
rules:{},
|
||
url: {
|
||
tableHeader: 'ocr/ocrRecord/getHeader', //表格头部字段
|
||
seachList: 'ocr/ocrRecord/queryCondition', //搜索字段
|
||
tableList: 'ocr/ocrRecord/page', //表格数据
|
||
getAddForm: 'ocr/ocrRecord/getForm', // 表单的字段
|
||
addInfo: 'ocr/OcrRestful/addOcrRecord', //新增
|
||
},
|
||
queryParams:{}, //搜索条件
|
||
//列表数据
|
||
dataSource:[],
|
||
drawTableSorce:[],
|
||
total:0,
|
||
selectedRowKeys:[],
|
||
fileVisible:false,
|
||
confirmLoading: false,
|
||
selectedIds:'', //选择行id
|
||
record:{},
|
||
accept:'application/pdf',
|
||
today:'',
|
||
timer:'',
|
||
uploadTitle:this.$t('UploadFile'),
|
||
listType:'text',
|
||
token:Vue.ls.get(ACCESS_TOKEN),
|
||
websock: null,
|
||
loading:false
|
||
}
|
||
},
|
||
props:{
|
||
|
||
},
|
||
mounted() {
|
||
// this.loadData()
|
||
},
|
||
created() {
|
||
this.initWebSocket()
|
||
// this.refresh()
|
||
},
|
||
watch:{
|
||
|
||
},
|
||
methods:{
|
||
...mapGetters(['userInfo']),
|
||
initWebSocket: function () {
|
||
let token = Vue.ls.get(ACCESS_TOKEN)
|
||
// console.log("------------WebSocket连接成功");
|
||
// WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
|
||
let userId = store.getters.userInfo.id;
|
||
let url = window._CONFIG['domianWebSocketURL'].replace("https://","wss://").replace("http://","ws://") + '/websocket/socketServer'
|
||
// let url = 'http://139.9.235.66:8008/jero-boot'.replace("https://","wss://").replace("http://","ws://") + '/websocket/socketServer'
|
||
this.websock = new WebSocket(url);
|
||
this.websock.onopen = this.websocketOnopen;
|
||
this.websock.onerror = this.websocketOnerror;
|
||
this.websock.onmessage = this.websocketOnmessage;
|
||
this.websock.onclose = this.websocketOnclose;
|
||
},
|
||
websocketOnopen: function (e) {
|
||
// console.log("WebSocket连接成功");
|
||
// console.log('eee',e)
|
||
|
||
// 添加心跳检测，每10秒发一次数据，防止连接断开（这跟服务器的设置有关，如果服务器没有设置每隔多长时间不发消息断开，可以不进行心跳设置）
|
||
let self = this;
|
||
this.timer = setInterval(() => {
|
||
try {
|
||
self.websock.send('test')
|
||
// console.log('发送消息');
|
||
}catch(err){
|
||
console.log('断开了：' + err);
|
||
self.connection()
|
||
}
|
||
}, 10000)
|
||
},
|
||
websocketOnerror: function (e) {
|
||
// console.log("WebSocket连接发生错误");
|
||
this.reconnect();
|
||
},
|
||
websocketOnmessage: function (e) {
|
||
// console.log("WebSocket连接数据1111",e);
|
||
if(e.data=='1'){
|
||
// console.log('data改变')
|
||
eventBUs.$emit('searchReset')
|
||
}
|
||
},
|
||
websocketOnclose: function (e) {
|
||
this.websock.close()
|
||
// console.log('close')
|
||
// this.reconnect();
|
||
},
|
||
websocketSend(text) {
|
||
// 数据发送
|
||
try {
|
||
this.websock.send(text);
|
||
} catch (err) {
|
||
console.log("send failed (" + err.code + ")");
|
||
}
|
||
},
|
||
reconnect() {
|
||
let that = this;
|
||
if(that.lockReconnect) return;
|
||
that.lockReconnect = true;
|
||
//没连接上会一直重连，设置延迟避免请求过多
|
||
setTimeout(function () {
|
||
// console.info("尝试重连...");
|
||
that.initWebSocket();
|
||
that.lockReconnect = false;
|
||
}, 5000);
|
||
},
|
||
//上传
|
||
handleUpload(){
|
||
this.fileVisible=true
|
||
},
|
||
//调取已入库文件
|
||
handleFileExport(){
|
||
this.drawVisible=true
|
||
if(this.timer){
|
||
clearInterval(this.timer)
|
||
}
|
||
},
|
||
//批量删除
|
||
handleDel(){
|
||
let param={
|
||
ids:this.selectedIds
|
||
}
|
||
if(this.selectedIds){
|
||
this.$confirm({
|
||
title: this.$t('ConfirmBatchDeletion'),
|
||
content: '',
|
||
onOk:
|
||
async () => {
|
||
axios({
|
||
url: '/jero-boot/ocr/ocrRecord/deleteBatch',
|
||
method: 'post',
|
||
data: param,
|
||
transformRequest: [function (data) {
|
||
// Do whatever you want to transform the data
|
||
let ret = ''
|
||
for (let it in data) {
|
||
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
|
||
}
|
||
return ret
|
||
}],
|
||
headers: {
|
||
'Content-Type': 'application/x-www-form-urlencoded',
|
||
'X-Access-Token':this.token
|
||
}
|
||
})
|
||
.then( (res) =>{
|
||
if (res.data.success) {
|
||
this.$message.success(this.$t('OperationSuccessful'))
|
||
eventBUs.$emit('searchReset')
|
||
}else{
|
||
this.$message.warning(this.$t('operationFailed'))
|
||
}
|
||
})
|
||
.catch( (error) =>{
|
||
console.log(error);
|
||
});
|
||
},
|
||
onCancel() {},
|
||
});
|
||
}else{
|
||
this.$message.warning(this.$t('selectLeastOne'));
|
||
}
|
||
},
|
||
//同步
|
||
actionSynchron(val){
|
||
this.record=val
|
||
if(this.record.resultContent=='转换成功'&&this.record.syncState!='已同步'){
|
||
this.toVisible=true
|
||
}else{
|
||
this.$message.warning('未转换成功或已同步至文档库')
|
||
}
|
||
},
|
||
//校核
|
||
// actionCheck(val){
|
||
// // this.checkVisible=true
|
||
// this.loading=true
|
||
// axios({
|
||
// url: '/jero-boot/ocr/ocrCheck/verifyCheckFlag',
|
||
// method: 'get',
|
||
// params: {
|
||
// id:val.id
|
||
// },
|
||
// headers: {
|
||
// 'X-Access-Token':this.token
|
||
// }
|
||
// })
|
||
// .then( (res) => {
|
||
// if (res.data.success) {
|
||
// let newUrl = this.$router.resolve({
|
||
// path: '/ocr/ocrSplit',
|
||
// query:{
|
||
// fileName: val.docRealName,
|
||
// id:val.id
|
||
// }
|
||
// })
|
||
// window.open(newUrl.href, '_blank')
|
||
// }else{
|
||
// this.$message.error(res.data.message)
|
||
// }
|
||
// }).finally(()=>{
|
||
// this.loading=false
|
||
// })
|
||
// },
|
||
//下载
|
||
actionDown(val){
|
||
let fileNames=val.docRealName.split('_')
|
||
let name = fileNames.shift()
|
||
let fileName=fileNames.join('_')
|
||
// let fileName=val.fileName.split('.')[0]
|
||
|
||
downloadFile('ocr/OcrRestful/downFile', fileName,{ fileName: val.docRealName })
|
||
},
|
||
//删除
|
||
actionDelete(record){
|
||
let params={
|
||
id:record.id
|
||
}
|
||
this.$confirm({
|
||
title: this.$t('ConfirmDelete'),
|
||
content: '',
|
||
onOk:
|
||
async () => {
|
||
getAction(`ocr/ocrRecord/delete`,params).then(res=> {
|
||
if(res.success){
|
||
this.$message.success(this.$t('OperationSuccessful'))
|
||
eventBUs.$emit('searchReset')
|
||
}else{
|
||
this.$message.warning(this.$t('operationFailed'))
|
||
}
|
||
})
|
||
},
|
||
onCancel() {},
|
||
});
|
||
|
||
},
|
||
onDelete(){
|
||
|
||
},
|
||
onSelectChange(selectedRowKeys,selectedRows){
|
||
this.selectedIds=selectedRowKeys.join(',')
|
||
|
||
},
|
||
//上传确定按钮
|
||
modalOk(){
|
||
this.$refs.fileForm.sumber()
|
||
},
|
||
handleCancel(){
|
||
this.fileVisible=false
|
||
},
|
||
//上传文件
|
||
uploadSuccess(data) {
|
||
console.log('data11',data)
|
||
let attIdList = []
|
||
let attNameList = []
|
||
if(data && data.length > 0){
|
||
data.forEach(item => {
|
||
attIdList.push(item.id || data.name)
|
||
attNameList.push(itme.fileName)
|
||
})
|
||
this.form.attId = attIdList.join(',')
|
||
this.form.fileName=attNameList.join(',')
|
||
}
|
||
this.$refs.uploadFile1.visible=false
|
||
},
|
||
fileUpload(){
|
||
|
||
this.$refs.uploadFile1.visible=true
|
||
},
|
||
//同步至文档库确认
|
||
handleOkTo(){
|
||
let params={
|
||
...this.record
|
||
}
|
||
postAction(`ocr/ocrRecord/syncToDocument`,params).then(res=>{
|
||
if(res.success){
|
||
eventBUs.$emit('searchReset')
|
||
this.$message.success(this.$t('OperationSuccessful'))
|
||
this.toVisible=false
|
||
}else{
|
||
this.$message.warning(this.$t('operationFailed'))
|
||
}
|
||
})
|
||
},
|
||
//同步至文档库取消
|
||
handleCancelTo(){
|
||
this.toVisible=false
|
||
},
|
||
//校核确认
|
||
handleOkCheck(){
|
||
let newUrl = this.$router.resolve({
|
||
path: '/ocr/ocrSplit',
|
||
})
|
||
// this.$router.push({
|
||
// path:'/ocr/ocrSplit'
|
||
// })
|
||
window.open(newUrl.href, '_blank')
|
||
// this.checkVisible=false
|
||
},
|
||
//校核取消
|
||
handleCancelCheck(){
|
||
this.checkVisible=false
|
||
},
|
||
docVisible(val){
|
||
this.drawVisible=val
|
||
|
||
},
|
||
//文件详情跳转
|
||
detailClick(val){
|
||
window.open('/pdf/web/viewer.html?file=' + encodeURIComponent('/jero-boot/sys/common/pdf/viewFile?id=' + val.attId+'&userName='+this.userInfo().username))
|
||
},
|
||
exportVisible(val){
|
||
// this.fileVisible=val
|
||
},
|
||
addFormClick() {
|
||
this.fileVisible = false
|
||
},
|
||
|
||
},
|
||
beforeDestroy(){
|
||
},
|
||
destroyed() {
|
||
// 离开页面生命周期函数
|
||
this.websocketOnclose();
|
||
clearInterval(this.timer)
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
@import '~@assets/less/common.less';
|
||
.ocr{
|
||
.table-detail{
|
||
.action{
|
||
margin-right: 10px;
|
||
}
|
||
.action-delete{
|
||
color:red;
|
||
}
|
||
.page{
|
||
text-align:right ;
|
||
margin-top:20px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
<style lang="less">
|
||
.show-content{
|
||
.ant-modal-footer{
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
</style> |