feat: 文章编辑

1. 编辑文章 接口,页面 完成

components/public/imageViewer.vue

@@ -18,7 +18,7 @@ export default {
 
 <template>
 <div class="img">
-  <img :src="src"/>
+  <img :src="src" />
   <div v-show="isFull" class="img-con">
     <div class="img-btn">+</div>
     <div class="img-btn">-</div>

map/apiMap.js

@@ -57,6 +57,9 @@ export const apiMap = {
   newsAdd: {
     path: `/api/news/add`
   },
+  newsEdit: {
+    path: `/api/news/edit`
+  },
   downloads: {
     path: `/api/download/list`
   },

pages/manger/news/add.vue

@@ -20,6 +20,7 @@ import {fieldCheck} from "../../../until/form/fieldVerify";
 
 import {FormVerify} from "kind-form-verify";
 import {escapeHtml, unescapeHtml} from "@/until/unescapeHtml";
+import {isEmpty} from "../../../until/typeTool";
 let ClassicEditor;
 // let MyCustomPlugin;
 if (process.client) {
@@ -41,7 +42,13 @@ export default {
     PopCard,
     RoundedTitle
     // Use the <ckeditor> component in this view.
-
+  },
+  props: ['article'],
+  watch: {
+    article(val){
+      // 更新文章数据
+      this.editModel()
+    }
   },
   computed: {
     // 产品类型数据
@@ -64,7 +71,6 @@ export default {
           }
         );
       }
-
       return arr;
     },
   },
