initial commit
This commit is contained in:
cnbugs
@@ -0,0 +1,579 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>库存管理系统</title>
|
||||
<link rel="stylesheet" href="https://unpkg.com/element-plus@2.4.4/dist/index.css">
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||||
background: #f0f2f5;
|
||||
min-height: 100vh;
|
||||
}
|
||||
#app { min-height: 100vh; }
|
||||
|
||||
.top-header {
|
||||
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
|
||||
padding: 0 30px;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-shadow: 0 2px 12px rgba(0,0,0,0.15);
|
||||
}
|
||||
.top-header .logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
.top-header .logo .icon-box {
|
||||
width: 36px; height: 36px;
|
||||
background: linear-gradient(135deg, #e94560, #c23152);
|
||||
border-radius: 8px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 18px;
|
||||
}
|
||||
.top-header .header-right {
|
||||
display: flex; align-items: center; gap: 16px;
|
||||
color: #b8c7d9; font-size: 14px;
|
||||
}
|
||||
|
||||
.main-container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.stat-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.stat-card {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
display: flex; align-items: center; gap: 16px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
.stat-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 16px rgba(0,0,0,0.1);
|
||||
}
|
||||
.stat-card .stat-icon {
|
||||
width: 52px; height: 52px;
|
||||
border-radius: 12px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 24px;
|
||||
}
|
||||
.stat-card .stat-icon.blue { background: #e8f4fd; color: #1890ff; }
|
||||
.stat-card .stat-icon.green { background: #e8f8e8; color: #52c41a; }
|
||||
.stat-card .stat-icon.orange { background: #fff7e6; color: #fa8c16; }
|
||||
.stat-card .stat-icon.red { background: #fff1f0; color: #f5222d; }
|
||||
.stat-card .stat-info h3 { font-size: 28px; color: #1a1a2e; font-weight: 700; }
|
||||
.stat-card .stat-info p { font-size: 13px; color: #8c8c8c; margin-top: 4px; }
|
||||
|
||||
.table-card {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
|
||||
}
|
||||
.table-card .card-header {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
margin-bottom: 20px; flex-wrap: wrap; gap: 12px;
|
||||
}
|
||||
.table-card .card-header .left {
|
||||
display: flex; align-items: center; gap: 12px;
|
||||
}
|
||||
.table-card .card-header .right {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
}
|
||||
|
||||
.pagination-wrap {
|
||||
display: flex; justify-content: flex-end; margin-top: 20px;
|
||||
}
|
||||
|
||||
.stock-dialog .stock-info {
|
||||
background: #f6f8fa;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.stock-dialog .stock-info .info-row {
|
||||
display: flex; gap: 24px; font-size: 14px;
|
||||
}
|
||||
.stock-dialog .stock-info .info-row span { color: #8c8c8c; }
|
||||
.stock-dialog .stock-info .info-row strong { color: #1a1a2e; }
|
||||
|
||||
.el-table th.el-table__cell {
|
||||
background: #f8f9fc !important;
|
||||
color: #1a1a2e;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.stat-cards { grid-template-columns: repeat(2, 1fr); }
|
||||
.main-container { padding: 12px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<div class="top-header">
|
||||
<div class="logo">
|
||||
<div class="icon-box">📦</div>
|
||||
库存管理系统
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<span>{{ currentTime }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main-container">
|
||||
<div class="stat-cards">
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon blue">📋</div>
|
||||
<div class="stat-info"><h3>{{ stats.total }}</h3><p>产品总数</p></div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon green">📊</div>
|
||||
<div class="stat-info"><h3>{{ stats.totalRemaining }}</h3><p>库存总量</p></div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon orange">🏭</div>
|
||||
<div class="stat-info"><h3>{{ stats.supplierCount }}</h3><p>供应商数</p></div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon red">⚠️</div>
|
||||
<div class="stat-info"><h3>{{ stats.lowStock }}</h3><p>库存预警 (≤0)</p></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-tabs v-model="activeTab" class="table-card">
|
||||
<!-- 库存管理 -->
|
||||
<el-tab-pane label="库存管理" name="inventory">
|
||||
<div class="card-header">
|
||||
<div class="left">
|
||||
<el-input v-model="searchKeyword" placeholder="搜索产品编码/供应商/批次..." style="width: 300px" clearable @keyup.enter="loadInventory" @clear="loadInventory"></el-input>
|
||||
<el-button type="primary" @click="loadInventory">查询</el-button>
|
||||
</div>
|
||||
<div class="right">
|
||||
<el-button type="success" @click="showAddDialog">新增</el-button>
|
||||
<el-button type="warning" @click="triggerImport">导入</el-button>
|
||||
<el-button type="info" @click="exportInventory">导出</el-button>
|
||||
<input ref="fileInput" type="file" accept=".xlsx,.xls" style="display:none" @change="handleImport" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-table :data="inventoryList" border stripe style="width: 100%" v-loading="loading">
|
||||
<el-table-column type="index" label="序号" width="70" align="center"></el-table-column>
|
||||
<el-table-column prop="cInvCode" label="产品编码" width="160"></el-table-column>
|
||||
<el-table-column prop="supplier" label="供应商" width="160"></el-table-column>
|
||||
<el-table-column prop="casing_label_remark" label="现外壳&标签&备注" width="200"></el-table-column>
|
||||
<el-table-column prop="batch" label="批次" width="140"></el-table-column>
|
||||
<el-table-column prop="current_remaining" label="当前时间剩余" width="130" align="center">
|
||||
<template #default="scope">
|
||||
<el-tag :type="scope.row.current_remaining <= 0 ? 'danger' : scope.row.current_remaining <= 10 ? 'warning' : 'success'" effect="plain">
|
||||
{{ scope.row.current_remaining }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="storage_location" label="存货地点" width="160"></el-table-column>
|
||||
<el-table-column label="操作" width="260" align="center" fixed="right">
|
||||
<template #default="scope">
|
||||
<el-button size="small" type="success" @click="showStockDialog(scope.row, 'in')">入库</el-button>
|
||||
<el-button size="small" type="warning" @click="showStockDialog(scope.row, 'out')">出库</el-button>
|
||||
<el-button size="small" type="primary" @click="showEditDialog(scope.row)">编辑</el-button>
|
||||
<el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="pagination-wrap">
|
||||
<el-pagination
|
||||
v-model:current-page="page"
|
||||
v-model:page-size="pageSize"
|
||||
:page-sizes="[20, 50, 100]"
|
||||
:total="total"
|
||||
layout="total, sizes, prev, pager, next"
|
||||
@size-change="loadInventory"
|
||||
@current-change="loadInventory"
|
||||
></el-pagination>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 出入库记录 -->
|
||||
<el-tab-pane label="出入库记录" name="logs">
|
||||
<div class="card-header">
|
||||
<div class="left">
|
||||
<el-input v-model="logSearch" placeholder="搜索产品编码/备注..." style="width: 300px" clearable @keyup.enter="loadLogs" @clear="loadLogs"></el-input>
|
||||
<el-button type="primary" @click="loadLogs">查询</el-button>
|
||||
</div>
|
||||
<div class="right">
|
||||
<el-button type="danger" @click="clearLogs">清空记录</el-button>
|
||||
<el-button type="info" @click="exportLogs">导出记录</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-table :data="logList" border stripe style="width: 100%" v-loading="logLoading">
|
||||
<el-table-column type="index" label="序号" width="70" align="center"></el-table-column>
|
||||
<el-table-column prop="cInvCode" label="产品编码" width="160"></el-table-column>
|
||||
<el-table-column prop="type" label="类型" width="100" align="center">
|
||||
<template #default="scope">
|
||||
<el-tag :type="scope.row.type === 'in' ? 'success' : 'danger'" effect="plain">
|
||||
{{ scope.row.type === 'in' ? '📥 入库' : '📤 出库' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="quantity" label="数量" width="100" align="center"></el-table-column>
|
||||
<el-table-column prop="remark" label="备注" min-width="200"></el-table-column>
|
||||
<el-table-column prop="created_at" label="操作时间" width="180" align="center">
|
||||
<template #default="scope">
|
||||
{{ formatTime(scope.row.created_at) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="pagination-wrap">
|
||||
<el-pagination
|
||||
v-model:current-page="logPage"
|
||||
v-model:page-size="logPageSize"
|
||||
:page-sizes="[20, 50, 100]"
|
||||
:total="logTotal"
|
||||
layout="total, sizes, prev, pager, next"
|
||||
@size-change="loadLogs"
|
||||
@current-change="loadLogs"
|
||||
></el-pagination>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
|
||||
<!-- 新增/编辑对话框 -->
|
||||
<el-dialog v-model="dialogVisible" :title="isEdit ? '编辑库存' : '新增库存'" width="560px" destroy-on-close>
|
||||
<el-form :model="form" label-width="130px" ref="formRef">
|
||||
<el-form-item label="产品编码" required>
|
||||
<el-input v-model="form.cInvCode" placeholder="请输入产品编码" :disabled="isEdit"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="供应商">
|
||||
<el-input v-model="form.supplier" placeholder="请输入供应商"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="现外壳&标签&备注">
|
||||
<el-input v-model="form.casing_label_remark" type="textarea" :rows="2" placeholder="请输入外壳、标签、备注信息"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="批次">
|
||||
<el-input v-model="form.batch" placeholder="请输入批次"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="当前时间剩余">
|
||||
<el-input-number v-model="form.current_remaining" :min="0" :precision="2" style="width: 100%"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="存货地点">
|
||||
<el-input v-model="form.storage_location" placeholder="请输入存货地点"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit" :loading="submitLoading">确定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 出入库对话框 -->
|
||||
<el-dialog v-model="stockDialogVisible" :title="stockType === 'in' ? '📥 入库操作' : '📤 出库操作'" width="480px" destroy-on-close class="stock-dialog">
|
||||
<div class="stock-info">
|
||||
<div class="info-row">
|
||||
<div><span>产品编码：</span><strong>{{ stockItem ? stockItem.cInvCode : '' }}</strong></div>
|
||||
<div><span>当前库存：</span><strong>{{ stockItem ? stockItem.current_remaining : 0 }}</strong></div>
|
||||
</div>
|
||||
</div>
|
||||
<el-form :model="stockForm" label-width="80px">
|
||||
<el-form-item label="数量">
|
||||
<el-input-number v-model="stockForm.quantity" :min="0.01" :precision="2" style="width: 100%"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注">
|
||||
<el-input v-model="stockForm.remark" type="textarea" :rows="2" placeholder="请输入备注"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="stockDialogVisible = false">取消</el-button>
|
||||
<el-button :type="stockType === 'in' ? 'success' : 'warning'" @click="handleStockSubmit" :loading="stockLoading">
|
||||
确认{{ stockType === 'in' ? '入库' : '出库' }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
<script src="https://unpkg.com/vue@3.3.13/dist/vue.global.prod.js"></script>
|
||||
<script src="https://unpkg.com/element-plus@2.4.4/dist/index.full.min.js"></script>
|
||||
<script src="https://unpkg.com/@element-plus/icons-vue@2.3.1/dist/index.iife.min.js"></script>
|
||||
<script>
|
||||
const { createApp, ref, reactive, onMounted, computed, nextTick } = Vue;
|
||||
|
||||
const app = createApp({
|
||||
setup() {
|
||||
const API = '/api';
|
||||
const activeTab = ref('inventory');
|
||||
const loading = ref(false);
|
||||
const currentTime = ref('');
|
||||
|
||||
// 库存列表
|
||||
const inventoryList = ref([]);
|
||||
const page = ref(1);
|
||||
const pageSize = ref(20);
|
||||
const total = ref(0);
|
||||
const searchKeyword = ref('');
|
||||
|
||||
// 出入库记录
|
||||
const logList = ref([]);
|
||||
const logPage = ref(1);
|
||||
const logPageSize = ref(20);
|
||||
const logTotal = ref(0);
|
||||
const logSearch = ref('');
|
||||
const logLoading = ref(false);
|
||||
|
||||
// 统计
|
||||
const stats = reactive({ total: 0, totalRemaining: 0, supplierCount: 0, lowStock: 0 });
|
||||
|
||||
// 表单
|
||||
const dialogVisible = ref(false);
|
||||
const isEdit = ref(false);
|
||||
const editId = ref(null);
|
||||
const submitLoading = ref(false);
|
||||
const formRef = ref(null);
|
||||
const form = reactive({
|
||||
cInvCode: '', supplier: '', casing_label_remark: '',
|
||||
batch: '', current_remaining: 0, storage_location: '',
|
||||
});
|
||||
|
||||
// 出入库
|
||||
const stockDialogVisible = ref(false);
|
||||
const stockType = ref('in');
|
||||
const stockItem = ref(null);
|
||||
const stockLoading = ref(false);
|
||||
const stockForm = reactive({ quantity: 1, remark: '' });
|
||||
const fileInput = ref(null);
|
||||
|
||||
const updateTime = () => {
|
||||
currentTime.value = new Date().toLocaleString('zh-CN', { hour12: false });
|
||||
};
|
||||
|
||||
const loadInventory = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
const params = new URLSearchParams({ page: page.value, page_size: pageSize.value });
|
||||
if (searchKeyword.value) params.set('search', searchKeyword.value);
|
||||
const res = await fetch(API + '/inventory?' + params);
|
||||
const data = await res.json();
|
||||
inventoryList.value = data.items || [];
|
||||
total.value = data.total || 0;
|
||||
stats.total = data.total || 0;
|
||||
stats.totalRemaining = (data.items || []).reduce((s, i) => s + (i.current_remaining || 0), 0);
|
||||
const suppliers = new Set((data.items || []).map(i => i.supplier).filter(Boolean));
|
||||
stats.supplierCount = suppliers.size;
|
||||
stats.lowStock = (data.items || []).filter(i => i.current_remaining <= 0).length;
|
||||
} catch (e) {
|
||||
ElementPlus.ElMessage.error('加载库存失败');
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const loadLogs = async () => {
|
||||
logLoading.value = true;
|
||||
try {
|
||||
const params = new URLSearchParams({ page: logPage.value, page_size: logPageSize.value });
|
||||
if (logSearch.value) params.set('search', logSearch.value);
|
||||
const res = await fetch(API + '/stock/logs?' + params);
|
||||
const data = await res.json();
|
||||
logList.value = data.items || [];
|
||||
logTotal.value = data.total || 0;
|
||||
} catch (e) {
|
||||
ElementPlus.ElMessage.error('加载记录失败');
|
||||
} finally {
|
||||
logLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const showAddDialog = () => {
|
||||
isEdit.value = false;
|
||||
editId.value = null;
|
||||
Object.assign(form, { cInvCode: '', supplier: '', casing_label_remark: '', batch: '', current_remaining: 0, storage_location: '' });
|
||||
dialogVisible.value = true;
|
||||
};
|
||||
|
||||
const showEditDialog = (row) => {
|
||||
isEdit.value = true;
|
||||
editId.value = row.id;
|
||||
Object.assign(form, {
|
||||
cInvCode: row.cInvCode, supplier: row.supplier || '',
|
||||
casing_label_remark: row.casing_label_remark || '', batch: row.batch || '',
|
||||
current_remaining: row.current_remaining, storage_location: row.storage_location || '',
|
||||
});
|
||||
dialogVisible.value = true;
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!form.cInvCode) {
|
||||
ElementPlus.ElMessage.warning('请输入产品编码');
|
||||
return;
|
||||
}
|
||||
submitLoading.value = true;
|
||||
try {
|
||||
const url = isEdit.value ? API + '/inventory/' + editId.value : API + '/inventory';
|
||||
const method = isEdit.value ? 'PUT' : 'POST';
|
||||
const res = await fetch(url, {
|
||||
method: method,
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(form),
|
||||
});
|
||||
if (!res.ok) {
|
||||
const err = await res.json();
|
||||
throw new Error(err.detail || '操作失败');
|
||||
}
|
||||
ElementPlus.ElMessage.success(isEdit.value ? '更新成功' : '新增成功');
|
||||
dialogVisible.value = false;
|
||||
loadInventory();
|
||||
} catch (e) {
|
||||
ElementPlus.ElMessage.error(e.message);
|
||||
} finally {
|
||||
submitLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (row) => {
|
||||
try {
|
||||
await ElementPlus.ElMessageBox.confirm(
|
||||
'确定删除产品编码 "' + row.cInvCode + '" 的库存记录吗？',
|
||||
'确认删除',
|
||||
{ type: 'warning' }
|
||||
);
|
||||
const res = await fetch(API + '/inventory/' + row.id, { method: 'DELETE' });
|
||||
if (!res.ok) throw new Error('删除失败');
|
||||
ElementPlus.ElMessage.success('删除成功');
|
||||
loadInventory();
|
||||
} catch (e) {
|
||||
if (e !== 'cancel') ElementPlus.ElMessage.error(e.message || '删除失败');
|
||||
}
|
||||
};
|
||||
|
||||
const showStockDialog = (row, type) => {
|
||||
stockType.value = type;
|
||||
stockItem.value = Object.assign({}, row);
|
||||
stockForm.quantity = 1;
|
||||
stockForm.remark = '';
|
||||
stockDialogVisible.value = true;
|
||||
};
|
||||
|
||||
const handleStockSubmit = async () => {
|
||||
if (stockForm.quantity <= 0) {
|
||||
ElementPlus.ElMessage.warning('数量必须大于0');
|
||||
return;
|
||||
}
|
||||
stockLoading.value = true;
|
||||
try {
|
||||
const res = await fetch(API + '/stock/operation', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
inventory_id: stockItem.value.id,
|
||||
type: stockType.value,
|
||||
quantity: stockForm.quantity,
|
||||
remark: stockForm.remark,
|
||||
}),
|
||||
});
|
||||
const data = await res.json();
|
||||
if (!res.ok) throw new Error(data.detail || '操作失败');
|
||||
ElementPlus.ElMessage.success(data.message);
|
||||
stockDialogVisible.value = false;
|
||||
loadInventory();
|
||||
loadLogs();
|
||||
} catch (e) {
|
||||
ElementPlus.ElMessage.error(e.message);
|
||||
} finally {
|
||||
stockLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const exportInventory = () => { window.open(API + '/inventory/export', '_blank'); };
|
||||
const exportLogs = () => { window.open(API + '/stock/export', '_blank'); };
|
||||
|
||||
const clearLogs = async () => {
|
||||
try {
|
||||
await ElementPlus.ElMessageBox.confirm(
|
||||
'确定清空所有出入库记录吗？此操作不可恢复！',
|
||||
'确认清空',
|
||||
{ type: 'warning' }
|
||||
);
|
||||
const res = await fetch(API + '/stock/logs', { method: 'DELETE' });
|
||||
if (!res.ok) throw new Error('清空失败');
|
||||
const data = await res.json();
|
||||
ElementPlus.ElMessage.success(data.message);
|
||||
loadLogs();
|
||||
} catch (e) {
|
||||
if (e !== 'cancel') ElementPlus.ElMessage.error(e.message || '清空失败');
|
||||
}
|
||||
};
|
||||
|
||||
const triggerImport = () => { fileInput.value.click(); };
|
||||
|
||||
const handleImport = async (e) => {
|
||||
const file = e.target.files[0];
|
||||
if (!file) return;
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
try {
|
||||
const res = await fetch(API + '/inventory/import', { method: 'POST', body: formData });
|
||||
const data = await res.json();
|
||||
if (!res.ok) throw new Error(data.detail || '导入失败');
|
||||
ElementPlus.ElMessage.success(data.message);
|
||||
loadInventory();
|
||||
} catch (e) {
|
||||
ElementPlus.ElMessage.error(e.message);
|
||||
}
|
||||
e.target.value = '';
|
||||
};
|
||||
|
||||
const formatTime = (t) => {
|
||||
if (!t) return '-';
|
||||
return new Date(t).toLocaleString('zh-CN', { hour12: false });
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
loadInventory();
|
||||
loadLogs();
|
||||
updateTime();
|
||||
setInterval(updateTime, 1000);
|
||||
});
|
||||
|
||||
return {
|
||||
activeTab, loading, currentTime,
|
||||
inventoryList, page, pageSize, total, searchKeyword,
|
||||
logList, logPage, logPageSize, logTotal, logSearch, logLoading,
|
||||
stats,
|
||||
dialogVisible, isEdit, form, formRef, submitLoading,
|
||||
stockDialogVisible, stockType, stockItem, stockForm, stockLoading,
|
||||
fileInput,
|
||||
loadInventory, loadLogs,
|
||||
showAddDialog, showEditDialog, handleSubmit, handleDelete,
|
||||
showStockDialog, handleStockSubmit,
|
||||
exportInventory, exportLogs, clearLogs, triggerImport, handleImport, formatTime,
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
app.use(ElementPlus);
|
||||
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
||||
app.component(key, component);
|
||||
}
|
||||
app.mount('#app');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user