|
@@ -0,0 +1,149 @@
|
|
|
+<template>
|
|
|
+ <BasicModal v-bind="$attrs" @register="register" title="打印票据" width="80%">
|
|
|
+ <BasicTable @register="registerTable" id="printTable">
|
|
|
+ <template #tableTitle>
|
|
|
+ <div class="pb-30px pl-15px">
|
|
|
+ <address>
|
|
|
+ <div
|
|
|
+ ><strong>{{ modalRecord.consignee }}</strong></div
|
|
|
+ >
|
|
|
+ <div>{{ modalRecord.address }}</div>
|
|
|
+ <abbr title="phone"> 联系方式: </abbr> {{ modalRecord.mobile }}
|
|
|
+ </address>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template #toolbar>
|
|
|
+ <div class="pb-30px pl-15px">
|
|
|
+ <div
|
|
|
+ ><strong>单据编号 :</strong>
|
|
|
+ <span style="color: #1ab394">{{ modalRecord.orderSn }}</span></div
|
|
|
+ >
|
|
|
+ <div><strong>日期 :</strong> : <Time :value="modalRecord.addTime" mode="datetime" /></div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template #footer>
|
|
|
+ <div style="text-align: right; min-width: 100px"> 总计:¥{{ modalRecord.goodsPrice }} </div>
|
|
|
+ </template>
|
|
|
+ <template #retailPrice="{ record }">
|
|
|
+ <div>¥{{ record.retailPrice }} </div>
|
|
|
+ </template>
|
|
|
+ <template #marketPrice="{ record }">
|
|
|
+ <div>¥{{ record.marketPrice }} </div>
|
|
|
+ </template>
|
|
|
+ </BasicTable>
|
|
|
+
|
|
|
+ <template #footer>
|
|
|
+ <a-button type="primary" @click="handlePrint" class="mr-2">打印</a-button>
|
|
|
+ </template>
|
|
|
+ </BasicModal>
|
|
|
+</template>
|
|
|
+<script lang="ts">
|
|
|
+ // reactive
|
|
|
+ import { defineComponent, nextTick, reactive } from 'vue';
|
|
|
+ import { BasicTable, useTable, BasicColumn } from '/@/components/Table';
|
|
|
+ import { BasicModal, useModalInner } from '/@/components/Modal';
|
|
|
+ import { cloneDeep } from 'lodash-es';
|
|
|
+ import { Time } from '/@/components/Time';
|
|
|
+ import printJS from 'print-js';
|
|
|
+ export default defineComponent({
|
|
|
+ name: 'PrintModal',
|
|
|
+ components: { BasicModal, BasicTable, Time },
|
|
|
+ emits: ['success', 'register', 'reload'],
|
|
|
+ setup() {
|
|
|
+ // const isUpdate = ref(true);
|
|
|
+ let modalRecord = reactive({
|
|
|
+ id: 0,
|
|
|
+ address: '',
|
|
|
+ consignee: '',
|
|
|
+ mobile: '',
|
|
|
+ orderSn: '',
|
|
|
+ addTime: '',
|
|
|
+ goodsPrice: '',
|
|
|
+ });
|
|
|
+ const columns: BasicColumn[] = [
|
|
|
+ {
|
|
|
+ title: '清单',
|
|
|
+ dataIndex: 'goodsName',
|
|
|
+ width: 180,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '数量',
|
|
|
+ dataIndex: 'number',
|
|
|
+ ellipsis: false,
|
|
|
+ width: 180,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '单价',
|
|
|
+ dataIndex: 'retailPrice',
|
|
|
+ ellipsis: false,
|
|
|
+ width: 180,
|
|
|
+ slots: { customRender: 'retailPrice' },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '总价',
|
|
|
+ dataIndex: 'marketPrice',
|
|
|
+ ellipsis: false,
|
|
|
+ width: 180,
|
|
|
+ slots: { customRender: 'marketPrice' },
|
|
|
+ },
|
|
|
+ ];
|
|
|
+
|
|
|
+ const [registerTable, { setTableData, redoHeight }] = useTable({
|
|
|
+ title: '订单列表',
|
|
|
+
|
|
|
+ columns: columns,
|
|
|
+ // useSearchForm: false,
|
|
|
+ // formConfig: searchForm,
|
|
|
+ // clickToRowSelect: false,
|
|
|
+ // showTableSetting: true,
|
|
|
+ // tableSetting: { fullScreen: true },
|
|
|
+ showIndexColumn: false,
|
|
|
+ // maxHeight: 250,
|
|
|
+ // resizeHeightOffset: 0,
|
|
|
+ isCanResizeParent: true,
|
|
|
+ // rowKey: 'id',
|
|
|
+ pagination: false,
|
|
|
+
|
|
|
+ bordered: true,
|
|
|
+ });
|
|
|
+
|
|
|
+ const [register, { closeModal }] = useModalInner((data) => {
|
|
|
+ data && onDataReceive(data);
|
|
|
+ });
|
|
|
+ function onDataReceive(data) {
|
|
|
+ console.log('data', data);
|
|
|
+ // modalRecord = { ...cloneDeep(data) };
|
|
|
+ // console.log('modalRecord', modalRecord);
|
|
|
+ modalRecord.consignee = data.consignee;
|
|
|
+ modalRecord.address = data.address;
|
|
|
+ modalRecord.mobile = data.mobile;
|
|
|
+ modalRecord.orderSn = data.orderSn;
|
|
|
+ modalRecord.addTime = data.addTime;
|
|
|
+ modalRecord.goodsPrice = data.goodsPrice;
|
|
|
+ // modalRecord.brandId = data.brandId;
|
|
|
+
|
|
|
+ nextTick(() => {
|
|
|
+ setTableData(cloneDeep(data.goodsList));
|
|
|
+ redoHeight();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ async function handlePrint() {
|
|
|
+ printJS({
|
|
|
+ printable: 'printTable',
|
|
|
+ type: 'html',
|
|
|
+ style: 'table th td { border: 1px solid black; border-collapse: collapse; } }',
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ return {
|
|
|
+ register,
|
|
|
+
|
|
|
+ closeModal,
|
|
|
+ registerTable,
|
|
|
+ modalRecord,
|
|
|
+ handlePrint,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ });
|
|
|
+</script>
|