2025-03-JS-SDK-CLI/src/views/Query/StockQuery/Invoice/index.vue

<!--
  功能：功能描述  发货单查询
  作者：陶庆峰
-->
<template>
    <div class="vue-element-page-wrap" ref="tableContainer">
        <el-row class="page-search" justify="space-between" align="bottom">
            <el-form ref="queryFormRef" :model="queryParams" label-width="60px" label-position="left">
                <el-row :gutter="24" class="form-row">
                    <el-col :span="6">
                        <el-form-item label="组织" prop="ERPFACTORY">
                            <!-- <el-Input v-model="queryParams.ERPFACTORY" clearable /> -->
                             <el-select v-model="queryParams.ERPFACTORY" placeholder="下拉选择" style="width: 160px">
                                <el-option v-for="item in state.formDataRefData" :key="item.ERPFACTORY" :label="item.DESCRIPTION"
                                    :value="item.ERPFACTORY" />
                            </el-select>
                        </el-form-item>
                    </el-col>
<!--                    <el-col :span="4">-->
<!--                        <el-form-item label="仓库" prop="ERPLOCATION">-->
<!--                            <el-Input v-model="queryParams.ERPLOCATION" clearable />-->
<!--                        </el-form-item>-->
<!--                    </el-col>-->
                    <el-col :span="6">
                        <el-form-item label="发货单号" prop="SHIPREQUESTNAME">
                            <el-Input v-model="queryParams.SHIPREQUESTNAME" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="料号" prop="MATERIALSPECNAME">
                        <el-Input v-model="queryParams.MATERIALSPECNAME" clearable />
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="品名" prop="DESC_CN">
                        <el-Input v-model="queryParams.DESC_CN" clearable />
                      </el-form-item>
                    </el-col>
                </el-row>
                <br/>
                <el-row :gutter="24" class="form-row">
                    <el-col :span="6">
                        <el-form-item label="单据类型" prop="SHIPREQUESTTYPE">
                            <el-select v-model="queryParams.SHIPREQUESTTYPE" placeholder="下拉选择" style="width: 160px">
                                <el-option v-for="item in state.documentType" :key="item.LABEL" :label="item.LABEL"
                                    :value="item.VALUE" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="订单状态" prop="SHIPREQUESTSTATE">
                            <el-select v-model="queryParams.SHIPREQUESTSTATE" placeholder="下拉选择" style="width: 160px">
                                <el-option v-for="item in state.orderStatus" :key="item.LABEL" :label="item.LABEL"
                                    :value="item.VALUE" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="开始时间" prop="FROMDATE">
                            <el-date-picker v-model="queryParams.FROMDATE" value-format="YYYYMMDD" type="date"
                                placeholder="选择开始时间" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="结束时间" prop="TODATE">
                            <el-date-picker v-model="queryParams.TODATE" value-format="YYYYMMDD" type="date"
                                placeholder="选择结束时间" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div class="page-search-btns">
                <el-button type="primary" @click="handleQueryInfo">搜索</el-button>
                <el-button @click="resetQuery">重置</el-button>
            </div>
        </el-row>
        <div class="vue-element-page-table">
            <div class="page-table-operate">
                <div class="page-table-title">
                    <div class="page-table-title-left">
                        <span>发货单列表</span>
                    </div>
                </div>
                <div>
                    <el-button type="primary" @click="exportExcel">导出</el-button>
                </div>
            </div>
            <el-table :height="100" border v-loading="loading" :data="list" highlight-current-row row-key="id"
                style="width: 100%;" @row-click="selectRow">
                <el-table-column type="index" width="50" label="序号"></el-table-column>
                <template v-for="(col, index) in column" :key="index">
                    <el-table-column v-if="!col.hide" :label="col.header" :width="col.width" show-overflow-tooltip>
                        <template #default="scope">
                            <span>{{ scope.row[col.field] }}</span>
                        </template>
                    </el-table-column>
                </template>
            </el-table>
            <pagination v-if="page.total" :total="page.total" v-model:pageNumTo="page.pageNum"
                v-model:pageSizeTo="page.pageSize" @pagination="handleQuery" />
        </div>
        <div class="vue-element-page-table">
            <div class="page-table-operate">
                <div class="page-table-title">
                    <div class="page-table-title-left">
                        <span>发货单详情列表</span>
                    </div>
                </div>
                <div>
                    <el-button type="primary" @click="exportExcel_d">导出</el-button>
                </div>
            </div>
            <el-table border v-loading="loading_d" :data="list_d" highlight-current-row row-key="id"
                style="width: 100%;height:200px">
                <template v-for="(col, index) in column_d" :key="index">
                    <el-table-column v-if="!col.hide" :label="col.header" :width="col.width" show-overflow-tooltip>
                        <template #default="scope">
                            <span v-if="col.field == 'REALQUANTITY'" >{{ Number(scope.row.REQUESTQUANTITY) - Number(scope.row.SALEOUTQUANTITY)}}</span>
                            <span v-else>{{ scope.row[col.field] }}</span>
                        </template>
                    </el-table-column>
                </template>
            </el-table>
            <pagination v-if="page_d.total" :total="page_d.total" v-model:pageNumTo="page_d.pageNum"
                v-model:pageSizeTo="page_d.pageSize" @pagination="handleQuery_d" />
        </div>

    </div>
