147 lines
4.5 KiB
Vue
147 lines
4.5 KiB
Vue
<script setup lang="ts">
|
|
import { reactive, ref, onMounted } from 'vue'
|
|
import { useInventory } from '@/modules/inventory/composables/useInventory'
|
|
import { apiRequest } from '@/shared/api'
|
|
import { addNotification, handleApiError } from '@/shared/notification'
|
|
|
|
const { state, loadSuppliers } = useInventory()
|
|
|
|
const showModal = ref(false)
|
|
const editingItem = ref<any>(null)
|
|
const form = reactive({
|
|
name: '',
|
|
contact_person: '',
|
|
phone: '',
|
|
email: '',
|
|
address: ''
|
|
})
|
|
|
|
function openCreateSupplier() {
|
|
editingItem.value = null
|
|
form.name = ''
|
|
form.contact_person = ''
|
|
form.phone = ''
|
|
form.email = ''
|
|
form.address = ''
|
|
showModal.value = true
|
|
}
|
|
|
|
function editSupplier(item: any) {
|
|
editingItem.value = item
|
|
form.name = item.name ?? ''
|
|
form.contact_person = item.contact_person ?? ''
|
|
form.phone = item.phone ?? ''
|
|
form.email = item.email ?? ''
|
|
form.address = item.address ?? ''
|
|
showModal.value = true
|
|
}
|
|
|
|
async function save() {
|
|
try {
|
|
const payload = {
|
|
name: form.name,
|
|
contact_person: form.contact_person || null,
|
|
phone: form.phone || null,
|
|
email: form.email || null,
|
|
address: form.address || null
|
|
}
|
|
if (editingItem.value) {
|
|
await apiRequest(`/api/suppliers/${editingItem.value.id}`, {
|
|
method: 'PUT',
|
|
body: JSON.stringify(payload)
|
|
})
|
|
addNotification('供应商更新成功', 'success')
|
|
} else {
|
|
await apiRequest('/api/suppliers', {
|
|
method: 'POST',
|
|
body: JSON.stringify(payload)
|
|
})
|
|
addNotification('供应商已创建', 'success')
|
|
}
|
|
showModal.value = false
|
|
loadSuppliers()
|
|
} catch (e) {
|
|
handleApiError(e, '保存供应商')
|
|
}
|
|
}
|
|
|
|
async function deleteSupplier(id: number) {
|
|
if (!confirm('确定要删除这个供应商吗？')) return
|
|
try {
|
|
await apiRequest(`/api/suppliers/${id}`, { method: 'DELETE' })
|
|
addNotification('供应商已删除', 'success')
|
|
loadSuppliers()
|
|
} catch (e) {
|
|
handleApiError(e, '删除供应商')
|
|
}
|
|
}
|
|
onMounted(() => { loadSuppliers() })
|
|
</script>
|
|
|
|
<template>
|
|
<div class="suppliers-tab">
|
|
<div class="table-header">
|
|
<el-button type="primary" @click="openCreateSupplier">+ 新增供应商</el-button>
|
|
</div>
|
|
<el-table :data="state.suppliers" style="width: 100%" v-loading="state.loading" empty-text="暂无供应商数据">
|
|
<el-table-column prop="code" label="编码" />
|
|
<el-table-column prop="name" label="名称" />
|
|
<el-table-column prop="contact_person" label="联系人">
|
|
<template #default="{ row }">
|
|
{{ row.contact_person || '-' }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="phone" label="电话">
|
|
<template #default="{ row }">
|
|
{{ row.phone || '-' }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="email" label="邮箱">
|
|
<template #default="{ row }">
|
|
{{ row.email || '-' }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" width="180">
|
|
<template #default="{ row }">
|
|
<el-button size="small" @click="editSupplier(row)">编辑</el-button>
|
|
<el-button size="small" type="danger" @click="deleteSupplier(row.id)">删除</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<el-dialog v-model="showModal" :title="editingItem ? '编辑供应商' : '新增供应商'" width="520px" :close-on-click-modal="false">
|
|
<el-form :model="form" label-width="80px">
|
|
<el-form-item label="名称" required>
|
|
<el-input v-model="form.name" placeholder="请输入供应商名称" />
|
|
</el-form-item>
|
|
<el-form-item label="联系人">
|
|
<el-input v-model="form.contact_person" placeholder="请输入联系人" />
|
|
</el-form-item>
|
|
<el-form-item label="电话">
|
|
<el-input v-model="form.phone" placeholder="请输入电话" />
|
|
</el-form-item>
|
|
<el-form-item label="邮箱">
|
|
<el-input v-model="form.email" type="email" placeholder="请输入邮箱" />
|
|
</el-form-item>
|
|
<el-form-item label="地址">
|
|
<el-input v-model="form.address" placeholder="请输入地址" />
|
|
</el-form-item>
|
|
</el-form>
|
|
<template #footer>
|
|
<el-button @click="showModal = false">取消</el-button>
|
|
<el-button type="primary" @click="save">保存</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.suppliers-tab {
|
|
padding: 0;
|
|
}
|
|
|
|
.table-header {
|
|
margin-bottom: 16px;
|
|
}
|
|
</style>
|