style:增加富文本组件，增加讨论模块部分样式

package.json

@@ -12,6 +12,7 @@
         "build:test": "vite build --mode test"
     },
     "dependencies": {
+        "@wangeditor/editor-for-vue": "^5.1.12",
         "ant-design-vue": "^3.2.15",
         "axios": "^1.1.3",
         "core-js": "^3.26.0",

src/api/api.js

@@ -74,4 +74,4 @@ export const LINKGETONE = `/link/getOne`
 
 // 讨论模块
 // -- 根据讨论的Id查询讨论发表的帖子
-export const QueryDiscussSubmitDetailByDiscussId = '/discussSubmit/queryDiscussSubmitDetailByDiscussId post'
+export const QueryDiscussSubmitDetailByDiscussId = '/discussSubmit/queryDiscussSubmitDetailByDiscussId post'

src/api/request.js

@@ -149,4 +149,14 @@ export async function boeRequest(_url, params) {
     }).then(res => {
         return JSONBigIntStr.parse(res)
     })
-}
+}
+
+const httpupload = axios.create({
+    baseURL: process.env.VUE_APP_BASE_API,
+    timeout: 1000 * 15,
+    headers: { "Content-Type": "multipart/form-data" },
+});
+
+export const fileUp = (data) => httpupload.post("/file/upload", data, {
+    headers: { "Content-Type": "multipart/form-data" },
+});

src/views/discuss/DiscussPage.vue

@@ -45,7 +45,7 @@
         <div class="title">
           {{ state.info.discussDtoList[0].discussName }}
         </div>
-        <button class="btn">发表帖子</button>
+        <button class="btn" @click="showPostModal">发表帖子</button>
       </div>
 
       <div>
@@ -116,6 +116,35 @@
       </div>
     </div>
     <!-- 详细内容 -->
+
+    <!-- 富文本 -->
+    <el-dialog title="" top="" v-model="dialogVisible" :show-close="false"
+			style="display:flex;justify-content:center;align-items:center;flex-direction: column;"
+			width="80%">
+      <div style="width:100%;margin-bottom: 12px;">
+        <el-input v-model="titleName" placeholder="请输入标题" />
+      </div>
+			<div style="border: 1px solid #ccc">
+        <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
+          :mode="mode" />
+        <Editor style="height: 450px; overflow-y: hidden" v-model="valueHtml" :defaultConfig="editorConfig"
+          :mode="mode" @onCreated="handleCreated" />
+      </div>
+      <div style="width:100%;height:80px;display:flex;justify-content:center;align-items:center;margin-top:20px;">
+        <button 
+          class="submitbtn btn01" 
+          style="margin-right:40px;"
+          @click="cancelPost">
+          取消
+        </button>
+        <button 
+          class="submitbtn btn01" 
+          @click="submitPost">
+          发布
+        </button>
+      </div>
+		</el-dialog>
+    <!-- 富文本 -->
   </div>
 </template>
 
@@ -125,10 +154,15 @@ import {
   COMMENT_COLLECTION, 
   COMMENT_PRAISE, 
   DISCUSS_LIST,
-  QueryDiscussSubmitDetailByDiscussId
+  QueryDiscussSubmitDetailByDiscussId,
+  FILE_UPLOAD
 } from "@/api/api";
-import { reactive, ref, toRefs } from "vue";
+
+import "@wangeditor/editor/dist/css/style.css";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { reactive, ref, toRefs, shallowRef } from "vue";
 import { useRoute, useRouter } from "vue-router";
