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 10px 0; position: relative; border: 1px solid #c5c5c5; background: #fff; width: 100%; height: 100%"
      id="printBilletSampleCard"
    >
      <div class="ticket next-ticket">
        <div style="text-align: center">
          <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"> 定尺： </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 :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" 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>
              </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>
              </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>
              </a-table-summary-cell>
            </a-table-summary-row>
          </template>
        </a-table>
      </div>
    </section>

    <template #appendFooter>
      <a-button @click="openJSModal = true"> 重量计算 </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"
          :addon-before="headText[item.hotChargeDestination] + ' ' + Number(item.hotChargeLength) / 1000 + 'm'"
          :min="0"
          :step="4"
          @change="
            (value) => {
              if (!value) {
                item.totalCount = 0;
              }
              if (value % 4 !== 0) {
                item.totalCount = value - (value % 4);
              }
            }
          "
          :controls="false"
        ></a-input-number>
      </div>
      <div style="font-size: 16px; color: #f50">注：请输入4或4的倍数.</div>
    </div>
  </a-modal>
</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 } from '../operator.api';
  import { render } from '/@/utils/common/renderUtils';
  import { 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';

  const { createMessage } = useMessage();
  // 渲染字典标签
  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',
    },
    {
      title: '炉号',
      dataIndex: 'heatNo',
      width: 80,
      align: 'center',
      key: 'heatNo',
    },
    {
      title: '钢种',
      width: 80,
      align: 'center',
      dataIndex: 'brandNum',
      key: 'brandNum',
      customRender: ({ text }) => {
        return render.renderDict(text, 'billet_spec');
      },
    },
    {
      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 '';
            }
            return h(Input, { class: 'total-input', size: 'small', bordered: false, value: text, onBlur: (e) => handleTotalChange(e, record) }, '');
          },
        },
      ],
    },
    {
      title: () => {
        return h('div', { style: { position: 'relative' } }, [
          h('span', {}, '棒一'),
          h(
            'div',
            {
              style: {
                cursor: 'pointer',
                position: 'absolute',
                right: '4px',
                top: '1px',
              },
              class: 'noprint',
              onClick: () => {
                console.log('点击了');
                const rollOnrColumn = columns.value.find((item: any) => item.dataIndex === 'rollOne');
                let newSize = '';
                rollOnrColumn.children.push({
                  title: () => {
                    return h(
                      Select,
                      {
                        options: sizeListOPtions.value,
                        bordered: false,
                        dropdownStyle: {
                          minWidth: '80px',
                        },
                        defaultValue: '',
                        onChange: (value) => {
                          newSize = value;
                        },
                      },
                      ''
                    );
                  },
                  dataIndex: 'newSize',
                  key: 'newSize',
                  align: 'center',
                  width: 40,
                  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: 40,
      align: 'center',
      dataIndex: 'rollOne',
      key: 'rollOne',
      children: [],
    },
  ];

  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 fetchQueryType = ref(1);
  const fetchChangeShiftId = ref('');
  // 定尺
  const sizeListOPtions = ref([]);
  const [registerModal, { changeOkLoading, changeLoading }] = useModalInner(async (data) => {
    const { ccmNo, shiftText, queryType, curShiftInfo, changeShiftId, time } = data;

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

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

    dataSource.value = [...newSip];
    getHeatList({
      ccmNo,
      queryType,
      changeShiftId,
    });

    // 获取定尺啊
    initDictOptions('lg_dcgg').then((res) => {
      sizeListOPtions.value = (res || []).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({});
  // 堆垛统计
  const stackingList = ref([]);
  const getHeatList = async (params) => {
    try {
      changeLoading(true);
      const res = await queryBilletRecordByCcmNo(params);
      let newArr: any[] = [];
      if (res && Array.isArray(res)) {
        // 根据时间排序
        newArr = res.sort((a, b) => {
          return dayjs(a.createTime).isBefore(dayjs(b.createTime)) ? -1 : 1;
        });

        let sizeColumn: string[] = [];
        let sizeHeadContent = {};
        // 棒一
        const rollOneColumns: TableColumnsType = [];
        const rollOneSize = {};
        // 棒二
        const rollTwoSize = {};
        // 棒三
        const rollThreeSize = {};
        // 上若
        const rollShippSize = {};
        // 堆垛
        const stackingSize = {};

        // 堆垛字段
        let stackLengthColumn: any = {
          title: () => {
            return h('div', { style: { position: 'relative' } }, [
              h('span', {}, '堆垛'),
              h(
                'div',
                {
                  style: {
                    cursor: 'pointer',
                    position: 'absolute',
                    right: '4px',
                    top: '1px',
                  },
                  class: 'noprint',
                  onClick: () => {
                    const rollOnrColumn = columns.value.find((item: any) => item.dataIndex === 'stackLength');
                    let newSize = '';
                    rollOnrColumn.children.push({
                      title: () => {
                        return h(
                          Select,
                          {
                            options: sizeListOPtions.value,
                            bordered: false,
                            dropdownStyle: {
                              minWidth: '80px',
                            },
                            defaultValue: '',
                            onChange: (value) => {
                              newSize = value;
                            },
                          },
                          ''
                        );
                      },
                      dataIndex: 'newSize',
                      key: 'newSize',
                      align: 'center',
                      width: 40,
                      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) },
                          ''
                        );
                      },
                    });
                  },
                },
                h(Icon, { icon: 'ant-design:plus-square-outlined' }, '')
              ),
            ]);
          },
          dataIndex: 'stackLength',
          key: 'stackLength',
          width: 40,
          children: [],
        };
        dataSource.value = dataSource.value.map((item, index) => {
          if (!newArr[index]) return item;
          const { lengthDetails, 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;
                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,
                          {
                            options: sizeListOPtions.value,
                            bordered: false,
                            dropdownStyle: {
                              minWidth: '80px',
                            },
                            defaultValue: column,
                            onChange: (value) => {
                              switchSizehandler(value, column);
                            },
                          },
                          ''
                        ),
                        h(
                          'div',
                          { class: 'noprint', onClick: () => deleteRollOneColumn(column) },
                          h(Icon, { icon: 'ant-design:delete-outlined' }, '')
                        ),
                      ]);
                    },
                    dataIndex: columnKey,
                    key: columnKey,
                    align: 'center',
                    width: 40,
                    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: lengthGroupCount[key] * (Number(column) / 1000) * 0.2265,
                  };
                } else {
                  rollOneSize[key].amount += lengthGroupCount[key];
                  rollOneSize[key].weight += lengthGroupCount[key] * (Number(column) / 1000) * 0.2265;
                }
              });
            }
          }

          // 定尺
          let sizeArr = {};
          if (hotChargeLength) {
            // "[{\"hotChargeLength\":\"11820\",\"hotChargeDestination\":\"roll_club_three\",\"totalWeight\":\"5.3545\",\"totalCount\":2}]"
            const hotChargeArr = JSON.parse(hotChargeLength);
            hotChargeArr.forEach((k) => {
              const sizeFormat = Number(k.hotChargeLength) / 1000;
              if (!sizeArr[sizeFormat + 'Arr']) {
                sizeArr[sizeFormat + 'Arr'] = {};
              }
              sizeColumn.push(sizeFormat);

              // 判断是否有该字段，列头显示
              if (!sizeHeadContent[sizeFormat]) {
                sizeHeadContent[sizeFormat] = [];
              }

              // 热送统计
              // 棒二
              if (k.hotChargeDestination === 'roll_club_two' && k.totalCount > 0) {
                sizeArr[sizeFormat + 'Arr'].rollClubTwoCount = k.totalCount;
                sizeHeadContent[sizeFormat].push('rollClubTwoCount');

                if (!rollTwoSize[k.hotChargeLength]) {
                  rollTwoSize[k.hotChargeLength] = {
                    size: Number(k.hotChargeLength) / 1000 + 'm',
                    amount: k.totalCount,
                    weight: k.totalCount * (Number(k.hotChargeLength) / 1000) * 0.2265,
                  };
                } else {
                  rollTwoSize[k.hotChargeLength].amount += k.totalCount;
                  rollTwoSize[k.hotChargeLength].weight += k.totalCount * (Number(k.hotChargeLength) / 1000) * 0.2265;
                }
              }
              // 棒三
              if (k.hotChargeDestination === 'roll_club_three' && k.totalCount > 0) {
                sizeArr[sizeFormat + 'Arr'].rollClubThreeCount = k.totalCount;
                sizeHeadContent[sizeFormat].push('rollClubThreeCount');

                if (!rollThreeSize[k.hotChargeLength]) {
                  rollThreeSize[k.hotChargeLength] = {
                    size: Number(k.hotChargeLength) / 1000 + 'm',
                    amount: k.totalCount,
                    weight: k.totalCount * (Number(k.hotChargeLength) / 1000) * 0.2265,
                  };
                } else {
                  rollThreeSize[k.hotChargeLength].amount += k.totalCount;
                  rollThreeSize[k.hotChargeLength].weight += k.totalCount * (Number(k.hotChargeLength) / 1000) * 0.2265;
                }
              }
              // 上若
              if (k.hotChargeDestination === 'roll_out_shipp' && k.totalCount > 0) {
                sizeArr[sizeFormat + 'Arr'].rollClubShippCount = k.totalCount;
                sizeHeadContent[sizeFormat].push('rollClubShippCount');

                if (!rollShippSize[k.hotChargeLength]) {
                  rollShippSize[k.hotChargeLength] = {
                    size: Number(k.hotChargeLength) / 1000 + 'm',
                    amount: k.totalCount,
                    weight: k.totalCount * (Number(k.hotChargeLength) / 1000) * 0.2265,
                  };
                } else {
                  rollShippSize[k.hotChargeLength].amount += k.totalCount;
                  rollShippSize[k.hotChargeLength].weight += k.totalCount * (Number(k.hotChargeLength) / 1000) * 0.2265;
                }
              }
            });
          }

          // 堆垛
          let stackSizeData = {};
          if (stackLength) {
            const stackLeghtObj = JSON.parse(stackLength);
            stackLeghtObj.forEach((v) => {
              const sSize = String(v.stackingLength);
              const hasChild = stackLengthColumn.children.findIndex((ele) => ele.dataIndex === sSize + 'stackLength');
              if (hasChild < 0) {
                stackLengthColumn.children.push({
                  title: () => {
                    return h('div', { class: 'rollOneColumnWrapper' }, [
                      h(
                        Select,
                        {
                          options: sizeListOPtions.value,
                          bordered: false,
                          dropdownStyle: {
                            minWidth: '80px',
                          },
                          defaultValue: sSize,
                          onChange: (value) => {
                            switchStackhandler(value, sSize);
                          },
                        },
                        ''
                      ),
                      h('div', { class: 'noprint', onClick: () => deleteStackColumn(sSize) }, h(Icon, { icon: 'ant-design:delete-outlined' }, '')),
                    ]);
                  },
                  dataIndex: sSize + 'stackLength',
                  key: sSize + 'stackLength',
                  width: 40,
                  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) },
                      ''
                    );
                  },
                });
              }

              stackSizeData[sSize + 'stackLength'] = v.stackingCount;

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

          return {
            ...item,
            heatNo: newArr[index].heatNo,
            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 || '',
            rollOne: rollOneNum,
            ...sizeArr,
            ...rollOneSizesObj,
            ...stackSizeData,
            orgData: newArr[index],
          };
        });

        const otherColumn: TableColumnsType = [...new Set(sizeColumn)].map((item) => {
          return {
            title: () => {
              const subHead = Object.keys(headText)
                .filter((key) => sizeHeadContent[item].includes(key))
                .map((key) => headText[key]);

              return h('div', {}, [h('div', { style: { fontSize: '12px' } }, subHead.join(' / ')), h('div', {}, item)]);
            },
            dataIndex: item,
            key: item,
            align: 'center',
            width: 50,
            customRender: ({ text, record }) => {
              if (record[item + 'Arr']) {
                const subHead = Object.keys(headText)
                  .filter((key) => sizeHeadContent[item].includes(key))
                  .map((key) => record[item + 'Arr'][key] || '~');
                return h(
                  'div',
                  {
                    class: 'size-st-num',
                    onClick: () => {
                      if (subHead.length === 0) return;
                      const { orgData } = record;
                      if (!orgData || !orgData.hotChargeLength) return;

                      const { hotChargeLength } = orgData;
                      editSizeNumRecord.value = {
                        ...orgData,
                        hotChargeLengthArr: JSON.parse(hotChargeLength),
                      };
                      openSetSizeNumModal.value = true;
                    },
                  },
                  subHead.join('/')
                );
              }
              return '';
            },
          };
        });

        // 添加空白列
        otherColumn.push(stackLengthColumn);
        columns.value = [...defaultColumns, ...otherColumn];
        if (rollOneColumns.length) {
          columns.value[4].children = rollOneColumns;
        }
        const allSpan = 12 + rollOneColumns.length + otherColumn.length + stackLengthColumn.children.length;
        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 ? newNNColSpan / 2 : 4;
        flowColSpan.value = newNNColSpan - sizeColSpan.value;
        weightColSpan.value = allSpan - remakeColSpan.value - newNNColSpan;

        // 热送统计
        if (Object.values(rollOneSize).length) {
          hotSendList.value['一'] = Object.values(rollOneSize);
        }
        if (Object.values(rollTwoSize).length) {
          hotSendList.value['二'] = Object.values(rollTwoSize);
        }
        if (Object.values(rollThreeSize).length) {
          hotSendList.value['三'] = Object.values(rollThreeSize);
        }
        if (Object.values(rollShippSize).length) {
          hotSendList.value['上'] = Object.values(rollShippSize);
        }
        if (Object.values(stackingSize)) {
          stackingList.value = Object.values(stackingSize);
        }
      }
      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('请输入数字');
      return;
    }
    if (record.total !== val) {
      const { orgData } = record;
      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)) {
      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;
      }
      handleEdit({
        ...orgData,
        rollClubOneDetails: JSON.stringify(obj),
      });
    }
  }, 800);

  // 修改堆垛定尺数量
  const handleStackChange = throttle((e: any, record, size) => {
    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);
    if (lengthGroupCount === -1) {
      obj.push({
        stackingCount: val,
        stackingLength: size,
        stackingWeight: val * (Number(size) / 1000) * 0.2265,
      });
    } else {
      if (obj[lengthGroupCount].stackingCount === val) return;
      obj[lengthGroupCount].stackingCount = val;
      obj[lengthGroupCount].stackingWeight = val * (Number(size) / 1000) * 0.2265;
    }

    handleEdit({
      ...orgData,
      stackLength: JSON.stringify(obj),
    });
  }, 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) => {
    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了
                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 deleteStackColumn = async (size) => {
    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);
            if (hasStackItem > -1) {
              const lengthGroupCount = obj.filter((m) => m.stackingLength !== size);

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

      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: (k.totalCount * (Number(k.hotChargeLength) / 1000) * 0.2265).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);
    }
  };

  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);
            text-align: center;
            position: relative;
          }

          .size-st-wrapper {
            position: absolute;
            top: 1px;
            left: 1px;
            right: 1px;
            bottom: 1px;

            .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) /* 斜线下方透明 */
              );
            }

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

          // 自定义啊
          .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;
          }
        }
      }

      .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>