feat: 增加搜索功能,logManage左侧树暂时改为加载json

This commit is contained in:
Xu Zhimeng 2023-05-23 16:30:09 +08:00
parent ce82c2c7ea
commit 69cd211afb
8 changed files with 472 additions and 182 deletions

View File

@ -1,6 +1,6 @@
<template>
<div class="tree-with-line">
<a-tree v-bind="$attrs" :defaultExpandAll="true" :selected-keys="selectedKeys" @select="onSelect">
<a-tree v-bind="$attrs" :defaultExpandedKeys="defaultExpandedKeys" :selected-keys="selectedKeys" @select="onSelect">
<template slot="switcherIcon">
<div></div>
</template>
@ -12,6 +12,9 @@ export default {
props: {
selectedKeys: {
type: Array
},
defaultExpandedKeys: {
type: Array
}
},
methods: {

View File

@ -127,8 +127,9 @@ body {
}
&-clear,
&-icon {
color: #01b6e3 !important;
background-color: #03353f !important;
>svg {
display: none;
}
}
}
@ -287,6 +288,9 @@ body {
background-color: transparent;
}
}
&-clear-icon {
color: #00e9fe !important;
}
}
// 单选样式
@ -420,6 +424,16 @@ body {
}
}
}
&-clear-icon {
color: #00e9fe !important;
background-color: #03353f !important;
}
&-open {
.ant-select-clear-icon {
background-color: #055565 !important;
}
}
}
// 下拉菜单

View File