+import { fileUp } from "../../api/request";
 
 const router = useRouter();
 const returnclick = () => {
@@ -143,6 +177,10 @@ const param = ref({
   id,
 });
 
+const dialogVisible = ref(false);
+
+const titleName = ref("");
+
 const state = reactive({
   activeName: "first",
   info:{},
@@ -156,6 +194,36 @@ const state = reactive({
 });
 
 
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("");
+
+const toolbarConfig = {
+  excludeKeys: ["insertVideo", "insertImage"],
+};
+
+const editorConfig = { placeholder: "请输入内容...", MENU_CONF: {} };
+
+editorConfig.MENU_CONF["uploadImage"] = {
+  // 自定义上传
+  async customUpload(file, insertFn) {
+    const formData = new FormData();
+    formData.append("file", file);
+    fileUp(formData).then((res) => {
+      if (res.data.code === 200) {
+        // 最后插入图片  url alt href
+        insertFn(res.data.data, file.name, res.data.data);
+      }
+    });
+  },
+};
+
+const handleCreated = (editor) => {
+  editorRef.value = editor; // 记录 editor 实例，重要！
+};
+
 useRequest(DISCUSS_LIST, param.value, (e)=>{
   console.log('我是获取的讨论详情数据', e)
   state.info = e.data;
@@ -340,7 +408,7 @@ function handleCurrentChange(e, k) {
 
 
 function comment({ discussId: id }) {
-  router.push({ path: "discussdetail", query: { id, type } });
+  router.push({ path: "discussdetail", query: { id, type, pName, sName} });
 }
 
 function like(d) {
@@ -354,6 +422,23 @@ function collection(d) {
   d.collected = !d.collected;
   request(COMMENT_COLLECTION, { targetId: d.discussId, type: 4 });
 }
+
+
+// 发表帖子 
+
+function showPostModal() {
+  dialogVisible.value = true;
+}
+
+function submitPost() {
+  dialogVisible.value = false;
+}
+
+
+// 取消发布
+function cancelPost() {
+  dialogVisible.value = false;
+}
 </script>
 
 <style scoped lang="scss">

src/views/discussdetail/DiscussDetail.vue

@@ -37,14 +37,14 @@
     </div> 
     <!-- 面包屑导航 -->
     <!-- 标题 -->
-    <div class="title">【调研】管理者进阶腾飞班 - 班内成员讨论</div>
+    <div class="title">【讨论】管理者进阶腾飞班 - 班内成员讨论</div>
     <!-- 标题 -->
     <!-- 详细内容 -->
     <div class="bascinfo clearfix">
       <!-- 中间部分 -->
       <div class="middletitle">
         <div class="title">
-          {{ disDetail.projectName }}
+          {{ disDetail.projectName }} 
         </div>
         <!--        <button class="btn">回复</button>-->
       </div>
@@ -72,7 +72,7 @@
                 color: disDetail.praised ? 'red' : '#b3bdc4',
                 marginLeft: '19px',
               }"
-            ></span>
+            ></span> 
             <div class="count">{{ disDetail.praiseNum || 0 }}</div>
           </div>
           <div
@@ -94,7 +94,7 @@
             <div class="count">{{ disDetail.collectionNum || 0 }}</div>
           </div>
         </div>
-        <div class="contentmid">
+        <div class="contentmid"> 
           {{ disDetail.discussExplain }}
         </div>
       </div>
@@ -315,7 +315,26 @@ const { data: commontList, fetchData: commonFetch } = usePage(COMMENT_LIST, {
   type: 1,
 });
 
-const { data: disDetail } = useRequest(DISCUSS_DETAIL, { id, type });
+// const { data: disDetail } = useRequest(DISCUSS_DETAIL, { id, type });
+
+const disDetail = ref({});
+
+useRequest(DISCUSS_DETAIL, { id, type }, (e)=>{
+  console.log(e)
+  disDetail.value = e.data
+
+  // 模拟数据
+  disDetail.value = {
+    projectName:'讨论考勤模块', 
+    stageName:'讨论考勤模块',  
+    discussName:'我是一个用来测试的帖子标题', 
+    praised:true,  
+    praiseNum:888,  
+    collected:true,  
+    collectionNum:3465,  
+    discussExplain:'帖子的内容----帖子的内容帖子的内容帖子的内容帖子的内容帖子的内容帖子的内容帖子的内容帖子的内容帖子的内容 试内容展示我是帖子的测试内容展示我是帖子的测试内容展示我是帖子的测试内容展示我是帖子的测试内容展示', 
+  }
+})
 
 const fileList = ref([]);
 const commentSubmitFileList = ref([]);