From faf1db51a53db913da67df15633db0cd9394dc8e Mon Sep 17 00:00:00 2001
From: zxy <zhouxy1921@11.com>
Date: Mon, 8 Jun 2026 15:29:59 +0800
Subject: [PATCH] =?UTF-8?q?feat(rawstorageinventory):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E5=8E=9F=E6=96=99=E5=BA=93=E5=AD=98=E6=9F=A5=E8=AF=A2=E7=95=8C?=
 =?UTF-8?q?=E9=9D=A2=E5=B9=B6=E9=9B=86=E6=88=90=E6=A3=80=E9=AA=8C=E7=BB=93?=
 =?UTF-8?q?=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../RawStorageInventoryController.java        |  38 +-
 .../vo/RawStorageInventoryRespVO.java         |   4 +
 .../views/biz/rawstorageinventory/index.vue   | 440 ++++++------------
 3 files changed, 170 insertions(+), 312 deletions(-)

diff --git a/mes-module-chemmes/mes-module-chemmes-biz/src/main/java/com/ningxia/yunxi/chemmes/module/biz/controller/admin/rawstorageinventory/RawStorageInventoryController.java b/mes-module-chemmes/mes-module-chemmes-biz/src/main/java/com/ningxia/yunxi/chemmes/module/biz/controller/admin/rawstorageinventory/RawStorageInventoryController.java
index 637f22e..f1f7a6a 100644
--- a/mes-module-chemmes/mes-module-chemmes-biz/src/main/java/com/ningxia/yunxi/chemmes/module/biz/controller/admin/rawstorageinventory/RawStorageInventoryController.java
+++ b/mes-module-chemmes/mes-module-chemmes-biz/src/main/java/com/ningxia/yunxi/chemmes/module/biz/controller/admin/rawstorageinventory/RawStorageInventoryController.java
@@ -1,17 +1,17 @@
 package com.ningxia.yunxi.chemmes.module.biz.controller.admin.rawstorageinventory;
 
+import cn.hutool.core.collection.CollUtil;
+import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
 import com.ningxia.yunxi.chemmes.framework.common.pojo.CommonResult;
 import com.ningxia.yunxi.chemmes.framework.common.pojo.PageParam;
 import com.ningxia.yunxi.chemmes.framework.common.pojo.PageResult;
 import com.ningxia.yunxi.chemmes.framework.common.util.object.BeanUtils;
 import com.ningxia.yunxi.chemmes.framework.excel.core.util.ExcelUtils;
 import com.ningxia.yunxi.chemmes.framework.operatelog.core.annotations.OperateLog;
-import com.ningxia.yunxi.chemmes.module.biz.controller.admin.rawstorageinventory.vo.RawStorageInventoryPageReqVO;
-import com.ningxia.yunxi.chemmes.module.biz.controller.admin.rawstorageinventory.vo.RawStorageInventoryRespVO;
-import com.ningxia.yunxi.chemmes.module.biz.controller.admin.rawstorageinventory.vo.RawStorageInventorySaveReqVO;
-import com.ningxia.yunxi.chemmes.module.biz.controller.admin.rawstorageinventory.vo.MaterialInventoryPageReqVO;
-import com.ningxia.yunxi.chemmes.module.biz.controller.admin.rawstorageinventory.vo.MaterialInventoryRespVO;
+import com.ningxia.yunxi.chemmes.module.biz.controller.admin.rawstorageinventory.vo.*;
+import com.ningxia.yunxi.chemmes.module.biz.dal.dataobject.rawmaterialinsp.RawMaterialInspDO;
 import com.ningxia.yunxi.chemmes.module.biz.dal.dataobject.rawstorageinventory.RawStorageInventoryDO;
+import com.ningxia.yunxi.chemmes.module.biz.dal.mysql.rawmaterialinsp.RawMaterialInspMapper;
 import com.ningxia.yunxi.chemmes.module.biz.service.rawstorageinventory.RawStorageInventoryService;
 import io.swagger.v3.oas.annotations.Operation;
 import io.swagger.v3.oas.annotations.Parameter;
