sl-sfy-safety/src/views/system-config/business-scene/PageBusinessScene.vue

<template>
    <div class="business-scene">
        <header class="header">
            <el-button class="header__button" type="primary" :icon="Plus"
                @click="openDrawer('添加业务场景')">添加业务场景</el-button>
        </header>
        <main class="main">
            <BasicTable :columns="columns" :action-column="actionColumn" :data-source="tableData" :tableSetting="{
                size: false,
                redo: false,
                fullscreen: false,
                striped: false,
                setting: false,
            }" />
        </main>
        <InfoDrawer :title="drawerTitle" :data="tableInfo" @close-drawer="drawerVisiable = false"
            @fetch-table="getTableData()" v-if="drawerVisiable" />
    </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, h, reactive } from 'vue';
import { ElTag } from 'element-plus';
import { Plus } from '@element-plus/icons-vue'
import { BasicTable } from '@/components/Table';
import { useTableHook } from './useTableHook.ts';
import { SceneListInfo } from '@/types/business-scene/type.ts'
import { BasicColumn, TableActionIcons } from '@/components/Table';
import InfoDrawer from './components/InfoDrawer.vue';
import { openMessageBox, getMessage } from './components/MessageBox.ts'
import Up from '@/assets/icons/up.png';
import Down from '@/assets/icons/down.png';
import Edit from '@/assets/icons/edit.png';
import Delete from '@/assets/icons/delete.png';
const { orderNums, tableData, getTableData, deleteTableData, sortTableData } = useTableHook()
const drawerVisiable = ref(false);
const drawerTitle = ref('添加业务场景')
const openDrawer = (title: string) => {
    drawerVisiable.value = true;
    drawerTitle.value = title;
    tableInfo.value = { name: '', viewTemplateList: [], remark: '', isDisabled: 0 }
}
const columns: BasicColumn[] = [
    {
        label: '场景名称',
        prop: 'name',
        width: 150
    },
    {
        label: '关联模板',
        prop: 'viewTemplateList',
        minWidth: 300,
        render(record) {
            const template = record.row.viewTemplateList.map(item => item.name);
            const tags = template.map((item) => h(ElTag, { type: 'info' }, item));
            return h(
                'div',
                {
                    class: 'div__container--tag',
                },
                tags,
            );
        },
    },
    {
        label: '状态',
        prop: 'isDisabled',
        width: 140,
        align: 'center',
        render(record) {
            const status = record.row.isDisabled;
            return h(
                ElTag,
                { type: status === 0 ? 'success' : 'danger' },
                status === 0 ? '启用' : '停用',
            );
        },
    },
    {
        label: '备注',
        prop: 'remark',
        width: 160
    },
    {
        label: '创建时间',
        prop: 'createdAt',
        width: 180
    },
];
const tableInfo = ref<SceneListInfo>();
const actionColumn: BasicColumn = reactive({
    width: 240,
    title: '操作',
    prop: 'action',
    fixed: 'right',
    render(record) {
        return h(TableActionIcons as any, {
            space: 20,
            style: 'img',
            size: 16,
            actionIcons: [
                {
                    label: '编辑',
                    icon: Edit,
                    onClick: () => {
                        openDrawer('编辑业务场景');
                        tableInfo.value = record.row;
                    },
                },
                {
                    label: '删除',
                    icon: Delete,
                    onClick: () => {
                        openMessageBox(undefined, undefined, () => deleteTableData(record.row.id))
                    },
                },
                {
                    label: '升序',
                    icon: Up,
                    disabled: record.row.orderNum === orderNums.value[0],
                    onClick: () => {
                        sortTableData(record.row.id, 'increase')
                        getMessage('success', '升序成功');
                    },
                },
                {
                    label: '降序',
                    icon: Down,
                    disabled: record.row.orderNum === orderNums.value[1],
                    onClick: () => {
                        sortTableData(record.row.id, 'decrease')
                        getMessage('success', '降序成功');
                    },
                },
            ],
            class: 'table__action--enabled',
        });
    },
});
onMounted(() => {
    getTableData();
})
</script>

<style lang="scss" scoped>
.business-scene {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.12);
    border-radius: 6px;
    width: 100%;
    height: calc(100vh - 64px - 12px);
    padding: 24px 44px 0 21px;
}

.header {
    display: flex;
    justify-content: space-between;
    width: inherit;
    height: 32px;
}

.main {
    position: relative;
    margin-top: 16px;
    width: inherit;
    flex: 1;
}

:deep(.div__container--tag) {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

:deep(.div__container--tag)::-webkit-scrollbar {
    height: 6px;
}
</style>