前言

转眼间结束了寒假的第二个阶段，在这段时间里，我们经历了不少，去湖南出差，继续在实验室参与项目开发，这段时间收获良多，不仅仅是视野的拓宽，生活的体验，还有技术的提升。在这个阶段，我的主要工作是根据要求重新设计页面，查找并修复bug，以及制作看板。

出差

我们是在正月初九去湖南出差，一直以来，我们只在实验室进行项目的开发，还没有去到现场看设备以及一个制作流程，趁这个机会，我们来到了公司，对项目进行更加深入的了解。在这个阶段，我的主要工作是根据要求重新设计页面，查找并修复bug，以及制作看板。

由于之前沟通不充分以及业务逻辑的调整，部分模块需要重新配置。这凸显了企业与我们之间进行细致沟通的重要性。同时，我们也应认识到，在制作过程中，反复修改是不可避免的。我们必须保持耐心，因为有些设计理念可能会被多次推翻。但是要记住每一次的修改都是为了追求更优质的成果。

工作内容

页面的重新设计

综合库存查询页面

重新设计了综合库存查询页面，点进去是一个看板，点击搜索之后进入，可以按品类，商品名称，商品编号，仓库名称进行筛选。

树结构

在看板页面中，要将产品树和物料树结合在一块

定义了 expandedKeys1、checkedKeys1、selectedKeysList1 和 expandedKeys2、checkedKeys2、selectedKeysList2 来分别管理两棵树的状态分别管理两棵树的状态，通过 updateSelectedKeysList1、updateCheckedKeys1、updateSelectedKeysList2、updateCheckedKeys2 函数更新树的状态，并确保两棵树的状态互不干扰。

  // ================== 树1的状态 ==================
const expandedKeys1 = ref(['0']);
const checkedKeys1 = ref([]);
const selectedKeysList1 = ref([]);

// ================== 树2的状态 ==================
const expandedKeys2 = ref(['0']);
const checkedKeys2 = ref([]);
const selectedKeysList2 = ref([]);

// 更新树1的状态
const updateSelectedKeysList1 = (keys) => {
  console.log(keys);
  
  selectedKeysList1.value = keys;
  console.log('selectedKeysList1', selectedKeysList1.value);
  
  checkedKeys1.value = keys;
  materialStore.setGoodsCategoryIds(checkedKeys1.value);

  // 清空树2的状态
  selectedKeysList2.value = [];
  checkedKeys2.value = [];
};

const updateCheckedKeys1 = (keys) => {
  checkedKeys1.value = keys;
  materialStore.setGoodsCategoryIds(checkedKeys1.value);

  // 清空树2的状态
  selectedKeysList2.value = [];
  checkedKeys2.value = [];
};

// 更新树2的状态
const updateSelectedKeysList2 = (keys) => {
  console.log(keys);
  selectedKeysList2.value = keys;
  checkedKeys2.value = keys;
  materialStore.setGoodsCategoryIds(checkedKeys2.value);

  // 清空树1的状态
  selectedKeysList1.value = [];
  checkedKeys1.value = [];
};

const updateCheckedKeys2 = (keys) => {
  checkedKeys2.value = keys;
  materialStore.setGoodsCategoryIds(checkedKeys2.value);

  // 清空树1的状态
  selectedKeysList1.value = [];
  checkedKeys1.value = [];
};

树展开的时候会过长，导致树的内容溢出，这个时候设置启动虚拟滚动的高度，当内容超过这个高度，才会启动虚拟滚动

提示标志

当当前库存小于安全库存下限的时候，给物料编号前面添加一个提示图标，改变编号颜色和库存颜色进行提示

修复bug

数据显示问题

首先是数据问题，页面有一部分数据会显示不出来，此时可以先打开控制台，查看网络，点击页面的新增，输入数据之后进行保存，看负载，首先看负载的内容有没有传想要的数据，没有的话，是前端没把数据传给后端，有的话，再获取一下网页数据，看看是字段没对上还是数据没有回传，字段没对上就修改相对应的前端代码，数据回传的话就是后端问题。

弹窗表格内容溢出

当打开表格弹窗进行选择时，当一页展示的条数过多的时候，表格内容会溢出模拟框，这个时候给表格增加一个最大高度的约束并且加上虚拟滚动，就可以解决这个问题

条数显示问题

部分页面增删物料的时候，条数是错误的，这个时候需要看这个页面导致条数改变的操作，当这些操作被执行的时候，重新计算条数，并赋值给总条数

看板制作

按照要求的效果，选择合适的图标和图表等等，放到页面上，调试好合适的大小和颜色，给每个图层重新命名，在还没有接口的情况下写一些死数据，看看效果图，后续再接数据