Начало Каталог Помощ
Вход
AI-Agent
/
inventory-management
2
0
Разклонения 0
Файлове Задачи 0 Заявки за сливане 0 Уики
ИН на ревизия: 188edfa287
Клонове Маркери
inventory-manag...
/
backend
/
static
/
index.html

index.html 26 KB
История Директен файл

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579 
  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-CN">
    3. 

  3. <head>
    4. 

  4.     <meta charset="UTF-8">
    5. 

  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6. 

  6.     <title>库存管理系统</title>
    7. 

  7.     <link rel="stylesheet" href="https://unpkg.com/element-plus@2.4.4/dist/index.css">
    8. 

  8.     <style>
    9. 

  9.         * { margin: 0; padding: 0; box-sizing: border-box; }
    10. 

  10.         body { 
    11. 

  11.             font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
    12. 

  12.             background: #f0f2f5;
    13. 

  13.             min-height: 100vh;
    14. 

  14.         }
    15. 

  15.         #app { min-height: 100vh; }
    16. 

  16. 

  17.         .top-header {
    18. 

  18.             background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    19. 

  19.             padding: 0 30px;
    20. 

  20.             height: 60px;
    21. 

  21.             display: flex;
    22. 

  22.             align-items: center;
    23. 

  23.             justify-content: space-between;
    24. 

  24.             box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    25. 

  25.         }
    26. 

  26.         .top-header .logo {
    27. 

  27.             display: flex;
    28. 

  28.             align-items: center;
    29. 

  29.             gap: 12px;
    30. 

  30.             color: #fff;
    31. 

  31.             font-size: 20px;
    32. 

  32.             font-weight: 600;
    33. 

  33.             letter-spacing: 2px;
    34. 

  34.         }
    35. 

  35.         .top-header .logo .icon-box {
    36. 

  36.             width: 36px; height: 36px;
    37. 

  37.             background: linear-gradient(135deg, #e94560, #c23152);
    38. 

  38.             border-radius: 8px;
    39. 

  39.             display: flex; align-items: center; justify-content: center;
    40. 

  40.             font-size: 18px;
    41. 

  41.         }
    42. 

  42.         .top-header .header-right {
    43. 

  43.             display: flex; align-items: center; gap: 16px;
    44. 

  44.             color: #b8c7d9; font-size: 14px;
    45. 

  45.         }
    46. 

  46. 

  47.         .main-container {
    48. 

  48.             max-width: 1400px;
    49. 

  49.             margin: 0 auto;
    50. 

  50.             padding: 24px;
    51. 

  51.         }
    52. 

  52. 

  53.         .stat-cards {
    54. 

  54.             display: grid;
    55. 

  55.             grid-template-columns: repeat(4, 1fr);
    56. 

  56.             gap: 16px;
    57. 

  57.             margin-bottom: 24px;
    58. 

  58.         }
    59. 

  59.         .stat-card {
    60. 

  60.             background: #fff;
    61. 

  61.             border-radius: 12px;
    62. 

  62.             padding: 20px;
    63. 

  63.             display: flex; align-items: center; gap: 16px;
    64. 

  64.             box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    65. 

  65.             transition: transform 0.2s, box-shadow 0.2s;
    66. 

  66.         }
    67. 

  67.         .stat-card:hover {
    68. 

  68.             transform: translateY(-2px);
    69. 

  69.             box-shadow: 0 6px 16px rgba(0,0,0,0.1);
    70. 

  70.         }
    71. 

  71.         .stat-card .stat-icon {
    72. 

  72.             width: 52px; height: 52px;
    73. 

  73.             border-radius: 12px;
    74. 

  74.             display: flex; align-items: center; justify-content: center;
    75. 

  75.             font-size: 24px;
    76. 

  76.         }
    77. 

  77.         .stat-card .stat-icon.blue { background: #e8f4fd; color: #1890ff; }
    78. 

  78.         .stat-card .stat-icon.green { background: #e8f8e8; color: #52c41a; }
    79. 

  79.         .stat-card .stat-icon.orange { background: #fff7e6; color: #fa8c16; }
    80. 

  80.         .stat-card .stat-icon.red { background: #fff1f0; color: #f5222d; }
    81. 

  81.         .stat-card .stat-info h3 { font-size: 28px; color: #1a1a2e; font-weight: 700; }
    82. 

  82.         .stat-card .stat-info p { font-size: 13px; color: #8c8c8c; margin-top: 4px; }
    83. 

  83. 

  84.         .table-card {
    85. 

  85.             background: #fff;
    86. 

  86.             border-radius: 12px;
    87. 

  87.             padding: 24px;
    88. 

  88.             box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    89. 

  89.         }
    90. 

  90.         .table-card .card-header {
    91. 

  91.             display: flex; align-items: center; justify-content: space-between;
    92. 

  92.             margin-bottom: 20px; flex-wrap: wrap; gap: 12px;
    93. 

  93.         }
    94. 

  94.         .table-card .card-header .left {
    95. 

  95.             display: flex; align-items: center; gap: 12px;
    96. 

  96.         }
    97. 

  97.         .table-card .card-header .right {
    98. 

  98.             display: flex; align-items: center; gap: 10px;
    99. 

  99.         }
    100. 

  100. 

  101.         .pagination-wrap {
    102. 

  102.             display: flex; justify-content: flex-end; margin-top: 20px;
    103. 

  103.         }
    104. 

  104. 

  105.         .stock-dialog .stock-info {
    106. 

  106.             background: #f6f8fa;
    107. 

  107.             border-radius: 8px;
    108. 

  108.             padding: 16px;
    109. 

  109.             margin-bottom: 20px;
    110. 

  110.         }
    111. 

  111.         .stock-dialog .stock-info .info-row {
    112. 

  112.             display: flex; gap: 24px; font-size: 14px;
    113. 

  113.         }
    114. 

  114.         .stock-dialog .stock-info .info-row span { color: #8c8c8c; }
    115. 

  115.         .stock-dialog .stock-info .info-row strong { color: #1a1a2e; }
    116. 

  116. 

  117.         .el-table th.el-table__cell {
    118. 

  118.             background: #f8f9fc !important;
    119. 

  119.             color: #1a1a2e;
    120. 

  120.             font-weight: 600;
    121. 

  121.         }
    122. 

  122. 

  123.         @media (max-width: 768px) {
    124. 

  124.             .stat-cards { grid-template-columns: repeat(2, 1fr); }
    125. 

  125.             .main-container { padding: 12px; }
    126. 

  126.         }
    127. 

  127.     </style>
    128. 

  128. </head>
    129. 

  129. <body>
    130. 

  130.     <div id="app">
    131. 

  131.         <div class="top-header">
    132. 

  132.             <div class="logo">
    133. 

  133.                 <div class="icon-box">📦</div>
    134. 

  134.                 库存管理系统
    135. 

  135.             </div>
    136. 

  136.             <div class="header-right">
    137. 

  137.                 <span>{{ currentTime }}</span>
    138. 

  138.             </div>
    139. 

  139.         </div>
    140. 

  140. 

  141.         <div class="main-container">
    142. 

  142.             <div class="stat-cards">
    143. 

  143.                 <div class="stat-card">
    144. 

  144.                     <div class="stat-icon blue">📋</div>
    145. 

  145.                     <div class="stat-info"><h3>{{ stats.total }}</h3><p>产品总数</p></div>
    146. 

  146.                 </div>
    147. 

  147.                 <div class="stat-card">
    148. 

  148.                     <div class="stat-icon green">📊</div>
    149. 

  149.                     <div class="stat-info"><h3>{{ stats.totalRemaining }}</h3><p>库存总量</p></div>
    150. 

  150.                 </div>
    151. 

  151.                 <div class="stat-card">
    152. 

  152.                     <div class="stat-icon orange">🏭</div>
    153. 

  153.                     <div class="stat-info"><h3>{{ stats.supplierCount }}</h3><p>供应商数</p></div>
    154. 

  154.                 </div>
    155. 

  155.                 <div class="stat-card">
    156. 

  156.                     <div class="stat-icon red">⚠️</div>
    157. 

  157.                     <div class="stat-info"><h3>{{ stats.lowStock }}</h3><p>库存预警 (≤0)</p></div>
    158. 

  158.                 </div>
    159. 

  159.             </div>
    160. 

  160. 

  161.             <el-tabs v-model="activeTab" class="table-card">
    162. 

  162.                 <!-- 库存管理 -->
    163. 

  163.                 <el-tab-pane label="库存管理" name="inventory">
    164. 

  164.                     <div class="card-header">
    165. 

  165.                         <div class="left">
    166. 

  166.                             <el-input v-model="searchKeyword" placeholder="搜索产品编码/供应商/批次..." style="width: 300px" clearable @keyup.enter="loadInventory" @clear="loadInventory"></el-input>
    167. 

  167.                             <el-button type="primary" @click="loadInventory">查询</el-button>
    168. 

  168.                         </div>
    169. 

  169.                         <div class="right">
    170. 

  170.                             <el-button type="success" @click="showAddDialog">新增</el-button>
    171. 

  171.                             <el-button type="warning" @click="triggerImport">导入</el-button>
    172. 

  172.                             <el-button type="info" @click="exportInventory">导出</el-button>
    173. 

  173.                             <input ref="fileInput" type="file" accept=".xlsx,.xls" style="display:none" @change="handleImport" />
    174. 

  174.                         </div>
    175. 

  175.                     </div>
    176. 

  176. 

  177.                     <el-table :data="inventoryList" border stripe style="width: 100%" v-loading="loading">
    178. 

  178.                         <el-table-column type="index" label="序号" width="70" align="center"></el-table-column>
    179. 

  179.                         <el-table-column prop="cInvCode" label="产品编码" width="160"></el-table-column>
    180. 

  180.                         <el-table-column prop="supplier" label="供应商" width="160"></el-table-column>
    181. 

  181.                         <el-table-column prop="casing_label_remark" label="现外壳&标签&备注" width="200"></el-table-column>
    182. 

  182.                         <el-table-column prop="batch" label="批次" width="140"></el-table-column>
    183. 

  183.                         <el-table-column prop="current_remaining" label="当前时间剩余" width="130" align="center">
    184. 

  184.                             <template #default="scope">
    185. 

  185.                                 <el-tag :type="scope.row.current_remaining <= 0 ? 'danger' : scope.row.current_remaining <= 10 ? 'warning' : 'success'" effect="plain">
    186. 

  186.                                     {{ scope.row.current_remaining }}
    187. 

  187.                                 </el-tag>
    188. 

  188.                             </template>
    189. 

  189.                         </el-table-column>
    190. 

  190.                         <el-table-column prop="storage_location" label="存货地点" width="160"></el-table-column>
    191. 

  191.                         <el-table-column label="操作" width="260" align="center" fixed="right">
    192. 

  192.                             <template #default="scope">
    193. 

  193.                                 <el-button size="small" type="success" @click="showStockDialog(scope.row, 'in')">入库</el-button>
    194. 

  194.                                 <el-button size="small" type="warning" @click="showStockDialog(scope.row, 'out')">出库</el-button>
    195. 

  195.                                 <el-button size="small" type="primary" @click="showEditDialog(scope.row)">编辑</el-button>
    196. 

  196.                                 <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
    197. 

  197.                             </template>
    198. 

  198.                         </el-table-column>
    199. 

  199.                     </el-table>
    200. 

  200. 

  201.                     <div class="pagination-wrap">
    202. 

  202.                         <el-pagination
    203. 

  203.                             v-model:current-page="page"
    204. 

  204.                             v-model:page-size="pageSize"
    205. 

  205.                             :page-sizes="[20, 50, 100]"
    206. 

  206.                             :total="total"
    207. 

  207.                             layout="total, sizes, prev, pager, next"
    208. 

  208.                             @size-change="loadInventory"
    209. 

  209.                             @current-change="loadInventory"
    210. 

  210.                         ></el-pagination>
    211. 

  211.                     </div>
    212. 

  212.                 </el-tab-pane>
    213. 

  213. 

  214.                 <!-- 出入库记录 -->
    215. 

  215.                 <el-tab-pane label="出入库记录" name="logs">
    216. 

  216.                     <div class="card-header">
    217. 

  217.                         <div class="left">
    218. 

  218.                             <el-input v-model="logSearch" placeholder="搜索产品编码/备注..." style="width: 300px" clearable @keyup.enter="loadLogs" @clear="loadLogs"></el-input>
    219. 

  219.                             <el-button type="primary" @click="loadLogs">查询</el-button>
    220. 

  220.                         </div>
    221. 

  221.                         <div class="right">
    222. 

  222.                             <el-button type="danger" @click="clearLogs">清空记录</el-button>
    223. 

  223.                             <el-button type="info" @click="exportLogs">导出记录</el-button>
    224. 

  224.                         </div>
    225. 

  225.                     </div>
    226. 

  226. 

  227.                     <el-table :data="logList" border stripe style="width: 100%" v-loading="logLoading">
    228. 

  228.                         <el-table-column type="index" label="序号" width="70" align="center"></el-table-column>
    229. 

  229.                         <el-table-column prop="cInvCode" label="产品编码" width="160"></el-table-column>
    230. 

  230.                         <el-table-column prop="type" label="类型" width="100" align="center">
    231. 

  231.                             <template #default="scope">
    232. 

  232.                                 <el-tag :type="scope.row.type === 'in' ? 'success' : 'danger'" effect="plain">
    233. 

  233.                                     {{ scope.row.type === 'in' ? '📥 入库' : '📤 出库' }}
    234. 

  234.                                 </el-tag>
    235. 

  235.                             </template>
    236. 

  236.                         </el-table-column>
    237. 

  237.                         <el-table-column prop="quantity" label="数量" width="100" align="center"></el-table-column>
    238. 

  238.                         <el-table-column prop="remark" label="备注" min-width="200"></el-table-column>
    239. 

  239.                         <el-table-column prop="created_at" label="操作时间" width="180" align="center">
    240. 

  240.                             <template #default="scope">
    241. 

  241.                                 {{ formatTime(scope.row.created_at) }}
    242. 

  242.                             </template>
    243. 

  243.                         </el-table-column>
    244. 

  244.                     </el-table>
    245. 

  245. 

  246.                     <div class="pagination-wrap">
    247. 

  247.                         <el-pagination
    248. 

  248.                             v-model:current-page="logPage"
    249. 

  249.                             v-model:page-size="logPageSize"
    250. 

  250.                             :page-sizes="[20, 50, 100]"
    251. 

  251.                             :total="logTotal"
    252. 

  252.                             layout="total, sizes, prev, pager, next"
    253. 

  253.                             @size-change="loadLogs"
    254. 

  254.                             @current-change="loadLogs"
    255. 

  255.                         ></el-pagination>
    256. 

  256.                     </div>
    257. 

  257.                 </el-tab-pane>
    258. 

  258.             </el-tabs>
    259. 

  259.         </div>
    260. 

  260. 

  261.         <!-- 新增/编辑对话框 -->
    262. 

  262.         <el-dialog v-model="dialogVisible" :title="isEdit ? '编辑库存' : '新增库存'" width="560px" destroy-on-close>
    263. 

  263.             <el-form :model="form" label-width="130px" ref="formRef">
    264. 

  264.                 <el-form-item label="产品编码" required>
    265. 

  265.                     <el-input v-model="form.cInvCode" placeholder="请输入产品编码" :disabled="isEdit"></el-input>
    266. 

  266.                 </el-form-item>
    267. 

  267.                 <el-form-item label="供应商">
    268. 

  268.                     <el-input v-model="form.supplier" placeholder="请输入供应商"></el-input>
    269. 

  269.                 </el-form-item>
    270. 

  270.                 <el-form-item label="现外壳&标签&备注">
    271. 

  271.                     <el-input v-model="form.casing_label_remark" type="textarea" :rows="2" placeholder="请输入外壳、标签、备注信息"></el-input>
    272. 

  272.                 </el-form-item>
    273. 

  273.                 <el-form-item label="批次">
    274. 

  274.                     <el-input v-model="form.batch" placeholder="请输入批次"></el-input>
    275. 

  275.                 </el-form-item>
    276. 

  276.                 <el-form-item label="当前时间剩余">
    277. 

  277.                     <el-input-number v-model="form.current_remaining" :min="0" :precision="2" style="width: 100%"></el-input-number>
    278. 

  278.                 </el-form-item>
    279. 

  279.                 <el-form-item label="存货地点">
    280. 

  280.                     <el-input v-model="form.storage_location" placeholder="请输入存货地点"></el-input>
    281. 

  281.                 </el-form-item>
    282. 

  282.             </el-form>
    283. 

  283.             <template #footer>
    284. 

  284.                 <el-button @click="dialogVisible = false">取消</el-button>
    285. 

  285.                 <el-button type="primary" @click="handleSubmit" :loading="submitLoading">确定</el-button>
    286. 

  286.             </template>
    287. 

  287.         </el-dialog>
    288. 

  288. 

  289.         <!-- 出入库对话框 -->
    290. 

  290.         <el-dialog v-model="stockDialogVisible" :title="stockType === 'in' ? '📥 入库操作' : '📤 出库操作'" width="480px" destroy-on-close class="stock-dialog">
    291. 

  291.             <div class="stock-info">
    292. 

  292.                 <div class="info-row">
    293. 

  293.                     <div><span>产品编码：</span><strong>{{ stockItem ? stockItem.cInvCode : '' }}</strong></div>
    294. 

  294.                     <div><span>当前库存：</span><strong>{{ stockItem ? stockItem.current_remaining : 0 }}</strong></div>
    295. 

  295.                 </div>
    296. 

  296.             </div>
    297. 

  297.             <el-form :model="stockForm" label-width="80px">
    298. 

  298.                 <el-form-item label="数量">
    299. 

  299.                     <el-input-number v-model="stockForm.quantity" :min="0.01" :precision="2" style="width: 100%"></el-input-number>
    300. 

  300.                 </el-form-item>
    301. 

  301.                 <el-form-item label="备注">
    302. 

  302.                     <el-input v-model="stockForm.remark" type="textarea" :rows="2" placeholder="请输入备注"></el-input>
    303. 

  303.                 </el-form-item>
    304. 

  304.             </el-form>
    305. 

  305.             <template #footer>
    306. 

  306.                 <el-button @click="stockDialogVisible = false">取消</el-button>
    307. 

  307.                 <el-button :type="stockType === 'in' ? 'success' : 'warning'" @click="handleStockSubmit" :loading="stockLoading">
    308. 

  308.                     确认{{ stockType === 'in' ? '入库' : '出库' }}
    309. 

  309.                 </el-button>
    310. 

  310.             </template>
    311. 

  311.         </el-dialog>
    312. 

  312.     </div>
    313. 

  313. 

  314.     <script src="https://unpkg.com/vue@3.3.13/dist/vue.global.prod.js"></script>
    315. 

  315.     <script src="https://unpkg.com/element-plus@2.4.4/dist/index.full.min.js"></script>
    316. 

  316.     <script src="https://unpkg.com/@element-plus/icons-vue@2.3.1/dist/index.iife.min.js"></script>
    317. 

  317.     <script>
    318. 

  318.     const { createApp, ref, reactive, onMounted, computed, nextTick } = Vue;
    319. 

  319. 

  320.     const app = createApp({
    321. 

  321.         setup() {
    322. 

  322.             const API = '/api';
    323. 

  323.             const activeTab = ref('inventory');
    324. 

  324.             const loading = ref(false);
    325. 

  325.             const currentTime = ref('');
    326. 

  326. 

  327.             // 库存列表
    328. 

  328.             const inventoryList = ref([]);
    329. 

  329.             const page = ref(1);
    330. 

  330.             const pageSize = ref(20);
    331. 

  331.             const total = ref(0);
    332. 

  332.             const searchKeyword = ref('');
    333. 

  333. 

  334.             // 出入库记录
    335. 

  335.             const logList = ref([]);
    336. 

  336.             const logPage = ref(1);
    337. 

  337.             const logPageSize = ref(20);
    338. 

  338.             const logTotal = ref(0);
    339. 

  339.             const logSearch = ref('');
    340. 

  340.             const logLoading = ref(false);
    341. 

  341. 

  342.             // 统计
    343. 

  343.             const stats = reactive({ total: 0, totalRemaining: 0, supplierCount: 0, lowStock: 0 });
    344. 

  344. 

  345.             // 表单
    346. 

  346.             const dialogVisible = ref(false);
    347. 

  347.             const isEdit = ref(false);
    348. 

  348.             const editId = ref(null);
    349. 

  349.             const submitLoading = ref(false);
    350. 

  350.             const formRef = ref(null);
    351. 

  351.             const form = reactive({
    352. 

  352.                 cInvCode: '', supplier: '', casing_label_remark: '',
    353. 

  353.                 batch: '', current_remaining: 0, storage_location: '',
    354. 

  354.             });
    355. 

  355. 

  356.             // 出入库
    357. 

  357.             const stockDialogVisible = ref(false);
    358. 

  358.             const stockType = ref('in');
    359. 

  359.             const stockItem = ref(null);
    360. 

  360.             const stockLoading = ref(false);
    361. 

  361.             const stockForm = reactive({ quantity: 1, remark: '' });
    362. 

  362.             const fileInput = ref(null);
    363. 

  363. 

  364.             const updateTime = () => {
    365. 

  365.                 currentTime.value = new Date().toLocaleString('zh-CN', { hour12: false });
    366. 

  366.             };
    367. 

  367. 

  368.             const loadInventory = async () => {
    369. 

  369.                 loading.value = true;
    370. 

  370.                 try {
    371. 

  371.                     const params = new URLSearchParams({ page: page.value, page_size: pageSize.value });
    372. 

  372.                     if (searchKeyword.value) params.set('search', searchKeyword.value);
    373. 

  373.                     const res = await fetch(API + '/inventory?' + params);
    374. 

  374.                     const data = await res.json();
    375. 

  375.                     inventoryList.value = data.items || [];
    376. 

  376.                     total.value = data.total || 0;
    377. 

  377.                     stats.total = data.total || 0;
    378. 

  378.                     stats.totalRemaining = (data.items || []).reduce((s, i) => s + (i.current_remaining || 0), 0);
    379. 

  379.                     const suppliers = new Set((data.items || []).map(i => i.supplier).filter(Boolean));
    380. 

  380.                     stats.supplierCount = suppliers.size;
    381. 

  381.                     stats.lowStock = (data.items || []).filter(i => i.current_remaining <= 0).length;
    382. 

  382.                 } catch (e) {
    383. 

  383.                     ElementPlus.ElMessage.error('加载库存失败');
    384. 

  384.                 } finally {
    385. 

  385.                     loading.value = false;
    386. 

  386.                 }
    387. 

  387.             };
    388. 

  388. 

  389.             const loadLogs = async () => {
    390. 

  390.                 logLoading.value = true;
    391. 

  391.                 try {
    392. 

  392.                     const params = new URLSearchParams({ page: logPage.value, page_size: logPageSize.value });
    393. 

  393.                     if (logSearch.value) params.set('search', logSearch.value);
    394. 

  394.                     const res = await fetch(API + '/stock/logs?' + params);
    395. 

  395.                     const data = await res.json();
    396. 

  396.                     logList.value = data.items || [];
    397. 

  397.                     logTotal.value = data.total || 0;
    398. 

  398.                 } catch (e) {
    399. 

  399.                     ElementPlus.ElMessage.error('加载记录失败');
    400. 

  400.                 } finally {
    401. 

  401.                     logLoading.value = false;
    402. 

  402.                 }
    403. 

  403.             };
    404. 

  404. 

  405.             const showAddDialog = () => {
    406. 

  406.                 isEdit.value = false;
    407. 

  407.                 editId.value = null;
    408. 

  408.                 Object.assign(form, { cInvCode: '', supplier: '', casing_label_remark: '', batch: '', current_remaining: 0, storage_location: '' });
    409. 

  409.                 dialogVisible.value = true;
    410. 

  410.             };
    411. 

  411. 

  412.             const showEditDialog = (row) => {
    413. 

  413.                 isEdit.value = true;
    414. 

  414.                 editId.value = row.id;
    415. 

  415.                 Object.assign(form, {
    416. 

  416.                     cInvCode: row.cInvCode, supplier: row.supplier || '',
    417. 

  417.                     casing_label_remark: row.casing_label_remark || '', batch: row.batch || '',
    418. 

  418.                     current_remaining: row.current_remaining, storage_location: row.storage_location || '',
    419. 

  419.                 });
    420. 

  420.                 dialogVisible.value = true;
    421. 

  421.             };
    422. 

  422. 

  423.             const handleSubmit = async () => {
    424. 

  424.                 if (!form.cInvCode) {
    425. 

  425.                     ElementPlus.ElMessage.warning('请输入产品编码');
    426. 

  426.                     return;
    427. 

  427.                 }
    428. 

  428.                 submitLoading.value = true;
    429. 

  429.                 try {
    430. 

  430.                     const url = isEdit.value ? API + '/inventory/' + editId.value : API + '/inventory';
    431. 

  431.                     const method = isEdit.value ? 'PUT' : 'POST';
    432. 

  432.                     const res = await fetch(url, {
    433. 

  433.                         method: method,
    434. 

  434.                         headers: { 'Content-Type': 'application/json' },
    435. 

  435.                         body: JSON.stringify(form),
    436. 

  436.                     });
    437. 

  437.                     if (!res.ok) {
    438. 

  438.                         const err = await res.json();
    439. 

  439.                         throw new Error(err.detail || '操作失败');
    440. 

  440.                     }
    441. 

  441.                     ElementPlus.ElMessage.success(isEdit.value ? '更新成功' : '新增成功');
    442. 

  442.                     dialogVisible.value = false;
    443. 

  443.                     loadInventory();
    444. 

  444.                 } catch (e) {
    445. 

  445.                     ElementPlus.ElMessage.error(e.message);
    446. 

  446.                 } finally {
    447. 

  447.                     submitLoading.value = false;
    448. 

  448.                 }
    449. 

  449.             };
    450. 

  450. 

  451.             const handleDelete = async (row) => {
    452. 

  452.                 try {
    453. 

  453.                     await ElementPlus.ElMessageBox.confirm(
    454. 

  454.                         '确定删除产品编码 "' + row.cInvCode + '" 的库存记录吗？',
    455. 

  455.                         '确认删除',
    456. 

  456.                         { type: 'warning' }
    457. 

  457.                     );
    458. 

  458.                     const res = await fetch(API + '/inventory/' + row.id, { method: 'DELETE' });
    459. 

  459.                     if (!res.ok) throw new Error('删除失败');
    460. 

  460.                     ElementPlus.ElMessage.success('删除成功');
    461. 

  461.                     loadInventory();
    462. 

  462.                 } catch (e) {
    463. 

  463.                     if (e !== 'cancel') ElementPlus.ElMessage.error(e.message || '删除失败');
    464. 

  464.                 }
    465. 

  465.             };
    466. 

  466. 

  467.             const showStockDialog = (row, type) => {
    468. 

  468.                 stockType.value = type;
    469. 

  469.                 stockItem.value = Object.assign({}, row);
    470. 

  470.                 stockForm.quantity = 1;
    471. 

  471.                 stockForm.remark = '';
    472. 

  472.                 stockDialogVisible.value = true;
    473. 

  473.             };
    474. 

  474. 

  475.             const handleStockSubmit = async () => {
    476. 

  476.                 if (stockForm.quantity <= 0) {
    477. 

  477.                     ElementPlus.ElMessage.warning('数量必须大于0');
    478. 

  478.                     return;
    479. 

  479.                 }
    480. 

  480.                 stockLoading.value = true;
    481. 

  481.                 try {
    482. 

  482.                     const res = await fetch(API + '/stock/operation', {
    483. 

  483.                         method: 'POST',
    484. 

  484.                         headers: { 'Content-Type': 'application/json' },
    485. 

  485.                         body: JSON.stringify({
    486. 

  486.                             inventory_id: stockItem.value.id,
    487. 

  487.                             type: stockType.value,
    488. 

  488.                             quantity: stockForm.quantity,
    489. 

  489.                             remark: stockForm.remark,
    490. 

  490.                         }),
    491. 

  491.                     });
    492. 

  492.                     const data = await res.json();
    493. 

  493.                     if (!res.ok) throw new Error(data.detail || '操作失败');
    494. 

  494.                     ElementPlus.ElMessage.success(data.message);
    495. 

  495.                     stockDialogVisible.value = false;
    496. 

  496.                     loadInventory();
    497. 

  497.                     loadLogs();
    498. 

  498.                 } catch (e) {
    499. 

  499.                     ElementPlus.ElMessage.error(e.message);
    500. 

  500.                 } finally {
    501. 

  501.                     stockLoading.value = false;
    502. 

  502.                 }
    503. 

  503.             };
    504. 

  504. 

  505.             const exportInventory = () => { window.open(API + '/inventory/export', '_blank'); };
    506. 

  506.             const exportLogs = () => { window.open(API + '/stock/export', '_blank'); };
    507. 

  507. 

  508.             const clearLogs = async () => {
    509. 

  509.                 try {
    510. 

  510.                     await ElementPlus.ElMessageBox.confirm(
    511. 

  511.                         '确定清空所有出入库记录吗？此操作不可恢复！',
    512. 

  512.                         '确认清空',
    513. 

  513.                         { type: 'warning' }
    514. 

  514.                     );
    515. 

  515.                     const res = await fetch(API + '/stock/logs', { method: 'DELETE' });
    516. 

  516.                     if (!res.ok) throw new Error('清空失败');
    517. 

  517.                     const data = await res.json();
    518. 

  518.                     ElementPlus.ElMessage.success(data.message);
    519. 

  519.                     loadLogs();
    520. 

  520.                 } catch (e) {
    521. 

  521.                     if (e !== 'cancel') ElementPlus.ElMessage.error(e.message || '清空失败');
    522. 

  522.                 }
    523. 

  523.             };
    524. 

  524. 

  525.             const triggerImport = () => { fileInput.value.click(); };
    526. 

  526. 

  527.             const handleImport = async (e) => {
    528. 

  528.                 const file = e.target.files[0];
    529. 

  529.                 if (!file) return;
    530. 

  530.                 const formData = new FormData();
    531. 

  531.                 formData.append('file', file);
    532. 

  532.                 try {
    533. 

  533.                     const res = await fetch(API + '/inventory/import', { method: 'POST', body: formData });
    534. 

  534.                     const data = await res.json();
    535. 

  535.                     if (!res.ok) throw new Error(data.detail || '导入失败');
    536. 

  536.                     ElementPlus.ElMessage.success(data.message);
    537. 

  537.                     loadInventory();
    538. 

  538.                 } catch (e) {
    539. 

  539.                     ElementPlus.ElMessage.error(e.message);
    540. 

  540.                 }
    541. 

  541.                 e.target.value = '';
    542. 

  542.             };
    543. 

  543. 

  544.             const formatTime = (t) => {
    545. 

  545.                 if (!t) return '-';
    546. 

  546.                 return new Date(t).toLocaleString('zh-CN', { hour12: false });
    547. 

  547.             };
    548. 

  548. 

  549.             onMounted(() => {
    550. 

  550.                 loadInventory();
    551. 

  551.                 loadLogs();
    552. 

  552.                 updateTime();
    553. 

  553.                 setInterval(updateTime, 1000);
    554. 

  554.             });
    555. 

  555. 

  556.             return {
    557. 

  557.                 activeTab, loading, currentTime,
    558. 

  558.                 inventoryList, page, pageSize, total, searchKeyword,
    559. 

  559.                 logList, logPage, logPageSize, logTotal, logSearch, logLoading,
    560. 

  560.                 stats,
    561. 

  561.                 dialogVisible, isEdit, form, formRef, submitLoading,
    562. 

  562.                 stockDialogVisible, stockType, stockItem, stockForm, stockLoading,
    563. 

  563.                 fileInput,
    564. 

  564.                 loadInventory, loadLogs,
    565. 

  565.                 showAddDialog, showEditDialog, handleSubmit, handleDelete,
    566. 

  566.                 showStockDialog, handleStockSubmit,
    567. 

  567.                 exportInventory, exportLogs, clearLogs, triggerImport, handleImport, formatTime,
    568. 

  568.             };
    569. 

  569.         }
    570. 

  570.     });
    571. 

  571. 

  572.     app.use(ElementPlus);
    573. 

  573.     for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    574. 

  574.         app.component(key, component);
    575. 

  575.     }
    576. 

  576.     app.mount('#app');
    577. 

  577.     </script>
    578. 

  578. </body>
    579. 

  579. </html>
    580.