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.
258 lines
7.7 KiB
Vue
258 lines
7.7 KiB
Vue
|
|
<template>
|
|
<div class="evidence-content">
|
|
<div class="evidence-tree">
|
|
<el-tree
|
|
ref="tree"
|
|
node-key="id"
|
|
:data="treeData"
|
|
current-node-key="1"
|
|
:props="defaultProps"
|
|
highlight-current
|
|
default-expand-all
|
|
@node-click="handleNodeClick"
|
|
/>
|
|
</div>
|
|
<div class="evidence-main">
|
|
<div v-if="isEdit" class="flex-row" style="align-items: center; justify-content: space-between">
|
|
<div>
|
|
<el-button type="primary" icon="el-icon-folder-add" @click="addFolder">新建文件夹</el-button>
|
|
<el-button type="primary" icon="el-icon-circle-plus-outline" @click="addEvidence">添加证据</el-button>
|
|
</div>
|
|
|
|
<!-- <el-input v-model="searchName" placeholder="搜索名称" style="width: 300px" /> -->
|
|
</div>
|
|
<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>
|
|
<vxe-grid v-bind="gridOptions" style="margin-top: 10px">
|
|
<template #opera="{row}">
|
|
<el-button type="text" @click="handelEdit(row)">编辑</el-button>
|
|
<el-button type="text" style="color: red" @click="handleDel(row)">删除</el-button>
|
|
</template>
|
|
</vxe-grid>
|
|
<div style="text-align: center">
|
|
<cs-page
|
|
:page.sync="queryForm.page"
|
|
:limit.sync="queryForm.size"
|
|
:total="queryForm.total"
|
|
@pagination="fetchData"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<AddFolder ref="AddFolderRef" @addOk="getTreeList" />
|
|
<!--编辑/新增证据-->
|
|
<!-- <edit-evidence ref="edit" @onClose="fetchData" /> -->
|
|
<!--选择上传笔录方式-->
|
|
<!-- <SelectUploadType ref="SelectUploadTypeRef" @selectOk="handleSelect" /> -->
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import mixin from '@/views/mixin'
|
|
import EditEvidence from '@/views/caseDetails/components/edit/EditEvidence.vue'
|
|
import AddFolder from './AddEvidence/AddFolder.vue'
|
|
import { queryEvidenceList, deleteEvidence } from '@/api/caseDetails'
|
|
import { debounce } from '@/utils'
|
|
import { getCaseEvidenceFileTree, getCaseEvidenceDirectoryList } from '@/api/caseDetails/evidence'
|
|
import SelectUploadType from './SelectUploadType.vue'
|
|
export default {
|
|
name: 'CaseEvidence',
|
|
components: { EditEvidence, SelectUploadType, AddFolder },
|
|
mixins: [mixin],
|
|
props: {
|
|
// 是否编辑
|
|
isEdit: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
// 是否展开
|
|
isExpand: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
searchName: '',
|
|
gridOptions: {
|
|
...mixin.data().gridOptions,
|
|
columns: [
|
|
{ title: '序号', type: 'seq', width: 80 },
|
|
{ title: '证据名称', field: 'evidenceName' },
|
|
{ title: '证据类型', field: 'evidenceTypeDesc' },
|
|
// { title: '证件文件', field: 'confessionMaterial' },
|
|
{ title: '最新时间', field: 'updateTime' },
|
|
{ title: '操作', slots: { default: 'opera' }, fixed: 'right', width: '100px' }
|
|
],
|
|
data: [{}]
|
|
},
|
|
treeData: [],
|
|
selectId: '',
|
|
navList: ['全部'],
|
|
defaultProps: {
|
|
children: 'child',
|
|
label: 'directoryName'
|
|
}
|
|
}
|
|
},
|
|
watch: {
|
|
isExpand: {
|
|
handler: function(newVal, oldVal) {
|
|
if (newVal !== oldVal) {
|
|
this.tableHeight(this.isExpand ? this.isEdit ? 630 : 580 : this.isEdit ? 450 : 370)
|
|
}
|
|
},
|
|
immediate: true
|
|
},
|
|
searchName: function() {
|
|
this.debounceSearch(this)
|
|
}
|
|
},
|
|
mounted() {
|
|
this.caseId = this.$route.params.id
|
|
this.$nextTick(() => {
|
|
this.tableHeight(this.isExpand ? (this.isEdit ? 630 : 580) : (this.isEdit ? 450 : 370))
|
|
})
|
|
this.getTreeList()
|
|
this.fetchData()
|
|
},
|
|
methods: {
|
|
// 防抖查询数据
|
|
debounceSearch: debounce((_this) => {
|
|
_this.fetchData()
|
|
}),
|
|
addFolder() {
|
|
this.$refs.AddFolderRef.show()
|
|
},
|
|
// 添加证据
|
|
addEvidence() {
|
|
this.$router.push({ path: `/add-evidence/${this.caseId}`, query: { caseName: this.$route.params.caseName, caseNo: this.$route.query.caseNo }})
|
|
},
|
|
// 获取数据
|
|
fetchData() {
|
|
const params = {
|
|
caseId: this.caseId,
|
|
evidenceName: this.searchName,
|
|
pageNum: this.queryForm.page,
|
|
pageSize: this.queryForm.size,
|
|
directoryId: this.selectId === '1' ? '' : this.selectId
|
|
}
|
|
queryEvidenceList(params).then(res => {
|
|
this.gridOptions.data = res.data.records
|
|
this.queryForm.total = res.data.total
|
|
})
|
|
},
|
|
// 查询左侧树
|
|
getTreeList() {
|
|
getCaseEvidenceFileTree({ caseId: this.caseId }).then(res => {
|
|
if (res.code === 200) {
|
|
this.treeData = res.data
|
|
this.treeData.unshift({
|
|
directoryName: '全部',
|
|
id: '1'
|
|
})
|
|
// this.$refs.tree.setCurrentKey(this.treeData[0].id)
|
|
}
|
|
})
|
|
},
|
|
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
|
|
},
|
|
handleNodeClick(data) {
|
|
this.selectId = data.id
|
|
this.navList = []
|
|
this.navList = this.getParentNames(data, this.treeData)
|
|
this.navList.push(data.directoryName)
|
|
this.fetchData()
|
|
},
|
|
// 添加证据
|
|
handleAdd() {
|
|
// this.$refs.edit.show()
|
|
this.$refs.SelectUploadTypeRef.show()
|
|
},
|
|
// 编辑
|
|
handelEdit(row) {
|
|
if (row.contentType === '2') {
|
|
this.$router.push({ path: `/edit-evidence/${this.caseId}`, query: { caseName: this.$route.params.caseName, caseNo: this.$route.query.caseNo, evidenceId: row.id }})
|
|
} else {
|
|
this.$refs.edit.show(row, true)
|
|
}
|
|
},
|
|
handleSelect(val) {
|
|
val === '1' ? this.$refs.edit.show() : this.$router.push({ path: `/add-evidence/${this.caseId}`, query: { caseName: this.$route.params.caseName, caseNo: this.$route.query.caseNo }})
|
|
},
|
|
// 删除
|
|
handleDel(row) {
|
|
this.$baseConfirm('你确定要删除当前项吗', null, async() => {
|
|
const { code, msg } = await deleteEvidence({
|
|
evidenceId: row.id
|
|
})
|
|
code === 200 ? this.$baseMessage.success(msg || '删除成功!') : this.$baseMessage.error(msg || '删除成功!')
|
|
this.fetchData()
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.evidence-content {
|
|
display: flex;
|
|
.evidence-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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.evidence-main {
|
|
flex: 1;
|
|
}
|
|
.nav-list {
|
|
display: flex;
|
|
font-size: 16px;
|
|
color: #333333;
|
|
margin-bottom: 16px;
|
|
margin-top: 24px;
|
|
.nav-item {
|
|
display: flex;
|
|
span {
|
|
margin-right: 16px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|