diff --git a/src/api/admin.ts b/src/api/admin.ts index 40ee926..172385e 100644 --- a/src/api/admin.ts +++ b/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 -} \ No newline at end of file +} + +export interface typeInterface { + key: string, + id?: number, + typename: string, + descr: string +} diff --git a/src/views/admin/blogmange/BlogFormView.vue b/src/views/admin/blogmange/BlogFormView.vue index 08a2e17..7093b74 100644 --- a/src/views/admin/blogmange/BlogFormView.vue +++ b/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(); };