add new

src/stores/index.ts

@@ -2,20 +2,10 @@ import { reactive, ref } from 'vue'
 import { defineStore } from 'pinia'
 import { get } from "@/tools/request"
 import dayjs from 'dayjs';
-import type { blogInterface, classticFormInterface } from '@/api/admin';
-import type { classticSearchInterface } from '@/api/admin/classtic';
+import type { blogInterface } from '@/api/admin';
 
 export const classticStore = defineStore("classtic", () => {
-  const searchList = reactive<classticSearchInterface>({
-    title: ""
-  })
-
-  const formList = reactive<classticFormInterface>({
-    header: "",
-    text: "",
-    descr: ""
-  })
-  const formControl = reactive({
+  const addControl = reactive({
     open: false,
     title: "",
     mode: "",
@@ -23,9 +13,16 @@ export const classticStore = defineStore("classtic", () => {
   })
 
   const delControl = reactive({
-    open: false
+    open: false,
+    ids: ""
+  })
+
+  const editControl = reactive({
+    open: false,
+    ids: "",
+    title:""
   })
-  return { formControl, delControl }
+  return { addControl, delControl,editControl }
 })
 
 

src/views/admin/classticmanage/ClassticManageView.vue

@@ -6,22 +6,18 @@
             </a-space>
             <a-space style="margin-left: 16px;">
                 <a-button @click="search">查询</a-button>
-                <a-button type="primary" ghost @click="formModal('add')">新增</a-button>
-                <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 }"
+                <a-button type="primary" ghost @click="addModal">新增</a-button>
+                <a-modal v-model:open="addControl.open" :title="addControl.title" cancelText="取消" okText="确定" @ok="add">
+                    <a-form ref="formRef" :model="addList" 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 label="语录标题" name="header" :rules="[{ required: true, message: '请输入语录标题!' }]">
+                            <a-input v-model:value="addList.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 label="语录内容" name="text" :rules="[{ required: true, message: '请输入语录内容!' }]">
+                            <a-input v-model:value="addList.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 label="备注" name="descr" :rules="[{ required: true, message: '请输入备注!' }]">
+                            <a-input v-model:value="addList.descr" />
                         </a-form-item>
                     </a-form>
                 </a-modal>
@@ -39,8 +35,25 @@
                                     <p>确认删除吗？</p>
                                 </a-modal>
                             </div>
-                            <a-button size="small" type="primary" ghost
-                                @click="formModal('edit', record.id)">编辑</a-button>
+                            <a-button size="small" type="primary" ghost @click="editModal(record.id)">编辑</a-button>
+                            <a-modal v-model:open="editControl.open" :title="editControl.title" cancelText="取消"
+                                okText="确定" @ok="edit">
+                                <a-form ref="formRef" :model="editList" name="basic" :label-col="{ span: 4, offset: 2 }"
+                                    :wrapper-col="{ span: 16 }">
+                                    <a-form-item label="语录标题" name="header"
+                                        :rules="[{ required: true, message: '请修改语录标题!' }]">
+                                        <a-input v-model:value="editList.header" />
+                                    </a-form-item>
+                                    <a-form-item label="语录内容" name="text"
+                                        :rules="[{ required: true, message: '请修改语录内容!' }]">
+                                        <a-input v-model:value="editList.text" />
+                                    </a-form-item>
+                                    <a-form-item label="备注" name="descr"
+                                        :rules="[{ required: true, message: '请修改备注!' }]">
+                                        <a-input v-model:value="editList.descr" />
+                                    </a-form-item>
+                                </a-form>
+                            </a-modal>
                         </a-space>
                     </template>
                 </template>
@@ -50,21 +63,46 @@
 </template>
 
 <script setup lang='ts'>
-import { onMounted, reactive } from 'vue';
+import { onMounted, reactive, ref } from 'vue';
 import { classticStore } from "@/stores/index"
-import { classticSearch, classticList, classticlist, classticDel } from "@/services/admin/classtic"
-import ClassticFormView from "@/views/admin/classticmanage/ClassticFormView.vue"
-import { get } from '@/tools/request';
+import { classticForm, classticList, classticlist } from "@/services/admin/classtic"
+import { get, post, remove, put } from '@/tools/request';
 
-const { delControl, formControl } = classticStore()
+const { delControl, addControl, editControl } = classticStore()
 const searchlist = reactive({
     title: ""
 })
-const formList = reactive({
+const addList = ref({
     header: "",
     text: "",
     descr: ""
 })
+
+const editList = ref({
+    header: "",
+    text: "",
+    descr: ""
+})
+const classticList = async () => {
+    try {
+        await get("/classtics/list").then(response => {
+            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.log("the interface request data does not exist!")
+            }
+        })
+    } catch (error) {
+        console.error("Failed to fetch data", error);
+    }
+}
+
 const search = async () => {
     try {
         await get(
@@ -88,58 +126,75 @@ const search = async () => {
     }
 }
 
-const formModal = (mode: string, id?: any) => {
-    formControl.ids = id;
-    formControl.mode = mode;
-    formControl.open = true;
-    if (id) {
-        formControl.title = "编辑"
-    } else {
-        formControl.title = "新增"
-    }
-
-
-    get(`classtics/list/search/${id}`).then(val => {
-        console.log("val", val)
-        classticForm.header = "123"
-        classticForm.text = "123"
-        classticForm.descr = "123123"
-    })
-
-
+const addModal = () => {
+    addControl.title = "新增"
+    addControl.open = true;
 };
-
-// 删除
-const del = () => {
-    if (formControl.ids) {
-        classticDel(formControl.ids)
+const formRef = ref();
+const add = async () => {
+    try {
+        await post(
+            "/classtics/add",
+            addList.value
+        )
+        classticList()
+        addControl.open = false
+        formRef.value.resetFields();
+    } catch (error) {
+        console.log("interface request exception")
     }
-    delControl.open = false
 }
 const delModal = (id: any) => {
-    formControl.ids = id
+    delControl.ids = id
     delControl.open = true
 };
-
-const classticList = async () => {
+// 删除
+const del = async (id: any) => {
+    id = delControl.ids
     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
-            }));
+        if (id) {
+            await remove(
+                `/classtics/delete/${id}`
+            )
+            classticList()
         } else {
-            console.error("Response data structure is not as expected");
+            console.log("id do not exist!")
         }
     } catch (error) {
-        console.error("Failed to fetch data", error);
+        console.log("interface request exception")
     }
+
+    delControl.open = false
 }
 
+const editModal = (id: any) => {
+    editControl.ids = id
+    editControl.title="编辑"
+    editControl.open = true
+    get(
+        `/classtics/list/search/${id}`
+    ).then(response=>{
+        editList.value=response.data.data
+    })
+}
+const edit = async (id: any) => {
+    id = editControl.ids
+    try {
+        if (id) {
+            await put(
+                `/classtics/update/${id}`,
+                editList.value
+            )
+            editControl.open=false
+            formRef.value.resetFields()
+            classticList()
+        }else{
+            console.log("id do not exist!")
+        }
+    } catch (error) {
+        console.log("interface request exception")
+    }
+}
 // 获取列表
 onMounted(async () => {
     classticList()