@@ -40,6 +40,9 @@ public class RawStorageInventoryController {
     @Resource
     private RawStorageInventoryService rawStorageInventoryService;
 
+    @Resource
+    private RawMaterialInspMapper rawMaterialInspMapper;
+
     @PostMapping("/create")
     @Operation(summary = "创建原料库存")
     @PreAuthorize("@ss.hasPermission('twm:raw-storage-inventory:create')")
@@ -78,7 +81,30 @@ public class RawStorageInventoryController {
     @PreAuthorize("@ss.hasPermission('twm:raw-storage-inventory:query')")
     public CommonResult<PageResult<RawStorageInventoryRespVO>> getRawStorageInventoryPage(@Valid RawStorageInventoryPageReqVO pageReqVO) {
         PageResult<RawStorageInventoryDO> pageResult = rawStorageInventoryService.getRawStorageInventoryPage(pageReqVO);
-        return success(BeanUtils.toBean(pageResult, RawStorageInventoryRespVO.class));
+        PageResult<RawStorageInventoryRespVO> voPageResult = BeanUtils.toBean(pageResult, RawStorageInventoryRespVO.class);
+        if (CollUtil.isNotEmpty(voPageResult.getList())) {
+            // 批量填充来料检验结果（通过 materialId 关联 tqm_raw_material_insp）
+            fillCheckResult(voPageResult.getList());
+        }
+        return success(voPageResult);
+    }
+
+    /**
+     * 通过 lot_no 关联 tqm_raw_material_insp 表，获取检验结果
+     */
+    private void fillCheckResult(List<RawStorageInventoryRespVO> list) {
+        for (RawStorageInventoryRespVO vo : list) {
+            if (vo.getLotNo() == null) {
+                continue;
+            }
+            RawMaterialInspDO insp = rawMaterialInspMapper.selectOne(
+                    new LambdaQueryWrapper<RawMaterialInspDO>()
+                            .eq(RawMaterialInspDO::getLotNo, vo.getLotNo())
+                            .last("LIMIT 1"));
+            if (insp != null) {
+                vo.setCheckResult(insp.getCheckResult());
+            }
+        }
     }
 
     @GetMapping("/export-excel")
diff --git a/mes-module-chemmes/mes-module-chemmes-biz/src/main/java/com/ningxia/yunxi/chemmes/module/biz/controller/admin/rawstorageinventory/vo/RawStorageInventoryRespVO.java b/mes-module-chemmes/mes-module-chemmes-biz/src/main/java/com/ningxia/yunxi/chemmes/module/biz/controller/admin/rawstorageinventory/vo/RawStorageInventoryRespVO.java
index 5cd397f..33c1182 100644
--- a/mes-module-chemmes/mes-module-chemmes-biz/src/main/java/com/ningxia/yunxi/chemmes/module/biz/controller/admin/rawstorageinventory/vo/RawStorageInventoryRespVO.java
+++ b/mes-module-chemmes/mes-module-chemmes-biz/src/main/java/com/ningxia/yunxi/chemmes/module/biz/controller/admin/rawstorageinventory/vo/RawStorageInventoryRespVO.java
@@ -106,4 +106,8 @@ public class RawStorageInventoryRespVO {
     @ExcelProperty("存货账单号")
     private String inventBillNo;
 
+    @Schema(description = "来料检验结果(0 合格 1 不合格 2让步接收)")
+    @ExcelProperty("检验结果")
+    private String checkResult;
+
 }
diff --git a/mes-ui/mes-ui-admin-vue3/src/views/biz/rawstorageinventory/index.vue b/mes-ui/mes-ui-admin-vue3/src/views/biz/rawstorageinventory/index.vue
index 4ef8c9d..fd364cf 100644
--- a/mes-ui/mes-ui-admin-vue3/src/views/biz/rawstorageinventory/index.vue
+++ b/mes-ui/mes-ui-admin-vue3/src/views/biz/rawstorageinventory/index.vue
@@ -8,276 +8,78 @@
       :inline="true"
       label-width="80px"
     >
-      <el-form-item label="仓储id" prop="storeHouseId">
-        <el-input
+      <el-form-item label="仓储" prop="storeHouseId">
+        <el-select
           v-model="queryParams.storeHouseId"
-          placeholder="请输入仓储id"
+          placeholder="请选择"
           clearable
-          @keyup.enter="handleQuery"
           class="!w-240px"
-        />
+          @change="handleStoreHouseChange"
+        >
+          <el-option
+            v-for="item in storeHouseList"
+            :key="item.id"
+            :label="item.storeHouseName"
+            :value="item.id"
+          />
+        </el-select>
       </el-form-item>
-      <el-form-item label="库区id" prop="storeAreaId">
-        <el-input
+      <el-form-item label="库区" prop="storeAreaId">
+        <el-select
           v-model="queryParams.storeAreaId"
-          placeholder="请输入库区id"
+          placeholder="请选择"
           clearable
-          @keyup.enter="handleQuery"
           class="!w-240px"
-        />
+        >
+          <el-option
+            v-for="item in storeAreaList"
+            :key="item.id"
+            :label="item.storeAreaName"
+            :value="item.id"
+          />
+        </el-select>
       </el-form-item>
-      <el-form-item label="仓储编码" prop="storeHouseCd">
-        <el-input
-          v-model="queryParams.storeHouseCd"
-          placeholder="请输入仓储编码"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="仓储名称" prop="storeHouseName">
-        <el-input
-          v-model="queryParams.storeHouseName"
-          placeholder="请输入仓储名称"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="库区编码" prop="storeAreCd">
-        <el-input
-          v-model="queryParams.storeAreCd"
-          placeholder="请输入库区编码"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="库区名称" prop="storeAreaName">
-        <el-input
-          v-model="queryParams.storeAreaName"
-          placeholder="请输入库区名称"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="物料id" prop="materialId">
-        <el-input
-          v-model="queryParams.materialId"
-          placeholder="请输入物料id"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="物料名称" prop="matName">
+      <el-form-item label="原料名称" prop="matName">
         <el-input
           v-model="queryParams.matName"
-          placeholder="请输入物料名称"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="物料编码" prop="matCode">
-        <el-input
-          v-model="queryParams.matCode"
-          placeholder="请输入物料编码"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="规格型号" prop="spec">
-        <el-input
-          v-model="queryParams.spec"
-          placeholder="请输入规格型号"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="单位" prop="unit">
-        <el-input
-          v-model="queryParams.unit"
-          placeholder="请输入单位"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="批次号" prop="lotNo">
-        <el-input
-          v-model="queryParams.lotNo"
-          placeholder="请输入批次号"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="创建时间" prop="createTime">
-        <el-date-picker
-          v-model="queryParams.createTime"
-          value-format="YYYY-MM-DD HH:mm:ss"
-          type="daterange"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="库存数量" prop="yardQty">
-        <el-input
-          v-model="queryParams.yardQty"
-          placeholder="请输入库存数量"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="可用数量" prop="useQty">
-        <el-input
-          v-model="queryParams.useQty"
-          placeholder="请输入可用数量"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="预占数量" prop="preQty">
-        <el-input
-          v-model="queryParams.preQty"
-          placeholder="请输入预占数量"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="库存单价" prop="price">
-        <el-input
-          v-model="queryParams.price"
-          placeholder="请输入库存单价"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="库存包数" prop="packQty">
-        <el-input
-          v-model="queryParams.packQty"
-          placeholder="请输入库存包数"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="单袋规格" prop="bagSpec">
-        <el-input
-          v-model="queryParams.bagSpec"
-          placeholder="请输入单袋规格"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="最早入库日期" prop="earStoreDate">
-        <el-date-picker
-          v-model="queryParams.earStoreDate"
-          value-format="YYYY-MM-DD HH:mm:ss"
-          type="daterange"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="存货账单号" prop="inventBillNo">
-        <el-input
-          v-model="queryParams.inventBillNo"
-          placeholder="请输入存货账单号"
+          placeholder="请输入"
           clearable
           @keyup.enter="handleQuery"
           class="!w-240px"
         />
       </el-form-item>
       <el-form-item>
-        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+        <el-button type="primary" @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
         <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
-        <el-button
-          type="primary"
-          plain
-          @click="openForm('create')"
-          v-hasPermi="['twm:raw-storage-inventory:create']"
-        >
-          <Icon icon="ep:plus" class="mr-5px" /> 新增
-        </el-button>
-        <el-button
-          type="success"
-          plain
-          @click="handleExport"
-          :loading="exportLoading"
-          v-hasPermi="['twm:raw-storage-inventory:export']"
-        >
-          <Icon icon="ep:download" class="mr-5px" /> 导出
-        </el-button>
       </el-form-item>
     </el-form>
   </ContentWrap>
 
   <!-- 列表 -->
   <ContentWrap>
-    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
-      <el-table-column label="序号" align="center" type="index" width="60px"/>
-      <el-table-column label="仓储id" align="center" prop="storeHouseId" />
-      <el-table-column label="库区id" align="center" prop="storeAreaId" />
-      <el-table-column label="仓储编码" align="center" prop="storeHouseCd" />
-      <el-table-column label="仓储名称" align="center" prop="storeHouseName" />
-      <el-table-column label="库区编码" align="center" prop="storeAreCd" />
-      <el-table-column label="库区名称" align="center" prop="storeAreaName" />
-      <el-table-column label="物料id" align="center" prop="materialId" />
-      <el-table-column label="物料名称" align="center" prop="matName" />
-      <el-table-column label="物料编码" align="center" prop="matCode" />
-      <el-table-column label="规格型号" align="center" prop="spec" />
-      <el-table-column label="单位" align="center" prop="unit" />
-      <el-table-column label="批次号" align="center" prop="lotNo" />
-      <el-table-column
-        label="创建时间"
-        align="center"
-        prop="createTime"
-        :formatter="dateFormatter"
-        width="180px"
-      />
-      <el-table-column label="备注" align="center" prop="description" />
-      <el-table-column label="库存数量" align="center" prop="yardQty" />
-      <el-table-column label="可用数量" align="center" prop="useQty" />
-      <el-table-column label="预占数量" align="center" prop="preQty" />
-      <el-table-column label="库存单价" align="center" prop="price" />
-      <el-table-column label="库存包数" align="center" prop="packQty" />
-      <el-table-column label="单袋规格" align="center" prop="bagSpec" />
-      <el-table-column label="最早入库日期" align="center" prop="earStoreDate" />
-      <el-table-column label="存货账单号" align="center" prop="inventBillNo" />
-      <el-table-column label="操作" align="center">
-        <template #default="scope">
-          <el-button
-            link
-            type="primary"
-            @click="openForm('update', scope.row.id)"
-            v-hasPermi="['twm:raw-storage-inventory:update']"
-          >
-            编辑
-          </el-button>
-          <el-button
-            link
-            type="danger"
-            @click="handleDelete(scope.row.id)"
-            v-hasPermi="['twm:raw-storage-inventory:delete']"
-          >
-            删除
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+    <div class="table-wrapper">
+      <el-table 
+        v-loading="loading" 
+        :data="list" 
+        :stripe="true" 
+        :show-overflow-tooltip="true"
+        
+         show-summary border 
+        :summary-method="getSummary"
+      >
+        <el-table-column label="序号" align="center" type="index" width="60px"  />
+        <el-table-column label="仓储" align="center" prop="storeHouseName" min-width="180px" />
+        <el-table-column label="库区" align="center" prop="storeAreaName" min-width="180px" />
+        <el-table-column label="原料名称" align="center" prop="matName" min-width="180px" />
+        <el-table-column label="规格型号" align="center" prop="spec" min-width="130px" />
+        <el-table-column label="批次号" align="center" prop="lotNo" min-width="140px" />
+        <el-table-column label="检验结果" align="center" prop="checkResult" min-width="100px" />
+        <el-table-column label="库存数量" align="center" prop="yardQty" min-width="100px" />
+        <el-table-column label="最早入库时间" align="center" prop="earStoreDate" :formatter="dateFormatter2" min-width="150px" />
+        <el-table-column label="单位" align="center" prop="unit" min-width="60px" :formatter="getUnitName" />
+        <el-table-column label="存货账单号" align="center" prop="inventBillNo" min-width="140px" />
+      </el-table>
+    </div>
     <!-- 分页 -->
     <Pagination
       :total="total"
@@ -286,16 +88,15 @@
       @pagination="getList"
     />
   </ContentWrap>
-
-  <!-- 表单弹窗：添加/修改 -->
-  <RawStorageInventoryForm ref="formRef" @success="getList" @close="handleQuery"/>
 </template>
 
 <script setup lang="ts">
-import { dateFormatter } from '@/utils/formatTime'
-import download from '@/utils/download'
+import { ref, reactive, onMounted } from 'vue'
+import { dateFormatter2 } from '@/utils/formatTime'
 import * as RawStorageInventoryApi from '@/api/biz/rawstorageinventory'
-import RawStorageInventoryForm from './RawStorageInventoryForm.vue'
+import * as StoreHouseApi from '@/api/biz/storehouse'
+import * as StoreAreaApi from '@/api/biz/storearea'
+import { getUnitName } from '@/utils/dict'
 
 defineOptions({ name: 'RawStorageInventory' })
 
@@ -305,34 +106,50 @@ const { t } = useI18n() // 国际化
 const loading = ref(false) // 列表的加载中（默认不加载）
 const list = ref([]) // 列表的数据
 const total = ref(0) // 列表的总页数
+
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
   storeHouseId: undefined,
   storeAreaId: undefined,
-  storeHouseCd: undefined,
-  storeHouseName: undefined,
-  storeAreCd: undefined,
-  storeAreaName: undefined,
-  materialId: undefined,
   matName: undefined,
-  matCode: undefined,
-  spec: undefined,
-  unit: undefined,
-  lotNo: undefined,
-  createTime: [],
-  description: undefined,
-  yardQty: undefined,
-  useQty: undefined,
-  preQty: undefined,
-  price: undefined,
-  packQty: undefined,
-  bagSpec: undefined,
-  earStoreDate: [],
-  inventBillNo: undefined,
 })
 const queryFormRef = ref() // 搜索的表单
