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