|
|
|
@ -2,18 +2,20 @@ |
|
|
|
<div class="content"> |
|
|
|
<div class="search"> |
|
|
|
<a-space> |
|
|
|
<a-input v-model:value="searchList.blogtitle" placeholder="博客标题" /> |
|
|
|
<a-input v-model:value="searchList.typename" placeholder="分类名称" /> |
|
|
|
<a-range-picker :locale="locale" show-time @change="onChange" /> |
|
|
|
<a-input v-model:value="blogSearch.searchValue.blogtitle" placeholder="博客标题" /> |
|
|
|
<a-input v-model:value="blogSearch.searchValue.typename" placeholder="分类名称" /> |
|
|
|
<a-range-picker :locale="locale" show-time @change="blogSearch.onChange" /> |
|
|
|
</a-space> |
|
|
|
<a-space style="margin-left: 16px;"> |
|
|
|
<a-button @click="blogSearch">查询</a-button> |
|
|
|
<a-button @click="blogSearch.blogSearch">查询</a-button> |
|
|
|
<a-button type="primary" ghost @click="blogAdd">新增</a-button> |
|
|
|
</a-space> |
|
|
|
</div> |
|
|
|
<div class="table"> |
|
|
|
<a-table bordered :data-source="blogContent.bloglist" :columns="columns"> |
|
|
|
<template #bodyCell="{ column, record }"> |
|
|
|
|
|
|
|
|
|
|
|
<template v-if="column.dataIndex === 'operation'"> |
|
|
|
<a-space> |
|
|
|
<div> |
|
|
|
@ -34,34 +36,47 @@ |
|
|
|
|
|
|
|
<script setup lang='ts'> |
|
|
|
import { ref, reactive, onMounted } from 'vue'; |
|
|
|
import {blogContentStore} from "@/stores/index" |
|
|
|
import 'dayjs/locale/zh-cn'; |
|
|
|
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN'; |
|
|
|
import dayjs from 'dayjs'; |
|
|
|
import { useRouter } from "vue-router" |
|
|
|
import { get, remove } from '@/tools/request'; |
|
|
|
import { message } from 'ant-design-vue'; |
|
|
|
import { blogContentStore,blogSearchStore } from '@/stores'; |
|
|
|
dayjs.locale('zh-cn'); |
|
|
|
const blogContent=blogContentStore() |
|
|
|
const blogSearch=blogSearchStore() |
|
|
|
const router = useRouter() |
|
|
|
const searchList = reactive<{ blogtitle: string, typename: string, start_date: string, end_date: string }>({ |
|
|
|
blogtitle: '', |
|
|
|
typename: '', |
|
|
|
start_date: '', |
|
|
|
end_date: '' |
|
|
|
}) |
|
|
|
// const searchList = reactive<{ blogtitle: string, typename: string, start_date: string, end_date: string }>({ |
|
|
|
// blogtitle: '', |
|
|
|
// typename: '', |
|
|
|
// start_date: '', |
|
|
|
// end_date: '' |
|
|
|
// }) |
|
|
|
// interface BlogList { |
|
|
|
// key: string; |
|
|
|
// id: number; |
|
|
|
// blogtitle: string; |
|
|
|
// typename: string; |
|
|
|
// blogcontent: string; |
|
|
|
// create_at: string; |
|
|
|
// update_at: string; |
|
|
|
// descr: string |
|
|
|
// } |
|
|
|
|
|
|
|
// const dataSource = ref<BlogList[]>([]);; |
|
|
|
|
|
|
|
// 拆分日期为两个时间：开始时间和结束时间 |
|
|
|
const onChange = (date: string, dateString: string[]) => { |
|
|
|
if (date && dateString.length === 2) { |
|
|
|
searchList.start_date = (dateString[0]); |
|
|
|
searchList.end_date = (dateString[1]); |
|
|
|
} else { |
|
|
|
searchList.start_date = ''; |
|
|
|
searchList.end_date = ''; |
|
|
|
} |
|
|
|
console.log(dateString[0]) |
|
|
|
}; |
|
|
|
// const onChange = (date: string, dateString: string[]) => { |
|
|
|
// if (date && dateString.length === 2) { |
|
|
|
// searchList.start_date = (dateString[0]); |
|
|
|
// searchList.end_date = (dateString[1]); |
|
|
|
// } else { |
|
|
|
// searchList.start_date = ''; |
|
|
|
// searchList.end_date = ''; |
|
|
|
// } |
|
|
|
// console.log(dateString[0]) |
|
|
|
// }; |
|
|
|
const open = ref<boolean>(false); |
|
|
|
const toDelete = reactive<{ key: string, id: number }>({ |
|
|
|
key: '', |
|
|
|
@ -81,45 +96,57 @@ const blogAdd = function () { |
|
|
|
|
|
|
|
// 获取列表 |
|
|
|
onMounted(async () => { |
|
|
|
// get("/blogs/list").then(response => { |
|
|
|
// dataSource.value = (response as any).data.data.map((items: any, index: any) => ({ |
|
|
|
// key: (index + 1).toString(), |
|
|
|
// id: items.id, |
|
|
|
// blogtitle: items.blogtitle, |
|
|
|
// typename: items.typename, |
|
|
|
// blogcontent: items.blogcontent, |
|
|
|
// create_at: dayjs(items.create_at).format('YYYY-MM-DD HH:mm:ss'), // 格式化创建时间 |
|
|
|
// update_at: dayjs(items.update_at).format('YYYY-MM-DD HH:mm:ss'), // 格式化更新时间 |
|
|
|
// descr: items.descr |
|
|
|
// })) |
|
|
|
// }) |
|
|
|
blogContent.blogList() |
|
|
|
}); |
|
|
|
|
|
|
|
// 查询事件 |
|
|
|
const blogSearch = () => { |
|
|
|
get("/blogs/list/search", { |
|
|
|
blogtitle: searchList.blogtitle, |
|
|
|
typename: searchList.typename, |
|
|
|
start_date: searchList.start_date, |
|
|
|
end_date: searchList.end_date, |
|
|
|
}) |
|
|
|
.then(response => { |
|
|
|
dataSource.value = response.data.data.map((items: any, index: any) => ({ |
|
|
|
key: (index + 1).toString(), |
|
|
|
blogtitle: items.blogtitle, |
|
|
|
typename: items.typename, |
|
|
|
blogcontent: items.blogcontent, |
|
|
|
create_at: dayjs(items.create_at).format('YYYY-MM-DD HH:mm:ss'), |
|
|
|
update_at: dayjs(items.update_at).format('YYYY-MM-DD HH:mm:ss'), |
|
|
|
descr: items.descr |
|
|
|
})); |
|
|
|
}) |
|
|
|
.catch(error => { |
|
|
|
console.error('There was an error seraching the blog!', error); |
|
|
|
}); |
|
|
|
}; |
|
|
|
// const blogSearch = () => { |
|
|
|
// get("/blogs/list/search", { |
|
|
|
// blogtitle: searchList.blogtitle, |
|
|
|
// typename: searchList.typename, |
|
|
|
// start_date: searchList.start_date, |
|
|
|
// end_date: searchList.end_date, |
|
|
|
// }) |
|
|
|
// .then(response => { |
|
|
|
// dataSource.value = response.data.data.map((items: any, index: any) => ({ |
|
|
|
// key: (index + 1).toString(), |
|
|
|
// blogtitle: items.blogtitle, |
|
|
|
// typename: items.typename, |
|
|
|
// blogcontent: items.blogcontent, |
|
|
|
// create_at: dayjs(items.create_at).format('YYYY-MM-DD HH:mm:ss'), |
|
|
|
// update_at: dayjs(items.update_at).format('YYYY-MM-DD HH:mm:ss'), |
|
|
|
// descr: items.descr |
|
|
|
// })); |
|
|
|
// }) |
|
|
|
// .catch(error => { |
|
|
|
// console.error('There was an error seraching the blog!', error); |
|
|
|
// }); |
|
|
|
// }; |
|
|
|
|
|
|
|
// 博客删除 |
|
|
|
const ackDelete = async (record:{key:string,id:number}) => { |
|
|
|
remove(`/blogs/delete/${toDelete.id}`).then((response) => { |
|
|
|
if (response.status === 200) { |
|
|
|
dataSource.value = dataSource.value.filter(item => item.key !== record.key); |
|
|
|
open.value = false; |
|
|
|
} |
|
|
|
message.info("删除成功") |
|
|
|
}).catch(error => { |
|
|
|
console.error('There was an error deleting the blog!', error); |
|
|
|
}) |
|
|
|
}; |
|
|
|
// const ackDelete = async (record:{key:string,id:number}) => { |
|
|
|
// remove(`/blogs/delete/${toDelete.id}`).then((response) => { |
|
|
|
// if (response.status === 200) { |
|
|
|
// dataSource.value = dataSource.value.filter(item => item.key !== record.key); |
|
|
|
// open.value = false; |
|
|
|
// } |
|
|
|
// message.info("删除成功") |
|
|
|
// }).catch(error => { |
|
|
|
// console.error('There was an error deleting the blog!', error); |
|
|
|
// }) |
|
|
|
// }; |
|
|
|
|
|
|
|
// 博客修改 |
|
|
|
const ackUpdate =async (record: { key: string, id: number }) => { |
|
|
|
@ -146,10 +173,6 @@ const columns = [ |
|
|
|
title: '博客分类', |
|
|
|
dataIndex: 'typename', |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '博客标签', |
|
|
|
dataIndex: 'labelname', |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '发布时间', |
|
|
|
dataIndex: 'create_at', |
|
|
|
|
panda
9 months ago