add new

src/api/admin.ts

@@ -1,22 +1,28 @@
 // 博客管理
 export interface blogInterface {
-    key: string,
-    blogtitle: string,
-    create_at: Date,
-    readnum: number,
-    readminite: number,
-    wordcount: number,
-    img: string,
-    blogcontent: string,
-    typename: string,
-    labelnames: string
-  }
+  key: string,
+  blogtitle: string,
+  create_at: Date,
+  readnum: number,
+  readminite: number,
+  wordcount: number,
+  img: string,
+  blogcontent: string,
+  typename: string,
+  labelnames: string
+}
 
 // 语录管理
-export  interface classticInterface {
-    key:string,
-    id?:number,
-    header: string,
-    text: string,
-    descr: string
-  }
+export interface classticInterface {
+  key: string,
+  id?: number,
+  header: string,
+  text: string,
+  descr: string
+}
+
+export interface classticFormInterface {
+  header: string,
+  text: string,
+  descr: string
+}

src/stores/index.ts

@@ -1,20 +1,15 @@
 import { reactive, ref } from 'vue'
 import { defineStore } from 'pinia'
-import { get, post, put } from "@/tools/request"
+import { get, post, put, remove } from "@/tools/request"
 import dayjs from 'dayjs';
 import { useRouter } from "vue-router"
-import type { blogInterface, classticInterface } from '@/api/admin';
+import type { blogInterface, classticInterface, classticFormInterface } from '@/api/admin';
 const router = useRouter()
 // 博客列表
 const bloglist = ref<blogInterface[]>([])
 // 语录列表
 const classticlist = ref<classticInterface[]>([])
 // 语录新增
-const classticadd=reactive({
-  header:"",
-  text:"",
-  descr:""
-})
 
 export const useAuthStore = defineStore("auth", () => {
   const tokenValue = ref("")
@@ -80,19 +75,39 @@ export const classticSearchStore = defineStore("chassticsearch", () => {
   return { classticSearch, searchValue }
 })
 // 语录新增/编辑接口
-export const classticAddStore=defineStore("classticadd",()=>{
-  const onSubmit=async ()=>{
-    await post("/classtics/add",
-      {
-        header:classticadd.header,
-        text:classticadd.text,
-        descr:classticadd.descr
-      }
-    )
+export const classticFormStore = defineStore("classform", () => {
+  const classticform = reactive<classticFormInterface>({
+    header: "",
+    text: "",
+    descr: ""
+  })
+  const onSubmit = async (id?: any) => {
+    if (id) {
+      await put(`/classtics/update/${id}`,classticform)
+    }else{
+      await post("/classtics/add",classticform)
+    }
   }
-  return {onSubmit,classticadd}
+  return {classticform,onSubmit}
 })
 
+// 语录删除
+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/ClassticManageView.vue

@@ -2,25 +2,24 @@
     <div class="content">
         <div class="search">
             <a-space>
-                <a-input v-model:value="classticSearch.searchValue.title" placeholder="语录标题" />
+                <a-input v-model:value="searchValue.title" placeholder="语录标题" />
             </a-space>
             <a-space style="margin-left: 16px;">
-                <a-button @click="classticSearch.classticSearch">查询</a-button>
-                <a-button type="primary" ghost @click="modal('add')">新增</a-button>
-                <a-modal v-model:open="addModal.addOpen" ok-text="确认" cancel-text="取消" :title="addModal.addTitle"
-                    @ok="classticAdd.onSubmit">
-                    <a-form :model="classticAdd.classticadd" name="basic">
-                        <a-form-item label="语录标题" name="classticname" :rules="[{ required: true, message: '请输入语录标题' }]"
-                            v-bind="formItemLayout">
-                            <a-input v-model:value="classticAdd.classticadd.header" />
+                <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">
+                    <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="classticcontent"
-                            :rules="[{ required: true, message: '请输入语录内容' }]" v-bind="formItemLayout">
-                            <a-input v-model:value="classticAdd.classticadd.text" />
+                        <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="classticdescr" :rules="[{ message: '请输入备注' }]"
-                            v-bind="formItemLayout">
-                            <a-textarea v-model:value="classticAdd.classticadd.descr" />
+                        <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>
@@ -32,13 +31,14 @@
                     <template v-if="column.dataIndex === 'operation'">
                         <a-space>
                             <div>
-                                <a-button size="small" danger @click="showModal(record.key, record.id)">删除</a-button>
-                                <a-modal v-model:open="deleteOpen" title="提示" ok-text="确认" cancel-text="取消"
-                                    @cancel="unDelete">
+                                <a-button size="small" danger @click="delModal">删除</a-button>
+                                <a-modal v-model:open="delOpen" title="提示" ok-text="确认" cancel-text="取消"
+                                    @ok="del(record.id)">
                                     <p>确认删除吗？</p>
                                 </a-modal>
                             </div>
-                            <a-button size="small" type="primary" ghost @click="modal('edit')">编辑</a-button>
+                            <a-button size="small" type="primary" ghost
+                                @click="openModal('edit', record.id)">编辑</a-button>
                             <a-button size="small" type="primary" ghost>预览</a-button>
                         </a-space>
                     </template>
@@ -50,55 +50,45 @@
 
 <script setup lang='ts'>
 import { ref, reactive, onMounted } from 'vue';
-import { useRouter } from "vue-router"
-const router = useRouter()
-import { classticAddStore, classticContentStore, classticSearchStore } from "@/stores"
-import { put, post } from "@/tools/request"
+import { classticContentStore,classticFormStore, classticSearchStore, classticDelStore } from "@/stores"
 const classticContent = classticContentStore()
-const classticSearch = classticSearchStore()
-const classticAdd=classticAddStore()
-const formItemLayout = {
-    labelCol: { span: 4, offset: 2 },
-    wrapperCol: { span: 16 },
-};
-const addModal = reactive({
-    addOpen: false,
-    addTitle: "",
-    modalMode: ""
-})
-const modal = (mode: string) => {
-    addModal.modalMode = mode
-    if (mode === 'add') {
-        addModal.addTitle = '新增';
-    } else if (mode === 'edit') {
-        addModal.addTitle = '编辑';
-    }
-    addModal.addOpen = true;
-}
+const { classticSearch, searchValue } = classticSearchStore()
+const { classticDel } = classticDelStore()
+const {classticform,onSubmit}=classticFormStore()
 
+const formOpen = ref<boolean>(false);
+const formList = reactive({
+    mode: ""
+})
 
+const id = ref<any>();
 
+const openModal = (mode: string, id?: any) => {
+    formList.mode = mode
+    formOpen.value = true;
+    id.value = id;
+};
 
-const deleteOpen = ref<boolean>(false);
-const toDelete = reactive<{ key: string, id: number }>({
-    key: '',
-    id: 0
-});
-const showModal = (key: string, id: number) => {
-    deleteOpen.value = true;
-    // 将需要删除的数据项的 key 和 id 存储到 ref 中，以便确认后使用
-    toDelete.key = key;
-    toDelete.id = id;
+const formModal = () => {
+    if (id.value) {
+        onSubmit(id.value)
+    } else {
+        onSubmit()
+    }
 };
 
-const addOpen = ref<boolean>(false);
+// 语录删除
+const del = (id: any) => {
+    classticDel(id)
+    delOpen.value = false;
+}
+const delOpen = ref<boolean>(false);
+const delModal = () => {
+    delOpen.value = true;
+};
 
 
 
-// 新增单独跳转到一个页面
-const blogAdd = function () {
-    router.push('/admin/blogmanage/add')
-}
 // 获取列表
 onMounted(async () => {
     classticContent.classticList()