add new

src/api/admin/classtic.ts

@@ -0,0 +1,18 @@
+// 语录管理
+export interface classticInterface {
+  key: string,
+  id?: number,
+  header: string,
+  text: string,
+  descr: string
+}
+
+export interface classticSearchInterface {
+  title: string
+}
+
+export interface classticFormInterface {
+  header: string,
+  text: string,
+  descr: string
+}

src/api/index.ts

@@ -0,0 +1,5 @@
+// 公共api
+export interface indexInterface {
+    modaOpen: boolean,
+    title: string,
+  }

src/services/admin/classtic.ts

@@ -0,0 +1,82 @@
+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 classticlist = ref<classticInterface[]>([])
+const classticform = reactive<classticFormInterface>({
+    header: "",
+    text: "",
+    descr: ""
+})
+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);
+    }
+}
+
+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")
+    }
+}
+
+const classticDel = async (id: any) => {
+    try {
+        if (id) {
+            remove(`/classtics/delete/${id}`)
+        } 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 }

src/stores/index.ts

@@ -3,6 +3,44 @@ import { defineStore } from 'pinia'
 import { get, post, put, remove } from "@/tools/request"
 import dayjs from 'dayjs';
 import type { blogInterface, classticInterface, 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 classticStore = defineStore("classtic", () => {
+  const searchValue = reactive<classticSearchInterface>({
+    title: ""
+  })
+  const classticForm = reactive<classticFormInterface>({
+    header: "",
+    text: "",
+    descr: ""
+  })
+  return { searchValue,classticForm }
+})
+
+
+
+
+
+
+
+
+
+
+
+
 // 博客列表
 const bloglist = ref<blogInterface[]>([])
 // 语录列表
@@ -72,34 +110,7 @@ export const classticSearchStore = defineStore("chassticsearch", () => {
   }
   return { classticSearch, searchValue }
 })
-// 语录新增/编辑接口
-export const classticFormStore = defineStore("classform", () => {
-  const classticform = reactive<classticFormInterface>({
-    header: "",
-    text: "",
-    descr: ""
-  })
-  const onSubmit = async (id?: any) => {
-    if (id) {
-      const response = await put(`/classtics/update/${id}`, classticform)
-      const updatedClasstic = response.data.data;
-      const index = classticlist.value.findIndex(item => item.id === updatedClasstic.id)
-      if (index !== -1) {
-        updatedClasstic.key = classticlist.value[index].key;
-        classticlist.value[index] = updatedClasstic;
-      }
-    } else {
-      const response=post("/classtics/add", classticform)
-      const newClasstic = {
-        ...(await response).data.data,
-        key: (classticlist.value.length + 1).toString()
-      }
-      classticlist.value.push(newClasstic)
 
-    }
-  }
-  return { classticform, onSubmit }
-})
 
 // 语录删除
 export const classticDelStore = defineStore("classticdel", () => {

src/views/admin/classticmanage/ClassticFormView.vue

@@ -0,0 +1,31 @@
+<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-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'>
+import {indexStore} from "@/stores/index"
+import { onSubmit,classticform } from "@/services/admin/classtic"
+const {modal}=indexStore()
+const submit = () => {
+    if (modal.ids) {
+        onSubmit(modal.ids)
+    } else {
+        onSubmit()
+    }
+};
+</script>
+
+<style></style>

src/views/admin/classticmanage/ClassticManageView.vue

@@ -7,39 +7,22 @@
             <a-space style="margin-left: 16px;">
                 <a-button @click="classticSearch">查询</a-button>
                 <a-button type="primary" ghost @click="openModal('add')">新增</a-button>
-                <a-modal v-model:open="formOpen" title="Basic Modal" cancelText="取消" okText="确定" @ok="formModal">
+                <ClassticFormView/>
-                    <a-form :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>
             </a-space>
         </div>
         <div class="table">
-            <a-table bordered :data-source="classticContent.classticlist" :columns="columns">
+            <a-table bordered :data-source="classticlist" :columns="columns">
                 <template #bodyCell="{ column, record }">
                     <template v-if="column.dataIndex === 'operation'">
                         <a-space>
                             <div>
                                 <a-button size="small" danger @click="delModal">删除</a-button>
-                                <a-modal v-model:open="delOpen" title="提示" ok-text="确认" cancel-text="取消"
+                                <a-modal v-model:open="modal.open" title="提示" ok-text="确认" cancel-text="取消"
                                     @ok="del(record.id)">
                                     <p>确认删除吗？</p>
                                 </a-modal>
                             </div>
-                            <a-button size="small" type="primary" ghost
+                            <a-button size="small" type="primary" ghost @click="openModal('edit', record.id)">编辑</a-button>
-                                @click="openModal('edit', record.id)">编辑</a-button>
-                            <a-button size="small" type="primary" ghost>预览</a-button>
                         </a-space>
                     </template>
                 </template>
@@ -49,51 +32,35 @@
 </template>
 
 <script setup lang='ts'>
-import { ref, reactive, onMounted } from 'vue';
+import { ref, onMounted } from 'vue';
-import { classticContentStore,classticFormStore, classticSearchStore, classticDelStore } from "@/stores"
+import {  indexStore } from "@/stores"
-const classticContent = classticContentStore()
+import { classticStore } from "@/stores/index"
-const { classticSearch, searchValue } = classticSearchStore()
+import { classticSearch, classticList, classticlist,classticDel } from "@/services/admin/classtic"
-const { classticDel } = classticDelStore()
+import ClassticFormView from "@/views/admin/classticmanage/ClassticFormView.vue"
-const {classticform,onSubmit}=classticFormStore()
+const { searchValue } = classticStore()
-
+const { modal } = indexStore()
-const formOpen = ref<boolean>(false);
+const openModal = (mode: string, id?: any) => {
-const formList = reactive({
+    modal.mode = mode;
-    mode: ""
+    modal.open = true;
-})
+    modal.ids = id;
-
+    if (id) {
-const idRef = ref<any>();
+        modal.title="编辑"
-
-const openModal = (mode: string, itemid?: any) => {
-    formList.mode = mode
-    formOpen.value = true;
-    idRef.value = itemid;
-};
-
-const formModal = () => {
-    if (idRef.value) {
-        onSubmit(idRef.value)
-        formOpen.value = false;
     }else{
-        onSubmit()
+        modal.title="新增"
-        formOpen.value = false;
     }
 };
-
-// 语录删除
 const del = (id: any) => {
     classticDel(id)
-    delOpen.value = false;
+    modal.open = false;
 }
-const delOpen = ref<boolean>(false);
+
 const delModal = () => {
-    delOpen.value = true;
+    modal.open = true;
 };
 
-
-
 // 获取列表
 onMounted(async () => {
-    classticContent.classticList()
+    classticList()
 });
 const columns = [
     {