dosb-vue/src/views/billet/operator/index.vue

<template>
  <div
    class="operator-app-container"
    :style="{
      '--op-border-color': '#d9d9d9',
      '--op-text-color-fff': '#fff',
    }"
  >
    <a-layout class="operator-large-layout">
      <a-layout-header class="operator-header cover">
        <div class="change-shift print-billet-card">
          <a-button
            type="primary"
            style="margin-right: 20px"
            size="large"
            @click="() => openPrintOriginalRecordsModal(true, { ccmNo, queryType: '1', shiftText, curShiftInfo })"
          >
            原始记录
          </a-button>
          <a-button type="primary" size="large" @click="() => openModal(true, { ccmNo, queryType: '1', shiftText, curShiftInfo })"> 送样卡 </a-button>
        </div>
        <div class="shift-wrapper"> {{ shiftText }} </div>
        <div class="change-shift">
          <a-button type="primary" size="large" danger @click="() => (openJiaobanModal = true)"> 交班 </a-button>
        </div>
        <div class="clock-wrapper">
          <div class="date">{{ clockObj.date }}</div>
          <div class="week">{{ clockObj.week }}</div>
          <div class="time">{{ clockObj.time }}</div>
        </div>
      </a-layout-header>
      <a-layout-content class="operator-content">
        <head-top @onShiftChange="curShiftChange" ref="headTopRef" @lengthChange="(v, auto) => ((lengthList = v), (cuttolength = auto))" />
        <div class="operator-content-wrapper flex">
          <div class="operator-content-left">
            <heat-list
              ref="heatListRef"
              v-if="curShiftInfo.shift && curShiftInfo.shiftGroup"
              :ccmNo="ccmNo"
              :carRef="carRef"
              :lengthList="lengthList"
              :cuttolength="cuttolength"
              @changeLengthSuccess="() => headTopRef && headTopRef.reload()"
              :curShiftInfo="curShiftInfo"
            />
          </div>
          <div class="operator-content-right">
            <car :ccmNo="ccmNo" ref="carRef" />
          </div>
        </div>
      </a-layout-content>
    </a-layout>

    <!-- 打印钢坯送样卡 -->
    <print-billet-sample-card @register="registerPrintModal" />
    <!-- 打印原始数据 -->
    <printOriginalRecords @register="registerPrintOriginalRecordsModal" />
    <!-- 交班 -->
    <a-modal
      v-model:open="openJiaobanModal"
      title="切换牌号"
      centered
      width="400px"
      ok-text="确认"
      :okButtonProps="{ loading: okLoading }"
      cancel-text="取消"
      @ok="confirmChangeShift"
      @cancel="
        () => {
          openJiaobanModal = false;
          newShiftGroup = '';
        }
      "
    >
      <div class="flex justify-center items-center" style="margin: 20px 0">
        <div>选择班组：</div>
        <JSearchSelect type="list" style="width: 277px" v-model:value="newShiftGroup" dict="lg_bz" placeholder="请选择" allowClear />
      </div>
    </a-modal>
  </div>
</template>
<script setup lang="ts" name="OperatorRoom">
  import { onMounted, onUnmounted, ref } from 'vue';
  import { getDateTimeWeek } from '/@/utils/dateUtil';
  import { useTimeoutFn } from '/@/hooks/core/useTimeout';
  import headTop from './components/headTop.vue';
  import car from './components/car.vue';
  import heatList from './components/heatList.vue';
  import { getMachineNum, getMachineDict } from '../hotDelivery/common.data';
  import { changeShift } from '../hotDelivery/hotDelivery.api';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useModal } from '/@/components/Modal';
  import printBilletSampleCard from './components/printBilletSampleCard.vue';
  import printOriginalRecords from './components/printOriginalRecords.vue';
  import JSearchSelect from '/@/components/Form/src/jeecg/components/JSearchSelect.vue';

  const { createConfirm, createMessage } = useMessage();

  // 注册打印送样卡modal
  const [registerPrintModal, { openModal }] = useModal();
  // 注册打印原始记录modal
  const [registerPrintOriginalRecordsModal, { openModal: openPrintOriginalRecordsModal }] = useModal();

  const ccmNo = getMachineNum();

  const carRef = ref();
  const headTopRef = ref();
  const heatListRef = ref();
  // 班次信息
  const shiftText = ref('');
  const curShiftInfo = ref({
    shift: undefined,
    shiftGroup: undefined,
  });
  // 时钟
  const clockObj = ref({
    date: '',
    week: '',
    time: '',
  });

  const lengthList = ref('');
  const cuttolength = ref(2); // 1 手动定尺， 2 自动定尺

  const clock = () => {
    try {
      const dateStr = getDateTimeWeek().split(' ');
      clockObj.value = {
        date: dateStr[0],
        time: dateStr[1],
        week: dateStr[2],
      };

      start();
    } catch (error) {}
  };

  const { start, stop } = useTimeoutFn(clock, 1000);

  // 获取班次信息
  const curShiftChange = (shiftInfo) => {
    if (shiftInfo) {
      const { shift, shiftGroup } = shiftInfo;
      shiftText.value = `${getMachineDict(shift, 'lg_bb')} - ${getMachineDict(shiftGroup, 'lg_bz')}`;
    }
    curShiftInfo.value = shiftInfo;
  };

  // 交班
  const newShiftGroup = ref('');
  const openJiaobanModal = ref(false);
  const okLoading = ref(false);
  const confirmChangeShift = () => {
    if (!newShiftGroup.value) {
      createMessage.error('请选择班组');
      return;
    }

    createConfirm({
      iconType: 'warning',
      title: '交班确认',
      content: '确定要交班吗？',
      onOk: () => {
        return changeShift({
          ccmNo,
          shiftGroup: newShiftGroup.value,
        }).then(() => {
          headTopRef && headTopRef.value.reload();
          carRef && carRef.value.refreshCarList();
          heatListRef && heatListRef.value.reload();

          openJiaobanModal.value = false;
        });
      },
    });
  };

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

  onUnmounted(() => {
    stop();
  });
</script>
<style lang="less" scoped>
  @import '/@/assets/less/font.less';
  @import './index.less';
</style>