add new

src/api/admin.ts

@@ -20,9 +20,22 @@ export interface classticInterface {
   text: string,
   descr: string
 }
+export interface labelInterface {
+  id?:number,
+  labelname: string,
+  descr: string
+}
+
 
 export interface classticFormInterface {
   header: string,
   text: string,
   descr: string
-}
+}
+
+export interface typeInterface {
+  key: string,
+  id?: number,
+  typename: string,
+  descr: string
+}

src/views/admin/blogmange/BlogFormView.vue

@@ -2,37 +2,35 @@
     <div id="content">
         <a-form ref="formRef" :model="formState" :rules="rules">
             <a-flex gap="large" justify="space-between">
-                <a-form-item ref="blogtitle" label="博客标题" name="blogtitle">
+                <a-form-item label="博客标题" name="blogtitle">
                     <a-input v-model:value="formState.blogtitle" placeholder="请输入博客标题" class="items" />
                 </a-form-item>
-                <a-form-item label="博客类型" name="blogtype">
+                <a-form-item label="博客类型" name="typeid">
                     <a-select v-model:value="formState.typeid" placeholder="请选择博客类型" class="items">
-                        <a-select-option v-for="typeItem in typedata" :key="typeItem.key" :value="typeItem.id">{{
+                        <a-select-option v-for="typeItem in typelist" :key="typeItem.key" :value="typeItem.id">{{
                             typeItem.typename }}</a-select-option>
                     </a-select>
                 </a-form-item>
                 <a-form-item name="labelname" label="标签名称" class="items">
                     <a-select v-model:value="formState['labelname']" mode="multiple" placeholder="请选择标签">
-                        <a-select-option value="red">Red</a-select-option>
-                        <a-select-option value="green">Green</a-select-option>
+                        <a-select-option :value="label.id" v-for="label in labellist">{{ label.labelname
+                            }}</a-select-option>
                     </a-select>
                 </a-form-item>
-                <a-form-item label="文图地址" name="textimg" class="items">
-                    <a-input v-model:value="formState.imglink" placeholder="请输入文图地址"/>
+                <a-form-item label="文图地址" name="imglink" class="items">
+                    <a-input v-model:value="formState.imglink" placeholder="请输入文图地址" />
                 </a-form-item>
             </a-flex>
-            <v-md-editor v-model="content" height="900px"></v-md-editor>
+            <a-form-item name="blogcontent">
+                <v-md-editor v-model:value="formState.blogcontent" height="900px"></v-md-editor>
+            </a-form-item>
             <a-form-item label="博客备注" name="descr" class="desrpad">
                 <a-textarea v-model:value="formState.descr" />
             </a-form-item>
             <a-form-item :wrapper-col="{ span: 2, offset: 22 }">
-                <a-button @click="resetForm">取消</a-button>
+                <a-button @click="resetForm">重置</a-button>
                 <a-button style="margin-left: 24px" type="primary" @click="onSubmit">提交</a-button>
             </a-form-item>
-            <div>
-                <div class="blog-content" v-html="formState.blogcontent"></div>
-                <!-- 其他表单元素 -->
-            </div>
         </a-form>
     </div>
 </template>
@@ -43,12 +41,13 @@ import type { UnwrapRef } from 'vue';
 import type { Rule } from 'ant-design-vue/es/form';
 import { post, get, put } from '@/tools/request';
 import { useRouter } from 'vue-router'
+import type { labelInterface, typeInterface } from '@/api/admin';
 
 const router = useRouter()
 interface FormState {
     id?: number;
     blogtitle: string;
-    typeid: number;
+    typeid: null;
     blogcontent: string;
     labelname: string[];
     descr: string;
@@ -58,12 +57,52 @@ const formRef = ref();
 
 const formState: UnwrapRef<FormState> = reactive({
     blogtitle: '',
-    typeid: 1,
+    typeid: null,
     blogcontent: "",
     labelname: [],
     descr: '',
     imglink: ""
 });
+
+const labellist = ref<labelInterface[]>([])
+const labelList = async () => {
+    try {
+        await get(
+            "labels/list"
+        ).then(response => {
+            if (response) {
+                labellist.value = response.data.data.map((items: any) => ({
+                    id: items.id,
+                    labelname: items.labelname,
+                    descr: items.descr
+
+                }))
+            } else {
+                console.log("the interface request data does not exist!")
+            }
+
+        })
+    } catch (error) {
+        console.error("Failed to fetch data", error);
+    }
+}
+const typelist = ref<typeInterface[]>([])
+const typeList = async () => {
+    try {
+        await get("/types/list").then(response => {
+            if (response) {
+                typelist.value = response.data.data.map((items: any) => ({
+                    ...items
+                }))
+            } else {
+                console.log("the interface request data does not exist!")
+            }
+
+        })
+    } catch (error) {
+        console.error("Failed to fetch data", error);
+    }
+}
 const rules: Record<string, Rule[]> = {
     blogtitle: [
         { required: true, message: '请输入博客标题', trigger: 'change' },
@@ -74,31 +113,26 @@ const rules: Record<string, Rule[]> = {
         { max: 255, message: '博客备注不得超过255个字符', trigger: 'change' },
     ],
 };
-const content = ref();
-interface TypeStateData {
-    id: number,
-    key: string,
-    typename: string,
-    descr: string
-}
-const typedata = ref<TypeStateData[]>([])
-onMounted(async () => {
-    get("/types/list").then(response => {
-        typedata.value = response.data.data.map((items: any) => ({
-            ...items
-        }))
-    })
-});
+
 const onSubmit = () => {
     formRef.value
         .validate()
         .then(async () => {
+            const labels = formState.labelname.map(labelId => {
+                const label = labellist.value.find((label: any) => label.id === labelId);
+                return label ? { "id": label.id, "labelname": label.labelname, "descr": label.descr } : null;
+            });
             const formdata = {
-                blogtitle: formState.blogtitle,
-                typeid: formState.typeid,
-                blogcontent: content.value,
-                descr: formState.descr
+                blog: {
+                    blogtitle: formState.blogtitle,
+                    typeid: formState.typeid,
+                    imglink:formState.imglink,
+                    blogcontent: formState.blogcontent,
+                    descr: formState.descr
+                },
+                labels:labels
             }
+            console.log('formdata:', formdata); 
             if (formState.id) {
                 await put(`/blogs/update/${formState.id}`, formdata);
             } else {
@@ -110,6 +144,11 @@ const onSubmit = () => {
             console.log('error', error);
         });
 };
+onMounted(async () => {
+    labelList()
+    typeList()
+});
+
 const resetForm = () => {
     formRef.value.resetFields();
 };