Browse Source

add new

master
panda 8 months ago
parent
commit
e9f47b4488
  1. 109
      src/components/blogs/ceshi.vue
  2. 13
      src/router/admin.ts
  3. 12
      src/views/admin/BlogManageView.vue
  4. 35
      src/views/blog/blogcontent/BlogListView.vue

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

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

12
src/views/admin/blogmange/BlogManageView.vue → 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,

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

Loading…
Cancel
Save