|
|
@@ -0,0 +1,193 @@
|
|
|
+<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>
|
