add.vue

<template>
  <div class="info">
    <!-- <audio-play></audio-play> -->
    <video-dialog ref="videoDialog"></video-dialog>
    <div class="info-header">新建学习内容</div>
    <div class="info-container">
      <div class="info-wrapper">
        <el-form  :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              label-width="140px"
              class="demo-form-inline party-form"
              :inline="true"
              label-position="top">
          <el-form-item label="学习内容名称" prop="name" class="w50" style="padding-right:100px;">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="适用范围" >
            <!-- ALL_PLAT,THIS_ORGAN,THIS_ORGAN_SUB -->
            全平台
            <!-- <el-input v-model="ruleForm.applicableScope"></el-input> -->
            <!-- <el-radio-group v-model="ruleForm.applicableScope">
              <el-radio label="THIS_ORGAN"></el-radio>
              <el-radio label="THIS_ORGAN_SUB"></el-radio>
            </el-radio-group> -->
          </el-form-item>
             <el-form-item label="所属学习项目" class="w50">
                <el-select
                  placeholder="请选所属学习项目"
                  @focus="getLearnProject"
                  v-model="ruleForm.learningProjectId"
                >
                  <el-option
                    v-for="item in learningProjectIdList"
                    :label="item.name"
                    :value="item.id"
                    :key="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
          <el-form-item label="学习内容宣传图" prop="cover" class="w100">
            <!-- <img class="imgSize" src alt /> -->
            <upload-img @imgUrl="imgUrl"></upload-img>
          </el-form-item>

          <el-form-item class="selectH100 w50" label="展板类别" prop="exhibitionBoardCatIdList">
            <el-select
              placeholder="请选择展板类别"
              @focus="getAssetTypeData"
              multiple
              v-model="ruleForm.exhibitionBoardCatIdList"
              @change="getSelectDep"
            >
              <el-checkbox :style="selfstyle" v-model="checkedThing" @change="selectAllThing">全选</el-checkbox>
              <el-option
                v-for="item in videoContentCat"
                :label="item.name"
                :value="item.id"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
           <el-form-item class="selectH100" label="版权方" prop="copyrightOwnerIdList">
            <el-select
              placeholder="请选择版权方"
              @focus="getAssetTypeData2"
              multiple
              v-model="ruleForm.copyrightOwnerIdList"
              @change="getSelectDep2"
            >
              <el-checkbox :style="selfstyle" v-model="checkedThing2" @change="selectAllThing2">全选</el-checkbox>
              <el-option
                v-for="item in assetType2"
                :label="item.name"
                :value="item.id"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="展板备选清单" class="w100"></el-form-item>
        </el-form>
        <div class>
          <!-- {{multipleSelection}} -->
          <!-- {{ruleForm.exhibitionBoardIdList}} -->
          <el-table
            border
            @selection-change="handleSelectionChange"
            style="width: 100%;height:300px;overflow:auto;"
            height="100%"
            ref="multipleTable"
            :data="tableData"
          >
             <el-table-column type="selection" width="55" ></el-table-column>
            <el-table-column type="index" width="120" label="序号"></el-table-column>
            <el-table-column show-overflow-tooltip label="版权方名称" prop="name"></el-table-column>
            <el-table-column show-overflow-tooltip label="展板类别" prop="assetCopyrightOwnerName"></el-table-column>
            <el-table-column show-overflow-tooltip label="展板版权方" prop="boardCopyrightOwnerName"></el-table-column>
            <el-table-column label="操作" width="180">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  style="padding:0"
                  @click="videoPreview(scope.row)"
                >视频预览</el-button>
                <el-button
                  type="text"
                  style="padding:0"
                  @click="displayPreview(scope.row)"
                >展板预览</el-button>
                
              </template>
            </el-table-column>
          </el-table>
        </div>
             <!--新增弹框-->
        <el-dialog
          custom-class="party-dialog"
          title="展板预览区"
          width="468px"
          :visible.sync="dialogVisible"
          :before-close="closeDialog"
        >
          <div class="dialog-content">
            <el-form
              :model="classForm"
              ref="classForm"
              label-width="80px"
              label-position="top"
              :rules="rules"
              id="ruleo"
              class="party-form"
            >
              <el-form-item label="展板名称">
                <el-input v-model="classForm.name"></el-input>
              </el-form-item>
              <el-form-item label="版权方">
                <el-input v-model="classForm.name"></el-input>
              </el-form-item>
              <el-form-item label="展板分类">
                <el-input v-model="classForm.name"></el-input>
              </el-form-item>
              <el-form-item label="展板宣传图">
                <img class="imgSize" :src="classForm.cover" alt="">
              </el-form-item>
              <el-form-item label="简介">
                <el-input type="textarea" v-model="classForm.remarks"></el-input>
              </el-form-item>
            </el-form>
          </div>
          <!-- <div slot="footer" class="dialog-footer btn-group">
            <el-button size="mini" type="primary" @click="save('classForm')">确定</el-button>
            <el-button size="mini" @click="close">取 消</el-button>
          </div> -->
        </el-dialog>
      </div>
    </div>
    <div class="info-footer">
      <div class="btn-group">
        <!-- 确定、取消 -->
       <el-button v-show="type === 'add'"  size="mini" type="primary" class="btn_form_search" @click="submitForm('ruleForm')">提交审核</el-button>
        <el-button v-show="type === 'Update'"  size="mini" type="primary" class="btn_form_search" @click="updateForm('ruleForm')">提交审核</el-button>
        <el-button size="mini" class="btn_form_search" @click="close">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import uploadImg from '@/page/content/components/uploadVue/uploadImg'
