提交一下

1

src/views/teamDetail/components/courseTransModals/transClass.vue

@@ -0,0 +1,228 @@
+<template>
+  <div>
+    <el-dialog
+      title="创建班级"
+      append-to-body
+      width="800px"
+      :visible.sync="transClassVisible"
+    >
+      <div v-if="transClassVisible">
+        <el-alert type="warning" :closable="false" class="tramsAlert">
+          <p class="title">温馨提醒：</p>
+          <p class="descript">您正在操作声部课、集训声部课转换线上基础技能课</p>
+          <p class="descript">
+            若转换后仅创建1个线上基础技能班，转换后班级将根据转换前课程总时长排课
+          </p>
+          <p class="descript">
+            若转转后创建多个线上基础技能班，则转换后班级按转换前课时数排课
+          </p>
+        </el-alert>
+        <el-form :model="form" ref="form">
+          <div class="classWrap">
+            <h2 class="classTitle">
+              <span>线上基础技能班</span>
+              <i
+                @click="remove(scope.$index)"
+                v-if="form.classList.length > 1"
+                class="close-icon el-icon-delete-solid"
+              ></i>
+            </h2>
+            <el-row :gutter="40">
+              <el-col :span="12">
+                <el-form-item
+                  prop="classNames"
+                  :rules="[
+                    {
+                      required: true,
+                      message: '输入班级名称',
+                      trigger: 'blur',
+                    },
+                  ]"
+                  ref="paymentDate"
+                >
+                  <template slot="label">
+                    <p style="position: relative">
+                      <span style="color: #f56c6c; margin-right: 4px">*</span>
+                      班级名称
+                    </p>
+                  </template>
+                  <el-input
+                    v-model="form.classNames"
+                    style="width: 100%"
+                    placeholder="请输入班级名称"
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item
+                  :label="'声部'"
+                  style="margin-right: 0"
+                  prop="sound"
+                  :rules="[
+                    { required: true, message: '请选择声部', trigger: 'blur' },
+                  ]"
+                >
+                  <template slot="label">
+                    <p style="position: relative">
+                      <span style="color: #f56c6c; margin-right: 4px">*</span>
+                      声部
+                    </p>
+                  </template>
+                  <select-all
+                    v-model="form.sound"
+                    style="width: 100%"
+                    clearable
+                    multiple
+                    collapse-tags
+                    filterable
+                    placeholder="请选择声部"
+                  >
+                    <el-option
+                      v-for="(item, index) in soundList"
+                      :key="index"
+                      :label="item.name"
+                      :value="item.id"
+                    ></el-option>
+                  </select-all>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item
+                  label="主教老师"
+                  prop="coreTeacher"
+                  :rules="[{ required: true, message: '请选择主教老师' }]"
+                >
+                  <template slot="label">
+                    <p style="position: relative">
+                      <span style="color: #f56c6c; margin-right: 4px">*</span>
+                      主教老师
+                    </p>
+                  </template>
+                  <el-select
+                    v-model.trim="form.coreTeacher"
+                    placeholder="请选择主教老师"
+                    clearable
+                    filterable
+                  >
+                    <el-option
+                      v-for="(item, index) in teacherList"
+                      :key="index"
+                      :label="item.realName"
+                      :value="String(item.id)"
+                    >
+                      <span style="float: left">{{ item.realName }}</span>
+                      <span
+                        style="float: right; color: #8492a6; font-size: 13px"
+                        >{{ String(item.id) }}</span
+                      >
+                    </el-option>
+                  </el-select>
+                  <!-- <remote-search :commit="'setTeachers'" v-model="form.coreTeacher"  /> -->
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </div>
+        </el-form>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { getCourseScheduleConvert } from "../../api";
+import { findSound, getTeacher } from "@/api/buildTeam";
+export default {
+  data() {
+    return {
+      transClassVisible: false,
+      form: {
+        classList: [{}, {}],
+      },
+      soundList: [],
+      teacherList: [],
+      teamid: "",
+      organId: "",
+    };
+  },
+  mounted() {},
+  methods: {
+    async openDialog() {
+      // 获取列表
+      this.transClassVisible = true;
+    },
+    getList() {},
+    gotoNext() {},
+    remove(index) {},
+    init() {
+      this.teamid = this.$route.query.id;
+      this.organId = this.$route.query.organId;
+      getTeacher({ organId: this.organId }).then((res) => {
+        if (res.code == 200) {
+          this.teacherList = res.data;
+          if (this.teacherList.length <= 0) {
+            this.$bus.$emit("showguide", ["teacher"]);
+            return;
+          }
+        }
+      });
+      findSound({ musicGroupId: this.teamid }).then((res) => {
+        if (res.code == 200) {
+          this.soundList = res.data;
+        }
+      });
+    },
+  },
+  computed: {
+    chioseCourse() {
+      return this.activeCourseList;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.subtitle {
+  margin-bottom: 20px;
+  span {
+    color: red;
+  }
+}
+.tramsAlert {
+  margin-bottom: 20px;
+  p {
+    font-size: 12px;
+    line-height: 20px;
+  }
+}
+.classWrap {
+  background-color: #f2f2f2;
+  padding: 10px;
+  .classTitle {
+    // width: 760px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 20px;
+    .close-icon {
+      color: #c1c1c1;
+      cursor: pointer;
+      // background: #c1c1c1;
+    }
+  }
+}
+::v-deep .el-form-item__label{
+  display: block;
+  width: 100%;
+  text-align: left;
+  &::before{
+    content: "" !important;
+  position: absolute;
+  color: transparent;
+  margin-right: 4px;
+  }
+}
+::v-deep .el-form-item__content {
+  margin-left: 0;
+}
+</style>>

src/views/teamDetail/components/courseTransModals/transStart.vue

@@ -20,12 +20,12 @@
           label="学员声部"
         ></el-table-column>
       </el-table>
+      <transClass ref='transClass'/>
+      </div>
       <div slot="footer" class="dialog-footer">
         <el-button @click="transVisible = false">取 消</el-button>
         <el-button type="primary" @click="gotoNext">下一步</el-button>
       </div>
-      </div>
-
       <!-- <pagination
         sync
         :total.sync="rules.total"
@@ -39,6 +39,7 @@
 </template>
 <script>
 import { getCourseScheduleConvert } from "../../api";
+import transClass from './transClass'
 export default {
   props: {
     activeCourseList: {
@@ -46,6 +47,9 @@ export default {
       default: [],
     },
   },
+  components:{
+    transClass
+  },
   data() {
     return {
       tableList: [],
@@ -78,7 +82,9 @@ export default {
       }
     },
     getList() {},
-    gotoNext(){},
+    gotoNext(){
+      this.$refs.transClass.openDialog()
+    },
   },
   computed: {
     chioseCourse() {