skyouc
2024-12-21 c635d78b479510ebe2556a420948effcd30a0731
zy-asrs-admin/src/components/order/order/orderOut.vue
@@ -1,458 +1,458 @@
<script setup>
import { getCurrentInstance, ref, computed, reactive, defineProps } from 'vue';
import { useRouter } from "vue-router";
import { get, post, postBlob, postForm } from '@/utils/request.js'
import { message, Modal } from 'ant-design-vue';
import { globalState, logout } from '@/config.js';
import EditView from './edit.vue'
import { formatMessage } from '@/utils/localeUtils.js';
import useTableSearch from '@/utils/tableUtils.jsx';
import ShowOrderDetlComponent from '@/components/orderDetl/show.vue';
import {
    DownOutlined,
    UploadOutlined,
    DownloadOutlined,
} from "@ant-design/icons-vue";
const context = getCurrentInstance()?.appContext.config.globalProperties;
const emit = defineEmits(['pageReload'])
const router = useRouter();
const props = defineProps({
    ioModel: null
})
const TABLE_KEY = 'table-order';
let currentPage = 1;
let pageSize = 10;
const searchInput = ref("")
const searchParam = ref({
    orderNo: null,
    orderType: null,
    orderSettle: null,
})
const editChild = ref(null)
const showOrderDetlChild = ref(null)
const state = reactive({
    selectedRowKeys: [],
    loading: false,
});
let tableData = ref([]);
getPage();
const {
    getColumnSearchProps,
    handleResizeColumn,
} = useTableSearch();
const columns = [
    {
        title: formatMessage('db.man_order.order_no', '订单编号'),
        dataIndex: 'orderNo',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('orderNo'),
    },
    {
        title: formatMessage('db.man_order.order_time', '单据日期'),
        dataIndex: 'orderTime',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('orderTime'),
    },
    {
        title: formatMessage('db.man_order.order_type', '单据类型'),
        dataIndex: 'orderType$',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('orderType$'),
    },
    {
        title: formatMessage('db.man_order.order_settle', '单据状态'),
        dataIndex: 'orderSettle$',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('orderSettle$'),
    },
    {
        title: formatMessage('db.man_order.ioPri', '优先级'),
        dataIndex: 'ioPri',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('ioPri'),
    },
    {
        title: formatMessage('db.man_order.wave_no', '波次编号'),
        dataIndex: 'waveNo',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('waveNo'),
    },
    {
        title: formatMessage('db.man_order.status', '状态'),
        dataIndex: 'status$',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('status$'),
    },
    {
        title: formatMessage('db.man_order.create_time', '添加时间'),
        dataIndex: 'createTime$',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('createTime$'),
    },
    {
        title: formatMessage('db.man_order.create_by', '添加人员'),
        dataIndex: 'createBy$',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('createBy$'),
    },
    {
        title: formatMessage('db.man_order.update_time', '修改时间'),
        dataIndex: 'updateTime$',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('updateTime$'),
    },
    {
        title: formatMessage('db.man_order.update_by', '修改人员'),
        dataIndex: 'updateBy$',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('updateBy$'),
    },
    {
        title: formatMessage('db.man_order.memo', '备注'),
        dataIndex: 'memo',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('memo'),
    },
    {
        title: formatMessage('common.operation', '操作'),
        name: 'oper',
        dataIndex: 'oper',
        key: 'oper',
        width: 240,
        fixed: 'right',
    },
];
const hasSelected = computed(() => state.selectedRowKeys.length > 0);
const start = () => {
    state.loading = true;
    // ajax request after empty completing
    setTimeout(() => {
        state.loading = false;
        state.selectedRowKeys = [];
    }, 1000);
};
const onSelectChange = selectedRowKeys => {
    // console.log('selectedRowKeys changed: ', selectedRowKeys);
    state.selectedRowKeys = selectedRowKeys;
};
function getPage() {
    state.loading = true;
    let apiUrl = '/api/order/page';
    if (props.ioModel == 'in') {
        apiUrl = '/api/order/in/page';
    } else if (props.ioModel == 'out') {
        apiUrl = '/api/order/out/page';
    }
    post(apiUrl, {
        current: currentPage,
        pageSize: pageSize,
        condition: searchInput.value,
        _param: searchParam.value,
    }).then((resp) => {
        let result = resp.data;
        if (result.code == 200) {
            let data = result.data;
            tableData.value = data;
            state.loading = false;
        } else if (result.code === 401) {
            message.error(result.msg);
            logout()
        } else {
            message.error(result.msg);
        }
    })
}
const handleEdit = (item) => {
    editChild.value.open = true;
    editChild.value.formData = item == null ? editChild.value.initFormData : JSON.parse(JSON.stringify(item));
    editChild.value.isSave = item == null;
}
const handleDel = (rows) => {
    Modal.confirm({
        title: formatMessage('page.delete', '删除'),
        content: formatMessage('page.delete.confirm', '确定删除该项吗?'),
        maskClosable: true,
        onOk: async () => {
            const hide = message.loading(formatMessage('common.loading', '请求中'));
            try {
                post('/api/order/remove/' + rows.map((row) => row.id).join(','), {}).then(resp => {
                    let result = resp.data;
                    if (result.code === 200) {
                        message.success(result.msg);
                    } else {
                        message.error(result.msg);
                    }
                    getPage()
                    hide()
                })
            } catch (error) {
                message.error(formatMessage('common.fail', '请求失败'));
            }
        },
    });
}
const showDetl = (item) => {
    showOrderDetlChild.value.openDetl = true;
    showOrderDetlChild.value.orderId = item.id;
}
const handleExport = async (intl) => {
    postBlob('/api/order/export', {
        ioModel: props.ioModel,
        condition: searchInput.value,
        _param: searchParam.value,
    }).then(result => {
        const blob = new Blob([result.data], { type: 'application/vnd.ms-excel' });
        window.location.href = window.URL.createObjectURL(blob);
        return true;
    })
};
const onSearch = () => {
    // console.log('search');
    getPage()
}
const onPageChange = (page, size) => {
    currentPage = page;
    pageSize = size;
    getPage();
}
function handleTableReload(value) {
    getPage()
}
const handleSyncOrderClick = (e) => {
    if (e.key == 'import') {
        importTemplate()
    } else if (e.key == 'export') {
        exportTemplate()
    }
}
const importTemplate = () => {
    //导入模板
}
const exportTemplate = () => {
    //模板导出
    postBlob('/api/order/exportTemplate', {}).then(result => {
        const blob = new Blob([result.data], { type: 'application/vnd.ms-excel' });
        window.location.href = window.URL.createObjectURL(blob);
        return true;
    })
}
const fileList = ref([]);
const handleUploadChange = info => {
    if (info.file.status !== 'uploading') {
        // console.log(info.file, info.fileList);
    }
    if (info.file.status === 'done') {
        let result = info.file.response;
        if (result.code == 200) {
            message.success(`${info.file.name} ${formatMessage('page.upload.success', '上传成功')}`);
            getPage()
        } else {
            message.error(result.msg);
        }
    } else if (info.file.status === 'error') {
        message.error(`${info.file.name} file upload failed.`);
    }
};
const channel = ref(null)
const channelList = ref(null);
channelQuery();
function channelQuery() {
    post('/api/cacheSite/channel/list', {}).then(resp => {
        let result = resp.data;
        if (result.data == null) {
            return
        }
        let tmp = []
        result.data.forEach((item) => {
            tmp.push({
                label: item,
                value: item
            })
        })
        channelList.value = tmp;
        if (tmp.length > 0) {
            let data = tmp[0]
            channel.value = [data.value];
        }
    })
}
const handleGenerateWave = () => {
    let orderIdList = [];
    state.selectedRowKeys.forEach((id) => {
        orderIdList.push(id)
    })
    if (orderIdList.length == 0) {
        message.error(formatMessage("page.orderOut.mergeOrderOut.error", "请选择至少一条订单"));
        return;
    }
    post('/api/out/wave/generate', {
        orderIds: orderIdList,
        channels: channel.value
    }).then((resp) => {
        let result = resp.data;
        if (result.code == 200) {
            message.success(formatMessage('page.add.success', '成功'));
            emit('pageReload', 'reload')
        } else {
            message.error(result.msg);
        }
    })
}
const orderTypeQueryList = ref(null);
orderTypeQuery();
function orderTypeQuery() {
    postForm('/api/orderType/query', {
        type: 2
    }).then(resp => {
        let result = resp.data;
        orderTypeQueryList.value = result.data;
    })
}
const orderSettleQueryList = ref(null);
orderSettleQuery();
function orderSettleQuery() {
    postForm('/api/orderSettle/query', {}).then(resp => {
        let result = resp.data;
        orderSettleQueryList.value = result.data;
    })
}
</script>
<script>
export default {
    name: '订单'
}
</script>
<template>
    <div>
        <EditView ref="editChild" @tableReload="handleTableReload"
            :ioModel="ioModel == 'in' ? 1 : ioModel == 'out' ? 2 : null" />
        <div class="table-header">
            <div style="display: flex;">
                <div style="margin-right: 10px;">
                    <a-input v-model:value="searchParam.orderNo"
                        :placeholder="formatMessage('page.order.orderNo.input', '请输入订单编号')"
                        style="width: 140px;margin-right: 10px;" />
                    <a-select v-model:value="searchParam.orderSettle"
                        :placeholder="formatMessage('page.order.orderSettle.select', '请选择单据状态')"
                        style="width: 140px;margin-right: 10px;" show-search allowClear :options="orderSettleQueryList"
                        optionFilterProp="label" optionLabelProp="label">
                    </a-select>
                    <a-select v-model:value="searchParam.orderType"
                        :placeholder="formatMessage('page.order.orderType.select', '请选择单据类型')"
                        style="width: 140px;margin-right: 10px;" show-search allowClear :options="orderTypeQueryList"
                        optionFilterProp="label" optionLabelProp="label">
                    </a-select>
                    <a-input-search v-model:value="searchInput" :placeholder="formatMessage('page.input', '请输入')"
                        style="width: 200px;" @search="onSearch" />
                </div>
                <div>
                    <a-select v-model:value="channel" :options="channelList" mode="multiple"
                        style="width: 100px;"></a-select>
                    <a-button @click="handleGenerateWave()">{{ formatMessage('common.generateWave', '生成波次')
                        }}</a-button>
                </div>
            </div>
            <div class="table-header-right">
                <a-dropdown>
                    <template #overlay>
                        <a-menu @click="handleSyncOrderClick">
                            <a-menu-item key="import">
                                <a-upload v-model:file-list="fileList" name="file" action="/api/order/upload"
                                    @change="handleUploadChange" :showUploadList="false" :headers="{
                                        Authorization: globalState.token
                                    }">
                                    <UploadOutlined />
                                    {{ formatMessage('page.order.import', '单据导入') }}
                                </a-upload>
                            </a-menu-item>
                            <a-menu-item key="export">
                                <DownloadOutlined />
                                {{ formatMessage('page.order.export.template', '导出模板') }}
                            </a-menu-item>
                        </a-menu>
                    </template>
                    <a-button>
                        {{ formatMessage('page.order.sync', '单据同步') }}
                        <DownOutlined />
                    </a-button>
                </a-dropdown>
                <a-button @click="handleEdit(null)" type="primary">{{ formatMessage('page.add', '添加') }}</a-button>
                <a-button @click="handleExport">{{ formatMessage('page.export', '导出') }}</a-button>
            </div>
        </div>
        <a-table :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }"
            :data-source="tableData.records" :defaultExpandAllRows="false" :key="TABLE_KEY" rowKey="id"
            :pagination="{ total: tableData.total, onChange: onPageChange }"
            :scroll="{ y: 768, scrollToFirstRowOnChange: true }" :columns="columns" @resizeColumn="handleResizeColumn"
            :loading="state.loading">
            <template #bodyCell="{ column, text, record }">
                <template v-if="column.dataIndex === 'oper'">
                    <div style="display: flex;justify-content: space-evenly;">
                        <a-button type="link" primary @click="showDetl(record)">{{ formatMessage('page.order.orderDetl',
                            '订单明细')
                            }}</a-button>
                        <a-button type="link" primary @click="handleEdit(record)">{{ formatMessage('page.edit', '编辑')
                            }}</a-button>
                        <a-button type="link" danger @click="handleDel([record])">{{ formatMessage('page.delete', '删除')
                            }}</a-button>
                    </div>
                </template>
            </template>
        </a-table>
        <ShowOrderDetlComponent ref="showOrderDetlChild" />
    </div>
