前端页面

liuying

2024-11-25 84138b3f42b218ecc2efaa54ec31a1c1be29e326

前端页面

 LA24030_LuLiPackageLine_Web/src/api/main/ReportCenter/storageView.ts

@@ -1,6 +1,8 @@
import request from '/@/utils/request';
enum Api {
    STORAGE_VIEW='/api/wmsPlaceContainerInfo/list',
    // STORAGE_VIEW='/api/wmsPlaceContainerInfo/list',
    STORAGE_VIEW='/api/wmsBasePlace/listView',

}

// å¢žåŠ åˆ†æ‹£ä¿¡æ¯

 LA24030_LuLiPackageLine_Web/src/api/main/ReportCenter/wmsStockQuan.ts

@@ -3,7 +3,7 @@
  AddWmsStockQuan = '/api/wmsStockQuan/add',
  DeleteWmsStockQuan = '/api/wmsStockQuan/delete',
  UpdateWmsStockQuan = '/api/wmsStockQuan/update',
  PageWmsStockQuan = '/api/wmsStockQuan/pageView',
  PageWmsStockQuan = '/api/wmsStockQuan/page', //888
  PageStockQuanForUse= '/api/wmsStockQuan/getStockQuanPageForUse',
  ListWmsStockQuan = '/api/wmsStockQuan/list',
  DetailWmsStockQuan = '/api/wmsStockQuan/detail',

 LA24030_LuLiPackageLine_Web/src/api/main/WmsOrder/wmsOrderPurchase.ts

@@ -3,8 +3,8 @@
  AddWmsOrderPurchase = '/api/wmsOrderPurchase/add',
  DeleteWmsOrderPurchase = '/api/wmsOrderPurchase/delete',
  UpdateWmsOrderPurchase = '/api/wmsOrderPurchase/update',
  PageWmsOrderPurchase = '/api/wmsOrderPurchase/page',
  ListWmsOrderPurchase = '/api/wmsOrderPurchase/list',
  PageWmsOrderPurchase = '/api/wmsStockQuan/list', ///api/wmsOrderPurchase/page
  ListWmsOrderPurchase = '/api/wmsStockQuan/list',
  DetailWmsOrderPurchase = '/api/wmsOrderPurchase/detail',
  ImportExcelWmsOrderPurchase = '/api/wmsOrderPurchase/importExcel',
  DownloadExcelTemplateWmsOrderPurchase = '/api/wmsOrderPurchase/downloadExcelTemplate',
@@ -39,7 +39,7 @@
export const pageWmsOrderPurchase = (params?: any) => 
    request({
            url: Api.PageWmsOrderPurchase,
            method: 'post',
            method: 'get',
            data: params,
        });


 LA24030_LuLiPackageLine_Web/src/api/main/WmsOrder/wmsOrderPurchaseDetails.ts

@@ -3,7 +3,7 @@
  AddWmsOrderPurchaseDetails = '/api/wmsOrderPurchaseDetails/add',
  DeleteWmsOrderPurchaseDetails = '/api/wmsOrderPurchaseDetails/delete',
  UpdateWmsOrderPurchaseDetails = '/api/wmsOrderPurchaseDetails/update',
  PageWmsOrderPurchaseDetails = '/api/wmsOrderPurchaseDetails/page',
  PageWmsOrderPurchaseDetails = '/api/wmsStockQuan/page',
  PageWmsOrderPurchaseDetailsForRelatedAsn = '/api/WmsOrderPurchaseDetails/PageForRelatedAsn',
  ListWmsOrderPurchaseDetails = '/api/wmsOrderPurchaseDetails/list',
  DetailWmsOrderPurchaseDetails = '/api/wmsOrderPurchaseDetails/detail',
@@ -33,7 +33,7 @@
            data: params,
        });

// åˆ†é¡µæŸ¥è¯¢PO单明细
// 88888888
export const pageWmsOrderPurchaseDetails = (params?: any) => 
    request({
            url: Api.PageWmsOrderPurchaseDetails,

 LA24030_LuLiPackageLine_Web/src/theme/index.scss

@@ -3,7 +3,7 @@
@import 'common/transition.scss';
@import './other.scss';
@import './element.scss';
@import './media/media.scss';
// @import './media/media.scss';
@import './waves.scss';
@import './dark.scss';
@import './iconfont/font_2298093_rnp72ifj3ba.scss';

 LA24030_LuLiPackageLine_Web/src/views/home/index.vue

@@ -1,12 +1,12 @@
<template>
    <div class="home-container layout-pd">
        <el-row :gutter="15" class="home-card-one mb15">		
        <el-row :gutter="15" class="home-card-one mb15">
            <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8" class="home-media home-media-lg">
                <div class="home-card-item flex">
                    <div class="flex-margin flex w100" :class="` home-one-animation${1}`">
                        <div class="flex-auto">
                            <span class="ml5 font16">当日订单总数</span>
                            <div class="font30">{{state.orderNum}}</div>
                            <div class="font30">{{ state.orderNum }}</div>
                        </div>
                    </div>
                </div>
@@ -14,13 +14,13 @@
            <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8" v-for="(v, k) in state.homeOne" :key="k" :class="{ 'home-media home-media-lg': k > 1, 'home-media-sm': k === 1 }">
                <div class="home-card-item flex">
                    <div class="flex-margin flex w100" :class="` home-one-animation${k}`">
                        <div class="flex-auto">							
                        <div class="flex-auto">
                            <div class="mt10">{{ v.num3 }}</div>
                            <span class="font30">{{ v.num2 }}</span>
                            <div class="font16" :style="{ color: v.color1 }">已完成{{ v.num1 }}</div>						
                            <div class="font16" :style="{ color: v.color1 }">已完成{{ v.num1 }}</div>
                        </div>
                        <div class="home-card-item-icon flex">
                            <el-progress type="circle" width="80" :stroke-width="10" :percentage="v.numA" :color="v.color1"/>						
                            <el-progress type="circle" width="80" :stroke-width="10" :percentage="v.numA" :color="v.color1" />
                        </div>
                    </div>
                </div>
@@ -33,7 +33,6 @@
                </div>
            </el-col>
            <el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="8" class="home-media">

                <div class="home-card-item">
                    <div class="home-card-item-title">快捷导航工具</div>
                    <div class="home-monitor">
@@ -50,36 +49,34 @@
                        </div>
                    </div>
                </div>

			
            </el-col>
        </el-row>
        <el-row :gutter="15" class="home-card-three">
            <el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="8">
                <div class="home-card-item">					
                <div class="home-card-item">
                    <div style="height: 100%" ref="homePieRef"></div>
                </div>
            </el-col>
            <el-col :xs="24" :sm="14" :md="14" :lg="16" :xl="16" class="home-media">
                <div class="home-card-item" >					
                    <el-tabs v-model="activeName" @tab-click="handleClick" :lazy="true">	
                <div class="home-card-item">
                    <el-tabs v-model="activeName" @tab-click="handleClick" :lazy="true">
                        <el-tab-pane label="日" name="1">
                            <div class="home-card-item" >					
                                <div style="height: 100%" ref="homeBarRef" id="homeBarRef" v-if="activeName=='1'"></div>
                            <div class="home-card-item">
                                <div style="height: 100%" ref="homeBarRef" id="homeBarRef" v-if="activeName == '1'"></div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="周" name="2">
                            <div class="home-card-item" >					
                                <div style="height: 100%" ref="homeBarRef" id="homeBarRef" v-if="activeName=='2'"></div>
                            <div class="home-card-item">
                                <div style="height: 100%" ref="homeBarRef" id="homeBarRef" v-if="activeName == '2'"></div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="月" name="3">
                            <div class="home-card-item" >					
                                <div style="height: 100%" ref="homeBarRef" id="homeBarRef" v-if="activeName=='3'"></div>
                            <div class="home-card-item">
                                <div style="height: 100%" ref="homeBarRef" id="homeBarRef" v-if="activeName == '3'"></div>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </div>			
                </div>
            </el-col>
        </el-row>
    </div>
@@ -91,105 +88,105 @@
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
import { wmsStockPassMap,wmsHomePageQuery,wmsHomePlaceQuery,wmsTransitionDiagramQuery } from '/@/api/main/inventoryWarning/inventoryWarning';
import type { TabsPaneContext } from 'element-plus'
import { wmsStockPassMap, wmsHomePageQuery, wmsHomePlaceQuery, wmsTransitionDiagramQuery } from '/@/api/main/inventoryWarning/inventoryWarning';
import type { TabsPaneContext } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';
const router = useRouter();
// æŽ¥å£æ•°æ®
const loadingwms = ref(false);
// æŸ¥è¯¢
const handleQuery1 = async () => {
    loadingwms.value = true;
    var res = await wmsHomePageQuery();
    if(res.data.type=="success"){	
        let result = res.data.result || [];
        state.orderNum = result.allOrderNumber || 0
        state.homeOne[0].num1 = result.outtingPlaceNumber || 0
        state.homeOne[0].num2 = result.allOuttingNumber || 0
        state.homeOne[0].numA = Math.round((result.outtingPlaceNumber || 0) / (result.allOuttingNumber || 0) * 10000) / 100 || 0
        state.homeOne[1].num1 = result.warehousingNumber || 0
        state.homeOne[1].num2 = result.allWarehousingNumber || 0
        state.homeOne[1].numA = Math.round((result.warehousingNumber || 0) / (result.allWarehousingNumber || 0)* 10000) / 100 || 0
	
    }
    loadingwms.value = false;
    loadingwms.value = true;
    // var res = await wmsHomePageQuery();
    // if(res.data.type=="success"){
    //     let result = res.data.result || [];
    //     state.orderNum = result.allOrderNumber || 0
    //     state.homeOne[0].num1 = result.outtingPlaceNumber || 0
    //     state.homeOne[0].num2 = result.allOuttingNumber || 0
    //     state.homeOne[0].numA = Math.round((result.outtingPlaceNumber || 0) / (result.allOuttingNumber || 0) * 10000) / 100 || 0
    //     state.homeOne[1].num1 = result.warehousingNumber || 0
    //     state.homeOne[1].num2 = result.allWarehousingNumber || 0
    //     state.homeOne[1].numA = Math.round((result.warehousingNumber || 0) / (result.allWarehousingNumber || 0)* 10000) / 100 || 0

    // }
    loadingwms.value = false;
};
const handleQuery2 = async () => {
loadingwms.value = true;
var res = await wmsHomePlaceQuery();
if(res.data.type=="success"){
    let result = res.data.result || {};	
    nextTick(() => {
        setTimeout(() => {
            initPieChart(result);
        }, 500);
    });
}
loadingwms.value = false;
    loadingwms.value = true;
    // var res = await wmsHomePlaceQuery();
    // if (res.data.type == 'success') {
    //     let result = res.data.result || {};
    //     nextTick(() => {
    //         setTimeout(() => {
    //             initPieChart(result);
    //         }, 500);
    //     });
    // }
    loadingwms.value = false;
};
const dataAll = ref({
    arr1:[],
    arr2:[],
    arr3:[],
    arr4:[],
    arr5:[]
})
const handleQuery3 = async (val:any) => {
    arr1: [],
    arr2: [],
    arr3: [],
    arr4: [],
    arr5: [],
});
const handleQuery3 = async (val: any) => {
    dataAll.value.arr1 = [];
    dataAll.value.arr2 = [];
    dataAll.value.arr3 = [];
    dataAll.value.arr4 = [];
    dataAll.value.arr5 = [];
    loadingwms.value = true;
    let para = {DayOrWeekOrMonth:Number(val)}
    let para = { DayOrWeekOrMonth: Number(val) };
    var res = await wmsStockPassMap(para);
    if(res.data.type=="success"){	
    if (res.data.type == 'success') {
        let result = res.data.result || [];
        result.forEach((item:any,index:number) => {			
            dataAll.value.arr1.push({value:item.inWare,stationName:'s'+item.time})
            dataAll.value.arr2.push({value:item.outWare,stationName:'s'+item.time})
            dataAll.value.arr3.push({value:item.stockNum,stationName:'s'+item.time})	
            dataAll.value.arr4.push({value:item.aveStockNum,stationName:'s'+item.time})		
            dataAll.value.arr5.push(item.date)		
        })	
        result.forEach((item: any, index: number) => {
            dataAll.value.arr1.push({ value: item.inWare, stationName: 's' + item.time });
            dataAll.value.arr2.push({ value: item.outWare, stationName: 's' + item.time });
            dataAll.value.arr3.push({ value: item.stockNum, stationName: 's' + item.time });
            dataAll.value.arr4.push({ value: item.aveStockNum, stationName: 's' + item.time });
            dataAll.value.arr5.push(item.date);
        });
        nextTick(() => {
            setTimeout(() => {
                if (!state.global.dispose.some((b: any) => b === state.global.homeCharThree)) state.global.homeCharThree.dispose();
                initChart()
                initChart();
            }, 500);
        });
    }
    loadingwms.value = false;
};
const handleQuery4 = async () => {
loadingwms.value = true;
var res = await wmsTransitionDiagramQuery();
if(res.data.type=="success"){
    let arr1: any[] = [];
    let arr2: any = [];
    let arrA: any = [];
    let result = res.data.result || [];
    result.forEach((item:any,index:number) => {			
        arr1.push(item.receiptNumber)
        arr2.push(item.deliveryNumber)		
        arrA.push(item.day.slice(0, 10))		
    })
    nextTick(() => {
        setTimeout(() => {
            initLineChart(arr1,arr2,arrA);
        }, 500);
    });
}
loadingwms.value = false;
};  
handleQuery1();
handleQuery2();
handleQuery3('1');
handleQuery4();
const activeName = ref('1')
    loadingwms.value = true;
    var res = await wmsTransitionDiagramQuery();
    if (res.data.type == 'success') {
        let arr1: any[] = [];
        let arr2: any = [];
        let arrA: any = [];
        let result = res.data.result || [];
        result.forEach((item: any, index: number) => {
            arr1.push(item.receiptNumber);
            arr2.push(item.deliveryNumber);
            arrA.push(item.day.slice(0, 10));
        });
        nextTick(() => {
            setTimeout(() => {
                initLineChart(arr1, arr2, arrA);
            }, 500);
        });
    }
    loadingwms.value = false;
};
// handleQuery1();
// handleQuery2();
// handleQuery3('1');
// handleQuery4();
const activeName = ref('1');
const handleClick = (tab: TabsPaneContext, event: Event) => {
  handleQuery3(tab.props.name);
}
    handleQuery3(tab.props.name);
};

// å®šä¹‰å˜é‡å†…容
const homeLineRef = ref();
@@ -200,7 +197,7 @@
const { themeConfig } = storeToRefs(storesThemeConfig);
const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
const state = reactive({
    orderNum:{},
    orderNum: {},
    global: {
        homeChartOne: null,
        homeChartTwo: null,
@@ -211,7 +208,7 @@
        {
            num1: '0',
            num2: '0',
            numA:0,
            numA: 0,
            num3: '出库单数',
            num4: 'fa fa-meetup',
            color1: '#FF6462',
@@ -222,7 +219,7 @@
        {
            num1: '0',
            num2: '0',
            numA:0,
            numA: 0,
            num3: '入库单数',
            num4: 'iconfont icon-ditu',
            color1: '#6690F9',
@@ -254,7 +251,7 @@
            // label: '浅粉红',
            label: '基础数据',
            value: '库位信息',
            route:'/wmsbase/wmsplace',
            route: '/wmsbase/wmsplace',
            // value: '2.1%OBS/M',
            iconColor: '#F72B3F',
        },
@@ -263,7 +260,7 @@
            // label: '深红(猩红)',
            label: '单据管理',
            value: '上架单',
            route:'/wmsOrder/wmsordermovement',
            route: '/wmsOrder/wmsordermovement',
            // value: '30℃',
            iconColor: '#91BFF8',
        },
@@ -273,7 +270,7 @@
            // label: '淡紫红',
            // value: '57%RH',
            value: '库位视图',
            route:'/reportCenter/storageView',
            route: '/reportCenter/storageView',
            iconColor: '#88D565',
        },
        {
@@ -282,7 +279,7 @@
            label: '盘点管理',
            value: '盘点单据',
            // value: '107w',
            route:'/Check/wmsinventorycheckorder',
            route: '/Check/wmsinventorycheckorder',
            iconColor: '#88D565',
        },
        {
@@ -291,7 +288,7 @@
            // label: '中紫罗兰红',
            value: '跟踪码打印',
            // value: '57DB',
            route:'/printCenter/wmsstockquanPrint',
            route: '/printCenter/wmsstockquanPrint',
            iconColor: '#FBD4A0',
        },
        // {
@@ -328,7 +325,7 @@
});

// æŠ˜çº¿å›¾
const initLineChart = (arr1:any,arr2:any,arrA:any) => {
const initLineChart = (arr1: any, arr2: any, arrA: any) => {
    if (!state.global.dispose.some((b: any) => b === state.global.homeChartOne)) state.global.homeChartOne.dispose();
    state.global.homeChartOne = markRaw(echarts.init(homeLineRef.value, state.charts.theme));
    const option = {
@@ -410,21 +407,21 @@
    state.myCharts.push(state.global.homeChartOne);
};
// é¥¼å›¾
const initPieChart = (arr:any) => {
    if(arr==null) return false;
const initPieChart = (arr: any) => {
    if (arr == null) return false;
    if (!state.global.dispose.some((b: any) => b === state.global.homeChartTwo)) state.global.homeChartTwo.dispose();
    state.global.homeChartTwo = markRaw(echarts.init(homePieRef.value, state.charts.theme));
    var getname = ['空库位数量', '空容器库位数量', '存货数量','总库位：1000'];
    var getvalue = [arr.emptyPlaceNumber,arr.containerPlaceNumber, arr.stockPlaceNumber];
    var getname = ['空库位数量', '空容器库位数量', '存货数量', '总库位：1000'];
    var getvalue = [arr.emptyPlaceNumber, arr.containerPlaceNumber, arr.stockPlaceNumber];
    var data = [];
    for (var i = 0; i < getname.length-1; i++) {
    for (var i = 0; i < getname.length - 1; i++) {
        data.push({ name: getname[i], value: getvalue[i] });
    }
    const colorList = ['#51A3FC', '#36C78B', '#FEC279', '#968AF5', '#E790E8'];
    const option = {
        backgroundColor: state.charts.bgColor,
        title: {
            text: '库位占比  æ€»åº“位：'+arr.allPlaceNumber,
            text: '库位占比  æ€»åº“位：' + arr.allPlaceNumber,
            x: 'left',
            textStyle: { fontSize: '15', color: state.charts.color },
        },
@@ -506,7 +503,7 @@
    },
    tooltip: { trigger: 'axis' },
    //legend: { data: ['入库','出库', '库存', '平均'], right: 0 },
    legend: { data: ['上架','下架'], right: 0 },
    legend: { data: ['上架', '下架'], right: 0 },
    grid: { top: 50, right: 80, bottom: 100, left: 60 },
    // grid: { top: 70, right: 80, bottom: 30, left: 80 },
    xAxis: [
@@ -514,7 +511,7 @@
            type: 'category',
            // data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            // data:dataAll.value.arr5,
            data:[],
            data: [],
            boundaryGap: true,
            axisTick: { show: false },
        },
@@ -568,7 +565,7 @@
            //     { value: 2, stationName: 's6' },
            // ],
            // data:dataAll.value.arr1
            data:[],
            data: [],
        },
        {
            name: '下架',
@@ -595,7 +592,7 @@
                color: '#3bbc86',
            },
            // data:dataAll.value.arr2
            data:[],
            data: [],
        },
        // {
        //     name: '平均',
@@ -637,22 +634,22 @@
};
const initChart = () => {
    if (!state.global.dispose.some((b: any) => b === state.global.homeCharThree)) state.global.homeCharThree.dispose();
    const chart = document.getElementById("homeBarRef")
    if (chart!=null) chart.removeAttribute('_echarts_instance_')//解决切换页面echarts不显示的问题
    const chart = document.getElementById('homeBarRef');
    if (chart != null) chart.removeAttribute('_echarts_instance_'); //解决切换页面echarts不显示的问题
    state.global.homeCharThree = markRaw(echarts.init(chart, state.charts.theme));
    //手动赋值
    option.xAxis[0].data = dataAll.value.arr5
    option.series[0].data = dataAll.value.arr1
    option.series[1].data = dataAll.value.arr2
    option.xAxis[0].data = dataAll.value.arr5;
    option.series[0].data = dataAll.value.arr1;
    option.series[1].data = dataAll.value.arr2;
    // option.series[2].data = dataAll.value.arr3
    // option.series[3].data = dataAll.value.arr4
    // ç»˜åˆ¶å›¾è¡¨
    state.global.homeCharThree.setOption(option);
    state.myCharts.push(state.global.homeCharThree);	
}
    state.myCharts.push(state.global.homeCharThree);
};

// æ‰¹é‡è®¾ç½® echarts resize
const routerJupm = (v:any) => {
const routerJupm = (v: any) => {
    router.push(v.route);
};

@@ -675,21 +672,21 @@
let timeInter: any = null;
// é¡µé¢åŠ è½½æ—¶
onMounted(() => {
    initEchartsResize();
    // initEchartsResize();

    timeInter = setInterval(() => {
        nextTick(() => {
            handleQuery1();
            handleQuery2();
            handleQuery3('1');
            handleQuery4();
        });
    }, 15000); //调用频率改为 15秒一次查询。
    // timeInter = setInterval(() => {
    //     nextTick(() => {
    //         handleQuery1();
    //         handleQuery2();
    //         handleQuery3('1');
    //         handleQuery4();
    //     });
    // }, 15000); //调用频率改为 15秒一次查询。
});

onUnmounted(() => {
  clearInterval(timeInter); //销毁
  timeInter = null;
    clearInterval(timeInter); //销毁
    timeInter = null;
});

// ç”±äºŽé¡µé¢ç¼“存原因，keep-alive
@@ -727,8 +724,6 @@
        immediate: true,
    }
);


</script>

<style scoped lang="scss">
@@ -832,4 +827,4 @@
    color: var(--el-text-color-primary);
    border: 1px solid var(--next-border-color-light);
}
</style>
</style>

 LA24030_LuLiPackageLine_Web/src/views/main/PrintCenter/wmsStockQuanPrint/index.vue

@@ -135,57 +135,39 @@
        <el-table-column align="center" width="60" type="selection"  />
        <el-table-column type="index" fixed="left" label="序号" width="55" align="center"/>
        
        <el-table-column prop="snCode" fixed="left" width="230" label="跟踪码"  show-overflow-tooltip="" />
        <el-table-column prop="quantity" label="库存总数"  show-overflow-tooltip="" />
        <el-table-column prop="containerCode" width="100" label="容器编号"  show-overflow-tooltip="" />
        <el-table-column prop="placeName" width="100" label="所在库位"  show-overflow-tooltip="" />
        <el-table-column prop="areaName" width="100" label="所在库区"  show-overflow-tooltip="" />
        <el-table-column prop="materialCode" label="物料编号"  min-width="130px" show-overflow-tooltip="" />
        <el-table-column prop="materialName" label="物料名称"  min-width="130px" show-overflow-tooltip="" />
        
        <el-table-column prop="placeCode" label="库位编码"  show-overflow-tooltip="" />
         <el-table-column prop="inTime" label="进入时间" width="80" :formatter="formatDate_T_Date"  show-overflow-tooltip="" />
        <el-table-column prop="upi" label="部件条码"  show-overflow-tooltip="" />
        <el-table-column prop="detailName" label="部件名称"  show-overflow-tooltip="" />
        <el-table-column prop="planNo" label="批次"  show-overflow-tooltip="" />
        <el-table-column prop="orderId" label="订单号"  show-overflow-tooltip="" />
        <el-table-column prop="packageCode" label="包装号"  show-overflow-tooltip="" />
        <el-table-column prop="length" label="长"  show-overflow-tooltip="" />
        <el-table-column prop="width" label="宽"  show-overflow-tooltip="" />
        <el-table-column prop="thk" label="厚"  show-overflow-tooltip="" />
          <el-table-column prop="stockStatus" label="库存状态"  show-overflow-tooltip="" >
            <template #default="scope">
              {{ getEnumDesc(scope.row.stockStatus, getEnumStockStatusData_Index)}}
              <el-tag>{{ getEnumDesc(scope.row.stockStatus, getEnumStockStatusData_Index)}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="qcStatus" label="质检状态"  show-overflow-tooltip="" >
        <el-table-column prop="stockStatusName" label="库存状态名称"  show-overflow-tooltip="" />
        <el-table-column prop="operReason" label="操作原因"  show-overflow-tooltip="" />
        <el-table-column prop="operUser" label="操作人"  show-overflow-tooltip="" />
         <el-table-column prop="operTime" label="操作时间" width="80" :formatter="formatDate_T_Date"  show-overflow-tooltip="" />
          <el-table-column prop="lockStatus" label="锁定状态"  show-overflow-tooltip="" >
            <template #default="scope">
              {{ getEnumDesc(scope.row.qcStatus, getEnumQCStatusData_Index)}}
              <el-tag>{{ getEnumDesc(scope.row.lockStatus, getEnumLockStatusData_Index)}}</el-tag>
            </template>
          </el-table-column>

        <!-- <el-table-column prop="lockedQty" label="锁定数量"  show-overflow-tooltip="" /> -->

        <!-- todo  åŽé¢çœ‹æ€Žä¹ˆç»Ÿè®¡è¿™ä¸ªåº“存数-->
        <!-- <el-table-column prop="inStockQty" label="在库数量"  show-overflow-tooltip="" />
        <el-table-column prop="outStockQty" label="出库数量"  show-overflow-tooltip="" />
        <el-table-column prop="inStockQty" label="在库数量"  show-overflow-tooltip="" /> -->
        
        <el-table-column prop="supplierBatch" label="供应商批次"  show-overflow-tooltip="" />
        <el-table-column prop="batch" label="批次" min-width="130px" show-overflow-tooltip="" />

         <el-table-column prop="recordInsertTime" label="收货时间" width="80" :formatter="formatDate_T_Date"  show-overflow-tooltip="" />
        <el-table-column prop="supplierCode" label="供应商编号"  show-overflow-tooltip="" />
        <el-table-column prop="supplierName" label="供应商名称"  show-overflow-tooltip="" />
       
        <el-table-column prop="sN_1d" width="180" label="一维条码"  show-overflow-tooltip="" />
        <el-table-column prop="sN_2d" width="180" label="二维条码"  show-overflow-tooltip="" />
        <el-table-column prop="erpOrderNo" label="ERP单号"  show-overflow-tooltip="" />
        <el-table-column prop="erpCode" label="ERP库存地"  show-overflow-tooltip="" />
        
        <el-table-column prop="erpVoucher" width="120" label="ERP凭证"  show-overflow-tooltip="" />
        <!-- <el-table-column prop="actionRemark" label="操作备注"  show-overflow-tooltip="" />
         <el-table-column prop="actionTime" label="操作时间" width="80" :formatter="formatDate_T_Date"  show-overflow-tooltip="" /> -->
        <el-table-column prop="lockReason" label="锁定原因"  show-overflow-tooltip="" />
        <el-table-column prop="lockUser" label="锁定人"  show-overflow-tooltip="" />
         <el-table-column prop="lockTime" label="锁定时间" width="80" :formatter="formatDate_T_Date"  show-overflow-tooltip="" />
        <el-table-column prop="remarks" label="备注"  show-overflow-tooltip="" />
         <el-table-column prop="createTime" label="创建时间" width="130" :formatter="formatDate_T_Time"  show-overflow-tooltip="" />
         <el-table-column prop="updateTime" label="修改时间" width="130" :formatter="formatDate_T_Time"  show-overflow-tooltip="" />
        <el-table-column prop="createUserName" label="创建人"  show-overflow-tooltip="" />
        <el-table-column prop="updateUserName" label="修改人"  show-overflow-tooltip="" />
        <el-table-column label="操作" width="140" align="center" fixed="right" show-overflow-tooltip="" v-if="auth('wmsStockQuan:update') || auth('wmsStockQuan:delete')">
          <template #default="scope">
            <el-button icon="ele-Edit" size="small" text="" type="primary" @click="openEditWmsStockQuan(scope.row)" v-auth="'wmsStockQuan:update'"> ç¼–辑 </el-button>
            <el-button icon="ele-Delete" size="small" text="" type="primary" @click="delWmsStockQuan(scope.row)" v-auth="'wmsStockQuan:delete'"> åˆ é™¤ </el-button>
          </template>
        </el-table-column>
   
      </el-table>
      <el-pagination
                v-model:currentPage="tableParamsWmsStockQuan.page"
@@ -227,8 +209,8 @@
  import commonFunction from '/@/utils/commonFunction';
import { addWmsRecordSncodePrint } from "/@/api/main/PrintCenter/wmsRecordSncodePrint";

  const getEnumStockStatusData_Index = ref<any>([]);
  const getEnumQCStatusData_Index = ref<any>([]);
    const getEnumStockStatusData_Index = ref<any>([]);

    const { getEnumDesc } = commonFunction();
  
@@ -400,9 +382,11 @@
};
/***************************************************[实时库存导出]结束***************************************************/
  // å®žæ—¶åº“存页面加载时

  const getEnumLockStatusData_Index = ref<any>([]);
  onMounted(async () => {
    getEnumStockStatusData_Index.value = (await getAPI(SysEnumApi).apiSysEnumEnumDataListGet('StockStatusEnum')).data.result ?? [];
    getEnumQCStatusData_Index.value = (await getAPI(SysEnumApi).apiSysEnumEnumDataListGet('StockQcStatusEnum')).data.result ?? [];
    getEnumLockStatusData_Index.value = (await getAPI(SysEnumApi).apiSysEnumEnumDataListGet('LockStatusEnum')).data.result ?? [];
  });

  handleQueryWmsStockQuan();

 LA24030_LuLiPackageLine_Web/src/views/main/ReportCenter/storageView/component/ContentView.vue

