learning-system-portal/src/components/Course/editBaseInfo.vue

<template><!--编辑基本信息-->
<div>
  <div style="height: 30px; border-bottom: 1px solid #f3f3f3;margin-bottom: 10px;">
    <span>基本信息</span>
    <span style="padding-left: 50px;"><el-checkbox v-model="onlyRequired">只显示必填项</el-checkbox></span>
  </div>
  <el-form label-width="120px" size="mini">
    <el-form-item label="名称" required><el-input maxlength="100" v-model="course.name" placeholder="课程名称(限100字以内)"></el-input></el-form-item>
    <!--不显示，因为标题已经代表了 <el-form-item label="授课方式">{{courseTypeMap(params.type)}}</el-form-item>-->
    <el-form-item label="封面图片" required >
      <el-col :span="8">
        <imageUpload :value="courseCoverurl" @success="uploadCoverImgSuccess" @remove="removeCoverImgSuccess"></imageUpload>
        <div>上传为16:9(如:800*450)的png或jpg图片</div>
      </el-col>
      <el-col :span="16">
        <el-form-item label="内容分类" required>
            <el-select v-model="course.sysType"  style="width: 90%;">
              <el-option v-for="item in sysTypeList" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="资源归属" required>
          <el-cascader placeholder="选择资源归属" style="width: 90%;" clearable v-model="resOwnerValues" :props="defaultProps" :options="resOwnerList"></el-cascader>
        </el-form-item>
        <el-form-item label="场景" required>
              <el-select v-model="course.forScene" style="width: 90%;">
              <el-option v-for="item in sceneList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="授课教师" required ><!--授课老师默认是当前操作人-->
            <el-select style="width: 90%;"
              v-model="teacherValues"
              multiple
              filterable
              remote
              reserve-keyword
              placeholder="请输入授课教师姓名"
              :remote-method="loadRemoteTeachers"
              :loading="loading">
              <el-option v-for="item in teacherList" :key="item.id" :label="item.name" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
      </el-col>
    </el-form-item>
    <el-form-item label="目标人群" v-if="!onlyRequired">
      <el-input maxlength="50" v-model="course.forUsers" placeholder="目标人群(限50字以内)"></el-input>
    </el-form-item>
    <el-form-item label="课程价值" v-if="!onlyRequired"><el-input maxlength="200" v-model="course.value" placeholder="课程价值(限200字以内)"></el-input></el-form-item>
    <el-form-item label="系统标签" v-if="!onlyRequired">
      <el-col :span="14">
        <el-select style="width: 100%;"
          v-model="showTags"
          multiple
          filterable
          remote
          reserve-keyword
          placeholder="请输入关键词"
          :remote-method="remoteTagMethod"
          :loading="loading">
          <el-option  v-for="item in tagList" :key="item.id"  :label="item.name" :value="item.id"> </el-option>
        </el-select>
      </el-col>
      <el-col :span="10">
        <el-form-item v-if="!onlyRequired" label="关键字"><el-input v-model="course.keywords"  maxlength="50" placeholder="关键字(限100字以内)"></el-input></el-form-item>
      </el-col>
    </el-form-item>
    <el-form-item v-if="!onlyRequired" label="观看设置">
      <el-col :span="14">
        <el-radio  v-model="course.device" :label="1">PC端可见</el-radio>
        <el-radio  v-model="course.device" :label="2">移动端可见</el-radio>
        <el-radio  v-model="course.device" :label="3">多端可见</el-radio>
      </el-col>
      <el-col :span="10">
        <el-form-item v-if="!onlyRequired" label="课程来源">
          <el-radio-group v-model="course.source" >
            <el-radio :label="1">内部</el-radio>
            <el-radio :label="2">外部</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-form-item>
    <!-- <el-form-item label="完成规则" v-if="!onlyRequired"><el-input maxlength="50" v-model="params.forScene"  placeholder="可基于组织树或受众选择"></el-input></el-form-item> -->
    <el-form-item label="开放权限" v-if="!onlyRequired"><el-input maxlength="50" v-model="course.openObject"  placeholder="可基于组织树或受众选择"></el-input></el-form-item>
    <el-form-item v-if="!onlyRequired" label="课程简介">
      <el-input type="textarea" :rows="3" v-model="course.overview" placeholder="课程介绍,要换成富文本编辑器"></el-input>
    </el-form-item>
  </el-form>
</div>
</template>

<script>
  export default {
    props: {
      course:{
        type:Object
      }
    },
    data() {
      return {
        //绑定变量
        onlyRequired:false,
        tagValues:[],
        teacherValues:[],
        resOwnerValues:[],
        sysTypeValues:[],
        loading:false,
        //使用数据
        teacherList:[],
        resOwnerList:[],
        sysTypeList:[],
        sceneList:[]
      }
    }
    methods:{
      async loadRemoteTeachers(query) {
         if(query) {
             this.loading = true;
              try {
           const {result, status} = await apiTeacher.findByName(query);
           if(status === 200) {

              result.forEach((item) => {
                item.value = item.id + ' ' +item.name
             });
              this.teacherList = result;
             this.loading = false;
           }
         } catch (error) {
            this.loading = false;
         }

         } else {
           this.teacherList = [];
         }
       },
       loadRemoteTags(query){
         
       }
    }
  }
</script>

<style>
</style>