Commit b69be89e authored by mhw's avatar mhw

bug修复

parent aae56bc7
...@@ -5,14 +5,14 @@ ...@@ -5,14 +5,14 @@
</template> </template>
<script> <script>
import projectConfig from '@/core/config'; import projectConfig from '@/core/config'
export default { export default {
watch: { watch: {
$route: { $route: {
handler (newValue) { handler(newValue) {
document.title = projectConfig.projectName; document.title = projectConfig.projectName
if (newValue.meta && newValue.meta.title) document.title += ' - ' + newValue.meta.title; if (newValue.meta && newValue.meta.title) document.title += ' - ' + newValue.meta.title
}, },
immediate: true immediate: true
} }
......
module.exports = { module.exports = {
// baseUrl: 'http://218.76.0.69:8082/', // baseUrl: 'http://218.76.0.69:8082/',
// baseUrl: 'http://192.168.0.34: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.36:8082/',
// baseUrl: 'http://192.168.0.34:8082/',
wsUrl: 'ws://218.76.0.69:7860/', wsUrl: 'ws://218.76.0.69:7860/',
projectName: '灵境大模型平台' projectName: '灵境大模型平台'
} }
...@@ -28,7 +28,8 @@ import rightClick from '@/core/directive/rightClick.js'; ...@@ -28,7 +28,8 @@ import rightClick from '@/core/directive/rightClick.js';
import 'vxe-table/lib/style.css'; import 'vxe-table/lib/style.css';
import '@/assets/online-icon/iconfont.css'; import '@/assets/online-icon/iconfont.css';
import VueClipboard from 'vue-clipboard2' import VueClipboard from 'vue-clipboard2'
import jumpPage from '@/utils/jumpPage.js';
Vue.prototype.$jumpPage = jumpPage
Vue.prototype.$SocketService = SocketService Vue.prototype.$SocketService = SocketService
Vue.use(VueClipboard) Vue.use(VueClipboard)
......
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
...@@ -346,11 +346,11 @@ export default { ...@@ -346,11 +346,11 @@ export default {
drill(data) { drill(data) {
// 去训练 // 去训练
console.log(data) console.log(data)
this.$router.push({ name: 'sft' }) this.$jumpPage('sft')
}, },
clean(data) { clean(data) {
// 去清洗 // 去清洗
this.$router.push({ name: 'dataCleansing' }) this.$jumpPage('dataCleansing')
}, },
putOut(data) { putOut(data) {
console.log(data) console.log(data)
......
...@@ -31,10 +31,10 @@ import { DatasetData } from '@/api/gptController.js' ...@@ -31,10 +31,10 @@ import { DatasetData } from '@/api/gptController.js'
export default { export default {
data() { data() {
return { 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: {}, components: {},
computed: {}, computed: {},
...@@ -42,6 +42,13 @@ export default { ...@@ -42,6 +42,13 @@ export default {
mounted() {}, mounted() {},
methods: { methods: {
deepCopy(data) {
try {
return JSON.parse(JSON.stringify(data))
} catch (error) {
return { data: { instruction: '', output: '' } }
}
},
onCancel(isSuccess) { onCancel(isSuccess) {
if (this.observer != null) { if (this.observer != null) {
this.observer.cancel(isSuccess) this.observer.cancel(isSuccess)
...@@ -50,9 +57,10 @@ export default { ...@@ -50,9 +57,10 @@ export default {
onSubmit() { onSubmit() {
let params = {} let params = {}
params.datasetMongoDto = this.form params.datasetMongoDto = this.form
DatasetData.update(this, params) params.datasetMongoDto.versionId = this.versionId
DatasetData[this.versionId ? 'add' : 'update'](this, params)
.then((res) => { .then((res) => {
this.$message.success('编辑成功') this.$message.success(this.versionId ? '添加成功' : '编辑成功')
this.onCancel(true) this.onCancel(true)
}) })
.catch((e) => {}) .catch((e) => {})
......
<!--详情 --> <!--详情 -->
<template> <template>
<div class="tableBox"> <div class="tableBox">
<div class="topBox">
<el-breadcrumb separator="|"> <el-breadcrumb separator="|">
<el-breadcrumb-item :class="nowPage==0?'isactive':''" @click.native="breadcrumbClick(0)">全部({{ allNum}}</el-breadcrumb-item> <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==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-item :class="nowPage==2?'isactive':''" @click.native="breadcrumbClick(2)">有标注信息({{ markedNum}}</el-breadcrumb-item>
</el-breadcrumb> </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-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="index" title="序号"></vxe-column> -->
<!-- <vxe-column :field="'data.'+item" :title="item" v-for="item in columnList" :key="item"></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.instruction" title="问题"></vxe-column>
<vxe-column field="data.output" title="回答"></vxe-column> <vxe-column field="data.output" title="回答"></vxe-column>
<vxe-column field="operation" title="操作" width="150px"> <vxe-column field="operation" title="操作" width="150px">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button type="text" :size="defaultFormItemSize" @click="check(scope.row)">查看</el-button> <el-button type="text" :size="defaultFormItemSize" @click="check(scope.row)">查看</el-button>
...@@ -153,6 +157,24 @@ export default { ...@@ -153,6 +157,24 @@ export default {
}) })
.catch((e) => {}) .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) { del(item) {
this.$confirm('是否确认删除', '提示', { this.$confirm('是否确认删除', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
...@@ -283,4 +305,10 @@ export default { ...@@ -283,4 +305,10 @@ export default {
/deep/ .isactive .el-breadcrumb__inner { /deep/ .isactive .el-breadcrumb__inner {
color: #0092ff !important; color: #0092ff !important;
} }
.topBox {
display: flex;
height: auto;
align-items: center;
justify-content: space-between;
}
</style> </style>
...@@ -4,6 +4,9 @@ ...@@ -4,6 +4,9 @@
<el-table-column type="index" width="50"> <el-table-column type="index" width="50">
</el-table-column> </el-table-column>
<el-table-column prop="name" label="名称"> <el-table-column prop="name" label="名称">
<template slot-scope='scope'>
<div>{{scope.row.name}}</div>
</template>
</el-table-column> </el-table-column>
<el-table-column prop="createTime" label="创建时间"> <el-table-column prop="createTime" label="创建时间">
</el-table-column> </el-table-column>
...@@ -26,6 +29,7 @@ ...@@ -26,6 +29,7 @@
<script> <script>
import { KnowledgeManage } from '@/api/gptController.js' import { KnowledgeManage } from '@/api/gptController.js'
import details from './details' import details from './details'
import filePreview from '@//views/gptTraining/modelService/testOnline/components/contentView/filePreview/index.vue'
export default { export default {
data() { data() {
...@@ -66,6 +70,16 @@ export default { ...@@ -66,6 +70,16 @@ export default {
console.log(e) console.log(e)
}) })
}, },
preview(tagUrl) {
this.$dialog.show(
'文件预览',
filePreview,
{
area: ['100%', '100%']
},
{ url: tagUrl }
)
},
searchDocs(row) { searchDocs(row) {
// let params = { knowledge_base_name: this.knowledgeName, file_name: row.name } // let params = { knowledge_base_name: this.knowledgeName, file_name: row.name }
// KnowledgeManage.searchDocs(this, params) // KnowledgeManage.searchDocs(this, params)
......
...@@ -96,9 +96,7 @@ export default { ...@@ -96,9 +96,7 @@ export default {
async pause() { async pause() {
await this.PyApi(20) await this.PyApi(20)
TuningRun.updateById(this, { tuningRunDto: { runId: this.item.runId, runStatus: -2 } }) TuningRun.updateById(this, { tuningRunDto: { runId: this.item.runId, runStatus: -2 } })
.then((res) => { .then((res) => {})
console.log(res)
})
.catch((e) => {}) .catch((e) => {})
}, },
getPreviewCommand() { getPreviewCommand() {
......
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
</el-card> </el-card>
<el-card class="box-card"> <el-card class="box-card">
<el-descriptions title="数据配置"> <el-descriptions title="数据配置">
<el-descriptions-item label="数据集:">{{item.datasetVersionIdDictMap.name}}</el-descriptions-item> <el-descriptions-item label="数据集:">{{item?.datasetVersionIdDictMap?.name}}</el-descriptions-item>
<el-descriptions-item label="数据模型:">{{item.modelVersionIdDictMap.name}}</el-descriptions-item> <el-descriptions-item label="数据模型:">{{item.modelVersionIdDictMap.name}}</el-descriptions-item>
</el-descriptions> </el-descriptions>
</el-card> </el-card>
...@@ -33,36 +33,30 @@ ...@@ -33,36 +33,30 @@
// import { MyModel } from '@/api/gptController.js'; // import { MyModel } from '@/api/gptController.js';
// import tableList from '../../tableList/index' // import tableList from '../../tableList/index'
export default { export default {
data () { data() {
return { return {}
};
}, },
props: ['item'], props: ['item'],
components: {}, components: {},
computed: { computed: {},
},
mounted () { mounted() {
console.log(this.item); console.log(this.item)
}, },
methods: { methods: {}
}
}
};
</script> </script>
<style scoped> <style scoped>
div /deep/ .el-descriptions__title{ div /deep/ .el-descriptions__title {
font-size: 18px; font-size: 18px;
} }
div /deep/.el-descriptions__table{ div /deep/.el-descriptions__table {
width: 100%; width: 100%;
line-height: 30px; line-height: 30px;
} }
div /deep/ .el-card{ div /deep/ .el-card {
margin-bottom: 20px; margin-bottom: 20px;
} }
</style> </style>
...@@ -19,18 +19,17 @@ ...@@ -19,18 +19,17 @@
</template> </template>
<script> <script>
// import { MyModel } from '@/api/gptController.js'; // import { MyModel } from '@/api/gptController.js';
import particulars from './operate/particulars'; import particulars from './operate/particulars'
import assessmentReport from './operate/assessmentReport'; import assessmentReport from './operate/assessmentReport'
import trainingLog from './operate/trainingLog'; import trainingLog from './operate/trainingLog'
// eslint-disable-next-line no-unused-vars // eslint-disable-next-line no-unused-vars
import previewCommand from './previewCommand'; import previewCommand from './previewCommand'
// import { getSessionHash } from '@/utils/index'; // import { getSessionHash } from '@/utils/index';
import { ModelEstimate, PyApi } from '@/api/gptController.js'; import { ModelEstimate, PyApi } from '@/api/gptController.js'
export default { export default {
data () { data() {
return { return {
istraining: false, // 是否在训练中 istraining: false, // 是否在训练中
img: '', img: '',
...@@ -44,7 +43,7 @@ export default { ...@@ -44,7 +43,7 @@ export default {
}, },
activeName: this.page, activeName: this.page,
timeImg: null timeImg: null
}; }
}, },
props: { props: {
page: { page: {
...@@ -58,26 +57,24 @@ export default { ...@@ -58,26 +57,24 @@ export default {
computed: {}, computed: {},
mounted () { mounted() {},
},
methods: { methods: {
PyApi (index, data = []) { PyApi(index, data = []) {
let param = { let param = {
data: data, data: data,
event_data: null, event_data: null,
fn_index: index, fn_index: index,
session_hash: this.item.taskId session_hash: this.item.taskId
} }
return PyApi.predict(this, param).then((res) => { return PyApi.predict(this, param).then((res) => {
if (index === 22) { // 图片 if (index === 22) {
console.log(res); // 图片
this.img = JSON.parse(res.data).data[0]?.plot; this.img = JSON.parse(res.data).data[0]?.plot
console.log(this.img); console.log(this.img)
} else if (index === 20) { // 暂停 } else if (index === 20) {
// 暂停
this.$message({ this.$message({
message: '已暂停', message: '已暂停',
type: 'success' type: 'success'
...@@ -86,37 +83,47 @@ export default { ...@@ -86,37 +83,47 @@ export default {
// this.result = {output: {data: []}} // this.result = {output: {data: []}}
}) })
}, },
preview () { preview() {
this.$dialog.show('预览命令', previewCommand, { this.$dialog
.show(
'预览命令',
previewCommand,
{
area: ['50%', '70%'] area: ['50%', '70%']
}, { item: this.item }).then(res => {
this.refresh();
}).catch(e => { });
}, },
start () { { item: this.item }
)
.then((res) => {
this.refresh()
})
.catch((e) => {})
},
start() {
this.SocketService.initWebSocket() this.SocketService.initWebSocket()
}, },
async pause () { async pause() {
await this.PyApi(34) await this.PyApi(34)
ModelEstimate.updateById(this, {modelEstimateDto: {taskId: this.item.taskId, taskStatus: -2} }).then(res => { ModelEstimate.updateById(this, { modelEstimateDto: { taskId: this.item.taskId, taskStatus: -2 } })
console.log(res); .then((res) => {})
}).catch(e => { .catch((e) => {})
});
}, },
getPreviewCommand () { // 获取参数 getPreviewCommand() {
// 获取参数
ModelEstimate.getPreviewCommand(this, { taskId: this.item.taskId }).then((res) => { ModelEstimate.getPreviewCommand(this, { taskId: this.item.taskId }).then((res) => {
this.wsData.data = res.data this.wsData.data = res.data
this.send(JSON.stringify(this.wsData)) this.send(JSON.stringify(this.wsData))
}) })
}, },
successful () { // 连接成功 successful() {
// 连接成功
this.send(`{"fn_index":${this.wsData.fn_index},"session_hash":"${this.wsData.session_hash}"}`) this.send(`{"fn_index":${this.wsData.fn_index},"session_hash":"${this.wsData.session_hash}"}`)
}, },
send (data) { // 发送参数 send(data) {
// 发送参数
this.SocketService.websocketsend(data) this.SocketService.websocketsend(data)
}, },
websocketonmessage (e) { // 返回接收参数 websocketonmessage(e) {
// 返回接收参数
if (JSON.parse(e.data).msg === 'process_generating') { if (JSON.parse(e.data).msg === 'process_generating') {
this.istraining = true this.istraining = true
this.result = JSON.parse(e.data) this.result = JSON.parse(e.data)
...@@ -133,14 +140,13 @@ export default { ...@@ -133,14 +140,13 @@ export default {
this.getPreviewCommand() this.getPreviewCommand()
} }
}, },
startGetImg () { startGetImg() {
this.timeImg = setInterval(() => { this.timeImg = setInterval(() => {
this.PyApi(22, [this.wsData.data[1], this.wsData.data[3], this.wsData.data[37]]) this.PyApi(22, [this.wsData.data[1], this.wsData.data[3], this.wsData.data[37]])
}, 10000); }, 10000)
} }
} }
} }
</script> </script>
<style scoped> <style scoped>
div /deep/ .el-descriptions__title { div /deep/ .el-descriptions__title {
......
...@@ -226,7 +226,6 @@ export default { ...@@ -226,7 +226,6 @@ export default {
getKnowledgeGraphList() { getKnowledgeGraphList() {
KnowledgeGraph.listForSelect(this, {}) KnowledgeGraph.listForSelect(this, {})
.then((res) => { .then((res) => {
console.log(res)
this.knowledgeGraphList = res.data this.knowledgeGraphList = res.data
}) })
.catch((e) => { .catch((e) => {
...@@ -236,7 +235,6 @@ export default { ...@@ -236,7 +235,6 @@ export default {
getServeList() { getServeList() {
ModelDeployment.canUseList(this, {}) ModelDeployment.canUseList(this, {})
.then((res) => { .then((res) => {
console.log(res)
this.serveList = res?.data?.dataList this.serveList = res?.data?.dataList
this.form.model_name = this.serveList[0].versionName this.form.model_name = this.serveList[0].versionName
}) })
......
...@@ -7,18 +7,18 @@ ...@@ -7,18 +7,18 @@
<i v-if="menu.children && menu.children.length" class="el-icon-arrow-right"></i> <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="multi-column-menu-popover" :class="{level2: level > 1}" v-if="level >= 1 && (menu.children || []).length">
<div class="popover-box"> <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>
</div> </div>
</li> </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> </el-popover>
</div> </div>
</ul> </ul>
</template> </template>
<script> <script>
import { mapGetters, mapMutations } from 'vuex'; import { mapGetters, mapMutations } from 'vuex'
export default { export default {
name: 'multiColumnMenu', name: 'multiColumnMenu',
props: { props: {
...@@ -40,22 +40,22 @@ export default { ...@@ -40,22 +40,22 @@ export default {
}, },
methods: { methods: {
...mapMutations(['clearAllTags', 'setCurrentMenuId', 'setCurrentColumnId']), ...mapMutations(['clearAllTags', 'setCurrentMenuId', 'setCurrentColumnId']),
selectMenu (menu) { selectMenu(menu) {
if (this.getCurrentMenuId === menu.menuId || menu.menuType === 0) return; if (this.getCurrentMenuId === menu.menuId || menu.menuType === 0) return
// 单页面清空所有tags和cachePage // 单页面清空所有tags和cachePage
if (!this.getMultiTags) { if (!this.getMultiTags) {
this.clearAllTags(); this.clearAllTags()
} }
if (this.columnId !== this.getCurrentColumnId) { if (this.columnId !== this.getCurrentColumnId) {
this.setCurrentColumnId(this.columnId); this.setCurrentColumnId(this.columnId)
} }
this.$nextTick(() => { this.$nextTick(() => {
this.setCurrentMenuId(menu.menuId); this.setCurrentMenuId(menu.menuId)
this.select(); this.select()
}) })
}, },
select () { select() {
this.$emit('select') this.$emit('select')
} }
} }
...@@ -64,12 +64,12 @@ export default { ...@@ -64,12 +64,12 @@ export default {
<style lang="scss"> <style lang="scss">
@import '@/assets/style/element-variables.scss'; @import '@/assets/style/element-variables.scss';
.multi-column-menu{ .multi-column-menu {
width: 200px; width: 200px;
padding: 0 8px; padding: 0 8px;
list-style: none; list-style: none;
margin: 0; margin: 0;
li{ li {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
...@@ -80,35 +80,35 @@ export default { ...@@ -80,35 +80,35 @@ export default {
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
.menu-name{ .menu-name {
display: flex; display: flex;
align-items: center; align-items: center;
} }
i{ i {
color: #999999; color: #999999;
} }
&:hover{ &:hover {
background-color: #F6F6F6; background-color: #f6f6f6;
&>.multi-column-menu-popover{ & > .multi-column-menu-popover {
display: block; display: block;
} }
} }
&.active{ &.active {
color: $--color-primary; color: $--color-primary;
background-color: $--color-primary-light-9; background-color: $--color-primary-light-9;
} }
} }
} }
.multi-column-menu-popover{ .multi-column-menu-popover {
display: none; display: none;
position: absolute; position: absolute;
left: 100%; left: 100%;
top: 0px; top: 0px;
padding-left: 16px; padding-left: 16px;
&.level2{ &.level2 {
padding-left: 22px; padding-left: 22px;
} }
.popover-box{ .popover-box {
padding: 12px; padding: 12px;
background-color: white; background-color: white;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
......
...@@ -3,29 +3,26 @@ ...@@ -3,29 +3,26 @@
<el-scrollbar wrap-class="scrollbar_dropdown__wrap" style="width: 80px;height: calc(100vh - 60px);" v-if="menuList.length"> <el-scrollbar wrap-class="scrollbar_dropdown__wrap" style="width: 80px;height: calc(100vh - 60px);" v-if="menuList.length">
<ul class="multi-column-list"> <ul class="multi-column-list">
<div v-for="(menu,index) in menuList" :key="menu.menuId"> <div v-for="(menu,index) in menuList" :key="menu.menuId">
<el-popover ref="popover" placement="right-start" width="220" trigger="hover" <el-popover ref="popover" placement="right-start" width="220" trigger="hover" :disabled="!menu.children || (menu.children || []).length === 0 || !getCollapse" :visible-arrow="false">
:disabled="!menu.children || (menu.children || []).length === 0 || !getCollapse" :visible-arrow="false"
>
<li slot="reference" @click="onColumnChange(menu.menuId, index)" :class="{active: getCurrentColumnId === menu.menuId}"> <li slot="reference" @click="onColumnChange(menu.menuId, index)" :class="{active: getCurrentColumnId === menu.menuId}">
<i :class="menu.icon"></i> <i :class="menu.icon"></i>
<p>{{ menu.menuName }}</p> <p>{{ menu.menuName }}</p>
</li> </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> </el-popover>
</div> </div>
</ul> </ul>
</el-scrollbar> </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"> <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"> <div style="padding: 24px 0">
<multiColumnMenu :menuList="children" :key="getCurrentColumnId" :columnId="getCurrentColumnId"/> <multiColumnMenu :menuList="children" :key="getCurrentColumnId" :columnId="getCurrentColumnId" />
</div> </div>
</el-scrollbar> </el-scrollbar>
</div> </div>
</template> </template>
<script> <script>
import { mapGetters, mapMutations } from 'vuex'
import { mapGetters, mapMutations } from 'vuex';
import multiColumnMenu from './multi-column-menu.vue' import multiColumnMenu from './multi-column-menu.vue'
export default { export default {
props: { props: {
...@@ -35,7 +32,7 @@ export default { ...@@ -35,7 +32,7 @@ export default {
} }
}, },
components: { multiColumnMenu }, components: { multiColumnMenu },
data () { data() {
return { return {
children: [] children: []
} }
...@@ -44,26 +41,26 @@ export default { ...@@ -44,26 +41,26 @@ export default {
getCurrentColumnId: { getCurrentColumnId: {
deep: true, deep: true,
immediate: true, immediate: true,
handler () { handler() {
if (this.getCurrentColumnId == null || this.getCurrentColumnId === '') return []; if (this.getCurrentColumnId == null || this.getCurrentColumnId === '') return []
for (let i = 0; i < this.getMenuList.length; i++) { for (let i = 0; i < this.getMenuList.length; i++) {
if (this.getMenuList[i].menuId === this.getCurrentColumnId) { if (this.getMenuList[i].menuId === this.getCurrentColumnId) {
this.children = this.getMenuList[i].children || []; this.children = this.getMenuList[i].children || []
} }
} }
} }
} }
}, },
mounted () {}, mounted() {},
computed: { computed: {
...mapGetters(['getCurrentColumnId', 'getMenuList', 'getCollapse']) ...mapGetters(['getCurrentColumnId', 'getMenuList', 'getCollapse'])
}, },
methods: { methods: {
...mapMutations(['clearCachePage', 'setCurrentColumnId']), ...mapMutations(['clearCachePage', 'setCurrentColumnId']),
onColumnChange (columnId) { onColumnChange(columnId) {
this.setCurrentColumnId(columnId); this.setCurrentColumnId(columnId)
}, },
selectMenu (index) { selectMenu(index) {
this.$refs.popover[index].doClose() this.$refs.popover[index].doClose()
} }
} }
...@@ -71,40 +68,41 @@ export default { ...@@ -71,40 +68,41 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.multi-column-wrap{ .multi-column-wrap {
display: flex; display: flex;
min-width: 81px; min-width: 81px;
height: 100%; height: 100%;
border-right: 1px solid #E8E8E8; border-right: 1px solid #e8e8e8;
.children-menu-scrollbar{ .children-menu-scrollbar {
width: 0; width: 0;
flex:1; flex: 1;
.el-scrollbar__bar.is-horizontal{ .el-scrollbar__bar.is-horizontal {
display: none; display: none;
} }
} }
.multi-column-list{ .multi-column-list {
list-style: none; list-style: none;
margin: 0; margin: 0;
width: 80px; width: 80px;
text-align: center; text-align: center;
padding: 16px 0; padding: 16px 0;
li{ li {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-size: 14px !important; font-size: 14px !important;
height: 80px; height: 80px;
color: #A4A5A7; color: #a4a5a7;
cursor: pointer; cursor: pointer;
&.active, &:hover{ &.active,
&:hover {
background-color: #e6f4ff; background-color: #e6f4ff;
color: rgb(0, 146, 255) color: rgb(0, 146, 255);
} }
i{ i {
font-size: 24px !important; font-size: 24px !important;
margin-top: 14px; margin-top: 14px;
} }
p{ p {
width: 100%; width: 100%;
padding: 0 10px; padding: 0 10px;
margin: 12px 0 0; margin: 12px 0 0;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment