dosb-vue/src/views/billet/operator/components/heatList.vue

<template>
  <div class="cc-heatList">
    <div class="tips-title flex">
      <div class="left-tip">当班浇铸炉次</div>
      <div class="flex-1">支数（根） / 重量（t）</div>
    </div>
    <!--引用表格-->
    <BasicTable @register="registerTable">
      <!--操作栏-->
      <template #action="{ record }">
        <TableAction class="flex flex-col" style="gap: 4px" :actions="getTableAction(record)" />
      </template>
      <!--字段回显插槽-->
      <!-- <template v-slot:bodyCell="{ column, record, index, text }"> </template> -->
    </BasicTable>
  </div>
</template>

<script lang="ts" name="billetLiftingBill" setup>
  import { BasicTable, TableAction, ActionItem } from '/@/components/Table';
  import { useListPage } from '/@/hooks/system/useListPage';
  import { columns } from '../operator.data';
  import { queryHeatsActualsByCcmNo, addHotCharge, stackingUpAdd } from '../operator.api';
  import { onMounted, onUnmounted } from 'vue';
  import { mapTableTotalSummary } from '/@/utils/common/compUtils';
  import { useTimeoutFn } from '/@/hooks/core/useTimeout';
  import { useMessage } from '/@/hooks/web/useMessage';

  const { createMessage } = useMessage();

  const props = defineProps({
    ccmNo: {
      type: String,
      default: '5',
    },
    carRef: {
      type: Object,
      default: () => {
        return {};
      },
    },
  });

  //注册table数据
  const { tableContext } = useListPage({
    tableProps: {
      api: queryHeatsActualsByCcmNo,
      beforeFetch: (params) => {
        return Object.assign(params, { ccmNo: props.ccmNo });
      },
      afterFetch: (data) => {
        const length = data.length;
        return data.map((item, index) => {
          return {
            ...item,
            columnIndex: length - index,
          };
        });
      },
      columns,
      showIndexColumn: false,
      canResize: true,
      striped: true,
      showTableSetting: false,
      pagination: false,
      actionColumn: {
        width: 60,
        title: '操作',
        fixed: 'right',
      },
      showActionColumn: true,
      showSummary: true,
      summaryFunc: onSummary,
    },
  });

  /**
   * 计算合计
   * @param tableData
   */
  function onSummary(tableData: Recordable[]) {
    // 可用工具方法自动计算合计
    const totals = mapTableTotalSummary(tableData, [
      'oneStrandNo',
      'twoStrandNo',
      'threeStrandNo',
      'fourStrandNo',
      'fiveStrandNo',
      'sixStrandNo',
      'sevenStrandNo',
      'eightStrandNo',
    ]);
    // 直轧，热装，堆垛，总计
    let directRollingTotalCount = 0,
      directRollingTotalWeight = 0,
      hotChargeTotalCount = 0,
      hotChargeTotalWeight = 0,
      stackingTotalCount = 0,
      stackingTotalWeight = 0,
      totalCount = 0,
      totalWeight = 0;
    try {
      tableData.forEach((item) => {
        const { hotSend, directRolling, hotCharge, stacking, totalInfo } = item;
        // 直轧
        if (hotSend) {
          const obj = JSON.parse(hotSend);
          directRollingTotalCount += Number(obj.hotSendTotalCount);
          directRollingTotalWeight += parseFloat(obj.hotSendTotalWeight);
        }
        if (directRolling) {
          const obj = JSON.parse(directRolling);
          directRollingTotalCount += Number(obj.directRollingTotalCount);
          directRollingTotalWeight += parseFloat(obj.directRollingTotalWeight);
        }

        // 热装
        if (hotCharge) {
          const obj = JSON.parse(hotCharge);
          hotChargeTotalCount += Number(obj.hotChargeTotalCount);
          hotChargeTotalWeight += parseFloat(obj.hotChargeTotalWeight);
        }

        // 堆垛
        if (stacking) {
          const obj = JSON.parse(stacking);
          stackingTotalCount += Number(obj.stackingTotalCount);
          stackingTotalWeight += parseFloat(obj.stackingTotalWeight);
        }

        // 总计
        if (totalInfo) {
          const obj = JSON.parse(totalInfo);
          totalCount += Number(obj.totalCount);
          totalWeight += parseFloat(obj.totalWeight);
        }
      });
    } catch (error) {}

    return [
      {
        ...totals,
        directRolling: JSON.stringify({ directRollingTotalCount, directRollingTotalWeight: directRollingTotalWeight }),
        hotCharge: JSON.stringify({ hotChargeTotalCount, hotChargeTotalWeight: hotChargeTotalWeight }),
        stacking: JSON.stringify({ stackingTotalCount, stackingTotalWeight: stackingTotalWeight }),
        totalInfo: JSON.stringify({ totalCount, totalWeight: totalWeight }),
        columnIndex: '合',
      },
    ];
  }

  const [registerTable, { reload, setLoading }] = tableContext;

  const { start, stop } = useTimeoutFn(() => {
    reload();
    start();
  }, 10000);

  onMounted(() => {
    start();
  });

  onUnmounted(() => {
    stop();
  });

  // 热装
  const hotCharge = async (record) => {
    try {
      const valiDesRes = props.carRef && props.carRef.valirDest ? props.carRef.valirDest() : true;
      if (!valiDesRes) {
        return;
      }

      const chargeInfo = props.carRef && props.carRef.getCurrentCar ? props.carRef.getCurrentCar() : {};
      if (!chargeInfo.id) {
        createMessage.error('获取车辆信息失败，请刷新页面重试~');
        return;
      }

      const params = {
        ccmNo: props.ccmNo,
        heatNo: record.heatNo,
        storageId: chargeInfo.id,
      };

      setLoading(true);
      await addHotCharge(params);
      stop();
      reload();
      props.carRef.refreshCarList && props.carRef.refreshCarList();
    } catch (error) {
    } finally {
      setLoading(false);
    }
  };

  // 起垛
  const doStack = async (record) => {
    try {
      const selectStackList = props.carRef && props.carRef.getSelectedStack ? props.carRef.getSelectedStack() : [];
      const emptyAddress = selectStackList.filter((item) => !item.billetNos);
      if (emptyAddress.length === 0) {
        createMessage.error('请选择起垛位置！');
        return;
      }

      // 堆垛信息
      const stackInfo = props.carRef && props.carRef.getStackInfo ? props.carRef.getStackInfo() : {};
      if (!stackInfo.id) {
        createMessage.error('获取堆垛信息失败，请刷新页面重试~');
        return;
      }

      let layerObj = {},
        sortedStackList: any[] = [];
      emptyAddress.forEach((item) => {
        if (!layerObj[item.layer]) layerObj[item.layer] = [];
        layerObj[item.layer].push(item);
      });

      // 根据层数和位置排序
      Object.keys(layerObj)
        .sort((a, b) => Number(a) - Number(b))
        .forEach((item) => {
          layerObj[item].sort((j, k) => Number(j.address) - Number(k.address)).forEach((item) => sortedStackList.push(item));
        });

      const params = {
        ccmNo: props.ccmNo,
        heatNo: record.heatNo,
        billetHotsendTypeConfigId: stackInfo.id,
        stackingAndLoadingVehiclesIds: sortedStackList.map((item) => item.id),
      };

      setLoading(true);
      await stackingUpAdd(params);
      stop();
      reload();
      props.carRef.refreshCarList && props.carRef.refreshCarList();
    } catch (error) {
    } finally {
      setLoading(false);
    }
  };

  /**
   * 操作栏
   */
  function getTableAction(record): ActionItem[] | undefined {
    if (!record.operateStatus) return undefined;

    const chargeInfo = props.carRef && props.carRef.getCurrentCar ? props.carRef.getCurrentCar() : {};
    return [
      {
        label: '热装',
        color: 'error',
        disabled: !chargeInfo.id || !!chargeInfo.outTime,
        type: 'primary',
        onClick: () => {
          hotCharge(record);
        },
      },
      {
        label: '起垛',
        color: 'warning',
        type: 'primary',
        onClick: () => {
          doStack(record);
        },
      },
    ];
  }
</script>

<style scoped lang="less">
  .cc-heatList {
    .tips-title {
      color: #fff;
      font-size: 18px;
      text-align: center;
      border: 1px solid #fff;
      margin-bottom: 4px;

      .left-tip {
        width: 227px;
        border-right: 1px solid #fff;
      }
    }

    .jeecg-basic-table {
      padding: 0;
    }

    :deep(.ant-table) {
      .ant-table-thead > tr > th {
        font-size: 16px;
        font-weight: 800;
        color: #fff;
      }

      .ant-table-thead > tr > th:nth-child(4),
      .ant-table-thead > tr > th:nth-child(5),
      .ant-table-thead > tr > th:nth-child(6),
      .ant-table-thead > tr > th:nth-child(7),
      .ant-table-thead > tr > th:nth-child(8),
      .ant-table-thead > tr > th:nth-child(9),
      .ant-table-thead > tr > th:nth-child(10),
      .ant-table-thead > tr > th:nth-child(11) {
        color: #f50;
        padding: 0;
      }

      .ant-table-tbody {
        font-size: 15px;
        font-family: 'Kingsoft_Cloud_Font';

        & > tr > td:nth-child(6),
        & > tr > td:nth-child(7),
        & > tr > td:nth-child(8),
        & > tr > td:nth-child(9),
        & > tr > td:nth-child(10),
        & > tr > td:nth-child(11) {
          padding: 0 8px;
          position: relative;
        }
      }

      .ant-table-footer {
        padding: 0;
      }
    }
  }
</style>