</template>

<script lang="ts">
export default {
    name: "Invoice",
};
</script>

<script lang="ts" setup>
import { reactive, ref, onMounted, toRefs, getCurrentInstance } from "vue";
import { ElForm, ElMessageBox, ElTable } from 'element-plus'
import { getQueryPageList, getQueryList } from '@/api/common';
import exportDataToExcel from '@/utils/export-excel';
import { bTableHeight } from "../../../../composables/calcTableHeight";
import { getORG } from '@/api/auth';

const { tableContainer, tableHeight, updateTableHeight, handleResize } = bTableHeight(525);

const { proxy }: any = getCurrentInstance();

const queryFormRef = ref(ElForm);

const state = reactive({
    formDataRefData: [] as any,
    documentType: [{
        LABEL:"01",
        VALUE:"01"
    },{
        LABEL:"02",
        VALUE:"02"
    },{
        LABEL:"06",
        VALUE:"06"
    },{
        LABEL:"07",
        VALUE:"07"
    },{
        LABEL:"Z008",
        VALUE:"Z008"
    },{
        LABEL:"ZLF1",
        VALUE:"ZLF1"
    },{
        LABEL:"ZLF2",
        VALUE:"ZLF2"
    },{
        LABEL:"ZLF3",
        VALUE:"ZLF3"
    },{
        LABEL:"ZLF4",
        VALUE:"ZLF4"
    },{
        LABEL:"ZLF5",
        VALUE:"ZLF5"
    },{
        LABEL:"ZLF6",
        VALUE:"ZLF6"
    },{
        LABEL:"ZLF7",
        VALUE:"ZLF7"
    },{
        LABEL:"ZLF8",
        VALUE:"ZLF8"
    },{
        LABEL:"ZLF9",
        VALUE:"ZLF9"
    },{
        LABEL:"NLCC",
        VALUE:"NLCC"
    }],
    queryParams: {
        ERPLOCATION: '',
        ERPRECEIVELOCATION: '',
        ERPFACTORY: '',
        FROMDATE: '',
        TODATE: '',
        SHIPREQUESTNAME: '',
        SHIPREQUESTSTATE: "",
         DESC_CN: "",
        MATERIALSPECNAME: "",
        SHIPREQUESTTYPE: ''
    },
    orderStatus: [{
        LABEL:"未完成",
        VALUE:"Created"
    },{
        LABEL:"完成",
        VALUE:"Completed"
    }],
    page: {
        pageNum: 1,
        pageSize: 10,
        total: 0
    },
    loading: false,
    list: [],
    column: [] as any,

    active_row: {},

    page_d: {
        pageNum: 1,
        pageSize: 10,
        total: 0
    },
    loading_d: false,
    list_d: [],
    column_d: [] as any,
});

const { loading, list, column, queryParams, page, page_d, loading_d, list_d, column_d, active_row } = toRefs(state)

