~yxh/smartor-web.git

<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 }} -->
            <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="180">
                    </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>
    </div>
  </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: 0,
          value: "<el-tab-pane>",
        },
        {
          title: "宣教管理",
          name: "2-1",
          content: 1,
          value:
            "<el-table-column prop='address' label='地址'></el-table-column>",
        },
        {
          title: "问卷管理",
          name: "2-2",
          content: 3,
          value:
            "<el-table-column prop='address' label='地址'></el-table-column>",
        },
        {
          title: "题库管理",
          name: "2-3",
          content: "",
        },
        {
          title: "话术库",
          name: "3-1",
          content: "",
        },
        {
          title: "意图管理",
          name: "3-2",
          content: "",
        },
        {
          title: "模板库",
          name: "3-3",
          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: [],
      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>