Browse Source

add new

master
panda 9 months ago
parent
commit
e59aeff82e
  1. 8
      src/components/blogs/HomePage.vue
  2. 48
      src/services/admin/classtic.ts
  3. 25
      src/stores/index.ts
  4. 18
      src/views/admin/classticmanage/ClassticFormView.vue
  5. 121
      src/views/admin/classticmanage/ClassticManageView.vue

8
src/components/blogs/HomePage.vue

@ -44,7 +44,7 @@
<template #expandIcon="{ isActive }">
<caret-right-outlined :rotate="isActive ? 90 : 0" />
</template>
<a-collapse-panel v-for="classtic in classticContent.classticlist" :key=classtic.id :header=classtic.header
<a-collapse-panel v-for="classtic in classticlist" :key=classtic.id :header=classtic.header
:style="customStyle">
<p>{{ classtic.text }}</p>
</a-collapse-panel>
@ -117,11 +117,11 @@ import APlayer from 'APlayer';
import { createEcharts } from "@/hooks/intex"
import { useRouter, useRoute } from 'vue-router';
import iconComponents from "@/assets/index";
import { classticContentStore,comLinkContentStore } from '@/stores';
import { comLinkContentStore } from '@/stores';
import {classticlist,classticList} from "@/services/admin/classtic"
const router = useRouter()
const route = useRoute()
const classticContent=classticContentStore()
const comLinkContent=comLinkContentStore()
/**
@ -400,7 +400,7 @@ const random = ref();
onMounted(() => {
scrollbar.value = document.querySelector('.simplebar-content-wrapper');
classticContent.classticList()
classticList()
comLinkContent.comLinkList()
nextTick(() => {
const authorElement = document.querySelector('.author');

48
src/services/admin/classtic.ts

@ -5,6 +5,11 @@ import { classticStore } from "@/stores";
const { searchValue, classticForm } = classticStore()
const classticlist = ref<classticInterface[]>([])
const classticOneData = ref({
header: "",
text: "",
descr: ""
})
const classticList = async () => {
try {
const response = await get("/classtics/list");
@ -23,25 +28,6 @@ const classticList = async () => {
console.error("Failed to fetch data", error);
}
}
const onSubmit = async (id?: any) => {
if (id) {
await put(`/classtics/update/${id}`, classticForm)
// 更新 classticlist
const updatedIndex = classticlist.value.findIndex(item => item.id === id);
console.log(classticlist.value[0])
if (updatedIndex !== -1) {
classticlist.value[updatedIndex] = {
...classticlist.value[updatedIndex], // 保留原始项的其他属性
header: classticForm.header,
text: classticForm.text,
descr: classticForm.descr,
};
}
} else {
await post("/classtics/add", classticForm)
await classticList()
}
}
const classticSearch = async () => {
try {
const response = await get(
@ -63,7 +49,15 @@ const classticSearch = async () => {
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) {
@ -77,6 +71,18 @@ const classticDel = async (id: any) => {
}
}
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, classticList, classticSearch, classticDel, onSubmit }
export { classticlist, classticForm, classticOneData, classticList, classticSearch, classticDel, onSubmit, classticOne }

25
src/stores/index.ts

@ -5,35 +5,27 @@ import dayjs from 'dayjs';
import type { blogInterface, classticFormInterface } from '@/api/admin';
import type { classticSearchInterface } from '@/api/admin/classtic';
export const indexStore = defineStore("index", () => {
return {}
})
export const classticStore = defineStore("classtic", () => {
const searchValue = reactive<classticSearchInterface>({
const searchList = reactive<classticSearchInterface>({
title: ""
})
const classticForm = reactive<classticFormInterface>({
const formList = reactive<classticFormInterface>({
header: "",
text: "",
descr: ""
})
const modalForm = reactive({
// 控制对话框开关
const formControl = reactive({
open: false,
// 控制对话框title
title: "",
// 控制对话框点击事件标识
mode: "",
// 通过ids控制哪个功能事件
ids: ""
})
const modalDel=reactive({
open:false
const delControl = reactive({
open: false
})
return { searchValue, classticForm,modalForm,modalDel }
return { formControl, delControl }
})
@ -49,8 +41,6 @@ export const classticStore = defineStore("classtic", () => {
// 博客列表
const bloglist = ref<blogInterface[]>([])
// 语录列表
export const useAuthStore = defineStore("auth", () => {
const tokenValue = ref("")
@ -63,7 +53,6 @@ export const useAuthStore = defineStore("auth", () => {
return { setToken, removeToken }
})
// 链接接口
export const comLinkContentStore = defineStore("comlink", () => {
interface comlinkInterface {

18
src/views/admin/classticmanage/ClassticFormView.vue

@ -1,18 +1,5 @@
<template>
<a-modal v-model:open="modalForm.open" :title="modalForm.title" cancelText="取消" okText="确定" @ok="submit">
<a-form ref="formRef" :model="classticForm" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
<a-form-item label="语录标题" name="header"
:rules="[{ required: true, message: 'Please input your username!' }]">
<a-input v-model:value="classticForm.header" />
</a-form-item>
<a-form-item label="语录内容" name="text" :rules="[{ required: true, message: 'Please input your username!' }]">
<a-input v-model:value="classticForm.text" />
</a-form-item>
<a-form-item label="备注" name="descr" :rules="[{ required: true, message: 'Please input your username!' }]">
<a-input v-model:value="classticForm.descr" />
</a-form-item>
</a-form>
</a-modal>
</template>
<script setup lang='ts'>
@ -27,8 +14,9 @@ const submit = () => {
} else {
onSubmit()
}
modalForm.open = false
formRef.value.resetFields();
modalForm.open = false
};
</script>

121
src/views/admin/classticmanage/ClassticManageView.vue

@ -2,12 +2,29 @@
<div class="content">
<div class="search">
<a-space>
<a-input v-model:value="searchValue.title" placeholder="语录标题" />
<a-input v-model:value="searchlist.title" placeholder="语录标题" />
</a-space>
<a-space style="margin-left: 16px;">
<a-button @click="classticSearch">查询</a-button>
<a-button @click="search">查询</a-button>
<a-button type="primary" ghost @click="formModal('add')">新增</a-button>
<ClassticFormView />
<a-modal v-model:open="formControl.open" :title="formControl.title" cancelText="取消" okText="确定"
@ok="submit">
<a-form ref="formRef" :model="formList" name="basic" :label-col="{ span: 4, offset: 2 }"
:wrapper-col="{ span: 16 }">
<a-form-item label="语录标题" name="header"
:rules="[{ required: true, message: 'Please input your username!' }]">
<a-input v-model:value="formList.header" />
</a-form-item>
<a-form-item label="语录内容" name="text"
:rules="[{ required: true, message: 'Please input your username!' }]">
<a-input v-model:value="formList.text" />
</a-form-item>
<a-form-item label="备注" name="descr"
:rules="[{ required: true, message: 'Please input your username!' }]">
<a-input v-model:value="formList.descr" />
</a-form-item>
</a-form>
</a-modal>
</a-space>
</div>
<div class="table">
@ -16,9 +33,9 @@
<template v-if="column.dataIndex === 'operation'">
<a-space>
<div>
<a-button size="small" danger @click="delModal">删除</a-button>
<a-modal v-model:open="modalDel.open" title="提示" ok-text="确认" cancel-text="取消"
@ok="del(record.id)">
<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>
@ -33,32 +50,96 @@
</template>
<script setup lang='ts'>
import { onMounted } from 'vue';
import { onMounted, reactive } from 'vue';
import { classticStore } from "@/stores/index"
import { classticSearch, classticList, classticlist, classticDel } from "@/services/admin/classtic"
import ClassticFormView from "@/views/admin/classticmanage/ClassticFormView.vue"
const { searchValue, modalDel, modalForm } = classticStore()
import { get } from '@/tools/request';
const { delControl, formControl } = classticStore()
const searchlist = reactive({
title: ""
})
const formList = reactive({
header: "",
text: "",
descr: ""
})
const search = async () => {
try {
await get(
"/classtics/list/search",
{ header: searchlist.title }
).then(response => {
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("the interface request data does not exist!")
}
})
} catch (error) {
console.log("interface request exception")
}
}
const formModal = (mode: string, id?: any) => {
modalForm.ids = id;
modalForm.mode = mode;
modalForm.open = true;
formControl.ids = id;
formControl.mode = mode;
formControl.open = true;
if (id) {
modalForm.title = "编辑"
formControl.title = "编辑"
} else {
modalForm.title = "新增"
formControl.title = "新增"
}
get(`classtics/list/search/${id}`).then(val => {
console.log("val", val)
classticForm.header = "123"
classticForm.text = "123"
classticForm.descr = "123123"
})
};
//
const del = (id: any) => {
classticDel(id)
modalDel.open = false
const del = () => {
if (formControl.ids) {
classticDel(formControl.ids)
}
delControl.open = false
}
const delModal = () => {
modalDel.open = true
const delModal = (id: any) => {
formControl.ids = id
delControl.open = true
};
const classticList = async () => {
try {
const response = await get("/classtics/list");
if (response) {
classticlist.value = response.data.data.map((item: any, index: any) => ({
key: (index + 1).toString(),
id: item.id,
header: item.header,
text: item.text,
descr: item.descr
}));
} else {
console.error("Response data structure is not as expected");
}
} catch (error) {
console.error("Failed to fetch data", error);
}
}
//
onMounted(async () => {
classticList()

Loading…
Cancel
Save