增加相关功能
This commit is contained in:
@@ -0,0 +1,142 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// AI接入配置
|
||||
export function getAiProviderList() {
|
||||
return request({
|
||||
url: '/backend/ai/provider/list',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export function createAiProvider(data) {
|
||||
return request({
|
||||
url: '/backend/ai/provider',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export function updateAiProvider(id, data) {
|
||||
return request({
|
||||
url: `/backend/ai/provider/${id}`,
|
||||
method: 'put',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export function deleteAiProvider(id) {
|
||||
return request({
|
||||
url: `/backend/ai/provider/${id}`,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
export function testAiProvider(data) {
|
||||
return request({
|
||||
url: '/backend/ai/provider/test',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
// 聊天会话
|
||||
export function getChatSessionList() {
|
||||
return request({
|
||||
url: '/backend/ai/chat/session/list',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export function createChatSession(data) {
|
||||
return request({
|
||||
url: '/backend/ai/chat/session',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export function updateChatSession(id, data) {
|
||||
return request({
|
||||
url: `/backend/ai/chat/session/${id}`,
|
||||
method: 'put',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export function deleteChatSession(id) {
|
||||
return request({
|
||||
url: `/backend/ai/chat/session/${id}`,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
// 聊天消息
|
||||
export function getChatMessageList(sessionId) {
|
||||
return request({
|
||||
url: '/backend/ai/chat/message/list',
|
||||
method: 'get',
|
||||
params: { session_id: sessionId }
|
||||
})
|
||||
}
|
||||
|
||||
export function sendChatMessage(data) {
|
||||
return request({
|
||||
url: '/backend/ai/chat/send',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export function deleteChatMessage(id) {
|
||||
return request({
|
||||
url: `/backend/ai/chat/message/${id}`,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
// 角色预设
|
||||
export function getAiPresetList() {
|
||||
return request({
|
||||
url: '/backend/ai/preset/list',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export function createAiPreset(data) {
|
||||
return request({
|
||||
url: '/backend/ai/preset',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export function updateAiPreset(id, data) {
|
||||
return request({
|
||||
url: `/backend/ai/preset/${id}`,
|
||||
method: 'put',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export function deleteAiPreset(id) {
|
||||
return request({
|
||||
url: `/backend/ai/preset/${id}`,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
export function setAiPresetDefault(id) {
|
||||
return request({
|
||||
url: `/backend/ai/preset/${id}/default`,
|
||||
method: 'put'
|
||||
})
|
||||
}
|
||||
|
||||
// 智能生成公司信息
|
||||
export function smartGenerateCompany(data) {
|
||||
return request({
|
||||
url: '/backend/ai/smart-generate/company',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
@@ -75,6 +75,12 @@ const staticMainChildren = [
|
||||
component: () => import("@/views/user/notifyConfig.vue"),
|
||||
meta: { requiresAuth: true, title: "通知设置" }
|
||||
},
|
||||
{
|
||||
path: "/apps/ai",
|
||||
name: "aiSquare",
|
||||
component: () => import("@/views/apps/ai/index.vue"),
|
||||
meta: { requiresAuth: true, title: "AI广场" }
|
||||
},
|
||||
// 兼容拼写错误的路径重定向
|
||||
{
|
||||
path: "/apps/erp/dashborad",
|
||||
|
||||
@@ -0,0 +1,268 @@
|
||||
<template>
|
||||
<div class="chat-sidebar">
|
||||
<div class="sidebar-header">
|
||||
<el-button type="primary" class="new-chat-btn" :icon="ChatDotRound" @click="handleNewChat">
|
||||
新建对话
|
||||
</el-button>
|
||||
<el-button :icon="Setting" class="settings-btn" @click="settingsVisible = true" title="AI接入设置" />
|
||||
</div>
|
||||
|
||||
<div class="session-list" v-loading="loading">
|
||||
<div
|
||||
v-for="item in list"
|
||||
:key="item.id"
|
||||
class="session-item"
|
||||
:class="{ active: currentId === item.id }"
|
||||
@click="handleSelect(item)"
|
||||
>
|
||||
<el-icon class="session-icon"><ChatDotRound /></el-icon>
|
||||
<template v-if="editingId === item.id">
|
||||
<el-input
|
||||
v-model="editTitle"
|
||||
size="small"
|
||||
class="rename-input"
|
||||
@click.stop
|
||||
@keyup.enter="saveRename(item)"
|
||||
@keyup.esc="cancelRename"
|
||||
@blur="saveRename(item)"
|
||||
ref="renameInputRef"
|
||||
/>
|
||||
</template>
|
||||
<span v-else class="session-title" :title="item.title">{{ item.title }}</span>
|
||||
<div class="session-actions">
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
class="action-btn"
|
||||
:icon="Edit"
|
||||
@click.stop="startRename(item)"
|
||||
title="重命名"
|
||||
/>
|
||||
<el-button
|
||||
link
|
||||
type="danger"
|
||||
class="action-btn"
|
||||
:icon="Delete"
|
||||
@click.stop="handleDelete(item)"
|
||||
title="删除"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<el-empty v-if="!loading && list.length === 0" description="暂无对话" :image-size="60" />
|
||||
</div>
|
||||
|
||||
<ProviderDialog v-model="settingsVisible" @change="handleProviderChange" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, nextTick } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { ChatDotRound, Setting, Delete, Edit } from '@element-plus/icons-vue'
|
||||
import { getChatSessionList, createChatSession, deleteChatSession, updateChatSession } from '@/api/ai'
|
||||
import ProviderDialog from './providerDialog.vue'
|
||||
|
||||
const emit = defineEmits(['select', 'new', 'rename'])
|
||||
|
||||
const loading = ref(false)
|
||||
const list = ref([])
|
||||
const currentId = ref(null)
|
||||
const settingsVisible = ref(false)
|
||||
|
||||
// 重命名
|
||||
const editingId = ref(null)
|
||||
const editTitle = ref('')
|
||||
const renameInputRef = ref()
|
||||
|
||||
onMounted(() => {
|
||||
fetchList()
|
||||
})
|
||||
|
||||
async function fetchList() {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getChatSessionList()
|
||||
if (res.code === 200) {
|
||||
list.value = res.data.list || []
|
||||
}
|
||||
} catch (e) {
|
||||
ElMessage.error(e.message || '查询失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function handleSelect(item) {
|
||||
currentId.value = item.id
|
||||
emit('select', item)
|
||||
}
|
||||
|
||||
async function handleNewChat() {
|
||||
try {
|
||||
const res = await createChatSession({ title: '新对话' })
|
||||
if (res.code === 200) {
|
||||
const newSession = { id: res.data.id, title: res.data.title }
|
||||
list.value.unshift(newSession)
|
||||
currentId.value = newSession.id
|
||||
emit('new', newSession)
|
||||
}
|
||||
} catch (e) {
|
||||
ElMessage.error(e.message || '创建失败')
|
||||
}
|
||||
}
|
||||
|
||||
function startRename(item) {
|
||||
editingId.value = item.id
|
||||
editTitle.value = item.title
|
||||
nextTick(() => {
|
||||
if (renameInputRef.value) {
|
||||
const input = renameInputRef.value[0] || renameInputRef.value
|
||||
if (input && input.focus) input.focus()
|
||||
if (input && input.select) input.select()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function cancelRename() {
|
||||
editingId.value = null
|
||||
editTitle.value = ''
|
||||
}
|
||||
|
||||
async function saveRename(item) {
|
||||
if (editingId.value !== item.id) return
|
||||
const newTitle = editTitle.value.trim()
|
||||
if (!newTitle) {
|
||||
ElMessage.warning('名称不能为空')
|
||||
return
|
||||
}
|
||||
if (newTitle === item.title) {
|
||||
cancelRename()
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
await updateChatSession(item.id, { title: newTitle })
|
||||
item.title = newTitle
|
||||
ElMessage.success('重命名成功')
|
||||
// 如果是当前会话，通知父组件更新标题
|
||||
if (currentId.value === item.id) {
|
||||
emit('rename', { id: item.id, title: newTitle })
|
||||
}
|
||||
} catch (e) {
|
||||
ElMessage.error(e.message || '重命名失败')
|
||||
} finally {
|
||||
cancelRename()
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete(item) {
|
||||
try {
|
||||
await ElMessageBox.confirm(`确定要删除对话「${item.title}」吗？`, '提示', { type: 'warning' })
|
||||
await deleteChatSession(item.id)
|
||||
ElMessage.success('删除成功')
|
||||
list.value = list.value.filter(s => s.id !== item.id)
|
||||
if (currentId.value === item.id) {
|
||||
currentId.value = null
|
||||
emit('select', null)
|
||||
}
|
||||
} catch (e) {
|
||||
if (e !== 'cancel') {
|
||||
ElMessage.error(e.message || '删除失败')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function handleProviderChange() {
|
||||
// 配置变更后不需要特殊处理
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
fetchList,
|
||||
setCurrent: (id) => { currentId.value = id }
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.chat-sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
background: var(--el-fill-color-light);
|
||||
border-right: 1px solid var(--el-border-color-lighter);
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid var(--el-border-color-lighter);
|
||||
|
||||
.new-chat-btn {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.settings-btn {
|
||||
width: 36px;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.session-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.session-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 12px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
margin-bottom: 4px;
|
||||
transition: background 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: var(--el-fill-color);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: var(--el-color-primary-light-9);
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.session-icon {
|
||||
flex-shrink: 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.session-title {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.rename-input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.session-actions {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
flex-shrink: 0;
|
||||
|
||||
.action-btn {
|
||||
padding: 0;
|
||||
opacity: 0.6;
|
||||
transition: opacity 0.2s;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,746 @@
|
||||
<template>
|
||||
<div class="chat-window">
|
||||
<div class="chat-header">
|
||||
<span class="chat-title">{{ sessionTitle || 'AI广场' }}</span>
|
||||
<div class="header-selectors">
|
||||
<el-tooltip :content="defaultPreset ? '当前预设：' + defaultPreset.name + '：' + defaultPreset.content : '未设置默认预设'" placement="bottom">
|
||||
<el-button
|
||||
size="small"
|
||||
:icon="UserFilled"
|
||||
class="preset-btn"
|
||||
:class="{ 'has-preset': !!defaultPreset }"
|
||||
@click="presetVisible = true"
|
||||
>
|
||||
{{ defaultPreset ? defaultPreset.name : '角色预设' }}
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
<el-select
|
||||
v-model="selectedProviderId"
|
||||
placeholder="选择接入"
|
||||
size="small"
|
||||
class="provider-select"
|
||||
@change="handleProviderChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="p in providerList"
|
||||
:key="p.id"
|
||||
:label="p.name + ' (' + (p.provider_type === 'openai' ? 'OpenAI' : 'Anthropic') + ')'"
|
||||
:value="p.id"
|
||||
/>
|
||||
</el-select>
|
||||
<el-select
|
||||
v-model="selectedModel"
|
||||
placeholder="选择模型"
|
||||
size="small"
|
||||
class="model-select"
|
||||
:disabled="!selectedProviderId"
|
||||
>
|
||||
<el-option
|
||||
v-for="m in currentModels"
|
||||
:key="m"
|
||||
:label="m"
|
||||
:value="m"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chat-messages" ref="messagesRef" v-loading="loading">
|
||||
<div v-if="messages.length === 0 && !loading" class="empty-state">
|
||||
<el-empty description="开始与AI对话吧" :image-size="100" />
|
||||
<div class="quick-tips">
|
||||
<el-tag v-for="tip in quickTips" :key="tip" class="tip-tag" @click="handleQuickTip(tip)">
|
||||
{{ tip }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-for="(msg, idx) in messages"
|
||||
:key="msg.id || idx"
|
||||
class="message-item"
|
||||
:class="msg.role === 'user' ? 'user-msg' : 'assistant-msg'"
|
||||
>
|
||||
<div class="message-avatar">
|
||||
<el-icon v-if="msg.role === 'user'"><User /></el-icon>
|
||||
<el-icon v-else><Cpu /></el-icon>
|
||||
</div>
|
||||
<div class="message-content">
|
||||
<!-- 编辑模式 -->
|
||||
<div v-if="editingId === msg.id" class="edit-area">
|
||||
<el-input
|
||||
v-model="editContent"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
resize="none"
|
||||
/>
|
||||
<div class="edit-actions">
|
||||
<el-button size="small" type="primary" :loading="editSaving" @click="saveEdit(msg)">保存</el-button>
|
||||
<el-button size="small" @click="cancelEdit">取消</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 正常显示 -->
|
||||
<template v-else>
|
||||
<div class="message-bubble" :class="{ typing: msg.role === 'assistant' && !msg.content && sending }">
|
||||
<template v-if="msg.role === 'assistant' && !msg.content && sending">
|
||||
<span class="typing-dot"></span>
|
||||
<span class="typing-dot"></span>
|
||||
<span class="typing-dot"></span>
|
||||
</template>
|
||||
<pre v-else class="message-text">{{ msg.content }}</pre>
|
||||
</div>
|
||||
<div class="message-actions">
|
||||
<el-tooltip content="复制" placement="top">
|
||||
<el-button link type="primary" :icon="CopyDocument" class="action-btn" @click="copyMessage(msg)" />
|
||||
</el-tooltip>
|
||||
<el-tooltip v-if="msg.role === 'user'" content="编辑" placement="top">
|
||||
<el-button link type="primary" :icon="Edit" class="action-btn" @click="startEdit(msg)" />
|
||||
</el-tooltip>
|
||||
<el-tooltip :content="msg.role === 'user' ? '重新发送' : '重新生成'" placement="top">
|
||||
<el-button link type="primary" :icon="RefreshRight" class="action-btn" @click="resendMessage(msg, idx)" />
|
||||
</el-tooltip>
|
||||
<el-tooltip content="删除" placement="top">
|
||||
<el-button link type="danger" :icon="Delete" class="action-btn" @click="deleteMessage(msg, idx)" />
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chat-input-area">
|
||||
<div class="input-wrapper">
|
||||
<el-input
|
||||
v-model="inputText"
|
||||
type="textarea"
|
||||
:rows="2"
|
||||
:autosize="{ minRows: 2, maxRows: 6 }"
|
||||
placeholder="输入消息，Enter发送，Shift+Enter换行"
|
||||
@keydown.enter.exact.prevent="handleSend"
|
||||
resize="none"
|
||||
/>
|
||||
<el-button
|
||||
type="primary"
|
||||
class="send-btn"
|
||||
:icon="Promotion"
|
||||
:loading="sending"
|
||||
:disabled="!inputText.trim()"
|
||||
@click="handleSend"
|
||||
>
|
||||
发送
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="input-tip">AI生成内容仅供参考，请核实重要信息</div>
|
||||
</div>
|
||||
|
||||
<PresetDialog v-model="presetVisible" @change="fetchDefaultPreset" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, nextTick, watch, computed, onMounted } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { User, Cpu, Promotion, Edit, CopyDocument, RefreshRight, Delete, UserFilled } from '@element-plus/icons-vue'
|
||||
import { getChatMessageList, sendChatMessage, getAiProviderList, deleteChatMessage, getAiPresetList } from '@/api/ai'
|
||||
import PresetDialog from './presetDialog.vue'
|
||||
|
||||
const props = defineProps({
|
||||
sessionId: { type: [Number, String], default: null },
|
||||
sessionTitle: { type: String, default: '' }
|
||||
})
|
||||
|
||||
const emit = defineEmits(['session-created'])
|
||||
|
||||
const loading = ref(false)
|
||||
const sending = ref(false)
|
||||
const inputText = ref('')
|
||||
const messages = ref([])
|
||||
const messagesRef = ref()
|
||||
|
||||
// 消息编辑
|
||||
const editingId = ref(-1)
|
||||
const editContent = ref('')
|
||||
const editSaving = ref(false)
|
||||
|
||||
// 接入配置和模型选择
|
||||
const providerList = ref([])
|
||||
const selectedProviderId = ref(null)
|
||||
const selectedModel = ref('')
|
||||
|
||||
// 角色预设
|
||||
const presetVisible = ref(false)
|
||||
const defaultPreset = ref(null)
|
||||
|
||||
const currentModels = computed(() => {
|
||||
const p = providerList.value.find(item => item.id === selectedProviderId.value)
|
||||
return p && p.models ? p.models : []
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
fetchProviders()
|
||||
fetchDefaultPreset()
|
||||
})
|
||||
|
||||
async function fetchDefaultPreset() {
|
||||
try {
|
||||
const res = await getAiPresetList()
|
||||
if (res.code === 200 && res.data.list) {
|
||||
defaultPreset.value = res.data.list.find(p => p.is_default === 1) || null
|
||||
}
|
||||
} catch (e) {
|
||||
// 静默失败
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchProviders() {
|
||||
try {
|
||||
const res = await getAiProviderList()
|
||||
if (res.code === 200) {
|
||||
providerList.value = res.data.list || []
|
||||
// 默认选第一个启用的
|
||||
const firstActive = providerList.value.find(p => p.status === 1)
|
||||
if (firstActive) {
|
||||
selectedProviderId.value = firstActive.id
|
||||
if (firstActive.models && firstActive.models.length > 0) {
|
||||
selectedModel.value = firstActive.models[0]
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
// 静默失败，用户可以在设置中配置
|
||||
}
|
||||
}
|
||||
|
||||
function handleProviderChange() {
|
||||
selectedModel.value = ''
|
||||
if (currentModels.value.length > 0) {
|
||||
selectedModel.value = currentModels.value[0]
|
||||
}
|
||||
}
|
||||
|
||||
const quickTips = [
|
||||
'帮我写一份项目计划书',
|
||||
'解释一下什么是微服务架构',
|
||||
'用Go语言写一个HTTP服务器',
|
||||
'总结一下今天的工作要点'
|
||||
]
|
||||
|
||||
watch(
|
||||
() => props.sessionId,
|
||||
(val) => {
|
||||
if (val) {
|
||||
fetchMessages(val)
|
||||
} else {
|
||||
messages.value = []
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
async function fetchMessages(sessionId) {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getChatMessageList(sessionId)
|
||||
if (res.code === 200) {
|
||||
messages.value = res.data.list || []
|
||||
scrollToBottom()
|
||||
}
|
||||
} catch (e) {
|
||||
ElMessage.error(e.message || '加载消息失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSend() {
|
||||
const content = inputText.value.trim()
|
||||
if (!content || sending.value) return
|
||||
inputText.value = ''
|
||||
await doSend(content)
|
||||
}
|
||||
|
||||
// ===== 消息操作 =====
|
||||
function startEdit(msg) {
|
||||
editingId.value = msg.id
|
||||
editContent.value = msg.content
|
||||
}
|
||||
|
||||
function cancelEdit() {
|
||||
editingId.value = -1
|
||||
editContent.value = ''
|
||||
}
|
||||
|
||||
async function saveEdit(msg) {
|
||||
const content = editContent.value.trim()
|
||||
if (!content) return
|
||||
editSaving.value = true
|
||||
try {
|
||||
// 删除原消息及之后的所有消息，然后用新内容重新发送
|
||||
const idx = messages.value.findIndex(m => m.id === msg.id)
|
||||
if (idx >= 0) {
|
||||
// 删除该条及之后的消息（本地）
|
||||
const toDelete = messages.value.slice(idx)
|
||||
messages.value = messages.value.slice(0, idx)
|
||||
// 后端删除（有id的消息）
|
||||
for (const m of toDelete) {
|
||||
if (m.id) {
|
||||
try { await deleteChatMessage(m.id) } catch (e) {}
|
||||
}
|
||||
}
|
||||
}
|
||||
cancelEdit()
|
||||
// 用新内容重新发送
|
||||
await doSend(content)
|
||||
} catch (e) {
|
||||
ElMessage.error(e.message || '操作失败')
|
||||
} finally {
|
||||
editSaving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function copyMessage(msg) {
|
||||
const text = msg.content
|
||||
if (navigator.clipboard && navigator.clipboard.writeText) {
|
||||
navigator.clipboard.writeText(text).then(() => {
|
||||
ElMessage.success('已复制到剪贴板')
|
||||
}).catch(() => {
|
||||
fallbackCopy(text)
|
||||
})
|
||||
} else {
|
||||
fallbackCopy(text)
|
||||
}
|
||||
}
|
||||
|
||||
function fallbackCopy(text) {
|
||||
const textarea = document.createElement('textarea')
|
||||
textarea.value = text
|
||||
textarea.style.position = 'fixed'
|
||||
textarea.style.opacity = '0'
|
||||
document.body.appendChild(textarea)
|
||||
textarea.select()
|
||||
try {
|
||||
document.execCommand('copy')
|
||||
ElMessage.success('已复制到剪贴板')
|
||||
} catch (e) {
|
||||
ElMessage.error('复制失败')
|
||||
}
|
||||
document.body.removeChild(textarea)
|
||||
}
|
||||
|
||||
async function resendMessage(msg, idx) {
|
||||
// 找到对应的用户消息
|
||||
let userMsg = msg
|
||||
if (msg.role === 'assistant') {
|
||||
// 往前找最近的用户消息
|
||||
for (let i = idx - 1; i >= 0; i--) {
|
||||
if (messages.value[i].role === 'user') {
|
||||
userMsg = messages.value[i]
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
if (!userMsg || !userMsg.content) {
|
||||
ElMessage.warning('找不到对应的用户消息')
|
||||
return
|
||||
}
|
||||
|
||||
// 删除该用户消息及之后的所有消息
|
||||
const userIdx = messages.value.findIndex(m => m === userMsg)
|
||||
if (userIdx >= 0) {
|
||||
const toDelete = messages.value.slice(userIdx)
|
||||
messages.value = messages.value.slice(0, userIdx)
|
||||
for (const m of toDelete) {
|
||||
if (m.id) {
|
||||
try { await deleteChatMessage(m.id) } catch (e) {}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 重新发送
|
||||
await doSend(userMsg.content)
|
||||
}
|
||||
|
||||
async function deleteMessage(msg, idx) {
|
||||
try {
|
||||
if (msg.id) {
|
||||
await deleteChatMessage(msg.id)
|
||||
}
|
||||
messages.value.splice(idx, 1)
|
||||
ElMessage.success('已删除')
|
||||
} catch (e) {
|
||||
ElMessage.error(e.message || '删除失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 内部发送方法（供编辑/重新发送调用）
|
||||
async function doSend(content) {
|
||||
if (!content || sending.value) return
|
||||
if (!selectedProviderId.value) {
|
||||
ElMessage.warning('请先选择接入')
|
||||
return
|
||||
}
|
||||
if (!selectedModel.value) {
|
||||
ElMessage.warning('请选择模型')
|
||||
return
|
||||
}
|
||||
|
||||
// 添加用户消息
|
||||
messages.value.push({ role: 'user', content })
|
||||
// 添加空的AI消息，用于流式更新
|
||||
const aiMsg = { id: null, role: 'assistant', content: '' }
|
||||
messages.value.push(aiMsg)
|
||||
sending.value = true
|
||||
scrollToBottom()
|
||||
|
||||
try {
|
||||
const token = localStorage.getItem('token')
|
||||
const apiBase = import.meta.env.VITE_API_BASE_URL || ''
|
||||
const response = await fetch(`${apiBase}/backend/ai/chat/send-stream`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${token}`
|
||||
},
|
||||
body: JSON.stringify({
|
||||
session_id: props.sessionId || 0,
|
||||
content,
|
||||
provider_id: selectedProviderId.value,
|
||||
model: selectedModel.value
|
||||
})
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP ${response.status}`)
|
||||
}
|
||||
|
||||
const reader = response.body.getReader()
|
||||
const decoder = new TextDecoder()
|
||||
let buffer = ''
|
||||
let sessionCreated = false
|
||||
let currentEvent = ''
|
||||
let currentData = ''
|
||||
|
||||
const handleSSEEvent = (eventType, data) => {
|
||||
if (!data) return
|
||||
try {
|
||||
const parsed = JSON.parse(data)
|
||||
if (eventType === 'session') {
|
||||
if (!props.sessionId && parsed.session_id && !sessionCreated) {
|
||||
sessionCreated = true
|
||||
emit('session-created', {
|
||||
id: parsed.session_id,
|
||||
title: content.length > 20 ? content.slice(0, 20) + '...' : content
|
||||
})
|
||||
}
|
||||
} else if (eventType === 'content') {
|
||||
aiMsg.content += parsed.content
|
||||
scrollToBottom()
|
||||
} else if (eventType === 'done') {
|
||||
aiMsg.id = parsed.message_id
|
||||
} else if (eventType === 'error') {
|
||||
throw new Error(parsed.error || 'AI调用失败')
|
||||
}
|
||||
} catch (e) {
|
||||
if (e.message === 'AI调用失败') throw e
|
||||
// JSON解析错误忽略
|
||||
}
|
||||
}
|
||||
|
||||
while (true) {
|
||||
const { done, value } = await reader.read()
|
||||
if (done) break
|
||||
|
||||
buffer += decoder.decode(value, { stream: true })
|
||||
// 统一换行符
|
||||
buffer = buffer.replace(/\r\n/g, '\n')
|
||||
const lines = buffer.split('\n')
|
||||
// 最后一行可能不完整，留到下一次
|
||||
buffer = lines.pop() || ''
|
||||
|
||||
for (const line of lines) {
|
||||
if (line.startsWith('event: ')) {
|
||||
currentEvent = line.slice(7)
|
||||
} else if (line.startsWith('data: ')) {
|
||||
currentData = line.slice(6)
|
||||
} else if (line === '') {
|
||||
// 空行表示一个事件结束
|
||||
handleSSEEvent(currentEvent, currentData)
|
||||
currentEvent = ''
|
||||
currentData = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
// 处理缓冲区中剩余的最后一个事件
|
||||
if (currentData) {
|
||||
handleSSEEvent(currentEvent, currentData)
|
||||
}
|
||||
} catch (e) {
|
||||
ElMessage.error(e.message || '发送失败')
|
||||
// 移除空的AI消息
|
||||
if (aiMsg.content === '') {
|
||||
const idx = messages.value.indexOf(aiMsg)
|
||||
if (idx >= 0) messages.value.splice(idx, 1)
|
||||
}
|
||||
} finally {
|
||||
sending.value = false
|
||||
scrollToBottom()
|
||||
}
|
||||
}
|
||||
|
||||
function handleQuickTip(tip) {
|
||||
inputText.value = tip
|
||||
}
|
||||
|
||||
function scrollToBottom() {
|
||||
nextTick(() => {
|
||||
if (messagesRef.value) {
|
||||
messagesRef.value.scrollTop = messagesRef.value.scrollHeight
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
clearMessages: () => { messages.value = [] }
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.chat-window {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
background: var(--el-bg-color);
|
||||
}
|
||||
|
||||
.chat-header {
|
||||
padding: 12px 24px;
|
||||
border-bottom: 1px solid var(--el-border-color-lighter);
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
|
||||
.chat-title {
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.header-selectors {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
|
||||
.preset-btn {
|
||||
height: 32px;
|
||||
max-width: 160px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
&.has-preset {
|
||||
background: var(--el-color-primary-light-9);
|
||||
border-color: var(--el-color-primary);
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.provider-select {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.model-select {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chat-messages {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
|
||||
.quick-tips {
|
||||
margin-top: 16px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
justify-content: center;
|
||||
max-width: 500px;
|
||||
|
||||
.tip-tag {
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message-item {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-bottom: 24px;
|
||||
|
||||
.message-avatar {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
flex: 1;
|
||||
max-width: calc(100% - 60px);
|
||||
}
|
||||
|
||||
.message-bubble {
|
||||
display: inline-block;
|
||||
padding: 12px 16px;
|
||||
border-radius: 12px;
|
||||
line-height: 1.6;
|
||||
word-break: break-word;
|
||||
|
||||
.message-text {
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.message-actions {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
margin-top: 4px;
|
||||
|
||||
.action-btn {
|
||||
padding: 2px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.edit-area {
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
|
||||
.edit-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-top: 8px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
&.user-msg {
|
||||
flex-direction: row-reverse;
|
||||
|
||||
.message-avatar {
|
||||
background: var(--el-color-primary);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.message-actions {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.message-bubble {
|
||||
background: var(--el-color-primary);
|
||||
color: #fff;
|
||||
border-top-right-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&.assistant-msg {
|
||||
.message-avatar {
|
||||
background: var(--el-color-success-light-9);
|
||||
color: var(--el-color-success);
|
||||
}
|
||||
|
||||
.message-bubble {
|
||||
background: var(--el-fill-color);
|
||||
border-top-left-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.typing {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
min-height: 24px;
|
||||
|
||||
.typing-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--el-text-color-secondary);
|
||||
animation: typing 1.4s infinite;
|
||||
|
||||
&:nth-child(2) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes typing {
|
||||
0%, 60%, 100% {
|
||||
transform: translateY(0);
|
||||
opacity: 0.4;
|
||||
}
|
||||
30% {
|
||||
transform: translateY(-6px);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-input-area {
|
||||
padding: 16px 24px;
|
||||
border-top: 1px solid var(--el-border-color-lighter);
|
||||
background: var(--el-bg-color);
|
||||
|
||||
.input-wrapper {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: flex-end;
|
||||
|
||||
.send-btn {
|
||||
height: 40px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.input-tip {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-placeholder);
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,217 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
:model-value="visible"
|
||||
@update:model-value="emit('update:visible', $event)"
|
||||
title="角色预设管理"
|
||||
width="640px"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<div class="preset-dialog">
|
||||
<div class="preset-header">
|
||||
<span>已保存的角色预设（仅当前用户可见）</span>
|
||||
<el-button type="primary" size="small" :icon="Plus" @click="openCreate">新增预设</el-button>
|
||||
</div>
|
||||
|
||||
<el-table :data="list" v-loading="loading" stripe border size="small">
|
||||
<el-table-column prop="name" label="名称" min-width="120" show-overflow-tooltip />
|
||||
<el-table-column prop="content" label="预设内容" min-width="200" show-overflow-tooltip />
|
||||
<el-table-column label="默认" width="70" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-if="row.is_default === 1" type="success" size="small">默认</el-tag>
|
||||
<span v-else class="text-muted">-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="180" align="center" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button
|
||||
v-if="row.is_default !== 1"
|
||||
link
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="handleSetDefault(row)"
|
||||
>设为默认</el-button>
|
||||
<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>
|
||||
|
||||
<el-empty v-if="!loading && list.length === 0" description="暂无预设，点击右上角新增" :image-size="80" />
|
||||
</div>
|
||||
|
||||
<!-- 新增/编辑表单 -->
|
||||
<el-dialog
|
||||
v-model="formVisible"
|
||||
:title="editData ? '编辑预设' : '新增预设'"
|
||||
width="520px"
|
||||
:close-on-click-modal="false"
|
||||
append-to-body
|
||||
>
|
||||
<el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="如：资深程序员" />
|
||||
</el-form-item>
|
||||
<el-form-item label="预设内容" prop="content">
|
||||
<el-input
|
||||
v-model="form.content"
|
||||
type="textarea"
|
||||
:rows="6"
|
||||
placeholder="如：你是一个资深的Go语言程序员，擅长高并发后端开发，请用专业简洁的方式回答问题"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="设为默认" prop="is_default">
|
||||
<el-switch v-model="form.is_default" :active-value="1" :inactive-value="0" active-text="是" inactive-text="否" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="formVisible = false">取消</el-button>
|
||||
<el-button type="primary" :loading="submitting" @click="handleSave">保存</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, watch } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { Plus } from '@element-plus/icons-vue'
|
||||
import {
|
||||
getAiPresetList,
|
||||
createAiPreset,
|
||||
updateAiPreset,
|
||||
deleteAiPreset,
|
||||
setAiPresetDefault
|
||||
} from '@/api/ai'
|
||||
|
||||
const props = defineProps({
|
||||
visible: { type: Boolean, default: false }
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:visible', 'change'])
|
||||
|
||||
const loading = ref(false)
|
||||
const submitting = ref(false)
|
||||
const list = ref([])
|
||||
const formVisible = ref(false)
|
||||
const formRef = ref()
|
||||
const editData = ref(null)
|
||||
|
||||
const defaultForm = () => ({
|
||||
name: '',
|
||||
content: '',
|
||||
is_default: 0
|
||||
})
|
||||
|
||||
const form = reactive(defaultForm())
|
||||
|
||||
const rules = {
|
||||
name: [{ required: true, message: '请输入预设名称', trigger: 'blur' }],
|
||||
content: [{ required: true, message: '请输入预设内容', trigger: 'blur' }]
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(val) => {
|
||||
if (val) fetchList()
|
||||
}
|
||||
)
|
||||
|
||||
async function fetchList() {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getAiPresetList()
|
||||
if (res.code === 200) {
|
||||
list.value = res.data.list || []
|
||||
}
|
||||
} catch (e) {
|
||||
ElMessage.error(e.message || '查询失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function openCreate() {
|
||||
editData.value = null
|
||||
Object.assign(form, defaultForm())
|
||||
formVisible.value = true
|
||||
}
|
||||
|
||||
function openEdit(row) {
|
||||
editData.value = { ...row }
|
||||
Object.assign(form, {
|
||||
name: row.name,
|
||||
content: row.content,
|
||||
is_default: row.is_default
|
||||
})
|
||||
formVisible.value = true
|
||||
}
|
||||
|
||||
async function handleSave() {
|
||||
if (!formRef.value) return
|
||||
try {
|
||||
await formRef.value.validate()
|
||||
} catch (e) {
|
||||
return
|
||||
}
|
||||
|
||||
submitting.value = true
|
||||
try {
|
||||
if (editData.value) {
|
||||
await updateAiPreset(editData.value.id, form)
|
||||
ElMessage.success('更新成功')
|
||||
} else {
|
||||
await createAiPreset(form)
|
||||
ElMessage.success('创建成功')
|
||||
}
|
||||
formVisible.value = false
|
||||
fetchList()
|
||||
emit('change')
|
||||
} catch (e) {
|
||||
ElMessage.error(e.message || '操作失败')
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSetDefault(row) {
|
||||
try {
|
||||
await setAiPresetDefault(row.id)
|
||||
ElMessage.success('已设为默认')
|
||||
fetchList()
|
||||
emit('change')
|
||||
} catch (e) {
|
||||
ElMessage.error(e.message || '操作失败')
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete(row) {
|
||||
try {
|
||||
await ElMessageBox.confirm(`确定要删除预设「${row.name}」吗？`, '提示', { type: 'warning' })
|
||||
await deleteAiPreset(row.id)
|
||||
ElMessage.success('删除成功')
|
||||
fetchList()
|
||||
emit('change')
|
||||
} catch (e) {
|
||||
if (e !== 'cancel') {
|
||||
ElMessage.error(e.message || '删除失败')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.preset-dialog {
|
||||
.preset-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
font-size: 14px;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: var(--el-text-color-placeholder);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,519 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
:model-value="visible"
|
||||
@update:model-value="emit('update:visible', $event)"
|
||||
title="AI接入设置"
|
||||
width="950px"
|
||||
:close-on-click-modal="false"
|
||||
@closed="handleClosed"
|
||||
>
|
||||
<div class="provider-dialog">
|
||||
<div class="provider-header">
|
||||
<span>已配置的接入</span>
|
||||
<el-button type="primary" size="small" :icon="Plus" @click="openCreate">新增接入</el-button>
|
||||
</div>
|
||||
|
||||
<el-table :data="list" v-loading="loading" stripe border size="small">
|
||||
<el-table-column prop="name" label="名称" min-width="120" show-overflow-tooltip />
|
||||
<el-table-column prop="provider_type" label="类型" width="100" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="row.provider_type === 'openai' ? 'primary' : 'success'" size="small">
|
||||
{{ row.provider_type === 'openai' ? 'OpenAI' : 'Anthropic' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="模型" min-width="160">
|
||||
<template #default="{ row }">
|
||||
<div class="model-tags">
|
||||
<el-tag
|
||||
v-for="(m, i) in row.models"
|
||||
:key="i"
|
||||
size="small"
|
||||
type="info"
|
||||
effect="plain"
|
||||
class="model-tag"
|
||||
>{{ m }}</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="api_base" label="接口地址" min-width="160" show-overflow-tooltip />
|
||||
<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 label="默认" width="70" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-if="row.is_default === 1" type="warning" size="small">默认</el-tag>
|
||||
<span v-else class="text-muted">-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="200" align="center" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button link type="primary" size="small" @click="openEdit(row)">编辑</el-button>
|
||||
<el-button link type="warning" size="small" :icon="Cpu" :loading="testingProviderId === row.id" @click="handleTestProvider(row)">测试</el-button>
|
||||
<el-button link type="danger" size="small" @click="handleDelete(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-empty v-if="!loading && list.length === 0" description="尚未配置AI接入，点击右上角新增" :image-size="80" />
|
||||
</div>
|
||||
|
||||
<!-- 新增/编辑表单 -->
|
||||
<el-dialog
|
||||
v-model="formVisible"
|
||||
:title="editData ? '编辑接入' : '新增接入'"
|
||||
width="560px"
|
||||
:close-on-click-modal="false"
|
||||
append-to-body
|
||||
>
|
||||
<el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
|
||||
<el-form-item label="接入类型" prop="provider_type">
|
||||
<el-radio-group v-model="form.provider_type">
|
||||
<el-radio value="openai">OpenAI 兼容</el-radio>
|
||||
<el-radio value="anthropic">Anthropic</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="配置名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="如：我的GPT-4o" />
|
||||
</el-form-item>
|
||||
<el-form-item label="接口地址" prop="api_base">
|
||||
<el-input
|
||||
v-model="form.api_base"
|
||||
:placeholder="form.provider_type === 'openai' ? 'https://api.openai.com/v1' : 'https://api.anthropic.com'"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="API Key" prop="api_key">
|
||||
<el-input v-model="form.api_key" type="password" show-password placeholder="请输入API Key" />
|
||||
</el-form-item>
|
||||
<el-form-item label="模型列表" prop="models">
|
||||
<div class="model-list">
|
||||
<div v-for="(m, idx) in form.models" :key="idx" class="model-item">
|
||||
<el-input
|
||||
v-model="form.models[idx]"
|
||||
:placeholder="form.provider_type === 'openai' ? 'gpt-4o / gpt-3.5-turbo' : 'claude-3-5-sonnet-20241022'"
|
||||
/>
|
||||
<el-tooltip
|
||||
v-if="getTestResult(form.models[idx]) && !getTestResult(form.models[idx]).success"
|
||||
:content="getTestResult(form.models[idx]).error"
|
||||
placement="top"
|
||||
effect="dark"
|
||||
>
|
||||
<span class="status-dot status-error"></span>
|
||||
</el-tooltip>
|
||||
<span
|
||||
v-else-if="getTestResult(form.models[idx]) && getTestResult(form.models[idx]).success"
|
||||
class="status-dot status-success"
|
||||
></span>
|
||||
<span v-else class="status-dot status-unknown"></span>
|
||||
<el-button
|
||||
link
|
||||
type="danger"
|
||||
:icon="Delete"
|
||||
:disabled="form.models.length <= 1"
|
||||
@click="removeModel(idx)"
|
||||
/>
|
||||
</div>
|
||||
<div class="model-actions">
|
||||
<el-button type="primary" plain size="small" :icon="Plus" @click="addModel">添加模型</el-button>
|
||||
<el-button type="success" plain size="small" :icon="Cpu" :loading="testing" @click="handleTestInForm">测试连通性</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-switch v-model="form.status" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="禁用" />
|
||||
</el-form-item>
|
||||
<el-form-item label="默认模型" prop="is_default">
|
||||
<el-switch v-model="form.is_default" :active-value="1" :inactive-value="0" active-text="是" inactive-text="否" />
|
||||
<div class="form-tip">设为默认后，智能添加供应商/客户等企业级功能将调用此接入</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" type="textarea" :rows="2" placeholder="选填" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="formVisible = false">取消</el-button>
|
||||
<el-button type="primary" :loading="submitting" @click="handleSave">保存</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, watch, onMounted } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { Plus, Delete, Cpu } from '@element-plus/icons-vue'
|
||||
import {
|
||||
getAiProviderList,
|
||||
createAiProvider,
|
||||
updateAiProvider,
|
||||
deleteAiProvider,
|
||||
testAiProvider
|
||||
} from '@/api/ai'
|
||||
|
||||
const props = defineProps({
|
||||
visible: { type: Boolean, default: false }
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:visible', 'change'])
|
||||
|
||||
const loading = ref(false)
|
||||
const submitting = ref(false)
|
||||
const testing = ref(false)
|
||||
const testingProviderId = ref(null)
|
||||
const list = ref([])
|
||||
const formVisible = ref(false)
|
||||
const formRef = ref()
|
||||
const editData = ref(null)
|
||||
const testResults = ref({}) // key: 模型名, value: { success, error }
|
||||
|
||||
const defaultForm = () => ({
|
||||
provider_type: 'openai',
|
||||
name: '',
|
||||
api_base: '',
|
||||
api_key: '',
|
||||
models: [''],
|
||||
is_default: 0,
|
||||
status: 1,
|
||||
remark: ''
|
||||
})
|
||||
|
||||
const form = reactive(defaultForm())
|
||||
|
||||
const rules = {
|
||||
provider_type: [{ required: true, message: '请选择接入类型', trigger: 'change' }],
|
||||
name: [{ required: true, message: '请输入配置名称', trigger: 'blur' }],
|
||||
api_base: [{ required: true, message: '请输入接口地址', trigger: 'blur' }],
|
||||
api_key: [{ required: true, message: '请输入API Key', trigger: 'blur' }]
|
||||
}
|
||||
|
||||
function addModel() {
|
||||
form.models.push('')
|
||||
}
|
||||
|
||||
function removeModel(idx) {
|
||||
if (form.models.length > 1) {
|
||||
const removed = form.models[idx]
|
||||
form.models.splice(idx, 1)
|
||||
// 清除被删除模型的测试结果
|
||||
if (removed && testResults.value[removed]) {
|
||||
delete testResults.value[removed]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function getTestResult(model) {
|
||||
if (!model) return null
|
||||
return testResults.value[model.trim()] || null
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(val) => {
|
||||
if (val) {
|
||||
console.log('[providerDialog] Dialog opened')
|
||||
// Dialog打开时重新加载，确保数据最新
|
||||
fetchList()
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
onMounted(() => {
|
||||
console.log('[providerDialog] Component mounted, visible:', props.visible)
|
||||
// 立即尝试加载第一次，模仿chatWindow的做法
|
||||
fetchList()
|
||||
})
|
||||
|
||||
async function fetchList() {
|
||||
loading.value = true
|
||||
try {
|
||||
console.log('[providerDialog] Starting fetchList...')
|
||||
const res = await getAiProviderList()
|
||||
console.log('[providerDialog] Response received:', res)
|
||||
|
||||
if (!res) {
|
||||
console.warn('[providerDialog] Response is null/undefined')
|
||||
list.value = []
|
||||
return
|
||||
}
|
||||
|
||||
// 检查响应状态
|
||||
if (res.code !== 200) {
|
||||
console.warn('[providerDialog] Response code is not 200:', res.code)
|
||||
list.value = []
|
||||
return
|
||||
}
|
||||
|
||||
// 获取数据
|
||||
let data = res.data?.list
|
||||
console.log('[providerDialog] Extracted data:', data)
|
||||
|
||||
if (!Array.isArray(data)) {
|
||||
console.warn('[providerDialog] Data is not an array:', typeof data, data)
|
||||
list.value = []
|
||||
return
|
||||
}
|
||||
|
||||
// 赋值给响应式引用
|
||||
console.log('[providerDialog] Setting list with', data.length, 'items')
|
||||
list.value = data
|
||||
console.log('[providerDialog] list.value is now:', list.value)
|
||||
} catch (e) {
|
||||
console.error('[providerDialog] Error in fetchList:', e)
|
||||
ElMessage.error(e.message || '查询失败')
|
||||
list.value = []
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function openCreate() {
|
||||
editData.value = null
|
||||
Object.assign(form, defaultForm())
|
||||
testResults.value = {}
|
||||
formVisible.value = true
|
||||
}
|
||||
|
||||
function openEdit(row) {
|
||||
editData.value = { ...row }
|
||||
Object.assign(form, {
|
||||
id: row.id,
|
||||
provider_type: row.provider_type,
|
||||
name: row.name,
|
||||
api_base: row.api_base,
|
||||
api_key: row.api_key,
|
||||
models: row.models && row.models.length > 0 ? [...row.models] : [''],
|
||||
is_default: row.is_default || 0,
|
||||
status: row.status,
|
||||
remark: row.remark
|
||||
})
|
||||
testResults.value = {}
|
||||
formVisible.value = true
|
||||
}
|
||||
|
||||
async function handleSave() {
|
||||
if (!formRef.value) return
|
||||
try {
|
||||
await formRef.value.validate()
|
||||
} catch (e) {
|
||||
return
|
||||
}
|
||||
|
||||
// 过滤空模型
|
||||
const validModels = form.models.map(m => m.trim()).filter(m => m !== '')
|
||||
if (validModels.length === 0) {
|
||||
ElMessage.error('至少配置一个模型')
|
||||
return
|
||||
}
|
||||
|
||||
submitting.value = true
|
||||
try {
|
||||
const payload = { ...form, models: validModels }
|
||||
if (editData.value) {
|
||||
await updateAiProvider(editData.value.id, payload)
|
||||
ElMessage.success('更新成功')
|
||||
} else {
|
||||
await createAiProvider(payload)
|
||||
ElMessage.success('创建成功')
|
||||
}
|
||||
formVisible.value = false
|
||||
fetchList()
|
||||
emit('change')
|
||||
} catch (e) {
|
||||
ElMessage.error(e.message || '操作失败')
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete(row) {
|
||||
try {
|
||||
await ElMessageBox.confirm(`确定要删除接入「${row.name}」吗？`, '提示', { type: 'warning' })
|
||||
await deleteAiProvider(row.id)
|
||||
ElMessage.success('删除成功')
|
||||
fetchList()
|
||||
emit('change')
|
||||
} catch (e) {
|
||||
if (e !== 'cancel') {
|
||||
ElMessage.error(e.message || '删除失败')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function handleTestProvider(row) {
|
||||
if (!row.models || row.models.length === 0) {
|
||||
ElMessage.warning('该接入未配置模型')
|
||||
return
|
||||
}
|
||||
|
||||
// 需要先编辑才能看到真实的api_key进行测试
|
||||
// 或者直接从当前编辑的form中获取（如果正在编辑这个provider）
|
||||
let apiKey = row.api_key
|
||||
|
||||
// 如果是脱敏的key，需要打开编辑对话框
|
||||
if (apiKey && apiKey.includes('****')) {
|
||||
ElMessage.warning('需要打开编辑表单才能看到完整API Key进行测试')
|
||||
openEdit(row)
|
||||
return
|
||||
}
|
||||
|
||||
testingProviderId.value = row.id
|
||||
try {
|
||||
const res = await testAiProvider({
|
||||
provider_type: row.provider_type,
|
||||
api_base: row.api_base,
|
||||
api_key: apiKey,
|
||||
models: row.models
|
||||
})
|
||||
|
||||
if (res.code === 200 && res.data.results) {
|
||||
const successCount = res.data.results.filter(r => r.success).length
|
||||
const totalCount = res.data.results.length
|
||||
|
||||
if (successCount === totalCount) {
|
||||
ElMessage.success(`测试成功：${successCount}/${totalCount} 个模型连通`)
|
||||
} else if (successCount === 0) {
|
||||
// 所有模型都失败，显示第一个错误
|
||||
const firstError = res.data.results[0]
|
||||
ElMessage.error(`测试失败：${firstError.model} - ${firstError.error}`)
|
||||
} else {
|
||||
// 部分成功
|
||||
ElMessage({
|
||||
type: 'warning',
|
||||
message: `测试部分成功：${successCount}/${totalCount} 个模型连通`,
|
||||
duration: 5000
|
||||
})
|
||||
}
|
||||
} else {
|
||||
ElMessage.error(res.msg || '测试失败')
|
||||
}
|
||||
} catch (e) {
|
||||
ElMessage.error(e.message || '测试失败')
|
||||
} finally {
|
||||
testingProviderId.value = null
|
||||
}
|
||||
}
|
||||
|
||||
async function handleTestInForm() {
|
||||
// 在编辑表单中测试
|
||||
const validModels = form.models.map(m => m.trim()).filter(m => m !== '')
|
||||
if (validModels.length === 0) {
|
||||
ElMessage.warning('请先填写模型名称')
|
||||
return
|
||||
}
|
||||
if (!form.api_base || !form.api_key) {
|
||||
ElMessage.warning('请先填写接口地址和API Key')
|
||||
return
|
||||
}
|
||||
if (form.api_key.includes('****')) {
|
||||
ElMessage.warning('请输入完整的API Key（非脱敏形式）')
|
||||
return
|
||||
}
|
||||
|
||||
testing.value = true
|
||||
testResults.value = {}
|
||||
try {
|
||||
const res = await testAiProvider({
|
||||
provider_type: form.provider_type,
|
||||
api_base: form.api_base,
|
||||
api_key: form.api_key,
|
||||
models: validModels
|
||||
})
|
||||
if (res.code === 200 && res.data.results) {
|
||||
res.data.results.forEach(r => {
|
||||
testResults.value[r.model] = { success: r.success, error: r.error }
|
||||
})
|
||||
const successCount = res.data.results.filter(r => r.success).length
|
||||
ElMessage.success(`测试完成：${successCount}/${res.data.results.length} 个模型连通`)
|
||||
}
|
||||
} catch (e) {
|
||||
ElMessage.error(e.message || '测试失败')
|
||||
} finally {
|
||||
testing.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function handleClosed() {
|
||||
formRef.value?.resetFields()
|
||||
Object.assign(form, defaultForm())
|
||||
editData.value = null
|
||||
testResults.value = {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.provider-dialog {
|
||||
.provider-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
font-size: 14px;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
|
||||
.model-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
|
||||
.model-tag {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: var(--el-text-color-placeholder);
|
||||
}
|
||||
|
||||
.form-tip {
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-secondary);
|
||||
margin-top: 4px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
|
||||
.model-list {
|
||||
width: 100%;
|
||||
|
||||
.model-item {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.model-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
display: inline-block;
|
||||
|
||||
&.status-success {
|
||||
background: #67c23a;
|
||||
box-shadow: 0 0 4px rgba(103, 194, 58, 0.5);
|
||||
}
|
||||
|
||||
&.status-error {
|
||||
background: #f56c6c;
|
||||
box-shadow: 0 0 4px rgba(245, 108, 108, 0.5);
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
&.status-unknown {
|
||||
background: #dcdfe6;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<div class="ai-page">
|
||||
<div class="ai-layout">
|
||||
<div class="sidebar-col">
|
||||
<ChatSidebar
|
||||
ref="sidebarRef"
|
||||
@select="handleSessionSelect"
|
||||
@new="handleSessionNew"
|
||||
@rename="handleSessionRename"
|
||||
/>
|
||||
</div>
|
||||
<div class="main-col">
|
||||
<ChatWindow
|
||||
ref="windowRef"
|
||||
:session-id="currentSessionId"
|
||||
:session-title="currentSessionTitle"
|
||||
@session-created="handleSessionCreated"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import ChatSidebar from './components/chatSidebar.vue'
|
||||
import ChatWindow from './components/chatWindow.vue'
|
||||
|
||||
const sidebarRef = ref()
|
||||
const windowRef = ref()
|
||||
const currentSessionId = ref(null)
|
||||
const currentSessionTitle = ref('')
|
||||
|
||||
function handleSessionSelect(session) {
|
||||
if (session) {
|
||||
currentSessionId.value = session.id
|
||||
currentSessionTitle.value = session.title
|
||||
} else {
|
||||
currentSessionId.value = null
|
||||
currentSessionTitle.value = ''
|
||||
windowRef.value?.clearMessages()
|
||||
}
|
||||
}
|
||||
|
||||
function handleSessionNew(session) {
|
||||
currentSessionId.value = session.id
|
||||
currentSessionTitle.value = session.title
|
||||
windowRef.value?.clearMessages()
|
||||
}
|
||||
|
||||
function handleSessionCreated(data) {
|
||||
currentSessionId.value = data.id
|
||||
currentSessionTitle.value = data.title
|
||||
sidebarRef.value?.fetchList()
|
||||
sidebarRef.value?.setCurrent(data.id)
|
||||
}
|
||||
|
||||
function handleSessionRename(data) {
|
||||
if (currentSessionId.value === data.id) {
|
||||
currentSessionTitle.value = data.title
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.ai-page {
|
||||
height: calc(100vh - 200px);
|
||||
min-height: 500px;
|
||||
background: var(--el-bg-color);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ai-layout {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.sidebar-col {
|
||||
width: 280px;
|
||||
flex-shrink: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.main-col {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -1,184 +0,0 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
:model-value="visible"
|
||||
:title="isEdit ? '编辑账套' : '新增账套'"
|
||||
width="640px"
|
||||
:close-on-click-modal="false"
|
||||
@update:model-value="handleClose"
|
||||
@closed="handleClosed"
|
||||
>
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
label-width="110px"
|
||||
label-position="right"
|
||||
>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="账套编码" prop="set_code">
|
||||
<el-input v-model="form.set_code" placeholder="请输入账套编码" :disabled="isEdit" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="账套名称" prop="set_name">
|
||||
<el-input v-model="form.set_name" placeholder="请输入账套名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="公司名称" prop="company_name">
|
||||
<el-input v-model="form.company_name" placeholder="请输入公司名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="公司税号" prop="company_tax_no">
|
||||
<el-input v-model="form.company_tax_no" placeholder="请输入纳税人识别号" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="启用年度" prop="start_year">
|
||||
<el-input-number v-model="form.start_year" :min="2000" :max="2100" style="width: 100%" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="启用月份" prop="start_month">
|
||||
<el-select v-model="form.start_month" placeholder="请选择" style="width: 100%">
|
||||
<el-option v-for="m in 12" :key="m" :label="m + '月'" :value="m" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="会计制度" prop="accounting_standard">
|
||||
<el-select v-model="form.accounting_standard" placeholder="请选择" style="width: 100%">
|
||||
<el-option label="企业会计准则" value="1" />
|
||||
<el-option label="小企业会计准则" value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="记账本位币" prop="currency">
|
||||
<el-select v-model="form.currency" placeholder="请选择" style="width: 100%">
|
||||
<el-option label="人民币(CNY)" value="CNY" />
|
||||
<el-option label="美元(USD)" value="USD" />
|
||||
<el-option label="欧元(EUR)" value="EUR" />
|
||||
<el-option label="港币(HKD)" value="HKD" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="默认税率(%)" prop="tax_rate">
|
||||
<el-input-number v-model="form.tax_rate" :min="0" :max="100" :precision="2" :step="0.5" style="width: 100%" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="form.status" placeholder="请选择" style="width: 100%">
|
||||
<el-option label="启用" value="1" />
|
||||
<el-option label="禁用" value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input
|
||||
v-model="form.remark"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="请输入备注信息"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<el-button @click="handleClose">取消</el-button>
|
||||
<el-button type="primary" :loading="submitting" @click="handleSubmit">保存</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, watch } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { createAccountSet, updateAccountSet } from '@/api/accountSet'
|
||||
|
||||
const props = defineProps({
|
||||
visible: { type: Boolean, default: false },
|
||||
editData: { type: Object, default: null }
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:visible', 'success'])
|
||||
|
||||
const formRef = ref()
|
||||
const submitting = ref(false)
|
||||
const isEdit = ref(false)
|
||||
|
||||
const defaultForm = () => ({
|
||||
set_code: '',
|
||||
set_name: '',
|
||||
company_name: '',
|
||||
company_tax_no: '',
|
||||
start_year: new Date().getFullYear(),
|
||||
start_month: 1,
|
||||
accounting_standard: '1',
|
||||
currency: 'CNY',
|
||||
tax_rate: 13.00,
|
||||
status: '1',
|
||||
remark: ''
|
||||
})
|
||||
|
||||
const form = reactive(defaultForm())
|
||||
|
||||
const rules = {
|
||||
set_code: [{ required: true, message: '请输入账套编码', trigger: 'blur' }],
|
||||
set_name: [{ required: true, message: '请输入账套名称', trigger: 'blur' }]
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(val) => {
|
||||
if (val) {
|
||||
if (props.editData) {
|
||||
isEdit.value = true
|
||||
Object.assign(form, props.editData)
|
||||
} else {
|
||||
isEdit.value = false
|
||||
Object.assign(form, defaultForm())
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
function handleClose() {
|
||||
emit('update:visible', false)
|
||||
}
|
||||
|
||||
function handleClosed() {
|
||||
formRef.value?.resetFields()
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
if (!formRef.value) return
|
||||
await formRef.value.validate(async (valid) => {
|
||||
if (!valid) return
|
||||
submitting.value = true
|
||||
try {
|
||||
const payload = { ...form }
|
||||
if (isEdit.value) {
|
||||
await updateAccountSet(props.editData.id, payload)
|
||||
ElMessage.success('更新成功')
|
||||
} else {
|
||||
await createAccountSet(payload)
|
||||
ElMessage.success('创建成功')
|
||||
}
|
||||
emit('success')
|
||||
handleClose()
|
||||
} catch (e) {
|
||||
ElMessage.error(e.message || '操作失败')
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
@@ -1,253 +0,0 @@
|
||||
<template>
|
||||
<div class="account-set-page">
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<h2>账套管理</h2>
|
||||
<p>管理企业账套信息，支持多账套切换与独立核算</p>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<el-button type="primary" :icon="Plus" @click="openCreate">新增账套</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-bar">
|
||||
<el-form :inline="true" :model="filters" @submit.prevent>
|
||||
<el-form-item>
|
||||
<el-input
|
||||
v-model="filters.keyword"
|
||||
clearable
|
||||
placeholder="搜索账套名称"
|
||||
:prefix-icon="Search"
|
||||
style="width: 220px"
|
||||
@keyup.enter="handleSearch"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态">
|
||||
<el-select v-model="filters.status" clearable placeholder="全部" style="width: 120px">
|
||||
<el-option label="启用" value="1" />
|
||||
<el-option label="禁用" value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
|
||||
<el-button :icon="Refresh" @click="resetFilters">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<div class="table-container" v-loading="loading">
|
||||
<el-table :data="tableData" stripe border>
|
||||
<el-table-column type="index" label="#" width="60" align="center" />
|
||||
<el-table-column prop="set_code" label="账套编码" width="120" />
|
||||
<el-table-column prop="set_name" label="账套名称" min-width="160" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
<span class="name-cell">{{ row.set_name }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="company_name" label="公司名称" min-width="160" show-overflow-tooltip />
|
||||
<el-table-column prop="company_tax_no" label="税号" width="180" show-overflow-tooltip />
|
||||
<el-table-column label="启用期间" width="120" align="center">
|
||||
<template #default="{ row }">
|
||||
<span>{{ row.start_year }}-{{ String(row.start_month).padStart(2, '0') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="accounting_standard" label="会计制度" width="130" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag size="small" :type="row.accounting_standard === '1' ? 'primary' : 'info'">
|
||||
{{ row.accounting_standard === '1' ? '企业会计准则' : '小企业会计准则' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="currency" label="币种" width="80" align="center" />
|
||||
<el-table-column prop="tax_rate" label="税率(%)" width="90" align="center" />
|
||||
<el-table-column prop="status" label="状态" width="80" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="row.status === '1' ? 'success' : 'info'" size="small">
|
||||
{{ row.status === '1' ? '启用' : '禁用' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="180" align="center" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button link type="primary" size="small" @click="openEdit(row)">编辑</el-button>
|
||||
<el-button link type="primary" size="small" @click="handleToggleStatus(row)">
|
||||
{{ row.status === '1' ? '禁用' : '启用' }}
|
||||
</el-button>
|
||||
<el-button link type="danger" size="small" @click="handleDelete(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="pagination">
|
||||
<el-pagination
|
||||
v-model:current-page="pagination.page"
|
||||
v-model:page-size="pagination.pageSize"
|
||||
:total="pagination.total"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="fetchList"
|
||||
@current-change="fetchList"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<AccountSetEdit
|
||||
v-model:visible="editVisible"
|
||||
:edit-data="currentEditData"
|
||||
@success="fetchList"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { Plus, Search, Refresh } from '@element-plus/icons-vue'
|
||||
import { getAccountSetList, deleteAccountSet, toggleAccountSetStatus } from '@/api/accountSet'
|
||||
import AccountSetEdit from './components/edit.vue'
|
||||
|
||||
const loading = ref(false)
|
||||
const tableData = ref([])
|
||||
const editVisible = ref(false)
|
||||
const currentEditData = ref(null)
|
||||
|
||||
const filters = reactive({
|
||||
keyword: '',
|
||||
status: ''
|
||||
})
|
||||
|
||||
const pagination = reactive({
|
||||
page: 1,
|
||||
pageSize: 20,
|
||||
total: 0
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
fetchList()
|
||||
})
|
||||
|
||||
async function fetchList() {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getAccountSetList({
|
||||
page: pagination.page,
|
||||
pageSize: pagination.pageSize,
|
||||
...filters
|
||||
})
|
||||
if (res.code === 200) {
|
||||
tableData.value = res.data.list || []
|
||||
pagination.total = res.data.total || 0
|
||||
}
|
||||
} catch (e) {
|
||||
ElMessage.error(e.message || '查询失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function handleSearch() {
|
||||
pagination.page = 1
|
||||
fetchList()
|
||||
}
|
||||
|
||||
function resetFilters() {
|
||||
filters.keyword = ''
|
||||
filters.status = ''
|
||||
pagination.page = 1
|
||||
fetchList()
|
||||
}
|
||||
|
||||
function openCreate() {
|
||||
currentEditData.value = null
|
||||
editVisible.value = true
|
||||
}
|
||||
|
||||
function openEdit(row) {
|
||||
currentEditData.value = { ...row }
|
||||
editVisible.value = true
|
||||
}
|
||||
|
||||
async function handleToggleStatus(row) {
|
||||
const newStatus = row.status === '1' ? '0' : '1'
|
||||
const action = newStatus === '1' ? '启用' : '禁用'
|
||||
try {
|
||||
await ElMessageBox.confirm(`确定要${action}账套「${row.set_name}」吗？`, '提示', {
|
||||
type: 'warning'
|
||||
})
|
||||
await toggleAccountSetStatus(row.id, newStatus)
|
||||
ElMessage.success(`${action}成功`)
|
||||
fetchList()
|
||||
} catch (e) {
|
||||
if (e !== 'cancel') {
|
||||
ElMessage.error(e.message || '操作失败')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete(row) {
|
||||
try {
|
||||
await ElMessageBox.confirm(`确定要删除账套「${row.set_name}」吗？删除后不可恢复。`, '删除确认', {
|
||||
type: 'warning'
|
||||
})
|
||||
await deleteAccountSet(row.id)
|
||||
ElMessage.success('删除成功')
|
||||
fetchList()
|
||||
} catch (e) {
|
||||
if (e !== 'cancel') {
|
||||
ElMessage.error(e.message || '删除失败')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.account-set-page {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 20px;
|
||||
|
||||
h2 {
|
||||
margin: 0 0 6px 0;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.filter-bar {
|
||||
background: var(--el-bg-color);
|
||||
padding: 16px 16px 0;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 16px;
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
}
|
||||
|
||||
.table-container {
|
||||
background: var(--el-bg-color);
|
||||
padding: 16px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
}
|
||||
|
||||
.name-cell {
|
||||
font-weight: 500;
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin-top: 16px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,351 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
:model-value="visible"
|
||||
@update:model-value="emit('update:visible', $event)"
|
||||
:title="type === 'supplier' ? '智能添加供应商' : '智能添加客户'"
|
||||
width="780px"
|
||||
:close-on-click-modal="false"
|
||||
@closed="handleClosed"
|
||||
>
|
||||
<!-- 第一步：输入名称 -->
|
||||
<div v-if="step === 1" class="step-input">
|
||||
<el-form label-width="100px">
|
||||
<el-form-item :label="type === 'supplier' ? '供应商名称' : '客户名称'" required>
|
||||
<el-input
|
||||
v-model="companyName"
|
||||
:placeholder="type === 'supplier' ? '请输入供应商全称或简称' : '请输入客户全称或简称'"
|
||||
@keyup.enter="handleGenerate"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-alert
|
||||
title="AI将根据公司名称自动生成企业信息、联系方式、开票信息等，生成后可手动修改"
|
||||
type="info"
|
||||
:closable="false"
|
||||
show-icon
|
||||
/>
|
||||
</el-form>
|
||||
<div class="step-actions">
|
||||
<el-button type="primary" :icon="Cpu" :loading="generating" @click="handleGenerate">
|
||||
智能生成
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 第二步：确认编辑 -->
|
||||
<div v-else class="step-confirm">
|
||||
<div class="confirm-header">
|
||||
<el-alert
|
||||
title="AI已生成以下信息，请检查确认，可直接修改错误内容，确认无误后点击保存"
|
||||
type="success"
|
||||
:closable="false"
|
||||
show-icon
|
||||
/>
|
||||
</div>
|
||||
|
||||
<el-form ref="formRef" :model="form" label-width="110px" class="smart-form">
|
||||
<el-divider content-position="left">基本信息</el-divider>
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="12">
|
||||
<el-form-item :label="type === 'supplier' ? '供应商名称' : '客户名称'">
|
||||
<el-input v-model="form.name" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="所属行业">
|
||||
<el-input v-model="form.industry" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="企业类型">
|
||||
<el-input v-model="form.enterprise_type" placeholder="如：有限责任公司" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="纳税人资质">
|
||||
<el-select v-model="form.taxpayer_qualification" placeholder="请选择" style="width: 100%">
|
||||
<el-option label="一般纳税人" value="一般纳税人" />
|
||||
<el-option label="小规模纳税人" value="小规模纳税人" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="注册资本">
|
||||
<el-input v-model="form.registered_capital" placeholder="如：100万元" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="实缴资本">
|
||||
<el-input v-model="form.paid_capital" placeholder="如：50万元" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="成立日期">
|
||||
<el-date-picker v-model="form.establish_date" type="date" value-format="YYYY-MM-DD" style="width: 100%" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="行政区划">
|
||||
<el-input v-model="form.administrative_division" placeholder="如：江苏省连云港市海州区" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="经营范围">
|
||||
<el-input v-model="form.business_scope" type="textarea" :rows="2" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="公司地址">
|
||||
<el-input v-model="form.address" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-divider content-position="left">联系信息</el-divider>
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="联系人">
|
||||
<el-input v-model="form.contact_person" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="联系电话">
|
||||
<el-input v-model="form.contact_phone" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="邮箱">
|
||||
<el-input v-model="form.contact_email" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-divider content-position="left">开票信息</el-divider>
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="发票抬头">
|
||||
<el-input v-model="form.invoice_title" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="税号">
|
||||
<el-input v-model="form.tax_number" placeholder="18位统一社会信用代码" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="开户银行">
|
||||
<el-input v-model="form.bank_name" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="银行账号">
|
||||
<el-input v-model="form.bank_account" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="注册地址">
|
||||
<el-input v-model="form.registered_address" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="注册电话">
|
||||
<el-input v-model="form.registered_phone" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-divider content-position="left">备注</el-divider>
|
||||
<el-form-item label="备注">
|
||||
<el-input v-model="form.remark" type="textarea" :rows="2" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<el-button v-if="step === 2" @click="step = 1">返回修改名称</el-button>
|
||||
<el-button @click="emit('update:visible', false)">取消</el-button>
|
||||
<el-button
|
||||
v-if="step === 2"
|
||||
type="primary"
|
||||
:loading="saving"
|
||||
@click="handleSave"
|
||||
>确认保存</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { Cpu } from '@element-plus/icons-vue'
|
||||
import { smartGenerateCompany } from '@/api/ai'
|
||||
import { createSupplier } from '@/api/supplier'
|
||||
import { createCustomer } from '@/api/customer'
|
||||
|
||||
const props = defineProps({
|
||||
visible: { type: Boolean, default: false },
|
||||
type: { type: String, default: 'supplier' } // supplier / customer
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:visible', 'success'])
|
||||
|
||||
const step = ref(1)
|
||||
const companyName = ref('')
|
||||
const generating = ref(false)
|
||||
const saving = ref(false)
|
||||
const formRef = ref()
|
||||
|
||||
const defaultForm = () => ({
|
||||
name: '',
|
||||
industry: '',
|
||||
enterprise_type: '',
|
||||
taxpayer_qualification: '',
|
||||
registered_capital: '',
|
||||
paid_capital: '',
|
||||
establish_date: '',
|
||||
administrative_division: '',
|
||||
business_scope: '',
|
||||
address: '',
|
||||
contact_person: '',
|
||||
contact_phone: '',
|
||||
contact_email: '',
|
||||
invoice_title: '',
|
||||
tax_number: '',
|
||||
bank_name: '',
|
||||
bank_account: '',
|
||||
registered_address: '',
|
||||
registered_phone: '',
|
||||
remark: ''
|
||||
})
|
||||
|
||||
const form = reactive(defaultForm())
|
||||
|
||||
async function handleGenerate() {
|
||||
if (!companyName.value.trim()) {
|
||||
ElMessage.warning('请输入公司名称')
|
||||
return
|
||||
}
|
||||
|
||||
generating.value = true
|
||||
try {
|
||||
const res = await smartGenerateCompany({
|
||||
company_name: companyName.value.trim(),
|
||||
type: props.type
|
||||
})
|
||||
if (res.code === 200) {
|
||||
if (res.data.parsed && res.data.data) {
|
||||
const data = res.data.data
|
||||
const nameField = props.type === 'supplier' ? 'supplier_name' : 'customer_name'
|
||||
form.name = data[nameField] || data.name || companyName.value.trim()
|
||||
form.industry = data.industry || ''
|
||||
form.enterprise_type = data.enterprise_type || ''
|
||||
form.taxpayer_qualification = data.taxpayer_qualification || ''
|
||||
form.registered_capital = data.registered_capital || ''
|
||||
form.paid_capital = data.paid_capital || ''
|
||||
form.establish_date = data.establish_date || ''
|
||||
form.administrative_division = data.administrative_division || ''
|
||||
form.business_scope = data.business_scope || ''
|
||||
form.address = data.address || ''
|
||||
form.contact_person = data.contact_person || ''
|
||||
form.contact_phone = data.contact_phone || ''
|
||||
form.contact_email = data.contact_email || ''
|
||||
form.invoice_title = data.invoice_title || form.name
|
||||
form.tax_number = data.tax_number || ''
|
||||
form.bank_name = data.bank_name || ''
|
||||
form.bank_account = data.bank_account || ''
|
||||
form.registered_address = data.registered_address || ''
|
||||
form.registered_phone = data.registered_phone || ''
|
||||
form.remark = data.remark || ''
|
||||
} else {
|
||||
// 解析失败，只填名称
|
||||
form.name = companyName.value.trim()
|
||||
ElMessage.warning('AI返回格式异常，请手动填写其他信息')
|
||||
}
|
||||
step.value = 2
|
||||
}
|
||||
} catch (e) {
|
||||
ElMessage.error(e.message || '生成失败')
|
||||
} finally {
|
||||
generating.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSave() {
|
||||
if (!form.name.trim()) {
|
||||
ElMessage.warning('公司名称不能为空')
|
||||
return
|
||||
}
|
||||
|
||||
saving.value = true
|
||||
try {
|
||||
const payload = {
|
||||
supplier_name: form.name,
|
||||
customer_name: form.name,
|
||||
industry: form.industry,
|
||||
enterprise_type: form.enterprise_type,
|
||||
taxpayer_qualification: form.taxpayer_qualification,
|
||||
registered_capital: form.registered_capital,
|
||||
paid_capital: form.paid_capital,
|
||||
establish_date: form.establish_date,
|
||||
administrative_division: form.administrative_division,
|
||||
business_scope: form.business_scope,
|
||||
address: form.address,
|
||||
contact_person: form.contact_person,
|
||||
contact_phone: form.contact_phone,
|
||||
contact_email: form.contact_email,
|
||||
invoice_title: form.invoice_title,
|
||||
tax_number: form.tax_number,
|
||||
bank_name: form.bank_name,
|
||||
bank_account: form.bank_account,
|
||||
registered_address: form.registered_address,
|
||||
registered_phone: form.registered_phone,
|
||||
remark: form.remark,
|
||||
status: '1',
|
||||
is_draft: 0
|
||||
}
|
||||
|
||||
if (props.type === 'supplier') {
|
||||
await createSupplier(payload)
|
||||
} else {
|
||||
await createCustomer(payload)
|
||||
}
|
||||
|
||||
ElMessage.success('保存成功')
|
||||
emit('success')
|
||||
emit('update:visible', false)
|
||||
} catch (e) {
|
||||
ElMessage.error(e.message || '保存失败')
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function handleClosed() {
|
||||
step.value = 1
|
||||
companyName.value = ''
|
||||
Object.assign(form, defaultForm())
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.step-input {
|
||||
padding: 20px 0;
|
||||
|
||||
.step-actions {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.step-confirm {
|
||||
.confirm-header {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.smart-form {
|
||||
max-height: 60vh;
|
||||
overflow-y: auto;
|
||||
padding-right: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -30,22 +30,34 @@
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="客户名称" prop="customer_name">
|
||||
<el-input v-model="form.customer_name" placeholder="请输入客户名称" />
|
||||
<el-input
|
||||
v-model="form.customer_name"
|
||||
placeholder="请输入客户名称"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="客户类型" prop="customer_type">
|
||||
<el-select v-model="form.customer_type" placeholder="请选择" style="width: 100%">
|
||||
<el-select
|
||||
v-model="form.customer_type"
|
||||
placeholder="请选择"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option label="企业" value="1" />
|
||||
<el-option label="政府机构" value="2" />
|
||||
<el-option label="国企" value="3" />
|
||||
<el-option label="个人" value="4" />
|
||||
<el-option label="教育机构" value="4" />
|
||||
<el-option label="个人" value="5" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="客户等级" prop="customer_level">
|
||||
<el-select v-model="form.customer_level" placeholder="请选择" style="width: 100%">
|
||||
<el-select
|
||||
v-model="form.customer_level"
|
||||
placeholder="请选择"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option label="核心客户" value="1" />
|
||||
<el-option label="重要客户" value="2" />
|
||||
<el-option label="普通客户" value="3" />
|
||||
@@ -58,16 +70,6 @@
|
||||
<el-input v-model="form.industry" placeholder="请输入所属行业" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="form.status" placeholder="请选择" style="width: 100%">
|
||||
<el-option label="正常" value="1" />
|
||||
<el-option label="禁用" value="0" />
|
||||
<el-option label="冻结" value="2" />
|
||||
<el-option label="已注销" value="3" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="注册资本" prop="registered_capital">
|
||||
<el-input v-model="form.registered_capital" placeholder="万元">
|
||||
@@ -95,12 +97,19 @@
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="行政区划" prop="administrative_division">
|
||||
<el-input v-model="form.administrative_division" placeholder="省/市/区" />
|
||||
<el-input
|
||||
v-model="form.administrative_division"
|
||||
placeholder="省/市/区"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="企业类型" prop="enterprise_type">
|
||||
<el-select v-model="form.enterprise_type" placeholder="请选择" style="width: 100%">
|
||||
<el-select
|
||||
v-model="form.enterprise_type"
|
||||
placeholder="请选择"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option label="有限责任公司" value="有限责任公司" />
|
||||
<el-option label="股份有限公司" value="股份有限公司" />
|
||||
<el-option label="合伙企业" value="合伙企业" />
|
||||
@@ -114,13 +123,31 @@
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="纳税人资质" prop="taxpayer_qualification">
|
||||
<el-select v-model="form.taxpayer_qualification" placeholder="请选择" style="width: 100%">
|
||||
<el-select
|
||||
v-model="form.taxpayer_qualification"
|
||||
placeholder="请选择"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option label="一般纳税人" value="一般纳税人" />
|
||||
<el-option label="小规模纳税人" value="小规模纳税人" />
|
||||
<el-option label="其他" value="其他" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select
|
||||
v-model="form.status"
|
||||
placeholder="请选择"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option label="正常" value="1" />
|
||||
<el-option label="禁用" value="0" />
|
||||
<el-option label="冻结" value="2" />
|
||||
<el-option label="已注销" value="3" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="经营范围" prop="business_scope">
|
||||
<el-input
|
||||
@@ -139,17 +166,26 @@
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="联系人" prop="contact_person">
|
||||
<el-input v-model="form.contact_person" placeholder="请输入联系人姓名" />
|
||||
<el-input
|
||||
v-model="form.contact_person"
|
||||
placeholder="请输入联系人姓名"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="联系电话" prop="contact_phone">
|
||||
<el-input v-model="form.contact_phone" placeholder="请输入联系电话" />
|
||||
<el-input
|
||||
v-model="form.contact_phone"
|
||||
placeholder="请输入联系电话"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="联系邮箱" prop="contact_email">
|
||||
<el-input v-model="form.contact_email" placeholder="请输入联系邮箱" />
|
||||
<el-input
|
||||
v-model="form.contact_email"
|
||||
placeholder="请输入联系邮箱"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
@@ -166,22 +202,34 @@
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="发票抬头" prop="invoice_title">
|
||||
<el-input v-model="form.invoice_title" placeholder="请输入发票抬头" />
|
||||
<el-input
|
||||
v-model="form.invoice_title"
|
||||
placeholder="请输入发票抬头"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="纳税人识别号" prop="tax_number">
|
||||
<el-input v-model="form.tax_number" placeholder="请输入纳税人识别号" />
|
||||
<el-input
|
||||
v-model="form.tax_number"
|
||||
placeholder="请输入纳税人识别号"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="注册地址" prop="registered_address">
|
||||
<el-input v-model="form.registered_address" placeholder="请输入注册地址" />
|
||||
<el-input
|
||||
v-model="form.registered_address"
|
||||
placeholder="请输入注册地址"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="注册电话" prop="registered_phone">
|
||||
<el-input v-model="form.registered_phone" placeholder="请输入注册电话" />
|
||||
<el-input
|
||||
v-model="form.registered_phone"
|
||||
placeholder="请输入注册电话"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@@ -189,12 +237,18 @@
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="开户行名称" prop="bank_name">
|
||||
<el-input v-model="form.bank_name" placeholder="请输入开户行名称" />
|
||||
<el-input
|
||||
v-model="form.bank_name"
|
||||
placeholder="请输入开户行名称"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="开户行账号" prop="bank_account">
|
||||
<el-input v-model="form.bank_account" placeholder="请输入开户行账号" />
|
||||
<el-input
|
||||
v-model="form.bank_account"
|
||||
placeholder="请输入开户行账号"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@@ -221,16 +275,27 @@
|
||||
<div class="dialog-footer">
|
||||
<div class="footer-left">
|
||||
<el-button v-if="activeStep > 0" @click="prevStep">上一步</el-button>
|
||||
<el-button v-if="activeStep < 3" type="primary" @click="nextStep">下一步</el-button>
|
||||
<el-button v-if="activeStep < 3" type="primary" @click="nextStep"
|
||||
>下一步</el-button
|
||||
>
|
||||
</div>
|
||||
<div class="footer-right">
|
||||
<el-button @click="handleClose">取消</el-button>
|
||||
<!-- 保存草稿：仅新增或编辑草稿时显示 -->
|
||||
<el-button v-if="!isEdit || form.is_draft === 1" :loading="submitting" @click="handleSaveDraft">
|
||||
<el-button
|
||||
v-if="!isEdit || form.is_draft === 1"
|
||||
:loading="submitting"
|
||||
@click="handleSaveDraft"
|
||||
>
|
||||
保存草稿
|
||||
</el-button>
|
||||
<!-- 保存：仅最后一步显示 -->
|
||||
<el-button v-if="activeStep === 3" type="primary" :loading="submitting" @click="handleSave(false)">
|
||||
<el-button
|
||||
v-if="activeStep === 3"
|
||||
type="primary"
|
||||
:loading="submitting"
|
||||
@click="handleSave(false)"
|
||||
>
|
||||
保存
|
||||
</el-button>
|
||||
</div>
|
||||
@@ -240,184 +305,192 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed, watch } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { InfoFilled } from '@element-plus/icons-vue'
|
||||
import { createCustomer, updateCustomer } from '@/api/customer'
|
||||
import { ref, reactive, computed, watch } from "vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { InfoFilled } from "@element-plus/icons-vue";
|
||||
import { createCustomer, updateCustomer } from "@/api/customer";
|
||||
|
||||
const props = defineProps({
|
||||
visible: { type: Boolean, default: false },
|
||||
editData: { type: Object, default: null }
|
||||
})
|
||||
editData: { type: Object, default: null },
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:visible', 'success'])
|
||||
const emit = defineEmits(["update:visible", "success"]);
|
||||
|
||||
const formRef = ref()
|
||||
const activeStep = ref(0)
|
||||
const submitting = ref(false)
|
||||
const isEdit = ref(false)
|
||||
const internalId = ref(null)
|
||||
const formRef = ref();
|
||||
const activeStep = ref(0);
|
||||
const submitting = ref(false);
|
||||
const isEdit = ref(false);
|
||||
const internalId = ref(null);
|
||||
|
||||
const dialogTitle = computed(() => {
|
||||
if (isEdit.value) {
|
||||
return form.is_draft === 1 ? '编辑客户（草稿）' : '编辑客户'
|
||||
return form.is_draft === 1 ? "编辑客户（草稿）" : "编辑客户";
|
||||
}
|
||||
return '新增客户'
|
||||
})
|
||||
return "新增客户";
|
||||
});
|
||||
|
||||
const defaultForm = () => ({
|
||||
customer_name: '',
|
||||
customer_type: '1',
|
||||
contact_person: '',
|
||||
contact_phone: '',
|
||||
contact_email: '',
|
||||
customer_level: '3',
|
||||
industry: '',
|
||||
registered_capital: '',
|
||||
paid_capital: '',
|
||||
establish_date: '',
|
||||
administrative_division: '',
|
||||
enterprise_type: '',
|
||||
taxpayer_qualification: '',
|
||||
business_scope: '',
|
||||
address: '',
|
||||
status: '1',
|
||||
customer_name: "",
|
||||
customer_type: "1",
|
||||
contact_person: "",
|
||||
contact_phone: "",
|
||||
contact_email: "",
|
||||
customer_level: "3",
|
||||
industry: "",
|
||||
registered_capital: "",
|
||||
paid_capital: "",
|
||||
establish_date: "",
|
||||
administrative_division: "",
|
||||
enterprise_type: "有限责任公司",
|
||||
taxpayer_qualification: "一般纳税人",
|
||||
business_scope: "",
|
||||
address: "",
|
||||
status: "1",
|
||||
is_draft: 0,
|
||||
remark: '',
|
||||
invoice_title: '',
|
||||
tax_number: '',
|
||||
bank_name: '',
|
||||
bank_account: '',
|
||||
registered_address: '',
|
||||
registered_phone: ''
|
||||
})
|
||||
remark: "",
|
||||
invoice_title: "",
|
||||
tax_number: "",
|
||||
bank_name: "",
|
||||
bank_account: "",
|
||||
registered_address: "",
|
||||
registered_phone: "",
|
||||
});
|
||||
|
||||
const form = reactive(defaultForm())
|
||||
const form = reactive(defaultForm());
|
||||
|
||||
// 各步骤的验证规则
|
||||
const stepRules = [
|
||||
// 步骤1：基本信息
|
||||
{
|
||||
customer_name: [{ required: true, message: '请输入客户名称', trigger: 'blur' }],
|
||||
customer_type: [{ required: true, message: '请选择客户类型', trigger: 'change' }]
|
||||
customer_name: [
|
||||
{ required: true, message: "请输入客户名称", trigger: "blur" },
|
||||
],
|
||||
customer_type: [
|
||||
{ required: true, message: "请选择客户类型", trigger: "change" },
|
||||
],
|
||||
},
|
||||
// 步骤2：联系信息
|
||||
{
|
||||
contact_person: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
|
||||
contact_phone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }]
|
||||
contact_person: [
|
||||
{ required: true, message: "请输入联系人", trigger: "blur" },
|
||||
],
|
||||
contact_phone: [
|
||||
{ required: true, message: "请输入联系电话", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
// 步骤3：开票信息（无必填）
|
||||
{},
|
||||
// 步骤4：备注信息（无必填）
|
||||
{}
|
||||
]
|
||||
{},
|
||||
];
|
||||
|
||||
const allRules = computed(() => {
|
||||
const merged = {}
|
||||
stepRules.forEach(rules => {
|
||||
Object.assign(merged, rules)
|
||||
})
|
||||
return merged
|
||||
})
|
||||
const merged = {};
|
||||
stepRules.forEach((rules) => {
|
||||
Object.assign(merged, rules);
|
||||
});
|
||||
return merged;
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(val) => {
|
||||
if (val) {
|
||||
activeStep.value = 0
|
||||
internalId.value = null
|
||||
activeStep.value = 0;
|
||||
internalId.value = null;
|
||||
if (props.editData) {
|
||||
isEdit.value = true
|
||||
internalId.value = props.editData.id
|
||||
Object.assign(form, props.editData)
|
||||
isEdit.value = true;
|
||||
internalId.value = props.editData.id;
|
||||
Object.assign(form, props.editData);
|
||||
} else {
|
||||
isEdit.value = false
|
||||
Object.assign(form, defaultForm())
|
||||
isEdit.value = false;
|
||||
Object.assign(form, defaultForm());
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
},
|
||||
);
|
||||
|
||||
function handleClose() {
|
||||
emit('update:visible', false)
|
||||
emit("update:visible", false);
|
||||
}
|
||||
|
||||
function handleClosed() {
|
||||
formRef.value?.resetFields()
|
||||
activeStep.value = 0
|
||||
formRef.value?.resetFields();
|
||||
activeStep.value = 0;
|
||||
}
|
||||
|
||||
async function nextStep() {
|
||||
const currentRules = stepRules[activeStep.value]
|
||||
const currentRules = stepRules[activeStep.value];
|
||||
if (Object.keys(currentRules).length > 0) {
|
||||
try {
|
||||
await formRef.value.validateField(Object.keys(currentRules))
|
||||
await formRef.value.validateField(Object.keys(currentRules));
|
||||
} catch (e) {
|
||||
return
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (activeStep.value < 3) {
|
||||
activeStep.value++
|
||||
activeStep.value++;
|
||||
}
|
||||
}
|
||||
|
||||
function prevStep() {
|
||||
if (activeStep.value > 0) {
|
||||
activeStep.value--
|
||||
activeStep.value--;
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSave(isDraft) {
|
||||
if (!formRef.value) return
|
||||
if (!formRef.value) return;
|
||||
if (isDraft) {
|
||||
if (!form.customer_name || form.customer_name.trim() === '') {
|
||||
ElMessage.warning('客户名称不能为空')
|
||||
return
|
||||
if (!form.customer_name || form.customer_name.trim() === "") {
|
||||
ElMessage.warning("客户名称不能为空");
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
try {
|
||||
await formRef.value.validate()
|
||||
await formRef.value.validate();
|
||||
} catch (e) {
|
||||
for (let i = 0; i < stepRules.length; i++) {
|
||||
const fields = Object.keys(stepRules[i])
|
||||
const fields = Object.keys(stepRules[i]);
|
||||
for (const field of fields) {
|
||||
if (!form[field] || form[field] === '') {
|
||||
activeStep.value = i
|
||||
return
|
||||
if (!form[field] || form[field] === "") {
|
||||
activeStep.value = i;
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
return
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
submitting.value = true
|
||||
submitting.value = true;
|
||||
try {
|
||||
const payload = { ...form, is_draft: isDraft ? 1 : 0 }
|
||||
const payload = { ...form, is_draft: isDraft ? 1 : 0 };
|
||||
if (internalId.value) {
|
||||
await updateCustomer(internalId.value, payload)
|
||||
ElMessage.success(isDraft ? '草稿已保存' : '更新成功')
|
||||
await updateCustomer(internalId.value, payload);
|
||||
ElMessage.success(isDraft ? "草稿已保存" : "更新成功");
|
||||
} else {
|
||||
const res = await createCustomer(payload)
|
||||
ElMessage.success(isDraft ? '草稿已保存' : '创建成功')
|
||||
const res = await createCustomer(payload);
|
||||
ElMessage.success(isDraft ? "草稿已保存" : "创建成功");
|
||||
if (res && res.data && res.data.id) {
|
||||
internalId.value = res.data.id
|
||||
isEdit.value = true
|
||||
internalId.value = res.data.id;
|
||||
isEdit.value = true;
|
||||
}
|
||||
}
|
||||
emit('success')
|
||||
emit("success");
|
||||
if (!isDraft) {
|
||||
handleClose()
|
||||
handleClose();
|
||||
}
|
||||
} catch (e) {
|
||||
ElMessage.error(e.message || '操作失败')
|
||||
ElMessage.error(e.message || "操作失败");
|
||||
} finally {
|
||||
submitting.value = false
|
||||
submitting.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function handleSaveDraft() {
|
||||
handleSave(true)
|
||||
handleSave(true);
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -7,6 +7,7 @@
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<el-button type="primary" :icon="Plus" @click="openCreate">新增客户</el-button>
|
||||
<el-button type="success" :icon="Cpu" @click="smartAddVisible = true">智能添加</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -27,7 +28,8 @@
|
||||
<el-option label="企业" value="1" />
|
||||
<el-option label="政府机构" value="2" />
|
||||
<el-option label="国企" value="3" />
|
||||
<el-option label="个人" value="4" />
|
||||
<el-option label="教育机构" value="4" />
|
||||
<el-option label="个人" value="5" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="客户等级">
|
||||
@@ -192,21 +194,29 @@
|
||||
:company-id="currentCompany?.id"
|
||||
:company-name="currentCompany?.customer_name"
|
||||
/>
|
||||
|
||||
<SmartAddCompany
|
||||
v-model:visible="smartAddVisible"
|
||||
type="customer"
|
||||
@success="fetchList"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { Plus, Search, Refresh } from '@element-plus/icons-vue'
|
||||
import { Plus, Search, Refresh, Cpu } from '@element-plus/icons-vue'
|
||||
import { getCustomerList, deleteCustomer, toggleCustomerStatus } from '@/api/customer'
|
||||
import CustomerEdit from './components/edit.vue'
|
||||
import ContactBook from '../components/contactBook.vue'
|
||||
import SmartAddCompany from '../components/smartAddCompany.vue'
|
||||
|
||||
const loading = ref(false)
|
||||
const tableData = ref([])
|
||||
const editVisible = ref(false)
|
||||
const currentEditData = ref(null)
|
||||
const smartAddVisible = ref(false)
|
||||
const detailVisible = ref(false)
|
||||
const detailData = ref(null)
|
||||
const contactBookVisible = ref(false)
|
||||
@@ -369,7 +379,7 @@ async function handleDelete(row) {
|
||||
}
|
||||
|
||||
function customerTypeText(type) {
|
||||
const map = { '1': '企业', '2': '政府机构', '3': '国企', '4': '个人' }
|
||||
const map = { '1': '企业', '2': '政府机构', '3': '国企', '4': '教育机构', '5':'个人' }
|
||||
return map[type] || type
|
||||
}
|
||||
|
||||
|
||||
@@ -1,452 +0,0 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
:model-value="visible"
|
||||
:title="dialogTitle"
|
||||
width="680px"
|
||||
:close-on-click-modal="false"
|
||||
@update:model-value="handleClose"
|
||||
@closed="handleClosed"
|
||||
>
|
||||
<!-- 步骤条 -->
|
||||
<div class="steps-wrapper">
|
||||
<el-steps :active="activeStep" finish-status="success" align-center>
|
||||
<el-step title="基本信息" />
|
||||
<el-step title="联系信息" />
|
||||
<el-step title="开票信息" />
|
||||
<el-step title="备注信息" />
|
||||
</el-steps>
|
||||
</div>
|
||||
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="allRules"
|
||||
label-width="100px"
|
||||
label-position="right"
|
||||
style="margin-top: 24px"
|
||||
>
|
||||
<!-- 步骤1：基本信息 -->
|
||||
<div v-show="activeStep === 0">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="客户名称" prop="customer_name">
|
||||
<el-input v-model="form.customer_name" placeholder="请输入客户名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="客户类型" prop="customer_type">
|
||||
<el-select v-model="form.customer_type" placeholder="请选择" style="width: 100%">
|
||||
<el-option label="企业" value="1" />
|
||||
<el-option label="政府机构" value="2" />
|
||||
<el-option label="国企" value="3" />
|
||||
<el-option label="个人" value="4" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="客户等级" prop="customer_level">
|
||||
<el-select v-model="form.customer_level" placeholder="请选择" style="width: 100%">
|
||||
<el-option label="核心客户" value="1" />
|
||||
<el-option label="重要客户" value="2" />
|
||||
<el-option label="普通客户" value="3" />
|
||||
<el-option label="潜在客户" value="4" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="所属行业" prop="industry">
|
||||
<el-input v-model="form.industry" placeholder="请输入所属行业" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="form.status" placeholder="请选择" style="width: 100%">
|
||||
<el-option label="正常" value="1" />
|
||||
<el-option label="禁用" value="0" />
|
||||
<el-option label="冻结" value="2" />
|
||||
<el-option label="已注销" value="3" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="注册资本" prop="registered_capital">
|
||||
<el-input v-model="form.registered_capital" placeholder="万元">
|
||||
<template #append>万元</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="实缴资本" prop="paid_capital">
|
||||
<el-input v-model="form.paid_capital" placeholder="万元">
|
||||
<template #append>万元</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="成立日期" prop="establish_date">
|
||||
<el-date-picker
|
||||
v-model="form.establish_date"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="选择日期"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="行政区划" prop="administrative_division">
|
||||
<el-input v-model="form.administrative_division" placeholder="省/市/区" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="企业类型" prop="enterprise_type">
|
||||
<el-select v-model="form.enterprise_type" placeholder="请选择" style="width: 100%">
|
||||
<el-option label="有限责任公司" value="有限责任公司" />
|
||||
<el-option label="股份有限公司" value="股份有限公司" />
|
||||
<el-option label="合伙企业" value="合伙企业" />
|
||||
<el-option label="个人独资企业" value="个人独资企业" />
|
||||
<el-option label="国有企业" value="国有企业" />
|
||||
<el-option label="集体企业" value="集体企业" />
|
||||
<el-option label="外商投资企业" value="外商投资企业" />
|
||||
<el-option label="其他" value="其他" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="纳税人资质" prop="taxpayer_qualification">
|
||||
<el-select v-model="form.taxpayer_qualification" placeholder="请选择" style="width: 100%">
|
||||
<el-option label="一般纳税人" value="一般纳税人" />
|
||||
<el-option label="小规模纳税人" value="小规模纳税人" />
|
||||
<el-option label="其他" value="其他" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="经营范围" prop="business_scope">
|
||||
<el-input
|
||||
v-model="form.business_scope"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="请输入经营范围（选填）"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<!-- 步骤2：联系信息 -->
|
||||
<div v-show="activeStep === 1">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="联系人" prop="contact_person">
|
||||
<el-input v-model="form.contact_person" placeholder="请输入联系人姓名" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="联系电话" prop="contact_phone">
|
||||
<el-input v-model="form.contact_phone" placeholder="请输入联系电话" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="联系邮箱" prop="contact_email">
|
||||
<el-input v-model="form.contact_email" placeholder="请输入联系邮箱" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="客户地址" prop="address">
|
||||
<el-input v-model="form.address" placeholder="请输入详细地址" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<!-- 步骤3：开票信息（发票+银行合并） -->
|
||||
<div v-show="activeStep === 2">
|
||||
<el-divider content-position="left">发票信息</el-divider>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="发票抬头" prop="invoice_title">
|
||||
<el-input v-model="form.invoice_title" placeholder="请输入发票抬头" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="纳税人识别号" prop="tax_number">
|
||||
<el-input v-model="form.tax_number" placeholder="请输入纳税人识别号" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="注册地址" prop="registered_address">
|
||||
<el-input v-model="form.registered_address" placeholder="请输入注册地址" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="注册电话" prop="registered_phone">
|
||||
<el-input v-model="form.registered_phone" placeholder="请输入注册电话" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-divider content-position="left">银行信息</el-divider>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="开户行名称" prop="bank_name">
|
||||
<el-input v-model="form.bank_name" placeholder="请输入开户行名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="开户行账号" prop="bank_account">
|
||||
<el-input v-model="form.bank_account" placeholder="请输入开户行账号" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<!-- 步骤4：备注信息（最后，只放textarea） -->
|
||||
<div v-show="activeStep === 3">
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input
|
||||
v-model="form.remark"
|
||||
type="textarea"
|
||||
:rows="10"
|
||||
placeholder="请输入备注信息（选填）"
|
||||
/>
|
||||
</el-form-item>
|
||||
<div class="final-step-tip">
|
||||
<el-icon><InfoFilled /></el-icon>
|
||||
<span>确认所有信息无误后，点击「保存」完成创建。</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<div class="footer-left">
|
||||
<el-button v-if="activeStep > 0" @click="prevStep">上一步</el-button>
|
||||
<el-button v-if="activeStep < 3" type="primary" @click="nextStep">下一步</el-button>
|
||||
</div>
|
||||
<div class="footer-right">
|
||||
<el-button @click="handleClose">取消</el-button>
|
||||
<!-- 保存草稿：仅新增或编辑草稿时显示 -->
|
||||
<el-button v-if="!isEdit || form.is_draft === 1" :loading="submitting" @click="handleSaveDraft">
|
||||
保存草稿
|
||||
</el-button>
|
||||
<!-- 保存：仅最后一步显示 -->
|
||||
<el-button v-if="activeStep === 3" type="primary" :loading="submitting" @click="handleSave(false)">
|
||||
保存
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed, watch } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { InfoFilled } from '@element-plus/icons-vue'
|
||||
import { createCustomer, updateCustomer } from '@/api/customer'
|
||||
|
||||
const props = defineProps({
|
||||
visible: { type: Boolean, default: false },
|
||||
editData: { type: Object, default: null }
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:visible', 'success'])
|
||||
|
||||
const formRef = ref()
|
||||
const activeStep = ref(0)
|
||||
const submitting = ref(false)
|
||||
const isEdit = ref(false)
|
||||
const internalId = ref(null)
|
||||
|
||||
const dialogTitle = computed(() => {
|
||||
if (isEdit.value) {
|
||||
return form.is_draft === 1 ? '编辑客户（草稿）' : '编辑客户'
|
||||
}
|
||||
return '新增客户'
|
||||
})
|
||||
|
||||
const defaultForm = () => ({
|
||||
customer_name: '',
|
||||
customer_type: '1',
|
||||
contact_person: '',
|
||||
contact_phone: '',
|
||||
contact_email: '',
|
||||
customer_level: '3',
|
||||
industry: '',
|
||||
registered_capital: '',
|
||||
paid_capital: '',
|
||||
establish_date: '',
|
||||
administrative_division: '',
|
||||
enterprise_type: '',
|
||||
taxpayer_qualification: '',
|
||||
business_scope: '',
|
||||
address: '',
|
||||
status: '1',
|
||||
is_draft: 0,
|
||||
remark: '',
|
||||
invoice_title: '',
|
||||
tax_number: '',
|
||||
bank_name: '',
|
||||
bank_account: '',
|
||||
registered_address: '',
|
||||
registered_phone: ''
|
||||
})
|
||||
|
||||
const form = reactive(defaultForm())
|
||||
|
||||
// 各步骤的验证规则
|
||||
const stepRules = [
|
||||
// 步骤1：基本信息
|
||||
{
|
||||
customer_name: [{ required: true, message: '请输入客户名称', trigger: 'blur' }],
|
||||
customer_type: [{ required: true, message: '请选择客户类型', trigger: 'change' }]
|
||||
},
|
||||
// 步骤2：联系信息
|
||||
{
|
||||
contact_person: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
|
||||
contact_phone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }]
|
||||
},
|
||||
// 步骤3：开票信息（无必填）
|
||||
{},
|
||||
// 步骤4：备注信息（无必填）
|
||||
{}
|
||||
]
|
||||
|
||||
const allRules = computed(() => {
|
||||
const merged = {}
|
||||
stepRules.forEach(rules => {
|
||||
Object.assign(merged, rules)
|
||||
})
|
||||
return merged
|
||||
})
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(val) => {
|
||||
if (val) {
|
||||
activeStep.value = 0
|
||||
internalId.value = null
|
||||
if (props.editData) {
|
||||
isEdit.value = true
|
||||
internalId.value = props.editData.id
|
||||
Object.assign(form, props.editData)
|
||||
} else {
|
||||
isEdit.value = false
|
||||
Object.assign(form, defaultForm())
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
function handleClose() {
|
||||
emit('update:visible', false)
|
||||
}
|
||||
|
||||
function handleClosed() {
|
||||
formRef.value?.resetFields()
|
||||
activeStep.value = 0
|
||||
}
|
||||
|
||||
async function nextStep() {
|
||||
const currentRules = stepRules[activeStep.value]
|
||||
if (Object.keys(currentRules).length > 0) {
|
||||
try {
|
||||
await formRef.value.validateField(Object.keys(currentRules))
|
||||
} catch (e) {
|
||||
return
|
||||
}
|
||||
}
|
||||
if (activeStep.value < 3) {
|
||||
activeStep.value++
|
||||
}
|
||||
}
|
||||
|
||||
function prevStep() {
|
||||
if (activeStep.value > 0) {
|
||||
activeStep.value--
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSave(isDraft) {
|
||||
if (!formRef.value) return
|
||||
if (isDraft) {
|
||||
if (!form.customer_name || form.customer_name.trim() === '') {
|
||||
ElMessage.warning('客户名称不能为空')
|
||||
return
|
||||
}
|
||||
} else {
|
||||
try {
|
||||
await formRef.value.validate()
|
||||
} catch (e) {
|
||||
for (let i = 0; i < stepRules.length; i++) {
|
||||
const fields = Object.keys(stepRules[i])
|
||||
for (const field of fields) {
|
||||
if (!form[field] || form[field] === '') {
|
||||
activeStep.value = i
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
submitting.value = true
|
||||
try {
|
||||
const payload = { ...form, is_draft: isDraft ? 1 : 0 }
|
||||
if (internalId.value) {
|
||||
await updateCustomer(internalId.value, payload)
|
||||
ElMessage.success(isDraft ? '草稿已保存' : '更新成功')
|
||||
} else {
|
||||
const res = await createCustomer(payload)
|
||||
ElMessage.success(isDraft ? '草稿已保存' : '创建成功')
|
||||
if (res && res.data && res.data.id) {
|
||||
internalId.value = res.data.id
|
||||
isEdit.value = true
|
||||
}
|
||||
}
|
||||
emit('success')
|
||||
if (!isDraft) {
|
||||
handleClose()
|
||||
}
|
||||
} catch (e) {
|
||||
ElMessage.error(e.message || '操作失败')
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function handleSaveDraft() {
|
||||
handleSave(true)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.steps-wrapper {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.footer-left,
|
||||
.footer-right {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.final-step-tip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-top: 24px;
|
||||
padding: 12px 16px;
|
||||
background: var(--el-color-info-light-9);
|
||||
border-radius: 4px;
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 13px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,473 +0,0 @@
|
||||
<template>
|
||||
<div class="customer-page">
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<h2>客户管理</h2>
|
||||
<p>管理企业客户信息，支持多维度筛选与全生命周期追踪</p>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<el-button type="primary" :icon="Plus" @click="openCreate">新增客户</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-bar">
|
||||
<el-form :inline="true" :model="filters" @submit.prevent>
|
||||
<el-form-item>
|
||||
<el-input
|
||||
v-model="filters.keyword"
|
||||
clearable
|
||||
placeholder="搜索客户名称"
|
||||
:prefix-icon="Search"
|
||||
style="width: 220px"
|
||||
@keyup.enter="handleSearch"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="客户类型">
|
||||
<el-select v-model="filters.customer_type" clearable placeholder="全部" style="width: 130px">
|
||||
<el-option label="企业" value="1" />
|
||||
<el-option label="政府机构" value="2" />
|
||||
<el-option label="国企" value="3" />
|
||||
<el-option label="个人" value="4" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="客户等级">
|
||||
<el-select v-model="filters.customer_level" clearable placeholder="全部" style="width: 130px">
|
||||
<el-option label="核心客户" value="1" />
|
||||
<el-option label="重要客户" value="2" />
|
||||
<el-option label="普通客户" value="3" />
|
||||
<el-option label="潜在客户" value="4" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态">
|
||||
<el-select v-model="filters.status" clearable placeholder="全部" style="width: 110px">
|
||||
<el-option label="正常" value="1" />
|
||||
<el-option label="禁用" value="0" />
|
||||
<el-option label="冻结" value="2" />
|
||||
<el-option label="已注销" value="3" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="数据状态">
|
||||
<el-select v-model="filters.is_draft" clearable placeholder="全部" style="width: 110px">
|
||||
<el-option label="正式" value="0" />
|
||||
<el-option label="草稿" value="1" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
|
||||
<el-button :icon="Refresh" @click="resetFilters">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<div class="table-container" v-loading="loading">
|
||||
<el-table :data="tableData" stripe border>
|
||||
<el-table-column type="index" label="#" width="60" align="center" />
|
||||
<el-table-column prop="customer_name" label="客户名称" min-width="180" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
<div class="name-cell-wrapper">
|
||||
<span class="name-cell name-link" @click="openDetail(row)">{{ row.customer_name }}</span>
|
||||
<el-tag v-if="row.is_draft === 1" type="warning" size="small" effect="plain">草稿</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="customer_type" label="类型" width="100" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="customerTypeTag(row.customer_type)" size="small">
|
||||
{{ customerTypeText(row.customer_type) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="customer_level" label="等级" width="100" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="customerLevelTag(row.customer_level)" size="small" effect="plain">
|
||||
{{ customerLevelText(row.customer_level) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="contact_person" label="联系人" width="100" />
|
||||
<el-table-column prop="contact_phone" label="联系电话" width="130" />
|
||||
<el-table-column prop="contact_email" label="邮箱" min-width="160" show-overflow-tooltip />
|
||||
<el-table-column prop="industry" label="行业" width="100" show-overflow-tooltip />
|
||||
<el-table-column prop="status" label="状态" width="80" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="statusTag(row.status)" size="small">
|
||||
{{ statusText(row.status) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="update_time" label="更新时间" width="160" align="center">
|
||||
<template #default="{ row }">
|
||||
{{ formatDateTime(row.update_time) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="240" align="center" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button link type="primary" size="small" @click="openContactBook(row)">通讯录</el-button>
|
||||
<el-button link type="primary" size="small" @click="openEdit(row)">编辑</el-button>
|
||||
<el-button link type="primary" size="small" @click="handleToggleStatus(row)">
|
||||
{{ row.status === '1' ? '禁用' : '启用' }}
|
||||
</el-button>
|
||||
<el-button link type="danger" size="small" @click="handleDelete(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="pagination">
|
||||
<el-pagination
|
||||
v-model:current-page="pagination.page"
|
||||
v-model:page-size="pagination.pageSize"
|
||||
:total="pagination.total"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="fetchList"
|
||||
@current-change="fetchList"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<CustomerEdit
|
||||
v-model:visible="editVisible"
|
||||
:edit-data="currentEditData"
|
||||
@success="fetchList"
|
||||
/>
|
||||
|
||||
<!-- 详情抽屉 -->
|
||||
<el-drawer
|
||||
v-model="detailVisible"
|
||||
:title="detailData?.customer_name || '客户详情'"
|
||||
direction="rtl"
|
||||
size="560px"
|
||||
>
|
||||
<div v-if="detailData" class="detail-content">
|
||||
<el-descriptions title="基本信息" :column="2" border size="small" label-width="120px">
|
||||
<el-descriptions-item label="客户名称" :span="2">{{ detailData.customer_name }}</el-descriptions-item>
|
||||
<el-descriptions-item label="客户类型">{{ customerTypeText(detailData.customer_type) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="客户等级">{{ customerLevelText(detailData.customer_level) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="所属行业">{{ detailData.industry || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="状态">
|
||||
<el-tag :type="statusTag(detailData.status)" size="small">{{ statusText(detailData.status) }}</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="注册资本">{{ detailData.registered_capital ? detailData.registered_capital + ' 万元' : '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="实缴资本">{{ detailData.paid_capital ? detailData.paid_capital + ' 万元' : '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="成立日期">{{ formatDate(detailData.establish_date) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="行政区划">{{ detailData.administrative_division || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="企业类型">{{ detailData.enterprise_type || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="纳税人资质">{{ detailData.taxpayer_qualification || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="经营范围" :span="2">{{ detailData.business_scope || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="更新时间" :span="2">{{ formatDateTime(detailData.update_time) }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
<el-descriptions title="联系信息" :column="2" border size="small" label-width="120px" style="margin-top: 20px">
|
||||
<el-descriptions-item label="联系人">{{ detailData.contact_person || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="联系电话">{{ detailData.contact_phone || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="联系邮箱" :span="2">{{ detailData.contact_email || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="客户地址" :span="2">{{ detailData.address || '-' }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
<el-descriptions :column="2" border size="small" label-width="120px" style="margin-top: 20px">
|
||||
<template #title>
|
||||
<div class="desc-title-row">
|
||||
<span>开票信息</span>
|
||||
<el-button link type="primary" size="small" @click="copyInvoiceInfo">一键复制</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<el-descriptions-item label="发票抬头" :span="2">{{ detailData.invoice_title || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="纳税人识别号">{{ detailData.tax_number || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="注册电话">{{ detailData.registered_phone || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="注册地址" :span="2">{{ detailData.registered_address || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="开户行名称">{{ detailData.bank_name || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="开户行账号">{{ detailData.bank_account || '-' }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
<el-descriptions title="备注信息" :column="1" border size="small" label-width="120px" style="margin-top: 20px">
|
||||
<el-descriptions-item label="备注">{{ detailData.remark || '-' }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
</el-drawer>
|
||||
|
||||
<!-- 通讯录 -->
|
||||
<ContactBook
|
||||
v-model:visible="contactBookVisible"
|
||||
:company-type="'customer'"
|
||||
:company-id="currentCompany?.id"
|
||||
:company-name="currentCompany?.customer_name"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { Plus, Search, Refresh } from '@element-plus/icons-vue'
|
||||
import { getCustomerList, deleteCustomer, toggleCustomerStatus } from '@/api/customer'
|
||||
import CustomerEdit from './components/edit.vue'
|
||||
import ContactBook from '../components/contactBook.vue'
|
||||
|
||||
const loading = ref(false)
|
||||
const tableData = ref([])
|
||||
const editVisible = ref(false)
|
||||
const currentEditData = ref(null)
|
||||
const detailVisible = ref(false)
|
||||
const detailData = ref(null)
|
||||
const contactBookVisible = ref(false)
|
||||
const currentCompany = ref(null)
|
||||
|
||||
const filters = reactive({
|
||||
keyword: '',
|
||||
customer_type: '',
|
||||
customer_level: '',
|
||||
status: '',
|
||||
is_draft: ''
|
||||
})
|
||||
|
||||
const pagination = reactive({
|
||||
page: 1,
|
||||
pageSize: 20,
|
||||
total: 0
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
fetchList()
|
||||
})
|
||||
|
||||
async function fetchList() {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getCustomerList({
|
||||
page: pagination.page,
|
||||
pageSize: pagination.pageSize,
|
||||
...filters
|
||||
})
|
||||
if (res.code === 200) {
|
||||
tableData.value = res.data.list || []
|
||||
pagination.total = res.data.total || 0
|
||||
}
|
||||
} catch (e) {
|
||||
ElMessage.error(e.message || '查询失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function handleSearch() {
|
||||
pagination.page = 1
|
||||
fetchList()
|
||||
}
|
||||
|
||||
function resetFilters() {
|
||||
filters.keyword = ''
|
||||
filters.customer_type = ''
|
||||
filters.customer_level = ''
|
||||
filters.status = ''
|
||||
filters.is_draft = ''
|
||||
pagination.page = 1
|
||||
fetchList()
|
||||
}
|
||||
|
||||
function openCreate() {
|
||||
currentEditData.value = null
|
||||
editVisible.value = true
|
||||
}
|
||||
|
||||
function openEdit(row) {
|
||||
currentEditData.value = { ...row }
|
||||
editVisible.value = true
|
||||
}
|
||||
|
||||
function openDetail(row) {
|
||||
detailData.value = { ...row }
|
||||
detailVisible.value = true
|
||||
}
|
||||
|
||||
function openContactBook(row) {
|
||||
currentCompany.value = { ...row }
|
||||
contactBookVisible.value = true
|
||||
}
|
||||
|
||||
function formatDate(val) {
|
||||
if (!val) return '-'
|
||||
const d = new Date(val)
|
||||
if (isNaN(d.getTime())) return '-'
|
||||
return d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0')
|
||||
}
|
||||
|
||||
function formatDateTime(val) {
|
||||
if (!val) return '-'
|
||||
const d = new Date(val)
|
||||
return d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0') + ' ' + String(d.getHours()).padStart(2, '0') + ':' + String(d.getMinutes()).padStart(2, '0')
|
||||
}
|
||||
|
||||
function copyInvoiceInfo() {
|
||||
const d = detailData.value
|
||||
if (!d) return
|
||||
const lines = [
|
||||
`发票抬头：${d.invoice_title || ''}`,
|
||||
`纳税人识别号：${d.tax_number || ''}`,
|
||||
`注册地址：${d.registered_address || ''}`,
|
||||
`注册电话：${d.registered_phone || ''}`,
|
||||
`开户行名称：${d.bank_name || ''}`,
|
||||
`开户行账号：${d.bank_account || ''}`
|
||||
]
|
||||
const text = lines.join('\n')
|
||||
if (navigator.clipboard && navigator.clipboard.writeText) {
|
||||
navigator.clipboard.writeText(text).then(() => {
|
||||
ElMessage.success('开票信息已复制到剪贴板')
|
||||
}).catch(() => {
|
||||
fallbackCopy(text)
|
||||
})
|
||||
} else {
|
||||
fallbackCopy(text)
|
||||
}
|
||||
}
|
||||
|
||||
function fallbackCopy(text) {
|
||||
const ta = document.createElement('textarea')
|
||||
ta.value = text
|
||||
ta.style.position = 'fixed'
|
||||
ta.style.opacity = '0'
|
||||
document.body.appendChild(ta)
|
||||
ta.select()
|
||||
try {
|
||||
document.execCommand('copy')
|
||||
ElMessage.success('开票信息已复制到剪贴板')
|
||||
} catch {
|
||||
ElMessage.error('复制失败，请手动复制')
|
||||
}
|
||||
document.body.removeChild(ta)
|
||||
}
|
||||
|
||||
async function handleToggleStatus(row) {
|
||||
const newStatus = row.status === '1' ? '0' : '1'
|
||||
const action = newStatus === '1' ? '启用' : '禁用'
|
||||
try {
|
||||
await ElMessageBox.confirm(`确定要${action}客户「${row.customer_name}」吗？`, '提示', {
|
||||
type: 'warning'
|
||||
})
|
||||
await toggleCustomerStatus(row.id, newStatus)
|
||||
ElMessage.success(`${action}成功`)
|
||||
fetchList()
|
||||
} catch (e) {
|
||||
if (e !== 'cancel') {
|
||||
ElMessage.error(e.message || '操作失败')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete(row) {
|
||||
try {
|
||||
await ElMessageBox.confirm(`确定要删除客户「${row.customer_name}」吗？删除后不可恢复。`, '删除确认', {
|
||||
type: 'warning'
|
||||
})
|
||||
await deleteCustomer(row.id)
|
||||
ElMessage.success('删除成功')
|
||||
fetchList()
|
||||
} catch (e) {
|
||||
if (e !== 'cancel') {
|
||||
ElMessage.error(e.message || '删除失败')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function customerTypeText(type) {
|
||||
const map = { '1': '企业', '2': '政府机构', '3': '国企', '4': '个人' }
|
||||
return map[type] || type
|
||||
}
|
||||
|
||||
function customerTypeTag(type) {
|
||||
const map = { '1': 'primary', '2': 'warning', '3': 'success', '4': 'info' }
|
||||
return map[type] || 'info'
|
||||
}
|
||||
|
||||
function customerLevelText(level) {
|
||||
const map = { '1': '核心客户', '2': '重要客户', '3': '普通客户', '4': '潜在客户' }
|
||||
return map[level] || level
|
||||
}
|
||||
|
||||
function customerLevelTag(level) {
|
||||
const map = { '1': 'danger', '2': 'warning', '3': 'info', '4': '' }
|
||||
return map[level] || ''
|
||||
}
|
||||
|
||||
function statusText(status) {
|
||||
const map = { '0': '禁用', '1': '正常', '2': '冻结', '3': '已注销' }
|
||||
return map[status] || status
|
||||
}
|
||||
|
||||
function statusTag(status) {
|
||||
const map = { '0': 'info', '1': 'success', '2': 'warning', '3': 'danger' }
|
||||
return map[status] || 'info'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.customer-page {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 20px;
|
||||
|
||||
h2 {
|
||||
margin: 0 0 6px 0;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.filter-bar {
|
||||
background: var(--el-bg-color);
|
||||
padding: 16px 16px 0;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 16px;
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
}
|
||||
|
||||
.table-container {
|
||||
background: var(--el-bg-color);
|
||||
padding: 16px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
}
|
||||
|
||||
.name-cell {
|
||||
font-weight: 500;
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
.name-cell-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.name-link {
|
||||
cursor: pointer;
|
||||
color: var(--el-color-primary);
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.desc-title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin-top: 16px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
@@ -7,6 +7,7 @@
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<el-button type="primary" :icon="Plus" @click="openCreate">新增供应商</el-button>
|
||||
<el-button type="success" :icon="Cpu" @click="smartAddVisible = true">智能添加</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -192,21 +193,29 @@
|
||||
:company-id="currentCompany?.id"
|
||||
:company-name="currentCompany?.supplier_name"
|
||||
/>
|
||||
|
||||
<SmartAddCompany
|
||||
v-model:visible="smartAddVisible"
|
||||
type="supplier"
|
||||
@success="fetchList"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { Plus, Search, Refresh } from '@element-plus/icons-vue'
|
||||
import { Plus, Search, Refresh, Cpu } from '@element-plus/icons-vue'
|
||||
import { getSupplierList, deleteSupplier, toggleSupplierStatus } from '@/api/supplier'
|
||||
import SupplierEdit from './components/edit.vue'
|
||||
import ContactBook from '../components/contactBook.vue'
|
||||
import SmartAddCompany from '../components/smartAddCompany.vue'
|
||||
|
||||
const loading = ref(false)
|
||||
const tableData = ref([])
|
||||
const editVisible = ref(false)
|
||||
const currentEditData = ref(null)
|
||||
const smartAddVisible = ref(false)
|
||||
const detailVisible = ref(false)
|
||||
const detailData = ref(null)
|
||||
const contactBookVisible = ref(false)
|
||||
|
||||
@@ -1,452 +0,0 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
:model-value="visible"
|
||||
:title="dialogTitle"
|
||||
width="680px"
|
||||
:close-on-click-modal="false"
|
||||
@update:model-value="handleClose"
|
||||
@closed="handleClosed"
|
||||
>
|
||||
<!-- 步骤条 -->
|
||||
<div class="steps-wrapper">
|
||||
<el-steps :active="activeStep" finish-status="success" align-center>
|
||||
<el-step title="基本信息" />
|
||||
<el-step title="联系信息" />
|
||||
<el-step title="开票信息" />
|
||||
<el-step title="备注信息" />
|
||||
</el-steps>
|
||||
</div>
|
||||
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="allRules"
|
||||
label-width="100px"
|
||||
label-position="right"
|
||||
style="margin-top: 24px"
|
||||
>
|
||||
<!-- 步骤1：基本信息 -->
|
||||
<div v-show="activeStep === 0">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="供应商名称" prop="supplier_name">
|
||||
<el-input v-model="form.supplier_name" placeholder="请输入供应商名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="供应商类型" prop="supplier_type">
|
||||
<el-select v-model="form.supplier_type" placeholder="请选择" style="width: 100%">
|
||||
<el-option label="原材料供应商" value="1" />
|
||||
<el-option label="设备供应商" value="2" />
|
||||
<el-option label="服务供应商" value="3" />
|
||||
<el-option label="其他" value="4" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="供应商等级" prop="supplier_level">
|
||||
<el-select v-model="form.supplier_level" placeholder="请选择" style="width: 100%">
|
||||
<el-option label="核心供应商" value="1" />
|
||||
<el-option label="重要供应商" value="2" />
|
||||
<el-option label="普通供应商" value="3" />
|
||||
<el-option label="潜在供应商" value="4" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="所属行业" prop="industry">
|
||||
<el-input v-model="form.industry" placeholder="请输入所属行业" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="form.status" placeholder="请选择" style="width: 100%">
|
||||
<el-option label="正常" value="1" />
|
||||
<el-option label="禁用" value="0" />
|
||||
<el-option label="冻结" value="2" />
|
||||
<el-option label="已注销" value="3" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="注册资本" prop="registered_capital">
|
||||
<el-input v-model="form.registered_capital" placeholder="万元">
|
||||
<template #append>万元</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="实缴资本" prop="paid_capital">
|
||||
<el-input v-model="form.paid_capital" placeholder="万元">
|
||||
<template #append>万元</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="成立日期" prop="establish_date">
|
||||
<el-date-picker
|
||||
v-model="form.establish_date"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="选择日期"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="行政区划" prop="administrative_division">
|
||||
<el-input v-model="form.administrative_division" placeholder="省/市/区" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="企业类型" prop="enterprise_type">
|
||||
<el-select v-model="form.enterprise_type" placeholder="请选择" style="width: 100%">
|
||||
<el-option label="有限责任公司" value="有限责任公司" />
|
||||
<el-option label="股份有限公司" value="股份有限公司" />
|
||||
<el-option label="合伙企业" value="合伙企业" />
|
||||
<el-option label="个人独资企业" value="个人独资企业" />
|
||||
<el-option label="国有企业" value="国有企业" />
|
||||
<el-option label="集体企业" value="集体企业" />
|
||||
<el-option label="外商投资企业" value="外商投资企业" />
|
||||
<el-option label="其他" value="其他" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="纳税人资质" prop="taxpayer_qualification">
|
||||
<el-select v-model="form.taxpayer_qualification" placeholder="请选择" style="width: 100%">
|
||||
<el-option label="一般纳税人" value="一般纳税人" />
|
||||
<el-option label="小规模纳税人" value="小规模纳税人" />
|
||||
<el-option label="其他" value="其他" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="经营范围" prop="business_scope">
|
||||
<el-input
|
||||
v-model="form.business_scope"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="请输入经营范围（选填）"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<!-- 步骤2：联系信息 -->
|
||||
<div v-show="activeStep === 1">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="联系人" prop="contact_person">
|
||||
<el-input v-model="form.contact_person" placeholder="请输入联系人姓名" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="联系电话" prop="contact_phone">
|
||||
<el-input v-model="form.contact_phone" placeholder="请输入联系电话" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="联系邮箱" prop="contact_email">
|
||||
<el-input v-model="form.contact_email" placeholder="请输入联系邮箱" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="供应商地址" prop="address">
|
||||
<el-input v-model="form.address" placeholder="请输入详细地址" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<!-- 步骤3：开票信息（发票+银行合并） -->
|
||||
<div v-show="activeStep === 2">
|
||||
<el-divider content-position="left">发票信息</el-divider>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="发票抬头" prop="invoice_title">
|
||||
<el-input v-model="form.invoice_title" placeholder="请输入发票抬头" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="纳税人识别号" prop="tax_number">
|
||||
<el-input v-model="form.tax_number" placeholder="请输入纳税人识别号" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="注册地址" prop="registered_address">
|
||||
<el-input v-model="form.registered_address" placeholder="请输入注册地址" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="注册电话" prop="registered_phone">
|
||||
<el-input v-model="form.registered_phone" placeholder="请输入注册电话" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-divider content-position="left">银行信息</el-divider>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="开户行名称" prop="bank_name">
|
||||
<el-input v-model="form.bank_name" placeholder="请输入开户行名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="开户行账号" prop="bank_account">
|
||||
<el-input v-model="form.bank_account" placeholder="请输入开户行账号" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<!-- 步骤4：备注信息（最后，只放textarea） -->
|
||||
<div v-show="activeStep === 3">
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input
|
||||
v-model="form.remark"
|
||||
type="textarea"
|
||||
:rows="10"
|
||||
placeholder="请输入备注信息（选填）"
|
||||
/>
|
||||
</el-form-item>
|
||||
<div class="final-step-tip">
|
||||
<el-icon><InfoFilled /></el-icon>
|
||||
<span>确认所有信息无误后，点击「保存」完成创建。</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<div class="footer-left">
|
||||
<el-button v-if="activeStep > 0" @click="prevStep">上一步</el-button>
|
||||
<el-button v-if="activeStep < 3" type="primary" @click="nextStep">下一步</el-button>
|
||||
</div>
|
||||
<div class="footer-right">
|
||||
<el-button @click="handleClose">取消</el-button>
|
||||
<!-- 保存草稿：仅新增或编辑草稿时显示 -->
|
||||
<el-button v-if="!isEdit || form.is_draft === 1" :loading="submitting" @click="handleSaveDraft">
|
||||
保存草稿
|
||||
</el-button>
|
||||
<!-- 保存：仅最后一步显示 -->
|
||||
<el-button v-if="activeStep === 3" type="primary" :loading="submitting" @click="handleSave(false)">
|
||||
保存
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed, watch } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { InfoFilled } from '@element-plus/icons-vue'
|
||||
import { createSupplier, updateSupplier } from '@/api/supplier'
|
||||
|
||||
const props = defineProps({
|
||||
visible: { type: Boolean, default: false },
|
||||
editData: { type: Object, default: null }
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:visible', 'success'])
|
||||
|
||||
const formRef = ref()
|
||||
const activeStep = ref(0)
|
||||
const submitting = ref(false)
|
||||
const isEdit = ref(false)
|
||||
const internalId = ref(null)
|
||||
|
||||
const dialogTitle = computed(() => {
|
||||
if (isEdit.value) {
|
||||
return form.is_draft === 1 ? '编辑供应商（草稿）' : '编辑供应商'
|
||||
}
|
||||
return '新增供应商'
|
||||
})
|
||||
|
||||
const defaultForm = () => ({
|
||||
supplier_name: '',
|
||||
supplier_type: '1',
|
||||
contact_person: '',
|
||||
contact_phone: '',
|
||||
contact_email: '',
|
||||
supplier_level: '3',
|
||||
industry: '',
|
||||
registered_capital: '',
|
||||
paid_capital: '',
|
||||
establish_date: '',
|
||||
administrative_division: '',
|
||||
enterprise_type: '',
|
||||
taxpayer_qualification: '',
|
||||
business_scope: '',
|
||||
address: '',
|
||||
status: '1',
|
||||
is_draft: 0,
|
||||
remark: '',
|
||||
invoice_title: '',
|
||||
tax_number: '',
|
||||
bank_name: '',
|
||||
bank_account: '',
|
||||
registered_address: '',
|
||||
registered_phone: ''
|
||||
})
|
||||
|
||||
const form = reactive(defaultForm())
|
||||
|
||||
// 各步骤的验证规则
|
||||
const stepRules = [
|
||||
// 步骤1：基本信息
|
||||
{
|
||||
supplier_name: [{ required: true, message: '请输入供应商名称', trigger: 'blur' }],
|
||||
supplier_type: [{ required: true, message: '请选择供应商类型', trigger: 'change' }]
|
||||
},
|
||||
// 步骤2：联系信息
|
||||
{
|
||||
contact_person: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
|
||||
contact_phone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }]
|
||||
},
|
||||
// 步骤3：开票信息（无必填）
|
||||
{},
|
||||
// 步骤4：备注信息（无必填）
|
||||
{}
|
||||
]
|
||||
|
||||
const allRules = computed(() => {
|
||||
const merged = {}
|
||||
stepRules.forEach(rules => {
|
||||
Object.assign(merged, rules)
|
||||
})
|
||||
return merged
|
||||
})
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(val) => {
|
||||
if (val) {
|
||||
activeStep.value = 0
|
||||
internalId.value = null
|
||||
if (props.editData) {
|
||||
isEdit.value = true
|
||||
internalId.value = props.editData.id
|
||||
Object.assign(form, props.editData)
|
||||
} else {
|
||||
isEdit.value = false
|
||||
Object.assign(form, defaultForm())
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
function handleClose() {
|
||||
emit('update:visible', false)
|
||||
}
|
||||
|
||||
function handleClosed() {
|
||||
formRef.value?.resetFields()
|
||||
activeStep.value = 0
|
||||
}
|
||||
|
||||
async function nextStep() {
|
||||
const currentRules = stepRules[activeStep.value]
|
||||
if (Object.keys(currentRules).length > 0) {
|
||||
try {
|
||||
await formRef.value.validateField(Object.keys(currentRules))
|
||||
} catch (e) {
|
||||
return
|
||||
}
|
||||
}
|
||||
if (activeStep.value < 3) {
|
||||
activeStep.value++
|
||||
}
|
||||
}
|
||||
|
||||
function prevStep() {
|
||||
if (activeStep.value > 0) {
|
||||
activeStep.value--
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSave(isDraft) {
|
||||
if (!formRef.value) return
|
||||
if (isDraft) {
|
||||
if (!form.supplier_name || form.supplier_name.trim() === '') {
|
||||
ElMessage.warning('供应商名称不能为空')
|
||||
return
|
||||
}
|
||||
} else {
|
||||
try {
|
||||
await formRef.value.validate()
|
||||
} catch (e) {
|
||||
for (let i = 0; i < stepRules.length; i++) {
|
||||
const fields = Object.keys(stepRules[i])
|
||||
for (const field of fields) {
|
||||
if (!form[field] || form[field] === '') {
|
||||
activeStep.value = i
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
submitting.value = true
|
||||
try {
|
||||
const payload = { ...form, is_draft: isDraft ? 1 : 0 }
|
||||
if (internalId.value) {
|
||||
await updateSupplier(internalId.value, payload)
|
||||
ElMessage.success(isDraft ? '草稿已保存' : '更新成功')
|
||||
} else {
|
||||
const res = await createSupplier(payload)
|
||||
ElMessage.success(isDraft ? '草稿已保存' : '创建成功')
|
||||
if (res && res.data && res.data.id) {
|
||||
internalId.value = res.data.id
|
||||
isEdit.value = true
|
||||
}
|
||||
}
|
||||
emit('success')
|
||||
if (!isDraft) {
|
||||
handleClose()
|
||||
}
|
||||
} catch (e) {
|
||||
ElMessage.error(e.message || '操作失败')
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function handleSaveDraft() {
|
||||
handleSave(true)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.steps-wrapper {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.footer-left,
|
||||
.footer-right {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.final-step-tip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-top: 24px;
|
||||
padding: 12px 16px;
|
||||
background: var(--el-color-info-light-9);
|
||||
border-radius: 4px;
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 13px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,473 +0,0 @@
|
||||
<template>
|
||||
<div class="supplier-page">
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<h2>供应商管理</h2>
|
||||
<p>管理企业供应商信息，支持多维度筛选与全生命周期追踪</p>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<el-button type="primary" :icon="Plus" @click="openCreate">新增供应商</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-bar">
|
||||
<el-form :inline="true" :model="filters" @submit.prevent>
|
||||
<el-form-item>
|
||||
<el-input
|
||||
v-model="filters.keyword"
|
||||
clearable
|
||||
placeholder="搜索供应商名称"
|
||||
:prefix-icon="Search"
|
||||
style="width: 220px"
|
||||
@keyup.enter="handleSearch"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="供应商类型">
|
||||
<el-select v-model="filters.supplier_type" clearable placeholder="全部" style="width: 140px">
|
||||
<el-option label="原材料供应商" value="1" />
|
||||
<el-option label="设备供应商" value="2" />
|
||||
<el-option label="服务供应商" value="3" />
|
||||
<el-option label="其他" value="4" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="供应商等级">
|
||||
<el-select v-model="filters.supplier_level" clearable placeholder="全部" style="width: 130px">
|
||||
<el-option label="核心供应商" value="1" />
|
||||
<el-option label="重要供应商" value="2" />
|
||||
<el-option label="普通供应商" value="3" />
|
||||
<el-option label="潜在供应商" value="4" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态">
|
||||
<el-select v-model="filters.status" clearable placeholder="全部" style="width: 110px">
|
||||
<el-option label="正常" value="1" />
|
||||
<el-option label="禁用" value="0" />
|
||||
<el-option label="冻结" value="2" />
|
||||
<el-option label="已注销" value="3" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="数据状态">
|
||||
<el-select v-model="filters.is_draft" clearable placeholder="全部" style="width: 110px">
|
||||
<el-option label="正式" value="0" />
|
||||
<el-option label="草稿" value="1" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
|
||||
<el-button :icon="Refresh" @click="resetFilters">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<div class="table-container" v-loading="loading">
|
||||
<el-table :data="tableData" stripe border>
|
||||
<el-table-column type="index" label="#" width="60" align="center" />
|
||||
<el-table-column prop="supplier_name" label="供应商名称" min-width="180" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
<div class="name-cell-wrapper">
|
||||
<span class="name-cell name-link" @click="openDetail(row)">{{ row.supplier_name }}</span>
|
||||
<el-tag v-if="row.is_draft === 1" type="warning" size="small" effect="plain">草稿</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="supplier_type" label="类型" width="120" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="supplierTypeTag(row.supplier_type)" size="small">
|
||||
{{ supplierTypeText(row.supplier_type) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="supplier_level" label="等级" width="110" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="supplierLevelTag(row.supplier_level)" size="small" effect="plain">
|
||||
{{ supplierLevelText(row.supplier_level) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="contact_person" label="联系人" width="100" />
|
||||
<el-table-column prop="contact_phone" label="联系电话" width="130" />
|
||||
<el-table-column prop="contact_email" label="邮箱" min-width="160" show-overflow-tooltip />
|
||||
<el-table-column prop="industry" label="行业" width="100" show-overflow-tooltip />
|
||||
<el-table-column prop="status" label="状态" width="80" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="statusTag(row.status)" size="small">
|
||||
{{ statusText(row.status) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="update_time" label="更新时间" width="160" align="center">
|
||||
<template #default="{ row }">
|
||||
{{ formatDateTime(row.update_time) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="240" align="center" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button link type="primary" size="small" @click="openContactBook(row)">通讯录</el-button>
|
||||
<el-button link type="primary" size="small" @click="openEdit(row)">编辑</el-button>
|
||||
<el-button link type="primary" size="small" @click="handleToggleStatus(row)">
|
||||
{{ row.status === '1' ? '禁用' : '启用' }}
|
||||
</el-button>
|
||||
<el-button link type="danger" size="small" @click="handleDelete(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="pagination">
|
||||
<el-pagination
|
||||
v-model:current-page="pagination.page"
|
||||
v-model:page-size="pagination.pageSize"
|
||||
:total="pagination.total"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="fetchList"
|
||||
@current-change="fetchList"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SupplierEdit
|
||||
v-model:visible="editVisible"
|
||||
:edit-data="currentEditData"
|
||||
@success="fetchList"
|
||||
/>
|
||||
|
||||
<!-- 详情抽屉 -->
|
||||
<el-drawer
|
||||
v-model="detailVisible"
|
||||
:title="detailData?.supplier_name || '供应商详情'"
|
||||
direction="rtl"
|
||||
size="560px"
|
||||
>
|
||||
<div v-if="detailData" class="detail-content">
|
||||
<el-descriptions title="基本信息" :column="2" border size="small" label-width="120px">
|
||||
<el-descriptions-item label="供应商名称" :span="2">{{ detailData.supplier_name }}</el-descriptions-item>
|
||||
<el-descriptions-item label="供应商类型">{{ supplierTypeText(detailData.supplier_type) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="供应商等级">{{ supplierLevelText(detailData.supplier_level) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="所属行业">{{ detailData.industry || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="状态">
|
||||
<el-tag :type="statusTag(detailData.status)" size="small">{{ statusText(detailData.status) }}</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="注册资本">{{ detailData.registered_capital ? detailData.registered_capital + ' 万元' : '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="实缴资本">{{ detailData.paid_capital ? detailData.paid_capital + ' 万元' : '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="成立日期">{{ formatDate(detailData.establish_date) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="行政区划">{{ detailData.administrative_division || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="企业类型">{{ detailData.enterprise_type || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="纳税人资质">{{ detailData.taxpayer_qualification || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="经营范围" :span="2">{{ detailData.business_scope || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="更新时间" :span="2">{{ formatDateTime(detailData.update_time) }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
<el-descriptions title="联系信息" :column="2" border size="small" label-width="120px" style="margin-top: 20px">
|
||||
<el-descriptions-item label="联系人">{{ detailData.contact_person || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="联系电话">{{ detailData.contact_phone || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="联系邮箱" :span="2">{{ detailData.contact_email || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="供应商地址" :span="2">{{ detailData.address || '-' }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
<el-descriptions :column="2" border size="small" label-width="120px" style="margin-top: 20px">
|
||||
<template #title>
|
||||
<div class="desc-title-row">
|
||||
<span>开票信息</span>
|
||||
<el-button link type="primary" size="small" @click="copyInvoiceInfo">一键复制</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<el-descriptions-item label="发票抬头" :span="2">{{ detailData.invoice_title || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="纳税人识别号">{{ detailData.tax_number || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="注册电话">{{ detailData.registered_phone || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="注册地址" :span="2">{{ detailData.registered_address || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="开户行名称">{{ detailData.bank_name || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="开户行账号">{{ detailData.bank_account || '-' }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
<el-descriptions title="备注信息" :column="1" border size="small" label-width="120px" style="margin-top: 20px">
|
||||
<el-descriptions-item label="备注">{{ detailData.remark || '-' }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
</el-drawer>
|
||||
|
||||
<!-- 通讯录 -->
|
||||
<ContactBook
|
||||
v-model:visible="contactBookVisible"
|
||||
:company-type="'supplier'"
|
||||
:company-id="currentCompany?.id"
|
||||
:company-name="currentCompany?.supplier_name"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { Plus, Search, Refresh } from '@element-plus/icons-vue'
|
||||
import { getSupplierList, deleteSupplier, toggleSupplierStatus } from '@/api/supplier'
|
||||
import SupplierEdit from './components/edit.vue'
|
||||
import ContactBook from '../components/contactBook.vue'
|
||||
|
||||
const loading = ref(false)
|
||||
const tableData = ref([])
|
||||
const editVisible = ref(false)
|
||||
const currentEditData = ref(null)
|
||||
const detailVisible = ref(false)
|
||||
const detailData = ref(null)
|
||||
const contactBookVisible = ref(false)
|
||||
const currentCompany = ref(null)
|
||||
|
||||
const filters = reactive({
|
||||
keyword: '',
|
||||
supplier_type: '',
|
||||
supplier_level: '',
|
||||
status: '',
|
||||
is_draft: ''
|
||||
})
|
||||
|
||||
const pagination = reactive({
|
||||
page: 1,
|
||||
pageSize: 20,
|
||||
total: 0
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
fetchList()
|
||||
})
|
||||
|
||||
async function fetchList() {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getSupplierList({
|
||||
page: pagination.page,
|
||||
pageSize: pagination.pageSize,
|
||||
...filters
|
||||
})
|
||||
if (res.code === 200) {
|
||||
tableData.value = res.data.list || []
|
||||
pagination.total = res.data.total || 0
|
||||
}
|
||||
} catch (e) {
|
||||
ElMessage.error(e.message || '查询失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function handleSearch() {
|
||||
pagination.page = 1
|
||||
fetchList()
|
||||
}
|
||||
|
||||
function resetFilters() {
|
||||
filters.keyword = ''
|
||||
filters.supplier_type = ''
|
||||
filters.supplier_level = ''
|
||||
filters.status = ''
|
||||
filters.is_draft = ''
|
||||
pagination.page = 1
|
||||
fetchList()
|
||||
}
|
||||
|
||||
function openCreate() {
|
||||
currentEditData.value = null
|
||||
editVisible.value = true
|
||||
}
|
||||
|
||||
function openEdit(row) {
|
||||
currentEditData.value = { ...row }
|
||||
editVisible.value = true
|
||||
}
|
||||
|
||||
function openDetail(row) {
|
||||
detailData.value = { ...row }
|
||||
detailVisible.value = true
|
||||
}
|
||||
|
||||
function openContactBook(row) {
|
||||
currentCompany.value = { ...row }
|
||||
contactBookVisible.value = true
|
||||
}
|
||||
|
||||
function formatDate(val) {
|
||||
if (!val) return '-'
|
||||
const d = new Date(val)
|
||||
if (isNaN(d.getTime())) return '-'
|
||||
return d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0')
|
||||
}
|
||||
|
||||
function formatDateTime(val) {
|
||||
if (!val) return '-'
|
||||
const d = new Date(val)
|
||||
return d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0') + ' ' + String(d.getHours()).padStart(2, '0') + ':' + String(d.getMinutes()).padStart(2, '0')
|
||||
}
|
||||
|
||||
function copyInvoiceInfo() {
|
||||
const d = detailData.value
|
||||
if (!d) return
|
||||
const lines = [
|
||||
`发票抬头：${d.invoice_title || ''}`,
|
||||
`纳税人识别号：${d.tax_number || ''}`,
|
||||
`注册地址：${d.registered_address || ''}`,
|
||||
`注册电话：${d.registered_phone || ''}`,
|
||||
`开户行名称：${d.bank_name || ''}`,
|
||||
`开户行账号：${d.bank_account || ''}`
|
||||
]
|
||||
const text = lines.join('\n')
|
||||
if (navigator.clipboard && navigator.clipboard.writeText) {
|
||||
navigator.clipboard.writeText(text).then(() => {
|
||||
ElMessage.success('开票信息已复制到剪贴板')
|
||||
}).catch(() => {
|
||||
fallbackCopy(text)
|
||||
})
|
||||
} else {
|
||||
fallbackCopy(text)
|
||||
}
|
||||
}
|
||||
|
||||
function fallbackCopy(text) {
|
||||
const ta = document.createElement('textarea')
|
||||
ta.value = text
|
||||
ta.style.position = 'fixed'
|
||||
ta.style.opacity = '0'
|
||||
document.body.appendChild(ta)
|
||||
ta.select()
|
||||
try {
|
||||
document.execCommand('copy')
|
||||
ElMessage.success('开票信息已复制到剪贴板')
|
||||
} catch {
|
||||
ElMessage.error('复制失败，请手动复制')
|
||||
}
|
||||
document.body.removeChild(ta)
|
||||
}
|
||||
|
||||
async function handleToggleStatus(row) {
|
||||
const newStatus = row.status === '1' ? '0' : '1'
|
||||
const action = newStatus === '1' ? '启用' : '禁用'
|
||||
try {
|
||||
await ElMessageBox.confirm(`确定要${action}供应商「${row.supplier_name}」吗？`, '提示', {
|
||||
type: 'warning'
|
||||
})
|
||||
await toggleSupplierStatus(row.id, newStatus)
|
||||
ElMessage.success(`${action}成功`)
|
||||
fetchList()
|
||||
} catch (e) {
|
||||
if (e !== 'cancel') {
|
||||
ElMessage.error(e.message || '操作失败')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete(row) {
|
||||
try {
|
||||
await ElMessageBox.confirm(`确定要删除供应商「${row.supplier_name}」吗？删除后不可恢复。`, '删除确认', {
|
||||
type: 'warning'
|
||||
})
|
||||
await deleteSupplier(row.id)
|
||||
ElMessage.success('删除成功')
|
||||
fetchList()
|
||||
} catch (e) {
|
||||
if (e !== 'cancel') {
|
||||
ElMessage.error(e.message || '删除失败')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function supplierTypeText(type) {
|
||||
const map = { '1': '原材料供应商', '2': '设备供应商', '3': '服务供应商', '4': '其他' }
|
||||
return map[type] || type
|
||||
}
|
||||
|
||||
function supplierTypeTag(type) {
|
||||
const map = { '1': 'primary', '2': 'warning', '3': 'success', '4': 'info' }
|
||||
return map[type] || 'info'
|
||||
}
|
||||
|
||||
function supplierLevelText(level) {
|
||||
const map = { '1': '核心供应商', '2': '重要供应商', '3': '普通供应商', '4': '潜在供应商' }
|
||||
return map[level] || level
|
||||
}
|
||||
|
||||
function supplierLevelTag(level) {
|
||||
const map = { '1': 'danger', '2': 'warning', '3': 'info', '4': '' }
|
||||
return map[level] || ''
|
||||
}
|
||||
|
||||
function statusText(status) {
|
||||
const map = { '0': '禁用', '1': '正常', '2': '冻结', '3': '已注销' }
|
||||
return map[status] || status
|
||||
}
|
||||
|
||||
function statusTag(status) {
|
||||
const map = { '0': 'info', '1': 'success', '2': 'warning', '3': 'danger' }
|
||||
return map[status] || 'info'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.supplier-page {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 20px;
|
||||
|
||||
h2 {
|
||||
margin: 0 0 6px 0;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.filter-bar {
|
||||
background: var(--el-bg-color);
|
||||
padding: 16px 16px 0;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 16px;
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
}
|
||||
|
||||
.table-container {
|
||||
background: var(--el-bg-color);
|
||||
padding: 16px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
}
|
||||
|
||||
.name-cell {
|
||||
font-weight: 500;
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
.name-cell-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.name-link {
|
||||
cursor: pointer;
|
||||
color: var(--el-color-primary);
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.desc-title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin-top: 16px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user