添加/修改博客文章

2024-09-09 11:18:23 +08:00 · 2024-09-09 11:18:23 +08:00 · 59894b38f5
commit 59894b38f5
parent b7b93447f0
4 changed files with 201 additions and 184 deletions
--- a/src/views/blog/posts/index.vue
+++ b/src/views/blog/posts/index.vue
@ -23,17 +23,8 @@
          icon="Plus"
          @click="handleAdd"
          v-hasPermi="['blog:posts:add']"
-        >新增</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="success"
-          plain
-          icon="Edit"
-          :disabled="single"
-          @click="handleUpdate"
-          v-hasPermi="['blog:posts:edit']"
-        >修改</el-button>
+        >新增
+        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
@ -43,7 +34,8 @@
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['blog:posts:remove']"
-        >删除</el-button>
+        >删除
+        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
@ -52,7 +44,8 @@
          icon="Download"
          @click="handleExport"
          v-hasPermi="['blog:posts:export']"
-        >导出</el-button>
+        >导出
+        </el-button>
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
@ -64,8 +57,12 @@
      <el-table-column label="标题" align="center" prop="title"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
-          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['blog:posts:edit']">修改</el-button>
-          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['blog:posts:remove']">删除</el-button>
+          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['blog:posts:edit']">
+            修改
+          </el-button>
+          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
+                     v-hasPermi="['blog:posts:remove']">删除
+          </el-button>
        </template>
      </el-table-column>
    </el-table>
@ -77,74 +74,25 @@
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
-
-    <!-- 添加或修改博客文章对话框 -->
-    <el-dialog :title="title" v-model="open" width="780px" append-to-body>
-      <el-form ref="postsRef" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="是否可评论，0：能，1：不能" prop="disallowComment">
-          <el-input v-model="form.disallowComment" placeholder="请输入是否可评论，0：能，1：不能" />
-        </el-form-item>
-        <el-form-item label="关键字" prop="keywords">
-          <el-input v-model="form.keywords" type="textarea" placeholder="请输入内容" />
-        </el-form-item>
-        <el-form-item label="密码" prop="password">
-          <el-input v-model="form.password" placeholder="请输入密码" />
-        </el-form-item>
-        <el-form-item label="固定链接地址" prop="slug">
-          <el-input v-model="form.slug" placeholder="请输入固定链接地址" />
-        </el-form-item>
-        <el-form-item label="总览" prop="summary">
-          <el-input v-model="form.summary" type="textarea" placeholder="请输入内容" />
-        </el-form-item>
-        <el-form-item label="标题" prop="title">
-          <el-input v-model="form.title" placeholder="请输入标题" />
-        </el-form-item>
-        <el-form-item label="置顶" prop="topPriority">
-          <el-input v-model="form.topPriority" placeholder="请输入置顶" />
-        </el-form-item>
-        <el-divider content-position="center">博客文章内容信息</el-divider>
-        <el-row :gutter="10" class="mb8">
-          <el-col :span="1.5">
-            <el-button type="primary" icon="Plus" @click="handleAddBlogContents">添加</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button type="danger" icon="Delete" @click="handleDeleteBlogContents">删除</el-button>
-          </el-col>
-        </el-row>
-        <el-table :data="blogContentsList" :row-class-name="rowBlogContentsIndex" @selection-change="handleBlogContentsSelectionChange" ref="blogContents">
-          <el-table-column type="selection" width="50" align="center" />
-          <el-table-column label="序号" align="center" prop="index" width="50"/>
-        </el-table>
-      </el-form>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button type="primary" @click="submitForm">确 定</el-button>
-          <el-button @click="cancel">取 消</el-button>
-        </div>
-      </template>
-    </el-dialog>
  </div>
 </template>

 <script setup name="Posts">
 import {listPosts, getPosts, delPosts, addPosts, updatePosts} from "@/api/blog/posts";
