From e9f47b44888413a82fa53af42b5c292b347e70be Mon Sep 17 00:00:00 2001
From: panda <7934952@qq.com>
Date: Mon, 8 Jul 2024 16:59:23 +0800
Subject: [PATCH] add new
---
src/components/blogs/ceshi.vue | 109 ++++--------------
src/router/admin.ts | 13 +--
.../admin/{blogmange => }/BlogManageView.vue | 12 +-
src/views/blog/blogcontent/BlogListView.vue | 35 +++++-
4 files changed, 60 insertions(+), 109 deletions(-)
rename src/views/admin/{blogmange => }/BlogManageView.vue (97%)
diff --git a/src/components/blogs/ceshi.vue b/src/components/blogs/ceshi.vue
index e997e5f..63b1d44 100644
--- a/src/components/blogs/ceshi.vue
+++ b/src/components/blogs/ceshi.vue
@@ -1,95 +1,30 @@
<template>
- <a-table :columns="columns" :data-source="data">
- <template #headerCell="{ column }">
- <template v-if="column.key === 'name'">
- <span>
- <!-- <smile-outlined /> -->
- Name
- </span>
- </template>
- </template>
-
- <template #bodyCell="{ column, record }">
- <template v-if="column.key === 'name'">
- {{ record.name }}
- </template>
- <template v-else-if="column.key === 'tags'">
- <span>
- <a-tag
- v-for="tag in record.tags"
- :key="tag"
- :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
- >
- {{ tag.toUpperCase() }}
- </a-tag>
- </span>
- </template>
- <template v-else-if="column.key === 'action'">
- <span>
- <a>Invite 一 {{ record.name }}</a>
- <a-divider type="vertical" />
- <a>Delete</a>
- <a-divider type="vertical" />
- <a class="ant-dropdown-link">
- More actions
- <down-outlined />
- </a>
- </span>
- </template>
- </template>
- </a-table>
+ <a-form-item name="select-multiple" label="Select[multiple]">
+ <a-select v-model:value="formState.labels" mode="multiple" placeholder="Please select favourite colors">
+ <a-select-option :value="type.id" v-for="type in typelist" >
+ {{ type.color }}
+ </a-select-option>
+ </a-select>
+ </a-form-item>
</template>
-<script lang="ts" setup>
-import { SmileOutlined, DownOutlined } from '@ant-design/icons-vue';
-const columns = [
- {
- name: 'Name',
- dataIndex: 'name',
- key: 'name',
- },
- {
- title: 'Age',
- dataIndex: 'age',
- key: 'age',
- },
- {
- title: 'Address',
- dataIndex: 'address',
- key: 'address',
- },
- {
- title: 'Tags',
- key: 'tags',
- dataIndex: 'tags',
- },
- {
- title: 'Action',
- key: 'action',
- },
-];
-const data = [
- {
- key: '1',
- name: 'John Brown',
- age: 32,
- address: 'New York No. 1 Lake Park',
- tags: ['nice', 'developer'],
- },
+<script setup lang='ts'>
+import { ref } from 'vue';
+
+const formState = ref({
+ labels: [2, 3] // 初始值设定为 typelist 中的 id 值
+});
+
+const typelist = ref([
{
- key: '2',
- name: 'Jim Green',
- age: 42,
- address: 'London No. 1 Lake Park',
- tags: ['loser'],
+ id: 2,
+ color: 'red'
},
{
- key: '3',
- name: 'Joe Black',
- age: 32,
- address: 'Sidney No. 1 Lake Park',
- tags: ['cool', 'teacher'],
- },
-];
+ id: 3,
+ color: 'green'
+ }
+]);
</script>
+<style></style>
diff --git a/src/router/admin.ts b/src/router/admin.ts
index c6c3237..2f9a48d 100644
--- a/src/router/admin.ts
+++ b/src/router/admin.ts
@@ -14,18 +14,7 @@ const adminRoute: Array<RouteRecordRaw> = [
{
path: "blogmanage",
name: "blogmanage",
- component: () => import("@/views/admin/blogmange/BlogManageView.vue")
- },
- {
- path: "blogmanage/add",
- component: () => import("@/views/admin/blogmange/BlogFormView.vue"),
- meta: { requiresAuth: true }
- },
- {
- path: "blogmanage/update/:id",
- component: () => import("@/views/admin/blogmange/BlogFormView.vue"),
- meta: { requiresAuth: true },
- props: true
+ component: () => import("@/views/admin/BlogManageView.vue")
},
{
path: "classticmanage",
diff --git a/src/views/admin/blogmange/BlogManageView.vue b/src/views/admin/BlogManageView.vue
similarity index 97%
rename from src/views/admin/blogmange/BlogManageView.vue
rename to src/views/admin/BlogManageView.vue
index 4c8a4c9..12ad9c9 100644
--- a/src/views/admin/blogmange/BlogManageView.vue
+++ b/src/views/admin/BlogManageView.vue
@@ -27,7 +27,7 @@
</a-select>
</a-form-item>
<a-form-item name="labelname" label="标签名称" class="items">
- <a-select v-model:value="formState['labelname']" mode="multiple" placeholder="请选择标签">
+ <a-select v-model:value="formState.labelnames" mode="multiple" placeholder="请选择标签">
<a-select-option :value="label.id" v-for="label in labellist">{{ label.labelname
}}</a-select-option>
</a-select>
@@ -135,17 +135,15 @@ const search = async () => {
}
};
-// 新增
const formState = ref({
id: '',
blogtitle: '',
typeid: null,
blogcontent: "",
- labelname: [],
+ labelnames: [],
descr: '',
imglink: ""
});
-
const labellist = ref<labelInterface[]>([])
const labelList = async () => {
try {
@@ -207,6 +205,7 @@ const addModal = () => {
formControl.value.open = true
console.log(formControl.value.ids)
}
+
const editModal = (id: any) => {
formControl.value.ids = id
formControl.value.open = true
@@ -214,6 +213,7 @@ const editModal = (id: any) => {
`/blogs/list/search/${id}`
).then(response=>{
formState.value=response.data.data
+
})
console.log(formControl.value.ids)
}
@@ -221,7 +221,7 @@ const onSubmit = () => {
formRef.value
.validate()
.then(async () => {
- const labels = formState.value.labelname.map(labelId => {
+ const labels = formState.value.labelnames.map(labelId => {
const label = labellist.value.find((label: any) => label.id === labelId);
return label ? { "id": label.id, "labelname": label.labelname, "descr": label.descr } : null;
});
@@ -267,7 +267,7 @@ const blogList = async () => {
update_at: dayjs(items.update_at).format('YYYY-MM-DD HH:mm:ss'),
readnum: items.readnum,
readminite: items.readminite,
- wordcount: items.wordcount,
+ wordcount: items.blogcontent.length,
img: items.img,
blogcontent: items.blogcontent,
typename: items.typename,
diff --git a/src/views/blog/blogcontent/BlogListView.vue b/src/views/blog/blogcontent/BlogListView.vue
index 8045a6f..c928335 100644
--- a/src/views/blog/blogcontent/BlogListView.vue
+++ b/src/views/blog/blogcontent/BlogListView.vue
@@ -1,6 +1,6 @@
<template>
<div class="main">
- <div class="mainContent" v-for="article in blogContent.bloglist">
+ <div class="mainContent" v-for="article in bloglist">
<a-badge-ribbon :text=article.typename color="black">
<a-card hoverable>
<h2>{{ article.blogtitle }}</h2>
@@ -53,18 +53,45 @@
<script setup lang='ts'>
import { onMounted, ref } from 'vue';
-import { blogContentStore } from "@/stores"
import iconComponents from '@/assets';
-const blogContent = blogContentStore();
+import dayjs from 'dayjs';
+import type { blogInterface } from '@/api/admin';
+import {get} from "@/tools/request"
const randomColor = () => {
const labelColor = ref(["processing", "success", "error", "warning", "magenta", "red", "volcano", "orange", "gold", "lime", "green", "cyan", "blue", "geekblue", "purple"])
return labelColor.value[Math.floor(Math.random() * labelColor.value.length)];
}
+const bloglist = ref<blogInterface[]>([])
+const blogList = async () => {
+ try {
+ const response = await get("/blogs/list");
+ if (response) {
+ bloglist.value = response.data.data.map((items: any, index: any) => ({
+ key: (index + 1).toString(),
+ id: items.id,
+ blogtitle: items.blogtitle,
+ 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'),
+ readnum: items.readnum,
+ readminite: (items.blogcontent.length/150).toFixed(2),
+ wordcount: items.blogcontent.length,
+ img: items.img,
+ blogcontent: items.blogcontent,
+ typename: items.typename,
+ labelnames: items.labelnames
+ }))
+ } else {
+ console.log("bloglist is not exits")
+ }
+ } catch (error) {
+ console.log("bloglist is error")
+ }
+}
onMounted(() => {
- blogContent.blogList();
+ blogList();
});
</script>