panda
8 months ago
5 changed files with 211 additions and 230 deletions
-
1src/api/admin/index.ts
-
3src/stores/index.ts
-
75src/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