import videoDialog from '@/page/content/components/dialog/videoDialog'
import audioPlay from '@/page/content/components/audioPlay'
export default {
   components:{
    uploadImg,
    videoDialog,
    audioPlay
  },
  data() {
    return {
      dialogVisible: false,
      classForm: {},
      type: this.$route.query.type,
      learningProjectIdList:'',
      videoContentCat: [],
      assetType2:[],
      checkedThing: false,
      checkedThing2:false,
      selfstyle: {
        textAlign: "right",
        width: "100%",
        paddingRight: "10px"
      },
      tableData: [],
      ruleForm: {
        applicableScope :"ALL_PLAT",
        exhibitionBoardIdList:[]
      },rules: {
        name: [
          { required: true, message: "请输入版权方名称", trigger: "blur" }
          // { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        date1: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change"
          }
        ],
        date2: [
          {
            type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change"
          }
        ],
      
      },
      multipleSelection:[]
    };
  },
  mounted(){
    this.init()
  },
  methods: {
    // 视频预览
    videoPreview(row){
      // alert("视频")
      // console.log(row,'222')
      this.$refs.videoDialog.dialogVisible = true
      this.$refs.videoDialog.videoImg = row.cover
      this.$refs.videoDialog.videoSrc = row.videoList[0].fileUrl
    },
     // 展板预览
    displayPreview(row) {
      this.dialogVisible = true;
      this.classForm =row
    },
    // 关闭弹窗
    closeDialog(){
      this.dialogVisible = false;
    },
      init() {
      if (this.$route.query.type === "Update") {
        this.getInfo(this.$route.query.id);
        this.getLearnProject()
        this.getAssetTypeData()
        this.getAssetTypeData2()
        // this.getLearnContentBoard()
      }
    },
    //  获取版权方详情
    getInfo(id) {
      let vm = this;
      vm.$https(
        {
          url: "learningContent/get/" + id,
          method: "get",
          authType: this.backToken
        }
        // param
      )
        .then(res => {
          let data = res.data.data;
          this.ruleForm = data;
          console.log(this.ruleForm)
          this.ruleForm = {
            name :data.name,
            applicableScope:data.applicableScope,
            copyrightOwnerIdList:data.copyrightOwnerIdList,
            cover:data.cover,
            learningProjectId:data.learningProjectId,
            exhibitionBoardCatIdList:data.exhibitionBoardCatIdList,
            id:data.id,
            exhibitionBoardIdList:data.exhibitionBoardIdList,
          }
          this.tableData = data.exhibitionBoardList
          this.multipleSelection = data.exhibitionBoardList
          
        })
        .catch(function(err) {
          console.log(err);
        });
    },
    // 获取获取学习内容展板全部列表
    getLearnContentBoard(){
      let vm = this;
      vm.$https({
        url: "learningContentBoard/getList",
        method: "get",
        authType: this.backToken
      },
      {learningContentId:this.$route.query.id}
      )
        .then(res => {
          let data = res.data.data;
          console.log(data)
          // this.tableData = data
          // this.multipleSelection = data
        })
        .catch(function(err) {
          console.log(err);
        });
    },
    // 多选赋值
    handleSelectionChange(val) {
        this.multipleSelection = val;
        // this.ruleForm.exhibitionBoardIdList = val
        let newArray = val.map((item) => {
            return item.id;
        })
        this.ruleForm.exhibitionBoardIdList = newArray
    },
      // 新增
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
          console.log(this.ruleForm)
        if (valid) {
          this.$https(
            {
              url: "/learningContent/save",
              method: "post",
              authType: this.backToken
            },
            // this.ruleForm
            this.$qs.stringify(this.ruleForm)
          )
            .then(res => {
              this.$message({ type: "success", message: "新增成功!" });
              history.go(-1);
            })
            .catch(function(err) {
              console.log(err);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 修改版权方
    updateForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$https(
            {
              url: "learningContent/update",
              method: "put",
              authType: this.backToken
            },
            this.$qs.stringify(this.ruleForm)
            // this.ruleForm
          )
            .then(res => {
              this.$message({ type: "success", message: "修改成功!" });
              history.go(-1);
            })
            .catch(function(err) {
              console.log(err);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 获取学习项目列表
    getLearnProject(){
      let vm = this;
      vm.$https({
        url: "learningProject/getList",
        method: "get",
        authType: this.backToken
      })
        .then(res => {
          let data = res.data.data;
          this.learningProjectIdList = data;
          // this.value1[0]=data.expireDateEnd
          //this.value1[1]=data.expireDateStart
        })
        .catch(function(err) {
          console.log(err);
        });
    },
    imgUrl(url){
      console.log(url,'图片服务器地址')
      this.ruleForm.cover = url
    },
    getSelectDep(exhibitionBoardCatIdList) {
      if (exhibitionBoardCatIdList.length === this.videoContentCat.length) {
        this.checkedThing = true;
      } else {
        this.checkedThing = false;
      }
    },
    // 
     getSelectDep2(exhibitionBoardCatIdList) {
      
      if (exhibitionBoardCatIdList.length === this.assetType2.length) {
        this.checkedThing2 = true;
      } else {
        this.checkedThing2 = false;
      }

       console.log(this.ruleForm.exhibitionBoardCatIdList,"分类")
       console.log(this.ruleForm.copyrightOwnerIdList,"展板")
      const param = {
        boardCopyrightOwnerIdList: this.ruleForm.copyrightOwnerIdList,
        exhibitionBoardCatIdList: this.ruleForm.exhibitionBoardCatIdList
      }
      this.getTableData(param)
    },
    // 根据展板类别，版权方获取展板备选清单
    getTableData(param) {
      let vm = this;
      vm.$https(
        {
          url: "exhibitionBoard/getList",
          method: "get",
          authType: this.backToken
        },
        vm.$qs.stringify(param)
        // param
      )
        .then(res => {
          let data = res.data.data;
         console.log(data)
          vm.tableData = data;
        })
        .catch(function(err) {
          console.log(err);
        });
    },

    selectAllThing() {
      // debugger
      this.ruleForm.exhibitionBoardCatIdList = [];
      if (this.checkedThing) {
        this.videoContentCat.map(item => {
          this.ruleForm.exhibitionBoardCatIdList.push(item.id);
        });
      } else {
        this.ruleForm.exhibitionBoardCatIdList = [];
      }
    },
     selectAllThing2() {
      // debugger
      this.ruleForm.copyrightOwnerIdList = [];
      if (this.checkedThing2) {
        this.assetType2.map(item => {
          this.ruleForm.copyrightOwnerIdList.push(item.id);
        });
      } else {
        this.ruleForm.copyrightOwnerIdList = [];
      }
    },
    // 获取视频分类列表
    getAssetTypeData() {
      let vm = this;
      vm.$https({
        url: "exhibitionBoardCat/getList",
        method: "get",
        authType: this.backToken
      })
        .then(res => {
          let data = res.data.data;
          this.videoContentCat = data;
          // this.value1[0]=data.expireDateEnd
          //this.value1[1]=data.expireDateStart
        })
        .catch(function(err) {
          console.log(err);
        });
    },
     // 获取展板列表
    getAssetTypeData2() {
       let vm = this;
      vm.$https(
        {
          url: "copyrightOwner/getList",
          method: "get",
          authType: this.backToken
        },
        { copyrightOwnerType: "EXHIBITION_BOARD" }
      )
        .then(res => {
          let data = res.data.data;
          this.assetType2 = data; 
        })
        .catch(function(err) {
          console.log(err);
        });
    },
    // 新增
    addSubmit() {
      // 至少选一个备选清单 提示
      alert("请先至少选择一个展板备选清单");
    },
    close() {
      history.go(-1);
    },
    moveUpward(row, index) {
      if (index > 0) {
        let upData = this.tableData[index - 1];
        this.tableData.splice(index - 1, 1);
        this.tableData.splice(index, 0, upData);
      } else {
        this.$message({
          message: "已经是第一条，上移失败",
          type: "warning"
        });
      }
    },
    moveDown(row, index) {
      if (index + 1 == this.tableData.length) {
        this.$message({
          message: "已经是最后一条，下移失败",
          type: "warning"
        });
      } else {
        let downData = this.tableData[index + 1];
        this.tableData.splice(index + 1, 1);
        this.tableData.splice(index, 0, downData);
      }
    }
  }
};
</script>

<style lang="less">
</style>