BoundLink-Plate-UI/src/views/market-manage/service-provider-manage/service-provider-review/index.vue

<template>
    <BsPageWrapper>
        <bs-table v-bind="tableOptions">
            <template #searchRight>
                <div>
                    <a-button type="primary" >
                        <span>服务商入库登记</span>
                    </a-button>
                </div>
            </template>
        </bs-table>
    </BsPageWrapper>
</template>
<script setup lang="jsx">
import { ref, reactive, onMounted, nextTick } from "vue"
import { useRouter } from "vue-router";
import BsTable, { useBsTable } from '/@/components/BsUi/Table/index.js';
import { DISPLAY_STATE } from '/@/components/BsUi/constant.js';
import useBsDict from "/@/utils/dict.js";
const router = useRouter()
const generateMockData = () => {
  const mockData = [];
  const providerNames = ['阿里云', '腾讯云', '华为云', '百度智能云', '京东云', '金山云', 'UCloud', '青云', '七牛云', '又拍云'];
  const regions = ['中国', '美国', '日本', '德国', '英国', '新加坡', '澳大利亚', '韩国', '印度', '巴西'];
  const provinces = ['北京', '上海', '广东', '江苏', '浙江', '四川', '湖北', '陕西', '重庆', '福建'];
  const cities = ['北京市', '上海市', '广州市', '深圳市', '杭州市', '成都市', '武汉市', '西安市', '重庆市', '厦门市'];
  const districts = ['朝阳区', '浦东新区', '天河区', '南山区', '余杭区', '武侯区', '武昌区', '雁塔区', '渝北区', '思明区'];
  const providerTypes = ['云服务商', '系统集成商', '软件开发商', '硬件供应商', '咨询服务商', '培训服务商', '运维服务商', '安全服务商', '数据分析商', 'AI服务商'];
  const contacts = ['张伟', '李娜', '王芳', '刘强', '陈静', '杨磊', '赵敏', '黄丽', '周军', '吴秀英'];
  
  for (let i = 0; i < 5; i++) {
    mockData.push({
      id: `SP${10000 + i}`,
      interviewStatus: Math.floor(Math.random() * 3), // 0-待审核,1-审核中,2-审核完毕
      flowId: `FLOW${20230000 + i}`,
      storeSource: ['官网注册', '渠道推荐', '展会收集', '客户转介'][Math.floor(Math.random() * 4)],
      providerName: providerNames[Math.floor(Math.random() * providerNames.length)],
      countryRegion: regions[Math.floor(Math.random() * regions.length)],
      provinceName: provinces[Math.floor(Math.random() * provinces.length)],
      cityName: cities[Math.floor(Math.random() * cities.length)],
      districtName: districts[Math.floor(Math.random() * districts.length)],
      address: `${provinces[Math.floor(Math.random() * provinces.length)]}${cities[Math.floor(Math.random() * cities.length)]}${districts[Math.floor(Math.random() * districts.length)]}科技园${Math.floor(Math.random() * 20) + 1}号`,
      providerType: providerTypes[Math.floor(Math.random() * providerTypes.length)],
      contactPeople: contacts[Math.floor(Math.random() * contacts.length)],
      contactPhone: `1${Math.floor(Math.random() * 900000000) + 100000000}`,
      createTime: new Date(Date.now() - Math.floor(Math.random() * 365 * 24 * 60 * 60 * 1000)).toISOString().replace('T', ' ').substring(0, 19)
    });
  }
  
  return mockData;
};
const {
    tableOptions,
    setTablePropsValue: setValue,
    getTablePropsValue: getValue,
} = useBsTable({
    tableOptions: {
        // url: '/supports/provider/queryPage',
        gridOptions: {
            loading: false,
            columns: [
                {
                    type: 'seq',
                    width: 80,
                },
                {
                    field: 'interviewStatus',
                    title: '状态',
                    slots: {
                        default: ({ row }) => {
                            if (row.interviewStatus === 0) {
                                return <span style={{ color: '#ed8a94' }}>未面试</span>
                            } else if (row.interviewStatus === 1) {
                                return <span style={{ color: '#dc861f' }}>面试中</span>
                            } else if (row.interviewStatus === 2) {
                                return <span style={{ color: '#70b603' }}>面试完毕</span>
                            }
                        }
                    }
                },
                {
                    field: 'flowId',
                    title: '流水号',
                },
                {
                    field: 'storeSource',
                    title: '来源',
                },
                {
                    field: 'providerName',
                    title: '服务商名称',
                },
                {
                    field: 'id',
                    title: '服务商ID',
                },
                {
                    field: 'countryRegion',
                    title: '服务商地区',
                },
                {
                    field: 'address',
                    title: '服务商地址',
                    slots: {
                        default: ({ row }) => {
                            return [...new Set(`${(row.countryRegion ?? '') + (row.provinceName ?? '') + (row.cityName ?? '') + (row.districtName ?? '')}`)]
                        }
                    }
                },
                {
                    field: 'providerType',
                    title: '服务商类型',
                    // cellRender: {
                    //     name: 'CellDict',
                    // },
                },
                {
                    field: 'contactPeople',
                    title: '联系人',
                },
                {
                    field: 'contactPhone',
                    title: '联系电话',
                },
                {
                    field: 'createTime',
                    title: '注册时间',
                },
                {
                    // fixed: 'right',
                    cellRender: {
                        name: 'CellOption',
                        extraProps: {
                            buttons: [
                                {
                                    title: '发起面试',
                                    code: 'view',
                                    display: ({ row }) => {
                                        return row.interviewStatus === 0 ? DISPLAY_STATE.VISIBLE : DISPLAY_STATE.HIDDEN;
                                    },
                                    disabled({ row }) {
                                        return false;
                                    },
                                    onClick({ row }) { 
                                        openFlow(row)
                                    },
                                    extraProps: {},
                                },
                                {
                                    title: '查看详情',
                                    code: 'view',
                                    display: ({ row }) => {
                                        return row.interviewStatus !== 0 ? DISPLAY_STATE.VISIBLE : DISPLAY_STATE.HIDDEN;
                                    },
                                    disabled({ row }) {
                                        return false;
                                    },
                                    onClick({ row }) {
                                        router.push('/market-manage/service-provider-manage/detail?id=' + row.id)
                                    },
                                    extraProps: {},
                                },
                            ],
                        },
                    },
                },
            ],
            data:generateMockData(),
        },
        searchConfig: {
            enabled: true,
            fieldSpan: 4,
            fields: [
                {
                    field: 'providerName',
                    label: '服务商名称',
                    component: 'a-input',
                    componentProps: {
                        placeholder: '请输入服务商名称',
                    },
                },
                {
                    field: 'address',
                    label: '服务商地址',
                    component: 'a-input',
                    componentProps: {
                        placeholder: '请输入服务商地址',
                    },
                },
                {
                    field: 'providerType',
                    label: '服务商类型',
                    component: 'a-select',
                    componentProps: {
                        options: useBsDict.getDictList('BLINK_PROVIDER_TYPE'),
                        placeholder: '请输入服务商类型',
                    },
                },
            ],
        },
        tableSearchBeforeBiz() {
            const searchParams = getValue('searchConfig.data');
            setValue('searchConfig.data', { ...searchParams, bizModel: 'INTERVIEW' });
        },
    },
});
function openFlow(row) {
    window.open(import.meta.env.VITE_APP_API_BASE_URL + '/MvcSheet/formWork?flowCode=PROVIDER_REGISTER&tag=START')
}
</script>
<style lang="scss" scoped></style>