@ -17,7 +17,7 @@
</template>
<!-- 标题结束 -->
<!-- 内容 -->
<tree-with-line :treeData="treeData" :selected-keys.sync="selectedKeys" @select="onSelect"> </tree-with-line>
<tree-with-line :treeData="treeData" :selected-keys.sync="selectedKeys" :expanded-keys.sync="expandedKeys" @select="onSelect"> </tree-with-line>
<!-- 内容结束 -->
</a-card>
<div class="log-list">
@ -47,7 +47,7 @@
</div>
<custom-modal title="Log" v-model="visible" :show-footer="false">
这里是Log内容
这里是Log内容
</custom-modal>
</div>
</template>
@ -55,6 +55,7 @@
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import TreeWithLine from '@/components/TreeWithLine/index.vue'
import { downloadFile, getAction } from '../../api/manage'
import TreeJson from './tree.json'
const columns = [
{
@ -94,64 +95,18 @@ export default {
list: '/test'
},
isGettingTreeData: false, //
treeData: [
treeData: [],
selectedKeys: [],
expandedKeys: [],
dataSource: [
{
title: 'Db',
key: '1',
children: [
{
title: '2022',
key: '1-1',
children: [
{
title: '04',
key: '1-1-1'
},
{
title: '05',
key: '1-1-2'
}
]
},
{
title: '2023',
key: '1-2',
children: [
{
title: '04',
key: '1-2-1'
},
{
title: '05',
key: '1-2-2'
}
]
}
]
},
{
title: 'Error',
key: '2',
children: [
{
title: '2022',
key: '2-1',
children: [
{
title: '04',
key: '2-1-1'
},
{
title: '05',
key: '2-1-2'
}
]
}
]
id: 1,
name: 'DEX33_002-20220512_0723_S_FULL_9011.9.log',
date: '2022-05-13',
size: '105KB',
fileName: 'test.txt'
}
],
selectedKeys: [],
dataSource: [{ id: 1, name: 'DEX33_002-20220512_0723_S_FULL_9011.9.log', date: '2022-05-13', size: '105KB', fileName: 'test.txt' }],
visible: false
}
},
@ -159,7 +114,7 @@ export default {
this.getTreeData()
},
methods: {
async getTreeData () {
async getTreeData() {
try {
this.isGettingTreeData = true
const res = await getAction('/logManage/findFtpFolders')
@ -167,13 +122,36 @@ export default {
} catch (error) {
console.error(error)
this.$message.error('Get Tree Data Failed')
this.selectedKeys = ['1-1-2']
this.treeData = this.buildTreeData(TreeJson)
console.log('%c [ this.treeData ]-125', 'font-size:13px; background:pink; color:#bf2c9f;', this.treeData)
const firstNode = this.treeData[0]
this.selectedKeys = [firstNode.key]
this.expandedKeys = [firstNode.key]
this.onSelect()
} finally {
this.isGettingTreeData = false
}
},
onSelect () {
/**
* @param {Array<any>} treeJson
*/
buildTreeData(treeJson) {
const tree = []
treeJson.forEach(item => {
const treeNode = {
title: item.name,
key: item.path,
children: []
}
if (item.children && item.children.length) {
treeNode.children.push(...this.buildTreeData(item.children))
}
tree.push(treeNode)
})
return tree
},
onSelect() {
this.queryParam.query = this.selectedKeys[0]
this.loadData()
},

View File

@ -0,0 +1,170 @@
[
{
"name": "Alert",
"path": "/log/Alert/",
"orderNum": 1,
"parentNum": 0,
"hashParent": false,
"hashChild": true,
"children": [
{
"name": "AlertLog1",
"path": "/log/Alert/AlertLog1/",
"orderNum": 1,
"parentNum": 1,
"hashParent": true,
"hashChild": false,
"children": null
},
{
"name": "AlertLog2",
"path": "/log/Alert/AlertLog2/",
"orderNum": 2,
"parentNum": 1,
"hashParent": true,
"hashChild": false,
"children": null
}
]
},
{
"name": "Error",
"path": "/log/Error/",
"orderNum": 2,
"parentNum": 0,
"hashParent": false,
"hashChild": true,
"children": [
{
"name": "ErrorLog1",
"path": "/log/Error/ErrorLog1/",
"orderNum": 1,
"parentNum": 2,
"hashParent": true,
"hashChild": false,
"children": null
},
{
"name": "ErrorLog2",
"path": "/log/Error/ErrorLog2/",
"orderNum": 2,
"parentNum": 2,
"hashParent": true,
"hashChild": false,
"children": null
}
]
},
{
"name": "Mail",
"path": "/log/Mail/",
"orderNum": 3,
"parentNum": 0,
"hashParent": false,
"hashChild": true,
"children": [
{
"name": "MailLog1",
"path": "/log/Mail/MailLog1/",
"orderNum": 1,
"parentNum": 3,
"hashParent": true,
"hashChild": false,
"children": null
},
{
"name": "MailLog2",
"path": "/log/Mail/MailLog2/",
"orderNum": 2,
"parentNum": 3,
"hashParent": true,
"hashChild": false,
"children": null
}
]
},
{
"name": "Met",
"path": "/log/Met/",
"orderNum": 4,
"parentNum": 0,
"hashParent": false,
"hashChild": true,
"children": [
{
"name": "MetLog1",
"path": "/log/Met/MetLog1/",
"orderNum": 1,
"parentNum": 4,
"hashParent": true,
"hashChild": false,
"children": null
},
{
"name": "MetLog2",
"path": "/log/Met/MetLog2/",
"orderNum": 2,
"parentNum": 4,
"hashParent": true,
"hashChild": false,
"children": null
}
]
},
{
"name": "Soh",
"path": "/log/Soh/",
"orderNum": 5,
"parentNum": 0,
"hashParent": false,
"hashChild": true,
"children": [
{
"name": "SohLog1",
"path": "/log/Soh/SohLog1/",
"orderNum": 1,
"parentNum": 5,
"hashParent": true,
"hashChild": false,
"children": null
},
{
"name": "SohLog2",
"path": "/log/Soh/SohLog2/",
"orderNum": 2,
"parentNum": 5,
"hashParent": true,
"hashChild": false,
"children": null
}
]
},
{
"name": "Spectrum",
"path": "/log/Spectrum/",
"orderNum": 6,
"parentNum": 0,
"hashParent": false,
"hashChild": true,
"children": [
{
"name": "SpectrumLog1",
"path": "/log/Spectrum/SpectrumLog1/",
"orderNum": 1,
"parentNum": 6,
"hashParent": true,
"hashChild": false,
"children": null
},
{
"name": "SpectrumLog2",
"path": "/log/Spectrum/SpectrumLog2/",
"orderNum": 2,
"parentNum": 6,
"hashParent": true,
"hashChild": false,
"children": null
}
]
}
]

View File

@ -222,9 +222,12 @@ export default {
{
label: 'SampleID',
type: 'a-input',
name: 'sampleID',
name: 'sampleId',
style: {
width: '19%'
},
props: {
allowClear: true
}
},
{
@ -240,7 +243,8 @@ export default {
...this.stationList
],
showSearch: true,
filterOption: this.filterOption
filterOption: this.filterOption,
allowClear: true
},
style: {
width: '19%'
@ -259,7 +263,8 @@ export default {
...this.detectorList
],
showSearch: true,
filterOption: this.filterOption
filterOption: this.filterOption,
allowClear: true
},
style: {
width: '19%'
@ -268,10 +273,11 @@ export default {
{
label: 'From',
type: 'a-date-picker',
name: 'from',
name: 'collectStart',
props: {
showTime: { format: 'HH:mm' },
format: 'YYYY-MM-DD HH:mm',
valueFormat: 'YYYY-MM-DD HH:mm:ss',
style: {
minWidth: 'auto'
}
@ -283,10 +289,11 @@ export default {
{
label: 'To',
type: 'a-date-picker',
name: 'to',
name: 'collectStop',
props: {
showTime: { format: 'HH:mm' },
format: 'YYYY-MM-DD HH:mm',
valueFormat: 'YYYY-MM-DD HH:mm:ss',
style: {
minWidth: 'auto'
}

View File

@ -100,39 +100,7 @@ import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import FormMixin from '@/mixins/FormMixin'
import { cloneDeep } from 'lodash'
import moment from 'moment'
const formItems = [
{
label: 'Detector Code',
type: 'a-input',
name: 'detectorCode',
style: {
width: '310px'
}
},
{
label: 'Type',
type: 'a-input',
name: 'type',
style: {
width: '310px'
}
},
{
label: 'Status',
type: 'j-dict-select-tag',
name: 'status',
props: {
dictCode: 'STATION_STATUS',
getPopupContainer: () => {
return document.body
}
},
style: {
width: '310px'
}
}
]
import { getAction } from '../../api/manage'
const columns = [
{
@ -213,7 +181,6 @@ const columns = [
export default {
mixins: [JeecgListMixin, FormMixin],
data() {
this.formItems = formItems
this.columns = columns
const validateDetectorCode = (_, value, callback) => {
if (!value) {
@ -239,10 +206,27 @@ export default {
delete: '/gardsDetectors/deleteById',
add: '/gardsDetectors/create',
edit: '/gardsDetectors/update'
}
},
typeList: []
}
},
created() {
this.getTypeList()
},
methods: {
async getTypeList() {
try {
const res = await getAction('/gardsDetectors/findType')
this.typeList = res.filter(item => item).map(item => ({ label: item, value: item }))
} catch (error) {
console.error(error)
}
},
filterOption(input, option) {
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
},
onAdd() {
this.isAdd = true
this.model = {}
@ -276,6 +260,51 @@ export default {
beforeSubmit() {
this.model.moddate = moment(this.model.moddate).format('yyyy-MM-DD HH:mm:ss')
}
},
computed: {
formItems() {
return [
{
label: 'Detector Code',
type: 'a-input',
name: 'detectorCode',
props: {
allowClear: true
},
style: {
width: '310px'
}
},
{
label: 'Type',
type: 'custom-select',
name: 'type',
props: {
options: this.typeList,
allowClear: true,
showSearch: true,
filterOption: this.filterOption
},
style: {
width: '310px'
}
},
{
label: 'Status',
type: 'j-dict-select-tag',
name: 'status',
props: {
dictCode: 'STATION_STATUS',
getPopupContainer: () => {
return document.body
}
},
style: {
width: '310px'
}
}
]
}
}
}
</script>

View File

@ -2,7 +2,7 @@
<a-card :bordered="false">
<!-- 搜索栏 -->
<search-form :items="formItems" v-model="queryParam" @search="searchQuery">
<a-space style="float: right;" class="btn-group" slot="additional">
<a-space style="float: right" class="btn-group" slot="additional">
<a-button @click="onAdd" type="primary">
<img src="@/assets/images/global/add.png" alt="" />
Add
@ -84,47 +84,7 @@
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import FormMixin from '@/mixins/FormMixin'
import { cloneDeep } from 'lodash'
const formItems = [
{
label: 'Name',
type: 'a-input',
name: 'facilityName',
style: {
width: '300px'
}
},
{
label: 'Type',
type: 'a-input',
name: 'type',
style: {
width: '300px'
}
},
{
label: 'Location',
type: 'a-input',
name: 'location',
style: {
width: '300px'
}
},
{
label: 'Status',
type: 'j-dict-select-tag',
name: 'status',
props: {
getPopupContainer: () => {
return document.body
},
dictCode: 'NUCLEARFACILITY_STATUS'
},
style: {
width: '300px'
}
}
]
import { getAction } from '../../api/manage'
const columns = [
{
@ -182,7 +142,6 @@ const columns = [
export default {
mixins: [JeecgListMixin, FormMixin],
data() {
this.formItems = formItems
this.columns = columns
return {
queryParam: {},
@ -195,10 +154,38 @@ export default {
delete: '/gardsNuclearfacility/deleteById',
add: '/gardsNuclearfacility/create',
edit: '/gardsNuclearfacility/update'
}
},
typeList: [],
locationList: []
}
},
created() {
this.getTypeList()
this.getLocationList()
},
methods: {
async getTypeList() {
try {
const res = await getAction('/gardsNuclearfacility/findType')
this.typeList = res.filter(item => item).map(item => ({ label: item, value: item }))
} catch (error) {
console.error(error)
}
},
async getLocationList() {
try {
const res = await getAction('/gardsNuclearfacility/findLocation')
this.locationList = res.filter(item => item).map(item => ({ label: item, value: item }))
} catch (error) {
console.error(error)
}
},
filterOption(input, option) {
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
},
onAdd() {
this.isAdd = true
this.model = {}
@ -228,6 +215,65 @@ export default {
this.$message.warn('Please Select An Item To Delete')
}
}
},
computed: {
formItems() {
return [
{
label: 'Name',
type: 'a-input',
name: 'facilityName',
props: {
allowClear: true
},
style: {
width: '300px'
}
},
{
label: 'Type',
type: 'custom-select',
name: 'type',
props: {
options: this.typeList,
allowClear: true,
showSearch: true,
filterOption: this.filterOption
},
style: {
width: '300px'
}
},
{
label: 'Location',
type: 'custom-select',
name: 'location',
props: {
options: this.locationList,
allowClear: true,
showSearch: true,
filterOption: this.filterOption
},
style: {
width: '300px'
}
},
{
label: 'Status',
type: 'j-dict-select-tag',
name: 'status',
props: {
getPopupContainer: () => {
return document.body
},
dictCode: 'NUCLEARFACILITY_STATUS'
},
style: {
width: '300px'
}
}
]
}
}
}
</script>

View File

@ -91,39 +91,7 @@
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import FormMixin from '@/mixins/FormMixin'
import { cloneDeep } from 'lodash'
const formItems = [
{
label: 'Country Code',
type: 'a-input',
name: 'countryCode',
style: {
width: '310px'
}
},
{
label: 'Type',
type: 'a-input',
name: 'type',
style: {
width: '310px'
}
},
{
label: 'Status',
type: 'j-dict-select-tag',
name: 'status',
props: {
dictCode: 'STATION_STATUS',
getPopupContainer: () => {
return document.body
}
},
style: {
width: '310px'
}
}
]
import { getAction } from '../../api/manage'
const columns = [
{
@ -191,7 +159,6 @@ const columns = [
export default {
mixins: [JeecgListMixin, FormMixin],
data() {
this.formItems = formItems
this.columns = columns
const validateStationCode = (_, value, callback) => {
if (!value) {
@ -224,10 +191,38 @@ export default {
delete: '/gardsStations/deleteById',
add: '/gardsStations/create',
edit: '/gardsStations/update'
}
},
countryCodeList: [],
typeList: []
}
},
created() {
this.getTypeList()
this.getCountryCodeList()
},
methods: {
async getTypeList() {
try {
const res = await getAction('/gardsStations/findType')
this.typeList = res.filter(item => item).map(item => ({ label: item, value: item }))
} catch (error) {
console.error(error)
}
},
async getCountryCodeList() {
try {
const res = await getAction('/gardsStations/findCountryCode')
this.countryCodeList = res.filter(item => item).map(item => ({ label: item, value: item }))
} catch (error) {
console.error(error)
}
},
filterOption(input, option) {
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
},
onAdd() {
this.isAdd = true
this.model = {}
@ -257,6 +252,54 @@ export default {
this.$message.warn('Please Select An Item To Delete')
}
}
},
computed: {
formItems() {
return [
{
label: 'Country Code',
type: 'custom-select',
name: 'countryCode',
props: {
options: this.countryCodeList,
allowClear: true,
showSearch: true,
filterOption: this.filterOption
},
style: {
width: '310px'
}
},
{
label: 'Type',
type: 'custom-select',
name: 'type',
props: {
options: this.typeList,
allowClear: true,
showSearch: true,
filterOption: this.filterOption
},
style: {
width: '310px'
}
},
{
label: 'Status',
type: 'j-dict-select-tag',
name: 'status',
props: {
dictCode: 'STATION_STATUS',
getPopupContainer: () => {
return document.body
}
},
style: {
width: '310px'
}
}
]
}
}
}
</script>