onMounted(() => {
    state.column = [

        { header: "组织", field: "ERPFACTORYNAME", hide: false },
        { header: "发货单", field: "SHIPREQUESTNAME", hide: false },
        { header: "发货单类型", field: "SHIPREQUESTTYPE", hide: false},
        { header: "发货单状态", field: "SHIPREQUESTSTATE", hide: false },
        { header: "客户编号", field: "CUSTOMERNO", hide: false },
        {header: "供应商编号", field: "SUPPLIERNO", hide: true},
        {header: "单据日期", field: "ORDERDATE", hide: false},
        {header: "备注", field: "REMARK", hide: false},
        { header: "料号", field: "MATERIALSPECNAME", hide: true },
        { header: "品名", field: "DESC_CN", hide: true },
        { header: "工厂", field: "SITENAME", hide: true },
        { header: "发货单历史状态", field: "OLDSHIPREQUESTSTATE", hide: true },
        { header: "发货单类型子项", field: "SHIPREQUESTDETAILTYPE", hide: true },
        { header: "移动类型", field: "DELIVERYTYPE", hide: true },
        { header: "计划日期", field: "SHIPPLANDATE", hide: true },
        { header: "接收方", field: "RECEIVER", hide: true },
        { header: "最后操作名称", field: "LASTEVENTNAME", hide: true },
        { header: "最后操作时间", field: "LASTEVENTTIME", hide: true },
        { header: "最后操作人", field: "LASTEVENTUSER", hide: true },
        { header: "最后操作注释", field: "LASTEVENTCOMMENT", hide: true },
    ]

    state.column_d = [
        { header: "发货单", field: "SHIPREQUESTNAME", hide: false },
        { header: "行号", field: "SHIPREQUESTDETAILNAME", hide: false },
        { header: "发出组织", field: "OUTERPFACTORY", hide: false },
        { header: "发出仓库", field: "ERPLOCATION", hide: false },
        { header: "接收组织", field: "ERPRECEIVEFACTORY", hide: false },
        { header: "接收仓库", field: "ERPRECEIVELOCATIONNAME", hide: false },
        { header: "料号", field: "MATERIALSPECNAME", hide: false },
        { header: "品名", field: "DESC_CN", hide: false },
        { header: "物料规格", field: "DESCRIPTION ", hide: false },
        { header: "SDK规格", field: "SPECNAME", hide: false },
        { header: "阶段", field: "PHASE", hide: false },
        { header: "请求数量", field: "REQUESTQUANTITY", hide: false },
        { header: "绑定数量", field: "ASSIGNEDQUANTITY", hide: false },
        { header: "已出库数量", field: "SALEOUTQUANTITY", hide: false },
        { header: "剩余数量", field: "REALQUANTITY", hide: false },
        { header: "单位", field: "UNIT", hide: false },
        { header: "生产订单", field: "PRODUCTORDER", hide: false },
        { header: "销售订单号", field: "DN", hide: false },
        { header: "发出销售订单行号", field: "SENDSALESORDERDETAILNO", hide: false, width:120 },
        { header: "接收销售订单行号", field: "RECEIVESALESORDERDETAILNO", hide: false, width:120 },
        { header: "备注", field: "REMARK", hide: false},
        { header: "生产订单类型", field: "PRODUCTORDERTYPE", hide: false, width:100 },
        { header: "客户编码", field: "CUSTOMERNO", hide: false },
        { header: "是否通用料", field: "COMMONMATERIALFLAG", hide: false },
        { header: "最小收卷米数", field: "SJMS", hide: false, width:100 },
        // { header: "上游单号", field: "SOURCENO", hide: false },
        // { header: "上游单行号", field: "SOURCELINE", hide: false },
    ]
    handleQuery()
    updateTableHeight();
    hangERPFactoryQuery()
    window.addEventListener('resize', handleResize);
});
function hangERPFactoryQuery() {
    getORG({ orgNo: null}).then((res: any) => {
        state.formDataRefData = res.resultObj
    })

}
function handleQueryInfo() {
  state.page.pageNum = 1
  state.page_d.pageNum = 1
  state.page.total = 0
  state.page_d.total = 0;
  handleQuery()
}
function handleQuery() {
    state.list_d = []
    state.list = []
    state.loading = true
    queryFormRef.value.validate((isValid: boolean) => {
        if (isValid) {
            getQueryPageList({
                queryId: "GetMaterialShipRequestList",
                version: "10001",
                params: {
                    userId: localStorage.getItem('userId'),
                    ...state.queryParams
                },
                pageNum: state.page.pageNum,
                pageSize: state.page.pageSize,
            }).then((res: any) => {
              state.list = res.data.list;
              state.page.total = res.data.total;
              state.loading = false
              if (state.list.length > 0) {
                for (const element of state.list) {
                  let dates = new Date(element.ORDERDATE).toJSON()
                  element.ORDERDATE = new Date(+new Date(dates) + 8 * 3600 * 1000)
                    .toISOString()
                    .replace(/T/g, ' ')
                    .replace(/\.[\d]{3}Z/, '')
                  console.log(element.ORDERDATE)
                }
                state.active_row = state.list[0]
                if (state.active_row) {
                  handleQuery_d()
                }
              }
            });
        }
    });
}
function exportExcel() {
    getQueryList({
        queryId: "GetMaterialShipRequestList",
        version: "10001",
        params: {
            userId: localStorage.getItem('userId'),
            ...state.queryParams
        },
    }).then((res: any) => {
        if (res.data.length > 0) {
            exportDataToExcel(res.data, '入库单列表')
        } else {
            proxy.$ElMessage.warning('当前查询没有数据可以导出');
        }
    });
}
function handleQuery_d() {
    state.loading_d = true
    getQueryPageList({
        queryId: "GetMaterialShipRequestDetailList",
        version: "10001",
        params: {
            userId: localStorage.getItem('userId'),
            DESC_CN: state.queryParams.DESC_CN,
            MATERIALSPECNAME: state.queryParams.MATERIALSPECNAME,
            ...state.active_row
        },
        pageNum: state.page_d.pageNum,
        pageSize: state.page_d.pageSize,
    }).then((res: any) => {
        state.list_d = res.data.list;
        state.page_d.total = res.data.total;
        state.loading_d = false
    });
}
function exportExcel_d() {
    getQueryList({
        queryId: "GetMaterialShipRequestDetailList",
        version: "10001",
        params: {
            userId: localStorage.getItem('userId'),
            DESC_CN: state.queryParams.DESC_CN,
            MATERIALSPECNAME: state.queryParams.MATERIALSPECNAME,
            ...state.active_row
        },
    }).then((res: any) => {
        if (res.data.length > 0) {
            exportDataToExcel(res.data, '入库单列表')
        } else {
            proxy.$ElMessage.warning('当前查询没有数据可以导出');
        }
    });
}

function resetQuery() {
    queryFormRef.value.resetFields();
    handleQuery();
}

function selectRow(row: any) {
    state.active_row = row
    handleQuery_d()
}
</script>

<style scoped lang="scss">
.form-row {
    padding-right: 100px;
    margin-bottom: 0;
}
</style>