@@ -1,61 +1,63 @@
<template>
    <div>
        <div v-for="(itemW,indexW) in storageList" :key="indexW">
            <p> å··é“：{{itemW.laneCode}}</p>
            <div v-for="(itemIN,indexIN) in itemW.rows" :key="indexIN" >
                    <div class="content-view" >
                        <!-- æ¯ä¸ªåº“位方块     æŸ¥è¯¢åº“位全部库存 -->
                        <div class="mask100" v-for="(itemSmall,itemSmallIndex) in itemIN.rowLocations2" :key="itemSmallIndex">
							
                            <content-item v-for="item in itemSmall" :key="item.wareLocationCode" :itemData="item"
                            :index="item.wareLocationCode" @show="show(item,item.wareLocationCode)"
						
                            @click="openDialog(item.wareLocationCode)" 

                            :class="'laneCodeBox_' + (item.showInventoryType)">
                            </content-item>
        <!-- åº“位列表 -->

                        </div>
		
        <div v-for="(itemW, indexW) in storageList" :key="indexW">
            <p>巷道：{{ itemW.laneCode }}</p>
            <div v-for="(itemIN, indexIN) in itemW.rows" :key="indexIN">
                <div class="content-view">
                    <!-- æ¯ä¸ªåº“位方块     æŸ¥è¯¢åº“位全部库存 -->
                    <div class="mask100" v-for="(itemSmall, itemSmallIndex) in itemIN.rowLocations2" :key="itemSmallIndex">
                        <content-item
                            v-for="item in itemSmall"
                            :key="item.wareLocationCode"
                            :itemData="item"
                            :index="item.wareLocationCode"
                            @show="show(item, item.wareLocationCode)"
                            @click="openDialog(item.wareLocationCode)"
                            :class="'laneCodeBox_' + item.showInventoryType"
                        >
                        </content-item>
                    </div>
                <div v-if="itemW.rows.length>1" class="stripe stripeM"></div>
                </div>
                <div v-if="itemW.rows.length > 1" class="stripe stripeM"></div>
            </div>
        </div>
        <!-- åº“位悬浮层 -->
        <teleport :to="'#item' + count" v-if="itemVisible">
            <div class="item-detail" v-if="!detailData.isDeleted">
                <p > {{ setKwStauts(detailData.inventoryType) }} </p>
                <p>{{ setKwStauts(detailData.inventoryType) }}</p>
                {{ containerCodeSHsow }}
            </div>
        </teleport>
        <!-- è¯¦æƒ…弹框 -->
        <prop-detail ref="propDetailRef"></prop-detail>

    </div>
</template>
<script lang="ts" setup>
import { ElMessage } from 'element-plus';
import { ref, defineProps, computed, getCurrentInstance } from 'vue'
import ContentItem from './ContentItem.vue'
import { ref, defineProps, computed, getCurrentInstance } from 'vue';
import ContentItem from './ContentItem.vue';
import PropDetail from './propDetail.vue';
const { proxy} :any = getCurrentInstance();// è®¿é—®å®žä¾‹ä¸Šä¸‹æ–‡ proxy同时支持开发 çº¿ä¸ŠçŽ¯å¢ƒ
const { proxy }: any = getCurrentInstance(); // è®¿é—®å®žä¾‹ä¸Šä¸‹æ–‡ proxy同时支持开发 çº¿ä¸ŠçŽ¯å¢ƒ
//props
const props = defineProps({
    contentData: {
        type: Array,
        required: true,
        default: []
    }
})
const containerCodeSHsow = ref('')
        default: [],
    },
});
const containerCodeSHsow = ref('');
//库位列表
const storageList: Record<any, any> = computed(() => props.contentData);
//每个库位详情的显示
const itemVisible = ref(false);
//详情数据
const detailData = ref({} as Record<string, any>)
const detailData = ref({} as Record<string, any>);
//当前选中的库位
const count = ref(String)
const count = ref(String);
//显示 éšè—è¯¦æƒ…
const show = (item: any, index: any) => {
    // console.log('item:'+JSON.stringify(item) )
@@ -64,18 +66,18 @@
        itemVisible.value = true;
        count.value = index;
        detailData.value = item;
        containerCodeSHsow.value  = item.wareContainerCode;
        containerCodeSHsow.value = item.wareContainerCode;
    } else {
        itemVisible.value = false;
        count.value = index;
        detailData.value = {};
        containerCodeSHsow.value  = "";
        containerCodeSHsow.value = '';
    }
}
};

// æ˜¾ç¤ºåº“位状态
const setKwStauts = (type: number): string => {
    let status = ''
    let status = '';
    switch (type) {
        case 0:
            status = '空库位';
@@ -87,13 +89,14 @@
            status = '有货库位（物料）';
    }
    return status;
}
};

//打开窗口
const openDialog = (type: string) => { //托盘号
const openDialog = (type: string) => {
    //托盘号
    if (!type || type == null) {
        ElMessage.warning("不存在托盘号！");
        return
        ElMessage.warning('不存在托盘号！');
        return;
    }
    proxy.$refs['propDetailRef'].openDialog(type);
};
@@ -135,7 +138,6 @@
            margin: 5px;
        }
    }

}

.stripe {
@@ -150,21 +152,20 @@

/*斑马条纹*/
.stripeM {
    background: linear-gradient(#dbd4b4 50%, #f5be6a 50%, );
    background: linear-gradient(#dbd4b4 50%, #f5be6a 50%);
    background-size: 100% 40px;
}
.laneCodeBox_0{
.laneCodeBox_0 {
    visibility: hidden;
}
.laneCodeBox_1{
.laneCodeBox_1 {
    visibility: visible;
}


.mask100{
.mask100 {
    height: 100%;
    display: flex;
    flex-direction: column-reverse;
    flex-direction: column-reverse;
}
// #item3-4-3-3,#item3-4-1-3,#item3-4-2-3,#item3-4-4-3{
//     margin-bottom: 104px;
@@ -173,5 +174,4 @@
//     margin-bottom: 149px;

// }

</style>
</style>

 LA24030_LuLiPackageLine_Web/src/views/main/ReportCenter/storageView/component/CountView.vue

@@ -1,45 +1,45 @@
<template>
    <div class="count">
        <div class="count_item" v-for="(item,index) in  countList" :key="index">
            <div class="square" :style="{background: setBgColor(item.type)}"></div>
            <span>{{item.title}}</span>
            <span class="count_num">{{item.count}}</span>
        <div class="count_item" v-for="(item, index) in countList" :key="index">
            <div class="square" :style="{ background: setBgColor(item.type) }"></div>
            <span>{{ item.title }}</span>
            <span class="count_num">{{ item.count }}</span>
        </div>
    </div>
</template>
<script lang="ts" setup>
import {  defineProps, computed } from 'vue'
import { defineProps, computed } from 'vue';
const props = defineProps({
    countData: {
        type: Array,
        required: true
    }
})
const countList: Record<any, any> = computed(() => props.countData)
//设置背景
        required: true,
    },
});
const countList: Record<any, any> = computed(() => props.countData);
//设置背景    æ­£å¸¸ = 1,  å°å­˜ = 2,   ç¦å‡º = 3,    ç¦å…¥ = 4,    é”å®š = 5
const setBgColor = (type: number): string => {
    let color = ''
    let color = '';
    switch (type) {
        case 0:
            color = '#A2A2A2';
            break;
        case 1:
            color = '#F18201';
            color = '#F18201'; //橘色  æ­£å¸¸
            break;
        case 2:
            color = '#2BA6FF';
            color = '#2BA6FF'; //蓝色 å°å­˜
            break;
        case 3:
            color = '#FFFF00';

            color = '#FFFF00'; //黄色 ç¦å‡º
            break;

        case 4:
            color = '#FF0000';
            color = '#A2A2A2'; //灰色 ç¦å…¥
            break;

        case 5:
            color = '#FF0000'; //红色  é”å®š
            break;
    }
    return color;
}

};
</script>
<style lang="less" scoped>
.count {
@@ -70,4 +70,4 @@
        }
    }
}
</style>
</style>

 LA24030_LuLiPackageLine_Web/src/views/main/ReportCenter/storageView/component/±¸·Ýindex.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,399 @@
<template>
  <div>
      <el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
        <el-form :model="formModel" ref="queryForm" labelWidth="90">
          <el-row>
            <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10">
            <el-form-item label="关键字">
              <el-input v-model="formModel.searchKey" clearable=""
                placeholder="库位编号,容器编号" />
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUIWmsStockQuan">
                        <el-form-item label="所在库区" prop="areaCode">
                            <el-select v-model="formModel.areaCode" placeholder="请选择所在库区">
                                <el-option v-for="(item,index) in arr1"  :key="index" :value="item.code" :label="`[${item.code}] ${item.value}`"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col> 
            <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUIWmsStockQuan">
              <el-form-item label="库位编号:">
                <el-input v-model.trim="formModel.WareLocationCode" placeholder="请输入库位编号" clearable></el-input>
              </el-form-item>
            </el-col>

            <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUIWmsStockQuan">
              <el-form-item label="容器编号:">
                <el-input v-model.trim="formModel.WareContainerCode" placeholder="请输入容器编号" clearable></el-input>
              </el-form-item>
            </el-col>
      
            <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10">
              <el-form-item label="库位状态:">
                <el-select v-model="formModel.inventoryType" clearable placeholder="请选择库位状态"  style="width: 100%;">
                  <el-option v-for="item in storageStatusEnum" :key="item.value" :label="item.title"
                    :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>

            <!-- éšè—çš„筛选条件 -->
            <!-- <template>
              <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10">
                <el-form-item label="锁定状态:">
                  <el-select v-model="formModel.isLocked" clearable placeholder="请选择锁定状态">
                    <el-option v-for="item in isAutoEnum" :key="item.value" :label="item.title" :value="item.value" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10">

                <el-form-item label="巷道:">
                  <el-select v-model="formModel.Lane" clearable placeholder="请选择巷道">
                    <el-option v-for="item in LangEnum" :key="item.value" :label="item.title" :value="item.value" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10">
                <el-form-item label="所属排:">
                  <el-select v-model="formModel.Row" clearable placeholder="请选择所属排">
                    <el-option v-for="(item, index) in strorageRowEnum" :key="item" :label="`第${index + 1}排`"
                      :value="index + 1" />
                  </el-select>
                </el-form-item>
              </el-col>
            </template> -->
            <!-- <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10">
              <el-form-item label-width="20px">
                <el-button type="primary" icon="el-icon-search" @click="getLocationPage(2)">查询</el-button>
                <el-button icon="ele-Refresh" @click="() => formModel = {}"> é‡ç½® </el-button>
              </el-form-item>
            </el-col> -->


            <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" class="mb10">
            <el-form-item>
              <el-button-group style="display: flex; align-items: center">
                <el-button type="primary" icon="ele-Search" @click="getLocationPage(2)">
                  æŸ¥è¯¢
                </el-button>
                <el-button icon="ele-Refresh" @click="() => formModel = {}">
                  é‡ç½®
                </el-button>
                <el-button icon="ele-ZoomIn" @click="changeAdvanceQueryUIWmsStockQuan"
                  v-if="!showAdvanceQueryUIWmsStockQuan" style="margin-left: 5px">
                  é«˜çº§æŸ¥è¯¢
                </el-button>
                <el-button icon="ele-ZoomOut" @click="changeAdvanceQueryUIWmsStockQuan"
                  v-if="showAdvanceQueryUIWmsStockQuan" style="margin-left: 5px">
                  éšè—
                </el-button>
               
              </el-button-group>
            </el-form-item>
          </el-col>

          </el-row>

        </el-form>
      </el-card>

<el-card class="full-table" shadow="hover" style="margin-top: 5px">
  <div class="msi-content" style="height:calc(100vh - 200px)">

<div>
  <p>1#立体库</p>
    <div class="storage-grid">
    <!-- éåŽ†æ¯ä¸€æŽ’ -->
    <div class="row" :class="'rowMy' + rowIndex" v-for="(row, rowIndex) in storageList" :key="rowIndex">
      <!-- éåŽ†æ¯ä¸€å— -->
      <div class="cell " v-for="(cell, cellIndex) in row" :key="cellIndex">
        {{ cell }} <!-- æ˜¾ç¤ºæ¯ä¸ªåº“位的内容 -->
      </div>
    </div>
  </div>
</div>


      <!-- ç»Ÿè®¡åŒºåŸŸ -->
      <count-view :countData="countList"></count-view>
      <!-- åº“位展示 -->
      <content-view :contentData="dataList"></content-view>
    </div>
</el-card>
   
  </div>
</template>
<script lang="ts" setup>
import { nextTick, onMounted, ref } from 'vue'
//import SearchBar from '@/components/SearchBar.vue'
import { getStorageView } from '/@/api/main/ReportCenter/storageView';

import CountView from './component/CountView.vue'
import ContentView from './component/ContentView.vue'
import { ElMessage } from 'element-plus';
import { handleSlectDataWmsArea } from '/@/utils/selectData';

const showAdvanceQueryUIWmsStockQuan = ref(false);
// æ”¹å˜é«˜çº§æŸ¥è¯¢çš„控件显示状态
const changeAdvanceQueryUIWmsStockQuan = () => {
  showAdvanceQueryUIWmsStockQuan.value = !showAdvanceQueryUIWmsStockQuan.value;
};


const LangEnum = ref([  // æ‰€å±žå··é“
  {
    value: '1',
    title: '1巷道'
  },
  {
    value: '2',
    title: '2巷道'
  },
  {
    value: '3',
    title: '3巷道'
  }
])
const isAutoEnum: any[] = [
  {
    title: '否',
    value: 0
  },
  {
    title: '是',
    value: 1
  }
]


//库位状态
const storageStatusEnum = ref([
  {
    value: '0',
    title: '空库位'
  },
  {
    value: '1',
    title: '空容器库位'
  },
  {
    value: '2',
    title: '有货库位'
  },
])

const strorageRowEnum = ref<any>([]) // æ‰€å±žæŽ’
//列表请求数据
const formModel = ref({
  Lane: '',
  Row: '',
  MaterialCode: '',
  inventoryType: '',
  ShelfCode: '',
  Code: '',
  ContainerCode: '',
  Status: '',
  isLocked: '',
  areaCode:"A2",
  PageNo: 1,
  PageSize: 10000
})

//库位列表数据
const dataList = ref([]);
//统计的数据
const countList = ref([
  {
    type: 0,
    title: '空库位:',
    count: 0
  },
  {
    type: 1,
    title: '有货库位（空容器）:',
    count: 0
  },
  {
    type: 2,
    title: '有货库位（物料）:',
    count: 0
  },
  // {
  //   type: 3,
  //   title: '锁定库位:',
  //   count: 0
  // },
  // {
  //   type: 4,
  //   title: '禁用库位:',
  //   count: 0
  // }
]);

// æŒ‰ç…§è¡Œåˆ—相同进行分组
const sortClass = (sortData: any) => {
  const groupBy = (array: any, f: any) => {
    let groups = {};
    array.forEach((o) => {
      let group = JSON.stringify(f(o));
      groups[group] = groups[group] || [];
      groups[group].push(o);
    });
    return Object.keys(groups).map((group) => {
      return groups[group];
    });
  };
  const sorted = groupBy(sortData, (item) => {
    return item.lane + '-' + item.column; // è¿”回需要分组的对象
  });
  return sorted;
};

// åˆ†ç»„前
// console.log(listData);
// åˆ†ç»„后
// console.log(sortClass(listData));

//库位图列表
const getLocationPage = async (param?: any) => {
  if (param && param == 2) {
    if (formModel.value.Lane == "" && formModel.value.Row != "") {
      ElMessage.warning("请选择所属巷道！")
      return
    }
  }

  if(!formModel.value.areaCode){
    ElMessage.warning("请选择所在库区！")
    return
  }

  var res = await getStorageView(Object.assign(formModel.value, {}));
  if (res.data.code == 200) {
    const { data } = res;
    const result = data.result;
    strorageRowEnum.value = new Array(4).fill(0);
    countList.value[0].count = result.emptyLocation || 0;    //空库位
    countList.value[1].count = result.emptyContainerLocation || 0;   //空容器库位
    countList.value[2].count = result.materialLocation || 0;  //有货库位
    // countList.value[3].count = result.lockedLocation || 0; //锁定库位
    // countList.value[4].count = result.disableLocation || 0; //禁用库位
    debugger
    if (res.data.result.lanes) {
      res.data.result.lanes.forEach((element: any) => {
        element.rows.forEach((item: any) => {
          item.rowLocations2 = sortClass(item.rowLocations)
        })
      });
    }
    dataList.value = res.data.result.lanes;

  }

}
getLocationPage()

const resetFormModel = JSON.parse(JSON.stringify(formModel.value));
//重置搜索
const resetForm = () => {
  formModel.value = JSON.parse(JSON.stringify(resetFormModel));
  // getLocationPage()
};

let arr1:any =ref("") //下拉读取接口
// é¡µé¢åŠ è½½æ—¶
onMounted(async () => {
  nextTick(async () => {
    arr1.value = await handleSlectDataWmsArea({
      page: 1,
            pageSize: 1000,
            total: 0,
            IsDisabled:false,
      isVirtually:false,
      areaType:1 //立体库
    }); //下拉读取接口
  });
});







//==================88888888888888======================

const storageList = ref([]); // ç”¨äºŽå­˜æ”¾åº“位的数组

onMounted(() => {
  initializeStorage(); // åœ¨ç»„件挂载后初始化库位数据
});

function initializeStorage() {
  const rows = 3; // æ€»æŽ’æ•°
  const cellsPerRow = 20; // æ¯æŽ’的格子数

  for (let i = 0; i < rows; i++) {
    let row = []; // æ¯æŽ’的格子数组
    for (let j = 1; j <= cellsPerRow; j++) {
      // æ ¹æ®è¡Œæ•°å’Œåˆ—数生成库位名称
      row.push(` ${(i * cellsPerRow) + j}`);
    }
    storageList.value.push(row); // å°†æ¯æŽ’的库位数组推入总数组
  }
}



</script>
<style lang="less" scoped>
.msi-content {
  overflow: auto;
}




.storage-grid {
  width: 48%;
  display: flex;
  flex-direction: column; /* åž‚直排列每一排 */
}

.row {
  display: flex; /* æ°´å¹³æŽ’列每一行 */
}

.cell {
  border: 1px solid black; /* æ¯ä¸ªæ ¼å­çš„黑线 */
  flex: 1; /* æ¯ä¸ªæ ¼å­å®½åº¦ç›¸ç­‰ */
  height: 50px; /* æ¯ä¸ªæ ¼å­çš„高度 */
  display: flex;
  justify-content: center;
  align-items: center; /* å±…中显示内容 */
}


.rowMy0 {
  // background-color: #f9f9f9; /* ç¬¬ä¸€æŽ’的背景色 */
  div{
    height: 120px;
  }
}

.rowMy1 {
  // background-color: #eeeeee; /* ç¬¬äºŒæŽ’的背景色 */
  div{
    height: 50px;
  }
}

.rowMy2 {
  // background-color: #dddddd; /* ç¬¬ä¸‰æŽ’的背景色 */
  div{
    height: 80px;
  }
}
</style>

 LA24030_LuLiPackageLine_Web/src/views/main/ReportCenter/storageView/index.vue

@@ -1,45 +1,43 @@
<template>
  <div>
      <el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
        <el-form :model="formModel" ref="queryForm" labelWidth="90">
          <el-row>
            <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10">
            <el-form-item label="关键字">
              <el-input v-model="formModel.searchKey" clearable=""
                placeholder="库位编号,容器编号" />
            </el-form-item>
          </el-col>
    <div>
        <el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
            <el-form :model="formModel" ref="queryForm" labelWidth="90">
                <el-row>
                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10">
                        <el-form-item label="关键字">
                            <el-input v-model="formModel.searchKey" clearable="" placeholder="库位编号,容器编号" />
                        </el-form-item>
                    </el-col>

          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUIWmsStockQuan">
                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUIWmsStockQuan">
                        <el-form-item label="所在库区" prop="areaCode">
                            <el-select v-model="formModel.areaCode" placeholder="请选择所在库区">
                                <el-option v-for="(item,index) in arr1"  :key="index" :value="item.code" :label="`[${item.code}] ${item.value}`"></el-option>
                                <el-option v-for="(item, index) in arr1" :key="index" :value="item.code" :label="`[${item.code}] ${item.value}`"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col> 
            <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUIWmsStockQuan">
              <el-form-item label="库位编号:">
                <el-input v-model.trim="formModel.WareLocationCode" placeholder="请输入库位编号" clearable></el-input>
              </el-form-item>
            </el-col>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUIWmsStockQuan">
                        <el-form-item label="库位编号:">
                            <el-input v-model.trim="formModel.WareLocationCode" placeholder="请输入库位编号" clearable></el-input>
                        </el-form-item>
                    </el-col>

            <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUIWmsStockQuan">
              <el-form-item label="容器编号:">
                <el-input v-model.trim="formModel.WareContainerCode" placeholder="请输入容器编号" clearable></el-input>
              </el-form-item>
            </el-col>
      
            <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10">
              <el-form-item label="库位状态:">
                <el-select v-model="formModel.inventoryType" clearable placeholder="请选择库位状态"  style="width: 100%;">
                  <el-option v-for="item in storageStatusEnum" :key="item.value" :label="item.title"
                    :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUIWmsStockQuan">
                        <el-form-item label="容器编号:">
                            <el-input v-model.trim="formModel.WareContainerCode" placeholder="请输入容器编号" clearable></el-input>
                        </el-form-item>
                    </el-col>

            <!-- éšè—çš„筛选条件 -->
            <!-- <template>
                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10">
                        <el-form-item label="库位状态:">
                            <el-select v-model="formModel.inventoryType" clearable placeholder="请选择库位状态" style="width: 100%">
                                <el-option v-for="item in storageStatusEnum" :key="item.value" :label="item.title" :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <!-- éšè—çš„筛选条件 -->
                    <!-- <template>
              <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10">
                <el-form-item label="锁定状态:">
                  <el-select v-model="formModel.isLocked" clearable placeholder="请选择锁定状态">
