| | |
| | | <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 index="3-3">模板库</el-menu-item> |
| | | </el-menu-item-group> |
| | | <!-- <el-submenu index="1-4"> |
| | | <template slot="title">选项4</template> |
| | |
| | | :label="item.title" |
| | | :name="item.name" |
| | | > |
| | | {{ item.content }} |
| | | <!-- {{ item.content }} --> |
| | | <div class="leftvalu-code" v-if="editableTabs.length"> |
| | | <el-tabs |
| | | v-model="fiactiveName" |
| | | type="card" |
| | | @tab-click="handleClick" |
| | | > |
| | | <el-tab-pane |
| | | v-if="item.content == 0 || item.content == 3" |
| | | label="代码展示" |
| | | name="first" |
| | | ><codemirror |
| | | v-model="item.value" |
| | | :options="options" |
| | | ></codemirror |
| | | ></el-tab-pane> |
| | | <el-tab-pane |
| | | v-if="item.content == 1 || item.content == 3" |
| | | label="表格展示" |
| | | name="second" |
| | | ><el-table :data="tableData" style="width: 100%"> |
| | | <el-table-column prop="date" label="日期" width="180"> |
| | | </el-table-column> |
| | | <el-table-column prop="name" label="姓名" |
| | | width="100" > |
| | | </el-table-column> |
| | | <el-table-column prop="address" label="地址"> |
| | | </el-table-column> </el-table |
| | | ></el-tab-pane> |
| | | </el-tabs> |
| | | </div> |
| | | </el-tab-pane> |
| | | </el-tabs> |
| | | </div> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | // import { codemirror } from "vue-codemirror"; |
| | | export default { |
| | | name: "education", |
| | | |
| | | data() { |
| | | return { |
| | | code: "", |
| | | fiactiveName: "first", |
| | | 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", |
| | | }, |
| | | tableData: [ |
| | | { |
| | | date: "2016-05-02", |
| | | name: "王小虎", |
| | | address: "上海市普陀区金沙江路 1518 弄", |
| | | }, |
| | | { |
| | | date: "2016-05-04", |
| | | name: "王小虎", |
| | | address: "上海市普陀区金沙江路 1517 弄", |
| | | }, |
| | | { |
| | | date: "2016-05-01", |
| | | name: "王小虎", |
| | | address: "上海市普陀区金沙江路 1519 弄", |
| | | }, |
| | | { |
| | | date: "2016-05-03", |
| | | name: "王小虎", |
| | | address: "上海市普陀区金沙江路 1516 弄", |
| | | }, |
| | | ], |
| | | |
| | | editableTabsValue: "2-2-3", |
| | | editableTabslist: [ |
| | | { |
| | | title: "患者管理", |
| | | name: "1-1", |
| | | content: "Tab 1 content", |
| | | content: 0, |
| | | value: "<el-tab-pane>", |
| | | }, |
| | | { |
| | | title: "宣教管理", |
| | | name: "2-1", |
| | | content: "Tab 2 content", |
| | | content: 1, |
| | | value: |
| | | "<el-table-column prop='address' label='地址'></el-table-column>", |
| | | }, |
| | | { |
| | | title: "问卷管理", |
| | | name: "2-2", |
| | | content: "Tab 2 content", |
| | | content: 3, |
| | | value: |
| | | "<el-table-column prop='address' label='地址'></el-table-column>", |
| | | }, |
| | | { |
| | | title: "题库管理", |
| | | name: "2-3", |
| | | content: "Tab 2 content", |
| | | content: "", |
| | | }, |
| | | { |
| | | title: "话术库", |
| | | name: "3-1", |
| | | content: "Tab 2 content", |
| | | content: "", |
| | | }, |
| | | { |
| | | title: "意图管理", |
| | | name: "3-2", |
| | | content: "Tab 2 content", |
| | | content: "", |
| | | }, |
| | | { |
| | | title: "模板库", |
| | | name: "3-3", |
| | | content: "Tab 2 content", |
| | | content: "", |
| | | }, |
| | | ], |
| | | // 需要的树的格式 |
| | | editableTabslisat: [ |
| | | { |
| | | title: "患者管理", |
| | | name: "1", |
| | | son: [ |
| | | { |
| | | title: "患者管理", |
| | | name: "1-1", |
| | | content: "", |
| | | }, |
| | | ], |
| | | }, |
| | | { |
| | | title: "知识库", |
| | | name: "2", |
| | | son: [ |
| | | { |
| | | title: "宣教管理", |
| | | name: "2-1", |
| | | content: "", |
| | | }, |
| | | { |
| | | title: "问卷管理", |
| | | name: "2-2", |
| | | content: "", |
| | | }, |
| | | { |
| | | title: "题库管理", |
| | | name: "2-3", |
| | | content: "", |
| | | son: [ |
| | | { title: "政策管理", name: "2-3-1", content: "" }, |
| | | { title: "治安管理", name: "2-3-2", content: "" }, |
| | | ], |
| | | }, |
| | | ], |
| | | }, |
| | | ], |
| | | editableTabs: [], |
| | |
| | | }); |
| | | |
| | | var results = this.editableTabs.some(function (item) { |
| | | if (item.name == "张三") { |
| | | if (item.name == key) { |
| | | //item.name == "王麻子" |
| | | return true; //返回false |
| | | } |
| | | }); |
| | | this.editableTabs.push(result); |
| | | if (!results) { |
| | | this.editableTabs.push(result); |
| | | } |
| | | this.editableTabsValue = key; |
| | | console.log(result); |
| | | }, |
| | | handleTabsEdit(targetName, action) { |
| | | if (action === "add") { |
| | | let newTabName = ++this.tabIndex + ""; |
| | | this.editableTabs.push({ |
| | | title: "New Tab", |
| | | name: newTabName, |
| | | content: "New Tab content", |
| | | }); |
| | | this.editableTabsValue = newTabName; |
| | | } |
| | | if (action === "remove") { |
| | | let tabs = this.editableTabs; |
| | |
| | | <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; |
| | |
| | | display: center !important; |
| | | } |
| | | } |
| | | |
| | | .qrcode-dialo { |
| | | text-align: center; |
| | | // display: flex; |