cnbugs
748 行
35 KiB
HTML
748 行
35 KiB
HTML
<!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">
|
|
<template v-if="isLoggedIn">
|
|
<span>欢迎，{{ currentUser }}</span>
|
|
<el-button type="danger" size="small" @click="logout">退出</el-button>
|
|
</template>
|
|
<template v-else>
|
|
<el-button type="primary" size="small" @click="loginDialogVisible = true">登录</el-button>
|
|
</template>
|
|
<span>{{ currentTime }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 未登录显示登录框 -->
|
|
<div v-if="!isLoggedIn" style="display:flex;justify-content:center;align-items:center;min-height:calc(100vh - 60px);">
|
|
<div style="background:#fff;padding:40px;border-radius:12px;box-shadow:0 2px 12px rgba(0,0,0,0.1);width:400px;text-align:center;">
|
|
<h2 style="margin-bottom:30px;color:#1a1a2e;">{{ isRegister ? '用户注册' : '用户登录' }}</h2>
|
|
<el-form v-if="!isRegister" :model="loginForm" @submit.prevent="doLogin">
|
|
<el-form-item>
|
|
<el-input v-model="loginForm.username" placeholder="用户名" size="large" />
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-input v-model="loginForm.password" type="password" placeholder="密码" size="large" @keyup.enter="doLogin" />
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" size="large" style="width:100%;" :loading="loginLoading" @click="doLogin">登录</el-button>
|
|
</el-form-item>
|
|
<div style="margin-top:20px;">
|
|
还没有账号？<a href="#" @click.prevent="isRegister=true" style="color:#409eff;">立即注册</a>
|
|
</div>
|
|
</el-form>
|
|
<el-form v-else :model="registerForm" @submit.prevent="doRegister">
|
|
<el-form-item>
|
|
<el-input v-model="registerForm.username" placeholder="用户名" size="large" />
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-input v-model="registerForm.password" type="password" placeholder="密码" size="large" />
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-input v-model="registerForm.nickname" placeholder="昵称（可选）" size="large" />
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" size="large" style="width:100%;" :loading="loginLoading" @click="doRegister">注册</el-button>
|
|
</el-form-item>
|
|
<div style="margin-top:20px;">
|
|
已有账号？<a href="#" @click.prevent="isRegister=false" style="color:#409eff;">立即登录</a>
|
|
</div>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else 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 token = ref(localStorage.getItem('token') || '');
|
|
const currentUser = ref(localStorage.getItem('username') || '');
|
|
const isLoggedIn = ref(!!token.value);
|
|
const loginDialogVisible = ref(false);
|
|
const loginForm = reactive({ username: '', password: '' });
|
|
const registerForm = reactive({ username: '', password: '', nickname: '' });
|
|
const loginLoading = ref(false);
|
|
const isRegister = ref(false);
|
|
|
|
// 带认证的fetch
|
|
const authFetch = async (url, options = {}) => {
|
|
const headers = { ...options.headers };
|
|
if (token.value) {
|
|
headers['Authorization'] = 'Bearer ' + token.value;
|
|
}
|
|
const res = await fetch(url, { ...options, headers });
|
|
if (res.status === 401) {
|
|
logout();
|
|
throw new Error('登录已过期，请重新登录');
|
|
}
|
|
return res;
|
|
};
|
|
|
|
// 登录
|
|
const doLogin = async () => {
|
|
if (!loginForm.username || !loginForm.password) {
|
|
ElementPlus.ElMessage.error('请输入用户名和密码');
|
|
return;
|
|
}
|
|
loginLoading.value = true;
|
|
try {
|
|
const formData = new FormData();
|
|
formData.append('username', loginForm.username);
|
|
formData.append('password', loginForm.password);
|
|
const res = await fetch(API + '/auth/login', { method: 'POST', body: formData });
|
|
const data = await res.json();
|
|
if (!res.ok) throw new Error(data.detail || '登录失败');
|
|
token.value = data.access_token;
|
|
currentUser.value = data.username;
|
|
localStorage.setItem('token', data.access_token);
|
|
localStorage.setItem('username', data.username);
|
|
isLoggedIn.value = true;
|
|
loginDialogVisible.value = false;
|
|
loginForm.username = '';
|
|
loginForm.password = '';
|
|
ElementPlus.ElMessage.success('登录成功');
|
|
loadStats();
|
|
loadInventory();
|
|
loadLogs();
|
|
} catch (e) {
|
|
ElementPlus.ElMessage.error(e.message);
|
|
} finally {
|
|
loginLoading.value = false;
|
|
}
|
|
};
|
|
|
|
// 注册
|
|
const doRegister = async () => {
|
|
if (!registerForm.username || !registerForm.password) {
|
|
ElementPlus.ElMessage.error('请输入用户名和密码');
|
|
return;
|
|
}
|
|
loginLoading.value = true;
|
|
try {
|
|
const res = await fetch(API + '/auth/register?username=' + encodeURIComponent(registerForm.username) + '&password=' + encodeURIComponent(registerForm.password) + '&nickname=' + encodeURIComponent(registerForm.nickname || ''), { method: 'POST' });
|
|
const data = await res.json();
|
|
if (!res.ok) throw new Error(data.detail || '注册失败');
|
|
ElementPlus.ElMessage.success('注册成功，请登录');
|
|
isRegister.value = false;
|
|
} catch (e) {
|
|
ElementPlus.ElMessage.error(e.message);
|
|
} finally {
|
|
loginLoading.value = false;
|
|
}
|
|
};
|
|
|
|
// 登出
|
|
const logout = () => {
|
|
token.value = '';
|
|
currentUser.value = '';
|
|
localStorage.removeItem('token');
|
|
localStorage.removeItem('username');
|
|
isLoggedIn.value = false;
|
|
ElementPlus.ElMessage.success('已退出登录');
|
|
};
|
|
|
|
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 authFetch(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 authFetch(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 authFetch(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 authFetch(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 = async () => {
|
|
try {
|
|
const res = await authFetch(API + '/inventory/export');
|
|
if (!res.ok) throw new Error('导出失败');
|
|
const blob = await res.blob();
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = '库存数据_' + new Date().toISOString().slice(0,19).replace(/:/g,'-') + '.xlsx';
|
|
a.click();
|
|
URL.revokeObjectURL(url);
|
|
} catch (e) {
|
|
ElementPlus.ElMessage.error(e.message);
|
|
}
|
|
};
|
|
const exportLogs = async () => {
|
|
try {
|
|
const res = await authFetch(API + '/stock/export');
|
|
if (!res.ok) throw new Error('导出失败');
|
|
const blob = await res.blob();
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = '出入库记录_' + new Date().toISOString().slice(0,19).replace(/:/g,'-') + '.xlsx';
|
|
a.click();
|
|
URL.revokeObjectURL(url);
|
|
} catch (e) {
|
|
ElementPlus.ElMessage.error(e.message);
|
|
}
|
|
};
|
|
|
|
const clearLogs = async () => {
|
|
try {
|
|
await ElementPlus.ElMessageBox.confirm(
|
|
'确定清空所有出入库记录吗？此操作不可恢复！',
|
|
'确认清空',
|
|
{ type: 'warning' }
|
|
);
|
|
const res = await authFetch(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 authFetch(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(() => {
|
|
if (isLoggedIn.value) {
|
|
loadInventory();
|
|
loadLogs();
|
|
}
|
|
updateTime();
|
|
setInterval(updateTime, 1000);
|
|
});
|
|
|
|
return {
|
|
// 登录状态
|
|
token, currentUser, isLoggedIn, loginDialogVisible,
|
|
loginForm, registerForm, loginLoading, isRegister,
|
|
doLogin, doRegister, logout,
|
|
// 业务
|
|
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>
|