添加/修改 博客文章

This commit is contained in:
huangge1199 2024-09-09 11:18:23 +08:00
parent b7b93447f0
commit 59894b38f5
4 changed files with 201 additions and 184 deletions

View File

@ -23,17 +23,8 @@
icon="Plus" icon="Plus"
@click="handleAdd" @click="handleAdd"
v-hasPermi="['blog:posts:add']" 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>
<el-col :span="1.5"> <el-col :span="1.5">
<el-button <el-button
@ -43,7 +34,8 @@
:disabled="multiple" :disabled="multiple"
@click="handleDelete" @click="handleDelete"
v-hasPermi="['blog:posts:remove']" v-hasPermi="['blog:posts:remove']"
>删除</el-button> >删除
</el-button>
</el-col> </el-col>
<el-col :span="1.5"> <el-col :span="1.5">
<el-button <el-button
@ -52,20 +44,25 @@
icon="Download" icon="Download"
@click="handleExport" @click="handleExport"
v-hasPermi="['blog:posts:export']" v-hasPermi="['blog:posts:export']"
>导出</el-button> >导出
</el-button>
</el-col> </el-col>
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar> <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row> </el-row>
<el-table v-loading="loading" :data="postsList" @selection-change="handleSelectionChange"> <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"> <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template #default="scope"> <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> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -77,74 +74,25 @@
v-model:limit="queryParams.pageSize" v-model:limit="queryParams.pageSize"
@pagination="getList" @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="是否可评论01不能" prop="disallowComment">
<el-input v-model="form.disallowComment" placeholder="请输入是否可评论01不能" />
</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> </div>
</template> </template>
<script setup name="Posts"> <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 postsList = ref([]);
//
const blogContentsList = ref([]);
//
const open = ref(false);
// //
const loading = ref(true); const loading = ref(true);
// //
const showSearch = ref(true); const showSearch = ref(true);
// //
const ids = ref([]); const ids = ref([]);
//
const checkedBlogContents = ref([]);
// //
const single = ref(true); const single = ref(true);
// //
@ -166,21 +114,21 @@ const data = reactive({
}, },
rules: { rules: {
id: [ id: [
{ required: true, message: "主键不能为空", trigger: "blur" } {required: true, message: "主键不能为空", trigger: "blur"}
], ],
slug: [ slug: [
{ required: true, message: "固定链接地址不能为空", trigger: "blur" } {required: true, message: "固定链接地址不能为空", trigger: "blur"}
], ],
type: [ type: [
{ required: true, message: "类型0文章1自定义页面不能为空", trigger: "change" } {required: true, message: "类型0文章1自定义页面不能为空", trigger: "change"}
], ],
title: [ 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() { 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() { function handleQuery() {
queryParams.value.pageNum = 1; queryParams.value.pageNum = 1;
@ -237,90 +155,36 @@ function resetQuery() {
// //
function handleSelectionChange(selection) { function handleSelectionChange(selection) {
ids.value = selection.map(item => item.id); ids.value = selection.map(item => item.id);
single.value = selection.length != 1; single.value = selection.length !== 1;
multiple.value = !selection.length; multiple.value = !selection.length;
} }
/** 新增按钮操作 */ /** 新增按钮操作 */
function handleAdd() { function handleAdd() {
reset(); router.push({name: "Post-write"});
open.value = true;
title.value = "添加博客文章";
} }
/** 修改按钮操作 */ /** 修改按钮操作 */
function handleUpdate(row) { function handleUpdate(row) {
reset();
const _id = row.id || ids.value const _id = row.id || ids.value
getPosts(_id).then(response => { getPosts(_id).then(response => {
form.value = response.data; 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) { function handleDelete(row) {
const _ids = row.id || ids.value; const _ids = row.id || ids.value;
proxy.$modal.confirm('是否确认删除博客文章编号为"' + _ids + '"的数据项?').then(function() { proxy.$modal.confirm('是否确认删除博客文章编号为"' + _ids + '"的数据项?').then(function () {
return delPosts(_ids); return delPosts(_ids);
}).then(() => { }).then(() => {
getList(); getList();
proxy.$modal.msgSuccess("删除成功"); 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)
} }
/** 导出按钮操作 */ /** 导出按钮操作 */

View File

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

View File

@ -22,30 +22,58 @@
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="24" style="text-align: center"> <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-button @click="close">返回</el-button>
</el-col> </el-col>
</el-row> </el-row>
</el-form> </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> </div>
</template> </template>
<script setup name="write"> <script setup name="post-write">
import VMdEditor from '@kangc/v-md-editor'; import VMdEditor from '@kangc/v-md-editor';
import {xss} from '@kangc/v-md-editor'; import {xss} from '@kangc/v-md-editor';
import {addPosts, updatePosts, upload} from "@/api/blog/posts"; 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 route = useRoute();
const { proxy } = getCurrentInstance();
const {proxy} = getCurrentInstance();
const textLoading = ref(false); const textLoading = ref(false);
const open = ref(false);
const categories = ref([])
const setRef = ref(null)
const data = reactive({ const data = reactive({
form: { form: {
id: undefined, id: undefined,
title: undefined, title: undefined,
categories: [],
disallowComment: 0,
topPriority: 0,
keywords: undefined, keywords: undefined,
password: undefined,
slug: undefined,
summary: undefined, summary: undefined,
type: 0,
blogContents: { blogContents: {
originalContent: '', originalContent: '',
content: undefined content: undefined
@ -55,10 +83,12 @@ const data = reactive({
title: [ title: [
{required: true, message: "标题不能为空", trigger: "blur"} {required: true, message: "标题不能为空", trigger: "blur"}
], ],
} },
dialogForm: {},
dialogRules: {}
}); });
const {form, rules} = toRefs(data); const {form, rules, dialogForm, dialogRules} = toRefs(data);
/** 上传图片 */ /** 上传图片 */
function handleUploadImage(event, insertImage, files) { function handleUploadImage(event, insertImage, files) {
@ -74,28 +104,69 @@ function handleUploadImage(event, insertImage, files) {
} }
/** 提交按钮 */ /** 提交按钮 */
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 {
proxy.$modal.msgError(msg);
}
}
function close() {
const obj = {path: "/blog/posts"};
proxy.$tab.closeOpenPage(obj);
}
function submitForm() { function submitForm() {
// console.log('text:::' + form.value.md); form.value = setRef.value.getForm();
// console.log('html:::' + form.value.html); console.log(form.value)
proxy.$refs["postsRef"].validate(valid => { proxy.$refs["postsRef"].validate(valid => {
if (valid) { if (valid) {
form.blogContents.content = xss.process(VMdEditor.vMdParser.themeConfig.markdownParser.render(form.blogContents.originalContent)); 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) { if (form.value.id != null) {
updatePosts(form.value).then(response => { updatePosts(form.value).then(response => {
proxy.$modal.msgSuccess("修改成功"); submit("修改成功", response)
}); });
} else { } else {
addPosts(form.value).then(response => { addPosts(form.value).then(response => {
proxy.$modal.msgSuccess("新增成功"); submit("新增成功", response)
}); });
} }
} }
}); });
} }
function close() { function cancel() {
const obj = { path: "/blog/posts" }; open.value = false;
proxy.$tab.closeOpenPage(obj);
} }
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> </script>

View File

@ -214,7 +214,7 @@
</el-col> </el-col>
<el-col :span="12" v-if="form.menuType == 'C'"> <el-col :span="12" v-if="form.menuType == 'C'">
<el-form-item> <el-form-item>
<el-input v-model="form.query" placeholder="请输入路由参数" maxlength="255" /> <el-input v-model="form.queryParam" placeholder="请输入路由参数" maxlength="255" />
<template #label> <template #label>
<span> <span>
<el-tooltip content='访问路由的默认传递参数,如:`{"id": 1, "name": "ry"}`' placement="top"> <el-tooltip content='访问路由的默认传递参数,如:`{"id": 1, "name": "ry"}`' placement="top">