panda
9 months ago
9 changed files with 363 additions and 185 deletions
-
12src/api/admin/index.ts
-
31src/components/admin/MainWrapper.vue
-
97src/components/blogs/HomePage.vue
-
7src/router/admin.ts
-
71src/services/admin/classtic.ts
-
56src/stores/index.ts
-
14src/views/admin/ClassticManageView.vue
-
236src/views/admin/CommonLinkManageView.vue
-
24src/views/admin/classticmanage/ClassticFormView.vue
@ -1,71 +0,0 @@ |
|||
import { get, remove, put, post } from "@/tools/request" |
|||
import { reactive, ref } from "vue"; |
|||
import type { classticInterface, classticFormInterface } from "@/api/admin/classtic" |
|||
import { classticStore } from "@/stores"; |
|||
const { searchValue, classticForm } = classticStore() |
|||
|
|||
const classticlist = ref<classticInterface[]>([]) |
|||
const classticOneData = ref({ |
|||
header: "", |
|||
text: "", |
|||
descr: "" |
|||
}) |
|||
|
|||
const classticSearch = async () => { |
|||
try { |
|||
const response = await get( |
|||
"/classtics/list/search", |
|||
{ header: searchValue.title } |
|||
) |
|||
if (response) { |
|||
classticlist.value = response.data.data.map((items: any, index: any) => ({ |
|||
key: (index + 1).toString(), |
|||
id: items.id, |
|||
header: items.header, |
|||
text: items.text, |
|||
descr: items.descr |
|||
})) |
|||
} else { |
|||
console.log("classtic request is nulll") |
|||
} |
|||
} catch (error) { |
|||
console.log("classtic request is error") |
|||
} |
|||
} |
|||
const onSubmit = async (id?: any) => { |
|||
if (id) { |
|||
await put(`/classtics/update/${id}`, classticForm) |
|||
await classticList() |
|||
} else { |
|||
await post("/classtics/add", classticForm) |
|||
await classticList() |
|||
} |
|||
} |
|||
const classticDel = async (id: any) => { |
|||
try { |
|||
if (id) { |
|||
await remove(`/classtics/delete/${id}`) |
|||
await classticList() |
|||
} else { |
|||
console.log("id is null") |
|||
} |
|||
} catch (error) { |
|||
console.log("request is error") |
|||
} |
|||
|
|||
} |
|||
const classticOne = async (id: any) => { |
|||
try { |
|||
const response=await get(`classtics/list/search/${id}`) |
|||
if (response) { |
|||
classticOneData.value=response.data.data; |
|||
} else { |
|||
console.log("classtic one data is null") |
|||
} |
|||
} catch (error) { |
|||
console.log("classtic one data is error") |
|||
} |
|||
} |
|||
|
|||
|
|||
export { classticlist, classticForm, classticOneData, classticList, classticSearch, classticDel, onSubmit, classticOne } |
|||
@ -0,0 +1,236 @@ |
|||
<template> |
|||
<div class="content"> |
|||
<div class="search"> |
|||
<a-space> |
|||
<a-input v-model:value="searchlist.linktext" 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="linktext" :rules="[{ required: true, message: '请输入链接名称!' }]"> |
|||
<a-input v-model:value="addList.linktext" /> |
|||
</a-form-item> |
|||
<a-form-item label="链接地址" name="linkurl" :rules="[{ required: true, message: '请输入链接地址!' }]"> |
|||
<a-input v-model:value="addList.linkurl" /> |
|||
</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="comlinklist" :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="linktext" |
|||
:rules="[{ required: true, message: '请修改链接名称!' }]"> |
|||
<a-input v-model:value="editList.linktext" /> |
|||
</a-form-item> |
|||
<a-form-item label="链接地址" name="linkurl" |
|||
:rules="[{ required: true, message: '请修改链接地址!' }]"> |
|||
<a-input v-model:value="editList.linkurl" /> |
|||
</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 { comLinkStore } from "@/stores/index" |
|||
import type { comLinkInterface } from "@/api/admin/classtic" |
|||
import { get, post, remove, put } from '@/tools/request'; |
|||
const { delControl, addControl, editControl } = comLinkStore() |
|||
const comlinklist = ref<comLinkInterface[]>([]) |
|||
const searchlist = reactive({ |
|||
linktext: "" |
|||
}) |
|||
const addList = ref({ |
|||
linktext: "", |
|||
linkurl: "", |
|||
descr: "" |
|||
}) |
|||
|
|||
const editList = ref({ |
|||
linktext: "", |
|||
linkurl: "", |
|||
descr: "" |
|||
}) |
|||
const comLinkList = async () => { |
|||
try { |
|||
await get("/comlinks/list").then(response => { |
|||
if (response) { |
|||
comlinklist.value = response.data.data.map((item: any, index: any) => ({ |
|||
key: (index + 1).toString(), |
|||
id: item.id, |
|||
linktext: item.linktext, |
|||
linkurl: item.linkurl, |
|||
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( |
|||
"/comlinks/list/search", |
|||
{ linktext: searchlist.linktext } |
|||
).then(response => { |
|||
if (response) { |
|||
comlinklist.value = response.data.data.map((items: any, index: any) => ({ |
|||
key: (index + 1).toString(), |
|||
id: items.id, |
|||
linktext: items.linktext, |
|||
linkurl: items.linkurl, |
|||
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( |
|||
"/comlinks/add", |
|||
addList.value |
|||
) |
|||
comLinkList() |
|||
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( |
|||
`/comlinks/delete/${id}` |
|||
) |
|||
comLinkList() |
|||
} 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( |
|||
`/comlinks/list/search/${id}` |
|||
).then(response => { |
|||
editList.value = response.data.data |
|||
}) |
|||
} |
|||
const edit = async (id: any) => { |
|||
id = editControl.ids |
|||
try { |
|||
if (id) { |
|||
await put( |
|||
`/comlinks/update/${id}`, |
|||
editList.value |
|||
) |
|||
editControl.open = false |
|||
formRef.value.resetFields() |
|||
comLinkList() |
|||
} else { |
|||
console.log("id do not exist!") |
|||
} |
|||
} catch (error) { |
|||
console.log("interface request exception") |
|||
} |
|||
} |
|||
// 获取列表 |
|||
onMounted(async () => { |
|||
comLinkList() |
|||
}); |
|||
const columns = [ |
|||
{ |
|||
title: '序号', |
|||
dataIndex: 'key', |
|||
width: '5%', |
|||
}, |
|||
{ |
|||
title: '链接名称', |
|||
dataIndex: 'linktext', |
|||
width: '20%', |
|||
}, |
|||
{ |
|||
title: '连接地址', |
|||
dataIndex: 'linkurl', |
|||
}, |
|||
{ |
|||
title: '备注', |
|||
dataIndex: 'descr', |
|||
}, |
|||
{ |
|||
title: '操作', |
|||
dataIndex: 'operation', |
|||
}, |
|||
]; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.content { |
|||
padding: 24px 24px 0 24px; |
|||
} |
|||
|
|||
.search { |
|||
margin: 0 0 24px 0; |
|||
} |
|||
</style> |
|||
@ -1,24 +0,0 @@ |
|||
<template> |
|||
|
|||
</template> |
|||
|
|||
<script setup lang='ts'> |
|||
import { ref } from "vue"; |
|||
import { classticStore } from "@/stores/index" |
|||
import { onSubmit } from "@/services/admin/classtic" |
|||
const { modalForm, classticForm } = classticStore() |
|||
const formRef = ref(); |
|||
const submit = () => { |
|||
if (modalForm.ids) { |
|||
onSubmit(modalForm.ids) |
|||
} else { |
|||
onSubmit() |
|||
} |
|||
formRef.value.resetFields(); |
|||
modalForm.open = false |
|||
|
|||
|
|||
}; |
|||
</script> |
|||
|
|||
<style></style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue