yos_web/src/HManagement/archives_sc/list/modules/details.vue

<template>
  <div>
    <div class="container normal-panel normal-margin sticky" v-if="edit">
      <el-button class="inline-16" v-if="edit"  :disabled="form.status == '发布'" type="primary" size="small"  @click="editBtn" >编 辑</el-button>
      <release :data="form" @onSuccess="selectDetail"></release>
      <on-del v-if="tool.checkAuth($route.name,'delete') && form.status != '发布'" :data="form" @onSuccess="$store.dispatch('DrawerShowChange',false),$router.push('/archives_scmag')"></on-del>
    </div>
    <div style="overflow-x:hidden">
      <el-row :gutter="16">
        <el-col :span="12">
          <!-- 表单 -->
          <div class="container normal-panel normal-margin">
          <div class="normal-title container" style="padding-top:0;display:flex;justify-content:space-between">
            <p>课程详情</p>
<!--            <div>
              <el-button size="mini" @click="editBtn" style="margin-right:10px" :disabled="form.status == '发布'">编 辑</el-button>
              <release :data="form" @onSuccess="selectDetail"></release>
              <on-del v-if="tool.checkAuth($route.name,'delete') && form.status != '发布'" :data="form" @onSuccess="$store.dispatch('DrawerShowChange',false),$router.push('/archives_scmag')"></on-del>
            </div>-->
          </div>
            <el-row :gutter="20">
              <el-form :model="form" :disabled="edit" :rules="rules" ref="form" size="small" status-icon label-position="right" label-width="100px" class="demo-ruleForm">
                <el-col :span="24">
                  <el-form-item label="标题" prop="title">
                    <el-input v-model="form.title" placeholder="请输入标题"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                <el-form-item label="开始时间" prop="begdate">
                  <el-date-picker
                    style="width:100%"
                    v-model="form.begdate"
                    value-format="yyyy-MM-dd"
                    type="date"
                    placeholder="开始日期">
                  </el-date-picker>                  
                </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="下架时间" prop="enddate">
                    <el-date-picker
                      style="width:100%"
                      v-model="form.enddate"
                      value-format="yyyy-MM-dd"
                      type="date"
                      placeholder="下架日期">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="一级分类" prop="sat_courseware_classid_1">
                    <el-select style="width:100%;margin-right:16px" size="small" v-if="options1" v-model="form.sat_courseware_classid_1" clearable>
                      <el-option v-for="item in options1" :key="item.index" :value="item.sat_courseware_classid" :label="item.classname" @click.native="handelSelectClick(item)"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="二级分类" prop="sat_courseware_classid_2">
                    <el-select style="width:100%;margin-right:16px" size="small" v-model="form.sat_courseware_classid_2" clearable>
                      <el-option v-for="item in options2" :key="item.index" :value="item.sat_courseware_classid" :label="item.classname"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="备注">
                    <el-input v-model="form.notes" placeholder="请输入标备注"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="封面" prop="cover">
                    <previewImage v-if="form.cover" style="width:386px" :image="image" :deletebtn="!edit"
                      @onSuccess="clearCover"></previewImage>
                    <upload v-else btntype="limage" :folderid="folderid" accept=".JPG,.PNG" :bindData="{ownertable:'SAT_COURSEWARE',ownerid:form.sat_coursewareid,usetype:'cover'}" @onSuccess="onCoverSubmit"></upload>
                    <p class="info">注：建议上传图片大小210*120px像素，大小不超过2M，格式为JPG/PNG</p>
                  </el-form-item>
                </el-col>
              </el-form>
            </el-row>
          </div>
          <!-- 附件列表 -->
          <div class="container normal-panel">
            <attachmentList :attinfos="form.attinfos" @onSuccess="selectDetail" :onlyread="true">
              <!-- <upload slot="upload" :folderid="folderid" :bindData="{ownertable:'SAT_COURSEWARE',ownerid:form.sat_coursewareid,usetype:'default'}" @onSuccess="onSubmit"></upload> -->
            </attachmentList>
          </div>
        </el-col>
        <el-col :span="12">
          <scopeOfauth :onlyread="true" :defaultData="defaultData" appidname="sat_coursewareid" obiectName="sat_courseware" :dataid="$route.query.id"
            @onChecked="onChecked"></scopeOfauth>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import upload from '@/components/upload/hw_obs_upload.vue'
