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();
};