You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
615 lines
20 KiB
Vue
615 lines
20 KiB
Vue
<template>
|
|
<div class="EvidenceConfirm">
|
|
<div class="header">
|
|
<div class="nav-list">
|
|
<div v-for="(item,index) in navList" :key="index" class="nav-item">
|
|
<span>{{ item }}</span>
|
|
<span v-if="index !== navList.length -1">></span>
|
|
</div>
|
|
</div>
|
|
<div class="title">
|
|
<span>{{ `案件名称：${caseName}` }}</span>
|
|
<span>{{ `案件编号：${caseNo}` }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="proofread-content">
|
|
<div class="left-tree">
|
|
<el-tree
|
|
ref="tree"
|
|
:data="treeData"
|
|
:props="defaultProps"
|
|
:expand-on-click-node="false"
|
|
default-expand-all
|
|
node-key="id"
|
|
highlight-current
|
|
@node-click="handleNodeClick"
|
|
/>
|
|
</div>
|
|
<div class="mid-content">
|
|
<div class="left">
|
|
<el-scrollbar v-if="selectList.length > 0" class="left-scroll">
|
|
<vuedraggable v-model="selectList" animation="400" class="img_list" @end="handleDragEnd">
|
|
<div v-for="(item,index) in selectList" :key="index" class="img_item" :class="[item.fileId === selectInfo.fileId?'actived':'']">
|
|
<img v-if="['jpg', 'png'].includes(item.fileType)" :src="getImgUrl(item.fileId)" @click="selectItem(index)">
|
|
|
|
</img>
|
|
<svg-icon v-if="[ 'doc', 'docx'].includes(item.fileType)" class="svg-img" icon-class="docx" @click="selectItem(index)" />
|
|
<svg-icon v-if="[ 'pdf'].includes(item.fileType)" class="svg-img" icon-class="pdf" @click="selectItem(index)" />
|
|
</div>
|
|
|
|
</vuedraggable>
|
|
</el-scrollbar>
|
|
<div v-if="selectList.length > 0 && ['jpg', 'png'].includes(selectInfo.fileType)" class="act_img">
|
|
<img v-if="selectInfo.fileId" :src="getImgUrl(selectInfo.fileId)" alt="">
|
|
</div>
|
|
<div v-if="selectList.length === 0" class="empty-content">
|
|
<img src="@/assets/caseManagement/empty.png" alt="">
|
|
<span>暂无本次证据材料</span>
|
|
</div>
|
|
<span class="boder1" />
|
|
<span class="boder2" />
|
|
<span class="boder3" />
|
|
<span class="boder4" />
|
|
</div>
|
|
<div class="right">
|
|
<div class="title">识别结果</div>
|
|
<el-input
|
|
v-model="selectInfo.ocrText"
|
|
class="right-text"
|
|
type="textarea"
|
|
/>
|
|
<span class="boder1" />
|
|
<span class="boder2" />
|
|
<span class="boder3" />
|
|
<span class="boder4" />
|
|
</div>
|
|
</div>
|
|
<div class="FormInfo">
|
|
<el-form v-if="level === '2'" ref="form" :model="selectInfo.evidenceInfo" :rules="rules" label-width="100px" style="margin-top: 10px">
|
|
<el-row :gutter="10" class="form-content">
|
|
<el-col :span="24">
|
|
<el-form-item label="证据名称" prop="evidenceName">
|
|
<el-input v-model="selectInfo.evidenceInfo.evidenceName" placeholder="请输入证据名称" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="10" class="form-content">
|
|
<el-col :span="24">
|
|
<el-form-item label="标题" prop="title">
|
|
<el-input v-model="selectInfo.evidenceInfo.title" placeholder="请输入证据标题" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="10" class="form-content">
|
|
<el-col :span="24">
|
|
<el-form-item label="提供人" prop="provider">
|
|
<el-input v-model="selectInfo.evidenceInfo.provider" placeholder="请输入提供人" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row v-if="selectInfo.evidenceInfo.property" :gutter="10" class="form-content">
|
|
<el-col v-for="(item,index) in selectInfo.evidenceInfo.property" :key="index" :span="24">
|
|
<el-form-item v-if="item.attrValueType" :label="item.attrName">
|
|
<el-input v-if="item.attrValueType ==='1'" v-model="item.attrValue" placeholder="请输入" />
|
|
<el-input v-if="item.attrValueType ==='2'" v-model="item.attrValue" type="number" placeholder="请输入" />
|
|
<el-date-picker
|
|
v-if="item.attrValueType ==='3'"
|
|
v-model="item.attrValue"
|
|
format="yyyy-MM-dd"
|
|
value-format="yyyy-MM-dd"
|
|
type="date"
|
|
placeholder="选择日期"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
<el-form v-if="level === '3'" ref="form" :model="evidenceInfo" :rules="rules" label-width="100px" style="margin-top: 10px">
|
|
<el-row :gutter="10" class="form-content">
|
|
<el-col :span="24">
|
|
<el-form-item label="证据名称" prop="evidenceName">
|
|
<el-input v-model="evidenceInfo.evidenceName" placeholder="请输入证据名称" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="10" class="form-content">
|
|
<el-col :span="24">
|
|
<el-form-item label="标题" prop="title">
|
|
<el-input v-model="evidenceInfo.title" placeholder="请输入证据标题" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="10" class="form-content">
|
|
<el-col :span="24">
|
|
<el-form-item label="提供人" prop="provider">
|
|
<el-input v-model="evidenceInfo.provider" placeholder="请输入提供人" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row v-if="evidenceInfo.property" :gutter="10" class="form-content">
|
|
<el-col v-for="(item,index) in evidenceInfo.property" :key="index" :span="24">
|
|
<el-form-item v-if="item.attrValueType" :label="item.attrName">
|
|
<el-input v-if="item.attrValueType ==='1'" v-model="item.attrValue" placeholder="请输入" />
|
|
<el-input v-if="item.attrValueType ==='2'" v-model="item.attrValue" type="number" placeholder="请输入" />
|
|
<el-date-picker
|
|
v-if="item.attrValueType ==='3'"
|
|
v-model="item.attrValue"
|
|
format="yyyy-MM-dd"
|
|
value-format="yyyy-MM-dd"
|
|
type="date"
|
|
placeholder="选择日期"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
<div class="footer-btns">
|
|
<div class="btn" @click="save">确认并提交</div>
|
|
<div class="btn" @click="save">保存</div>
|
|
<div class="reset_btn" @click="reset">重置</div>
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
<script>
|
|
import * as vuedraggable from 'vuedraggable'
|
|
import { baseURL } from '@/config'
|
|
import { commonDownloadFile } from '@/api/config/uploadApi'
|
|
import { ocrAndExtractDetails, caseEvidenceVerify } from '@/api/caseDetails/evidence'
|
|
export default {
|
|
name: 'RecordProofread',
|
|
components: { vuedraggable },
|
|
data() {
|
|
return {
|
|
selectList: [],
|
|
activedImg: '',
|
|
caseNo: '',
|
|
caseName: '',
|
|
dataInfo: {},
|
|
evidenceInfo: undefined,
|
|
navList: [],
|
|
// 证据类型
|
|
evidenceTypeList: JSON.parse(sessionStorage.getItem('evidence_type')),
|
|
defaultProps: {
|
|
children: 'child',
|
|
label: 'directoryName'
|
|
},
|
|
rules: {
|
|
evidenceName: [{ required: true, message: '证据名称不能为空!', trigger: 'blur' }]
|
|
},
|
|
treeData: [],
|
|
flag: true,
|
|
level: '',
|
|
selectInfo: {
|
|
evidenceInfo: {
|
|
property: [],
|
|
title: '',
|
|
evidenceName:''
|
|
},
|
|
ocrText: ''
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getTreeList()
|
|
this.caseNo = this.$route.query.caseNo
|
|
this.caseName = this.$route.query.caseName
|
|
},
|
|
methods: {
|
|
getParentNames(node, treeData, parentNames = []) {
|
|
// 找到节点的直接父节点
|
|
const parent = treeData.find(parentNode =>
|
|
parentNode.child && parentNode.child.some(child => child.id === node.id)
|
|
)
|
|
|
|
// 如果找到父节点，将其名称添加到数组中，并递归检查更上层的父节点
|
|
if (parent) {
|
|
parentNames.push(parent.directoryName)
|
|
return this.getParentNames(parent, treeData, parentNames)
|
|
}
|
|
|
|
// 如果没有找到更上层的父节点，返回所有父节点的名称
|
|
return parentNames
|
|
},
|
|
// 查询左侧树
|
|
getTreeList() {
|
|
ocrAndExtractDetails({ caseId: this.$route.params.id, batchNo: this.$route.query.recordId }).then(res => {
|
|
if (res.code === 200) {
|
|
this.treeData = res.data
|
|
this.$nextTick(() => {
|
|
this.initializateSelection()
|
|
})
|
|
}
|
|
})
|
|
},
|
|
getImgUrl(id) {
|
|
return `${baseURL}${commonDownloadFile}${id}`
|
|
},
|
|
selectItem(index) {
|
|
this.selectInfo = this.selectList[index]
|
|
this.activedImg = `${baseURL}${commonDownloadFile}${this.selectInfo.fileId}`
|
|
},
|
|
reset() {
|
|
this.getTreeList()
|
|
},
|
|
findNodeById(nodes, id) {
|
|
for (const node of nodes) {
|
|
if (node.id === id) {
|
|
node.fileInfoList = this.selectList
|
|
} else if (node.child) {
|
|
this.findNodeById(node.child, id)
|
|
}
|
|
}
|
|
return null
|
|
},
|
|
// 初始化选择
|
|
initializateSelection() {
|
|
const nodeItem = this.getFileList(this.treeData)
|
|
this.handleNodeClick(nodeItem)
|
|
},
|
|
// 获取有文件的list
|
|
getFileList(nodes) {
|
|
for (const node of nodes) {
|
|
if (node.fileInfoList.length > 0) {
|
|
return node
|
|
} else if (node.child) {
|
|
const foundNode = this.getFileList(node.child)
|
|
if (foundNode) {
|
|
return foundNode
|
|
}
|
|
}
|
|
}
|
|
return null
|
|
},
|
|
handleNodeClick(data) {
|
|
// this.selectId = data.id
|
|
this.navList = []
|
|
this.navList = this.getParentNames(data, this.treeData)
|
|
|
|
if (data.evidenceInfo) {
|
|
this.level = '3'
|
|
this.evidenceInfo = data.evidenceInfo
|
|
} else {
|
|
this.level = '2'
|
|
}
|
|
this.selectList = data.fileInfoList
|
|
this.selectInfo = this.selectList[0]
|
|
this.selectId = data.id
|
|
this.navList.push(data.directoryName)
|
|
this.$refs.tree.setCurrentKey(this.selectId)
|
|
},
|
|
checkEvidence(nodes) {
|
|
for (const item of nodes) {
|
|
if (item.fileInfoList.length > 0) {
|
|
for (let i = 0; i < item.fileInfoList.length; i++) {
|
|
if (!item.fileInfoList[i].evidenceInfo.evidenceName) {
|
|
this.handleNodeClick(item)
|
|
this.selectItem(i)
|
|
this.flag = false
|
|
break
|
|
}
|
|
}
|
|
} else if (item.child) {
|
|
this.checkEvidence(item.child)
|
|
}
|
|
}
|
|
},
|
|
handleAdd() {
|
|
this.$refs.add.show()
|
|
},
|
|
submit() {
|
|
caseEvidenceVerify({
|
|
batchNo: this.$route.query.recordId,
|
|
caseId: this.$route.params.id,
|
|
evidenceDirectoryList: this.treeData
|
|
}).then(res => {
|
|
if (res.code === 200) {
|
|
this.$baseMessage.success(res.msg || '保存成功!')
|
|
this.$store.dispatch(
|
|
'tabsBar/delRoute',
|
|
this.$route
|
|
)
|
|
this.$router.push({ path: `/case-details/${this.$route.params.id}/${this.$route.query.caseName}`, query: { isEdit: 1,currentKey: '1-2', caseNo: this.$route.query.caseNo }})
|
|
}
|
|
})
|
|
},
|
|
save() {
|
|
if (this.level === '2') {
|
|
this.checkEvidence(this.treeData)
|
|
if (this.flag) {
|
|
this.submit()
|
|
} else {
|
|
this.$baseMessage.error('证据不能为空!')
|
|
}
|
|
} else {
|
|
if (this.evidenceInfo.evidenceName) {
|
|
this.submit()
|
|
} else {
|
|
this.$baseMessage.error('证据不能为空!')
|
|
}
|
|
}
|
|
},
|
|
handleDragEnd() {
|
|
this.findNodeById(this.treeData, this.selectId)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.EvidenceConfirm {
|
|
display: flex;
|
|
flex: 1;
|
|
padding: 0 24px;
|
|
flex-direction: column;
|
|
:deep(.el-scrollbar__wrap) {
|
|
overflow-x: hidden;
|
|
|
|
}
|
|
.left-tree {
|
|
width: 210px;
|
|
margin-right: 16px;
|
|
background: #F9FAFB;
|
|
::v-deep {
|
|
.el-tree {
|
|
background: #F9FAFB;
|
|
.el-tree-node {
|
|
// height: 40px;
|
|
font-size: 16px;
|
|
color: #333333;
|
|
}
|
|
.el-tree-node__content {
|
|
height: 40px;
|
|
}
|
|
.el-tree-node.is-current > .el-tree-node__content {
|
|
background: #dce3ed;
|
|
color: #666666;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
.proofread-content {
|
|
flex: 1;
|
|
margin-left: 18px;
|
|
display: flex;
|
|
|
|
.mid-content {
|
|
display: flex;
|
|
flex: 1;
|
|
.left {
|
|
|
|
margin-right: 24px;
|
|
position: relative;
|
|
// background: #F6F8F9;
|
|
border: 1px solid #DCE3EB;
|
|
display: flex;
|
|
padding: 8px;
|
|
.empty-content {
|
|
flex: 1;
|
|
padding: 24px;
|
|
display: flex;
|
|
margin-top: 16px;
|
|
flex-direction: column;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;font-size: 16px;
|
|
color: #333333;
|
|
img {
|
|
width: 200px;
|
|
height: 200px;
|
|
}
|
|
}
|
|
.left-scroll {
|
|
background: #F6F8F9;
|
|
width: 150px;
|
|
margin-right: 14px;
|
|
height: calc(100vh - 408px);
|
|
}
|
|
.act_img {
|
|
padding: 16px 28px;
|
|
flex: 1;
|
|
background: #F6F8F9;
|
|
height: calc(100vh - 472px);
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
img {
|
|
height: 100%;
|
|
}
|
|
}
|
|
.actived {
|
|
border: 2px solid #3763FF !important;
|
|
}
|
|
}
|
|
.right {
|
|
flex: 1;
|
|
position: relative;
|
|
border: 1px solid #DCE3EB;
|
|
display: flex;
|
|
padding: 8px;
|
|
flex-direction: column;
|
|
.title {
|
|
background: #F6F8F9;
|
|
border-bottom: 1px solid #DCE3EB;
|
|
height: 70px;
|
|
padding-left: 24px;
|
|
line-height: 70px;
|
|
font-weight: bold;
|
|
font-size: 18px;
|
|
color: #333333;
|
|
}
|
|
.right-text {
|
|
width: 100%;
|
|
height: 500px;
|
|
}
|
|
}
|
|
}
|
|
.FormInfo {
|
|
width: 410px;
|
|
background: #F6F8F9;
|
|
border-radius: 8px 8px 8px 8px;
|
|
margin-left: 24px;
|
|
overflow-y: auto;
|
|
height: calc(100vh - 460px);
|
|
overflow: auto;
|
|
padding: 0 24px;
|
|
margin-bottom: 72px;
|
|
.expand {
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
padding: 0 24px;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
margin-bottom: 16px;
|
|
img {
|
|
width: 18px;
|
|
height: 18px;
|
|
margin-right: 8px;
|
|
}
|
|
.line {
|
|
flex: 1;
|
|
height: 1px;
|
|
background: #E9E9E9;
|
|
margin-right: 8px;
|
|
}
|
|
}
|
|
}
|
|
.img_list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding-top: 25px;
|
|
overflow-x: hidden;
|
|
padding: 24px;
|
|
background: #F6F8F9;
|
|
.img_item {
|
|
width: 98px;
|
|
height: 138px;
|
|
margin-bottom: 16px;
|
|
border-radius: 6px 6px 6px 6px;
|
|
border: 1px solid #D1D3D6;
|
|
cursor: move;
|
|
img {
|
|
width: 98px;
|
|
height: 138px;
|
|
}
|
|
}
|
|
.svg-img {
|
|
width: 98px;
|
|
height: 138px;
|
|
margin-bottom: 16px;
|
|
border-radius: 6px 6px 6px 6px;
|
|
border: 1px solid #D1D3D6;
|
|
cursor: move;
|
|
}
|
|
}
|
|
.boder1 {
|
|
position: absolute;
|
|
width: 15px;
|
|
height: 15px;
|
|
left: 0;
|
|
top: 0;
|
|
border-top: 2px solid #2073FF;
|
|
border-left: 2px solid #2073FF;
|
|
}
|
|
.boder2 {
|
|
position: absolute;
|
|
width: 15px;
|
|
height: 15px;
|
|
right: 0;
|
|
top: 0;
|
|
border-top: 2px solid #2073FF;
|
|
border-right: 2px solid #2073FF;
|
|
}
|
|
.boder3 {
|
|
position: absolute;
|
|
width: 15px;
|
|
height: 15px;
|
|
left: 0;
|
|
bottom: 0;
|
|
border-bottom: 2px solid #2073FF;
|
|
border-left: 2px solid #2073FF;
|
|
}
|
|
.boder4 {
|
|
position: absolute;
|
|
width: 15px;
|
|
height: 15px;
|
|
right: 0;
|
|
bottom: 0;
|
|
border-bottom: 2px solid #2073FF;
|
|
border-right: 2px solid #2073FF;
|
|
}
|
|
}
|
|
.header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding-left: 210px;
|
|
.nav-list {
|
|
display: flex;
|
|
font-size: 16px;
|
|
color: #333333;
|
|
margin-bottom: 16px;
|
|
.nav-item {
|
|
display: flex;
|
|
span {
|
|
margin-right: 16px;
|
|
}
|
|
}
|
|
}
|
|
.title {
|
|
// display: flex;
|
|
text-align: right;font-size: 16px;
|
|
color: #333333;
|
|
margin-bottom: 24px;
|
|
span {
|
|
margin-left: 32px;
|
|
}
|
|
}
|
|
}
|
|
.footer-btns {
|
|
padding-top: 24px;
|
|
height: 68px;
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
.btn {
|
|
width: 188px;
|
|
height: 48px;
|
|
background: #3763FF;
|
|
box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.04);
|
|
border-radius: 6px 6px 6px 6px;
|
|
text-align: center;
|
|
line-height: 48px;
|
|
font-size: 16px;
|
|
color: #FFFFFF;
|
|
cursor: pointer;
|
|
margin-left: 24px;
|
|
}
|
|
.reset_btn {
|
|
width: 188px;
|
|
height: 48px;
|
|
background: #FFFFFF;
|
|
box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.04);
|
|
border-radius: 6px 6px 6px 6px;
|
|
border: 1px solid #3763FF;
|
|
text-align: center;
|
|
line-height: 48px;
|
|
font-size: 16px;
|
|
color: #3763FF;
|
|
cursor: pointer;
|
|
margin-left: 24px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
|
|
::v-deep .el-textarea__inner {
|
|
height: calc(100vh - 472px);
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
</style>
|