feat: 新增个人客户列表页
halo
parent
e19b1fe0f0
commit
96437e7bc4
|
|
@ -0,0 +1,111 @@
|
||||||
|
<!-- src/views/customer/personal/PersonalList.vue -->
|
||||||
|
<template>
|
||||||
|
<div class="personal-customer-list-page">
|
||||||
|
<ProTable
|
||||||
|
:columns="columns"
|
||||||
|
:fetch-data="loadList"
|
||||||
|
:row-selection="false"
|
||||||
|
:initial-search="{ organizationIdEq: undefined, customerCodeEq: '', customerNameLike: '', certificateNumberEq: '' }"
|
||||||
|
>
|
||||||
|
<template #search="{ form }">
|
||||||
|
<a-form-item label="所属机构">
|
||||||
|
<OrgTreeSelect v-model="form.organizationIdEq" style="width: 180px" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="客户编号">
|
||||||
|
<a-input v-model:value="form.customerCodeEq" placeholder="请输入客户编号" allow-clear style="width: 160px" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="客户名称">
|
||||||
|
<a-input v-model:value="form.customerNameLike" placeholder="请输入客户名称" allow-clear style="width: 160px" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="证件号码">
|
||||||
|
<a-input v-model:value="form.certificateNumberEq" placeholder="请输入证件号码" allow-clear style="width: 180px" />
|
||||||
|
</a-form-item>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #actions>
|
||||||
|
<a-button v-permission="'customer-personal:add'" type="primary" @click="goCreate">
|
||||||
|
<PlusOutlined /> 新增
|
||||||
|
</a-button>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #bodyCell="{ column, record, index }">
|
||||||
|
<template v-if="column.dataIndex === 'index'">{{ index + 1 }}</template>
|
||||||
|
<template v-else-if="column.dataIndex === 'organizationName'">
|
||||||
|
{{ orgNameMap[record.organizationId] || record.organizationId }}
|
||||||
|
</template>
|
||||||
|
<template v-else-if="column.dataIndex === 'certificateType'">身份证</template>
|
||||||
|
<template v-else-if="column.dataIndex === 'ocrStatus'">
|
||||||
|
<StatusTag :value="record.ocrStatus" :map="ocrStatusMap" />
|
||||||
|
</template>
|
||||||
|
<template v-else-if="column.dataIndex === 'action'">
|
||||||
|
<a-space>
|
||||||
|
<a @click="goDetail(record)">查看</a>
|
||||||
|
<a v-permission="'customer-personal:edit'" @click="goEdit(record)">编辑</a>
|
||||||
|
</a-space>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</ProTable>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, onMounted } from 'vue'
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
import { PlusOutlined } from '@ant-design/icons-vue'
|
||||||
|
import ProTable from '@/components/ProTable.vue'
|
||||||
|
import StatusTag from '@/components/StatusTag.vue'
|
||||||
|
import OrgTreeSelect from '@/components/OrgTreeSelect.vue'
|
||||||
|
import { fetchPersonalCustomerListApi } from '@/api/customer'
|
||||||
|
import { fetchOrgListAllApi } from '@/api/system'
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
const orgNameMap = ref({})
|
||||||
|
|
||||||
|
const ocrStatusMap = {
|
||||||
|
PENDING: { text: '待识别', color: 'default' },
|
||||||
|
PROCESSING: { text: '识别中', color: 'blue' },
|
||||||
|
SUCCESS: { text: '识别成功', color: 'green' },
|
||||||
|
FAILED: { text: '识别失败', color: 'red' }
|
||||||
|
}
|
||||||
|
|
||||||
|
const columns = [
|
||||||
|
{ title: '序号', dataIndex: 'index', width: 60 },
|
||||||
|
{ title: '客户编号', dataIndex: 'customerCode' },
|
||||||
|
{ title: '客户名称', dataIndex: 'customerName' },
|
||||||
|
{ title: '证件类型', dataIndex: 'certificateType' },
|
||||||
|
{ title: '证件号码', dataIndex: 'certificateNumber' },
|
||||||
|
{ title: '手机号码', dataIndex: 'mobilePhone' },
|
||||||
|
{ title: '所属机构', dataIndex: 'organizationName' },
|
||||||
|
{ title: '资料状态', dataIndex: 'ocrStatus' },
|
||||||
|
{ title: '操作', dataIndex: 'action', width: 140 }
|
||||||
|
]
|
||||||
|
|
||||||
|
async function loadOrgNameMap() {
|
||||||
|
const res = await fetchOrgListAllApi()
|
||||||
|
if (res.data.code === 200) {
|
||||||
|
orgNameMap.value = Object.fromEntries((res.data.data || []).map((o) => [o.id, o.organizationName]))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(loadOrgNameMap)
|
||||||
|
|
||||||
|
async function loadList(params) {
|
||||||
|
const res = await fetchPersonalCustomerListApi(params)
|
||||||
|
if (res.data.code === 200) {
|
||||||
|
return { list: res.data.data.records || [], total: res.data.data.total || 0 }
|
||||||
|
}
|
||||||
|
return { list: [], total: 0 }
|
||||||
|
}
|
||||||
|
|
||||||
|
function goCreate() {
|
||||||
|
router.push({ path: '/customer/personal/create' })
|
||||||
|
}
|
||||||
|
|
||||||
|
function goEdit(record) {
|
||||||
|
router.push({ path: '/customer/personal/edit', query: { id: record.id } })
|
||||||
|
}
|
||||||
|
|
||||||
|
function goDetail(record) {
|
||||||
|
router.push({ path: '/customer/personal/detail', query: { id: record.id } })
|
||||||
|
}
|
||||||
|
</script>
|
||||||
Loading…
Reference in New Issue