@@ -79,12 +85,25 @@ export default {
     formVerify.onLog = (msg) => {
       console.log(msg);
     };
+
+
+    // 判断是否为编辑文章
+    if(isEmpty(this.article)){
+      this.isEdit = true;
+
+      console.log(this.article);
+      console.log(this.form);
+    }
+    this.initForm();
+
   },
   beforeDestroy() {
     formVerify = null;
   },
   data(){
     return {
+      isEdit: false,
+      editId: null,
       editor: ClassicEditor,
       editorData: '<p>在此输入文章内容</p>',
       editorConfig: {
@@ -108,11 +127,11 @@ export default {
           ]
         },
         type: {
-          val: '',
+          val: 'all',
           init: '',
           msg: '',
           state: 0,
-          options: [],
+          options: this.$store.getters.allNewsTypes,
           disables: ['all'],
         },
         title: {
@@ -156,14 +175,42 @@ export default {
       console.log('自定义插入图片按钮');
       this.openImageSelect();
     };
-    this.initForm();
+
 
   },
   methods:{
     initForm(){
       this.form.pType.val = dbField_esm.db_base.newsType.all;
       this.form.type.options = this.newsTypes;
+      // 判断是否为编辑文章
       initForm(this.form);
+      this.form.cover.showText = this.form.cover.init;
+      // 强制更新页面
+      this.$forceUpdate()
+    },
+    editModel(){
+      this.isEdit = true;
+
+
+      this.editId = this.article.id;
+      // 查找对应的 类型
+      this.form.title.init = this.article.title;
+      this.form.author.init = this.article.author;
+      this.form.source.init = this.article.source;
+      this.form.cover.init = this.article.image;
+      console.log(this.article.image)
+      this.form.remark.init = this.article.remark;
+      this.editorData = this.article.htmlContent;
+      this.initForm();
+      let type = this.form.type.options.find((item) =>  item.type_id === this.article.type_id)
+      if(type){
+        console.log(`find the article type`)
+        this.form.type.init = type.key;
+        this.form.type.val = type.key;
+        this.form.pType.init = type.parent_type;
+        this.form.pType.val = type.parent_type;
+      }
+
     },
     openCoverSelect(){
       console.log('打开文章封面选择窗口');
@@ -211,8 +258,6 @@ export default {
         return console.log('数据验证不通过');
       }
 
-
-
       let formData = formVerify.getFormData();
       console.log('------');
       console.log(formData);
@@ -223,19 +268,24 @@ export default {
       console.log(formData);
       console.log(unescapeHtml(formData.content));
       // 发送请求至后台
+      let queryPath = this.isEdit? apiMap.newsEdit : apiMap.newsAdd;
+      let actionText = this.isEdit? '修改文章': '新增文章';
+      if(this.isEdit){
+        formData.id = this.editId;
+      }
       let [err,res] = await handle(this.$axios.post(
-        apiMap.newsAdd.path,
+        queryPath.path,
         formData
       ));
       if(err){
         console.log(err);
-        return this.$message.error('新增文章失败');
+        return this.$message.error(`${actionText}失败`);
       }
       let  result = res.data;
       if (result.code === rCode.OK){
-        this.$message.success('新增文章成功');
+        this.$message.success(`${actionText}成功`);
       }else{
-        this.$message.error(`新增文章失败,${result.msg}`);
+        this.$message.error(`${actionText}失败,${result.msg}`);
       }
 
     }
@@ -246,7 +296,7 @@ export default {
 <template>
 <div class="w-full p-2">
   <rounded-title class="text-xl">
-    <span>新增文章</span>
+    <span>{{ isEdit? "修改文章": "新增文章" }}</span>
     <a href="/manger/news"
        class="px-10 h-full ml-5 rounded bg-blue-400 text-white cursor-pointer
         hover:text-orange-500 ">文章中心</a>
@@ -291,7 +341,7 @@ export default {
     <input-row class="my-2" :msg="form.cover.msg"
                label="文章封面">
       <div class="rounded relative" style="width: 524px;height: 360px" >
-        <image-viewer class="" :src="form.cover.showText"></image-viewer>
+        <image-viewer class="" :src="form.cover.showText?form.cover.showText.charAt(0) == '/'? form.cover.showText : '/public/'+form.cover.showText : '' " :alt="form.cover.showText" ></image-viewer>
         <div class="absolute w-full h-full left-0 top-0
               justify-center text-white bg-gray-400
               items-center text-2xl flex opacity-0 hover:opacity-70"
@@ -305,7 +355,9 @@ export default {
     <ckeditor class="mt-2" ref="ckeditor" :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
 
     <div class="mt-2">
-      <a-button type="primary" @click="onSubmitHandle">新增文章</a-button>
+      <a-button type="primary" @click="onSubmitHandle">
+        {{isEdit?"保存修改":"新增文章"}}
+      </a-button>
     </div>
   </div>
 

pages/manger/news/edit.vue

@@ -0,0 +1,69 @@
+<script>
+
+import ArticleAdd from "~/pages/manger/news/add";
+import {getQueryString} from "../../../until/domTool";
+import {unescapeHtml} from "../../../until/unescapeHtml";
+import {timestampToTime} from "../../../until/time";
+import {rCode} from "../../../map/rcodeMap_esm";
+import {handle} from "~/until/handle";
+import {apiMap, baseUrl} from "~/map/apiMap";
+
+export default {
+  name: "articleEdit",
+  components: {ArticleAdd},
+  data() {
+    return {
+      articleInfo: {}
+    }
+  },
+  beforeMount() {
+    // 获取路径中的id值
+    this.newsId = getQueryString('id');
+    if( !this.newsId ){
+      this.$message.error('未获取到文章id');
+      window.location.href = "/manger/news";
+      return ;
+    }
+    console.log(this.newsId);
+    this.getArticleInfo();
+  },
+  methods: {
+    async getArticleInfo() {
+      let newsId = this.newsId;
+      if( !newsId ){
+        this.$message.error('未获取到文章id');
+        return;
+      }
+      this.loading = true;
+      let [err,res] = await handle(this.$axios.get(`${apiMap.newsInfo.path}/${newsId}`));
+      this.loading = false;
+      if(err){
+        this.$message.error('获取文章信息失败');
+        return console.log(err);
+      }
+      let  result = res.data;
+      if (result.code === rCode.OK){
+        this.$message.success('');
+        let pageData = result.data;
+        pageData.htmlContent = unescapeHtml(pageData.content);
+        pageData.createTime = timestampToTime(pageData.date_time);
+        //
+        this.articleInfo = pageData;
+        console.log(this.newsInfo);
+        this.$message.success('获取文章信息成功');
+      }else{
+        this.$message.error(`获取文章信息失败,${result.msg}`);
+      }
+    }
+  }
+}
+
+</script>
+
+<template>
+<article-add :article="articleInfo"/>
+</template>
+
+<style scoped>
+
+</style>

pages/manger/news/index.vue

@@ -273,8 +273,11 @@ export default {
 <template>
   <div class="w-full p-2">
     <rounded-title class="text-xl">
-      <span>产品管理,产品中心</span>
-      <a href="/manger/product/type" class="px-10 h-full ml-5 rounded bg-blue-400 text-white cursor-pointer hover:text-orange-500 ">产品分类管理</a>
+      <span>文章管理</span>
+      <a href="/manger/news/type"
+         class="px-10 h-full ml-5 rounded bg-blue-400 text-white
+         cursor-pointer hover:text-orange-500 ">
+        文章分类管理</a>
     </rounded-title>
 
     <div class="w-full rounded border mt-2 bg-white p-2">

server/control/c_news.js

@@ -70,8 +70,41 @@ async function addArticle(article){
   return [null, res];
 }
 
+// 修改文章
+async function editArticle(article){
+  let res;
+  // 获取文章类型
+  let [err, typeRes] = await handle(d_news.getTypeByKey(article.type));
+  if(err){
+    log.error(err);
+    log.error(`[编辑文章] 获取文章类型失败 ${err.message}`);
+    return [{
+      code: codeMap.ServerError,
+      message: `文章类型校验失败`
+    }, null];
+  }
+  if(typeRes.length === 0){
+    log.error(`[新增文章] 文章类型不存在`);
+    return [{
+      code: codeMap.NotFound,
+      message: `文章类型不存在`
+    }, null];
+  }
+  let typeItem = typeRes[0];
+  [err, res] = await handle(d_news.editArticle(article, typeItem.type_id));
+  if(err){
+    log.error(`[编辑文章] 编辑文章失败 ${err.message}`);
+    return [{
+      code: codeMap.ServerError,
+      message: `服务器错误,新增文章失败`
+    }, null];
+  }
+  return [null, res];
+}
+
 module.exports = {
   addReadNum,
   searchNewsByMini,
-  addArticle
+  addArticle,
+  editArticle
 }

server/database/d_news.js

@@ -67,11 +67,28 @@ function addArticle(article, typeId){
   return mysql.pq(sql,values);
 }
 
+function editArticle(article, typeId){
+  let sql = `UPDATE hfy_news SET
+    title=?, remark=?, author=?, content=?,
+    image=?, type_id=?
+    WHERE id = ?`;
+  let values = [];
+  values.push(article.title);
+  values.push(article.remark);
+  values.push(article.author);
+  values.push(article.content);
+  values.push(article.cover);
+  values.push(typeId);
+  values.push(article.id);
+  return mysql.pq(sql,values);
+}
+
 module.exports = {
   addReadNum,
   loadTypes,
   searchAllNewsMini,
   getNewsById,
   getTypeByKey,
-  addArticle
+  addArticle,
+  editArticle
 }

server/router/r_news.js

@@ -117,4 +117,20 @@ router.post('/add',async(req,res)=>{
   }
 });
 
+router.post('/edit',async(req,res)=>{
+  try{
+    let err, result;
+    let body = req.body;
+    if(isEmpty(body) || !body.title || !body.content || !body.type || !body.cover){
+      paramFail(res, "请按照要求填写数据");
+      return;
+    }
+    [err, result] = await c.editArticle(body);
+    if(err){ return controlError(res, err, null);}
+    success(res, result);
+  }catch (e) {
+    ServerError(res, null, e.message);
+  }
+});
+
 module.exports = router;