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

<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    destroyOnClose
    title="推钢室生产原始记录"
    :width="1400"
    :height="930"
    ok-text="打印"
    @ok="onPrint"
  >
    <section
      ref="print"
      style="padding: 10px; position: relative; border: 1px solid #c5c5c5; background: #fff; width: 100%; min-height: 100%"
      id="printBilletSampleCard"
      :key="printKey"
    >
      <div class="ticket next-ticket">
        <div style="text-align: center; position: relative">
          <div class="noprint" style="position: absolute; z-index: 100">
            <a-button v-if="(isConfirmOrgData || !isEditAbled) && showAddHeatNo" type="primary" style="margin-right: 10px" @click="addHeatNo"
              >添加炉号</a-button
            >
            <a-button
              v-if="isConfirmOrgData"
              type="primary"
              @click="
                () => {
                  closeModal();
                  openModal(true, {
                    ccmNo: hostNumber,
                    queryType: '2',
                    shiftText: shiftInfoTxt.join('-'),
                    curShiftInfo: shiftInfo,
                    changeShiftId: fetchChangeShiftId,
                  });
                }
              "
              >送样卡</a-button
            >
          </div>
          <p style="font-size: 24px; font-weight: 800; display: inline-block; margin-bottom: 16px; line-height: 30px">
            <span class="ccmno">{{ hostNumber }}</span> #机推钢室生产原始记录
          </p>
        </div>
        <div class="flex ccmno-info" style="line-height: 24px">
          <div class="flex-1"> 班组：<component :is="renderDictTag(shiftInfo.shiftGroup, 'lg_bz')" /> </div>
          <div class="flex-1"> 班次：<component :is="renderDictTag(shiftInfo.shift, 'lg_bb')" /> </div>
          <div class="flex-1 flex"
            ><span> 定尺：</span><a-input v-model:value="mainSize" @blur="handleSizeBlur" style="flex: 1" :bordered="false" size="small" />
          </div>
          <div class="flex-1" style="text-align: center; font-size: 13px">
            {{ dayjs(curTime).format('YYYY 年 MM 月 DD 日') }}
          </div>
          <div class="flex-1" style="text-align: right; font-size: 12px"> lg/R05 </div>
        </div>
        <a-table :columns="columns" size="small" :data-source="dataSource" bordered :pagination="false">
          <template #summary>
            <a-table-summary-row>
              <a-table-summary-cell :col-span="remakeColSpan" style="text-align: center">备注</a-table-summary-cell>
              <a-table-summary-cell :col-span="sizeColSpan" style="text-align: center"> 定尺 </a-table-summary-cell>
              <a-table-summary-cell :col-span="flowColSpan" style="text-align: center"> 支数（支） </a-table-summary-cell>
              <a-table-summary-cell :col-span="weightColSpan" style="text-align: center"> 产量（吨） </a-table-summary-cell>
            </a-table-summary-row>
            <a-table-summary-row class="summary-row-no-border">
              <a-table-summary-cell :row-span="2" :col-span="remakeColSpan">
                <div class="summary-cell-remark">
                  <a-textarea v-model:value="mainRemark" @blur="handleRemarkBlur" style="min-height: 160px" :bordered="false" />
                </div>
              </a-table-summary-cell>
              <a-table-summary-cell :row-span="1" :col-span="1"> 热送 </a-table-summary-cell>
              <a-table-summary-cell :row-span="1" :col-span="sizeColSpan - 1">
                <div class="song-items flex" v-for="(item, index) in hotSendList" :key="index">
                  <div class="title">{{ index }}</div>
                  <div class="flex flex-col">
                    <div class="song-item" v-for="ele in item">{{ ele.size }}</div>
                  </div>
                </div>
              </a-table-summary-cell>
              <a-table-summary-cell :col-span="flowColSpan">
                <div class="song-items flex" v-for="(item, index) in hotSendList" :key="index">
                  <div class="flex flex-col">
                    <div class="song-item" v-for="ele in item">{{ ele.amount }}</div>
                  </div>
                </div>
              </a-table-summary-cell>
              <a-table-summary-cell :col-span="weightColSpan">
                <div class="song-items flex" v-for="(item, index) in hotSendList" :key="index">
                  <div class="flex flex-col">
                    <div class="song-item" v-for="ele in item">{{ ele.weight ? ele.weight.toFixed(3) : '' }} t</div>
                  </div>
                </div>
              </a-table-summary-cell>
            </a-table-summary-row>
            <a-table-summary-row>
              <!-- <a-table-summary-cell :col-span="remakeColSpan">
                <div class="summary-cell-remark"></div>
              </a-table-summary-cell> -->
              <a-table-summary-cell :row-span="1" :col-span="1"> 堆垛 </a-table-summary-cell>
              <a-table-summary-cell :row-span="1" :col-span="sizeColSpan - 1">
                <div class="song-items flex">
                  <div class="flex flex-col">
                    <div class="song-item" v-for="ele in stackingList">{{ ele.size }}</div>
                  </div>
                </div>
                <div class="song-items flex" v-for="(item, index) in coldSendList" :key="index">
                  <div class="title" style="margin-right: 10px; color: #108ee9">{{ index }}</div>
                  <div class="flex flex-col">
                    <div class="song-item" v-for="ele in item">{{ ele.size }}</div>
                  </div>
                </div>
              </a-table-summary-cell>
              <a-table-summary-cell :col-span="flowColSpan">
                <div class="song-items flex">
                  <div class="flex flex-col">
                    <div class="song-item" v-for="ele in stackingList">{{ ele.amount }}</div>
                  </div>
                </div>
                <div class="song-items flex" v-for="(item, index) in coldSendList" :key="index">
                  <div class="flex flex-col">
                    <div class="song-item" v-for="ele in item">{{ ele.amount }}</div>
                  </div>
                </div>
              </a-table-summary-cell>
              <a-table-summary-cell :col-span="weightColSpan">
                <div class="song-items flex">
                  <div class="flex flex-col">
                    <div class="song-item" v-for="ele in stackingList">{{ ele.weight ? ele.weight.toFixed(3) : '' }} t</div>
                  </div>
                </div>
                <div class="song-items flex" v-for="(item, index) in coldSendList" :key="index">
                  <div class="flex flex-col">
                    <div class="song-item" v-for="ele in item">{{ ele.weight ? ele.weight.toFixed(3) : '' }} t</div>
                  </div>
                </div>
              </a-table-summary-cell>
            </a-table-summary-row>
          </template>
        </a-table>
      </div>

      <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%" v-if="isConfirmOrgData && isEditAbled"> </div>
    </section>

    <template #appendFooter>
      <a-button @click="openJSModal = true" v-if="!isConfirmOrgData"> 重量计算 </a-button>
      <a-button type="primary" v-if="isConfirmOrgData && !isEditAbled" @click="handlerConfirmOrgData"> 确认无误 </a-button>
    </template>
  </BasicModal>
  <a-modal
    v-model:open="openJSModal"
    title="重量计算"
    centered
    width="600px"
    :zIndex="9999"
    @ok="
      () => {
        openJSModal = false;
      }
    "
    @cancel="
      () => {
        openJSModal = false;
      }
    "
  >
    <div class="flex justify-center items-center" style="margin: 20px; line-height: 40px">
      <a-input-group size="large">
        <a-row :gutter="8">
          <a-col :span="5">
            <a-input type="number" :min="1" v-model:value="weightNum" placeholder="支数" />
          </a-col>
          <a-col :span="1" style="line-height: 40px; text-align: center">*</a-col>
          <a-col :span="5">
            <a-input type="number" v-model:value="sizeNum" placeholder="定尺" />
          </a-col>
          <a-col :span="1" style="line-height: 40px; text-align: center">*</a-col>
          <a-col :span="5">
            <a-input type="number" v-model:value="xiShu" placeholder="请输入比例" />
          </a-col>
          <a-col :span="1" style="line-height: 40px; text-align: center">=</a-col>

          <a-col :span="6" style="line-height: 40px; text-align: center">{{ weightCalc }}</a-col>
        </a-row>
      </a-input-group>
    </div>
  </a-modal>
  <!-- 设置定尺数量的modal -->
  <a-modal v-model:open="openSetSizeNumModal" title="设置定尺数量" centered width="500px" :zIndex="1100" @ok="confirmSetSizeNum">
    <div style="padding: 60px 30px 30px; font-size: 16px" v-if="editSizeNumRecord && editSizeNumRecord.hotChargeLengthArr">
      <div style="margin-bottom: 30px" v-for="(item, index) in editSizeNumRecord.hotChargeLengthArr" :key="index">
        <a-input-number
          size="large"
          v-model:value="item.totalCount"
          :min="0"
          :step="4"
          @change="
            (value) => {
              if (!value) {
                item.totalCount = 0;
              }
              // if (value % 4 !== 0) {
              //   item.totalCount = value - (value % 4);
              // }
            }
          "
          :controls="false"
        >
          <template #addonBefore>
            <div :style="{ color: item.hotChargeBtype === '0' ? '#f50' : '#108ee9' }">
              {{
                headText[item.hotChargeDestination] +
                ' ' +
                Number(item.hotChargeLength) / 1000 +
                'm ' +
                ' ' +
                (item.hotChargeBtype === '0' ? '热' : '冷')
              }}
            </div>
          </template>
        </a-input-number>
      </div>
      <div style="font-size: 16px; color: #f50">注：请输入大于等于0的数.</div>
    </div>
  </a-modal>

  <!-- 新增炉号 -->
  <a-modal v-model:open="openNewHeatNo" title="新增炉次" centered width="500px" :zIndex="1000" @ok="confirmAddHeatNo">
    <div style="padding: 30px; font-size: 16px">
      <div class="flex" style="margin-bottom: 30px">
        <span style="color: #f50; padding: 0 20px 0 0"> 添加</span>
        <a-select class="flex-1" v-model:value="nextHeatNo" allowClear :options="getAddHeatNo" />
        <span style="color: #f50; padding: 0 0 0 20px"> 之前</span>
      </div>

      <a-input size="large" v-model:value="newHeatNo"></a-input>
    </div>
  </a-modal>

  <!-- 打印钢坯送样卡 -->
  <print-billet-sample-card @register="registerPrintModal" />
