panda
9 months ago
10 changed files with 817 additions and 216 deletions
-
28src/api/admin/index.ts
-
13src/components/admin/MainWrapper.vue
-
33src/components/blogs/HomePage.vue
-
137src/components/blogs/ceshi.vue
-
48src/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> |
|||
<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!' }]" |
|||
<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'" |
|||
> |
|||
<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> |
|||
{{ 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> |
|||
<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> |
|||
|
|||
@ -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