geg-gas-web/src/views/erp/device/Infomation.vue

<template>
    <PageWrapper dense fixedHeight contentFullHeight>
        <BasicTableErp @register="registerTable">
            <template #toolbar>
                <a-button type="primary" @click="handleCreate"> {{ t('新增') }} </a-button>
                <a-button type="primary" @click="handleExport"> {{ t('导出') }} </a-button>
            </template>
            <template #bodyCell="{ column, record }">
                <template v-if="column.dataIndex == 'state'">
                    <span :style="`color:${record.state === 1 ? '#67c23a' : '#F56C6C'}`">
                        {{ record.state === 1 ? '正常' : '异常' }}
                    </span>
                </template>
                <template v-if="column.dataIndex == 'action'">
                    <TableAction
                        :actions="[
                            {
                                icon: 'ant-design:eye-outlined',
                                onClick: handleView.bind(null, record)
                            },
                            {
                                icon: 'clarity:note-edit-line',
                                onClick: handleEdit.bind(null, record)
                            },
                            {
                                icon: 'ant-design:delete-outlined',
                                color: 'error',
                                onClick: handleDelete.bind(null, record)
                            }
                        ]"
                    />
                </template>
            </template>
        </BasicTableErp>
        <InfomationModal @register="registerModal" @success="reload" />
        <InfomationCheckModal @register="registerCheckModal" />
    </PageWrapper>
</template>
<script lang="ts" setup>
    import { createVNode } from 'vue';
    import { useTable, TableAction, BasicColumn, FormSchema } from '/@/components/Table';
    import BasicTableErp from '/@/components/Table/src/BasicTableErp.vue';
    import { useModal } from '/@/components/Modal';
    import { useMessage } from '/@/hooks/web/useMessage';
    import { PageWrapper } from '/@/components/Page';
    import { getDeviceInfoPageList, deleteDeviceInfo, exportInfo } from '/@/api/erp/device/info';
    import { useI18n } from '/@/hooks/web/useI18n';
    import { Modal } from 'ant-design-vue';
    import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
    import { downloadByData } from '/@/utils/file/download';
    import InfomationModal from './components/InfomationModal.vue';
    import InfomationCheckModal from './components/InfomationCheckModal.vue';

    const { t } = useI18n();
    const columns: BasicColumn[] = [
        {
            title: '设备编号',
            dataIndex: 'number'
        },
        {
            title: '设备名称',
            dataIndex: 'name'
        },
        {
            title: '设备类型',
            dataIndex: 'typeName'
        },
        {
            title: '供应商',
            dataIndex: 'supplierName'
        },
        {
            title: '设备位置',
            dataIndex: 'address'
        },
        {
            title: '规格型号',
            dataIndex: 'model'
        },
        {
            title: '负责人',
            dataIndex: 'principalNames'
        },
        {
            title: '设备状态',
            dataIndex: 'state'
        }
    ];

    const searchFormSchema: FormSchema[] = [
        {
            field: 'typeId',
            label: '设备类型',
            component: 'XjrSelect',
            colProps: { span: 8 },
            componentProps: {
                datasourceType: 'dic',
                params: { itemId: '1671412696707850241' },
                labelField: 'name',
                valueField: 'id',
                placeholder: '请选择设备类型',
                getPopupContainer: () => document.body
            }
        },
        {
            field: 'name',
            label: '设备名称',
            component: 'Input',
            colProps: { span: 8 },
            componentProps: {
                placeholder: '请输入设备名称'
            }
        },
        {
            field: 'address',
            label: '设备位置',
            component: 'Input',
            colProps: { span: 8 },
            componentProps: {
                placeholder: '请输入设备位置'
            }
        }
    ];

    const { notification } = useMessage();
    const [registerModal, { openModal }] = useModal();
    const [registerCheckModal, { openModal: openCheckModal }] = useModal();

    const customRow = (record) => {
        return {
            onClick: () => {
                let selectedRowKeys = [...getSelectRowKeys()];
                if (selectedRowKeys.indexOf(record.id) >= 0) {
                    let index = selectedRowKeys.indexOf(record.id);
                    selectedRowKeys.splice(index, 1);
                } else {
                    selectedRowKeys.push(record.id);
                }
                setSelectedRowKeys(selectedRowKeys);
            }
        };
    };

    const [registerTable, { reload, setSelectedRowKeys, getSelectRowKeys }] = useTable({
        title: '设备信息',
        api: getDeviceInfoPageList,
        rowKey: 'id',
        columns,
        formConfig: {
            rowProps: {
                gutter: 16
            },
            schemas: searchFormSchema
        },
        useSearchForm: true,
        showTableSetting: true,
        striped: false,
        actionColumn: {
            width: 120,
            title: t('操作'),
            dataIndex: 'action',
            slots: { customRender: 'action' }
        },
        rowSelection: {
            type: 'checkbox'
        },
        customRow
    });

    const handleCreate = () => {
        openModal(true, {
            isUpdate: false
        });
    };

    const handleEdit = (record) => {
        openModal(true, {
            id: record.id,
            isUpdate: true
        });
    };

    const handleView = (record) => {
        openCheckModal(true, {
            id: record.id
        });
    };

    const handleDelete = (record) => {
        Modal.confirm({
            title: t('提示信息'),
            icon: createVNode(ExclamationCircleOutlined),
            content: t('是否确认删除？'),
            okText: t('确认'),
            cancelText: t('取消'),
            async onOk() {
                await deleteDeviceInfo(record.id);
                notification.success({
                    message: t('提示'),
                    description: t('删除成功')
                });
                reload();
            },
            onCancel() {}
        });
    };
    const handleExport = async () => {
        if (!getSelectRowKeys().length) {
            notification.warning({
                message: 'Tip',
                description: '请选择需要导出的数据'
            });
            return false;
        }
        const res = await exportInfo(getSelectRowKeys());
        downloadByData(res.data, '设备信息.xlsx', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
    };
</script>