</template>
<style></style>
<script setup>
import { getCurrentInstance, ref, computed, reactive, defineProps } from 'vue';
import { useRouter } from "vue-router";
import { get, post, postBlob, postForm } from '@/utils/request.js'
import { message, Modal } from 'ant-design-vue';
import { globalState, logout } from '@/config.js';
import EditView from './edit.vue'
import { formatMessage } from '@/utils/localeUtils.js';
import useTableSearch from '@/utils/tableUtils.jsx';
import ShowOrderDetlComponent from '@/components/orderDetl/show.vue';
import {
    DownOutlined,
    UploadOutlined,
    DownloadOutlined,
} from "@ant-design/icons-vue";
const context = getCurrentInstance()?.appContext.config.globalProperties;
const emit = defineEmits(['pageReload'])
const router = useRouter();
const props = defineProps({
    ioModel: null
})
const TABLE_KEY = 'table-order';
let currentPage = 1;
let pageSize = 10;
const searchInput = ref("")
const searchParam = ref({
    orderNo: null,
    orderType: null,
    orderSettle: null,
})
const editChild = ref(null)
const showOrderDetlChild = ref(null)
const state = reactive({
    selectedRowKeys: [],
    loading: false,
});
let tableData = ref([]);
getPage();
const {
    getColumnSearchProps,
    handleResizeColumn,
} = useTableSearch();
const columns = [
    {
        title: formatMessage('db.man_order.order_no', '订单编号'),
        dataIndex: 'orderNo',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('orderNo'),
    },
    {
        title: formatMessage('db.man_order.order_time', '单据日期'),
        dataIndex: 'orderTime',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('orderTime'),
    },
    {
        title: formatMessage('db.man_order.order_type', '单据类型'),
        dataIndex: 'orderType$',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('orderType$'),
    },
    {
        title: formatMessage('db.man_order.order_settle', '单据状态'),
        dataIndex: 'orderSettle$',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('orderSettle$'),
    },
    {
        title: formatMessage('db.man_order.ioPri', '优先级'),
        dataIndex: 'ioPri',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('ioPri'),
    },
    {
        title: formatMessage('db.man_order.wave_no', '波次编号'),
        dataIndex: 'waveNo',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('waveNo'),
    },
    {
        title: formatMessage('db.man_order.status', '状态'),
        dataIndex: 'status$',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('status$'),
    },
    {
        title: formatMessage('db.man_order.create_time', '添加时间'),
        dataIndex: 'createTime$',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('createTime$'),
    },
    {
        title: formatMessage('db.man_order.create_by', '添加人员'),
        dataIndex: 'createBy$',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('createBy$'),
    },
    {
        title: formatMessage('db.man_order.update_time', '修改时间'),
        dataIndex: 'updateTime$',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('updateTime$'),
    },
    {
        title: formatMessage('db.man_order.update_by', '修改人员'),
        dataIndex: 'updateBy$',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('updateBy$'),
    },
    {
        title: formatMessage('db.man_order.memo', '备注'),
        dataIndex: 'memo',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('memo'),
    },
    {
        title: formatMessage('common.operation', '操作'),
        name: 'oper',
        dataIndex: 'oper',
        key: 'oper',
        width: 240,
        fixed: 'right',
    },
];
const hasSelected = computed(() => state.selectedRowKeys.length > 0);
const start = () => {
    state.loading = true;
    // ajax request after empty completing
    setTimeout(() => {
        state.loading = false;
        state.selectedRowKeys = [];
    }, 1000);
};
const onSelectChange = selectedRowKeys => {
    // console.log('selectedRowKeys changed: ', selectedRowKeys);
    state.selectedRowKeys = selectedRowKeys;
};
function getPage() {
    state.loading = true;
    let apiUrl = '/api/order/page';
    if (props.ioModel == 'in') {
        apiUrl = '/api/order/in/page';
    } else if (props.ioModel == 'out') {
        apiUrl = '/api/order/out/page';
    }
    post(apiUrl, {
        current: currentPage,
        pageSize: pageSize,
        condition: searchInput.value,
        _param: searchParam.value,
    }).then((resp) => {
        let result = resp.data;
        if (result.code == 200) {
            let data = result.data;
            tableData.value = data;
            state.loading = false;
        } else if (result.code === 401) {
            message.error(result.msg);
            logout()
        } else {
            message.error(result.msg);
        }
    })
}
const handleEdit = (item) => {
    editChild.value.open = true;
    editChild.value.formData = item == null ? editChild.value.initFormData : JSON.parse(JSON.stringify(item));
    editChild.value.isSave = item == null;
}
const handleDel = (rows) => {
    Modal.confirm({
        title: formatMessage('page.delete', '删除'),
        content: formatMessage('page.delete.confirm', '确定删除该项吗?'),
        maskClosable: true,
        onOk: async () => {
            const hide = message.loading(formatMessage('common.loading', '请求中'));
            try {
                post('/api/order/remove/' + rows.map((row) => row.id).join(','), {}).then(resp => {
                    let result = resp.data;
                    if (result.code === 200) {
                        message.success(result.msg);
                    } else {
                        message.error(result.msg);
                    }
                    getPage()
                    hide()
                })
            } catch (error) {
                message.error(formatMessage('common.fail', '请求失败'));
            }
        },
    });
}
const showDetl = (item) => {
    showOrderDetlChild.value.openDetl = true;
    showOrderDetlChild.value.orderId = item.id;
}
const handleExport = async (intl) => {
    postBlob('/api/order/export', {
        ioModel: props.ioModel,
        condition: searchInput.value,
        _param: searchParam.value,
    }).then(result => {
        const blob = new Blob([result.data], { type: 'application/vnd.ms-excel' });
        window.location.href = window.URL.createObjectURL(blob);
        return true;
    })
};
const onSearch = () => {
    // console.log('search');
    getPage()
}
const onPageChange = (page, size) => {
    currentPage = page;
    pageSize = size;
    getPage();
}
function handleTableReload(value) {
    getPage()
}
const handleSyncOrderClick = (e) => {
    if (e.key == 'import') {
        importTemplate()
    } else if (e.key == 'export') {
        exportTemplate()
    }
}
const importTemplate = () => {
    //导入模板
}
const exportTemplate = () => {
    //模板导出
    postBlob('/api/order/exportTemplate', {}).then(result => {
        const blob = new Blob([result.data], { type: 'application/vnd.ms-excel' });
        window.location.href = window.URL.createObjectURL(blob);
        return true;
    })
}
const fileList = ref([]);
const handleUploadChange = info => {
    if (info.file.status !== 'uploading') {
        // console.log(info.file, info.fileList);
    }
    if (info.file.status === 'done') {
        let result = info.file.response;
        if (result.code == 200) {
            message.success(`${info.file.name} ${formatMessage('page.upload.success', '上传成功')}`);
            getPage()
        } else {
            message.error(result.msg);
        }
    } else if (info.file.status === 'error') {
        message.error(`${info.file.name} file upload failed.`);
    }
};
const channel = ref(null)
const channelList = ref(null);
channelQuery();
function channelQuery() {
    post('/api/cacheSite/channel/list', {}).then(resp => {
        let result = resp.data;
        if (result.data == null) {
            return
        }
        let tmp = []
        result.data.forEach((item) => {
            tmp.push({
                label: item,
                value: item
            })
        })
        channelList.value = tmp;
        if (tmp.length > 0) {
            let data = tmp[0]
            channel.value = [data.value];
        }
    })
}
const handleGenerateWave = () => {
    let orderIdList = [];
    state.selectedRowKeys.forEach((id) => {
        orderIdList.push(id)
    })
    if (orderIdList.length == 0) {
        message.error(formatMessage("page.orderOut.mergeOrderOut.error", "请选择至少一条订单"));
        return;
    }
    post('/api/out/wave/generate', {
        orderIds: orderIdList,
        channels: channel.value
    }).then((resp) => {
        let result = resp.data;
        if (result.code == 200) {
            message.success(formatMessage('page.add.success', '成功'));
            emit('pageReload', 'reload')
        } else {
            message.error(result.msg);
        }
    })
}
const orderTypeQueryList = ref(null);
orderTypeQuery();
function orderTypeQuery() {
    postForm('/api/orderType/query', {
        type: 2
    }).then(resp => {
        let result = resp.data;
        orderTypeQueryList.value = result.data;
    })
}
const orderSettleQueryList = ref(null);
orderSettleQuery();
function orderSettleQuery() {
    postForm('/api/orderSettle/query', {}).then(resp => {
        let result = resp.data;
        orderSettleQueryList.value = result.data;
    })
}
</script>
<script>
export default {
    name: '订单'
}
</script>
<template>
    <div>
        <EditView ref="editChild" @tableReload="handleTableReload"
            :ioModel="ioModel == 'in' ? 1 : ioModel == 'out' ? 2 : null" />
        <div class="table-header">
            <div style="display: flex;">
                <div style="margin-right: 10px;">
                    <a-input v-model:value="searchParam.orderNo"
                        :placeholder="formatMessage('page.order.orderNo.input', '请输入订单编号')"
                        style="width: 140px;margin-right: 10px;" />
                    <a-select v-model:value="searchParam.orderSettle"
                        :placeholder="formatMessage('page.order.orderSettle.select', '请选择单据状态')"
                        style="width: 140px;margin-right: 10px;" show-search allowClear :options="orderSettleQueryList"
                        optionFilterProp="label" optionLabelProp="label">
                    </a-select>
                    <a-select v-model:value="searchParam.orderType"
                        :placeholder="formatMessage('page.order.orderType.select', '请选择单据类型')"
                        style="width: 140px;margin-right: 10px;" show-search allowClear :options="orderTypeQueryList"
                        optionFilterProp="label" optionLabelProp="label">
                    </a-select>
                    <a-input-search v-model:value="searchInput" :placeholder="formatMessage('page.input', '请输入')"
                        style="width: 200px;" @search="onSearch" />
                </div>
                <div>
                    <a-select v-model:value="channel" :options="channelList" mode="multiple"
                        style="width: 100px;"></a-select>
                    <a-button @click="handleGenerateWave()">{{ formatMessage('common.generateWave', '生成波次')
                        }}</a-button>
                </div>
            </div>
            <div class="table-header-right">
                <a-dropdown>
                    <template #overlay>
                        <a-menu @click="handleSyncOrderClick">
                            <a-menu-item key="import">
                                <a-upload v-model:file-list="fileList" name="file" action="/api/order/upload"
                                    @change="handleUploadChange" :showUploadList="false" :headers="{
                                        Authorization: globalState.token
                                    }">
                                    <UploadOutlined />
                                    {{ formatMessage('page.order.import', '单据导入') }}
                                </a-upload>
                            </a-menu-item>
                            <a-menu-item key="export">
                                <DownloadOutlined />
                                {{ formatMessage('page.order.export.template', '导出模板') }}
                            </a-menu-item>
                        </a-menu>
                    </template>
                    <a-button>
                        {{ formatMessage('page.order.sync', '单据同步') }}
                        <DownOutlined />
                    </a-button>
                </a-dropdown>
                <a-button @click="handleEdit(null)" type="primary">{{ formatMessage('page.add', '添加') }}</a-button>
                <a-button @click="handleExport">{{ formatMessage('page.export', '导出') }}</a-button>
            </div>
        </div>
        <a-table :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }"
            :data-source="tableData.records" :defaultExpandAllRows="false" :key="TABLE_KEY" rowKey="id"
            :pagination="{ total: tableData.total, onChange: onPageChange }"
            :scroll="{ y: 768, scrollToFirstRowOnChange: true }" :columns="columns" @resizeColumn="handleResizeColumn"
            :loading="state.loading">
            <template #bodyCell="{ column, text, record }">
                <template v-if="column.dataIndex === 'oper'">
                    <div style="display: flex;justify-content: space-evenly;">
                        <a-button type="link" primary @click="showDetl(record)">{{ formatMessage('page.order.orderDetl',
                            '订单明细')
                            }}</a-button>
                        <a-button type="link" primary @click="handleEdit(record)">{{ formatMessage('page.edit', '编辑')
                            }}</a-button>
                        <a-button type="link" danger @click="handleDel([record])">{{ formatMessage('page.delete', '删除')
                            }}</a-button>
                    </div>
                </template>
            </template>
        </a-table>
        <ShowOrderDetlComponent ref="showOrderDetlChild" />
    </div>
</template>
<style></style>