hlt_gis_admin/src/views/systemAdmin/system/mapTools/layer3d/index.vue

<template>
    <div class="layer2d p-4">
        <div class="layer2d-body">
            <BasicTable @register="registerTable">
                <template #toolbar>
                    <Button type="primary" @click="handleCreate(null)">
                        新增
                    </Button>
                    <!-- <Button type="primary" danger :disabled="hasSelected" @click="delAllData">
                        批量删除
                    </Button> -->
                </template>
                <template #level="{ record }">
                    <div>{{ record.minimumLevel }}-{{ record.maximumLevel }}</div>
                </template>
                <template #show="{ record }">
                    <div>{{ record.show ? '显示' : '隐藏' }}</div>
                </template>
                <template #func="{ record }">
                    <TableAction :actions="[
                        {
                            label: '编辑',
                            tooltip: '编辑',
                            //icon: 'clarity:note-edit-line',
                            onClick: handleEdit.bind(null, record),
                        },
                        {
                            label: '删除',
                            tooltip: '删除',
                            //icon: 'ant-design:delete-outlined',
                            //color: 'error',
                            popConfirm: {
                                title: '确定删除该数据吗?',
                                confirm: handleDelete.bind(null, record),
                            },
                        },
                    ]" />
                </template>
            </BasicTable>
        </div>
        <!-- 弹出框 -->
        <Modal @register="registerDrawer" @success="handleSuccess" />
    </div>
</template>

<script>
import { defineComponent, onMounted, watch, ref, reactive, toRefs, computed } from 'vue';
// 导入表格组件，表格事件
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { Button } from 'ant-design-vue';
import { message, notification } from 'ant-design-vue';
import moment from 'moment'
import { session } from '/@/utils/Memory';
import { get3dLayers } from '/@/api/sys/mapTools';
import { removeLayer3d } from '/@/api/twoAndThree/menu';
import { columns } from "./config.data";
// 加载自定义侧边弹出框 组件
import { useModal } from '/@/components/Modal';
// 导入子页面【新增、修改】
import Modal from './Modal.vue';
import { isArray } from '/@/utils/is';


export default defineComponent({
    components: { BasicTable, TableAction, Button, Modal },
    name: "tools",
    setup() {
        const [registerDrawer, { openModal }] = useModal(); //使用弹出框

        const getAllData = () => {
            return new Promise((resolve) => {
                get3dLayers().then(res => {
                    if (res.code === 200 && res.data.length) {
                        resolve(res.data)
                    } else {
                        message.error('暂无图层数据！')
                        resolve(false)
                    }
                })
            })
        }
        //判断是否选中数据
        const hasSelected = computed(() => {
            const rowSelection = getRowSelection();
            return !rowSelection.selectedRowKeys?.length;
        });
        //注册tag表格
        const [
            registerTable,
            { reload, getRowSelection, getSelectRowKeys, setSelectedRowKeys }
        ] = useTable({
            title: '图层列表', //'菜单列表'
            api: getAllData, //加载数据
            // dataSource: getAllData,
            columns: columns,
            useSearchForm: false,     //开启搜索区域
            bordered: true,
            canResize: false,
            showTableSetting: true,  // 显示表格设置
            tableSetting: {
                redo: true,
                size: true,
                setting: false,
                fullScreen: false
            },
            showIndexColumn: true,
            pagination: {
                // pageSize: 10,
                hideOnSinglePage: false
            },
            rowKey: (record) => record.id,
            actionColumn: {
                width: 150,
                title: '操作',
                dataIndex: 'func',
                slots: { customRender: 'func' },
            },
            rowSelection: {
                type: 'checkbox',
            },
        });

        /**
         * 操作成功，重新加载页面
         */
        function handleSuccess() {
            reload();
        }

        /**
         * 打开新增菜单
         */
        function handleCreate() {
            openModal(true, {
                isUpdate: false,
            });
        }

        /**
         * 打开 编辑菜单
         * @param record
         */
        function handleEdit(record) {
            openModal(true, {
                record,
                isUpdate: true,
            });
        }

        /**
         * 执行 删除操作
         * @param record
         */
        async function handleDelete(record) {
            try {
                let ids = isArray(record._id) ? record._id : record._id;
                await removeLayer3d(ids);
                notification.success({
                    message: '成功',
                    description: '删除三维图层成功！',
                    duration: 2,
                });
                await reload();
            } catch (e) {
                return Promise.reject(e);
            }
        }



        return {
            handleSuccess,
            registerDrawer,
            hasSelected,
            registerTable,
            reload,
            getRowSelection,
            getSelectRowKeys,
            setSelectedRowKeys,
            handleEdit,
            handleDelete,
            handleCreate,
        }
    }
})
</script>
<style lang="less" scoped>
.layer2d {
    .layer2d-body {
        width: 100%;
        height: 100%;
        padding: 0 20px;
        background-color: #fff;
    }
}
</style>