feat:add new notice features almost done

src/views/CoursePage/CourseDetail.vue

@@ -33,27 +33,27 @@
         </el-radio-group>
         <!--        <el-button v-teacher-permission="{role:'teacher'}" plain type="warning">添加发布</el-button>-->
         <el-popover v-model:visible="showPopover" :width="160" placement="bottom">
-          <div class="selNoticeType">
-            <div class="noticeTypeIcon" style="color: #E38800">
+          <div class="sel-notice-type">
+            <div :style="{color:themeColor.orange}" class="notice-type-icon">
               公告
             </div>
-            <div class="noticeTypeTxt" @click="selAndInitNotice('announce')">
+            <div class="notice-type-txt" @click="selAndInitNotice('announce')">
               发布公告
             </div>
           </div>
-          <div class="selNoticeType">
-            <div class="noticeTypeIcon" style="color:#1989FA;">
+          <div class="sel-notice-type">
+            <div :style="{color:themeColor.blue}" class="notice-type-icon">
               作业
             </div>
-            <div class="noticeTypeTxt" @click="selAndInitNotice('homework')">
+            <div class="notice-type-txt" @click="selAndInitNotice('homework')">
               发布作业
             </div>
           </div>
-          <div class="selNoticeType">
-            <div class="noticeTypeIcon" style="color: #F56C6C">
+          <div class="sel-notice-type">
+            <div :style="{color:themeColor.red}" class="notice-type-icon">
               考试
             </div>
-            <div class="noticeTypeTxt" @click="selAndInitNotice('test')">
+            <div class="notice-type-txt" @click="selAndInitNotice('test')">
               发布考试
             </div>
           </div>
@@ -73,33 +73,104 @@
         </div>
       </div>
     </div>
+    <div>
+      <el-dialog
+          v-model="showNewNoticeDialog"
+          :title="newNoticeType.title"
+          width="40%"
+      >
+        <div class="new-notice-content">
+          <div class="new-notice-item">
+            <span>创建者:&emsp;</span>
+            <div class="flex-vc">
+              <span>kenny 67</span>
+              <div :style="{backgroundColor:newNoticeType.color}" class="mini-name-icon">刘</div>
+            </div>
+          </div>
+          <div class="new-notice-item">
+            <span>所属课程:</span>
+            <div>软件工程与计算 I 2021</div>
+          </div>
+          <div class="new-notice-item">
+            <span>发布时间:</span>
+            <div>2021年12月15日 18时30分</div>
+          </div>
+          <div class="content-description-area">
+            <span>内容描述:</span>
+            <el-input
+                v-model="newNoticeInfo.noticeDescription"
+                :rows="4"
+                placeholder="内容描述"
+                type="textarea"
+            />
+          </div>
+          <div class="new-notice-item">
+            <span>优先级:&emsp;</span>
+            <div>
+              <el-radio v-model="newNoticeInfo.priority" border label="1" size="large">重要</el-radio>
+              <el-radio v-model="newNoticeInfo.priority" border label="2" size="large">一般</el-radio>
+            </div>
+          </div>
+          <div class="new-notice-item">
+            <span>附件:&emsp;&emsp;</span>
+            <div></div>
+          </div>
+        </div>
+        <div class="new-notice-btn">
+          <el-button style="margin-right: 32px" type="primary">确认</el-button>
+          <el-button type="danger">取消</el-button>
+
+        </div>
+
+      </el-dialog>
+    </div>
+
+
   </div>
 </template>
 
 <script setup>
 import GlobalHeader from "../../../src/components/GlobalHeader";
 import NoticeItem from "./components/NoticeItem";
-import {ref} from "vue";
-
-const newNoticeType = ref("");
-const showNewNoticeModel = ref(false);
+import {reactive, ref} from "vue";
 
+const newNoticeType = reactive({type: "", title: "", color: ""});
+const showNewNoticeDialog = ref(false);
+const themeColor = {
+  orange: "#E38800",
+  blue: "#1989FA",
+  red: "#F56C6C"
+};
 const noticeTypeMap = {
-  announce: "公告",
-  homework: "作业",
-  test: "考试"
+  //Use policy objects to remove if-else judgments
+  announce: {type: "公告", title: "发布公告", color: themeColor.orange},
+  homework: {type: "作业", title: "发布作业", color: themeColor.blue},
+  test: {type: "考试", title: "发布考试", color: themeColor.red}
 };
 
 const tabName = ref("notice");
 const showPopover = ref(false);
 
 const selAndInitNotice = (noticeType) => {
-  newNoticeType.value = noticeTypeMap[noticeType];
-  showNewNoticeModel.value = true;
-
+  //Copy properties from source object to target object
+  Object.assign(newNoticeType, noticeTypeMap[noticeType]);
+  showNewNoticeDialog.value = true;
 };
 
 
+const newNoticeInfo = reactive({noticeDescription: "", priority: "1", fileList: []});
+
+//newNoticeInfo to post
+const postNoticeInfo = {
+  userId: 1,
+  courseId: 1,
+  noticeType: newNoticeType.type,
+  releaseTime: "",
+  noticeDescription: "",
+  priority: 1,
+  fileList: []//undecided
+};
+
 const noticeInfoList = [
   {
     mode: "考试",
@@ -136,4 +207,7 @@ const courseInfo = {
 <style scoped>
 @import "style/CourseDetail.css";
 
+.el-radio.is-bordered {
+  margin: 0;
+}
 </style>

src/views/CoursePage/style/CourseDetail.css

@@ -104,7 +104,7 @@
 }
 
 
-.selNoticeType {
+.sel-notice-type {
     display: flex;
     align-items: center;
     height: 45px;
@@ -112,7 +112,7 @@
 }
 
 
-.noticeTypeIcon {
+.notice-type-icon {
     border-radius: 24px;
     border: 2px solid;
     box-sizing: border-box;
@@ -121,7 +121,70 @@
 }
 
 
-.noticeTypeTxt {
+.notice-type-txt {
     font-size: 16px;
     cursor: pointer;
 }
+
+.el-dialog__title {
+    font-size: 24px;
+}
+
+.new-notice-content {
+    width: 100%;
+    padding: 0 24px;
+    box-sizing: border-box;
+    overflow: hidden;
+}
+
+.new-notice-content .new-notice-item {
+    height: 40px;
+    margin-bottom: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    font-size: 18px;
+}
+
+.content-description-area {
+    height: 100px;
+    box-sizing: border-box;
+    padding-top: 6px;
+    margin-bottom: 16px;
+    display: flex;
+    justify-content: flex-start;
+    font-size: 18px;
+
+}
+
+.new-notice-item:last-child {
+    margin-bottom: 0;
+}
+
+
+.new-notice-item > span, .content-description-area > span {
+    min-width: 100px;
+}
+
+.flex-vc {
+    display: flex;
+    align-items: center;
+}
+
+.new-notice-item .mini-name-icon {
+    margin-left: 16px;
+    border-radius: 50%;
+    width: 30px;
+    height: 30px;
+    line-height: 30px;
+    text-align: center;
+    color: white;
+
+}
+
+
+.new-notice-btn {
+    display: flex;
+    justify-content: center;
+    margin-top: 32px;
+}

src/views/ManagePage/ManagePage.vue

@@ -113,6 +113,8 @@
 import GlobalHeader from "@/components/GlobalHeader";
 import CourseItem from "@/components/CourseItem";
 import {reactive, ref} from "vue";
+// noinspection ES6UnusedImports
+import {Plus} from "@element-plus/icons";
 
 
 const dialogVisible = ref(false);