|
|
@ -3,57 +3,38 @@ |
|
|
v-bind="$attrs" |
|
|
v-bind="$attrs" |
|
|
title="title" |
|
|
title="title" |
|
|
:canFullscreen="true" |
|
|
:canFullscreen="true" |
|
|
:defaultFullscreen="true" |
|
|
:defaultFullscreen="true" |
|
|
:showOkBtn="false" |
|
|
@ok="submit" |
|
|
@register="registerInnerModal" |
|
|
@register="registerInnerModal" |
|
|
> |
|
|
> |
|
|
<div class="grid grid-cols-5 gap-4"> |
|
|
<div class="modal-content"> |
|
|
<div class="col-span-3"> |
|
|
<div class="grid grid-cols-5 gap-4 h-full"> |
|
|
<!-- <CanvasEditor |
|
|
<div class="col-span-3 pdf-container"> |
|
|
ref="canvasEditor" |
|
|
<PdfViewer :id="currentId" :key="pdfViewerkey" v-if="currentId!=0"/> |
|
|
:parentContent="parentContent" |
|
|
</div> |
|
|
:view="view" |
|
|
<div class="col-span-2 review-container"> |
|
|
@save-content="handleSaveCanvasEditorContent" |
|
|
<div class="review-content"> |
|
|
/> --> |
|
|
<showResultCard v-model:cardList="cardList"/> |
|
|
<PdfViewer :id="currentId" :key="pdfViewerkey" v-if="currentId!=0"/> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="col-span-2"> |
|
|
|
|
|
<!-- 添加 col-span-2 和高度样式 --> |
|
|
|
|
|
<div class="tabs-container"> |
|
|
|
|
|
<Tabs v-model:activeKey="activeKey" type="card"> |
|
|
|
|
|
<TabPane key="1" tab="审查结果"> |
|
|
|
|
|
<div class="scroll-container"> |
|
|
|
|
|
<div class="card-container"> |
|
|
|
|
|
<Card |
|
|
|
|
|
v-for="(item, index) in cardList" |
|
|
|
|
|
:key="index" |
|
|
|
|
|
:class="['custom-card', { 'card-selected': selectedCard === item.title }]" |
|
|
|
|
|
@click="handleCardClick(item.title)" |
|
|
|
|
|
> |
|
|
|
|
|
<template #title>{{ item.title }}</template> |
|
|
|
|
|
{{ item.text }} |
|
|
|
|
|
{{ item.content }} |
|
|
|
|
|
</Card> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</TabPane> |
|
|
|
|
|
<!-- <TabPane key="2" tab="Tab 2">Content of Tab Pane 2</TabPane> |
|
|
|
|
|
<TabPane key="3" tab="Tab 3">Content of Tab Pane 3</TabPane> --> |
|
|
|
|
|
</Tabs> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</BasicModal> |
|
|
</BasicModal> |
|
|
</template> |
|
|
</template> |
|
|
<script lang="ts" setup> |
|
|
<script lang="ts" setup> |
|
|
import { ref, onMounted, reactive } from 'vue'; |
|
|
import { ref, onMounted, reactive, h } from 'vue'; |
|
|
import { BasicModal, useModalInner } from '@/components/Modal'; |
|
|
import { BasicModal, useModalInner } from '@/components/Modal'; |
|
|
|
|
|
|
|
|
import { Tabs, TabPane, Card } from 'ant-design-vue'; |
|
|
import { Tabs, TabPane, Card, Modal } from 'ant-design-vue'; |
|
|
import { useRouter } from 'vue-router'; |
|
|
import { useRouter } from 'vue-router'; |
|
|
import CanvasEditor from '@/views/CanvasEditor/index.vue'; |
|
|
import CanvasEditor from '@/views/CanvasEditor/index.vue'; |
|
|
import { getContractualResultById } from '@/api/contractReview/JyjcontractualTaskBatch'; |
|
|
import { getContractualResultById } from '@/api/contractReview/JyjcontractualTaskBatch'; |
|
|
|
|
|
import { modifyContractReview } from '@/api/documentReview/DocumentTaskResults'; |
|
|
import PdfViewer from "./PdfViewer.vue" |
|
|
import PdfViewer from "./PdfViewer.vue" |
|
|
|
|
|
import showResultCard from './showResultCard.vue'; |
|
|
|
|
|
import { cloneDeep } from 'lodash-es'; |
|
|
|
|
|
const emit = defineEmits(['register', 'reload']); |
|
|
|
|
|
|
|
|
const activeKey = ref('1'); |
|
|
const activeKey = ref('1'); |
|
|
const currentId = ref<any>(0); |
|
|
const currentId = ref<any>(0); |
|
|
const pdfViewerkey = ref(0); |
|
|
const pdfViewerkey = ref(0); |
|
|
@ -65,14 +46,17 @@ |
|
|
console.log('点击的卡片标题:', title); |
|
|
console.log('点击的卡片标题:', title); |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
// 用于存储初始数据，以便比较 |
|
|
|
|
|
const initialCardList = ref<any[]>([]); |
|
|
|
|
|
|
|
|
const [registerInnerModal, { modalLoading, closeModal }] = useModalInner( |
|
|
const [registerInnerModal, { modalLoading, closeModal }] = useModalInner( |
|
|
async (data: { record?: Recordable }) => { |
|
|
async (data: { record?: Recordable }) => { |
|
|
modalLoading(true); |
|
|
modalLoading(true); |
|
|
cardList.value=[] |
|
|
cardList.value = []; |
|
|
const { record } = data; |
|
|
const { record } = data; |
|
|
const res = await getContractualResultById(record.id); |
|
|
const res = await getContractualResultById(record.id); |
|
|
pdfViewerkey.value+=1 |
|
|
pdfViewerkey.value += 1; |
|
|
currentId.value=record.id |
|
|
currentId.value = record.id; |
|
|
for (const item of res.results) { |
|
|
for (const item of res.results) { |
|
|
for (const content of item.contentList) { |
|
|
for (const content of item.contentList) { |
|
|
cardList.value.push({ |
|
|
cardList.value.push({ |
|
|
@ -84,6 +68,8 @@ |
|
|
}); |
|
|
}); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
// 保存初始数据的深拷贝 |
|
|
|
|
|
initialCardList.value = cloneDeep(cardList.value); |
|
|
modalLoading(false); |
|
|
modalLoading(false); |
|
|
}, |
|
|
}, |
|
|
); |
|
|
); |
|
|
@ -101,7 +87,9 @@ |
|
|
getEditorContent(); |
|
|
getEditorContent(); |
|
|
view.value = 'parent'; |
|
|
view.value = 'parent'; |
|
|
}); |
|
|
}); |
|
|
|
|
|
function handleSaveContent1(){ |
|
|
|
|
|
console.log('保存内容',cardList.value); |
|
|
|
|
|
} |
|
|
// 模拟后端获取数据的方法 |
|
|
// 模拟后端获取数据的方法 |
|
|
const getEditorContent = () => { |
|
|
const getEditorContent = () => { |
|
|
parentContent = { |
|
|
parentContent = { |
|
|
@ -159,106 +147,174 @@ |
|
|
setTimeout(() => { |
|
|
setTimeout(() => { |
|
|
loading.value = false; |
|
|
loading.value = false; |
|
|
}, 1500); |
|
|
}, 1500); |
|
|
</script> |
|
|
|
|
|
<style scoped> |
|
|
|
|
|
/* Tabs 相关样式 */ |
|
|
|
|
|
/* 设置未选中标签的基本样式 */ |
|
|
|
|
|
:deep(.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab) { |
|
|
|
|
|
color: rgba(0, 0, 0, 0.85) !important; /* 文字颜色为黑色，带透明度 */ |
|
|
|
|
|
background: #fff; /* 背景色为白色 */ |
|
|
|
|
|
border: 1px solid #f0f0f0; /* 浅灰色边框 */ |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/* 设置选中标签的样式 */ |
|
|
// 提交方法 |
|
|
:deep(.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab-active) { |
|
|
const submit = async () => { |
|
|
color: #ffffff !important; /* 文字颜色为白色 */ |
|
|
// 比较当前数据和初始数据的差异 |
|
|
background: #1890ff !important; /* 背景色为蓝色 */ |
|
|
const initialLength = initialCardList.value.length; |
|
|
border-color: #1890ff !important; /* 边框颜色也改为蓝色 */ |
|
|
const currentLength = cardList.value.length; |
|
|
} |
|
|
|
|
|
|
|
|
// 检查内容是否有变化 |
|
|
|
|
|
const hasContentChanged = JSON.stringify(initialCardList.value) !== JSON.stringify(cardList.value); |
|
|
|
|
|
|
|
|
|
|
|
if (!hasContentChanged) { |
|
|
|
|
|
// 内容没有变化，直接关闭 |
|
|
|
|
|
closeModal(); |
|
|
|
|
|
return; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
/* 确保选中标签的文字颜色为白色 */ |
|
|
// 从有到无 |
|
|
:deep(.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab-active .ant-tabs-tab-btn) { |
|
|
if (initialLength > 0 && currentLength === 0) { |
|
|
color: #ffffff !important; /* 文字颜色强制设为白色 */ |
|
|
Modal.confirm({ |
|
|
} |
|
|
title: '确认提交', |
|
|
|
|
|
content: h('div', [ |
|
|
|
|
|
'当前合同已无异常点, 状态将变为', |
|
|
|
|
|
h('span', { style: { color: '#52c41a', fontWeight: 'bold' } }, '审核通过'), |
|
|
|
|
|
'，是否确认？' |
|
|
|
|
|
]), |
|
|
|
|
|
okText: '确认', |
|
|
|
|
|
cancelText: '取消', |
|
|
|
|
|
async onOk() { |
|
|
|
|
|
await handleSubmit(); |
|
|
|
|
|
} |
|
|
|
|
|
}); |
|
|
|
|
|
return; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
/* 鼠标悬停时的文字颜色效果 */ |
|
|
// 从无到有 |
|
|
:deep(.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab:hover .ant-tabs-tab-btn) { |
|
|
if (initialLength === 0 && currentLength > 0) { |
|
|
color: #1890ff !important; /* 悬停时文字变为蓝色 */ |
|
|
Modal.confirm({ |
|
|
} |
|
|
title: '确认提交', |
|
|
|
|
|
content: h('div', [ |
|
|
|
|
|
'当前合同新增异常点, 状态将变为', |
|
|
|
|
|
h('span', { style: { color: '#ff4d4f', fontWeight: 'bold' } }, '审核不合格'), |
|
|
|
|
|
'，是否确认？' |
|
|
|
|
|
]), |
|
|
|
|
|
okText: '确认', |
|
|
|
|
|
cancelText: '取消', |
|
|
|
|
|
async onOk() { |
|
|
|
|
|
await handleSubmit(); |
|
|
|
|
|
} |
|
|
|
|
|
}); |
|
|
|
|
|
return; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
/* Card 相关样式 */ |
|
|
// 内容有修改 |
|
|
/* 卡片容器布局设置 */ |
|
|
Modal.confirm({ |
|
|
.card-container { |
|
|
title: '确认提交', |
|
|
display: flex; |
|
|
content: '内容已修改，是否提交？', |
|
|
gap: 16px; |
|
|
okText: '确认', |
|
|
flex-wrap: wrap; |
|
|
cancelText: '取消', |
|
|
width: 100%; |
|
|
async onOk() { |
|
|
} |
|
|
await handleSubmit(); |
|
|
|
|
|
} |
|
|
|
|
|
}); |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
/* 单个卡片的基本样式 */ |
|
|
// 实际的提交处理 |
|
|
.custom-card { |
|
|
const handleSubmit = async () => { |
|
|
width: 100%; |
|
|
try { |
|
|
margin-bottom: 16px; |
|
|
console.log('原始数据', cardList.value); |
|
|
cursor: pointer; |
|
|
|
|
|
transition: all 0.3s; |
|
|
// 封装数据结构 |
|
|
background-color: #fff; /* 添加默认背景色 */ |
|
|
const submitData = { |
|
|
border: 1px solid #e8e8e8; /* 添加默认边框 */ |
|
|
results: [ |
|
|
} |
|
|
{ |
|
|
|
|
|
title: "人工干预", // 固定值 |
|
|
|
|
|
contentList: cardList.value.map(card => ({ |
|
|
|
|
|
problemTitle: card.title, |
|
|
|
|
|
text: card.text, |
|
|
|
|
|
problemDesc: card.content, |
|
|
|
|
|
isPosition: card.isPosition, |
|
|
|
|
|
accord: card.accord |
|
|
|
|
|
})) |
|
|
|
|
|
} |
|
|
|
|
|
] |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
/* 卡片选中状态 */ |
|
|
console.log('封装后的提交数据', submitData); |
|
|
.custom-card.card-selected { |
|
|
|
|
|
background-color: #e6f4ff !important; /* 选中时的淡蓝色背景 */ |
|
|
|
|
|
border: 1px solid #1890ff !important; /* 选中时的蓝色边框 */ |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/* 卡片悬停效果 */ |
|
|
// TODO: 调用提交接口 |
|
|
.custom-card:hover { |
|
|
const res = await modifyContractReview(currentId.value,submitData); |
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); |
|
|
emit('reload'); |
|
|
transform: translateY(-2px); |
|
|
// 提交成功后关闭弹窗 |
|
|
} |
|
|
closeModal(); |
|
|
|
|
|
|
|
|
|
|
|
// 可以添加成功提示 |
|
|
|
|
|
Modal.success({ |
|
|
|
|
|
title: '提示', |
|
|
|
|
|
content: '提交成功！' |
|
|
|
|
|
}); |
|
|
|
|
|
} catch (error) { |
|
|
|
|
|
// 错误处理 |
|
|
|
|
|
console.log('提交失败',error); |
|
|
|
|
|
Modal.error({ |
|
|
|
|
|
title: '错误', |
|
|
|
|
|
content: '提交失败，请重试！' |
|
|
|
|
|
}); |
|
|
|
|
|
} |
|
|
|
|
|
}; |
|
|
|
|
|
</script> |
|
|
|
|
|
<style scoped> |
|
|
|
|
|
/* 添加新的样式 */ |
|
|
|
|
|
.modal-content { |
|
|
|
|
|
height: 100%; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
flex-direction: column; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
/* 选中状态下的悬停效果 */ |
|
|
.grid { |
|
|
.custom-card.card-selected:hover { |
|
|
flex: 1; |
|
|
background-color: #e6f4ff !important; |
|
|
min-height: 0; /* 重要：防止grid溢出 */ |
|
|
box-shadow: 0 4px 12px rgba(24, 144, 255, 0.1); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/* 卡片点击效果 */ |
|
|
.pdf-container { |
|
|
.custom-card:active { |
|
|
height: 100%; |
|
|
transform: translateY(0); |
|
|
overflow: hidden; |
|
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/* 修改卡片内容区域的内边距 */ |
|
|
.review-container { |
|
|
:deep(.ant-card-body) { |
|
|
height: 100%; |
|
|
padding: 16px; |
|
|
display: flex; |
|
|
} |
|
|
flex-direction: column; |
|
|
|
|
|
overflow: hidden; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
/* 滚动容器样式 */ |
|
|
|
|
|
.scroll-container { |
|
|
|
|
|
height: calc(100vh - 25vh); /* 可以根据实际需要调整高度 */ |
|
|
|
|
|
overflow-y: auto; /* 添加垂直滚动条 */ |
|
|
|
|
|
padding: 16px; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/* 美化滚动条样式（可选） */ |
|
|
.review-content { |
|
|
.scroll-container::-webkit-scrollbar { |
|
|
flex: 1; |
|
|
width: 6px; /* 滚动条宽度 */ |
|
|
min-height: 0; /* 重要：防止内容溢出 */ |
|
|
} |
|
|
overflow: hidden; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
.scroll-container::-webkit-scrollbar-thumb { |
|
|
/* 确保showResultCard组件占满剩余空间 */ |
|
|
background-color: #ccc; /* 滚动条颜色 */ |
|
|
.review-content :deep(.tabs-container) { |
|
|
border-radius: 3px; /* 滚动条圆角 */ |
|
|
height: 100%; |
|
|
} |
|
|
display: flex; |
|
|
|
|
|
flex-direction: column; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
.scroll-container::-webkit-scrollbar-track { |
|
|
/* 调整tabs内容区域的高度 */ |
|
|
background-color: #f1f1f1; /* 滚动条轨道颜色 */ |
|
|
.review-content :deep(.ant-tabs) { |
|
|
} |
|
|
height: 100%; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
flex-direction: column; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
/* 保持原有的卡片容器样式 */ |
|
|
.review-content :deep(.ant-tabs-content) { |
|
|
.card-container { |
|
|
flex: 1; |
|
|
display: flex; |
|
|
height: 100%; |
|
|
gap: 16px; |
|
|
overflow: hidden; |
|
|
flex-wrap: wrap; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.review-content :deep(.ant-tabs-tabpane) { |
|
|
|
|
|
height: 100%; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
flex-direction: column; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.review-content :deep(.scroll-container) { |
|
|
|
|
|
flex: 1; |
|
|
|
|
|
overflow-y: auto; |
|
|
|
|
|
} |
|
|
</style> |
|
|
</style> |
|
|
|
zhouhaibin
1 day ago