BoundLink-Plate-UI/src/views/customer-manage/customer-management/index.vue

<template>
    <div class="customer-management">
        <a-tabs v-model:activeKey="activeKey" class="tabs">
            <a-tab-pane v-for="(item, index) in tabsOptions" :key="index">
                <template #tab>
                    <span @click="item.onClick(item.params)">
                        <component :is="item.icon"></component>
                        {{ item.title }}
                    </span>
                </template>
            </a-tab-pane>
        </a-tabs>
        <bs-table v-bind="tableOptions">
            <template #searchRight>
                <div>
                    <a-button type="primary" @click="openCuleDrawer">
                        <span>服务商入库登记</span>
                    </a-button>
                </div>
            </template>
        </bs-table>
    </div>
</template>
<script setup lang="jsx">
import { ref, reactive } from "vue"
import BsTable, { useBsTable } from '/@/components/BsUi/Table/index.js';
import { DISPLAY_STATE } from '/@/components/BsUi/constant.js';
const activeKey = ref(0)
const tabsOptions = [
    {
        title: '全部',
        icon: 'AppstoreOutlined',
        params: {
            a: 1
        },
        onClick: (value) => {
            console.log(value);
        },
    },
    {
        title: '客户列表',
        icon: 'TeamOutlined',
        params: {

        },
        onClick: (value) => {

        },
    },
    {
        title: '审核中',
        icon: 'FileSyncOutlined',
        params: {

        },
        onClick: (value) => {

        },
    },
    {
        title: '无效客户',
        icon: 'UserDeleteOutlined',
        params: {

        },
        onClick: (value) => {

        },
    },
]
const {
    tableOptions,
    setTablePropsValue: setValue,
    getTablePropsValue: getValue,
} = useBsTable({
    tableOptions: {
        url:'',
        gridOptions: {
            loading: false,
            columns: [
                {
                    type: 'seq',
                    width: 80,
                },
                {
                    field: 'id',
                    title: '状态',
                },
                {
                    field: 'id',
                    title: '流水号',
                },
                {
                    field: 'id',
                    title: '来源',
                },
                {
                    field: 'name',
                    title: '服务商名称',
                },
                {
                    field: 'name1',
                    title: '服务商ID',
                },
                {
                    field: 'name2',
                    title: '服务商地区',
                },
                {
                    field: 'name',
                    title: '服务商地址',
                },
                {
                    field: 'name',
                    title: '服务商类型',
                },
                {
                    field: 'name',
                    title: '联系人',
                },
                {
                    field: 'name',
                    title: '联系电话',
                },
                {
                    field: 'name',
                    title: '注册时间',
                },
                {
                    // fixed: 'right',
                    cellRender: {
                        name: 'CellOption',
                        extraProps: {
                            buttons: [
                                {
                                    title: '查看详情',
                                    code: 'view',
                                    display: ({ row }) => {
                                        return DISPLAY_STATE.VISIBLE;
                                    },
                                    disabled({ row }) {
                                        return false;
                                    },
                                    onClick({ row }) { },
                                    extraProps: {},
                                },
                            ],
                        },
                    },
                },
            ],
        },
        searchConfig: {
            enabled: true,
            fieldSpan: 4,
            fields: [
                {
                    field: 'name',
                    label: '客户名称',
                    component: 'a-input',
                    componentProps: {
                        placeholder: '请输入客户名称',
                    },
                },
                {
                    field: 'name',
                    label: '客户地址',
                    component: 'a-input',
                    componentProps: {
                        placeholder: '请输入客户地址',
                    },
                },
                {
                    field: 'name',
                    label: '客户类型',
                    component: 'a-select',
                    componentProps: {
                        placeholder: '请输入客户类型',
                    },
                },
            ],
            onSearch() {
                fetchTableData();
            },
            onReset() {
                fetchTableData();
            },
        },
        pagerConfig: {
            enabled: true,
            pageSize: 10,
            pageNum: 1,
            total: 0,
            isFixed:false
        },
        toolbarConfig: {
            onRefresh() {
                fetchTableData();
            },
        },
    },
});

</script>
<style lang="scss" scoped>
.customer-management {
    background-color: #fff;
    height: 100%;

    .tabs {
        padding: 0 24px;

        :deep(.anticon) {
            margin: 0;
        }
    }
}
</style>