TEAMModelOS/TEAMModelOS.TeachZone/ClientApp/common/recomLeft.vue

<template>
  <div class="left fl">
    <dl class="chapter bgf">
      <dt>当前课程</dt>
      <dd>
        <Timeline>
          <TimelineItem color="#2db7f5">
            <p class="time">教材：</p>
            <p class="content">初中历史与社会人教课</p>
          </TimelineItem>
          <TimelineItem color="#2db7f5">
            <p class="time">章节：第一章</p>
            <p class="content">人在社会中生活</p>
          </TimelineItem>
          <TimelineItem color="#2db7f5">
            <p class="time" style="font-weight: bold;" >课文：第一课 </p>
            <p class="content" style="font-weight: bold;">我的家在哪里</p>
          </TimelineItem>
        </Timeline>
      </dd>
      <!--<dd><Icon type="ios-browsers-outline"style="font-size: 16px;" /> 初中历史与社会人教课标版</dd>-->
      <!--<dd><Icon type="ios-browsers-outline"style="font-size: 16px;" /> 第一单元 人在社会中生活</dd>-->
      <!--<dd class="nowText"><Icon type="ios-list-box-outline"  style="font-size: 16px;"/> 第二课 我的家在哪里</dd>-->
      <dd>
        <Button @click="value2 = true" type="info" long>选择章节 <Icon type="ios-arrow-dropright" style="font-size: 16px;"/></Button>
      </dd>
    </dl>
    <Drawer placement="left" :closable="false" v-model="value2"  width="300">
      <div class="modalSel">
        <h4>选择教材：</h4>
        <Select v-model="select">
          <Option value="sel1" >初中历史与社会人教课标版</Option>
          <Option value="sel2">思想政治人教标本七年级上册</Option>
          <Option value="sel3">地理人教科标板七年级上册</Option>
          <Option value="sel4">地理人教科标板七年级上册</Option>
          <Option value="sel5">音地理人教科标板七年级上册</Option>
          <Option value="sel6">地理人教科标板七年级上册</Option>
        </Select>
      </div>

      <Tree :data="data5" :render="renderContent"></Tree>
      <Button type="primary" long>添加教材</Button>
    </Drawer>
    <dl class="work bgf">
      <dt>我的工作</dt>
      <dd><a href="/teachSource" class="active"><i class="icon"></i>教材资源</a></dd>
      <dd><a href="/teachCheck"><i class="icon"></i>在线检测</a></dd>
      <dd><a href="/teachPreclass"><i class="icon"></i>课前导学</a></dd>
      <dd><a href="/teachPrelesson"><i class="icon"></i>同步备课</a></dd>
      <dd><a href="/teachTask"><i class="icon"></i>课后作业</a></dd>
    </dl>
    <div class="sourceRecom bgf">
      <h3>推荐资源 <span class="fr refresh">换一批</span></h3>
      <ul>
        <li class="word">
          <a href="">
            <p>当我们的手中只剩下一片树叶.docx</p>
            <p>
              <Rate allow-half v-model="valueText" disabled></Rate>
            </p>
          </a>
        </li>
        <li class="word">
          <a href="">
            <p>当我们的手中只剩下一片树叶.docx</p>
            <p>
              <Rate allow-half v-model="valueText" disabled></Rate>
            </p>
          </a>
        </li>
        <li class="ppt">
          <a href="">
            <p>当我们的手中只剩下一片树叶.ppt</p>
            <p>
              <Rate allow-half v-model="valueText" disabled></Rate>
            </p>
          </a>
        </li>
        <li class="video">
          <a href="">
            <p>当我们的手中只剩下一片树叶.mp4</p>
            <p>
              <Rate allow-half v-model="valueText" disabled></Rate>
            </p>
          </a>
        </li>
        <li class="word">
          <a href="">
            <p>当我们的手中只剩下一片树叶.docx</p>
            <p>
              <Rate allow-half v-model="valueText" disabled></Rate>
            </p>
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        select:'sel1',
        valueText:5,
        value2: false,
        data5: [
              // {
              //   title:'致同学们',
              //   expand: true,
              // },
              {
                title: '第一单元 人在社会中生活',
                expand: true,
                children: [
                  {
                    title: '第一课  我的家在哪里',
                    expand: true
                  },
                  {
                    title: '第二课 乡村与城市',
                    expand: true
                  },
                  {
                    title: '综合探究一 从地图上获取信息',
                    expand: true
                  }
                ]
              },
              {
                title: '第二单元 人类共同生活的世界',
                expand: false,
                children: [
                  {
                    title: '第一课 大洲和大洋',
                    expand: true
                  },
                  {
                    title: '第二课 自然环境',
                    expand: true
                  },
                  {
                    title: '第三课 世界大家庭',
                    expand: true
                  },
                  {
                    title: '综合探究二 从地球仪上看世界',
                    expand: true
                  }
                ]
              },
              {
                title: '第三单元 各具特色的区域生活',
                expand: false,
                children: [
                  {
                    title: '第一课 家住平原',
                    expand: true
                  },
                  {
                    title: '第二课 与山为邻',
                    expand: true
                  }, {
                    title: '第三课 傍水而居',
                    expand: true
                  }, {
                    title: '第四课 草原人家',
                    expand: true
                  }, {
                    title: '第五课 干旱的宝地',
                    expand: true
                  }, {
                    title: '综合探究三 如何认识区域',
                    expand: true
                  },
                ]
              },
              {
                title: '第四单元 文明中心——城市',
                expand: false,
                children: [
                  {
                    title: '第一课 美国政治的心脏：华盛顿',
                    expand: true
                  },
                  {
                    title: '第二课 文化艺术之都：巴黎',
                    expand: true
                  },
                  {
                    title: '第三课 IT新城：班加罗尔',
                    expand: true
                  },
                  {
                    title: '第四课 汽车城：蔚山',
                    expand: true
                  },
                  {
                    title: '第五课 城市规划的典范：巴西利亚',
                    expand: true
                  },
                  {
                    title: '综合探究 如何认识城市',
                    expand: true
                  }
                ]
              }


        ],
        buttonProps: {
          type: 'default',
          size: 'small',
        }
      }
    },
    methods: {
      renderContent (h, { root, node, data }) {
        return h('span', {//二级
          style: {
            display: 'inline-block',
            width: '100%',
            cursor:'pointer'
          },
          on: {
          click: () => { this.titleClick(root, node, data) }
        }
        }, [
          h('span', [
            h('Icon', {
              props: {
                type: 'ios-paper-outline'
              },
              style: {
                marginRight: '8px'
              }
            }),

            h('span', data.title)

          ]),

        ]);
      },
      append (data) {
        const children = data.children || [];
        children.push({
          title: 'appended node',
          expand: true
        });
        this.$set(data, 'children', children);
      },
      remove (root, node, data) {
        const parentKey = root.find(el => el === node).parent;
        const parent = root.find(el => el.nodeKey === parentKey).node;
        const index = parent.children.indexOf(data);
        parent.children.splice(index, 1);
      },
      titleClick(root, node, data,event){
        data.expand = !data.expand
      }
    }



  }
</script>