-const exportLoading = ref(false) // 导出的加载中
+
+// 仓储列表
+const storeHouseList = ref([])
+// 库区列表
+const storeAreaList = ref([])
+
+/** 获取仓储列表 */
+const getStoreHouseList = async () => {
+  try {
+    const data = await StoreHouseApi.getStoreHouseSelect('1')
+    storeHouseList.value = data || []
+  } catch (error) {
+    console.error('获取仓储列表失败:', error)
+    storeHouseList.value = []
+  }
+}
+
+/** 获取库区列表 */
+const getStoreAreaList = async (storeHouseId?: number) => {
+  storeAreaList.value = []
+  if (!storeHouseId) return
+  try {
+    const data = await StoreAreaApi.getStoreAreaSelect(storeHouseId)
+    storeAreaList.value = data || []
+  } catch (error) {
+    console.error('获取库区列表失败:', error)
+    storeAreaList.value = []
+  }
+}
+
+/** 仓储变更时刷新库区列表 */
+const handleStoreHouseChange = (val) => {
+  queryParams.storeAreaId = undefined
+  getStoreAreaList(val)
+}
 
 /** 查询列表 */
 const getList = async () => {
@@ -355,45 +172,56 @@ const handleQuery = () => {
 /** 重置按钮操作 */
 const resetQuery = () => {
   queryFormRef.value.resetFields()
+  queryParams.storeAreaId = undefined
+  storeAreaList.value = []
   handleQuery()
 }
 
-/** 添加/修改操作 */
-const formRef = ref()
-const openForm = (type: string, id?: number) => {
-  formRef.value.open(type, id)
-}
-
-/** 删除按钮操作 */
-const handleDelete = async (id: number) => {
-  try {
-    // 删除的二次确认
-    await message.delConfirm()
-    // 发起删除
-    await RawStorageInventoryApi.deleteRawStorageInventory(id)
-    message.success(t('common.delSuccess'))
-    // 刷新列表
-    await getList()
-  } catch {}
-}
-
-/** 导出按钮操作 */
-const handleExport = async () => {
-  try {
-    // 导出的二次确认
-    await message.exportConfirm()
-    // 发起导出
-    exportLoading.value = true
-    const data = await RawStorageInventoryApi.exportRawStorageInventory(queryParams)
-    download.excel(data, '原料库存.xls')
-  } catch {
-  } finally {
-    exportLoading.value = false
-  }
+/** 子表汇总方法 */
+const getSummary = (param) => {
+  const { columns, data } = param
+  const sums: any[] = []
+  columns.forEach((column, index) => {
+    if (index === 0) {
+      sums[index] = '合计'
+    } else if (column.property === 'yardQty') {
+      const values = data.map(item => Number(item[column.property]) || 0)
+      sums[index] = values.reduce((prev, curr) => prev + curr, 0).toFixed(2)
+    } else {
+      sums[index] = ''
+    }
+  })
+  return sums
 }
 
 /** 初始化 **/
 onMounted(() => {
-  // 默认不自动查询，需手动点击搜索按钮
+  getStoreHouseList()
 })
 </script>
+
+<style scoped>
+.table-wrapper {
+  overflow-x: auto;
+  margin-bottom: -17px;
+  padding-bottom: 17px;
+}
+
+.table-wrapper::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.table-wrapper::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.table-wrapper::-webkit-scrollbar-thumb {
+  background: #ddd;
+  border-radius: 3px;
+}
+
+.table-wrapper::-webkit-scrollbar-thumb:hover {
+  background: #ccc;
+}
+</style>