Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
L
lmp_web
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
yujian
lmp_web
Commits
b69be89e
Commit
b69be89e
authored
Apr 18, 2024
by
mhw
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
bug修复
parent
aae56bc7
Changes
14
Hide whitespace changes
Inline
Side-by-side
Showing
14 changed files
with
217 additions
and
151 deletions
+217
-151
App.vue
src/App.vue
+4
-4
development.js
src/core/config/development.js
+1
-1
main.js
src/main.js
+2
-1
jumpPage.js
src/utils/jumpPage.js
+21
-0
index.vue
src/views/gptTraining/dataServices/myDataSet/index.vue
+2
-2
label.vue
...rvices/onlineAnnotation/versionsTableBox/dialog/label.vue
+12
-4
particulars.vue
.../onlineAnnotation/versionsTableBox/dialog/particulars.vue
+35
-7
index.vue
...Training/knowledgeBase/dialog/knowledgeFileList/index.vue
+14
-0
taskOperate.vue
...ineTuning/sft/particulars/taskList/dialog/taskOperate.vue
+1
-3
particulars.vue
...Management/modelEvaluation/dialog/operate/particulars.vue
+34
-40
particulars.vue
...ng/modelManagement/modelEvaluation/dialog/particulars.vue
+44
-38
index.vue
...ning/modelService/testOnline/components/leftBox/index.vue
+0
-2
multi-column-menu.vue
src/views/layout/components/sidebar/multi-column-menu.vue
+22
-22
multi-column.vue
src/views/layout/components/sidebar/multi-column.vue
+25
-27
No files found.
src/App.vue
View file @
b69be89e
...
...
@@ -5,14 +5,14 @@
</
template
>
<
script
>
import
projectConfig
from
'@/core/config'
;
import
projectConfig
from
'@/core/config'
export
default
{
watch
:
{
$route
:
{
handler
(
newValue
)
{
document
.
title
=
projectConfig
.
projectName
;
if
(
newValue
.
meta
&&
newValue
.
meta
.
title
)
document
.
title
+=
' - '
+
newValue
.
meta
.
title
;
handler
(
newValue
)
{
document
.
title
=
projectConfig
.
projectName
if
(
newValue
.
meta
&&
newValue
.
meta
.
title
)
document
.
title
+=
' - '
+
newValue
.
meta
.
title
},
immediate
:
true
}
...
...
src/core/config/development.js
View file @
b69be89e
module
.
exports
=
{
// baseUrl: 'http://218.76.0.69:8082/',
// baseUrl: 'http://192.168.0.34:8082/',
// baseUrl: 'http://192.168.0.36:8082/',
baseUrl
:
'http://192.168.0.36:8082/'
,
// baseUrl: 'http://192.168.0.34:8082/',
wsUrl
:
'ws://218.76.0.69:7860/'
,
projectName
:
'灵境大模型平台'
}
src/main.js
View file @
b69be89e
...
...
@@ -28,7 +28,8 @@ import rightClick from '@/core/directive/rightClick.js';
import
'vxe-table/lib/style.css'
;
import
'@/assets/online-icon/iconfont.css'
;
import
VueClipboard
from
'vue-clipboard2'
import
jumpPage
from
'@/utils/jumpPage.js'
;
Vue
.
prototype
.
$jumpPage
=
jumpPage
Vue
.
prototype
.
$SocketService
=
SocketService
Vue
.
use
(
VueClipboard
)
...
...
src/utils/jumpPage.js
0 → 100644
View file @
b69be89e
import
store
from
'@/store/index.js'
;
const
jumpPage
=
(
name
)
=>
{
const
menuList
=
store
.
getters
.
getMenuList
let
menuId
=
''
const
loop
=
(
name
,
menuList
)
=>
{
for
(
let
index
=
0
;
index
<
menuList
.
length
;
index
++
)
{
const
item
=
menuList
[
index
]
if
(
item
.
formRouterName
===
name
)
{
menuId
=
item
.
menuId
break
}
else
{
if
(
item
.
children
)
{
loop
(
name
,
item
.
children
)
}
}
}
}
loop
(
name
,
menuList
)
store
.
commit
(
'setCurrentMenuId'
,
menuId
)
}
export
default
jumpPage
src/views/gptTraining/dataServices/myDataSet/index.vue
View file @
b69be89e
...
...
@@ -346,11 +346,11 @@ export default {
drill
(
data
)
{
// 去训练
console
.
log
(
data
)
this
.
$
router
.
push
({
name
:
'sft'
}
)
this
.
$
jumpPage
(
'sft'
)
},
clean
(
data
)
{
// 去清洗
this
.
$
router
.
push
({
name
:
'dataCleansing'
}
)
this
.
$
jumpPage
(
'dataCleansing'
)
},
putOut
(
data
)
{
console
.
log
(
data
)
...
...
src/views/gptTraining/dataServices/onlineAnnotation/versionsTableBox/dialog/label.vue
View file @
b69be89e
...
...
@@ -31,10 +31,10 @@ import { DatasetData } from '@/api/gptController.js'
export
default
{
data
()
{
return
{
form
:
JSON
.
parse
(
JSON
.
stringify
(
this
.
row
)
)
form
:
this
.
deepCopy
(
this
.
row
)
}
},
props
:
[
'row'
,
'columnList'
,
'refresh'
,
'isEdit'
],
props
:
[
'row'
,
'columnList'
,
'refresh'
,
'isEdit'
,
'versionId'
],
components
:
{},
computed
:
{},
...
...
@@ -42,6 +42,13 @@ export default {
mounted
()
{},
methods
:
{
deepCopy
(
data
)
{
try
{
return
JSON
.
parse
(
JSON
.
stringify
(
data
))
}
catch
(
error
)
{
return
{
data
:
{
instruction
:
''
,
output
:
''
}
}
}
},
onCancel
(
isSuccess
)
{
if
(
this
.
observer
!=
null
)
{
this
.
observer
.
cancel
(
isSuccess
)
...
...
@@ -50,9 +57,10 @@ export default {
onSubmit
()
{
let
params
=
{}
params
.
datasetMongoDto
=
this
.
form
DatasetData
.
update
(
this
,
params
)
params
.
datasetMongoDto
.
versionId
=
this
.
versionId
DatasetData
[
this
.
versionId
?
'add'
:
'update'
](
this
,
params
)
.
then
((
res
)
=>
{
this
.
$message
.
success
(
'编辑成功'
)
this
.
$message
.
success
(
this
.
versionId
?
'添加成功'
:
'编辑成功'
)
this
.
onCancel
(
true
)
})
.
catch
((
e
)
=>
{})
...
...
src/views/gptTraining/dataServices/onlineAnnotation/versionsTableBox/dialog/particulars.vue
View file @
b69be89e
<!--详情 -->
<
template
>
<div
class=
"tableBox"
>
<el-breadcrumb
separator=
"|"
>
<el-breadcrumb-item
:class=
"nowPage==0?'isactive':''"
@
click
.
native=
"breadcrumbClick(0)"
>
全部(
{{
allNum
}}
)
</el-breadcrumb-item>
<el-breadcrumb-item
:class=
"nowPage==1?'isactive':''"
@
click
.
native=
"breadcrumbClick(1)"
>
无标注信息(
{{
unmarkedNum
}}
)
</el-breadcrumb-item>
<el-breadcrumb-item
:class=
"nowPage==2?'isactive':''"
@
click
.
native=
"breadcrumbClick(2)"
>
有标注信息(
{{
markedNum
}}
)
</el-breadcrumb-item>
</el-breadcrumb>
<div
class=
"topBox"
>
<el-breadcrumb
separator=
"|"
>
<el-breadcrumb-item
:class=
"nowPage==0?'isactive':''"
@
click
.
native=
"breadcrumbClick(0)"
>
全部(
{{
allNum
}}
)
</el-breadcrumb-item>
<el-breadcrumb-item
:class=
"nowPage==1?'isactive':''"
@
click
.
native=
"breadcrumbClick(1)"
>
无标注信息(
{{
unmarkedNum
}}
)
</el-breadcrumb-item>
<el-breadcrumb-item
:class=
"nowPage==2?'isactive':''"
@
click
.
native=
"breadcrumbClick(2)"
>
有标注信息(
{{
markedNum
}}
)
</el-breadcrumb-item>
</el-breadcrumb>
<el-button
:size=
"defaultFormItemSize"
@
click=
"add()"
>
新增
</el-button>
</div>
<vxe-table
border
show-header-overflow
show-overflow
:row-config=
"
{ isHover: true }" :data="myDataSetPage.tableData.impl.dataList" min-height="96">
<!--
<vxe-column
field=
"index"
title=
"序号"
></vxe-column>
-->
<!--
<vxe-column
:field=
"'data.'+item"
:title=
"item"
v-for=
"item in columnList"
:key=
"item"
></vxe-column>
-->
<vxe-column
field=
"data.instruction"
title=
"问题"
></vxe-column>
<vxe-column
field=
"data.output"
title=
"回答"
></vxe-column>
<vxe-column
field=
"operation"
title=
"操作"
width=
"150px"
>
<template
slot-scope=
"scope"
>
<el-button
type=
"text"
:size=
"defaultFormItemSize"
@
click=
"check(scope.row)"
>
查看
</el-button>
<el-button
type=
"text"
:size=
"defaultFormItemSize"
@
click=
"label(scope.row)"
v-if=
"releaseStatus===0"
>
标注
</el-button>
<el-button
type=
"text"
:size=
"defaultFormItemSize"
@
click=
"label(scope.row)"
v-if=
"releaseStatus===0"
>
标注
</el-button>
<el-button
type=
"text"
:size=
"defaultFormItemSize"
@
click=
"del(scope.row)"
v-if=
"releaseStatus===0"
>
删除
</el-button>
</
template
>
</vxe-column>
...
...
@@ -153,6 +157,24 @@ export default {
})
.
catch
((
e
)
=>
{})
},
add
()
{
// 添加
this
.
$dialog
.
show
(
'添加'
,
label
,
{
area
:
[
'70%'
,
'50%'
]
},
{
versionId
:
this
.
versionItem
.
versionId
,
refresh
:
this
.
refresh
,
isEdit
:
true
}
)
.
then
((
res
)
=>
{
this
.
refresh
()
this
.
summaryCount
()
})
.
catch
((
e
)
=>
{})
},
del
(
item
)
{
this
.
$confirm
(
'是否确认删除'
,
'提示'
,
{
confirmButtonText
:
'确定'
,
...
...
@@ -283,4 +305,10 @@ export default {
/
deep
/
.isactive
.el-breadcrumb__inner
{
color
:
#0092ff
!
important
;
}
.topBox
{
display
:
flex
;
height
:
auto
;
align-items
:
center
;
justify-content
:
space-between
;
}
</
style
>
src/views/gptTraining/knowledgeBase/dialog/knowledgeFileList/index.vue
View file @
b69be89e
...
...
@@ -4,6 +4,9 @@
<el-table-column
type=
"index"
width=
"50"
>
</el-table-column>
<el-table-column
prop=
"name"
label=
"名称"
>
<template
slot-scope=
'scope'
>
<div>
{{
scope
.
row
.
name
}}
</div>
</
template
>
</el-table-column>
<el-table-column
prop=
"createTime"
label=
"创建时间"
>
</el-table-column>
...
...
@@ -26,6 +29,7 @@
<
script
>
import
{
KnowledgeManage
}
from
'@/api/gptController.js'
import
details
from
'./details'
import
filePreview
from
'@//views/gptTraining/modelService/testOnline/components/contentView/filePreview/index.vue'
export
default
{
data
()
{
...
...
@@ -66,6 +70,16 @@ export default {
console
.
log
(
e
)
})
},
preview
(
tagUrl
)
{
this
.
$dialog
.
show
(
'文件预览'
,
filePreview
,
{
area
:
[
'100%'
,
'100%'
]
},
{
url
:
tagUrl
}
)
},
searchDocs
(
row
)
{
// let params = { knowledge_base_name: this.knowledgeName, file_name: row.name }
// KnowledgeManage.searchDocs(this, params)
...
...
src/views/gptTraining/modelFineTuning/sft/particulars/taskList/dialog/taskOperate.vue
View file @
b69be89e
...
...
@@ -96,9 +96,7 @@ export default {
async
pause
()
{
await
this
.
PyApi
(
20
)
TuningRun
.
updateById
(
this
,
{
tuningRunDto
:
{
runId
:
this
.
item
.
runId
,
runStatus
:
-
2
}
})
.
then
((
res
)
=>
{
console
.
log
(
res
)
})
.
then
((
res
)
=>
{})
.
catch
((
e
)
=>
{})
},
getPreviewCommand
()
{
...
...
src/views/gptTraining/modelManagement/modelEvaluation/dialog/operate/particulars.vue
View file @
b69be89e
<!-- 运行详情 -->
<
template
>
<div>
<el-card
class=
"box-card"
>
<el-descriptions
title=
"基本信息"
>
<el-descriptions-item
label=
"任务名称:"
>
{{
item
.
taskName
}}
</el-descriptions-item>
<el-descriptions-item
label=
"任务描述:"
>
{{
item
.
taskDescribe
}}
</el-descriptions-item>
<el-descriptions-item
label=
"创建人:"
>
{{
item
.
createUserId
}}
</el-descriptions-item>
<el-descriptions-item
label=
"创建时间:"
>
{{
item
.
createTime
}}
</el-descriptions-item>
<el-descriptions-item
label=
"参数配置:"
>
{{
item
.
configuration
}}
</el-descriptions-item>
</el-descriptions>
</el-card>
<el-card
class=
"box-card"
>
<el-descriptions
title=
"数据配置"
>
<el-descriptions-item
label=
"数据集:"
>
{{
item
.
datasetVersionIdDictMap
.
name
}}
</el-descriptions-item>
<el-descriptions-item
label=
"数据模型:"
>
{{
item
.
modelVersionIdDictMap
.
name
}}
</el-descriptions-item>
</el-descriptions>
</el-card>
<!--
<el-card
class=
"box-card"
>
<div>
<el-card
class=
"box-card"
>
<el-descriptions
title=
"基本信息"
>
<el-descriptions-item
label=
"任务名称:"
>
{{
item
.
taskName
}}
</el-descriptions-item>
<el-descriptions-item
label=
"任务描述:"
>
{{
item
.
taskDescribe
}}
</el-descriptions-item>
<el-descriptions-item
label=
"创建人:"
>
{{
item
.
createUserId
}}
</el-descriptions-item>
<el-descriptions-item
label=
"创建时间:"
>
{{
item
.
createTime
}}
</el-descriptions-item>
<el-descriptions-item
label=
"参数配置:"
>
{{
item
.
configuration
}}
</el-descriptions-item>
</el-descriptions>
</el-card>
<el-card
class=
"box-card"
>
<el-descriptions
title=
"数据配置"
>
<el-descriptions-item
label=
"数据集:"
>
{{
item
?.
datasetVersionIdDictMap
?
.
name
}}
</el-descriptions-item>
<el-descriptions-item
label=
"数据模型:"
>
{{
item
.
modelVersionIdDictMap
.
name
}}
</el-descriptions-item>
</el-descriptions>
</el-card>
<!--
<el-card
class=
"box-card"
>
<el-descriptions
title=
"评估模型"
>
<el-descriptions-item>
<tableList
:tableData=
"tableData"
/>
...
...
@@ -26,43 +26,37 @@
</el-descriptions>
</el-card>
-->
</div>
</div>
</
template
>
<
script
>
// import { MyModel } from '@/api/gptController.js';
// import tableList from '../../tableList/index'
export
default
{
data
()
{
return
{
};
data
()
{
return
{}
},
props
:
[
'item'
],
components
:
{},
computed
:
{
computed
:
{
},
mounted
()
{
console
.
log
(
this
.
item
)
},
mounted
()
{
console
.
log
(
this
.
item
);
},
methods
:
{
}
};
methods
:
{}
}
</
script
>
<
style
scoped
>
div
/
deep
/
.el-descriptions__title
{
font-size
:
18px
;
div
/
deep
/
.el-descriptions__title
{
font-size
:
18px
;
}
div
/
deep
/
.el-descriptions__table
{
width
:
100%
;
line-height
:
30px
;
div
/
deep
/
.el-descriptions__table
{
width
:
100%
;
line-height
:
30px
;
}
div
/
deep
/
.el-card
{
margin-bottom
:
20px
;
div
/
deep
/
.el-card
{
margin-bottom
:
20px
;
}
</
style
>
src/views/gptTraining/modelManagement/modelEvaluation/dialog/particulars.vue
View file @
b69be89e
...
...
@@ -19,18 +19,17 @@
</
template
>
<
script
>
// import { MyModel } from '@/api/gptController.js';
import
particulars
from
'./operate/particulars'
;
import
assessmentReport
from
'./operate/assessmentReport'
;
import
trainingLog
from
'./operate/trainingLog'
;
import
particulars
from
'./operate/particulars'
import
assessmentReport
from
'./operate/assessmentReport'
import
trainingLog
from
'./operate/trainingLog'
// eslint-disable-next-line no-unused-vars
import
previewCommand
from
'./previewCommand'
;
import
previewCommand
from
'./previewCommand'
// import { getSessionHash } from '@/utils/index';
import
{
ModelEstimate
,
PyApi
}
from
'@/api/gptController.js'
;
import
{
ModelEstimate
,
PyApi
}
from
'@/api/gptController.js'
export
default
{
data
()
{
data
()
{
return
{
istraining
:
false
,
// 是否在训练中
img
:
''
,
...
...
@@ -44,7 +43,7 @@ export default {
},
activeName
:
this
.
page
,
timeImg
:
null
}
;
}
},
props
:
{
page
:
{
...
...
@@ -58,26 +57,24 @@ export default {
computed
:
{},
mounted
()
{
},
mounted
()
{},
methods
:
{
PyApi
(
index
,
data
=
[])
{
PyApi
(
index
,
data
=
[])
{
let
param
=
{
data
:
data
,
event_data
:
null
,
fn_index
:
index
,
session_hash
:
this
.
item
.
taskId
}
return
PyApi
.
predict
(
this
,
param
).
then
((
res
)
=>
{
if
(
index
===
22
)
{
// 图片
console
.
log
(
res
);
this
.
img
=
JSON
.
parse
(
res
.
data
).
data
[
0
]?.
plot
;
if
(
index
===
22
)
{
// 图片
this
.
img
=
JSON
.
parse
(
res
.
data
).
data
[
0
]?.
plot
console
.
log
(
this
.
img
);
}
else
if
(
index
===
20
)
{
// 暂停
console
.
log
(
this
.
img
)
}
else
if
(
index
===
20
)
{
// 暂停
this
.
$message
({
message
:
'已暂停'
,
type
:
'success'
...
...
@@ -86,37 +83,47 @@ export default {
// this.result = {output: {data: []}}
})
},
preview
()
{
this
.
$dialog
.
show
(
'预览命令'
,
previewCommand
,
{
area
:
[
'50%'
,
'70%'
]
},
{
item
:
this
.
item
}).
then
(
res
=>
{
this
.
refresh
();
}).
catch
(
e
=>
{
});
preview
()
{
this
.
$dialog
.
show
(
'预览命令'
,
previewCommand
,
{
area
:
[
'50%'
,
'70%'
]
},
{
item
:
this
.
item
}
)
.
then
((
res
)
=>
{
this
.
refresh
()
})
.
catch
((
e
)
=>
{})
},
start
()
{
start
()
{
this
.
SocketService
.
initWebSocket
()
},
async
pause
()
{
async
pause
()
{
await
this
.
PyApi
(
34
)
ModelEstimate
.
updateById
(
this
,
{
modelEstimateDto
:
{
taskId
:
this
.
item
.
taskId
,
taskStatus
:
-
2
}
}).
then
(
res
=>
{
console
.
log
(
res
);
}).
catch
(
e
=>
{
});
ModelEstimate
.
updateById
(
this
,
{
modelEstimateDto
:
{
taskId
:
this
.
item
.
taskId
,
taskStatus
:
-
2
}
})
.
then
((
res
)
=>
{})
.
catch
((
e
)
=>
{})
},
getPreviewCommand
()
{
// 获取参数
getPreviewCommand
()
{
// 获取参数
ModelEstimate
.
getPreviewCommand
(
this
,
{
taskId
:
this
.
item
.
taskId
}).
then
((
res
)
=>
{
this
.
wsData
.
data
=
res
.
data
this
.
send
(
JSON
.
stringify
(
this
.
wsData
))
})
},
successful
()
{
// 连接成功
successful
()
{
// 连接成功
this
.
send
(
`{"fn_index":
${
this
.
wsData
.
fn_index
}
,"session_hash":"
${
this
.
wsData
.
session_hash
}
"}`
)
},
send
(
data
)
{
// 发送参数
send
(
data
)
{
// 发送参数
this
.
SocketService
.
websocketsend
(
data
)
},
websocketonmessage
(
e
)
{
// 返回接收参数
websocketonmessage
(
e
)
{
// 返回接收参数
if
(
JSON
.
parse
(
e
.
data
).
msg
===
'process_generating'
)
{
this
.
istraining
=
true
this
.
result
=
JSON
.
parse
(
e
.
data
)
...
...
@@ -133,14 +140,13 @@ export default {
this
.
getPreviewCommand
()
}
},
startGetImg
()
{
startGetImg
()
{
this
.
timeImg
=
setInterval
(()
=>
{
this
.
PyApi
(
22
,
[
this
.
wsData
.
data
[
1
],
this
.
wsData
.
data
[
3
],
this
.
wsData
.
data
[
37
]])
},
10000
)
;
},
10000
)
}
}
}
</
script
>
<
style
scoped
>
div
/
deep
/
.el-descriptions__title
{
...
...
src/views/gptTraining/modelService/testOnline/components/leftBox/index.vue
View file @
b69be89e
...
...
@@ -226,7 +226,6 @@ export default {
getKnowledgeGraphList
()
{
KnowledgeGraph
.
listForSelect
(
this
,
{})
.
then
((
res
)
=>
{
console
.
log
(
res
)
this
.
knowledgeGraphList
=
res
.
data
})
.
catch
((
e
)
=>
{
...
...
@@ -236,7 +235,6 @@ export default {
getServeList
()
{
ModelDeployment
.
canUseList
(
this
,
{})
.
then
((
res
)
=>
{
console
.
log
(
res
)
this
.
serveList
=
res
?.
data
?.
dataList
this
.
form
.
model_name
=
this
.
serveList
[
0
].
versionName
})
...
...
src/views/layout/components/sidebar/multi-column-menu.vue
View file @
b69be89e
<
template
>
<ul
class=
"multi-column-menu"
>
<div
v-for=
"menu in menuList"
:key=
"menu.menuId"
>
<el-popover
placement=
"right-start"
width=
"220"
trigger=
"hover"
:disabled=
"!menu.children || (menu.children || []).length === 0 || level >= 1"
:visible-arrow=
"false"
>
<el-popover
placement=
"right-start"
width=
"220"
trigger=
"hover"
:disabled=
"!menu.children || (menu.children || []).length === 0 || level >= 1"
:visible-arrow=
"false"
>
<li
slot=
"reference"
@
click=
"selectMenu(menu)"
:class=
"
{active: getCurrentMenuId === menu.menuId}">
<div
class=
"menu-name"
><i
:class=
"menu.icon"
style=
"font-size: 18px;margin-right:5px;"
></i>
{{
menu
.
menuName
}}
</div>
<i
v-if=
"menu.children && menu.children.length"
class=
"el-icon-arrow-right"
></i>
<div
class=
"multi-column-menu-popover"
:class=
"
{level2: level > 1}" v-if="level >= 1
&&
(menu.children || []).length">
<div
class=
"popover-box"
>
<multiColumnMenu
:menuList=
"menu.children"
:key=
"columnId + '-' + menu.menuId"
:level=
"2"
:columnId=
"columnId"
@
select=
"select"
/>
<multiColumnMenu
:menuList=
"menu.children"
:key=
"columnId + '-' + menu.menuId"
:level=
"2"
:columnId=
"columnId"
@
select=
"select"
/>
</div>
</div>
</li>
<multiColumnMenu
v-if=
"(menu.children || []).length && level
<
1
"
:menuList=
"menu.children"
:key=
"columnId + '-' + menu.menuId"
:level=
"level+1"
:columnId=
"columnId"
@
select=
"select"
/>
<multiColumnMenu
v-if=
"(menu.children || []).length && level
<
1
"
:menuList=
"menu.children"
:key=
"columnId + '-' + menu.menuId"
:level=
"level+1"
:columnId=
"columnId"
@
select=
"select"
/>
</el-popover>
</div>
</ul>
</
template
>
<
script
>
import
{
mapGetters
,
mapMutations
}
from
'vuex'
;
import
{
mapGetters
,
mapMutations
}
from
'vuex'
export
default
{
name
:
'multiColumnMenu'
,
props
:
{
...
...
@@ -40,22 +40,22 @@ export default {
},
methods
:
{
...
mapMutations
([
'clearAllTags'
,
'setCurrentMenuId'
,
'setCurrentColumnId'
]),
selectMenu
(
menu
)
{
if
(
this
.
getCurrentMenuId
===
menu
.
menuId
||
menu
.
menuType
===
0
)
return
;
selectMenu
(
menu
)
{
if
(
this
.
getCurrentMenuId
===
menu
.
menuId
||
menu
.
menuType
===
0
)
return
// 单页面清空所有tags和cachePage
if
(
!
this
.
getMultiTags
)
{
this
.
clearAllTags
()
;
this
.
clearAllTags
()
}
if
(
this
.
columnId
!==
this
.
getCurrentColumnId
)
{
this
.
setCurrentColumnId
(
this
.
columnId
)
;
this
.
setCurrentColumnId
(
this
.
columnId
)
}
this
.
$nextTick
(()
=>
{
this
.
setCurrentMenuId
(
menu
.
menuId
)
;
this
.
select
()
;
this
.
setCurrentMenuId
(
menu
.
menuId
)
this
.
select
()
})
},
select
()
{
select
()
{
this
.
$emit
(
'select'
)
}
}
...
...
@@ -64,12 +64,12 @@ export default {
<
style
lang=
"scss"
>
@import
'@/assets/style/element-variables.scss'
;
.multi-column-menu
{
.multi-column-menu
{
width
:
200px
;
padding
:
0
8px
;
list-style
:
none
;
margin
:
0
;
li
{
li
{
display
:
flex
;
justify-content
:
space-between
;
align-items
:
center
;
...
...
@@ -80,35 +80,35 @@ export default {
border-radius
:
4px
;
cursor
:
pointer
;
position
:
relative
;
.menu-name
{
.menu-name
{
display
:
flex
;
align-items
:
center
;
}
i
{
i
{
color
:
#999999
;
}
&
:hover
{
background-color
:
#
F6F6F
6
;
&
>
.multi-column-menu-popover
{
&
:hover
{
background-color
:
#
f6f6f
6
;
&
>
.multi-column-menu-popover
{
display
:
block
;
}
}
&
.active
{
&
.active
{
color
:
$--color-primary
;
background-color
:
$--color-primary-light-9
;
}
}
}
.multi-column-menu-popover
{
.multi-column-menu-popover
{
display
:
none
;
position
:
absolute
;
left
:
100%
;
top
:
0px
;
padding-left
:
16px
;
&
.level2
{
&
.level2
{
padding-left
:
22px
;
}
.popover-box
{
.popover-box
{
padding
:
12px
;
background-color
:
white
;
box-shadow
:
0
2px
12px
0
rgba
(
0
,
0
,
0
,
0
.1
);
...
...
src/views/layout/components/sidebar/multi-column.vue
View file @
b69be89e
...
...
@@ -3,29 +3,26 @@
<el-scrollbar
wrap-class=
"scrollbar_dropdown__wrap"
style=
"width: 80px;height: calc(100vh - 60px);"
v-if=
"menuList.length"
>
<ul
class=
"multi-column-list"
>
<div
v-for=
"(menu,index) in menuList"
:key=
"menu.menuId"
>
<el-popover
ref=
"popover"
placement=
"right-start"
width=
"220"
trigger=
"hover"
:disabled=
"!menu.children || (menu.children || []).length === 0 || !getCollapse"
:visible-arrow=
"false"
>
<el-popover
ref=
"popover"
placement=
"right-start"
width=
"220"
trigger=
"hover"
:disabled=
"!menu.children || (menu.children || []).length === 0 || !getCollapse"
:visible-arrow=
"false"
>
<li
slot=
"reference"
@
click=
"onColumnChange(menu.menuId, index)"
:class=
"
{active: getCurrentColumnId === menu.menuId}">
<i
:class=
"menu.icon"
></i>
<p>
{{
menu
.
menuName
}}
</p>
</li>
<multiColumnMenu
v-if=
"(menu.children || []).length"
:menuList=
"menu.children"
:key=
"menu.menuId"
:level=
"1"
@
select=
"selectMenu(index)"
:columnId=
"menu.menuId"
/>
<multiColumnMenu
v-if=
"(menu.children || []).length"
:menuList=
"menu.children"
:key=
"menu.menuId"
:level=
"1"
@
select=
"selectMenu(index)"
:columnId=
"menu.menuId"
/>
</el-popover>
</div>
</ul>
</el-scrollbar>
<el-scrollbar
v-if=
"children && children.length"
class=
"children-menu-scrollbar"
wrap-class=
"scrollbar_dropdown__wrap"
style=
"background-color: white;height: calc(100vh - 60px);"
:scroll-x=
"false"
>
<div
style=
"padding: 24px 0"
>
<multiColumnMenu
:menuList=
"children"
:key=
"getCurrentColumnId"
:columnId=
"getCurrentColumnId"
/>
<multiColumnMenu
:menuList=
"children"
:key=
"getCurrentColumnId"
:columnId=
"getCurrentColumnId"
/>
</div>
</el-scrollbar>
</div>
</
template
>
<
script
>
import
{
mapGetters
,
mapMutations
}
from
'vuex'
;
import
{
mapGetters
,
mapMutations
}
from
'vuex'
import
multiColumnMenu
from
'./multi-column-menu.vue'
export
default
{
props
:
{
...
...
@@ -35,7 +32,7 @@ export default {
}
},
components
:
{
multiColumnMenu
},
data
()
{
data
()
{
return
{
children
:
[]
}
...
...
@@ -44,26 +41,26 @@ export default {
getCurrentColumnId
:
{
deep
:
true
,
immediate
:
true
,
handler
()
{
if
(
this
.
getCurrentColumnId
==
null
||
this
.
getCurrentColumnId
===
''
)
return
[]
;
handler
()
{
if
(
this
.
getCurrentColumnId
==
null
||
this
.
getCurrentColumnId
===
''
)
return
[]
for
(
let
i
=
0
;
i
<
this
.
getMenuList
.
length
;
i
++
)
{
if
(
this
.
getMenuList
[
i
].
menuId
===
this
.
getCurrentColumnId
)
{
this
.
children
=
this
.
getMenuList
[
i
].
children
||
[]
;
this
.
children
=
this
.
getMenuList
[
i
].
children
||
[]
}
}
}
}
},
mounted
()
{},
mounted
()
{},
computed
:
{
...
mapGetters
([
'getCurrentColumnId'
,
'getMenuList'
,
'getCollapse'
])
},
methods
:
{
...
mapMutations
([
'clearCachePage'
,
'setCurrentColumnId'
]),
onColumnChange
(
columnId
)
{
this
.
setCurrentColumnId
(
columnId
)
;
onColumnChange
(
columnId
)
{
this
.
setCurrentColumnId
(
columnId
)
},
selectMenu
(
index
)
{
selectMenu
(
index
)
{
this
.
$refs
.
popover
[
index
].
doClose
()
}
}
...
...
@@ -71,40 +68,41 @@ export default {
</
script
>
<
style
lang=
"scss"
>
.multi-column-wrap
{
.multi-column-wrap
{
display
:
flex
;
min-width
:
81px
;
height
:
100%
;
border-right
:
1px
solid
#
E8E8E
8
;
.children-menu-scrollbar
{
border-right
:
1px
solid
#
e8e8e
8
;
.children-menu-scrollbar
{
width
:
0
;
flex
:
1
;
.el-scrollbar__bar.is-horizontal
{
flex
:
1
;
.el-scrollbar__bar.is-horizontal
{
display
:
none
;
}
}
.multi-column-list
{
.multi-column-list
{
list-style
:
none
;
margin
:
0
;
width
:
80px
;
text-align
:
center
;
padding
:
16px
0
;
li
{
li
{
display
:
flex
;
flex-direction
:
column
;
font-size
:
14px
!
important
;
height
:
80px
;
color
:
#
A4A5A
7
;
color
:
#
a4a5a
7
;
cursor
:
pointer
;
&
.active
,
&
:hover
{
&
.active
,
&
:hover
{
background-color
:
#e6f4ff
;
color
:
rgb
(
0
,
146
,
255
)
color
:
rgb
(
0
,
146
,
255
)
;
}
i
{
i
{
font-size
:
24px
!
important
;
margin-top
:
14px
;
}
p
{
p
{
width
:
100%
;
padding
:
0
10px
;
margin
:
12px
0
0
;
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment