#

Junjie

2024-11-29 0b7eb382e86890ad3709f92f9463cb3f0d1b8af2

#

 zy-asrs-admin/src/components/print/matPrint/index.vue

New file
@@ -0,0 +1,76 @@
<script setup>
import { ref } from 'vue';
import { formatMessage } from '@/utils/localeUtils';
import Template1 from './template/template1.vue';
import Template2 from './template/template2.vue';
import Template3 from './template/template3.vue';

const template = {
    Template1,
    Template2,
    Template3,
}
const selectTemplate = ref('Template1');
const printChild = ref(null);

let open = ref(false);
let printData = ref([]);
let repeatNum = ref(1);

const handleOk = () => {

}

const printObj = ref({
    id: "printMe",
    beforeOpenCallback(vue) {
        console.log('打开之前')
    },
    openCallback(vue) {
        console.log('执行了打印')
    },
    closeCallback(vue) {
        console.log('关闭了打印工具')
    }
});

defineExpose({
    open,
    printData,
})
</script>

<template>
    <a-modal v-model:open="open" :title="formatMessage('db.man_zpallet_barcode.batchPrint', '批量打印')" @ok="handleOk">
        <div style="height: 500px;overflow-x: hidden;overflow-y: scroll;">
            <div style="display: flex;justify-content: center;">
                <a-radio-group v-model:value="selectTemplate" button-style="solid">
                    <a-radio-button value="Template1">
                        {{ formatMessage('common.template', '模板') }} 1
                    </a-radio-button>
                    <a-radio-button value="Template2">
                        {{ formatMessage('common.template', '模板') }} 2
                    </a-radio-button>
                    <a-radio-button value="Template3">
                        {{ formatMessage('common.template', '模板') }} 3
                    </a-radio-button>
                </a-radio-group>
            </div>
            <div style="display: flex;justify-content: center;margin-top: 20px;">
                <div style="width: 140px;text-align: center;">
                    {{ formatMessage('common.repeatNum', '重复数量') }}<a-input-number :min="1" v-model:value="repeatNum" :placeholder="formatMessage('common.repeatNum', '重复数量')" />
                </div>
            </div>
            <div style="margin-top: 20px;">
                <component :is="template[selectTemplate]" ref="printChild" :list="printData" :repeatNum="repeatNum" />
            </div>
        </div>
        <template #footer>
            <a-button key="submit" type="primary" v-print="printObj" @click="handleOk">
                {{ formatMessage('common.print', '打印') }}
            </a-button>
        </template>
    </a-modal>
</template>

<style></style>

 zy-asrs-admin/src/components/print/matPrint/template/template1.vue

New file
@@ -0,0 +1,67 @@
<script setup>
import { toRefs, ref, defineProps } from 'vue';
import { globalState } from '@/config.js'
import { formatMessage } from '@/utils/localeUtils';

const props = defineProps({
    list: {
        type: Array,
        default: []
    },
    repeatNum: {
        type: Number,
        default: 1
    }
});
const { list, repeatNum } = toRefs(props)
</script>

<template>
    <div id="printMe">
        <div v-for="(item, index) in list" :key="index">
            <div v-for="count in repeatNum" style="font-size: 16px;margin-top: 20px;">
                <div>
                    <table class="contain" width="300"
                        style="overflow: hidden;font-size: xx-small;table-layout: fixed;">
                        <tr style="height: 74px">
                            <td colspan="3" align="center" scope="col">物料号</td>
                            <td class="barcode" colspan="9" align="center" scope="col">
                                <img :src="globalState.url + '/api/code/auth?type=1&param=' + item.matnr" width="90%;" />
                                <div style="letter-spacing: 2px;margin-top: 1px; text-align: center;">
                                    <span>{{ item.matnr }}</span>
                                </div>
                            </td>
                        </tr>
                        <tr style="height: 74px">
                            <td align="center" colspan="3">商品</td>
                            <td align="center" colspan="5">{{ item.maktx }}</td>
                            <td align="center" colspan="2">规格</td>
                            <td align="center" colspan="2">{{ item.specs }}</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</template>

<style>
@media print {
    body {
        margin: 0;
        padding: 0;
    }

    .print-area {
        margin: 0;
        padding: 0;
        height: auto;
    }


}

.contain td {
    border: 1px solid #000;
}
</style>

 zy-asrs-admin/src/components/print/matPrint/template/template2.vue

New file
@@ -0,0 +1,65 @@
<script setup>
import { toRefs, ref, defineProps } from 'vue';
import { globalState } from '@/config.js'
import { formatMessage } from '@/utils/localeUtils';

const props = defineProps({
    list: {
        type: Array,
        default: []
    },
    repeatNum: {
        type: Number,
        default: 1
    }
});
const { list, repeatNum } = toRefs(props)
</script>

<template>
    <div id="printMe">
        <div v-for="(item, index) in list" :key="index">
            <div v-for="count in repeatNum" style="font-size: 16px;margin-top: 20px;">
                <div>
                    <table class="contain" width="280" style="overflow: hidden;font-size: xx-small;table-layout: fixed;">
                        <tr style="height: 74px">
                            <td align="center" scope="col" colspan="1">商品</td>
                            <td align="center" scope="col" colspan="1" style="">{{ item.maktx }}</td>
                            <td align="center" scope="col" colspan="2" rowspan="2">
                                <img :src="globalState.url + '/api/code/auth?type=2&param=' + item.matnr" width="80%;" />
                                <div style="letter-spacing: 1px;margin-top: 1px; text-align: center">
                                    <span>{{ item.matnr }}</span>
                                </div>
                            </td>
                        </tr>
                        <tr style="height: 74px">
                            <td align="center" colspan="1">规格</td>
                            <td align="center" colspan="1" style="text-overflow:ellipsis;">{{ item.specs }}</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</template>

<style>
@media print {
    body {
        margin: 0;
        padding: 0;
    }

    .print-area {
        margin: 0;
        padding: 0;
        height: auto;
    }


}

.contain td {
    border: 1px solid #000;
}
</style>

 zy-asrs-admin/src/components/print/matPrint/template/template3.vue

New file
@@ -0,0 +1,66 @@
<script setup>
import { toRefs, ref, defineProps } from 'vue';
import { globalState } from '@/config.js'
import { formatMessage } from '@/utils/localeUtils';

const props = defineProps({
    list: {
        type: Array,
        default: []
    },
    repeatNum: {
        type: Number,
        default: 1
    }
});
const { list, repeatNum } = toRefs(props)
</script>

<template>
    <div id="printMe">
        <div v-for="(item, index) in list" :key="index">
            <div v-for="count in repeatNum" style="font-size: 16px;margin-top: 20px;">
                <div>
                    <table class="contain" width="280"
                        style="overflow: hidden;font-size: xx-small;table-layout: fixed;">
                        <tr style="height: 74px">
                            <td align="center" scope="col">商品</td>
                            <td align="center" scope="col" style="">{{ item.maktx }}</td>
                            <td align="center" scope="col" colspan="2">
                                <img :src="globalState.url + '/api/code/auth?type=2&param=' + item.matnr"
                                    width="80%;" />
                                <div style="letter-spacing: 1px;margin-top: 1px; text-align: center"><span>{{ item.matnr
                                        }}</span></div>
                            </td>
                        </tr>
                        <tr style="height: 74px">
                            <td align="center">规格</td>
                            <td align="center" colspan="3">{{ item.specs }}</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</template>

<style>
@media print {
    body {
        margin: 0;
        padding: 0;
    }

    .print-area {
        margin: 0;
        padding: 0;
        height: auto;
    }


}

.contain td {
    border: 1px solid #000;
}
</style>

 zy-asrs-admin/src/views/base/mat/index.vue

@@ -7,6 +7,7 @@
import EditView from './edit.vue'
import {formatMessage} from '@/utils/localeUtils.js';
import useTableSearch from '@/utils/tableUtils.jsx';
import MatPrint from '@/components/print/matPrint/index.vue';
import {
  DownOutlined,
  UploadOutlined,
@@ -28,6 +29,7 @@
  model: null,
})
const editChild = ref(null)
const printChild = ref(null);

const state = reactive({
  selectedRowKeys: [],
@@ -487,6 +489,23 @@
  }
};

const handlePrint = () => {
    if (state.selectedRowKeys.length == 0) {
        message.warning(formatMessage('common.select', '请选择'));
        return;
    }
    let data = tableData.value.records;
    let tmp = [];
    data.forEach((item) => {
        if (state.selectedRowKeys.indexOf(item.id) != -1) {
            tmp.push(item);
        }
    })

    printChild.value.printData = tmp;
    printChild.value.open = true;
}

</script>

<script>
@@ -539,6 +558,9 @@
            <DownOutlined/>
          </a-button>
        </a-dropdown>
        <a-button @click="handlePrint()" type="primary">
          {{ formatMessage('db.man_zpallet_barcode.batchPrint', '批量打印') }}
        </a-button>
        <a-button @click="handleEdit(null)" type="primary">{{ formatMessage('page.add', '添加') }}</a-button>
        <a-button @click="handleExport">{{ formatMessage('page.export', '导出') }}</a-button>
      </div>
@@ -564,6 +586,8 @@
      </template>
    </a-table>
  </div>

  <MatPrint ref="printChild" />
</template>

<style></style>