BoundLink-Plate-UI/src/views/project-manage/project-init-manage/index.vue

<template>
    <div class="project-init-manage">
        <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 }}({{ item.count }})
                    </span>
                </template>
            </a-tab-pane>
        </a-tabs>
        <bs-table v-bind="tableOptions"></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';
import { message } from "ant-design-vue";
const activeKey = ref(0);

const tabsOptions = [
    {
        title: '全部',
        icon: 'AppstoreOutlined',
        count: 0,
        params: {
            a: 1,
        },
        onClick: (value) => {
            console.log(value);
        },
    },
    {
        title: '标段',
        icon: 'TeamOutlined',
        count: 0,
        params: {},
        onClick: (value) => { },
    },
    {
        title: '商机',
        count: 0,
        icon: 'FileSyncOutlined',
        params: {},
        onClick: (value) => { },
    },
    {
        title: '立项',
        count: 0,
        icon: 'UserDeleteOutlined',
        params: {},
        onClick: (value) => { },
    },
    {
        title: '投标',
        count: 0,
        icon: 'UserDeleteOutlined',
        params: {},
        onClick: (value) => { },
    },
    {
        title: '中标',
        count: 0,
        icon: 'UserDeleteOutlined',
        params: {},
        onClick: (value) => { },
    },
    {
        title: '合同',
        count: 0,
        icon: 'UserDeleteOutlined',
        params: {},
        onClick: (value) => { },
    },
    {
        title: '履约',
        count: 0,
        icon: 'UserDeleteOutlined',
        params: {},
        onClick: (value) => { },
    },
    {
        title: '未中标',
        count: 0,
        icon: 'UserDeleteOutlined',
        params: {},
        onClick: (value) => { },
    },
];
const {
    tableOptions,
    setTablePropsValue: setValue,
    getTablePropsValue: getValue,
    fetchTableData,
} = useBsTable({
    tableOptions: {
        url: '/supports/customer/queryPage',
        gridOptions: {
            height: 600,
            loading: false,
            data: [],
            columns: [
                {
                    type: 'seq',
                    width: 80,
                },
                {
                    field: 'projectName',
                    title: '项目名称',
                },
                {
                    field: 'projectCode',
                    title: '项目ID',

                },
                {
                    field: 'projectLocation',
                    title: '项目地址',
                    // cellRender: {
                    //     name: 'CellDict',
                    // },
                },
                {
                    field: 'projectStatus',
                    title: '项目状态',
                },
                {
                    field: 'clientName',
                    title: '甲方名称',
                },
                {
                    field: 'estimatedBidDate',
                    title: '预计招标日期',
                },
                {
                    field: 'budget',
                    title: '概算金额(元)',
                },
                {
                    field: 'plantPhaseUnit',
                    title: '分厂/几期/机组',
                },
                {
                    field: 'source',
                    title: '项目来源',
                },
                {
                    field: 'projectType',
                    title: '项目类型',
                },
                {
                    field: 'engineeringType',
                    title: '工程属性',
                },
                {
                    field: 'businessType',
                    title: '业务类型',
                },
                {
                    field: 'salesPerson',
                    title: '归属营销人员',
                },
                {
                    field: 'salesDepartment',
                    title: '归属营销部门',
                },
                {
                    field: 'creator',
                    title: '创建人',
                },
                {
                    field: 'createTime',
                    title: '创建时间',
                },
                {
                    cellRender: {
                        name: 'CellOption',
                        extraProps: {
                            buttons: [
                                {
                                    title: '查看详情',
                                    code: 'view',
                                    display: ({ row }) => {
                                        return DISPLAY_STATE.VISIBLE;
                                    },
                                    disabled({ row }) {
                                        return false;
                                    },
                                    onClick({ row }) {

                                    },
                                    extraProps: {},
                                },
                            ],
                        },
                    },
                },
            ],
        },
        data:[
            {
                id: 'OPP20230001',
                projectName: '智慧城市数据中心建设项目',
                projectCode: 'DC-2023-001',
                projectLocation: '北京市海淀区',
                projectStatus: '前期接触',
                clientName: '北京市政数管局',
                estimatedBidDate: '2023-11-15',
                budget: '28,500,000',
                plantPhaseUnit: '一期/主数据中心',
                source: '政府招标',
                projectType: '新基建',
                engineeringType: '机电安装',
                businessType: 'EPC总包',
                salesPerson: '张经理',
                salesDepartment: '华北营销部',
                creator: '系统管理员',
                createTime: '2023-01-10 09:00:00',
                activityType: '技术交流会',
                activityDate: '2023-02-20'
            },
            {
                id: 'OPP20230002',
                projectName: '新能源充电桩网络工程',
                projectCode: 'EV-2023-002',
                projectLocation: '上海市浦东新区',
                projectStatus: '方案设计',
                clientName: '上海电力公司',
                estimatedBidDate: '2023-09-30',
                budget: '15,200,000',
                plantPhaseUnit: '核心商圈/一期',
                source: '战略合作',
                projectType: '新能源',
                engineeringType: '市政配套',
                businessType: '设备供应',
                salesPerson: '李主管',
                salesDepartment: '华东营销部',
                creator: '市场专员',
                createTime: '2023-02-15 14:30:00',
                activityType: '现场考察',
                activityDate: '2023-03-10'
            },
            // 更多数据...
            {
                id: 'OPP20230003',
                projectName: '医疗云平台升级项目',
                projectCode: 'MED-2023-003',
                projectLocation: '广州市天河区',
                projectStatus: '需求确认',
                clientName: '广东省人民医院',
                estimatedBidDate: '2023-08-25',
                budget: '9,800,000',
                plantPhaseUnit: '主院区/云平台',
                source: '老客户',
                projectType: '医疗信息化',
                engineeringType: '系统集成',
                businessType: '软件服务',
                salesPerson: '王总监',
                salesDepartment: '华南营销部',
                creator: '技术顾问',
                createTime: '2023-03-05 11:20:00',
                activityType: '需求研讨会',
                activityDate: '2023-03-28'
            },
            {
                id: 'OPP20230004',
                projectName: '高校智慧校园改造',
                projectCode: 'EDU-2023-004',
                projectLocation: '武汉市洪山区',
                projectStatus: '招标准备',
                clientName: '武汉大学',
                estimatedBidDate: '2023-10-10',
                budget: '12,500,000',
                plantPhaseUnit: '主校区/信息化',
                source: '公开招标',
                projectType: '教育信息化',
                engineeringType: '智能化改造',
                businessType: '综合解决方案',
                salesPerson: '赵经理',
                salesDepartment: '华中营销部',
                creator: '商务专员',
                createTime: '2023-01-28 16:45:00',
                activityType: '技术宣讲会',
                activityDate: '2023-02-15'
            },
            {
                id: 'OPP20230005',
                projectName: '金融数据中心容灾系统',
                projectCode: 'FIN-2023-005',
                projectLocation: '深圳市南山区',
                projectStatus: '商务谈判',
                clientName: '招商银行',
                estimatedBidDate: '2023-07-15',
                budget: '32,000,000',
                plantPhaseUnit: '主中心/容灾机房',
                source: '定向邀标',
                projectType: '金融科技',
                engineeringType: '系统安全',
                businessType: '专业服务',
                salesPerson: '陈主管',
                salesDepartment: '深圳办事处',
                creator: '产品经理',
                createTime: '2023-02-10 10:15:00',
                activityType: '方案评审会',
                activityDate: '2023-03-05'
            },
            {
                id: 'OPP20230006',
                projectName: '工业4.0智能工厂项目',
                projectCode: 'IND-2023-006',
                projectLocation: '成都市龙泉驿区',
                projectStatus: '合同签订',
                clientName: '长安汽车',
                estimatedBidDate: '2023-06-30',
                budget: '45,000,000',
                plantPhaseUnit: '三工厂/智能制造',
                source: '战略客户',
                projectType: '工业自动化',
                engineeringType: '技术改造',
                businessType: '交钥匙工程',
                salesPerson: '马总监',
                salesDepartment: '西南营销部',
                creator: '解决方案专家',
                createTime: '2023-01-15 13:50:00',
                activityType: '工厂参观',
                activityDate: '2023-02-08'
            },
            {
                id: 'OPP20230007',
                projectName: '跨境电商物流中心',
                projectCode: 'LOG-2023-007',
                projectLocation: '杭州市萧山区',
                projectStatus: '实施中',
                clientName: '阿里巴巴国际站',
                estimatedBidDate: '2023-05-20',
                budget: '18,600,000',
                plantPhaseUnit: '保税区/智能仓',
                source: '生态合作',
                projectType: '物流自动化',
                engineeringType: '新建工程',
                businessType: '设备集成',
                salesPerson: '徐经理',
                salesDepartment: '浙江分公司',
                creator: '行业经理',
                createTime: '2023-01-05 08:30:00',
                activityType: '合作伙伴大会',
                activityDate: '2023-01-25'
            },
            {
                id: 'OPP20230008',
                projectName: '5G基站配套电源系统',
                projectCode: 'TEL-2023-008',
                projectLocation: '南京市江宁区',
                projectStatus: '已验收',
                clientName: '中国移动',
                estimatedBidDate: '2023-04-15',
                budget: '8,500,000',
                plantPhaseUnit: '主城区/基站群',
                source: '框架协议',
                projectType: '通信基建',
                engineeringType: '电力配套',
                businessType: '产品供应',
                salesPerson: '刘经理',
                salesDepartment: '江苏办事处',
                creator: '客户经理',
                createTime: '2022-12-20 15:20:00',
                activityType: '产品展示会',
                activityDate: '2023-01-10'
            }
        ],
        searchConfig: {
            enabled: true,
            fieldSpan: 4,
            fields: [
                {
                    field: 'name',
                    label: '项目名称',
                    component: 'a-input',
                    componentProps: {
                        placeholder: '请输入项目名称',
                    },
                },
                {
                    field: 'name',
                    label: '项目ID',
                    component: 'a-input',
                    componentProps: {
                        placeholder: '请输入项目名称',
                    },
                },
                {
                    field: 'name',
                    label: '项目地址',
                    component: 'a-select',
                    componentProps: {
                        placeholder: '请选择项目地址',
                    },
                },
                {
                    field: 'name',
                    label: '项目状态',
                    component: 'a-select',
                    componentProps: {
                        placeholder: '请选择项目状态',
                    },
                },
            ],
        },
        pagerConfig: {
            enabled: true,
            pageSize: 10,
            pageNum: 1,
            total: 0,
            isFixed: false,
        },
        mounted() {

        },
    },
});
</script>
<style lang="scss" scoped>
.project-init-manage{
    background-color: #fff;
    .tabs{
        padding: 0 24px;

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