</template>
<script lang="ts" setup>
  import { ref, computed, h } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import dayjs from 'dayjs';
  import { printJS } from '/@/hooks/web/usePrintJS';
  import type { TableColumnsType } from 'ant-design-vue';
  import { queryBilletRecordByCcmNo, editBilletRecord, addBilletNo, editOriginalProductRecord, deleteBilletRecord } from '../operator.api';
  import { render } from '/@/utils/common/renderUtils';
  import { isArray, isNumber } from '/@/utils/is';
  import Icon from '/@/components/Icon';
  import { Input, Select } from 'ant-design-vue';
  import { throttle } from 'lodash-es';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { initDictOptions } from '/@/utils/dict';
  import printBilletSampleCard from './printBilletSampleCard.vue';
  import { useModal } from '/@/components/Modal';
  import { getMachineConfig, MachineConfigType } from '../../hotDelivery/common.data';
  import { steelPlateFormula } from '../operator.data';
  import JSearchSelect from '/@/components/Form/src/jeecg/components/JSearchSelect.vue';

  // 注册打印送样卡modal
  const [registerPrintModal, { openModal }] = useModal();

  const { createMessage, createConfirm } = useMessage();
  const printKey = ref(dayjs().unix());
  const isEditAbled = ref(false); // 是否可编辑
  // 渲染字典标签
  const renderDictTag = (value: string, dictCode: string) => {
    return render.renderDict(value, dictCode);
  };
  // 主机号
  const hostNumber = ref('5');
  const defaultColumns: TableColumnsType = [
    {
      title: '序号',
      width: 40,
      dataIndex: 'SerialNumber',
      align: 'center',
      key: 'SerialNumber',
      customRender: ({ text, record }) => {
        if (!record.heatNo) return text;
        const { orgData } = record;
        return h(
          'div',
          {
            style: { position: 'relative' },
          },
          [
            h('span', {}, text),
            h(
              'div',
              {
                class: 'noprint delete-heat',
                onClick: () => {
                  console.log('record', orgData);
                  createConfirm({
                    iconType: 'warning',
                    title: '删除确认',
                    content: `确定删除【${record.heatNo}】吗？删除后无法恢复！`,
                    onOk: () => {
                      return deleteBilletRecord({
                        id: orgData.id,
                      }).then(() => {
                        getHeatList({
                          ccmNo: hostNumber.value,
                          queryType: fetchQueryType.value,
                          changeShiftId: fetchChangeShiftId.value,
                        });
                      });
                    },
                  });
                },
              },
              h(Icon, { icon: 'ant-design:delete-filled', size: '20' }, '')
            ),
          ]
        );
      },
    },
    {
      title: '炉号',
      dataIndex: 'heatNo',
      width: 100,
      align: 'center',
      key: 'heatNo',
      customRender: ({ text, record }) => {
        if (!record.heatNo) return '';
        const { orgData } = record;
        return h(Input, {
          key: orgData.heatNo + record.keyDate,
          size: 'small',
          bordered: false,
          value: text,
          onBlur: throttle(
            (e) => {
              const v = e.target.value.trim();
              if (!v || orgData.heatNo === v) return;
              createConfirm({
                iconType: 'warning',
                title: '交班确认',
                content: `确定修改【${record.heatNo}】吗？`,
                onOk: () => {
                  return editBilletRecord({
                    ...orgData,
                    heatNo: v,
                  }).then(() => {
                    getHeatList({
                      ccmNo: hostNumber.value,
                      queryType: fetchQueryType.value,
                      changeShiftId: fetchChangeShiftId.value,
                    });
                  });
                },
                onCancel: () => {
                  getHeatList({
                    ccmNo: hostNumber.value,
                    queryType: fetchQueryType.value,
                    changeShiftId: fetchChangeShiftId.value,
                  });
                },
              });
            },
            500,
            {
              leading: true,
              trailing: false,
            }
          ),
        });
      },
    },
    {
      title: '钢种',
      width: 100,
      align: 'center',
      dataIndex: 'brandNum',
      key: 'brandNum',
      customRender: ({ text, record }) => {
        if (!record.heatNo) return '';
        const { orgData } = record;
        return h(
          JSearchSelect,
          {
            key: orgData.heatNo + record.keyDate,
            type: 'list',
            bordered: false,
            size: 'small',
            value: text,
            dict: 'billet_spec',
            onChange: (v) => {
              createConfirm({
                iconType: 'warning',
                title: '交班确认',
                content: `确定修改【${record.heatNo}】的牌号吗？`,
                onOk: () => {
                  return editBilletRecord({
                    ...orgData,
                    grade: v,
                  }).then(() => {
                    getHeatList({
                      ccmNo: hostNumber.value,
                      queryType: fetchQueryType.value,
                      changeShiftId: fetchChangeShiftId.value,
                    });
                  });
                },
                onCancel: () => {
                  getHeatList({
                    ccmNo: hostNumber.value,
                    queryType: fetchQueryType.value,
                    changeShiftId: fetchChangeShiftId.value,
                  });
                },
              });
            },
            placeholder: '请选择',
          },
          ''
        );
      },
    },
    // {
    //   title: '支数（根）',
    //   align: 'center',
    //   width: 570,
    //   children: [
    //     {
    //       title: 'I',
    //       dataIndex: 'oneFlow',
    //       key: 'oneFlow',
    //       align: 'center',
    //       width: 40,
    //     },
    //     {
    //       title: 'II',
    //       dataIndex: 'twoFlow',
    //       key: 'twoFlow',
    //       align: 'center',
    //       width: 40,
    //     },
    //     {
    //       title: 'III',
    //       dataIndex: 'threeFlow',
    //       key: 'threeFlow',
    //       align: 'center',
    //       width: 40,
    //     },
    //     {
    //       title: 'IV',
    //       dataIndex: 'fourFlow',
    //       key: 'fourFlow',
    //       align: 'center',
    //       width: 40,
    //     },
    //     {
    //       title: 'V',
    //       dataIndex: 'fiveFlow',
    //       key: 'fiveFlow',
    //       align: 'center',
    //       width: 40,
    //     },
    //     {
    //       title: 'VI',
    //       dataIndex: 'sixFlow',
    //       key: 'sixFlow',
    //       align: 'center',
    //       width: 40,
    //     },
    //     {
    //       title: 'VII',
    //       dataIndex: 'sevenFlow',
    //       key: 'sevenFlow',
    //       align: 'center',
    //       width: 40,
    //     },
    //     {
    //       title: 'VIII',
    //       dataIndex: 'eightFlow',
    //       key: 'eightFlow',
    //       align: 'center',
    //       width: 40,
    //     },
    //     {
    //       title: '合计',
    //       dataIndex: 'total',
    //       key: 'total',
    //       align: 'center',
    //       width: 40,
    //       customRender({ text, record }) {
    //         if (!record.heatNo) {
    //           return '';
    //         }
    //         const allCount = handleTotalSum(record.orgData);
    //         return h(
    //           Input,
    //           { class: 'total-input', size: 'small', bordered: false, value: allCount, onBlur: (e) => handleTotalChange(e, record) },
    //           ''
    //         );
    //       },
    //     },
    //   ],
    // },
    {
      title: () => {
        return h('div', { style: { position: 'relative' } }, [
          h('span', {}, hostNumber.value == '5' ? '棒一' : '高线'),
          h(
            'div',
            {
              style: {
                cursor: 'pointer',
                position: 'absolute',
                right: '4px',
                top: '1px',
              },
              class: 'noprint',
              onClick: () => {
                const rollOnrColumn: any = columns.value.find((item: any) => item.dataIndex === 'rollOne');
                let newSize: string | number = '';
                rollOnrColumn.children.push({
                  title: () => {
                    return h(
                      // Select,
                      Input,
                      {
                        // options: sizeListOPtions.value,
                        bordered: false,
                        // dropdownStyle: {
                        //   minWidth: '80px',
                        // },
                        defaultValue: '',
                        style: {
                          padding: 0,
                          textAlign: 'center',
                        },
                        // onChange: (value) => {
                        //   newSize = value;
                        // },
                        onBlur: throttle((e) => {
                          if (e.target.value.trim() === '') {
                            createMessage.error('请输入定尺');
                            return;
                          }
                          const size = Number(e.target.value.trim());
                          if (!isNumber(size)) {
                            createMessage.error('请输入数字');
                            return;
                          }

                          newSize = size <= 20 ? size * 1000 : size;
                        }, 500),
                      },
                      ''
                    );
                  },
                  dataIndex: 'newSize',
                  key: 'newSize',
                  align: 'center',
                  // width: 100,
                  customRender({ text, record }) {
                    if (!record.heatNo) {
                      return '';
                    }
                    return h(
                      Input,
                      { class: 'total-input', size: 'small', bordered: false, value: text, onBlur: (e) => handleSizeChange(e, record, newSize) },
                      ''
                    );
                  },
                });
              },
            },
            h(Icon, { icon: 'ant-design:plus-square-outlined' }, '')
          ),
        ]);
      },
      // width: 100,
      align: 'center',
      dataIndex: 'rollOne',
      key: 'rollOne',
      children: [],
    },
  ];

  const totalColum: TableColumnsType = [
    {
      title: '合计',
      dataIndex: 'total',
      key: 'total',
      align: 'center',
      // width: 100,
      customRender({ text, record }) {
        if (!record.heatNo) {
          return '';
        }
        const allCount = handleTotalSum(record.orgData);
        return h(Input, { class: 'total-input', size: 'small', bordered: false, value: allCount, onBlur: (e) => handleTotalChange(e, record) }, '');
      },
    },
  ];

  const columns = ref<TableColumnsType>(defaultColumns);
  const dataSource = ref<any[]>([]);
  const shiftInfoTxt = ref(['', '']);
  const shiftInfo = ref({ shift: '', shiftGroup: '' });
  const curTime = ref(dayjs().format('YYYY-MM-DD'));
  // 确认上一个班次的原始数据
  const isConfirmOrgData = ref(false);
  //表单赋值
  const fetchQueryType = ref(1);
  const fetchChangeShiftId = ref('');
  // 定尺
  const sizeListOPtions = ref([]);

  // 堆垛
  const stackList = ref<any[]>([]);
  // 获取堆垛信息
  const getStackInfo = async (ccmNo) => {
    const machineConfig = await getMachineConfig(ccmNo)[MachineConfigType.STACKING];
    stackList.value = machineConfig;
  };

  const getTotalRows = (num = 22) => {
    let newSip: any[] = [];
    for (let index = 0; index < num; index++) {
      newSip.push({
        SerialNumber: index + 1,
        heatNo: '',
        brandNum: '',
        oneFlow: '',
        twoFlow: '',
        threeFlow: '',
        fourFlow: '',
        fiveFlow: '',
        sixFlow: '',
        sevenFlow: '',
        eightFlow: '',
        total: '',
      });
    }

    return newSip;
  };

  const showAddHeatNo = ref(true);
  const [registerModal, { changeOkLoading, changeLoading, closeModal }] = useModalInner(async (data) => {
    const { ccmNo, shiftText, queryType, curShiftInfo, changeShiftId, time, confirmOrgData, isShowAddHeatNo } = data;
    printKey.value = dayjs().unix();
    // isShowAddHeatNo 是否显示添加炉号按钮 质检页面使用
    showAddHeatNo.value = isShowAddHeatNo !== false;

    // 获取堆垛信息
    getStackInfo(ccmNo);

    hostNumber.value = ccmNo;
    fetchQueryType.value = queryType;
    fetchChangeShiftId.value = changeShiftId;
    shiftInfoTxt.value = shiftText.split('-');
    shiftInfo.value = curShiftInfo;
    isConfirmOrgData.value = confirmOrgData === true;
    if (time) {
      curTime.value = time;
    }

    dataSource.value = getTotalRows();
    getHeatList({
      ccmNo,
      queryType,
      changeShiftId,
    });

    // 获取定尺啊
    initDictOptions('lg_dcgg').then((dc) => {
      sizeListOPtions.value = (dc || []).map((item) => {
        return {
          label: Number(item.value) / 1000,
          value: item.value,
        };
      });
    });
  });

  // 字段映射
  const headText = {
    rollClubTwoCount: '二',
    rollClubThreeCount: '三',
    rollClubShippCount: '上',
    roll_club_two: '棒二',
    roll_club_three: '棒三',
    roll_out_shipp: '上若',
  };

  // 备注
  const remakeColSpan = ref(8);
  // 定尺
  const sizeColSpan = ref(2);
  // 支数
  const flowColSpan = ref(2);
  // 产量
  const weightColSpan = ref(4);
  // 热送统计
  const hotSendList = ref<any>({});
  // 冷装统计
  const coldSendList = ref<any>({});
  // 堆垛统计
  const stackingList = ref<any>([]);
  // 定尺和备注
  const mainOrgSize = ref('');
  const mainSize = ref('');
  const mainOrgRemark = ref('');
  const mainRemark = ref('');
  const getHeatList = async (params) => {
    try {
      changeLoading(true);
      const { billetOriginalProductRecordList, content, sizeInfo, confirmStatus } = await queryBilletRecordByCcmNo(params);
      let newArr: any[] = [];
      mainOrgSize.value = sizeInfo || '';
      mainSize.value = sizeInfo || '';
      mainRemark.value = content || '';
      mainOrgRemark.value = content || '';
      isEditAbled.value = confirmStatus === 2;
      if (billetOriginalProductRecordList && Array.isArray(billetOriginalProductRecordList)) {
        // 根据时间排序
        newArr = billetOriginalProductRecordList.sort((a, b) => {
          return dayjs(a.createTime).isBefore(dayjs(b.createTime)) ? -1 : 1;
        });
        // 棒一
        const rollOneColumns: TableColumnsType = [];
        const rollOneSize = {};
        // 棒二
        const rollTwoSize = {};
        // 棒三
        const rollThreeSize = {};
        // 上若
        const rollShippSize = {};
        // 冷装
        const rollTwoColdSize = {};
        const rollThreeColdSize = {};
        const rollShippColdSize = {};
        // 堆垛
        const stackingSize = {};

        // 堆垛字段
        let stackLengthColumn: any[] = stackList.value.map((stack) => {
          return {
            title: () => {
              return h('div', { style: { position: 'relative' } }, [
                h('span', {}, stack.aliasName),
                h(
                  'div',
                  {
                    style: {
                      cursor: 'pointer',
                      position: 'absolute',
                      right: '4px',
                      top: '1px',
                    },
                    class: 'noprint',
                    onClick: () => {
                      const rollOnrColumn: any = columns.value.find((item: any) => item.dataIndex === 'stackLength' + stack.id);
                      let newSize: string | number = '';
                      rollOnrColumn.children.push({
                        title: () => {
                          return h(
                            // Select,
                            Input,
                            {
                              //   options: sizeListOPtions.value,
                              bordered: false,
                              //   dropdownStyle: {
                              //     minWidth: '80px',
                              //   },
                              style: {
                                padding: '0px',
                                textAlign: 'center',
                              },
                              defaultValue: ' ',
                              // onChange: (value) => {
                              //   newSize = value;
                              // },
                              onBlur: throttle((e) => {
                                if (e.target.value.trim() === '') {
                                  createMessage.error('请输入定尺');
                                  return;
                                }
                                const size = Number(e.target.value.trim());
                                if (!isNumber(size)) {
                                  createMessage.error('请输入数字');
                                  return;
                                }

                                newSize = size <= 20 ? size * 1000 : size;
                              }, 500),
                            },
                            ''
                          );
                        },
                        dataIndex: 'newSize',
                        key: 'newSize',
                        align: 'center',
                        // width: 100,
                        customRender({ text, record }) {
                          if (!record.heatNo) {
                            return '';
                          }
                          return h(
                            Input,
                            {
                              class: 'total-input',
                              size: 'small',
                              bordered: false,
                              value: text,
                              onBlur: (e) => handleStackChange(e, record, newSize, stack.id),
                            },
                            ''
                          );
                        },
                      });
                    },
                  },
                  h(Icon, { icon: 'ant-design:plus-square-outlined' }, '')
                ),
              ]);
            },
            dataIndex: 'stackLength' + stack.id,
            key: 'stackLength' + stack.id,
            width: 120,
            children: [],
          };
        });

        const hotChargeColumns: any = {
          // 棒二字段
          roll_club_two: {
            title: '棒二',
            dataIndex: 'roll_club_two',
            key: 'roll_club_two',
            // width: 100,
            children: [],
          },
          // 棒三字段
          roll_club_three: {
            title: '棒三',
            dataIndex: 'roll_club_three',
            key: 'roll_club_three',
            // width: 100,
            children: [],
          },
          // 上若字段
          roll_out_shipp: {
            title: '上若',
            dataIndex: 'roll_out_shipp',
            key: 'roll_out_shipp',
            // width: 100,
            children: [],
          },
        };

        // 热装字段
        let columnsHotCharge: any = {
          roll_club_two: [],
          roll_club_three: [],
          roll_out_shipp: [],
        };

        const allSizeArr: any[] = [];

        const totalRows = getTotalRows();
        dataSource.value = totalRows.map((item, index) => {
          if (!newArr[index]) return item;
          const { hotChargeLength, rollClubOneDetails, stackLength } = newArr[index];

          // 棒一
          let rollOneNum = '';
          let rollOneSizesObj = {};
          // if (hotSend) {
          //   const obj = JSON.parse(hotSend);
          //   rollOneNum = obj.hotSendTotalCount || '';
          // }
          if (rollClubOneDetails) {
            const obj = JSON.parse(rollClubOneDetails);
            rollOneNum = obj.directRollingTotalCount || '';
            const lengthGroupCount = obj.lengthGroupCount;
            if (lengthGroupCount) {
              // 热送棒一的定尺
              Object.keys(lengthGroupCount).forEach((key) => {
                const column = key;
                allSizeArr.push(Number(column) / 1000);
                const columnKey = column + 'rollOneColumn';
                const findIndex = rollOneColumns.findIndex((item: any) => item.dataIndex === columnKey);
                if (findIndex === -1) {
                  rollOneColumns.push({
                    title: () => {
                      return h('div', { class: 'rollOneColumnWrapper' }, [
                        h(
                          // Select,
                          Input,
                          {
                            // options: sizeListOPtions.value,
                            bordered: false,
                            // dropdownStyle: {
                            //   minWidth: '80px',
                            // },
                            style: {
                              padding: '0px',
                              textAlign: 'center',
                            },
                            defaultValue: Number(column) > 20 ? Number(column) / 1000 : column,
                            // onChange: (value) => {
                            //   switchSizehandler(value, column);
                            // },
                            onBlur: throttle((e) => {
                              const value = Number(e.target.value) < 20 ? Number(e.target.value) * 1000 : Number(e.target.value);
                              switchSizehandler(value, Number(column));
                            }, 500),
                          },
                          ''
                        ),
                        h(
                          'div',
                          { class: 'noprint', onClick: () => deleteRollOneColumn(column) },
                          h(Icon, { icon: 'ant-design:delete-outlined' }, '')
                        ),
                      ]);
                    },
                    dataIndex: columnKey,
                    key: columnKey,
                    sortKey: column,
                    align: 'center',
                    width: 100,
                    customRender({ text, record }) {
                      if (!record.heatNo) {
                        return '';
                      }
                      return h(
                        Input,
                        { class: 'total-input', size: 'small', bordered: false, value: text, onBlur: (e) => handleSizeChange(e, record, column) },
                        ''
                      );
                    },
                  });
                }

                rollOneSizesObj[columnKey] = lengthGroupCount[key];

                // 如果没有棒一的定尺
                if (!rollOneSize[key]) {
                  rollOneSize[key] = {
                    size: Number(column) / 1000 + 'm',
                    amount: lengthGroupCount[key],
                    weight: steelPlateFormula(column, lengthGroupCount[key]),
                  };
                } else {
                  rollOneSize[key].amount += lengthGroupCount[key];
                  rollOneSize[key].weight += steelPlateFormula(column, lengthGroupCount[key]);
                }
              });
            }
          }

          // 热装
          let sizeArr = {};
          if (hotChargeLength) {
            // "[{\"hotChargeLength\":\"11820\",\"hotChargeDestination\":\"roll_club_three\",\"totalWeight\":\"74.9624\",\"hotChargeBtype\":\"0\",\"totalCount\":28}]"
            const hotChargeArr = JSON.parse(hotChargeLength);
            hotChargeArr.forEach((k) => {
              const sizeFormat = Number(k.hotChargeLength) / 1000;
              allSizeArr.push(sizeFormat);
              const dataKey = sizeFormat + k.hotChargeDestination + k.hotChargeBtype;
              sizeArr[dataKey] = k.totalCount;
              // 热送统计
              // 棒二
              if (k.hotChargeDestination === 'roll_club_two' && k.totalCount > 0) {
                // 添加定尺
                columnsHotCharge.roll_club_two.push(sizeFormat);

                if (k.hotChargeBtype === '0') {
                  if (!rollTwoSize[k.hotChargeLength]) {
                    rollTwoSize[k.hotChargeLength] = {
                      size: Number(k.hotChargeLength) / 1000 + 'm',
                      amount: k.totalCount,
                      weight: steelPlateFormula(k.hotChargeLength, k.totalCount),
                    };
                  } else {
                    rollTwoSize[k.hotChargeLength].amount += k.totalCount;
                    rollTwoSize[k.hotChargeLength].weight += steelPlateFormula(k.hotChargeLength, k.totalCount);
                  }
                } else {
                  if (!rollTwoColdSize[k.hotChargeLength]) {
                    rollTwoColdSize[k.hotChargeLength] = {
                      type: k.hotChargeBtype,
                      size: Number(k.hotChargeLength) / 1000 + 'm',
                      amount: k.totalCount,
                      weight: steelPlateFormula(k.hotChargeLength, k.totalCount),
                    };
                  } else {
                    rollTwoColdSize[k.hotChargeLength].amount += k.totalCount;
                    rollTwoColdSize[k.hotChargeLength].weight += steelPlateFormula(k.hotChargeLength, k.totalCount);
                  }
                }
              }
              // 棒三
              if (k.hotChargeDestination === 'roll_club_three' && k.totalCount > 0) {
                // 添加定尺
                columnsHotCharge.roll_club_three.push(sizeFormat);

                if (k.hotChargeBtype === '0') {
                  if (!rollThreeSize[k.hotChargeLength]) {
                    rollThreeSize[k.hotChargeLength] = {
                      size: Number(k.hotChargeLength) / 1000 + 'm',
                      amount: k.totalCount,
                      weight: steelPlateFormula(k.hotChargeLength, k.totalCount),
                    };
                  } else {
                    rollThreeSize[k.hotChargeLength].amount += k.totalCount;
                    rollThreeSize[k.hotChargeLength].weight += steelPlateFormula(k.hotChargeLength, k.totalCount);
                  }
                } else {
                  if (!rollThreeColdSize[k.hotChargeLength]) {
                    rollThreeColdSize[k.hotChargeLength] = {
                      type: k.hotChargeBtype,
                      size: Number(k.hotChargeLength) / 1000 + 'm',
                      amount: k.totalCount,
                      weight: steelPlateFormula(k.hotChargeLength, k.totalCount),
                    };
                  } else {
                    rollThreeColdSize[k.hotChargeLength].amount += k.totalCount;
                    rollThreeColdSize[k.hotChargeLength].weight += steelPlateFormula(k.hotChargeLength, k.totalCount);
                  }
                }
              }
              // 上若
              if (k.hotChargeDestination === 'roll_out_shipp' && k.totalCount > 0) {
                // 添加定尺
                columnsHotCharge.roll_out_shipp.push(sizeFormat);

                if (k.hotChargeBtype === '0') {
                  if (!rollShippSize[k.hotChargeLength]) {
                    rollShippSize[k.hotChargeLength] = {
                      size: Number(k.hotChargeLength) / 1000 + 'm',
                      amount: k.totalCount,
                      weight: steelPlateFormula(k.hotChargeLength, k.totalCount),
                    };
                  } else {
                    rollShippSize[k.hotChargeLength].amount += k.totalCount;
                    rollShippSize[k.hotChargeLength].weight += steelPlateFormula(k.hotChargeLength, k.totalCount);
                  }
                } else {
                  if (!rollShippColdSize[k.hotChargeLength]) {
                    rollShippColdSize[k.hotChargeLength] = {
                      type: k.hotChargeBtype,
                      size: Number(k.hotChargeLength) / 1000 + 'm',
                      amount: k.totalCount,
                      weight: steelPlateFormula(k.hotChargeLength, k.totalCount),
                    };
                  } else {
                    rollShippColdSize[k.hotChargeLength].amount += k.totalCount;
                    rollShippColdSize[k.hotChargeLength].weight += steelPlateFormula(k.hotChargeLength, k.totalCount);
                  }
                }
              }
            });
          }

          // 堆垛
          let stackSizeData = {};
          if (stackLength) {
            const stackLeghtObj = JSON.parse(stackLength);
            stackLeghtObj.forEach((v) => {
              // 初始化堆垛的定尺key
              const sSize = String(v.stackingLength);
              allSizeArr.push(Number(sSize) / 1000);
              const stackKey = sSize + 'stackLength' + v.stackingBhtcId;
              // 查找某一个堆垛 dataIndex='stackLength' + stackingBhtcId
              const index = stackLengthColumn.findIndex((ele) => ele.dataIndex == 'stackLength' + v.stackingBhtcId);
              const curStackChild = stackLengthColumn[index === -1 ? 0 : index].children;
              const hasChild = curStackChild.findIndex((ele) => ele.dataIndex === stackKey);
              if (hasChild < 0) {
                curStackChild.push({
                  title: () => {
                    return h('div', { class: 'rollOneColumnWrapper' }, [
                      h(
                        // Select,
                        Input,
                        {
                          // options: sizeListOPtions.value,
                          bordered: false,
                          // dropdownStyle: {
                          //   minWidth: '80px',
                          // },
                          style: {
                            padding: '0px',
                            textAlign: 'center',
                          },
                          defaultValue: Number(sSize) > 20 ? Number(sSize) / 1000 : sSize,
                          // onChange: (value) => {
                          //   switchSizehandler(value, column);
                          // },
                          onBlur: throttle((e) => {
                            const value = Number(e.target.value) < 20 ? Number(e.target.value) * 1000 : Number(e.target.value);
                            switchStackhandler(value, Number(sSize));
                          }, 500),
                        },
                        ''
                      ),
                      h(
                        'div',
                        { class: 'noprint', onClick: () => deleteStackColumn(sSize, v.stackingBhtcId) },
                        h(Icon, { icon: 'ant-design:delete-outlined' }, '')
                      ),
                    ]);
                  },
                  dataIndex: stackKey,
                  key: stackKey,
                  width: 100,
                  sortKey: sSize,
                  customRender({ text, record }) {
                    if (!record.heatNo) {
                      return '';
                    }
                    return h(
                      Input,
                      {
                        class: 'total-input',
                        size: 'small',
                        bordered: false,
                        value: text,
                        onBlur: (e) => handleStackChange(e, record, sSize, v.stackingBhtcId),
                      },
                      ''
                    );
                  },
                });
              }

              stackSizeData[stackKey] = v.stackingCount;

              // 给堆垛添加致谢
              if (!stackingSize[sSize]) {
                stackingSize[sSize] = {
                  size: Number(sSize) / 1000 + 'm',
                  amount: v.stackingCount,
                  weight: steelPlateFormula(sSize, v.stackingCount),
                };
              } else {
                stackingSize[sSize].amount += v.stackingCount;
                stackingSize[sSize].weight += steelPlateFormula(sSize, v.stackingCount);
              }
            });
          }

          const curTime = new Date().getTime();

          return {
            ...item,
            id: newArr[index].id || curTime,
            heatNo: newArr[index].heatNo,
            keyDate: curTime,
            brandNum: newArr[index].grade,
            oneFlow: newArr[index].oneStrandSum || '',
            twoFlow: newArr[index].twoStrandSum || '',
            threeFlow: newArr[index].threeStrandSum || '',
            fourFlow: newArr[index].fourStrandSum || '',
            fiveFlow: newArr[index].fiveStrandSum || '',
            sixFlow: newArr[index].sixStrandSum || '',
            sevenFlow: newArr[index].sevenStrandSum || '',
            eightFlow: newArr[index].eightStrandSum || '',
            total: newArr[index].amount || '',
            rollOneOld: rollOneNum,
            ...sizeArr,
            ...rollOneSizesObj,
            ...stackSizeData,
            orgData: newArr[index],
          };
        });

        let otherColumnsNums = 0;
        const otherColumns = Object.keys(columnsHotCharge)
          .filter((item) => columnsHotCharge[item].length)
          .map((item) => {
            const hotChargeSizeArr = [...new Set(columnsHotCharge[item])];
            const niubiGls: any[] = [];
            hotChargeSizeArr.forEach((ele) => {
              niubiGls.push(
                {
                  hotChargeLength: Number(ele) * 1000,
                  hotChargeDestination: item,
                  totalWeight: 0,
                  hotChargeBtype: '0',
                  totalCount: 0,
                },
                {
                  hotChargeLength: Number(ele) * 1000,
                  hotChargeDestination: item,
                  totalWeight: 0,
                  hotChargeBtype: '1',
                  totalCount: 0,
                }
              );
            });
            const childSizesColumn = hotChargeSizeArr
              .sort((a, b) => Number(a) * 1000 - Number(b) * 1000)
              .map((childItem) => {
                return {
                  title: childItem,
                  dataIndex: `${item}.${childItem}`,
                  key: `${item}.${childItem}`,
                  width: 100,
                  align: 'center',
                  customRender: ({ record }) => {
                    const hotKey = childItem + item + '0';
                    const coldKey = childItem + item + '1';
                    let sizeArr: any = [];
                    if (record[hotKey] || record[coldKey]) {
                      sizeArr = [h('div', { class: 'line' }, ''), h('div', { class: 'size-st-item' }, record[hotKey] || '~')];
                      sizeArr.push(h('div', { class: ' size-st-num' }, record[coldKey] || '~'));
                    }

                    return h(
                      'div',
                      {
                        class: 'size-st-wrapper',
                        onClick: () => {
                          // if (!record[hotKey] && !record[coldKey]) return;
                          const { orgData } = record;
                          if (!orgData) return;
                          const { hotChargeLength } = orgData;

                          const hotChargeInfoArr = hotChargeLength ? JSON.parse(hotChargeLength) : [];

                          const itemsHotArr = niubiGls.map((v) => {
                            const hasVal = hotChargeInfoArr.find(
                              (j) => j.hotChargeLength == v.hotChargeLength && j.hotChargeBtype == v.hotChargeBtype
                            );
                            return {
                              ...v,
                              totalCount: hasVal ? hasVal.totalCount : 0,
                            };
                          });

                          editSizeNumRecord.value = {
                            ...orgData,
                            hotChargeLengthArr: itemsHotArr,
                          };
                          openSetSizeNumModal.value = true;
                        },
                      },
                      sizeArr
                    );
                  },
                };
              });
            otherColumnsNums = otherColumnsNums + (childSizesColumn.length ? childSizesColumn.length : 1);
            return {
              ...hotChargeColumns[item],
              children: childSizesColumn,
            };
          });

        const sortedStackLengthColumn = stackLengthColumn.map((ss) => {
          return {
            ...ss,
            children: ss.children.sort((a, b) => {
              return Number(a.sortKey) - Number(b.sortKey);
            }),
          };
        });
        columns.value = [...defaultColumns, ...otherColumns, ...sortedStackLengthColumn, ...totalColum];
        const rollOneIndex = defaultColumns.findIndex((ele: any) => ele.dataIndex === 'rollOne');
        (columns.value[rollOneIndex] as any).children = rollOneColumns.length
          ? rollOneColumns.sort((a: any, b: any) => Number(a.sortKey) - Number(b.sortKey))
          : [];

        // 堆垛的列数量
        const stackColNums = stackLengthColumn.reduce((pre: any, cur: any) => {
          return pre + (cur.children && cur.children.length ? cur.children.length : 1);
        }, 0);
        // 计算列，合并
        const allSpan = 4 + (rollOneColumns.length ? rollOneColumns.length : 1) + otherColumnsNums + stackColNums;
        remakeColSpan.value = Math.ceil(allSpan / 3);
        const nnColSpan = Math.ceil((allSpan - remakeColSpan.value) / 2);
        const newNNColSpan = nnColSpan % 2 === 0 ? nnColSpan : nnColSpan + 1;
        sizeColSpan.value = newNNColSpan / 2 > 4 ? 4 : newNNColSpan / 2;
        flowColSpan.value = newNNColSpan - sizeColSpan.value;
        weightColSpan.value = allSpan - remakeColSpan.value - newNNColSpan;
        // console.log('列宽计算结果allSpan', allSpan);
        // console.log('列宽计算结果stackColNums', stackColNums);
        // console.log('列宽计算结果remakeColSpan.value', remakeColSpan.value);
        // console.log('列宽计算结果nnColSpan', nnColSpan);
        // console.log('列宽计算结果newNNColSpan', newNNColSpan);
        // console.log('列宽计算结果sizeColSpan.value', sizeColSpan.value);
        // console.log('列宽计算结果flowColSpan.value', flowColSpan.value);
        // console.log('列宽计算结果weightColSpan.value', weightColSpan.value);

        let allWeight = 0;
        // 热送统计
        if (Object.values(rollOneSize).length) {
          hotSendList.value['一'] = Object.values(rollOneSize);
          hotSendList.value['一'].forEach((ele) => (allWeight += ele.weight));
        }
        if (Object.values(rollTwoSize).length) {
          hotSendList.value['二'] = Object.values(rollTwoSize);
          hotSendList.value['二'].forEach((ele) => (allWeight += ele.weight));
        }
        if (Object.values(rollThreeSize).length) {
          hotSendList.value['三'] = Object.values(rollThreeSize);
          hotSendList.value['三'].forEach((ele) => (allWeight += ele.weight));
        }
        if (Object.values(rollShippSize).length) {
          hotSendList.value['上'] = Object.values(rollShippSize);
          hotSendList.value['上'].forEach((ele) => (allWeight += ele.weight));
        }
        if (Object.values(stackingSize)) {
          stackingList.value = Object.values(stackingSize);
          stackingList.value.forEach((ele) => (allWeight += ele.weight));
        }

        // 冷装统计
        if (Object.values(rollTwoColdSize).length) {
          coldSendList.value['二'] = Object.values(rollTwoColdSize);
          coldSendList.value['二'].forEach((ele) => (allWeight += ele.weight));
        }
        if (Object.values(rollThreeColdSize).length) {
          coldSendList.value['三'] = Object.values(rollThreeColdSize);
          coldSendList.value['三'].forEach((ele) => (allWeight += ele.weight));
        }
        if (Object.values(rollShippColdSize).length) {
          coldSendList.value['上'] = Object.values(rollShippColdSize);
          coldSendList.value['上'].forEach((ele) => (allWeight += ele.weight));
        }

        mainRemark.value = `合计：${allWeight.toFixed(3)} t`;
        // 查看所有的定尺
        mainSize.value = sizeInfo || [...new Set(allSizeArr)].join(',');
      }
      changeLoading(false);
    } catch (error) {
      changeLoading(false);
      console.log(error);
    }
  };

  const openJSModal = ref(false);
  const xiShu = ref(0.2265);
  const sizeNum = ref();
  const weightNum = ref();
  // 重量计算按钮
  const weightCalc = computed(() => {
    const w = Number(weightNum.value);
    const x = Number(xiShu.value);
    const s = Number(sizeNum.value);
    if (isNumber(w) && isNumber(x) && isNumber(s)) {
      const r = w * x * s;

      return !isNaN(r) ? r.toFixed(6) : '';
    }
    return '';
  });

  // 修改合计
  const handleTotalChange = throttle((e: any, record) => {
    const val = Number(e.target.value);
    if (!isNumber(val) || val < 0) {
      createMessage.error('请输入大于0数字');
      return;
    }
    const { orgData } = record;
    const allCount = handleTotalSum(orgData);
    if (Number(orgData.amount) != val && allCount != val) {
      handleEdit({
        ...orgData,
        amount: val,
      });
    }
  }, 800);

  // 编辑
  const handleEdit = async (record) => {
    try {
      changeLoading(true);

      await editBilletRecord(record);

      await getHeatList({
        ccmNo: hostNumber.value,
        queryType: fetchQueryType.value,
        changeShiftId: fetchChangeShiftId.value,
      });
      changeLoading(false);
    } catch (error) {
      changeLoading(false);
      console.log(error);
    }
  };

  // 修改棒一定尺数量
  const handleSizeChange = throttle((e: any, record, size) => {
    if (!size) {
      createMessage.error('请选择定尺');
      return;
    }
    const val = Number(e.target.value);
    if (!isNumber(val) || val < 0) {
      createMessage.error('请输入大于或等于0的数字');
      return;
    }

    const { orgData } = record;
    const { rollClubOneDetails } = orgData;
    let obj = {
      lengthGroupCount: {},
      directRollingTotalWeight: 0,
      directRollingTotalCount: 0,
    };
    if (rollClubOneDetails) {
      obj = JSON.parse(rollClubOneDetails);
    }

    const lengthGroupCount = obj.lengthGroupCount;
    if (
      lengthGroupCount &&
      ((Object.hasOwn(lengthGroupCount, size) && (val === 0 || lengthGroupCount[size] !== val)) ||
        (!Object.hasOwn(lengthGroupCount, size) && val > 0))
    ) {
      if (val <= 0) {
        delete obj.lengthGroupCount[size];
      } else {
        obj.lengthGroupCount[size] = val;
      }

      const params = {
        ...orgData,
        rollClubOneDetails: JSON.stringify(obj),
      };
      const amount = handleTotalSum(params);
      handleEdit({
        ...params,
        amount,
      });
    }
  }, 800);

  // 计算总数
  const handleTotalSum = (record) => {
    const { rollClubOneDetails, stackLength, hotChargeLength } = record;
    let allCount = 0;
    if (rollClubOneDetails) {
      const sendObj = JSON.parse(rollClubOneDetails);
      if (sendObj.lengthGroupCount) {
        Object.keys(sendObj.lengthGroupCount).forEach((key) => {
          allCount += sendObj.lengthGroupCount[key];
        });
      }
    }

    if (stackLength) {
      const stackObj = JSON.parse(stackLength);
      if (isArray(stackObj)) {
        stackObj.forEach((item) => {
          allCount += item.stackingCount;
        });
      }
    }

    if (hotChargeLength) {
      const chargeObj = JSON.parse(hotChargeLength);
      if (isArray(chargeObj)) {
        chargeObj.forEach((item) => {
          allCount += item.totalCount;
        });
      }
    }

    return allCount;
  };

  // 修改堆垛定尺数量
  const handleStackChange = throttle((e: any, record, size, stackingId) => {
    if (e.target.value.trim() === '') return;
    if (!size) {
      createMessage.error('请选择定尺');
      return;
    }
    const val = Number(e.target.value);
    if (!isNumber(val)) {
      createMessage.error('请输入大于等于0的数字');
      return;
    }

    const { orgData } = record;
    const { stackLength } = orgData;
    let obj: any[] = [];
    if (stackLength) {
      obj = JSON.parse(stackLength);
    }

    const lengthGroupCount = obj.findIndex((v) => v.stackingLength == size && v.stackingBhtcId == stackingId);

    // 计算补的数量是不是4的倍数
    let stackInfo: any = null;
    // const buCount = lengthGroupCount > -1 ? val - obj[lengthGroupCount].stackingCount : val;
    if (val && val > 0) {
      // if (val % 4 !== 0) {
      //   createMessage.error('补数量必须是4的倍数');
      //   return;
      // }
      stackInfo = val + '-' + size + '-' + stackingId;
    } else {
      stackInfo = '0-' + size + '-' + stackingId;
    }

    if (lengthGroupCount === -1) {
      obj.push({
        stackingCount: val,
        stackingLength: size,
        stackingWeight: steelPlateFormula(size, val),
        stackingBhtcId: stackingId,
      });
    } else {
      if (obj[lengthGroupCount].stackingCount === val) return;
      obj[lengthGroupCount].stackingCount = val;
      obj[lengthGroupCount].stackingWeight = steelPlateFormula(size, val);
    }

    const params = {
      ...orgData,
      stackLength: JSON.stringify(obj.filter((v) => v.stackingCount > 0)),
      stackInfo,
    };

    const amount = handleTotalSum(params);
    handleEdit({
      ...params,
      amount,
    });
  }, 800);

  // 编辑切换定尺
  const switchSizehandler = async (val, oldSize) => {
    try {
      changeLoading(true);
      const fetchArr: any[] = [];
      dataSource.value.forEach((item) => {
        if (item.heatNo && item.orgData) {
          const { rollClubOneDetails } = item.orgData;
          if (rollClubOneDetails) {
            const obj = JSON.parse(rollClubOneDetails);
            if (obj && obj.lengthGroupCount) {
              const lengthGroupCount = obj.lengthGroupCount;

              if (lengthGroupCount[oldSize]) {
                obj.lengthGroupCount[val] = lengthGroupCount[oldSize] + (lengthGroupCount[val] ? lengthGroupCount[val] : 0);
                delete obj.lengthGroupCount[oldSize];

                // 请求push了
                fetchArr.push(
                  editBilletRecord({
                    ...item.orgData,
                    rollClubOneDetails: JSON.stringify(obj),
                  })
                );
              }
            }
          }
        }
      });

      if (fetchArr.length > 0) {
        await Promise.all(fetchArr);

        await getHeatList({
          ccmNo: hostNumber.value,
          queryType: fetchQueryType.value,
          changeShiftId: fetchChangeShiftId.value,
        });

        changeLoading(false);
      }
    } catch (error) {
      changeLoading(false);
      console.log(error);
    }
  };

  // 堆垛编辑定尺
  const switchStackhandler = async (val, oldSize) => {
    console.log(val, oldSize);
    try {
      changeLoading(true);
      const fetchArr: any[] = [];
      dataSource.value.forEach((item) => {
        if (item.heatNo && item.orgData) {
          const { stackLength } = item.orgData;
          if (stackLength) {
            let obj = stackLength ? JSON.parse(stackLength) : [];
            const oldSizeIndex = obj.findIndex((k) => k.stackingLength === oldSize);
            if (oldSizeIndex > -1) {
              const newSizeIndex = obj.findIndex((k) => k.stackingLength === Number(val));
              if (newSizeIndex > -1) {
                obj[newSizeIndex].stackingCount += obj[oldSizeIndex].stackingCount;
                obj = obj.filter((j) => j.stackingLength !== oldSize);
              } else {
                obj[oldSizeIndex].stackingLength = Number(val);
              }

              // 请求push了
              fetchArr.push(
                editBilletRecord({
                  ...item.orgData,
                  stackLength: JSON.stringify(obj),
                })
              );
            }
          }
        }
      });

      if (fetchArr.length > 0) {
        await Promise.all(fetchArr);

        await getHeatList({
          ccmNo: hostNumber.value,
          queryType: fetchQueryType.value,
          changeShiftId: fetchChangeShiftId.value,
        });

        changeLoading(false);
      }
    } catch (error) {
      changeLoading(false);
      console.log(error);
    }
  };

  // 删除定尺
  const deleteRollOneColumn = async (size) => {
    try {
      changeLoading(true);
      const fetchArr: any[] = [];
      dataSource.value.forEach((item) => {
        if (item.heatNo && item.orgData) {
          const { rollClubOneDetails } = item.orgData;
          if (rollClubOneDetails) {
            const obj = JSON.parse(rollClubOneDetails);
            if (obj && obj.lengthGroupCount) {
              const lengthGroupCount = obj.lengthGroupCount;

              if (lengthGroupCount[size]) {
                delete obj.lengthGroupCount[size];

                // 请求push了
                const params = {
                  ...item.orgData,
                  rollClubOneDetails: JSON.stringify(obj),
                };

                const amount = handleTotalSum(params);
                fetchArr.push(
                  editBilletRecord({
                    ...params,
                    amount,
                  })
                );
              }
            }
          }
        }
      });

      if (fetchArr.length > 0) {
        await Promise.all(fetchArr);

        await getHeatList({
          ccmNo: hostNumber.value,
          queryType: fetchQueryType.value,
          changeShiftId: fetchChangeShiftId.value,
        });

        changeLoading(false);
      }
    } catch (error) {
      changeLoading(false);
      console.log(error);
    }
  };

  // 删除堆垛定尺
  const deleteStackColumn = async (size, stackingId) => {
    try {
      changeLoading(true);
      const fetchArr: any[] = [];
      dataSource.value.forEach((item) => {
        if (item.heatNo && item.orgData) {
          const { stackLength } = item.orgData;
          if (stackLength) {
            const obj = JSON.parse(stackLength);
            const hasStackItem = obj.findIndex((n) => n.stackingLength == size && n.stackingBhtcId == stackingId);
            if (hasStackItem > -1) {
              const lengthGroupCount = obj.filter((m) => m.stackingLength != size || m.stackingBhtcId != stackingId);

              // 请求push了
              const params = {
                ...item.orgData,
                stackLength: JSON.stringify(lengthGroupCount),
                stackInfo: '0-' + size + '-' + stackingId,
              };

              const amount = handleTotalSum(params);
              fetchArr.push(
                editBilletRecord({
                  ...params,
                  amount,
                })
              );
            }
          }
        }
      });

      if (fetchArr.length > 0) {
        await Promise.all(fetchArr);

        await getHeatList({
          ccmNo: hostNumber.value,
          queryType: fetchQueryType.value,
          changeShiftId: fetchChangeShiftId.value,
        });
      }
      changeLoading(false);
    } catch (error) {
      changeLoading(false);
      console.log(error);
    }
  };

  // 编辑目的地定尺数量
  const openSetSizeNumModal = ref(false);
  const editSizeNumRecord = ref<any>({});

  const confirmSetSizeNum = async () => {
    try {
      changeLoading(true);
      const { hotChargeLengthArr } = editSizeNumRecord.value;
      if (!hotChargeLengthArr.length) {
        return;
      }

      const arr = hotChargeLengthArr
        .filter((ele) => ele.totalCount)
        .map((k) => {
          return {
            ...k,
            totalWeight: steelPlateFormula(k.hotChargeLength, k.totalCount).toFixed(4),
          };
        });

      editSizeNumRecord.value.hotChargeLength = arr.length ? JSON.stringify(arr) : null;

      await editBilletRecord({
        ...editSizeNumRecord.value,
      });
      openSetSizeNumModal.value = false;

      await getHeatList({
        ccmNo: hostNumber.value,
        queryType: fetchQueryType.value,
        changeShiftId: fetchChangeShiftId.value,
      });
      changeLoading(false);
    } catch (e) {
      changeLoading(false);
      console.log(e);
    }
  };

  // 确定修改定尺
  const handleSizeBlur = throttle((e) => {
    if (mainOrgSize.value.trim() === e.target.value.trim()) return;
    handleEditShiftInfo({
      id: fetchChangeShiftId.value,
      sizeInfo: e.target.value,
    });
  }, 500);

  // 修改备注
  const handleRemarkBlur = throttle((e) => {
    if (mainOrgRemark.value.trim() === e.target.value.trim()) return;
    handleEditShiftInfo({
      id: fetchChangeShiftId.value,
      content: e.target.value,
    });
  }, 500);

  // 确认上一个班次的原始数据
  const handlerConfirmOrgData = async () => {
    try {
      changeLoading(true);
      await handleEditShiftInfo({
        id: fetchChangeShiftId.value,
        confirmStatus: 2,
      });
      closeModal();
      changeLoading(false);
    } catch (e) {
      console.log(e);
      changeLoading(false);
    }
  };

  // 编辑定尺和备注
  const handleEditShiftInfo = async (params) => {
    try {
      changeLoading(true);
      await editOriginalProductRecord(params);

      await getHeatList({
        ccmNo: hostNumber.value,
        queryType: fetchQueryType.value,
        changeShiftId: fetchChangeShiftId.value,
      });
      changeLoading(false);
    } catch (e) {
      console.log(e);
      changeLoading(false);
    }
  };

  // 添加炉次
  const newHeatNo = ref('');
  const nextHeatNo = ref(undefined);
  const openNewHeatNo = ref(false);
  const addHeatNo = () => {
    newHeatNo.value = '';
    openNewHeatNo.value = true;
  };

  const getAddHeatNo = computed(() => {
    return dataSource.value
      .filter((o) => o.heatNo)
      .map((t) => {
        return {
          label: t.SerialNumber + ' - ' + t.heatNo,
          value: t.heatNo,
        };
      });
  });
  const confirmAddHeatNo = async () => {
    try {
      if (!newHeatNo.value) {
        createMessage.error('请输入炉次号');
        return;
      }

      changeLoading(true);
      await addBilletNo({
        ccmNo: hostNumber.value,
        heatNo: newHeatNo.value,
        changeShiftId: fetchChangeShiftId.value,
        nextHeatNo: nextHeatNo.value,
      });
      openNewHeatNo.value = false;

      await getHeatList({
        ccmNo: hostNumber.value,
        queryType: fetchQueryType.value,
        changeShiftId: fetchChangeShiftId.value,
      });
      changeLoading(false);
    } catch (e) {
      console.log(e);
      changeLoading(false);
    }
  };

  function onPrint() {
    changeOkLoading(true);
    printJS({
      printable: '#printBilletSampleCard',
      type: 'html',
    });
    setTimeout(() => {
      changeOkLoading(false);
    }, 1000);
  }
