feat:对通导入文章接口

Yi.Bbs.Vue3/src/apis/articleApi.js

@@ -38,3 +38,16 @@ export function all(discussId) {
     method: "get",
   });
 }
+
+/**
+ *  导入文章
+ */
+export function importArticle(params, data) {
+  return request({
+    url: `/article/import`,
+    headers: { "Content-Type": "multipart/form-data" },
+    params: params,
+    data,
+    method: "post",
+  });
+}

Yi.Bbs.Vue3/src/components/TreeArticleInfo.vue

@@ -11,7 +11,15 @@
   >
     <template #default="{ node, data }">
       <span class="custom-tree-node">
-        <span>{{ data.name }}</span>
+        <el-tooltip
+          class="box-item"
+          effect="dark"
+          :content="data.name"
+          placement="top-start"
+        >
+          <span class="title-name">{{ data.name }}</span>
+        </el-tooltip>
+
         <span>
           <a
             style="color: #409eff; margin-left: 8px"
@@ -76,5 +84,11 @@ const { isHasPermission: isRemoveArticle } = getPermission("bbs:article:del");
   justify-content: space-between;
   font-size: 14px;
   padding-right: 8px;
+  .title-name {
+    width: 100px; /* 定义容器宽度 */
+    white-space: nowrap; /* 不换行 */
+    overflow: hidden; /* 溢出部分隐藏 */
+    text-overflow: ellipsis; /* 显示省略号 */
+  }
 }
 </style>

Yi.Bbs.Vue3/src/views/EditArticle.vue

@@ -17,7 +17,7 @@
           </el-radio-group>
         </el-form-item>
 
-        <el-form-item label="权限：" v-if="route.query.artType == 'discuss'">
+        <el-form-item label="权限：" v-if="radio == 'discuss'">
           <el-radio-group v-model="perRadio">
             <el-radio-button label="Public">公开</el-radio-button>
             <el-radio-button label="Oneself">仅自己可见</el-radio-button>
@@ -26,13 +26,13 @@
         </el-form-item>
         <el-form-item
           label="可见用户："
-          v-if="route.query.artType == 'discuss' && perRadio == 'User'"
+          v-if="radio == 'discuss' && perRadio == 'User'"
         >
           <UserSelectInfo v-model="editForm.permissionUserIds" />
         </el-form-item>
 
         <el-form-item
-          v-if="route.query.artType == 'article'"
+          v-if="radio == 'article'"
           label="子文章名称："
           prop="name"
         >
@@ -51,7 +51,7 @@
             :codeStyle="codeStyle"
           />
         </el-form-item>
-        <el-form-item label="封面：" v-if="route.query.artType == 'discuss'">
+        <el-form-item label="封面：" v-if="radio == 'discuss'">
           <!-- 主题封面选择 -->
 
           <el-upload
@@ -81,6 +81,33 @@
           ></el-form-item
         >
       </el-form>
+      <div class="import-content">
+        <el-select
+          v-model="currentType"
+          placeholder="请选择"
+          style="width: 120px"
+        >
+          <el-option
+            v-for="item in typeOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+        <el-button
+          type="primary"
+          :icon="Download"
+          :loading="importLoading"
+          @click="handleImport"
+          class="import-btn"
+          v-show="radio == 'article'"
+          >导入文章</el-button
+        >
+      </div>
+    </div>
+    <!-- 文件弹框 -->
+    <div>
+      <input v-show="false" ref="fileRef" type="file" @change="getFile" />
     </div>
   </div>
 </template>
@@ -89,6 +116,7 @@ import MavonEdit from "@/components/MavonEdit.vue";
 import UserSelectInfo from "@/components/UserSelectInfo.vue";
 import { ref, reactive, onMounted } from "vue";
 import { useRoute, useRouter } from "vue-router";
+import { Plus, Download } from "@element-plus/icons-vue";
 
 import {
   add as discussAdd,
@@ -100,6 +128,7 @@ import {
   add as articleAdd,
   update as articleUpdate,
   get as articleGet,
+  importArticle,
 } from "@/apis/articleApi.js";
 
 //数据定义
@@ -158,7 +187,7 @@ const submit = async (formEl) => {
   await formEl.validate(async (valid, fields) => {
     if (valid) {
       //dicuss主题处理
-      if (route.query.artType == "discuss") {
+      if (radio.value == "discuss") {
         discuss.title = editForm.title;
         discuss.types = editForm.types;
         discuss.introduction = editForm.introduction;
@@ -193,7 +222,7 @@ const submit = async (formEl) => {
       }
 
       //artcle文章处理
-      else if (route.query.artType == "article") {
+      else if (radio.value == "article") {
         //组装文章内容：需要添加的文章信息
         article.content = editForm.content;
         article.name = editForm.name;
@@ -237,11 +266,11 @@ onMounted(async () => {
   //如果是更新操作，需要先查询
   if (route.query.operType == "update") {
     //更新主题
-    if (route.query.artType == "discuss") {
+    if (radio.value == "discuss") {
       await loadDiscuss();
 
       //更新文章
-    } else if (route.query.artType == "article") {
+    } else if (radio.value == "article") {
       await loadArticle();
     }
   }
@@ -267,6 +296,49 @@ const loadArticle = async () => {
   editForm.name = res.name;
   editForm.discussId = res.discussId;
 };
+
+// 导入
+let importLoading = ref(false);
+const fileRef = ref(null);
+const handleImport = async () => {
+  fileRef.value.click();
+};
+const currentType = ref("Defalut");
+const typeOptions = [
+  {
+    value: "Defalut",
+    label: "默认",
+  },
+  {
+    value: "Vuepress",
+    label: "Vuepress",
+  },
+];
+const getFile = async (e) => {
+  importLoading.value = true;
+  try {
+    let formDate = new FormData();
+    formDate.append("file", e.target.files[0]);
+    await importArticle(
+      {
+        discussId: route.query.discussId,
+        articleParentId: route.query.parentArticleId,
+        importType: currentType.value,
+      },
+      formDate
+    );
+    ElMessage({
+      message: `导入成功！`,
+      type: "success",
+    });
+    importLoading.value = false;
+  } catch (error) {
+    console.log(error, "error");
+    const { data } = error.response.data;
+    ElMessage.error(data.message);
+    importLoading.value = false;
+  }
+};
 </script>
 <style scoped>
 .submit-btn {
@@ -274,10 +346,19 @@ const loadArticle = async () => {
 }
 
 .body-div {
+  position: relative;
   min-height: 1000px;
   background-color: #fff;
   margin: 1.5rem;
   padding: 1.5rem;
+  .import-content {
+    position: absolute;
+    top: 1.5rem;
+    right: 1.5rem;
+  }
+  .import-btn {
+    margin-left: 10px;
+  }
 }
 
 .avatar-uploader >>> .el-upload {