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

<template>
    <div class="service-provider-detail">
        <page-detail-layout :tabs="tabs" v-model:tab-active-key="tabActiveKey" :index-config="indexConfig"
            :title="descData.providerName" v-if="descData !== null">
            <template #titleRight>
                <!-- <img src="/@/assets/images/page-detail-layout/customer/SS_user.png" alt="" /> -->
                <a-tag color="blue">{{ descData.providerGrade ?? '服务商等级空' }}</a-tag>
                <a-tag
                    color="blue">{{ descData.regionType && descData.regionType.length > 0 ? descData.regionType[0].valueName : '类型为空' }}</a-tag>
            </template>

            <template #toolBtn>
                <a-button ghost type="primary" danger size="small">服务商退库</a-button>
                <a-button ghost type="primary" danger size="small">服务商转移</a-button>
                <a-button ghost type="primary" size="small">编辑</a-button>
            </template>

            <template #titleBottom>
                <a-tag color="#f0f4fe" v-for="(tagItem, tagIndex) in tagList" :key="tagIndex">
                    <div class="tag-stl">
                        <img :src="tagItem.icon" alt="" />
                        <span class="title-render">{{ tagItem.title }}</span>
                    </div>
                </a-tag>
            </template>

            <template #basicInfo>
                <BasicInfo :data="descData" />
            </template>
            <template #warehouseAudit>
                <WarehouseAudit :id="id" />
            </template>
            <template #guaranteeSum>
                <GuaranteeSum :id="id" />
            </template>
            <template #progressStatus>
                <ProgressStatus :id="id" />
            </template>
            <template #cooperativeProject>
                <CooperativeProject :id="id" />
            </template>
            <template #settlementManage>
                <SettlementManage :id="id" />
            </template>
            <template #providerEvaluation>
                <ProviderEvaluation :id="id" />
            </template>
            <template #accountManage>
                <AccountManage :id="id" />
            </template>
            <template #documentMaterials>
                <DocumentMaterials :id="id" />
            </template>
        </page-detail-layout>
    </div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import PageDetailLayout from '/@/components/business/page-detail-layout/index.vue';
import selectedIcon from '/@/assets/images/page-detail-layout/selectedIcon.png';
import unSelectedIcon from '/@/assets/images/page-detail-layout/unSelectedIcon.png';
import BasicInfo from './components/basic-info/index.vue'
import WarehouseAudit from './components/warehouse-audit/index.vue'
import GuaranteeSum from './components/guarantee-sum/index.vue'
import ProgressStatus from './components/progress-status/index.vue'
import CooperativeProject from './components/cooperative-project/index.vue'
import SettlementManage from './components/settlement-manage/index.vue'
import ProviderEvaluation from './components/provider-evaluation/index.vue'
import AccountManage from './components/account-manage/index.vue'
import DocumentMaterials from './components/document-materials/index.vue'
import { getProviderDetail } from '/@/api/market-manage/service-provider-manage';
const route = useRoute()
const { id } = route.query
const descData = ref(null)
onMounted(() => {
    getProviderDetail(id).then((res) => {
        descData.value = res.data
        // descData.value.countryRegion = '02'
        indexConfig.value = {
            sourceData: [
                {
                    label: '合同数量',
                    value: '',
                },
                {
                    label: '累计合同额',
                    value: '',
                },
                {
                    label: '联系人',
                    value: descData.value['contactPeople'],
                },
                {
                    label: '联系电话',
                    value: descData.value['contactPhone'],
                },
                {
                    label: '归属营销人员',
                    value: '',
                },
            ],
            labelKey: 'label',
            valueKey: 'value',
        }
        tagList.value = [
            {
                title: descData.value.providerType&&descData.value.providerType.length>0?descData.value.providerType[0].valueName:'类型为空',
                // icon: getImgUrl('icon-tianyancha'),
            },
            {
                title: descData.value.id??'',
                // icon: getImgUrl('icon-xiansuodengji'),
            },
            {
                title: descData.value.address??'地址未填',
                // icon: getImgUrl('icon-biaoqianguanli'),
            },
        ]
    })
})
const tabActiveKey = ref('0');

const tabs = ref([
    {
        title: '基本信息',
        key: '0',
        slotName: 'basicInfo',
        selectedIcon: selectedIcon,
        unSelectedIcon: unSelectedIcon,
    },
    {
        title: '入库审核',
        key: '1',
        slotName: 'warehouseAudit',
        selectedIcon: selectedIcon,
        unSelectedIcon: unSelectedIcon,
    },
    {
        title: '保证金&开票',
        key: '2',
        slotName: 'guaranteeSum',
        selectedIcon: selectedIcon,
        unSelectedIcon: unSelectedIcon,
    },
    {
        title: '跟进情况',
        key: '3',
        slotName: 'progressStatus',
        selectedIcon: selectedIcon,
        unSelectedIcon: unSelectedIcon,
    },
    {
        title: '合作项目',
        key: '4',
        slotName: 'cooperativeProject',
        selectedIcon: selectedIcon,
        unSelectedIcon: unSelectedIcon,
    },
    {
        title: '结算管理',
        key: '5',
        slotName: 'settlementManage',
        selectedIcon: selectedIcon,
        unSelectedIcon: unSelectedIcon,
    },
    {
        title: '服务商评价',
        key: '6',
        slotName: 'providerEvaluation',
        selectedIcon: selectedIcon,
        unSelectedIcon: unSelectedIcon,
    },
    {
        title: '账号/IP管理',
        key: '7',
        slotName: 'accountManage',
        selectedIcon: selectedIcon,
        unSelectedIcon: unSelectedIcon,
    },
    {
        title: '文件资料',
        key: '8',
        slotName: 'documentMaterials',
        selectedIcon: selectedIcon,
        unSelectedIcon: unSelectedIcon,
    },
]);

const tagList = ref([
    {
        title: '企业单位',
        // icon: getImgUrl('icon-tianyancha'),
    },
    {
        title: '',
        // icon: getImgUrl('icon-xiansuodengji'),
    },
    {
        title: '地址',
        // icon: getImgUrl('icon-biaoqianguanli'),
    },
])
const indexConfig = ref({
    sourceData: [
        {
            label: '合同数量',
            value: '',
        },
        {
            label: '累计合同额',
            value: '',
        },
        {
            label: '联系人',
            value: '',
        },
        {
            label: '联系电话',
            value: '',
        },
        {
            label: '归属营销人员',
            value: '',
        },
    ],
    labelKey: 'label',
    valueKey: 'value',
})
</script>
<style lang="scss" scoped>
.service-provider-detail {
    width: 100%;

    .tag-stl {
        display: flex;
        gap: 5px;
        align-items: center;

        .title-render {
            color: #999999;
            font-size: 14px;
        }
    }
}
</style>