dvcp_v2_webapp/packages/3.0.0/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>
        <div class="detail-content" v-if="isEdit">
          <el-form :model="form" label-width="120px" ref="ruleForm" :rules="rules">
            <el-form-item label="单集名称" prop="title">
              <el-input size="small" v-model="form.title" clearable placeholder="请输入..." maxlength="100"
                        show-word-limit/>
            </el-form-item>
            <el-form-item label="单集顺序" prop="num">
              <el-row type="flex" justify="space-between">
                <div style="width: 540px">
                  <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 label="视频" prop="videoUrl">
              <el-input size="small" v-model="form.videoUrl" clearable placeholder="请输入..." maxlength="300"
                        show-word-limit/>
            </el-form-item>
          </el-form>
        </div>
        <!--详情-->
        <div class="village_detail" v-else>
          <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"/>
        </div>
      </template>
      <template #footer>
        <template v-if="isEdit">
          <el-button size="small" @click="$emit('back')">取消</el-button>
          <el-button type="primary" size="small" @click="saveAdd(0)">保存
          </el-button>
          <el-button type="primary" size="small" @click="saveAdd(1)">保存并发布
          </el-button>
        </template>
      </template>
    </ai-detail>
  </section>
</template>

<script>
  export default {
    name: "seriesAdd",
    props: {
      instance: Function,
      dict: Object,
      permissions: Function,
      row: Object,
      parentRow: Object,
      isEdit: Boolean
    },
    computed: {
      detailTitle() {
        return this.isEdit ? '编辑剧集' : '新增剧集'
      }
    },
    data() {
      return {
        form: {
          organizationId: '',
          organizationName: '',
          title: '',
          num: '',
          videoUrl: "",
        },
        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(status) {
        this.$refs.ruleForm.validate(v => {
          if (v) {
            this.instance.post('/app/apppartyclassroomepisode/addOrUpdate', {
              ...this.form,
              status,
              classroomId: this.parentRow?.id,
              id: !!this.row.id ? this.row.id : null
            }).then((res) => {
              if (res && res.code == 0) {
                this.row?.id ? this.$message.success('修改成功') : this.$message.success('添加成功');
                this.$emit("back");
              }
            })
          }
        })
      },
      // 详情
      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;
          }
        })
      },
      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.form.organizationId = this.organizationId;
      this.form.organizationName = this.organizationName;
      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;

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

    .el-form {
      width: 760px;
      margin: 18px auto 64px;
      // overflow-x: auto;
      // overflow-y: auto;
      padding-right: 3px !important;

      .el-form-item {
        margin-bottom: 18px;
      }

      .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 {
      ::v-deep .ai-detail__content {
        background: #f3f6f9;
      }
    }
  }
</style>