1593 lines
56 KiB
Markdown
1593 lines
56 KiB
Markdown
# 阶段3客户管理(个人客户+企业客户) Implementation Plan
|
|
|
|
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
|
|
|
|
**Goal:** 实现个人客户与企业客户的查询/新增/编辑/查看功能,对接真实后端接口(`/api/customer-info/personal/*`、`/api/enterprise-customer/*`),并提供可复用的渠道选择、身份证OCR上传、营业执照上传、个人客户选择弹窗组件。
|
|
|
|
**Architecture:** 沿用阶段1/2已确立的架构:Vue3 `<script setup>` + Ant Design Vue + Pinia + 唯一 axios 实例(`src/api/request.js`);列表页用 `ProTable.vue` 单文件模式;因本阶段表单字段量大且含文件上传/OCR/子表单,新增/编辑改为独立路由页(`PersonalForm.vue`/`EnterpriseForm.vue`,以 `?mode=create|edit|detail&id=` 区分三态),不再用 `<a-modal>`。
|
|
|
|
**Tech Stack:** Vue 3(纯 JS,无 TS)、Vite、Ant Design Vue 4、Pinia、Axios、Vue Router 4;新增 `dayjs` 直接依赖(antd 已通过传递依赖安装,补充声明以便直接 `import`)。
|
|
|
|
## Global Constraints
|
|
|
|
- 项目规则:不写测试用例(用户 CLAUDE.md 明确"不要写测试用例")。因此本计划的"验证步骤"统一替换为:①`npm run build` 确认无语法/构建错误;②必要时用 `npm run dev` 启动后手动访问对应路由检查渲染与控制台无报错,而不是自动化测试。
|
|
- 所有接口响应结构固定 `{code, message, data}`,`code===200` 才算成功,失败仅展示 `message`,不做具体错误码分支(已有 `request.js` 拦截器统一 `message.error`,业务代码只需判断 `code===200` 决定后续动作)。
|
|
- 日期字段格式统一 `yyyy-MM-dd HH:mm:ss`,但本阶段表单里的日期选择器(生效日/到期日/出生日期)只需精确到"日",提交时用 `dayjs(value).format('YYYY-MM-DD 00:00:00')` 补齐时分秒。
|
|
- 个人客户、企业客户均**无删除接口**,列表页不提供删除入口(不违反"批量删除标准交互"惯例,只是本模块暂不适用,因为没有可调用的删除API)。
|
|
- 渠道编号(`channelNo`)只是调用 OCR/上传接口的临时参数,不随表单持久化。
|
|
- 严禁编造 swagger 未定义的字段或接口;所有假设已在设计文档 `docs/superpowers/specs/2026-07-09-phase3-customer-management-design.md` 第7节标注,实施中如发现新的能力缺口,同步追加到该文档与 `缺失的后端接口.md`。
|
|
|
|
---
|
|
|
|
### Task 1: 基础依赖与校验规则
|
|
|
|
**Files:**
|
|
- Modify: `package.json`
|
|
- Modify: `src/utils/validators.js`
|
|
|
|
**Interfaces:**
|
|
- Produces: `isValidIdCard(value)`, `idCardValidatorRule()`, `isValidBusinessLicense(value)`, `businessLicenseValidatorRule()` (供 Task 8/10 表单使用)
|
|
|
|
- [ ] **Step 1: 声明 dayjs 直接依赖**
|
|
|
|
`package.json` 的 `dependencies` 里在 `"@ant-design/icons-vue": "^7.0.0"` 后添加一行:
|
|
|
|
```json
|
|
"@ant-design/icons-vue": "^7.0.0",
|
|
"dayjs": "^1.11.10"
|
|
```
|
|
|
|
- [ ] **Step 2: 安装依赖**
|
|
|
|
Run: `npm install`
|
|
Expected: 无报错,`node_modules/dayjs` 存在且 `package.json`/`package-lock.json` 已更新
|
|
|
|
- [ ] **Step 3: `validators.js` 补充证件号正则与校验规则**
|
|
|
|
在 `src/utils/validators.js` 文件末尾(`passwordStrengthValidatorRule` 函数之后)追加:
|
|
|
|
```js
|
|
// 18位身份证号,末位允许 X/x,不做校验码算术级校验(与手机号正则的"够用不过度设计"风格一致)
|
|
const ID_CARD_REGEX = /^\d{17}[\dXx]$/
|
|
// 统一社会信用代码/营业执照号:15-20位数字与大写字母组合,覆盖新旧两种编码位数
|
|
const BUSINESS_LICENSE_REGEX = /^[0-9A-Z]{15,20}$/
|
|
|
|
export function isValidIdCard(idCard) {
|
|
return ID_CARD_REGEX.test(idCard || '')
|
|
}
|
|
|
|
export function isValidBusinessLicense(license) {
|
|
return BUSINESS_LICENSE_REGEX.test(license || '')
|
|
}
|
|
|
|
export function idCardValidatorRule() {
|
|
return {
|
|
validator: (_rule, value) => {
|
|
if (!value) return Promise.reject(new Error('请输入证件号码'))
|
|
if (!isValidIdCard(value)) return Promise.reject(new Error('请输入正确的18位身份证号'))
|
|
return Promise.resolve()
|
|
}
|
|
}
|
|
}
|
|
|
|
export function businessLicenseValidatorRule() {
|
|
return {
|
|
validator: (_rule, value) => {
|
|
if (!value) return Promise.reject(new Error('请输入营业执照号'))
|
|
if (!isValidBusinessLicense(value)) {
|
|
return Promise.reject(new Error('请输入正确的营业执照号(15-20位数字/大写字母)'))
|
|
}
|
|
return Promise.resolve()
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
- [ ] **Step 4: 验证构建**
|
|
|
|
Run: `npm run build`
|
|
Expected: 构建成功,无报错
|
|
|
|
- [ ] **Step 5: Commit**
|
|
|
|
```bash
|
|
git add package.json package-lock.json src/utils/validators.js
|
|
git commit -m "feat: 新增dayjs依赖与证件号/营业执照号校验规则"
|
|
```
|
|
|
|
---
|
|
|
|
### Task 2: 客户管理 API 封装
|
|
|
|
**Files:**
|
|
- Create: `src/api/customer.js`
|
|
|
|
**Interfaces:**
|
|
- Produces: `fetchPersonalCustomerListApi(data)`, `fetchPersonalCustomerDetailApi(data)`, `createPersonalCustomerApi(data)`, `updatePersonalCustomerApi(data)`, `ocrIdCardApi(data)`, `uploadCustomerFileApi(data)`, `fetchEnterpriseCustomerPageApi(data)`, `fetchEnterpriseCustomerDetailApi(data)`, `createEnterpriseCustomerApi(data)`, `updateEnterpriseCustomerApi(data)` — 均返回 axios Promise,`res.data` 结构为 `{code,message,data}`
|
|
|
|
- [ ] **Step 1: 创建 API 文件**
|
|
|
|
```js
|
|
// src/api/customer.js
|
|
import request from './request'
|
|
|
|
// ---------------- 个人客户 ----------------
|
|
export const fetchPersonalCustomerListApi = (data) => request.post('/api/customer-info/personal/list', data)
|
|
export const fetchPersonalCustomerDetailApi = (data) => request.post('/api/customer-info/personal/detail', data)
|
|
export const createPersonalCustomerApi = (data) => request.post('/api/customer-info/personal/create', data)
|
|
export const updatePersonalCustomerApi = (data) => request.post('/api/customer-info/personal/update', data)
|
|
export const ocrIdCardApi = (data) => request.post('/api/customer-info/personal/ocr-idcard', data)
|
|
// 通用文件上传:个人客户身份证正/反面、企业客户营业执照图片均调用此接口
|
|
export const uploadCustomerFileApi = (data) => request.post('/api/customer-info/personal/upload-file', data)
|
|
|
|
// ---------------- 企业客户 ----------------
|
|
export const fetchEnterpriseCustomerPageApi = (data) => request.post('/api/enterprise-customer/page', data)
|
|
export const fetchEnterpriseCustomerDetailApi = (data) => request.post('/api/enterprise-customer/detail', data)
|
|
export const createEnterpriseCustomerApi = (data) => request.post('/api/enterprise-customer/create', data)
|
|
export const updateEnterpriseCustomerApi = (data) => request.post('/api/enterprise-customer/update', data)
|
|
```
|
|
|
|
- [ ] **Step 2: 验证构建**
|
|
|
|
Run: `npm run build`
|
|
Expected: 构建成功
|
|
|
|
- [ ] **Step 3: Commit**
|
|
|
|
```bash
|
|
git add src/api/customer.js
|
|
git commit -m "feat: 新增客户管理API封装"
|
|
```
|
|
|
|
---
|
|
|
|
### Task 3: OCR 结果映射工具
|
|
|
|
**Files:**
|
|
- Create: `src/utils/ocrMapping.js`
|
|
|
|
**Interfaces:**
|
|
- Consumes: 无(纯函数工具)
|
|
- Produces: `normalizeOcrDate(raw)` 返回 `'YYYY-MM-DD'` 或 `''`;`mapOcrIdCardResult(ocr)` 返回可直接 `Object.assign` 进表单的字段对象(供 Task 9 `PersonalForm.vue` 使用)
|
|
|
|
- [ ] **Step 1: 创建映射工具**
|
|
|
|
```js
|
|
// src/utils/ocrMapping.js
|
|
// 身份证OCR识别结果(OcrIdCardResultVo)字段名与个人客户表单字段名不一致,此处做归一化映射。
|
|
// 凡荣e链OCR返回的日期格式未在接口文档中明确标注,做防御性解析:优先提取8位连续数字重组为 YYYY-MM-DD,
|
|
// 解析失败时返回空字符串,交由用户手动填写(符合需求文档"识别失败允许手动修正"规则)。
|
|
const GENDER_MAP = { 男: 'MALE', 女: 'FEMALE' }
|
|
|
|
export function normalizeOcrDate(raw) {
|
|
if (!raw) return ''
|
|
const digits = String(raw).replace(/[^\d]/g, '')
|
|
if (digits.length !== 8) return ''
|
|
return `${digits.slice(0, 4)}-${digits.slice(4, 6)}-${digits.slice(6, 8)}`
|
|
}
|
|
|
|
export function mapOcrIdCardResult(ocr) {
|
|
const result = {}
|
|
if (!ocr) return result
|
|
if (ocr.name) result.customerName = ocr.name
|
|
if (ocr.sex) result.gender = GENDER_MAP[ocr.sex] || 'UNKNOWN'
|
|
if (ocr.nation) result.ethnicity = ocr.nation
|
|
if (ocr.idcard) result.certificateNumber = ocr.idcard
|
|
if (ocr.address) result.certificateAddress = ocr.address
|
|
if (ocr.authority) result.issuingAuthority = ocr.authority
|
|
if (ocr.birth) {
|
|
const birth = normalizeOcrDate(ocr.birth)
|
|
if (birth) result.birthDate = birth
|
|
}
|
|
if (ocr.validDate && String(ocr.validDate).includes('-')) {
|
|
const [start, end] = String(ocr.validDate).split('-')
|
|
const startDate = normalizeOcrDate(start)
|
|
const endDate = normalizeOcrDate(end)
|
|
if (startDate) result.certificateEffectiveDate = startDate
|
|
if (endDate) result.certificateExpiryDate = endDate
|
|
}
|
|
return result
|
|
}
|
|
```
|
|
|
|
- [ ] **Step 2: 验证构建**
|
|
|
|
Run: `npm run build`
|
|
Expected: 构建成功
|
|
|
|
- [ ] **Step 3: Commit**
|
|
|
|
```bash
|
|
git add src/utils/ocrMapping.js
|
|
git commit -m "feat: 新增身份证OCR结果字段映射工具"
|
|
```
|
|
|
|
---
|
|
|
|
### Task 4: 渠道选择器组件 `ChannelSelect.vue`
|
|
|
|
**Files:**
|
|
- Create: `src/components/ChannelSelect.vue`
|
|
|
|
**Interfaces:**
|
|
- Consumes: `fetchCoreEnterprisePageApi` from `@/api/baseConfig`(阶段2已提供)
|
|
- Produces: `<ChannelSelect v-model:modelValue="channelNo" />`,选项 `value` 为核心企业的 `enterpriseCode`(供 Task 5/6/9/11 使用)
|
|
|
|
- [ ] **Step 1: 创建组件**
|
|
|
|
```vue
|
|
<!-- src/components/ChannelSelect.vue -->
|
|
<template>
|
|
<a-select
|
|
:value="modelValue"
|
|
:options="options"
|
|
:loading="loading"
|
|
show-search
|
|
option-filter-prop="label"
|
|
placeholder="请选择所属渠道"
|
|
style="width: 220px"
|
|
allow-clear
|
|
@update:value="$emit('update:modelValue', $event)"
|
|
/>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue'
|
|
import { fetchCoreEnterprisePageApi } from '@/api/baseConfig'
|
|
|
|
defineProps({
|
|
modelValue: { type: String, default: undefined }
|
|
})
|
|
defineEmits(['update:modelValue'])
|
|
|
|
const options = ref([])
|
|
const loading = ref(false)
|
|
|
|
async function loadChannelOptions() {
|
|
loading.value = true
|
|
try {
|
|
const res = await fetchCoreEnterprisePageApi({ page: 1, pageSize: 200 })
|
|
if (res.data.code === 200) {
|
|
options.value = (res.data.data.records || []).map((item) => ({
|
|
label: item.enterpriseName,
|
|
value: item.enterpriseCode
|
|
}))
|
|
}
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
onMounted(loadChannelOptions)
|
|
</script>
|
|
```
|
|
|
|
- [ ] **Step 2: 验证构建**
|
|
|
|
Run: `npm run build`
|
|
Expected: 构建成功
|
|
|
|
- [ ] **Step 3: Commit**
|
|
|
|
```bash
|
|
git add src/components/ChannelSelect.vue
|
|
git commit -m "feat: 新增渠道选择器组件"
|
|
```
|
|
|
|
---
|
|
|
|
### Task 5: 身份证上传+OCR组件 `IdCardUpload.vue`
|
|
|
|
**Files:**
|
|
- Create: `src/components/IdCardUpload.vue`
|
|
|
|
**Interfaces:**
|
|
- Consumes: `ocrIdCardApi`, `uploadCustomerFileApi` from `@/api/customer`(Task 2)
|
|
- Produces: `<IdCardUpload :side="'front'|'back'" :channel-no="channelNo" v-model:file-no="idCardFrontFileNo" @ocr-result="handleOcrResult" @ocr-status="handleOcrStatus" />`(供 Task 9 使用)
|
|
|
|
- [ ] **Step 1: 创建组件**
|
|
|
|
```vue
|
|
<!-- src/components/IdCardUpload.vue -->
|
|
<template>
|
|
<div class="id-card-upload">
|
|
<a-upload
|
|
list-type="picture-card"
|
|
:show-upload-list="false"
|
|
:before-upload="handleBeforeUpload"
|
|
:disabled="!channelNo || uploading"
|
|
>
|
|
<img v-if="previewUrl" :src="previewUrl" class="preview-img" alt="预览" />
|
|
<div v-else>
|
|
<LoadingOutlined v-if="uploading" />
|
|
<PlusOutlined v-else />
|
|
<div class="upload-text">{{ label }}</div>
|
|
</div>
|
|
</a-upload>
|
|
<div v-if="!channelNo" class="hint">请先选择所属渠道</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed } from 'vue'
|
|
import { message } from 'ant-design-vue'
|
|
import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue'
|
|
import { ocrIdCardApi, uploadCustomerFileApi } from '@/api/customer'
|
|
|
|
const props = defineProps({
|
|
side: { type: String, required: true }, // 'front'人像面 | 'back'国徽面
|
|
channelNo: { type: String, default: undefined }
|
|
})
|
|
const emit = defineEmits(['update:fileNo', 'ocr-result', 'ocr-status'])
|
|
|
|
const uploading = ref(false)
|
|
const previewUrl = ref('')
|
|
const label = computed(() => (props.side === 'front' ? '上传身份证人像面' : '上传身份证国徽面'))
|
|
const fileType = computed(() => (props.side === 'front' ? '01' : '02'))
|
|
|
|
function readAsBase64(file) {
|
|
return new Promise((resolve, reject) => {
|
|
const reader = new FileReader()
|
|
reader.onload = () => resolve(reader.result)
|
|
reader.onerror = reject
|
|
reader.readAsDataURL(file)
|
|
})
|
|
}
|
|
|
|
async function handleBeforeUpload(file) {
|
|
if (!props.channelNo) {
|
|
message.warning('请先选择所属渠道')
|
|
return false
|
|
}
|
|
uploading.value = true
|
|
try {
|
|
const fileBase64 = await readAsBase64(file)
|
|
previewUrl.value = fileBase64
|
|
const [ocrRes, uploadRes] = await Promise.all([
|
|
ocrIdCardApi({ fileBase64, channelNo: props.channelNo, fileType: fileType.value }),
|
|
uploadCustomerFileApi({ fileBase64, channelNo: props.channelNo })
|
|
])
|
|
if (uploadRes.data.code === 200) {
|
|
emit('update:fileNo', uploadRes.data.data.fileNo)
|
|
}
|
|
if (ocrRes.data.code === 200 && ocrRes.data.data && Object.keys(ocrRes.data.data).length > 0) {
|
|
emit('ocr-result', ocrRes.data.data)
|
|
emit('ocr-status', 'SUCCESS')
|
|
} else {
|
|
message.warning('识别失败,请手动填写')
|
|
emit('ocr-status', 'FAILED')
|
|
}
|
|
} catch (e) {
|
|
message.warning('识别失败,请手动填写')
|
|
emit('ocr-status', 'FAILED')
|
|
} finally {
|
|
uploading.value = false
|
|
}
|
|
return false
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.id-card-upload {
|
|
display: inline-block;
|
|
}
|
|
.preview-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
.upload-text {
|
|
margin-top: 8px;
|
|
font-size: 12px;
|
|
}
|
|
.hint {
|
|
color: #ff4d4f;
|
|
font-size: 12px;
|
|
margin-top: 4px;
|
|
}
|
|
</style>
|
|
```
|
|
|
|
- [ ] **Step 2: 验证构建**
|
|
|
|
Run: `npm run build`
|
|
Expected: 构建成功
|
|
|
|
- [ ] **Step 3: Commit**
|
|
|
|
```bash
|
|
git add src/components/IdCardUpload.vue
|
|
git commit -m "feat: 新增身份证上传+OCR识别组件"
|
|
```
|
|
|
|
---
|
|
|
|
### Task 6: 营业执照上传组件 `LicenseUpload.vue`
|
|
|
|
**Files:**
|
|
- Create: `src/components/LicenseUpload.vue`
|
|
|
|
**Interfaces:**
|
|
- Consumes: `uploadCustomerFileApi` from `@/api/customer`
|
|
- Produces: `<LicenseUpload :channel-no="channelNo" v-model:file-no="businessLicenseFileNo" />`(供 Task 11 使用)
|
|
|
|
- [ ] **Step 1: 创建组件**
|
|
|
|
```vue
|
|
<!-- src/components/LicenseUpload.vue -->
|
|
<template>
|
|
<div class="license-upload">
|
|
<a-upload
|
|
list-type="picture-card"
|
|
:show-upload-list="false"
|
|
:before-upload="handleBeforeUpload"
|
|
:disabled="!channelNo || uploading"
|
|
>
|
|
<img v-if="previewUrl" :src="previewUrl" class="preview-img" alt="预览" />
|
|
<div v-else>
|
|
<LoadingOutlined v-if="uploading" />
|
|
<PlusOutlined v-else />
|
|
<div class="upload-text">上传营业执照</div>
|
|
</div>
|
|
</a-upload>
|
|
<div v-if="!channelNo" class="hint">请先选择所属渠道</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
import { message } from 'ant-design-vue'
|
|
import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue'
|
|
import { uploadCustomerFileApi } from '@/api/customer'
|
|
|
|
const props = defineProps({
|
|
channelNo: { type: String, default: undefined }
|
|
})
|
|
const emit = defineEmits(['update:fileNo'])
|
|
|
|
const uploading = ref(false)
|
|
const previewUrl = ref('')
|
|
|
|
function readAsBase64(file) {
|
|
return new Promise((resolve, reject) => {
|
|
const reader = new FileReader()
|
|
reader.onload = () => resolve(reader.result)
|
|
reader.onerror = reject
|
|
reader.readAsDataURL(file)
|
|
})
|
|
}
|
|
|
|
async function handleBeforeUpload(file) {
|
|
if (!props.channelNo) {
|
|
message.warning('请先选择所属渠道')
|
|
return false
|
|
}
|
|
uploading.value = true
|
|
try {
|
|
const fileBase64 = await readAsBase64(file)
|
|
previewUrl.value = fileBase64
|
|
const res = await uploadCustomerFileApi({ fileBase64, channelNo: props.channelNo })
|
|
if (res.data.code === 200) {
|
|
emit('update:fileNo', res.data.data.fileNo)
|
|
message.success('上传成功')
|
|
}
|
|
} finally {
|
|
uploading.value = false
|
|
}
|
|
return false
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.license-upload {
|
|
display: inline-block;
|
|
}
|
|
.preview-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
.upload-text {
|
|
margin-top: 8px;
|
|
font-size: 12px;
|
|
}
|
|
.hint {
|
|
color: #ff4d4f;
|
|
font-size: 12px;
|
|
margin-top: 4px;
|
|
}
|
|
</style>
|
|
```
|
|
|
|
- [ ] **Step 2: 验证构建**
|
|
|
|
Run: `npm run build`
|
|
Expected: 构建成功
|
|
|
|
- [ ] **Step 3: Commit**
|
|
|
|
```bash
|
|
git add src/components/LicenseUpload.vue
|
|
git commit -m "feat: 新增营业执照上传组件"
|
|
```
|
|
|
|
---
|
|
|
|
### Task 7: 个人客户选择弹窗 `PersonalCustomerPicker.vue`
|
|
|
|
**Files:**
|
|
- Create: `src/components/PersonalCustomerPicker.vue`
|
|
|
|
**Interfaces:**
|
|
- Consumes: `fetchPersonalCustomerListApi` from `@/api/customer`(Task 2)、`ProTable.vue`、`OrgTreeSelect.vue`(已有)
|
|
- Produces: 模板 ref 暴露 `show()` 方法打开弹窗;选中后 `emit('select', record)`,`record` 字段含 `id,customerCode,customerName,certificateType,certificateNumber,mobilePhone`(供 Task 9 法定代表人选择、Task 11 股东高管选择使用)
|
|
|
|
- [ ] **Step 1: 创建组件**
|
|
|
|
```vue
|
|
<!-- src/components/PersonalCustomerPicker.vue -->
|
|
<template>
|
|
<a-modal v-model:open="open" title="选择个人客户" width="800px" :footer="null">
|
|
<ProTable
|
|
:columns="columns"
|
|
:fetch-data="loadList"
|
|
:row-selection="false"
|
|
:initial-search="{ organizationIdEq: undefined, customerCodeEq: '', customerNameLike: '' }"
|
|
>
|
|
<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>
|
|
</template>
|
|
<template #bodyCell="{ column, record, index }">
|
|
<template v-if="column.dataIndex === 'index'">{{ index + 1 }}</template>
|
|
<template v-else-if="column.dataIndex === 'action'">
|
|
<a @click="handleSelect(record)">选择</a>
|
|
</template>
|
|
</template>
|
|
</ProTable>
|
|
</a-modal>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
import ProTable from '@/components/ProTable.vue'
|
|
import OrgTreeSelect from '@/components/OrgTreeSelect.vue'
|
|
import { fetchPersonalCustomerListApi } from '@/api/customer'
|
|
|
|
const emit = defineEmits(['select'])
|
|
|
|
const open = ref(false)
|
|
|
|
const columns = [
|
|
{ title: '序号', dataIndex: 'index', width: 60 },
|
|
{ title: '客户编号', dataIndex: 'customerCode' },
|
|
{ title: '客户名称', dataIndex: 'customerName' },
|
|
{ title: '证件号码', dataIndex: 'certificateNumber' },
|
|
{ title: '手机号码', dataIndex: 'mobilePhone' },
|
|
{ title: '操作', dataIndex: 'action', width: 80 }
|
|
]
|
|
|
|
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 handleSelect(record) {
|
|
emit('select', record)
|
|
open.value = false
|
|
}
|
|
|
|
function show() {
|
|
open.value = true
|
|
}
|
|
|
|
defineExpose({ show })
|
|
</script>
|
|
```
|
|
|
|
- [ ] **Step 2: 验证构建**
|
|
|
|
Run: `npm run build`
|
|
Expected: 构建成功
|
|
|
|
- [ ] **Step 3: Commit**
|
|
|
|
```bash
|
|
git add src/components/PersonalCustomerPicker.vue
|
|
git commit -m "feat: 新增个人客户选择弹窗组件"
|
|
```
|
|
|
|
---
|
|
|
|
### Task 8: 个人客户列表页 `PersonalList.vue`
|
|
|
|
**Files:**
|
|
- Create: `src/views/customer/personal/PersonalList.vue`
|
|
|
|
**Interfaces:**
|
|
- Consumes: `fetchPersonalCustomerListApi` from `@/api/customer`,`fetchOrgListAllApi` from `@/api/system`,`ProTable.vue`,`StatusTag.vue`,`OrgTreeSelect.vue`
|
|
- Produces: 路由跳转 `/customer/personal/create`、`/customer/personal/edit?id=`、`/customer/personal/detail?id=`(供 Task 9 消费)
|
|
|
|
- [ ] **Step 1: 创建列表页**
|
|
|
|
```vue
|
|
<!-- 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>
|
|
```
|
|
|
|
- [ ] **Step 2: 验证构建**
|
|
|
|
Run: `npm run build`
|
|
Expected: 构建成功
|
|
|
|
- [ ] **Step 3: Commit**
|
|
|
|
```bash
|
|
git add src/views/customer/personal/PersonalList.vue
|
|
git commit -m "feat: 新增个人客户列表页"
|
|
```
|
|
|
|
---
|
|
|
|
### Task 9: 个人客户表单页 `PersonalForm.vue`
|
|
|
|
**Files:**
|
|
- Create: `src/views/customer/personal/PersonalForm.vue`
|
|
|
|
**Interfaces:**
|
|
- Consumes: `fetchPersonalCustomerDetailApi/createPersonalCustomerApi/updatePersonalCustomerApi` (Task 2)、`ChannelSelect.vue`(Task 4)、`IdCardUpload.vue`(Task 5)、`mapOcrIdCardResult`(Task 3)、`idCardValidatorRule/phoneValidatorRule`(Task 1 / 已有)
|
|
- Produces: 无(叶子页面),路由 query `mode`/`id`
|
|
|
|
- [ ] **Step 1: 创建表单页**
|
|
|
|
```vue
|
|
<!-- src/views/customer/personal/PersonalForm.vue -->
|
|
<template>
|
|
<div class="personal-customer-form-page">
|
|
<a-page-header :title="pageTitle" @back="goBack" />
|
|
<a-card>
|
|
<a-form ref="formRef" layout="vertical" :model="form" :rules="rules" :disabled="isDetail">
|
|
<a-form-item v-if="!isDetail" label="所属渠道" required>
|
|
<ChannelSelect v-model:model-value="channelNo" />
|
|
</a-form-item>
|
|
|
|
<a-form-item label="身份证照片" required>
|
|
<a-space size="large">
|
|
<IdCardUpload
|
|
side="front"
|
|
:channel-no="channelNo"
|
|
v-model:file-no="form.idCardFrontFileNo"
|
|
@ocr-result="handleOcrResult"
|
|
@ocr-status="(status) => (ocrStatus = status)"
|
|
/>
|
|
<IdCardUpload
|
|
side="back"
|
|
:channel-no="channelNo"
|
|
v-model:file-no="form.idCardBackFileNo"
|
|
@ocr-result="handleOcrResult"
|
|
@ocr-status="(status) => (ocrStatus = status)"
|
|
/>
|
|
</a-space>
|
|
</a-form-item>
|
|
|
|
<a-form-item label="所属机构" name="organizationId">
|
|
<OrgTreeSelect v-model="form.organizationId" placeholder="请选择所属机构" />
|
|
</a-form-item>
|
|
<a-form-item label="客户名称" name="customerName">
|
|
<a-input v-model:value="form.customerName" placeholder="请输入客户名称(OCR自动填充)" />
|
|
</a-form-item>
|
|
<a-form-item label="证件类型">
|
|
<a-input value="身份证" disabled />
|
|
</a-form-item>
|
|
<a-form-item label="证件号码" name="certificateNumber">
|
|
<a-input v-model:value="form.certificateNumber" placeholder="请输入证件号码(OCR自动填充)" />
|
|
</a-form-item>
|
|
<a-form-item label="出生日期" name="birthDate">
|
|
<a-date-picker v-model:value="birthDateValue" style="width: 100%" value-format="YYYY-MM-DD" />
|
|
</a-form-item>
|
|
<a-form-item label="性别" name="gender">
|
|
<a-select v-model:value="form.gender">
|
|
<a-select-option value="MALE">男</a-select-option>
|
|
<a-select-option value="FEMALE">女</a-select-option>
|
|
<a-select-option value="UNKNOWN">未知</a-select-option>
|
|
</a-select>
|
|
</a-form-item>
|
|
<a-form-item label="民族" name="ethnicity">
|
|
<a-input v-model:value="form.ethnicity" placeholder="请输入民族(OCR自动填充)" />
|
|
</a-form-item>
|
|
<a-form-item label="证件生效日" name="certificateEffectiveDate">
|
|
<a-date-picker v-model:value="effectiveDateValue" style="width: 100%" value-format="YYYY-MM-DD" />
|
|
</a-form-item>
|
|
<a-form-item label="证件到期日" name="certificateExpiryDate">
|
|
<a-date-picker v-model:value="expiryDateValue" style="width: 100%" value-format="YYYY-MM-DD" />
|
|
<div v-if="isExpired" class="expired-hint">证件已过期,请更换有效证件</div>
|
|
</a-form-item>
|
|
<a-form-item label="签发机关" name="issuingAuthority">
|
|
<a-input v-model:value="form.issuingAuthority" placeholder="请输入签发机关(OCR自动填充)" />
|
|
</a-form-item>
|
|
<a-form-item label="证件地址" name="certificateAddress">
|
|
<a-input v-model:value="form.certificateAddress" placeholder="请输入证件地址(OCR自动填充)" />
|
|
</a-form-item>
|
|
<a-form-item label="职业" name="occupation">
|
|
<a-input v-model:value="form.occupation" placeholder="请输入职业" />
|
|
</a-form-item>
|
|
<a-form-item label="手机号码" name="mobilePhone">
|
|
<a-input v-model:value="form.mobilePhone" placeholder="请输入11位手机号" />
|
|
</a-form-item>
|
|
</a-form>
|
|
|
|
<a-space v-if="!isDetail">
|
|
<a-button type="primary" :loading="submitting" @click="handleSubmit">提交</a-button>
|
|
<a-button @click="goBack">取消</a-button>
|
|
</a-space>
|
|
</a-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive, computed, onMounted } from 'vue'
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import { message } from 'ant-design-vue'
|
|
import dayjs from 'dayjs'
|
|
import ChannelSelect from '@/components/ChannelSelect.vue'
|
|
import IdCardUpload from '@/components/IdCardUpload.vue'
|
|
import OrgTreeSelect from '@/components/OrgTreeSelect.vue'
|
|
import {
|
|
fetchPersonalCustomerDetailApi,
|
|
createPersonalCustomerApi,
|
|
updatePersonalCustomerApi
|
|
} from '@/api/customer'
|
|
import { mapOcrIdCardResult } from '@/utils/ocrMapping'
|
|
import { phoneValidatorRule, idCardValidatorRule } from '@/utils/validators'
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
|
|
const mode = computed(() => route.query.mode || 'create')
|
|
const isDetail = computed(() => mode.value === 'detail')
|
|
const pageTitle = computed(() => ({ create: '新增个人客户', edit: '编辑个人客户', detail: '查看个人客户' }[mode.value]))
|
|
|
|
const channelNo = ref(undefined)
|
|
const ocrStatus = ref('PENDING')
|
|
const submitting = ref(false)
|
|
const formRef = ref(null)
|
|
|
|
const form = reactive({
|
|
id: '',
|
|
organizationId: undefined,
|
|
customerName: '',
|
|
certificateNumber: '',
|
|
birthDate: '',
|
|
gender: 'UNKNOWN',
|
|
ethnicity: '',
|
|
certificateEffectiveDate: '',
|
|
certificateExpiryDate: '',
|
|
issuingAuthority: '',
|
|
certificateAddress: '',
|
|
occupation: '',
|
|
mobilePhone: '',
|
|
idCardFrontFileNo: '',
|
|
idCardBackFileNo: ''
|
|
})
|
|
|
|
const birthDateValue = computed({
|
|
get: () => (form.birthDate ? dayjs(form.birthDate) : undefined),
|
|
set: (val) => (form.birthDate = val ? val.format('YYYY-MM-DD') : '')
|
|
})
|
|
const effectiveDateValue = computed({
|
|
get: () => (form.certificateEffectiveDate ? dayjs(form.certificateEffectiveDate) : undefined),
|
|
set: (val) => (form.certificateEffectiveDate = val ? val.format('YYYY-MM-DD') : '')
|
|
})
|
|
const expiryDateValue = computed({
|
|
get: () => (form.certificateExpiryDate ? dayjs(form.certificateExpiryDate) : undefined),
|
|
set: (val) => (form.certificateExpiryDate = val ? val.format('YYYY-MM-DD') : '')
|
|
})
|
|
|
|
const isExpired = computed(
|
|
() => !!form.certificateExpiryDate && dayjs(form.certificateExpiryDate).isBefore(dayjs(), 'day')
|
|
)
|
|
|
|
const rules = {
|
|
organizationId: [{ required: true, message: '请选择所属机构' }],
|
|
customerName: [{ required: true, message: '请输入客户名称' }],
|
|
certificateNumber: [idCardValidatorRule()],
|
|
mobilePhone: [phoneValidatorRule()]
|
|
}
|
|
|
|
function handleOcrResult(ocrData) {
|
|
Object.assign(form, mapOcrIdCardResult(ocrData))
|
|
}
|
|
|
|
async function loadDetail(id) {
|
|
const res = await fetchPersonalCustomerDetailApi({ id })
|
|
if (res.data.code === 200) {
|
|
Object.assign(form, res.data.data)
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
if (route.query.id) {
|
|
loadDetail(route.query.id)
|
|
}
|
|
})
|
|
|
|
function goBack() {
|
|
router.push('/customer/personal')
|
|
}
|
|
|
|
async function handleSubmit() {
|
|
try {
|
|
await formRef.value.validate()
|
|
} catch {
|
|
return
|
|
}
|
|
submitting.value = true
|
|
try {
|
|
const toFullDate = (d) => (d ? `${d} 00:00:00` : undefined)
|
|
const payload = {
|
|
organizationId: form.organizationId,
|
|
customerName: form.customerName,
|
|
certificateType: 'ID_CARD',
|
|
certificateNumber: form.certificateNumber,
|
|
birthDate: toFullDate(form.birthDate),
|
|
gender: form.gender,
|
|
ethnicity: form.ethnicity,
|
|
certificateEffectiveDate: toFullDate(form.certificateEffectiveDate),
|
|
certificateExpiryDate: toFullDate(form.certificateExpiryDate),
|
|
issuingAuthority: form.issuingAuthority,
|
|
mobilePhone: form.mobilePhone,
|
|
certificateAddress: form.certificateAddress,
|
|
idCardFrontFileNo: form.idCardFrontFileNo,
|
|
idCardBackFileNo: form.idCardBackFileNo,
|
|
occupation: form.occupation,
|
|
ocrStatus: ocrStatus.value
|
|
}
|
|
const res =
|
|
mode.value === 'create'
|
|
? await createPersonalCustomerApi(payload)
|
|
: await updatePersonalCustomerApi({ id: form.id, ...payload })
|
|
if (res.data.code === 200) {
|
|
message.success(mode.value === 'create' ? '新增成功' : '修改成功')
|
|
goBack()
|
|
}
|
|
} finally {
|
|
submitting.value = false
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.expired-hint {
|
|
color: #ff4d4f;
|
|
font-size: 12px;
|
|
margin-top: 4px;
|
|
}
|
|
</style>
|
|
```
|
|
|
|
- [ ] **Step 2: 验证构建**
|
|
|
|
Run: `npm run build`
|
|
Expected: 构建成功
|
|
|
|
- [ ] **Step 3: Commit**
|
|
|
|
```bash
|
|
git add src/views/customer/personal/PersonalForm.vue
|
|
git commit -m "feat: 新增个人客户新增/编辑/查看表单页"
|
|
```
|
|
|
|
---
|
|
|
|
### Task 10: 企业客户列表页 `EnterpriseList.vue`
|
|
|
|
**Files:**
|
|
- Create: `src/views/customer/enterprise/EnterpriseList.vue`
|
|
|
|
**Interfaces:**
|
|
- Consumes: `fetchEnterpriseCustomerPageApi` from `@/api/customer`,`fetchOrgListAllApi` from `@/api/system`
|
|
- Produces: 路由跳转 `/customer/enterprise/create`、`/customer/enterprise/edit?id=`、`/customer/enterprise/detail?id=`(供 Task 11 消费)
|
|
|
|
- [ ] **Step 1: 创建列表页**
|
|
|
|
```vue
|
|
<!-- src/views/customer/enterprise/EnterpriseList.vue -->
|
|
<template>
|
|
<div class="enterprise-customer-list-page">
|
|
<ProTable
|
|
:columns="columns"
|
|
:fetch-data="loadList"
|
|
:row-selection="false"
|
|
:initial-search="{ enterpriseName: '', businessLicense: '', mobilePhone: '' }"
|
|
>
|
|
<template #search="{ form }">
|
|
<a-form-item label="企业名称">
|
|
<a-input v-model:value="form.enterpriseName" placeholder="请输入企业名称" allow-clear style="width: 180px" />
|
|
</a-form-item>
|
|
<a-form-item label="营业执照号">
|
|
<a-input v-model:value="form.businessLicense" placeholder="请输入营业执照号" allow-clear style="width: 200px" />
|
|
</a-form-item>
|
|
<a-form-item label="手机号码">
|
|
<a-input v-model:value="form.mobilePhone" placeholder="请输入手机号码" allow-clear style="width: 160px" />
|
|
</a-form-item>
|
|
</template>
|
|
|
|
<template #actions>
|
|
<a-button v-permission="'customer-enterprise: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 === '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-enterprise: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 { fetchEnterpriseCustomerPageApi } 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: 'enterpriseCode' },
|
|
{ title: '客户名称', dataIndex: 'enterpriseName' },
|
|
{ title: '证件号', dataIndex: 'businessLicense' },
|
|
{ title: '所属机构', dataIndex: 'organizationName' },
|
|
{ title: '资料状态', dataIndex: 'ocrStatus' },
|
|
{ title: '创建时间', dataIndex: 'createTime' },
|
|
{ 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 fetchEnterpriseCustomerPageApi(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/enterprise/create' })
|
|
}
|
|
|
|
function goEdit(record) {
|
|
router.push({ path: '/customer/enterprise/edit', query: { id: record.id } })
|
|
}
|
|
|
|
function goDetail(record) {
|
|
router.push({ path: '/customer/enterprise/detail', query: { id: record.id } })
|
|
}
|
|
</script>
|
|
```
|
|
|
|
- [ ] **Step 2: 验证构建**
|
|
|
|
Run: `npm run build`
|
|
Expected: 构建成功
|
|
|
|
- [ ] **Step 3: Commit**
|
|
|
|
```bash
|
|
git add src/views/customer/enterprise/EnterpriseList.vue
|
|
git commit -m "feat: 新增企业客户列表页"
|
|
```
|
|
|
|
---
|
|
|
|
### Task 11: 企业客户表单页 `EnterpriseForm.vue`
|
|
|
|
**Files:**
|
|
- Create: `src/views/customer/enterprise/EnterpriseForm.vue`
|
|
|
|
**Interfaces:**
|
|
- Consumes: `fetchEnterpriseCustomerDetailApi/createEnterpriseCustomerApi/updateEnterpriseCustomerApi/fetchPersonalCustomerDetailApi` (Task 2)、`ChannelSelect.vue`(Task 4)、`LicenseUpload.vue`(Task 6)、`PersonalCustomerPicker.vue`(Task 7)、`businessLicenseValidatorRule/phoneValidatorRule`(Task 1)
|
|
- Produces: 无(叶子页面)
|
|
|
|
- [ ] **Step 1: 创建表单页**
|
|
|
|
```vue
|
|
<!-- src/views/customer/enterprise/EnterpriseForm.vue -->
|
|
<template>
|
|
<div class="enterprise-customer-form-page">
|
|
<a-page-header :title="pageTitle" @back="goBack" />
|
|
<a-card>
|
|
<a-form ref="formRef" layout="vertical" :model="form" :rules="rules" :disabled="isDetail">
|
|
<a-form-item v-if="!isDetail" label="所属渠道" required>
|
|
<ChannelSelect v-model:model-value="channelNo" />
|
|
</a-form-item>
|
|
|
|
<a-form-item label="营业执照照片">
|
|
<LicenseUpload :channel-no="channelNo" v-model:file-no="form.businessLicenseFileNo" />
|
|
<div v-if="isEdit" class="hint">编辑模式下无法读取历史营业执照图片,如需变更请重新上传</div>
|
|
</a-form-item>
|
|
|
|
<a-form-item label="所属机构" name="organizationId">
|
|
<OrgTreeSelect v-model="form.organizationId" placeholder="请选择所属机构" />
|
|
</a-form-item>
|
|
<a-form-item label="企业名称" name="enterpriseName">
|
|
<a-input v-model:value="form.enterpriseName" placeholder="请输入企业名称" />
|
|
</a-form-item>
|
|
<a-form-item label="证件类型">
|
|
<a-input value="营业执照" disabled />
|
|
</a-form-item>
|
|
<a-form-item label="营业执照号" name="businessLicense">
|
|
<a-input v-model:value="form.businessLicense" placeholder="请输入营业执照号" />
|
|
</a-form-item>
|
|
<a-form-item label="证件生效日" name="certificateEffectiveDate">
|
|
<a-date-picker v-model:value="effectiveDateValue" style="width: 100%" value-format="YYYY-MM-DD" />
|
|
</a-form-item>
|
|
<a-form-item label="证件到期日" name="certificateExpiryDate">
|
|
<a-date-picker v-model:value="expiryDateValue" style="width: 100%" value-format="YYYY-MM-DD" />
|
|
<div v-if="isExpired" class="expired-hint">证件已过期,请更换有效证件</div>
|
|
</a-form-item>
|
|
<a-form-item label="手机号码" name="mobilePhone">
|
|
<a-input v-model:value="form.mobilePhone" placeholder="请输入11位手机号" />
|
|
</a-form-item>
|
|
<a-form-item label="证件地址" name="certificateAddress">
|
|
<a-input v-model:value="form.certificateAddress" placeholder="请输入详细地址" />
|
|
</a-form-item>
|
|
<a-form-item label="经营范围" name="businessScope">
|
|
<a-textarea v-model:value="form.businessScope" placeholder="请输入经营范围" :rows="3" />
|
|
</a-form-item>
|
|
|
|
<a-form-item label="法定代表人">
|
|
<a-space>
|
|
<span v-if="legalRepName">{{ legalRepName }}</span>
|
|
<a-button v-if="!isDetail" @click="openLegalRepPicker">选择</a-button>
|
|
</a-space>
|
|
</a-form-item>
|
|
|
|
<a-form-item v-if="isCreate" label="股东高管信息">
|
|
<a-table :columns="relatedPersonColumns" :data-source="relatedPersonList" :pagination="false" row-key="individualId">
|
|
<template #bodyCell="{ column, record, index }">
|
|
<template v-if="column.dataIndex === 'customerName'">{{ record.customerName }}</template>
|
|
<template v-else-if="column.dataIndex === 'relatedType'">
|
|
<a-select v-model:value="record.relatedType" style="width: 140px">
|
|
<a-select-option value="SHAREHOLDER">股东</a-select-option>
|
|
<a-select-option value="EXECUTIVE">高管</a-select-option>
|
|
<a-select-option value="BENEFICIARY_OWNER">受益所有人</a-select-option>
|
|
</a-select>
|
|
</template>
|
|
<template v-else-if="column.dataIndex === 'certificateNumber'">{{ record.certificateNumber }}</template>
|
|
<template v-else-if="column.dataIndex === 'action'">
|
|
<a @click="removeRelatedPerson(index)">删除</a>
|
|
</template>
|
|
</template>
|
|
</a-table>
|
|
<a-button style="margin-top: 8px" @click="openRelatedPersonPicker">添加股东/高管</a-button>
|
|
</a-form-item>
|
|
<a-form-item v-else label="股东高管信息">
|
|
<div class="hint">股东高管信息仅支持新增时登记,当前接口不支持查询或修改,如需变更请联系技术支持核实数据</div>
|
|
</a-form-item>
|
|
</a-form>
|
|
|
|
<a-space v-if="!isDetail">
|
|
<a-button type="primary" :loading="submitting" @click="handleSubmit">提交</a-button>
|
|
<a-button @click="goBack">取消</a-button>
|
|
</a-space>
|
|
</a-card>
|
|
|
|
<PersonalCustomerPicker ref="legalRepPickerRef" @select="handleLegalRepSelect" />
|
|
<PersonalCustomerPicker ref="relatedPersonPickerRef" @select="handleRelatedPersonSelect" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive, computed, onMounted } from 'vue'
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import { message } from 'ant-design-vue'
|
|
import dayjs from 'dayjs'
|
|
import ChannelSelect from '@/components/ChannelSelect.vue'
|
|
import LicenseUpload from '@/components/LicenseUpload.vue'
|
|
import OrgTreeSelect from '@/components/OrgTreeSelect.vue'
|
|
import PersonalCustomerPicker from '@/components/PersonalCustomerPicker.vue'
|
|
import {
|
|
fetchEnterpriseCustomerDetailApi,
|
|
createEnterpriseCustomerApi,
|
|
updateEnterpriseCustomerApi
|
|
} from '@/api/customer'
|
|
import { fetchPersonalCustomerDetailApi } from '@/api/customer'
|
|
import { phoneValidatorRule, businessLicenseValidatorRule } from '@/utils/validators'
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
|
|
const mode = computed(() => route.query.mode || 'create')
|
|
const isCreate = computed(() => mode.value === 'create')
|
|
const isEdit = computed(() => mode.value === 'edit')
|
|
const isDetail = computed(() => mode.value === 'detail')
|
|
const pageTitle = computed(() => ({ create: '新增企业客户', edit: '编辑企业客户', detail: '查看企业客户' }[mode.value]))
|
|
|
|
const channelNo = ref(undefined)
|
|
const submitting = ref(false)
|
|
const formRef = ref(null)
|
|
const legalRepName = ref('')
|
|
const legalRepPickerRef = ref(null)
|
|
const relatedPersonPickerRef = ref(null)
|
|
const relatedPersonList = ref([])
|
|
|
|
const form = reactive({
|
|
id: '',
|
|
organizationId: undefined,
|
|
enterpriseName: '',
|
|
businessLicense: '',
|
|
certificateEffectiveDate: '',
|
|
certificateExpiryDate: '',
|
|
mobilePhone: '',
|
|
certificateAddress: '',
|
|
businessScope: '',
|
|
businessLicenseFileNo: '',
|
|
legalRepresentativeId: undefined
|
|
})
|
|
|
|
const effectiveDateValue = computed({
|
|
get: () => (form.certificateEffectiveDate ? dayjs(form.certificateEffectiveDate) : undefined),
|
|
set: (val) => (form.certificateEffectiveDate = val ? val.format('YYYY-MM-DD') : '')
|
|
})
|
|
const expiryDateValue = computed({
|
|
get: () => (form.certificateExpiryDate ? dayjs(form.certificateExpiryDate) : undefined),
|
|
set: (val) => (form.certificateExpiryDate = val ? val.format('YYYY-MM-DD') : '')
|
|
})
|
|
const isExpired = computed(
|
|
() => !!form.certificateExpiryDate && dayjs(form.certificateExpiryDate).isBefore(dayjs(), 'day')
|
|
)
|
|
|
|
const rules = {
|
|
organizationId: [{ required: true, message: '请选择所属机构' }],
|
|
enterpriseName: [{ required: true, message: '请输入企业名称' }],
|
|
businessLicense: [businessLicenseValidatorRule()],
|
|
mobilePhone: [phoneValidatorRule()]
|
|
}
|
|
|
|
const relatedPersonColumns = [
|
|
{ title: '客户名称', dataIndex: 'customerName' },
|
|
{ title: '关联人类型', dataIndex: 'relatedType', width: 160 },
|
|
{ title: '证件号码', dataIndex: 'certificateNumber' },
|
|
{ title: '操作', dataIndex: 'action', width: 80 }
|
|
]
|
|
|
|
function openLegalRepPicker() {
|
|
legalRepPickerRef.value.show()
|
|
}
|
|
|
|
function handleLegalRepSelect(record) {
|
|
form.legalRepresentativeId = record.id
|
|
legalRepName.value = record.customerName
|
|
}
|
|
|
|
function openRelatedPersonPicker() {
|
|
relatedPersonPickerRef.value.show()
|
|
}
|
|
|
|
async function handleRelatedPersonSelect(record) {
|
|
// IndividualCustomerListVo 不含证件生效日,需要额外查一次详情补全
|
|
const detailRes = await fetchPersonalCustomerDetailApi({ id: record.id })
|
|
const detail = detailRes.data.code === 200 ? detailRes.data.data : record
|
|
relatedPersonList.value.push({
|
|
individualId: record.id,
|
|
customerName: record.customerName,
|
|
relatedType: 'SHAREHOLDER',
|
|
certificateType: detail.certificateType || 'ID_CARD',
|
|
certificateNumber: detail.certificateNumber,
|
|
certificateEffectiveDate: detail.certificateEffectiveDate,
|
|
certificateExpiryDate: detail.certificateExpiryDate
|
|
})
|
|
}
|
|
|
|
function removeRelatedPerson(index) {
|
|
relatedPersonList.value.splice(index, 1)
|
|
}
|
|
|
|
async function loadDetail(id) {
|
|
const res = await fetchEnterpriseCustomerDetailApi({ id })
|
|
if (res.data.code === 200) {
|
|
Object.assign(form, res.data.data)
|
|
if (res.data.data.legalRepresentativeId) {
|
|
const repRes = await fetchPersonalCustomerDetailApi({ id: res.data.data.legalRepresentativeId })
|
|
if (repRes.data.code === 200) legalRepName.value = repRes.data.data.customerName
|
|
}
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
if (route.query.id) {
|
|
loadDetail(route.query.id)
|
|
}
|
|
})
|
|
|
|
function goBack() {
|
|
router.push('/customer/enterprise')
|
|
}
|
|
|
|
async function handleSubmit() {
|
|
try {
|
|
await formRef.value.validate()
|
|
} catch {
|
|
return
|
|
}
|
|
submitting.value = true
|
|
try {
|
|
const toFullDate = (d) => (d ? `${d} 00:00:00` : undefined)
|
|
const payload = {
|
|
organizationId: form.organizationId,
|
|
enterpriseName: form.enterpriseName,
|
|
businessLicense: form.businessLicense,
|
|
certificateType: 'BUSINESS_LICENSE',
|
|
certificateNumber: form.businessLicense,
|
|
certificateEffectiveDate: toFullDate(form.certificateEffectiveDate),
|
|
certificateExpiryDate: toFullDate(form.certificateExpiryDate),
|
|
mobilePhone: form.mobilePhone,
|
|
certificateAddress: form.certificateAddress,
|
|
businessScope: form.businessScope,
|
|
businessLicenseFileNo: form.businessLicenseFileNo,
|
|
legalRepresentativeId: form.legalRepresentativeId
|
|
}
|
|
let res
|
|
if (isCreate.value) {
|
|
const enterpriseRelatedPersonBtoList = relatedPersonList.value.map((item) => ({
|
|
individualId: item.individualId,
|
|
relatedType: item.relatedType,
|
|
certificateType: item.certificateType,
|
|
certificateNumber: item.certificateNumber,
|
|
certificateEffectiveDate: toFullDate(item.certificateEffectiveDate),
|
|
certificateExpiryDate: toFullDate(item.certificateExpiryDate)
|
|
}))
|
|
res = await createEnterpriseCustomerApi({
|
|
createEnterpriseCustomerBto: { ...payload, enterpriseRelatedPersonBtoList },
|
|
enableOcr: true
|
|
})
|
|
} else {
|
|
res = await updateEnterpriseCustomerApi({ id: form.id, ...payload })
|
|
}
|
|
if (res.data.code === 200) {
|
|
message.success(isCreate.value ? '新增成功' : '修改成功')
|
|
goBack()
|
|
}
|
|
} finally {
|
|
submitting.value = false
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.expired-hint {
|
|
color: #ff4d4f;
|
|
font-size: 12px;
|
|
margin-top: 4px;
|
|
}
|
|
.hint {
|
|
color: #999;
|
|
font-size: 12px;
|
|
margin-top: 4px;
|
|
}
|
|
</style>
|
|
```
|
|
|
|
- [ ] **Step 2: 验证构建**
|
|
|
|
Run: `npm run build`
|
|
Expected: 构建成功
|
|
|
|
- [ ] **Step 3: Commit**
|
|
|
|
```bash
|
|
git add src/views/customer/enterprise/EnterpriseForm.vue
|
|
git commit -m "feat: 新增企业客户新增/编辑/查看表单页"
|
|
```
|
|
|
|
---
|
|
|
|
### Task 12: 路由注册
|
|
|
|
**Files:**
|
|
- Modify: `src/router/componentRegistry.js`
|
|
- Modify: `src/router/dynamic.js`
|
|
|
|
**Interfaces:**
|
|
- Produces: `extraChildRoutes` 数组导出(供 `dynamic.js` 消费),使 `/customer/personal/{create,edit,detail}`、`/customer/enterprise/{create,edit,detail}` 六个非菜单路由可用
|
|
|
|
- [ ] **Step 1: `componentRegistry.js` 新增菜单路由映射与非菜单子路由表**
|
|
|
|
```js
|
|
// src/router/componentRegistry.js
|
|
// routePath -> src/views 下组件相对路径(不含 .vue 扩展名)的手工映射表。
|
|
// 权限字典由权限管理页面动态维护,前端页面组件仍需要开发时手工注册到这里才能被路由解析。
|
|
export const routePathComponentMap = {
|
|
'/system/user': 'system/user/UserList',
|
|
'/system/role': 'system/role/RoleList',
|
|
'/system/org': 'system/org/OrgList',
|
|
'/system/permission': 'system/permission/PermissionList',
|
|
'/base-config/channel': 'base-config/channel/ChannelList',
|
|
'/base-config/manager': 'base-config/manager/ManagerList',
|
|
'/customer/personal': 'customer/personal/PersonalList',
|
|
'/customer/enterprise': 'customer/enterprise/EnterpriseList'
|
|
}
|
|
|
|
// 新增/编辑/查看等表单页不是后端菜单节点(不出现在侧边栏),但仍需要注册为
|
|
// MainLayout 下的可访问路由,由列表页通过 router.push 跳转进入。
|
|
export const extraChildRoutes = [
|
|
{ path: 'customer/personal/create', name: 'customer-personal-create', component: 'customer/personal/PersonalForm' },
|
|
{ path: 'customer/personal/edit', name: 'customer-personal-edit', component: 'customer/personal/PersonalForm' },
|
|
{ path: 'customer/personal/detail', name: 'customer-personal-detail', component: 'customer/personal/PersonalForm' },
|
|
{ path: 'customer/enterprise/create', name: 'customer-enterprise-create', component: 'customer/enterprise/EnterpriseForm' },
|
|
{ path: 'customer/enterprise/edit', name: 'customer-enterprise-edit', component: 'customer/enterprise/EnterpriseForm' },
|
|
{ path: 'customer/enterprise/detail', name: 'customer-enterprise-detail', component: 'customer/enterprise/EnterpriseForm' }
|
|
]
|
|
```
|
|
|
|
- [ ] **Step 2: `dynamic.js` 的 `installDynamicRoutes` 追加非菜单子路由**
|
|
|
|
将 `installDynamicRoutes` 函数改为(文件顶部 `import` 增加 `extraChildRoutes`):
|
|
|
|
```js
|
|
import MainLayout from '@/layouts/MainLayout.vue'
|
|
import { routePathComponentMap, extraChildRoutes } from './componentRegistry'
|
|
|
|
// ...(resolveComponent / collectFirstPath / buildRouteRecords 保持不变)...
|
|
|
|
export function installDynamicRoutes(router, menuTree) {
|
|
const children = buildRouteRecords(menuTree)
|
|
extraChildRoutes.forEach((route) => {
|
|
children.push({
|
|
path: route.path,
|
|
name: route.name,
|
|
component: resolveComponent(route.component)
|
|
})
|
|
})
|
|
router.addRoute({
|
|
path: '/',
|
|
component: MainLayout,
|
|
redirect: collectFirstPath(menuTree) || '/403',
|
|
children
|
|
})
|
|
}
|
|
```
|
|
|
|
- [ ] **Step 3: 验证构建**
|
|
|
|
Run: `npm run build`
|
|
Expected: 构建成功
|
|
|
|
- [ ] **Step 4: Commit**
|
|
|
|
```bash
|
|
git add src/router/componentRegistry.js src/router/dynamic.js
|
|
git commit -m "feat: 注册客户管理列表与表单路由"
|
|
```
|
|
|
|
---
|
|
|
|
### Task 13: 缺失后端接口文档更新 + 整体验证
|
|
|
|
**Files:**
|
|
- Modify: `缺失的后端接口.md`
|
|
|
|
**Interfaces:**
|
|
- 无代码接口,仅文档
|
|
|
|
- [ ] **Step 1: 在 `缺失的后端接口.md` 的 "Part 1:已提供接口契约速查" 追加"客户管理"一节**
|
|
|
|
参照文件现有小节格式(表格形式,列 `接口` / `说明`),在系统管理/基础配置节之后追加:
|
|
|
|
```markdown
|
|
### 1.5 客户管理 —— 个人客户
|
|
|
|
| 接口 | 说明 |
|
|
| --- | --- |
|
|
| `POST /api/customer-info/personal/list` | `{organizationIdEq,customerCodeEq,customerNameLike,certificateNumberEq,page,pageSize}`,响应 `records: IndividualCustomerListVo[]`(仅 `id,organizationId,customerName,certificateType,certificateNumber,mobilePhone,ocrStatus,customerCode`,不含性别/创建人/创建时间) |
|
|
| `POST /api/customer-info/personal/detail` | `{id}` 或 `{customerCode}`,响应 `IndividualCustomerDetailVo` |
|
|
| `POST /api/customer-info/personal/create` | `CreateIndividualCustomerBto`,响应 `data`=新建id |
|
|
| `POST /api/customer-info/personal/update` | `UpdateIndividualCustomerBto` |
|
|
| `POST /api/customer-info/personal/ocr-idcard` | `{fileBase64,channelNo,fileType('01'\|'02')}`,响应 `OcrIdCardResultVo` |
|
|
| `POST /api/customer-info/personal/upload-file` | `{fileBase64,channelNo}`,响应 `{fileNo}`,个人身份证与企业营业执照图片均调用此通用接口 |
|
|
|
|
### 1.6 客户管理 —— 企业客户
|
|
|
|
| 接口 | 说明 |
|
|
| --- | --- |
|
|
| `POST /api/enterprise-customer/page` | `{page,pageSize,enterpriseName,businessLicense,mobilePhone}`,响应 `records: EnterpriseCustomerVo[]` |
|
|
| `POST /api/enterprise-customer/detail` | `{id}`,响应 `EnterpriseCustomerDetailVo` |
|
|
| `POST /api/enterprise-customer/create` | `{createEnterpriseCustomerBto,enableOcr}` |
|
|
| `POST /api/enterprise-customer/update` | `UpdateEnterpriseCustomerBto` |
|
|
```
|
|
|
|
在 "Part 2" 追加以下条目(接续现有编号):
|
|
|
|
```markdown
|
|
- **个人客户/企业客户均无删除接口**,列表页暂不提供删除入口
|
|
- **营业执照无同步OCR识别接口**,`enterprise-customer/create` 的 `enableOcr` 参数用途/时序未文档化,前端按"手动填写+提交时告知后端可异步识别"实现
|
|
- **企业客户股东高管信息(`enterpriseRelatedPersonBtoList`)只能在新增时一次性提交**,`update`/`detail` 接口均不支持读取或修改,编辑模式下该区块前端替换为提示文案,不可编辑
|
|
- **企业客户 `businessLicenseFileNo` 编辑/详情接口读取不到**,编辑模式无法回显已上传的营业执照图片
|
|
- **企业客户分页查询不支持按所属机构/企业编号过滤**,仅支持企业名称/营业执照号/手机号三项
|
|
- **个人客户 `customerCode`(客户编号)生成机制未文档化**,前端创建时不传该字段,交由后端生成
|
|
```
|
|
|
|
- [ ] **Step 2: Commit 文档**
|
|
|
|
```bash
|
|
git add "缺失的后端接口.md"
|
|
git commit -m "docs: 补充客户管理模块接口契约与能力缺口记录"
|
|
```
|
|
|
|
- [ ] **Step 3: 整体构建验证**
|
|
|
|
Run: `npm run build`
|
|
Expected: 构建成功,无报错
|
|
|
|
- [ ] **Step 4: 启动验证**
|
|
|
|
Run: `npm run dev`(如端口被占用则更换端口重试,不终止占用进程)
|
|
手动检查:
|
|
1. 浏览器访问登录页,登录后确认侧边栏出现"客户管理"菜单(需要后端权限管理已配置对应菜单节点,若未配置则此步骤暂时跳过,只验证直接访问路由 `/customer/personal`、`/customer/enterprise` 不报 404/白屏)
|
|
2. 个人客户列表页:查询区渲染正常,点击"新增"跳转到表单页且无控制台报错
|
|
3. 表单页选择渠道后,点击身份证上传区域触发文件选择框(无需真实调后端验证,只需确认组件不报错)
|
|
4. 企业客户列表/表单页同上检查
|
|
Expected: 无 Vue 报错、无 404、页面正常渲染
|
|
|
|
- [ ] **Step 5: 终止开发服务器**
|
|
|
|
确认启动无误后按 `Ctrl+C` 或结束对应进程,不占用端口
|
|
|
|
## Self-Review 记录
|
|
|
|
- **Spec 覆盖检查**:设计文档第2-7节(接口契约/页面架构/交互设计/校验/业务规则/能力缺口)分别对应 Task 2、Task 8-12、Task 4-7、Task 1、Task 9/11、Task 13,无遗漏
|
|
- **占位符扫描**:全文无 TBD/TODO,标注的"以实测为准"均附带具体的防御性实现(如 `normalizeOcrDate` 解析失败返回空串,不是空实现)
|
|
- **类型一致性**:`IdCardUpload`/`LicenseUpload` 的 `update:fileNo` 事件与 `PersonalForm`/`EnterpriseForm` 里 `v-model:file-no` 绑定的字段名(`idCardFrontFileNo`/`idCardBackFileNo`/`businessLicenseFileNo`)一致;`PersonalCustomerPicker` 的 `select` 事件 payload 字段(`id,customerCode,customerName,certificateType,certificateNumber,mobilePhone`)与 `EnterpriseForm` 消费处字段名一致
|