feat: update

src/views/video/chapter/index.vue

@@ -0,0 +1,91 @@
+<template>
+    <div class="table-box">
+        <ProTable
+            ref="proTable"
+            highlight-current-row
+            :columns="columns"
+            :request-api="getTableList"
+            :data-callback="dataCallback"
+        >
+        </ProTable>
+    </div>
+</template>
+
+<script setup lang="tsx" name="complexProTable">
+import { reactive, ref } from "vue";
+import ProTable from "@/components/ProTable/index.vue";
+import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
+import { ChapterList } from "@/api/interface/novel/chapter";
+import { getList } from "@/api/modules/novel/chapter";
+
+// ProTable 实例
+const proTable = ref<ProTableInstance>();
+
+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 = (params: any) => {
+    let newParams = JSON.parse(JSON.stringify(params));
+    initParam.page = newParams.page;
+    initParam.limit = newParams.limit;
+    return getList(newParams);
+};
+
+// 表格配置项
+const columns = reactive<ColumnProps<ChapterList.ResList>[]>([
+    { type: "selection", fixed: "left", width: 50 },
+    {
+        prop: "key",
+        label: "搜索内容",
+        isShow: false,
+        search: {
+            el: "input"
+        }
+    },
+    {
+        prop: "xszj_id",
+        label: "ID",
+        width: 80
+    },
+    {
+        prop: "xszj_pai_xu",
+        label: "章节序号",
+        width: 100
+    },
+    {
+        prop: "xszj_ming_zi",
+        label: "章节标题"
+    },
+    {
+        prop: "xszj_nei_rong",
+        label: "章节内容",
+        showOverflowTooltip: true,
+        render(scope) {
+            return (
+                <div class="fixed-width" v-html={scope.row.xszj_nei_rong}>
+                    {scope.row.xszj_nei_rong}
+                </div>
+            );
+        }
+    },
+    { prop: "created_at", label: "添加时间", width: 170 }
+]);
+</script>
+
+<style lang="scss">
+.el-upload--picture-card {
+    display: none;
+}
+</style>