first
This commit is contained in:
make
200
src/views/manga/index.vue
Normal file
200
src/views/manga/index.vue
Normal file
@@ -0,0 +1,200 @@
|
||||
<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>
|
||||
</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);
|
||||
}
|
||||
.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);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user