<template>
|
<div class="educationmanagement">
|
<!-- 左侧栏 -->
|
<div class="sidecolumn">
|
<el-menu
|
default-active="2"
|
class="el-menu-vertical-demo"
|
@open="handleOpen"
|
@close="handleClose"
|
@select="handleSelect"
|
background-color="#545c64"
|
text-color="#fff"
|
active-text-color="#ffd04b"
|
>
|
<el-submenu index="1">
|
<template slot="title">
|
<i class="el-icon-location"></i>
|
<span>患者管理</span>
|
</template>
|
<el-menu-item-group>
|
<el-menu-item index="1-1">选项1</el-menu-item>
|
</el-menu-item-group>
|
<!-- <el-submenu index="1-4">
|
<template slot="title">选项4</template>
|
<el-menu-item index="1-4-1">选项1</el-menu-item>
|
</el-submenu> -->
|
</el-submenu>
|
<el-submenu index="2">
|
<template slot="title">
|
<i class="el-icon-location"></i>
|
<span>知识库</span>
|
</template>
|
<el-menu-item-group>
|
<el-menu-item index="2-1">宣教管理</el-menu-item>
|
<el-menu-item index="2-2">问卷管理</el-menu-item>
|
<el-menu-item index="2-3">题库管理</el-menu-item>
|
</el-menu-item-group>
|
<!-- <el-submenu index="1-4">
|
<template slot="title">选项4</template>
|
<el-menu-item index="1-4-1">选项1</el-menu-item>
|
</el-submenu> -->
|
</el-submenu>
|
<el-submenu index="3">
|
<template slot="title">
|
<i class="el-icon-location"></i>
|
<span>患者管理</span>
|
</template>
|
<el-menu-item-group>
|
<el-menu-item index="3-1">话术库</el-menu-item>
|
<el-menu-item index="3-2">意图管理</el-menu-item>
|
<el-menu-item index="3-3">模版库</el-menu-item>
|
</el-menu-item-group>
|
<!-- <el-submenu index="1-4">
|
<template slot="title">选项4</template>
|
<el-menu-item index="1-4-1">选项1</el-menu-item>
|
</el-submenu> -->
|
</el-submenu>
|
</el-menu>
|
</div>
|
<!-- 右侧数据 -->
|
<div class="leftvlue">
|
<div class="leftvalu-top">
|
<el-tabs
|
v-model="editableTabsValue"
|
type="card"
|
editable
|
@edit="handleTabsEdit"
|
>
|
<el-tab-pane
|
:key="item.name"
|
v-for="(item, index) in editableTabs"
|
:label="item.title"
|
:name="item.name"
|
>
|
{{ item.content }}
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
<div class="leftvalu-code">
|
<codemirror v-model="code" :options="options"></codemirror>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
// import { codemirror } from "vue-codemirror";
|
export default {
|
name: "education",
|
|
data() {
|
return {
|
code: "",
|
options: {
|
line: true,
|
theme: "rubyblue", // 主题
|
tabSize: 4, // 制表符的宽度
|
indentUnit: 2, // 一个块应该缩进多少个空格（无论这在编辑语言中意味着什么）。默认值为 2。
|
firstLineNumber: 1, // 从哪个数字开始计算行数。默认值为 1。
|
readOnly: false, // 只读
|
autorefresh: true,
|
smartIndent: true, // 上下文缩进
|
lineNumbers: true, // 是否显示行号
|
styleActiveLine: true, // 高亮选中行
|
viewportMargin: Infinity, //处理高度自适应时搭配使用
|
showCursorWhenSelecting: true, // 当选择处于活动状态时是否应绘制游标
|
mode: "javascript",
|
},
|
|
editableTabsValue: "2-2-3",
|
editableTabslist: [
|
{
|
title: "患者管理",
|
name: "1-1",
|
content: "Tab 1 content",
|
},
|
{
|
title: "宣教管理",
|
name: "2-1",
|
content: "Tab 2 content",
|
},
|
{
|
title: "问卷管理",
|
name: "2-2",
|
content: "Tab 2 content",
|
},
|
{
|
title: "题库管理",
|
name: "2-3",
|
content: "Tab 2 content",
|
},
|
{
|
title: "话术库",
|
name: "3-1",
|
content: "Tab 2 content",
|
},
|
{
|
title: "意图管理",
|
name: "3-2",
|
content: "Tab 2 content",
|
},
|
{
|
title: "模板库",
|
name: "3-3",
|
content: "Tab 2 content",
|
},
|
],
|
editableTabs: [],
|
tabIndex: 2,
|
};
|
},
|
|
methods: {
|
handleClose(key, keyPath) {
|
console.log(key, keyPath);
|
},
|
handleOpen(key, keyPath) {
|
console.log(key, keyPath);
|
},
|
handleSelect(key, keyPath) {
|
console.log(key, keyPath, "ss");
|
var result = this.editableTabslist.find((v) => {
|
return v.name === key; // return v.value === '9' 返回undefined
|
});
|
|
var results = this.editableTabs.some(function (item) {
|
if (item.name == key) {
|
//item.name == "王麻子"
|
return true; //返回false
|
}
|
});
|
if (!results) {
|
this.editableTabs.push(result);
|
}
|
this.editableTabsValue = key;
|
console.log(result);
|
},
|
handleTabsEdit(targetName, action) {
|
if (action === "add") {
|
}
|
if (action === "remove") {
|
let tabs = this.editableTabs;
|
let activeName = this.editableTabsValue;
|
if (activeName === targetName) {
|
tabs.forEach((tab, index) => {
|
if (tab.name === targetName) {
|
let nextTab = tabs[index + 1] || tabs[index - 1];
|
if (nextTab) {
|
activeName = nextTab.name;
|
}
|
}
|
});
|
}
|
|
this.editableTabsValue = activeName;
|
this.editableTabs = tabs.filter((tab) => tab.name !== targetName);
|
}
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.educationmanagement {
|
display: flex;
|
}
|
.leftvalu-code {
|
// background: #3a3d42;
|
height: 300px;
|
::v-deep.CodeMirror {
|
position: relative;
|
overflow: hidden;
|
// background: #3a3d42;
|
color: #3a92ef;
|
font-size: 20px;
|
}
|
}
|
.sidecolumn {
|
width: 300px;
|
min-height: 100vh;
|
text-align: center;
|
// display: flex;
|
margin-top: 20px;
|
margin: 20px;
|
padding: 10px;
|
background: #edf1f7;
|
border: 1px solid #dcdfe6;
|
-webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12),
|
0 0 6px 0 rgba(0, 0, 0, 0.04);
|
.sidecolumn-top {
|
display: flex;
|
justify-content: space-between;
|
.top-wj {
|
font-size: 20px;
|
}
|
.top-tj {
|
font-size: 18px;
|
|
color: rgb(0, 89, 255);
|
cursor: pointer;
|
}
|
}
|
.center-ss {
|
margin-top: 30px;
|
.input-with-select {
|
height: 40px !important;
|
}
|
}
|
.bottom-fl {
|
margin-top: 30px;
|
display: center !important;
|
}
|
}
|
|
.qrcode-dialo {
|
text-align: center;
|
// display: flex;
|
margin: 20px;
|
padding: 30px;
|
background: #edf1f7;
|
border: 1px solid #dcdfe6;
|
-webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12),
|
0 0 6px 0 rgba(0, 0, 0, 0.04);
|
.qrcode-text {
|
font-size: 20px;
|
span {
|
margin-left: 20px;
|
}
|
}
|
.qrcode-img {
|
width: 300px;
|
height: 400px;
|
}
|
}
|
::v-deep.el-tabs--left,
|
.el-tabs--right {
|
overflow: hidden;
|
align-items: center;
|
display: flex;
|
}
|
::v-deep.el-input--medium .el-input__inner {
|
height: 40px !important;
|
}
|
::v-deep.el-tabs--right .el-tabs__active-bar.is-right {
|
height: 40px;
|
width: 5px;
|
left: 0;
|
}
|
::v-deep.el-tabs--right .el-tabs__item.is-right {
|
display: block;
|
font-size: 20px;
|
}
|
.leftvlue {
|
// display: flex;
|
// flex: 1;
|
width: 80%;
|
margin-top: 20px;
|
// margin: 20px;
|
padding: 30px;
|
background: #ffff;
|
border: 1px solid #dcdfe6;
|
-webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12),
|
0 0 6px 0 rgba(0, 0, 0, 0.04);
|
.mulsz {
|
font-size: 20px;
|
}
|
}
|
.button-text {
|
color: rgb(70, 204, 238);
|
}
|
.button-textck {
|
color: rgb(39, 167, 67);
|
}
|
.button-textxg {
|
color: rgb(35, 81, 233);
|
}
|
.button-textsc {
|
color: rgb(235, 23, 23);
|
}
|
</style>
|