</script>
<style scoped lang="less">
  .ticket {
    max-width: 1400px;
    height: 100%;
    display: flex;
    flex-direction: column;

    .ccmno-info {
      font-family: 'Kingsoft_Cloud_Font';
    }
    .ccmno {
      display: inline-block;
      width: 60px;
      border-bottom: 1px solid black;
      text-align: center;
    }

    .size-items-title {
      font-size: 12px;
      line-height: 32px;
      border-bottom: 1px solid #bfbfbf;
      padding-left: 10px;
      min-width: 100px;
    }

    .size-num-title {
      font-size: 12px;
      line-height: 32px;
      padding-left: 10px;
    }

    .size-items-content {
      height: 32px;
      text-align: center;
      line-height: 32px;
    }

    .size-items-remark {
      width: 100%;
      min-height: 90px;
      flex-wrap: wrap;
      font-family: 'Kingsoft_Cloud_Font';
      align-content: flex-start;

      .size-remark-item {
        width: 50%;
        height: 30px;
        color: #000;
      }

      .size-remark-size {
        display: inline-block;
        width: 80px;
      }

      .size-remark-num {
        display: inline-block;
        width: 80px;
        padding: 0 40px 0 0;
        font-size: 12px;
      }
    }

    .two-num-wrapper {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 10;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-end;
      padding-right: 6px;
    }

    .s-txt {
      font-family: 'Kingsoft_Cloud_Font';
    }

    .ant-table-wrapper {
      flex: 1;

      :deep(.ant-spin-nested-loading) {
        min-height: 100%;

        .ant-table {
          border-top: 1px solid rgba(0, 0, 0, 0.6);

          > .ant-table-container {
            border-inline-start: 1px solid rgba(0, 0, 0, 0.6);
          }

          .ant-table-content > table > thead > tr > th,
          .ant-table-tbody > tr > td,
          .ant-table-summary > tr > td {
            padding: 2px;
            border-inline-end: 1px solid rgba(0, 0, 0, 0.6);
            border-bottom: 1px solid rgba(0, 0, 0, 0.6) !important;
            text-align: center;
            position: relative;
          }

          .delete-heat {
            position: absolute;
            top: 0;
            left: -10px;
            color: #f50;
            cursor: pointer;
          }

          .size-st-wrapper {
            position: absolute;
            top: 1px;
            left: 1px;
            right: 1px;
            bottom: 1px;
            font-weight: 600;
            cursor: pointer;
            overflow: hidden;

            .line {
              // content: '';
              // position: absolute;
              // top: 0;
              // left: 0;
              // width: 100%; /* 等于长方形宽度 */
              // height: 100%; /* 等于长方形高度 */

              // /* 创建斜线：线性渐变从左上到右下 */
              // background: linear-gradient(
              //   to bottom right,
              //   transparent 0%,
              //   transparent calc(50% - 0.5px),
              //   /* 斜线上方透明 */ rgba(0, 0, 0, 0.6) calc(50% - 0.5px),
              //   /* 斜线颜色 */ rgba(0, 0, 0, 0.6) calc(50% + 0.5px),
              //   /* 斜线厚度 */ transparent calc(50% + 0.5px) /* 斜线下方透明 */
              // );
              position: absolute;
              left: -5px;
              top: 50%;
              width: 110%;
              border-bottom: 1px solid rgba(0, 0, 0, 0.6);
              transform: rotate(165deg);
            }

            .size-st-item {
              position: absolute;
              top: -4px;
              left: 2px;
              color: #f50;
            }
          }
          .size-st-num {
            color: #108ee9;
            cursor: pointer;
            position: absolute;
            right: 1px;
            bottom: -4px;
          }

          // 自定义啊
          .total-input {
            width: 100%;
            padding: 0;
            text-align: center;
            cursor: pointer;
          }

          .ant-select {
            width: 100%;

            .ant-select-selector {
              padding: 0;

              .ant-select-selection-item,
              .ant-select-selection-placeholder {
                padding-inline-end: 0;
              }
            }
            .ant-select-arrow {
              display: none;
            }
          }

          .rollOneColumnWrapper {
            position: relative;
            width: 100%;
            height: 100%;

            .noprint {
              position: absolute;
              left: 0;
              top: 0;
              display: none;
              color: #f50;
              cursor: pointer;
            }

            &:hover {
              .noprint {
                display: block;
              }
            }
          }
        }
      }

      .summary-row-no-border {
        td:first-child {
          border-bottom: none !important;
        }

        .song-items {
          width: 100%;
          height: 100%;
          align-items: flex-start;
          justify-content: flex-start;

          .title {
            margin-right: 10px;
            color: #f50;
          }
        }
      }

      .summary-cell-remark {
        min-height: 70px;
      }
    }
  }
</style>
<style lang="less">
  @media print {
    header,
    footer,
    .noprint {
      display: none;
    }

    @page {
      margin-top: 10px; /* 第一页的页眉距离顶部为0 */
      margin-bottom: 0; /* 第一页的页脚距离底部为0 */
    }
  }
</style>