dvcp_v2_webapp/packages/party/AppPartyHistoryClass/components/seriesAdd.vue

<template>
  <section class="add_Party" :class="{isDetail:!isEdit}">
    <ai-detail>
      <ai-title slot="title" :title="detailTitle" isShowBottomBorder isShowBack @onBackClick="$emit('back')">
      </ai-title>
      <template #content>
        <ai-card title="基本信息" v-if="isEdit">
          <template #content>
            <el-form class="ai-form" :model="form" label-width="120px" ref="ruleForm" :rules="rules">
              <el-form-item style="width: 100%;" label="单集名称" prop="title">
                <el-input size="small" v-model="form.title" clearable placeholder="请输入..." maxlength="100"
                          show-word-limit/>
              </el-form-item>
              <el-form-item style="width: 100%;" label="单集顺序" prop="num">
                <el-row type="flex" justify="space-between">
                  <div style="flex: 1;margin-right: 20px;">
                    <el-input size="small" v-model="form.num" clearable placeholder="请输入..." maxlength="100"
                              show-word-limit/>
                  </div>
                  <span>已更新至{{episodeNum}}集</span>
                </el-row>
              </el-form-item>
              <el-form-item style="width: 100%;" label="视频" prop="videoUrl">
                <el-upload :show-file-list="false" ref="upload1"
                          action :http-request="submitUpload" :accept="accept" :limit="1">
                  <div class="video" v-if="!form.videoUrl.length">
                    <div class="icon">
                      <ai-icon type="svg" icon="iconVideo"/>
                      <span>上传视频</span>
                    </div>
                    <span class="tips">支持mp4格式，单个文件最大100MB</span>
                  </div>
                </el-upload>
                <video class="video-com" style="width:100%; height:100%; object-fit: fill;" muted
                      :src="form.videoUrl[0].url" controls="controls" v-if="form.videoUrl.length"></video>
                <el-upload :show-file-list="false" ref="upload2" action :http-request="submitUpload" :accept="accept"
                          :limit="1" v-if="form.videoUrl.length">
                  <el-button style="margin-top: 10px;">重新选择</el-button>
                </el-upload>
              </el-form-item>
            </el-form>
          </template>
        </ai-card>
        <!--详情-->
        <ai-card title="基本信息" v-else>
          <template #content>
            <div class="village_title">
              <h3>{{ form.title }}</h3>
              <p style="font-size: 14px;color: #999;">{{ form.createDate|timeVal }} {{ form.organizationName }}</p>
            </div>
            <div class="village_file" v-if="form.files && form.files.length">
              <span>附件</span>
              <div>
                <p v-for="(item,i) in form.files" :key="i" class="fileSty" @click="downLoad(item.accessUrl)">
                  {{ item.fileName }}{{ item.postfix }}
                </p>
              </div>
            </div>
            <img class="cover" :src="form.thumbUrl[0].url" v-if="form.thumbUrl && form.thumbUrl.length">
            <div class="village_cont" v-html="form.content"/>
          </template>
        </ai-card>
      </template>
      <template #footer>
        <template v-if="isEdit">
          <el-button size="small" @click="$emit('back')">取消</el-button>
          <el-button type="primary" size="small" @click="saveAdd">保存</el-button>
        </template>
      </template>
    </ai-detail>
  </section>
</template>

