7 changed files with 544 additions and 162 deletions
-
15src/assets/styles/yxk-admin.scss
-
268src/views/collectReorganizi/batchConnection/index.vue
-
72src/views/collectReorganizi/batchConnection/module/detail.vue
-
151src/views/collectReorganizi/batchConnection/module/form.vue
-
13src/views/collectReorganizi/batchConnection/table.json
-
181src/views/components/categoryTree.vue
@ -1,215 +1,165 @@ |
|||||
<template> |
<template> |
||||
<div class="app-container archives-container"> |
<div class="app-container archives-container"> |
||||
<div class="container-main" style="justify-content: flex-start;"> |
<div class="container-main" style="justify-content: flex-start;"> |
||||
<div class="elect-cont-left"> |
|
||||
<div class="container-left"> |
|
||||
<span class="right-top-line" /> |
|
||||
<span class="left-bottom-line" /> |
|
||||
<div class="arc-left-tree"> |
|
||||
<h3 class="arc-title arc-title-top">档案门类</h3> |
|
||||
<div class="tree-scroll"> |
|
||||
<el-tree ref="categroyTree" v-loading="crud.loading" class="arc-tree" :data="crud.data" :props="defaultProps" node-key="id" :expand-on-click-node="false" highlight-current @node-click="handleNodeClick"> |
|
||||
<span slot-scope="{ node, data }" class="custom-tree-node"> |
|
||||
<span v-if="data.isType === 1 " class="iconFolder"> |
|
||||
{{ data.cnName }} |
|
||||
</span> |
|
||||
<span v-if="data.isType === 2" class="iconArch"> |
|
||||
{{ data.cnName }} |
|
||||
</span> |
|
||||
<span v-if="data.isType === 3" class="iconFile"> |
|
||||
{{ data.cnName }} |
|
||||
</span> |
|
||||
</span> |
|
||||
</el-tree> |
|
||||
|
<CategoryTree ref="categoryTree" @nodeClick="handleNodeClick" /> |
||||
|
<div class="elect-cont-right"> |
||||
|
<div class="connection-header collect-header"> |
||||
|
<h4 class="is-anjuan">{{ currentCategory && currentCategory.cnName }} </h4> |
||||
|
<div class="head-search"> |
||||
|
<date-range-picker v-model="blurryTime" class="date-item" /> |
||||
|
<rrOperation /> |
||||
</div> |
</div> |
||||
|
<crudOperation> |
||||
|
<template v-slot:right> |
||||
|
<el-button size="mini" :disabled="crud.selections.length === 0" @click="doLoalHitch(crud.selections)"> |
||||
|
<i class="iconfont icon-bendiguajie" /> |
||||
|
本地挂接 |
||||
|
</el-button> |
||||
|
<el-button :loading="crud.downloadLoading" size="mini" :disabled="crud.selections.length === 0" @click="doExport(crud.selections)"> |
||||
|
<i class="iconfont icon-daochu" /> |
||||
|
导出 |
||||
|
</el-button> |
||||
|
</template> |
||||
|
</crudOperation> |
||||
</div> |
</div> |
||||
|
<el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" @selection-change="crud.selectionChangeHandler" @row-dblclick="handleDetail"> |
||||
|
<el-table-column type="selection" align="center" width="55" /> |
||||
|
<el-table-column prop="code" label="编号" width="300" /> |
||||
|
<el-table-column prop="create_by" label="操作人" width="100" /> |
||||
|
<el-table-column prop="create_time" label="操作时间"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div>{{ scope.row.create_time | parseTime }}</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="type" label="重复检验方式" /> |
||||
|
<el-table-column prop="filed" label="挂接字段" /> |
||||
|
<el-table-column prop="total" label="挂接结果" width="240"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div>共 {{ scope.row.total }} 条原文，成功<span class="success-status"> {{ scope.row.success }} </span>条，失败<span class="error-status"> {{ scope.row.error }} </span>条</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<!--分页组件--> |
||||
|
<pagination v-if="crud.data.length !== 0" /> |
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
<div class="elect-cont-right" /> |
|
||||
</div> |
|
||||
|
<LocalForm ref="localForm" /> |
||||
|
<HitchDetail ref="mDetail" /> |
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
import crudCategory from '@/api/category/category' |
|
||||
import CRUD, { presenter, header } from '@crud/crud' |
|
||||
|
// import crudConnection from '@/api/system/role' |
||||
|
import crudRoles from '@/api/system/role' |
||||
|
import CRUD, { presenter, header, crud } from '@crud/crud' |
||||
|
import DateRangePicker from '@/components/DateRangePicker' |
||||
|
import rrOperation from '@crud/RR.operation' |
||||
|
import crudOperation from '@crud/CRUD.operation' |
||||
|
import pagination from '@crud/Pagination' |
||||
|
import CategoryTree from '@/views/components/categoryTree' |
||||
|
import LocalForm from './module/form' |
||||
|
import HitchDetail from './module/detail' |
||||
|
// import { exportFile } from '@/utils/index' |
||||
|
// import qs from 'qs' |
||||
|
import { mapGetters } from 'vuex' |
||||
|
|
||||
|
import tableData from './table.json' |
||||
|
|
||||
export default { |
export default { |
||||
name: 'BatchConnection', |
name: 'BatchConnection', |
||||
components: { }, |
|
||||
|
components: { CategoryTree, LocalForm, HitchDetail, DateRangePicker, rrOperation, crudOperation, pagination }, |
||||
cruds() { |
cruds() { |
||||
return [ |
return [ |
||||
CRUD({ |
CRUD({ |
||||
title: '批量挂接', url: 'api/category/menu', |
|
||||
crudMethod: { ...crudCategory }, |
|
||||
|
title: '批量挂接', url: 'api/role/initRoleList', |
||||
|
crudMethod: { ...crudRoles }, |
||||
optShow: { |
optShow: { |
||||
add: false, |
add: false, |
||||
edit: false, |
edit: false, |
||||
del: false, |
del: false, |
||||
|
reset: true, |
||||
download: false, |
download: false, |
||||
group: false |
group: false |
||||
} |
} |
||||
}) |
}) |
||||
] |
] |
||||
}, |
}, |
||||
mixins: [presenter(), header()], |
|
||||
|
mixins: [presenter(), header(), crud()], |
||||
props: { |
props: { |
||||
}, |
}, |
||||
data() { |
data() { |
||||
return { |
return { |
||||
defaultProps: { |
|
||||
children: 'children', |
|
||||
label: 'cnName' |
|
||||
}, |
|
||||
selectedCategory: {} |
|
||||
|
currentCategory: null, |
||||
|
blurryTime: null |
||||
} |
} |
||||
}, |
}, |
||||
watch: { |
|
||||
|
computed: { |
||||
|
...mapGetters([ |
||||
|
'baseApi' |
||||
|
]) |
||||
}, |
}, |
||||
created() { |
created() { |
||||
}, |
}, |
||||
mounted() { |
mounted() { |
||||
}, |
}, |
||||
methods: { |
methods: { |
||||
filterData(data) { |
|
||||
return data.filter(node => { |
|
||||
if (node.children && node.children.length > 0) { |
|
||||
node.children = this.filterData(node.children) // 递归处理子节点 |
|
||||
|
[CRUD.HOOK.beforeRefresh]() { |
||||
|
if (this.blurryTime) { |
||||
|
this.crud.query.startTime = this.blurryTime[0] |
||||
|
this.crud.query.endTime = this.blurryTime[1] |
||||
} |
} |
||||
return node.isType !== 3 // 过滤掉isType为3的节点 |
|
||||
}) |
|
||||
}, |
}, |
||||
// 逆归实现 获取指定元素 |
|
||||
findNode(tree, func) { |
|
||||
for (const node of tree) { |
|
||||
if (func(node)) return node |
|
||||
if (node.children) { |
|
||||
const res = this.findNode(node.children, func) |
|
||||
if (res) return res |
|
||||
} |
|
||||
} |
|
||||
return null |
|
||||
|
[CRUD.HOOK.afterRefresh]() { |
||||
|
this.crud.data = tableData |
||||
}, |
}, |
||||
// 展开选中的父级 |
|
||||
expandParents(node) { |
|
||||
node.expanded = true |
|
||||
if (node.parent) { |
|
||||
this.expandParents(node.parent) |
|
||||
} |
|
||||
|
handleNodeClick(data) { |
||||
|
this.currentCategory = data |
||||
}, |
}, |
||||
[CRUD.HOOK.afterRefresh]() { |
|
||||
this.crud.data = this.filterData(this.crud.data) |
|
||||
this.$nextTick(() => { |
|
||||
let currentKey |
|
||||
if (localStorage.getItem('currentArchivesKey')) { |
|
||||
currentKey = JSON.parse(localStorage.getItem('currentArchivesKey')) |
|
||||
// 删除门类节点后 |
|
||||
if (this.$refs.categroyTree.getCurrentKey(currentKey.id) == null) { |
|
||||
localStorage.removeItem('currentArchivesKey') |
|
||||
} |
|
||||
// 缓存的门类节点判断 |
|
||||
if (currentKey.isType === 1) { |
|
||||
if (currentKey.children.length !== 0) { |
|
||||
currentKey = this.findNode(currentKey.children, (node) => { |
|
||||
return node.isType !== 1 |
|
||||
}) |
|
||||
} |
|
||||
} |
|
||||
} else { |
|
||||
// 默认 |
|
||||
if (this.crud.data[0].isType === 1) { |
|
||||
currentKey = this.findNode(this.crud.data[0].children, (node) => { |
|
||||
return node.isType !== 1 |
|
||||
}) |
|
||||
} else { |
|
||||
currentKey = this.crud.data[0] |
|
||||
} |
|
||||
} |
|
||||
if (currentKey.id) { |
|
||||
// 设置某个节点的当前选中状态 |
|
||||
this.$refs.categroyTree.setCurrentKey(currentKey.id) |
|
||||
this.$nextTick(() => { |
|
||||
// 设置某个节点的父级展开 |
|
||||
const selectedKey = this.$refs.categroyTree.getCurrentNode() |
|
||||
if (this.$refs.categroyTree.getNode(selectedKey) && this.$refs.categroyTree.getNode(selectedKey).parent) { |
|
||||
this.expandParents(this.$refs.categroyTree.getNode(selectedKey).parent) |
|
||||
} |
|
||||
// 选中节点的门类详情 |
|
||||
this.handleNodeClick(selectedKey) |
|
||||
|
doLoalHitch(data) { |
||||
|
this.$refs.localForm.localHitchVisible = true |
||||
|
}, |
||||
|
handleDetail() { |
||||
|
this.$refs.mDetail.hitchDetialVisible = true |
||||
|
}, |
||||
|
doExport(data) { |
||||
|
crud.downloadLoading = true |
||||
|
this.$confirm('此操作将导出所选数据' + '<span>你是否还要继续？</span>', '提示', { |
||||
|
confirmButtonText: '继续', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning', |
||||
|
dangerouslyUseHTMLString: true |
||||
|
}).then(() => { |
||||
|
const ids = [] |
||||
|
data.forEach(val => { |
||||
|
ids.push(val.id) |
||||
}) |
}) |
||||
} |
|
||||
|
// const params = { |
||||
|
// 'roleIds': ids |
||||
|
// } |
||||
|
// exportFile(this.baseApi + '/api/role/exportRole?' + qs.stringify(params, { indices: false })) |
||||
|
}).catch(() => { |
||||
}) |
}) |
||||
}, |
|
||||
handleNodeClick(val) { |
|
||||
this.selectedCategory = val |
|
||||
// 缓存当前的选中的 |
|
||||
localStorage.setItem('currentArchivesKey', JSON.stringify(val)) |
|
||||
} |
} |
||||
} |
} |
||||
} |
} |
||||
</script> |
</script> |
||||
|
|
||||
<style lang="scss" scoped> |
<style lang="scss" scoped> |
||||
.elect-cont-left{ |
|
||||
width: 296px; |
|
||||
padding: 0 !important; |
|
||||
} |
|
||||
[data-theme=light] .elect-cont-left .container-left { |
|
||||
min-height: calc(100vh - 140px); |
|
||||
} |
|
||||
[data-theme=dark] .elect-cont-left .container-left { |
|
||||
min-height: calc(100vh - 160px); |
|
||||
} |
|
||||
.openSidebar .elect-cont-right { |
|
||||
width: calc(100vw - 592px); |
|
||||
} |
|
||||
// [data-theme=light] .elect-cont-right .container-right.tab-content { |
|
||||
// min-height: calc(100vh - 200px) !important; |
|
||||
// } |
|
||||
|
|
||||
[data-theme=light] .elect-cont-right { |
|
||||
padding: 20px 0 !important; |
|
||||
} |
|
||||
[data-theme=dark] .elect-cont-right { |
|
||||
margin-top: 0 !important; |
|
||||
} |
|
||||
.arc-title{ |
|
||||
position: relative; |
|
||||
height: 48px; |
|
||||
line-height: 48px; |
|
||||
text-align: center; |
|
||||
font-size: 16px; |
|
||||
color: #0C0E1E; |
|
||||
background-color: #F3F5F8; |
|
||||
&::after{ |
|
||||
content: ""; |
|
||||
position: absolute; |
|
||||
right: 12px; |
|
||||
bottom: 0; |
|
||||
|
.connection-header{ |
||||
|
padding: 0 10px 0 20px; |
||||
|
height: auto; |
||||
|
border-top: none; |
||||
|
::v-deep .el-date-editor.el-input, .el-date-editor.el-input__inner { |
||||
|
width: 220px; |
||||
} |
} |
||||
} |
|
||||
.arc-title-top{ |
|
||||
&::after{ |
|
||||
width: 44px; |
|
||||
height: 35px; |
|
||||
background: url("~@/assets/images/collect/daml.png") no-repeat; |
|
||||
background-size: 100% 100%; |
|
||||
} |
|
||||
} |
|
||||
.arc-title-bottom{ |
|
||||
&::after{ |
|
||||
width: 41px; |
|
||||
height: 40px; |
|
||||
background: url("~@/assets/images/collect/kssx.png") no-repeat; |
|
||||
background-size: 100% 100%; |
|
||||
|
.crud-opts{ |
||||
|
display: block; |
||||
} |
} |
||||
} |
} |
||||
.arc-tree{ |
|
||||
padding: 0 20px; |
|
||||
overflow: hidden; |
|
||||
overflow-y: scroll; |
|
||||
|
.success-status{ |
||||
|
color: #2ECAAC; |
||||
} |
} |
||||
|
|
||||
::v-deep .el-tree-node__children .custom-tree-node{ |
|
||||
font-size: 14px; |
|
||||
|
.error-status{ |
||||
|
color: #ED4A41; |
||||
} |
} |
||||
</style> |
</style> |
||||
@ -0,0 +1,72 @@ |
|||||
|
<template> |
||||
|
<!-- 挂接详情 --> |
||||
|
<el-dialog title="挂接详情" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :visible.sync="hitchDetialVisible"> |
||||
|
<div class="setting-dialog"> |
||||
|
<ul class="hitch-info"> |
||||
|
<li><span>操作编号：</span>e57d742c-7d0d-4704-a12a-f9d8d2777d24</li> |
||||
|
<li><span style="width: 114px;">重复验证方式：</span>跳过</li> |
||||
|
<li><span>操作人：</span>admin</li> |
||||
|
<li><span style="width: 114px;">操作时间：</span>2016-09-21 08:50:08</li> |
||||
|
<li style="width: 100%;"><span>挂接字段：</span>$archival_code$</li> |
||||
|
<li style="width: 100%;"><span>挂接结果：</span>共 2 条原文，成功 1 条，失败 1 条</li> |
||||
|
</ul> |
||||
|
<el-table ref="table" :data="tableData" style="width: 100%;"> |
||||
|
<el-table-column prop="code" label="文件名称" /> |
||||
|
<el-table-column prop="create_by" label="操作结果" /> |
||||
|
<el-table-column prop="type" label="详情" /> |
||||
|
<el-table-column prop="create_time" label="操作时间"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div>{{ scope.row.create_time | parseTime }}</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="filed" label="所属档案" /> |
||||
|
</el-table> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'ConnectionDetail', |
||||
|
components: { }, |
||||
|
mixins: [], |
||||
|
data() { |
||||
|
return { |
||||
|
hitchDetialVisible: false, |
||||
|
tableData: [] |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
}, |
||||
|
mounted() { |
||||
|
}, |
||||
|
methods: { |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
::v-deep .el-dialog{ |
||||
|
width: 860px; |
||||
|
.el-dialog__body{ |
||||
|
padding: 10px 0 30px 0; |
||||
|
} |
||||
|
} |
||||
|
.hitch-info{ |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
justify-content: space-between; |
||||
|
margin-bottom: 10px; |
||||
|
li{ |
||||
|
width: 50%; |
||||
|
font-size: 14px; |
||||
|
line-height: 28px; |
||||
|
span{ |
||||
|
display: inline-block; |
||||
|
width:80px; |
||||
|
text-align: right; |
||||
|
color: #0C0E1E; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,151 @@ |
|||||
|
<template> |
||||
|
<!-- 本地挂接 --> |
||||
|
<el-dialog title="本地挂接" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :visible.sync="localHitchVisible"> |
||||
|
<el-form ref="form" :model="form" :rules="rules" label-width="120px"> |
||||
|
<el-form-item label="重复验证方式" prop="hitchType"> |
||||
|
<el-select v-model="form.hitchType" placeholder="请选择" style="width: 400px;"> |
||||
|
<el-option |
||||
|
v-for="item in typeOptions" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="挂接字段" prop="hitchFiled"> |
||||
|
<el-select v-model="form.hitchFiled" placeholder="请选择" style="width: 400px;"> |
||||
|
<el-option |
||||
|
v-for="item in options" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="挂接详情" prop="hitchRemark"> |
||||
|
<el-input v-model="form.hitchRemark" style="width: 400px;" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="上传附件" prop="file"> |
||||
|
<div class="upload-bgColor"> |
||||
|
<input class="upload-input" type="file" @change="handleFile"> |
||||
|
<el-button size="small" type="primary"><i class="iconfont icon-shangchuan" />点击上传</el-button> |
||||
|
</div> |
||||
|
<div v-for="item in fileList" :key="item.name" class="file-list"> |
||||
|
<i class="iconfont icon-xiaowenjian" /> |
||||
|
{{ item.name }} |
||||
|
</div> |
||||
|
<el-input v-show="false" v-model="form.file" /> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button type="text" @click="handleCancel">取消</el-button> |
||||
|
<el-button type="primary" @click.native="handleComfired">确定</el-button> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'LocalHitch', |
||||
|
components: { }, |
||||
|
mixins: [], |
||||
|
data() { |
||||
|
return { |
||||
|
localHitchVisible: false, |
||||
|
form: { |
||||
|
hitchType: null, |
||||
|
hitchFiled: null, |
||||
|
hitchRemark: null, |
||||
|
file: null |
||||
|
}, |
||||
|
fileList: [], |
||||
|
typeOptions: [ |
||||
|
{ |
||||
|
value: '1', |
||||
|
label: '跳过' |
||||
|
}, |
||||
|
{ |
||||
|
value: '2', |
||||
|
label: '覆盖' |
||||
|
}, |
||||
|
{ |
||||
|
value: '3', |
||||
|
label: '追加' |
||||
|
} |
||||
|
], |
||||
|
options: [ |
||||
|
{ |
||||
|
value: 'archival', |
||||
|
label: '档号' |
||||
|
} |
||||
|
], |
||||
|
rules: { |
||||
|
hitchType: [ |
||||
|
{ required: true, message: '请选择', trigger: 'change' } |
||||
|
], |
||||
|
hitchFiled: [ |
||||
|
{ required: true, message: '请选择', trigger: 'change' } |
||||
|
], |
||||
|
hitchRemark: [ |
||||
|
{ required: true, message: '请输入', trigger: 'blur' } |
||||
|
], |
||||
|
file: [ |
||||
|
{ required: true, message: '请选择', trigger: 'change' } |
||||
|
] |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
}, |
||||
|
mounted() { |
||||
|
}, |
||||
|
methods: { |
||||
|
handleFile(event) { |
||||
|
const files = event.target.files |
||||
|
// const file = files[0] // 获取上传的文件 |
||||
|
// const allowedExtensions = /(\.xlsx)$/i // 定义允许上传的文件格式，这里只限制为xlsx格式 |
||||
|
// if (!allowedExtensions.exec(file.name)) { |
||||
|
// this.$message.warning('只能上传Excel文件！') // 弹出提示信息 |
||||
|
// event.target.value = '' // 清空文件输入框内容 |
||||
|
// return false |
||||
|
// } |
||||
|
for (let i = 0; i < files.length; i++) { |
||||
|
this.fileList = [] |
||||
|
this.form.file = null |
||||
|
this.fileList.push(files[i]) |
||||
|
this.form.file = files[i] |
||||
|
} |
||||
|
}, |
||||
|
handleCancel() { |
||||
|
this.$refs['form'].resetFields() |
||||
|
this.fileList = [] |
||||
|
this.form.file = null |
||||
|
this.localHitchVisible = false |
||||
|
}, |
||||
|
handleComfired() { |
||||
|
this.$refs['form'].validate((valid) => { |
||||
|
if (valid) { |
||||
|
this.localHitchVisible = false |
||||
|
} else { |
||||
|
return false |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
::v-deep .el-dialog{ |
||||
|
width: 585px; |
||||
|
} |
||||
|
.dialog-footer{ |
||||
|
margin-top: 0; |
||||
|
} |
||||
|
|
||||
|
.file-list{ |
||||
|
width: 400px; |
||||
|
font-size: 12px; |
||||
|
color: #A6ADB6; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,13 @@ |
|||||
|
[ |
||||
|
{ |
||||
|
"id": "005E76FEC5A2AAB368CA1F", |
||||
|
"code": "e57d742c-7d0d-4704-a12a-f9d8d2777d24", |
||||
|
"type": "跳过", |
||||
|
"filed": "$archival_code$", |
||||
|
"total": 5, |
||||
|
"success": 5, |
||||
|
"error": 0, |
||||
|
"create_by": "admin", |
||||
|
"create_time": 1687330805000 |
||||
|
} |
||||
|
] |
||||
@ -0,0 +1,181 @@ |
|||||
|
<template> |
||||
|
<div class="elect-cont-left"> |
||||
|
<div class="container-left"> |
||||
|
<span class="right-top-line" /> |
||||
|
<span class="left-bottom-line" /> |
||||
|
<div class="arc-left-tree"> |
||||
|
<h3 class="arc-title arc-title-top">档案门类</h3> |
||||
|
<div class="tree-scroll"> |
||||
|
<el-tree ref="tree" v-loading="loading" class="arc-tree" :data="categroyTree" :props="defaultProps" node-key="id" :expand-on-click-node="false" highlight-current @node-click="handleNodeClick"> |
||||
|
<span slot-scope="{ node, data }" class="custom-tree-node"> |
||||
|
<span v-if="data.isType === 1 " class="iconFolder"> |
||||
|
{{ data.cnName }} |
||||
|
</span> |
||||
|
<span v-if="data.isType === 2" class="iconArch"> |
||||
|
{{ data.cnName }} |
||||
|
</span> |
||||
|
<span v-if="data.isType === 3" class="iconFile"> |
||||
|
{{ data.cnName }} |
||||
|
</span> |
||||
|
</span> |
||||
|
</el-tree> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { FetchCategoryMenu } from '@/api/system/category/category' |
||||
|
export default { |
||||
|
name: 'CategoryTree', |
||||
|
data() { |
||||
|
return { |
||||
|
categroyTree: [], |
||||
|
loading: false, |
||||
|
defaultProps: { |
||||
|
children: 'children', |
||||
|
label: 'cnName' |
||||
|
}, |
||||
|
selectedCategory: {} |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
}, |
||||
|
created() { |
||||
|
this.getCateTree() |
||||
|
}, |
||||
|
mounted() { |
||||
|
}, |
||||
|
methods: { |
||||
|
filterData(data) { |
||||
|
return data.filter(node => { |
||||
|
if (node.children && node.children.length > 0) { |
||||
|
node.children = this.filterData(node.children) // 递归处理子节点 |
||||
|
} |
||||
|
return node.isType !== 3 // 过滤掉isType为3的节点 |
||||
|
}) |
||||
|
}, |
||||
|
// 逆归实现 获取指定元素 |
||||
|
findNode(tree, func) { |
||||
|
for (const node of tree) { |
||||
|
if (func(node)) return node |
||||
|
if (node.children) { |
||||
|
const res = this.findNode(node.children, func) |
||||
|
if (res) return res |
||||
|
} |
||||
|
} |
||||
|
return null |
||||
|
}, |
||||
|
// 展开选中的父级 |
||||
|
expandParents(node) { |
||||
|
node.expanded = true |
||||
|
if (node.parent) { |
||||
|
this.expandParents(node.parent) |
||||
|
} |
||||
|
}, |
||||
|
getCateTree() { |
||||
|
this.loading = true |
||||
|
FetchCategoryMenu().then(res => { |
||||
|
this.categroyTree = this.filterData(res) |
||||
|
this.$nextTick(() => { |
||||
|
let currentKey |
||||
|
if (this.categroyTree[0].isType === 1) { |
||||
|
currentKey = this.findNode(this.categroyTree[0].children, (node) => { |
||||
|
return node.isType !== 1 |
||||
|
}) |
||||
|
} else { |
||||
|
currentKey = this.categroyTree[0] |
||||
|
} |
||||
|
if (currentKey.id) { |
||||
|
// 设置某个节点的当前选中状态 |
||||
|
this.$refs.tree.setCurrentKey(currentKey.id) |
||||
|
this.$nextTick(() => { |
||||
|
// 设置某个节点的父级展开 |
||||
|
const selectedKey = this.$refs.tree.getCurrentNode() |
||||
|
if (this.$refs.tree.getNode(selectedKey) && this.$refs.tree.getNode(selectedKey).parent) { |
||||
|
this.expandParents(this.$refs.tree.getNode(selectedKey).parent) |
||||
|
} |
||||
|
// 选中节点的门类详情 |
||||
|
this.handleNodeClick(selectedKey) |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
this.loading = false |
||||
|
}) |
||||
|
}, |
||||
|
handleNodeClick(val) { |
||||
|
this.selectedCategory = val |
||||
|
if (val.cnName) { |
||||
|
this.$emit('nodeClick', val) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.elect-cont-left{ |
||||
|
width: 296px; |
||||
|
padding: 0 !important; |
||||
|
} |
||||
|
[data-theme=light] .elect-cont-left .container-left { |
||||
|
min-height: calc(100vh - 140px); |
||||
|
} |
||||
|
[data-theme=dark] .elect-cont-left .container-left { |
||||
|
min-height: calc(100vh - 160px); |
||||
|
} |
||||
|
.openSidebar .elect-cont-right { |
||||
|
width: calc(100vw - 592px); |
||||
|
} |
||||
|
// [data-theme=light] .elect-cont-right .container-right.tab-content { |
||||
|
// min-height: calc(100vh - 200px) !important; |
||||
|
// } |
||||
|
|
||||
|
[data-theme=light] .elect-cont-right { |
||||
|
padding: 20px 0 !important; |
||||
|
} |
||||
|
[data-theme=dark] .elect-cont-right { |
||||
|
margin-top: 0 !important; |
||||
|
} |
||||
|
.arc-title{ |
||||
|
position: relative; |
||||
|
height: 48px; |
||||
|
line-height: 48px; |
||||
|
text-align: center; |
||||
|
font-size: 16px; |
||||
|
color: #0C0E1E; |
||||
|
background-color: #F3F5F8; |
||||
|
&::after{ |
||||
|
content: ""; |
||||
|
position: absolute; |
||||
|
right: 12px; |
||||
|
bottom: 0; |
||||
|
} |
||||
|
} |
||||
|
.arc-title-top{ |
||||
|
&::after{ |
||||
|
width: 44px; |
||||
|
height: 35px; |
||||
|
background: url("~@/assets/images/collect/daml.png") no-repeat; |
||||
|
background-size: 100% 100%; |
||||
|
} |
||||
|
} |
||||
|
.arc-title-bottom{ |
||||
|
&::after{ |
||||
|
width: 41px; |
||||
|
height: 40px; |
||||
|
background: url("~@/assets/images/collect/kssx.png") no-repeat; |
||||
|
background-size: 100% 100%; |
||||
|
} |
||||
|
} |
||||
|
.arc-tree{ |
||||
|
padding: 0 20px; |
||||
|
overflow: hidden; |
||||
|
overflow-y: scroll; |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-tree-node__children .custom-tree-node{ |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue