Browse Source

页面优化

master
xuhuajiao 2 weeks ago
parent
commit
683ff2f934
  1. 11
      src/api/prearchiveLibrary/prearchiveLibrary.js
  2. 2
      src/assets/styles/prearchive-library.scss
  3. 15
      src/assets/styles/yxk-admin.scss
  4. 26
      src/utils/index.js
  5. 10
      src/views/archivesManage/managementLibrary/anjuan/tableList.vue
  6. 5
      src/views/archivesManage/managementLibrary/juannei/index.vue
  7. 4
      src/views/archivesManage/managementLibrary/module/collectHeader.vue
  8. 1
      src/views/collectReorganizi/collectionLibrary/index.vue
  9. 73
      src/views/components/category/PreviewForm.vue
  10. 5
      src/views/components/categoryTree.vue
  11. 6
      src/views/prearchiveLibrary/index.vue
  12. 32
      src/views/prearchiveLibrary/module/detail.vue
  13. 42
      src/views/prearchiveLibrary/treeList.vue
  14. 21
      src/views/preview/index.vue
  15. 36
      src/views/system/archiveScopeManage/index.vue
  16. 27
      src/views/system/archivesCategory/index.vue
  17. 35
      src/views/system/archivesClassify/index.vue
  18. 9
      src/views/system/groupManage/index.vue
  19. 53
      src/views/system/notifyManage/module/selectObj.vue

11
src/api/prearchiveLibrary/prearchiveLibrary.js

@ -117,13 +117,4 @@ export function FetchReDocumentBase64ByFileId(params) {
})
}
// downloadFile
export function FetchDownload(params) {
return request({
url: 'api/minioUpload/download',
method: 'get',
params
})
}
export default { add, prearchEdit, del, FetchInitPreDocument, FetchInitDocumentsViewTable, FetchDoeditDocument, FetchBatchToFile, FetchMergeToFile, FetchMove, FetchArchivesDetails, FetchFileListByDocumentId, FetchArchivesMetadata, FetchReDocumentBase64ByFileId, FetchDownload }
export default { add, prearchEdit, del, FetchInitPreDocument, FetchInitDocumentsViewTable, FetchDoeditDocument, FetchBatchToFile, FetchMergeToFile, FetchMove, FetchArchivesDetails, FetchFileListByDocumentId, FetchArchivesMetadata, FetchReDocumentBase64ByFileId }

2
src/assets/styles/prearchive-library.scss

@ -1,7 +1,5 @@
@import 'variables';
@import 'mixin';
.move-form{
::v-deep .el-dialog{
width: 1000px;

15
src/assets/styles/yxk-admin.scss

@ -1052,9 +1052,7 @@ input[type ='number'] {
&:hover{
background-color: #F5F9FC;
}
p, span, i{
// line-height: 40px;
}
p{
width: 300px;
overflow: hidden;
@ -2102,3 +2100,14 @@ input[type ='number'] {
color: #fff !important;
background-color: #0348f3 !important;
}
.el-tree{
.el-tooltip {
display: inline-block;
font-weight: normal;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: 200px;
}
}

26
src/utils/index.js

@ -474,29 +474,3 @@ export function saveByteArray(fileName, byte) {
link.download = fileName
link.click()
}
// 下载文件
export function downloadMinioFile(obj, name, suffix) {
// 校验参数,避免空值
if (!obj || !name || !suffix) {
console.error('下载参数缺失:obj/name/suffix不能为空')
return
}
try {
const blob = new Blob([obj])
const url = window.URL.createObjectURL(blob)
const link = document.createElement('a')
link.style.display = 'none'
link.href = url
const fileName = `${name}.${suffix}`
link.setAttribute('download', fileName)
document.body.appendChild(link)
link.click()
setTimeout(() => {
document.body.removeChild(link)
window.URL.revokeObjectURL(url)
}, 100)
} catch (err) {
console.error('下载工具函数执行失败:', err)
}
}

10
src/views/archivesManage/managementLibrary/anjuan/tableList.vue

@ -47,27 +47,21 @@
{{ scope.row[field.fieldName] }}
</template>
</el-table-column>
<el-table-column v-if="!isRecycle && selectedCategory.arrangeType===1" label="标签" width="88" align="center" :fixed="parentsData.fixedStatusSelect.includes(1) ? 'right' : false">
<!-- <el-table-column v-if="!isRecycle && selectedCategory.arrangeType===1" label="标签" width="88" align="center" :fixed="parentsData.fixedStatusSelect.includes(1) ? 'right' : false">
<template slot-scope="scope">
<!-- 未绑 / 已绑 -->
<span :class="['row-state', 'row-binding', scope.row.tid ? 'state-active' : '' ]">{{ scope.row.tid ? '已绑': '未绑' }}</span>
</template>
</el-table-column>
<el-table-column v-if="!isRecycle" label="装盒" width="88" align="center" :fixed="parentsData.fixedStatusSelect.includes(2) ? 'right' : false">
<!-- state-active 已装/已入/已借/已绑 -->
<template slot-scope="scope">
<!-- 未装 / 已装 -->
<span :class="['row-state', 'row-packing', scope.row.case_no ? 'state-active' : '' ]">{{ scope.row.case_no ? '已装': '未装' }}</span>
</template>
</el-table-column>
<el-table-column v-if="!isRecycle" label="入库" width="88" align="center" :fixed="parentsData.fixedStatusSelect.includes(3) ? 'right' : false">
<template slot-scope="scope">
<!-- <span class="row-state row-warehousing state-active">已入</span> -->
<span :class="['row-state', 'row-warehousing', scope.row.folder_location ? 'state-active' : '' ]">{{ scope.row.folder_location ? '已入': '未入' }}</span>
<!-- is_storage 为空的情况下即没装盒 / 0 未入 / 1 待入 / 2 已入 / 3 待出-->
<!-- <span :class="['row-state', 'row-warehousing', (storageTxt[scope.$index] === '已入' )? 'state-active' : '' ]">{{ storageTxt[scope.$index] }}</span> -->
</template>
</el-table-column>
</el-table-column> -->
<el-table-column v-if="!isRecycle && selectedCategory.arrangeType===1" label="借阅" width="88" align="center" :fixed="parentsData.fixedStatusSelect.includes(4) ? 'right' : false">
<template slot-scope="scope">
<span :class="['row-state', 'row-lending', scope.row.is_borrow ? 'state-active' : '' ]">{{ scope.row.is_borrow ? '已借': '未借' }}</span>

5
src/views/archivesManage/managementLibrary/juannei/index.vue

@ -58,9 +58,8 @@
</template>
</el-table-column>
<el-table-column v-if="!isRecycle" label="标签" width="88" align="center" :fixed="parentsData.fixedStatusSelect.includes(1) ? 'right' : false">
<!-- <el-table-column v-if="!isRecycle" label="标签" width="88" align="center" :fixed="parentsData.fixedStatusSelect.includes(1) ? 'right' : false">
<template slot-scope="scope">
<!-- 未绑 / 已绑 -->
<span :class="['row-state', 'row-binding', scope.row.tid ? 'state-active' : '' ]">{{ scope.row.tid ? '已绑': '未绑' }}</span>
</template>
</el-table-column>
@ -73,7 +72,7 @@
<template slot-scope="scope">
<span :class="['row-state', 'row-warehousing', scope.row.folder_location ? 'state-active' : '' ]">{{ scope.row.folder_location ? '已入': '未入' }}</span>
</template>
</el-table-column>
</el-table-column> -->
<el-table-column v-if="!isRecycle" label="借阅" width="88" align="center" :fixed="parentsData.fixedStatusSelect.includes(4) ? 'right' : false">
<template slot-scope="scope">
<span :class="['row-state', 'row-lending', scope.row.is_borrow ? 'state-active' : '' ]">{{ scope.row.is_borrow ? '已借': '未借' }}</span>

4
src/views/archivesManage/managementLibrary/module/collectHeader.vue

@ -97,12 +97,12 @@
<span>整理</span>
</template>
<el-menu-item-group class="collect-submenu-group">
<el-menu-item v-if="selectedCategory.arrangeType === 1" index="2-1" @click="bindingTag(selections)">标签绑定</el-menu-item>
<!-- <el-menu-item v-if="selectedCategory.arrangeType === 1" index="2-1" @click="bindingTag(selections)">标签绑定</el-menu-item>
<el-menu-item-group class="collect-submenu-group submenu-tree">
<template slot="title">档案装盒</template>
<el-menu-item index="2-2" @click="handlePackingBox(0)">装盒</el-menu-item>
<el-menu-item v-if="selectedCategory.arrangeType !== 1" index="2-3" @click="handlePackingBox(1)">分卷装盒</el-menu-item>
</el-menu-item-group>
</el-menu-item-group> -->
<el-menu-item-group class="collect-submenu-group submenu-tree">
<template slot="title">档案移交</template>
<el-menu-item index="2-4" @click="handleOnlineHandover">在线移交</el-menu-item>

1
src/views/collectReorganizi/collectionLibrary/index.vue

@ -796,4 +796,5 @@ export default {
}
}
}
</style>

73
src/views/components/category/PreviewForm.vue

@ -60,6 +60,9 @@
>
<i v-if="item.isInputClass === 'popover'" slot="suffix" class="el-input__icon iconfont icon-gengduo1" @click="handleCurrentFieldName(item)" />
</el-input>
<!-- <div v-if="shouldShowIcon(item)" :class="loadingStatus[item.fieldName] ?'auto-box loading-style':'auto-box'" :disabled="loadingStatus[item.fieldName]">
<i ref="iconRef" class="iconfont icon-zidonggengxin" @click="handleIconClick(item)" />
</div> -->
<!-- date -->
<!-- <el-date-picker
v-if="item.isInputClass === 'date'"
@ -188,6 +191,7 @@ import { getCurrentTime } from '@/utils/index'
import { reDocumentUpload } from '@/utils/upload'
import PreUpload from './preUpload4'
import { mapGetters } from 'vuex'
import Vue from 'vue'
export default {
name: 'PreviewForm',
@ -286,7 +290,16 @@ export default {
fileList: [],
archivesSummaryResponse: {},
pickerDateMap: {},
minioPreResult: {}
minioPreResult: {},
iconShowRule: {
'3-1': 'item_no',
'3-2': 'record_no',
'4-2': 'item_no',
'3-3': 'record_no',
'4-3': 'item_no'
},
isMaxLoading: false,
loadingStatus: {}
}
},
computed: {
@ -318,6 +331,47 @@ export default {
mounted() {
},
methods: {
shouldShowIcon(item) {
if (item.isInputClass !== 'number') return false
const ruleKey = `${this.isTitleType}-${this.selectedCategory.arrangeType}`
const targetField = this.iconShowRule[ruleKey]
return targetField && targetField === item.fieldName
},
async handleIconClick(item) {
const fieldName = item.fieldName
//
if (this.loadingStatus[fieldName]) {
console.log(`字段${fieldName}正在加载,禁止重复点击`)
return
}
Vue.set(this.loadingStatus, fieldName, true)
console.log(`字段${fieldName}加载状态:`, this.loadingStatus[fieldName])
// try {
// // 2.
// // const response = await new Promise((resolve) => {
// // setTimeout(() => {
// // resolve({ data: { code: 200, data: `NO-${Date.now().slice(-6)}` }})
// // }, 2000)
// // })
// // // 3.
// // if (response.data.code === 200) {
// // this.inputValue = response.data.data
// // this.$message?.success('') || alert('')
// // }
// } catch (error) {
// console.error('', error)
// this.$message?.error('') || alert('')
// } finally {
// // 4. /false
// Vue.set(this.loadingStatus, fieldName, false)
// console.log('isMaxLoading', this.isMaxLoading)
// }
},
preUplpadClose() {
this.$refs.preUploadRefs.handleClearData()
},
@ -1576,4 +1630,21 @@ export default {
::v-deep .hidden-picker-input .el-input__prefix {
left: 3px !important;
}
.auto-box{
position: absolute;
right: 38px;
top: 0;
i::before{
margin-right:0 !important;
}
}
.loading-style{
animation: rotate 3s linear infinite;
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% {transform: rotate(-360deg) }
}
</style>

5
src/views/components/categoryTree.vue

@ -312,8 +312,9 @@ export default {
overflow-y: scroll;
}
::v-deep .el-tree-node__children .custom-tree-node{
font-size: 14px;
::v-deep .el-tree-node__children .custom-tree-node,
::v-deep .el-tree-node__content .custom-tree-node{
font-size: 14px !important;
font-weight: normal;
}
</style>

6
src/views/prearchiveLibrary/index.vue

@ -581,6 +581,7 @@ export default {
<style lang='scss' scoped>
@import "~@/assets/styles/collect-reorganizi.scss";
@mixin management-fixed-style{
[data-theme="dark"] & {
background-color: #031435 !important;
@ -598,6 +599,11 @@ export default {
}
.preview-dialog .el-dialog .preview-content {
height: calc(100vh - 264px) !important;
}
.dialog-middle{
::v-deep .el-dialog{
width: 536px;
}
}
</style>

32
src/views/prearchiveLibrary/module/detail.vue

@ -77,7 +77,7 @@
<template slot-scope="scope">
<div class="handle-btn">
<el-button class="iconfont icon-sulan" @click="toPreview(scope.row)" />
<el-button class="iconfont icon-xiazai" @click="downloadFile(scope.row)" />
<!-- <el-button class="iconfont icon-xiazai" @click="downloadFile(scope.row)" /> -->
<!-- <el-button class="iconfont icon-dayin" /> -->
</div>
</template>
@ -109,8 +109,9 @@
import { form } from '@crud/crud'
import { FetchArchivesDetails, FetchFileListByDocumentId, FetchArchivesMetadata } from '@/api/prearchiveLibrary/prearchiveLibrary'
import { mapGetters } from 'vuex'
import { downloadMinioFile } from '@/utils/index'
import { downloadFile } from '@/utils/index'
import { getToken } from '@/utils/auth'
export default {
name: 'PrearchiveLibraryDetail',
components: { },
@ -150,33 +151,20 @@ export default {
mounted() {
},
methods: {
//
downloadFile(row) {
const url = this.baseApi + '/api/minioUpload/download' + row.file_path
// filePath
// bucketType 1 2
const url = this.baseApi + '/api/minioUpload/getFile?filePath=' + row.file_path + '&bucketType=1'
const fetchOptions = {
method: 'GET',
headers: {
'Authorization': getToken()
}
}
fetch(url, fetchOptions)
.then(res => {
if (!res.ok) {
throw new Error(`请求失败:${res.status} ${res.statusText}`)
}
return res.blob()
})
.then(blob => {
downloadMinioFile(blob, row.file_name.split('.')[0], row.file_type)
})
.catch((err) => {
console.error('下载失败详情:', err)
this.$message({
message: '下载文件失败,请检查权限或网络',
type: 'error',
offset: 8
})
fetch(url, fetchOptions).then(res => res.blob()).then(blob => {
downloadFile(blob, row.file_name.split('.')[0], row.file_type)
}).catch(() => {
this.$message({ message: '下载文件失败', type: 'error', offset: 8 })
})
},
toPreview(row) {

42
src/views/prearchiveLibrary/treeList.vue

@ -6,13 +6,35 @@
<!--门类树状结构-->
<div class="tree-scroll">
<el-tree ref="tree" v-loading="crud.loading" :data="crud.data" :props="defaultProps" node-key="keyId" :expand-on-click-node="false" highlight-current default-expand-all @node-click="handleNodeClick">
<span slot-scope="{ node, data }" class="custom-tree-node">
<span v-if="data.isType === 1 " class="iconFolder">
<span slot-scope="{node,data}" class="custom-tree-node">
<div v-if="data.isType === 1">
<span v-if="data.label.length <= 10 " class="iconFolder tree-text"> {{ data.label }}</span>
<el-tooltip
v-else
effect="dark"
:content="data.label"
:enterable="false"
placement="left"
>
<span class="iconFolder tree-text">
{{ data.label }}
</span>
<span v-if="data.isType === 2" class="iconFile">
</el-tooltip>
</div>
<div v-if="data.isType === 2">
<span v-if="data.label.length <= 10 " class="iconFile tree-text"> {{ data.label }}</span>
<el-tooltip
v-else
effect="dark"
:content="data.label"
:enterable="false"
placement="left"
>
<span class="iconFile tree-text">
{{ data.label }}
</span>
</el-tooltip>
</div>
</span>
</el-tree>
</div>
@ -81,7 +103,6 @@ export default {
isType: 1,
label: item.fonds.fonds_name,
children: item.document.map((doc, childIndex) => {
// id
const uniqueChildId = `${item.fonds.fonds_id}_${doc.id}_${childIndex}`
return {
...doc,
@ -120,7 +141,20 @@ export default {
[data-theme=dark] .elect-cont-left .container-left {
min-height: calc(100vh - 158px);
}
.container-left .el-tree{
margin: 0 !important;
}
.tree-scroll{
font-size: 14px;
height: calc(100vh - 178px);
overflow-y: scroll;
overflow-x: hidden;
}
.tree-text.el-tooltip {
font-weight: normal;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: 170px;
}
</style>

21
src/views/preview/index.vue

@ -64,6 +64,7 @@ import { downloadFile } from '@/utils/index'
import { mapGetters } from 'vuex'
import html2canvas from 'html2canvas' // html2Canvasprint-js
import printJS from 'print-js'
import { getToken } from '@/utils/auth'
export default {
name: 'Preview',
@ -166,11 +167,25 @@ export default {
},
//
downloadFile(row) {
const url = this.baseApi + '/downloadFile' + row.file_path
fetch(url).then(res => res.blob()).then(blob => {
// filePath
// bucketType 1 2
let bucketType = null
if (this.documentId) {
bucketType = 1
} else {
bucketType = 2
}
const url = this.baseApi + '/api/minioUpload/getFile?filePath=' + row.file_path + '&bucketType=' + bucketType
const fetchOptions = {
method: 'GET',
headers: {
'Authorization': getToken()
}
}
fetch(url, fetchOptions).then(res => res.blob()).then(blob => {
downloadFile(blob, row.file_name.split('.')[0], row.file_type)
}).catch(() => {
this.$message({ message: '下载文件失败!', type: 'error', offset: 8 })
this.$message({ message: '下载文件失败', type: 'error', offset: 8 })
})
},
selectFile(item) {

36
src/views/system/archiveScopeManage/index.vue

@ -17,7 +17,34 @@
:props="defaultProps"
:expand-on-click-node="false"
@node-click="handleNodeClick"
/>
>
<span slot-scope="{ node, data }" class="custom-tree-node">
<div v-if="data.isType === 1">
<span v-if="data.cnName.length <= 16 " class="iconFolder tree-text"> {{ data.cnName }}</span>
<el-tooltip v-else effect="dark" :content="data.cnName" :enterable="false" placement="left">
<span class="iconFolder tree-text">
{{ data.cnName }}
</span>
</el-tooltip>
</div>
<div v-if="data.isType === 2">
<span v-if="data.cnName.length <= 10 " class="iconArch tree-text"> {{ data.cnName }}</span>
<el-tooltip v-else effect="dark" :content="data.cnName" :enterable="false" placement="left">
<span class="iconArch tree-text">
{{ data.cnName }}
</span>
</el-tooltip>
</div>
<div v-if="data.isType ===3">
<span v-if="data.cnName.length <= 10 " class="iconFile tree-text"> {{ data.cnName }}</span>
<el-tooltip v-else effect="dark" :content="data.cnName" :enterable="false" placement="left">
<span class="iconFile tree-text">
{{ data.cnName }}
</span>
</el-tooltip>
</div>
</span>
</el-tree>
</el-scrollbar>
</div>
</div>
@ -149,6 +176,11 @@ export default {
}
.tree-scroll{
font-size: 14px;
height: calc(100vh - 178px);
overflow-y: scroll;
overflow-x: hidden;
}
.tree-text.el-tooltip {
width: 160px !important;
}
</style>

27
src/views/system/archivesCategory/index.vue

@ -33,15 +33,30 @@
<el-scrollbar style="height: calc(100vh - 230px);">
<el-tree ref="tree" v-loading="crud.loading" :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">
<div v-if="data.isType === 1">
<span v-if="data.cnName.length <= 16 " class="iconFolder tree-text"> {{ data.cnName }}</span>
<el-tooltip v-else effect="dark" :content="data.cnName" :enterable="false" placement="left">
<span class="iconFolder tree-text">
{{ data.cnName }}
</span>
<span v-if="data.isType === 2" class="iconArch">
</el-tooltip>
</div>
<div v-if="data.isType === 2">
<span v-if="data.cnName.length <= 10 " class="iconArch tree-text"> {{ data.cnName }}</span>
<el-tooltip v-else effect="dark" :content="data.cnName" :enterable="false" placement="left">
<span class="iconArch tree-text">
{{ data.cnName }}
</span>
<span v-if="data.isType === 3" class="iconFile">
</el-tooltip>
</div>
<div v-if="data.isType ===3">
<span v-if="data.cnName.length <= 10 " class="iconFile tree-text"> {{ data.cnName }}</span>
<el-tooltip v-else effect="dark" :content="data.cnName" :enterable="false" placement="left">
<span class="iconFile tree-text">
{{ data.cnName }}
</span>
</el-tooltip>
</div>
</span>
</el-tree>
</el-scrollbar>
@ -320,5 +335,11 @@ export default {
<style lang="scss" scoped>
.tree-scroll{
font-size: 14px;
height: calc(100vh - 178px);
overflow-y: scroll;
overflow-x: hidden;
}
.tree-text.el-tooltip {
width: 260px !important;
}
</style>

35
src/views/system/archivesClassify/index.vue

@ -16,7 +16,34 @@
:props="defaultProps"
:expand-on-click-node="false"
@node-click="handleNodeClick"
/>
>
<span slot-scope="{ node, data }" class="custom-tree-node">
<div v-if="data.isType === 1">
<span v-if="data.cnName.length <= 16 " class="iconFolder tree-text"> {{ data.cnName }}</span>
<el-tooltip v-else effect="dark" :content="data.cnName" :enterable="false" placement="left">
<span class="iconFolder tree-text">
{{ data.cnName }}
</span>
</el-tooltip>
</div>
<div v-if="data.isType === 2">
<span v-if="data.cnName.length <= 10 " class="iconArch tree-text"> {{ data.cnName }}</span>
<el-tooltip v-else effect="dark" :content="data.cnName" :enterable="false" placement="left">
<span class="iconArch tree-text">
{{ data.cnName }}
</span>
</el-tooltip>
</div>
<div v-if="data.isType ===3">
<span v-if="data.cnName.length <= 10 " class="iconFile tree-text"> {{ data.cnName }}</span>
<el-tooltip v-else effect="dark" :content="data.cnName" :enterable="false" placement="left">
<span class="iconFile tree-text">
{{ data.cnName }}
</span>
</el-tooltip>
</div>
</span>
</el-tree>
</el-scrollbar>
</div>
</div>
@ -128,5 +155,11 @@ export default {
}
.tree-scroll{
font-size: 14px;
height: calc(100vh - 178px);
overflow-y: scroll;
overflow-x: hidden;
}
.tree-text.el-tooltip {
width: 160px !important;
}
</style>

9
src/views/system/groupManage/index.vue

@ -77,7 +77,7 @@
<el-table ref="table" v-loading="crud.loading" highlight-current-row style="width: 100%;" :data="crud.data" @selection-change="crud.selectionChangeHandler" @current-change="handleCurrentChange">
<el-table-column type="selection" align="center" width="55" />
<el-table-column prop="fondsNo" label="全宗号" />
<el-table-column prop="fondsName" label="全宗名称" />
<el-table-column prop="fondsName" label="全宗名称" min-width="120" />
<el-table-column prop="deptsCount" label="部门" />
<el-table-column prop="fondsOrders" label="排序" />
<el-table-column label="状态" align="center" prop="fondsStatus" width="60">
@ -302,8 +302,13 @@ export default {
this.deleteData.forEach(val => {
ids.push(val.fondsId)
})
crudfonds.del(ids).then(() => {
crudfonds.del(ids).then((res) => {
console.log('res', res)
if (res !== 0) {
this.$message({ message: '删除成功', type: 'success', offset: 8 })
} else {
this.$message({ message: '删除失败', type: 'error', offset: 8 })
}
this.crud.delAllLoading = false
this.crud.refresh()
}).catch(err => {

53
src/views/system/notifyManage/module/selectObj.vue

@ -17,10 +17,18 @@
<el-tree ref="tree" :data="fondsDatas" :props="defaultProps" :expand-on-click-node="false" :default-expanded-keys="defaultExpandedKeys" node-key="id" highlight-current @node-click="handleNodeClick">
<template slot-scope="{ node, data }">
<div :class="{'top-level': data.id === 0}">
<span>
{{ data.fondsName }}
<span>{{ data.deptsName }}</span>
<span v-if="data.label.length <= 8 " class="tree-text"> {{ data.label }}</span>
<el-tooltip
v-else
effect="dark"
:content="data.label"
:enterable="false"
placement="left"
>
<span class="tree-text">
{{ data.label }}
</span>
</el-tooltip>
</div>
</template>
</el-tree>
@ -80,7 +88,7 @@ export default {
return {
fondsDatas: [],
defaultExpandedKeys: [],
defaultProps: { children: 'children', label: 'fondsName' },
defaultProps: { children: 'children', label: 'label' },
sendObjVisible: false,
selectObjForm: {
@ -124,10 +132,21 @@ export default {
parent.fondsName = '全宗选择'
FetchFondsAll().then(res => {
res.forEach(item => {
item.children = item.depts
// 1. fondsNamelabel
item.label = item.fondsName
// 2. depts -> childrendeptsNamelabel
if (item.depts && item.depts.length) {
item.children = this.formatDeptNodes(item.depts)
} else {
item.children = []
}
})
// label
parent.label = parent.fondsName
parent.children = res
this.fondsDatas.push(parent)
console.log('this.fondsDatas', this.fondsDatas)
this.$nextTick(() => {
Vue.set(this.defaultExpandedKeys, 0, this.fondsDatas[0].children[0].id)
this.$refs.tree.setCurrentKey(this.fondsDatas[0].children[0].id)
@ -135,6 +154,27 @@ export default {
})
})
},
// label
formatDeptNodes(depts) {
return depts.map(dept => {
const node = { ...dept }
node.label = dept.deptsName // deptsNamelabel
// childDepts
if (dept.childDepts && dept.childDepts.length) {
node.children = this.formatDeptNodes(dept.childDepts)
}
return node
})
},
// categorys
formatCategoryNodes(categorys) {
return categorys.map(cate => {
const node = { ...cate }
node.label = cate.cnName // cnNamelabel
return node
})
},
//
handleNodeClick(data) {
let params = {}
@ -359,4 +399,7 @@ export default {
background-color: #f5f9fc;
color: #0c0e1e;
}
.el-tree .el-tooltip{
width: 140px !important;
}
</style>
Loading…
Cancel
Save