@@ -64,176 +62,228 @@
                </el-form-item>
              </el-col>
            </template> -->
            <!-- <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10">
                    <!-- <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10">
              <el-form-item label-width="20px">
                <el-button type="primary" icon="el-icon-search" @click="getLocationPage(2)">查询</el-button>
                <el-button icon="ele-Refresh" @click="() => formModel = {}"> é‡ç½® </el-button>
              </el-form-item>
            </el-col> -->

                    <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" class="mb10">
                        <el-form-item>
                            <el-button-group style="display: flex; align-items: center">
                                <el-button type="primary" icon="ele-Search" @click="getLocationPage(2)"> æŸ¥è¯¢ </el-button>
                                <el-button icon="ele-Refresh" @click="() => (formModel = {})"> é‡ç½® </el-button>
                                <el-button icon="ele-ZoomIn" @click="changeAdvanceQueryUIWmsStockQuan" v-if="!showAdvanceQueryUIWmsStockQuan" style="margin-left: 5px"> é«˜çº§æŸ¥è¯¢ </el-button>
                                <el-button icon="ele-ZoomOut" @click="changeAdvanceQueryUIWmsStockQuan" v-if="showAdvanceQueryUIWmsStockQuan" style="margin-left: 5px"> éšè— </el-button>
                            </el-button-group>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>

            <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" class="mb10">
            <el-form-item>
              <el-button-group style="display: flex; align-items: center">
                <el-button type="primary" icon="ele-Search" @click="getLocationPage(2)">
                  æŸ¥è¯¢
                </el-button>
                <el-button icon="ele-Refresh" @click="() => formModel = {}">
                  é‡ç½®
                </el-button>
                <el-button icon="ele-ZoomIn" @click="changeAdvanceQueryUIWmsStockQuan"
                  v-if="!showAdvanceQueryUIWmsStockQuan" style="margin-left: 5px">
                  é«˜çº§æŸ¥è¯¢
                </el-button>
                <el-button icon="ele-ZoomOut" @click="changeAdvanceQueryUIWmsStockQuan"
                  v-if="showAdvanceQueryUIWmsStockQuan" style="margin-left: 5px">
                  éšè—
                </el-button>
               
              </el-button-group>
            </el-form-item>
          </el-col>
        <el-card class="full-table" shadow="hover" style="margin-top: 5px">
            <div class="msi-content" style="height: calc(100vh - 200px)">
                <div class="box100">
                    <div v-for="(item, index) in dataList" :key="index" class="box100Inner">
                        <p class="t1">{{ item.laneNo }}#立体库</p>
                        <div class="storage-grid">
                            <div class="row rowMy0">
                                <div class="cell" v-for="(cell, cellIndex) in item.data" :key="cellIndex" v-show="cellIndex < 20">
                                    <span class="textK" 

          </el-row>
                  :style="{ background: setBgColor(cell.placeStatus), boxShadow: '0 1px 1px' + setBgColor(cell.placeStatus) }"
                  >
                                        {{ cell.laneNo }}{{ cell.layerNo }}{{ cell.columnNo }}
                                    </span>
                                </div>
                            </div>
                            <div class="row rowMy1">
                                <div class="cell" v-for="(cell, cellIndex) in item.data" :key="cellIndex" v-show="cellIndex >= 20 && cellIndex < 40">
                                    <span class="textK"   :style="{ background: setBgColor(cell.placeStatus), boxShadow: '0 1px 1px' + setBgColor(cell.placeStatus) }">
                                        {{ cell.laneNo }}{{ cell.layerNo }}{{ cell.columnNo }}
                                    </span>
                                </div>
                            </div>
                            <div class="row rowMy2">
                                <div class="cell" v-for="(cell, cellIndex) in item.data" :key="cellIndex" v-show="cellIndex >= 40 && cellIndex <= 60">
                                    <span class="textK"   :style="{ background: setBgColor(cell.placeStatus), boxShadow: '0 1px 1px' + setBgColor(cell.placeStatus) }">
                                        {{ cell.laneNo }}{{ cell.layerNo }}{{ cell.columnNo }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

        </el-form>
      </el-card>
                <!-- <div>
                    <p>1#立体库</p>
                    <div class="storage-grid">
                        éåŽ†æ¯ä¸€æŽ’
                        <div class="row" :class="'rowMy' + rowIndex" v-for="(row, rowIndex) in storageList" :key="rowIndex">
                            éåŽ†æ¯ä¸€å—
                            <div class="cell" v-for="(cell, cellIndex) in row" :key="cellIndex">
                                {{ cell }}
                            </div>
                        </div>
                    </div>
                </div> -->

<el-card class="full-table" shadow="hover" style="margin-top: 5px">
  <div class="msi-content" style="height:calc(100vh - 200px)">
      <!-- ç»Ÿè®¡åŒºåŸŸ -->
      <count-view :countData="countList"></count-view>
      <!-- åº“位展示 -->
      <content-view :contentData="dataList"></content-view>
    </div>
</el-card>
   
  </div>
                <!-- ç»Ÿè®¡åŒºåŸŸ -->
         <!-- <count-view :countData="countList"></count-view>  -->
                <!-- åº“位展示 -->
                <!-- <content-view :contentData="dataList"></content-view> -->
            </div>
        </el-card>
    </div>
</template>
<script lang="ts" setup>
import { nextTick, onMounted, ref } from 'vue'
import { nextTick, onMounted, ref } from 'vue';
//import SearchBar from '@/components/SearchBar.vue'
import { getStorageView } from '/@/api/main/ReportCenter/storageView';

import CountView from './component/CountView.vue'
import ContentView from './component/ContentView.vue'
import CountView from './component/CountView.vue';
import ContentView from './component/ContentView.vue';
import { ElMessage } from 'element-plus';
import { handleSlectDataWmsArea } from '/@/utils/selectData';

const showAdvanceQueryUIWmsStockQuan = ref(false);
// æ”¹å˜é«˜çº§æŸ¥è¯¢çš„控件显示状态
const changeAdvanceQueryUIWmsStockQuan = () => {
  showAdvanceQueryUIWmsStockQuan.value = !showAdvanceQueryUIWmsStockQuan.value;
    showAdvanceQueryUIWmsStockQuan.value = !showAdvanceQueryUIWmsStockQuan.value;
};
//设置背景    æ­£å¸¸ = 1,  å°å­˜ = 2,   ç¦å‡º = 3,    ç¦å…¥ = 4,    é”å®š = 5
const setBgColor = (type: number): string => {
    let color = '';
    switch (type) {
        case 1:
            color = '#F18201'; //橘色  æ­£å¸¸
            break;
        case 2:
            color = '#2BA6FF'; //蓝色 å°å­˜
            break;
        case 3:
            color = '#FFFF00'; //黄色 ç¦å‡º
            break;

        case 4:
            color = '#A2A2A2'; //灰色 ç¦å…¥
            break;

const LangEnum = ref([  // æ‰€å±žå··é“
  {
    value: '1',
    title: '1巷道'
  },
  {
    value: '2',
    title: '2巷道'
  },
  {
    value: '3',
    title: '3巷道'
  }
])
        case 5:
            color = '#FF0000'; //红色  é”å®š
            break;
    }
    return color;
};
const LangEnum = ref([
    // æ‰€å±žå··é“
    {
        value: '1',
        title: '1巷道',
    },
    {
        value: '2',
        title: '2巷道',
    },
    {
        value: '3',
        title: '3巷道',
    },
]);
const isAutoEnum: any[] = [
  {
    title: '否',
    value: 0
  },
  {
    title: '是',
    value: 1
  }
]

    {
        title: '否',
        value: 0,
    },
    {
        title: '是',
        value: 1,
    },
];

//库位状态
const storageStatusEnum = ref([
  {
    value: '0',
    title: '空库位'
  },
  {
    value: '1',
    title: '空容器库位'
  },
  {
    value: '2',
    title: '有货库位'
  },
])
    {
        value: '0',
        title: '空库位',
    },
    {
        value: '1',
        title: '空容器库位',
    },
    {
        value: '2',
        title: '有货库位',
    },
]);

const strorageRowEnum = ref<any>([]) // æ‰€å±žæŽ’
const strorageRowEnum = ref<any>([]); // æ‰€å±žæŽ’
//列表请求数据
const formModel = ref({
  Lane: '',
  Row: '',
  MaterialCode: '',
  inventoryType: '',
  ShelfCode: '',
  Code: '',
  ContainerCode: '',
  Status: '',
  isLocked: '',
  areaCode:"A2",
  PageNo: 1,
  PageSize: 10000
})
    Lane: '',
    Row: '',
    MaterialCode: '',
    inventoryType: '',
    ShelfCode: '',
    Code: '',
    ContainerCode: '',
    Status: '',
    isLocked: '',
    areaCode: 'A2',
    PageNo: 1,
    PageSize: 10000,
});

//库位列表数据
const dataList = ref([]);
//统计的数据
const countList = ref([
  {
    type: 0,
    title: '空库位:',
    count: 0
  },
  {
    type: 1,
    title: '有货库位（空容器）:',
    count: 0
  },
  {
    type: 2,
    title: '有货库位（物料）:',
    count: 0
  },
  // {
  //   type: 3,
  //   title: '锁定库位:',
  //   count: 0
  // },
  // {
  //   type: 4,
  //   title: '禁用库位:',
  //   count: 0
  // }
    {
        type: 0,
        title: '空库位:',
        count: 0,
    },
    {
        type: 1,
        title: '有货库位（空容器）:',
        count: 0,
    },
    {
        type: 2,
        title: '有货库位（物料）:',
        count: 0,
    },
    // {
    //   type: 3,
    //   title: '锁定库位:',
    //   count: 0
    // },
    // {
    //   type: 4,
    //   title: '禁用库位:',
    //   count: 0
    // }
]);

// æŒ‰ç…§è¡Œåˆ—相同进行分组
const sortClass = (sortData: any) => {
  const groupBy = (array: any, f: any) => {
    let groups = {};
    array.forEach((o) => {
      let group = JSON.stringify(f(o));
      groups[group] = groups[group] || [];
      groups[group].push(o);
    });
    return Object.keys(groups).map((group) => {
      return groups[group];
    });
  };
  const sorted = groupBy(sortData, (item) => {
    return item.lane + '-' + item.column; // è¿”回需要分组的对象
  });
  return sorted;
    const groupBy = (array: any, f: any) => {
        let groups = {};
        array.forEach((o) => {
            let group = JSON.stringify(f(o));
            groups[group] = groups[group] || [];
            groups[group].push(o);
        });
        return Object.keys(groups).map((group) => {
            return groups[group];
        });
    };
    const sorted = groupBy(sortData, (item) => {
        return item.lane + '-' + item.column; // è¿”回需要分组的对象
    });
    return sorted;
};

// åˆ†ç»„前
@@ -243,69 +293,200 @@

//库位图列表
const getLocationPage = async (param?: any) => {
  if (param && param == 2) {
    if (formModel.value.Lane == "" && formModel.value.Row != "") {
      ElMessage.warning("请选择所属巷道！")
      return
    }
  }
    // if (param && param == 2) {
    //   if (formModel.value.Lane == "" && formModel.value.Row != "") {
    //     ElMessage.warning("请选择所属巷道！")
    //     return
    //   }
    // }

  if(!formModel.value.areaCode){
    ElMessage.warning("请选择所在库区！")
    return
  }
    // if(!formModel.value.areaCode){
    //   ElMessage.warning("请选择所在库区！")
    //   return
    // }
    //设置背景
	
    var res = await getStorageView(Object.assign(formModel.value, {}));
    if (res.data.code == 200) {
        const { data } = res;
        const result = data.result;

  var res = await getStorageView(Object.assign(formModel.value, {}));
  if (res.data.code == 200) {
    const { data } = res;
    const result = data.result;
    strorageRowEnum.value = new Array(4).fill(0);
    countList.value[0].count = result.emptyLocation || 0;    //空库位
    countList.value[1].count = result.emptyContainerLocation || 0;   //空容器库位
    countList.value[2].count = result.materialLocation || 0;  //有货库位
    // countList.value[3].count = result.lockedLocation || 0; //锁定库位
    // countList.value[4].count = result.disableLocation || 0; //禁用库位
    debugger
    if (res.data.result.lanes) {
      res.data.result.lanes.forEach((element: any) => {
        element.rows.forEach((item: any) => {
          item.rowLocations2 = sortClass(item.rowLocations)
        })
      });
    }
    dataList.value = res.data.result.lanes;
        // å‡è®¾ result æ˜¯ä¸€ä¸ªåŒ…含多个对象的数组，每个对象都有 LaneNo å’Œ ColumnNo å±žæ€§
        const groupedResult = [];

  }
        // æŒ‰ LaneNo åˆ†ç»„  è¾“出结构
        // {
        //   'laneNo':1,
        //   'data': [{ }, {}, {}]
        // }

}
getLocationPage()
        // å‡è®¾ç»“果数据存储在 result æ•°ç»„中

        // æŒ‰ laneNo åˆ†ç»„
        result.forEach((item) => {
            const laneNo = item.laneNo;

            // æŸ¥æ‰¾æ˜¯å¦å·²ç»æœ‰è¯¥ laneNo çš„对象
            let laneGroup = groupedResult.find((group) => group.laneNo == laneNo);

            // å¦‚果没有，创建一个新的分组
            if (!laneGroup) {
                laneGroup = { laneNo: laneNo, data: [] };
                groupedResult.push(laneGroup);
            }

            // å°†å½“前项添加到对应的分组的 data æ•°ç»„中
            laneGroup.data.push(item);
        });

        // æœ€ç»ˆè¾“出结构
        console.log(8888888);
        console.log(groupedResult);

        //  groupedResult åˆ†ç»„按 data中的columnNo å†ç»„  å°†æ¯ç»„20 ä¸ªå…ƒç´ 

        function initializeStorage3() {
            const rows = 3; // æ€»æŽ’æ•°
            const cellsPerRow = 20; // æ¯æŽ’的格子数

            for (let i = 0; i < rows; i++) {
                let row = []; // æ¯æŽ’的格子数组
                for (let j = 1; j <= cellsPerRow; j++) {
                    // æ ¹æ®è¡Œæ•°å’Œåˆ—数生成库位名称
                    row.push(` ${i * cellsPerRow + j}`);
                }
                storageList.value.push(row); // å°†æ¯æŽ’的库位数组推入总数组
            }
        }

        dataList.value = groupedResult; // å¦‚果要将结果赋值给 dataList

        // const finalResult = [];

        // æœ€ç»ˆç»“æžœ

        // ColumnNo 60
        // result æŒ‰ç…§LaneNo分组
        // å†æŒ‰ç…§ColumnNo åˆ†ç»„  ç¬¬ä¸€ç»„ 20个  ç¬¬äºŒç»„ 20个  ç¬¬ä¸‰ç»„ 20个

        // dataList.value = result;

        // strorageRowEnum.value = new Array(4).fill(0);
        // countList.value[0].count = result.emptyLocation || 0;    //空库位
        // countList.value[1].count = result.emptyContainerLocation || 0;   //空容器库位
        // countList.value[2].count = result.materialLocation || 0;  //有货库位
        // // countList.value[3].count = result.lockedLocation || 0; //锁定库位
        // // countList.value[4].count = result.disableLocation || 0; //禁用库位
        // if (res.data.result.lanes) {
        //   res.data.result.lanes.forEach((element: any) => {
        //     element.rows.forEach((item: any) => {
        //       item.rowLocations2 = sortClass(item.rowLocations)
        //     })
        //   });
        // }
        // dataList.value = res.data.result;
    }
};
getLocationPage();

const resetFormModel = JSON.parse(JSON.stringify(formModel.value));
//重置搜索
const resetForm = () => {
  formModel.value = JSON.parse(JSON.stringify(resetFormModel));
  // getLocationPage()
    formModel.value = JSON.parse(JSON.stringify(resetFormModel));
    // getLocationPage()
};

