admission-admin/src/views/clue/modules/clue-list.vue

60 lines
2.2 KiB
Vue

<template>
<el-card shadow="never" class="!border-none mt-4">
<ProTable ref="proTableRef" :columns="columns" :tableData="tableData" :loading="loading" :maxHeight="530">
<template #listSource="{ row }">
<span>{{ parseClueSource(row.listSource) }}</span>
</template>
<template #situation="{ row }">
<div class="flex items-center gap-2">
<span class="w-[6px] h-[6px] rounded-[3px]" :class="conversionStyle[row.situation]"></span>
<span>{{ parseConversion(row.situation) }}</span>
</div>
</template>
<template #operation="{ row }">
<slot name="operation" :row="row" />
</template>
</ProTable>
</el-card>
</template>
<script setup lang="ts">
import { converStatusEnum, conversionMap } from '@/enums'
const conversionStyle: Record<number, string> = {
[converStatusEnum.UN_RECEIVED]: 'bg-green2',
[converStatusEnum.CONVERTED_PROCESS]: 'bg-primary',
[converStatusEnum.ADD_RELATION]: 'bg-purple',
[converStatusEnum.EXCEPTION]: 'bg-error',
[converStatusEnum.CONVERTED]: 'bg-success',
[converStatusEnum.FAILED]: 'bg-error'
}
defineProps({
loading: {
type: Boolean,
default: false
},
tableData: {
type: Array,
default: () => []
}
})
const proTableRef = ref()
const columns = reactive([
{ prop: 'studentName', label: '学生名字', width: 180 },
{ prop: 'phone', label: '联系电话', width: 180 },
{ prop: 'telemarketingTeacherName', label: '电销老师', width: 180 },
{ prop: 'recruitTeacherName', label: '招生老师', width: 180 },
{ prop: 'listSource', label: '名单来源', width: 180 },
{ prop: 'situation', label: '转化情况', width: 180 },
{ prop: 'operation', label: '操作', fixed: 'right', width: 250 }
])
const clueSource = shallowRef([{ label: '线下名单', value: 0 }])
const parseClueSource = (value: number) => {
const item = clueSource.value.find((item: any) => item.value === value)
return item?.label || ''
}
const parseConversion = computed(() => (value: converStatusEnum) => conversionMap[value])
</script>
<style scoped></style>