#打印预览

skyouc

2025-01-20 dbb30331f9fb339a099a438b2d3c6d8b99b55d23

#打印预览

 zy-asrs-admin/package-lock.json

@@ -15,6 +15,7 @@
        "echarts": "^5.5.1",

        "pinia": "^2.1.7",

        "pixi.js": "^5.3.12",

        "print-js": "^1.6.0",

        "vue": "^3.4.29",

        "vue-router": "^4.3.3",

        "vue3-print-nb": "^0.1.4"

@@ -2471,6 +2472,12 @@
        "node": "^10 || ^12 || >=14"

      }

    },

    "node_modules/print-js": {

      "version": "1.6.0",

      "resolved": "https://registry.npmmirror.com/print-js/-/print-js-1.6.0.tgz",

      "integrity": "sha512-BfnOIzSKbqGRtO4o0rnj/K3681BSd2QUrsIZy/+WdCIugjIswjmx3lDEZpXB2ruGf9d4b3YNINri81+J0FsBWg==",

      "license": "MIT"

    },

    "node_modules/proxy-from-env": {

      "version": "1.1.0",

      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",

@@ -4514,6 +4521,11 @@
        "source-map-js": "^1.2.0"

      }

    },

    "print-js": {

      "version": "1.6.0",

      "resolved": "https://registry.npmmirror.com/print-js/-/print-js-1.6.0.tgz",

      "integrity": "sha512-BfnOIzSKbqGRtO4o0rnj/K3681BSd2QUrsIZy/+WdCIugjIswjmx3lDEZpXB2ruGf9d4b3YNINri81+J0FsBWg=="

    },

    "proxy-from-env": {

      "version": "1.1.0",

      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",


 zy-asrs-admin/package.json

@@ -16,6 +16,7 @@
    "echarts": "^5.5.1",

    "pinia": "^2.1.7",

    "pixi.js": "^5.3.12",

    "print-js": "^1.6.0",

    "vue": "^3.4.29",

    "vue-router": "^4.3.3",

    "vue3-print-nb": "^0.1.4"


 zy-asrs-admin/src/views/out/flat/index.vue

@@ -1,59 +1,115 @@
<template>
    <a-table :columns="columns" :data-source="datasource" bordered>
    <div class="table-header">
        <div style="display: flex;padding: 10px;">
            <div style="margin-right: 10px;">
                <a-input v-model:value="searchParam.pickNo"
                         placeholder="请输拣货单编号"
                         style="width: 200px;margin-right: 10px;"/>
                <a-input v-model:value="searchParam.waveNo" placeholder="请输入波次号"
                                style="width: 200px;" />
                <a-button @click="queryPickSheets" type="primary" style="margin-left: 35px">查询</a-button>
            </div>
        </div>

    </div>
    <a-table :columns="columns"
             :data-source="datasource" bordered
             :defaultExpandAllRows="false"
             :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }"
             :scroll="{y: columns.length * 140}"
             style="margin: 5px"
    >
        <template #bodyCell="{column, record, index}">
            <template v-if="column.key === 'number'">
                {{index + 1}}
                {{ index + 1 }}
            </template>
            <template v-if="column.key === 'operate'">
                <a-button @click="viewDetail(column)" type="link">
                <a-button @click="viewDetail(column, record)" type="link">
                    {{ "查看明细" }}
                </a-button>
                <a-button @click="showDeleteConfirm(record)" danger type="link">{{"删除"}}</a-button>
                <a-button @click="handlePrint(column, record)" type="link">打印</a-button>
                <a-button @click="showDeleteConfirm(record)" danger type="link">{{ "删除" }}</a-button>
            </template>
            <template v-if="column.key === 'status'">
               <a-tag :color="record.status === 1 ? 'green' : 'volcano'">
                   {{record.status === 1 ? "正常" : "禁用"}}
               </a-tag>
                <a-tag :color="record.status === 1 ? 'green' : 'volcano'">
                    {{ record.status === 1 ? "正常" : "禁用" }}
                </a-tag>
            </template>
        </template>
    </a-table>
    <a-modal ref="sheetDetl" v-model:open="show" :width="'80%'" title="拣货单明细" @ok="handleOk">
        <a-table :columns="childNodes" :data-source="childList">
            <template #bodyCell="{column, record, index}">
                <template v-if="column.key === 'number'">
                    {{index + 1}}
    <a-modal ref="sheetDetl" v-model:open="show" :width="'80%'" title="拣货单明细" @ok="handleOk" @cancel="cancel"
             :okText="isPrint ? '打印' : '确认'" cancel-text="关闭">
        <div id="pcik-detl">
            <div class="component-header">
                <div>
                    <h3>
                        拣货单号：{{ selectDetl.pickNo }}
                    </h3>
                    <h3>
                        波次：{{ selectDetl.waveNo }}
                    </h3>
                </div>
                <div class="qrcode">
                    <a-qrcode :value="selectDetl.pickNo" :size="100" :bordered="false"/>
                </div>
            </div>
            <a-table :columns="childNodes"
                     :data-source="childList"
                     bordered
                     :pagination="{hideOnSinglePage: true}"
            >
                <template #bodyCell="{column, record, index}">
                    <template v-if="column.key === 'number'">
                        {{ index + 1 }}
                    </template>
                    <template v-if="column.key === 'status'">
                        <a-tag :color="record.status === 1 ? 'green' : 'volcano'">
                            {{ record.status === 1 ? "正常" : "禁用" }}
                        </a-tag>
                    </template>
                </template>
                <template v-if="column.key === 'status'">
                    <a-tag :color="record.status === 1 ? 'green' : 'volcano'">
                        {{record.status === 1 ? "正常" : "禁用"}}
                    </a-tag>
                </template>
            </template>
        </a-table>
            </a-table>
        </div>
    </a-modal>
