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>