dosb-vue/src/views/billet/stackingManage/components/changePosition.vue

<template>
  <basic-modal
    v-bind="$attrs"
    @register="registerModal"
    destroyOnClose
    :title="modalTitle"
    :height="900"
    width="1400px"
    ok-text="保存"
    @ok="handleSubmit"
    :ok-button-props="{ disabled: !curLayerSelectedAddress }"
    @cancel="handleCancel"
  >
    <div class="stacking-modal">
      <a-spin :spinning="isSpinning">
        <div class="selected-divider">
          <a-segmented v-model:value="activeKey" :options="stackingList" />
          <a-row class="selected-divider-row" :gutter="[30, 20]">
            <a-col :span="8" v-for="item in getSelectedData" class="p-stack-col">
              <div class="weizhi">{{ item.address }}</div>
              <a-row
                justify="start"
                class="stacking-list-row"
                :class="{ 'selected-row': curLayerSelectedAddress === item.id }"
                @click="handleStackClick(item)"
              >
                <a-col class="stack-col" :class="{ 'hemp-texture': !!item.steelBillet[0] }" :span="6">{{ item.steelBillet[0] || '' }}</a-col>
                <a-col class="stack-col" :class="{ 'hemp-texture': !!item.steelBillet[1] }" :span="6">{{ item.steelBillet[1] || '' }}</a-col>
                <a-col class="stack-col" :class="{ 'hemp-texture': !!item.steelBillet[2] }" :span="6">{{ item.steelBillet[2] || '' }}</a-col>
                <a-col class="stack-col" :class="{ 'hemp-texture': !!item.steelBillet[3] }" :span="6">{{ item.steelBillet[3] || '' }}</a-col>
              </a-row>
            </a-col>
          </a-row>
          <div class="single-billet-wrap selected-divider-row" v-if="singleBillet == '1'">
            <a-row justify="start" class="single-billet-row stacking-list-row">
              <a-col class="stack-col hemp-texture" v-for="item in singleSelectBillers" :span="6">
                {{ item.billetNo || '' }}
              </a-col>
            </a-row>
          </div>
        </div>
      </a-spin>
    </div>
  </basic-modal>
</template>

<script lang="ts" setup>
  import { computed, ref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { getStackInfo, stackLocationChange } from '/@/views/billet/hotDelivery/hotDelivery.api';
  import ASegmented from 'ant-design-vue/es/segmented/src/segmented';
  import { useMessage } from '/@/hooks/web/useMessage';

  const { createMessage } = useMessage();

  // Emits声明
  const emit = defineEmits(['register', 'success']);
  const modalTitle = ref('');
  const record = ref<Record<string, any>>({});
  // 当前铸机线信息
  const activeKey = ref('1');
  const stackingList = ref<any[]>([]);
  const stackingInfoList = ref<Record<string, any>>({});
  // 定尺
  // 获取堆垛容器加载
  const isSpinning = ref(false);
  // 是否是单支钢坯进行棒线操作
  const singleBillet = ref('4');
  const singleSelectBillers = ref<any[]>([]);

  //表单赋值
  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    try {
      const { basicInfo } = data;
      record.value = basicInfo;
      modalTitle.value = `${basicInfo.layer}层${basicInfo.address}位置 - 更换位置`;

      // 获取当前堆垛信息
      getStackInfoList();
    } catch (error) {
      console.log(error);
    }
  });

  // 获取当前堆垛信息
  const getStackInfoList = async () => {
    isSpinning.value = true;
    const stackingInfo = await getStackInfo({ typeConfigId: record.value.typeConfigId });
    let layerObj = {};
    if (stackingInfo.length) {
      stackingInfo.forEach((item) => {
        if (!layerObj[item.layer]) layerObj[item.layer] = [];

        layerObj[item.layer].push({ ...item, steelBillet: item.billetNos ? item.billetNos.split(',') : [] });
      });
    }
    stackingInfoList.value = layerObj;
    stackingList.value = Object.keys(layerObj)
      .sort((a, b) => Number(a) - Number(b))
      .map((item) => ({ label: `第${item}层`, value: item }));

    const canShowLayer = stackingList.value.filter((item) => layerObj[item.value].some((item) => !!item.billetNos));
    if (canShowLayer.length) {
      activeKey.value = canShowLayer[canShowLayer.length - 1].value;
    }
    isSpinning.value = false;
  };

  // 返回选中的表格数据
  const getSelectedData = computed(() => {
    const key = activeKey.value;
    const newData = stackingInfoList.value[key] ? stackingInfoList.value[key].sort((a, b) => Number(b.address) - Number(a.address)) : [];
    return newData;
  });

  // 选中当前层的位置
  const curLayerSelectedAddress = ref<string | number>('');
  const handleStackClick = (item) => {
    if (item.steelBillet.length || item.billetNos) return;

    curLayerSelectedAddress.value = curLayerSelectedAddress.value === item.id ? '' : item.id;
  };

  const handleCancel = () => {
    curLayerSelectedAddress.value = '';
    closeModal();
  };

  //表单提交事件
  async function handleSubmit() {
    try {
      if (!curLayerSelectedAddress.value) {
        createMessage.warning('请选择位置');
        return;
      }
      const params = {
        stackId: record.value.id,
        locationChangeId: curLayerSelectedAddress.value,
      };
      setModalProps({ confirmLoading: true });
      //提交表单
      await stackLocationChange(params);
      //关闭弹窗
      handleCancel();
    } catch (e) {
      console.log(e);
    } finally {
      setModalProps({ confirmLoading: false });
      //刷新列表
      emit('success');
    }
  }
</script>

<style lang="less" scoped>
  @import '/@/views/billet/hotDelivery/components/metal.less';
  .stacking-modal {
    position: relative;

    .group-zhishu {
      margin-bottom: 20px;
      margin-left: 20px;
    }

    .single-billet-wrap {
      position: absolute;
      top: -30px;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 10;
      background: rgba(51, 51, 51, 0.45);
      display: flex;
      justify-content: center;
      align-items: center;

      .single-billet-row {
        width: 30%;
        height: 80px;
        background: rgba(255, 255, 255, 0.8);
        padding: 20px;

        .delete {
          position: absolute;
          right: 2px;
          top: -10px;
          color: red;
          cursor: pointer;
        }
      }
    }
  }
</style>