xj-admin/src/views/consult/conKnowledge/ConKnowledgeList.vue

<template>
    <div>
        <!--引用表格-->
        <BasicTable @register="registerTable" :rowSelection="rowSelection">
            <!--插槽:table标题-->
            <template #tableTitle>
                <a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增 </a-button>
                <a-button type="primary" @click="batchHandleDelete" preIcon="ant-design:delete-outlined"> 批量删除 </a-button>
                <!--                <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出 </a-button>-->
                <!--                <j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="onImportXls">导入 </j-upload-button>-->
                <!--                <a-dropdown v-if="selectedRowKeys.length > 0">-->
                <!--                    <template #overlay>-->
                <!--                        <a-menu>-->
                <!--                            <a-menu-item key="1" @click="batchHandleDelete">-->
                <!--                                <Icon icon="ant-design:delete-outlined" />-->
                <!--                                删除-->
                <!--                            </a-menu-item>-->
                <!--                        </a-menu>-->
                <!--                    </template>-->
                <!--                    <a-button-->
                <!--                        >批量操作-->
                <!--                        <Icon icon="mdi:chevron-down" />-->
                <!--                    </a-button>-->
                <!--                </a-dropdown>-->
            </template>
            <!--操作栏-->
            <template #action="{ record }">
                <TableAction :actions="getTableAction(record)" />
            </template>
            <!--字段回显插槽-->
            <template #htmlSlot="{ text }">
                <div v-html="text"></div>
            </template>
            <template #fileSlot="{ text }">
                <span v-if="!text" style="font-size: 12px; font-style: italic">无文件</span>
                <a-button v-else :ghost="true" type="primary" preIcon="ant-design:download-outlined" size="small" @click="downloadFile(text)"
                    >下载
                </a-button>
            </template>
        </BasicTable>
        <!-- 表单区域 -->
        <ConKnowledgeModal @register="registerDrawer" @success="handleSuccess" />
    </div>
</template>

<script lang="ts" name="conKnowledge-conKnowledge" setup>
    import { BasicTable, TableAction } from '/@/components/Table';
    import { useListPage } from '/@/hooks/system/useListPage';
    import ConKnowledgeModal from './components/ConKnowledgeModal.vue';
    import { columns, searchFormSchema } from './ConKnowledge.data';
    import { list, deleteOne, batchDelete, getImportUrl, getExportUrl, tfTopKnowApi } from './ConKnowledge.api';
    import { downloadFile } from '/@/utils/common/renderUtils';
    import { message } from 'ant-design-vue';
    import { useDrawer } from '/@/components/Drawer';
    //注册Drawer
    const [registerDrawer, { openDrawer }] = useDrawer();
    //注册table数据
    const { tableContext } = useListPage({
        tableProps: {
            title: '知识库',
            api: list,
            columns,
            canResize: false,
            formConfig: {
                //labelWidth: 120,
                schemas: searchFormSchema,
                autoSubmitOnEnter: true,
                showAdvancedButton: true,
                fieldMapToNumber: [],
                fieldMapToTime: [],
            },
            actionColumn: {
                width: 220,
                fixed: 'right',
            },
        },
        exportConfig: {
            name: '知识库',
            url: getExportUrl,
        },
        importConfig: {
            url: getImportUrl,
            success: handleSuccess,
        },
    });

    const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext;

    /**
     * 新增事件
     */
    function handleAdd() {
        openDrawer(true, {
            isUpdate: false,
            showFooter: true,
            type: '新增',
        });
    }

    /**
     * 编辑事件
     */
    function handleEdit(record: Recordable) {
        openDrawer(true, {
            record,
            isUpdate: true,
            showFooter: true,
            type: '编辑',
        });
    }

    /**
     * 详情
     */
    function handleDetail(record: Recordable) {
        openDrawer(true, {
            record,
            isUpdate: true,
            showFooter: false,
            type: '详情',
        });
    }

    /**
     * 删除事件
     */
    async function handleDelete(record) {
        await deleteOne({ id: record.id }, handleSuccess);
    }

    /**
     * 批量删除事件
     */
    async function batchHandleDelete() {
        if (selectedRowKeys.value.length === 0) {
            message.warning('未选中任何数据');
            return;
        }
        await batchDelete({ ids: selectedRowKeys.value }, handleSuccess);
    }

    /**
     * 成功回调
     */
    function handleSuccess() {
        (selectedRowKeys.value = []) && reload();
    }
    function handleTop(record: object) {
        tfTopKnowApi({ id: record.id }).then(() => {
            handleSuccess();
        });
    }

    /**
     * 操作栏
     */
    function getTableAction(record) {
        return [
            {
                label: record.tfTop === '1' ? '取消置顶' : '置顶',
                onClick: handleTop.bind(null, record),
            },
            {
                label: '编辑',
                onClick: handleEdit.bind(null, record),
            },
            {
                label: '详情',
                onClick: handleDetail.bind(null, record),
            },
            {
                label: '删除',
                onClick: handleDelete.bind(null, record),
            },
        ];
    }
</script>

<style scoped></style>