<script>
  import mp4box from 'mp4box'
  import { mapState } from 'vuex'
  export default {
    name: "seriesAdd",
    props: {
      instance: Function,
      dict: Object,
      permissions: Function,
      row: Object,
      parentRow: Object,
      isEdit: Boolean
    },
    computed: {
      detailTitle() {
        return this.isEdit ? '编辑剧集' : '新增剧集'
      },
      ...mapState(['user'])
    },
    data() {
      return {
        form: {
          title: '',
          num: '',
          videoUrl: [],
        },
        accept: ".mp4",
        rules: {
          title: [{required: true, message: "请填写单集名称"}],
          num: [{required: true, message: "请填写单集顺序"}],
          videoUrl: [{required: true, message: "请选择视频"}],
        },
        isDetail: true,
        episodeNum: 0,
        cropOps: {
          width: "336px",
          height: "210px"
        }
      }
    },

    methods: {
      downLoad(url) {
        window.open(url);
      },
      // 保存
      saveAdd() {
        this.$refs.ruleForm.validate(v => {
          if (v) {
            this.instance.post('/app/apppartyclassroomepisode/addOrUpdate', {
              ...this.form,
              createUser: this.user.info.name,
              createUserId: this.user.info.id,
              status: 1,
              classroomId: this.parentRow?.id,
              id: !!this.row.id ? this.row.id : null,
              videoUrl: this.form.videoUrl.length ? this.form.videoUrl[0].url : ''
            }).then((res) => {
              if (res && res.code == 0) {
                this.row?.id ? this.$message.success('修改成功') : this.$message.success('添加成功');
                this.$emit("back");
              }
            })
          }
        })
      },
      submitUpload(file) {
        this.$refs['upload1']?.clearFiles();
        this.$refs['upload2']?.clearFiles();
        this.$refs['ruleForm']?.clearValidate('videoFile');
        const fileType = file.file.name.split(".")[1];
        const size = file.file.size / 1024 / 1024 > 100;
        let mp4boxfile = mp4box.createFile();
        const reader = new FileReader();
        reader.readAsArrayBuffer(file.file);
        reader.onload = (e) => {
          const arrayBuffer = e.target.result;
          arrayBuffer.fileStart = 0;
          mp4boxfile.appendBuffer(arrayBuffer);
        };
        mp4boxfile.onReady = (info) => {
          let codec = info.mime.match(/codecs="(\S*),/)[1]
          if (codec.indexOf('avc') === -1) {
            return this.$message.error("视频编码格式不支持")
          }

          if (size) {
            return this.$message.error("视频大小不能超过100M");
          }

          if (fileType && this.accept.indexOf(fileType.toLocaleLowerCase()) > -1) {
            let formData = new FormData()
            formData.append('file', file.file);
            this.instance.post(`/admin/file/add-unlimited`, formData).then(res => {
              if (res && res.data) {
                let videoList = res.data[0].split(";");

                this.form.videoUrl = [{
                  id: videoList[1],
                  url: videoList[0]
                }]
              }
            })
          } else {
            return this.$message.error("视频格式错误");
          }

        };
      },
      // 详情
      checkDetaiList(id) {
        id && this.instance.post('/app/apppartyclassroom/queryLargestNum', null, {
          params: {id}
        }).then((res) => {
          if (res?.data) {
            this.episodeNum = res.data;
          }
        })
      },
      getDetail() {
        this.instance.post('/app/apppartyclassroomepisode/queryDetailById', null, {
          params: {
            id: this.row?.id
          }
        }).then((res) => {
          if (res?.data) {
            this.form.title = res.data.title;
            this.form.num = res.data.num;
            this.form.videoUrl = res.data.videoUrl ? [{
              url: res.data.videoUrl
            }]: [];
          }
        })
      },
      handleDelete(ids) {
        this.$confirm('确定删除该文章吗').then(() => {
          this.instance.post('/app/apppartyhistory/delete', null, {
            params: {ids}
          }).then(res => {
            if (res?.code == 0) {
              this.isAdd = false;
              this.isDetailEdit = false;
              this.$message.success('删除成功');
              if ((this.total - 1) % this.searchObj.size == 0) {
                this.searchObj.current -= 1
              }
              this.searchVillageList();
            }
          })
        }).catch(() => 0)
      },
    },
    created() {
      this.checkDetaiList(this.parentRow?.id);
      if (this.row?.id) {
        this.getDetail();
      }
    },
  }
</script>

<style scoped lang="scss">
  .cover {
    display: block;
    width: 300px;
    height: 140px;
    margin: 20px auto;
  }

  .add_Party {
    height: 100%;
    position: relative;
    background: #fff;
    display: flex;
    flex-direction: column;

  .video {
    width: 640px;
    height: 360px;
    border-radius: 4px;
    border: 1px dashed #D0D4DC;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .icon {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      span:nth-child(2) {
        display: inline-block;
        font-size: 16px;
        color: #333333;
        line-height: 30px;
      }

      .iconfont {
        display: inline-block;
        font-size: 40px;
        color: #2266FF;
      }
    }

    .tips {
      display: inline-block;
      font-size: 12px;
      color: #999999;
      line-height: 26px;
    }
  }

  .video-com {
    width: 640px;
    height: 360px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 2px;
    border: 1px solid #D0D4DC;
    margin-top: -40px;
  }

  :deep( .AiIcon ){
    width: 38px;
    height: 38px;
  }

  .footer_btn {
    width: 106px;
  }

    .detail-content {
      padding-bottom: 80px;
    }

    .el-form {
      .upload-tip {
        position: absolute;
        text-align: left;
        left: 100px;
        top: 5px;

        li {
          color: #888;
          font-size: 12px;
          line-height: 14px;
        }

        b {
          color: red;
          font-size: 14px
        }
      }
    }

    .village_detail {
      margin-top: 16px;
      width: 760px;
      overflow-y: auto;
      border: 1px solid #eee;
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      background: #fff;

      .village_title {
        padding: 24px;
        border-bottom: 1px solid #eee;

        h3, p {
          text-align: center;
        }
      }

      .village_file {
        display: flex;
        border-bottom: 1px solid #eee;
        padding: 8px 20px;

        span {
          width: 60px;
        }

        div {
          flex: 1;
        }

        .fileSty {
          color: #999;
          font-size: 14px;
          cursor: pointer;
          margin-bottom: 4px;
        }

        .fileSty:hover {
          color: #5088FF;
        }
      }

      .village_cont {
        flex: 1;
        padding: 30px 20px;
      }
    }

    &.isDetail {
      :deep( .ai-detail__content ){
        background: #f3f6f9;
      }
    }
  }
</style>