saas_entrepot_admin/src/views/resource/videoManagement/moduleManagement/addChapter.vue

<template>
  <div id="addChapter">
    <el-dialog
      :visible.sync="dialogVisible"
      width="700px"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <div slot="title" class="hearders">
        <div class="leftTitle">添加章</div>
        <div class="rightBoxs">
          <img
            src="@/assets/images/Close@2x.png"
            alt=""
            @click="dialogVisible = false"
          />
        </div>
      </div>
      <div>
        <p>
          <el-button :size="size" type="primary" @click="addChapterList"
            >添加</el-button
          >
        </p>
        <el-form label-width="100px" class="elform_style">
          <div v-for="(item, index) in list" :key="index" class="dis_box">
            <div class="left_box">
              <el-form-item label="标题前缀">
                <el-input v-model="item.prefixName"></el-input>
                <p class="p_style">注：便于检索、归类，以及区分一样的标题</p>
              </el-form-item>
              <el-form-item label="章标题" required>
                <el-input v-model="item.name"></el-input>
                <p class="p_style">
                  注：请尽量规范易懂，方便在课程目录表呈现给学员
                </p>
              </el-form-item>
            </div>
            <div class="clear_style">
              <el-button :size="size" @click="list.splice(index, 1)"
                >删除</el-button
              >
            </div>
          </div></el-form
        >
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm" :disabled="!list.length"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      size: "small",
      dialogVisible: false,
      list: [],
    };
  },
  methods: {
    addChapterList() {
      this.list.push({});
    },
    openBoxs(arr) {
      this.businList = JSON.parse(JSON.stringify(arr));
      this.list = [{}]
      this.dialogVisible = true;
    },
    submitForm() {
      const arr = [];
      this.list.forEach((item, index) => {
        if (!item.name && item.name !== 0) {
          arr.push(index + 1);
        }
      });
      if (arr.length) {
        this.$message.error(
          `第${arr.join(",")}条数据没有填写章标题，请填写完整后提交`
        );
        return;
      }
      let data = this.list.map((item) => {
        item.businessList = this.businList;
        item.status = 1;
        item.publishStatus = 1;
        item.coverUrl = "oss/images/avatar/20211013/1634097664410_1397766697";
        return item;
      });
      this.$api.addMoreCoursechapter(data.reverse()).then((res) => {
        this.dialogVisible = false;
        this.$emit("backData", res.data);
      });
    },
  },
};
</script>

<style lang="less" scoped>
.dis_box {
  background-color: #eee;
  padding: 10px 10px 0px;
  display: flex;
  margin-bottom: 16px;
  .left_box {
    flex: 1;
  }
  .clear_style {
    flex-shrink: 0;
    width: 80px;
    vertical-align: top;
    text-align: center;
  }
}
.elform_style{
    max-height: 620px;
    overflow: auto;
}
.p_style {
  font-size: 12px;
  color: #a4a4a4;
  margin: 0;
}
</style>