<template> <a-card :bordered="false" :class="'cust-erp-sub-tab'"> <!-- 操作按钮区域 --> <div class="table-operator" v-if="mainId"> <a-button @click="handleAdd" v-has="'shipmentDetail:add'" type="primary" icon="plus">{{ $t('button.new') }}</a-button> <a-button v-has="'shipmentDetail:export'" type="primary" icon="download" @click="handleExportXls('出库单详情')">{{ $t('button.expand') }}</a-button> <a-upload v-has="'shipmentDetail:import'" name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel"> <a-button type="primary" icon="import">{{ $t('button.import') }}</a-button> </a-upload> <a-dropdown v-if="selectedRowKeys.length > 0"> <a-menu slot="overlay" v-has="'shipmentDetail:deleteBatch'"> <a-menu-item key="1" @click="batchDel"> <a-icon type="delete"/>{{$t('button.delete')}} </a-menu-item> </a-menu> <a-button style="margin-left: 8px">{{$t('button.multiSelectActions')}} <a-icon type="down"/> </a-button> </a-dropdown> </div> <!-- table区域-begin --> <div> <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;"> <i class="anticon anticon-info-circle ant-alert-icon"></i> {{ $t('button.selected') }} <a style="font-weight: 600">{{ selectedRowKeys.length }}</a> {{ $t('button.item') }} <a style="margin-left: 24px" @click="onClearSelected">{{ $t('button.clearAll') }}</a> </div> <a-table ref="table" size="middle" bordered rowKey="id" :scroll="{x:true}" :columns="columns" :dataSource="dataSource" :pagination="ipagination" :loading="loading" :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" @change="handleTableChange"> <span slot="status_dictText" slot-scope="status_dictText"> <a-tag :key="status_dictText" :color="getStatusColor(status_dictText)"> {{ status_dictText }} </a-tag> </span> <span slot="inventoryStatus_dictText" slot-scope="inventoryStatus_dictText"> <a-tag :key="inventoryStatus_dictText" :color="getStatusColor(inventoryStatus_dictText)"> {{ inventoryStatus_dictText }} </a-tag> </span> <span slot="action" slot-scope="text, record"> <a v-if=" (flowStatus == '15' && flowStatus != '20' && record.status < 800) || (flowOff == '0' && record.status < 800)" @click="combine(record)">配盘</a> <a v-has="'shipmentDetail:edit'" v-if="record.status == 0 && record.referCode == null" @click="handleEdit(record)"><a-divider type="vertical"/>{{$t('button.edit')}}</a> <a-popconfirm v-has="'shipmentDetail:delete'" v-if="record.status == 0 && record.referCode == null" :title="$t('button.deletingIt')" @confirm="() => handleDelete(record.id)"> <a-divider type="vertical"/><a>{{$t('button.delete')}}</a> </a-popconfirm> </span> </a-table> </div> <shipmentDetail-modal ref="modalForm" @ok="modalFormOk" :mainId="mainId"></shipmentDetail-modal> <shipment-detail-edit-modal ref="modalEditForm" @ok="modalFormOk" @close="searchQuery" :mainId="mainId"></shipment-detail-edit-modal> <shipment-detail-combine-modal ref="modalCombineForm" @ok="modalFormOk" @close="searchQuery" :mainId="mainId"></shipment-detail-combine-modal> </a-card> </template> <script> import {JeecgListMixin} from '@/mixins/JeecgListMixin' import ShipmentDetailModal from './modules/ShipmentDetailModal' import ShipmentDetailEditModal from './modules/ShipmentDetailEditModal' import ShipmentDetailCombineModal from './modules/ShipmentDetailCombineModal' export default { name: "ShipmentDetailList", mixins: [JeecgListMixin], components: {ShipmentDetailCombineModal, ShipmentDetailEditModal, ShipmentDetailModal}, props: { mainId: { type: String, default: '', required: false }, flowStatus: { type: String, default: '', required: false }, flowOff: { type: String, default: '', required: false } }, watch: { mainId: { immediate: true, handler(val) { if (!this.mainId) { this.clearList() } else { this.queryParam['shipmentId'] = val this.loadData(1); } } } }, data() { return { description: '出库单管理页面', disableMixinCreated: true, // 表头 columns: [ { title: '单据详情ID', align: "center", sorter: true, dataIndex: 'id' }, { title: '物料编码', align: "center", dataIndex: 'materialCode' }, { title: '物料名称', align: "center", dataIndex: 'materialName' }, { title: '物料规格', align: "center", dataIndex: 'materialSpec' }, { title: '物料单位', align: "center", dataIndex: 'materialUnit' }, { title: '单据数量', align: "center", dataIndex: 'qty' }, { title: '配盘数量', align: "center", dataIndex: 'taskQty' }, { title: '已出数量', align: "center", dataIndex: 'shipmentQty' }, { title: '可出数量', align: "center", dataIndex: 'availableQty' }, { title: '库存数量', align: "center", dataIndex: 'inventoryQty' }, { title: '库存状态', align: "center", dataIndex: 'inventoryStatus_dictText', scopedSlots: {customRender: 'inventoryStatus_dictText'} }, { title: '批次', align: "center", dataIndex: 'batch' }, { title: '单据状态', align: "center", dataIndex: 'status_dictText', scopedSlots: {customRender: 'status_dictText'} }, { title: this.$t('system.createBy'), align: "center", dataIndex: 'createBy' }, { title: this.$t('system.createTime'), align: "center", dataIndex: 'createTime' }, { title: this.$t('system.updater'), align: "center", dataIndex: 'updateBy' }, { title: this.$t('system.updateTime'), align: "center", dataIndex: 'updateTime' }, { title: this.$t('system.options'), dataIndex: 'action', align: "center", fixed: "right", width: 147, scopedSlots: {customRender: 'action'}, } ], url: { list: "/shipment/shipmentHeader/listShipmentDetailByMainId", delete: "/shipment/shipmentHeader/deleteShipmentDetail", deleteBatch: "/shipment/shipmentHeader/deleteBatchShipmentDetail", exportXlsUrl: "/shipment/shipmentHeader/exportShipmentDetail", importUrl: "/shipment/shipmentHeader/importShipmentDetail", }, dictOptions: { firstStatus: [], lastStatus: [], } } }, created() { }, computed: { importExcelUrl() { return `${window._CONFIG['domianURL']}/${this.url.importUrl}/${this.mainId}`; } }, methods: { getStatusColor(status) { const colors = { '新建': 'green', '出库组盘': 'Skyblue', '等待下架': 'blue', '下架': 'darkorange', '过账': 'purple', '回传': 'grey', '回传失败': 'red', '良品': 'green', '报废品': 'purple', '待确认 ': 'grey', '次品': 'red', default: 'blue' }; return colors[status] || colors.default; }, clearList() { this.dataSource = [] this.selectedRowKeys = [] this.ipagination.current = 1 }, combine(record) { this.$refs.modalCombineForm.edit(record); this.$refs.modalCombineForm.title = "配盘"; this.$refs.modalCombineForm.disableSubmit = false; }, edit(record) { this.$refs.modalEditForm.edit(record); this.$refs.modalEditForm.title = this.$t('button.edit'); this.$refs.modalEditForm.disableSubmit = false; }, } } </script> <style scoped> @import '~@assets/less/common.less' </style>