feat(RenderMinerU): 添加表格重新识别和撤销功能

- 新增 imageRetry 函数用于重新识别表格
- 添加撤销功能,可恢复到未识别状态
-优化按钮显示逻辑,只有在可编辑状态下显示撤销按钮
-调整公共样式,确保表格宽度占满
This commit is contained in:
陈昱达
2025-04-21 14:10:30 +08:00
parent 44c4d5fa8c
commit 97ebe1926d
4 changed files with 70 additions and 9 deletions

View File

@@ -257,3 +257,14 @@ export function queryTask(params) {
params
})
}
// 识别页面表格
export function imageRetry(data) {
return request({
url: getUrl(`/document/mineru/img/retry`),
method: 'post',
data,
noLoading: true
})
}

View File

@@ -336,7 +336,7 @@ body .el-collapse-item__wrap {
table {
border: 1px solid #f9f9f9;
position: relative;
//width: 100%;
width: 100%;
margin: 5px;
border-collapse: collapse;
background: linear-gradient(to bottom, #ffffff, #f9f9f9);

View File

@@ -28,7 +28,7 @@
</div>
</template>
<script>
import { getPdfUrl, minerUBbox, minerUMarkDown, minerUMarkDownUpdate, minerURetry, minerUQuery } from '@/api/generatedApi/index'
import { getPdfUrl, minerUBbox, minerUMarkDown, minerUMarkDownUpdate, minerURetry, minerUQuery, imageRetry } from '@/api/generatedApi/index'
import { DEFAULT_COLOR_SECTION, PDF_COLOR_PICKER } from './pdf-color'
import MarkdownIt from 'markdown-it'
import markdownItKatex from 'markdown-it-katex'
@@ -57,6 +57,7 @@ export default {
{
label: '重新识别',
icon: 'el-icon-view',
name: 'retry',
click: tableElement => {
console.log('重新识别')
// 获取的 识别图片
@@ -76,15 +77,14 @@ export default {
// background: 'rgba(0, 0, 0, 0.8)',
text: 'AI模型分析中....'
})
setTimeout(() => {
loading.close()
// tableElement.innerHTML = '<div>123</div>'
}, 3000)
this.retryMinerImage(chooseItem, loading, tableElement)
}
}
},
{
label: '编辑',
name: 'edit',
icon: 'el-icon-edit-outline',
click: tableElement => {
this.copyTable = tableElement.innerHTML
@@ -94,12 +94,35 @@ export default {
buttonContainer.innerHTML = null
this.generateButton(tableElement, buttonContainer, this.tableActionConfirm)
}
},
{
label: '撤销',
icon: 'el-icon-refresh-left',
name: 'refresh',
click: tableElement => {
this.$messageBox(
() => {
let chooseItem = this.findMatchingTable(tableElement)
let tableMatch = chooseItem.html.match(/<table>([\s\S]*)<\/table>/)
if (tableMatch) {
tableElement.innerHTML = tableMatch[1]
// tableElement 删除data-path-id
tableElement.removeAttribute('data-path-id')
tableElement.removeAttribute('data-path-type')
}
},
'是否撤销当前识别内容?',
'warning',
'撤销提醒'
)
}
}
],
tableActionConfirm: [
{
label: '返回',
icon: 'el-icon-refresh-left',
name: 'back',
click: tableElement => {
tableElement.classList.add('m-view')
tableElement.setAttribute('contenteditable', 'false')
@@ -145,6 +168,23 @@ export default {
components: {},
filters: {},
methods: {
//
retryMinerImage(chooseItem, loading, tableElement) {
imageRetry({
documentId: this.documentId,
imgName: chooseItem.image_path
}).then(res => {
if (res) {
loading.close()
let path = res.content.content
let tableMatch = path.match(/<table>([\s\S]*)<\/table>/)
if (tableMatch) {
tableElement.innerHTML = tableMatch[1]
}
}
})
},
// 生成视觉模型
viewHtmlModel() {
this.$nextTick(() => {
@@ -192,11 +232,15 @@ export default {
let contenteditable = tableElement.getAttribute('contenteditable')
// 根据可编辑状态选择按钮配置
let buttons = !actionButtons ? (contenteditable === 'false' ? this.tableActionButtons : this.tableActionConfirm) : actionButtons
let pathId = tableElement.getAttribute('data-path-id')
// 循环按钮配置,动态生成按钮并绑定点击事件
for (let i = 0; i < buttons.length; i++) {
if (buttons[i].name === 'refresh' && !pathId && contenteditable === 'false') {
break
}
const icon = document.createElement('i')
const button = document.createElement('button')
icon.className = `${buttons[i].icon} public-icon`
button.appendChild(icon)
// 悬浮提示
@@ -217,6 +261,12 @@ export default {
if (pathId) {
let pathType = tableElement.getAttribute('data-path-type')
this.selectionImagePath = pathId + pathType
chooseItem = this.selectionTable.find(item => {
if (item.image_path === this.selectionImagePath) {
return item
}
return false
})
} else {
// 如果没有路径 ID则通过表格内容匹配对照表
let tableText = this.getTableText(tableElement)

View File

@@ -36,8 +36,8 @@ Vue.component('RMinerU', RenderMinerU)
Vue.component('VEditor', VueEditor)
// 富文本编辑器 可视化代码
Vue.component('MEditor', MavonEditor)
Vue.prototype.$messageBox = function(isOk, message, type) {
this.$confirm(message ? message : '是否确认删除当前数据', '提示', {
Vue.prototype.$messageBox = function(isOk, message, type, title) {
this.$confirm(message ? message : '是否确认删除当前数据', title ? title : '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: type ? type : 'error'