admin/SEONexusAdmin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

debug

Browse Source
This commit is contained in:
Your Name
2026-04-15 12:00:09 +08:00
parent 2962da0907
commit 845d68110b
426 changed files with 43961 additions and 34179 deletions
Download Patch File Download Diff File Expand all files Collapse all files

217
src/views/manga/index.vue
View File

@@ -1,200 +1,31 @@
<template>
<div class="table-box">
<ProTable
ref="proTable"
highlight-current-row
:columns="columns"
:request-api="getTableList"
:data-callback="dataCallback"
>
<!-- 表格 header 按钮 -->
<template #tableHeader="scope">
<el-button type="primary" style="display: none" :icon="CirclePlus" @click="openDrawer(true)">新增</el-button>
<el-button
style="display: none"
type="danger"
:icon="Delete"
plain
:disabled="!scope.isSelected"
@click="batchDelete(scope.selectedList)"
>
批量删除漫画
</el-button>
</template>
<!-- 表格操作 -->
<template #operation="scope">
<el-button type="success" link :icon="ChatLineSquare" @click="openChapterDrawer(scope.row)">章节</el-button>
<el-button type="primary" style="display: none" link :icon="EditPen" @click="openDrawer(false, scope.row)">
编辑
</el-button>
<el-button type="danger" style="display: none" link :icon="Delete" @click="deleteAccount(scope.row)">
删除
</el-button>
</template>
</ProTable>
<Drawer ref="drawerRef" />
<ChapterDrawer ref="chapterDrawerRef" />
<div class="module-unavailable">
<el-alert
title="漫画管理模块未部署到当前 Linux 测试服"
type="warning"
:closable="false"
show-icon
/>
<el-card class="module-unavailable__card" shadow="never">
<p>当前后端未提供 `Manhua` 控制器，漫画列表接口会直接返回控制器不存在。</p>
<p>本页先收为说明态，避免继续暴露会误导验收的假列表。</p>
<p>如果后续测试服补齐漫画模块，再恢复列表、章节抽屉和编辑链路。</p>
</el-card>
</div>
</template>
<script setup lang="tsx" name="complexProTable">
import { reactive, ref } from "vue";
import { MangaList } from "@/api/interface/manga/list";
import { useHandleData } from "@/hooks/useHandleData";
import ProTable from "@/components/ProTable/index.vue";
import { Delete, EditPen, CirclePlus, ChatLineSquare } from "@element-plus/icons-vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { getList, saveData, deleteItem } from "@/api/modules/manga/list";
import Drawer from "./drawer.vue";
import ChapterDrawer from "./components/chapter.vue";
import { getAllList } from "@/api/modules/manga/fenlei";
import { LOSE_STR_KEY, LOGIN_URL } from "@/config";
import router from "@/routers";
import { h } from "vue";
import { AsyncImageComponent } from "@/utils/decrypt";
// ProTable 实例
const proTable = ref<ProTableInstance>();
//漫画分类
const getFenLeiList = ref([] as any);
getAllList().then(res => {
if (res.code === LOSE_STR_KEY) {
router.replace(LOGIN_URL);
return;
}
getFenLeiList.value = res.data.items;
});
const initParam = reactive({
limit: 15,
page: 1
});
const dataCallback = (data: any) => {
return {
items: data.items,
total: data.total,
total_page: data.total_pages,
page: initParam.page,
limit: initParam.limit
};
};
const getTableList = async (params: any) => {
let newParams = JSON.parse(JSON.stringify(params));
initParam.page = newParams.page;
initParam.limit = newParams.limit;
return await getList(newParams);
};
// 表格配置项
const columns = reactive<ColumnProps<MangaList.ResList>[]>([
// { type: "selection", fixed: "left", width: 50 },
{
prop: "key",
label: "搜索内容",
isShow: false,
search: {
el: "input"
}
},
{
prop: "mhxq_id",
label: "ID",
width: 100
},
{
prop: "mhxq_ming_zi",
label: "名称",
width: 150
},
{
prop: "https_cover_url",
label: "封面",
width: 120,
render(scope) {
return h(AsyncImageComponent, { url: scope.row.https_cover_url });
}
},
{
prop: "mhxq_zhuang_tai",
label: "状态"
},
{
prop: "mhfl_id",
label: "分类",
width: 100,
fieldNames: { label: "mhfl_ming_zi", value: "mhfl_id" },
enum: getFenLeiList
},
{
prop: "mhxq_zuo_zhe",
label: "作者"
},
{
prop: "mhxq_biao_qian",
label: "标签",
width: 250,
render(scope) {
if (scope.row.mhxq_biao_qian) {
if (Array.isArray(scope.row.mhxq_biao_qian)) {
return <span>{scope.row.mhxq_biao_qian.join(", ")}</span>;
} else {
const data = JSON.parse(scope.row.mhxq_biao_qian);
return <span>{data.join(", ")}</span>;
}
}
}
},
{ prop: "mhxq_geng_xin_shi_jian", label: "最后更新时间", width: 120 },
{ prop: "mhxq_jian_jie", label: "描述", width: 170 },
{ prop: "created_at", label: "添加时间", width: 170 },
{ prop: "operation", label: "操作", fixed: "right", width: 120 }
]);
// 删除漫画信息
const deleteAccount = async (params: MangaList.ResList) => {
await useHandleData(deleteItem, { mhxq_id: params.mhxq_id }, "删除所选信息");
proTable.value?.getTableList();
};
// 批量删除漫画信息
const batchDelete = async (id: any[]) => {
const ids = id.map((item: MangaList.ResList) => item.mhxq_id);
await useHandleData(deleteItem, { mhxq_id: ids.join(",") }, "删除所选信息");
proTable.value?.clearSelection();
proTable.value?.getTableList();
};
// 打开 drawer(新增、编辑)
const drawerRef = ref<InstanceType<typeof Drawer> | null>(null);
const openDrawer = (isEdit: boolean, row: Partial<MangaList.ResList> = {}) => {
const params = {
title: isEdit ? "新增漫画" : "编辑漫画",
row: { ...row },
api: saveData,
getTableList: proTable.value?.getTableList
};
drawerRef.value?.acceptParams(params as any);
};
// 章节
const chapterDrawerRef = ref<InstanceType<typeof ChapterDrawer> | null>(null);
const openChapterDrawer = (row: Partial<MangaList.ResList> = {}) => {
chapterDrawerRef.value?.acceptParams(row as any);
};
</script>
<style lang="scss">
.el-table .warning-row,
.el-table .warning-row .el-table-fixed-column--right,
.el-table .warning-row .el-table-fixed-column--left {
background-color: var(--el-color-warning-light-9);
<style scoped lang="scss">
.module-unavailable {
display: grid;
gap: 16px;
}
.el-table .success-row,
.el-table .success-row .el-table-fixed-column--right,
.el-table .success-row .el-table-fixed-column--left {
background-color: var(--el-color-success-light-9);
.module-unavailable__card {
color: var(--el-text-color-regular);
line-height: 1.8;
}
.module-unavailable__card p {
margin: 0;
}
</style>