增加backend的erp若干功能
This commit is contained in:
@@ -0,0 +1,209 @@
|
||||
<template>
|
||||
<div class="normal-setting-page">
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<h2>基础设置</h2>
|
||||
<p>配置ERP系统基础参数，包括公司信息、税务、单据、库存、财务等</p>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<el-button :icon="RefreshLeft" @click="handleReset">恢复默认</el-button>
|
||||
<el-button type="primary" :icon="Check" :loading="saving" @click="handleSave">保存设置</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="setting-container" v-loading="loading">
|
||||
<el-tabs v-model="activeGroup" type="border-card">
|
||||
<el-tab-pane
|
||||
v-for="group in groupList"
|
||||
:key="group.group"
|
||||
:label="group.name"
|
||||
:name="group.group"
|
||||
>
|
||||
<el-form
|
||||
:model="formData"
|
||||
label-width="160px"
|
||||
label-position="right"
|
||||
style="max-width: 700px; padding-top: 10px"
|
||||
>
|
||||
<el-form-item
|
||||
v-for="item in group.items"
|
||||
:key="item.config_key"
|
||||
:label="item.config_name"
|
||||
>
|
||||
<!-- input -->
|
||||
<el-input
|
||||
v-if="item.config_type === 'input'"
|
||||
v-model="formData[item.config_key]"
|
||||
:placeholder="'请输入' + item.config_name"
|
||||
clearable
|
||||
style="max-width: 400px"
|
||||
/>
|
||||
<!-- number -->
|
||||
<el-input-number
|
||||
v-else-if="item.config_type === 'number'"
|
||||
v-model="formData[item.config_key]"
|
||||
:min="0"
|
||||
:precision="2"
|
||||
style="max-width: 400px"
|
||||
/>
|
||||
<!-- textarea -->
|
||||
<el-input
|
||||
v-else-if="item.config_type === 'textarea'"
|
||||
v-model="formData[item.config_key]"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
:placeholder="'请输入' + item.config_name"
|
||||
style="max-width: 400px"
|
||||
/>
|
||||
<!-- select -->
|
||||
<el-select
|
||||
v-else-if="item.config_type === 'select'"
|
||||
v-model="formData[item.config_key]"
|
||||
:placeholder="'请选择' + item.config_name"
|
||||
style="max-width: 400px; width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="opt in parseOptions(item.config_options)"
|
||||
:key="opt.value"
|
||||
:label="opt.label"
|
||||
:value="opt.value"
|
||||
/>
|
||||
</el-select>
|
||||
<!-- switch -->
|
||||
<el-switch
|
||||
v-else-if="item.config_type === 'switch'"
|
||||
v-model="formData[item.config_key]"
|
||||
active-value="1"
|
||||
inactive-value="0"
|
||||
/>
|
||||
<!-- fallback -->
|
||||
<el-input
|
||||
v-else
|
||||
v-model="formData[item.config_key]"
|
||||
:placeholder="'请输入' + item.config_name"
|
||||
clearable
|
||||
style="max-width: 400px"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { Check, RefreshLeft } from '@element-plus/icons-vue'
|
||||
import { getNormalSettings, saveNormalSettings, resetNormalSettings } from '@/api/normalSetting'
|
||||
|
||||
const loading = ref(false)
|
||||
const saving = ref(false)
|
||||
const activeGroup = ref('company')
|
||||
const groupList = ref([])
|
||||
const formData = reactive({})
|
||||
|
||||
onMounted(() => {
|
||||
fetchSettings()
|
||||
})
|
||||
|
||||
async function fetchSettings() {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getNormalSettings()
|
||||
if (res.code === 200) {
|
||||
groupList.value = res.data || []
|
||||
// 初始化表单数据
|
||||
res.data.forEach(group => {
|
||||
group.items.forEach(item => {
|
||||
formData[item.config_key] = item.config_value
|
||||
})
|
||||
})
|
||||
// 默认选中第一个分组
|
||||
if (groupList.value.length > 0) {
|
||||
activeGroup.value = groupList.value[0].group
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
ElMessage.error(e.message || '加载失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function parseOptions(optionsStr) {
|
||||
if (!optionsStr) return []
|
||||
try {
|
||||
return JSON.parse(optionsStr)
|
||||
} catch (e) {
|
||||
return []
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSave() {
|
||||
saving.value = true
|
||||
try {
|
||||
const payload = { ...formData }
|
||||
const res = await saveNormalSettings(payload)
|
||||
if (res.code === 200) {
|
||||
ElMessage.success('保存成功')
|
||||
} else {
|
||||
ElMessage.error(res.msg || '保存失败')
|
||||
}
|
||||
} catch (e) {
|
||||
ElMessage.error(e.message || '保存失败')
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleReset() {
|
||||
try {
|
||||
await ElMessageBox.confirm('确定要恢复默认设置吗？当前所有自定义配置将被覆盖。', '恢复默认', {
|
||||
type: 'warning'
|
||||
})
|
||||
await resetNormalSettings()
|
||||
ElMessage.success('已恢复默认设置')
|
||||
fetchSettings()
|
||||
} catch (e) {
|
||||
if (e !== 'cancel') {
|
||||
ElMessage.error(e.message || '操作失败')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.normal-setting-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);
|
||||
}
|
||||
}
|
||||
|
||||
.setting-container {
|
||||
max-width: 900px;
|
||||
}
|
||||
|
||||
:deep(.el-tabs__content) {
|
||||
padding: 10px 20px 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,184 @@
|
||||
<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>
|
||||
@@ -0,0 +1,253 @@
|
||||
<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,184 @@
|
||||
<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>
|
||||
@@ -0,0 +1,253 @@
|
||||
<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,453 @@
|
||||
<template>
|
||||
<el-drawer
|
||||
:model-value="visible"
|
||||
@update:model-value="val => emit('update:visible', val)"
|
||||
:title="companyName + ' - 通讯录'"
|
||||
direction="rtl"
|
||||
size="850px"
|
||||
@closed="handleClosed"
|
||||
>
|
||||
<div class="contact-book">
|
||||
<div class="toolbar">
|
||||
<el-button type="primary" :icon="Plus" @click="openCreate">新增联系人</el-button>
|
||||
<span class="count-tip">共 {{ list.length }} 位联系人</span>
|
||||
</div>
|
||||
|
||||
<el-table :data="list" v-loading="loading" stripe border size="small">
|
||||
<el-table-column type="index" label="#" width="50" align="center" />
|
||||
<el-table-column prop="name" label="姓名" width="100">
|
||||
<template #default="{ row }">
|
||||
<span class="contact-name name-link" @click="openDetail(row)">{{ row.name }}</span>
|
||||
<el-tag v-if="row.is_primary === 1" type="danger" size="small" effect="plain" style="margin-left:4px">主要</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="gender" label="性别" width="60" align="center">
|
||||
<template #default="{ row }">{{ genderText(row.gender) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="status" label="状态" width="70" 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 prop="department" label="部门" width="90" show-overflow-tooltip />
|
||||
<el-table-column prop="position" label="职位" width="90" show-overflow-tooltip />
|
||||
<!-- <el-table-column prop="phone" label="座机" width="110" show-overflow-tooltip /> -->
|
||||
<el-table-column label="手机" min-width="130" show-overflow-tooltip>
|
||||
<template #default="{ row }">{{ formatMobiles(row.mobiles) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="email" label="邮箱" min-width="140" show-overflow-tooltip />
|
||||
<el-table-column label="操作" width="140" align="center" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button link type="primary" size="small" @click="openEdit(row)">编辑</el-button>
|
||||
<el-button link type="danger" size="small" @click="handleDelete(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<!-- 新增/编辑弹窗 -->
|
||||
<el-dialog
|
||||
v-model="editVisible"
|
||||
:title="editData ? '编辑联系人' : '新增联系人'"
|
||||
width="640px"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<el-form ref="formRef" :model="form" :rules="rules" label-width="90px" label-position="right">
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="姓名" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入姓名" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="性别" prop="gender">
|
||||
<el-select v-model="form.gender" placeholder="请选择" style="width:100%">
|
||||
<el-option label="未知" :value="0" />
|
||||
<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="department">
|
||||
<el-input v-model="form.department" placeholder="请输入部门" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="职位" prop="position">
|
||||
<el-input v-model="form.position" placeholder="请输入职位" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="座机" prop="phone">
|
||||
<el-input v-model="form.phone" placeholder="请输入座机号" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="邮箱" prop="email">
|
||||
<el-input v-model="form.email" placeholder="请输入邮箱" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 手机（动态，最多5个） -->
|
||||
<el-form-item label="手机">
|
||||
<div class="mobile-list">
|
||||
<div v-for="(m, idx) in form.mobiles" :key="idx" class="mobile-item">
|
||||
<el-input v-model="form.mobiles[idx]" placeholder="请输入手机号" style="flex:1" />
|
||||
<el-button :icon="Delete" :disabled="form.mobiles.length <= 1" @click="removeMobile(idx)" />
|
||||
</div>
|
||||
<el-button v-if="form.mobiles.length < 5" type="primary" plain :icon="Plus" @click="addMobile">
|
||||
添加手机号（{{ form.mobiles.length }}/5）
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="微信" prop="wechat">
|
||||
<el-input v-model="form.wechat" placeholder="请输入微信号" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="QQ" prop="qq">
|
||||
<el-input v-model="form.qq" placeholder="请输入QQ号" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="钉钉" prop="dingtalk">
|
||||
<el-input v-model="form.dingtalk" placeholder="请输入钉钉号" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="主要联系人" prop="is_primary">
|
||||
<el-switch v-model="form.is_primary" :active-value="1" :inactive-value="0" active-text="是" inactive-text="否" />
|
||||
</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="home_address">
|
||||
<el-input v-model="form.home_address" placeholder="请输入家庭住址" />
|
||||
</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="editVisible = false">取消</el-button>
|
||||
<el-button type="primary" :loading="submitting" @click="handleSave">保存</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 联系人详情弹窗 -->
|
||||
<el-dialog
|
||||
v-model="detailVisible"
|
||||
:title="detailData?.name + ' - 联系人详情'"
|
||||
width="560px"
|
||||
>
|
||||
<div v-if="detailData" class="contact-detail">
|
||||
<el-descriptions :column="2" border size="small" label-width="90px">
|
||||
<el-descriptions-item label="姓名">{{ detailData.name }}</el-descriptions-item>
|
||||
<el-descriptions-item label="性别">{{ genderText(detailData.gender) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="部门">{{ detailData.department || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="职位">{{ detailData.position || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="座机">{{ detailData.phone || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="邮箱">{{ detailData.email || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="微信">{{ detailData.wechat || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="QQ">{{ detailData.qq || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="钉钉">{{ detailData.dingtalk || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="主要联系人">
|
||||
<el-tag v-if="detailData.is_primary === 1" type="danger" size="small">是</el-tag>
|
||||
<span v-else>否</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="人员状态">
|
||||
<el-tag :type="detailData.status === 1 ? 'success' : 'info'" size="small">
|
||||
{{ detailData.status === 1 ? '在职' : '离职' }}
|
||||
</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="手机" :span="2">{{ formatMobiles(detailData.mobiles) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="家庭住址" :span="2">{{ detailData.home_address || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="备注" :span="2">{{ detailData.remark || '-' }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
<template #footer>
|
||||
<el-button @click="detailVisible = false">关闭</el-button>
|
||||
<el-button type="primary" @click="editFromDetail">编辑</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, watch } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { Plus, Delete } from '@element-plus/icons-vue'
|
||||
import {
|
||||
getCompanyContactList,
|
||||
createCompanyContact,
|
||||
updateCompanyContact,
|
||||
deleteCompanyContact
|
||||
} from '@/api/companyContact'
|
||||
|
||||
const props = defineProps({
|
||||
visible: { type: Boolean, default: false },
|
||||
companyType: { type: String, default: '' },
|
||||
companyId: { type: [Number, String], default: 0 },
|
||||
companyName: { type: String, default: '' }
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:visible'])
|
||||
|
||||
const loading = ref(false)
|
||||
const list = ref([])
|
||||
const editVisible = ref(false)
|
||||
const editData = ref(null)
|
||||
const submitting = ref(false)
|
||||
const formRef = ref()
|
||||
const detailVisible = ref(false)
|
||||
const detailData = ref(null)
|
||||
|
||||
const defaultForm = () => ({
|
||||
name: '',
|
||||
gender: 0,
|
||||
phone: '',
|
||||
mobiles: [''],
|
||||
wechat: '',
|
||||
qq: '',
|
||||
dingtalk: '',
|
||||
email: '',
|
||||
department: '',
|
||||
position: '',
|
||||
home_address: '',
|
||||
is_primary: 0,
|
||||
status: 1,
|
||||
remark: ''
|
||||
})
|
||||
|
||||
const form = reactive(defaultForm())
|
||||
|
||||
const rules = {
|
||||
name: [{ required: true, message: '请输入姓名', trigger: 'blur' }]
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(val) => {
|
||||
if (val && props.companyType && props.companyId) {
|
||||
fetchList()
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
async function fetchList() {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getCompanyContactList({
|
||||
company_type: props.companyType,
|
||||
company_id: props.companyId
|
||||
})
|
||||
if (res.code === 200) {
|
||||
list.value = res.data.list || []
|
||||
}
|
||||
} catch (e) {
|
||||
ElMessage.error(e.message || '查询失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function genderText(g) {
|
||||
if (g === 1) return '男'
|
||||
if (g === 2) return '女'
|
||||
return '未知'
|
||||
}
|
||||
|
||||
function formatMobiles(mobiles) {
|
||||
if (!mobiles) return '-'
|
||||
try {
|
||||
const arr = typeof mobiles === 'string' ? JSON.parse(mobiles) : mobiles
|
||||
return arr.filter(m => m && m.trim()).join('、') || '-'
|
||||
} catch {
|
||||
return '-'
|
||||
}
|
||||
}
|
||||
|
||||
function addMobile() {
|
||||
if (form.mobiles.length < 5) {
|
||||
form.mobiles.push('')
|
||||
}
|
||||
}
|
||||
|
||||
function removeMobile(idx) {
|
||||
if (form.mobiles.length > 1) {
|
||||
form.mobiles.splice(idx, 1)
|
||||
}
|
||||
}
|
||||
|
||||
function openCreate() {
|
||||
editData.value = null
|
||||
Object.assign(form, defaultForm())
|
||||
editVisible.value = true
|
||||
}
|
||||
|
||||
function openEdit(row) {
|
||||
editData.value = { ...row }
|
||||
let mobiles = ['']
|
||||
try {
|
||||
mobiles = row.mobiles ? (typeof row.mobiles === 'string' ? JSON.parse(row.mobiles) : row.mobiles) : ['']
|
||||
if (!Array.isArray(mobiles) || mobiles.length === 0) mobiles = ['']
|
||||
} catch {
|
||||
mobiles = ['']
|
||||
}
|
||||
Object.assign(form, {
|
||||
name: row.name,
|
||||
gender: row.gender || 0,
|
||||
phone: row.phone || '',
|
||||
mobiles: mobiles,
|
||||
wechat: row.wechat || '',
|
||||
qq: row.qq || '',
|
||||
dingtalk: row.dingtalk || '',
|
||||
email: row.email || '',
|
||||
department: row.department || '',
|
||||
position: row.position || '',
|
||||
home_address: row.home_address || '',
|
||||
is_primary: row.is_primary || 0,
|
||||
status: row.status !== undefined ? row.status : 1,
|
||||
remark: row.remark || ''
|
||||
})
|
||||
editVisible.value = true
|
||||
}
|
||||
|
||||
function openDetail(row) {
|
||||
detailData.value = { ...row }
|
||||
detailVisible.value = true
|
||||
}
|
||||
|
||||
function editFromDetail() {
|
||||
const row = detailData.value
|
||||
detailVisible.value = false
|
||||
if (row) {
|
||||
openEdit(row)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSave() {
|
||||
if (!formRef.value) return
|
||||
try {
|
||||
await formRef.value.validate()
|
||||
} catch (e) {
|
||||
return
|
||||
}
|
||||
|
||||
// 过滤空手机号
|
||||
const validMobiles = form.mobiles.filter(m => m && m.trim())
|
||||
|
||||
submitting.value = true
|
||||
try {
|
||||
const payload = {
|
||||
company_type: props.companyType,
|
||||
company_id: Number(props.companyId),
|
||||
name: form.name,
|
||||
gender: form.gender,
|
||||
phone: form.phone,
|
||||
mobiles: JSON.stringify(validMobiles),
|
||||
wechat: form.wechat,
|
||||
qq: form.qq,
|
||||
dingtalk: form.dingtalk,
|
||||
email: form.email,
|
||||
department: form.department,
|
||||
position: form.position,
|
||||
home_address: form.home_address,
|
||||
is_primary: form.is_primary,
|
||||
status: form.status,
|
||||
remark: form.remark
|
||||
}
|
||||
|
||||
if (editData.value) {
|
||||
await updateCompanyContact(editData.value.id, payload)
|
||||
ElMessage.success('更新成功')
|
||||
} else {
|
||||
await createCompanyContact(payload)
|
||||
ElMessage.success('创建成功')
|
||||
}
|
||||
editVisible.value = false
|
||||
fetchList()
|
||||
} catch (e) {
|
||||
ElMessage.error(e.message || '操作失败')
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete(row) {
|
||||
try {
|
||||
await ElMessageBox.confirm(`确定要删除联系人「${row.name}」吗？`, '提示', { type: 'warning' })
|
||||
await deleteCompanyContact(row.id)
|
||||
ElMessage.success('删除成功')
|
||||
fetchList()
|
||||
} catch (e) {
|
||||
if (e !== 'cancel') {
|
||||
ElMessage.error(e.message || '删除失败')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function handleClosed() {
|
||||
list.value = []
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.contact-book {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.count-tip {
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
.contact-name {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.name-link {
|
||||
cursor: pointer;
|
||||
color: var(--el-color-primary);
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-list {
|
||||
width: 100%;
|
||||
|
||||
.mobile-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,452 @@
|
||||
<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>
|
||||
@@ -0,0 +1,473 @@
|
||||
<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>
|
||||
@@ -0,0 +1,452 @@
|
||||
<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>
|
||||
@@ -0,0 +1,473 @@
|
||||
<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>
|
||||
@@ -0,0 +1,452 @@
|
||||
<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>
|
||||
@@ -0,0 +1,473 @@
|
||||
<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>
|
||||
@@ -0,0 +1,452 @@
|
||||
<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>
|
||||
@@ -0,0 +1,473 @@
|
||||
<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>
|
||||
@@ -0,0 +1,232 @@
|
||||
<template>
|
||||
<div class="container-box">
|
||||
<div class="header-bar">
|
||||
<h2>通知设置</h2>
|
||||
</div>
|
||||
|
||||
<el-divider></el-divider>
|
||||
|
||||
<div class="settings-container">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
label-width="120px"
|
||||
style="max-width: 600px"
|
||||
>
|
||||
<el-form-item label="收件邮箱" prop="email">
|
||||
<el-input
|
||||
v-model="form.email"
|
||||
placeholder="请输入接收提醒的邮箱地址"
|
||||
clearable
|
||||
/>
|
||||
<div class="form-tip">日程提醒将发送到此邮箱，支持重复提醒与确认回执</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="手机号" prop="phone">
|
||||
<el-input
|
||||
v-model="form.phone"
|
||||
placeholder="请输入接收短信提醒的手机号"
|
||||
clearable
|
||||
/>
|
||||
<div class="form-tip">仅发送一次提醒，不支持重复提醒</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="Bark 设备 Key" prop="bark_device_key">
|
||||
<el-input
|
||||
v-model="form.bark_device_key"
|
||||
placeholder="请输入 Bark 设备 Key"
|
||||
clearable
|
||||
/>
|
||||
<div class="form-tip">Bark 是 iOS 推送工具，App Store 下载后打开即可看到设备 Key</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="Bark 服务端">
|
||||
<el-input
|
||||
v-model="form.bark_server_url"
|
||||
placeholder="默认为 https://api.day.app，自建服务请填写"
|
||||
clearable
|
||||
/>
|
||||
<div class="form-tip">使用官方 Bark 服务可留空</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" :loading="saving" @click="handleSave">保存设置</el-button>
|
||||
<el-button :loading="testing" @click="handleTest">发送测试提醒</el-button>
|
||||
<el-button @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<!-- 测试渠道选择对话框 -->
|
||||
<el-dialog v-model="testDialogVisible" title="发送测试提醒" width="420px">
|
||||
<div class="test-dialog-content">
|
||||
<p class="test-dialog-tip">选择要测试的提醒渠道，将立即发送一条测试提醒到对应配置。</p>
|
||||
<el-checkbox-group v-model="testChannels">
|
||||
<el-checkbox value="EMAIL">邮箱</el-checkbox>
|
||||
<el-checkbox value="SMS">短信</el-checkbox>
|
||||
<el-checkbox value="BARK">Bark</el-checkbox>
|
||||
<el-checkbox value="SITE_MSG">站内信</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
<template #footer>
|
||||
<el-button @click="testDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" :loading="testing" @click="confirmTest">发送</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import type { FormInstance, FormRules } from "element-plus";
|
||||
import { getNotifyConfig, updateNotifyConfig } from "@/api/notifyConfig";
|
||||
import { testReminder } from "@/api/reminder";
|
||||
|
||||
const formRef = ref<FormInstance>();
|
||||
|
||||
const form = reactive({
|
||||
email: "",
|
||||
phone: "",
|
||||
bark_device_key: "",
|
||||
bark_server_url: ""
|
||||
});
|
||||
|
||||
const rules: FormRules = {
|
||||
email: [
|
||||
{ type: "email", message: "请输入正确的邮箱地址", trigger: "blur" }
|
||||
],
|
||||
phone: [
|
||||
{ pattern: /^1[3-9]\d{9}$/, message: "请输入正确的手机号", trigger: "blur" }
|
||||
]
|
||||
};
|
||||
|
||||
const saving = ref(false);
|
||||
const testing = ref(false);
|
||||
const testDialogVisible = ref(false);
|
||||
const testChannels = ref<string[]>(["EMAIL", "BARK", "SITE_MSG"]);
|
||||
|
||||
onMounted(() => {
|
||||
fetchConfig();
|
||||
});
|
||||
|
||||
async function fetchConfig() {
|
||||
try {
|
||||
const res = await getNotifyConfig();
|
||||
if (res.code === 200 && res.data) {
|
||||
form.email = res.data.email || "";
|
||||
form.phone = res.data.phone || "";
|
||||
form.bark_device_key = res.data.bark_device_key || "";
|
||||
form.bark_server_url = res.data.bark_server_url || "";
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("获取通知配置失败:", e);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSave() {
|
||||
if (!formRef.value) return;
|
||||
await formRef.value.validate(async (valid) => {
|
||||
if (!valid) return;
|
||||
saving.value = true;
|
||||
try {
|
||||
const res = await updateNotifyConfig(form);
|
||||
if (res.code === 200) {
|
||||
ElMessage.success("保存成功");
|
||||
} else {
|
||||
ElMessage.error(res.msg || "保存失败");
|
||||
}
|
||||
} catch (e: any) {
|
||||
ElMessage.error("保存失败: " + (e.message || e));
|
||||
} finally {
|
||||
saving.value = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function handleReset() {
|
||||
form.email = "";
|
||||
form.phone = "";
|
||||
form.bark_device_key = "";
|
||||
form.bark_server_url = "";
|
||||
}
|
||||
|
||||
function handleTest() {
|
||||
testDialogVisible.value = true;
|
||||
}
|
||||
|
||||
async function confirmTest() {
|
||||
if (testChannels.value.length === 0) {
|
||||
ElMessage.warning("请至少选择一个测试渠道");
|
||||
return;
|
||||
}
|
||||
testing.value = true;
|
||||
try {
|
||||
const res = await testReminder({
|
||||
title: "测试提醒",
|
||||
content: "这是一条测试提醒，如果你收到了说明通知配置正确。",
|
||||
remind_channels: testChannels.value
|
||||
});
|
||||
if (res.code === 200) {
|
||||
const results = res.data || [];
|
||||
const successList = results.filter((r: any) => r.success).map((r: any) => r.channel);
|
||||
const failList = results.filter((r: any) => !r.success);
|
||||
if (failList.length > 0) {
|
||||
const failMsgs = failList.map((r: any) => `${r.channel}: ${r.msg}`).join("；");
|
||||
ElMessage.warning(`部分发送失败：${failMsgs}`);
|
||||
} else {
|
||||
ElMessage.success(`测试提醒已发送（${successList.join("、")}），请注意查收`);
|
||||
}
|
||||
testDialogVisible.value = false;
|
||||
} else {
|
||||
ElMessage.error(res.msg || "发送失败");
|
||||
}
|
||||
} catch (e: any) {
|
||||
ElMessage.error("发送失败: " + (e.message || e));
|
||||
} finally {
|
||||
testing.value = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.container-box {
|
||||
padding: 20px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.header-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: var(--el-text-color-primary);
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.settings-container {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.form-tip {
|
||||
margin-left: 0;
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
margin-top: 5px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.test-dialog-content {
|
||||
.test-dialog-tip {
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
margin-bottom: 16px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user