add news

src/services/admin/classtic.ts

@@ -2,14 +2,9 @@ import { get, remove, put, post } from "@/tools/request"
 import { reactive, ref } from "vue";
 import type { classticInterface, classticFormInterface } from "@/api/admin/classtic"
 import { classticStore } from "@/stores";
-const { searchValue } = classticStore()
+const { searchValue, classticForm } = classticStore()
 
 const classticlist = ref<classticInterface[]>([])
-const classticform = reactive<classticFormInterface>({
-    header: "",
-    text: "",
-    descr: ""
-})
 const classticList = async () => {
     try {
         const response = await get("/classtics/list");
@@ -28,7 +23,25 @@ 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(
@@ -54,29 +67,16 @@ const classticSearch = async () => {
 const classticDel = async (id: any) => {
     try {
         if (id) {
-            remove(`/classtics/delete/${id}`)
+            await remove(`/classtics/delete/${id}`)
+            await classticList()
         } else {
             console.log("id is null")
         }
-        await classticList()
     } catch (error) {
         console.log("request is error")
     }
 
 }
 
-const onSubmit = async (id?: any) => {
-    if (id) {
-        await put(`/classtics/update/${id}`, classticform)
-
-    } else {
-        const response = post("/classtics/add", classticform)
-        const newClasstic = {
-            ...(await response).data.data,
-            key: (classticlist.value.length + 1).toString()
-        }
-        classticlist.value.push(newClasstic)
 
-    }
-}
-export { classticlist, classticform, classticList, classticSearch, classticDel, onSubmit }
+export { classticlist, classticForm, classticList, classticSearch, classticDel, onSubmit }

src/stores/index.ts

@@ -1,21 +1,13 @@
 import { reactive, ref } from 'vue'
 import { defineStore } from 'pinia'
-import { get, post, put, remove } from "@/tools/request"
+import { get } from "@/tools/request"
 import dayjs from 'dayjs';
-import type { blogInterface, classticInterface, classticFormInterface } from '@/api/admin';
+import type { blogInterface, classticFormInterface } from '@/api/admin';
 import type { classticSearchInterface } from '@/api/admin/classtic';
-export const indexStore=defineStore("index",()=>{
-  const modal=reactive({
-    // 控制对话框开关
-    open:false,
-    // 控制对话框title
-    title:"",
-    // 控制对话框点击事件标识
-    mode:"",
-    // 通过ids控制哪个功能事件
-    ids:""
-  })
-  return {modal}
+
+export const indexStore = defineStore("index", () => {
+ 
+  return {}
 })
 
 export const classticStore = defineStore("classtic", () => {
@@ -27,7 +19,21 @@ export const classticStore = defineStore("classtic", () => {
     text: "",
     descr: ""
   })
-  return { searchValue,classticForm }
+  const modalForm = reactive({
+    // 控制对话框开关
+    open: false,
+    // 控制对话框title
+    title: "",
+    // 控制对话框点击事件标识
+    mode: "",
+    // 通过ids控制哪个功能事件
+    ids: ""
+  })
+
+  const modalDel=reactive({
+    open:false
+  })
+  return { searchValue, classticForm,modalForm,modalDel }
 })
 
 
@@ -44,8 +50,7 @@ export const classticStore = defineStore("classtic", () => {
 // 博客列表
 const bloglist = ref<blogInterface[]>([])
 // 语录列表
-const classticlist = ref<classticInterface[]>([])
-// 语录新增
+
 
 export const useAuthStore = defineStore("auth", () => {
   const tokenValue = ref("")
@@ -58,77 +63,6 @@ export const useAuthStore = defineStore("auth", () => {
   return { setToken, removeToken }
 })
 
-// 语录列表接口
-export const classticContentStore = defineStore("classtic", () => {
-
-
-  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);
-    }
-  }
-  return { classticlist, classticList }
-})
-// 语录查询接口
-export const classticSearchStore = defineStore("chassticsearch", () => {
-  const searchValue = reactive({
-    title: ""
-  })
-  const classticSearch = async () => {
-    try {
-      const response = await get(
-        "/classtics/list/search",
-        { header: searchValue.title }
-      )
-      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("classtic request is nulll")
-      }
-    } catch (error) {
-      console.log("classtic request is error")
-    }
-  }
-  return { classticSearch, searchValue }
-})
-
-
-// 语录删除
-export const classticDelStore = defineStore("classticdel", () => {
-  const classticDel = (id: any) => {
-    try {
-      if (id) {
-        remove(`/classtics/delete/${id}`)
-        classticlist.value = classticlist.value.filter(item => item.id !== id);
-      } else {
-        console.log("id is null")
-      }
-    } catch (error) {
-      console.log("request is error")
-    }
-
-  }
-  return { classticDel }
-})
 
 // 链接接口
 export const comLinkContentStore = defineStore("comlink", () => {

src/views/admin/classticmanage/ClassticFormView.vue

@@ -1,30 +1,35 @@
 <template>
-    <a-modal v-model:open="modal.open" :title="modal.title" cancelText="取消" okText="确定" @ok="submit">
-        <a-form :model="classticform" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
+    <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-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-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-input v-model:value="classticForm.descr" />
             </a-form-item>
         </a-form>
     </a-modal>
 </template>
 
 <script setup lang='ts'>
-import {indexStore} from "@/stores/index"
-import { onSubmit,classticform } from "@/services/admin/classtic"
-const {modal}=indexStore()
+import { ref } from "vue";
+import { classticStore } from "@/stores/index"
+import { onSubmit } from "@/services/admin/classtic"
+const { modalForm, classticForm } = classticStore()
+const formRef = ref();
 const submit = () => {
-    if (modal.ids) {
-        onSubmit(modal.ids)
+    if (modalForm.ids) {
+        onSubmit(modalForm.ids)
     } else {
         onSubmit()
     }
+    modalForm.open = false
+    formRef.value.resetFields();
+
 };
 </script>
 

src/views/admin/classticmanage/ClassticManageView.vue

@@ -6,8 +6,8 @@
             </a-space>
             <a-space style="margin-left: 16px;">
                 <a-button @click="classticSearch">查询</a-button>
-                <a-button type="primary" ghost @click="openModal('add')">新增</a-button>
-                <ClassticFormView/>
+                <a-button type="primary" ghost @click="formModal('add')">新增</a-button>
+                <ClassticFormView />
             </a-space>
         </div>
         <div class="table">
@@ -17,12 +17,13 @@
                         <a-space>
                             <div>
                                 <a-button size="small" danger @click="delModal">删除</a-button>
-                                <a-modal v-model:open="modal.open" title="提示" ok-text="确认" cancel-text="取消"
+                                <a-modal v-model:open="modalDel.open" title="提示" ok-text="确认" cancel-text="取消"
                                     @ok="del(record.id)">
                                     <p>确认删除吗？</p>
                                 </a-modal>
                             </div>
-                            <a-button size="small" type="primary" ghost @click="openModal('edit', record.id)">编辑</a-button>
+                            <a-button size="small" type="primary" ghost
+                                @click="formModal('edit', record.id)">编辑</a-button>
                         </a-space>
                     </template>
                 </template>
@@ -32,30 +33,30 @@
 </template>
 
 <script setup lang='ts'>
-import { ref, onMounted } from 'vue';
-import {  indexStore } from "@/stores"
+import { onMounted } from 'vue';
 import { classticStore } from "@/stores/index"
-import { classticSearch, classticList, classticlist,classticDel } from "@/services/admin/classtic"
+import { classticSearch, classticList, classticlist, classticDel } from "@/services/admin/classtic"
 import ClassticFormView from "@/views/admin/classticmanage/ClassticFormView.vue"
-const { searchValue } = classticStore()
-const { modal } = indexStore()
-const openModal = (mode: string, id?: any) => {
-    modal.mode = mode;
-    modal.open = true;
-    modal.ids = id;
+const { searchValue, modalDel, modalForm } = classticStore()
+const formModal = (mode: string, id?: any) => {
+    modalForm.ids = id;
+    modalForm.mode = mode;
+    modalForm.open = true;
     if (id) {
-        modal.title="编辑"
-    }else{
-        modal.title="新增"
+        modalForm.title = "编辑"
+
+    } else {
+        modalForm.title = "新增"
+
     }
 };
+// 删除
 const del = (id: any) => {
     classticDel(id)
-    modal.open = false;
+    modalDel.open = false
 }
-
 const delModal = () => {
-    modal.open = true;
+    modalDel.open = true
 };
 
 // 获取列表