import previewImage from '@/components/previewImage/index.vue'
import attachmentList from '@/components/attachment_list/index.vue'
import scopeOfauth from '@/components/scopeOfAuthority/index.vue'
import onDel from "./delete"
import release from "./release"
import store from '@/store'
export default {
  components:{
    upload,
    previewImage,
    attachmentList,
    scopeOfauth,
    onDel,
    release
  },
  data () {
    return {
      rules:{
        title: [
          { required: true, message: '请输入课程名称', trigger: 'blur' },
        ],
        begdate: [
          {  required: true, message: '请选择开始日期', trigger: 'change' }
        ],
        enddate: [
          {  required: true, message: '请选择下架时间', trigger: 'change' }
        ],
        sat_courseware_classid_1: [
          {  required: true, message: '请选择一级分类', trigger: 'change' }
        ],
        sat_courseware_classid_2: [
          {  required: true, message: '请选择二级分类', trigger: 'change' }
        ],
        cover:[
          { required: true, message: '请上传封面', trigger: 'blur' },
        ],
      },
      options1:[],
      options2:[],
      form:{},
      image:{},
      authData:{},
      defaultData:{},
      folderid:JSON.parse(sessionStorage.getItem('folderid')).appfolderid,
      edit:true,
      detailData:''
    }
  },
  methods:{
    editBtn () {
      window.sessionStorage.setItem('newMaterial', JSON.stringify(this.detailData))
      this.$router.push({path:'/archives_scedit',query:{id:this.$route.query.id,type:'1'}})
    },
    onSubmit () {
      this.form.sat_courseware_classid = this.form.sat_courseware_classid_2
      this.$refs['form'].validate(async (valid) => {
        if (!valid) return false;
        const res = await this.$api.requested({
          "classname": "webmanage.saletool.courseware.courseware",
          "method": "insertOrUpdate",
          "content": this.form
        })
        this.tool.showMessage(res)
        this.selectDetail()
        this.insertCoursewareauth()
      });
    },
    async selectDetail () {
      const res = await this.$api.requested({
        "classname": "webmanage.saletool.courseware.courseware",
        "method": "selectDetail",
        "content": {
          "sat_coursewareid":this.$route.query.id
        }
      })
      this.detailData = res.data
      this.form = Object.assign({},this.form,res.data)
      console.log(this.options1);
      
      this.options1.forEach(e=>{
        e.sat_courseware_classid === res.data.sat_courseware_classid_1?this.options2 = e.children:''
      })
      this.queryFileLink()
      
    },
    // 分类查询
    async coursewareclass () {
      const res = await this.$api.requested({
        "id":20221102143302,
        "content": {
            "parentid": 0
        }
      })
      this.options1 = res.data
    },
    handelSelectClick (val) {
      this.options2 = val.children
      this.form.sat_courseware_classid_2 = ''
    },
    // 获取附件信息
    async queryFileLink () {
      console.log('eeeeeeeeeeeeeeeee');
      
      this.dialogEditVisible = true
      const res = await this.$api.requested({
        "classname": "system.attachment.Attachment",
        "method": "queryFileLink",
        "content": {
          "ownertable": 'SAT_COURSEWARE',
          "ownerid": this.form.sat_coursewareid,
          "usetype":'cover'//传空返回有所
        }
      })
      console.log(res.data,'eeeeeeeeeeeeeeeeeeeee');
      
      res.data[0]?this.image = res.data[0]:this.image = {url:''}
    },
    onCoverSubmit (res) {
      this.form.cover = JSON.parse(res.attinfos).data[0].url
      this.image = JSON.parse(res.attinfos).data[0]
    },
    // 删除封面
    clearCover () {
      this.form.cover = null
      this.image = {}
    },

    // 获取保存授权范围数据
    onChecked (param) {
      this.authData = param
    },
    // 新增授权范围
    async insertCoursewareauth () {
      const res = await this.$api.requested({
        "classname": "webmanage.saletool.courseware.coursewareauth",
        "method": "insert",
        "content": this.authData
      })
      res.code === 0?this.$notify({
        title:'失败',
        message:res.data,
        type:'error'
      }):''
    },
    // 查询授权信息
    async query_auth () {
      const res = await this.$api.requested({
        "classname": "webmanage.saletool.courseware.coursewareauth",
        "method": "selectList",
        "content": {
          "oncache":true,
          "sat_coursewareid": this.$route.query.id,
        }
      })
      this.defaultData = res.data
      console.log(this.defaultData,'授权aa ');
      
    },
  },
  created () {
    this.coursewareclass()
    this.tool.checkAuth(this.$route.name,'data_analysis')?'':this.$router.go(-1)
    //详情页禁用操作
    setTimeout(() => {
      this.$store.dispatch('pageOnlyRead',true)
    },500)
  },
  mounted () {
    setTimeout(() => {
      this.selectDetail()
      this.query_auth()
    },100)
  }
}

</script>
<style>

</style>
<style scoped>
.disable{
  pointer-events: none;
}
</style>