增加相关功能
This commit is contained in:
hero920103 committed
1 parent
44a03186da
commit
d8936d9730
30 files changed
+4503
-2412
No files matched your search
@@ -1,184 +0,0 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
:model-value="visible"
|
||||
:title="isEdit ? '编辑账套' : '新增账套'"
|
||||
width="640px"
|
||||
:close-on-click-modal="false"
|
||||
@update:model-value="handleClose"
|
||||
@closed="handleClosed"
|
||||
>
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
label-width="110px"
|
||||
label-position="right"
|
||||
>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="账套编码" prop="set_code">
|
||||
<el-input v-model="form.set_code" placeholder="请输入账套编码" :disabled="isEdit" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="账套名称" prop="set_name">
|
||||
<el-input v-model="form.set_name" placeholder="请输入账套名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="公司名称" prop="company_name">
|
||||
<el-input v-model="form.company_name" placeholder="请输入公司名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="公司税号" prop="company_tax_no">
|
||||
<el-input v-model="form.company_tax_no" placeholder="请输入纳税人识别号" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="启用年度" prop="start_year">
|
||||
<el-input-number v-model="form.start_year" :min="2000" :max="2100" style="width: 100%" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="启用月份" prop="start_month">
|
||||
<el-select v-model="form.start_month" placeholder="请选择" style="width: 100%">
|
||||
<el-option v-for="m in 12" :key="m" :label="m + '月'" :value="m" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="会计制度" prop="accounting_standard">
|
||||
<el-select v-model="form.accounting_standard" placeholder="请选择" style="width: 100%">
|
||||
<el-option label="企业会计准则" value="1" />
|
||||
<el-option label="小企业会计准则" value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="记账本位币" prop="currency">
|
||||
<el-select v-model="form.currency" placeholder="请选择" style="width: 100%">
|
||||
<el-option label="人民币(CNY)" value="CNY" />
|
||||
<el-option label="美元(USD)" value="USD" />
|
||||
<el-option label="欧元(EUR)" value="EUR" />
|
||||
<el-option label="港币(HKD)" value="HKD" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="默认税率(%)" prop="tax_rate">
|
||||
<el-input-number v-model="form.tax_rate" :min="0" :max="100" :precision="2" :step="0.5" style="width: 100%" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="form.status" placeholder="请选择" style="width: 100%">
|
||||
<el-option label="启用" value="1" />
|
||||
<el-option label="禁用" value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input
|
||||
v-model="form.remark"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="请输入备注信息"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<el-button @click="handleClose">取消</el-button>
|
||||
<el-button type="primary" :loading="submitting" @click="handleSubmit">保存</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, watch } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { createAccountSet, updateAccountSet } from '@/api/accountSet'
|
||||
|
||||
const props = defineProps({
|
||||
visible: { type: Boolean, default: false },
|
||||
editData: { type: Object, default: null }
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:visible', 'success'])
|
||||
|
||||
const formRef = ref()
|
||||
const submitting = ref(false)
|
||||
const isEdit = ref(false)
|
||||
|
||||
const defaultForm = () => ({
|
||||
set_code: '',
|
||||
set_name: '',
|
||||
company_name: '',
|
||||
company_tax_no: '',
|
||||
start_year: new Date().getFullYear(),
|
||||
start_month: 1,
|
||||
accounting_standard: '1',
|
||||
currency: 'CNY',
|
||||
tax_rate: 13.00,
|
||||
status: '1',
|
||||
remark: ''
|
||||
})
|
||||
|
||||
const form = reactive(defaultForm())
|
||||
|
||||
const rules = {
|
||||
set_code: [{ required: true, message: '请输入账套编码', trigger: 'blur' }],
|
||||
set_name: [{ required: true, message: '请输入账套名称', trigger: 'blur' }]
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(val) => {
|
||||
if (val) {
|
||||
if (props.editData) {
|
||||
isEdit.value = true
|
||||
Object.assign(form, props.editData)
|
||||
} else {
|
||||
isEdit.value = false
|
||||
Object.assign(form, defaultForm())
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
function handleClose() {
|
||||
emit('update:visible', false)
|
||||
}
|
||||
|
||||
function handleClosed() {
|
||||
formRef.value?.resetFields()
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
if (!formRef.value) return
|
||||
await formRef.value.validate(async (valid) => {
|
||||
if (!valid) return
|
||||
submitting.value = true
|
||||
try {
|
||||
const payload = { ...form }
|
||||
if (isEdit.value) {
|
||||
await updateAccountSet(props.editData.id, payload)
|
||||
ElMessage.success('更新成功')
|
||||
} else {
|
||||
await createAccountSet(payload)
|
||||
ElMessage.success('创建成功')
|
||||
}
|
||||
emit('success')
|
||||
handleClose()
|
||||
} catch (e) {
|
||||
ElMessage.error(e.message || '操作失败')
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
@@ -1,253 +0,0 @@
|
||||
<template>
|
||||
<div class="account-set-page">
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<h2>账套管理</h2>
|
||||
<p>管理企业账套信息，支持多账套切换与独立核算</p>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<el-button type="primary" :icon="Plus" @click="openCreate">新增账套</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-bar">
|
||||
<el-form :inline="true" :model="filters" @submit.prevent>
|
||||
<el-form-item>
|
||||
<el-input
|
||||
v-model="filters.keyword"
|
||||
clearable
|
||||
placeholder="搜索账套名称"
|
||||
:prefix-icon="Search"
|
||||
style="width: 220px"
|
||||
@keyup.enter="handleSearch"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态">
|
||||
<el-select v-model="filters.status" clearable placeholder="全部" style="width: 120px">
|
||||
<el-option label="启用" value="1" />
|
||||
<el-option label="禁用" value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
|
||||
<el-button :icon="Refresh" @click="resetFilters">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<div class="table-container" v-loading="loading">
|
||||
<el-table :data="tableData" stripe border>
|
||||
<el-table-column type="index" label="#" width="60" align="center" />
|
||||
<el-table-column prop="set_code" label="账套编码" width="120" />
|
||||
<el-table-column prop="set_name" label="账套名称" min-width="160" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
<span class="name-cell">{{ row.set_name }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="company_name" label="公司名称" min-width="160" show-overflow-tooltip />
|
||||
<el-table-column prop="company_tax_no" label="税号" width="180" show-overflow-tooltip />
|
||||
<el-table-column label="启用期间" width="120" align="center">
|
||||
<template #default="{ row }">
|
||||
<span>{{ row.start_year }}-{{ String(row.start_month).padStart(2, '0') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="accounting_standard" label="会计制度" width="130" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag size="small" :type="row.accounting_standard === '1' ? 'primary' : 'info'">
|
||||
{{ row.accounting_standard === '1' ? '企业会计准则' : '小企业会计准则' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="currency" label="币种" width="80" align="center" />
|
||||
<el-table-column prop="tax_rate" label="税率(%)" width="90" align="center" />
|
||||
<el-table-column prop="status" label="状态" width="80" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="row.status === '1' ? 'success' : 'info'" size="small">
|
||||
{{ row.status === '1' ? '启用' : '禁用' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="180" align="center" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button link type="primary" size="small" @click="openEdit(row)">编辑</el-button>
|
||||
<el-button link type="primary" size="small" @click="handleToggleStatus(row)">
|
||||
{{ row.status === '1' ? '禁用' : '启用' }}
|
||||
</el-button>
|
||||
<el-button link type="danger" size="small" @click="handleDelete(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="pagination">
|
||||
<el-pagination
|
||||
v-model:current-page="pagination.page"
|
||||
v-model:page-size="pagination.pageSize"
|
||||
:total="pagination.total"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="fetchList"
|
||||
@current-change="fetchList"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<AccountSetEdit
|
||||
v-model:visible="editVisible"
|
||||
:edit-data="currentEditData"
|
||||
@success="fetchList"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { Plus, Search, Refresh } from '@element-plus/icons-vue'
|
||||
import { getAccountSetList, deleteAccountSet, toggleAccountSetStatus } from '@/api/accountSet'
|
||||
import AccountSetEdit from './components/edit.vue'
|
||||
|
||||
const loading = ref(false)
|
||||
const tableData = ref([])
|
||||
const editVisible = ref(false)
|
||||
const currentEditData = ref(null)
|
||||
|
||||
const filters = reactive({
|
||||
keyword: '',
|
||||
status: ''
|
||||
})
|
||||
|
||||
const pagination = reactive({
|
||||
page: 1,
|
||||
pageSize: 20,
|
||||
total: 0
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
fetchList()
|
||||
})
|
||||
|
||||
async function fetchList() {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getAccountSetList({
|
||||
page: pagination.page,
|
||||
pageSize: pagination.pageSize,
|
||||
...filters
|
||||
})
|
||||
if (res.code === 200) {
|
||||
tableData.value = res.data.list || []
|
||||
pagination.total = res.data.total || 0
|
||||
}
|
||||
} catch (e) {
|
||||
ElMessage.error(e.message || '查询失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function handleSearch() {
|
||||
pagination.page = 1
|
||||
fetchList()
|
||||
}
|
||||
|
||||
function resetFilters() {
|
||||
filters.keyword = ''
|
||||
filters.status = ''
|
||||
pagination.page = 1
|
||||
fetchList()
|
||||
}
|
||||
|
||||
function openCreate() {
|
||||
currentEditData.value = null
|
||||
editVisible.value = true
|
||||
}
|
||||
|
||||
function openEdit(row) {
|
||||
currentEditData.value = { ...row }
|
||||
editVisible.value = true
|
||||
}
|
||||
|
||||
async function handleToggleStatus(row) {
|
||||
const newStatus = row.status === '1' ? '0' : '1'
|
||||
const action = newStatus === '1' ? '启用' : '禁用'
|
||||
try {
|
||||
await ElMessageBox.confirm(`确定要${action}账套「${row.set_name}」吗？`, '提示', {
|
||||
type: 'warning'
|
||||
})
|
||||
await toggleAccountSetStatus(row.id, newStatus)
|
||||
ElMessage.success(`${action}成功`)
|
||||
fetchList()
|
||||
} catch (e) {
|
||||
if (e !== 'cancel') {
|
||||
ElMessage.error(e.message || '操作失败')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete(row) {
|
||||
try {
|
||||
await ElMessageBox.confirm(`确定要删除账套「${row.set_name}」吗？删除后不可恢复。`, '删除确认', {
|
||||
type: 'warning'
|
||||
})
|
||||
await deleteAccountSet(row.id)
|
||||
ElMessage.success('删除成功')
|
||||
fetchList()
|
||||
} catch (e) {
|
||||
if (e !== 'cancel') {
|
||||
ElMessage.error(e.message || '删除失败')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.account-set-page {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 20px;
|
||||
|
||||
h2 {
|
||||
margin: 0 0 6px 0;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.filter-bar {
|
||||
background: var(--el-bg-color);
|
||||
padding: 16px 16px 0;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 16px;
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
}
|
||||
|
||||
.table-container {
|
||||
background: var(--el-bg-color);
|
||||
padding: 16px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
}
|
||||
|
||||
.name-cell {
|
||||
font-weight: 500;
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin-top: 16px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,351 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
:model-value="visible"
|
||||
@update:model-value="emit('update:visible', $event)"
|
||||
:title="type === 'supplier' ? '智能添加供应商' : '智能添加客户'"
|
||||
width="780px"
|
||||
:close-on-click-modal="false"
|
||||
@closed="handleClosed"
|
||||
>
|
||||
<!-- 第一步：输入名称 -->
|
||||
<div v-if="step === 1" class="step-input">
|
||||
<el-form label-width="100px">
|
||||
<el-form-item :label="type === 'supplier' ? '供应商名称' : '客户名称'" required>
|
||||
<el-input
|
||||
v-model="companyName"
|
||||
:placeholder="type === 'supplier' ? '请输入供应商全称或简称' : '请输入客户全称或简称'"
|
||||
@keyup.enter="handleGenerate"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-alert
|
||||
title="AI将根据公司名称自动生成企业信息、联系方式、开票信息等，生成后可手动修改"
|
||||
type="info"
|
||||
:closable="false"
|
||||
show-icon
|
||||
/>
|
||||
</el-form>
|
||||
<div class="step-actions">
|
||||
<el-button type="primary" :icon="Cpu" :loading="generating" @click="handleGenerate">
|
||||
智能生成
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 第二步：确认编辑 -->
|
||||
<div v-else class="step-confirm">
|
||||
<div class="confirm-header">
|
||||
<el-alert
|
||||
title="AI已生成以下信息，请检查确认，可直接修改错误内容，确认无误后点击保存"
|
||||
type="success"
|
||||
:closable="false"
|
||||
show-icon
|
||||
/>
|
||||
</div>
|
||||
|
||||
<el-form ref="formRef" :model="form" label-width="110px" class="smart-form">
|
||||
<el-divider content-position="left">基本信息</el-divider>
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="12">
|
||||
<el-form-item :label="type === 'supplier' ? '供应商名称' : '客户名称'">
|
||||
<el-input v-model="form.name" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="所属行业">
|
||||
<el-input v-model="form.industry" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="企业类型">
|
||||
<el-input v-model="form.enterprise_type" placeholder="如：有限责任公司" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="纳税人资质">
|
||||
<el-select v-model="form.taxpayer_qualification" placeholder="请选择" style="width: 100%">
|
||||
<el-option label="一般纳税人" value="一般纳税人" />
|
||||
<el-option label="小规模纳税人" value="小规模纳税人" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="注册资本">
|
||||
<el-input v-model="form.registered_capital" placeholder="如：100万元" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="实缴资本">
|
||||
<el-input v-model="form.paid_capital" placeholder="如：50万元" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="成立日期">
|
||||
<el-date-picker v-model="form.establish_date" type="date" value-format="YYYY-MM-DD" style="width: 100%" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="行政区划">
|
||||
<el-input v-model="form.administrative_division" placeholder="如：江苏省连云港市海州区" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="经营范围">
|
||||
<el-input v-model="form.business_scope" type="textarea" :rows="2" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="公司地址">
|
||||
<el-input v-model="form.address" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-divider content-position="left">联系信息</el-divider>
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="联系人">
|
||||
<el-input v-model="form.contact_person" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="联系电话">
|
||||
<el-input v-model="form.contact_phone" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="邮箱">
|
||||
<el-input v-model="form.contact_email" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-divider content-position="left">开票信息</el-divider>
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="发票抬头">
|
||||
<el-input v-model="form.invoice_title" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="税号">
|
||||
<el-input v-model="form.tax_number" placeholder="18位统一社会信用代码" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="开户银行">
|
||||
<el-input v-model="form.bank_name" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="银行账号">
|
||||
<el-input v-model="form.bank_account" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="注册地址">
|
||||
<el-input v-model="form.registered_address" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="注册电话">
|
||||
<el-input v-model="form.registered_phone" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-divider content-position="left">备注</el-divider>
|
||||
<el-form-item label="备注">
|
||||
<el-input v-model="form.remark" type="textarea" :rows="2" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<el-button v-if="step === 2" @click="step = 1">返回修改名称</el-button>
|
||||
<el-button @click="emit('update:visible', false)">取消</el-button>
|
||||
<el-button
|
||||
v-if="step === 2"
|
||||
type="primary"
|
||||
:loading="saving"
|
||||
@click="handleSave"
|
||||
>确认保存</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { Cpu } from '@element-plus/icons-vue'
|
||||
import { smartGenerateCompany } from '@/api/ai'
|
||||
import { createSupplier } from '@/api/supplier'
|
||||
import { createCustomer } from '@/api/customer'
|
||||
|
||||
const props = defineProps({
|
||||
visible: { type: Boolean, default: false },
|
||||
type: { type: String, default: 'supplier' } // supplier / customer
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:visible', 'success'])
|
||||
|
||||
const step = ref(1)
|
||||
const companyName = ref('')
|
||||
const generating = ref(false)
|
||||
const saving = ref(false)
|
||||
const formRef = ref()
|
||||
|
||||
const defaultForm = () => ({
|
||||
name: '',
|
||||
industry: '',
|
||||
enterprise_type: '',
|
||||
taxpayer_qualification: '',
|
||||
registered_capital: '',
|
||||
paid_capital: '',
|
||||
establish_date: '',
|
||||
administrative_division: '',
|
||||
business_scope: '',
|
||||
address: '',
|
||||
contact_person: '',
|
||||
contact_phone: '',
|
||||
contact_email: '',
|
||||
invoice_title: '',
|
||||
tax_number: '',
|
||||
bank_name: '',
|
||||
bank_account: '',
|
||||
registered_address: '',
|
||||
registered_phone: '',
|
||||
remark: ''
|
||||
})
|
||||
|
||||
const form = reactive(defaultForm())
|
||||
|
||||
async function handleGenerate() {
|
||||
if (!companyName.value.trim()) {
|
||||
ElMessage.warning('请输入公司名称')
|
||||
return
|
||||
}
|
||||
|
||||
generating.value = true
|
||||
try {
|
||||
const res = await smartGenerateCompany({
|
||||
company_name: companyName.value.trim(),
|
||||
type: props.type
|
||||
})
|
||||
if (res.code === 200) {
|
||||
if (res.data.parsed && res.data.data) {
|
||||
const data = res.data.data
|
||||
const nameField = props.type === 'supplier' ? 'supplier_name' : 'customer_name'
|
||||
form.name = data[nameField] || data.name || companyName.value.trim()
|
||||
form.industry = data.industry || ''
|
||||
form.enterprise_type = data.enterprise_type || ''
|
||||
form.taxpayer_qualification = data.taxpayer_qualification || ''
|
||||
form.registered_capital = data.registered_capital || ''
|
||||
form.paid_capital = data.paid_capital || ''
|
||||
form.establish_date = data.establish_date || ''
|
||||
form.administrative_division = data.administrative_division || ''
|
||||
form.business_scope = data.business_scope || ''
|
||||
form.address = data.address || ''
|
||||
form.contact_person = data.contact_person || ''
|
||||
form.contact_phone = data.contact_phone || ''
|
||||
form.contact_email = data.contact_email || ''
|
||||
form.invoice_title = data.invoice_title || form.name
|
||||
form.tax_number = data.tax_number || ''
|
||||
form.bank_name = data.bank_name || ''
|
||||
form.bank_account = data.bank_account || ''
|
||||
form.registered_address = data.registered_address || ''
|
||||
form.registered_phone = data.registered_phone || ''
|
||||
form.remark = data.remark || ''
|
||||
} else {
|
||||
// 解析失败，只填名称
|
||||
form.name = companyName.value.trim()
|
||||
ElMessage.warning('AI返回格式异常，请手动填写其他信息')
|
||||
}
|
||||
step.value = 2
|
||||
}
|
||||
} catch (e) {
|
||||
ElMessage.error(e.message || '生成失败')
|
||||
} finally {
|
||||
generating.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSave() {
|
||||
if (!form.name.trim()) {
|
||||
ElMessage.warning('公司名称不能为空')
|
||||
return
|
||||
}
|
||||
|
||||
saving.value = true
|
||||
try {
|
||||
const payload = {
|
||||
supplier_name: form.name,
|
||||
customer_name: form.name,
|
||||
industry: form.industry,
|
||||
enterprise_type: form.enterprise_type,
|
||||
taxpayer_qualification: form.taxpayer_qualification,
|
||||
registered_capital: form.registered_capital,
|
||||
paid_capital: form.paid_capital,
|
||||
establish_date: form.establish_date,
|
||||
administrative_division: form.administrative_division,
|
||||
business_scope: form.business_scope,
|
||||
address: form.address,
|
||||
contact_person: form.contact_person,
|
||||
contact_phone: form.contact_phone,
|
||||
contact_email: form.contact_email,
|
||||
invoice_title: form.invoice_title,
|
||||
tax_number: form.tax_number,
|
||||
bank_name: form.bank_name,
|
||||
bank_account: form.bank_account,
|
||||
registered_address: form.registered_address,
|
||||
registered_phone: form.registered_phone,
|
||||
remark: form.remark,
|
||||
status: '1',
|
||||
is_draft: 0
|
||||
}
|
||||
|
||||
if (props.type === 'supplier') {
|
||||
await createSupplier(payload)
|
||||
} else {
|
||||
await createCustomer(payload)
|
||||
}
|
||||
|
||||
ElMessage.success('保存成功')
|
||||
emit('success')
|
||||
emit('update:visible', false)
|
||||
} catch (e) {
|
||||
ElMessage.error(e.message || '保存失败')
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function handleClosed() {
|
||||
step.value = 1
|
||||
companyName.value = ''
|
||||
Object.assign(form, defaultForm())
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.step-input {
|
||||
padding: 20px 0;
|
||||
|
||||
.step-actions {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.step-confirm {
|
||||
.confirm-header {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.smart-form {
|
||||
max-height: 60vh;
|
||||
overflow-y: auto;
|
||||
padding-right: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -30,22 +30,34 @@
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="客户名称" prop="customer_name">
|
||||
<el-input v-model="form.customer_name" placeholder="请输入客户名称" />
|
||||
<el-input
|
||||
v-model="form.customer_name"
|
||||
placeholder="请输入客户名称"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="客户类型" prop="customer_type">
|
||||
<el-select v-model="form.customer_type" placeholder="请选择" style="width: 100%">
|
||||
<el-select
|
||||
v-model="form.customer_type"
|
||||
placeholder="请选择"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option label="企业" value="1" />
|
||||
<el-option label="政府机构" value="2" />
|
||||
<el-option label="国企" value="3" />
|
||||
<el-option label="个人" value="4" />
|
||||
<el-option label="教育机构" value="4" />
|
||||
<el-option label="个人" value="5" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="客户等级" prop="customer_level">
|
||||
<el-select v-model="form.customer_level" placeholder="请选择" style="width: 100%">
|
||||
<el-select
|
||||
v-model="form.customer_level"
|
||||
placeholder="请选择"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option label="核心客户" value="1" />
|
||||
<el-option label="重要客户" value="2" />
|
||||
<el-option label="普通客户" value="3" />
|
||||
@@ -58,16 +70,6 @@
|
||||
<el-input v-model="form.industry" placeholder="请输入所属行业" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="form.status" placeholder="请选择" style="width: 100%">
|
||||
<el-option label="正常" value="1" />
|
||||
<el-option label="禁用" value="0" />
|
||||
<el-option label="冻结" value="2" />
|
||||
<el-option label="已注销" value="3" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="注册资本" prop="registered_capital">
|
||||
<el-input v-model="form.registered_capital" placeholder="万元">
|
||||
@@ -95,12 +97,19 @@
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="行政区划" prop="administrative_division">
|
||||
<el-input v-model="form.administrative_division" placeholder="省/市/区" />
|
||||
<el-input
|
||||
v-model="form.administrative_division"
|
||||
placeholder="省/市/区"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="企业类型" prop="enterprise_type">
|
||||
<el-select v-model="form.enterprise_type" placeholder="请选择" style="width: 100%">
|
||||
<el-select
|
||||
v-model="form.enterprise_type"
|
||||
placeholder="请选择"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option label="有限责任公司" value="有限责任公司" />
|
||||
<el-option label="股份有限公司" value="股份有限公司" />
|
||||
<el-option label="合伙企业" value="合伙企业" />
|
||||
@@ -114,13 +123,31 @@
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="纳税人资质" prop="taxpayer_qualification">
|
||||
<el-select v-model="form.taxpayer_qualification" placeholder="请选择" style="width: 100%">
|
||||
<el-select
|
||||
v-model="form.taxpayer_qualification"
|
||||
placeholder="请选择"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option label="一般纳税人" value="一般纳税人" />
|
||||
<el-option label="小规模纳税人" value="小规模纳税人" />
|
||||
<el-option label="其他" value="其他" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select
|
||||
v-model="form.status"
|
||||
placeholder="请选择"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option label="正常" value="1" />
|
||||
<el-option label="禁用" value="0" />
|
||||
<el-option label="冻结" value="2" />
|
||||
<el-option label="已注销" value="3" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="经营范围" prop="business_scope">
|
||||
<el-input
|
||||
@@ -139,17 +166,26 @@
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="联系人" prop="contact_person">
|
||||
<el-input v-model="form.contact_person" placeholder="请输入联系人姓名" />
|
||||
<el-input
|
||||
v-model="form.contact_person"
|
||||
placeholder="请输入联系人姓名"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="联系电话" prop="contact_phone">
|
||||
<el-input v-model="form.contact_phone" placeholder="请输入联系电话" />
|
||||
<el-input
|
||||
v-model="form.contact_phone"
|
||||
placeholder="请输入联系电话"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="联系邮箱" prop="contact_email">
|
||||
<el-input v-model="form.contact_email" placeholder="请输入联系邮箱" />
|
||||
<el-input
|
||||
v-model="form.contact_email"
|
||||
placeholder="请输入联系邮箱"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
@@ -166,22 +202,34 @@
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="发票抬头" prop="invoice_title">
|
||||
<el-input v-model="form.invoice_title" placeholder="请输入发票抬头" />
|
||||
<el-input
|
||||
v-model="form.invoice_title"
|
||||
placeholder="请输入发票抬头"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="纳税人识别号" prop="tax_number">
|
||||
<el-input v-model="form.tax_number" placeholder="请输入纳税人识别号" />
|
||||
<el-input
|
||||
v-model="form.tax_number"
|
||||
placeholder="请输入纳税人识别号"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="注册地址" prop="registered_address">
|
||||
<el-input v-model="form.registered_address" placeholder="请输入注册地址" />
|
||||
<el-input
|
||||
v-model="form.registered_address"
|
||||
placeholder="请输入注册地址"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="注册电话" prop="registered_phone">
|
||||
<el-input v-model="form.registered_phone" placeholder="请输入注册电话" />
|
||||
<el-input
|
||||
v-model="form.registered_phone"
|
||||
placeholder="请输入注册电话"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@@ -189,12 +237,18 @@
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="开户行名称" prop="bank_name">
|
||||
<el-input v-model="form.bank_name" placeholder="请输入开户行名称" />
|
||||
<el-input
|
||||
v-model="form.bank_name"
|
||||
placeholder="请输入开户行名称"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="开户行账号" prop="bank_account">
|
||||
<el-input v-model="form.bank_account" placeholder="请输入开户行账号" />
|
||||
<el-input
|
||||
v-model="form.bank_account"
|
||||
placeholder="请输入开户行账号"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@@ -221,16 +275,27 @@
|
||||
<div class="dialog-footer">
|
||||
<div class="footer-left">
|
||||
<el-button v-if="activeStep > 0" @click="prevStep">上一步</el-button>
|
||||
<el-button v-if="activeStep < 3" type="primary" @click="nextStep">下一步</el-button>
|
||||
<el-button v-if="activeStep < 3" type="primary" @click="nextStep"
|
||||
>下一步</el-button
|
||||
>
|
||||
</div>
|
||||
<div class="footer-right">
|
||||
<el-button @click="handleClose">取消</el-button>
|
||||
<!-- 保存草稿：仅新增或编辑草稿时显示 -->
|
||||
<el-button v-if="!isEdit || form.is_draft === 1" :loading="submitting" @click="handleSaveDraft">
|
||||
<el-button
|
||||
v-if="!isEdit || form.is_draft === 1"
|
||||
:loading="submitting"
|
||||
@click="handleSaveDraft"
|
||||
>
|
||||
保存草稿
|
||||
</el-button>
|
||||
<!-- 保存：仅最后一步显示 -->
|
||||
<el-button v-if="activeStep === 3" type="primary" :loading="submitting" @click="handleSave(false)">
|
||||
<el-button
|
||||
v-if="activeStep === 3"
|
||||
type="primary"
|
||||
:loading="submitting"
|
||||
@click="handleSave(false)"
|
||||
>
|
||||
保存
|
||||
</el-button>
|
||||
</div>
|
||||
@@ -240,184 +305,192 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed, watch } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { InfoFilled } from '@element-plus/icons-vue'
|
||||
import { createCustomer, updateCustomer } from '@/api/customer'
|
||||
import { ref, reactive, computed, watch } from "vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { InfoFilled } from "@element-plus/icons-vue";
|
||||
import { createCustomer, updateCustomer } from "@/api/customer";
|
||||
|
||||
const props = defineProps({
|
||||
visible: { type: Boolean, default: false },
|
||||
editData: { type: Object, default: null }
|
||||
})
|
||||
editData: { type: Object, default: null },
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:visible', 'success'])
|
||||
const emit = defineEmits(["update:visible", "success"]);
|
||||
|
||||
const formRef = ref()
|
||||
const activeStep = ref(0)
|
||||
const submitting = ref(false)
|
||||
const isEdit = ref(false)
|
||||
const internalId = ref(null)
|
||||
const formRef = ref();
|
||||
const activeStep = ref(0);
|
||||
const submitting = ref(false);
|
||||
const isEdit = ref(false);
|
||||
const internalId = ref(null);
|
||||
|
||||
const dialogTitle = computed(() => {
|
||||
if (isEdit.value) {
|
||||
return form.is_draft === 1 ? '编辑客户（草稿）' : '编辑客户'
|
||||
return form.is_draft === 1 ? "编辑客户（草稿）" : "编辑客户";
|
||||
}
|
||||
return '新增客户'
|
||||
})
|
||||
return "新增客户";
|
||||
});
|
||||
|
||||
const defaultForm = () => ({
|
||||
customer_name: '',
|
||||
customer_type: '1',
|
||||
contact_person: '',
|
||||
contact_phone: '',
|
||||
contact_email: '',
|
||||
customer_level: '3',
|
||||
industry: '',
|
||||
registered_capital: '',
|
||||
paid_capital: '',
|
||||
establish_date: '',
|
||||
administrative_division: '',
|
||||
enterprise_type: '',
|
||||
taxpayer_qualification: '',
|
||||
business_scope: '',
|
||||
address: '',
|
||||
status: '1',
|
||||
customer_name: "",
|
||||
customer_type: "1",
|
||||
contact_person: "",
|
||||
contact_phone: "",
|
||||
contact_email: "",
|
||||
customer_level: "3",
|
||||
industry: "",
|
||||
registered_capital: "",
|
||||
paid_capital: "",
|
||||
establish_date: "",
|
||||
administrative_division: "",
|
||||
enterprise_type: "有限责任公司",
|
||||
taxpayer_qualification: "一般纳税人",
|
||||
business_scope: "",
|
||||
address: "",
|
||||
status: "1",
|
||||
is_draft: 0,
|
||||
remark: '',
|
||||
invoice_title: '',
|
||||
tax_number: '',
|
||||
bank_name: '',
|
||||
bank_account: '',
|
||||
registered_address: '',
|
||||
registered_phone: ''
|
||||
})
|
||||
remark: "",
|
||||
invoice_title: "",
|
||||
tax_number: "",
|
||||
bank_name: "",
|
||||
bank_account: "",
|
||||
registered_address: "",
|
||||
registered_phone: "",
|
||||
});
|
||||
|
||||
const form = reactive(defaultForm())
|
||||
const form = reactive(defaultForm());
|
||||
|
||||
// 各步骤的验证规则
|
||||
const stepRules = [
|
||||
// 步骤1：基本信息
|
||||
{
|
||||
customer_name: [{ required: true, message: '请输入客户名称', trigger: 'blur' }],
|
||||
customer_type: [{ required: true, message: '请选择客户类型', trigger: 'change' }]
|
||||
customer_name: [
|
||||
{ required: true, message: "请输入客户名称", trigger: "blur" },
|
||||
],
|
||||
customer_type: [
|
||||
{ required: true, message: "请选择客户类型", trigger: "change" },
|
||||
],
|
||||
},
|
||||
// 步骤2：联系信息
|
||||
{
|
||||
contact_person: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
|
||||
contact_phone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }]
|
||||
contact_person: [
|
||||
{ required: true, message: "请输入联系人", trigger: "blur" },
|
||||
],
|
||||
contact_phone: [
|
||||
{ required: true, message: "请输入联系电话", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
// 步骤3：开票信息（无必填）
|
||||
{},
|
||||
// 步骤4：备注信息（无必填）
|
||||
{}
|
||||
]
|
||||
{},
|
||||
];
|
||||
|
||||
const allRules = computed(() => {
|
||||
const merged = {}
|
||||
stepRules.forEach(rules => {
|
||||
Object.assign(merged, rules)
|
||||
})
|
||||
return merged
|
||||
})
|
||||
const merged = {};
|
||||
stepRules.forEach((rules) => {
|
||||
Object.assign(merged, rules);
|
||||
});
|
||||
return merged;
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(val) => {
|
||||
if (val) {
|
||||
activeStep.value = 0
|
||||
internalId.value = null
|
||||
activeStep.value = 0;
|
||||
internalId.value = null;
|
||||
if (props.editData) {
|
||||
isEdit.value = true
|
||||
internalId.value = props.editData.id
|
||||
Object.assign(form, props.editData)
|
||||
isEdit.value = true;
|
||||
internalId.value = props.editData.id;
|
||||
Object.assign(form, props.editData);
|
||||
} else {
|
||||
isEdit.value = false
|
||||
Object.assign(form, defaultForm())
|
||||
isEdit.value = false;
|
||||
Object.assign(form, defaultForm());
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
},
|
||||
);
|
||||
|
||||
function handleClose() {
|
||||
emit('update:visible', false)
|
||||
emit("update:visible", false);
|
||||
}
|
||||
|
||||
function handleClosed() {
|
||||
formRef.value?.resetFields()
|
||||
activeStep.value = 0
|
||||
formRef.value?.resetFields();
|
||||
activeStep.value = 0;
|
||||
}
|
||||
|
||||
async function nextStep() {
|
||||
const currentRules = stepRules[activeStep.value]
|
||||
const currentRules = stepRules[activeStep.value];
|
||||
if (Object.keys(currentRules).length > 0) {
|
||||
try {
|
||||
await formRef.value.validateField(Object.keys(currentRules))
|
||||
await formRef.value.validateField(Object.keys(currentRules));
|
||||
} catch (e) {
|
||||
return
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (activeStep.value < 3) {
|
||||
activeStep.value++
|
||||
activeStep.value++;
|
||||
}
|
||||
}
|
||||
|
||||
function prevStep() {
|
||||
if (activeStep.value > 0) {
|
||||
activeStep.value--
|
||||
activeStep.value--;
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSave(isDraft) {
|
||||
if (!formRef.value) return
|
||||
if (!formRef.value) return;
|
||||
if (isDraft) {
|
||||
if (!form.customer_name || form.customer_name.trim() === '') {
|
||||
ElMessage.warning('客户名称不能为空')
|
||||
return
|
||||
if (!form.customer_name || form.customer_name.trim() === "") {
|
||||
ElMessage.warning("客户名称不能为空");
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
try {
|
||||
await formRef.value.validate()
|
||||
await formRef.value.validate();
|
||||
} catch (e) {
|
||||
for (let i = 0; i < stepRules.length; i++) {
|
||||
const fields = Object.keys(stepRules[i])
|
||||
const fields = Object.keys(stepRules[i]);
|
||||
for (const field of fields) {
|
||||
if (!form[field] || form[field] === '') {
|
||||
activeStep.value = i
|
||||
return
|
||||
if (!form[field] || form[field] === "") {
|
||||
activeStep.value = i;
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
return
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
submitting.value = true
|
||||
submitting.value = true;
|
||||
try {
|
||||
const payload = { ...form, is_draft: isDraft ? 1 : 0 }
|
||||
const payload = { ...form, is_draft: isDraft ? 1 : 0 };
|
||||
if (internalId.value) {
|
||||
await updateCustomer(internalId.value, payload)
|
||||
ElMessage.success(isDraft ? '草稿已保存' : '更新成功')
|
||||
await updateCustomer(internalId.value, payload);
|
||||
ElMessage.success(isDraft ? "草稿已保存" : "更新成功");
|
||||
} else {
|
||||
const res = await createCustomer(payload)
|
||||
ElMessage.success(isDraft ? '草稿已保存' : '创建成功')
|
||||
const res = await createCustomer(payload);
|
||||
ElMessage.success(isDraft ? "草稿已保存" : "创建成功");
|
||||
if (res && res.data && res.data.id) {
|
||||
internalId.value = res.data.id
|
||||
isEdit.value = true
|
||||
internalId.value = res.data.id;
|
||||
isEdit.value = true;
|
||||
}
|
||||
}
|
||||
emit('success')
|
||||
emit("success");
|
||||
if (!isDraft) {
|
||||
handleClose()
|
||||
handleClose();
|
||||
}
|
||||
} catch (e) {
|
||||
ElMessage.error(e.message || '操作失败')
|
||||
ElMessage.error(e.message || "操作失败");
|
||||
} finally {
|
||||
submitting.value = false
|
||||
submitting.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function handleSaveDraft() {
|
||||
handleSave(true)
|
||||
handleSave(true);
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -7,6 +7,7 @@
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<el-button type="primary" :icon="Plus" @click="openCreate">新增客户</el-button>
|
||||
<el-button type="success" :icon="Cpu" @click="smartAddVisible = true">智能添加</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -27,7 +28,8 @@
|
||||
<el-option label="企业" value="1" />
|
||||
<el-option label="政府机构" value="2" />
|
||||
<el-option label="国企" value="3" />
|
||||
<el-option label="个人" value="4" />
|
||||
<el-option label="教育机构" value="4" />
|
||||
<el-option label="个人" value="5" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="客户等级">
|
||||
@@ -192,21 +194,29 @@
|
||||
:company-id="currentCompany?.id"
|
||||
:company-name="currentCompany?.customer_name"
|
||||
/>
|
||||
|
||||
<SmartAddCompany
|
||||
v-model:visible="smartAddVisible"
|
||||
type="customer"
|
||||
@success="fetchList"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { Plus, Search, Refresh } from '@element-plus/icons-vue'
|
||||
import { Plus, Search, Refresh, Cpu } from '@element-plus/icons-vue'
|
||||
import { getCustomerList, deleteCustomer, toggleCustomerStatus } from '@/api/customer'
|
||||
import CustomerEdit from './components/edit.vue'
|
||||
import ContactBook from '../components/contactBook.vue'
|
||||
import SmartAddCompany from '../components/smartAddCompany.vue'
|
||||
|
||||
const loading = ref(false)
|
||||
const tableData = ref([])
|
||||
const editVisible = ref(false)
|
||||
const currentEditData = ref(null)
|
||||
const smartAddVisible = ref(false)
|
||||
const detailVisible = ref(false)
|
||||
const detailData = ref(null)
|
||||
const contactBookVisible = ref(false)
|
||||
@@ -369,7 +379,7 @@ async function handleDelete(row) {
|
||||
}
|
||||
|
||||
function customerTypeText(type) {
|
||||
const map = { '1': '企业', '2': '政府机构', '3': '国企', '4': '个人' }
|
||||
const map = { '1': '企业', '2': '政府机构', '3': '国企', '4': '教育机构', '5':'个人' }
|
||||
return map[type] || type
|
||||
}
|
||||
|
||||
|
||||
@@ -1,452 +0,0 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
:model-value="visible"
|
||||
:title="dialogTitle"
|
||||
width="680px"
|
||||
:close-on-click-modal="false"
|
||||
@update:model-value="handleClose"
|
||||
@closed="handleClosed"
|
||||
>
|
||||
<!-- 步骤条 -->
|
||||
<div class="steps-wrapper">
|
||||
<el-steps :active="activeStep" finish-status="success" align-center>
|
||||
<el-step title="基本信息" />
|
||||
<el-step title="联系信息" />
|
||||
<el-step title="开票信息" />
|
||||
<el-step title="备注信息" />
|
||||
</el-steps>
|
||||
</div>
|
||||
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="allRules"
|
||||
label-width="100px"
|
||||
label-position="right"
|
||||
style="margin-top: 24px"
|
||||
>
|
||||
<!-- 步骤1：基本信息 -->
|
||||
<div v-show="activeStep === 0">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="客户名称" prop="customer_name">
|
||||
<el-input v-model="form.customer_name" placeholder="请输入客户名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="客户类型" prop="customer_type">
|
||||
<el-select v-model="form.customer_type" placeholder="请选择" style="width: 100%">
|
||||
<el-option label="企业" value="1" />
|
||||
<el-option label="政府机构" value="2" />
|
||||
<el-option label="国企" value="3" />
|
||||
<el-option label="个人" value="4" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="客户等级" prop="customer_level">
|
||||
<el-select v-model="form.customer_level" placeholder="请选择" style="width: 100%">
|
||||
<el-option label="核心客户" value="1" />
|
||||
<el-option label="重要客户" value="2" />
|
||||
<el-option label="普通客户" value="3" />
|
||||
<el-option label="潜在客户" value="4" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="所属行业" prop="industry">
|
||||
<el-input v-model="form.industry" placeholder="请输入所属行业" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="form.status" placeholder="请选择" style="width: 100%">
|
||||
<el-option label="正常" value="1" />
|
||||
<el-option label="禁用" value="0" />
|
||||
<el-option label="冻结" value="2" />
|
||||
<el-option label="已注销" value="3" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="注册资本" prop="registered_capital">
|
||||
<el-input v-model="form.registered_capital" placeholder="万元">
|
||||
<template #append>万元</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="实缴资本" prop="paid_capital">
|
||||
<el-input v-model="form.paid_capital" placeholder="万元">
|
||||
<template #append>万元</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="成立日期" prop="establish_date">
|
||||
<el-date-picker
|
||||
v-model="form.establish_date"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="选择日期"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="行政区划" prop="administrative_division">
|
||||
<el-input v-model="form.administrative_division" placeholder="省/市/区" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="企业类型" prop="enterprise_type">
|
||||
<el-select v-model="form.enterprise_type" placeholder="请选择" style="width: 100%">
|
||||
<el-option label="有限责任公司" value="有限责任公司" />
|
||||
<el-option label="股份有限公司" value="股份有限公司" />
|
||||
<el-option label="合伙企业" value="合伙企业" />
|
||||
<el-option label="个人独资企业" value="个人独资企业" />
|
||||
<el-option label="国有企业" value="国有企业" />
|
||||
<el-option label="集体企业" value="集体企业" />
|
||||
<el-option label="外商投资企业" value="外商投资企业" />
|
||||
<el-option label="其他" value="其他" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="纳税人资质" prop="taxpayer_qualification">
|
||||
<el-select v-model="form.taxpayer_qualification" placeholder="请选择" style="width: 100%">
|
||||
<el-option label="一般纳税人" value="一般纳税人" />
|
||||
<el-option label="小规模纳税人" value="小规模纳税人" />
|
||||
<el-option label="其他" value="其他" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="经营范围" prop="business_scope">
|
||||
<el-input
|
||||
v-model="form.business_scope"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="请输入经营范围（选填）"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<!-- 步骤2：联系信息 -->
|
||||
<div v-show="activeStep === 1">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="联系人" prop="contact_person">
|
||||
<el-input v-model="form.contact_person" placeholder="请输入联系人姓名" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="联系电话" prop="contact_phone">
|
||||
<el-input v-model="form.contact_phone" placeholder="请输入联系电话" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="联系邮箱" prop="contact_email">
|
||||
<el-input v-model="form.contact_email" placeholder="请输入联系邮箱" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="客户地址" prop="address">
|
||||
<el-input v-model="form.address" placeholder="请输入详细地址" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<!-- 步骤3：开票信息（发票+银行合并） -->
|
||||
<div v-show="activeStep === 2">
|
||||
<el-divider content-position="left">发票信息</el-divider>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="发票抬头" prop="invoice_title">
|
||||
<el-input v-model="form.invoice_title" placeholder="请输入发票抬头" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="纳税人识别号" prop="tax_number">
|
||||
<el-input v-model="form.tax_number" placeholder="请输入纳税人识别号" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="注册地址" prop="registered_address">
|
||||
<el-input v-model="form.registered_address" placeholder="请输入注册地址" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="注册电话" prop="registered_phone">
|
||||
<el-input v-model="form.registered_phone" placeholder="请输入注册电话" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-divider content-position="left">银行信息</el-divider>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="开户行名称" prop="bank_name">
|
||||
<el-input v-model="form.bank_name" placeholder="请输入开户行名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="开户行账号" prop="bank_account">
|
||||
<el-input v-model="form.bank_account" placeholder="请输入开户行账号" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<!-- 步骤4：备注信息（最后，只放textarea） -->
|
||||
<div v-show="activeStep === 3">
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input
|
||||
v-model="form.remark"
|
||||
type="textarea"
|
||||
:rows="10"
|
||||
placeholder="请输入备注信息（选填）"
|
||||
/>
|
||||
</el-form-item>
|
||||
<div class="final-step-tip">
|
||||
<el-icon><InfoFilled /></el-icon>
|
||||
<span>确认所有信息无误后，点击「保存」完成创建。</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<div class="footer-left">
|
||||
<el-button v-if="activeStep > 0" @click="prevStep">上一步</el-button>
|
||||
<el-button v-if="activeStep < 3" type="primary" @click="nextStep">下一步</el-button>
|
||||
</div>
|
||||
<div class="footer-right">
|
||||
<el-button @click="handleClose">取消</el-button>
|
||||
<!-- 保存草稿：仅新增或编辑草稿时显示 -->
|
||||
<el-button v-if="!isEdit || form.is_draft === 1" :loading="submitting" @click="handleSaveDraft">
|
||||
保存草稿
|
||||
</el-button>
|
||||
<!-- 保存：仅最后一步显示 -->
|
||||
<el-button v-if="activeStep === 3" type="primary" :loading="submitting" @click="handleSave(false)">
|
||||
保存
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed, watch } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { InfoFilled } from '@element-plus/icons-vue'
|
||||
import { createCustomer, updateCustomer } from '@/api/customer'
|
||||
|
||||
const props = defineProps({
|
||||
visible: { type: Boolean, default: false },
|
||||
editData: { type: Object, default: null }
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:visible', 'success'])
|
||||
|
||||
const formRef = ref()
|
||||
const activeStep = ref(0)
|
||||
const submitting = ref(false)
|
||||
const isEdit = ref(false)
|
||||
const internalId = ref(null)
|
||||
|
||||
const dialogTitle = computed(() => {
|
||||
if (isEdit.value) {
|
||||
return form.is_draft === 1 ? '编辑客户（草稿）' : '编辑客户'
|
||||
}
|
||||
return '新增客户'
|
||||
})
|
||||
|
||||
const defaultForm = () => ({
|
||||
customer_name: '',
|
||||
customer_type: '1',
|
||||
contact_person: '',
|
||||
contact_phone: '',
|
||||
contact_email: '',
|
||||
customer_level: '3',
|
||||
industry: '',
|
||||
registered_capital: '',
|
||||
paid_capital: '',
|
||||
establish_date: '',
|
||||
administrative_division: '',
|
||||
enterprise_type: '',
|
||||
taxpayer_qualification: '',
|
||||
business_scope: '',
|
||||
address: '',
|
||||
status: '1',
|
||||
is_draft: 0,
|
||||
remark: '',
|
||||
invoice_title: '',
|
||||
tax_number: '',
|
||||
bank_name: '',
|
||||
bank_account: '',
|
||||
registered_address: '',
|
||||
registered_phone: ''
|
||||
})
|
||||
|
||||
const form = reactive(defaultForm())
|
||||
|
||||
// 各步骤的验证规则
|
||||
const stepRules = [
|
||||
// 步骤1：基本信息
|
||||
{
|
||||
customer_name: [{ required: true, message: '请输入客户名称', trigger: 'blur' }],
|
||||
customer_type: [{ required: true, message: '请选择客户类型', trigger: 'change' }]
|
||||
},
|
||||
// 步骤2：联系信息
|
||||
{
|
||||
contact_person: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
|
||||
contact_phone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }]
|
||||
},
|
||||
// 步骤3：开票信息（无必填）
|
||||
{},
|
||||
// 步骤4：备注信息（无必填）
|
||||
{}
|
||||
]
|
||||
|
||||
const allRules = computed(() => {
|
||||
const merged = {}
|
||||
stepRules.forEach(rules => {
|
||||
Object.assign(merged, rules)
|
||||
})
|
||||
return merged
|
||||
})
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(val) => {
|
||||
if (val) {
|
||||
activeStep.value = 0
|
||||
internalId.value = null
|
||||
if (props.editData) {
|
||||
isEdit.value = true
|
||||
internalId.value = props.editData.id
|
||||
Object.assign(form, props.editData)
|
||||
} else {
|
||||
isEdit.value = false
|
||||
Object.assign(form, defaultForm())
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
function handleClose() {
|
||||
emit('update:visible', false)
|
||||
}
|
||||
|
||||
function handleClosed() {
|
||||
formRef.value?.resetFields()
|
||||
activeStep.value = 0
|
||||
}
|
||||
|
||||
async function nextStep() {
|
||||
const currentRules = stepRules[activeStep.value]
|
||||
if (Object.keys(currentRules).length > 0) {
|
||||
try {
|
||||
await formRef.value.validateField(Object.keys(currentRules))
|
||||
} catch (e) {
|
||||
return
|
||||
}
|
||||
}
|
||||
if (activeStep.value < 3) {
|
||||
activeStep.value++
|
||||
}
|
||||
}
|
||||
|
||||
function prevStep() {
|
||||
if (activeStep.value > 0) {
|
||||
activeStep.value--
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSave(isDraft) {
|
||||
if (!formRef.value) return
|
||||
if (isDraft) {
|
||||
if (!form.customer_name || form.customer_name.trim() === '') {
|
||||
ElMessage.warning('客户名称不能为空')
|
||||
return
|
||||
}
|
||||
} else {
|
||||
try {
|
||||
await formRef.value.validate()
|
||||
} catch (e) {
|
||||
for (let i = 0; i < stepRules.length; i++) {
|
||||
const fields = Object.keys(stepRules[i])
|
||||
for (const field of fields) {
|
||||
if (!form[field] || form[field] === '') {
|
||||
activeStep.value = i
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
submitting.value = true
|
||||
try {
|
||||
const payload = { ...form, is_draft: isDraft ? 1 : 0 }
|
||||
if (internalId.value) {
|
||||
await updateCustomer(internalId.value, payload)
|
||||
ElMessage.success(isDraft ? '草稿已保存' : '更新成功')
|
||||
} else {
|
||||
const res = await createCustomer(payload)
|
||||
ElMessage.success(isDraft ? '草稿已保存' : '创建成功')
|
||||
if (res && res.data && res.data.id) {
|
||||
internalId.value = res.data.id
|
||||
isEdit.value = true
|
||||
}
|
||||
}
|
||||
emit('success')
|
||||
if (!isDraft) {
|
||||
handleClose()
|
||||
}
|
||||
} catch (e) {
|
||||
ElMessage.error(e.message || '操作失败')
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function handleSaveDraft() {
|
||||
handleSave(true)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.steps-wrapper {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.footer-left,
|
||||
.footer-right {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.final-step-tip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-top: 24px;
|
||||
padding: 12px 16px;
|
||||
background: var(--el-color-info-light-9);
|
||||
border-radius: 4px;
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 13px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,473 +0,0 @@
|
||||
<template>
|
||||
<div class="customer-page">
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<h2>客户管理</h2>
|
||||
<p>管理企业客户信息，支持多维度筛选与全生命周期追踪</p>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<el-button type="primary" :icon="Plus" @click="openCreate">新增客户</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-bar">
|
||||
<el-form :inline="true" :model="filters" @submit.prevent>
|
||||
<el-form-item>
|
||||
<el-input
|
||||
v-model="filters.keyword"
|
||||
clearable
|
||||
placeholder="搜索客户名称"
|
||||
:prefix-icon="Search"
|
||||
style="width: 220px"
|
||||
@keyup.enter="handleSearch"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="客户类型">
|
||||
<el-select v-model="filters.customer_type" clearable placeholder="全部" style="width: 130px">
|
||||
<el-option label="企业" value="1" />
|
||||
<el-option label="政府机构" value="2" />
|
||||
<el-option label="国企" value="3" />
|
||||
<el-option label="个人" value="4" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="客户等级">
|
||||
<el-select v-model="filters.customer_level" clearable placeholder="全部" style="width: 130px">
|
||||
<el-option label="核心客户" value="1" />
|
||||
<el-option label="重要客户" value="2" />
|
||||
<el-option label="普通客户" value="3" />
|
||||
<el-option label="潜在客户" value="4" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态">
|
||||
<el-select v-model="filters.status" clearable placeholder="全部" style="width: 110px">
|
||||
<el-option label="正常" value="1" />
|
||||
<el-option label="禁用" value="0" />
|
||||
<el-option label="冻结" value="2" />
|
||||
<el-option label="已注销" value="3" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="数据状态">
|
||||
<el-select v-model="filters.is_draft" clearable placeholder="全部" style="width: 110px">
|
||||
<el-option label="正式" value="0" />
|
||||
<el-option label="草稿" value="1" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
|
||||
<el-button :icon="Refresh" @click="resetFilters">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<div class="table-container" v-loading="loading">
|
||||
<el-table :data="tableData" stripe border>
|
||||
<el-table-column type="index" label="#" width="60" align="center" />
|
||||
<el-table-column prop="customer_name" label="客户名称" min-width="180" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
<div class="name-cell-wrapper">
|
||||
<span class="name-cell name-link" @click="openDetail(row)">{{ row.customer_name }}</span>
|
||||
<el-tag v-if="row.is_draft === 1" type="warning" size="small" effect="plain">草稿</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="customer_type" label="类型" width="100" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="customerTypeTag(row.customer_type)" size="small">
|
||||
{{ customerTypeText(row.customer_type) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="customer_level" label="等级" width="100" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="customerLevelTag(row.customer_level)" size="small" effect="plain">
|
||||
{{ customerLevelText(row.customer_level) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="contact_person" label="联系人" width="100" />
|
||||
<el-table-column prop="contact_phone" label="联系电话" width="130" />
|
||||
<el-table-column prop="contact_email" label="邮箱" min-width="160" show-overflow-tooltip />
|
||||
<el-table-column prop="industry" label="行业" width="100" show-overflow-tooltip />
|
||||
<el-table-column prop="status" label="状态" width="80" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="statusTag(row.status)" size="small">
|
||||
{{ statusText(row.status) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="update_time" label="更新时间" width="160" align="center">
|
||||
<template #default="{ row }">
|
||||
{{ formatDateTime(row.update_time) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="240" align="center" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button link type="primary" size="small" @click="openContactBook(row)">通讯录</el-button>
|
||||
<el-button link type="primary" size="small" @click="openEdit(row)">编辑</el-button>
|
||||
<el-button link type="primary" size="small" @click="handleToggleStatus(row)">
|
||||
{{ row.status === '1' ? '禁用' : '启用' }}
|
||||
</el-button>
|
||||
<el-button link type="danger" size="small" @click="handleDelete(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="pagination">
|
||||
<el-pagination
|
||||
v-model:current-page="pagination.page"
|
||||
v-model:page-size="pagination.pageSize"
|
||||
:total="pagination.total"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="fetchList"
|
||||
@current-change="fetchList"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<CustomerEdit
|
||||
v-model:visible="editVisible"
|
||||
:edit-data="currentEditData"
|
||||
@success="fetchList"
|
||||
/>
|
||||
|
||||
<!-- 详情抽屉 -->
|
||||
<el-drawer
|
||||
v-model="detailVisible"
|
||||
:title="detailData?.customer_name || '客户详情'"
|
||||
direction="rtl"
|
||||
size="560px"
|
||||
>
|
||||
<div v-if="detailData" class="detail-content">
|
||||
<el-descriptions title="基本信息" :column="2" border size="small" label-width="120px">
|
||||
<el-descriptions-item label="客户名称" :span="2">{{ detailData.customer_name }}</el-descriptions-item>
|
||||
<el-descriptions-item label="客户类型">{{ customerTypeText(detailData.customer_type) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="客户等级">{{ customerLevelText(detailData.customer_level) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="所属行业">{{ detailData.industry || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="状态">
|
||||
<el-tag :type="statusTag(detailData.status)" size="small">{{ statusText(detailData.status) }}</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="注册资本">{{ detailData.registered_capital ? detailData.registered_capital + ' 万元' : '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="实缴资本">{{ detailData.paid_capital ? detailData.paid_capital + ' 万元' : '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="成立日期">{{ formatDate(detailData.establish_date) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="行政区划">{{ detailData.administrative_division || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="企业类型">{{ detailData.enterprise_type || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="纳税人资质">{{ detailData.taxpayer_qualification || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="经营范围" :span="2">{{ detailData.business_scope || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="更新时间" :span="2">{{ formatDateTime(detailData.update_time) }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
<el-descriptions title="联系信息" :column="2" border size="small" label-width="120px" style="margin-top: 20px">
|
||||
<el-descriptions-item label="联系人">{{ detailData.contact_person || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="联系电话">{{ detailData.contact_phone || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="联系邮箱" :span="2">{{ detailData.contact_email || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="客户地址" :span="2">{{ detailData.address || '-' }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
<el-descriptions :column="2" border size="small" label-width="120px" style="margin-top: 20px">
|
||||
<template #title>
|
||||
<div class="desc-title-row">
|
||||
<span>开票信息</span>
|
||||
<el-button link type="primary" size="small" @click="copyInvoiceInfo">一键复制</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<el-descriptions-item label="发票抬头" :span="2">{{ detailData.invoice_title || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="纳税人识别号">{{ detailData.tax_number || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="注册电话">{{ detailData.registered_phone || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="注册地址" :span="2">{{ detailData.registered_address || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="开户行名称">{{ detailData.bank_name || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="开户行账号">{{ detailData.bank_account || '-' }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
<el-descriptions title="备注信息" :column="1" border size="small" label-width="120px" style="margin-top: 20px">
|
||||
<el-descriptions-item label="备注">{{ detailData.remark || '-' }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
</el-drawer>
|
||||
|
||||
<!-- 通讯录 -->
|
||||
<ContactBook
|
||||
v-model:visible="contactBookVisible"
|
||||
:company-type="'customer'"
|
||||
:company-id="currentCompany?.id"
|
||||
:company-name="currentCompany?.customer_name"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { Plus, Search, Refresh } from '@element-plus/icons-vue'
|
||||
import { getCustomerList, deleteCustomer, toggleCustomerStatus } from '@/api/customer'
|
||||
import CustomerEdit from './components/edit.vue'
|
||||
import ContactBook from '../components/contactBook.vue'
|
||||
|
||||
const loading = ref(false)
|
||||
const tableData = ref([])
|
||||
const editVisible = ref(false)
|
||||
const currentEditData = ref(null)
|
||||
const detailVisible = ref(false)
|
||||
const detailData = ref(null)
|
||||
const contactBookVisible = ref(false)
|
||||
const currentCompany = ref(null)
|
||||
|
||||
const filters = reactive({
|
||||
keyword: '',
|
||||
customer_type: '',
|
||||
customer_level: '',
|
||||
status: '',
|
||||
is_draft: ''
|
||||
})
|
||||
|
||||
const pagination = reactive({
|
||||
page: 1,
|
||||
pageSize: 20,
|
||||
total: 0
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
fetchList()
|
||||
})
|
||||
|
||||
async function fetchList() {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getCustomerList({
|
||||
page: pagination.page,
|
||||
pageSize: pagination.pageSize,
|
||||
...filters
|
||||
})
|
||||
if (res.code === 200) {
|
||||
tableData.value = res.data.list || []
|
||||
pagination.total = res.data.total || 0
|
||||
}
|
||||
} catch (e) {
|
||||
ElMessage.error(e.message || '查询失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function handleSearch() {
|
||||
pagination.page = 1
|
||||
fetchList()
|
||||
}
|
||||
|
||||
function resetFilters() {
|
||||
filters.keyword = ''
|
||||
filters.customer_type = ''
|
||||
filters.customer_level = ''
|
||||
filters.status = ''
|
||||
filters.is_draft = ''
|
||||
pagination.page = 1
|
||||
fetchList()
|
||||
}
|
||||
|
||||
function openCreate() {
|
||||
currentEditData.value = null
|
||||
editVisible.value = true
|
||||
}
|
||||
|
||||
function openEdit(row) {
|
||||
currentEditData.value = { ...row }
|
||||
editVisible.value = true
|
||||
}
|
||||
|
||||
function openDetail(row) {
|
||||
detailData.value = { ...row }
|
||||
detailVisible.value = true
|
||||
}
|
||||
|
||||
function openContactBook(row) {
|
||||
currentCompany.value = { ...row }
|
||||
contactBookVisible.value = true
|
||||
}
|
||||
|
||||
function formatDate(val) {
|
||||
if (!val) return '-'
|
||||
const d = new Date(val)
|
||||
if (isNaN(d.getTime())) return '-'
|
||||
return d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0')
|
||||
}
|
||||
|
||||
function formatDateTime(val) {
|
||||
if (!val) return '-'
|
||||
const d = new Date(val)
|
||||
return d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0') + ' ' + String(d.getHours()).padStart(2, '0') + ':' + String(d.getMinutes()).padStart(2, '0')
|
||||
}
|
||||
|
||||
function copyInvoiceInfo() {
|
||||
const d = detailData.value
|
||||
if (!d) return
|
||||
const lines = [
|
||||
`发票抬头：${d.invoice_title || ''}`,
|
||||
`纳税人识别号：${d.tax_number || ''}`,
|
||||
`注册地址：${d.registered_address || ''}`,
|
||||
`注册电话：${d.registered_phone || ''}`,
|
||||
`开户行名称：${d.bank_name || ''}`,
|
||||
`开户行账号：${d.bank_account || ''}`
|
||||
]
|
||||
const text = lines.join('\n')
|
||||
if (navigator.clipboard && navigator.clipboard.writeText) {
|
||||
navigator.clipboard.writeText(text).then(() => {
|
||||
ElMessage.success('开票信息已复制到剪贴板')
|
||||
}).catch(() => {
|
||||
fallbackCopy(text)
|
||||
})
|
||||
} else {
|
||||
fallbackCopy(text)
|
||||
}
|
||||
}
|
||||
|
||||
function fallbackCopy(text) {
|
||||
const ta = document.createElement('textarea')
|
||||
ta.value = text
|
||||
ta.style.position = 'fixed'
|
||||
ta.style.opacity = '0'
|
||||
document.body.appendChild(ta)
|
||||
ta.select()
|
||||
try {
|
||||
document.execCommand('copy')
|
||||
ElMessage.success('开票信息已复制到剪贴板')
|
||||
} catch {
|
||||
ElMessage.error('复制失败，请手动复制')
|
||||
}
|
||||
document.body.removeChild(ta)
|
||||
}
|
||||
|
||||
async function handleToggleStatus(row) {
|
||||
const newStatus = row.status === '1' ? '0' : '1'
|
||||
const action = newStatus === '1' ? '启用' : '禁用'
|
||||
try {
|
||||
await ElMessageBox.confirm(`确定要${action}客户「${row.customer_name}」吗？`, '提示', {
|
||||
type: 'warning'
|
||||
})
|
||||
await toggleCustomerStatus(row.id, newStatus)
|
||||
ElMessage.success(`${action}成功`)
|
||||
fetchList()
|
||||
} catch (e) {
|
||||
if (e !== 'cancel') {
|
||||
ElMessage.error(e.message || '操作失败')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete(row) {
|
||||
try {
|
||||
await ElMessageBox.confirm(`确定要删除客户「${row.customer_name}」吗？删除后不可恢复。`, '删除确认', {
|
||||
type: 'warning'
|
||||
})
|
||||
await deleteCustomer(row.id)
|
||||
ElMessage.success('删除成功')
|
||||
fetchList()
|
||||
} catch (e) {
|
||||
if (e !== 'cancel') {
|
||||
ElMessage.error(e.message || '删除失败')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function customerTypeText(type) {
|
||||
const map = { '1': '企业', '2': '政府机构', '3': '国企', '4': '个人' }
|
||||
return map[type] || type
|
||||
}
|
||||
|
||||
function customerTypeTag(type) {
|
||||
const map = { '1': 'primary', '2': 'warning', '3': 'success', '4': 'info' }
|
||||
return map[type] || 'info'
|
||||
}
|
||||
|
||||
function customerLevelText(level) {
|
||||
const map = { '1': '核心客户', '2': '重要客户', '3': '普通客户', '4': '潜在客户' }
|
||||
return map[level] || level
|
||||
}
|
||||
|
||||
function customerLevelTag(level) {
|
||||
const map = { '1': 'danger', '2': 'warning', '3': 'info', '4': '' }
|
||||
return map[level] || ''
|
||||
}
|
||||
|
||||
function statusText(status) {
|
||||
const map = { '0': '禁用', '1': '正常', '2': '冻结', '3': '已注销' }
|
||||
return map[status] || status
|
||||
}
|
||||
|
||||
function statusTag(status) {
|
||||
const map = { '0': 'info', '1': 'success', '2': 'warning', '3': 'danger' }
|
||||
return map[status] || 'info'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.customer-page {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 20px;
|
||||
|
||||
h2 {
|
||||
margin: 0 0 6px 0;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.filter-bar {
|
||||
background: var(--el-bg-color);
|
||||
padding: 16px 16px 0;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 16px;
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
}
|
||||
|
||||
.table-container {
|
||||
background: var(--el-bg-color);
|
||||
padding: 16px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
}
|
||||
|
||||
.name-cell {
|
||||
font-weight: 500;
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
.name-cell-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.name-link {
|
||||
cursor: pointer;
|
||||
color: var(--el-color-primary);
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.desc-title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin-top: 16px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
@@ -7,6 +7,7 @@
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<el-button type="primary" :icon="Plus" @click="openCreate">新增供应商</el-button>
|
||||
<el-button type="success" :icon="Cpu" @click="smartAddVisible = true">智能添加</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -192,21 +193,29 @@
|
||||
:company-id="currentCompany?.id"
|
||||
:company-name="currentCompany?.supplier_name"
|
||||
/>
|
||||
|
||||
<SmartAddCompany
|
||||
v-model:visible="smartAddVisible"
|
||||
type="supplier"
|
||||
@success="fetchList"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { Plus, Search, Refresh } from '@element-plus/icons-vue'
|
||||
import { Plus, Search, Refresh, Cpu } from '@element-plus/icons-vue'
|
||||
import { getSupplierList, deleteSupplier, toggleSupplierStatus } from '@/api/supplier'
|
||||
import SupplierEdit from './components/edit.vue'
|
||||
import ContactBook from '../components/contactBook.vue'
|
||||
import SmartAddCompany from '../components/smartAddCompany.vue'
|
||||
|
||||
const loading = ref(false)
|
||||
const tableData = ref([])
|
||||
const editVisible = ref(false)
|
||||
const currentEditData = ref(null)
|
||||
const smartAddVisible = ref(false)
|
||||
const detailVisible = ref(false)
|
||||
const detailData = ref(null)
|
||||
const contactBookVisible = ref(false)
|
||||
|
||||
@@ -1,452 +0,0 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
:model-value="visible"
|
||||
:title="dialogTitle"
|
||||
width="680px"
|
||||
:close-on-click-modal="false"
|
||||
@update:model-value="handleClose"
|
||||
@closed="handleClosed"
|
||||
>
|
||||
<!-- 步骤条 -->
|
||||
<div class="steps-wrapper">
|
||||
<el-steps :active="activeStep" finish-status="success" align-center>
|
||||
<el-step title="基本信息" />
|
||||
<el-step title="联系信息" />
|
||||
<el-step title="开票信息" />
|
||||
<el-step title="备注信息" />
|
||||
</el-steps>
|
||||
</div>
|
||||
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="allRules"
|
||||
label-width="100px"
|
||||
label-position="right"
|
||||
style="margin-top: 24px"
|
||||
>
|
||||
<!-- 步骤1：基本信息 -->
|
||||
<div v-show="activeStep === 0">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="供应商名称" prop="supplier_name">
|
||||
<el-input v-model="form.supplier_name" placeholder="请输入供应商名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="供应商类型" prop="supplier_type">
|
||||
<el-select v-model="form.supplier_type" placeholder="请选择" style="width: 100%">
|
||||
<el-option label="原材料供应商" value="1" />
|
||||
<el-option label="设备供应商" value="2" />
|
||||
<el-option label="服务供应商" value="3" />
|
||||
<el-option label="其他" value="4" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="供应商等级" prop="supplier_level">
|
||||
<el-select v-model="form.supplier_level" placeholder="请选择" style="width: 100%">
|
||||
<el-option label="核心供应商" value="1" />
|
||||
<el-option label="重要供应商" value="2" />
|
||||
<el-option label="普通供应商" value="3" />
|
||||
<el-option label="潜在供应商" value="4" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="所属行业" prop="industry">
|
||||
<el-input v-model="form.industry" placeholder="请输入所属行业" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="form.status" placeholder="请选择" style="width: 100%">
|
||||
<el-option label="正常" value="1" />
|
||||
<el-option label="禁用" value="0" />
|
||||
<el-option label="冻结" value="2" />
|
||||
<el-option label="已注销" value="3" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="注册资本" prop="registered_capital">
|
||||
<el-input v-model="form.registered_capital" placeholder="万元">
|
||||
<template #append>万元</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="实缴资本" prop="paid_capital">
|
||||
<el-input v-model="form.paid_capital" placeholder="万元">
|
||||
<template #append>万元</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="成立日期" prop="establish_date">
|
||||
<el-date-picker
|
||||
v-model="form.establish_date"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="选择日期"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="行政区划" prop="administrative_division">
|
||||
<el-input v-model="form.administrative_division" placeholder="省/市/区" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="企业类型" prop="enterprise_type">
|
||||
<el-select v-model="form.enterprise_type" placeholder="请选择" style="width: 100%">
|
||||
<el-option label="有限责任公司" value="有限责任公司" />
|
||||
<el-option label="股份有限公司" value="股份有限公司" />
|
||||
<el-option label="合伙企业" value="合伙企业" />
|
||||
<el-option label="个人独资企业" value="个人独资企业" />
|
||||
<el-option label="国有企业" value="国有企业" />
|
||||
<el-option label="集体企业" value="集体企业" />
|
||||
<el-option label="外商投资企业" value="外商投资企业" />
|
||||
<el-option label="其他" value="其他" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="纳税人资质" prop="taxpayer_qualification">
|
||||
<el-select v-model="form.taxpayer_qualification" placeholder="请选择" style="width: 100%">
|
||||
<el-option label="一般纳税人" value="一般纳税人" />
|
||||
<el-option label="小规模纳税人" value="小规模纳税人" />
|
||||
<el-option label="其他" value="其他" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="经营范围" prop="business_scope">
|
||||
<el-input
|
||||
v-model="form.business_scope"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="请输入经营范围（选填）"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<!-- 步骤2：联系信息 -->
|
||||
<div v-show="activeStep === 1">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="联系人" prop="contact_person">
|
||||
<el-input v-model="form.contact_person" placeholder="请输入联系人姓名" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="联系电话" prop="contact_phone">
|
||||
<el-input v-model="form.contact_phone" placeholder="请输入联系电话" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="联系邮箱" prop="contact_email">
|
||||
<el-input v-model="form.contact_email" placeholder="请输入联系邮箱" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="供应商地址" prop="address">
|
||||
<el-input v-model="form.address" placeholder="请输入详细地址" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<!-- 步骤3：开票信息（发票+银行合并） -->
|
||||
<div v-show="activeStep === 2">
|
||||
<el-divider content-position="left">发票信息</el-divider>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="发票抬头" prop="invoice_title">
|
||||
<el-input v-model="form.invoice_title" placeholder="请输入发票抬头" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="纳税人识别号" prop="tax_number">
|
||||
<el-input v-model="form.tax_number" placeholder="请输入纳税人识别号" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="注册地址" prop="registered_address">
|
||||
<el-input v-model="form.registered_address" placeholder="请输入注册地址" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="注册电话" prop="registered_phone">
|
||||
<el-input v-model="form.registered_phone" placeholder="请输入注册电话" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-divider content-position="left">银行信息</el-divider>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="开户行名称" prop="bank_name">
|
||||
<el-input v-model="form.bank_name" placeholder="请输入开户行名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="开户行账号" prop="bank_account">
|
||||
<el-input v-model="form.bank_account" placeholder="请输入开户行账号" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<!-- 步骤4：备注信息（最后，只放textarea） -->
|
||||
<div v-show="activeStep === 3">
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input
|
||||
v-model="form.remark"
|
||||
type="textarea"
|
||||
:rows="10"
|
||||
placeholder="请输入备注信息（选填）"
|
||||
/>
|
||||
</el-form-item>
|
||||
<div class="final-step-tip">
|
||||
<el-icon><InfoFilled /></el-icon>
|
||||
<span>确认所有信息无误后，点击「保存」完成创建。</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<div class="footer-left">
|
||||
<el-button v-if="activeStep > 0" @click="prevStep">上一步</el-button>
|
||||
<el-button v-if="activeStep < 3" type="primary" @click="nextStep">下一步</el-button>
|
||||
</div>
|
||||
<div class="footer-right">
|
||||
<el-button @click="handleClose">取消</el-button>
|
||||
<!-- 保存草稿：仅新增或编辑草稿时显示 -->
|
||||
<el-button v-if="!isEdit || form.is_draft === 1" :loading="submitting" @click="handleSaveDraft">
|
||||
保存草稿
|
||||
</el-button>
|
||||
<!-- 保存：仅最后一步显示 -->
|
||||
<el-button v-if="activeStep === 3" type="primary" :loading="submitting" @click="handleSave(false)">
|
||||
保存
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed, watch } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { InfoFilled } from '@element-plus/icons-vue'
|
||||
import { createSupplier, updateSupplier } from '@/api/supplier'
|
||||
|
||||
const props = defineProps({
|
||||
visible: { type: Boolean, default: false },
|
||||
editData: { type: Object, default: null }
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:visible', 'success'])
|
||||
|
||||
const formRef = ref()
|
||||
const activeStep = ref(0)
|
||||
const submitting = ref(false)
|
||||
const isEdit = ref(false)
|
||||
const internalId = ref(null)
|
||||
|
||||
const dialogTitle = computed(() => {
|
||||
if (isEdit.value) {
|
||||
return form.is_draft === 1 ? '编辑供应商（草稿）' : '编辑供应商'
|
||||
}
|
||||
return '新增供应商'
|
||||
})
|
||||
|
||||
const defaultForm = () => ({
|
||||
supplier_name: '',
|
||||
supplier_type: '1',
|
||||
contact_person: '',
|
||||
contact_phone: '',
|
||||
contact_email: '',
|
||||
supplier_level: '3',
|
||||
industry: '',
|
||||
registered_capital: '',
|
||||
paid_capital: '',
|
||||
establish_date: '',
|
||||
administrative_division: '',
|
||||
enterprise_type: '',
|
||||
taxpayer_qualification: '',
|
||||
business_scope: '',
|
||||
address: '',
|
||||
status: '1',
|
||||
is_draft: 0,
|
||||
remark: '',
|
||||
invoice_title: '',
|
||||
tax_number: '',
|
||||
bank_name: '',
|
||||
bank_account: '',
|
||||
registered_address: '',
|
||||
registered_phone: ''
|
||||
})
|
||||
|
||||
const form = reactive(defaultForm())
|
||||
|
||||
// 各步骤的验证规则
|
||||
const stepRules = [
|
||||
// 步骤1：基本信息
|
||||
{
|
||||
supplier_name: [{ required: true, message: '请输入供应商名称', trigger: 'blur' }],
|
||||
supplier_type: [{ required: true, message: '请选择供应商类型', trigger: 'change' }]
|
||||
},
|
||||
// 步骤2：联系信息
|
||||
{
|
||||
contact_person: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
|
||||
contact_phone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }]
|
||||
},
|
||||
// 步骤3：开票信息（无必填）
|
||||
{},
|
||||
// 步骤4：备注信息（无必填）
|
||||
{}
|
||||
]
|
||||
|
||||
const allRules = computed(() => {
|
||||
const merged = {}
|
||||
stepRules.forEach(rules => {
|
||||
Object.assign(merged, rules)
|
||||
})
|
||||
return merged
|
||||
})
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(val) => {
|
||||
if (val) {
|
||||
activeStep.value = 0
|
||||
internalId.value = null
|
||||
if (props.editData) {
|
||||
isEdit.value = true
|
||||
internalId.value = props.editData.id
|
||||
Object.assign(form, props.editData)
|
||||
} else {
|
||||
isEdit.value = false
|
||||
Object.assign(form, defaultForm())
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
function handleClose() {
|
||||
emit('update:visible', false)
|
||||
}
|
||||
|
||||
function handleClosed() {
|
||||
formRef.value?.resetFields()
|
||||
activeStep.value = 0
|
||||
}
|
||||
|
||||
async function nextStep() {
|
||||
const currentRules = stepRules[activeStep.value]
|
||||
if (Object.keys(currentRules).length > 0) {
|
||||
try {
|
||||
await formRef.value.validateField(Object.keys(currentRules))
|
||||
} catch (e) {
|
||||
return
|
||||
}
|
||||
}
|
||||
if (activeStep.value < 3) {
|
||||
activeStep.value++
|
||||
}
|
||||
}
|
||||
|
||||
function prevStep() {
|
||||
if (activeStep.value > 0) {
|
||||
activeStep.value--
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSave(isDraft) {
|
||||
if (!formRef.value) return
|
||||
if (isDraft) {
|
||||
if (!form.supplier_name || form.supplier_name.trim() === '') {
|
||||
ElMessage.warning('供应商名称不能为空')
|
||||
return
|
||||
}
|
||||
} else {
|
||||
try {
|
||||
await formRef.value.validate()
|
||||
} catch (e) {
|
||||
for (let i = 0; i < stepRules.length; i++) {
|
||||
const fields = Object.keys(stepRules[i])
|
||||
for (const field of fields) {
|
||||
if (!form[field] || form[field] === '') {
|
||||
activeStep.value = i
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
submitting.value = true
|
||||
try {
|
||||
const payload = { ...form, is_draft: isDraft ? 1 : 0 }
|
||||
if (internalId.value) {
|
||||
await updateSupplier(internalId.value, payload)
|
||||
ElMessage.success(isDraft ? '草稿已保存' : '更新成功')
|
||||
} else {
|
||||
const res = await createSupplier(payload)
|
||||
ElMessage.success(isDraft ? '草稿已保存' : '创建成功')
|
||||
if (res && res.data && res.data.id) {
|
||||
internalId.value = res.data.id
|
||||
isEdit.value = true
|
||||
}
|
||||
}
|
||||
emit('success')
|
||||
if (!isDraft) {
|
||||
handleClose()
|
||||
}
|
||||
} catch (e) {
|
||||
ElMessage.error(e.message || '操作失败')
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function handleSaveDraft() {
|
||||
handleSave(true)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.steps-wrapper {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.footer-left,
|
||||
.footer-right {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.final-step-tip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-top: 24px;
|
||||
padding: 12px 16px;
|
||||
background: var(--el-color-info-light-9);
|
||||
border-radius: 4px;
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 13px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,473 +0,0 @@
|
||||
<template>
|
||||
<div class="supplier-page">
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<h2>供应商管理</h2>
|
||||
<p>管理企业供应商信息，支持多维度筛选与全生命周期追踪</p>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<el-button type="primary" :icon="Plus" @click="openCreate">新增供应商</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-bar">
|
||||
<el-form :inline="true" :model="filters" @submit.prevent>
|
||||
<el-form-item>
|
||||
<el-input
|
||||
v-model="filters.keyword"
|
||||
clearable
|
||||
placeholder="搜索供应商名称"
|
||||
:prefix-icon="Search"
|
||||
style="width: 220px"
|
||||
@keyup.enter="handleSearch"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="供应商类型">
|
||||
<el-select v-model="filters.supplier_type" clearable placeholder="全部" style="width: 140px">
|
||||
<el-option label="原材料供应商" value="1" />
|
||||
<el-option label="设备供应商" value="2" />
|
||||
<el-option label="服务供应商" value="3" />
|
||||
<el-option label="其他" value="4" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="供应商等级">
|
||||
<el-select v-model="filters.supplier_level" clearable placeholder="全部" style="width: 130px">
|
||||
<el-option label="核心供应商" value="1" />
|
||||
<el-option label="重要供应商" value="2" />
|
||||
<el-option label="普通供应商" value="3" />
|
||||
<el-option label="潜在供应商" value="4" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态">
|
||||
<el-select v-model="filters.status" clearable placeholder="全部" style="width: 110px">
|
||||
<el-option label="正常" value="1" />
|
||||
<el-option label="禁用" value="0" />
|
||||
<el-option label="冻结" value="2" />
|
||||
<el-option label="已注销" value="3" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="数据状态">
|
||||
<el-select v-model="filters.is_draft" clearable placeholder="全部" style="width: 110px">
|
||||
<el-option label="正式" value="0" />
|
||||
<el-option label="草稿" value="1" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
|
||||
<el-button :icon="Refresh" @click="resetFilters">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<div class="table-container" v-loading="loading">
|
||||
<el-table :data="tableData" stripe border>
|
||||
<el-table-column type="index" label="#" width="60" align="center" />
|
||||
<el-table-column prop="supplier_name" label="供应商名称" min-width="180" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
<div class="name-cell-wrapper">
|
||||
<span class="name-cell name-link" @click="openDetail(row)">{{ row.supplier_name }}</span>
|
||||
<el-tag v-if="row.is_draft === 1" type="warning" size="small" effect="plain">草稿</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="supplier_type" label="类型" width="120" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="supplierTypeTag(row.supplier_type)" size="small">
|
||||
{{ supplierTypeText(row.supplier_type) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="supplier_level" label="等级" width="110" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="supplierLevelTag(row.supplier_level)" size="small" effect="plain">
|
||||
{{ supplierLevelText(row.supplier_level) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="contact_person" label="联系人" width="100" />
|
||||
<el-table-column prop="contact_phone" label="联系电话" width="130" />
|
||||
<el-table-column prop="contact_email" label="邮箱" min-width="160" show-overflow-tooltip />
|
||||
<el-table-column prop="industry" label="行业" width="100" show-overflow-tooltip />
|
||||
<el-table-column prop="status" label="状态" width="80" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="statusTag(row.status)" size="small">
|
||||
{{ statusText(row.status) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="update_time" label="更新时间" width="160" align="center">
|
||||
<template #default="{ row }">
|
||||
{{ formatDateTime(row.update_time) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="240" align="center" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button link type="primary" size="small" @click="openContactBook(row)">通讯录</el-button>
|
||||
<el-button link type="primary" size="small" @click="openEdit(row)">编辑</el-button>
|
||||
<el-button link type="primary" size="small" @click="handleToggleStatus(row)">
|
||||
{{ row.status === '1' ? '禁用' : '启用' }}
|
||||
</el-button>
|
||||
<el-button link type="danger" size="small" @click="handleDelete(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="pagination">
|
||||
<el-pagination
|
||||
v-model:current-page="pagination.page"
|
||||
v-model:page-size="pagination.pageSize"
|
||||
:total="pagination.total"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="fetchList"
|
||||
@current-change="fetchList"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SupplierEdit
|
||||
v-model:visible="editVisible"
|
||||
:edit-data="currentEditData"
|
||||
@success="fetchList"
|
||||
/>
|
||||
|
||||
<!-- 详情抽屉 -->
|
||||
<el-drawer
|
||||
v-model="detailVisible"
|
||||
:title="detailData?.supplier_name || '供应商详情'"
|
||||
direction="rtl"
|
||||
size="560px"
|
||||
>
|
||||
<div v-if="detailData" class="detail-content">
|
||||
<el-descriptions title="基本信息" :column="2" border size="small" label-width="120px">
|
||||
<el-descriptions-item label="供应商名称" :span="2">{{ detailData.supplier_name }}</el-descriptions-item>
|
||||
<el-descriptions-item label="供应商类型">{{ supplierTypeText(detailData.supplier_type) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="供应商等级">{{ supplierLevelText(detailData.supplier_level) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="所属行业">{{ detailData.industry || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="状态">
|
||||
<el-tag :type="statusTag(detailData.status)" size="small">{{ statusText(detailData.status) }}</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="注册资本">{{ detailData.registered_capital ? detailData.registered_capital + ' 万元' : '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="实缴资本">{{ detailData.paid_capital ? detailData.paid_capital + ' 万元' : '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="成立日期">{{ formatDate(detailData.establish_date) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="行政区划">{{ detailData.administrative_division || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="企业类型">{{ detailData.enterprise_type || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="纳税人资质">{{ detailData.taxpayer_qualification || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="经营范围" :span="2">{{ detailData.business_scope || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="更新时间" :span="2">{{ formatDateTime(detailData.update_time) }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
<el-descriptions title="联系信息" :column="2" border size="small" label-width="120px" style="margin-top: 20px">
|
||||
<el-descriptions-item label="联系人">{{ detailData.contact_person || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="联系电话">{{ detailData.contact_phone || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="联系邮箱" :span="2">{{ detailData.contact_email || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="供应商地址" :span="2">{{ detailData.address || '-' }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
<el-descriptions :column="2" border size="small" label-width="120px" style="margin-top: 20px">
|
||||
<template #title>
|
||||
<div class="desc-title-row">
|
||||
<span>开票信息</span>
|
||||
<el-button link type="primary" size="small" @click="copyInvoiceInfo">一键复制</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<el-descriptions-item label="发票抬头" :span="2">{{ detailData.invoice_title || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="纳税人识别号">{{ detailData.tax_number || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="注册电话">{{ detailData.registered_phone || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="注册地址" :span="2">{{ detailData.registered_address || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="开户行名称">{{ detailData.bank_name || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="开户行账号">{{ detailData.bank_account || '-' }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
<el-descriptions title="备注信息" :column="1" border size="small" label-width="120px" style="margin-top: 20px">
|
||||
<el-descriptions-item label="备注">{{ detailData.remark || '-' }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
</el-drawer>
|
||||
|
||||
<!-- 通讯录 -->
|
||||
<ContactBook
|
||||
v-model:visible="contactBookVisible"
|
||||
:company-type="'supplier'"
|
||||
:company-id="currentCompany?.id"
|
||||
:company-name="currentCompany?.supplier_name"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { Plus, Search, Refresh } from '@element-plus/icons-vue'
|
||||
import { getSupplierList, deleteSupplier, toggleSupplierStatus } from '@/api/supplier'
|
||||
import SupplierEdit from './components/edit.vue'
|
||||
import ContactBook from '../components/contactBook.vue'
|
||||
|
||||
const loading = ref(false)
|
||||
const tableData = ref([])
|
||||
const editVisible = ref(false)
|
||||
const currentEditData = ref(null)
|
||||
const detailVisible = ref(false)
|
||||
const detailData = ref(null)
|
||||
const contactBookVisible = ref(false)
|
||||
const currentCompany = ref(null)
|
||||
|
||||
const filters = reactive({
|
||||
keyword: '',
|
||||
supplier_type: '',
|
||||
supplier_level: '',
|
||||
status: '',
|
||||
is_draft: ''
|
||||
})
|
||||
|
||||
const pagination = reactive({
|
||||
page: 1,
|
||||
pageSize: 20,
|
||||
total: 0
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
fetchList()
|
||||
})
|
||||
|
||||
async function fetchList() {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getSupplierList({
|
||||
page: pagination.page,
|
||||
pageSize: pagination.pageSize,
|
||||
...filters
|
||||
})
|
||||
if (res.code === 200) {
|
||||
tableData.value = res.data.list || []
|
||||
pagination.total = res.data.total || 0
|
||||
}
|
||||
} catch (e) {
|
||||
ElMessage.error(e.message || '查询失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function handleSearch() {
|
||||
pagination.page = 1
|
||||
fetchList()
|
||||
}
|
||||
|
||||
function resetFilters() {
|
||||
filters.keyword = ''
|
||||
filters.supplier_type = ''
|
||||
filters.supplier_level = ''
|
||||
filters.status = ''
|
||||
filters.is_draft = ''
|
||||
pagination.page = 1
|
||||
fetchList()
|
||||
}
|
||||
|
||||
function openCreate() {
|
||||
currentEditData.value = null
|
||||
editVisible.value = true
|
||||
}
|
||||
|
||||
function openEdit(row) {
|
||||
currentEditData.value = { ...row }
|
||||
editVisible.value = true
|
||||
}
|
||||
|
||||
function openDetail(row) {
|
||||
detailData.value = { ...row }
|
||||
detailVisible.value = true
|
||||
}
|
||||
|
||||
function openContactBook(row) {
|
||||
currentCompany.value = { ...row }
|
||||
contactBookVisible.value = true
|
||||
}
|
||||
|
||||
function formatDate(val) {
|
||||
if (!val) return '-'
|
||||
const d = new Date(val)
|
||||
if (isNaN(d.getTime())) return '-'
|
||||
return d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0')
|
||||
}
|
||||
|
||||
function formatDateTime(val) {
|
||||
if (!val) return '-'
|
||||
const d = new Date(val)
|
||||
return d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0') + ' ' + String(d.getHours()).padStart(2, '0') + ':' + String(d.getMinutes()).padStart(2, '0')
|
||||
}
|
||||
|
||||
function copyInvoiceInfo() {
|
||||
const d = detailData.value
|
||||
if (!d) return
|
||||
const lines = [
|
||||
`发票抬头：${d.invoice_title || ''}`,
|
||||
`纳税人识别号：${d.tax_number || ''}`,
|
||||
`注册地址：${d.registered_address || ''}`,
|
||||
`注册电话：${d.registered_phone || ''}`,
|
||||
`开户行名称：${d.bank_name || ''}`,
|
||||
`开户行账号：${d.bank_account || ''}`
|
||||
]
|
||||
const text = lines.join('\n')
|
||||
if (navigator.clipboard && navigator.clipboard.writeText) {
|
||||
navigator.clipboard.writeText(text).then(() => {
|
||||
ElMessage.success('开票信息已复制到剪贴板')
|
||||
}).catch(() => {
|
||||
fallbackCopy(text)
|
||||
})
|
||||
} else {
|
||||
fallbackCopy(text)
|
||||
}
|
||||
}
|
||||
|
||||
function fallbackCopy(text) {
|
||||
const ta = document.createElement('textarea')
|
||||
ta.value = text
|
||||
ta.style.position = 'fixed'
|
||||
ta.style.opacity = '0'
|
||||
document.body.appendChild(ta)
|
||||
ta.select()
|
||||
try {
|
||||
document.execCommand('copy')
|
||||
ElMessage.success('开票信息已复制到剪贴板')
|
||||
} catch {
|
||||
ElMessage.error('复制失败，请手动复制')
|
||||
}
|
||||
document.body.removeChild(ta)
|
||||
}
|
||||
|
||||
async function handleToggleStatus(row) {
|
||||
const newStatus = row.status === '1' ? '0' : '1'
|
||||
const action = newStatus === '1' ? '启用' : '禁用'
|
||||
try {
|
||||
await ElMessageBox.confirm(`确定要${action}供应商「${row.supplier_name}」吗？`, '提示', {
|
||||
type: 'warning'
|
||||
})
|
||||
await toggleSupplierStatus(row.id, newStatus)
|
||||
ElMessage.success(`${action}成功`)
|
||||
fetchList()
|
||||
} catch (e) {
|
||||
if (e !== 'cancel') {
|
||||
ElMessage.error(e.message || '操作失败')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete(row) {
|
||||
try {
|
||||
await ElMessageBox.confirm(`确定要删除供应商「${row.supplier_name}」吗？删除后不可恢复。`, '删除确认', {
|
||||
type: 'warning'
|
||||
})
|
||||
await deleteSupplier(row.id)
|
||||
ElMessage.success('删除成功')
|
||||
fetchList()
|
||||
} catch (e) {
|
||||
if (e !== 'cancel') {
|
||||
ElMessage.error(e.message || '删除失败')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function supplierTypeText(type) {
|
||||
const map = { '1': '原材料供应商', '2': '设备供应商', '3': '服务供应商', '4': '其他' }
|
||||
return map[type] || type
|
||||
}
|
||||
|
||||
function supplierTypeTag(type) {
|
||||
const map = { '1': 'primary', '2': 'warning', '3': 'success', '4': 'info' }
|
||||
return map[type] || 'info'
|
||||
}
|
||||
|
||||
function supplierLevelText(level) {
|
||||
const map = { '1': '核心供应商', '2': '重要供应商', '3': '普通供应商', '4': '潜在供应商' }
|
||||
return map[level] || level
|
||||
}
|
||||
|
||||
function supplierLevelTag(level) {
|
||||
const map = { '1': 'danger', '2': 'warning', '3': 'info', '4': '' }
|
||||
return map[level] || ''
|
||||
}
|
||||
|
||||
function statusText(status) {
|
||||
const map = { '0': '禁用', '1': '正常', '2': '冻结', '3': '已注销' }
|
||||
return map[status] || status
|
||||
}
|
||||
|
||||
function statusTag(status) {
|
||||
const map = { '0': 'info', '1': 'success', '2': 'warning', '3': 'danger' }
|
||||
return map[status] || 'info'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.supplier-page {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 20px;
|
||||
|
||||
h2 {
|
||||
margin: 0 0 6px 0;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.filter-bar {
|
||||
background: var(--el-bg-color);
|
||||
padding: 16px 16px 0;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 16px;
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
}
|
||||
|
||||
.table-container {
|
||||
background: var(--el-bg-color);
|
||||
padding: 16px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
}
|
||||
|
||||
.name-cell {
|
||||
font-weight: 500;
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
.name-cell-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.name-link {
|
||||
cursor: pointer;
|
||||
color: var(--el-color-primary);
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.desc-title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin-top: 16px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user