+import {useRouter} from 'vue-router';
+
+const router = useRouter();

 const {proxy} = getCurrentInstance();

 // 表格数据
 const postsList = ref([]);
-// 子表格数据
-const blogContentsList = ref([]);
-// 是否显示弹出层
-const open = ref(false);
 // 遮罩层
 const loading = ref(true);
 // 显示搜索条件
 const showSearch = ref(true);
 // 选中数组
 const ids = ref([]);
-// 子表选中数据
-const checkedBlogContents = ref([]);
 // 非单个禁用
 const single = ref(true);
 // 非多个禁用
@ -192,36 +140,6 @@ function getList() {
  });
 }

-// 取消按钮
-function cancel() {
-  open.value = false;
-  reset();
-}
-
-// 表单重置
-function reset() {
-  form.value = {
-    id: null,
-    disallowComment: null,
-    keywords: null,
-    password: null,
-    slug: null,
-    type: null,
-    status: null,
-    summary: null,
-    title: null,
-    topPriority: null,
-    visits: null,
-    wordCount: null,
-    createBy: null,
-    createTime: null,
-    updateBy: null,
-    updateTime: null
-  };
-  blogContentsList.value = [];
-  proxy.resetForm("postsRef");
-}
-
 /** 搜索按钮操作 */
 function handleQuery() {
  queryParams.value.pageNum = 1;
@ -237,48 +155,23 @@ function resetQuery() {
 // 多选框选中数据
 function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.id);
-  single.value = selection.length != 1;
+  single.value = selection.length !== 1;
  multiple.value = !selection.length;
 }

 /** 新增按钮操作 */
 function handleAdd() {
-  reset();
-  open.value = true;
-  title.value = "添加博客文章";
+  router.push({name: "Post-write"});
 }

 /** 修改按钮操作 */
 function handleUpdate(row) {
-  reset();
  const _id = row.id || ids.value
  getPosts(_id).then(response => {
    form.value = response.data;
-    blogContentsList.value = response.data.blogContentsList;
-    open.value = true;
-    title.value = "修改博客文章";
-  });
-}
-
-/** 提交按钮 */
-function submitForm() {
-  proxy.$refs["postsRef"].validate(valid => {
-    if (valid) {
-      form.value.blogContentsList = blogContentsList.value;
-      if (form.value.id != null) {
-        updatePosts(form.value).then(response => {
-          proxy.$modal.msgSuccess("修改成功");
-          open.value = false;
-          getList();
-        });
-      } else {
-        addPosts(form.value).then(response => {
-          proxy.$modal.msgSuccess("新增成功");
-          open.value = false;
-          getList();
-        });
-      }
-    }
+    const param = JSON.stringify(form.value)
+    proxy.$tab.closePage(router.currentRoute.value)
+    router.push({name: "Post-write", query: {form: param}});
  });
 }

