|
@@ -0,0 +1,355 @@
|
|
|
+<template>
|
|
|
+ <div id="addSection">
|
|
|
+ <el-dialog
|
|
|
+ :visible.sync="dialogVisible"
|
|
|
+ width="900px"
|
|
|
+ :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>
|
|
|
+ <div class="heightMax">
|
|
|
+ <div v-for="(item, index) in list" :key="index">
|
|
|
+ <el-form
|
|
|
+ label-width="130px"
|
|
|
+ class="elform_style"
|
|
|
+ :ref="`listRulesList${index}`"
|
|
|
+ :model="list[index]"
|
|
|
+ :rules="rules"
|
|
|
+ >
|
|
|
+ <div class="left_box">
|
|
|
+ <el-form-item label="标题前缀" prop="prefixName">
|
|
|
+ <el-input v-model="item.prefixName"></el-input>
|
|
|
+ <p class="p_style">注:便于检索、归类,以及区分一样的标题</p>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="节标题" prop="name">
|
|
|
+ <el-input v-model="item.name"></el-input>
|
|
|
+ <p class="p_style">
|
|
|
+ 注:请尽量规范易懂,方便在课程目录表呈现给学员
|
|
|
+ </p>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="节类型" prop="sectionType">
|
|
|
+ <el-select
|
|
|
+ clearable
|
|
|
+ v-model="item.sectionType"
|
|
|
+ placeholder="请选择节类型"
|
|
|
+ @change="changesType(index, $event)"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in sectionTypeOptions"
|
|
|
+ :key="index"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ v-if="item.sectionType"
|
|
|
+ :label="item.sectionType === 1 ? 'URL地址' : '频道号'"
|
|
|
+ prop="url"
|
|
|
+ >
|
|
|
+ <el-input v-model="item.url"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <div v-if="item.sectionType === 1">
|
|
|
+ <el-form-item label="节时长" prop="durationTime">
|
|
|
+ <el-time-picker
|
|
|
+ value-format="HH:mm:ss"
|
|
|
+ range-separator=":"
|
|
|
+ v-model="item.durationTime"
|
|
|
+ placeholder="请填入节时长"
|
|
|
+ >
|
|
|
+ </el-time-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div v-if="item.sectionType === 2">
|
|
|
+ <el-form-item label="直播开始时间" prop="liveStartTime">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="item.liveStartTime"
|
|
|
+ type="datetime"
|
|
|
+ placeholder="请选择直播开始时间"
|
|
|
+ value-format="timestamp"
|
|
|
+ @change="changeStartTime(index, $event)"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="直播结束时间" prop="liveEndTime">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="item.liveEndTime"
|
|
|
+ type="datetime"
|
|
|
+ placeholder="请选择直播结束时间"
|
|
|
+ value-format="timestamp"
|
|
|
+ @change="changeEndTime(index, $event)"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="直播时长"
|
|
|
+ v-if="item.liveStartTime && item.liveEndTime"
|
|
|
+ >
|
|
|
+ {{ compTimeOUT(item.liveStartTime, item.liveEndTime) }}
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <el-form-item label="讲师" prop="teacherId">
|
|
|
+ <el-select
|
|
|
+ clearable
|
|
|
+ v-model="item.teacherId"
|
|
|
+ placeholder="请选择讲师"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in teacherList"
|
|
|
+ :key="index"
|
|
|
+ :label="item.teacherName"
|
|
|
+ :value="item.teacherId"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div class="clear_style">
|
|
|
+ <el-button :size="size" @click="list.splice(index, 1)"
|
|
|
+ >删除</el-button
|
|
|
+ >
|
|
|
+ </div></el-form
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </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: [],
|
|
|
+ rules: {
|
|
|
+ prefixName: [
|
|
|
+ { required: true, message: "请输入标题前缀", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ name: [{ required: true, message: "请输入节标题", trigger: "blur" }],
|
|
|
+ sectionType: [
|
|
|
+ { required: true, message: "请选择节类型", trigger: "change" },
|
|
|
+ ],
|
|
|
+ url: [
|
|
|
+ { required: true, message: "请输入URL地址/频道号", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ durationTime: [
|
|
|
+ { required: true, message: "请选择节时长", trigger: "change" },
|
|
|
+ ],
|
|
|
+ liveStartTime: [
|
|
|
+ { required: true, message: "请选择直播开始时间", trigger: "change" },
|
|
|
+ ],
|
|
|
+ liveEndTime: [
|
|
|
+ { required: true, message: "请选择直播结束时间", trigger: "change" },
|
|
|
+ ],
|
|
|
+ teacherId: [
|
|
|
+ { required: true, message: "请选择讲师", trigger: "change" },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ sectionTypeOptions: [
|
|
|
+ {
|
|
|
+ label: "录播",
|
|
|
+ value: 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "直播",
|
|
|
+ value: 2,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.$api.inquiresystemteacherlist({ status: 1 }).then((res) => {
|
|
|
+ this.teacherList = res.rows;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ /**
|
|
|
+ * 自动计算直播时长
|
|
|
+ */
|
|
|
+ compTimeOUT: function () {
|
|
|
+ return function (start, end) {
|
|
|
+ if (start && end) {
|
|
|
+ if (end < start) {
|
|
|
+ return "请检查开始与结束的时间范围";
|
|
|
+ }
|
|
|
+ const asTimes = end / 1000 - start / 1000;
|
|
|
+ return this.$methodsTools.secondToDate(asTimes, false);
|
|
|
+ } else {
|
|
|
+ return "未检测到直播开始时间结束时间,无法计算!";
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /**
|
|
|
+ * 直播开始逻辑处理
|
|
|
+ */
|
|
|
+ changeStartTime(index, time) {
|
|
|
+ if (this.list[index].liveEndTime && this.list[index].liveEndTime < time) {
|
|
|
+ this.$set(this.list[index], "liveEndTime", "");
|
|
|
+ this.$message.warning("直播开始时间不能大于直播结束时间");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 直播结束逻辑处理
|
|
|
+ */
|
|
|
+ changeEndTime(index, time) {
|
|
|
+ if (
|
|
|
+ this.list[index].liveStartTime &&
|
|
|
+ this.list[index].liveStartTime > time
|
|
|
+ ) {
|
|
|
+ this.$set(this.list[index], "liveEndTime", "");
|
|
|
+ this.$message.warning("直播结束时间不能小于直播开始时间");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 修改节类型需要处理的逻辑
|
|
|
+ */
|
|
|
+ changesType(index, val) {
|
|
|
+ let ary = ["url", "durationTime", "liveStartTime", "liveEndTime"];
|
|
|
+ for (let i = 0; i < ary.length; i++) {
|
|
|
+ this.$set(this.list[index], ary[i], "");
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 添加节
|
|
|
+ */
|
|
|
+ addChapterList() {
|
|
|
+ this.list.push({});
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 打开页面触发函数
|
|
|
+ */
|
|
|
+ openBoxs(arr) {
|
|
|
+ this.businList = JSON.parse(JSON.stringify(arr));
|
|
|
+ this.list = [{}];
|
|
|
+ this.dialogVisible = true;
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 表单校验
|
|
|
+ */
|
|
|
+ submitForm() {
|
|
|
+ //用Promise.all进行全部form表单的验证
|
|
|
+ Promise.all([
|
|
|
+ //数组部分的表单,用map返回验证函数的调用
|
|
|
+ ...this.list.map((item, index) =>
|
|
|
+ this.validateForm(`listRulesList${index}`)
|
|
|
+ ),
|
|
|
+ ])
|
|
|
+ .then((res) => {
|
|
|
+ if (res) {
|
|
|
+ // 全部表单验证通过
|
|
|
+ this.submitForms();
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.$message.error("请检查必填项是否填写规范");
|
|
|
+ });
|
|
|
+ },
|
|
|
+ validateForm(refs) {
|
|
|
+ //获取到form表单的dom,如果是对象直接拿到,如果是数组,就拿第一个
|
|
|
+ //elementui对循环的form包装成了数组
|
|
|
+ let valiForm = this.$refs?.[refs].validate
|
|
|
+ ? this.$refs?.[refs]
|
|
|
+ : this.$refs?.[refs][0];
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ //在Promise里进行验证,如果通过就resolve()
|
|
|
+ valiForm.validate((res) => {
|
|
|
+ if (res) resolve();
|
|
|
+ else reject();
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 通过验证提交逻辑
|
|
|
+ */
|
|
|
+ submitForms() {
|
|
|
+ let ary = JSON.parse(JSON.stringify(this.list));
|
|
|
+ ary.forEach((item) => {
|
|
|
+ if (item.sectionType === 1) {
|
|
|
+ item.recordingUrl = item.url;
|
|
|
+ delete item.url;
|
|
|
+ }
|
|
|
+ if (item.sectionType === 2) {
|
|
|
+ item.liveUrl = item.url;
|
|
|
+ item.liveStartTime = this.$methodsTools.time10to13(
|
|
|
+ item.liveStartTime,
|
|
|
+ 1
|
|
|
+ );
|
|
|
+ item.liveEndTime = this.$methodsTools.time10to13(
|
|
|
+ item.liveEndTime,
|
|
|
+ 1
|
|
|
+ );
|
|
|
+ delete item.url;
|
|
|
+ }
|
|
|
+ item.businessList = this.businList;
|
|
|
+ item.status = 1;
|
|
|
+ item.publishStatus = 1;
|
|
|
+ item.coverUrl = "oss/images/avatar/20211013/1634097664410_1397766697";
|
|
|
+ item.durationTime = this.$methodsTools.secondFormDate(
|
|
|
+ item.durationTime
|
|
|
+ );
|
|
|
+ });
|
|
|
+ this.$api.drCourseSectionaddMore(ary.reverse()).then((res) => {
|
|
|
+ this.dialogVisible = false;
|
|
|
+ console.log(res.data, "data");
|
|
|
+ this.$emit("backData", res.data);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.elform_style {
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+}
|
|
|
+.p_style {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #a4a4a4;
|
|
|
+ margin: 0;
|
|
|
+}
|
|
|
+.heightMax {
|
|
|
+ max-height: 600px;
|
|
|
+ overflow: auto;
|
|
|
+}
|
|
|
+</style>
|