增加前端增删改查
This commit is contained in:
+245
-7
@@ -1477,13 +1477,40 @@ select.form-input {
|
||||
}
|
||||
|
||||
/* ================================
|
||||
标签页
|
||||
标签页 - 现代风格
|
||||
================================ */
|
||||
.tabs {
|
||||
display: flex;
|
||||
gap: var(--space-1);
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
gap: var(--space-2);
|
||||
background: var(--bg-secondary);
|
||||
padding: var(--space-1);
|
||||
border-radius: var(--radius-xl);
|
||||
margin-bottom: var(--space-6);
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: var(--space-3) var(--space-5);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: var(--font-medium);
|
||||
color: var(--text-secondary);
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: var(--radius-lg);
|
||||
cursor: pointer;
|
||||
transition: all var(--duration-fast) var(--ease-default);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tab:hover {
|
||||
color: var(--text-primary);
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
|
||||
.tab.active {
|
||||
color: var(--primary-600);
|
||||
background: var(--bg-primary);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
@@ -1534,7 +1561,7 @@ select.form-input {
|
||||
.hidden { display: none; }
|
||||
|
||||
/* ================================
|
||||
统计卡片
|
||||
统计卡片 - 现代风格
|
||||
================================ */
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
@@ -1543,6 +1570,13 @@ select.form-input {
|
||||
margin-bottom: var(--space-6);
|
||||
}
|
||||
|
||||
.dashboard-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
gap: var(--space-5);
|
||||
margin-bottom: var(--space-8);
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: var(--bg-primary);
|
||||
border: 1px solid var(--border-light);
|
||||
@@ -1550,21 +1584,33 @@ select.form-input {
|
||||
padding: var(--space-5);
|
||||
cursor: pointer;
|
||||
transition: all var(--duration-fast) var(--ease-default);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.stat-card:hover {
|
||||
border-color: var(--primary-300);
|
||||
border-color: var(--primary-200);
|
||||
box-shadow: var(--shadow-md);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.stat-card .stat-icon {
|
||||
font-size: var(--text-3xl);
|
||||
line-height: 1;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.stat-content {
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: var(--text-3xl);
|
||||
font-size: var(--text-2xl);
|
||||
font-weight: var(--font-bold);
|
||||
color: var(--text-primary);
|
||||
line-height: 1.2;
|
||||
margin-bottom: var(--space-1);
|
||||
}
|
||||
|
||||
@@ -1573,6 +1619,198 @@ select.form-input {
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
font-size: var(--text-2xl);
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
|
||||
/* ================================
|
||||
快速操作 - 现代风格
|
||||
================================ */
|
||||
.quick-actions {
|
||||
margin-top: var(--space-8);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: var(--text-lg);
|
||||
font-weight: var(--font-semibold);
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.action-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.action-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-6) var(--space-4);
|
||||
background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius-xl);
|
||||
cursor: pointer;
|
||||
transition: all var(--duration-normal) var(--ease-default);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.action-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, var(--primary-400), var(--primary-600));
|
||||
opacity: 0;
|
||||
transition: opacity var(--duration-fast) var(--ease-default);
|
||||
}
|
||||
|
||||
.action-card:hover {
|
||||
border-color: var(--primary-200);
|
||||
box-shadow: var(--shadow-lg);
|
||||
transform: translateY(-2px);
|
||||
background: linear-gradient(135deg, var(--primary-50) 0%, var(--bg-primary) 100%);
|
||||
}
|
||||
|
||||
.action-card:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.action-card:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.action-icon {
|
||||
font-size: var(--text-3xl);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.action-label {
|
||||
font-size: var(--text-sm);
|
||||
font-weight: var(--font-medium);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* 不同操作按钮的颜色变体 */
|
||||
.action-card:nth-child(1):hover {
|
||||
background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
|
||||
border-color: var(--primary-200);
|
||||
}
|
||||
|
||||
.action-card:nth-child(2):hover {
|
||||
background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
|
||||
border-color: #86efac;
|
||||
}
|
||||
|
||||
.action-card:nth-child(3):hover {
|
||||
background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
|
||||
border-color: #fde047;
|
||||
}
|
||||
|
||||
.action-card:nth-child(4):hover {
|
||||
background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%);
|
||||
border-color: #f9a8d4;
|
||||
}
|
||||
|
||||
/* ================================
|
||||
表格操作区
|
||||
================================ */
|
||||
.table-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: var(--space-4);
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.action-btns {
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
/* ================================
|
||||
模态框
|
||||
================================ */
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: var(--bg-primary);
|
||||
border-radius: var(--radius-xl);
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
box-shadow: var(--shadow-xl);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--space-5) var(--space-6);
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
}
|
||||
|
||||
.modal-header h3 {
|
||||
font-size: var(--text-lg);
|
||||
font-weight: var(--font-semibold);
|
||||
color: var(--text-primary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: transparent;
|
||||
border: none;
|
||||
font-size: var(--text-xl);
|
||||
color: var(--text-tertiary);
|
||||
cursor: pointer;
|
||||
border-radius: var(--radius-md);
|
||||
transition: all var(--duration-fast) var(--ease-default);
|
||||
}
|
||||
|
||||
.modal-close:hover {
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: var(--space-6);
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: var(--space-3);
|
||||
padding-top: var(--space-4);
|
||||
margin-top: var(--space-4);
|
||||
border-top: 1px solid var(--border-light);
|
||||
}
|
||||
|
||||
/* ================================
|
||||
用户区域
|
||||
================================ */
|
||||
|
||||
+452
-90
@@ -448,7 +448,7 @@ const HomeView = {
|
||||
</div>
|
||||
|
||||
<div class="stat-card" @click="$router.push('/moldinsight')">
|
||||
<div class="stat-icon">◈</div>
|
||||
<div class="stat-icon">⚙️</div>
|
||||
<div class="stat-content">
|
||||
<div class="stat-value">{{ state.stats?.health?.total_tasks || 0 }}</div>
|
||||
<div class="stat-label">分析任务</div>
|
||||
@@ -500,7 +500,7 @@ const HomeView = {
|
||||
<h2 class="section-title">快速操作</h2>
|
||||
<div class="action-grid">
|
||||
<button class="action-card" @click="$router.push('/moldinsight')">
|
||||
<span class="action-icon">◈</span>
|
||||
<span class="action-icon">⚙️</span>
|
||||
<span class="action-label">模具分析</span>
|
||||
</button>
|
||||
<button class="action-card" @click="$router.push('/inventory')">
|
||||
@@ -1479,7 +1479,11 @@ const InventoryView = {
|
||||
warehouses: [],
|
||||
inventory: [],
|
||||
movements: [],
|
||||
loading: false
|
||||
loading: false,
|
||||
showModal: false,
|
||||
modalType: '',
|
||||
editingItem: null,
|
||||
form: {}
|
||||
});
|
||||
|
||||
const loadDashboard = async () => {
|
||||
@@ -1560,6 +1564,153 @@ const InventoryView = {
|
||||
}
|
||||
};
|
||||
|
||||
const openModal = (type, item = null) => {
|
||||
state.modalType = type;
|
||||
state.editingItem = item;
|
||||
if (item) {
|
||||
state.form = { ...item };
|
||||
} else {
|
||||
state.form = {};
|
||||
}
|
||||
state.showModal = true;
|
||||
};
|
||||
|
||||
const closeModal = () => {
|
||||
state.showModal = false;
|
||||
state.modalType = '';
|
||||
state.editingItem = null;
|
||||
state.form = {};
|
||||
};
|
||||
|
||||
const saveProduct = async () => {
|
||||
try {
|
||||
if (state.editingItem) {
|
||||
await apiRequest(`/api/products/${state.editingItem.id}`, {
|
||||
method: 'PUT',
|
||||
body: JSON.stringify(state.form)
|
||||
});
|
||||
showNotification('产品更新成功', 'success');
|
||||
} else {
|
||||
await apiRequest('/api/products', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(state.form)
|
||||
});
|
||||
showNotification('产品创建成功', 'success');
|
||||
}
|
||||
closeModal();
|
||||
loadProducts();
|
||||
} catch (e) {
|
||||
handleApiError(e, '保存产品');
|
||||
}
|
||||
};
|
||||
|
||||
const deleteProduct = async (id) => {
|
||||
if (!confirm('确定要删除这个产品吗？')) return;
|
||||
try {
|
||||
await apiRequest(`/api/products/${id}`, { method: 'DELETE' });
|
||||
showNotification('产品已删除', 'success');
|
||||
loadProducts();
|
||||
} catch (e) {
|
||||
handleApiError(e, '删除产品');
|
||||
}
|
||||
};
|
||||
|
||||
const saveSupplier = async () => {
|
||||
try {
|
||||
if (state.editingItem) {
|
||||
await apiRequest(`/api/suppliers/${state.editingItem.id}`, {
|
||||
method: 'PUT',
|
||||
body: JSON.stringify(state.form)
|
||||
});
|
||||
showNotification('供应商更新成功', 'success');
|
||||
} else {
|
||||
await apiRequest('/api/suppliers', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(state.form)
|
||||
});
|
||||
showNotification('供应商创建成功', 'success');
|
||||
}
|
||||
closeModal();
|
||||
loadSuppliers();
|
||||
} catch (e) {
|
||||
handleApiError(e, '保存供应商');
|
||||
}
|
||||
};
|
||||
|
||||
const deleteSupplier = async (id) => {
|
||||
if (!confirm('确定要删除这个供应商吗？')) return;
|
||||
try {
|
||||
await apiRequest(`/api/suppliers/${id}`, { method: 'DELETE' });
|
||||
showNotification('供应商已删除', 'success');
|
||||
loadSuppliers();
|
||||
} catch (e) {
|
||||
handleApiError(e, '删除供应商');
|
||||
}
|
||||
};
|
||||
|
||||
const saveCustomer = async () => {
|
||||
try {
|
||||
if (state.editingItem) {
|
||||
await apiRequest(`/api/customers/${state.editingItem.id}`, {
|
||||
method: 'PUT',
|
||||
body: JSON.stringify(state.form)
|
||||
});
|
||||
showNotification('客户更新成功', 'success');
|
||||
} else {
|
||||
await apiRequest('/api/customers', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(state.form)
|
||||
});
|
||||
showNotification('客户创建成功', 'success');
|
||||
}
|
||||
closeModal();
|
||||
loadCustomers();
|
||||
} catch (e) {
|
||||
handleApiError(e, '保存客户');
|
||||
}
|
||||
};
|
||||
|
||||
const deleteCustomer = async (id) => {
|
||||
if (!confirm('确定要删除这个客户吗？')) return;
|
||||
try {
|
||||
await apiRequest(`/api/customers/${id}`, { method: 'DELETE' });
|
||||
showNotification('客户已删除', 'success');
|
||||
loadCustomers();
|
||||
} catch (e) {
|
||||
handleApiError(e, '删除客户');
|
||||
}
|
||||
};
|
||||
|
||||
const stockIn = async () => {
|
||||
try {
|
||||
await apiRequest('/api/stock-movements', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ ...state.form, movement_type: 'in' })
|
||||
});
|
||||
showNotification('入库成功', 'success');
|
||||
closeModal();
|
||||
loadInventory();
|
||||
loadMovements();
|
||||
} catch (e) {
|
||||
handleApiError(e, '入库操作');
|
||||
}
|
||||
};
|
||||
|
||||
const stockOut = async () => {
|
||||
try {
|
||||
await apiRequest('/api/stock-movements', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ ...state.form, movement_type: 'out' })
|
||||
});
|
||||
showNotification('出库成功', 'success');
|
||||
closeModal();
|
||||
loadInventory();
|
||||
loadMovements();
|
||||
} catch (e) {
|
||||
handleApiError(e, '出库操作');
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
if (!appState.user) {
|
||||
router.push('/login');
|
||||
@@ -1573,7 +1724,17 @@ const InventoryView = {
|
||||
switchTab,
|
||||
formatNumber,
|
||||
formatCurrency,
|
||||
formatDateTime
|
||||
formatDateTime,
|
||||
openModal,
|
||||
closeModal,
|
||||
saveProduct,
|
||||
deleteProduct,
|
||||
saveSupplier,
|
||||
deleteSupplier,
|
||||
saveCustomer,
|
||||
deleteCustomer,
|
||||
stockIn,
|
||||
stockOut
|
||||
};
|
||||
},
|
||||
template: `
|
||||
@@ -1643,98 +1804,140 @@ const InventoryView = {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="state.activeTab === 'products'" class="table-container">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>SKU</th>
|
||||
<th>名称</th>
|
||||
<th>分类</th>
|
||||
<th>单位</th>
|
||||
<th>成本价</th>
|
||||
<th>销售价</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="product in state.products" :key="product.id">
|
||||
<td>{{ product.sku }}</td>
|
||||
<td>{{ product.name }}</td>
|
||||
<td>{{ product.category || '-' }}</td>
|
||||
<td>{{ product.unit }}</td>
|
||||
<td>{{ formatCurrency(product.cost_price) }}</td>
|
||||
<td>{{ formatCurrency(product.sale_price) }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div v-else-if="state.activeTab === 'products'">
|
||||
<div class="table-header">
|
||||
<button class="btn btn-primary" @click="openModal('product')">+ 新增产品</button>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>SKU</th>
|
||||
<th>名称</th>
|
||||
<th>分类</th>
|
||||
<th>单位</th>
|
||||
<th>成本价</th>
|
||||
<th>销售价</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="product in state.products" :key="product.id">
|
||||
<td>{{ product.sku }}</td>
|
||||
<td>{{ product.name }}</td>
|
||||
<td>{{ product.category || '-' }}</td>
|
||||
<td>{{ product.unit }}</td>
|
||||
<td>{{ formatCurrency(product.cost_price) }}</td>
|
||||
<td>{{ formatCurrency(product.sale_price) }}</td>
|
||||
<td>
|
||||
<div class="action-btns">
|
||||
<button class="btn btn-sm btn-secondary" @click="openModal('product', product)">编辑</button>
|
||||
<button class="btn btn-sm btn-danger" @click="deleteProduct(product.id)">删除</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="state.activeTab === 'inventory'" class="table-container">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>SKU</th>
|
||||
<th>产品</th>
|
||||
<th>仓库</th>
|
||||
<th>数量</th>
|
||||
<th>可用</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="item in state.inventory" :key="item.id">
|
||||
<td>{{ item.product_sku }}</td>
|
||||
<td>{{ item.product_name }}</td>
|
||||
<td>{{ item.warehouse_name }}</td>
|
||||
<td>{{ item.quantity }}</td>
|
||||
<td>{{ item.available_quantity }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div v-else-if="state.activeTab === 'inventory'">
|
||||
<div class="table-header">
|
||||
<button class="btn btn-primary" @click="openModal('stockIn')">📥 入库</button>
|
||||
<button class="btn btn-secondary" @click="openModal('stockOut')" style="margin-left: 8px;">📤 出库</button>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>SKU</th>
|
||||
<th>产品</th>
|
||||
<th>仓库</th>
|
||||
<th>数量</th>
|
||||
<th>可用</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="item in state.inventory" :key="item.id">
|
||||
<td>{{ item.product_sku }}</td>
|
||||
<td>{{ item.product_name }}</td>
|
||||
<td>{{ item.warehouse_name }}</td>
|
||||
<td>{{ item.quantity }}</td>
|
||||
<td>{{ item.available_quantity }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="state.activeTab === 'suppliers'" class="table-container">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>编码</th>
|
||||
<th>名称</th>
|
||||
<th>联系人</th>
|
||||
<th>电话</th>
|
||||
<th>邮箱</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="supplier in state.suppliers" :key="supplier.id">
|
||||
<td>{{ supplier.code }}</td>
|
||||
<td>{{ supplier.name }}</td>
|
||||
<td>{{ supplier.contact_person || '-' }}</td>
|
||||
<td>{{ supplier.phone || '-' }}</td>
|
||||
<td>{{ supplier.email || '-' }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div v-else-if="state.activeTab === 'suppliers'">
|
||||
<div class="table-header">
|
||||
<button class="btn btn-primary" @click="openModal('supplier')">+ 新增供应商</button>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>编码</th>
|
||||
<th>名称</th>
|
||||
<th>联系人</th>
|
||||
<th>电话</th>
|
||||
<th>邮箱</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="supplier in state.suppliers" :key="supplier.id">
|
||||
<td>{{ supplier.code }}</td>
|
||||
<td>{{ supplier.name }}</td>
|
||||
<td>{{ supplier.contact_person || '-' }}</td>
|
||||
<td>{{ supplier.phone || '-' }}</td>
|
||||
<td>{{ supplier.email || '-' }}</td>
|
||||
<td>
|
||||
<div class="action-btns">
|
||||
<button class="btn btn-sm btn-secondary" @click="openModal('supplier', supplier)">编辑</button>
|
||||
<button class="btn btn-sm btn-danger" @click="deleteSupplier(supplier.id)">删除</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="state.activeTab === 'customers'" class="table-container">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>编码</th>
|
||||
<th>名称</th>
|
||||
<th>联系人</th>
|
||||
<th>电话</th>
|
||||
<th>邮箱</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="customer in state.customers" :key="customer.id">
|
||||
<td>{{ customer.code }}</td>
|
||||
<td>{{ customer.name }}</td>
|
||||
<td>{{ customer.contact_person || '-' }}</td>
|
||||
<td>{{ customer.phone || '-' }}</td>
|
||||
<td>{{ customer.email || '-' }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div v-else-if="state.activeTab === 'customers'">
|
||||
<div class="table-header">
|
||||
<button class="btn btn-primary" @click="openModal('customer')">+ 新增客户</button>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>编码</th>
|
||||
<th>名称</th>
|
||||
<th>联系人</th>
|
||||
<th>电话</th>
|
||||
<th>邮箱</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="customer in state.customers" :key="customer.id">
|
||||
<td>{{ customer.code }}</td>
|
||||
<td>{{ customer.name }}</td>
|
||||
<td>{{ customer.contact_person || '-' }}</td>
|
||||
<td>{{ customer.phone || '-' }}</td>
|
||||
<td>{{ customer.email || '-' }}</td>
|
||||
<td>
|
||||
<div class="action-btns">
|
||||
<button class="btn btn-sm btn-secondary" @click="openModal('customer', customer)">编辑</button>
|
||||
<button class="btn btn-sm btn-danger" @click="deleteCustomer(customer.id)">删除</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="state.activeTab === 'movements'" class="table-container">
|
||||
@@ -1766,6 +1969,165 @@ const InventoryView = {
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 模态框 -->
|
||||
<div v-if="state.showModal" class="modal-overlay" @click.self="closeModal">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3>{{ state.editingItem ? '编辑' : '新增' }}{{ state.modalType === 'product' ? '产品' : state.modalType === 'supplier' ? '供应商' : state.modalType === 'customer' ? '客户' : state.modalType === 'stockIn' ? '入库' : '出库' }}</h3>
|
||||
<button class="modal-close" @click="closeModal">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<!-- 产品表单 -->
|
||||
<form v-if="state.modalType === 'product'" @submit.prevent="saveProduct">
|
||||
<div class="form-group">
|
||||
<label class="form-label">SKU *</label>
|
||||
<input v-model="state.form.sku" class="form-input" required placeholder="产品编码" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">名称 *</label>
|
||||
<input v-model="state.form.name" class="form-input" required placeholder="产品名称" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">分类</label>
|
||||
<input v-model="state.form.category" class="form-input" placeholder="产品分类" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">单位</label>
|
||||
<input v-model="state.form.unit" class="form-input" placeholder="件/个/箱" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">成本价</label>
|
||||
<input v-model.number="state.form.cost_price" type="number" step="0.01" class="form-input" placeholder="0.00" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">销售价</label>
|
||||
<input v-model.number="state.form.sale_price" type="number" step="0.01" class="form-input" placeholder="0.00" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">最低库存</label>
|
||||
<input v-model.number="state.form.min_stock" type="number" class="form-input" placeholder="0" />
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" @click="closeModal">取消</button>
|
||||
<button type="submit" class="btn btn-primary">保存</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- 供应商表单 -->
|
||||
<form v-else-if="state.modalType === 'supplier'" @submit.prevent="saveSupplier">
|
||||
<div class="form-group">
|
||||
<label class="form-label">名称 *</label>
|
||||
<input v-model="state.form.name" class="form-input" required placeholder="供应商名称" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">联系人</label>
|
||||
<input v-model="state.form.contact_person" class="form-input" placeholder="联系人姓名" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">电话</label>
|
||||
<input v-model="state.form.phone" class="form-input" placeholder="联系电话" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">邮箱</label>
|
||||
<input v-model="state.form.email" type="email" class="form-input" placeholder="email@example.com" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">地址</label>
|
||||
<input v-model="state.form.address" class="form-input" placeholder="详细地址" />
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" @click="closeModal">取消</button>
|
||||
<button type="submit" class="btn btn-primary">保存</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- 客户表单 -->
|
||||
<form v-else-if="state.modalType === 'customer'" @submit.prevent="saveCustomer">
|
||||
<div class="form-group">
|
||||
<label class="form-label">名称 *</label>
|
||||
<input v-model="state.form.name" class="form-input" required placeholder="客户名称" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">联系人</label>
|
||||
<input v-model="state.form.contact_person" class="form-input" placeholder="联系人姓名" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">电话</label>
|
||||
<input v-model="state.form.phone" class="form-input" placeholder="联系电话" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">邮箱</label>
|
||||
<input v-model="state.form.email" type="email" class="form-input" placeholder="email@example.com" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">地址</label>
|
||||
<input v-model="state.form.address" class="form-input" placeholder="详细地址" />
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" @click="closeModal">取消</button>
|
||||
<button type="submit" class="btn btn-primary">保存</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- 入库表单 -->
|
||||
<form v-else-if="state.modalType === 'stockIn'" @submit.prevent="stockIn">
|
||||
<div class="form-group">
|
||||
<label class="form-label">产品ID *</label>
|
||||
<input v-model.number="state.form.product_id" type="number" class="form-input" required placeholder="产品ID" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">仓库ID *</label>
|
||||
<input v-model.number="state.form.warehouse_id" type="number" class="form-input" required placeholder="仓库ID (默认1)" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">数量 *</label>
|
||||
<input v-model.number="state.form.quantity" type="number" class="form-input" required placeholder="入库数量" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">单价</label>
|
||||
<input v-model.number="state.form.unit_price" type="number" step="0.01" class="form-input" placeholder="采购单价" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">备注</label>
|
||||
<input v-model="state.form.remark" class="form-input" placeholder="备注信息" />
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" @click="closeModal">取消</button>
|
||||
<button type="submit" class="btn btn-primary">确认入库</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- 出库表单 -->
|
||||
<form v-else-if="state.modalType === 'stockOut'" @submit.prevent="stockOut">
|
||||
<div class="form-group">
|
||||
<label class="form-label">产品ID *</label>
|
||||
<input v-model.number="state.form.product_id" type="number" class="form-input" required placeholder="产品ID" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">仓库ID *</label>
|
||||
<input v-model.number="state.form.warehouse_id" type="number" class="form-input" required placeholder="仓库ID (默认1)" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">数量 *</label>
|
||||
<input v-model.number="state.form.quantity" type="number" class="form-input" required placeholder="出库数量" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">单价</label>
|
||||
<input v-model.number="state.form.unit_price" type="number" step="0.01" class="form-input" placeholder="销售单价" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">备注</label>
|
||||
<input v-model="state.form.remark" class="form-input" placeholder="备注信息" />
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" @click="closeModal">取消</button>
|
||||
<button type="submit" class="btn btn-primary">确认出库</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user