panda
8 months ago
5 changed files with 211 additions and 230 deletions
-
1src/api/admin/index.ts
-
3src/stores/index.ts
-
39src/views/admin/ClassticManageView.vue
-
174src/views/admin/blogmange/BlogFormView.vue
-
188src/views/admin/blogmange/BlogManageView.vue
@ -1,174 +0,0 @@ |
|||
<template> |
|||
<div id="content"> |
|||
<a-form ref="formRef" :model="formState" :rules="rules"> |
|||
<a-flex gap="large" justify="space-between"> |
|||
<a-form-item label="博客标题" name="blogtitle"> |
|||
<a-input v-model:value="formState.blogtitle" placeholder="请输入博客标题" class="items" /> |
|||
</a-form-item> |
|||
<a-form-item label="博客类型" name="typeid"> |
|||
<a-select v-model:value="formState.typeid" placeholder="请选择博客类型" class="items"> |
|||
<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="label.id" v-for="label in labellist">{{ label.labelname |
|||
}}</a-select-option> |
|||
</a-select> |
|||
</a-form-item> |
|||
<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="formState.blogcontent" height="400px"></v-md-editor> |
|||
<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 style="margin-left: 24px" type="primary" @click="onSubmit">提交</a-button> |
|||
</a-form-item> |
|||
</a-form> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { ref, onMounted, reactive } from 'vue'; |
|||
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: null; |
|||
blogcontent: string; |
|||
labelname: string[]; |
|||
descr: string; |
|||
imglink: string |
|||
} |
|||
const formRef = ref(); |
|||
|
|||
const formState: UnwrapRef<FormState> = reactive({ |
|||
blogtitle: '', |
|||
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' }, |
|||
{ min: 4, max: 20, message: '博客标题允许4-20个字符', trigger: 'blur' }, |
|||
], |
|||
descr: [ |
|||
{ required: false }, |
|||
{ max: 255, message: '博客备注不得超过255个字符', trigger: 'change' }, |
|||
], |
|||
}; |
|||
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 = { |
|||
blog: { |
|||
blogtitle: formState.blogtitle, |
|||
typeid: formState.typeid, |
|||
imglink:formState.imglink, |
|||
blogcontent: formState.blogcontent, |
|||
descr: formState.descr |
|||
}, |
|||
labels:labels |
|||
} |
|||
if (formState.id) { |
|||
await put(`/blogs/update/${formState.id}`, formdata); |
|||
} else { |
|||
await post('/blogs/add', formdata); |
|||
} |
|||
}) |
|||
router.push("/admin/blogmanage") |
|||
.catch((error: any) => { |
|||
console.log('error', error); |
|||
}); |
|||
}; |
|||
onMounted(async () => { |
|||
labelList() |
|||
typeList() |
|||
}); |
|||
|
|||
const resetForm = () => { |
|||
formRef.value.resetFields(); |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.editor-container { |
|||
width: 100%; |
|||
} |
|||
|
|||
.vditor { |
|||
width: 100%; |
|||
border: 1px solid #ccc; |
|||
} |
|||
|
|||
.items { |
|||
width: calc(75vw/4); |
|||
} |
|||
|
|||
#content { |
|||
padding: 24px 24px 0 24px; |
|||
} |
|||
|
|||
.desrpad { |
|||
padding: 24px 0 0 0; |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue