admin/src/pages/system/courseManager/fiveA/add.vue

<template>
  <div class="subPage">
    <form class="mainForm">
      <ul>
        <li class="flex-h">
          <span>上级课程类型：</span>
          <div class="flex-item">
            <div style="width:50%">
              <el-input
                placeholder="请输入内容"
                v-model="postData.label"
                @focus="showTree"
                readonly
                clearable>
              </el-input>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>名称：</span>
          <div class="flex-item">
            <div style="width:50%">
              <el-input
                placeholder="请输入名称"
                v-model="postData.name"
                clearable>
              </el-input>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>标题：</span>
          <div class="flex-item">
            <div style="width:50%">
              <el-input
                placeholder="请输入标题"
                v-model="postData.title"
                clearable>
              </el-input>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>咨询分类：</span>
          <div class="flex-item">
            <div style="width:50%">
              <el-input
                placeholder="请输入咨询分类"
                v-model="postData.class"
                clearable>
              </el-input>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>编码：</span>
          <div class="flex-item">
            <div style="width:50%">
              <el-input
                placeholder="请输入编码"
                v-model="postData.coding"
                clearable>
              </el-input>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>序号：</span>
          <div class="flex-item">
            <div style="width:50%">
              <el-input
                placeholder="请输入序号"
                v-model="postData.number"
                clearable>
              </el-input>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>课程图片：</span>
          <div class="flex-item">
            <div>
              <a class="formImg">
                <img src="" class="centerLabel contain" alt="">
                <i class="iconfont icon-quxiao"></i>
              </a>
              <el-button type="success" size="mini">上传图片</el-button>
            </div>
          </div>
        </li>
        <li style="text-align:center">
          <el-button type="primary" size="mini">保存</el-button>
          <el-button type="danger" size="mini">取消</el-button>
        </li>
      </ul>
    </form>
    <el-dialog title="请选择机构" :visible.sync="dialogTableVisible">
      <el-tree
        class="flxe-h"
        :data="treeData"
        :default-expand-all="true"
        :expand-on-click-node="false"
        @node-click="handleNodeClick"></el-tree>
    </el-dialog>
  </div>
</template>

<script>

export default {
  name: '',
  data () {
    return {
      postData: {
        label: '', // 父页面带入的上级类型
        name: '', // 名称
        title: '', // 标题
        class: '', // 咨询分类
        coding: '', // 编码
        number: '', // 序号
      },
      dialogTableVisible: false,
      treeData: [{
        label: '根目录',
        rank: '0',
        img: '',
        children: [{
          label: '共享课程&书吧',
          rank: '0',
          img: '',
          children: [{
            label: '健身',
            rank: '0',
            img: 'http://jingcheng-resourceplat.oss-cn-shanghai.aliyuncs.com/upload/163306109741.png',
          }, {
            label: '健康',
            rank: '0',
            img: 'http://jingcheng-resourceplat.oss-cn-shanghai.aliyuncs.com/upload/163325263583.png',
          }, {
            label: '艺术',
            rank: '0',
            img: 'http://jingcheng-resourceplat.oss-cn-shanghai.aliyuncs.com/upload/104118813781.png',
          }, {
            label: '社交',
            rank: '0',
            img: 'http://jingcheng-resourceplat.oss-cn-shanghai.aliyuncs.com/upload/163339496588.png',
          }, {
            label: '教育',
            rank: '0',
            img: 'http://jingcheng-resourceplat.oss-cn-shanghai.aliyuncs.com/upload/163351586373.png',
          }]
        }]
      }]
    }
  },
  components: {},
  methods: {
    showTree () {
      this.dialogTableVisible = true
    },
    handleNodeClick (node) {
      this.postData.label = node.label
      this.dialogTableVisible = false
    }
  },
  mounted () {
    this.postData.label = this.$route.query.label
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
</style>