let arr1:any =ref("") //下拉读取接口
let arr1: any = ref(''); //下拉读取接口
// é¡µé¢åŠ è½½æ—¶
onMounted(async () => {
  nextTick(async () => {
    arr1.value = await handleSlectDataWmsArea({
      page: 1,
            pageSize: 1000,
            total: 0,
            IsDisabled:false,
      isVirtually:false,
      areaType:1 //立体库
    }); //下拉读取接口
  });
onMounted(async () => {});

//==================88888888888888======================

const storageList = ref([]); // ç”¨äºŽå­˜æ”¾åº“位的数组

onMounted(() => {
    initializeStorage(); // åœ¨ç»„件挂载后初始化库位数据
});

function initializeStorage() {
    const rows = 3; // æ€»æŽ’æ•°
    const cellsPerRow = 20; // æ¯æŽ’的格子数

    for (let i = 0; i < rows; i++) {
        let row = []; // æ¯æŽ’的格子数组
        for (let j = 1; j <= cellsPerRow; j++) {
            // æ ¹æ®è¡Œæ•°å’Œåˆ—数生成库位名称
            row.push(` ${i * cellsPerRow + j}`);
        }
        storageList.value.push(row); // å°†æ¯æŽ’的库位数组推入总数组
    }
}
console.log(66666666);

console.log(storageList.value);
</script>
<style lang="less" scoped>
.msi-content {
  overflow: auto;
    overflow: auto;
}
</style>

.storage-grid {
    display: flex;
    flex-direction: column; /* åž‚直排列每一排 */
    width: 610px;
    // border: 1px solid red;
}

.row {
    display: block; /* æ°´å¹³æŽ’列每一行 */
}

.cell {
    border: 1px solid gray; /* æ¯ä¸ªæ ¼å­çš„黑线 */
    height: 50px; /* æ¯ä¸ªæ ¼å­çš„高度 */
    display: inline-block;
    justify-content: center;
    align-items: center; /* å±…中显示内容 */
    width: 30px;
}

.rowMy0 {
    // background-color: #f9f9f9; /* ç¬¬ä¸€æŽ’的背景色 */
    div {
        height: 120px;
    }
}

.rowMy1 {
    // background-color: #eeeeee; /* ç¬¬äºŒæŽ’的背景色 */
    div {
        height: 50px;
    }
}

.rowMy2 {
    // background-color: #dddddd; /* ç¬¬ä¸‰æŽ’的背景色 */
    div {
        height: 80px;
    }
}

.box100 {
    .box100Inner {
        display: inline-block;
        // width: 50%;
    }
}
.t1 {
    margin: 10px 0 2px 0;
}
.textK {
    display: flex; /* ä½¿ç”¨ Flexbox å¸ƒå±€ */
    flex-direction: column;
    font-size: 12px;
    text-align: center;
  width: 100%;
  height: 100%; 
  color: white;
}
</style>

 LA24030_LuLiPackageLine_Web/src/views/main/WmsBase/wmsSubstituteGood/index.vue

@@ -1,240 +1,252 @@
<template>
  <div class="wmsSubstituteGood-container">
    <el-card shadow="hover" :body-style="{ paddingBottom: '0' }"> 
      <el-form :model="queryParams" ref="queryForm" labelWidth="100">
        <el-row>
          <el-col :xs="24" :sm="12" :md="12" :lg="10" :xl="4" class="mb10">
            <el-form-item label="关键字">
              <el-input v-model="queryParams.searchKey" clearable="" placeholder="物料编号,物料名称,替代品物料编号,替代品物料名称"/>
              
            </el-form-item>
          </el-col>
          <!-- <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
            <el-form-item label="物料编号">
              <el-select clearable="" v-model="queryParams.materialCode" placeholder="请选择物料编号">
                <el-option v-for="(item,index) in dl('')" :key="index" :value="item.code" :label="`[${item.code}] ${item.value}`" />
                
              </el-select>
              
            </el-form-item>
          </el-col> -->
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
            <el-form-item label="物料编号">
              <el-input v-model="queryParams.materialCode" clearable="" placeholder="请输入物料编号"/>
              
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
            <el-form-item label="物料名称">
              <el-input v-model="queryParams.materialName" clearable="" placeholder="请输入物料名称"/>
              
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
            <el-form-item label="替代品物料编号">
              <el-input v-model="queryParams.substituteMaterialCode" clearable="" placeholder="请输入替代品物料编号"/>
              
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
            <el-form-item label="替代品物料名称">
              <el-input v-model="queryParams.substituteMaterialName" clearable="" placeholder="请输入替代品物料名称"/>
              
            </el-form-item>
          </el-col>
          <!-- <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
                                <el-form-item label="是否禁用">
                                  <el-select clearable="" v-model="queryParams.isDisabled" placeholder="请选择是否禁用">
                                    <el-option v-for="(item,index) in getIsDisabledData" :key="index" :value="item.value" :label="`${item.text}`" />
		  		  		        
                                  </el-select>
		  		  		      
                                </el-form-item>
                              </el-col> -->
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" class="mb10">
            <el-form-item>
              <el-button-group style="display: flex; align-items: center;">
                <el-button type="primary"  icon="ele-Search" @click="handleQuery" v-auth="'wmsSubstituteGood:page'"> æŸ¥è¯¢ </el-button>
                      <el-button icon="ele-Refresh" @click="() => queryParams = {}"> é‡ç½® </el-button>
    <div class="wmsSubstituteGood-container">
        <el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
            <el-form :model="queryParams" ref="queryForm" labelWidth="100">
                <el-row>
                    <el-col :xs="24" :sm="12" :md="12" :lg="10" :xl="4" class="mb10">
                        <el-form-item label="物料码">
                            <el-input v-model="queryParams.searchKey" clearable="" placeholder="请物料码" />
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" class="mb10">
                        <el-form-item>
                            <el-button-group style="display: flex; align-items: center">
                                <el-button type="primary" icon="ele-Search" @click="handleQuery"> æŸ¥è¯¢ </el-button>
                                <!-- <el-button icon="ele-Refresh" @click="() => queryParams = {}"> é‡ç½® </el-button>
                        <el-button icon="ele-ZoomIn" @click="changeAdvanceQueryUI" v-if="!showAdvanceQueryUI" style="margin-left:5px;"> é«˜çº§æŸ¥è¯¢ </el-button>
                        <el-button icon="ele-ZoomOut" @click="changeAdvanceQueryUI" v-if="showAdvanceQueryUI" style="margin-left:5px;"> éšè— </el-button>
                <!-- <el-button type="primary" style="margin-left:5px;" icon="ele-Plus" @click="openAddWmsSubstituteGood" v-auth="'wmsSubstituteGood:add'"> æ–°å¢ž </el-button> -->
                
              </el-button-group>
            </el-form-item>
            
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card class="full-table" shadow="hover" style="margin-top: 5px">
      <el-table
                :data="tableData"
                style="width: 100%"
                v-loading="loading"
                tooltip-effect="light"
                                row-key="id"
                @sort-change="sortChange"
                border="">
        <el-table-column type="index" label="序号" width="55" align="center"/>
        <el-table-column prop="substituteCode" label="替代编号" min-width="120px" show-overflow-tooltip="" />
          <el-table-column prop="materialCode" label="物料编号" min-width="120px" show-overflow-tooltip="" >
            <template #default="scope">
              {{ scope.row.materialCode }}
              <!-- <el-tag :type="di('', )?.tagType"> {{di("", scope.row.materialCode)?.value}} </el-tag> -->
            </template>
          </el-table-column>
        <el-table-column prop="materialName" label="物料名称" min-width="120px"  show-overflow-tooltip="" />
        <el-table-column prop="substituteMaterialCode" min-width="130px" label="替代品物料编号"  show-overflow-tooltip="" />
        <el-table-column prop="substituteMaterialName" min-width="130px" label="替代品物料名称"  show-overflow-tooltip="" />
        <el-table-column prop="substituteIndex" label="替代次序"  show-overflow-tooltip="" />
        <!-- <el-table-column prop="versionNO" label="版本号"  show-overflow-tooltip="" />
        <el-table-column prop="isDisabled" label="是否禁用"  show-overflow-tooltip="">
          <template #default="scope">
            <el-tag v-if="scope.row.isDisabled"> æ˜¯ </el-tag>
            <el-tag type="danger" v-else> å¦ </el-tag>
            
          </template>
          
        </el-table-column> -->
        <el-table-column prop="createTime" label="创建时间"  show-overflow-tooltip=""  width="130px" />
        <el-table-column prop="updateTime" label="修改时间"  show-overflow-tooltip=""  width="130px" />
        <el-table-column prop="createUserName" label="创建人"  show-overflow-tooltip=""/>
        <el-table-column prop="updateUserName" label="修改人"  show-overflow-tooltip="" />
        <!-- <el-table-column label="操作" width="140" align="center" fixed="right" show-overflow-tooltip="" v-if="auth('wmsSubstituteGood:update') || auth('wmsSubstituteGood:delete')">
          <template #default="scope">
            <el-button icon="ele-Edit" size="small" text="" type="primary" @click="openEditWmsSubstituteGood(scope.row)" v-auth="'wmsSubstituteGood:update'"> ç¼–辑 </el-button>
            <el-button icon="ele-Delete" size="small" text="" type="primary" @click="delWmsSubstituteGood(scope.row)" v-auth="'wmsSubstituteGood:delete'"> åˆ é™¤ </el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <el-pagination
                v-model:currentPage="tableParams.page"
                v-model:page-size="tableParams.pageSize"
                :total="tableParams.total"
                :page-sizes="[10, 20, 50, 100, 200, 500]"
                small=""
                background=""
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                layout="total, sizes, prev, pager, next, jumper"
    />
      <printDialog
        ref="printDialogRef"
        :title="printWmsSubstituteGoodTitle"
        @reloadTable="handleQuery" />
      <editDialog
        ref="editDialogRef"
        :title="editWmsSubstituteGoodTitle"
        @reloadTable="handleQuery"
      />
    </el-card>
  </div>
                        <el-button icon="ele-ZoomOut" @click="changeAdvanceQueryUI" v-if="showAdvanceQueryUI" style="margin-left:5px;"> éšè— </el-button> -->
                                <!-- <el-button type="primary" style="margin-left:5px;" icon="ele-Plus" @click="openAddWmsSubstituteGood" v-auth="'wmsSubstituteGood:add'"> æ–°å¢ž </el-button> -->
                            </el-button-group>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>
        <el-card class="full-table" shadow="hover" style="margin-top: 5px">
            <div class="detailBox">
                <ul>
                    <!-- <li v-for="(item,index) in sourceEnum" :key="index"> 
          {{ titleP[index] }} :  {{ warehousOrderDetails[item] }} 
        </li> -->
                    <li>
                        <span class="text_left">物料编号:</span>
                        <span class="text_rt">{{ tableData.Info16 }}</span>
                    </li>
                    <li>
                        <span class="text_left">齐包:</span>
                        <span class="text_rt">{{ tableData.planNo }}</span>
                    </li>
                    <li>
                        <span class="text_left">齐套:</span>
                        <span class="text_rt">{{ tableData.planNo }}</span>
                    </li>
                    <li>
                        <span class="text_left">批次号:</span>
                        <span class="text_rt">{{ tableData.planNo }}</span>
                    </li>
                    <li>
                        <span class="text_left">订单号:</span>
                        <span class="text_rt">{{ tableData.OrderId }}</span>
                    </li>
                    <li>
                        <span class="text_left">部件条码:</span>
                        <span class="text_rt">{{ tableData.upi }}</span>
                    </li>

                    <li>
                        <span class="text_left">部件名称:</span>
                        <span class="text_rt">{{ tableData.DetailName }}</span>
                    </li>
                    <li>
                        <span class="text_left">客户名称:</span>
                        <span class="text_rt">{{ tableData.Info10 }}</span>
                    </li>

                    <li>
                        <span class="text_left">长:</span>
                        <span class="text_rt">{{ ruleForm.length }}</span>
                    </li>
                    <li>
                        <span class="text_left">宽:</span>
                        <span class="text_rt">{{ ruleForm.width }}</span>
                    </li>
                    <li>
                        <span class="text_left">厚:</span>
                        <span class="text_rt">{{ ruleForm.thk }}</span>
                    </li>
                    <li>
                        <span class="text_left">部件纹理:</span>
                        <span class="text_rt">{{ ruleForm.matgrid }}</span>
                    </li>
                    <li>
                        <span class="text_left">是否封边:</span>
                        <span class="text_rt">{{ ruleForm.isEB }}</span>
                    </li>
                    <li>
                        <span class="text_left">打孔设备编号:</span>
                        <span class="text_rt">{{ ruleForm.dRNum }}</span>
                    </li>
                </ul>
            </div>
            <!-- ç”Ÿæˆform é½å¥— é½åŒ… è®¾ç½®ng包 -->
            <!-- ç”Ÿæˆform é½å¥— é½åŒ… è®¾ç½®ng包 -->
            <!-- <el-form :model="ruleForm" ref="ruleFormRef" label-width="auto" :rules="rules">
      <el-row :gutter="35">
        <el-form-item v-show="false">
          <el-input v-model="ruleForm.id" />
        </el-form-item>

        <el-form-item label="齐套" prop="completeSet">
          <el-select v-model="ruleForm.completeSet" placeholder="请选择齐套">
            <el-option label="选项1" value="option1"></el-option>
            <el-option label="选项2" value="option2"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="齐包" prop="packageSetup">
          <el-input v-model="ruleForm.packageSetup" placeholder="请输入齐包设置"></el-input>
        </el-form-item>

        <el-form-item label="ng包" prop="ngPackage">
          <el-input v-model="ruleForm.ngPackage" placeholder="请输入ng包"></el-input>
        </el-form-item>
        
      </el-row>
    </el-form> -->
        </el-card>
    </div>
</template>

<script lang="ts" setup="" name="wmsSubstituteGood">
  import { ref } from "vue";
  import { ElMessageBox, ElMessage } from "element-plus";
  import { auth } from '/@/utils/authFunction';
  import { getDictDataItem as di, getDictDataList as dl } from '/@/utils/dict-utils';
  import { formatDate } from '/@/utils/formatTime';
import { ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { auth } from '/@/utils/authFunction';
import { getDictDataItem as di, getDictDataList as dl } from '/@/utils/dict-utils';
import { formatDate } from '/@/utils/formatTime';
import { listMes_BatchOrderUPI_New, deleteMes_BatchOrderUPI_New, importExcelMes_BatchOrderUPI_New, downloadExcelTemplateMes_BatchOrderUPI_New } from '/@/api/main/WmsOrder/mes_BatchOrderUPI_New';
import printDialog from '/@/views/system/print/component/hiprint/preview.vue';
import editDialog from '/@/views/main/WmsBase/wmsSubstituteGood/component/editDialog.vue';
import { pageWmsSubstituteGood, deleteWmsSubstituteGood } from '/@/api/main/WmsBase/wmsSubstituteGood';

const showAdvanceQueryUI = ref(false);
const printDialogRef = ref();
const editDialogRef = ref();
const loading = ref(false);
const tableData = ref<any>([]);
const queryParams = ref<any>({});
const tableParams = ref({
    page: 1,
    pageSize: 10,
    total: 0,
});
const getIsDisabledData = [
    {
        value: true,
        text: '是',
    },
    {
        value: false,
        text: '否',
    },
];
const printWmsSubstituteGoodTitle = ref('');
const editWmsSubstituteGoodTitle = ref('');

  import printDialog from '/@/views/system/print/component/hiprint/preview.vue'
  import editDialog from '/@/views/main/WmsBase/wmsSubstituteGood/component/editDialog.vue'
  import { pageWmsSubstituteGood, deleteWmsSubstituteGood } from '/@/api/main/WmsBase/wmsSubstituteGood';
// æ”¹å˜é«˜çº§æŸ¥è¯¢çš„控件显示状态
const changeAdvanceQueryUI = () => {
    showAdvanceQueryUI.value = !showAdvanceQueryUI.value;
};

// æŸ¥è¯¢æ“ä½œ 888888888
const handleQuery = async () => {
  console.log("查询");
    loading.value = true;
    var res = await listMes_BatchOrderUPI_New(Object.assign(queryParams.value, tableParams.value));
    if (res.data.result.length != 1) {
        ElMessage.warning('没有查询到数据');
    tableData.value =  []
    return;
    }
    tableData.value = res.data.result[0] ?? [];
    loading.value = false;
};

  const showAdvanceQueryUI = ref(false);
  const printDialogRef = ref();
  const editDialogRef = ref();
  const loading = ref(false);
  const tableData = ref<any>([]);
  const queryParams = ref<any>({});
  const tableParams = ref({
    page: 1,
    pageSize: 10,
    total: 0,
  });
  const getIsDisabledData = [{
      "value":true,"text":"是"
  },{
      "value":false,"text":"否"
  }]
  const printWmsSubstituteGoodTitle = ref("");
  const editWmsSubstituteGoodTitle = ref("");

  // æ”¹å˜é«˜çº§æŸ¥è¯¢çš„控件显示状态
  const changeAdvanceQueryUI = () => {
    showAdvanceQueryUI.value = !showAdvanceQueryUI.value;
  }
  

  // æŸ¥è¯¢æ“ä½œ
  const handleQuery = async () => {
    loading.value = true;
    var res = await pageWmsSubstituteGood(Object.assign(queryParams.value, tableParams.value));
    tableData.value = res.data.result?.items ?? [];
    tableParams.value.total = res.data.result?.total;
    loading.value = false;
  };

  // åˆ—排序
  const sortChange = async (column: any) => {
// åˆ—排序
const sortChange = async (column: any) => {
    queryParams.value.field = column.prop;
    queryParams.value.order = column.order;
    await handleQuery();
  };
};

  // æ‰“开新增页面
  const openAddWmsSubstituteGood = () => {
    editWmsSubstituteGoodTitle.value = '添加替代品管理';
    editDialogRef.value.openDialog({});
  };
// æ‰“开新增页面
const openAddWmsSubstituteGood = () => {
    editWmsSubstituteGoodTitle.value = '添加替代品管理';
    editDialogRef.value.openDialog({});
};

  // æ‰“开打印页面
  const openPrintWmsSubstituteGood = async (row: any) => {
    printWmsSubstituteGoodTitle.value = '打印替代品管理';
  }
  
  // æ‰“开编辑页面
  const openEditWmsSubstituteGood = (row: any) => {
    editWmsSubstituteGoodTitle.value = '编辑替代品管理';
    editDialogRef.value.openDialog(row);
  };
// æ‰“开打印页面
const openPrintWmsSubstituteGood = async (row: any) => {
    printWmsSubstituteGoodTitle.value = '打印替代品管理';
};

  // åˆ é™¤
  const delWmsSubstituteGood = (row: any) => {
    ElMessageBox.confirm(`确定要删除吗?`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
  .then(async () => {
    var  ret =  await deleteWmsSubstituteGood(row);
    if(ret.data.type=="success"){
      handleQuery();
      ElMessage.success("删除成功");
    }
  })
  .catch(() => {});
  };
// æ‰“开编辑页面
const openEditWmsSubstituteGood = (row: any) => {
    editWmsSubstituteGoodTitle.value = '编辑替代品管理';
    editDialogRef.value.openDialog(row);
};

  // æ”¹å˜é¡µé¢å®¹é‡
  const handleSizeChange = (val: number) => {
    tableParams.value.pageSize = val;
    handleQuery();
  };
// åˆ é™¤
const delWmsSubstituteGood = (row: any) => {
    ElMessageBox.confirm(`确定要删除吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(async () => {
            var ret = await deleteWmsSubstituteGood(row);
            if (ret.data.type == 'success') {
                handleQuery();
                ElMessage.success('删除成功');
            }
        })
        .catch(() => {});
};

  // æ”¹å˜é¡µç åºå·
  const handleCurrentChange = (val: number) => {
    tableParams.value.page = val;
    handleQuery();
  };
// æ”¹å˜é¡µé¢å®¹é‡
const handleSizeChange = (val: number) => {
    tableParams.value.pageSize = val;
    handleQuery();
};

  handleQuery();
// æ”¹å˜é¡µç åºå·
const handleCurrentChange = (val: number) => {
    tableParams.value.page = val;
    handleQuery();
};

// handleQuery();

const rules = {
    // è¿™é‡Œå®šä¹‰è¡¨å•éªŒè¯è§„则
    completeSet: [{ required: true, message: '请选择齐套', trigger: 'change' }],
    packageSetup: [{ required: true, message: '请输入齐包设置', trigger: 'blur' }],
    ngPackage: [{ required: true, message: '请输入ng包', trigger: 'blur' }],
};

const ruleForm = ref({
    id: '',
    completeSet: '',
    packageSetup: '',
    ngPackage: '',
});

const sourceEnum: any = ref([
    {
        value: 'id',
        text: 'ID',
    },
]);
</script>
<style scoped>
:deep(.el-input),
@@ -242,5 +254,23 @@
:deep(.el-input-number) {
    width: 100%;
}
</style>

.detailBox {
    width: 90%;
    margin: 0 auto;
    display: block;
    padding-bottom: 10px;
    ul {
        margin: 0;
        padding: 0;
        li {
            display: block;
            line-height: 30px;
            text-align: left;
            list-style-type: none;
            width: 25%;
            word-wrap: break-word;
        }
    }
}
</style>

 LA24030_LuLiPackageLine_Web/src/views/main/WmsOrder/wmsOrderAsn/component/openAllprop.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,1159 @@
<template>
    <div>
        <!-- æ·»åŠ ã€ç¼–辑 -->
        <el-dialog v-model="dialogVisible" width="95%" @close="closeDialog" :close-on-click-modal="false">
            <template #header>
                <div style="color: #fff">
                    <span>{{ dialogType == 'add' ? '添加' : '编辑' }}</span>
                </div>
            </template>

            <el-form :model="addForm" ref="dialogRef" labelWidth="90" :rules="formRules">
                <el-row>
                    <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" class="mb20">
                        <el-form-item label="业务类型" prop="businessType">
                            <el-select clearable v-model="addForm.businessType" placeholder="请选择业务类型">
                                <el-option v-for="(item, index) in getBusinessTypeData_Index" :key="index" :value="item.businessTypeValue" :label="`[${item.businessTypeValue}] ${item.businessTypeName}`"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" class="mb20">
                        <el-form-item label="供应商" prop="supplierCode">
                            <el-select
                                v-model="addForm.supplierCode"
                                filterable
                                remote
                                reserve-keyword
                                remote-show-suffix
                                :remote-method="remoteMethod"
                                :loading="loading"
                                placeholder="请选择供应商"
                                clearable
                                style="width: 100%"
                                @change="changeXmbh(addForm.supplierCode)"
                            >
                                <el-option v-for="(item, index) in arrTdp" :key="index" :value="item.custCode" :label="`[${item.custCode}]${item.custChinaName}`"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <!-- <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" class="mb20">
          <el-form-item label="收货道口" prop="dock">
            <el-select clearable v-model="addForm.dock" placeholder="请选择收货道口">
              <el-option
                v-for="(item, index) in getEnumDockData"
                :key="index"
                :value="item.value"
                :label="`${item.describe}`"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col> -->

                    <!--<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" class="mb20">
          <el-form-item label="收货道口" prop="dock">
            <el-input
              v-model="addForm.dock"
              placeholder="请输入收货道口"
              maxlength="50"
              show-word-limit
              clearable
            />
          </el-form-item>
        </el-col> -->

                    <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" class="mb20">
                        <el-form-item label="ERP单号" prop="erpOrderNo">
                            <el-input v-model="addForm.erpOrderNo" placeholder="请输入ERP单号" maxlength="50" show-word-limit clearable />
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" class="mb20">
                        <el-form-item label="项目号" prop="projectNo">
                            <el-input v-model="addForm.projectNo" placeholder="请输入项目号" maxlength="50" show-word-limit clearable />
                        </el-form-item>
                    </el-col>

                    <!-- <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="dialogType == 'add'">
          <el-form-item label="订单类型:" prop="materialType">
            <el-select  v-model="addForm.materialType" placeholder="请选择订单类型" @change="changDdlx"
              style="width: 100%">
              <el-option v-for="item in statusEnums" :key="item.value" :label="item.title" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8" v-if="dialogType == 'edit'">
          <el-form-item label="订单类型:" prop="materialType">
            <el-select v-model="addForm.materialType" disabled placeholder="请选择订单类型"  style="width: 100%">
              <el-option v-for="item in outInTypeEnum" :key="item.value" :label="item.title" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8" v-if="addForm.materialType == 5">
          <el-form-item label="免费件类型:" prop="freeOrderType">
            <el-select v-model="addForm.freeOrderType" placeholder="请选择免费件类型"  style="width: 100%"
              @change="changMfj" :disabled="dialogType == 'edit'">
              <el-option v-for="item in statusEnumsMFj" :key="item.value" :label="item.title" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="单号:" prop="purchaseNo">
            <el-input v-model="addForm.purchaseNo" :disabled="dialogType == 'edit'" clearable placeholder="请输入单号" />
          </el-form-item>
        </el-col>
     
        <el-col :span="8">
          <el-form-item label="备注:">
            <el-input v-model="addForm.remark" clearable placeholder="请输入备注" />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="预计到达时间:" prop="EstimatedDate">
            <el-date-picker v-model="addForm.EstimatedDate" type="datetime" :disabled-date="disabledDate"
              value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss" placeholder="请选择预计到达时间"
              style="width: 100%;" />
          </el-form-item>
        </el-col> -->
                </el-row>
            </el-form>
            <div class="msi-content" style="margin-top: 10px">
                <div class="header" style="margin-bottom: 10px">
                    <div>
                        <el-button type="primary" icon="el-icon-plus" @click="addMaterialDialog">新增物料</el-button>

                        <el-button icon="el-icon-delete" plain :disabled="checkedDetails.length == 0" @click="delCheckedDetails">删除选中行</el-button>
                    </div>
                </div>

                <el-table :data="warehousOrderDetails" border style="width: 100%" row-key="setRowKey" ref="detailRef" @selection-change="detailsCheckChange" max-height="480">
                    <el-table-column align="center" width="60" type="selection" />
                    <el-table-column label="序号" align="center" width="60" type="index" />
                    <el-table-column label="物料编号" min-width="140" prop="materialCode" align="center" show-overflow-tooltip />
                    <el-table-column label="物料名称" min-width="140" prop="materialName" align="center" show-overflow-tooltip />

                    <!-- clientCode -->
                    <el-table-column label="客户编号" v-if="isShowBomBtn" prop="diCustomCode" align="center" min-width="110" />
                    <el-table-column label="客户中文名称" v-if="isShowBomBtn" prop="diCustomChinaName" align="center" min-width="110" />

                    <el-table-column label="行号" prop="poLineNumber" align="center" min-width="120">
                        <template #default="scope">
                            <el-input v-model.trim="scope.row.poLineNumber" clearable min-width="150" placeholder="请输入行号" />
                        </template>
                    </el-table-column>

                    <el-table-column label="供应商批次" prop="supplierBatch" align="center" min-width="120">
                        <template #default="scope">
                            <el-input v-model.trim="scope.row.supplierBatch" clearable min-width="150" placeholder="请输入供应商批次" />
                        </template>
                    </el-table-column>

                    <el-table-column label="ERP库存地" prop="erpCode" align="center" min-width="120">
                        <template #default="scope">
                            <el-input v-model.trim="scope.row.erpCode" clearable min-width="150" placeholder="请输入ERP库存地" />
                        </template>
                    </el-table-column>

                    <el-table-column label="数量" align="center" min-width="180">
                        <template #default="scope">
                            <el-input-number :precision="3" min="0" v-model="scope.row.quantity" size="small" />
                        </template>
                    </el-table-column>

                    <el-table-column label="计划开始时间" align="center" min-width="180">
                        <template #default="scope">
                            <el-date-picker
                                v-model="scope.row.plannedStartTime"
                                type="datetime"
                                :disabled-date="disabledDate"
                                value-format="YYYY-MM-DD HH:mm:ss"
                                format="YYYY-MM-DD HH:mm:ss"
                                placeholder="请选择计划开始时间"
                                style="width: 100%"
                            />
                        </template>
                    </el-table-column>
                    <el-table-column label="计划结束时间" align="center" min-width="180">
                        <template #default="scope">
                            <el-date-picker
                                v-model="scope.row.plannedEndTime"
                                type="datetime"
                                :disabled-date="disabledDate"
                                value-format="YYYY-MM-DD HH:mm:ss"
                                format="YYYY-MM-DD HH:mm:ss"
                                placeholder="请选择计划结束时间"
                                style="width: 100%"
                            />
                        </template>
                    </el-table-column>
                    <el-table-column label="采购单位" prop="unit" align="center" min-width="80" />
                </el-table>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" :disabled="load" @click="confirm">确认</el-button>
                </span>
            </template>
        </el-dialog>
        <!-- æ·»åŠ ç‰©æ–™ -->
        <el-dialog v-model="addMaterialVisible" title="添加物料详情" width="60%" @close="closeMaterialDialog">
            <template #header>
                <div style="color: #fff">
                    <span>添加物料详情</span>
                </div>
            </template>

            <div class="msi-form" style="padding-top: 0px">
                <el-form :model="materialForm">
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="物料编号">
                                <el-input v-model="materialForm.MaterialCode" placeholder="请输入物料编号" clearable></el-input>
                            </el-form-item>
                        </el-col>

                        <!-- <el-col :span="8">
            <el-form-item label="物料大类:">
              <el-input v-model="materialForm.MaterialTypeId" placeholder="请输入物料大类" clearable></el-input>
            </el-form-item>
          </el-col> -->

                        <el-col :span="8">
                            <el-form-item label-width="20px">
                                <el-button type="primary" icon="el-icon-search" @click="getMaterialList">查询</el-button>
                                <!-- <el-button icon="el-icon-refresh-right" @click="resetMaterialForm"
                >重置</el-button
              > -->
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <div class="msi-content" style="padding-top: 0; margin-top: 10px">
                <el-table :data="materialList" border style="width: 100%" row-key="id" ref="materialRef" @selection-change="materialSelectionChange" :max-height="480">
                    <el-table-column align="center" width="60" type="selection" />
                    <el-table-column label="序号" align="center" width="60" type="index" />
                    <el-table-column label="物料编号" prop="materialCode" align="center" min-width="140" show-overflow-tooltip />
                    <el-table-column label="物料名称" prop="materialName" align="center" min-width="140" show-overflow-tooltip />
                    <el-table-column label="采购单位" prop="poUnit" align="center" min-width="140" show-overflow-tooltip />
                </el-table>
                <Pagination
                    :total="materialTotal"
                    v-model:page="materialForm.Page"
                    v-model:limit="materialForm.PageSize"
                    @pagination="getMaterialList"
                    style="margin-top: 20px; text-align: center"
                ></Pagination>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="addMaterialVisible = false">取消</el-button>
                    <el-button type="primary" @click="confirmAddMaterial">确认</el-button>
                </span>
            </template>
        </el-dialog>
        <!-- å•è¯¦æƒ… -->
        <el-drawer v-model="drawerVisible" :title="`${detailForm.poId}物料详情`" direction="rtl" size="80%" @close="handleDrawerClose">
            <template #title>
                <div class="slot_title">
                    <div class="title_orderNo">{{ title }}</div>
                    <div>物料详情</div>
                </div>
            </template>

            <div class="detailBoxWrap">
                <!-- è¯¦æƒ…组件 -->
                <open-details ref="propDetailRef"></open-details>
                <div class="msi-form">
                    <el-form :model="detailForm">
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="物料编号">
                                    <el-input v-model="detailForm.materialCode" clearable placeholder="请输入物料编号" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="4">
                                <el-form-item label-width="20px">
                                    <el-button type="primary" icon="el-icon-search" @click="getDetail">查询</el-button>

                                    <el-button type="primary" icon="ele-Printer" @click="getPrint">打印</el-button>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
                <div class="msi-content">
                    <!-- <p style="margin-bottom: 10px">物料明细</p> -->
                    <el-table :data="drawerList" border striped :max-height="480">
                        <el-table-column fixed="left" type="index" label="序号" width="55" align="center" />
                        <!-- <el-table-column prop="poId" label="PO单ID" show-overflow-tooltip="" /> -->
                        <!-- <el-table-column prop="poNo" label="PO单号" show-overflow-tooltip="" /> -->

                        <el-table-column prop="placeCode" label="库位编码"  show-overflow-tooltip="" />
         <el-table-column prop="inTime" label="进入时间" width="80" :formatter="formatDate_T_Date"  show-overflow-tooltip="" />
        <el-table-column prop="upi" label="部件条码"  show-overflow-tooltip="" />
        <el-table-column prop="detailName" label="部件名称"  show-overflow-tooltip="" />
        <el-table-column prop="planNo" label="批次"  show-overflow-tooltip="" />
        <el-table-column prop="orderId" label="订单号"  show-overflow-tooltip="" />
        <el-table-column prop="packageCode" label="包装号"  show-overflow-tooltip="" />
        <el-table-column prop="length" label="长"  show-overflow-tooltip="" />
        <el-table-column prop="width" label="宽"  show-overflow-tooltip="" />
        <el-table-column prop="thk" label="厚"  show-overflow-tooltip="" />
          <el-table-column prop="stockStatus" label="库存状态"  show-overflow-tooltip="" >
            <template #default="scope">
              <el-tag>{{ getEnumDesc(scope.row.stockStatus, getEnumStockStatusData_Index)}}</el-tag>
            </template>
          </el-table-column>
        <el-table-column prop="stockStatusName" label="库存状态名称"  show-overflow-tooltip="" />
        <el-table-column prop="operReason" label="操作原因"  show-overflow-tooltip="" />
        <el-table-column prop="operUser" label="操作人"  show-overflow-tooltip="" />
         <el-table-column prop="operTime" label="操作时间" width="80" :formatter="formatDate_T_Date"  show-overflow-tooltip="" />
          <el-table-column prop="lockStatus" label="锁定状态"  show-overflow-tooltip="" >
            <template #default="scope">
              <el-tag>{{ getEnumDesc(scope.row.lockStatus, getEnumLockStatusData_Index)}}</el-tag>
            </template>
          </el-table-column>
        <el-table-column prop="lockReason" label="锁定原因"  show-overflow-tooltip="" />
        <el-table-column prop="lockUser" label="锁定人"  show-overflow-tooltip="" />
         <el-table-column prop="lockTime" label="锁定时间" width="80" :formatter="formatDate_T_Date"  show-overflow-tooltip="" />
        <el-table-column prop="remarks" label="备注"  show-overflow-tooltip="" />
         <el-table-column prop="createTime" label="创建时间" width="130" :formatter="formatDate_T_Time"  show-overflow-tooltip="" />
         <el-table-column prop="updateTime" label="修改时间" width="130" :formatter="formatDate_T_Time"  show-overflow-tooltip="" />
        <el-table-column prop="createUserName" label="创建人"  show-overflow-tooltip="" />
        <el-table-column prop="updateUserName" label="修改人"  show-overflow-tooltip="" />
                    </el-table>
                    <Pagination :total="detailCount" v-model:page="detailForm.Page" v-model:limit="detailForm.PageSize" @pagination="getDetail" style="margin-top: 20px; text-align: center"></Pagination>

                    <div></div>
                </div>
            </div>
        </el-drawer>

        <el-dialog v-model="outVisible2" title="SPA获取" width="20%" @close="closeOutDialog2">
            <el-form :model="outerForm2" label-width="120px">
                <el-row style="font-size: 16px">
                    <el-col :span="23">
                        <el-form-item label="单号:" required>
                            <el-input v-model="outerForm2.purchaseNo" clearable placeholder="请输入单号" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="outVisible2 = false">取消</el-button>
                    <el-button type="primary" @click="getSapOrderPO">确认</el-button>
                </span>
            </template>
        </el-dialog>

        <printDialogTestStudent ref="printDialogRefTestStudent" :title="printTestStudentTitle" @reloadTable="handleQueryTestStudent" />
    </div>
</template>
<script lang="ts" setup>
import Pagination from '/@/components/Pagination/index.vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ref, nextTick, computed, getCurrentInstance, watch, defineExpose, defineProps, onMounted } from 'vue';
import { getTypeStatus } from '/@/utils/formate';

import { formatDecimalData } from '/@/utils/formate';
import { expandMore } from '/@/hooks/expandMore';
import cache from '/@/utils/cache';
import { pageWmsMaterial } from '/@/api/main/WmsBase/wmsMaterial';
import { getAPI } from '/@/utils/axios-utils';
import { SysEnumApi } from '/@/api-services/api';

import printDialogTestStudent from '/@/views/system/print/component/hiprint/preview.vue';

import { addWmsOrderPurchase, updateWmsOrderPurchase, detailWmsOrderPurchase } from '/@/api/main/WmsOrder/wmsOrderPurchase';
import OpenDetails from '/@/components/openDetails/openDetails.vue';
import { pageBaseCustomer } from '/@/api/main/WmsBase/baseCustomer';
import { listWmsOrderPurchaseDetails, pageWmsOrderPurchaseDetails } from '/@/api/main/WmsOrder/wmsOrderPurchaseDetails';
import { formatDate, formatDate_T_Date, formatDate_T_Time, defaultTimeRange } from '/@/utils/formatTime';
import commonFunction from '/@/utils/commonFunction';
import { handleSlectDataWmsBusinessType } from '/@/utils/selectData';
// æŽ¨èè®¾ç½®æ“ä½œ width ä¸º 200
import { hiprint } from 'vue-plugin-hiprint';
import { SysPrintApi } from '/@/api-services/api';
import { SysPrint } from '/@/api-services/models';

const moveType = 10; //移动类型 å…¥åº“
const { proxy }: any = getCurrentInstance(); // è®¿é—®å®žä¾‹ä¸Šä¸‹æ–‡ proxy同时支持开发 çº¿ä¸ŠçŽ¯å¢ƒ
const getEnumOrderTypeData = ref<any>([]);

const getEnumDockData = ref<any>([]);
const getBusinessTypeData_Index = ref<any>([]); //业务类型 create by liuwq
// const getEnumBusinessTypeData = ref<any>([]); update by liuwq
const getEnumPoStatusData = ref<any>([]);
const { getEnumDesc } = commonFunction();
const emits = defineEmits(['getTabelData']);
const getEnumPoDetailStatusData_Index = ref<any>([]);
const getEnumOrderTypeData_Index = ref<any>([]);

const props = defineProps({
    titleAuthor: {
        type: Number,
        required: true,
    },
    hexiao: {
        type: Number,
        default: 1,
        required: true,
    },
});
//控制订单类型 - ä¸‹æ‹‰èœå•
const titleAuthor = computed(() => props.titleAuthor);
// æ˜¯å¦æ˜¾ç¤ºæ ¸é”€æŒ‰é’®
const hexiao = computed(() => props.hexiao);
const loading = ref(false);



const getEnumStockStatusData_Index = ref<any>([]);
  const getEnumLockStatusData_Index = ref<any>([]);
// ç™»å½•ç”¨æˆ·id
// const LoginUserID = computed(() => store.state.login.userInfo.id || localCache.getCache("LoginUserID"))

// const EnumWriteOffState = computed(
//   () => store.state.login.enums.enumWriteOffState
// );

let itemBtnArr = ['批量删除', '编辑', '新增'];
const boolEnum = ref([
    {
        title: '是',
        value: true,
    },
    {
        title: '否',
        value: false,
    },
]);

// form表单展开

const orderType = ref('');
const orderDoRuType = ref(); // ç”¨äºŽå¯¼å…¥çš„变量
const itemBtn = ref(1);
// æŽ§åˆ¶bom物料权限
const isShowBomBtn = ref(0);

// ç¦æ­¢ä¹‹å‰çš„日期
const disabledDate = (time: Date) => {
    return time.getTime() + 3600 * 1000 * 24 < Date.now();
};
// ä¸Šä¼ çª—口
const uploadVisible = ref(false);
//打开导入窗口
const openUploadDialog = (param: any) => {
    orderDoRuType.value = param;
    uploadVisible.value = true;
};
//关闭窗口
const closeUploadDialog = () => {
    getTabelData();
};
//sap获取
const getSapOrder = () => {
    ElMessageBox.confirm('是否确认获取更新？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(() => {
        // getSapRkPurchase().then((res) => {
        //   if (res.code == 200) {
        //     ElMessage.success("已开始重新获取，请稍后查看结果！");
        //   } else {
        //     ElMessage.error(
        //       `sap获取失败${res.code}:${JSON.stringify(res.message)}`
        //     );
        //   }
        // })
    });
};

//------------sap获取PO单
const outVisible2 = ref(false);
const outerForm2 = ref({
    purchaseNo: '',
});
const getSapOrderPO = (param?: number) => {
    if (param && param == 1) {
        outVisible2.value = true;
        return;
    }
    if (outerForm2.value.purchaseNo == '') {
        ElMessage.warning('请输入单号');
        return;
    }
};
//关闭出库窗口的回调
const closeOutDialog2 = () => {
    outerForm2.value.purchaseNo = '';
};

//------------sap获取PO单

// --------------------PO单列表-----------------------------------
//查询
const formModel = ref({
    WareMaterialCode: '',
    WareMaterialName: '',
    PurchaseNo: '',
    CreatedUserName: '',
    CreatedTimeBegin: '',
    CreatedTimeEnd: '',
    CreateDate: [],
    IssueTimeBegin: '',
    IssueTimeEnd: '',
    IssueDate: [],
    MaterialTypeStaus: '',
    SourceBy: '',
    WriteOffState: '',
    signStatus: '',
    status: '',
    freeOrderType: '',
    IsQueryAll: false, //是否显示全部数据
    // LoginUserID: LoginUserID, //用户id
    OrderMenuType: '', //判断是哪个菜单入库
    Page: 1,
    PageSize: 10,
    poApprovalStatus: '',
    keyCode: '',
    IsDisable: '', //是否作废
});

//入库单列表数据
let tableData = ref([]);
const tableRef = ref();

//列表的数据条数
const totalItems = ref<number>(0);

//缓存枚举
const enumList: any = cache.getCache('enumList');
console.log(enumList.inEnumOrderType);

// .inEnumOrderType

//获取PO单列表
const getTabelData = () => {
    //判断创建时间是否有选择
    if (formModel.value.CreateDate && formModel.value.CreateDate.length > 0) {
        formModel.value.CreatedTimeBegin = formModel.value.CreateDate[0];
        formModel.value.CreatedTimeEnd = ''; //addDate(formModel.value.CreateDate[1], 1); //日期查询 ç»“束时间 éœ€è¦åŠ ä¸€å¤©
    } else {
        // æ—¥åŽ†æ¸…空 å†æŸ¥è¯¢bug
        if (formModel.value.CreatedTimeBegin || formModel.value.CreatedTimeEnd) {
            formModel.value.CreatedTimeBegin = '';
            formModel.value.CreatedTimeEnd = '';
        }
    }
    //判断下发时间是否有选择
    if (formModel.value.IssueDate && formModel.value.IssueDate.length > 0) {
        formModel.value.IssueTimeBegin = formModel.value.IssueDate[0];
        formModel.value.IssueTimeEnd = formModel.value.IssueDate[1];
    } else {
        // æ—¥åŽ†æ¸…空 å†æŸ¥è¯¢bug
        if (formModel.value.IssueTimeBegin || formModel.value.IssueTimeEnd) {
            formModel.value.IssueTimeBegin = '';
            formModel.value.IssueTimeEnd = '';
        }
    }
};
getTabelData();

//重置搜索
const resetForm = () => {
    formModel.value = {
        WareMaterialCode: '',
        WareMaterialName: '',
        PurchaseNo: '',
        CreatedUserName: '',
        CreatedTimeBegin: '',
        CreatedTimeEnd: '',
        CreateDate: [],
        IssueTimeBegin: '',
        IssueTimeEnd: '',
        IssueDate: [],
        MaterialTypeStaus: '',
        SourceBy: '',
        WriteOffState: '',
        signStatus: '',
        status: '',
        freeOrderType: '',
        IsQueryAll: false, //是否显示全部数据
        //  LoginUserID: LoginUserID, //用户id
        OrderMenuType: '', //判断是哪个菜单入库
        Page: 1,
        PageSize: 10,
        poApprovalStatus: '',
        keyCode: '',
        IsDisable: '', //是否作废
    };
    getTabelData();
};
// -----------------删除、导出操作--------------------------
//选中的行
const checkRows = ref<{ id: number }[]>([]);
// é€‰æ‹©
const handleSelectionChange = (val: any) => {
    checkRows.value = val;
};

// -------------------获取PO单下物料详情-----------------------------------
//入库单下物料详情请求
const detailForm = ref({
    poId: '',
    materialCode: '',
    Page: 1,
    PageSize: 10,
});

// ç‰©æ–™è¯¦æƒ…抽屉
const drawerVisible = ref(false);
const drawerType = ref('drawerAll');
// const
//单号
const purchaseNo = ref('');

//打开抽屉
const openDrawer = async (type: number, scope: any = {}, entozhExcell?: any) => {
    detailForm.value.Page = 1; //bug:点编辑-再点详情
    detailForm.value.PageSize = 10; //bug:点编辑-再点详情
    if (scope.packageCode) {
        title.value = `${scope.packageCode}`;
    }
    drawerType.value = 'drawerAll';
    drawerVisible.value = true;
    //当前入库单号id
    detailForm.value.poId = scope.id;
    //入库单
    purchaseNo.value = scope.packageCode;
    debugger;
    detailForm.value.poId = scope.id;
    //获取物料列表
    if (detailForm.value.poId == '') {
        drawerList.value = [];
        detailCount.value = 0;
        return;
    }
    //------------------获取物料列表物料明细
    getDetail();
    //------------------获取物料列表物料明细
    getEnumStockStatusData_Index.value = (await getAPI(SysEnumApi).apiSysEnumEnumDataListGet('StockStatusEnum')).data.result ?? [];
    getEnumLockStatusData_Index.value = (await getAPI(SysEnumApi).apiSysEnumEnumDataListGet('LockStatusEnum')).data.result ?? [];
    // getBusinessTypeData_Index.value = await handleSlectDataWmsBusinessType(moveType); //下拉读取业务类型接口 create  by liuwq

    // getEnumDockData.value = (await getAPI(SysEnumApi).apiSysEnumEnumDataListGet('DockEnum')).data.result ?? [];

    // getEnumPoDetailStatusData_Index.value = (await getAPI(SysEnumApi).apiSysEnumEnumDataListGet('OrderStatusEnum')).data.result ?? [];
    // getEnumOrderTypeData_Index.value = (await getAPI(SysEnumApi).apiSysEnumEnumDataListGet('OrderTypeEnum')).data.result ?? [];
    //----------------物料明细
    // æ ¹æ®çŠ¶æ€è½¬ä¸­æ–‡ ä¿ç•™3位小数
    let scopetrans = JSON.parse(JSON.stringify(scope));
    // scopetrans.totalquantity = Number(scopetrans.totalquantity).toFixed(3);
    nextTick(() => {
        scopetrans.poStatus = getEnumDesc(scopetrans.poStatus, getEnumPoDetailStatusData_Index.value);
        scopetrans.businessType = getEnumDesc(scopetrans.businessType, getBusinessTypeData_Index.value);
        scopetrans.orderType = getEnumDesc(scopetrans.orderType, getEnumOrderTypeData_Index.value);
        proxy.$refs['propDetailRef'].openADialog(scopetrans, entozhExcell);
    });
};

//关闭抽屉
const handleDrawerClose = () => {
    detailForm.value = {
        poId: '',
        materialCode: '',
        Page: 1,
        PageSize: 10,
    };
    deltailList.value = [];
    detailCount.value = 0;
    drawerList.value = [];
    detailCount.value = 0;
};

//物料详情类型
interface DetailType {
    id: number;
}

//入库单详情列表
const deltailList = ref<DetailType[]>([]);
//弹出层数据
const drawerList = ref<DetailType[]>([]);

//入库单详情列表数据条数
const detailCount = ref(0);

//弹出层标题
let title = ref('');
//获取入库单下物料详情
const getDetail = async (callback?: any) => {
    loading.value = true;

    var res = await pageWmsOrderPurchaseDetails(Object.assign(detailForm.value));
    if (callback == 1) {
        //编辑入口
        warehousOrderDetails.value = res.data.result?.items ?? [];
        detailCount.value = res.data.result?.total;
    } else {
        drawerList.value = res.data.result?.items ?? [];
        detailCount.value = res.data.result?.total;
    }
    loading.value = false;
};
// ----------------新增、编辑-------------------------------
//窗口类型
const dialogType = ref('add');

const dialogVisible = ref(false);

//添加编辑表单ref
const dialogRef = ref();

//添加/编辑参数
let addForm = ref({
    createdTime: '',
    updatedTime: '',
    createdUserName: '',
    createdUserId: '',
    purchaseNo: '',
    purchaserUserId: 0,
    basicExpressInfoCode: null,
    materialType: '', //5
    status: 0,
    supplierCode: '',
    supplierName: '',
    remark: '',
    deliveryType: 1,
    EstimatedDate: '',
    purchaseOrderDetails: [] as any[],
    dI_NO: '',
    sJ_NO: '',
    machineToolTypeName: '',
    machineToolNo: '',
    freeOrderType: '',
});

//rules
const formRules = {
    businessType: [{ required: true, message: '请选择业务类型！', trigger: 'change' }],
    supplierCode: [{ required: true, message: '请输入供应商！', trigger: 'blur' }],
    purchaseNo: [{ required: true, message: '请输入PO单号！', trigger: 'blur' }],
    orderTypeName: [{ required: true, message: '请输入订单类型名称！', trigger: 'blur' }],
};
//打开新增、编辑窗口
const openDialog = async (type: number, scope: any = {}) => {
    handleQueryTdp();
    getEnumOrderTypeData.value = (await getAPI(SysEnumApi).apiSysEnumEnumDataListGet('OrderTypeEnum')).data.result ?? [];
    getBusinessTypeData_Index.value = await handleSlectDataWmsBusinessType(moveType); //下拉读取业务类型接口 create  by liuwq
    getEnumPoStatusData.value = (await getAPI(SysEnumApi).apiSysEnumEnumDataListGet('OrderStatusEnum')).data.result ?? [];

    getEnumDockData.value = (await getAPI(SysEnumApi).apiSysEnumEnumDataListGet('DockEnum')).data.result ?? [];

    if (type == 1) {
        detailForm.value.PageSize = 10;
        dialogType.value = 'add';
    } else {
        dialogType.value = 'edit';
        detailForm.value.PageSize = 1000;
        addForm.value = { ...scope };

        console.log(addForm.value);
        detailForm.value.poId = scope.id;
        //获取物料 - å›žè°ƒå‡½æ•°æ›¿æ¢å®šæ—¶å™¨

        //------------------获取物料列表物料明细
        getDetail(1);
        //----------------物料明细
    }
    dialogVisible.value = true;
    load.value = false;
    //清除选中项
    nextTick(() => {
        if (dialogRef.value) {
            dialogRef.value.clearValidate();
        }
    });
};

//物料详情的table ref
const detailRef = ref();
const setRowKey = (row: any) => {
    return row.id + row.poLineNumber;
};
//关闭窗口
const closeDialog = () => {
    load.value = false;
    addForm.value = {
        createdTime: '',
        updatedTime: '',
        createdUserName: '',
        createdUserId: '',
        purchaseNo: '',
        purchaserUserId: 0,
        basicExpressInfoCode: null,
        materialType: '', //5
        status: 0,
        supplierCode: '',
        supplierName: '',
        remark: '',
        deliveryType: 1,
        EstimatedDate: '',
        purchaseOrderDetails: [] as any[],
        dI_NO: '',
        sJ_NO: '',
        machineToolTypeName: '',
        machineToolNo: '',
        freeOrderType: '',
    };
    warehousOrderDetails.value = [];
    checkedDetails.value = [];
    deltailList.value = [];
    detailCount.value = 0;
    detailRef.value.clearSelection();
};

//添加编辑窗口物料列表
const warehousOrderDetails = ref<any[]>([]);

//物料详情列表选中的物料
const checkedDetails = ref<any[]>([]);

//物料详情列表中勾选事件
const detailsCheckChange = (val: any) => {
    checkedDetails.value = val;
};

//删除选中的物料详情
const delCheckedDetails = () => {
    ElMessageBox.confirm('是否确认删除？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(() => {
            let arr = [];
            if (checkedDetails.value[0].diRelationID) {
                checkedDetails.value.forEach((item) => {
                    console.log(item);
                    let index = warehousOrderDetails.value.findIndex((detail) => detail.code == item.code && detail.diRelationID == item.diRelationID);
                    if (index > -1) {
                        warehousOrderDetails.value.splice(index, 1);
                    }
                });
            } else {
                checkedDetails.value.forEach((item) => {
                    let index = warehousOrderDetails.value.findIndex((detail) => detail.code == item.code && detail.poLineNumber == item.poLineNumber);
                    warehousOrderDetails.value.splice(index, 1);
                });
            }
            arr = warehousOrderDetails.value;
            warehousOrderDetails.value = [];
            //bug ç›¸åŒç‰©æ–™ ä¸åŒBom
            nextTick(() => {
                warehousOrderDetails.value = arr;
                checkedDetails.value = [];
                detailRef.value.clearSelection();
            });
        })
        .catch(() => ElMessage.info('已取消删除'));
};

const load = ref(false);
//编辑、添加提交
const confirm = () => {
    dialogRef.value.validate(async (vali: any) => {
        if (vali) {
            console.log('确认');
            if (warehousOrderDetails.value.length < 0) {
                ElMessage.warning('请选择物料');
                return;
            }
            let idx = warehousOrderDetails.value.findIndex((v) => v.poLineNumber == '' || v.poLineNumber == undefined);
            if (idx > -1) {
                ElMessage.warning('请输入行号');
                return;
            }
            let isNext = '';
            warehousOrderDetails.value.forEach((item) => {
                const arr: any = warehousOrderDetails.value.filter((detail) => detail.poLineNumber == item.poLineNumber);
                if (arr.length > 1) {
                    isNext = `行号：${arr[0].poLineNumber}不能相同`;
                    return;
                }
            });
            if (isNext != '') {
                ElMessage.warning(isNext);
                return;
            }

            let idx2 = warehousOrderDetails.value.findIndex((v) => v.quantity == '' || v.quantity == undefined || v.quantity <= 0);
            if (idx2 > -1) {
                ElMessage.warning('数量不合规范！');
                return;
            }
            addForm.value.purchaseOrderDetails = [];
            warehousOrderDetails.value.forEach((item) => {
                const obj = {
                    poId: item.poId || 0,
                    materialCode: item.materialCode,
                    materialName: item.materialName,
                    id: item.id || '',
                    quantity: item.quantity,
                    barNo: item.barNo,
                    remark: addForm.value.remark,
                    poLineNumber: item.poLineNumber,
                    materialType: item.deliveryType,
                    clientCode: item.diCustomCode || '',
                    clientChinaName: item.diCustomChinaName || '',
                    plannedStartTime: item.plannedStartTime,
                    plannedEndTime: item.plannedEndTime,
                    projectNo: item.projectNo,
                    erpCode: item.erpCode,
                    supplierBatch: item.supplierBatch,
                    unit: item.unit,
                };
                addForm.value.purchaseOrderDetails.push(obj);
            });
            load.value = true;
            //添加
            if (dialogType.value == 'add') {
                load.value = true;
                let res = await addWmsOrderPurchase(addForm.value);
                if (res.data && res.data.code == 200) {
                    ElMessage.success('添加成功');
                    dialogVisible.value = false;
                    emits('getTabelData');
                }
                load.value = false;
            } else {
                load.value = true;
                let res = await updateWmsOrderPurchase(addForm.value);
                if (res.data && res.data.code == 200) {
                    ElMessage.success('编辑成功');
                    dialogVisible.value = false;
                    emits('getTabelData');
                }
                load.value = false;
            }
        } else {
            ElMessage.warning('表单验证失败');
        }
    });
};
// -----------------添加物料操作-------------------------
//物料基础数据窗口
const addMaterialVisible = ref(false);

//物料基础数据列表
const materialList = ref([]);

//物料基础数据条数
const materialTotal = ref(0);

//物料基础数据form
const materialForm = ref({
    MaterialTypeId: '',
    Code: '',
    MaterialCode: '',
    // MaterialType: 1,
    Page: 1,
    PageSize: 10,
});

//获取物料基础列表
const getMaterialList = async () => {
    loading.value = true;
    // var res = await pageWmsMaterial(Object.assign(queryParams.value, tableParams.value));
    var res = await pageWmsMaterial(Object.assign(materialForm.value));

    materialList.value = res.data.result?.items ?? [];
    //tableParams.value.total = res.data.result?.total;
    materialTotal.value = res.data.result?.total;
    loading.value = false;
};

//重置物料
const resetMaterialForm = () => {
    materialForm.value = {
        MaterialTypeId: '',
        Code: '',
        MaterialCode: '',
        Page: 1,
        // MaterialType: 1,
        PageSize: 10,
    };
    getMaterialList();
};

//选中的基础物料数据
const checkedMaterial = ref<any[]>([]);

//物料基础数据勾选
const materialSelectionChange = (val: any) => {
    checkedMaterial.value = val;
};

//打开新增物料窗口
const addMaterialDialog = () => {
    // if ( addForm.value.freeOrderType && isShowBomBtn.value ) {
    //   ElMessage.warning("免费件类型是PR2，只能新增DI维护的物料！");
    //   return;
    // }
    getMaterialList();
    addMaterialVisible.value = true;
};

//基础物料table的ref对象
const materialRef = ref();

//确认添加材料
const confirmAddMaterial = () => {
    //物料列表没数据，直接添加
    if (warehousOrderDetails.value.length == 0) {
        // è‡ªåŠ¨ç»™è¡Œå·å¤å€¼
        checkedMaterial.value.forEach((item, index) => {
            item.unit = item.poUnit;
            if (!item.poLineNumber) {
                item.poLineNumber = index + 1 + warehousOrderDetails.value.length;
            }
        });

        warehousOrderDetails.value.push(...checkedMaterial.value);
    } else {
        for (let i = 0; i < checkedMaterial.value.length; i++) {
            let idx = warehousOrderDetails.value.findIndex(
                (item: { poLineNumber: any; code: any }) => item.code == checkedMaterial.value[i].code && item.poLineNumber == checkedMaterial.value[i].poLineNumber
            );
            if (idx > -1) {
                return ElMessage.warning(`物料编号${checkedMaterial.value[i].code}，行号：${checkedMaterial.value[i].poLineNumber || ''}在物料列表中已存在,请去除勾选`);
            }
        }

        // è‡ªåŠ¨ç»™è¡Œå·å¤å€¼
        checkedMaterial.value.forEach((item, index) => {
            item.unit = item.poUnit;
            if (!item.poLineNumber) {
                item.poLineNumber = index + 1 + warehousOrderDetails.value.length;
            }
        });
        warehousOrderDetails.value.push(...checkedMaterial.value);
    }

    addMaterialVisible.value = false;
};

//关闭新增物料窗口
const closeMaterialDialog = () => {
    materialForm.value = {
        MaterialTypeId: '',
        Code: '',
        Page: 1,
        // MaterialType: 1,
        PageSize: 10,
    };
    materialList.value = [];
    checkedMaterial.value = [];
    materialRef.value.clearSelection();
};

// é¡µé¢åŠ è½½æ—¶
onMounted(async () => {});

//================
const arrTdp = ref<any[]>([]);
const queryParamsW = ref<any>({});
const tableParamsW = ref({
    page: 1,
    pageSize: 200,
    total: 0,
    custType: '供应商',
});

//-----------------远程搜索----------------
const handleQueryTdp = async () => {
    var res = await pageBaseCustomer(Object.assign(queryParamsW.value, tableParamsW.value));
    arrTdp.value = res.data.result?.items ?? [];
};
const changeXmbh = async (query?: any) => {
    loading.value = true;
    var res = await pageBaseCustomer({
        page: 1,
        pageSize: 200,
        custCode: query,
        custType: '供应商',
    });
    loading.value = false;
    arrTdp.value = res.data.result?.items ?? [];
};
// è¿œç¨‹æœç´¢  è¾“入关键字以从远程服务器中查找数据。
const remoteMethod = async (query: string) => {
    loading.value = true;
    var res = await pageBaseCustomer({
        page: 1,
        pageSize: 200,
        custCode: query,
        custType: '供应商',
    });
    loading.value = false;
    arrTdp.value = res.data.result?.items ?? [];
};
//-----------------远程搜索----------------

const printDialogRefTestStudent = ref();
const printTestStudentTitle = ref('');
//打印
const getPrint = async (row?: any) => {
    printTestStudentTitle.value = '打印';
    var res = await getAPI(SysPrintApi).apiSysPrintPrintNameGet('测试打印模版');
    var printTemplate = res.data.result as SysPrint;
    var template = JSON.parse(printTemplate.template);
    var resList = await listWmsOrderPurchaseDetails(detailForm.value);
    var printData = resList.data.result || [];
    printData.forEach((item: any, index?: any) => {
        item.no = index + 1;
    });
    //打印数据
    var row: any = {
        text1: title.value, //单号
        table: printData, //表格数据
    };
    printDialogRefTestStudent.value.showDialog(new hiprint.PrintTemplate({ template: template }), row, template.panels[0].width);
};

// æš´éœ²æ–¹æ³•
defineExpose({ openDialog, openDrawer });
</script>
<style lang="less" scoped>
.detailBoxWrap {
    margin: 10px;
}

.msi-form {
    margin-top: 10px;
}
.msi-form {
    margin-bottom: 10px;
}
.slot_title {
    display: flex;
    align-items: center;
    // margin-left: 20px;
    .title_orderNo {
        font-size: 18px;
        color: #f18201;
        font-weight: bold;
        margin-right: 5px;
    }
}
</style>

 LA24030_LuLiPackageLine_Web/src/views/main/WmsOrder/wmsOrderAsn/component/openAllpropAsn.vue

ÎļþÒÑɾ³ý

 LA24030_LuLiPackageLine_Web/src/views/main/WmsOrder/wmsOrderAsn/index.vue

@@ -1,242 +1,274 @@
<template>
  <div class="wmsOrderAsn-container">
    <el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
      <el-form :model="queryParams" ref="queryForm" labelWidth="90">
        <el-row>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10">
            <el-form-item label="关键字">
              <el-input v-model="queryParams.searchKey" clearable="" placeholder="ASN单号" />
    <div class="wmsOrderPurchase-container">
        <el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
            <el-form :model="queryParams" ref="queryForm" labelWidth="90">
                <el-row>
                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" class="mb10">
                        <el-form-item label="关键字">
                            <el-input v-model="queryParams.searchKey" clearable="" placeholder="PO单号,供应商编号,供应商名称,ERP单号,项目号" />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
                        <el-form-item label="PO单号">
                            <el-input v-model="queryParams.purchaseNo" clearable="" placeholder="请输入PO单号" />
                        </el-form-item>
                    </el-col>

            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
            <el-form-item label="ASN单号">
              <el-input v-model="queryParams.asnNo" clearable="" placeholder="请输入ASN单号" />
                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
                        <el-form-item label="业务类型">
                            <el-select clearable="" v-model="queryParams.businessType" placeholder="请选择业务类型">
                                <el-option v-for="(item, index) in getBusinessTypeData_Index" :key="index" :value="item.businessTypeValue" :label="`[${item.businessTypeValue}] ${item.businessTypeName}`" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
                        <el-form-item label="单据来源">
                            <el-select clearable="" v-model="queryParams.orderSocure" placeholder="请选择单据来源">
                                <el-option v-for="(item, index) in getEnumOrderSocureData_Index" :key="index" :value="item.describe" :label="`${item.describe}`" />
                            </el-select>
                        </el-form-item>
                    </el-col>

            </el-form-item>
          </el-col>
          <!-- <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
            <el-form-item label="单据类型">
              <el-select clearable="" v-model="queryParams.asnType" placeholder="请选择单据类型">
                <el-option v-for="(item,index) in getEnumAsnTypeData_Index" :key="index" :value="item.value" :label="`${item.describe}`" />
              </el-select>
            </el-form-item>
          </el-col> -->
 
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
            <el-form-item label="业务类型">
              <el-select clearable="" v-model="queryParams.businessType" placeholder="请选择业务类型">
                <el-option v-for="(item, index) in getBusinessTypeData_Index" :key="index" :value="item.businessTypeValue"
                  :label="`[${item.businessTypeValue}] ${item.businessTypeName}`" />

              </el-select>

            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
            <el-form-item label="单据状态">
              <el-select clearable="" v-model="queryParams.asnStatus" placeholder="请选择单据状态">
                <el-option v-for="(item, index) in getEnumAsnStatusData_Index" :key="index" :value="item.value"
                  :label="`${item.describe}`" />

              </el-select>

            </el-form-item>
          </el-col>
          <!-- <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
                        <el-form-item label="单据状态">
                            <el-select clearable="" v-model="queryParams.poStatus" placeholder="请选择单据状态">
                                <el-option v-for="(item, index) in getEnumPoStatusData_Index" :key="index" :value="item.value" :label="`${item.describe}`" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
            <el-form-item label="单据状态名称">
              <el-input v-model="queryParams.asnStatusName" clearable="" placeholder="请输入单据状态名称"/>
              <el-input v-model="queryParams.poStatusName" clearable="" placeholder="请输入单据状态名称"/>
              
            </el-form-item>
          </el-col> -->
          <!-- <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
            <el-form-item label="物流单号">
              <el-input v-model="queryParams.trackingNumber" clearable="" placeholder="请输入物流单号" />
                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
                        <!-- <el-form-item label="供应商编号">
              <el-input v-model="queryParams.supplierCode" clearable="" placeholder="请输入供应商编号" />
            </el-form-item> -->

                        <el-form-item label="供应商" prop="supplierCode">
                            <el-select
                                v-model="queryParams.supplierCode"
                                filterable
                                remote
                                reserve-keyword
                                remote-show-suffix
                                :remote-method="remoteMethod"
                                :loading="loading"
                                placeholder="请选择供应商"
                                clearable
                                style="width: 100%"
                                @change="changeXmbh(queryParams.supplierCode)"
                            >
                                <el-option v-for="(item, index) in arrTdp" :key="index" :value="item.custCode" :label="`[${item.custCode}]${item.custChinaName}`"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
                        <el-form-item label="供应商名称">
                            <el-input v-model="queryParams.supplierName" clearable="" placeholder="请输入供应商名称" />
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
            <el-form-item label="收货道口"> -->
                    <!-- <el-input v-model="queryParams.dock" clearable="" placeholder="请输入收货道口" /> -->
                    <!--     <el-select clearable v-model="queryParams.dock" placeholder="请选择收货道口">
              <el-option
                v-for="(item, index) in getEnumDockData"
                :key="index"
                :value="item.value"
                :label="`${item.describe}`"
              ></el-option>
            </el-select> -->
                    <!--   </el-form-item>
          </el-col> -->
                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
                        <el-form-item label="ERP单号">
                            <el-input v-model="queryParams.erpOrderNo" clearable="" placeholder="请输入ERP单号" />
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
            <el-form-item label="项目ID">
              <el-input v-model="queryParams.projectId" clearable="" placeholder="请输入项目ID"/>
              
            </el-form-item>
          </el-col> -->
          <!-- <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
            <el-form-item label="释放状态">
              <el-input-number v-model="queryParams.releaseStatus"  clearable="" placeholder="请输入释放状态"/>
              
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
            <el-form-item label="释放状态名称">
              <el-input v-model="queryParams.releaseStatusName" clearable="" placeholder="请输入释放状态名称"/>
              
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
            <el-form-item label="是否冻结">
              <el-select clearable="" v-model="queryParams.isFreeze" placeholder="请选择是否冻结">
                <el-option v-for="(item,index) in getEnumIsFreezeData_Index" :key="index" :value="item.value" :label="`${item.describe}`" />
                
              </el-select>
                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
                        <el-form-item label="项目号">
                            <el-input v-model="queryParams.projectNo" clearable="" placeholder="请输入项目号" />
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
            <el-form-item label="项目名称">
              <el-input v-model="queryParams.projectName" clearable="" placeholder="请输入项目名称"/>
              
            </el-form-item>
          </el-col> -->

          <!-- <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
            <el-form-item label="预计到达日期">
              <el-date-picker placeholder="请选择预计到达日期" value-format="YYYY/MM/DD" type="daterange" v-model="queryParams.estimatedDateRange" />
              
            </el-form-item>
          </el-col> -->
          <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" class="mb10">
            <el-form-item>
              <el-button-group style="display: flex; align-items: center;">
                <el-button type="primary" icon="ele-Search" @click="handleQuery" v-auth="'wmsOrderAsn:page'"> æŸ¥è¯¢
                </el-button>
                <el-button icon="ele-Refresh" @click="() => queryParams = {}"> é‡ç½® </el-button>
                <el-button icon="ele-ZoomIn" @click="changeAdvanceQueryUI" v-if="!showAdvanceQueryUI"
                  style="margin-left:5px;"> é«˜çº§æŸ¥è¯¢ </el-button>
                <el-button icon="ele-ZoomOut" @click="changeAdvanceQueryUI" v-if="showAdvanceQueryUI"
                  style="margin-left:5px;"> éšè— </el-button>
                <!-- <el-button type="primary" style="margin-left:5px;" icon="ele-Plus" @click="openAddWmsOrderAsn" v-auth="'wmsOrderAsn:add'"> æ–°å¢ž </el-button> -->
                <el-button type="primary" style="margin-left:5px;" icon="ele-Plus" @click="showProp(1)"
                  v-auth="'wmsOrderPurchase:add'"> æ–°å¢ž </el-button>
                  <el-button type="primary" style="margin-left:5px;" icon="ele-Upload" @click="openImportExcelWmsOrderDeliver"> å¯¼å…¥ </el-button>
                  <el-button type="primary" style="margin-left:5px;" icon="ele-Download" @click="handExport"> å¯¼å‡º</el-button>
              </el-button-group>
            </el-form-item>
                    <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" class="mb10">
                        <el-form-item>
                            <el-button-group style="display: flex; align-items: center">
                                <el-button type="primary" icon="ele-Search" @click="handleQuery"> æŸ¥è¯¢ </el-button>
                                <el-button icon="ele-Refresh" @click="() => (queryParams = {})"> é‡ç½® </el-button>
                                <el-button icon="ele-ZoomIn" @click="changeAdvanceQueryUI" v-if="!showAdvanceQueryUI" style="margin-left: 5px"> é«˜çº§æŸ¥è¯¢ </el-button>
                                <el-button icon="ele-ZoomOut" @click="changeAdvanceQueryUI" v-if="showAdvanceQueryUI" style="margin-left: 5px"> éšè— </el-button>
                                <!-- <el-button type="primary" style="margin-left:5px;" icon="ele-Plus" @click="openAddWmsOrderPurchase" v-auth="'wmsOrderPurchase:add'"> æ–°å¢ž </el-button> -->
                                <!-- æ–°å¢žPO单-ly -->
                                <!-- <el-button type="primary" style="margin-left:5px;" icon="ele-Plus" @click="showProp(1)"> æ–°å¢ž </el-button> -->
                                <!-- <el-button type="primary" style="margin-left:5px;" icon="ele-Upload" @click="openImportExcelWmsOrderDeliver"> å¯¼å…¥ </el-button> -->
                                <!-- <el-button type="primary" style="margin-left:5px;" icon="ele-Download" @click="handExport"> å¯¼å‡º </el-button> -->
                            </el-button-group>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>
        <el-card class="full-table" shadow="hover" style="margin-top: 5px">
            <div class="table-container">
                <!-- å·¦ä¾§è¡¨æ ¼ -->
                <div class="left-table">
                    <p class="text-xtiny">齐套列表</p>

          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card class="full-table" shadow="hover" style="margin-top: 5px">
      <el-table :data="tableData" style="width: 100%" v-loading="loading" tooltip-effect="light" row-key="id"
        @sort-change="sortChange" ref="tableRef" :summary-method="getExportTitle" show-summary border="">
                    <el-table
                        :data="tableData"
                        style="width: 100%"
                        v-loading="loading"
                        tooltip-effect="light"
                        ref="tableRef"
                        row-key="id"
                        @sort-change="sortChange"
                        :summary-method="getExportTitle"
                        border=""
                    >
                        <el-table-column type="index" label="序号" width="55" align="center" />
                        <!-- <el-table-column prop="packageCode" label="包装号" show-overflow-tooltip="" /> -->
                        <el-table-column label="包装号" prop="packageCode" width="150" align="left" show-overflow-tooltip>
                            <template #default="scope">
                                <span class="under_line" @click="openDrawer(1, scope.row)">
                                    {{ scope.row.packageCode }}
                                </span>
                            </template>
                        </el-table-column>

        <el-table-column type="index" label="序号" width="55" align="center" />
        <!-- <el-table-column prop="purchaseNo" label="PO单号"  show-overflow-tooltip="" /> -->
                        <el-table-column prop="placeCode" label="库位编码" show-overflow-tooltip="" />
                        <el-table-column prop="inTime" label="进入时间" width="80" :formatter="formatDate_T_Date" show-overflow-tooltip="" />
                        <el-table-column prop="upi" label="部件条码" show-overflow-tooltip="" />
                        <el-table-column prop="detailName" label="部件名称" show-overflow-tooltip="" />
                        <el-table-column prop="planNo" label="批次" show-overflow-tooltip="" />
                        <el-table-column prop="orderId" label="订单号" show-overflow-tooltip="" />
                        <el-table-column prop="length" label="长" show-overflow-tooltip="" />
                        <el-table-column prop="width" label="宽" show-overflow-tooltip="" />
                        <el-table-column prop="thk" label="厚" show-overflow-tooltip="" />
                    </el-table>
                </div>

        <el-table-column label="ASN单号" prop="asnNo" width="160px" align="left" show-overflow-tooltip>
          <template #default="scope">
            <span class="under_line" @click="openDrawer(1, scope.row)">
              {{ scope.row.asnNo }}
            </span>
          </template>
        </el-table-column>
                <!-- å³ä¾§è¡¨æ ¼ -->
                <div class="right-table">
                    <p class="text-xtiny">不齐套列表</p>
                    <el-table
                        :data="newTableData"
                        style="width: 100%"
                        v-loading="loading"
                        tooltip-effect="light"
                        ref="newTableRef"
                        row-key="newId"
                        @sort-change="newSortChange"
                        :summary-method="getNewExportTitle"
                        border=""
                    >
                        <el-table-column type="index" label="序号" width="55" align="center" />
                        <!-- <el-table-column prop="packageCode" label="包装号" show-overflow-tooltip="" /> -->
                        <el-table-column label="包装号" prop="packageCode" width="150" align="left" show-overflow-tooltip>
                            <template #default="scope">
                                <span class="under_line" @click="openDrawer(1, scope.row)">
                                    {{ scope.row.packageCode }}
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="placeCode" label="库位编码" show-overflow-tooltip="" />
                        <el-table-column prop="inTime" label="进入时间" width="80" :formatter="formatDate_T_Date" show-overflow-tooltip="" />
                        <el-table-column prop="upi" label="部件条码" show-overflow-tooltip="" />
                        <el-table-column prop="detailName" label="部件名称" show-overflow-tooltip="" />
                        <el-table-column prop="planNo" label="批次" show-overflow-tooltip="" />
                        <el-table-column prop="orderId" label="订单号" show-overflow-tooltip="" />
                        <el-table-column prop="length" label="长" show-overflow-tooltip="" />
                        <el-table-column prop="width" label="宽" show-overflow-tooltip="" />
                        <el-table-column prop="thk" label="厚" show-overflow-tooltip="" />
                    </el-table>
                </div>
            </div>
        </el-card>

        <!-- 
          <el-table-column prop="asnType" min-width="100px" label="单据类型"  show-overflow-tooltip="" >
            <template #default="scope">
              {{ getEnumDesc(scope.row.asnType, getEnumAsnTypeData_Index)}}
            </template>
          </el-table-column> -->
          <el-table-column prop="businessTypeName" label="业务类型" show-overflow-tooltip="" min-width="90px">
          <template #default="scope">
            {{ scope.row.businessTypeName }}
          </template>
        </el-table-column>
        <el-table-column prop="asnStatus" label="单据状态" show-overflow-tooltip="">
          <template #default="scope">
            <el-tag :type="getTypeStatus(1, getEnumDesc(scope.row.asnStatus, getEnumAsnStatusData_Index))">
              {{ getEnumDesc(scope.row.asnStatus, getEnumAsnStatusData_Index) }}
            </el-tag>
          </template>
        </el-table-column>

        <!-- <el-table-column prop="quantity" label="数量" show-overflow-tooltip="" />
        <el-table-column prop="goodsQuantity" label="已收数量" show-overflow-tooltip="" /> -->

        <el-table-column prop="createTime" label="创建时间" width="130" :formatter="formatDate_T_Time"
          show-overflow-tooltip="" />
        <el-table-column prop="updateTime" label="修改时间" width="130" :formatter="formatDate_T_Time"
          show-overflow-tooltip="" />
        <el-table-column prop="createUserName" label="创建人" show-overflow-tooltip="" />
        <el-table-column prop="updateUserName" label="修改人" show-overflow-tooltip="" />
        <el-table-column label="操作" width="280" align="center" fixed="right" show-overflow-tooltip=""
          v-if="auth('wmsOrderAsn:update') || auth('wmsOrderAsn:delete')">
          <template #default="scope">
            <!-- <el-button icon="ele-Edit" size="small" text="" type="primary" @click="openEditWmsOrderAsn(scope.row)" v-auth="'wmsOrderAsn:update'"> ç¼–辑 </el-button> -->

            <el-button icon="ele-Edit" size="small" text="" type="primary" @click="showProp(scope.row)"
              v-auth="'wmsOrderPurchase:update'" :disabled="scope.row.asnStatus!=0"> ç¼–辑 </el-button>
            <el-button icon="ele-Delete" size="small" text="" type="primary" @click="delWmsOrderAsn(scope.row)"
              v-auth="'wmsOrderAsn:delete'" :disabled="scope.row.asnStatus!=0"> å–消 </el-button>


              <el-button icon="ele-Close" size="small" text="" type="primary" v-auth="'wmsOrderDeliver:delete'"
              @click="tocloseWmsOrderAsn(scope.row)" :disabled="!(scope.row.asnStatus == 0 || scope.row.asnStatus == 1)"> å…³é—­</el-button>

              <el-button icon="ele-Printer" size="small" text="" type="primary" @click="showProp(3,scope.row)"
              v-auth="'wmsOrderAsn:update'" :disabled="scope.row.asnStatus!=0"> æ‰“印 </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination v-model:currentPage="tableParams.page" v-model:page-size="tableParams.pageSize"
        :total="tableParams.total" :page-sizes="[10, 20, 50, 100, 200, 500]" small="" background=""
        @size-change="handleSizeChange" @current-change="handleCurrentChange"
        layout="total, sizes, prev, pager, next, jumper" />
      <printDialog ref="printDialogRef" :title="printWmsOrderAsnTitle" @reloadTable="handleQuery" />
      <editDialog ref="editDialogRef" :title="editWmsOrderAsnTitle" @reloadTable="handleQuery" />
    </el-card>

    <editDialogWmsOrderDeliver ref="editDialogRefWmsOrderDeliver" :title="editWmsOrderDeliverTitle"
        @reloadTable="handleQuery" />
      <importExcelDialog ref="importExcelDialogRefWmsOrderDeliver" :title="importExcelTitleWmsOrderDeliver"
        @parentUploadFun="handleImportExcelWmsOrderDeliver" @parentDownFun="handleDownExcelWmsOrderDeliver" />

    <!-- æ‰€æœ‰å¼¹æ¡† ï¼šæ–°å¢ž ç¼–辑 è¯¦æƒ… -->
    <open-allprop titleAuthor="1" hexiao="0" ref="propALlProp" @getTabelData="handleQuery"></open-allprop>
  </div>
        <editDialogWmsOrderDeliver ref="editDialogRefWmsOrderDeliver" :title="editWmsOrderDeliverTitle" @reloadTable="handleQuery" />
        <importExcelDialog
            ref="importExcelDialogRefWmsOrderDeliver"
            :title="importExcelTitleWmsOrderDeliver"
            @parentUploadFun="handleImportExcelWmsOrderDeliver"
            @parentDownFun="handleDownExcelWmsOrderDeliver"
        />
        <!-- æ‰€æœ‰å¼¹æ¡† ï¼šæ–°å¢ž ç¼–辑 è¯¦æƒ… -->
        <open-allprop titleAuthor="1" hexiao="0" ref="propALlProp" @getTabelData="handleQuery"></open-allprop>
    </div>
</template>

<script lang="ts" setup="" name="wmsOrderAsn">
import { getCurrentInstance, nextTick, onMounted, ref } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
<script lang="ts" setup="" name="wmsOrderPurchase">
import { getCurrentInstance, nextTick, onMounted, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { auth } from '/@/utils/authFunction';
import { getDictDataItem as di, getDictDataList as dl } from '/@/utils/dict-utils';
import { formatDate, formatDate_T_Date, formatDate_T_Time, defaultTimeRange } from '/@/utils/formatTime';
import printDialog from '/@/views/system/print/component/hiprint/preview.vue'
import editDialog from '/@/views/main/WmsOrder/wmsOrderAsn/component/editDialog.vue'
import { pageWmsOrderAsn, deleteWmsOrderAsn, importExcelWmsOrderAsn, downloadExcelTemplateWmsOrderAsn, downloadExcelTemplateWmsOrderAsnAll, closeWmsOrderAsn } from '/@/api/main/WmsOrder/wmsOrderAsn';
import { pageBaseCustomer } from '/@/api/main/WmsBase/baseCustomer';
import { formatUtcToData, getTypeStatus } from '/@/utils/formate';
import printDialog from '/@/views/system/print/component/hiprint/preview.vue';
import editDialog from '/@/views/main/WmsOrder/wmsOrderPurchase/component/editDialog.vue';
import {
    pageWmsOrderPurchase,
    deleteWmsOrderPurchase,
    importExcelWmsOrderPurchase,
    downloadExcelTemplateWmsOrderPurchase,
    downloadExcelTemplateWmsOrderPurchaseAll,
} from '/@/api/main/WmsOrder/wmsOrderPurchase';
import { handleSlectDataWmsBusinessType } from '/@/utils/selectData';
import { getAPI } from '/@/utils/axios-utils';
import { SysEnumApi } from '/@/api-services/api';
import commonFunction from '/@/utils/commonFunction';
import importExcelDialog from '/@/components/importExcel/index.vue' //引入导入组件
import { handleSlectDataWmsBusinessType } from "/@/utils/selectData";
import {
formatUtcToData,
  getTypeStatus
} from "/@/utils/formate";

import OpenAllprop from "./component/openAllpropAsn.vue";
import { ExcellTableDataExport } from "/@/hooks/exportTableDataExcell";
import importExcelDialog from '/@/components/importExcel/index.vue'; //引入导入组件
import { exportPageExcel } from '/@/utils/exportPageExcel'; //引入导出方法
import OpenAllprop from './component/openAllprop.vue';
import { ExcellTableDataExport } from '/@/hooks/exportTableDataExcell';
const { proxy }: any = getCurrentInstance(); // è®¿é—®å®žä¾‹ä¸Šä¸‹æ–‡ proxy同时支持开发 çº¿ä¸ŠçŽ¯å¢ƒ
const  moveType=10;//移动类型 å…¥åº“
const moveType = 10; //移动类型 å…¥åº“
// ------------封装导出功能--前端导出+表格标题---------------
const jsonExcellTableExport = {
  titleName: "", //导出表格名称
  interfaceListName: '',//导出接口名称
}
const { getExportTitle, handleExportExcell, formExport, entozhExcell } = ExcellTableDataExport(jsonExcellTableExport)
    titleName: '', //导出表格名称
    interfaceListName: '', //导出接口名称
};
const { getExportTitle, handleExportExcell, formExport, entozhExcell } = ExcellTableDataExport(jsonExcellTableExport);
// --------------end å°è£…导出功能--前端导出+表格标题-----------------
// ---------------新增-----------------------
const showProp = (item?: any,itemAll?:any) => {
  if (item == 1) { //新增
    proxy.$refs['propALlProp'].openDialog(1);
  } else if(item == 3){ //打印
    proxy.$refs['propALlProp'].openDialog(3, itemAll);
  } else{ //编辑
    proxy.$refs['propALlProp'].openDialog(2, item);
  }
}
const showProp = (item?: any) => {
    if (item == 1) {
        proxy.$refs['propALlProp'].openDialog(1);
    } else {
        proxy.$refs['propALlProp'].openDialog(2, item);
    }
};
// ---------------详情-----------------------
const openDrawer = (type: number, item?: any) => {
  proxy.$refs['propALlProp'].openDrawer(type, item, entozhExcell);
}
    proxy.$refs['propALlProp'].openDrawer(type, item, entozhExcell);
};
// ---------------end详情-----------------------
const getBusinessTypeData_Index = ref<any>([]);//业务类型 create by liuwq
const getEnumAsnTypeData_Index = ref<any>([]);
const getEnumAsnStatusData_Index = ref<any>([]);
const getEnumIsFreezeData_Index = ref<any>([]);


const getBusinessTypeData_Index = ref<any>([]); //业务类型 create by liuwq
const getEnumOrderTypeData_Index = ref<any>([]);
// const getEnumBusinessTypeData_Index = ref<any>([]); //update by liuwq
const getEnumPoStatusData_Index = ref<any>([]);

const { getEnumDesc } = commonFunction();

const getEnumOrderSocureData_Index = ref<any>([]);

const showAdvanceQueryUI = ref(false);
const printDialogRef = ref();
const editDialogRef = ref();
@@ -244,183 +276,242 @@
const tableData = ref<any>([]);
const queryParams = ref<any>({});
const tableParams = ref({
  page: 1,
  pageSize: 10,
  total: 0,
    page: 1,
    pageSize: 10,
    total: 0,
});

const printWmsOrderAsnTitle = ref("");
const editWmsOrderAsnTitle = ref("");
const printWmsOrderPurchaseTitle = ref('');
const editWmsOrderPurchaseTitle = ref('');

// æ”¹å˜é«˜çº§æŸ¥è¯¢çš„控件显示状态
const changeAdvanceQueryUI = () => {
  showAdvanceQueryUI.value = !showAdvanceQueryUI.value;
}
    showAdvanceQueryUI.value = !showAdvanceQueryUI.value;
};

const newTableData = ref([]);

const fetchNewTableData = async () => {
    loading.value = true;
    try {
        const response = await fetch('your-api-endpoint'); // æ›¿æ¢ä¸ºæ‚¨çš„API地址
        const data = await response.json();
        newTableData.value = data;
    } catch (error) {
        console.error('获取新表数据错误:', error);
    } finally {
        loading.value = false;
    }
};

const newSortChange = ({ prop, order }) => {
    console.log(`排序字段: ${prop}, æŽ’序顺序: ${order}`);
    // å¤„理排序逻辑
};

const openNewDrawer = (type, row) => {
    console.log('打开新的抽屉，类型:', type, ', æ•°æ®:', row);
};

const getNewExportTitle = () => {
    return '新表格导出标题';
};

// æŸ¥è¯¢æ“ä½œ
const handleQuery = async () => {
  loading.value = true;
  debugger
  var res = await pageWmsOrderAsn(Object.assign(queryParams.value, tableParams.value));
  tableData.value = res.data.result?.items ?? [];
  tableParams.value.total = res.data.result?.total;
  loading.value = false;
 
    loading.value = true;
    var res = await pageWmsOrderPurchase(Object.assign(queryParams.value, tableParams.value));
    tableData.value = res.data.result ?? [];

    newTableData.value = res.data.result ?? [];

    // tableParams.value.total = res.data.result?.total;
    loading.value = false;
    // getEnumOrderTypeData_Index.value = (await getAPI(SysEnumApi).apiSysEnumEnumDataListGet('OrderTypeEnum')).data.result ?? [];

    // getEnumPoStatusData_Index.value = (await getAPI(SysEnumApi).apiSysEnumEnumDataListGet('OrderStatusEnum')).data.result ?? [];
};

// åˆ—排序
const sortChange = async (column: any) => {
  queryParams.value.field = column.prop;
  queryParams.value.order = column.order;
  await handleQuery();
    queryParams.value.field = column.prop;
    queryParams.value.order = column.order;
    await handleQuery();
};

// æ‰“开新增页面
const openAddWmsOrderAsn = () => {
  editWmsOrderAsnTitle.value = '添加ASN主';
  editDialogRef.value.openDialog({});
const openAddWmsOrderPurchase = () => {
    editWmsOrderPurchaseTitle.value = '添加PO单';
    editDialogRef.value.openDialog({});
};

// æ‰“开打印页面
const openPrintWmsOrderAsn = async (row: any) => {
  printWmsOrderAsnTitle.value = '打印ASN主';
}
const openPrintWmsOrderPurchase = async (row: any) => {
    printWmsOrderPurchaseTitle.value = '打印PO单';
};

// æ‰“开编辑页面
const openEditWmsOrderAsn = (row: any) => {
  editWmsOrderAsnTitle.value = '编辑ASN主';
  editDialogRef.value.openDialog(row);
const openEditWmsOrderPurchase = (row: any) => {
    editWmsOrderPurchaseTitle.value = '编辑PO单';
    editDialogRef.value.openDialog(row);
};

// åˆ é™¤
const delWmsOrderAsn = (row: any) => {
  ElMessageBox.confirm(`确定要取消吗?`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      var res = await deleteWmsOrderAsn(row);
      if (res.data.type == "success") {
        handleQuery();
        ElMessage.success("取消成功");
      }
    })
const delWmsOrderPurchase = (row: any) => {
    ElMessageBox.confirm(`确定要取消吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(async () => {
            await deleteWmsOrderPurchase(row);
            handleQuery();
            ElMessage.success('取消成功');
        })
        .catch(() => {});
};

// æ”¹å˜é¡µé¢å®¹é‡
const handleSizeChange = (val: number) => {
  tableParams.value.pageSize = val;
  handleQuery();
    tableParams.value.pageSize = val;
    handleQuery();
};

// æ”¹å˜é¡µç åºå·
const handleCurrentChange = (val: number) => {
  tableParams.value.page = val;
  handleQuery();
    tableParams.value.page = val;
    handleQuery();
};

// æ ¹æ®businessTypeValue获取businessTypeName
const getBusinessTypeByValue = (key: any, itemLst: any) => {

return itemLst.find((x: any) => x.businessTypeValue == key)?.businessTypeName;
    return itemLst.find((x: any) => x.businessTypeValue == key)?.businessTypeName;
};

handleQuery();

onMounted(async () => {
  nextTick(async () => {
    getBusinessTypeData_Index.value = await handleSlectDataWmsBusinessType(moveType); //下拉读取接口
    getEnumAsnTypeData_Index.value = (await getAPI(SysEnumApi).apiSysEnumEnumDataListGet('OrderTypeEnum')).data.result ?? [];
    getEnumAsnStatusData_Index.value = (await getAPI(SysEnumApi).apiSysEnumEnumDataListGet('OrderStatusEnum')).data.result ?? [];
    getEnumIsFreezeData_Index.value = (await getAPI(SysEnumApi).apiSysEnumEnumDataListGet('TrueFalseEnum')).data.result ?? [];
  });
//================
const arrTdp = ref<any[]>([]);
const queryParamsW = ref<any>({});
const tableParamsW = ref({
    page: 1,
    pageSize: 200,
    total: 0,
    custType: '供应商',
});

//-----------------远程搜索----------------
const handleQueryTdp = async () => {
    var res = await pageBaseCustomer(Object.assign(queryParamsW.value, tableParamsW.value));
    arrTdp.value = res.data.result?.items ?? [];
};
const changeXmbh = async (query?: any) => {
    loading.value = true;
    var res = await pageBaseCustomer({
        page: 1,
        pageSize: 200,
        custCode: query,
        custType: '供应商',
    });
    loading.value = false;
    arrTdp.value = res.data.result?.items ?? [];
};
// è¿œç¨‹æœç´¢  è¾“入关键字以从远程服务器中查找数据。
const remoteMethod = async (query: string) => {
    loading.value = true;
    var res = await pageBaseCustomer({
        page: 1,
        pageSize: 200,
        custCode: query,
        custType: '供应商',
    });
    loading.value = false;
    arrTdp.value = res.data.result?.items ?? [];
};
//-----------------远程搜索----------------

const getEnumDockData = ref<any>([]);

onMounted(async () => {
    nextTick(async () => {
        // getBusinessTypeData_Index.value = await handleSlectDataWmsBusinessType(moveType); //下拉读取接口
        // getEnumDockData.value = (await getAPI(SysEnumApi).apiSysEnumEnumDataListGet('DockEnum')).data.result ?? [];
        // getEnumOrderSocureData_Index.value = (await getAPI(SysEnumApi).apiSysEnumEnumDataListGet('SourceByEnum')).data.result ?? [];
    });
});

/***************************************************[DO单操作]结束***************************************************/
/***************************************************[DO单导入]开始***************************************************/
const printWmsOrderDeliverTitle = ref("");
const editWmsOrderDeliverTitle = ref("");
const importExcelTitleWmsOrderDeliver = ref("");
const printWmsOrderDeliverTitle = ref('');
const editWmsOrderDeliverTitle = ref('');
const importExcelTitleWmsOrderDeliver = ref('');
const importExcelDialogRefWmsOrderDeliver = ref();
//打开导入界面
const openImportExcelWmsOrderDeliver = () => {
  importExcelTitleWmsOrderDeliver.value = '导入ASN单';
  importExcelDialogRefWmsOrderDeliver.value.openDialog({});
    importExcelTitleWmsOrderDeliver.value = '导入PO单';
    importExcelDialogRefWmsOrderDeliver.value.openDialog({});
};
//导入数据
const handleImportExcelWmsOrderDeliver = async (formData: Blob) => {
  var result = await importExcelWmsOrderAsn(formData);
  importExcelDialogRefWmsOrderDeliver.value.callBackUploadFun(result.data);//回调导入子页面的方法
  if (result.data.type == "success") {
    handleQuery();
  }
    var result = await importExcelWmsOrderPurchase(formData);
    importExcelDialogRefWmsOrderDeliver.value.callBackUploadFun(result.data); //回调导入子页面的方法
    if (result.data.type == 'success') {
        handleQuery();
    }
};
//下载导入模板
const handleDownExcelWmsOrderDeliver = async () => {
  var result = await downloadExcelTemplateWmsOrderAsn();
  importExcelDialogRefWmsOrderDeliver.value.callBackDownFun(result);//回调导入子页面的方法
    var result = await downloadExcelTemplateWmsOrderPurchase();
    importExcelDialogRefWmsOrderDeliver.value.callBackDownFun(result); //回调导入子页面的方法
};
/***************************************************[DO单导入]结束***************************************************/
/***************************************************[DO单导出]开始***************************************************/



//导出
const handExport = () => {
  downloadExcelTemplateWmsOrderAsnAll(queryParams.value)
    .then((res) => {
      if(res.status == 200){
        const link = document.createElement("a"); //创建a标签
          let blob = new Blob([res.data], { type: "application/vnd.ms-excel" }); // response就是接口返回的文件流
          let objectUrl = URL.createObjectURL(blob);
          link.href = objectUrl;
          link.download = `ASN单导出${formatUtcToData(
            new Date().toString(),
            "YYYY-MM-DD hh:mm:ss"
          )}`; // è‡ªå®šä¹‰æ–‡ä»¶å
          link.click(); // ä¸‹è½½æ–‡ä»¶
          URL.revokeObjectURL(objectUrl); // é‡Šæ”¾å†…å­˜
      }
    })
    downloadExcelTemplateWmsOrderPurchaseAll(queryParams.value).then((res) => {
        if (res.status == 200) {
            const link = document.createElement('a'); //创建a标签
            let blob = new Blob([res.data], { type: 'application/vnd.ms-excel' }); // response就是接口返回的文件流
            let objectUrl = URL.createObjectURL(blob);
            link.href = objectUrl;
            link.download = `PO单导出${formatUtcToData(new Date().toString(), 'YYYY-MM-DD hh:mm:ss')}`; // è‡ªå®šä¹‰æ–‡ä»¶å
            link.click(); // ä¸‹è½½æ–‡ä»¶
            URL.revokeObjectURL(objectUrl); // é‡Šæ”¾å†…å­˜
        }
    });
};




// å…³é—­Asn单
const tocloseWmsOrderAsn = (row: any) => {
  ElMessageBox.confirm(`确定要关闭吗?`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      loading.value = true;
      var ret = await closeWmsOrderAsn(row);
      if (ret.data.type == "success") {
        ElMessage.success("关闭成功");
      }
      loading.value = false;
      handleQuery();
    })
};

</script>
<style scoped>
:deep(.el-input),
:deep(.el-select),
:deep(.el-input-number) {
  width: 100%;
    width: 100%;
}

.under_line {
  color: #F18201;
  text-decoration: underline;
  cursor: pointer;
    color: #f18201;
    text-decoration: underline;
    cursor: pointer;
}
.table-container {
    display: flex; /* ä½¿ç”¨ flexbox å¸ƒå±€ */
    justify-content: space-between; /* è¡¨æ ¼ä¹‹é—´ä¿æŒé—´è· */
}

.table-container .left-table,
.table-container .right-table {
    flex: 1; /* ä½¿æ¯ä¸ªè¡¨æ ¼å æ®ç›¸åŒå®½åº¦ */
    margin-right: 10px; /* å®šä¹‰å³ä¾§çš„间距 */
    width: 50%;
}
.text-xtiny {
    font-size: 14px;
    font-weight: 700;
    display: block;
    padding: 0 0 10px 0;
}
.table-container .right-table {
    margin-right: 0; /* æœ€åŽä¸€ä¸ªè¡¨æ ¼æ²¡æœ‰å³é—´è· */
}
</style>


 LA24030_LuLiPackageLine_Web/src/views/main/WmsOrder/wmsOrderPurchase/component/openAllprop.vue

@@ -258,11 +258,11 @@
            </template>
        </el-dialog>
        <!-- å•è¯¦æƒ… -->
        <el-drawer v-model="drawerVisible" :title="`${detailForm.poId}订单详情`" direction="rtl" size="80%" @close="handleDrawerClose">
        <el-drawer v-model="drawerVisible" :title="`${detailForm.poId}物料详情`" direction="rtl" size="80%" @close="handleDrawerClose">
            <template #title>
                <div class="slot_title">
                    <div class="title_orderNo">{{ title }}</div>
                    <div>订单详情</div>
                    <div>物料详情</div>
                </div>
            </template>

@@ -294,68 +294,38 @@
                        <!-- <el-table-column prop="poId" label="PO单ID" show-overflow-tooltip="" /> -->
                        <!-- <el-table-column prop="poNo" label="PO单号" show-overflow-tooltip="" /> -->

                        <el-table-column prop="materialCode" label="物料编号" fixed="left" show-overflow-tooltip="" />
                        <el-table-column prop="materialName" label="物料名称" show-overflow-tooltip="" />
                        <el-table-column prop="poLineNumber" label="行号" show-overflow-tooltip="" />

                        <el-table-column prop="poDetailStatus" label="状态" show-overflow-tooltip="">
                            <template #default="scope">
                                <el-tag :type="getTypeStatus(1, getEnumDesc(scope.row.poDetailStatus, getEnumPoDetailStatusData_Index))">{{
                                    getEnumDesc(scope.row.poDetailStatus, getEnumPoDetailStatusData_Index)
                                }}</el-tag>
                            </template>
                        </el-table-column>

                        <el-table-column prop="quantity" label="数量" show-overflow-tooltip="" />
                        <el-table-column prop="goodsQuantity" label="已收数量" show-overflow-tooltip="" />

                        <!-- <el-table-column
            prop="createASNQuantity"
            label="已创建ASN数量" min-width="110px"
            show-overflow-tooltip=""
          /> -->

                        <!-- <el-table-column
            prop="snp"
            label="标包数量"
            show-overflow-tooltip=""
          /> -->
                        <!-- <el-table-column prop="erpOrderNo" label="ERP单号" show-overflow-tooltip="" /> -->
                        <el-table-column prop="erpCode" label="ERP库存地" show-overflow-tooltip="" />

                        <!-- <el-table-column 
            prop="printQuantity" min-width="110px"
            label="条码打印数量"
            show-overflow-tooltip=""
          /> -->

                        <!-- <el-table-column
            prop="poDetailStatusName"
            label="状态名称"
            show-overflow-tooltip=""
          /> -->
                        <el-table-column prop="supplierCode" label="供应商编号" show-overflow-tooltip="" />
                        <el-table-column prop="supplierName" label="供应商名称" show-overflow-tooltip="" />
                        <el-table-column prop="supplierBatch" min-width="100px" label="供应商批次" show-overflow-tooltip="" />
                        <!-- <el-table-column prop="batch" min-width="100px" label="批次" show-overflow-tooltip="" /> -->
                        <el-table-column prop="unit" min-width="100px" label="采购单位" show-overflow-tooltip="" />

                        <el-table-column prop="plannedStartTime" label="计划开始时间" min-width="130px" show-overflow-tooltip="" />
                        <el-table-column prop="plannedEndTime" label="计划结束时间" min-width="130px" show-overflow-tooltip="" />

                        <el-table-column prop="projectNo" min-width="100px" label="项目号" show-overflow-tooltip="" />

                        <!-- <el-table-column
            prop="dock"
            min-width="100px"
            label="收货道口"
            show-overflow-tooltip=""
          /> -->

                        <el-table-column prop="createTime" label="创建时间" width="130" :formatter="formatDate_T_Time" show-overflow-tooltip="" />
                        <el-table-column prop="updateTime" label="修改时间" width="130" :formatter="formatDate_T_Time" show-overflow-tooltip="" />
                        <el-table-column prop="createUserName" label="创建人" show-overflow-tooltip="" />
                        <el-table-column prop="updateUserName" label="修改人" show-overflow-tooltip="" />
                        <el-table-column prop="placeCode" label="库位编码"  show-overflow-tooltip="" />
         <el-table-column prop="inTime" label="进入时间" width="80" :formatter="formatDate_T_Date"  show-overflow-tooltip="" />
        <el-table-column prop="upi" label="部件条码"  show-overflow-tooltip="" />
        <el-table-column prop="detailName" label="部件名称"  show-overflow-tooltip="" />
        <el-table-column prop="planNo" label="批次"  show-overflow-tooltip="" />
        <el-table-column prop="orderId" label="订单号"  show-overflow-tooltip="" />
        <el-table-column prop="packageCode" label="包装号"  show-overflow-tooltip="" />
        <el-table-column prop="length" label="长"  show-overflow-tooltip="" />
        <el-table-column prop="width" label="宽"  show-overflow-tooltip="" />
        <el-table-column prop="thk" label="厚"  show-overflow-tooltip="" />
          <el-table-column prop="stockStatus" label="库存状态"  show-overflow-tooltip="" >
            <template #default="scope">
              <el-tag>{{ getEnumDesc(scope.row.stockStatus, getEnumStockStatusData_Index)}}</el-tag>
            </template>
          </el-table-column>
        <el-table-column prop="stockStatusName" label="库存状态名称"  show-overflow-tooltip="" />
        <el-table-column prop="operReason" label="操作原因"  show-overflow-tooltip="" />
        <el-table-column prop="operUser" label="操作人"  show-overflow-tooltip="" />
         <el-table-column prop="operTime" label="操作时间" width="80" :formatter="formatDate_T_Date"  show-overflow-tooltip="" />
          <el-table-column prop="lockStatus" label="锁定状态"  show-overflow-tooltip="" >
            <template #default="scope">
              <el-tag>{{ getEnumDesc(scope.row.lockStatus, getEnumLockStatusData_Index)}}</el-tag>
            </template>
          </el-table-column>
        <el-table-column prop="lockReason" label="锁定原因"  show-overflow-tooltip="" />
        <el-table-column prop="lockUser" label="锁定人"  show-overflow-tooltip="" />
         <el-table-column prop="lockTime" label="锁定时间" width="80" :formatter="formatDate_T_Date"  show-overflow-tooltip="" />
        <el-table-column prop="remarks" label="备注"  show-overflow-tooltip="" />
         <el-table-column prop="createTime" label="创建时间" width="130" :formatter="formatDate_T_Time"  show-overflow-tooltip="" />
         <el-table-column prop="updateTime" label="修改时间" width="130" :formatter="formatDate_T_Time"  show-overflow-tooltip="" />
        <el-table-column prop="createUserName" label="创建人"  show-overflow-tooltip="" />
        <el-table-column prop="updateUserName" label="修改人"  show-overflow-tooltip="" />
                    </el-table>
                    <Pagination :total="detailCount" v-model:page="detailForm.Page" v-model:limit="detailForm.PageSize" @pagination="getDetail" style="margin-top: 20px; text-align: center"></Pagination>

@@ -443,6 +413,10 @@
const hexiao = computed(() => props.hexiao);
const loading = ref(false);



const getEnumStockStatusData_Index = ref<any>([]);
  const getEnumLockStatusData_Index = ref<any>([]);
// ç™»å½•ç”¨æˆ·id
// const LoginUserID = computed(() => store.state.login.userInfo.id || localCache.getCache("LoginUserID"))

@@ -653,18 +627,15 @@
const openDrawer = async (type: number, scope: any = {}, entozhExcell?: any) => {
    detailForm.value.Page = 1; //bug:点编辑-再点详情
    detailForm.value.PageSize = 10; //bug:点编辑-再点详情
    if (scope.purchaseNo) {
        title.value = `${scope.purchaseNo}`;
    }
    if (scope.orderNo) {
        title.value = `${scope.orderNo}`;
    if (scope.packageCode) {
        title.value = `${scope.packageCode}`;
    }
    drawerType.value = 'drawerAll';
    drawerVisible.value = true;
    //当前入库单号id
    detailForm.value.poId = scope.id;
    //入库单
    purchaseNo.value = scope.purchaseNo;
    purchaseNo.value = scope.packageCode;
    debugger;
    detailForm.value.poId = scope.id;
    //获取物料列表
@@ -676,13 +647,14 @@
    //------------------获取物料列表物料明细
    getDetail();
    //------------------获取物料列表物料明细
    getEnumStockStatusData_Index.value = (await getAPI(SysEnumApi).apiSysEnumEnumDataListGet('StockStatusEnum')).data.result ?? [];
    getEnumLockStatusData_Index.value = (await getAPI(SysEnumApi).apiSysEnumEnumDataListGet('LockStatusEnum')).data.result ?? [];
    // getBusinessTypeData_Index.value = await handleSlectDataWmsBusinessType(moveType); //下拉读取业务类型接口 create  by liuwq

    getBusinessTypeData_Index.value = await handleSlectDataWmsBusinessType(moveType); //下拉读取业务类型接口 create  by liuwq
    // getEnumDockData.value = (await getAPI(SysEnumApi).apiSysEnumEnumDataListGet('DockEnum')).data.result ?? [];

    getEnumDockData.value = (await getAPI(SysEnumApi).apiSysEnumEnumDataListGet('DockEnum')).data.result ?? [];

    getEnumPoDetailStatusData_Index.value = (await getAPI(SysEnumApi).apiSysEnumEnumDataListGet('OrderStatusEnum')).data.result ?? [];
    getEnumOrderTypeData_Index.value = (await getAPI(SysEnumApi).apiSysEnumEnumDataListGet('OrderTypeEnum')).data.result ?? [];
    // getEnumPoDetailStatusData_Index.value = (await getAPI(SysEnumApi).apiSysEnumEnumDataListGet('OrderStatusEnum')).data.result ?? [];
    // getEnumOrderTypeData_Index.value = (await getAPI(SysEnumApi).apiSysEnumEnumDataListGet('OrderTypeEnum')).data.result ?? [];
    //----------------物料明细
    // æ ¹æ®çŠ¶æ€è½¬ä¸­æ–‡ ä¿ç•™3位小数
    let scopetrans = JSON.parse(JSON.stringify(scope));

 LA24030_LuLiPackageLine_Web/src/views/main/WmsOrder/wmsOrderPurchase/index.vue

@@ -1,95 +1,79 @@
<template>
  <div class="wmsOrderPurchase-container">
    <el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
      <el-form :model="queryParams" ref="queryForm" labelWidth="90">
        <el-row>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" class="mb10">
            <el-form-item label="关键字">
              <el-input v-model="queryParams.searchKey" clearable="" placeholder="PO单号,供应商编号,供应商名称,ERP单号,项目号" />
    <div class="wmsOrderPurchase-container">
        <el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
            <el-form :model="queryParams" ref="queryForm" labelWidth="90">
                <el-row>
                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" class="mb10">
                        <el-form-item label="关键字">
                            <el-input v-model="queryParams.searchKey" clearable="" placeholder="PO单号,供应商编号,供应商名称,ERP单号,项目号" />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
                        <el-form-item label="PO单号">
                            <el-input v-model="queryParams.purchaseNo" clearable="" placeholder="请输入PO单号" />
                        </el-form-item>
                    </el-col>

            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
            <el-form-item label="PO单号">
              <el-input v-model="queryParams.purchaseNo" clearable="" placeholder="请输入PO单号" />
                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
                        <el-form-item label="业务类型">
                            <el-select clearable="" v-model="queryParams.businessType" placeholder="请选择业务类型">
                                <el-option v-for="(item, index) in getBusinessTypeData_Index" :key="index" :value="item.businessTypeValue" :label="`[${item.businessTypeValue}] ${item.businessTypeName}`" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
                        <el-form-item label="单据来源">
                            <el-select clearable="" v-model="queryParams.orderSocure" placeholder="请选择单据来源">
                                <el-option v-for="(item, index) in getEnumOrderSocureData_Index" :key="index" :value="item.describe" :label="`${item.describe}`" />
                            </el-select>
                        </el-form-item>
                    </el-col>

            </el-form-item>
          </el-col>
          
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
            <el-form-item label="业务类型">

              <el-select clearable="" v-model="queryParams.businessType" placeholder="请选择业务类型">
                <el-option v-for="(item, index) in getBusinessTypeData_Index" :key="index" :value="item.businessTypeValue"
                  :label="`[${item.businessTypeValue}] ${item.businessTypeName}`" />

              </el-select>

            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
            <el-form-item label="单据来源">
              <el-select clearable="" v-model="queryParams.orderSocure" placeholder="请选择单据来源">
                <el-option v-for="(item,index) in getEnumOrderSocureData_Index" :key="index" :value="item.describe" :label="`${item.describe}`" />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
            <el-form-item label="单据状态">
              <el-select clearable="" v-model="queryParams.poStatus" placeholder="请选择单据状态">
                <el-option v-for="(item, index) in getEnumPoStatusData_Index" :key="index" :value="item.value"
                  :label="`${item.describe}`" />

              </el-select>

            </el-form-item>
          </el-col>
          <!-- <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
                        <el-form-item label="单据状态">
                            <el-select clearable="" v-model="queryParams.poStatus" placeholder="请选择单据状态">
                                <el-option v-for="(item, index) in getEnumPoStatusData_Index" :key="index" :value="item.value" :label="`${item.describe}`" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
            <el-form-item label="单据状态名称">
              <el-input v-model="queryParams.poStatusName" clearable="" placeholder="请输入单据状态名称"/>
              
            </el-form-item>
          </el-col> -->
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
            <!-- <el-form-item label="供应商编号">
                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
                        <!-- <el-form-item label="供应商编号">
              <el-input v-model="queryParams.supplierCode" clearable="" placeholder="请输入供应商编号" />
            </el-form-item> -->


            <el-form-item label="供应商" prop="supplierCode">
            <el-select
              v-model="queryParams.supplierCode"
              filterable
              remote
              reserve-keyword
              remote-show-suffix
              :remote-method="remoteMethod"
              :loading="loading"
              placeholder="请选择供应商"
              clearable
              style="width: 100%"
              @change="changeXmbh(queryParams.supplierCode)"
            >
              <el-option
                v-for="(item, index) in arrTdp"
                :key="index"
                :value="item.custCode"
                :label="`[${item.custCode}]${item.custChinaName}`"
              ></el-option>
            </el-select>
          </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
            <el-form-item label="供应商名称">
              <el-input v-model="queryParams.supplierName" clearable="" placeholder="请输入供应商名称"/>
              
            </el-form-item>
          </el-col>
          <!-- <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
                        <el-form-item label="供应商" prop="supplierCode">
                            <el-select
                                v-model="queryParams.supplierCode"
                                filterable
                                remote
                                reserve-keyword
                                remote-show-suffix
                                :remote-method="remoteMethod"
                                :loading="loading"
                                placeholder="请选择供应商"
                                clearable
                                style="width: 100%"
                                @change="changeXmbh(queryParams.supplierCode)"
                            >
                                <el-option v-for="(item, index) in arrTdp" :key="index" :value="item.custCode" :label="`[${item.custCode}]${item.custChinaName}`"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
                        <el-form-item label="供应商名称">
                            <el-input v-model="queryParams.supplierName" clearable="" placeholder="请输入供应商名称" />
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
            <el-form-item label="收货道口"> -->
              <!-- <el-input v-model="queryParams.dock" clearable="" placeholder="请输入收货道口" /> -->
         <!--     <el-select clearable v-model="queryParams.dock" placeholder="请选择收货道口">
                    <!-- <el-input v-model="queryParams.dock" clearable="" placeholder="请输入收货道口" /> -->
                    <!--     <el-select clearable v-model="queryParams.dock" placeholder="请选择收货道口">
              <el-option
                v-for="(item, index) in getEnumDockData"
                :key="index"
@@ -97,176 +81,186 @@
                :label="`${item.describe}`"
              ></el-option>
            </el-select> -->
         <!--   </el-form-item>
                    <!--   </el-form-item>
          </el-col> -->
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
            <el-form-item label="ERP单号">
              <el-input v-model="queryParams.erpOrderNo" clearable="" placeholder="请输入ERP单号" />

            </el-form-item>
          </el-col>
          <!-- <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
                        <el-form-item label="ERP单号">
                            <el-input v-model="queryParams.erpOrderNo" clearable="" placeholder="请输入ERP单号" />
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
            <el-form-item label="项目ID">
              <el-input v-model="queryParams.projectId" clearable="" placeholder="请输入项目ID"/>
              
            </el-form-item>
          </el-col> -->
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
            <el-form-item label="项目号">
              <el-input v-model="queryParams.projectNo" clearable="" placeholder="请输入项目号" />

            </el-form-item>
          </el-col>
          <!-- <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
                        <el-form-item label="项目号">
                            <el-input v-model="queryParams.projectNo" clearable="" placeholder="请输入项目号" />
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
            <el-form-item label="项目名称">
              <el-input v-model="queryParams.projectName" clearable="" placeholder="请输入项目名称"/>
              
            </el-form-item>
          </el-col> -->

          
          <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" class="mb10">
            <el-form-item>
              <el-button-group style="display: flex; align-items: center;">
                <el-button type="primary" icon="ele-Search" @click="handleQuery" v-auth="'wmsOrderPurchase:page'"> æŸ¥è¯¢
                </el-button>
                <el-button icon="ele-Refresh" @click="() => queryParams = {}"> é‡ç½® </el-button>
                <el-button icon="ele-ZoomIn" @click="changeAdvanceQueryUI" v-if="!showAdvanceQueryUI"
                  style="margin-left:5px;"> é«˜çº§æŸ¥è¯¢ </el-button>
                <el-button icon="ele-ZoomOut" @click="changeAdvanceQueryUI" v-if="showAdvanceQueryUI"
                  style="margin-left:5px;"> éšè— </el-button>
                <!-- <el-button type="primary" style="margin-left:5px;" icon="ele-Plus" @click="openAddWmsOrderPurchase" v-auth="'wmsOrderPurchase:add'"> æ–°å¢ž </el-button> -->
                <!-- æ–°å¢žPO单-ly -->
                <el-button type="primary" style="margin-left:5px;" icon="ele-Plus" @click="showProp(1)"
                  v-auth="'wmsOrderPurchase:add'"> æ–°å¢ž </el-button>
                  <!-- <el-button type="primary" style="margin-left:5px;" icon="ele-Upload" @click="openImportExcelWmsOrderDeliver"> å¯¼å…¥ </el-button> -->
<!-- <el-button type="primary" style="margin-left:5px;" icon="ele-Download" @click="handExport"> å¯¼å‡º </el-button> -->
              </el-button-group>
            </el-form-item>
                    <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" class="mb10">
                        <el-form-item>
                            <el-button-group style="display: flex; align-items: center">
                                <el-button type="primary" icon="ele-Search" @click="handleQuery"> æŸ¥è¯¢ </el-button>
                                <el-button icon="ele-Refresh" @click="() => (queryParams = {})"> é‡ç½® </el-button>
                                <el-button icon="ele-ZoomIn" @click="changeAdvanceQueryUI" v-if="!showAdvanceQueryUI" style="margin-left: 5px"> é«˜çº§æŸ¥è¯¢ </el-button>
                                <el-button icon="ele-ZoomOut" @click="changeAdvanceQueryUI" v-if="showAdvanceQueryUI" style="margin-left: 5px"> éšè— </el-button>
                                <!-- <el-button type="primary" style="margin-left:5px;" icon="ele-Plus" @click="openAddWmsOrderPurchase" v-auth="'wmsOrderPurchase:add'"> æ–°å¢ž </el-button> -->
                                <!-- æ–°å¢žPO单-ly -->
                                <!-- <el-button type="primary" style="margin-left:5px;" icon="ele-Plus" @click="showProp(1)"> æ–°å¢ž </el-button> -->
                                <!-- <el-button type="primary" style="margin-left:5px;" icon="ele-Upload" @click="openImportExcelWmsOrderDeliver"> å¯¼å…¥ </el-button> -->
                                <!-- <el-button type="primary" style="margin-left:5px;" icon="ele-Download" @click="handExport"> å¯¼å‡º </el-button> -->
                            </el-button-group>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>
        <el-card class="full-table" shadow="hover" style="margin-top: 5px">
            <div class="table-container">
                <!-- å·¦ä¾§è¡¨æ ¼ -->
                <div class="left-table">
                    <p class="text-xtiny">齐包列表</p>

          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card class="full-table" shadow="hover" style="margin-top: 5px">
      <el-table :data="tableData" style="width: 100%" v-loading="loading" tooltip-effect="light" ref="tableRef"
        row-key="id" @sort-change="sortChange" :summary-method="getExportTitle" show-summary border="">
        <el-table-column fixed="left" type="index" label="序号" width="55" align="center" />
                    <el-table
                        :data="tableData"
                        style="width: 100%"
                        v-loading="loading"
                        tooltip-effect="light"
                        ref="tableRef"
                        row-key="id"
                        @sort-change="sortChange"
                        :summary-method="getExportTitle"
                        border=""
                    >
                        <el-table-column type="index" label="序号" width="55" align="center" />
                        <!-- <el-table-column prop="packageCode" label="包装号" show-overflow-tooltip="" /> -->
                        <el-table-column label="包装号" prop="packageCode" width="150" align="left" show-overflow-tooltip>
                            <template #default="scope">
                                <span class="under_line" @click="openDrawer(1, scope.row)">
                                    {{ scope.row.packageCode }}
                                </span>
                            </template>
                        </el-table-column>

        <el-table-column fixed="left" label="PO单号" prop="purchaseNo" width="150" align="left" show-overflow-tooltip>
          <template #default="scope">
            <span class="under_line" @click="openDrawer(1, scope.row)">
              {{ scope.row.purchaseNo }}
            </span>
          </template>
        </el-table-column>
                        <el-table-column prop="placeCode" label="库位编码" show-overflow-tooltip="" />
                        <el-table-column prop="inTime" label="进入时间" width="80" :formatter="formatDate_T_Date" show-overflow-tooltip="" />
                        <el-table-column prop="upi" label="部件条码" show-overflow-tooltip="" />
                        <el-table-column prop="detailName" label="部件名称" show-overflow-tooltip="" />
                        <el-table-column prop="planNo" label="批次" show-overflow-tooltip="" />
                        <el-table-column prop="orderId" label="订单号" show-overflow-tooltip="" />
                        <el-table-column prop="length" label="长" show-overflow-tooltip="" />
                        <el-table-column prop="width" label="宽" show-overflow-tooltip="" />
                        <el-table-column prop="thk" label="厚" show-overflow-tooltip="" />
                    </el-table>
                </div>

        <el-table-column prop="businessTypeName" label="业务类型" show-overflow-tooltip="" min-width="90px">
          <template #default="scope">
            {{ scope.row.businessTypeName }}
          </template>
        </el-table-column>
                <!-- å³ä¾§è¡¨æ ¼ -->
                <div class="right-table">
                    <p class="text-xtiny">不齐包列表</p>
                    <el-table
                        :data="newTableData"
                        style="width: 100%"
                        v-loading="loading"
                        tooltip-effect="light"
                        ref="newTableRef"
                        row-key="newId"
                        @sort-change="newSortChange"
                        :summary-method="getNewExportTitle"
                        border=""
                    >
                        <el-table-column type="index" label="序号" width="55" align="center" />
                        <!-- <el-table-column prop="packageCode" label="包装号" show-overflow-tooltip="" /> -->
                        <el-table-column label="包装号" prop="packageCode" width="150" align="left" show-overflow-tooltip>
                            <template #default="scope">
                                <span class="under_line" @click="openDrawer(1, scope.row)">
                                    {{ scope.row.packageCode }}
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="placeCode" label="库位编码" show-overflow-tooltip="" />
                        <el-table-column prop="inTime" label="进入时间" width="80" :formatter="formatDate_T_Date" show-overflow-tooltip="" />
                        <el-table-column prop="upi" label="部件条码" show-overflow-tooltip="" />
                        <el-table-column prop="detailName" label="部件名称" show-overflow-tooltip="" />
                        <el-table-column prop="planNo" label="批次" show-overflow-tooltip="" />
                        <el-table-column prop="orderId" label="订单号" show-overflow-tooltip="" />
                        <el-table-column prop="length" label="长" show-overflow-tooltip="" />
                        <el-table-column prop="width" label="宽" show-overflow-tooltip="" />
                        <el-table-column prop="thk" label="厚" show-overflow-tooltip="" />
                    </el-table>
                </div>
            </div>
        </el-card>

        <el-table-column prop="poStatus" label="单据状态" show-overflow-tooltip="">
          <template #default="scope">

            <el-tag :type="getTypeStatus(1, getEnumDesc(scope.row.poStatus, getEnumPoStatusData_Index))"> {{
              getEnumDesc(scope.row.poStatus, getEnumPoStatusData_Index) }}</el-tag>
          </template>
        </el-table-column>
     
        <el-table-column prop="orderSocure" label="单据来源" show-overflow-tooltip="" />

        <el-table-column prop="supplierCode" label="供应商编号" show-overflow-tooltip="" />
        <el-table-column prop="supplierName" label="供应商名称" show-overflow-tooltip="" />
        <!-- <el-table-column prop="dock" label="收货道口" show-overflow-tooltip="" /> -->
        <el-table-column prop="erpOrderNo" label="ERP单号" show-overflow-tooltip="" />
        <el-table-column prop="projectNo" label="项目号" show-overflow-tooltip="" />
        <!-- <el-table-column prop="remark" label="备注" show-overflow-tooltip="" /> -->

        <el-table-column prop="createTime" label="创建时间" width="130" :formatter="formatDate_T_Time"
          show-overflow-tooltip="" />
        <el-table-column prop="updateTime" label="修改时间" width="130" :formatter="formatDate_T_Time"
          show-overflow-tooltip="" />
        <el-table-column prop="createUserName" label="创建人" show-overflow-tooltip="" />
        <el-table-column prop="updateUserName" label="修改人" show-overflow-tooltip="" />
        <el-table-column label="操作" width="140" align="center" fixed="right" show-overflow-tooltip=""
          v-if="auth('wmsOrderPurchase:update') || auth('wmsOrderPurchase:delete')">
          <template #default="scope">
            <!-- <el-button icon="ele-Edit" size="small" text="" type="primary" @click="openEditWmsOrderPurchase(scope.row)" v-auth="'wmsOrderPurchase:update'"> ç¼–辑 </el-button> -->

            <el-button icon="ele-Edit" size="small" text="" type="primary" @click="showProp(scope.row)"
              v-auth="'wmsOrderPurchase:update'" :disabled="scope.row.poStatus!=0"> ç¼–辑 </el-button>

            <el-button icon="ele-Delete" size="small" text="" type="primary" @click="delWmsOrderPurchase(scope.row)"
              v-auth="'wmsOrderPurchase:delete'" :disabled="scope.row.poStatus!=0"> å–消 </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination v-model:currentPage="tableParams.page" v-model:page-size="tableParams.pageSize"
        :total="tableParams.total" :page-sizes="[10, 20, 50, 100, 200, 500]" small="" background=""
        @size-change="handleSizeChange" @current-change="handleCurrentChange"
        layout="total, sizes, prev, pager, next, jumper" />
      <printDialog ref="printDialogRef" :title="printWmsOrderPurchaseTitle" @reloadTable="handleQuery" />
      <editDialog ref="editDialogRef" :title="editWmsOrderPurchaseTitle" @reloadTable="handleQuery" />
    </el-card>

    <editDialogWmsOrderDeliver ref="editDialogRefWmsOrderDeliver" :title="editWmsOrderDeliverTitle"
        @reloadTable="handleQuery" />
      <importExcelDialog ref="importExcelDialogRefWmsOrderDeliver" :title="importExcelTitleWmsOrderDeliver"
        @parentUploadFun="handleImportExcelWmsOrderDeliver" @parentDownFun="handleDownExcelWmsOrderDeliver" />
    <!-- æ‰€æœ‰å¼¹æ¡† ï¼šæ–°å¢ž ç¼–辑 è¯¦æƒ… -->
    <open-allprop titleAuthor="1" hexiao="0" ref="propALlProp" @getTabelData="handleQuery"></open-allprop>
  </div>
        <editDialogWmsOrderDeliver ref="editDialogRefWmsOrderDeliver" :title="editWmsOrderDeliverTitle" @reloadTable="handleQuery" />
        <importExcelDialog
            ref="importExcelDialogRefWmsOrderDeliver"
            :title="importExcelTitleWmsOrderDeliver"
            @parentUploadFun="handleImportExcelWmsOrderDeliver"
            @parentDownFun="handleDownExcelWmsOrderDeliver"
        />
        <!-- æ‰€æœ‰å¼¹æ¡† ï¼šæ–°å¢ž ç¼–辑 è¯¦æƒ… -->
        <open-allprop titleAuthor="1" hexiao="0" ref="propALlProp" @getTabelData="handleQuery"></open-allprop>
    </div>
</template>

<script lang="ts" setup="" name="wmsOrderPurchase">
import { getCurrentInstance, nextTick, onMounted, ref } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import { getCurrentInstance, nextTick, onMounted, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { auth } from '/@/utils/authFunction';
import { getDictDataItem as di, getDictDataList as dl } from '/@/utils/dict-utils';
import { formatDate, formatDate_T_Date, formatDate_T_Time, defaultTimeRange } from '/@/utils/formatTime';
import { pageBaseCustomer } from "/@/api/main/WmsBase/baseCustomer";
import { pageBaseCustomer } from '/@/api/main/WmsBase/baseCustomer';
import { formatUtcToData, getTypeStatus } from '/@/utils/formate';
import printDialog from '/@/views/system/print/component/hiprint/preview.vue';
import editDialog from '/@/views/main/WmsOrder/wmsOrderPurchase/component/editDialog.vue';
import {
formatUtcToData,
  getTypeStatus
} from "/@/utils/formate";
import printDialog from '/@/views/system/print/component/hiprint/preview.vue'
import editDialog from '/@/views/main/WmsOrder/wmsOrderPurchase/component/editDialog.vue'
import { pageWmsOrderPurchase, deleteWmsOrderPurchase, importExcelWmsOrderPurchase, downloadExcelTemplateWmsOrderPurchase, downloadExcelTemplateWmsOrderPurchaseAll } from '/@/api/main/WmsOrder/wmsOrderPurchase';
import { handleSlectDataWmsBusinessType } from "/@/utils/selectData";
    pageWmsOrderPurchase,
    deleteWmsOrderPurchase,
    importExcelWmsOrderPurchase,
    downloadExcelTemplateWmsOrderPurchase,
    downloadExcelTemplateWmsOrderPurchaseAll,
} from '/@/api/main/WmsOrder/wmsOrderPurchase';
import { handleSlectDataWmsBusinessType } from '/@/utils/selectData';
import { getAPI } from '/@/utils/axios-utils';
import { SysEnumApi } from '/@/api-services/api';
import commonFunction from '/@/utils/commonFunction';
import importExcelDialog from '/@/components/importExcel/index.vue' //引入导入组件
import { exportPageExcel } from '/@/utils/exportPageExcel' //引入导出方法
import OpenAllprop from "./component/openAllprop.vue";
import { ExcellTableDataExport } from "/@/hooks/exportTableDataExcell";
import importExcelDialog from '/@/components/importExcel/index.vue'; //引入导入组件
import { exportPageExcel } from '/@/utils/exportPageExcel'; //引入导出方法
import OpenAllprop from './component/openAllprop.vue';
import { ExcellTableDataExport } from '/@/hooks/exportTableDataExcell';
const { proxy }: any = getCurrentInstance(); // è®¿é—®å®žä¾‹ä¸Šä¸‹æ–‡ proxy同时支持开发 çº¿ä¸ŠçŽ¯å¢ƒ
const moveType = 10;//移动类型 å…¥åº“
const moveType = 10; //移动类型 å…¥åº“
// ------------封装导出功能--前端导出+表格标题---------------
const jsonExcellTableExport = {
  titleName: "", //导出表格名称
  interfaceListName: '',//导出接口名称
}
const { getExportTitle, handleExportExcell, formExport, entozhExcell } = ExcellTableDataExport(jsonExcellTableExport)
    titleName: '', //导出表格名称
    interfaceListName: '', //导出接口名称
};
const { getExportTitle, handleExportExcell, formExport, entozhExcell } = ExcellTableDataExport(jsonExcellTableExport);
// --------------end å°è£…导出功能--前端导出+表格标题-----------------
// ---------------新增-----------------------
const showProp = (item?: any) => {
  if (item == 1) {
    proxy.$refs['propALlProp'].openDialog(1);
  } else {
    proxy.$refs['propALlProp'].openDialog(2, item);
  }
}
    if (item == 1) {
        proxy.$refs['propALlProp'].openDialog(1);
    } else {
        proxy.$refs['propALlProp'].openDialog(2, item);
    }
};
// ---------------详情-----------------------
const openDrawer = (type: number, item?: any) => {
  proxy.$refs['propALlProp'].openDrawer(type, item, entozhExcell);
}
    proxy.$refs['propALlProp'].openDrawer(type, item, entozhExcell);
};
// ---------------end详情-----------------------


const getBusinessTypeData_Index = ref<any>([]);//业务类型 create by liuwq
const getBusinessTypeData_Index = ref<any>([]); //业务类型 create by liuwq
const getEnumOrderTypeData_Index = ref<any>([]);
// const getEnumBusinessTypeData_Index = ref<any>([]); //update by liuwq
const getEnumPoStatusData_Index = ref<any>([]);
@@ -282,205 +276,242 @@
const tableData = ref<any>([]);
const queryParams = ref<any>({});
const tableParams = ref({
  page: 1,
  pageSize: 10,
  total: 0,
    page: 1,
    pageSize: 10,
    total: 0,
});

const printWmsOrderPurchaseTitle = ref("");
const editWmsOrderPurchaseTitle = ref("");
const printWmsOrderPurchaseTitle = ref('');
const editWmsOrderPurchaseTitle = ref('');

// æ”¹å˜é«˜çº§æŸ¥è¯¢çš„控件显示状态
const changeAdvanceQueryUI = () => {
  showAdvanceQueryUI.value = !showAdvanceQueryUI.value;
}
    showAdvanceQueryUI.value = !showAdvanceQueryUI.value;
};

const newTableData = ref([]);

const fetchNewTableData = async () => {
    loading.value = true;
    try {
        const response = await fetch('your-api-endpoint'); // æ›¿æ¢ä¸ºæ‚¨çš„API地址
        const data = await response.json();
        newTableData.value = data;
    } catch (error) {
        console.error('获取新表数据错误:', error);
    } finally {
        loading.value = false;
    }
};

const newSortChange = ({ prop, order }) => {
    console.log(`排序字段: ${prop}, æŽ’序顺序: ${order}`);
    // å¤„理排序逻辑
};

const openNewDrawer = (type, row) => {
    console.log('打开新的抽屉，类型:', type, ', æ•°æ®:', row);
};

const getNewExportTitle = () => {
    return '新表格导出标题';
};

// æŸ¥è¯¢æ“ä½œ
const handleQuery = async () => {
  loading.value = true;
  var res = await pageWmsOrderPurchase(Object.assign(queryParams.value, tableParams.value));
  tableData.value = res.data.result?.items ?? [];
  tableParams.value.total = res.data.result?.total;
  loading.value = false;
  getEnumOrderTypeData_Index.value = (await getAPI(SysEnumApi).apiSysEnumEnumDataListGet('OrderTypeEnum')).data.result ?? [];
    loading.value = true;
    var res = await pageWmsOrderPurchase(Object.assign(queryParams.value, tableParams.value));
    tableData.value = res.data.result ?? [];

  getEnumPoStatusData_Index.value = (await getAPI(SysEnumApi).apiSysEnumEnumDataListGet('OrderStatusEnum')).data.result ?? [];
    newTableData.value = res.data.result ?? [];

    // tableParams.value.total = res.data.result?.total;
    loading.value = false;
    // getEnumOrderTypeData_Index.value = (await getAPI(SysEnumApi).apiSysEnumEnumDataListGet('OrderTypeEnum')).data.result ?? [];

    // getEnumPoStatusData_Index.value = (await getAPI(SysEnumApi).apiSysEnumEnumDataListGet('OrderStatusEnum')).data.result ?? [];
};

// åˆ—排序
const sortChange = async (column: any) => {
  queryParams.value.field = column.prop;
  queryParams.value.order = column.order;
  await handleQuery();
    queryParams.value.field = column.prop;
    queryParams.value.order = column.order;
    await handleQuery();
};

// æ‰“开新增页面
const openAddWmsOrderPurchase = () => {
  editWmsOrderPurchaseTitle.value = '添加PO单';
  editDialogRef.value.openDialog({});
    editWmsOrderPurchaseTitle.value = '添加PO单';
    editDialogRef.value.openDialog({});
};

// æ‰“开打印页面
const openPrintWmsOrderPurchase = async (row: any) => {
  printWmsOrderPurchaseTitle.value = '打印PO单';
}
    printWmsOrderPurchaseTitle.value = '打印PO单';
};

// æ‰“开编辑页面
const openEditWmsOrderPurchase = (row: any) => {
  editWmsOrderPurchaseTitle.value = '编辑PO单';
  editDialogRef.value.openDialog(row);
    editWmsOrderPurchaseTitle.value = '编辑PO单';
    editDialogRef.value.openDialog(row);
};

// åˆ é™¤
const delWmsOrderPurchase = (row: any) => {
  ElMessageBox.confirm(`确定要取消吗?`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      await deleteWmsOrderPurchase(row);
      handleQuery();
      ElMessage.success("取消成功");
    })
    .catch(() => { });
    ElMessageBox.confirm(`确定要取消吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(async () => {
            await deleteWmsOrderPurchase(row);
            handleQuery();
            ElMessage.success('取消成功');
        })
        .catch(() => {});
};

// æ”¹å˜é¡µé¢å®¹é‡
const handleSizeChange = (val: number) => {
  tableParams.value.pageSize = val;
  handleQuery();
    tableParams.value.pageSize = val;
    handleQuery();
};

// æ”¹å˜é¡µç åºå·
const handleCurrentChange = (val: number) => {
  tableParams.value.page = val;
  handleQuery();
    tableParams.value.page = val;
    handleQuery();
};

// æ ¹æ®businessTypeValue获取businessTypeName
const getBusinessTypeByValue = (key: any, itemLst: any) => {

  return itemLst.find((x: any) => x.businessTypeValue == key)?.businessTypeName;
    return itemLst.find((x: any) => x.businessTypeValue == key)?.businessTypeName;
};

handleQuery();


//================
const arrTdp = ref<any[]>([]);
const queryParamsW = ref<any>({});
const tableParamsW = ref({
  page: 1,
  pageSize: 200,
  total: 0,
  custType: "供应商",
    page: 1,
    pageSize: 200,
    total: 0,
    custType: '供应商',
});

//-----------------远程搜索----------------
const handleQueryTdp = async () => {
  var res = await pageBaseCustomer(Object.assign(queryParamsW.value, tableParamsW.value));
  arrTdp.value = res.data.result?.items ?? [];
    var res = await pageBaseCustomer(Object.assign(queryParamsW.value, tableParamsW.value));
    arrTdp.value = res.data.result?.items ?? [];
};
const changeXmbh = async (query?: any) => {
    loading.value = true;
    var res = await pageBaseCustomer({
      page: 1,
      pageSize: 200,
      custCode: query,
      custType: "供应商",
    });
    loading.value = false;
    arrTdp.value = res.data.result?.items ?? [];
    loading.value = true;
    var res = await pageBaseCustomer({
        page: 1,
        pageSize: 200,
        custCode: query,
        custType: '供应商',
    });
    loading.value = false;
    arrTdp.value = res.data.result?.items ?? [];
};
// è¿œç¨‹æœç´¢  è¾“入关键字以从远程服务器中查找数据。
const remoteMethod = async (query: string) => {
    loading.value = true;
    var res = await pageBaseCustomer({
      page: 1,
      pageSize: 200,
      custCode: query,
      custType: "供应商",
    });
    loading.value = false;
    arrTdp.value = res.data.result?.items ?? [];
    loading.value = true;
    var res = await pageBaseCustomer({
        page: 1,
        pageSize: 200,
        custCode: query,
        custType: '供应商',
    });
    loading.value = false;
    arrTdp.value = res.data.result?.items ?? [];
};
//-----------------远程搜索----------------

const getEnumDockData = ref<any>([]);

onMounted(async () => {
  nextTick(async () => {
    getBusinessTypeData_Index.value = await handleSlectDataWmsBusinessType(moveType); //下拉读取接口
    getEnumDockData.value = (await getAPI(SysEnumApi).apiSysEnumEnumDataListGet('DockEnum')).data.result ?? [];
    getEnumOrderSocureData_Index.value = (await getAPI(SysEnumApi).apiSysEnumEnumDataListGet('SourceByEnum')).data.result ?? [];
  });
    nextTick(async () => {
        // getBusinessTypeData_Index.value = await handleSlectDataWmsBusinessType(moveType); //下拉读取接口
        // getEnumDockData.value = (await getAPI(SysEnumApi).apiSysEnumEnumDataListGet('DockEnum')).data.result ?? [];
        // getEnumOrderSocureData_Index.value = (await getAPI(SysEnumApi).apiSysEnumEnumDataListGet('SourceByEnum')).data.result ?? [];
    });
});




/***************************************************[DO单操作]结束***************************************************/
/***************************************************[DO单导入]开始***************************************************/
const printWmsOrderDeliverTitle = ref("");
const editWmsOrderDeliverTitle = ref("");
const importExcelTitleWmsOrderDeliver = ref("");
const printWmsOrderDeliverTitle = ref('');
const editWmsOrderDeliverTitle = ref('');
const importExcelTitleWmsOrderDeliver = ref('');
const importExcelDialogRefWmsOrderDeliver = ref();
//打开导入界面
const openImportExcelWmsOrderDeliver = () => {
  importExcelTitleWmsOrderDeliver.value = '导入PO单';
  importExcelDialogRefWmsOrderDeliver.value.openDialog({});
    importExcelTitleWmsOrderDeliver.value = '导入PO单';
    importExcelDialogRefWmsOrderDeliver.value.openDialog({});
};
//导入数据
const handleImportExcelWmsOrderDeliver = async (formData: Blob) => {
  var result = await importExcelWmsOrderPurchase(formData);
  importExcelDialogRefWmsOrderDeliver.value.callBackUploadFun(result.data);//回调导入子页面的方法
  if (result.data.type == "success") {
    handleQuery();
  }
    var result = await importExcelWmsOrderPurchase(formData);
    importExcelDialogRefWmsOrderDeliver.value.callBackUploadFun(result.data); //回调导入子页面的方法
    if (result.data.type == 'success') {
        handleQuery();
    }
};
//下载导入模板
const handleDownExcelWmsOrderDeliver = async () => {
  var result = await downloadExcelTemplateWmsOrderPurchase();
  importExcelDialogRefWmsOrderDeliver.value.callBackDownFun(result);//回调导入子页面的方法
    var result = await downloadExcelTemplateWmsOrderPurchase();
    importExcelDialogRefWmsOrderDeliver.value.callBackDownFun(result); //回调导入子页面的方法
};
/***************************************************[DO单导入]结束***************************************************/
/***************************************************[DO单导出]开始***************************************************/



//导出
const handExport = () => {
  downloadExcelTemplateWmsOrderPurchaseAll(queryParams.value)
    .then((res) => {
      if(res.status == 200){
        const link = document.createElement("a"); //创建a标签
          let blob = new Blob([res.data], { type: "application/vnd.ms-excel" }); // response就是接口返回的文件流
          let objectUrl = URL.createObjectURL(blob);
          link.href = objectUrl;
          link.download = `PO单导出${formatUtcToData(
            new Date().toString(),
            "YYYY-MM-DD hh:mm:ss"
          )}`; // è‡ªå®šä¹‰æ–‡ä»¶å
          link.click(); // ä¸‹è½½æ–‡ä»¶
          URL.revokeObjectURL(objectUrl); // é‡Šæ”¾å†…å­˜
      }
    })
    downloadExcelTemplateWmsOrderPurchaseAll(queryParams.value).then((res) => {
        if (res.status == 200) {
            const link = document.createElement('a'); //创建a标签
            let blob = new Blob([res.data], { type: 'application/vnd.ms-excel' }); // response就是接口返回的文件流
            let objectUrl = URL.createObjectURL(blob);
            link.href = objectUrl;
            link.download = `PO单导出${formatUtcToData(new Date().toString(), 'YYYY-MM-DD hh:mm:ss')}`; // è‡ªå®šä¹‰æ–‡ä»¶å
            link.click(); // ä¸‹è½½æ–‡ä»¶
            URL.revokeObjectURL(objectUrl); // é‡Šæ”¾å†…å­˜
        }
    });
};

</script>
<style scoped>
:deep(.el-input),
:deep(.el-select),
:deep(.el-input-number) {
  width: 100%;
    width: 100%;
}

.under_line {
  color: #F18201;
  text-decoration: underline;
  cursor: pointer;
    color: #f18201;
    text-decoration: underline;
    cursor: pointer;
}
.table-container {
    display: flex; /* ä½¿ç”¨ flexbox å¸ƒå±€ */
    justify-content: space-between; /* è¡¨æ ¼ä¹‹é—´ä¿æŒé—´è· */
}

.table-container .left-table,
.table-container .right-table {
    flex: 1; /* ä½¿æ¯ä¸ªè¡¨æ ¼å æ®ç›¸åŒå®½åº¦ */
    margin-right: 10px; /* å®šä¹‰å³ä¾§çš„间距 */
    width: 50%;
}
.text-xtiny {
    font-size: 14px;
    font-weight: 700;
    display: block;
    padding: 0 0 10px 0;
}
.table-container .right-table {
    margin-right: 0; /* æœ€åŽä¸€ä¸ªè¡¨æ ¼æ²¡æœ‰å³é—´è· */
}
</style>


 LA24030_LuLiPackageLine_Web/src/views/main/inventoryWarning/transitionChart/index.vue

@@ -271,13 +271,13 @@
let timeInter: any = null;
// é¡µé¢åŠ è½½æ—¶
onMounted(() => {
    initEchartsResize();
    // initEchartsResize();

    timeInter = setInterval(() => {
        nextTick(() => {
            handleQuerywmsStockBoardabc('1');
        });
    }, 15000); //调用频率改为 15秒一次查询。
    // timeInter = setInterval(() => {
    //     nextTick(() => {
    //         handleQuerywmsStockBoardabc('1');
    //     });
    // }, 15000); //调用频率改为 15秒一次查询。
});