@ -290,38 +183,9 @@ function handleDelete(row) {
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
-  }).catch(() => {});
-}
-
-/** 博客文章内容序号 */
-function rowBlogContentsIndex({ row, rowIndex }) {
-  row.index = rowIndex + 1;
-}
-
-/** 博客文章内容添加按钮操作 */
-function handleAddBlogContents() {
-  let obj = {};
-  obj.originalContent = "";
-  blogContentsList.value.push(obj);
-}
-
-/** 博客文章内容删除按钮操作 */
-function handleDeleteBlogContents() {
-  if (checkedBlogContents.value.length == 0) {
-    proxy.$modal.msgError("请先选择要删除的博客文章内容数据");
-  } else {
-    const blogContentss = blogContentsList.value;
-    const checkedBlogContentss = checkedBlogContents.value;
-    blogContentsList.value = blogContentss.filter(function(item) {
-      return checkedBlogContentss.indexOf(item.index) == -1
+  }).catch(() => {
  });
 }
-}
-
-/** 复选框选中数据 */
-function handleBlogContentsSelectionChange(selection) {
-  checkedBlogContents.value = selection.map(item => item.index)
-}

 /** 导出按钮操作 */
 function handleExport() {
--- a/src/views/blog/posts/setting.vue
+++ b/src/views/blog/posts/setting.vue
@ -0,0 +1,82 @@
+<template>
+  <div class="app-container">
+    <el-form ref="postsRef" :model="localForm" :rules="rules" label-width="100px">
+      <el-form-item label="标题：" prop="title">
+        <el-input v-model="localForm.title" placeholder="请输入标题"/>
+      </el-form-item>
+      <el-form-item label="分类目录：" prop="categories">
+        <el-tree-select
+          v-model="localForm.categories"
+          :data="categories"
+          :props="treeProps"
+          node-key="id"
+          multiple
+          :render-after-expand="false"
+          show-checkbox
+        />
+      </el-form-item>
+      <el-form-item label="禁止评论：" prop="disallowComment">
+        <el-switch v-model="localForm.disallowComment"/>
+      </el-form-item>
+      <el-form-item label="是否置顶：" prop="topPriority">
+        <el-switch v-model="localForm.topPriority"/>
+      </el-form-item>
+      <el-form-item label="关键字：" prop="keywords">
+        <el-input v-model="localForm.keywords" type="textarea" placeholder="请输入内容"/>
+      </el-form-item>
+      <el-form-item label="密码：" prop="password">
+        <el-input v-model="localForm.password" placeholder="请输入密码"/>
+      </el-form-item>
+      <el-form-item label="总览：" prop="summary">
+        <el-input v-model="localForm.summary" type="textarea" placeholder="请输入内容"/>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script setup name="post-setting">
+import { ref, watch } from 'vue';
+
+const props = defineProps({
+  form: {
+    type: Object,
+    default: () => ({})
+  },
+  rules: {
+    type: Object,
+    default: () => ({})
+  },
+  categories: {
+    type: Array,
+    default: () => ([])
+  }
+})
+const emit = defineEmits(['update:form']);
+
+const treeProps = ref({
+  value: 'id',
+  label: 'name'
+})
+
+const localForm = ref({ ...props.form });
+
+watch(localForm, (newVal) => {
+  emit('update:form', newVal);
+}, { deep: true });
+
+watch(() => props.form, (newVal) => {
+  localForm.value = { ...newVal };
+}, { deep: true });
+
+function getForm () {
+  return localForm.value;
+}
+// 使用 defineExpose 暴露 getValue 方法
+defineExpose({
+  getForm
+});
+</script>
+
+<style scoped>
+/* 添加需要的样式 */
+</style>
--- a/src/views/blog/posts/write.vue
+++ b/src/views/blog/posts/write.vue
@ -22,30 +22,58 @@
          </el-form-item>
        </el-col>
        <el-col :span="24" style="text-align: center">
-          <el-button type="primary" @click="submitForm">提交</el-button>
+          <el-button type="primary" @click="setPost">提交</el-button>
          <el-button @click="close">返回</el-button>
        </el-col>
      </el-row>
    </el-form>
+    <el-dialog title="文章设置" v-model="open" width="780px" append-to-body>
+      <Setting
+        ref="setRef"
+        :form="dialogForm"
+        :rules="dialogRules"
+        :categories="categories"
+      ></Setting>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
  </div>
 </template>

-<script setup name="write">
+<script setup name="post-write">
 import VMdEditor from '@kangc/v-md-editor';
 import {xss} from '@kangc/v-md-editor';
 import {addPosts, updatePosts, upload} from "@/api/blog/posts";
+import {pinyin} from "pinyin-pro";
+import Setting from "./setting.vue"
+import {listCategories} from "@/api/blog/categories";
+import {useRoute} from 'vue-router';

 const route = useRoute();
+
 const {proxy} = getCurrentInstance();

 const textLoading = ref(false);
+const open = ref(false);
+const categories = ref([])
+const setRef = ref(null)

 const data = reactive({
  form: {
    id: undefined,
    title: undefined,
+    categories: [],
+    disallowComment: 0,
+    topPriority: 0,
    keywords: undefined,
+    password: undefined,
+    slug: undefined,
    summary: undefined,
+    type: 0,
    blogContents: {
      originalContent: '',
      content: undefined
@ -55,10 +83,12 @@ const data = reactive({
    title: [
      {required: true, message: "标题不能为空", trigger: "blur"}
    ],
-  }
+  },
+  dialogForm: {},
+  dialogRules: {}
 });

-const {form, rules} = toRefs(data);
+const {form, rules, dialogForm, dialogRules} = toRefs(data);

 /** 上传图片 */
 function handleUploadImage(event, insertImage, files) {
@ -74,28 +104,69 @@ function handleUploadImage(event, insertImage, files) {
 }

 /** 提交按钮 */
-function submitForm() {
-  // console.log('text:::' + form.value.md);
-  // console.log('html:::' + form.value.html);
-  proxy.$refs["postsRef"].validate(valid => {
-    if (valid) {
-      form.blogContents.content = xss.process(VMdEditor.vMdParser.themeConfig.markdownParser.render(form.blogContents.originalContent));
-      if (form.value.id != null) {
-        updatePosts(form.value).then(response => {
-          proxy.$modal.msgSuccess("修改成功");
-        });
+function setPost() {
+  if (form.value.title === undefined || form.value.title === null) {
+    proxy.$modal.msgError("标题不能为空！！");
+    return
+  }
+  form.value.disallowComment = form.value.disallowComment === 1
+  form.value.topPriority = form.value.topPriority === 1
+  dialogForm.value = form.value
+  open.value = true;
+}
+
+function submit(msg, response) {
+  if (response.code === 200) {
+    proxy.$modal.msgSuccess(msg);
+    close();
  } else {
-        addPosts(form.value).then(response => {
-          proxy.$modal.msgSuccess("新增成功");
-        });
+    proxy.$modal.msgError(msg);
  }
 }
-  });
-}

 function close() {
  const obj = {path: "/blog/posts"};
  proxy.$tab.closeOpenPage(obj);
 }

+function submitForm() {
+  form.value = setRef.value.getForm();
+  console.log(form.value)
+  proxy.$refs["postsRef"].validate(valid => {
+    if (valid) {
+      form.value.blogContents.content = xss.process(VMdEditor.vMdParser.themeConfig.markdownParser.render(form.value.blogContents.originalContent));
+      form.value.slug = pinyin(form.value.title, {toneType: 'none', nonZh: 'consecutive', separator: '-'});
+      form.value.disallowComment = (form.value.disallowComment === 1 || form.value.disallowComment) ? 1 : 0
+      form.value.topPriority = (form.value.topPriority === 1 || form.value.topPriority) ? 1 : 0
+      if (form.value.id != null) {
+        updatePosts(form.value).then(response => {
+          submit("修改成功", response)
+        });
+      } else {
+        addPosts(form.value).then(response => {
+          submit("新增成功", response)
+        });
+      }
+    }
+  });
+}
+
+function cancel() {
+  open.value = false;
+}
+
+function getCategories() {
+  listCategories().then(response => {
+    categories.value = proxy.handleTree(response.data, "id", "parentId");
+  });
+}
+
+function getForm() {
+  if (route.query.form) {
+    form.value = JSON.parse(route.query.form)
+  }
+}
+
+getForm()
+getCategories()
 </script>
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@ -214,7 +214,7 @@
          </el-col>
          <el-col :span="12" v-if="form.menuType == 'C'">
            <el-form-item>
-              <el-input v-model="form.query" placeholder="请输入路由参数" maxlength="255" />
+              <el-input v-model="form.queryParam" placeholder="请输入路由参数" maxlength="255" />
              <template #label>
                        <span>
                           <el-tooltip content='访问路由的默认传递参数，如：`{"id": 1, "name": "ry"}`' placement="top">