对于页面展示内容进行按照规格型号进行排序，同时修改类别下拉框大小

inventory-web/src/views/material/list.vue

@@ -30,8 +30,9 @@
               filterable
               allow-create
               default-first-option
-              style="width: 140px; margin-right: 10px;"
+              style="width: 240px; margin-right: 10px;"
               @change="handleQuery"
+              popper-class="long-dropdown"
           >
             <el-option v-for="item in categoryOptions" :key="item" :label="item" :value="item" />
           </el-select>
@@ -45,6 +46,7 @@
               default-first-option
               style="width: 140px; margin-right: 10px;"
               @change="handleQuery"
+              popper-class="long-dropdown"
           >
             <el-option v-for="item in typeOptions" :key="item" :label="item" :value="item" />
           </el-select>
@@ -479,7 +481,8 @@ const cameraRef = ref<InstanceType<typeof WebRtcCamera> | null>(null);
 const currentCameraField = ref<'generalImage' | 'generalManual'>('generalImage');
 
 const columns = reactive({
-  id: { visible: true },
+  // [修改] 默认隐藏 ID
+  id: { visible: false },
   companyName: { visible: true },
   name: { visible: true },
   commonName: { visible: true },
@@ -498,9 +501,8 @@ const categoryOptions = ref<string[]>([]);
 const typeOptions = ref<string[]>([]);
 const categoryTreeOptions = ref<CascaderOption[]>([]);
 
-// [修改] 将类别拆分为前后两部分进行绑定
-const tempCategoryPrefix = ref<string[]>([]); // 前缀部分 (Cascader)
-const tempCategorySuffix = ref<string>('');   // 后缀部分 (Input)
+const tempCategoryPrefix = ref<string[]>([]);
+const tempCategorySuffix = ref<string>('');
 
 const queryParams = reactive<QueryParams>({
   pageNum: 1,
@@ -537,26 +539,20 @@ const initForm = {
 
 const form = ref({...initForm});
 
-// [新增] 自定义验证规则：确保拼合后的类别符合4层结构
 const validateCategoryLevel = (rule: any, value: any, callback: any) => {
-  // 实时计算拼合结果
   const prefixStr = tempCategoryPrefix.value.join('/');
   const suffixStr = tempCategorySuffix.value.trim();
 
-  // 如果两边都为空，报错
   if (!prefixStr && !suffixStr) {
     callback(new Error('请填写或选择类别'));
     return;
   }
 
-  // 拼合路径
   let fullPath = '';
   if (prefixStr && suffixStr) fullPath = prefixStr + '/' + suffixStr;
   else if (prefixStr) fullPath = prefixStr;
   else fullPath = suffixStr;
 
-  // 检查层级数量 (以 / 分割后的数组长度)
-  // 4层结构意味着有3个斜杠，例如 A/B/C/D => length 4
   const levels = fullPath.split('/').filter(p => p.trim() !== '').length;
 
   if (levels !== 4) {
@@ -569,7 +565,6 @@ const validateCategoryLevel = (rule: any, value: any, callback: any) => {
 const rules = reactive<FormRules>({
   name: [{ required: true, message: '请输入基础信息名称', trigger: 'blur' }],
   companyName: [{ required: true, message: '请输入公司名称', trigger: 'change' }],
-  // [修改] 使用自定义验证器
   category: [{ required: true, validator: validateCategoryLevel, trigger: 'change' }],
   type: [{ required: true, message: '请选择或输入类型', trigger: 'change' }],
   spec: [{ required: true, message: '请输入规格型号', trigger: 'blur' }],
@@ -678,14 +673,12 @@ const handleSizeChange = (command: 'large' | 'default' | 'small') => {
   tableSize.value = command;
 };
 
-// 新增：分页大小改变处理
 const handlePageSizeChange = (val: number) => {
   queryParams.pageSize = val;
-  queryParams.pageNum = 1; // 切换大小时重置到第一页
+  queryParams.pageNum = 1;
   getList();
 };
 
-// 新增：当前页码改变处理
 const handlePageCurrentChange = (val: number) => {
   queryParams.pageNum = val;
   getList();
@@ -706,11 +699,9 @@ const handleEdit = (row: MaterialBaseVO) => {
     const data = JSON.parse(JSON.stringify(row));
     Object.assign(form.value, data);
 
-    // [修改] 解析已有 category，拆分为 Prefix 和 Suffix
     if (data.category) {
       const parts = data.category.split('/');
       if (parts.length > 0) {
-        // 取最后一部分作为 Suffix，其余作为 Prefix
         tempCategorySuffix.value = parts.pop() || '';
         tempCategoryPrefix.value = parts;
       } else {
@@ -722,7 +713,6 @@ const handleEdit = (row: MaterialBaseVO) => {
       tempCategorySuffix.value = '';
     }
 
-    // 初始化文件列表
     const images = row.generalImage || [];
     const manuals = row.generalManual || [];
 
@@ -776,7 +766,6 @@ const submitForm = async () => {
         const finalManualList = form.value.generalManual.filter(item => !isExternalLink(item));
         if (manualExternalUrl.value) finalManualList.push(manualExternalUrl.value);
 
-        // [修改] 提交前组合字符串：Prefix + / + Suffix
         const prefixStr = tempCategoryPrefix.value.join('/');
         const suffixStr = tempCategorySuffix.value.trim();
         let fullCategory = '';
@@ -817,7 +806,6 @@ const resetForm = () => {
   fileListImage.value = [];
   fileListManual.value = [];
 
-  // [修改] 重置前后缀
   tempCategoryPrefix.value = [];
   tempCategorySuffix.value = '';
 
@@ -982,14 +970,12 @@ onMounted(() => {
   flex-direction: column;
 }
 
-/* 新增：分页样式 */
 .pagination-container {
   margin-top: 15px;
   display: flex;
   justify-content: flex-start;
 }
 
-/* 上传相关样式 */
 .upload-container { display: flex; flex-wrap: wrap; gap: 8px; }
 :deep(.el-upload--picture-card) { width: 100px; height: 100px; line-height: 100px; }
 :deep(.el-upload-list--picture-card .el-upload-list__item) { width: 100px; height: 100px; }
@@ -998,7 +984,14 @@ onMounted(() => {
 .camera-card .text { font-size: 12px; margin-top: 5px; }
 .camera-card .el-icon { font-size: 24px; }
 
-/* 表格缩略图样式 */
 .file-preview-cell { display: flex; align-items: center; justify-content: center; position: relative; }
 .more-badge { position: absolute; top: -5px; right: -5px; background: #909399; color: #fff; border-radius: 10px; padding: 0 4px; font-size: 10px; transform: scale(0.9); }
+
+</style>
+
+<style>
+/* 增加下拉框的最大高度，使其能容纳更多选项而不必频繁滚动 */
+.long-dropdown .el-select-dropdown__wrap {
+  max-height: 600px !important; /* 可以根据屏幕大小适当调整 */
+}
 </style>