新建直播课

1

src/views/liveClassManager/newLiveClass.vue

@@ -1,22 +1,117 @@
 <template>
   <div class="m-container">
-      <h2>
+    <h2>
       <el-page-header @back="onCancel" :content="name"></el-page-header>
     </h2>
+    <div class="m-core">
+      <el-form
+        :model="form"
+        ref="topinfo"
+        label-width="120px"
+        :inline="true"
+        label-position="left"
+      >
+        <el-alert
+          title="直播课信息"
+          type="info"
+          :closable="false"
+          style="margin-bottom: 20px"
+        ></el-alert>
+        <el-row class="row">
+          <el-form-item
+            label="直播课标题"
+            prop="name"
+            :rules="[{ required: true, message: '请输入直播课标题' }]"
+          >
+            <el-input
+              placeholder="请输入直播课标题"
+              v-model.trim="form.name"
+            ></el-input>
+          </el-form-item>
+          <el-form-item
+            label="主讲人"
+            prop="teacherName"
+            :rules="[{ required: true, message: '请输入主讲人' }]"
+          >
+            <el-input
+              placeholder="请输入主讲人"
+              v-model.trim="form.teacherName"
+            ></el-input>
+          </el-form-item>
+          <el-form-item
+            label="直播开始时间"
+            prop="name"
+            :rules="[{ required: true, message: '请选择直播开始时间' }]"
+          >
+            <el-date-picker
+              v-model="form.timer"
+              type="datetime"
+              format="yyyy-MM-dd HH:mm:ss"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              placeholder="请选择直播开始时间"
+            >
+            </el-date-picker>
+          </el-form-item>
+        </el-row>
+        <el-row>
+          <el-form-item
+            label="直播课内容"
+            prop="name"
+            :rules="[{ required: true, message: '请输入直播课内容' }]"
+          >
+            <el-input
+              placeholder="请输入直播课内容"
+              v-model.trim="form.name"
+            ></el-input>
+          </el-form-item>
+        </el-row>
+      </el-form>
+    </div>
   </div>
 </template>
 <script>
 export default {
-  data(){
+  data() {
     return {
-      name:'新建直播课'
-    }
-  },mounted(){},
-  methods:{
-    onCancel(){}
-  }
-}
+      name: "新建直播课",
+      form: {
+        name: "",
+        teacherName: "",
+        timer: "",
+      },
+    };
+  },
+  mounted() {},
+  methods: {
+    onCancel() {
+      this.$store.dispatch("delVisitedViews", this.$route);
+      this.$router.push("/liveClassManager");
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
-
+/deep/.el-form--inline {
+  .el-form-item__content {
+    display: block;
+  }
+}
+/deep/.el-select {
+  width: 300px !important;
+}
+/deep/.el-date-editor {
+  width: 300px !important;
+}
+/deep/.el-checkbox {
+  margin-left: 15px !important;
+}
+/deep/.el-input {
+  position: relative;
+  font-size: 14px;
+  display: inline-block;
+  width: 300px;
+}
+.row {
+  padding-left: 24px;
+}
 </style>