panda
9 months ago
10 changed files with 817 additions and 216 deletions
-
28src/api/admin/index.ts
-
13src/components/admin/MainWrapper.vue
-
37src/components/blogs/HomePage.vue
-
139src/components/blogs/ceshi.vue
-
66src/router/admin.ts
-
131src/stores/index.ts
-
221src/views/admin/LabelManageView.vue
-
221src/views/admin/TypeManageView.vue
-
26src/views/admin/blogmange/BlogFormView.vue
-
151src/views/admin/blogmange/BlogManageView.vue
@ -1,58 +1,95 @@ |
|||||
<template> |
<template> |
||||
<a-form |
|
||||
:model="formState" |
|
||||
name="basic" |
|
||||
:label-col="{ span: 8 }" |
|
||||
:wrapper-col="{ span: 16 }" |
|
||||
autocomplete="off" |
|
||||
@finish="onFinish" |
|
||||
@finishFailed="onFinishFailed" |
|
||||
> |
|
||||
<a-form-item |
|
||||
label="Username" |
|
||||
name="username" |
|
||||
:rules="[{ required: true, message: 'Please input your username!' }]" |
|
||||
> |
|
||||
<a-input v-model:value="formState.username" /> |
|
||||
</a-form-item> |
|
||||
|
<a-table :columns="columns" :data-source="data"> |
||||
|
<template #headerCell="{ column }"> |
||||
|
<template v-if="column.key === 'name'"> |
||||
|
<span> |
||||
|
<!-- <smile-outlined /> --> |
||||
|
Name |
||||
|
</span> |
||||
|
</template> |
||||
|
</template> |
||||
|
|
||||
<a-form-item |
|
||||
label="Password" |
|
||||
name="password" |
|
||||
:rules="[{ required: true, message: 'Please input your password!' }]" |
|
||||
> |
|
||||
<a-input-password v-model:value="formState.password" /> |
|
||||
</a-form-item> |
|
||||
|
|
||||
<a-form-item name="remember" :wrapper-col="{ offset: 8, span: 16 }"> |
|
||||
<a-checkbox v-model:checked="formState.remember">Remember me</a-checkbox> |
|
||||
</a-form-item> |
|
||||
|
|
||||
<a-form-item :wrapper-col="{ offset: 8, span: 16 }"> |
|
||||
<a-button type="primary" html-type="submit">Submit</a-button> |
|
||||
</a-form-item> |
|
||||
</a-form> |
|
||||
|
<template #bodyCell="{ column, record }"> |
||||
|
<template v-if="column.key === 'name'"> |
||||
|
{{ record.name }} |
||||
|
</template> |
||||
|
<template v-else-if="column.key === 'tags'"> |
||||
|
<span> |
||||
|
<a-tag |
||||
|
v-for="tag in record.tags" |
||||
|
:key="tag" |
||||
|
:color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'" |
||||
|
> |
||||
|
{{ tag.toUpperCase() }} |
||||
|
</a-tag> |
||||
|
</span> |
||||
|
</template> |
||||
|
<template v-else-if="column.key === 'action'"> |
||||
|
<span> |
||||
|
<a>Invite 一 {{ record.name }}</a> |
||||
|
<a-divider type="vertical" /> |
||||
|
<a>Delete</a> |
||||
|
<a-divider type="vertical" /> |
||||
|
<a class="ant-dropdown-link"> |
||||
|
More actions |
||||
|
<down-outlined /> |
||||
|
</a> |
||||
|
</span> |
||||
|
</template> |
||||
|
</template> |
||||
|
</a-table> |
||||
</template> |
</template> |
||||
<script lang="ts" setup> |
<script lang="ts" setup> |
||||
import { reactive } from 'vue'; |
|
||||
|
|
||||
interface FormState { |
|
||||
username: string; |
|
||||
password: string; |
|
||||
remember: boolean; |
|
||||
} |
|
||||
|
|
||||
const formState = reactive<FormState>({ |
|
||||
username: '', |
|
||||
password: '', |
|
||||
remember: true, |
|
||||
}); |
|
||||
const onFinish = (values: any) => { |
|
||||
console.log('Success:', values); |
|
||||
}; |
|
||||
|
import { SmileOutlined, DownOutlined } from '@ant-design/icons-vue'; |
||||
|
const columns = [ |
||||
|
{ |
||||
|
name: 'Name', |
||||
|
dataIndex: 'name', |
||||
|
key: 'name', |
||||
|
}, |
||||
|
{ |
||||
|
title: 'Age', |
||||
|
dataIndex: 'age', |
||||
|
key: 'age', |
||||
|
}, |
||||
|
{ |
||||
|
title: 'Address', |
||||
|
dataIndex: 'address', |
||||
|
key: 'address', |
||||
|
}, |
||||
|
{ |
||||
|
title: 'Tags', |
||||
|
key: 'tags', |
||||
|
dataIndex: 'tags', |
||||
|
}, |
||||
|
{ |
||||
|
title: 'Action', |
||||
|
key: 'action', |
||||
|
}, |
||||
|
]; |
||||
|
|
||||
const onFinishFailed = (errorInfo: any) => { |
|
||||
console.log('Failed:', errorInfo); |
|
||||
}; |
|
||||
|
const data = [ |
||||
|
{ |
||||
|
key: '1', |
||||
|
name: 'John Brown', |
||||
|
age: 32, |
||||
|
address: 'New York No. 1 Lake Park', |
||||
|
tags: ['nice', 'developer'], |
||||
|
}, |
||||
|
{ |
||||
|
key: '2', |
||||
|
name: 'Jim Green', |
||||
|
age: 42, |
||||
|
address: 'London No. 1 Lake Park', |
||||
|
tags: ['loser'], |
||||
|
}, |
||||
|
{ |
||||
|
key: '3', |
||||
|
name: 'Joe Black', |
||||
|
age: 32, |
||||
|
address: 'Sidney No. 1 Lake Park', |
||||
|
tags: ['cool', 'teacher'], |
||||
|
}, |
||||
|
]; |
||||
</script> |
</script> |
||||
|
|
||||
@ -0,0 +1,221 @@ |
|||||
|
<template> |
||||
|
<div class="content"> |
||||
|
<div class="search"> |
||||
|
<a-space> |
||||
|
<a-input v-model:value="searchlist.labelname" placeholder="标签名称" /> |
||||
|
</a-space> |
||||
|
<a-space style="margin-left: 16px;"> |
||||
|
<a-button @click="search">查询</a-button> |
||||
|
<a-button type="primary" ghost @click="addModal">新增</a-button> |
||||
|
<a-modal v-model:open="addControl.open" :title="addControl.title" cancelText="取消" okText="确定" @ok="add"> |
||||
|
<a-form ref="formRef" :model="addList" name="basic" :label-col="{ span: 4, offset: 2 }" |
||||
|
:wrapper-col="{ span: 16 }"> |
||||
|
<a-form-item label="标签名称" name="labelname" :rules="[{ required: true, message: '请输入标签名称!' }]"> |
||||
|
<a-input v-model:value="addList.labelname" /> |
||||
|
</a-form-item> |
||||
|
<a-form-item label="备注" name="descr" :rules="[{ required: true, message: '请输入备注!' }]"> |
||||
|
<a-input v-model:value="addList.descr" /> |
||||
|
</a-form-item> |
||||
|
</a-form> |
||||
|
</a-modal> |
||||
|
</a-space> |
||||
|
</div> |
||||
|
<div class="table"> |
||||
|
<a-table bordered :data-source="labellist" :columns="columns"> |
||||
|
<template #bodyCell="{ column, record }"> |
||||
|
<template v-if="column.dataIndex === 'operation'"> |
||||
|
<a-space> |
||||
|
<div> |
||||
|
<a-button size="small" danger @click="delModal(record.id)">删除</a-button> |
||||
|
<a-modal v-model:open="delControl.open" title="提示" ok-text="确认" cancel-text="取消" |
||||
|
@ok="del"> |
||||
|
<p>确认删除吗？</p> |
||||
|
</a-modal> |
||||
|
</div> |
||||
|
<a-button size="small" type="primary" ghost @click="editModal(record.id)">编辑</a-button> |
||||
|
<a-modal v-model:open="editControl.open" :title="editControl.title" cancelText="取消" |
||||
|
okText="确定" @ok="edit"> |
||||
|
<a-form ref="formRef" :model="editList" name="basic" :label-col="{ span: 4, offset: 2 }" |
||||
|
:wrapper-col="{ span: 16 }"> |
||||
|
<a-form-item label="标签名称" name="labelname" |
||||
|
:rules="[{ required: true, message: '请修改标签名称!' }]"> |
||||
|
<a-input v-model:value="editList.labelname" /> |
||||
|
</a-form-item> |
||||
|
<a-form-item label="备注" name="descr" |
||||
|
:rules="[{ required: true, message: '请修改备注!' }]"> |
||||
|
<a-input v-model:value="editList.descr" /> |
||||
|
</a-form-item> |
||||
|
</a-form> |
||||
|
</a-modal> |
||||
|
</a-space> |
||||
|
</template> |
||||
|
</template> |
||||
|
</a-table> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang='ts'> |
||||
|
import { onMounted, reactive, ref } from 'vue'; |
||||
|
import { labelStore } from "@/stores/index" |
||||
|
import type { labelInterface } from "@/api/admin/index" |
||||
|
import { get, post, remove, put } from '@/tools/request'; |
||||
|
const { delControl, addControl, editControl } = labelStore() |
||||
|
const labellist = ref<labelInterface[]>([]) |
||||
|
const searchlist = reactive({ |
||||
|
labelname: "" |
||||
|
}) |
||||
|
const addList = ref({ |
||||
|
labelname: "", |
||||
|
descr: "" |
||||
|
}) |
||||
|
|
||||
|
const editList = ref({ |
||||
|
labelname: "", |
||||
|
descr: "" |
||||
|
}) |
||||
|
const labelList = async () => { |
||||
|
try { |
||||
|
await get("/labels/list").then(response => { |
||||
|
if (response) { |
||||
|
labellist.value = response.data.data.map((item: any, index: any) => ({ |
||||
|
key: (index + 1).toString(), |
||||
|
id: item.id, |
||||
|
labelname: item.labelname, |
||||
|
descr: item.descr |
||||
|
})); |
||||
|
} else { |
||||
|
console.log("the interface request data does not exist!") |
||||
|
} |
||||
|
}) |
||||
|
} catch (error) { |
||||
|
console.error("Failed to fetch data", error); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const search = async () => { |
||||
|
try { |
||||
|
await get( |
||||
|
"/labels/list/search", |
||||
|
{ labelname: searchlist.labelname } |
||||
|
).then(response => { |
||||
|
if (response) { |
||||
|
labellist.value = response.data.data.map((items: any, index: any) => ({ |
||||
|
key: (index + 1).toString(), |
||||
|
id: items.id, |
||||
|
labelname: items.labelname, |
||||
|
descr: items.descr |
||||
|
})) |
||||
|
} else { |
||||
|
console.log("the interface request data does not exist!") |
||||
|
} |
||||
|
}) |
||||
|
} catch (error) { |
||||
|
console.log("interface request exception") |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const addModal = () => { |
||||
|
addControl.title = "新增" |
||||
|
addControl.open = true; |
||||
|
}; |
||||
|
const formRef = ref(); |
||||
|
const add = async () => { |
||||
|
try { |
||||
|
await post( |
||||
|
"/labels/add", |
||||
|
addList.value |
||||
|
) |
||||
|
labelList() |
||||
|
addControl.open = false |
||||
|
formRef.value.resetFields(); |
||||
|
} catch (error) { |
||||
|
console.log("interface request exception") |
||||
|
} |
||||
|
} |
||||
|
const delModal = (id: any) => { |
||||
|
delControl.ids = id |
||||
|
delControl.open = true |
||||
|
}; |
||||
|
// 删除 |
||||
|
const del = async (id: any) => { |
||||
|
id = delControl.ids |
||||
|
try { |
||||
|
if (id) { |
||||
|
await remove( |
||||
|
`/labels/delete/${id}` |
||||
|
) |
||||
|
labelList() |
||||
|
} else { |
||||
|
console.log("id do not exist!") |
||||
|
} |
||||
|
} catch (error) { |
||||
|
console.log("interface request exception") |
||||
|
} |
||||
|
|
||||
|
delControl.open = false |
||||
|
} |
||||
|
|
||||
|
const editModal = (id: any) => { |
||||
|
editControl.ids = id |
||||
|
editControl.title = "编辑" |
||||
|
editControl.open = true |
||||
|
get( |
||||
|
`/labels/list/search/${id}` |
||||
|
).then(response => { |
||||
|
editList.value = response.data.data |
||||
|
}) |
||||
|
} |
||||
|
const edit = async (id: any) => { |
||||
|
id = editControl.ids |
||||
|
try { |
||||
|
if (id) { |
||||
|
await put( |
||||
|
`/labels/update/${id}`, |
||||
|
editList.value |
||||
|
) |
||||
|
editControl.open = false |
||||
|
formRef.value.resetFields() |
||||
|
labelList() |
||||
|
} else { |
||||
|
console.log("id do not exist!") |
||||
|
} |
||||
|
} catch (error) { |
||||
|
console.log("interface request exception") |
||||
|
} |
||||
|
} |
||||
|
// 获取列表 |
||||
|
onMounted(async () => { |
||||
|
labelList() |
||||
|
}); |
||||
|
const columns = [ |
||||
|
{ |
||||
|
title: '序号', |
||||
|
dataIndex: 'key', |
||||
|
width: '5%', |
||||
|
}, |
||||
|
{ |
||||
|
title: '标签名称', |
||||
|
dataIndex: 'labelname', |
||||
|
width: '20%', |
||||
|
}, |
||||
|
{ |
||||
|
title: '备注', |
||||
|
dataIndex: 'descr', |
||||
|
}, |
||||
|
{ |
||||
|
title: '操作', |
||||
|
dataIndex: 'operation', |
||||
|
}, |
||||
|
]; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.content { |
||||
|
padding: 24px 24px 0 24px; |
||||
|
} |
||||
|
|
||||
|
.search { |
||||
|
margin: 0 0 24px 0; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,221 @@ |
|||||
|
<template> |
||||
|
<div class="content"> |
||||
|
<div class="search"> |
||||
|
<a-space> |
||||
|
<a-input v-model:value="searchlist.typename" placeholder="类型名称" /> |
||||
|
</a-space> |
||||
|
<a-space style="margin-left: 16px;"> |
||||
|
<a-button @click="search">查询</a-button> |
||||
|
<a-button type="primary" ghost @click="addModal">新增</a-button> |
||||
|
<a-modal v-model:open="addControl.open" :title="addControl.title" cancelText="取消" okText="确定" @ok="add"> |
||||
|
<a-form ref="formRef" :model="addList" name="basic" :label-col="{ span: 4, offset: 2 }" |
||||
|
:wrapper-col="{ span: 16 }"> |
||||
|
<a-form-item label="类型名称" name="typename" :rules="[{ required: true, message: '请输入类型名称!' }]"> |
||||
|
<a-input v-model:value="addList.typename" /> |
||||
|
</a-form-item> |
||||
|
<a-form-item label="备注" name="descr" :rules="[{ required: true, message: '请输入备注!' }]"> |
||||
|
<a-input v-model:value="addList.descr" /> |
||||
|
</a-form-item> |
||||
|
</a-form> |
||||
|
</a-modal> |
||||
|
</a-space> |
||||
|
</div> |
||||
|
<div class="table"> |
||||
|
<a-table bordered :data-source="typelist" :columns="columns"> |
||||
|
<template #bodyCell="{ column, record }"> |
||||
|
<template v-if="column.dataIndex === 'operation'"> |
||||
|
<a-space> |
||||
|
<div> |
||||
|
<a-button size="small" danger @click="delModal(record.id)">删除</a-button> |
||||
|
<a-modal v-model:open="delControl.open" title="提示" ok-text="确认" cancel-text="取消" |
||||
|
@ok="del"> |
||||
|
<p>确认删除吗？</p> |
||||
|
</a-modal> |
||||
|
</div> |
||||
|
<a-button size="small" type="primary" ghost @click="editModal(record.id)">编辑</a-button> |
||||
|
<a-modal v-model:open="editControl.open" :title="editControl.title" cancelText="取消" |
||||
|
okText="确定" @ok="edit"> |
||||
|
<a-form ref="formRef" :model="editList" name="basic" :label-col="{ span: 4, offset: 2 }" |
||||
|
:wrapper-col="{ span: 16 }"> |
||||
|
<a-form-item label="类型名称" name="typename" |
||||
|
:rules="[{ required: true, message: '请修改类型名称!' }]"> |
||||
|
<a-input v-model:value="editList.typename" /> |
||||
|
</a-form-item> |
||||
|
<a-form-item label="备注" name="descr" |
||||
|
:rules="[{ required: true, message: '请修改备注!' }]"> |
||||
|
<a-input v-model:value="editList.descr" /> |
||||
|
</a-form-item> |
||||
|
</a-form> |
||||
|
</a-modal> |
||||
|
</a-space> |
||||
|
</template> |
||||
|
</template> |
||||
|
</a-table> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang='ts'> |
||||
|
import { onMounted, reactive, ref } from 'vue'; |
||||
|
import { typeStore } from "@/stores/index" |
||||
|
import type { typeInterface } from "@/api/admin/index" |
||||
|
import { get, post, remove, put } from '@/tools/request'; |
||||
|
const { delControl, addControl, editControl } = typeStore() |
||||
|
const typelist = ref<typeInterface[]>([]) |
||||
|
const searchlist = reactive({ |
||||
|
typename: "" |
||||
|
}) |
||||
|
const addList = ref({ |
||||
|
typename: "", |
||||
|
descr: "" |
||||
|
}) |
||||
|
|
||||
|
const editList = ref({ |
||||
|
typename: "", |
||||
|
descr: "" |
||||
|
}) |
||||
|
const typeList = async () => { |
||||
|
try { |
||||
|
await get("/types/list").then(response => { |
||||
|
if (response) { |
||||
|
typelist.value = response.data.data.map((item: any, index: any) => ({ |
||||
|
key: (index + 1).toString(), |
||||
|
id: item.id, |
||||
|
typename: item.typename, |
||||
|
descr: item.descr |
||||
|
})); |
||||
|
} else { |
||||
|
console.log("the interface request data does not exist!") |
||||
|
} |
||||
|
}) |
||||
|
} catch (error) { |
||||
|
console.error("Failed to fetch data", error); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const search = async () => { |
||||
|
try { |
||||
|
await get( |
||||
|
"/types/list/search", |
||||
|
{ typename: searchlist.typename } |
||||
|
).then(response => { |
||||
|
if (response) { |
||||
|
typelist.value = response.data.data.map((items: any, index: any) => ({ |
||||
|
key: (index + 1).toString(), |
||||
|
id: items.id, |
||||
|
typename: items.typename, |
||||
|
descr: items.descr |
||||
|
})) |
||||
|
} else { |
||||
|
console.log("the interface request data does not exist!") |
||||
|
} |
||||
|
}) |
||||
|
} catch (error) { |
||||
|
console.log("interface request exception") |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const addModal = () => { |
||||
|
addControl.title = "新增" |
||||
|
addControl.open = true; |
||||
|
}; |
||||
|
const formRef = ref(); |
||||
|
const add = async () => { |
||||
|
try { |
||||
|
await post( |
||||
|
"/types/add", |
||||
|
addList.value |
||||
|
) |
||||
|
typeList() |
||||
|
addControl.open = false |
||||
|
formRef.value.resetFields(); |
||||
|
} catch (error) { |
||||
|
console.log("interface request exception") |
||||
|
} |
||||
|
} |
||||
|
const delModal = (id: any) => { |
||||
|
delControl.ids = id |
||||
|
delControl.open = true |
||||
|
}; |
||||
|
// 删除 |
||||
|
const del = async (id: any) => { |
||||
|
id = delControl.ids |
||||
|
try { |
||||
|
if (id) { |
||||
|
await remove( |
||||
|
`/types/delete/${id}` |
||||
|
) |
||||
|
typeList() |
||||
|
} else { |
||||
|
console.log("id do not exist!") |
||||
|
} |
||||
|
} catch (error) { |
||||
|
console.log("interface request exception") |
||||
|
} |
||||
|
|
||||
|
delControl.open = false |
||||
|
} |
||||
|
|
||||
|
const editModal = (id: any) => { |
||||
|
editControl.ids = id |
||||
|
editControl.title = "编辑" |
||||
|
editControl.open = true |
||||
|
get( |
||||
|
`/types/list/search/${id}` |
||||
|
).then(response => { |
||||
|
editList.value = response.data.data |
||||
|
}) |
||||
|
} |
||||
|
const edit = async (id: any) => { |
||||
|
id = editControl.ids |
||||
|
try { |
||||
|
if (id) { |
||||
|
await put( |
||||
|
`/types/update/${id}`, |
||||
|
editList.value |
||||
|
) |
||||
|
editControl.open = false |
||||
|
formRef.value.resetFields() |
||||
|
typeList() |
||||
|
} else { |
||||
|
console.log("id do not exist!") |
||||
|
} |
||||
|
} catch (error) { |
||||
|
console.log("interface request exception") |
||||
|
} |
||||
|
} |
||||
|
// 获取列表 |
||||
|
onMounted(async () => { |
||||
|
typeList() |
||||
|
}); |
||||
|
const columns = [ |
||||
|
{ |
||||
|
title: '序号', |
||||
|
dataIndex: 'key', |
||||
|
width: '5%', |
||||
|
}, |
||||
|
{ |
||||
|
title: '类型名称', |
||||
|
dataIndex: 'typename', |
||||
|
width: '20%', |
||||
|
}, |
||||
|
{ |
||||
|
title: '备注', |
||||
|
dataIndex: 'descr', |
||||
|
}, |
||||
|
{ |
||||
|
title: '操作', |
||||
|
dataIndex: 'operation', |
||||
|
}, |
||||
|
]; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.content { |
||||
|
padding: 24px 24px 0 24px; |
||||
|
} |
||||
|
|
||||
|
.search { |
||||
|
margin: 0 0 24px 0; |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue