更改编辑器样式

heimawl

2023-06-26 363e9da03ed1499a590f080d286f1c36cb09111c

 src/views/Intelligentcenter/centercontrol/index.vue

@@ -7,6 +7,7 @@
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
@@ -14,33 +15,46 @@
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>导航一</span>
            <span>患者管理</span>
          </template>
          <el-menu-item-group>
            <template slot="title">分组一</template>
            <el-menu-item index="1-1">选项1</el-menu-item>
            <el-menu-item index="1-2">选项2</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="分组2">
            <el-menu-item index="1-3">选项3</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="1-4">
          <!-- <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>
        <el-menu-item index="2">
          <i class="el-icon-menu"></i>
          <span slot="title">导航二</span>
        </el-menu-item>
        <el-menu-item index="3" disabled>
          <i class="el-icon-document"></i>
          <span slot="title">导航三</span>
        </el-menu-item>
        <el-menu-item index="4">
          <i class="el-icon-setting"></i>
          <span slot="title">导航四</span>
        </el-menu-item>
        <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>
    <!-- 右侧数据 -->
@@ -62,29 +76,76 @@
          </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 {
      editableTabsValue: "2",
      editableTabs: [
      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: "Tab 1",
          name: "1",
          title: "患者管理",
          name: "1-1",
          content: "Tab 1 content",
        },
        {
          title: "Tab 2",
          name: "2",
          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,
    };
  },
@@ -96,15 +157,26 @@
    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") {
        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;
@@ -131,6 +203,17 @@
<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;
@@ -168,6 +251,7 @@
    display: center !important;
  }
}

.qrcode-dialo {
  text-align: center;
  //   display: flex;