add new

src/components/blogs/HomePage.vue

@@ -44,7 +44,7 @@
                             <template #expandIcon="{ isActive }">
                                 <caret-right-outlined :rotate="isActive ? 90 : 0" />
                             </template>
-                            <a-collapse-panel v-for="classtic in classticContent.classticlist" :key=classtic.id :header=classtic.header
+                            <a-collapse-panel v-for="classtic in classticlist" :key=classtic.id :header=classtic.header
                                 :style="customStyle">
                                 <p>{{ classtic.text }}</p>
                             </a-collapse-panel>
@@ -117,11 +117,11 @@ import APlayer from 'APlayer';
 import { createEcharts } from "@/hooks/intex"
 import { useRouter, useRoute } from 'vue-router';
 import iconComponents from "@/assets/index";
-import { classticContentStore,comLinkContentStore } from '@/stores';
+import { comLinkContentStore } from '@/stores';
+import {classticlist,classticList} from "@/services/admin/classtic"
 
 const router = useRouter()
 const route = useRoute()
-const classticContent=classticContentStore()
 const comLinkContent=comLinkContentStore()
 
 /** 
@@ -400,7 +400,7 @@ const random = ref();
 
 onMounted(() => {
     scrollbar.value = document.querySelector('.simplebar-content-wrapper');
-    classticContent.classticList()
+    classticList()
     comLinkContent.comLinkList()   
     nextTick(() => {
         const authorElement = document.querySelector('.author');

src/services/admin/classtic.ts

@@ -5,6 +5,11 @@ import { classticStore } from "@/stores";
 const { searchValue, classticForm } = classticStore()
 
 const classticlist = ref<classticInterface[]>([])
+const classticOneData = ref({
+    header: "",
+    text: "",
+    descr: ""
+})
 const classticList = async () => {
     try {
         const response = await get("/classtics/list");
@@ -23,25 +28,6 @@ const classticList = async () => {
         console.error("Failed to fetch data", error);
     }
 }
-const onSubmit = async (id?: any) => {
-    if (id) {
-        await put(`/classtics/update/${id}`, classticForm)
-        // 更新 classticlist
-        const updatedIndex = classticlist.value.findIndex(item => item.id === id);
-        console.log(classticlist.value[0])
-            if (updatedIndex !== -1) {
-                classticlist.value[updatedIndex] = {
-                    ...classticlist.value[updatedIndex], // 保留原始项的其他属性
-                    header: classticForm.header,
-                    text: classticForm.text,
-                    descr: classticForm.descr,
-                };
-            }
-    } else {
-        await post("/classtics/add", classticForm)
-        await classticList()
-    }
-}
 const classticSearch = async () => {
     try {
         const response = await get(
@@ -63,7 +49,15 @@ const classticSearch = async () => {
         console.log("classtic request is error")
     }
 }
-
+const onSubmit = async (id?: any) => {
+    if (id) {
+        await put(`/classtics/update/${id}`, classticForm)
+        await classticList()
+    } else {
+        await post("/classtics/add", classticForm)
+        await classticList()
+    }
+}
 const classticDel = async (id: any) => {
     try {
         if (id) {
@@ -77,6 +71,18 @@ const classticDel = async (id: any) => {
     }
 
 }
+const classticOne = async (id: any) => {
+    try {
+        const response=await get(`classtics/list/search/${id}`)
+        if (response) {
+            classticOneData.value=response.data.data;
+        } else {
+            console.log("classtic one data is null")
+        }
+    } catch (error) {
+        console.log("classtic one data is error")
+    }
+}
 
 
-export { classticlist, classticForm, classticList, classticSearch, classticDel, onSubmit }
+export { classticlist, classticForm, classticOneData, classticList, classticSearch, classticDel, onSubmit, classticOne }

src/stores/index.ts

@@ -5,35 +5,27 @@ import dayjs from 'dayjs';
 import type { blogInterface, classticFormInterface } from '@/api/admin';
 import type { classticSearchInterface } from '@/api/admin/classtic';
 
-export const indexStore = defineStore("index", () => {
- 
-  return {}
-})
-
 export const classticStore = defineStore("classtic", () => {
-  const searchValue = reactive<classticSearchInterface>({
+  const searchList = reactive<classticSearchInterface>({
     title: ""
   })
-  const classticForm = reactive<classticFormInterface>({
+
+  const formList = reactive<classticFormInterface>({
     header: "",
     text: "",
     descr: ""
   })
-  const modalForm = reactive({
-    // 控制对话框开关
+  const formControl = reactive({
     open: false,
-    // 控制对话框title
     title: "",
-    // 控制对话框点击事件标识
     mode: "",
-    // 通过ids控制哪个功能事件
     ids: ""
   })
 
-  const modalDel=reactive({
-    open:false
+  const delControl = reactive({
+    open: false
   })
-  return { searchValue, classticForm,modalForm,modalDel }
+  return { formControl, delControl }
 })
 
 
@@ -49,8 +41,6 @@ export const classticStore = defineStore("classtic", () => {
 
 // 博客列表
 const bloglist = ref<blogInterface[]>([])
-// 语录列表
-
 
 export const useAuthStore = defineStore("auth", () => {
   const tokenValue = ref("")
@@ -63,7 +53,6 @@ export const useAuthStore = defineStore("auth", () => {
   return { setToken, removeToken }
 })
 
-
 // 链接接口
 export const comLinkContentStore = defineStore("comlink", () => {
   interface comlinkInterface {

src/views/admin/classticmanage/ClassticFormView.vue

@@ -1,18 +1,5 @@
 <template>
-    <a-modal v-model:open="modalForm.open" :title="modalForm.title" cancelText="取消" okText="确定" @ok="submit">
-        <a-form ref="formRef" :model="classticForm" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
-            <a-form-item label="语录标题" name="header"
-                :rules="[{ required: true, message: 'Please input your username!' }]">
-                <a-input v-model:value="classticForm.header" />
-            </a-form-item>
-            <a-form-item label="语录内容" name="text" :rules="[{ required: true, message: 'Please input your username!' }]">
-                <a-input v-model:value="classticForm.text" />
-            </a-form-item>
-            <a-form-item label="备注" name="descr" :rules="[{ required: true, message: 'Please input your username!' }]">
-                <a-input v-model:value="classticForm.descr" />
-            </a-form-item>
-        </a-form>
-    </a-modal>
+   
 </template>
 
 <script setup lang='ts'>
@@ -27,8 +14,9 @@ const submit = () => {
     } else {
         onSubmit()
     }
-    modalForm.open = false
     formRef.value.resetFields();
+    modalForm.open = false
+    
 
 };
 </script>

src/views/admin/classticmanage/ClassticManageView.vue

@@ -2,12 +2,29 @@
     <div class="content">
         <div class="search">
             <a-space>
-                <a-input v-model:value="searchValue.title" placeholder="语录标题" />
+                <a-input v-model:value="searchlist.title" placeholder="语录标题" />
             </a-space>
             <a-space style="margin-left: 16px;">
-                <a-button @click="classticSearch">查询</a-button>
+                <a-button @click="search">查询</a-button>
                 <a-button type="primary" ghost @click="formModal('add')">新增</a-button>
-                <ClassticFormView />
+                <a-modal v-model:open="formControl.open" :title="formControl.title" cancelText="取消" okText="确定"
+                    @ok="submit">
+                    <a-form ref="formRef" :model="formList" name="basic" :label-col="{ span: 4, offset: 2 }"
+                        :wrapper-col="{ span: 16 }">
+                        <a-form-item label="语录标题" name="header"
+                            :rules="[{ required: true, message: 'Please input your username!' }]">
+                            <a-input v-model:value="formList.header" />
+                        </a-form-item>
+                        <a-form-item label="语录内容" name="text"
+                            :rules="[{ required: true, message: 'Please input your username!' }]">
+                            <a-input v-model:value="formList.text" />
+                        </a-form-item>
+                        <a-form-item label="备注" name="descr"
+                            :rules="[{ required: true, message: 'Please input your username!' }]">
+                            <a-input v-model:value="formList.descr" />
+                        </a-form-item>
+                    </a-form>
+                </a-modal>
             </a-space>
         </div>
         <div class="table">
@@ -16,9 +33,9 @@
                     <template v-if="column.dataIndex === 'operation'">
                         <a-space>
                             <div>
-                                <a-button size="small" danger @click="delModal">删除</a-button>
-                                <a-modal v-model:open="modalDel.open" title="提示" ok-text="确认" cancel-text="取消"
-                                    @ok="del(record.id)">
+                                <a-button size="small" danger @click="delModal(record.id)">删除</a-button>
+                                <a-modal v-model:open="delControl.open" title="提示" ok-text="确认" cancel-text="取消"
+                                    @ok="del">
                                     <p>确认删除吗？</p>
                                 </a-modal>
                             </div>
@@ -33,32 +50,96 @@
 </template>
 
 <script setup lang='ts'>
-import { onMounted } from 'vue';
+import { onMounted, reactive } from 'vue';
 import { classticStore } from "@/stores/index"
 import { classticSearch, classticList, classticlist, classticDel } from "@/services/admin/classtic"
 import ClassticFormView from "@/views/admin/classticmanage/ClassticFormView.vue"
-const { searchValue, modalDel, modalForm } = classticStore()
+import { get } from '@/tools/request';
+
+const { delControl, formControl } = classticStore()
+const searchlist = reactive({
+    title: ""
+})
+const formList = reactive({
+    header: "",
+    text: "",
+    descr: ""
+})
+const search = async () => {
+    try {
+        await get(
+            "/classtics/list/search",
+            { header: searchlist.title }
+        ).then(response => {
+            if (response) {
+                classticlist.value = response.data.data.map((items: any, index: any) => ({
+                    key: (index + 1).toString(),
+                    id: items.id,
+                    header: items.header,
+                    text: items.text,
+                    descr: items.descr
+                }))
+            } else {
+                console.log("the interface request data does not exist!")
+            }
+        })
+    } catch (error) {
+        console.log("interface request exception")
+    }
+}
+
 const formModal = (mode: string, id?: any) => {
-    modalForm.ids = id;
-    modalForm.mode = mode;
-    modalForm.open = true;
+    formControl.ids = id;
+    formControl.mode = mode;
+    formControl.open = true;
     if (id) {
-        modalForm.title = "编辑"
-
+        formControl.title = "编辑"
     } else {
-        modalForm.title = "新增"
-
+        formControl.title = "新增"
     }
+
+
+    get(`classtics/list/search/${id}`).then(val => {
+        console.log("val", val)
+        classticForm.header = "123"
+        classticForm.text = "123"
+        classticForm.descr = "123123"
+    })
+
+
 };
+
 // 删除
-const del = (id: any) => {
-    classticDel(id)
-    modalDel.open = false
+const del = () => {
+    if (formControl.ids) {
+        classticDel(formControl.ids)
+    }
+    delControl.open = false
 }
-const delModal = () => {
-    modalDel.open = true
+const delModal = (id: any) => {
+    formControl.ids = id
+    delControl.open = true
 };
 
+const classticList = async () => {
+    try {
+        const response = await get("/classtics/list");
+        if (response) {
+            classticlist.value = response.data.data.map((item: any, index: any) => ({
+                key: (index + 1).toString(),
+                id: item.id,
+                header: item.header,
+                text: item.text,
+                descr: item.descr
+            }));
+        } else {
+            console.error("Response data structure is not as expected");
+        }
+    } catch (error) {
+        console.error("Failed to fetch data", error);
+    }
+}
+
 // 获取列表
 onMounted(async () => {
     classticList()