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

<template>
    <div class="tools p-4">
        <div class="tools-body">
            <BasicTable @register="registerTable">
                <template #toolbar>
                    <Button type="primary" @click="handleAdd">
                        新增工具
                    </Button>
                    <Button type="primary" danger :disabled="hasSelected" @click="handleBatchDelete">
                        批量删除
                    </Button>
                </template>
                <template #func="{ record }">
                    <TableAction :actions="[
                        {
                            label: '查看',
                            tooltip: '查看',
                            icon: 'ant-design:search-outlined',
                            onClick: handleEdit.bind(null, record),
                        },
                        {
                            label: '编辑',
                            tooltip: '编辑',
                            icon: 'clarity:note-edit-line',
                            onClick: handleEdit.bind(null, record),
                        },
                        {
                            label: '显隐',
                            tooltip: '显隐',
                            icon: 'ant-design:delete-outlined',
                            color: 'error',
                            onClick: handleShow.bind(null, record)
                        },
                        {
                            label: '删除',
                            tooltip: '删除',
                            icon: 'ant-design:delete-outlined',
                            color: 'error',
                            onClick: handleDelete.bind(null, record)
                        },
                    ]" />
                </template>
            </BasicTable>
        </div>
        <ToolsDrawer v-if="ifShowDialog" @closeDialog="ifShowDialog = false" @onSubmit="onSubmit">
        </ToolsDrawer>
    </div>
</template>

<script>
import { defineComponent, onMounted, watch, ref, reactive, toRefs, computed, createVNode } from 'vue';
// 导入表格组件，表格事件
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { Button } from 'ant-design-vue';
import ToolsDrawer from './ToolsDrawer.vue';
import { message, Modal } from 'ant-design-vue';
import moment from 'moment'
import { session } from '/@/utils/Memory';
import { getAllTools, addTools, delTools, showTools } from '/@/api/sys/mapTools';
import { useSyncConfirm } from '/@/hooks/component/useSyncConfirm';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { useI18n } from '/@/hooks/web/useI18n';
import { h } from 'vue';
import { Tag } from 'ant-design-vue';


export default defineComponent({
    components: { BasicTable, TableAction, Button, ToolsDrawer, ExclamationCircleOutlined },
    name: "tools",
    setup() {
        const { t } = useI18n(); //加载国际化
        const columns = [
            {
                title: '分组名称',
                dataIndex: 'group',
                key: 'group',
                align: 'center'
            },
            // {
            //     title: 'id',
            //     dataIndex: 'id',
            //     key: 'id',
            //     align: 'center'
            // },
            {
                title: '显示名称',
                dataIndex: 'label',
                key: 'label',
                align: 'center'
            },
            {
                title: '提示文字',
                dataIndex: 'tip',
                key: 'tip',
                align: 'center'
            },
            {
                title: '图标',
                dataIndex: 'icon',
                key: 'icon',
                align: 'center'
            },
            {
                title: '状态',
                dataIndex: 'show',
                width: 80,
                customRender: ({ record }) => {
                    const status = !record.show;
                    const enable = ~~status === 0;
                    const color = enable ? 'green' : 'red';
                    const enableText = t('routes.common.system.tableTitleSystemEnable'); //国际化处理--启用
                    const stopText = t('routes.common.system.tableTitleSystemStop'); //国际化处理--停用
                    const text = enable ? enableText : stopText;
                    return h(Tag, { color: color }, () => text);
                },
            },
            {
                title: '功能',
                dataIndex: 'action',
                key: 'action',
                align: 'center'
            }
        ]
        const handleEdit = () => {

        }
        const handleDelete = (record) => {
            Modal.confirm({
                title: '删除提示',
                icon: createVNode(ExclamationCircleOutlined),
                content: '确定删除该工具？',
                centered: true,
                okText: '确定',
                okType: 'danger',
                cancelText: '取消',
                onOk: (() => {
                    let param = {
                        id: record.id
                    }
                    delTools(param).then(res => {
                        message.success('操作成功');
                        reload();
                    })
                })
            });
        }
        const handleShow = (record) => {
            Modal.confirm({
                title: '隐藏提示',
                icon: createVNode(ExclamationCircleOutlined),
                content: '确定隐藏该工具？',
                centered: true,
                okText: '确定',
                okType: 'danger',
                cancelText: '取消',
                onOk: (() => {
                    showTools(record).then(res => {
                        message.success('操作成功');
                        reload();
                    })
                })
            });
        }

        const ifShowDialog = ref(false)
        const handleAdd = () => {
            ifShowDialog.value = true
        }
        const onSubmit = () => {
            reload();
        }
        const { createSyncConfirm } = useSyncConfirm();
        const handleBatchDelete = async () => {
            const rowKeys = getSelectRowKeys();
            try {
                await createSyncConfirm({
                    iconType: 'warning',
                    content: '确认后所有选中的菜单将被删除',
                });
                await handleDelete({ id: rowKeys });
                setSelectedRowKeys([]);
                reload();
            } catch (error) { }
        };
        const getAllData = () => {
            return new Promise((resolve) => {
                getAllTools().then(res => {
                    if (res.code === 200 && res.data.length) {
                        resolve(res.data)
                    } else {
                        message.error('暂无工具数据')
                    }
                })
            })
        }
        //判断是否选中数据
        const hasSelected = computed(() => {
            const rowSelection = getRowSelection();
            return !rowSelection.selectedRowKeys?.length;
        });
        //注册tag表格
        const [
            registerTable,
            { reload, getRowSelection, getSelectRowKeys, setSelectedRowKeys }
        ] = useTable({
            title: '工具列表', //'菜单列表'
            api: getAllData, //加载数据
            // dataSource: toolsData,
            columns: columns,
            useSearchForm: false,     //开启搜索区域
            bordered: true,
            showTableSetting: true,  // 显示表格设置
            tableSetting: {
                redo: true,
                size: true,
                setting: false,
                fullScreen: false
            },
            showIndexColumn: true,
            pagination: {
                // pageSize: 10,
                hideOnSinglePage: false
            },
            rowKey: (record) => record.id,
            actionColumn: {
                width: 200,
                title: '操作',
                dataIndex: 'func',
                slots: { customRender: 'func' },
            },
            rowSelection: {
                type: 'checkbox',
            },
        });
        return {
            handleShow,
            hasSelected,
            ifShowDialog,
            registerTable,
            reload,
            getRowSelection,
            getSelectRowKeys,
            setSelectedRowKeys,
            handleEdit,
            handleDelete,
            handleBatchDelete,
            handleAdd,
            onSubmit
        }
    }
})
</script>

<style lang="less" scoped>
.tools {
    .tools-body {
        width: 100%;
        height: 100%;
        padding: 0 20px;
        background-color: #fff;
    }
}
</style>