</template>

<script>
    import {post, get} from "@/utils/request.js";
    import {message, Modal} from "ant-design-vue";
    import { createVNode } from 'vue';
    import {formatMessage} from "@/utils/localeUtils.js";
    import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
    import {createVNode} from 'vue';
    import {ExclamationCircleOutlined} from '@ant-design/icons-vue';
    import printJS from 'print-js'


    export default {
        name: "out-stock-flat",
        data() {
            return {
                searchParam: {
                    pickNo: '',
                    waveNo:''
                },
                state: {
                    selectedRowKeys: []
                },
                searchInput: '',
                columns: [
                    {key: 'number', title: '序号', dataIndex: 'number'},
                    {key: 'pickNo', title: '单号', dataIndex: 'pickNo'},
                    {key: 'waveNo', title: '波次号', dataIndex: 'waveNo'},
                    {key: 'anfme', title: '数量', dataIndex: 'anfme'},
                    {key: 'status', title: '单据状态', dataIndex: 'status'},
                    {key: 'memo', title: '备注', dataIndex: ''},
                    {key: 'createdTime', title: '创建时间', dataIndex: 'createdTime'},
                    {key: 'updatedTime', title: '修改时间', dataIndex: 'updatedTime'},
                    {key: 'operate', title: '操作', dataIndex: 'operate'}
                    {key: 'number', title: '序号', dataIndex: 'number', align: 'center', width: '65px'},
                    {key: 'pickNo', title: '单号', dataIndex: 'pickNo', align: 'center', width: '205px'},
                    {key: 'waveNo', title: '波次号', dataIndex: 'waveNo', align: 'center', width: '155px'},
                    {key: 'anfme', title: '数量', dataIndex: 'anfme', align: 'center', width: '85px'},
                    {key: 'status', title: '单据状态', dataIndex: 'status', align: 'center', width: '105px'},
                    {key: 'createdTime', title: '创建时间', dataIndex: 'createdTime', align: 'center', width: '185px'},
                    {key: 'updatedTime', title: '修改时间', dataIndex: 'updatedTime', align: 'center', width: '185px'},
                    {key: 'memo', title: '备注', dataIndex: '', align: 'center'},
                    {
                        key: 'operate',
                        title: '操作',
                        dataIndex: 'operate',
                        fixed: 'right',
                        align: 'center',
                        width: '155px'
                    }
                ],
                childNodes: [
                    {key: 'number', title: '序号', dataIndex: 'number'},
@@ -68,19 +124,53 @@
                    // {key: 'operate', title: '操作', dataIndex: 'operate'}
                ],
                datasource: [],
                childList:[],
                childList: [],
                show: false,
                isPrint: false,
                selectDetl: {},
            }
        },

        mounted() {
            //获取拣货单数据源
            this.getOutFlatSheet();
        },

        methods: {
             showDeleteConfirm(record){
                 let that = this
            queryPickSheets() {
              this.getOutFlatSheet()
            },

            handleOk() {
                if (this.isPrint) {
                    printJS('pcik-detl', 'html')
                }
            },

            cancel() {
                this.isPrint = false
            },
            onSelectChange(selectedRowKeys) {
                state.selectedRowKeys = selectedRowKeys;

            },
            /**
             * 打印
             */
            handlePrint(column, record) {
                this.show = true
                this.isPrint = true
                this.selectDetl = record
                this.getSheetDetl(record)
            },
            /**
             * 搜索
             */
            onSearch() {
                console.log(this)
            },

            showDeleteConfirm(record) {
                let that = this
                Modal.confirm({
                    title: '是否确认删除当前拣货单',
                    icon: createVNode(ExclamationCircleOutlined),
@@ -100,7 +190,7 @@
            //删除当前行
            removeRow(record) {
                let that = this
                get('/api/pick/flat/remove/' + record.id).then((resp)=>{
                get('/api/pick/flat/remove/' + record.id).then((resp) => {
                    let result = resp.data;
                    if (result.code == 200) {
                        that.getOutFlatSheet()
@@ -111,14 +201,15 @@
                })
            },
            //查看明细
            viewDetail(record) {
                console.log(record)
            viewDetail(column, record) {
                this.show = !this.show
                this.isPrint = false
                this.selectDetl = record
                this.getSheetDetl(record)
            },
            getOutFlatSheet() {
                let that = this
                post('/api/pick/flat/page',{page: {currnt: 1, size: 10}}).then((resp) => {
                post('/api/pick/flat/page', {page: {currnt: 1, size: 10},  params: {pickNo: this.searchParam.pickNo, waveNo: this.searchParam.waveNo}}).then((resp) => {
                    let result = resp.data;
                    if (result.code == 200) {
                        // message.success(formatMessage('page.add.success', '成功'));
@@ -129,8 +220,11 @@
                })
            },
            getSheetDetl(record) {
              let that = this
                post('/api/pick/flat/detl/page',{page: {currnt: 1, size: 10}, params: {pickId: record.id}}).then((resp) => {
                let that = this
                post('/api/pick/flat/detl/page', {
                    page: {currnt: 1, size: 10},
                    params: {pickId: record.id}
                }).then((resp) => {
                    let result = resp.data;
                    if (result.code == 200) {
                        // message.success(formatMessage('page.add.success', '成功'));
@@ -145,5 +239,18 @@
</script>

<style scoped>
    .component-header {
        display: flex;
    }

    .component-header > div {
        flex: 1;
    }


    .qrcode {
        display: flex;
        justify-content: flex-end;
        margin-right: 30px;
    }
</style>

 zy-asrs-wms/src/main/java/com/zy/asrs/wms/asrs/service/impl/PickSheetServiceImpl.java

@@ -4,6 +4,7 @@
import com.baomidou.mybatisplus.core.conditions.update.LambdaUpdateWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.mysql.cj.util.StringUtils;
import com.zy.asrs.wms.asrs.entity.PickSheet;
import com.zy.asrs.wms.asrs.entity.PickSheetDetl;
import com.zy.asrs.wms.asrs.entity.param.PageRequest;
@@ -14,6 +15,7 @@
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import java.util.Map;
import java.util.Objects;

@Service
@@ -31,10 +33,10 @@
    public IPage<PickSheet> getOutFlatSheet(PageRequest params) {
        LambdaQueryWrapper<PickSheet> lambdaQueryWrapper = new LambdaQueryWrapper<>();
        lambdaQueryWrapper.eq(PickSheet::getDeleted, 0).eq(PickSheet::getStatus, 1);
        if (!Objects.isNull(params.getParams())) {
            lambdaQueryWrapper.eq(!Objects.isNull(params.getParams().get("pickNo")),PickSheet::getPickNo, params.getParams().get("pickNo"))
                    .eq(!Objects.isNull(params.getParams().get("id")), PickSheet::getId, params.getParams().get("id"))
                    .eq(!Objects.isNull(params.getParams().get("waveNo")), PickSheet::getWaveNo, params.getParams().get("waveNo"));
        Map<String, Object> param = params.getParams();
        if (!Objects.isNull(param)) {
            lambdaQueryWrapper.eq(!StringUtils.isNullOrEmpty(param.get("pickNo").toString()),PickSheet::getPickNo, param.get("pickNo"))
                    .eq(!StringUtils.isNullOrEmpty(param.get("waveNo").toString()), PickSheet::getWaveNo, param.get("waveNo"));
        }
        return this.baseMapper.selectMapsPage(params.getPage(), lambdaQueryWrapper);
    }