|
@@ -2,7 +2,7 @@
|
|
<div class="p-4">
|
|
<div class="p-4">
|
|
<BasicTable @register="registerTable" :rowSelection="{ type: 'checkbox' }">
|
|
<BasicTable @register="registerTable" :rowSelection="{ type: 'checkbox' }">
|
|
<template #toolbar>
|
|
<template #toolbar>
|
|
- <!-- <a-button type="primary" @click="sendPackage"> 发货</a-button> -->
|
|
|
|
|
|
+ <a-button type="primary" @click="exportExcel"> 导出</a-button>
|
|
<PopConfirmButton
|
|
<PopConfirmButton
|
|
title="是否确定收货?"
|
|
title="是否确定收货?"
|
|
primary
|
|
primary
|
|
@@ -57,6 +57,7 @@
|
|
</template>
|
|
</template>
|
|
</BasicTable>
|
|
</BasicTable>
|
|
<ConfirmModal @register="registerConfirmModal" @reload="reload" />
|
|
<ConfirmModal @register="registerConfirmModal" @reload="reload" />
|
|
|
|
+ <PrintModal @register="registerPrintModal" @reload="reload" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
<script lang="ts">
|
|
<script lang="ts">
|
|
@@ -70,19 +71,34 @@
|
|
TableImg,
|
|
TableImg,
|
|
} from '/@/components/Table';
|
|
} from '/@/components/Table';
|
|
import { useMessage } from '/@/hooks/web/useMessage';
|
|
import { useMessage } from '/@/hooks/web/useMessage';
|
|
- // import { Switch } from 'ant-design-vue';
|
|
|
|
- // import { h } from 'vue';
|
|
|
|
- import { ListApi, BrandListApi } from '/@/api/order/list';
|
|
|
|
|
|
+
|
|
|
|
+ import { ListApi, BrandListApi, GetOrderInfoApi, exportExcelApi } from '/@/api/order/list';
|
|
import { useI18n } from '/@/hooks/web/useI18n';
|
|
import { useI18n } from '/@/hooks/web/useI18n';
|
|
// import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
|
|
// import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
|
|
import { useGo } from '/@/hooks/web/usePage';
|
|
import { useGo } from '/@/hooks/web/usePage';
|
|
import { Time } from '/@/components/Time';
|
|
import { Time } from '/@/components/Time';
|
|
import { PopConfirmButton } from '/@/components/Button';
|
|
import { PopConfirmButton } from '/@/components/Button';
|
|
- import printJS from 'print-js';
|
|
|
|
|
|
+
|
|
import { useModal } from '/@/components/Modal';
|
|
import { useModal } from '/@/components/Modal';
|
|
import ConfirmModal from './confirmModal.vue';
|
|
import ConfirmModal from './confirmModal.vue';
|
|
|
|
+ import PrintModal from './printModal.vue';
|
|
|
|
+ import {
|
|
|
|
+ downloadByUrl,
|
|
|
|
+ // downloadByData,
|
|
|
|
+ // downloadByBase64,
|
|
|
|
+ // downloadByOnlineUrl,
|
|
|
|
+ } from '/@/utils/file/download';
|
|
|
|
+
|
|
export default defineComponent({
|
|
export default defineComponent({
|
|
- components: { BasicTable, TableAction, TableImg, Time, PopConfirmButton, ConfirmModal },
|
|
|
|
|
|
+ components: {
|
|
|
|
+ BasicTable,
|
|
|
|
+ TableAction,
|
|
|
|
+ TableImg,
|
|
|
|
+ Time,
|
|
|
|
+ PopConfirmButton,
|
|
|
|
+ ConfirmModal,
|
|
|
|
+ PrintModal,
|
|
|
|
+ },
|
|
setup() {
|
|
setup() {
|
|
const { createMessage } = useMessage();
|
|
const { createMessage } = useMessage();
|
|
const go = useGo();
|
|
const go = useGo();
|
|
@@ -254,7 +270,9 @@
|
|
|
|
|
|
const [registerConfirmModal, { openModal: openConfirmModal }] = useModal();
|
|
const [registerConfirmModal, { openModal: openConfirmModal }] = useModal();
|
|
|
|
|
|
- const [registerTable, { getSelectRowKeys, reload }] = useTable({
|
|
|
|
|
|
+ const [registerPrintModal, { openModal: openPrintModal }] = useModal();
|
|
|
|
+
|
|
|
|
+ const [registerTable, { getSelectRowKeys, getSelectRows, reload }] = useTable({
|
|
title: '订单列表',
|
|
title: '订单列表',
|
|
api: ListApi,
|
|
api: ListApi,
|
|
columns: columns,
|
|
columns: columns,
|
|
@@ -266,6 +284,7 @@
|
|
showIndexColumn: false,
|
|
showIndexColumn: false,
|
|
rowKey: 'id',
|
|
rowKey: 'id',
|
|
pagination: { pageSize: 20 },
|
|
pagination: { pageSize: 20 },
|
|
|
|
+ ellipsis: false,
|
|
fetchSetting: {
|
|
fetchSetting: {
|
|
pageField: 'page',
|
|
pageField: 'page',
|
|
sizeField: 'limit',
|
|
sizeField: 'limit',
|
|
@@ -337,21 +356,33 @@
|
|
return;
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- function printDetail(record: Recordable) {
|
|
|
|
|
|
+ async function printDetail(record: Recordable) {
|
|
console.log('record', record);
|
|
console.log('record', record);
|
|
- printJS({
|
|
|
|
- printable: [
|
|
|
|
- { name: '订单号', email: '20210908174503807397842', phone: '123' },
|
|
|
|
- { name: 'qq', email: '456@gmail.com', phone: '456' },
|
|
|
|
- ],
|
|
|
|
- properties: ['name', 'email', 'phone'],
|
|
|
|
- type: 'json',
|
|
|
|
- gridHeaderStyle: 'color: red; border: 2px solid #3971A5;',
|
|
|
|
- gridStyle: 'border: 2px solid #3971A5;',
|
|
|
|
- header: '<h3 class="custom-h3">订单详情</h3>',
|
|
|
|
- documentTitle: '订单详情',
|
|
|
|
- style: '.custom-h3 { color: red; }',
|
|
|
|
|
|
+ const orderInfo = await GetOrderInfoApi({
|
|
|
|
+ id: record.id,
|
|
|
|
+ brandId: record.brandId,
|
|
});
|
|
});
|
|
|
|
+ console.log('orderInfo', orderInfo);
|
|
|
|
+ openPrintModal(true, orderInfo);
|
|
|
|
+ }
|
|
|
|
+ async function exportExcel() {
|
|
|
|
+ const rows = getSelectRows();
|
|
|
|
+ if (rows.length === 0) {
|
|
|
|
+ createMessage.info(t('modal.atLeastOne'));
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ const data = rows.reduce((pre, current) => pre.concat(current['orderSn']), []).join(',');
|
|
|
|
+ console.log('data', data);
|
|
|
|
+ const res = await exportExcelApi({
|
|
|
|
+ orderSnList: data,
|
|
|
|
+ });
|
|
|
|
+ if (res.url) {
|
|
|
|
+ downloadByUrl({
|
|
|
|
+ url: res.url,
|
|
|
|
+ target: '_self',
|
|
|
|
+ });
|
|
|
|
+ }
|
|
}
|
|
}
|
|
|
|
|
|
return {
|
|
return {
|
|
@@ -369,6 +400,8 @@
|
|
registerConfirmModal,
|
|
registerConfirmModal,
|
|
reload,
|
|
reload,
|
|
printDetail,
|
|
printDetail,
|
|
|
|
+ registerPrintModal,
|
|
|
|
+ exportExcel,
|
|
};
|
|
};
|
|
},
|
|
},
|
|
});
|
|
});
|