Общие коды Vue и Java

1. Группировка Java, добавьте идентификатор коллекции для получения данных.

//收集查询的ID
List<String> materialIds = receiveGoodsOrder.getReceiveGoodsOrderDetailList().stream()
                .map(ReceiveGoodsOrderDetail::getGoodsId)
				.filter(o -> o != null)
				.distinct()
				.collect(Collectors.toList());

//mybatis根据ID集合查询
<select id="findByIds" resultType="Material">
		SELECT
		<include refid="materialColumns"/>
		FROM ship_material a
		<include refid="materialJoins"/>
		<where>
			a.del_flag = '0' and a.id in
			<foreach collection="materialIds" close=")" open="(" separator="," item="id">
				#{id}
			</foreach>
		</where>
	</select>

//查询后转换成map,得到每个物料对应的类
Map<String, Material> materialMap = materialService.findByIds(materialIds).stream()
				.collect(Collectors.toMap(Material::getId, v -> v, (v1, v2) -> v2));

//根据仓库ID分组，无序
Map<String, List<ReceiveGoodsOrderDetail>> listMap =			receiveGoodsOrder.getReceiveGoodsOrderDetailList().stream().collect(Collectors.groupingBy(t -> t.getStorageId()));
 //根据仓库 拆单
for(Map.Entry<String, List<ReceiveGoodsOrderDetail>> entry : listMap.entrySet()){
	String storageId = entry.getKey();
    for (ReceiveGoodsOrderDetail receiveGoodsOrderDetail : entry.getValue()) {

    }
}

//有序分组
LinkedHashMap<String,List<MachineTypeDetail>> prodMap = detailList.stream()      .collect(Collectors.groupingBy(MachineTypeDetail::getProdStage,LinkedHashMap::new,Collectors.toList()));

2. Css динамически устанавливает ширину цвета фона.

Стиль красной рамки на картинке ниже

 BackgroundSize — это соотношение, возвращаемое серверной частью.

  <div class="intPutRow" >
                  <div class="intPutClass put "  :style="{backgroundSize: (orderInfo.lcd_put_ratio || 0)+'% auto' }"> 
                    <div> 实际投入</div>
                    <div class="big-screen-foot"> {
   
   {orderInfo.lcm_put_num}}</div>
                  </div> 
                </div>

.intPutClass.put{
    border: 1px solid #f2c63e;
    background: linear-gradient(to left , #f2c63e , #f2c63e)  left top no-repeat ;
  }

3.Вуэ

1. Запланированные задания, создание и уничтожение

  created() {
    //轮询刷新页面数据，5秒轮询
    let _this = this
    _this.timer = setInterval(
    function() {
      LcdEvent.initOrderInfo()
    }, 5000 )
  },
  
  beforeDestroy() {
    //销毁
    clearInterval(this.timer)
    this.timer = null
  },

2. Фокус и выбор страницы по умолчанию

created() {
    //orderNo为，input的ref
    this.$nextTick(() => {
      this.$refs['orderNo'].$refs.input.focus()
    })
  },

 document.getElementById('orderNo').select()