diff --git a/src/assets/js/utils/get-url.js b/src/assets/js/utils/get-url.js index 807efdd..47926b6 100644 --- a/src/assets/js/utils/get-url.js +++ b/src/assets/js/utils/get-url.js @@ -1,7 +1,5 @@ import config from '@/config' import urlMap from '@/config/urlMap' - -console.log(config) export default function getUrl(url, domainType = 'admin') { let domain = '' // if (domainType === 'admin') { diff --git a/src/assets/sass/public.scss b/src/assets/sass/public.scss index 56b39a5..b64bf53 100644 --- a/src/assets/sass/public.scss +++ b/src/assets/sass/public.scss @@ -335,6 +335,7 @@ body .el-collapse-item__wrap { table { border: 1px solid #f9f9f9; + position: relative; //width: 100%; margin: 5px; border-collapse: collapse; @@ -381,3 +382,7 @@ body .el-collapse-item__wrap { opacity: 1; // 悬停时显示 } } + +.editor-button { + position: relative; +} diff --git a/src/components/RenderMinerU/index.vue b/src/components/RenderMinerU/index.vue index c026e98..99edbed 100644 --- a/src/components/RenderMinerU/index.vue +++ b/src/components/RenderMinerU/index.vue @@ -16,7 +16,9 @@
-
{{ markdown }}
+
+ +
@@ -36,81 +38,123 @@ export default { name: 'index', data() { return { + tableIdCounter: 0, prdUrl: ``, iframeSrc: window.location.origin, bboxList: [], markdown: '', md, markdownHtml: '', - page: 1 + page: 1, + copyTable: null, + tableActionButtons: [ + { + label: '重新识别', + icon: 'el-icon-edit', + click: tableElement => { + console.log('重新识别') + } + }, + { + label: '编辑', + icon: 'el-icon-edit', + click: tableElement => { + this.copyTable = tableElement.innerHTML + tableElement.classList.remove('m-view') + tableElement.setAttribute('contenteditable', 'true') + let buttonContainer = tableElement.querySelector('.md-editor-setting') + buttonContainer.innerHTML = null + this.generateButton(tableElement, buttonContainer, this.tableActionConfirm) + } + } + ], + tableActionConfirm: [ + { + label: '返回', + icon: 'el-icon-edit', + click: tableElement => { + tableElement.classList.add('m-view') + tableElement.setAttribute('contenteditable', 'false') + let buttonContainer = tableElement.querySelector('.md-editor-setting') + buttonContainer.innerHTML = null + this.generateButton(tableElement, buttonContainer, this.tableActionButtons) + } + } + // { + // label: '取消', + // icon: 'el-icon-edit', + // click: tableElement => {} + // } + ] } }, props: { documentId: { type: String, - default: '1359571867133448192' + default: '1361351897324294144' + }, + isEdit: { + type: Boolean, + default: true } }, watch: {}, components: {}, filters: {}, methods: { + // 封装 按钮生成时间 + generateButton(tableElement, buttonContainer, actionButtons) { + let contenteditable = tableElement.getAttribute('contenteditable') + let buttons = !actionButtons ? (contenteditable === 'false' ? this.tableActionButtons : this.tableActionConfirm) : actionButtons + // 循环按钮配置 + for (let i = 0; i < buttons.length; i++) { + const button = document.createElement('button') + button.innerText = buttons[i].label + button.className = 'el-button el-button--primary el-button--mini editor-button' + button.style.pointerEvents = 'auto' + button.addEventListener('click', () => { + buttons[i].click(tableElement) + }) + buttonContainer.appendChild(button) + } + }, + // 生成视觉模型 viewHtmlModel() { - // 创建一个唯一的按钮容器 - const buttonContainer = document.createElement('div') - buttonContainer.style.position = 'absolute' - buttonContainer.style.pointerEvents = 'none' - // document.body.appendChild(buttonContainer) + this.$nextTick(() => { + const mdHtml = document.getElementById('md-editor') - // 当鼠标滑动view-body下的table 时 增加浮层按钮 - window.addEventListener('mouseover', e => { - // 检查是否在 viewBody 内部 - const viewBody = document.getElementById('viewBody') - if (viewBody.contains(e.target)) { - // 检查目标元素是否为 table 或其子元素 + mdHtml.addEventListener('mouseover', e => { const tableElement = e.target.closest('table') if (tableElement) { - // 清除之前的按钮 - // buttonContainer.innerHTML = '' - // - // // 在这里添加浮层按钮的逻辑 - // console.log('Mouse over table or TD element inside viewBody') - // // 生成两个按钮 - // const button = document.createElement('button') - // button.innerText = '标注' - // button.style.position = 'absolute' - // // 按钮位置在表格正中间浮动 - // // 设置按钮位置在鼠标位置 - // const rect = tableElement.getBoundingClientRect() - // console.log(rect) - // // 按钮s生成在鼠标位置 - // button.style.left = `-10px` - // button.style.top = `-10px` - // - // button.style.backgroundColor = 'transparent' - // button.style.border = 'none' - // button.style.cursor = 'pointer' - // button.style.padding = '0' - // button.style.fontSize = '16px' - // button.style.zIndex = '9999' - // button.style.pointerEvents = 'auto' - // button.addEventListener('click', () => { - // alert(1) - // }) - // buttonContainer.appendChild(button) - // tableElement.appendChild(buttonContainer) + // 检查是否已经存在按钮容器 + let buttonContainer = tableElement.querySelector('.md-editor-setting') + if (!buttonContainer) { + buttonContainer = document.createElement('div') + buttonContainer.style.position = 'absolute' + buttonContainer.style.pointerEvents = 'none' + buttonContainer.style.zIndex = '9999' + buttonContainer.className = 'md-editor-setting' + buttonContainer.setAttribute('contenteditable', 'false') + this.generateButton(tableElement, buttonContainer) + // 设置按钮位置在表格正中间浮动 + const rect = tableElement.getBoundingClientRect() + buttonContainer.style.left = `10px` // 调整位置 + buttonContainer.style.top = `-20px` // 调整位置 + tableElement.appendChild(buttonContainer) + } } - } - }) + }) - // 当鼠标离开 view-body 下的 table 时 删除按钮 - window.addEventListener('mouseout', e => { - // 检查是否在 viewBody 内部 - const viewBody = document.getElementById('viewBody') - if (!viewBody.contains(e.target) || !e.target.closest('table')) { - buttonContainer.innerHTML = '' - } + mdHtml.addEventListener('mouseout', e => { + const tableElement = e.target.closest('table') + if (!tableElement || !tableElement.contains(e.relatedTarget)) { + const buttonContainer = tableElement.querySelector('.md-editor-setting') + if (buttonContainer) { + buttonContainer.remove() + } + } + }) }) }, // 导出 @@ -164,18 +208,23 @@ export default { }) }, changeTab() { - let pre = document.getElementById('md-editor').innerText - // pre= JSON.stringify(pre) - let copyMdHtml = md.render(pre) + let pre = document.getElementById('md-editor').innerHTML + // pre = JSON.stringify(pre) + // let copyMdHtml = md.render(pre) // 给 copyMdHtml 里面的table 增加 class m-view - copyMdHtml = copyMdHtml.replace(/ { + const uniqueId = `table-${this.tableIdCounter++}` + return `
diff --git a/src/views/track/Index.vue b/src/views/track/Index.vue index 1a2cfd6..1a83117 100644 --- a/src/views/track/Index.vue +++ b/src/views/track/Index.vue @@ -45,24 +45,32 @@ export default { let filteredList = this.tabList // 按照顺序进行筛选，先按照知识库进行筛选 - filteredList = this.form.knowledge ? filteredList.filter(item => { - return item.docTypeName === this.form.knowledge - }) : filteredList + filteredList = this.form.knowledge + ? filteredList.filter(item => { + return item.docTypeName === this.form.knowledge + }) + : filteredList // 按照知识文件名称进行筛选 - filteredList = this.form.knowledgeName ? filteredList.filter(item => { - return item.fileName === this.form.knowledgeName - }) : filteredList + filteredList = this.form.knowledgeName + ? filteredList.filter(item => { + return item.fileName === this.form.knowledgeName + }) + : filteredList // 按照上传用户进行筛选 - filteredList = this.form.uploadUser ? filteredList.filter(item => { - return item.createdUser === this.form.uploadUser - }) : filteredList + filteredList = this.form.uploadUser + ? filteredList.filter(item => { + return item.createdUser === this.form.uploadUser + }) + : filteredList // 按照任务状态进行筛选 - filteredList = this.form.taskStatus ? filteredList.filter(item => { - return item.processStatus === this.form.taskStatus - }) : filteredList + filteredList = this.form.taskStatus + ? filteredList.filter(item => { + return item.processStatus === this.form.taskStatus + }) + : filteredList // 处理的状态格式化 filteredList = filteredList.map(item => { @@ -71,9 +79,15 @@ export default { }) // 按照任务时间进行筛选 - filteredList = this.form.taskTime.length > 0 ? filteredList.filter(item => { - return new Date(item.uploadDate).getTime() >= new Date(this.form.taskTime[0]).getTime() && new Date(item.uploadDate).getTime() <= new Date(this.form.taskTime[1]).getTime() - }) : filteredList + filteredList = + this.form.taskTime.length > 0 + ? filteredList.filter(item => { + return ( + new Date(item.uploadDate).getTime() >= new Date(this.form.taskTime[0]).getTime() && + new Date(item.uploadDate).getTime() <= new Date(this.form.taskTime[1]).getTime() + ) + }) + : filteredList // 默认返回所有列表 return filteredList @@ -122,7 +136,6 @@ export default { getDocByPage(payload).then(res => { this.tabList = res.content.content.list ? res.content.content.list : [] console.log(`res:`, res.content.content.list) - }) }, handleReset() { @@ -189,8 +202,14 @@ export default { - + @@ -205,8 +224,7 @@ export default { - + diff --git a/src/views/track/views/knowledge-info/Index.vue b/src/views/track/views/knowledge-info/Index.vue index 7e3f305..bb4e7fe 100644 --- a/src/views/track/views/knowledge-info/Index.vue +++ b/src/views/track/views/knowledge-info/Index.vue @@ -1,10 +1,8 @@ @@ -87,9 +84,16 @@ export default { - switch - status + switch status