xj-admin/src/views/archive/healthCabin/healthRoom/index.vue

<template>
    <BasicTable @register="registerTable" :rowSelection="rowSelection">
        <template #tableTitle>
            <a-button type="primary" :icon="h(PlusOutlined)" @click="addRoom"> 新增 </a-button>
        </template>
        <!--操作栏-->
        <template #action="{ record }">
            <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
        </template>
    </BasicTable>
    <AddRoom @register="addModal" @success="handleSuccess" />
    <DeviceDrawer @register="registerDrawer" />
    <LayoutDrawer @register="layoutDrawer" />
    <TerminalDrawer @register="terminalDrawer" />
    <AdminModal @register="adminModal" @success="handleSuccess" />
    <SelfLayoutDrawer @register="selfLayoutDrawer" />
</template>

<script lang="ts" setup>
    import { ref, onMounted, h } from 'vue';
    import BasicTable from '/@/components/Table/src/BasicTable.vue';
    import { useListPage } from '/@/hooks/system/useListPage';
    import { TableAction } from '/@/components/Table';
    import { columns, searchFormSchema } from '/@/views/archive/healthCabin/healthRoom/index.data';
    import { listApi, deleteRoom } from '/@/views/archive/healthCabin/healthRoom/index.api';
    import { useModal } from '/@/components/Modal';
    import { PlusOutlined, EditOutlined, SearchOutlined, DeleteOutlined } from '@ant-design/icons-vue';
    //抽屉
    import DeviceDrawer from '/@/views/archive/healthCabin/healthRoom/components/deviceDrawer.vue';
    import LayoutDrawer from '/@/views/archive/healthCabin/healthRoom/components/layoutDrawer.vue';
    import TerminalDrawer from '/@/views/archive/healthCabin/healthRoom/components/terminalDrawer.vue';
    //新增健康室弹窗
    import AddRoom from '/@/views/archive/healthCabin/healthRoom/components/addRoomModal.vue';
    import AdminModal from '/@/views/archive/healthCabin/healthRoom/components/adminModal.vue';
    import SelfLayoutDrawer from '/@/views/archive/healthCabin/healthRoom/components/selfLayoutDrawer.vue';
    import { useDrawer } from '/@/components/Drawer';
    import { useMessage } from '/@/hooks/web/useMessage';
    const { createMessage } = useMessage();
    const { tableContext } = useListPage({
        tableProps: {
            title: '健康室表',
            api: listApi,
            columns,
            canResize: false,
            orderFlag: false,
            showIndexColumn: false,
            formConfig: {
                schemas: searchFormSchema,
                autoSubmitOnEnter: true,
                showAdvancedButton: false,
                fieldMapToNumber: [],
                fieldMapToTime: [],
            },
            // beforeFetch: (params) => {
            //   params['orgCode'] = 'A01A11'
            //   return params;
            // },
            actionColumn: {
                width: 200,
                fixed: 'right',
            },
        },
    });
    const [registerTable, { reload, getDataSource }, { rowSelection, selectedRowKeys }] = tableContext;
    const [registerDrawer, { openDrawer }] = useDrawer();
    const [layoutDrawer, { openDrawer: openLayoutDrawer }] = useDrawer();
    const [terminalDrawer, { openDrawer: openTerminalDrawer }] = useDrawer();
    const [selfLayoutDrawer, { openDrawer: openSelfDrawer }] = useDrawer();
    const [addModal, { openModal }] = useModal();
    const [adminModal, { openDrawer: openAdminModal }] = useDrawer();
    function getTableAction(record: any) {
        return [
            {
                label: '设备管理',
                onClick: handleDevice.bind(null, record),
            },
            {
                label: '终端',
                onClick: handleTerminal.bind(null, record),
            },
        ];
    }

    function getDropDownAction(record: any) {
        return [
            {
                label: '编辑',
                onClick: edit.bind(null, record),
            },
            {
                label: '详情',
                onClick: onlyread.bind(null, record),
            },
            {
                label: '默认排班',
                onClick: handleLayout.bind(null, record),
            },
            {
                label: '自定义排班',
                onClick: handleCustom.bind(null, record),
            },
            {
                label: '管理员',
                onClick: handleAdmin.bind(null, record),
            },
            {
                label: '删除',
                onClick: handleDelete.bind(null, record),
            },
        ];
    }

    // 设备管理
    function handleDevice(record) {
        openDrawer(true, {
            record,
        });
    }
    // 默认排版
    function handleLayout(record) {
        openLayoutDrawer(true, {
            record,
        });
    }
    // 自定义排版
    function handleCustom(record) {
        openSelfDrawer(true, {
            record,
        });
    }
    // 管理员
    function handleAdmin(record) {
        console.log(record);
        openAdminModal(true, {
            record,
        });
    }
    // 终端
    function handleTerminal(record) {
        console.log(record);
        openTerminalDrawer(true, {
            record,
        });
    }
    // 删除
    function handleDelete(record) {
        console.log(record);
        deleteRoom({ id: record.id }, reload);
        //     deleteRoom
    }
    function edit(record) {
        openModal(true, {
            record,
            isUpdate: true,
            title: '编辑',
        });
    }
    function onlyread(record) {
        openModal(true, {
            record,
            isUpdate: true,
            onlyRead: true,
            title: '详情',
        });
    }
    function addRoom() {
        openModal(true, {
            isUpdate: false,
            title: '录入',
        });
    }
    function handleSuccess() {
        reload();
    }
</script>

<style lang="less" scoped></style>