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="/teachCheckList"><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="/teachSourceDetail">
            <p>数学核心素养研究观点之一.docx</p>
            <p>
              <Rate allow-half v-model="valueText" disabled></Rate>
            </p>
          </a>
        </li>
        <li class="word">
          <a href="/teachSourceDetail">
            <p>综合学习实践案例.docx</p>
            <p>
              <Rate allow-half v-model="valueText" disabled></Rate>
            </p>
          </a>
        </li>
        <li class="video">
          <a href="/teachSourceVideo">
            <p>《比例尺》教学设计.mp4</p>
            <p>
              <Rate allow-half v-model="valueText" disabled></Rate>
            </p>
          </a>
        </li>
        <li class="video">
          <a href="/teachSourceVideo">
            <p>加法乘法运算对比问题.mp4</p>
            <p>
              <Rate allow-half v-model="valueText" disabled></Rate>
            </p>
          </a>
        </li>
        <li class="ppt">
          <a href="/teachSourceDetail">
            <p>百分数解决问题实例.ppt</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: true
                  },  {
                    title: '平行线的判定',
                    expand: true
                  },  {
                    title: '平行线的性质',
                    expand: true
                  },  {
                    title: '命题、定理、证明',
                    expand: true
                  },  {
                    title: '平移',
                    expand: true
                  },{
                    title: '特殊考点',
                    expand: true
                  },
                ]
              },
              {
                title: '第二单元 实数',
                expand: false,
                children: [
                  {title: '算术平方根'},
                  {title: '平方根'},
                  {title: '立方根'},
                  {title: '实数的概念'},
                  {title: '实数的运算'},
                  {title: '特殊考点'},

                ]
              },
              {
                title: '第三单元 平面直角坐标系',
                expand: false,
                children: [
                  {title: '有序对数'},
                  {title: '平面直角坐标系'},
                  {title: '用坐标表示地理位置'},
                  {title: '用坐标表示平移'},
                ]
              },
              {
                title: '第四单元 二元一次方程组',
                expand: false,
                children: [
                  {title: '二元一次方程组'},
                  {title: '代入消元法'},
                  {title: '加减消元法'},
                  {title: '实际问题与二元一次方...'},
                  {title: '三元一次方程组的解法'},
                  {title: '特殊考点'},
                ]
              }


        ],
        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>