添加/修改 博客文章

src/views/blog/posts/index.vue

@@ -23,17 +23,8 @@
           icon="Plus"
           @click="handleAdd"
           v-hasPermi="['blog:posts:add']"
-        >新增</el-button>
+        >新增
-      </el-col>
+        </el-button>
-      <el-col :span="1.5">
-        <el-button
-          type="success"
-          plain
-          icon="Edit"
-          :disabled="single"
-          @click="handleUpdate"
-          v-hasPermi="['blog:posts:edit']"
-        >修改</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,20 +44,25 @@
           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>
 
     <el-table v-loading="loading" :data="postsList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column type="selection" width="55" align="center"/>
-      <el-table-column label="主键" align="center" prop="id" />
+      <el-table-column label="主键" align="center" prop="id"/>
-      <el-table-column label="状态" align="center" prop="status" />
+      <el-table-column label="状态" align="center" prop="status"/>
-      <el-table-column label="标题" align="center" prop="title" />
+      <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="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['blog:posts:edit']">
-          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['blog:posts:remove']">删除</el-button>
+            修改
+          </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 {listPosts, getPosts, delPosts, addPosts, updatePosts} from "@/api/blog/posts";
+import {useRouter} from 'vue-router';
 
-const { proxy } = getCurrentInstance();
+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);
 // 非多个禁用
@@ -166,21 +114,21 @@ const data = reactive({
   },
   rules: {
     id: [
-      { required: true, message: "主键不能为空", trigger: "blur" }
+      {required: true, message: "主键不能为空", trigger: "blur"}
     ],
     slug: [
-      { required: true, message: "固定链接地址不能为空", trigger: "blur" }
+      {required: true, message: "固定链接地址不能为空", trigger: "blur"}
     ],
     type: [
-      { required: true, message: "类型，0：文章，1：自定义页面不能为空", trigger: "change" }
+      {required: true, message: "类型，0：文章，1：自定义页面不能为空", trigger: "change"}
     ],
     title: [
-      { required: true, message: "标题不能为空", trigger: "blur" }
+      {required: true, message: "标题不能为空", trigger: "blur"}
     ],
   }
 });
 
-const { queryParams, form, rules } = toRefs(data);
+const {queryParams, form, rules} = toRefs(data);
 
 /** 查询博客文章列表 */
 function getList() {
@@ -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,90 +155,36 @@ 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();
+  router.push({name: "Post-write"});
-  open.value = true;
-  title.value = "添加博客文章";
 }
 
 /** 修改按钮操作 */
 function handleUpdate(row) {
-  reset();
   const _id = row.id || ids.value
   getPosts(_id).then(response => {
     form.value = response.data;
-    blogContentsList.value = response.data.blogContentsList;
+    const param = JSON.stringify(form.value)
-    open.value = true;
+    proxy.$tab.closePage(router.currentRoute.value)
-    title.value = "修改博客文章";
+    router.push({name: "Post-write", query: {form: param}});
-  });
-}
-
-/** 提交按钮 */
-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();
-        });
-      }
-    }
   });
 }
 
 /** 删除按钮操作 */
 function handleDelete(row) {
   const _ids = row.id || ids.value;
-  proxy.$modal.confirm('是否确认删除博客文章编号为"' + _ids + '"的数据项？').then(function() {
+  proxy.$modal.confirm('是否确认删除博客文章编号为"' + _ids + '"的数据项？').then(function () {
     return delPosts(_ids);
   }).then(() => {
     getList();
     proxy.$modal.msgSuccess("删除成功");
-  }).catch(() => {});
+  }).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
   });
-  }
-}
-
-/** 复选框选中数据 */
-function handleBlogContentsSelectionChange(selection) {
-  checkedBlogContents.value = selection.map(item => item.index)
 }
 
 /** 导出按钮操作 */

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>

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

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">